Дайджест свежих материалов из мира фронтенда за последнюю неделю №484 (6 — 12 сентября 2021)

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

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

Медиа

• Подкаст «Сделайте мне красиво» №62 — Воины Света против статей на медиуме
• Подкаст «Callback Hell» от CSSSR: No-code/low-code, Yarn 2 и Yarn 3, HTTP/3
• «Новости 512» от CSSSR: Chrome 93, Firefox 92, TypeScript 4.4, чистая архитектура и SPA-гексагон, Deno на MDN, 30 лет Linux
• Подкаст «Фронтенд Юность» #202: Пишите на питоне, зубы на бетоне
• Подкаст «Веб-стандарты» №298. Элемент model, Chrome 93, Can I Include App, нативный роутинг, анимация, дизайн-токены, RxJS
• Подкаст «Ленивый фронтендер» #13 | All around the Chromium: Данил Шашков делится опытом разработки браузера на основе Chromium со стороны фронтенда

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

• Веб-безопасность 200
• Вывод микро-фронтендов на новый уровень
• 5 веб-API, которые добавляют мобильную функциональность в ваш проект
• Экспериментируем с FullScreen API
• Как «Drag-And-Drop» влияет на доступность в вебе

• Инструменты
  • Состоялся релиз Firefox 92
  • Мы отказались от npm install, может и вам тоже стоит
  • Что нового в DevTools: кроссбраузерная версия
  • Parcel vs. WebPack 2021
  • Изучение Velociraptor, скрипт-раннер Deno в стиле npm
  

• Производительность
  • 9 лучших практик для оптимизации производительности фронтенда
  • Как мы улучшаем нашу веб-производительность
  • Тестирование фронтенд-производительности с Sitespeed.io
  • Как писать о веб-производительности
  

• Эффекты
  • Подборка креативных сайтов «Inspirational Websites Roundup» #29
  • Как создать глитч-анимацию на чистом CSS для изображений и SVG
  

CSS

• Полное руководство по CSS Grid
• Меньше абсолютного позиционирования с помощью современного CSS
• Интерактивное руководство по Keyframe анимации
• Забавные варианты стилизации чекбоксов
• Можно ли нам кастомные медиа-запросы, пожалуйста?
• История TryShape, демонстрация свойства CSS clip-path
• Значение `bolder` в Firefox’s является проблемой для вариативных шрифтов
• Introducing Pollen — вдохновленная TailwindCSS функциональная библиотека CSS переменных для быстрого прототипирования, консистентного стиля и базы для вашей дизайн-системы.
• Создание разделенной кнопки
• Укрощение зверя — CSS-in-JS

JavaScript

• JavaScript: немного об интернационализации и локализации веб-приложений
• Как написать собственное правило для ESLint
• Бандлинг ресурсов, не относящихся к JavaScript
• Run, JavaScript, Run
• Руководство для JS-разработчиков по браузерным cookie
• Глубокое погружение в события JavaScript

• React
  • Создаем текстовый редактор на React.js
  • Пользовательские хуки React: зачем нам нужен контекст
  • Реакт Компоненты-дженерики
  • Event Bubbling и Event Catching в JavaScript и React – руководство для начинающих
  • Мир React в 2021 году
  • Создавайте PDF-документы с помощью React на сервере
  • Создайте ленту с бесконечной прокруткой, похожую на Instagram, с помощью React Query
  • Как и когда заставить компонент React повторно отрисоваться
  

• Vue
  • Компактные Vue компоненты из самописных SVG иконок
  • Harlem — Простое, легкое и расширяемое управление состоянием для Vue 3
  • Использование SVG и Vue.js: полное руководство
  • Начало работы с vue.draggable
  • Создайте настраиваемый компонент всплывающей подсказки во Vue
  

• Svelte
  • Как Svelte изолирует стили компонентов
  • Скомпилированное будущее фронтенда
  • Как Svelte кибернетически улучшает веб-разработку
  • Что нового в Svelte: лето 2021 года
  

• Angular
  • Проектирование архитектуры Angular — Container-Presentation pattern
  • Why Angular — Почему мы решили использовать Angular в SpotDraft
  

• Ember
  • The Ember Times — Issue No. 188
  

• Libs & Plugins
  • ML5.JS — это как TensorFlow только без нижних уровней
  • Dann.js — простая в использовании библиотека для работы с нейронными сетями в Javascript.
  • htmlq — Как jq, но для HTML. Использует селекторы CSS для извлечения фрагментов содержимого из файлов HTML.
  • replace-jquery — Автоматический поиск методов jQuery в существующих проектах и их замена на альтернативу на ванильном js
  • Эффект печатной машинки для текста с помощью нового тега typewritten-text
  

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