Дайджест свежих материалов из мира фронтенда за последнюю неделю №412 (20 — 26 апреля 2020)

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

Медиа    |    Веб-разработка    |    CSS    |    JavaScript    |    Браузеры    |    Занимательное    |    

Медиа

• Подкаст «Веб-стандарты» №226: Браузеры, Chakra Core, Shower 3.0, jQuery, Гитхаб, ES-импорты, TC39, Телеграм против веба
• Pro Conf #59: Virtual EmberConf 2020 — Фронтенд Балерина | Ember Octane | Спасибо что живой
• Подкаст «Фронтенд Юность (18+)» #134: Всё выглядит сложно, если ты тупой
• Repozitorro #40 — Никогда такого не было, и вот опять!

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

• Веб-компоненты в реальном проекте
• В ночные сборки Firefox добавлена поддержка WebGPU
• Ограничение input type=”color” определенной палитрой (из изображения)
• Разработка отзывчивых сайтов и веб-приложений с помощью Flutter
• Вы уже используете SVG для фавиконок? Руководство для современных браузеров.
• SVG, Favicons и все самое интересное, что мы можем с ними сделать

• Производительность
  • Мониторинг всей памяти, используемой веб-страницей: performance.measureMemory()
  • 4 самых распространенных ошибок тестирования скорости страниц
  • Лучшая оптимизация изображения за счет ограничения Color Index
  • Эффективность Brotli в реальном мире
  

CSS

• CSS: использование внутренних и внешних отступов
• Практика CSS Scroll Snapping
• 98.css — набор стилей для воссоздания старых интерфейсов.
• Создание масштабируемой архитектуры CSS с помощью BEM и служебных классов
• Интервалы в CSS
• Интересная новая техника CSS-in-JS, с которой я не спускаю глаз
• CSS для интернационализации
• Темный режим и вариативные шрифты
• Онлайн-генератор нестандартных разделителей секций в CSS
• Как сделать карусель на CSS
• Руководство по созданию CSS-существ, вдохновленных коронавирусом
• Создание забавных эффектов с помощью CSS Text Shadow
• Объяснение доступности размеров шрифтов

JavaScript

• 23 непростых вопроса для JavaScript-собеседования
• Доступна 14 версия Node.js
• Isomorphic Layout Composer — комплексное решение для микро-фронтендов в SPA с поддержкой SSR
• Цена Javascript фреймворков
• JavaScript Style Guide: основные выводы из стайлгайда Google

• Теория
  • The Clear Architecture на примере TypeScript и React
  • [теория] Разница между веб-сокетами (WebSockets) и Socket.IO
  • Как работает TypeScript? Взгляд с высоты птичьего полета
  

• React
  • 3D-аркада в браузере: как мы сделали игру на React + Redux
  • Реализация скелетон-сетки в React
  • Компилятор, который конвертирует React-совместимый код в VanillaJS без Virtual DOM
  • Начало работы с react-redux-firebase
  • Пишем (более) чистые компоненты и JSX
  • React Hook Form — Элегантное решение для форм в React
  • React Podcast 91: Dominic Nguyen on Chromatic and Visual Regression Testing
  

• Vue
  • VueJS 3.0.0 Beta: функции, которыми я восхищаюсь
  • Превращение компонентов Vue в переиспользуемые npm пакеты
  • Vue.js: роуты с ленивой загрузкой и динамические комментарии в Webpack
  

• Angular
  • Angular: правильные вызовы API
  • 10 менее известных функций Angular, которые вы, вероятно, никогда не использовали
  • Как реализовать drag and drop в Angular 9
  

• Ember
  • The Ember Times — Issue No. 145
  • Autotracking Case Study — TrackedMap
  • Ember-Glue: Как может выглядеть UI-библиотека нового поколения для компонентов в Ember Octane?
  

• Svelte
  • Svelte, исчезающий фреймворк, что всё никак не исчезал
  • Svelte, исчезающий фреймворк, который уже не исчезнет
  • Обработчики событий и Svelte
  

• Libs & Plugins
  • Расширенный HTML
  • markmap-lib — Визуализация Markdown в качестве диаграммы связей с Markmap.
  • Как делать потрясающие визуализации данных с D3.js
  • Crank.js — пишите JSX-driven компоненты с помощью функций, промисов и генераторов.
  

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

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