Дайджест свежих материалов из мира фронтенда за последнюю неделю №443 (23 — 29 ноября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Медиа    |    Веб-разработка    |    CSS    |    JavaScript

Медиа

• «Новости 512» от CSSSR: Браузер изнутри, git наглядно, bfcache, Electron 11, скепсис и Web Vitals, TIOBE в ноябре
• Подкаст «Веб-стандарты» №257. Chrome 87, Firefox 83, Servo, Safari 14, Open Prioritization, кэш туда-обратно, гриды и minmax
• «Новости 512» от CSSSR: Chrome 87, Firefox 83, TypeScript 4.1, aria-label, HTML-формы, CSS-градиенты, CSSBattle 2020
• JavaScript fwdays'20 Autumn online
• The Overflow Podcast 289: React, jQuery, Vue: what’s your favorite flavor of vanilla JS?
• ShopTalk №440: Serverless, Local Database, Edge Functions, and Using WordPress Serverless
• Подкаст syntax.fm: Potluck — Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More

Веб-разработка

• Почему для пользователей хорошо, что HTML, CSS и JS — это разные языки
• Мыслить как фронтенд-разработчик
• Изучение возможностей элементов Details и Summary
• Современный стартовый HTML шаблон
• Глубокое погружение в Page Lifecycle API
• Введение в GraphQL для разработчиков
• Обратно к основам: создание кликабельных карточек на HTML, CSS и JavaScript

• Инструменты
  • NPM 7: это то, что я называю обновлением
  • Dev Fonts — список лучших шрифтов для написания кода с предварительным просмотром
  

• Производительность
  • Реальная эффективность Brotli
  • Шумиха вокруг Core веб Vitals
  • Безжалостное избавление от Layout Shift на netlify.com
  • Как загружать шрифты так, чтобы побороть FOUT и сделать Lighthouse счастливым
  • Три вещи, которые вы не знали об AVIF
  • Как мы улучшили оценку Lighthouse нашей лендинг страницы до 96.
  

• Эффекты
  • Подборка креативных сайтов «Inspirational Websites Roundup #20»
  • Интро-анимация для сетки изображений
  • Воссоздание икосаэдра с веб-сайта Rogier de Boevé’s
  • Кодим, играючи: разнообразьте свое обучение, получая удовольствие от создания креативных штук
  • Плавание в скроллу с помощью GSAP
  

CSS

• Подробности об использовании CSS-функции minmax() в Grid-макетах
• Конечный автомат, созданный с помощью HTML чекбоксов и CSS
• Chrome DevTools: рефакторинг и улучшение таблиц стилей с помощью CSS Overview Panel
• 5 псевдоэлементов CSS, о существовании которых вы даже не подозревали (по мнению автора)
• Центрированние навигации с помощью fit-content
• Рекомендации по созданию CSS-фреймворка
• Быстрый CSS-совет: как легко показать исходный код
• Создание кнопки на CSS с эффектом сияния и плавной сменой цвета со временем

JavaScript

• ECMAScript 4: версия, которой не было
• Детальный обзор Well-known Symbols
• Marko.js — фронтенд от ebay.com
• Декораторы JavaScript с нуля
• Рендеринг на стороне сервера в JavaScript: современный подход
• JavaScript DOM Selectors — узнайте, как получить доступ к DOM [Инфографика]
• Используйте console.log() как профессионал

• React
  • Как интернационализировать ваше приложение на React с i18next
  • Плохо пахнующие компоненты React
  • Boop! — симпатичные эффекты наведения с учетом законов физики
  • Воссоздание React workflow на ванильном JavaScript
  • Создание UI компонентов c помощью SVG
  • Глубокое погружение в React Redux: управление состоянием в React с Redux
  • Оптимизация показателя PageSpeed ​​Insights для приложений на React
  • Доступные сноски и немного React
  

• Vue
  • Лучшие генераторы статических сайтов для Vue.js
  • Аутентификация с помощью Vue (x) + Firebase
  • Тестирование Vue приложений с помощью Vue Testing Library
  

• Angular
  • Декларативные, реактивные, потоки данных и Action Streams в Angular
  • Создайте директиву для свободного перетаскивания в Angular
  • Мои самые любимые вопросы на собеседовании по Angular
  

• Ember
  • Создание приложений Glimmer с помощью Snowpack
  • Component Primitives Deep Dive
  

• Libs & Plugins
  • ODIFF — Самый быстрый в мире инструмент для определения пиксельной разницы изображения.
  • I'm Ready — js библиотека для проверки, загружены ли изображения или видео
  • Suri — ваш собственный сокращатель ссылок, который легко развернуть в качестве статического сайта.
  

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.