Фронтенд-дайджест №339 (12 — 18 ноября 2018)

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

Медиа

• Подкаст «Frontend Weekend» #79 – Олег Поляков об основании CodeDojo и о том, как это стало основным местом работы
• Подкаст «Веб-стандарты», Выпуск №147: Chrome Dev Summit, API к персональным данным, HTTP/3 на UDP, веб-компоненты
• Подкаст «Пятиминутка React» #49 - bem-react-core
• Подкаст «Фронтенд Юность (18+)» #73 Три корочки Эдди Османи
• «Девшахта — подкаст» 57: Как в компании Wrike используют язык Dart
• Подкаст «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 для создания полноценных пользовательских приложений