Что такое 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.

Заглушить троллей

Тролли набежали в комменты! С ними можно разобраться, удалив все гласные буквы в их сообщениях. Напишите функцию, которая будет принимать строку и возвращать обработанную строку без гласных.

Пример:
"This website is for losers LOL!" станет "Ths wbst s fr lsrs LL!".

Расскажите про относительные единицы измерения в CSS

В CSS3 были добавлены относительные единицы измерения, такие как vh, vw, vmin, vmax. Эти единицы вычисляются относительно размеров окна браузера.

Если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw. Например, если высота окна браузера равна 900px, то 1vh будет равен 9px. Аналогично, если ширина окна браузера равна 1600px, то 1vw будет равен 16px.

vmin и vmax определяются минимальным или максимальным значением высоты или ширины. Например, если ширина окна браузера равна 1200px, а высота 700px, то vmin будет равен 7px, а vmax - 12px.

Ищешь годный материал по front end разработке?

FrontEndDev - канал для продвинутых веб-разработчиков.

На канале найдешь свежие статьи, фишки JS и TS, туториалы по современным фреймворкам, лучшие практики разработки и многое другое.

Рекомендуем подписаться - @front_end_dev

Как выполнить условный рендеринг компонентов в React?

В некоторых случаях вам нужно будет рендерить разные компоненты в зависимости от некоторого состояния. JSX не рендерит false или undefined, поэтому вы можете использовать короткие вычисления для рендеринга определенной части компонента только при удовлетворении условия:

 const MyComponent = ({ name, address }) => (
   <div>
     <h2>{name}</h2>
     {address &&
       <p>{address}</p>
     }
   </div>
 )

Если вам требуется условие if else, тогда используйте тернарный оператор:
const MyComponent = ({ name, address }) => (
<div>
<h2>{name}</h2>
{address
? <p>{address}</p>
: <p>{'Address is not available'}</p>
}
</div>
)

​Что такое предохранители (Error Boundaries) в React?

Error boundaries- это компоненты, которые отлавливают ошибки JavaScript, возникающие в любом дочернем компоненте, сообщают об этих ошибках и отображают резервный UI.

Классовый компонент становится предохранителем при определении в нем нового метода жизненного цикла componentDidCatch(error, info) или static getDerivedStateFromError() :

 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props)
     this.state = { hasError: false }
   }

   componentDidCatch(error, info) {
     // Вы также можете отправлять ошибки в специальный сервис по их обработке
     logErrorToMyService(error, info)
   }

   static getDerivedStateFromError(error) {
      // Обновляем состояние, чтобы при следующем рендеринге использовался запасной UI
      return { hasError: true };
    }

   render() {
     if (this.state.hasError) {
       // Вы можете рендерить любой резервный интерфейс
       return <h1>{'Что-то пошло не так.'}</h1>
     }
     return this.props.children
   }
 }

После этого, предохранитель используется как обычный компонент:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>