Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Сделайте мне красиво» №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» влияет на доступность в вебе
•
Полное руководство по CSS Grid
•
Меньше абсолютного позиционирования с помощью современного CSS
•
Интерактивное руководство по Keyframe анимации
•
Забавные варианты стилизации чекбоксов
•
Можно ли нам кастомные медиа-запросы, пожалуйста?
•
История TryShape, демонстрация свойства CSS clip-path
•
Значение `bolder` в Firefox’s является проблемой для вариативных шрифтов
•
Introducing Pollen — вдохновленная TailwindCSS функциональная библиотека CSS переменных для быстрого прототипирования, консистентного стиля и базы для вашей дизайн-системы.
•
Создание разделенной кнопки
•
Укрощение зверя — CSS-in-JS
•
JavaScript: немного об интернационализации и локализации веб-приложений
•
Как написать собственное правило для ESLint
•
Бандлинг ресурсов, не относящихся к JavaScript
•
Run, JavaScript, Run
•
Руководство для JS-разработчиков по браузерным cookie
•
Глубокое погружение в события JavaScript
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Инструменты
•Состоялся релиз Firefox 92
•Мы отказались от npm install, может и вам тоже стоит
•Что нового в DevTools: кроссбраузерная версия
•Parcel vs. WebPack 2021
•Изучение Velociraptor, скрипт-раннер Deno в стиле npm
- Производительность
•9 лучших практик для оптимизации производительности фронтенда
•Как мы улучшаем нашу веб-производительность
•Тестирование фронтенд-производительности с Sitespeed.io
•Как писать о веб-производительности
- Эффекты
•Подборка креативных сайтов «Inspirational Websites Roundup» #29
•Как создать глитч-анимацию на чистом CSS для изображений и SVG
CSS
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- 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.