Дайджест свежих материалов из мира фронтенда за последнюю неделю №276 (14 — 20 августа 2017)

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

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

CSS

Javascript

Браузеры

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

Медиа

• Подкаст «Веб-стандарты», Выпуск №81: Наши на западе, Chrome 61, аудит 2.0, доступность, SVG, дизайнерам, видео, кроссбраузерность.
• Подкаст «Frontend Weekend» #15: Как разогнать сайт до скорости света (Lenta.ru, AMP, Site Perf)
• Подкаст «Пятиминутка React» #31: .getInstance, Екатерина Назарова
• Подкаст «Drinkcast» #4: «Ошибки и места их обитания»
• Подкаст «The Art Of Programming» №144: Фреймворки во фронтенде
• Подкаст «Фронтенд Юность (18+)» #15: Pipeline Operator, Atom 1.19, Safely Store A Password, Reflect API, Node.js 8.4.0
• Адаптивная вёрстка — HTML Шорты. В чём разница между резиновой, адаптивной и отзывчивой вёрсткой?
• «Введение в Web Workers» — свежее видео на .getInstance, канале о frontend-разработке
• «Треугольники с физикой и Glitch на шейдерах» — Еженедельный стрим от Юрия Артюха «ALL YOUR HTML» #11

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

• Советы сеньоров: как прокачать знания junior Front-end/JavaScript
• Размеры в SVG. Подробная статья Юлии Бухваловой про управление размерами в SVG графике
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #49
• Подборка ресурсов на тему WebVR
• Использование Paint Timing API
• AMP/PWA:
  
  • Google AMP — плохой выбор для E-commerce
  • Начинаем работать с прогрессивными веб-приложениями(PWA)
  • Offline POSTs с помощью Progressive Web Apps
  • Создание PWA с помощью стратегии гибридного рендеринга
  
  
• Производительность:
  
  • 14 метрик производительности веб-сайтов, которые необходимо анализировать
  • Аудит скорости сайта документации Vue.js
  • Расследование проблемы скорости загрузки на HTTP/2, приведшее к обнаружению бага в Chrome. Блог разработчиков akamai
  • На сегодняший день средний вес страницы — 3MB. Какие значения должны нас волновать, а какие нет?
  
  
• Инструменты:
  
  • Тестирование доступности с помощью pa11y — набора бесплатных инструментов
  • Презентация Webpack Dashboard в приложении на Electron
  • Инструмент для проверки контрастности в devtools
  • Процесс работы с Gulp для автоматизации разработки фронтенда
  • Разворачивание клиентских приложений за секунды с помощью инструмента UP от TJ Holowaychuk
  
  

CSS

• Edge ненавидит ваши атрибуты
• Перевод куррируемого Рейчел Эндрю списка багов в CSS Grid Layout
• Руководство по флексбоксам и гридам для дизайнеров
• Глоссарий терминов, связанных с загрузкой веб-шрифтов
• Состояние стилизации современных компонентов, подробно и с примерами
• Рисуем горизонтальное дерево с помощью псевдо-элементов CSS
• Способ супер-быстрого ознакомления с CSS Grid
• Архитектура CSS и три столпа поддерживаемого CSS
• Использование пользовательских свойств для модификации компонентов
• CSS Custom Properties: Micro Tip #12 — свежий выпуск шоу Supercharged на канале разработчиков Google Chrome
• Эффект наведения на CSS с привязкой к направлению

JavaScript

• Что за черт, Javascript
• Пять инструментов отладки JavaScript, о которых полезно знать
• Lodash не (только) для манипуляции списками!
• Ленивый, компонуемый и модульный JavaScript
• Лучшие практики версионирования Javascript библиотек
• JavaScript для микроконтроллеров и IoT: веб сервер
• Да, вы можете убрать jQuery и по-прежнему поддерживать IE / Edge
• Введение в Preact  —  маленькую, быструю альтернативу React
• Видео:
  
  • Про цикл событий в JavaScript или «как на самом деле работает асинхронность»? Перевод доклада Филипа Робертса с JSConf от MakeWeb.me
  • Первые видео базового курса по JS от Ильи Климова: Ключевые концепции мира JS, Замыкания и области видимости
  • Запись трансляции KyivJS
  • async / await in JavaScript — What, Why and How — свежий выпуск шоу Fun Fun Function
  
  
• ES2015+:
  
  • Использование ES2017 Async Functions
  • Async/Await сделают ваш код проще
  • Исследование производительности Object#toString в ES2015
  • Folding Promises в JavaScript
  
  
• VueJS:
  
  • Слайдер на Vue.js
  • Миграция приложения VueJS App на Vuex
  • Я попробовал Vue.js и просто его полюбил
  • 4 способа ускорить ваше приложение на Vue.js с помощью Webpack
  • Server-Side Rendering в Vue.js
  
  
• React:
  
  • Facebook отказался перелицензировать React для проектов фонда Apache
  • Все фундаментальные концепты React.js, сжатые в одну статью на Medium
  • Изучение React.js проще, чем вы думаете — интерактивные примеры
  • Я и React: старая собака с новыми фокусами — заметка Remy Sharp
  • Repatch  — упрощённый Redux
  • Юнит-тестирование Unit ваших приложений на React с помощью Jest и Enzyme
  
  
• Angular:
  
  • Неотъемлемые функции ES6 для Angular
  • Angular отклоняет ReflectiveInjector и вводит StaticInjector. Должны ли вы беспокоиться?
  • Если ты думаешь, что `ngDoCheck` означает, что твой компонент проверяется — прочитай эту статью
  
  
• Libs & Plugins:
  
  • Google опубликовала библиотеку Deeplearn.js для машинного обучения в браузере
  • promise-обертка над вебворкерами
  • gtop — дашборд для системного мониторинга в терминале
  • Scalable — плагин, позволяющий автоматически масштабировать элемент, чтобы вместить его в нужную область
  • Bubb Infotip — создание всплывающих подсказок
  • Iroh.js — динамический анализ кода для JavaScript
  
  

Браузеры

• В результате фишинга получен контроль ещё над 6 дополнениями к Chrome
• Chrome 61 Beta: JavaScript модули, Payment Request API на десктопе, Web Share API и WebUSB
• Chrome 62 будет выводить предупреждения безопасности для всех HTTP-страниц, начиная с октября 2017
• Обновление Canary DevTools: await верхнего уровня теперь поддерживается
• Microsoft обещает существенно ускорить работу браузера Edge
• Mozilla пообещала прекратить поддержку устаревших Firefox-расширений через 3 месяца

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

• WordPress 4.9 будет сфокусирован на редактировании кода и кастомизации, официальный релиз запланирован на 14 ноября
• Программы-вымогатели, нацеленные на WordPress – новая угроза
• Вышел настольный Skype Preview с новым интерфейсом, как у мобильной версии
• GitHub представил новую функцию, упрощающую обсуждение кода
• YouTube будет показывать, сколько людей смотрит видео одновременно с вами
• Компания Oracle намерена передать разработку Java EE независимому сообществу
• Fail review: неудачные собеседования
• Ранний запуск продукта — опыт основателей Reddit и Twitch
• Подборка визуализаций по алгоритмам поиска
• Трендовые навыки разработчиков, основанные на анализе “Ask HN: Who’s Hiring?”

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

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