Дайджест свежих материалов из мира фронтенда за последнюю неделю №317 (28 мая — 3 июня 2018)

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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №123: YaC и WWDC, новинки Chrome, Edge и Firefox, вложенность, calc и CSS-хакеры, как писать код быстро, вариативные шрифты, await и ES-модули, есть ли зверь фулстек, Яндекс Лэндинги.
• Подкаст «Frontend Weekend» #55 – Никита Прокопов про ClojureScript, ведение блогов и создание собственного шрифта
• Подкаст «devschacht»: Ночной фронтенд #35 — РИТ++
• Подкаст «Фронтенд Юность (18+)» #50 Мифы о zero configuration
• Подкаст CSSSR: Новости 512 — Выпуск №8 (28.05 — 03.06)
• «ALL YOUR HTML» #51: «Соединённые частицы в 3д»

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

• Новые релизы: GSAP 2.0, WordPress 15, анонс Lighthouse 3.0, выход Material-UI v1, Jest 23, анонс TypeScript 2.9
• Почему разработка фронтенда такая нестабильная?
• Культ сложности. Критическая заметка Джефри Зельдмана о текущем состоянии веб-разработки
• Создание отзывчивого изображения. Как создать логотип, который соответствует соотношению его сторон
• 9 удивительных секретов PWA
• Доступные индикаторы фокуса: то, на чем стоит сфокусироваться

• Производительность:
  • prerender-loader! — универсальный пре-рендеринг для Webpack. Улучшает first paint, часто даже без изменения кода
  • Что такое Client Hints и стоит ли их использовать
  • Уменьшение размера изображений с помощью цветовой дискретизации
  

• Tools:
  • На Yarn и обратно (на npm) опять
  • Chrome 67 — что нового в DevTools
  • Три шага для развёртывания Webpack приложений на Heroku
  

CSS

• Алгебра в calc(), новая специфичность селекторов 4 уровня и другие майские новинки CSS
• Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого
• Объясняем Z-index: как позиционировать элементы с помощью CSS
• Решение жизненных проблем с помощью CSS
• critters — Webpack плагин для инлайнинга критического CSS и ленивой загрузки для остального
• Как работает CSS: понимание каскада
• Состояние изменения градиентов с помощью CSS-переходов и анимаций
• HSL() / HSLa() отлично подходят для программного контроля цвета

JavaScript

• Полезные методы массивов и объектов в JavaScript
• #SmooshGate FAQ
• Свойства современного JavaScript, которые вы должны использовать каждый день для улучшения разработки и какие проблемы они решают
• Лучшие практики для использования современого синтаксиса JavaScript
• Захват и отчет по JavaScript ошибкам с помощью window.onerror

• ES2015+:
  • Что нового в ES2017: функции Async, улучшенные объекты и остальное
  • ES6 (ES2015) и после него: понимание версионирования JavaScript
  • ES6 в действии: улучшенные литералы объектов
  • Контроль потока в современном JS: Callbacks to Promises to Async/Await
  

• VueJS:
  • Создание современных приложений с помощью Django и Vue.js
  • Создание графиков в реальном времени с помощью Vue.js
  • Лучшие ресурсы для изучения Vue.js в 2018
  • От VanillaJS к Vue.js: история рефакторинга
  

• React:
  • Давайте влюбимся в React Fiber
  • Reach Router — новый роутер с акцентом на доступность. Быстрый обзор свойств и особенностей использования
  • Руководство по Next.js: SEO-Friendly React E-Commerce SPA
  • react-ideal-image — почти идеальный React компонент для изображений
  • Самые важные уроки, которые я вынес после года работы с React
  • Понимание Redux: самое простое руководство в мире по для начинающих
  • Управление состоянием приложения в React с Unstated
  

• Angular:
  • NgRx — лучшие практики для Enterprise приложений на Angular
  • Angular + Redux — урок, который мы для вас выучили
  • 44 быстрых совета для тонкой настройки производительности в Angular
  

• Libs & Plugins:
  • proppyjs — Небольшая JS библиотека для функциональной композиции props. Поддерживает ReactJS, VueJS, PreactJS и ReactiveX
  • 11 библиотек Javascript, которые вы должны знать в 2018
  • minipack — упрощённый пример современных модульных сборщиков, написанных на JS
  

Браузеры

• Релиз web-браузера Chrome 67
• В Firefox 63 будет представлен блокировщик скриптов майнинга криптовалют
• Уязвимость в Chrome и Firefox в течение года позволяла получать данные о Facebook-профилях
• В Google Chrome появилась поддержка беспарольной аутентификации на сайтах по стандарту WebAuthn

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

• Возвращение Geektimes на Хабр
• Архитектор Big Data Tesla: наш автопилот — это SkyNet из «Терминатора»
• Какие шрифты лучше использовать для оформления сложных данных
• Как научить ребёнка программировать
• Действительно ли QWERTY — плохая раскладка и почему мы не сможем от нее отказаться
• Microsoft ведёт переговоры о покупке GitHub


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

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