Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» №246. Chrome 86, фокус, ::marker, отладка шрифтов, скринридеры, модалки, флексы и селект
•
Подкаст «Фронтенд Юность (18+)» #154 Храни процедуры с молоду
•
Подкаст CSSSR — Оптимизация фронтенда, адаптивность в 2020, scaling NodeJS, SSH-приманки и Figma для разработчиков
•
Исправление странной ошибки и стратегии отладки, проверенные временем
•
TeX в SVG: опенсорс-решение в помощь веб-разработчикам образовательных проектов
•
Путь к Федеративному GraphQL
•
Безопасность npm-проектов, часть 2
• Вы знаете что такое GeoJSON?
• Cross-site Scripting (XSS): определение и предотвращение
•
5 малоизвестных функций Chrome DevTools
•
Google развеял популярные мифы о контенте
•
Изменение определенных букв с помощью CSS и JavaScript
•
Практическое руководство по Web Cryptography API
•
Проектирование заголовочных частей сайтов с использованием CSS Flexbox
•
Кастомные, доступные radio/checkbox кнопки с идеальным выравниванием
•
Parsel: небольшой парсер CSS-селекторов
•
Как работает перспектива в CSS
•
Как легко создавать текстовые градиенты с помощью CSS.
•
TypeScript. Продвинутые типы
•
Работа с непредвиденными данными в JavaScript
•
Работа с медиа-запросами в JavaScript
•
Обновление архитектуры DevTools: переход на модули JavaScript
•
Настоящий компас в мобильных браузерах с помощью Javascript
• Mozilla представила новые возможности по продвижению дополнений к Firefox
• В Chrome началось включение блокировщика ресурсоёмкой рекламы
• Вредоносный пакет npm воровал файлы Discord и браузеров
Дайджест за прошлую неделю.
Материал подготовили 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)
Веб-разработка
•
![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)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Вы знаете что такое GeoJSON?
• Cross-site Scripting (XSS): определение и предотвращение
•
![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)
- Производительность
•Как сделать предзагрузку адаптивных изображений с помощью imagesize и imagesrcset
•PRPL паттерн: Решения для оптимизации современных веб-приложений
•AVIF готов к использованию
•Метрики производительности для фронтенд приложений
•Введение в программный запуск Lighthouse
- Доступность
•Разработка в учетом Reduced Motion для людей, чувствительных к движущимся объектам
•Как и почему доступность важна для SEO
•На что обращать внимание при аудите доступности
- Эффекты
•Как получить рукописную анимацию с неровными штрихами с помощью SVG Stroke
•Кнопки с эффектом конфетти
CSS
•
![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)
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)
- Теория
• Метод функций bind своими руками
•Начало работы с современным JavaScript — Proxy
•Понимание Event Loop, Callbacks, Promise и Async/Await в JavaScript
•5 лучших практик clean coding в JavaScript
- React
•React: слоты как у сына маминой подруги
•Почему я разочаровался в хуках
•Jotai, новая библиотека управления состоянием для React
•React Chrono — Компонент временной шкалы для React
•Функциональные компоненты React с хуками: все, что вам нужно знать
•Более простая альтернатива Redux
•История хуков в React
- Vue
•Введение в Vue Teleport — новую функциональность в Vue3
•Анонс (новой) Ionic Vue Beta
•Советы для новичков в VueJs
- Angular
•3 совета по управлению стилями, которые избавят вас от головной боли с CSS в вашем приложении на Angular
•ControlValueAccessor и contenteditable в Angular
•Локализация Angular с Ivy
•Преимущества добавления rx-query в ваш проект на Angular
•Как я избавился от State Observables в Angular
•Оптимизируйте размер пакета Angular в 4 шага
- Ember
•The Ember Times — Issue No. 163
•Подготовка Embroider
•Совместное использование Parent Model в Route Boundaries
- Libs & Plugins
•Символьные вычисления в JavaScript с помощью Math.js
•vanilla-colorful — порт react-colourful на ванильные Custom Elements.
Браузеры
• Mozilla представила новые возможности по продвижению дополнений к Firefox
• В Chrome началось включение блокировщика ресурсоёмкой рекламы
• Вредоносный пакет npm воровал файлы Discord и браузеров
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
aio350
Спасибо за подборку