Дайджест свежих материалов из мира фронтенда за последнюю неделю №286 (23 — 29 октября 2017)30.10.2017 08:48

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

    Медиа    |    Веб-разработка    |    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 евангелизма
• Этикет код-ревью
• Полное руководство по элементам, которые могут быть в секции
• Разрыв между основами веба и новыми технологиями — от очарования новыми фреймворками до обесценивания 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.

© Habrahabr.ru