Заметки фронтенд

HTML

Семантические теги

для придания смысла находящейся в них информации

DOM дерево

Document Object Model API

это программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями «родительский-дочерний».

Shadow DOM

Теневой DOM используется для инкапсуляции. Благодаря ему в компоненте есть собственное «теневое» DOM-дерево, к которому нельзя просто так обратиться из главного документа, у него могут быть изолированные CSS-правила и т.д.

Теневой DOM – это способ создать свой, изолированный, DOM для компонента.

1. shadowRoot = elem.attachShadow({mode: open|closed}) – создаёт теневой DOM для elem. Если mode="open", он доступен через свойство elem.shadowRoot.
2. Мы можем создать подэлементы внутри shadowRoot с помощью innerHTML или других методов DOM.

Элементы теневого DOM:

• Обладают собственной областью видимости идентификаторов
• Невидимы JavaScript селекторам из главного документа, таким как querySelector,
• Стилизуются своими стилями из теневого дерева, не из главного документа.

БЭМ

Архетектура построение интерфеса Блок элемент модификатор

Скрипты

тег скрипт подгрузить по ссылке или инлайн, можно подгружать динамически

HTTP

CSS

Адаптивная верстка

Медиазапросы, изменение поведения интерфеса в зависимости от условий.

Селекторы

+ и на одном уровне

"*" - вложенность

Псевод элементы и классы - :before after,, hover focus ...

препроцессоры -SASS LESS

Переменные

Анимации

JS/TS

стрелочная функция

TS - типизированная обертка над жс, для упрощения отлова ошибок, для понимания возвращаемых свойств и тд

https://my-js.org/docs/cheatsheet/ts/

разница между типом и интерфесом - тип может объединять, интерфейс только расширять, типу можно задать примитивы (емэил - стринг) инт

енам? когда использовать(н-р для четкого определения что приходит с сервера, строго заданный список констант)

основные типы​

• any - отсутствие типа
• string - строка
• number - число
• boolean - логическое значение (true или false)
• object - объект (не примитивное значение)
• undefined - неинициализированное значение (например, переменная без значения или несуществующее свойство объекта)
• null - явно установленное пустое значение
• void - null или undefined (обычно, используется для типизации значения, возвращаемого функцией)
• never - значение, которое не может возникнуть (например, когда выбрасывается исключение)
• unknown - значение неизвестного на момент определения типа

дженерик экстенд (универсальный типа может расширяться от другого т.е. обладать свойствами)

REACT

JSX & TSX что это - JSX выглядит как HTML, но под капотом он преобразуется в обычные объекты JavaScript. Вы не можете вернуть два объекта из функции, не обернув их в массив. Это объясняет, почему вы также не можете вернуть два тега JSX, не обернув их в другой тег или фрагмент.

createElement создает функцией объект

Виртуальный дом

Хуки для чего?

Основные:

useState = const[value, setValue] = useState(initial)// setValue(prev => new) вызывает ререндер.

useReducer: const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); использует функцию для обновления которая принимает изначальные state, и ключ action. это удобно для внесения логики обновления стейта.

useRef : const valueRef = useRef(initial), valueRef.current

useEffect: useEffect(()=>{ return()=>{}},[deps]), коллбэк вызывается каждый раз при изменении зависимостей, а возврат функции срабатывает каждый раз перед новым срабатываение эффекта и перед размонтированием компонента.

useContext: export? const ThemeContext = createContext('light');, ThemeContext .Provider - обернуть компонент , сам хук позволяет использовать данные, при измененнии данных в контексте вызывается рендер связанных компонентов.. т.к. обычно все приложение обернуто - лучше на отдельные данные делать свои контектсы чтоб не вызывать ререндер не связанных компонентов.

Оптимизация:

useCallback- кеширует(мемоизирует) функцию, и вызывается снова только когда меняются зависимости.

useMemo - is a hook which is used to cache the result of an expensive function inside a component, and only calls the expensive function when its dependencies change.

memo - is a higher-order component which is used to create an optimized version of a component that is re-rendered only when props change.

useDefferedValue - как правило используется с стейтом и суспенсом(прилоадер), позволяет отображать старые данные пока не загрузятся новые, и только потом делают рирендер компонента.

кастомные хуки? - несут под собой логику с комбинацией других хуков.

фрагмент или див? - фрагмент, лишний див увеличивает дом дерево и нагрузку.

Функциональные и классовые компоненты

HOC — это функция, которая на входе принимает один компонент, а на выходе возвращает новый с более расширенным функционалом. Часто для переиспользования компонентов. Если обычный компонент преобразует пропсы в UI, то компонент высшего порядка преобразует компонент в другой компонент.

Рендеринг в реакте -

SSR CSR

Исполнение кода на сервере - ресур сервера, страница приходит уже с подготовленными данными и построенным дом деревом

Клиентский рендеринг - ожидает данные от сервера, в это время сайт пустой, что в том числе влияет на поисковые роботы