nastyakitsune

import React, { useState, useEffect } from "react";
import "./index.css";

// const date = { dateNum: 199, dateType: 'min', dateInterval: 60000 } - prop for CountdownTimer

const CountdownTimer = ({ dateNum, dateType, dateInterval }) => {
  const [num, setNum] = useState(dateNum);

  useEffect(() => {
    const interval = setInterval(() => {

KRostyslav

// Файл "tsconfig.json":
// - устанавливает корневой каталог проекта TypeScript;
// - выполняет настройку параметров компиляции;
// - устанавливает файлы проекта.
// Присутствие файла "tsconfig.json" в папке указывает TypeScript, что это корневая папка проекта.
// Внутри "tsconfig.json" указываются настройки компилятора TypeScript и корневые файлы проекта.
// Программа компилятора "tsc" ищет файл "tsconfig.json" сначала в папке, где она расположена, затем поднимается выше и ищет в родительских папках согласно их вложенности друг в друга.
// Команда "tsc --project C:\path\to\my\project\folder" берет файл "tsconfig.json" из папки, расположенной по данному пути.
// Файл "tsconfig.json" может быть полностью пустым, тогда компилятор скомпилирует все файлы с настройками заданными по умолчанию.
// Опции компилятора, перечисленные в командной строке перезаписывают собой опции, заданные в файле "tsconfig.json".

neretin-trike

Препроцессор Stylus

Stylus - это препроцессор CSS, который был написан на JavaScript для Node.js.

Содержание:

1. Селекторы
2. Переменные
3. Интерполяция переменных
4. Операторы
5. Миксины
6. Хэши

neretin-trike

Препроцессор Pug(Jade)

Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

Содержание:

1. Теги
2. Текст
3. Атрибуты
4. Констуркция Switch Case
5. Циклы
6. Вставка JavaScript кода

neretin-trike

СОЧЕТАНИЕ КЛАВИШ VS

Частоиспользуемые сочетания клавиш в Visual Code

Файл

Ctr + Shift + F - искать в файлах и файлы
Ctr + Shift + N - новое окно редактора

Ctr + K O - открыть папку

neretin-trike

Чек-лист вёрстки

Для того чтобы отдавать вёрстку клиенту, достаточно обязательного соблюдения первых 5 пунктов. Для выдачи в продакшен — первых 6.

1. Соответствие макету
2. Кроссбраузерность, кодировка и DOCTYPE
3. Валидность (включая CSSLint и JSHint), доступность, микроформаты
4. Независимость блоков в CSS: минимизация каскада, использование техник БЭМ
5. Сайт должен нормально смотреться во всех стандартных разрешениях от 1024 и выше, не иметь горизонтального скролла и вписываться в экран мобильных устройств
6. Корректная работа при вбивании реального текста, надёжность вёрстки
7. Использование препроцессоров и систем сборки

neretin-trike

BASH / WINDOWS

pwd - вывести рабочий каталог
mkdir [имя папок] - создать папки
rm -r [имя папок] - удалить папки
touch [имя файлов] - создать файлы
touch [имя папки]/{[имя файла],[...]} - создать файлы внутри указанной папки
cd .. | [имя папки] - подняться на уровень вверх | перейти в дерикторию
ls -*a -*l - вывод файлов и папок в текущей директории *вместе со скрытыми *и информацией о размере и дате создания

echo ['текст'] >> [имя файла] - создать файл с указанным текстом

cdiggins

React Best practices

I have summarized and compiled a list of React.JS best practices from various sources across the internet.

From the React docs

• https://reactjs.org/docs/components-and-props.html

  • props must be readonly

• https://reactjs.org/docs/state-and-lifecycle.html

carl0zen

// Mixin like functionality

const textInput = props => `
  color: ${props.error ? color.white : color.base};
  background-color: ${props.error ? color.alert : color.white};
`;

export const Input = styled.input`
  ${textInput}
`;

iAdramelk

Английская версия: https://evilmartians.com/chronicles/bootstrap-an-intervention

Вводная часть

У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:

1. Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.

2. Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые п