Дайджест свежих материалов из мира фронтенда за последнюю неделю №489 (11 — 17 октября 2021)

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

Медиа    |    Веб-разработка    |    CSS    |    JavaScript

Медиа

• «АйТиБорода»: ЧЕЛОВЕЧНЫЙ ФРОНТЕНД / Доступность и современность интерфейсов / Вадим Макеев
• «Frontend Weekend» №106: в гостях Фил Ранжин из компании Лингвотроник и подкаста «Мы обречены» о популярности в твиттере и потере любви к разработке
• «Новости 512» от CSSSR: Firefox 93, TypeScript 4.5 Beta, виды DOM, дебаггинг CSS, XSS, security-релизы Node.js и Redis
• Подкаст «Веб-стандарты» #303: Firefox 93, тёмная тема, баги браузеров, TypeScript 4.5, реальный перфоманс, новый сайт в 2021
• Подкаст proConf #110: TheUXConf 2021
• Front-end Science c Сергеем Пузанковым: Pet-projects. Какие проекты делать начинающему фронтенд разработчику
• Callback Hell от CSSSR: Зачем дизайнеру кодить, дизайн-системы и дизайн-токены. В гостях Вадик Матвеев и Юлия Миоцен.
• «Искусство веб-разработки», Елена Литвинова: Разбираем результаты собеседования в компанию DICE в Лондоне. React, NodeJS.

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

• Лучшие стратегии разработки фронтенда в 2022 году
• Современный Frontend: проблемы и пути решения. Пишем React-like приложение со строгой типизацией без сборщиков
• Как сделать Змейку на чекбоксах и не только
• PWA: не Chrome’ом единым?
• Каково создавать емейл-темплейт в HTML формате в 2021
• Как победить CORS
• Создание multi-select компонента
• Искусство обмана, Lighthouse Score Edition
• Железо и веб: баланс между полезностью, безопасностью и конфиденциальностью

• Инструменты
  • Обзор Chrome DevTools. Решаем основные задачи веб-разработчика
  • Ещё 6 вещей, которые я узнал, доведя Snowpack до 20000 GitHub-звёзд
  • Самая популярная ошибка, нарушающая оптимизацию Webpack-бандлов
  • Скрытые функции Google Chrome, которые должен знать каждый разработчик
  • Deno все еще актуален? Взгляд на текущий статус убийцы Node
  • Что такое Snowpack?

• Фреймворки
  • Old Skull — фронтенд-фреймворк из альтернативной вселенной
  • Кто оплачивает веб-фреймворки?
  • Любимые фреймворки разработчиков на Jamstack в 2021 году
  • Сравнение размеров TodoMVC в JavaScript фреймворках
  • Дорожные карты Angular, Vuejs, Emberjs, Nodejs и Reactjs

• Доступность
  • Кнопки против ссылок. Нет, это не одно и то же
  • Что нового в WCAG 2.2: новые критерии успеха для цифровой доступности

CSS

• Как написать собственное свойство CSS
• Как создать блок с градиентной обводкой?
• Разбираемся с цветами, палитрами, фильтрами CSS и не только
• Расширяемые секции в сетке компонентов с помощью CSS Grid
• Пользовательские свойства со значениями по умолчанию: 3 + 1 стратегия
• Умные CSS решения для распространенных задач в пользовательских интерфейсах
• CSS сходит с ума, я вам расскажу как
• Различные варианты использования пользовательских свойств
• Как создать эффект пишущей машинки на CSS для вашего веб-сайта
• Bootstrap vs Tailwind vs Vanilla CSS

JavaScript

• Распознаём позу прямо в браузере в реальном времени
Релизы: Анонс релиза Parcel v2, Релиз ESLint v8.0.0
• ESNext: Import Assertions (JSON Modules, CSS Modules, …)
• Микрооптимизация вашего JavaScript, вероятно, того не стоит, но ..

• Теория
  • Синхронный и асинхронный JavaScript — Call Stack, промисы и многое другое
  • Использование нового метода .at() JavaScript
  • Javascript Fetch: примеры Get/Post/Put/Delete
  • Observables vs. Promises — что лучше использовать?
  • Как использовать Saga Pattern в микросервисах

• React
  • Для чего компании нужен UI KIT? (Frontend + Design)
  • React против других фреймворков: сравнение по трем аспектам
  • Полезные React API для создания гибких компонентов с помощью TypeScript
  • Превращение React-приложения в устанавливаемый PWA с оффлайн-режимом, сервис-воркерами и темами.
  • Взгляд на startTransition в React 18
  • Полное руководство по интернационализации в Next.js
  • Как реализовать флаги функций в React
  • Что нового в Gatsby v4

• Vue
  • Vue.js: как перенести большой проект с Vue 2 на Vue 3
  • Как реализовать функцию поиска в вашем Nuxt приложении с помощью Algolia InstantSearch
  • Повышение производительности $destroy во Vue
  • Почему и когда вам следует использовать Vuex
  • Мнения об экосистеме Vue
  • Создание приложения с помощью Vue 3, Nuxt и TypeScript

• Angular
  • Улучшение тестов Angular путем включения Angular testing module teardown
  • Как реализовать тепловую карту в таблицах с помощью директив в Angular
  • Лучшие практики Angular — знаете ли вы их?

• Ember
  • Как выглядит реализация паттернов React-компонентов в Ember.js
  • Почему в Ember не нужны React-хуки

• Svelte
  • Svelte vs React: окончание дебатов
  • Как отслеживать события в вашем приложении на Svelte
  • Как создавать и публиковать Svelte компоненты

• Libs & Plugins
  • tachometer — инструмент для запуска тестов в браузере, использующий повторную выборку и статистику для надежного определения даже крошечных различий в рантайме
  • 5 лучших библиотек обработки звука для JavaScript
  • webpack Boilerplate — адекватный webpack-бойлерплейт 5 с использованием Babel, PostCSS и Sass.

Дайджест за прошлую неделю.

Материал подготовили dersmoll и alekskorovin.