Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
• «Новости 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 | Браузеры
Медиа
• «Новости 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
- Инструменты
• Что нового в 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
• Три способа создания клякс с помощью CSS и SVG
• «Серая мертвая зона» градиентов
• Сверхгибкая CSS-карусель, улучшенная с помощью JavaScript-навигации
• Новые возможности CSS в 2021 году
• Важность изучения CSS
• Будущее CSS: Scroll-Linked анимация и @scroll-timeline (часть 2)
• Прекратить использование шрифтов со значками
• Как определять позицию мыши в CSS
• Изучение @property и его анимационные возможности
• Анимированный семантичный аккордион на чистом CSS
• Адаптивные изображения: разные методы и тактики
• Илюстрированная шпаргалка по CSS Grid в 2021
JavaScript
• 5 распространенных ошибок, связанных с памятью в JavaScript
• Как анти-TypeScript «разработчик JavaScript» вроде меня стал поклонником TypeScript
• Темная сторона Javascript: три функции, которые вы никогда не захотите использовать
• Управляйте поведением импорта в JavaScript с помощью карт импорта
• Gyro-web: доступ к ориентации устройства в JavaScript
- Релизы
• 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
- Vue
• Все о Vue CLI
• Создание 8 Puzzle с аудио в Vue.js для Evanescence
- Angular
• Как я правил баг в Angular
• Angular: Показываем скелетон страницы за три шага
• Понимание Angular View Encapsulation
• Введение в лучшие практики Angular
• Полное руководство по безопасности Angular
• Angular Universal: реальные проблемы с приложениямиAngular Universal: проблемы реального приложения
• View State Selector Angular design pattern
• Внутренние структуры данных в Ivy
- Ember
• The Ember Times — Issue No. 174
• Опрос сообщества Ember.js в 2021
- Svelte
• Запись вебинара: Начало работы со Svelte в WebStorm
• Хранилище Svelte для prefers-reduced-motion
Браузеры
• Релиз Chrome 89
• Google упростила тестирование новых функций Chrome при помощи нового раздела Experiments
• Google сокращает цикл подготовки новых выпусков Chrome с шести до четырёх недель
• Microsoft выпустила Edge 89 — браузер запускается до 41% быстрее и теперь поддерживает вертикальные вкладки
• Разработчики браузера Brave скоро запустят свою поисковую систему с высоким уровнем конфиденциальности
• WordPress рассматривает отказ от поддержки IE 11
• Ядро Drupal прекращает поддержку Internet Explorer 11 в Drupal 10
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.