Фронтенд-дайджест №340 (19 — 25 ноября 2018)

Приветствую. А начать бы хотелось с самой популярной gif из области фронтенда за последнюю неделю:

npm install..

Медиа

• Подкаст «Frontend Weekend» #80 – Гордей Левченко о переезде в Казахстан и развитии frontend-сообщества в Астане
• Подкаст «CSSSR» Новости 512 — Выпуск №30 (19.11 — 25.11)
• Видеоблог Вадима Макеева 10. Skillbox, оптимизация графики, Squoosh и элемент picture

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

• По пути к QUIC: что лежит в основе HTTP/3

• Разрабатываем свой браузер с нуля. Часть первая: HTML

• Web workers vs Service workers vs Worklets

• Зачем и как использовать WebP изображения сегодня

• Исследуем Shadow DOM

• WebSockets - глубокое погружение в концепт

• Переписываем историю Git и исходники JS для забавы и выгоды

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

  • Вы не нуждаетесь в PWA или AMP для того, чтобы делать ваши сайты быстрыми
  • Пять "почему" о производительности загрузки веб-шрифтов
  • Второй значимый контент: наихудшая метрика производительности
  • Быстрая работа Google Fonts с Cloudflare Workers

• Tools:

  • JetBrains обновила IDE WebStorm до версии 2018.3
  • Demoboard: онлайн-песочница для создания демок на JS и Markdown, которая импортирует любой пакет с npm. Больше не надо заморачиваться с package.json и node_modules
  • create-yo: используй любой Yeoman генератор. Не инсталлируй.

• Accessibility:

  • Европейский закон о доступности: переговоры между Парламентом и Советом ЕС
  • Доступность мультимедиа: это важно?

CSS

• Готовим идеальный CSS
• Flexbox. Инфографика по технологии
• Несколько дельных советов по CSS
• Прогрессивное улучшение | CSS-правило @supports
• Текущее состояние возможности стилизации скроллбаров
• Разделители внутри select
• CSS Exclusions, как мы надеемся, будут похожи на более продвинутые флоаты, дружественные к гридам
• Очередное объяснение принципов работы CSS Position Absolute
• Эксперименты с CSS writing mode
• И еще раз о порядке свойств в CSS

JavaScript

• Мутационный анализ, или как тестировать тесты

• 5 jQuery-фич, перешедших в нативный JavaScript

• 10 консольных команд для упрощения отладки JavaScript-кода

• The State of JavaScript 2018

• Опрос "State of JS" - это фарс

• Экспериментирование с интерфейсами мозг-компьютер в JavaScript

• Введение в Imba: JavaScript-совместимый язык максимально быстрой работы с DOM

• Dart для программистов на JavaScript

• Добавляем конвейерный оператор (пайплайны) в JavaScript

• 7 отмазок неиспользования TypeScript

• htm: Hyperscript Tagged Markup: альтернатива JSX, использующая темплейты со стандартными тегами, с поддержкой компилятора

• Теория:

  • Понимание мемоизации в JavaScript для повышения производительности
  • Копирование всякого в JavaScript: как различать поверхностное и глубокое копирование

• React:

  • Idiomatic Redux: история имплементации React-Redux
  • Как создать Todo List с помощью React Hooks
  • 5 способов стилизации компонентов React в 2019
  • Простое переиспользование код с помощью React Hooks
  • Как создать трехслойное приложение на React
  • Сквозная функциональность в React с использованием компонентов высокого порядка, Render Props и хуков
  • E-Commerce для разработчиков на React [w/ Gatsby Tutorial]
  • Состояние React (по мотивам State of JavaScript Survey 2018)
  • JSX - это синтаксический сахар
  • React Podcast 29: Don't Rewrite Your App for Hooks and Suspense with Jared Palmer

• VueJS:

  • Vue для jQuery разработчиков

  • Как создать SPA c помощью Vue.js, Vuex, Vuetify и Firebase

  • Создание интерактивной инфографики с Vue.js

  • Типизация Vuex без TypeScript

  • Интерактивная колода карт с возможностью свайпа на Vue.js и interact.js

• Angular:

  • Создание интерактивных списков с новым инструментом Angular 7 Drag and Drop

  • Awesome Angular GraphQL - подборка ресурсов

  • Обработка ошибок с Angular 6 - советы и лучшие практики

  • The State of JavaScript Survey 2018 в контексте Angular

  • Создание шаблонов с возможностью поиска в Angular

• Libs & Plugins:

  • autoComplete.js ✨ - простое автодополнение на чистом Javascript

  • Создание музыки с magenta.js

  • cms.js: генератор сайта на клиенте

Эффектный веб

• Как работать с матрицей в SVG фильтрах
• Эффект огня в рамках #codevember
• Эффект морфинга при смене штатов US
• Интерактивная страница orano.group с клевой комбинацией эффектов и функциональности
• Брутальные вебсайты

Браузеры

• В Firefox 65 будет переработан интерфейс настройки блокировки контента
• Представлена атака на браузеры, позволяющая определить сайт в другой вкладке
• Microsoft и Google разрабатывают версию браузера Chrome для ОС Windows on ARM