Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Разработка PWA с поддержкой распознавания лица и голоса
•
Фронтендер пишет нейронки. Уровень сложности «хочу на ручки»
•
Искусство создания компонентов из реальной жизни
•
Что не так с Web Assembly?
•
Front-end прогнозы на 2021 год
•
Создайте клон Google Doc с помощью HTML, CSS и JavaScript
•
Прогрессивное улучшение мертво?
•
Варианты стилизации веб-компонентов
•
Финальный отчет State Of CSS 2020
•
Кастомные свойства в качестве состояния
•
Действительно ли Tailwind того стоит?
•
Изучение нового CSS Houdini Painting API
• Что не так с классами в JavaScript?
•
Что такое JavaScriptLandia?
•
В чем разница между DOM Node и Element?
•
Стек и очередь в JavaScript
•
7 ошибок, которые я сделал (и сожалею) как разработчик JavaScript
•
Самая свежая информация о JavaScript классах
•
Использование компонентов Bootstrap с кастомным JavaScript
• В Microsoft Edge наконец-то появилась синхронизация истории и открытых вкладок
• В адресной строке Chrome по умолчанию начнёт применяться HTTPS
• Прощай, молодость: Google Chrome стал терять пользовательскую аудиторию
• Mozilla отключила клавишу Backspace в браузере Firefox для защиты от случайной потери данных
• Firefox 85 перейдёт на ECH для скрытия домена в HTTPS-трафике
•
Интересный список браузеров, о которых вы никогда не слышали
•
Чем браузер Vivaldi отличается от Google Chrome
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Веб-разработка | CSS | 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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Производительность
•Google PageSpeed ??Insights: правда о рейтинге 100/100
•Анализ Web Vitals с помощью WebPageTest
- Доступность
•Обзор цифровой доступности по итогам 2020 года
•Соответствие требованиям обеспечения доступности мобильных устройств в 2021 году и законодательство ЕС
•Как клевые инструменты доступности могут сделать вашу жизнь проще
•Методы создания дружественных к дальтоникам веб-приложений с использованием Chrome DevTools
- Эффекты
•Animations 101 — Использование Greensock
•Создание бесконечной галереи с автопрокруткой с использованием WebGL с шейдерами OGL и GLSL
•Самые популярные демки на Codepen за 2020
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)
JavaScript
• Что не так с классами в JavaScript?
•
![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)
- React
•React.js — формошлепство или работа с формами при помощи пользовательских хуков
•Рассказ о React и Input Ranges
•Темизация и переключение тем с помощью React и styled-components
•Concurrent Mode в React
•Продвинутые React хуки: глубокое погружение в useEffect Hook
•Build time atomic CSS-in-JS. Baked and ready to serve.
•xstyled — утилитарный CSS-in-JS фреймворк для React. Создайте целый веб-сайт, используя JSX и Props.
•Видеочат и шаринг экрана с помощью React, Node, WebRTC (peerjs)
•Ванильные хуки (за пределами React)
- Svelte
•Svelte и spring анимации
•Компилируем Svelte в уме. Часть 1/3
•Стоит ли использовать Svelte на продакшене?
Браузеры
• В Microsoft Edge наконец-то появилась синхронизация истории и открытых вкладок
• В адресной строке Chrome по умолчанию начнёт применяться HTTPS
• Прощай, молодость: Google Chrome стал терять пользовательскую аудиторию
• Mozilla отключила клавишу Backspace в браузере Firefox для защиты от случайной потери данных
• Firefox 85 перейдёт на ECH для скрытия домена в HTTPS-трафике
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
aio350
Благодарю за подборку