Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Как при помощи ИИ сделать распознавание вводимых вами рукописных цифр прямо в браузере
•
Обзор архитектуры RenderingNG в Chromium
•
Все, что вы когда-либо хотели знать о WebRTC
•
NFC приходит в веб
•
Вот почему хранение JWT в Local Storage — катастрофическая ошибка
•
Более 15 полезных инструментов для фронтендера с уклоном в CSS
•
Обнаружение устройств, поддерживающих hover
•
Свойства блочной модели CSS. Объяснение с примерами
• Укрощаем режимы наложения: difference и exclusion
•
Почему разработчики любят Bulma CSS
•
Размышления об эффекте вырезания: CSS или SVG?
•
Не существует такого понятия, как абсолютная единица CSS
•
Использование abs(), sign(), round() и mod() в CSS сегодня
•
Логические свойства и значения CSS
•
Helvetica теперь является вариативным шрифтом
•
Создание генеративных пятен с помощью CSS Paint API
•
Выравнивание кнопки по вертикали
•
Прекратите изучать фреймворк, станьте JavaScript-разработчиком
•
В JS-функциях «побеждает» последний оператор return
•
Выполнение ES модулей в CLI
•
Написание игры Сокобан на JavaScript
•
Полное руководство по локализации вашего приложения с помощью Internationalization API в JavaScript
•
Vivaldi 4.1 — Хорошо забытое новое
•
Единичные и неожиданные результаты с Safari
•
Мнения о Safari 15
•
Safari не защищает веб, а убивает его
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | 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)
-
Инструменты
•Не очень известные возможности Chrome Devtools
•Что нового в DevTools (Chrome 93)
•Релиз Yarn 3.0 производительность, ESBuild, улучшенные патчи, ...
-
Производительность
•Уроки, вынесенные после сессии WebPageTest на CSS-Tricks
•Руководство для новичков в Lighthouse
•Инлайнинг ресурсов в JavaScript фреймворках. Как команда Chrome улучшает LCP в экосистеме JS
-
Доступность
• В Колорадо государственные веб-сайты и сайты местных органов власти должны будут отвечать стандартам доступности
•Создание доступного диалога с нуля
•101 совет и рекомендация по цифровой доступности
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Укрощаем режимы наложения: difference и exclusion
•
![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)
•
![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
•Mobx — неприятные моменты
•Как написать свою онлайн-песочницу с поддержкой React и популярных библиотек
•Как разобраться в исходном коде React
•Глобальные и локальные стили в Next.js
•Использование Web Share API в React
•Использование BLoC Pattern в React
•Визуальное руководство по рендерингу React — Props
•Анализ читабельности Inline Conditional Rendering в React
•Serverless функции в Gatsby Functions и Международная космическая станция
-
Vue
•@teqfw/vue
•Гайд по миграции с Vue 2 на Vue 3. Часть 1
•С Vue 3 вам может и не понадобиться Vuex
•Как мы улучшили время загрузки нашего приложения на VueJS с 15 до 1с
•Vue Router — официальный роутер для VueJS
-
Angular
•Angular Life: коды состояния сервера с Angular Universal
•Как использовать push-уведомления в Angular?
•Как создать E-Commerce сайт с помощью Angular 11, Commerce Layer и Paypal
-
Ember
•The Ember Times — Issue No. 185
•Ember.js: The Good Parts
•Избегание жизненного цикла компонентов
•Ember.js Berlin — July 2021
-
Svelte
•Svelte Storm — IDE для Svelte
-
Libs & Plugins
•Фреймворк для создания изображений Open Graph
•drumsynth — Синтез барабанов в 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)
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.