https://habr.com/ru/post/543586/

• Разработка веб-сайтов
• CSS
• JavaScript
• HTML

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Медиа    |    Веб-разработка    |    CSS    |    JavaScript    |    Браузеры    |    Занимательное

Медиа

• Подкаст «Веб-стандарты» №270. Инспектор флексов, Vit 2.0, SVGO 2.0, Wakamai Fondue, TypeScript, RedLab и стороны аутсорса
• Подкаст «Сделайте мне красиво» №55 — Не ешьте фрукты, не используйте margin
• Фронтенд Юность (18+) #173: Make TypeScript JavaScript Again
• «Новости 512» от CSSSR: TypeScript 4.2 RC, долой Express, дата и время на JS, Lerna 4.0.0, Mocha 8.3.0, HolyJS Moscow 2020
• «Новости 512» от CSSSR: DevTools, лямбды на TS, интервью с Бренданом Айком, Angular 12 next, Node.js 15.9.0, Nuxt.js 2.15.0
• Отсобеседование #2: Собеседование смелого Frontend Middle разработчика

Веб-разработка

• Грабли WebRTC: как мы допиливали чужой велосипед
• Пишем сайт/PWA и выкатываем в прод с Github Actions
• Полное руководство по SEO для начинающих
• Фронт фронтенда и тыл фронтенда в веб-разработке
• Вам, вероятно, не нужен микро-фронтенд
• Создание Tab компонента
• Как преобразовать любой сайт/страницу в устанавливаемое прогрессивное веб-приложение (PWA)

• Инструменты
  • Сердце, не познавшее боли разочарования, не знало и радости полёта
  • Анонс Vite 2.0
  • Полезные советы и горячие клавиши в DevTools (Chrome, Firefox, Edge)
  • Изучение Snowpack: высокопроизводительного инструмента для сборки фронтенда
  • Изменения в webpack в 2021 году
  • Zero Server: создание современных веб-приложений с использованием нескольких языков и платформ — и нулевой конфигурации
  • NPM CLI v7.0— Пять основных функций, привлекших мое внимание
  

• Производительность
  • Максимально оптимизированная веб-загрузка изображений в 2021 году
  • Оптимизация видео по размеру и качеству
  • Как выбрать идеальные настройки качества для AVIF и WebP
  • 6 принципов создания производительных веб-приложений
  

• Эффекты
  • Шейдеры, Three.js и киберпанк. Как мы делали лендинг в неоново-античной стилистике
  • Идеи для CSS-анимаций наведения кнопки
  • Переходы между страницами: креативные примеры, ресурсы и некоторые советы
  

CSS

• Как сделать прилипающий уменьшающийся хедер при прокрутке без JavaScript
• Переключатели с условиями в CSS
• Ответственное скрытие контента
• Что нужно знать о CSS-in-JS на 2021 год
• Отладка CSS Grid как профи
• Используйте CSS Clamp для создания более гибкой обертки
• Три способа создания blob-форм с помощью CSS и SVG
• Создание трехмерных миров с помощью CSS
• Курс «Tailwind CSS: From Zero to Production» на YouTube

JavaScript

• Поддержка JavaScript-приложений в долгосрочной перспективе
• Управление памятью в JavaScript
• Редиректы JavaScript и SEO
• Введение в миксины в TypeScript
• Более быстрые вызовы JavaScript
• Как значительно улучшить fetch() с помощью Decorator Pattern
• Создание оглавления с активным индикатором с помощью JavaScript Intersection Observers
• 20 забавных JavaScript-мемов

• Теория
  • Лучшее объяснение работы Event Loop в JavaScript от Jake Archibald
  • 7 вопросов для собеседования о замыкание в JavaScript. Сможете ли вы на них ответить?
  • Руководство для начинающих по Debouncing vs Throttling
  • Обрабатывайте события JavaScript как профессионал
  • JS: Benchmarking Lazy Getters
  

• React
  • Перестаньте лгать React про отсутствие зависимостей
  • Что будет в форме React Hook версии 7
  • Как получать данные в React: шпаргалка + примеры
  • RTK Query: будущее получения и кеширования данных для Redux
  • WMR: швейцарский нож для веб-приложений
  • Используйте CSS переменные вместо React Context
  

• Vue
  • Улучшение производительности vue приложения
  • 4 способа справиться с SEO с помощью Vue (даже без Node SSR)
  

• Angular
  • Разбиение на страницы в Angular 11 для 100,000+ строк
  • Реализация переиспользуемых и реактивных форм в Angular
  • Как провести рефакторинг кодовой базы Angular
  • Как я динамически обновляю заголовок и метатеги в моем приложении на Angular
  • Реализовать флаги функций в Angular проще, чем вы думали!
  • Оптимизация Angular Universal для SEO
  

• Ember
  • The Ember Report #001: Building Native Apps With Ember.js
  • Начало работы с тестированием компонентов — EmberJS Octane
  

• Svelte
  • Получение данных в Svelte
  • Клевые биндинги со Svelte
  

• Libs & Plugins
  • a11y-dialog — легкий (1,6 КБ), но гибкий скрипт для создания доступных диалоговых окон.
  

Браузеры

• Новая утечка истории браузера через favicon
• В Brave обнаружен баг, из-за которого браузер оставляет данные onion-сайтов в трафике DNS
• Скоро браузер Chrome для Windows и Android будет потреблять меньше оперативной памяти
• Microsoft Edge ждёт обновление: появятся виджеты, поиск по вкладкам и меню расширений

Занимательное

• Доля WordPress перевалила за 40% среди топ 10 млн сайтов в рейтинге Alexa
• GitHub создал сервис для 3D-визуализации аккаунтов пользователей
• В Китае все чаще меняют менеджеров на алгоритмы: те следят за работниками, дают им задачи и могут списать часть зарплаты
• Microsoft начала принудительное удаление Flash Player из Windows 10
• Туннельный синдром, близорукость, выгорание: чем болеют айтишники

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.