Фронтенд-дайджест №343 (10 — 16 декабря 2018)

Решили фронтендеры пойти в бар, но не смогли собраться, потому что не настроили вебпак 📦

Однако, всем привет и поехали!

Медиа

• Подкаст «Веб-стандарты», Выпуск №151: События и сообщество в Твери, Firefox, скролбары и движки, Quicklink и Resource Hints, аутлайны, формы и таблицы
• Подкаст «Frontend Weekend» #83 – Илья Климов о том, как и зачем был создан образовательный проект JavaScript.Ninja
• Девшахта #61: TypeScript и его поддержка в IDE от JetBrains
• Подкаст «Фронтенд Юность (18+)» #75 Tits on keyboard
• Подкаст «CSSSR» Remote Talk #03 — Алексей Волков и Олеся Козлова, Челябинск
• "ALL YOUR HTML" #s2e1: "Satellite Text" (простой текст вокруг картинки), первый стрим нового сезона

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

• Как работают браузеры — введение в безопасность веб-приложений

• Краткий обзор фронтенд-разработки в 2018 году

• Генератор кода GraphQL

• Создание анимированной формы авторизации для TouchID

• Производительность:

  • Анти-паттерн производительности: Base64 Encoding
  • Измеряем влияние расширений Chrome на производительность
  • Все о prefetching
  • GoogleChromeLabs/quicklink - инструмент, ускоряющий предзагрузку страницы, предварительно выбирая ссылки во вьюпорте во время простоя

• AMP/PWA:

  • Кейс: как Pinterest перешёл на PWA и увеличил активность пользователей на 60 %
  • Существует ли холодная война между Android и Chrome из-за PWAs?
  • Быстрее, чем AMP

• Accessibility:

  • JavaScript и гражданские права. Использование наших тех. навыков для защиты равных прав пользователей
  • Не древняя стратегия навигации: это больше, чем просто клавиша TAB
  • Использование aria-live
  • Все меняется? Что может случиться с законом о доступности в Великобритании после Brexit
  • В Firefox Accessibility Inspector теперь можно увидеть контраст WCAG, включая диапазон значений для градиентного фона

CSS

• Просто используйте стили для :focus, чёрт возьми
• Введение и руководство по CSS Object Model (CSSOM)
• DebuCSSer - инструмент отладки CSS с непроизносимым названием
• CSS-in-JS или CSS-and-JS
• Свойство visibility - это не только про видимость элемента
• Когда применяются псевдо-классы :hover, :focus и :active?
• Проверяем, пустой ли инпут с помощью CSS
• Исследование свойств в спецификациях CSS
• Математика в CSS

JavaScript

• О преимуществах встраивания CSS в JS

• Кто принимал участие в JavaScript 2018 Survey?

• Продвинутые инъекции JavaScript кода

• Netflix Technology Blog: Наши выводы после внедрения GraphQL

• JavaScript: насколько далеко мы продвинулись

• Решающий поединок между тех-трендами 🏆: React vs Angular vs Vue

• Используйте эти функции Javascript, чтобы сделать ваш код более читабельным

• Node.js:

  • Машинное обучение с Node.js при помощи библиотеки Tensorflow.js
  • Запускаем дрон с помощью React и Node.js! (100% JavaScript!) — часть 1
  • 19 способов стать лучше для Node.js разработчиков в 2019
  • Node.js API и веб-фреймворки для 2019

• Теория:

  • Явные возможности JavaScript
  • Как работает JavaScript: обзор движка, среды выполнения и стека вызовов
  • Наследование в JavaScript и цепь прототипов
  • ECMAScript - пробуем что-то из ES2019 (ES10)
  • Публичные и приватные свойства классов

• React:

  • 9 статических генераторов сайтов на React для 2019
  • Рендер списков с помощью React Virtualized
  • Написание кода React быстрее с помощью простых React-сниппетов
  • Советы по оптимизации React
  • Async React с помощью React Router & Suspense
  • React: State & Props IRL

• VueJS:

  • Рассказы, главы и параграфы: структурирование контента с помощью Storyblok и Vue.js
  • Выбор темы интерактивной карты с помощью Vue.js

• Angular:

  • Написание кастомное TSLint правило для Angular
  • Вариант для наследования компонентов в Angular, часть 1
  • Делаем Angular библиотеки еще лучше — часть 1
  • Миграция с AngularJS на Angular - новая стратегия

• Libs & Plugins:

  • matchit: быстро парсит и сравнивает URLы
  • Rendora: динамический рендеринг на сервере, использующий headless Chrome для решения SEO проблем с современными фреймворками React, Vue, Angular без усилий
  • pika: поиск современных npm-пакетов. Получи быстрые и легковесные JavaScript сборки.
  • Почему я больше не использую D3.js

Браузеры

• Релиз Firefox 64, Подробности для разработчиков в обзоре Марата Таналина
• Новый Edge будет поддерживать расширения Chrome
• Opera выпустила первый Android-браузер с поддержкой Web 3 и встроенным криптокошельком Ethereum
• Браузер Brave завершил переход на Chromium
• Подборка комментариев, посвященных недавней ситуацией с браузерами и Edge