Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда. Кстати, на прошедшей неделе дайджесту исполнилось 5 лет. Спасибо, что читаете.

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

CSS

Javascript

Браузеры

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

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

• Раскрываем тему WebAssembly с Бренданом Айком
• Компоненты веб-интерфейса
• Подкаст Веб-стандарты, Выпуск №64: События, Edge 15, доступный туду-лист и много болтаем с Вадимом Макишвили.
• Пилотный выпуск подкаста devSchacht. Авторы раздают благодарности, грассируют, рассказывают про переводы.
• Советы и приёмы по отладке кода
• Shadow DOM != Virtual DOM
• Что такое бюджет производительности и почему вы должны его использовать
• Плавная прокрутка и доступность
• Изучите Webpack за 15 минут
• Анонс ресурса PWAStats.com, где представлены подборки сайтов, плодотворно использующих PWA
• AMP для ритейлеров: стоит ли оно того?
• Подробное руководство по HTTP/2 Server Push
• npm и front end
• Building Blocks. Библиотека UI компонентов от Foundation, представляющая собой HTML, CSS и JS сниппеты, которые можно встроить в любой проект на Foundation
• Отсылка сообщений, когда пользователь возвращается в онлайн, с помощью Service Workers и Background Sync
• Так что же такое GraphQL, о котом я постоянно слышу?
• boilrplate — курируемый каталог заготовок (бойлерплейтов) для помощи при старте проекта
• Iceberg — заготовка с React, Babel, Webpack, Sass
• Креативные анимационные эффекты для загрузки гридов
• Эксперименты WebVR

CSS

• Тёмная сторона использования полифиллов CSS
• PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
• Поэтапное руководство по алгоритму автоматического размещения из CSS Grid
• Mobile first: забыть и забить?!
• Продвинутые вертикальные марджины
• Давайте точно определим, что такое Atomic CSS
• Griddy — еще один визуальный онлайн-инструмент, позволяющий на практике ознакомиться с CSS Grid
• Создание устойчивой архитектуры на Sass: часть 1
• Подробно о свойстве touch-action
• Упражнение по созданию masonry-раскладки на CSS
• Кастомизация браузерных скроллбаров с помощью CSS
• От CSS препроцессоров к стилизованным компонентам (React)

JavaScript

• Отчет и материалы SPA meetup'а 8 апреля 2017
• Асинхронные функции 101
• JavaScript: Design Patterns
• The Post JavaScript Apocalypse — доклад Douglas Crockford на ConFoo Developer Conference
• 9 способов поднять уровень вашего кода
• В браузеры пришла поддержка модулей ES6: время переосмыслить бандлинг?
• Теория:
  
  
  • Зачем использовать статические типы в JavaScript? (Преимущества и недостатки)
  • Использование Observables в реальной жизни
  • Функциональный JavaScript: развязка методов из их объектов
  • 7 советов по обработке undefined в JavaScript
  
  
• Практика:
  
  
  • Beau Carnes (freeCodeCamp): Мой гигантский курс по основам JavaScript доступен на YouTube. И он на 100% бесплатен
  • Делаем сайт интерактивным и забавным с помощью Velocity.js (No jQuery)
  • Изучение JavaScript Test-Driven Development по примерам
  • ThsJSQuiz — протестируйте уровень вашего JavaScript с помощью интерактивной викторины
  
  
• React:
  
  
  • Введение в React и Redux для бекенд-разработчиков
  • N причин, чтобы использовать Create React App
  • Архитектура модульных React + Redux приложений
  • Подкаст «Пятиминутка React» #11 — this.state или this.effectiveValue?
  • CodeSandbox — онлайн песочница для React
  • Стали доступны все видео с React Conf 2017
  • Бесконечный список и React
  • Twitter Lite и высокопроизводительное прогрессивное веб-приложение на React, подробности реализации масштабного проекта
  • Руководство для искателей приключений по React (часть I)
  
  
• Vue:
  
  
  • Введение в Vue.js для людей, знающих только jQuery
  • buefy — легкие компоненты UI для Vue.js, основанные на Bulma
  • vms — Vue.js 2.0 CMS
  • Управление состоянием во Vue
  • Управление состоянием приложения во Vue.js 2 с Vuex — введение
  • Миграция с Angular на Vue, и почему мы не выбрали React (+ ES6 и Webpack)
  
  
• Angular:
  
  
  • Дизайнеры изучают JavaScript: Angular, React, или Vue?
  • Чего ожидать от Angular v5?
  
  
• Libs & Plugins:
  
  
  • tung — javascript библиотека для отрисовки html
  • backslide — CLI утилита для создания HTML презентаций с Remark.js и Markdown
  • Awaiting — утилита для использования async/await для браузеров и Node.js
  • UPNG.js — fast and advanced PNG decoder

Браузеры

• Дополнительные макеты нового интерфейса Firefox 57
• Firefox 55 позволит настроить себя под текущее количество ОЗУ на ПК
• В Firefox планируют добавить секцию настройки производительности
• Mozilla сокращает число стадий в разработке Firefox
• Что нового в DevTools (Chrome 59)
• В Chrome появится режим работы без экрана
• Google объявил Octane устаревшим и не отражающим реальную производительность браузеров
• Edge снова на коне: Microsoft повторила тесты энергоэффективности популярных браузеров
• Что нового в Microsoft Edge после обновления Windows 10 Creators Update

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

• 75-летний программист основал компанию по обслуживанию компьютерных систем на COBOL
• Google AutoDraw — графический редактор на базе ИИ и машинного обучения, угадывающий то, что рисует пользователь
• В Google Photos появилась функция стабилизации видео
• «Стадия развития ИИ сейчас — на уровне двухлетнего ребёнка». Конспект лекции директора по распространению технологий «Яндекса» Григория Бакунова.
• Так ли важна скорость загрузки сайта, или о «пользе» Google PageSpeed Insights
• Дьявольски умен: Uber два года следил за водителями Lyft
• Пять мифов об искусственном интеллекте

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

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