​Floating UI

Библиотека для позиционирования всплывающих элементов - тултипов, дропдаунов и др. Легковесная (ядро весит всего 600 б), много настроек, удобный интерфейс: https://proglib.io/w/79dd1eb9

#library #interface

Как оптимизировать размер бандла SPA и ускорить загрузку приложения в несколько раз

Автор разбирает:

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

https://proglib.io/w/84141ada

#performance

Все, что нужно для фронтенда в 2022

2021 год завершился — и это отличная возможность порефлексировать и подвести некоторые итоги. За этот год в мире фронтенда появилось много новых и интересных инструментов — так много, что выбрать среди них лучшие очень сложно. Но мы все же попытаемся составить из всего этого многообразия гармоничный ансамбль на следующий год.

https://proglib.io/w/24f5417a

#tools #digest

​Nest.js: A Progressive Node.js Framework (2018)
Авторы: Jay Bell, Greg Magolan, David Guijarro, Adrien de Peretti, Patrick Housley
Количество страниц: 313

Фреймворки JavaScript очень быстро входят и выходят из моды по мере того, как веб-технологии меняются и развиваются. Nest.js - хорошая отправная точка для многих разработчиков, которые хотят использовать современный веб-фреймворк, поскольку он использует язык, очень похожий на язык JavaScript, наиболее часто используемый в Интернете. Nest.js также использует TypeScript, язык, который обеспечивает простоту и мощность JavaScript с безопасностью типов других языков, к которым вы, возможно, привыкли. С помощью этого руководства вы сможете приступить к работе, создавая свои собственные приложения c Nest.js в кратчайшие сроки.

Достоинства:
➕Глубокое погружение в тему;
➕Широкий спектр тем.

Недостатки:
➖Не замечено.

Скачать книгу

#english #book #advanced

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

Исследование 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