Медиа | Веб-разработка | 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.