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

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

Медиа

• Подкаст «Веб-стандарты» №195. Chrome 78 и iOS 13, сгибание на React, вариативные Google Fonts, прокси и jQuery
• Подкаст «CSSSR»: Новости 512 —Франкенштейн, семантика HTML, Nim и «секретный квантовый компьютер»
• Подкаст «Пятиминутка React» — FrontendConf 2019
• Подкаст «UnderJS» #5 — Разговор с Романом Дворновым про Open-Source и вкусные детали Web [Ламповый]
• Подкаст «Сделайте мне красиво», Выпуск №25, в гостях Юрий Цуканов — Конкуренция, плохие способы учить язык и полезные ссылки
• Подкаст «Сделайте мне красиво», Выпуск №26 — Вопросы работодателю, архитектура не нужна и атомарный CSS
• Девшахта-подкаст #95: Зачем проводить конференцию на английском языке
• Подкаст «Фронтенд Юность (18+)» #109 Продаём технические долги коллекторам Pro Unlimited
• Подкаст «Веб-стандарты» — 194. Eric Meyer and Max Bock on HTML, CSS, and Web standards
• «Как я стал Front-end разработчиком». Евгений Ковальчук на канале webDev
• FrontSpot Show #12: Сергей Рубанов про будущее JS, секреты платного опенсорса, тонкостях BeerJS.
• Repozitorro #28 — Достойное портфолио верстальщика

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

• 5G — технология, которая, видимо, замедлит веб
• Drag-&-Drop компоненты для слепых пользователей? Вы шутите?
• Сервис-воркеры в клиенте Slack: об ускорении загрузки и оффлайн-режиме
• Как правильно “делать” семантику
• Полное руководство по отзывчивым изображениям!
• Переход в оффлайн с микроформатами
• Дополнительные параметры, помогающие веб-сайтам делать превью их контента в поиске Google
• Вам действительно нужен PWA? Четыре вопроса, которые помогут вам определиться
• Франкенштейн-миграция: подход, не зависящий от фреймворка: часть 1, часть 2
• Почему прогрессивные веб-приложения — это будущее мобильного Интернета?
• Руководство по реализации темных режимов на сайтах

• Инструменты
  • Запуск Lighthouse в CI с использованием Github Actions
  • Размеры изображения и видео для социальных сетей.
  • navi — интерактивный инструмент с подсказками для командной строки
  • image-actions — автоматически сжимает jpeg, png и webp изображения в пулреквестах на GitHub
  

• Производительность
  • Ускорение instagram.com. Часть 1
  • Технологии Яндекс Турбо-страницы и Google AMP для e-commerce
  • Исследование производительности анимации с DevTools
  • Показатели производительности для невероятно быстрых веб-приложений
  • Подходящие ли сейчас время выбрать AMP?
  

CSS

• Заходят как-то два браузера в скроллбар…
• Где и как использовать колоночный макет (CSS Columns)
• Защита Email от Spamer’ов на CSS
• Использование Google API для доступа к вариативным шрифтам.
• Более умные пользовательские свойства с новым API Houdini
• Как CSS Grid меняет наше представление о структурировании контента

JavaScript

• История и наследие jQuery
• Боль и слёзы в Svelte 3
• Руководство по обработке ошибок в JavaScript
• Выход за пределы console.log() – 8 console методов, которые следует использовать при отладке JavaScript и Node
• JavaScript в 3D: введение в Three.js
• Новые и потенциальные функции JavaScript ES2019, которые порадуют каждого разработчика
• 6 вещей, которые вы, вероятно, не знали, что javascript может делать нативно
• Фильтрация данных на стороне клиента: сравнение CSS, jQuery и React

• Теория
  • Объединение стилей с помощью JavaScript Proxy
  • Объяснение того, как работает Intersection Observer
  • Странный мир Infinity в JavaScript
  

• React
  • Мышление в парадигме React Hooks
  • Конечные автоматы в React
  • Как решить проблему Render Props Callback Hell
  • React & SEO: разработка SPA на Next.js, оптимизированного для Google
  • Рекурсия в React: рендер комментариев с вложенным дочерними элементами
  

• Vue
  • Как структурировать ваш Vue проект для долгосрочной перспективы
  • 15 директив Vue, которые значительно увеличат вашу производительность
  • Создание расширений Chrome с помощью Vue.js
  • MSK Vue.js Meetup #2
  

• Angular
  • «WARNING: sanitizing HTML stripped some content» и как с ним правильно бороться
  • Как использовать компоненты рекурсивно в Angular
  • Angular и доступность: проблемы и стратегии
  • Как работать с асинхронными провайдерами в Angular
  

• Ember
  • Релиз Ember 3.13 (Octane превью)
  • Промисы и пользовательские состояния в Ember.js
  • Подкаст JSJ 395: Новый New Ember с Mike North
  • Анимация роутов с Ember Animated
  

Браузеры

• Как рисует браузер. Доклад Яндекса
• Microsoft портирует браузер Edge на Linux
• Google, Mozilla и Cloudflare начали поддерживать протокол HTTP/3
• Mac перестали загружаться из-за обновления Google Chrome
• Как сделать скриншот сайта с высоким DPI в Firefox

Занимательное

• CloudFlare запустил бесплатный VPN — без регистрации (и SMS)
• GitHub запускает свои щупальца в CI/CD и менеджмент артефактов
• Почему разработчики так любят тёмную тему
• GitHub открыл наработки по применению машинного обучения для поиска и анализа кода
• Продали технологии в Snap и набрали популярность на функции «какая ты знаменитость»: кто разработал приложение Gradient
• Yahoo сменила логотип и провела ребрендинг

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

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