Дайджест свежих материалов из мира фронтенда за последнюю неделю №280 (11 — 17 сентября 2017)

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

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

---

Медиа

• Подкаст «Веб-стандарты» #86: Как вписаться в iPhone X, редакторы кода, инверсная тема в 153 байтах, жизнь после git --force, история гридов, вёрстка и программирование, ES-модули в Node и в бою.
• Подкаст «Пятиминутка React» #35: FrontFest 2017
• Подкаст «Frontend Weekend» #19: Юрий Артюх учит как стать самым красивым верстальщиком рунета
• Подкаст «Фронтенд Юность (18+)» : FrontTalks — лучшая конференция в галактике
• Подкаст «Веб-стандарты», Episode #85: Ага Наплоха, Гарри Робертс, Ева Леттнер, Зак Лезерман и Хьюго Жирадель в специальном выпуске «Веб-стандартов»
• Подкаст «Drinkcast», Выпуск #8: «Что такое FrontOps»
• «ALL YOUR HTML» #14: «Анимируем графики на SVG и Canvas, + perlin noise»
• HTML Шорты: Математика для программиста, плюс текстовая версия
• Доклады с Frontend Mix: оптимизация загрузки сайтов и дизайн-система на БЭМ и React

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

• Ошибки и спорные вопросы в HTML-CSS вёрстке
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #53
• Как убрать белые полосы в Safari на iPhone X (background-color, viewport-fit, safe-area-inset-*)

• Производительность:
  • Как ускорить загрузку сайта
  • Заметка на hacks.mozilla.org о быстром построении DOMа — рискованный парсинг, async, defer и preload
  • Addy Osmani о том, как на Treebo радикально повысили скорость работы мобильной версии сайта (React/Preact PWA)
  

• Инструменты:
  • О-о-очень долгожданный релиз Sublime Text 3.0
  • Текстовый редактор Atom стал средой разработки
  • Прототипирование возможностей DevTools в будущих версиях браузеров
  

• Wordpress:
  • WordPress отказывается от React, Gutenberg будет переписан на основе другой библиотеки
  • Gutenberg предлагает новый подход к TinyMCE в WordPress 5.0
  • Gutenberg 1.1.0: новые возможности редактора
  

CSS

• Доступ к CSS-переменным и их изменение с помощью Javascript
• Заблокированные кнопки — отстой
• CSS-in-JS — это как заменить сломаную отвертку вашим любимым молотком
• Полное руководство по Flexbox  — изучение по примерам
• Новое руководство по поддержке CSS в письмах от campaignmonitor
• Видео о создании CSS Grid. Посмотрите, как CSS Grid Layout прошел путь от идеи до реального распространения во всех основных браузерах в 2017
• Удаление неиспользуемых правил CSS
• Devices.css — подборка современных устройств, воссозданных на «чистом CSS»

JavaScript

• Почему Facebook SDK занимает около 16% JavaScript-кода на сайтах и что это значит
• Babel: изменения, запланированные для версии 7.0
• О том, как можно уменьшить влияние третьесторонних JS скриптов на производительность всего сайта
• Как работает JavaScript: управление памятью + как бороться с четырьмя распространёнными утечками памяти
• Готовы ли поисковые остальные движки, кроме Google, к краулингу и индексированию JavaScript?
• Что я люблю и ненавижу во Flow
• Есть ли смысл в людях, которые не могут писать JavaScript?

• ES2015+:
  • Применение ES2015+ кода на продакшене уже сегодня
  • Async/Await сделают ваш код проще
  • Асинхронная рекурсия с помощью Callbacks, Promises и Async.
  • Простое объяснение монад в JavaScript
  • HTML шаблоны, реализованные с помощью JavaScript Template Literals
  

• Теория:
  • JavaScript: загадочное дело выражения null >= 0
  • Думать как JavaScript. Перевод статьи Кайла Симпсона “Thinking JavaScript”
  • JavaScript: методы асинхронного программирования
  • Почему “throttling” и “debouncing” так называются?
  • ООП в JavaScript
  

• VueJS:
  • Паттерны разделения кода приложения на Vue.js
  • Функции рендера Vue.js и transitions
  • Phytochemia: почему мы выбрали Vue.js
  

• React:
  • Что нового в React 16?. В статье рассмотрен пример создания музыкального плеера с использованием некоторых функций нового React
  • React для Angular разработчиков
  • Как организовать больше приложение на React и сделать его масштабируемым
  • react-powerplug — создает состояние и передает логику его детям, давая жизнь dumb компонентам
  

• Angular:
  • Как я перестал любить Angular
  • Использование Веб Компонентов с Angular
  • Начало работы с End-to-End тестированием в Angular с использованием Protractor
  • Проблемы с защитой роута в Angular
  

• Libs & Plugins:
  • p-progress — создание промиса, который сообщает о прогрессе.
  • punchcard — jquery плагин для создания графиков в стиле GitHub перфокарт
  • classwrap — js утилита для конкатенации имен CSS классов по заданным условиям
  • ellipsed — JS библиотека для добавления троеточия в многострочных текстах
  

Браузеры

• В Chrome 64 будет прекращено автоматическое воспроизведение видео со звуком, а FTP будет помечаться, как небезопасный протокол
• Проект Mozilla представил дополнение с реализацией контекстных контейнеров для Firefox
• В Firefox 57 будет обновлён внешний вид средств для разработчиков

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

• iPhone X, iPhone 8 и 8 Plus, Apple Watch Series 3 и Apple TV 4K
• Российские дизайнеры и разработчики об iPhone X, iPhone 8 и других анонсах презентации Apple
• W3C разработал API для криптовалютных платежей в браузерах
• Нейросеть дня: 3D-маска лица на основе фотографии
• Выпуск Vagrant 2.0, инструментария для создания виртуальных окружений
• Сеть казино скомпрометировали через «умный» аквариум
• Компания Oracle выбрала Eclipse Foundation для передачи разработки Java EE
• Человеческий мозг планируют подключить к «интернету вещей»
• Почему Кремниевую долину критикуют все чаще, и что с этим делать


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

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