Как читать W3C-спецификации

Мы редко обращаемся к спецификации в том числе и потому, что ее сложно понять. Статья рассказывает, как читать спецификации правильно: https://proglib.io/w/61e84fe1

#docs

​Тренды JavaScript в 2022 году

Первый месяц 2022 года почти завершился, но впереди еще 11. Есть время угнаться за трендами.

https://proglib.io/w/d6b73b58

#tools

​Создание компонентной дизайн-системы UI

Зачем нужна и как создать сбалансированную компонентную дизайн-систему: https://proglib.io/w/e6bd53b5

#interface

​🧔📈 Повышение до тимлида: дорожная карта

Опыт и знания, которые вам нужно приобрести, чтобы стать тимлидом во фронтенде. Делимся списком из хард- и софтскиллов.

https://proglib.io/sh/nQHKU2AdCm

​Запуск анимации при скролле

Откладывание старта анимации до момента, когда пользователь до нее доскроллит, - распространенный и эффектный прием. В статье разбирается его реализация с использованием IntersectionObserver API (и фоллбэком для старых браузеров).

https://proglib.io/w/2bbaf368

#interface #animation

Советы по улучшению условий в JavaScript

7 простых техник, которые помогут сделать ваши условия понятнее и проще: https://proglib.io/w/8fbc7ba8

#bestpractices

🧩 5 интересных головоломок и задач, чтобы отвлечься от рутины и немного пошевелить извилинами (выпуск 15)

В нашей еженедельной подборке мы подготовили 5 новых интересных алгоритмических, логических и математических задачек для отдыха и прокачки мозгов.

https://proglib.io/sh/ak1X027h5f

Почему получаются плохие абстракции и как этого избежать?

🚀3 февраля, в этот четверг, в 19.00 МСК Евгений Тюменцев, профессионально занимающийся разработкой многопоточных кросс-платформенных приложений на С++, научит вас строить абстракции – один из ключевых навыков для программиста.

За один час вы узнаете:

– Что такое абстракция?
– Причины правок кода
– Как выделять абстракции
– Свойства абстракций, полезные при разработке

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

Регистрация и подробности по ссылке.

☕️ 10 вопросов с собеседований по JavaScript

В этой статье мы рассмотрим 10 вопросов с собеседований по JavaScript и примеры ответов на них, которые помогут вам подготовиться к интервью.

https://proglib.io/sh/RwOMqzJSHh

#interview

​😃 Взять отпуск или уволиться: как вернуть мотивацию к работе

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

https://proglib.io/sh/YWweDCztL4

Тренды веб-разработки в 2022 году

Большой эфир HTML Academy: https://proglib.io/w/fd533e8e

#video

Как победить scroll в javascript

Разбор реальных кейсов: https://proglib.io/w/0f75a3cb

​Как мы ускоряли комментарии Хабра

Опыт Хабра по оптимизации большого количества комментариев в рамках SPA-приложения: https://proglib.io/w/66f639ab

#optimisation

​Правильный способ заставить Vue перендерить компонент

Иногда бывает так, что реактивности Vue не хватает, и вам нужно перерендерить компонент. Или вам нужно сбросить DOM и начать сначала. Как сделать это правильно?

https://proglib.io/w/a2d4bac0

#vue

​Введение в CSS Cascade Layers

Управление каскадом стилей- задача не из легких. Скоро в CSS появятся каскадные слои - смогут ли они решить эту проблему?

https://proglib.io/w/9f43b951

#css

​Оптимизация видео по размеру и качеству

Добавление видео в приложение может повысить вовлеченность и удовлетворенность клиентов. Но при проблемах с воспроизведением обычно происходит прямо противоположное. Разбираемся, как этого избежать: https://proglib.io/w/877f475b

#performance

3 паттерна для создания React-компонентов

Статья (англ.): https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about

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

Презентационные компоненты и компоненты-контейнеры

Презентационные компоненты отвечают только за внешний вид. Они получают данные через пропсы, выводят их и никак не зависят от других компонентов. Очень часто презентационные компоненты не имеют состояния, но также могут отслеживать какое-то состояние, связанное с интерфейсом (например, текст в поле ввода). Примеры презентационных компонентов: список элементов, поле ввода.

Компоненты-контейнеры обеспечивают логику приложения. У них есть состояние, они используют различные методы жизненного цикла и содержат в себе презентационные компоненты для вывода данных. Именно в контейнерных компонентах происходит запрос и обработка данных.

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

Провайдер

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

Пример Провайдера в React - это контекст. Мы создаем объект контекста с нужными данными (например, цветовой темой приложения), оборачиваем все приложение в провайдер этого контекста и в нужных местах связываемся с ним с помощью хука useContext, или свойства contextType, или Context.Consumer.

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

Составные компоненты

Компоненты в React могут работать в симбиозе, разделяя общее состояние. Например, компонент списка (Menu) и компоненты отдельных элементов списка (MenuItem). Вынесение элементов в отдельные компоненты может быть удобно с точки зрения передачи пропсов и структуризации кода.

Но у Menu и MenuItem есть общее состояние - активный элемент, оно должно храниться в компоненте Menu, значит, его нужно передать во все вложенные компоненты MenuItem. Об этом должен позаботиться сам компонент списка (например, с помощью React Context), тогда мы получим составной компонент (compound component).

Реализовав этот паттерн мы сможем удобно оформлять список, выделяя каждый элемент в MenuItem, но при этом не придется заботиться о передаче состояния элементам, так как это происходит под капотом.

#паттерны #ссылки