Дайджест свежих материалов из мира фронтенда за последнюю неделю №273 (24 — 30 июля 2017)

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

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

CSS

Javascript

Браузеры

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

Медиа

• Подкаст «Веб-стандарты», Выпуск №78:Chrome 60, Stylo, Flash 1996—2020, статистика браузеров, сброс стилей, большой текст, доступные подсказки, порядок элементов, новинки ES, должен ли?
• Подкаст «Frontend Weekend FW» #13: Как сделать популярный образовательный проект на YouTube
• Подкаст «Пятиминутка React» #27: Вы не поверите в чём страшный секрет популярности React...
• Подкаст «Фронтёрки» #9: Козуля, мемы, собеседования
• Подкаст «Drinkcast», пилотный выпуск от сообщества SPB Frontend: о CSS-in-JS, Houdini, сетках, Yarn и многом другом
• Нормальный сброс — HTML Шорты. Reset CSS или Normalize.css?
• Еженедельный стрим от Юрия Артюха «ALL YOUR HTML» #9 : Многоязычность в Gulp и трюк с канвас анимацией
• Видео с конференции OdessaJS
• Записи видео с конференции Frontend United 2017 — Athens
• Записи видео с конференции Front-Trends 2017

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

• Комментирование кода: хорошие, плохие и отвратительные комментарии
• Google активно продвигает AMP на международном уровне
• Создание PWA с помощью Polymer: чеклист
• Тестирование доступности библиотек шаблонов
• Понимание системы координат в SVG и трансформации (часть 1) — viewport, viewBox и preserveAspectRatio
• Производительность:
  
  
  • Улучшение веб-производительности для отражения скорости движка сайта
  • Готовьтесь: грядёт новый V8, производительность Node.js меняется. Как характеристики производительности Turbofan v8 повлияют на наш подход к оптимизации
  • Объяснение индекса скорости – другой способ измерения веб-производительности
  
  
• Эффектный веб:
  
  
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #46
  • Анимация разделения изображения на кусочки
  • Эффект размытия с помощью SVG-фильтров
  
  

CSS

• Свойства для выравнивания всего и новинки Display «повзрослели» на релиз
• Викторина: как хорошо вы знаете CSS?
• 5 свойств CSS, о которых вы, возможно, не знаете
• Визуализация CSS-каламбуров
• Создание адаптивной временной шкалы на CSS с Sass и BEM
• Раскладка:
  
  
  • Прогрессивное улучшение CSS-лэйаута: от Float до Flexbox и Grid
  • Использование единиц вьюпорта для масштабирования фиксированных лейаутов
  • Использование CSS Grid Layout в качестве masonry с помощью grid-auto-flow: dense
  • Руководство для дизайнеров по Flexbox и Grid
  • «CSS Grid меняют все (в веб лейаутах)», — Morten Rand-Hendriksen на Wordcamp Europe 2017
  
  
• CSS переменные:
  
  
  • Теперь, когда пользовательские свойства CSS являются рабочей вещью, все значения могут быть изменены индивидуально
  • Кастомные свойства CSS — динамические изменения с и без Javascript
  • «CSS Houdini — от CSS переменных к JavaScript и обратно», — Сергей Господарец на Frontend United
  
  
• Анимация:
  
  
  • «Алиса в стране Web Animations API», — Rachel Nabors на CSS Day 2017
  • Как создать красивый анимированный лоадер на чистом CSS
  • Пружинящая физика с помощью CSS переменных
  • Анимация огня с помощью Scss

JavaScript

• Почему мы выбрали TypeScript: история разработчиков из Reddit
• JavaScript без this
• Книга «Путь JavaScript» (The JavaScript Way). Современное введение в язык
• Как я вновь полюбил JavaScript после того, как выбросил 90% мусора из него
• Руководство по Service Worker'ам для начинающих
• Полное руководство по усталости от JavaScript: реальность нашей индустрии
• How to:
  
  
  • Как оптимизировать изменение размеров и скроллинг
  • Как использовать Media Queries в JavaScript
  • Как собрать простой статический сайт с помощью Webpack
  • Как использовать JavaScript для создания шаблонов HTML писем
  • Как отправить электронное письмо с Angular, Sails.js, и Mailgun
  
  
• ES2015+:
  
  
  • Давайте учить основы ECMAScript 6 в простых терминах
  • Наиболее часто используемые особенности Javascript ECMAScript 2015 (ES6) и ECMAScript 2016 (ES7)
  • Почему композиция сложнее с классами ES6
  
  
• VueJS:
  
  
  • Почему Vue.js — лучший фреймворк для front-end разработки на 2017 год
  • Переключение с React на Vue.js
  • Как опубликовать ваш Vue.js компонент в NPM
  • Впечатляющая коллекция компонентов и хелперов для VueJS 2, основанных на Zurb's Foundation
  • Создание красивых графиков с помощью Vue.js и Chart.js
  • Создание сайта со сравнением криптовалют на Vue.js
  • Предотвращаем XSS в Vue.js с помощью Google Caja
  • Топ онлайн курсов по VueJs
  
  
• React:
  
  
  • React 16 beta доступна для публичного тестирования
  • Обработка ошибок в React 16
  • Топ ресурсов для изучения React Fiber
  • Попробуйте React Fiber с помощью Rekit
  • Создание вашего первого приложения на React
  • Практическое руководство по тестированию React приложений
  • Испектирование, модификация и отладка React / Redux с помощью дополнений Firefox
  • Создание расширения Chrome DevTools с помощью React.js
  
  
• Angular:
  
  
  • Глубокое погружение в веб анимацию с Angular
  • Юнит тестирование Angular приложений с Jest
  
  
• Libs & Plugins:
  
  
  • Fitty — изменение размера текста с помощью JavaScript таким образом, чтобы он помещался в родительский контейнер
  • image-compressor — простое сжатие изображений с помощью JavaScript
  • spacetime — библиотека для удобной работы с временными зонами

Браузеры

• Выпуск web-браузера Chrome 60
• Что нового в DevTools (Chrome 61)
• В Firefox добавлен CSS-движок Stylo, написанный на языке Rust
• Firefox Grid Inspector, July 2017 edition
• В Chrome и Firefox будет прекращено доверие к удостоверяющему центру Symantec
• Microsoft будет поэтапно отказываться от поддержки Adobe Flash в Microsoft Edge и Internet Explorer
• Статистика браузеров, которая имеет значение

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

• Adobe прекращает поддержку Flash
• Google отказалась от «живого поиска» через семь лет после запуска
• Pwnie Awards 2017: наиболее существенные уязвимости и провалы в безопасности
• Основатель Amazon Джефф Безос стал самым богатым человеком в мире, но вскоре лишился этого статуса
• 18-летний молодой человек арестован за сообщение о «детской» ошибке в новой системе электронных билетов Будапешта
• Как понять свой уровень и сколько просить денег
• Что заказывают в США представители ИТ-индустрии
• Почему люди уходят из больших IT-компаний — колонка Стива Бланка
• Эксперты: ситуация на рынке криптовалют становится опасной и может превратиться в пузырь
• Знаете ли вы, сколько времени стоят быстрые исправления вам и вашей команде?

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

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