​Какие навыки нужны фронтендеру, чтобы стать мидлом?

Исследование HTML Academy: https://proglib.io/w/e1d7d148

Работа с массивами в JavaScript

15 методов работы с массивами в JavaScript: https://proglib.io/w/767ff88e

Группировка массивов (пропозалы groupBy и groupByToMap): https://proglib.io/w/ddef22d4

#javascript

​6 скрытых жемчужин JavaScript, которые вы могли пропустить

6 свеженьких сниппетов, которые могут вас приятно удивить: https://proglib.io/w/d002d875

#javascript #snippets

​Продвинутый React-хук для блокировки скролла

Решаем классическую проблему блокировки скролла при показе модальных окон: https://proglib.io/w/4d804a82

#react #interface

​Руководство по Webpack для начинающих

Если вы все еще не знаете, как работает Webpack и зачем он нужен, то уже пора узнать: https://proglib.io/w/96c9f887

#tools #webpack

​Микрофронтенды от новичка до эксперта

Если вы все еще не знаете, как работают микрофронтенды, то вот вам целое руководство по изучению: https://proglib.io/w/26a514bd

#microfrontends

Patterns.dev

Бесплатная книга про использование архитектурных паттернов в JavaScript и React приложения с подробными примерами. Доступна онлайн и для загрузки: https://proglib.io/w/ebbc48ed

#bestpractices #books

​Топ-10 веб-приложений на CodePen за 2021 год

От анимированной кнопки загрузки до полноценного дашборда - вдохновляйтесь: https://proglib.io/w/4d48b047

#snippets

​Организация отступов в верстке (margin/padding)

Статья довольно старая, но содержит много полезных идей, над которыми стоит задуматься: https://proglib.io/w/1b91356e

#layout #css

​CSS в 2022

2021 год выдался непростым для CSS: рабочая группа проделала огромную работу с существующими функциями и специфицировала множество новых, а браузеры сосредоточились на устранении проблем совместимости. Что же ждет нас в 2022?

https://proglib.io/w/bd53d579

Верстка в 2022. Теория и практика

Некратный отступ в макете - это не всегда ошибка, или учимся видеть логику в дизайне:

👉 Часть 1
👉 Часть 2

#layout #css

​Глубокое клонирование в JavaScript с использованием structuredClone

Новый метод для настоящего глубокого клонирования без хаков с сериализацией. Еще не полностью доступен и имеет ряд ограничений, но это все равно хорошая новость: https://proglib.io/w/7a16c22d

#javascript

Утечки памяти в приложениях

Искать утечки памяти в веб-приложениях очень непросто, поэтому почти никто это и не делает.

👉 fuite - это CLI-утилита, которая поможет найти утечки памяти на вашем сайте: https://proglib.io/w/a9767bdd

👉 Detached Elements - новый инструмент в Microsoft Edge DevTools, который тоже умеет обнаруживать утечки, связанные с DOM-элементами вне основного дерева документа: https://proglib.io/w/525096f4

Много утечек нашли? 😏

#performance

Архитектурные паттерны React для ваших проектов

Статья, посвященная организации файловой структуры (и не только) проекта: https://blog.openreplay.com/react-architecture-patterns-for-your-projects

Рекомендации:

👉 директория с исходниками называется src
👉 названия папок должны быть понятны всем членам команды, нет жестких правил, можно использовать слова-синонимы, если так проще
👉 для компонентов следует выделять отдельные папки внутри директории components
👉 кроме того, есть общий index.js файл в components, который импортирует все компоненты сразу
👉 для каждого компонента создаем отдельные файлы: для собственно кода, для стилей, для тестов и для Storybook
👉 для наименования файлов и папок хуков используйте префикс use
👉 размещайте каждый хук в отдельной папке в директории hooks вместе с файлом для тестирования
👉 по аналогии с компонентами стоит создать отдельный файл hooks/index.js, который будет импортировать все хуки проекта сразу
👉 следует использовать абсолютные импорты, для этого нужно правильно настроить сборку, указав алиас или корневую директорию
👉 отделяйте логику приложения от отображения, выносите ее в хуки по возможности
👉 константы и утилитарные методы стоит вынести в отдельную директорию utils
👉 не создавайте единый Контекст для всего, лучше создать несколько независимых контекстов с разными данными

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

​Svelte-компоненты в React-стиле

Разбираемся в Svelte, сравнивая его с React: https://proglib.io/w/633f563f

#frameworks #svelte #react

Браузерное расширение своими руками

Создаем собственное расширение для браузера с нуля: https://proglib.io/w/babb7e68

#browser

YaTalks 2021: доклады про фронтенд

8 больших докладов по фронту с конференции YaTalks 2021: https://proglib.io/w/5dda2653

👉 Создание универсальной UI-библиотеки
👉 Научите меня писать интерфейсы для космолётов!
👉 Спецвыпуск «Веб-стандартов»
👉 Аутентификация в вебе. История развития
👉 Когда документация — просто космос
👉 30 лет — полёт нормальный!
👉 Как и зачем проводить тесты с незрячими людьми?
👉 Существующие инструменты не работают в невесомости? Напиши свои!

#video #frontend

​2021 JavaScript Rising Stars

6-й ежегодный обзор самых трендовых проектов: https://proglib.io/w/4342c03b

💸 Стоит ли разрабатывать коммерческие сайты на WordPress в 2022 году?

Говорят, что самая популярная CMS в мире канула в Лету, уступив место другим более свежим решениям. В статье попытаемся выяснить, так ли это на самом деле и какие проблемы существуют у этой платформы на сегодняшний день.

https://proglib.io/w/1eecce7a

#cms

📊 Создавайте диаграммы на React с помощью библиотеки chart.js

https://proglib.io/w/8b33f34e

#interface #library