Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
«Новости 512» от CSSSR: «История фронтенда» от CSSSR, Chrome 89, Flutter 2, import maps, free-for.dev, структуры данных Ivy
•
«Новости 512» от CSSSR: Не бандлом единым, CSS-in-JS в DevTools, туториал по Rollup, тени, псевдоэлементы ::before и ::after
•
Подкаст «Сделайте мне красиво» №56 — Не мучайся, переходи на Notepad
•
Подкаст «Фронтенд Юность» #175: Открытые отношение рок-звёзд в Netflix
•
Archakov Blog: Собеседование на позицию middle frontend-разработчика
• История фронтенда: Браузер, который умел всё
•
Состояние мобильных устройств и почему мобильное веб-тестирование имеет значение
•
Как разработать и протестировать Mobile-First дизайн в 2021 году
•
Руководство для новичков по headless CMS и Jamstack
•
7 полезных атрибутов HTML, о которых вы, возможно, не знаете
•
Динамические метатеги для ботов и сканеров с помощью Firebase и Cloudflare Workers
• CSS COLORS
•
Три способа создания клякс с помощью CSS и SVG
•
«Серая мертвая зона» градиентов
•
Сверхгибкая CSS-карусель, улучшенная с помощью JavaScript-навигации
•
Новые возможности CSS в 2021 году
•
Важность изучения CSS
•
Будущее CSS: Scroll-Linked анимация и @scroll-timeline (часть 2)
•
Прекратить использование шрифтов со значками
•
Как определять позицию мыши в CSS
•
Изучение @property и его анимационные возможности
•
Анимированный семантичный аккордион на чистом CSS
•
Адаптивные изображения: разные методы и тактики
•
Илюстрированная шпаргалка по CSS Grid в 2021
•
5 распространенных ошибок, связанных с памятью в JavaScript
•
Как анти-TypeScript «разработчик JavaScript» вроде меня стал поклонником TypeScript
•
Темная сторона Javascript: три функции, которые вы никогда не захотите использовать
•
Управляйте поведением импорта в JavaScript с помощью карт импорта
•
Gyro-web: доступ к ориентации устройства в JavaScript
• Релиз Chrome 89
• Google упростила тестирование новых функций Chrome при помощи нового раздела Experiments
• Google сокращает цикл подготовки новых выпусков Chrome с шести до четырёх недель
• Microsoft выпустила Edge 89 — браузер запускается до 41% быстрее и теперь поддерживает вертикальные вкладки
• Разработчики браузера Brave скоро запустят свою поисковую систему с высоким уровнем конфиденциальности
•
WordPress рассматривает отказ от поддержки IE 11
•
Ядро Drupal прекращает поддержку Internet Explorer 11 в Drupal 10
Дайджест за прошлую неделю.
Материал подготовили 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)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.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)
- Инструменты
•Что нового в Snowpack v3
•Unicode Range Interchange — инструмент от Зака Лезермана для манипуляций с unicode-символами в шрифтах
•Google Fonts + Material Icons. Google Fonts теперь поддерживает иконки из набора Material Design
- Производительность
•Шесть принципов создания производительных веб-приложений
•Core Web Vitals: как Google решил оценивать сайты
•Лучшие стратегии загрузки шрифтов и способы их реализации
•Рецепты Cloudflare Worker для тестирования производительности фронтенда
- Доступность
•Советы по созданию систем доступного дизайна
•Доступность состояния навигации на текущей странице
- Эффекты
•Как анимировать элемент Details
•Круговая анимация текста c SVG
•Использование GSAP 3 для веб-анимации
CSS
• CSS COLORS
•
![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)
•
![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
•
![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)
- Релизы
• Google представил фреймворк Flutter 2 и язык Dart 2.12
•Electron 12.0.0
•Встречайте Gatsby 3.0
•Релиз jQuery 3.6.0
- React
•HowToCode — Адаптация системного подхода к разработке для React и TypeScript
•Умные методы оптимизации: отложенная загрузка с помощью React
•Первый взгляд на Aleph.js: новый фреймворк React в Deno
•7 черт звездного разработчика на React
•Просто скажите нет чрезмерному ре-рендерингу в React
•Низкоуровневые диаграммы в React
- Angular
•Как я правил баг в Angular
•Angular: Показываем скелетон страницы за три шага
•Понимание Angular View Encapsulation
•Введение в лучшие практики Angular
•Полное руководство по безопасности Angular
•Angular Universal: реальные проблемы с приложениямиAngular Universal: проблемы реального приложения
•View State Selector Angular design pattern
•Внутренние структуры данных в Ivy
- Svelte
•Запись вебинара: Начало работы со Svelte в WebStorm
•Хранилище Svelte для prefers-reduced-motion
Браузеры
• Релиз Chrome 89
• Google упростила тестирование новых функций Chrome при помощи нового раздела Experiments
• Google сокращает цикл подготовки новых выпусков Chrome с шести до четырёх недель
• Microsoft выпустила Edge 89 — браузер запускается до 41% быстрее и теперь поддерживает вертикальные вкладки
• Разработчики браузера Brave скоро запустят свою поисковую систему с высоким уровнем конфиденциальности
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.