Дайджест свежих материалов из мира фронтенда за последнюю неделю №379 (2 — 8 сентября 2019)

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

Медиа    |    Веб-разработка    |    CSS    |    Javascript    |    Браузеры    |    Новости

---

Медиа

• Подкаст «Фронтенд Юность (18+)»: #106 Сеньёр знает цену говнокоду
• Подкаст «Frontend Weekend» #97: Всеволод Родионов о том, как вместо карьеры мореплавателя построить карьеру разработчика

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

• Аккордеон, faq, спойлер и другие раскрывающиеся виджеты
• Новые типы микроразметки для расширенных интерактивных сниппетов
• Архитектура фронтенда: Средний круг
• Apple только что запустила веб-компоненты на продакшене, и вы, вероятно, пропустили это

• Инструменты
  • Кастомная тема в Chrome DevTools
  • Что нового в DevTools (Chrome 78)
  • Отладка TypeScript в Firefox DevTools
  • Webpack Boilerplate — минимальный Webpack 4 бойлерплейт с Sass, ESLint, Hot Module Replacement и оптимизацией development/production
  • 5 советов для Firefox DevTools — Storage Inspector
  • Chrome 77 — Что нового в DevTools
  • «Globalization Tools — The State of the Web». Новое видео на канале google developers с Андреем Ситником в качестве приглашенного гостя
  

• Доступность
  • Инклюзивные компоненты: переключатель темы
  • Итак, вам предъявляют иск за несоблюдение доступности
  

• Производительность
  • Особенности Google PageSpeed: улучшение оценки сайта и его рейтинга в поиске
  • Чеклист для аудита веб-производительности
  • Веб-производительность: минимизация DOM Reflow/Layout Thrashing
  • Почему делаю предзагрузку шрифта, даже если в этом нет потребности
  

• Эффекты
  • Как динамически изменять цвета изображений продуктов с помощью CSS Blend Mode и SVG
  • Конфигуратор для создания пользовательских эффектов искажения на WebGL
  • Подборка креативных сайтов «Inspirational Websites Roundup» #8
  • Как создать Webcam Audio Visualizer с помощью Three.js
  

CSS

• Всё, что вам нужно знать про CSS Margin
• Инструмент для сравнения CSS фреймворков
• Обрезка и визуальная потеря данных в CSS
• Понимание специфичности в CSS
• Использование PostCSS для автоматизации вашего рабочего процесса
• Различные методы расширения прямоугольника c сохранением border-radius
• Мой любимый CSS хак
• CSS Variables for IE11: Настоящий polyfill для пользовательских свойств в IE11
• Что делают CSS-разработчики и зачем они нужны?

JavaScript

• Анимация ссылок в строке браузера с помощью JavaScript и эмодзи
• 5 заповедей TypeScript-разработчика
• Как оптимизировать ваше приложение JavaScript с помощью сервис воркеров
• Должен ли сайт работать без JavaScript?
• Простой самодельный JavaScript обфускатор
• Как работает JavaScript

• Теория
  • Профессиональное использование DOM
  • Как делать trim строк в JavaScript (ES2019)
  • Как ускорить оператор spread в JavaScript
  • Асинхронный JavaScript: введение в JavaScript Promises
  • 8 привычек, которых следует избегать при разработке на Javascript
  • Итераторы и генераторы в JavaScript: асинхронные итераторы
  

• React
  • 14 советов по написанию чистого React-кода: Часть 1, Часть 2
  • Model-Based тестирование в React с помощью конечных автоматов
  • Почему React делает это?
  • Документация и предосмотр ReactJS компонентов с JSDoc
  • Добавление индикатора загрузки и уведомлений в ваше React приложение
  • Миграция с JavaScript на TypeScript на реальном React проекте
  • React Microfrontends и Monorepos: идеальное сочетание
  • Все доклады с React Rally 2019
  

• Vue
  • Передача данных во Vue.js – как это работает?
  • Hooks во Vue.js версии 3.0
  • Функциональные компоненты Vue.js: что, почему и когда?
  • Опыт использования Vue.js в «Едадиле»: как применяют и почему не выбрали React
  • Как работать с DOM во Vue
  • Ленивая загрузка отдельных компонентов Vue и prefetching
  • Динамические SVG маркеры для Google Maps во Vue.js
  • Как использовать переменные среды во Vue.js
  • Как использовать Google Maps в приложениях на Vue.js
  • Vue PWA: пример прогрессивного веб-приложения с Nuxt
  

• Angular
  • Руководство для начинающих по GraphQL с Angular и Apollo
  • Советы по Dependency Injection в Angular
  • Как использовать билдеры форм в Angular 8 для валидации реактивных форм
  • Шаринг компонентов с помощью Angular и Bit
  

• Ember
  • Ember Concurrency
  • Commit Porto '19: Процветание через цикл рекламы: история Ember.js (Рикардо Мендес)
  

• Libs & Plugins
  • Рассказ о том, как популярная JavaScript-библиотека начала выводить в терминал рекламу
  • hashids.js — Небольшая JS библиотека для генерации YouTube-подобных идентификаторов из чисел.
  • O-GL — минималистичный WebGL фреймворк
  • spacetime: утилита для работы с часовыми зонами
  • Создание живых аватаров (типа Animoji) с помощью face-api.js
  

Браузеры

• Релиз Firefox 69
• Обновление Firefox снизит энергопотребление macOS-устройств в три раза
• Mozilla уверяет, что обновления WebExtensions API не повредят работе блокировщиков в Firefox
• Mozilla начала блокировать cookie-файлы для отслеживания действий пользователей в браузере Firefox
• Вышел новый Яндекс.Браузер: музыка, уведомления, поиск по странице
• Объединение рекламных компаний предложило альтернативу cookies на фоне запрета Mozilla на отслеживание пользователей

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

• Deepfake: как нейросети раздевают знаменитостей и сводят нас с ума — и чем это опасно
• Факторы ранжирования Google 2019 — исследование Рэнда Фишкина
• Виды машинного обучения
• В двух словах о шрифтах. Часть первая
• Google открыл код библиотеки для конфиденциальной обработки данных
• Apple раскритиковала отчёт Google об уязвимости iPhone и обвинила компанию в создании иллюзии массовой угрозы
• Почему не стоит писать комментарии в коде?


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

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