Дайджест свежих материалов из мира фронтенда за последнюю неделю №339 (12 — 18 ноября 2018)

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

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

---

Медиа

• Подкаст «Frontend Weekend» #79 – Олег Поляков об основании CodeDojo и о том, как это стало основным местом работы
• Подкаст «Веб-стандарты», Выпуск №147: Chrome Dev Summit, API к персональным данным, HTTP/3 на UDP, веб-компоненты
• Подкаст «Пятиминутка React» #49 — bem-react-core
• «Девшахта — подкаст»: 57: Как в компании Wrike используют язык Dart
• Подкаст «Фронтенд Юность (18+)» #73 Три корочки Эдди Османи
• Подкаст «CSSSR»: Новости 512 — Выпуск №29 (12.11 — 18.11)
• Видеоблог Вадима Макеева 9. Меню для меню, гриды или Бутстрап, целесообразность удобства
• KharkivJS #9 2018, 32 видео
• FrontTalks 2018, 16 видео
• Chrome Dev Summit 2018 — All Sessions

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

• До свидания, Electron. Здравствуйте, настольные PWA
• HTTP поверх протокола QUIC будет стандартизирован как HTTP/3
• Начало работы с WebAssembly, используя только 14 строк на JavaScript
• Web.dev by Google — новый ресурс c подробной структурированной информацией о современных техниках веб-разработки
• Мощь веб-компонентов
• 5 причин, по которым статические сайты рулят
• Основные моменты, вынесенные из Chrome Dev Summit 2018
• Виртуальный DOM — медленный. Встречайте мемоизированный DOM

• Производительность:
  • Google провёл редизайн инструмента PageSpeed Insights
  • Google выпустила приложение Squoosh для оптимизации изображений
  • Адди Османи про браузеры, JS и его оптимизацию
  • Измерение, оптимизация и мониторинг. Addy Osmani о том, как правильно инвестировать свои силы в производительность
  • Обзор докладов с конференции performance.now(), прошедшей недавно в Амстердаме
  • Инлайнить или кешировать? Оба варианта, пожалуйста!
  • Ретроспектива работы над производительноcтью в Mapbox Studio (большого приложения на React — Redux с рендером в WebGL canvas с Mapbox GL)
  

• Tools:
  • Рассылай и властвуй: инструменты для создания и тестирования рассылки
  • Разработка фронтенда на iPad Pro (2018)
  

• Accessibility:
  • Важность уровней заголовков для вспомогательных технологий
  • Почему использование значений `tabindex` выше чем “0” — это плохо
  • Focus-стили, специфичные только для клавиатуры
  

• Анимация:
  • Page Flip Layout
  • flashlight эффект для дома с привидениями
  • Креативный концепт страницы разработчика (digital design)
  

CSS

• Примеры использования флексбоксов
• “C” в CSS: The Cascade
• Как избавиться от неиспользуемого CSS для облегчения CSS файлов
• Разница между currentColor и Custom Properties
• Braces to Pixels. Подробная статья на alistapart о том, как CSS код превращается в пиксели на экране
• Плавное масштабирование текста в JavaScript & CSS
• Хардкорный CSS calc( )
• Небольшое видео о том, как команда basecamp.com использует CSS Grid на продакшене

JavaScript

• Google профинансирует улучшение фреймворков JavaScript
• Играем в Mortal Kombat с TensorFlow.js: перенос обучения и дополнение данных
• «TypeScript Definitive Guide» — бесплатная онлайн-книга по Typescript
• Обработка ошибок в JavaScript: полное руководство
• Цепочки промисов мертвы. Да здравствует async/await
• Создание своей собственной интерактивной JavaScript песочницы
• Почему Facebook api начинается с цикла for
• После двух лет использования TypeScript – стоило ли оно того?

• NodeJS:
  • Node.js sleep, usleep, msleep. Как затормозить поток и сделать паузу
  • Как использовать NodeJS без фреймворков и внешних библиотек
  • Оффлайн документация по Node.js (PDF)
  

• Теория:
  • Контекст выполнения и стек вызовов в JavaScript
  • Возможности JavaScript, о которых я не знал
  • Руководство по JavaScript: часть 1: первая программа, особенности языка, стандарты, часть 2: стиль кода и структура программ, часть 3: переменные, типы данных, выражения, объекты
  • Занимательный JavaScript: Без фигурных скобок
  • Контекст выполнения и стек вызовов — визуальная иллюстрация в виде разрезанного торта
  

• React:
  • Введение в React Hooks
  • Почему React Hooks, и как вы вообще до этого дошли?
  • Концепты, которые вы должны знать в React.js (после изучения основ)
  • Обзор Render Props в React
  • Создание React To-Do App с помощью React Hooks (No Class Components)
  • Как использовать React.lazy и Suspense для ленивой загрузки компонентов
  • Hooked on hooks: как использовать React’s useReducer()
  • Делаем React реактивным используя хуки
  

• VueJS:
  • Как настроить установку переменных окружения Nuxt.js в рантайме, или Как сделать всё не как все и не пожалеть
  • Превью Vue.js 3.0 от Evan You
  • Создание вашего первого Vue.js PWA проекта
  • Как мы используем Redux & Redux-Observable с Vue (v3.0 journal)
  • Offline-First Vue приложения с Hoodie & Workbox
  • Проектируем улучшенный UX с Vue.js переходами и анимациями
  • Визуальное объяснение Vuex
  

• Angular:
  • Оптимизация обработки событий в Angular
  • Angular — все доклады с AngularConnect за 2015-2018
  • Начало работы с Angular App и Angular CLI за несколько минут
  

• Libs & Plugins:
  • TensorSpace.js — фреймворк для 3D визуализации нейросетей, построение интерактивной и интуитивной модели в браузерах, поддержка предварительно обученных моделей глубокого обучения от TensorFlow, Keras, TensorFlow.js
  • TNG-Hooks — предоставляет вдохновленные Реактом «хуки» типа useState(..) для автономных функций
  • router: простой JS роутер для решения одной задачи без фреймворков React, Angular или Vue
  

Браузеры

• Firefox начнет уведомлять о посещении взломанных сайтов, а также изменениях цен
• В ночные сборки Firefox добавлена поддержка Wayland
• Mozilla тестирует в Firefox две новые возможности: Price Wise и Email Tabs
• В Chrome развивается API для создания полноценных пользовательских приложений

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

• Семь новых атак на механизм спекулятивного выполнения в CPU
• Раскол среди раскольников: что произошло с четвертой по капитализации криптовалютой Bitcoin Cash
• Взгляд изнутри: про продуктовую культуру Facebook
• Google откроет для всех домен верхнего уровня .dev
• Microsoft выращивает огурцы лучше, чем Tencent и Intel. Основанная Биллом Гейтсом компания, похоже, наконец нашла свое призвание
• Статистика Octoverse: топовые языки программирования в 2018-м


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

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