Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» №292. Safari TP, стримы в Node.js, CDN, дизайн без сеток, Фейсбук на флоатах, доступность интерфейсов
•
Подкаст Фронтенд Юность #197 Все cекреты VS Cod'a
•
«Новости 512» от CSSSR: V8 9.2, scroll-linked animations, Redis с Node.js, промисы и функциональное программирование в JS
•
«Новости 512» от CSSSR: Chrome 92, CRUD на Fastify, drag&drop с RxJS, блокирующие загрузку ресурсы, отключение аккаунтов MDN
•
Подкаст proConf #100
•
Памятка и туториал по HTTP-заголовкам, связанным с безопасностью веб-приложений
•
Кажется, мы стали забывать основы фронтенда
•
Вебсайты с функциями Handsfree
•
Некоторые веб-свойства, которые могут работать не так, как вы ожидали
•
Пошаговый процесс превращения дизайна в код
•
Веб-аутентификация: cookie или токены
•
Ежегодный отчет JetBrains: Состояние экосистемы разработки в 2021 году
•
Использование Google Drive в качестве CMS
•
Как переход на Core Web Vitals увеличил доходы от рекламы Netzwelt на 18%
•
CSS: системные цвета, шрифты и кое-что ещё
•
Приемы, помогающие упростить CSS
•
Свойства CSS Box Model — объяснение с примерами
•
Пользовательские свойства и @property
•
Предотвращение нежелательных сдвигов макета, вызванных полосами прокрутки, с помощью CSS свойства scrollbar-gutter
•
Естественная тень с SVG фильтрами
•
Практические примеры Scroll-Linked анимации в CSS с временными шкалами прокрутки
•
Как улучшить Web Vitals с помощью CSS
•
Как использовать IndexDB для управления состоянием в JavaScript
•
Бинарный протокол для JavaScript
•
URLPattern дает возможность реализовать маршрутизацию для веб-платформы.
•
WebSockets и Node.js — тестирование WS и SockJS путем создания веб-приложения
• Анализ влияния на производительность дополнений к Chrome
• Релиз Chrome 92
Дайджест за прошлую неделю.
Материал подготовили 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)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
-
Доступность
• Как не навредить пользователям с эпилепсией и вестибулярными нарушениями
•Не чеклист: внедрение соответствий требованиям доступности в бизнес-процессы
•Тупиковая ситуация с доступностью
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![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)
•
![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)
-
React
•Реализация восстановления позиции прокрутки страницы в ecommerce приложениях на React
•Как использовать конечные автоматы в React? Объяснение фронтенд-разработчика
•Почему вам следует избегать использования состояния для вычисляемых свойств
•5 useEffect Infinite Loop Patterns
-
Vue
•Vue/React Store и JS Request Manager
•Vue — рекомендации при работе с формами
•Мой обзор petite-vue
•25 советов по Vue, которые вам нужно знать
•Создание приложения для чата в реальном времени с помощью Vue, Socket.io и NodeJS
•Тестирование компонентов Vue.js с помощью Vue Test Utils
-
Angular
•Как реализовать drag & drop используя RxJS
•Основы Angular: управление пользовательскими свойствами CSS со Style Binding
•Самосохраняющиеся раскрывающиеся списки Angular — еще одна директива
-
Libs & Plugins
•Очень интересная библиотека JS: распознавание символов, введённых с дисплея вашего смартфона на сайте
•Svgbob — Преобразуйте свои ascii диаграммы в маленький SVG
•graphlatte — Шаблон Next.js с GraphQL, Urql, Prisma, Nexus и Tailwind
Браузеры
• Анализ влияния на производительность дополнений к Chrome
• Релиз Chrome 92
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
aio350
спасибо