Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
• 
Подкаст «Веб-стандарты», Выпуск №91: Новинки браузеров, общая документация на MDN, ошибки верстальщиков, дизайнеры учатся кодить, харассмент.
• 
Подкаст «Фронтенд Юность (18+)» #24 Революционный фреймворк, который мы заслужили
• 
Подкаст «devschacht»: Ночной фронтенд #8 — Из огня да в полымя
• 
Подкаст «Drinkcast», Выпуск #14: «Ментор успеха залог твоего»
• 
«ALL YOUR HTML» #20: «Рисуем эффекты на PIXI и его фильтрах (ака шейдерах), и немного про gulp sass»
• 
WSD в Минске 2017, запись трансляции
• 
11 видео с Krasnodar Dev Days #2
• 
23 видео с Chrome Dev Summit 2017
Веб-разработка
• 
W3C или WHATWG. Есть две спецификации HTML: W3C и WHATWG, какой из них верить?
• 
Адаптивные email-письма без боли и страданий
• 
Прототипирование на продакшн-технологиях
• Веб-компоненты: долгая игра
• 
Bootstrap 4: все что вам нужно знать
• 
Я посмотрел все видео с Chrome Dev Summit, так что можете этого не делать: там было несколько анонсов и много PWA евангелизма
• 
Этикет код-ревью
• 
Полное руководство по элементам, которые могут быть в секции <head>
• 
Разрыв между основами веба и новыми технологиями — от очарования новыми фреймворками до обесценивания CSS
• 
Подборка шпаргалок для эры современного фронтенда
- AMP/PWA:
•
WordPress + PWAs = (видео с Chrome Dev Summit 2017)
•
Что такое Прогрессивные Веб-приложения?
- Инструменты:
•
Прощание с Firebug
•
Знакомство с sonar — новым инструментом для анализа сайта и линтинга от Microsoft
•
HEML — опенсорсный язык разметки для создания отзывчивых email-писем
- Производительность:
•
Можете ли вы себе позволить это? Бюджеты производительности в реальном мире
•
Влияет ли скорость загрузки страниц на SEO? (спойлер: да)
•
Беспроигрышные рекомендации по повышению производительности и безопасности сайтов: HTTP/2, SSL, Brotli, CDN, WebP
•
Оптимизируем изображения для уменьшения веса страницы: форматы файлов, инструменты и RWD
•
Как получить 100/100 в Google Page Speed Score с помощью Middleman и Nginx?
•
Скорость по умолчанию: лучшие современные практики загрузки страниц (доклад с Chrome Dev Summit 2017)
•
Графические метрики производительности скоро появится в Chrome DevTools
- Accessibility:
• Как помочь слепым на вашем сайте
•
Не используйте ARIA Menu Roles для навигации по сайту
•
Хватит создавать сайты только для 85% пользователей: принципы доступности в дизайне
•
Схлопывающиеся секции — реализация современного аккордиона с учетом доступности
•
Полное руководство по Alt-текстам
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #59
•
SVG волны с помощью feDisplacementMap
CSS
• 
Объясняем современный JavaScript динозавру
• Ну что, можно уже использовать CSS-переменные?
• Критический CSS + прогрессивный CSS = ?
• 
Выдержка из книги «The New CSS Layout» от Rachel Andrew
• 
Reboot, Resets и размышления Криса Койера на эту тему
• 
Разблокирование преимуществ CSS переменных
• 
Успех с CSS. Разработчик из команды Samsung Internet делится своими мыслями и советами по CSS
• 
Эксперименты со спецификацией CSS Houdini
• 
Песочница, где можно поиграться с вариативными шрифтами
JavaScript
• 
Vibe.js — попытка сделать state management без боли
• 
Создание HTML веб-компонентов используя ванильный JavaScript
• 
Линейная алгебра в JavaScript с операциями с матрицей
• 
ES6: аргументы по умолчанию
- Теория:
•
Объясняем современный JavaScript динозавру
• Памятка по современному JavaScript
•
В чем разница между JavaScript и ECMAScript?
•
Ответы на 12 основных вопросов JavaScript
- Фреймворки:
•
Ember.js: отличный фреймворк для веб-приложений
•
Сравнение CLI в JavaScript фреймворках
•
3+ года с Ember, 6 месяцев с React
React:
•
БЭМ + React: гибкая архитектура дизайн-системы
• Cerebral 2. Сравнение Redux, MobX и Cerebral
•
Релиз React 16: что нового?
•
Что делает Redux? (и когда вы должны его использовать?)
•
Как мне понять, что я готов к Redux?
•
Удивите своих друзей с помощью разделения кода в React
VueJS:
•
Создание переходов и анимаций в Vue.js
•
Продвинутые концепты Vue.js: миксины, кастомные директивы, фильтры, переходы и менеджмент состояния
•
SEO для Vue.js SPA: Prerender & Server-Side Rendering
•
Element — библиотека компонентов для Vue 2.0
•
Создание схлопывающегося дерева меню с помощью рекурсивных компонентов Vue.js
•
Создание Lazy-Load роутера с помощью Vue.js и последних браузерных технологиях
- Libs & Plugins:
•
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 1
•
Light-Modal — легкий плагин для модальных окон, кастомизируемый с помощью CSS
•
Физика в JavaScript с помощью Matter.js
Браузеры
• 
Mozilla добавит поддержку смешанной реальности в браузеры
• 
Mozilla планирует протестировать в Firefox возможности Lockbox, Tabsplit, ThemesRfun и Foxy
• 
Добавляйте PWA на ваш домашний экран в Firefox под Android
Занимательное
• Как устроен Ethereum и смарт-контракты. Децентрализованная машина Тьюринга с гарантиями блокчейна
• 7 SEO-трендов, за которыми стоит наблюдать в 2018 году
• Как Booking.com заставляет вас принимать решения
• Где обучиться профессиям, которые появятся в ближайшем будущем
• Машинное обучение в Google или как искусственный интеллект делает сервисы компании и жизнь людей лучше
• Интересные GitHub-проекты: «змейка» для терминала, работающая на этапе компиляции
• Microsoft показала как создают голограммы к Mixed Reality
• Adobe делает жизнь проще с новыми инструментами на базе ИИ
• 
Каково это быть разработчиком в …
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort
