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

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

Медиа

• Подкаст «Веб-стандарты» №228: DevTools, сайт Веб-стандартов, выделение текста, px vs rem, Atomic CSS-in-JS, рефакторинг
• Подкаст «Фронтенд Юность (18+)» #136: Про онлайн-конференции с Алексеем Федоровым
• Live coding c Вадимом Макеевым: Шапка на гридах и флексах с гэпами и БЭМ

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

• Кто похоронит современный веб?
• Простой подход к работе с отзывчивыми изображениями
• Хранилище для Веба
• Памятка по работе с Canvas API
• Как и почему вы должны избегать CORS в SPA
• 13 советов по безопасности для фронтенд-приложений
• Проекту HTML5 Boilerplate исполнилось 10 лет

• Инструменты
  • 5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика
  • Google представляет Web Vitals: мониторинг метрик и важных показателей для ваших сайтов
  • Релиз ESLint v7.0.0
  • Инструменты разработчика для дизайнеров
  • actions-cli — мониторинг GitHub Actions в реальном времени с помощью командной строки
  

• Производительность
  • Как ускорить мобильный сайт за 5 шагов + инструменты для запуска тестов скорости мобильного сайта
  • Оптимизация значения FID (First Input Delay)
  • Оптимизация значения LCP (Largest Contentful Paint)
  • Оптимизация значения CLS (Cumulative Layout Shift)
  • Подробное руководство по оптимизации производительности с помощью webpack
  

• Доступность
  • Прогрессивное улучшение радиокнопок с помощью SVG с сохранением доступности
  • Для многих доступность — это неизвестность неизвестного
  • Создание доступного Range Slider с помощью CSS
  • Полное руководство по доступности для сайтов на WordPress
  • generic-components — коллекция популярных веб-компонентов с акцентом на доступность и простоту использования
  

CSS

• Понимание CSS Grid (2 часть): Grid-линии, (3 часть): Grid-области
• Выделение и CSS
• Приключения Masonry-раскладки в CSS
• Способы стилизации списков
• Единицы `lh` и` rlh`
• Играемся с (фейковыми) Container Queries с watched-box и resizeasaurus
• Все, что я узнал о min(), max() и clamp() в CSS
• Давайте углубимся в свойства CSS Container
• Как легко создать адаптивный вертикальный ритм с помощью CSS
• В Chromium появляется поддержка Flexbox gap
• Глубокое погружение в CSS Grid
• CSS-находки в дизайне Twitter
• Добавление CSS на страницу с помощью HTTP Headers
• Как создавать игры на чистом CSS
• Полное руководство по функциям в CSS

JavaScript

• Зал Трудовой Славы JavaScript, часть 2
• Понимание (всех) «модульных» форматов и инструментов JavaScript
• ES2020: все, что вам нужно знать
• Создание генератора кроссвордов с помощью JavaScript
• JavaScript-рендеринг и проблемы для SEO в 2020 году
• Считаем время в JavaScript

• React
  • Анатомия компонента Tablist в Vanilla JavaScript в сравнении с React
  • Как сделать повторно используемые компоненты с помощью псевдо-селекторов
  • Вопросы и ответы для собеседования по React
  • Когда React выполняет перерендеринг компонентов?
  • react-virtual — Хуки для виртуализации скролящихся элементов в React
  • React Flow — библиотека для рендеринга интерактивных графов
  • react-select-search — Легкий select-компонент для React
  • React-Tiny-Link — компонент для демонстрации мета-информации в виде карточек-ссылок
  

• Vue
  • Как создать опросник на Vue с использованием аутентификации и базы данных Firebase
  • Vue 3 Composition API — неправильное решение правильной проблемы
  

• Angular
  • Observable сервисы в Angular
  • Angular: Как создать полноэкранный календарь в стиле Outlook
  • Angular библиотеки — что, почему и как
  • Проектирование масштабируемых приложений на Angular: страницы, контейнеры и представления
  • 6 концепций для освоения, чтобы быть архитектором Angular
  

• Ember
  • Сравнение Ember Octane и React
  • The Ember Times — Issue No. 147
  

• Svelte
  • Как выучить Svelte за выходные
  • 7 функций Svelte, которые приносят мне радость
  • Создание статических сайтов с помощью Svelte и headless CMS
  • SvelteJS: разоблачение мифов
  • Начало работы с Sapper и Svelte
  

• Libs & Plugins
  • Имитация рисования от руки на примере RoughJS
  • Pico — делаем скриншоты в браузере с помощью Javascript
  • Selecto.js — это компонент, который позволяет выбирать элементы в заданной области с помощью мыши или тача.
  

Браузеры

• Релиз Firefox 76
• Релиз Firefox 76 — Audio worklets, CSS System Colors и другое
• Опубликован Playwright 1.0, пакет для автоматизации работы с Chromium, Firefox и WebKit
• Firefox 76: аудио-ворклеты и другие хитрости

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

• Очередной ответ Zoom. Google встроит видеоконференции Meet прямо в Gmail
• Хакеры научились прятать веб-скиммеры за favicon сайтов
• GitHub проанализировал влияние COVID-19 на активность разработки
• В GitHub добавлены среда разработки и система дискуссий
• Как оформить профиль на GitHub так, чтобы он работал при поиске работы
• Facebook представила сервис для бедных стран — интернет будет бесплатным, но только текстовым Материал редакции
• ЕС запрещает использовать на сайтах «стены куки» для ограничения доступа к контенту и принудительного сбора данных

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

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