Дайджест свежих материалов из мира фронтенда за последнюю неделю №371 (24 — 30 июня 2019)

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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №182. Node.js, npm и JetBrains, сервис-воркеры и WASM, цена JS, современный CSS, доступность
• Подкаст «Веб-стандарты», Выпуск №181. Panda Meetup, Chrome 76, a11y, тост, препроцессоры и jQuery
• Подкаст «Frontend Weekend» #94 – Денис Мишунов о том, почему стоит уезжать в Норвегию и удалённо работать в GitLab
• Подкаст «CSSSR», Новости 512: Vue 3 RFC обновлён, ещё о микросервисах, новый убийца Redux и интересные публикации
• Подкаст «Фронтенд Юность (18+)» #97: Архитектура, которую ты не заслужил
• «Repozitorro» #20 — Портфолио наоборот...
• WSD в Москве 2019, 8 видео
• Amsterdam JSNation 2019, 15 видео
• Подкаст syntax.fm №154: SVGs с Sara Soueidan

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

• Как настроить веб-аналитику на AMP страницах
• Начинаете работать с веб-производительностью? Вот на чем нужно сосредоточиться.
• Создание PWA с помощью Webpack и Workbox
• Spam Detection API
• Имитация относительного позиционирования вложенного SVG внутри SVG
• HTML can do that?. Подборка демок, демонстрирующая возможности «чистого» HTML

• Accessibility:
  • Как деревья доступности информируют вспомогательные технологии
  • Отчет по судебным искам, связанным с веб-доступностью (ADA Compliance) за первое полугодие. (Спойлер: новый иск каждый час)
  • Что такое доступность для веб-приложений и почему это меня волнует?
  

• Эффектный веб:
  • Как правильно делать связанную скролл-анимацию
  • Интерактивный сайт для изучения основ синтетической музыки. Работает на Web Audio, WebAssembly и WebGL с использованием three.js, Tone.js, anime.js и React с TypeScript
  • useAnimations: анимированные иконки с помощью фреймворка Lottie и After Effects для использования в приложениях и веб-сайтах
  

CSS

• 10 PostCSS плагинов, которые сэкономят время вашему верстальщику
• 18 советов по CSS, которые сделают жизнь разработчика проще
• Три прогноза из State of CSS 2019 Survey
• Полное руководство по центрированию с помощью Flexbox
• a11y-css-reset
• Создание расписания конференции на CSS Grid
• Drag-n-drop sticky, без JS!
• Вариативные шрифты для разработчиков
• Думаем о БЭМ как о философии пользовательского интерфейса вместо именования CSS классов

JavaScript

• Стоимость JavaScript в 2019 году by Addy Osmani
• RxJS: простое введение
• Мгновенный поиск на ванильном JavaScript

• Теория:
  • Функциональный JavaScript: пять способов нахождения среднего арифметического элементов массива и метод .reduce()
  • 5 функций ES2019, которые вы можете использовать сегодня
  • Как настроить полифилл globalThis в универсальном JavaScript
  • Разбираемся с Async/Await в JavaScript на примерах
  • Коллекции JavaScript – Set, Map, WeakMap и WeakSet
  

• Mongo/Node:
  • Шаблоны проектирования в Node.js: практическое руководство
  • Новый ECMAScript модуль поддерживается в Node.js 12
  • Firebase или MongoDB: какую базу данных использовать для разработки приложения
  

• VueJS:
  • Использование middleware во Vue
  • Почему люди злятся на Vue 3
  • Руководство для начинающих по Vue CLI
  • Когда на самом деле нужен атрибут :key по Vue и зачем?
  • Как начать работать с Vuetify
  

• React:
  • Разработка приложения для потокового вещания с помощью Node.js и React
  • Знакомство с useReducer React Hook
  • Миф о недоступности React
  • Десять заповедей React компонентов
  • Добавление WebAssembly компонента в React приложение
  • Продвинутые концепты React хуков пояснённые на примере игры Змейка
  • Next.js или Create React App: какие приложения более производительны?
  

• Angular:
  • Состояние Angular в 2019-м
  • Понимание магии, которая стоит за элементами Angular
  • Создание музыкального проигрывателя с использованием Kendo UI и Angular
  • Что я узнал за 3 года разработки в Angular 2+
  

• Ember:
  • Начало работы с Glimmer-Native
  • Ember.js Seattle Meetup с Yehuda Katz
  • Пожелания для роадмапа Ember 2019
  

• Libs & Plugins:
  • 10 лучших JavaScript библиотек для визуализации данных на графиках и диаграммах
  • freezeframe.js — библиотека, которая приостанавливает анимированные .gifs, запуская анимацию при наведении мыши / клику / тачу
  • TWGL: небольшая вспомогательная библиотека для WebGL
  • pixelmatch: небольшая, простая и быстрая JS библиотека для попиксельного сравнения изображений
  • svelte-adapter: использование Svelte компонентов с Vue и React
  

Браузеры

• В Firefox Nightly тестируется генератор паролей
• Инструмент Track THIS от Mozilla позволяет обмануть рекламные алгоритмы
• В Microsoft Edge появится три режима блокировки отслеживающих скриптов
• В Firefox 68 будет предложена новая реализация адресной строки
• Первый выпуск нового браузера Firefox Preview для Android

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

• Самый важный навык, который может освоить программист
• Пользователи Google теперь могут ограничивать время хранения данных об активности (история местоположений, приложений и веб-поиска) на серверах компании
• Windows Terminal — основы настройки и первые впечатления
• «Разработка языка Kotlin обошлась намного дороже, чем наш средний продукт»: интервью с главой JetBrains
• Почему стоит включить в разработку прототипирование
• Facebook, Google и другие IT-компании совместно создадут общепринятый набор тестов для ИИ
• Трамп устно разрешил американским компаниям работать с Huawei


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

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