Как работать с JS / CSS / Node.js / SQL в 2021 году

Языки эволюционируют. Поиск и изучение новых фишек отнимает у опытных web-разработчиков до 10 часов в неделю.

Вы же хотите дорасти до тимлида? Значит, нужно повышать квалификацию.

С подпиской на @sWebDev достаточно 5 минут в день, чтобы узнавать новые трюки JS / CSS / Node.js / SQL.

@sWebDev — это быстрые тесты, примеры кода и актуальные решения, которые сделают вас самым подготовленным сотрудником компании.

​Что такое хуки в React? В чем заключаются преимущества их использования?

Хуки - это встроенные функции, которые позволяют использовать состояние и методы жизненного цикла внутри функциональных компонентов.

Правила использования хуков
1. нельзя использовать внутри циклов, условий или вложенных функций
2. можно использовать либо внутри компонентов, либо внутри других хуков (в том числе, пользовательских, "кастомных", custom)

Основные хуки
useState()
useEffect()
useContext()

Дополнительные (продвинутые)
useReducer()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffect()
useDebugValue()

Преимущества хуков
1. С ними легче работать, их легче тестировать (как отдельные функции компонентов), они делают код чище, улучшают его читаемость - сложная логика может быть вынесена в "кастомный" хук
2. Позволяют разделять сложную логику на маленькие функции, используемые внутри компонентов
3. Повышают уровень "переиспользуемости" кода
4. Позволяют распределять логику между компонентами через пользовательские хуки
Являются более податливыми к перемещениям в дереве компонентов

Только уникальные

Создайте функцию, которая будет определять, содержит ли строка только уникальные символы.
Строка может содержать любой из 128 ASCII символов. Символы чувствительны к регистру.

Примеры:

 hasUniqueChars("  nAa")

false Потому что присутствует два пробела

 hasUniqueChars("abcdef")

true

 hasUniqueChars("aA")

true - чувствительна к регистру

 hasUniqueChars("++-")

false Пристутствует два +

Сколько внешних элементов может содержаться в JSX-выражении?

JSX-выражение должно содержать только один внешний (родительский) элемент. Например:

 const headings = (
     <div id = "outermost-element">
        <h1>Заголовок</h1>
        <h2>Еще один заголовок</h1>
     </div>
 )

Обратите внимание: для предотвращения рендеринга лишних DOM-элементов можно воспользоваться компонентом <React.Fragment></React.Fragment> или его сокращенной версией (<></>). Сокращенная версия работает не во всех вспомогательных инструментах.

Что такое LocalStorage и SessionStorage?

Веб-хранилище - это данные, хранящиеся локально в браузере пользователя.существует 2 типа веб-хранилищ: LocalStorage и SessionStorage.
В них вы можете хранить информацию в формате ключ-значение. Ключ и значение – это всегда строки.

Отличие между этими хранилищами сводится только к периоду времени, в течение которого они могут хранить данные, помещенные в них:

SessionStorage – выполняет это в течение определённого промежутка времени (сессии). Закрытие вкладки или браузера приводит их к удалению. При этом данные в SessionStorage сохраняются при обновлении страницы.

LocalStorage – осуществляет это в течение неограниченного времени. Они сохраняются при перезагрузке браузера и компьютера. Их длительность хранения ничем не ограничена. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их очень просто удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).

Что такое порталы (portals)?

Порталы предоставляют быстрый и удобный способ рендеринга дочернего компонента в узле DOM, находящимся за пределами иерархии DOM родительского компонента.

Обычно, компонент рендерит дерево элементов (как правило, с помощью JSX). React-элемент определяет, как должен выглядеть DOM родительского компонента.

 ReactDOM.createPortal(child, container)

Возможности
1. Дочерний компонент передается узлу, находящемуся в другом поддереве
2. По умолчанию таким узлом является document.body, но им может быть любой существующий DOM-элемент
3. Поддерживается рендеринг на стороне сервера
4. Массивы не требуется оборачивать в div или React.Fragment

Случаи использования
1. Модальные окна
2. Всплывающие подсказки
3. Раскрывающиеся меню
4. Виджеты и т.д.

HTTP/2 in Action (2019)

Данное руководство рассматривает HTTP/2, один из основных сетевых протоколов. Вы узнаете про то, как разрабатывался данный протокол, про обратную совместимость, основные характеристики и приемы работы с ним. Также в конце вас ждет небольшой обзор HTTP/3, который должен выйти совсем скоро.

Деление чисел

2520 - самое маленькое число, которое может быть разделено без остатка числами от 1 до 10.

Напишите функцию smallest(n), которая будет находить самое меньшее число, которое будет делиться на n. (n <= 40).

Примеры:
smallest(5) == 60
smallest(10) == 2520

React and React Native (2020)

React и React Native, инновационные фреймворки для разработки пользовательского интерфейса, созданы для написания качественных кроссплатформенных мобильных и веб-приложений. Данная книга была обновлена, чтобы соответствовать последней версии React. Поработав с книгой, вы сможете быстро создавать новые проекты. Для комфортного чтения необходимы знания JavaScript.

Посмотрите, как пишут код уровня Senior Frontend в Google или Uber

На собеседованиях и среди коллег обсуждают не работоспособность вашей программы, а то, как она написана.

Чтобы ваш код выглядел достойно и опрятно, опытные FrontEnd-разработчики создали канал @seniorFront.

— примеры лучших решений во Frontend-разработке

— тесты на проверку знаний, чтобы сравнить свой уровень с уровнем конкурентов

— статьи по JS, HTML, CSS за 2020

В каком проекте примените навыки, полученные после подписки на @seniorFront?

Что такое CSS переменные и как их использовать?

CSS переменные - это сущности, хранящие конкретные значения, которые можно повторно использовать в документе.
Их можно использовать, чтобы убрать дублирования в вашей таблице стилей.

Чтобы объявить переменную, вам сначала нужно решить, в какой области должна быть переменная. Если вы хотите, чтобы она была доступна глобально, просто определите её в псевдоклассе :root


 :root {
   --main-color: #ff6f69;
 }

Для получения доступа к переменной, нужно использовать функцию var() и передать имя переменной в качестве первого параметра.

 #noscript {
   color: var(--main-color); 
 }

Функция var поддерживает второй параметр - значение, которое будет использоваться, если переменная, переданная первым параметром, не определена:

 #noscript {
   color: var(--main-color, black);
 }

Вы также можете создавать переменные с локальной областью видимости.

 .alert {
   --alert-color: #ff6f69;
 }

Как использовать стили в React?

Атрибут style принимает объект JavaScript со свойствами в стиле camelCase, а не в виде CSS-строки. Это обеспечивает согласованность с JavaScript-свойствами, связанными со стилями, является более эффективным и закрывает дыры в безопасности (XSS).

 const divStyle = { 
   color: 'blue',
   backgroundImage: 'url(' + imgUrl + ')'
 };

 function HelloWorldComponent() {
   return <div style={divStyle}>Привет, народ!</div>
 }

Использование атрибута style для оформления элементов не рекомендуется. В большинстве случаев для ссылки на классы, определённые во внешнем CSS, следует использовать className.