Дайджест свежих материалов из мира фронтенда за последнюю неделю №343 (10 — 16 декабря 2018)

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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №151: События и сообщество в Твери, Firefox, скролбары и движки, Quicklink и Resource Hints, аутлайны, формы и таблицы.
• Подкаст «Frontend Weekend» #83 – Илья Климов о том, как и зачем был создан образовательный проект JavaScript.Ninja
• Девшахта #61: TypeScript и его поддержка в IDE от JetBrains
• Подкаст «Фронтенд Юность (18+)» #75 Tits on keyboard, #76 Как прокачать фронтенд сообщество
• Подкаст «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:
  • Перед вами — React Modern Web App
  • 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

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

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