Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Frontend Weekend», #25 – Роман Дворнов о том, как создавать Open Source и не перегореть
• Подкаст «Веб-стандарты», Выпуск №92: События, доступность и дизайн; в гостях Настя Суховерхова, создатель Веблайнд.
• Подкаст «Веб-стандарты», Выпуск №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
• Подборка шпаргалок для эры современного фронтенда
• Ну что, можно уже использовать CSS-переменные?
• Критический CSS + прогрессивный CSS = ?
• Выдержка из книги «The New CSS Layout» от Rachel Andrew
• Reboot, Resets и размышления Криса Койера на эту тему
• Разблокирование преимуществ CSS переменных
• Успех с CSS. Разработчик из команды Samsung Internet делится своими мыслями и советами по CSS
• Эксперименты со спецификацией CSS Houdini
• Песочница, где можно поиграться с вариативными шрифтами
• Vibe.js — попытка сделать state management без боли
• Создание HTML веб-компонентов используя ванильный JavaScript
• Линейная алгебра в JavaScript с операциями с матрицей
• ES6: аргументы по умолчанию
•
Mozilla добавит поддержку смешанной реальности в браузеры
• Mozilla планирует протестировать в Firefox возможности Lockbox, Tabsplit, ThemesRfun и Foxy
• Добавляйте PWA на ваш домашний экран в Firefox под Android
• Как устроен Ethereum и смарт-контракты. Децентрализованная машина Тьюринга с гарантиями блокчейна
• 7 SEO-трендов, за которыми стоит наблюдать в 2018 году
• Как Booking.com заставляет вас принимать решения
• Где обучиться профессиям, которые появятся в ближайшем будущем
• Машинное обучение в Google или как искусственный интеллект делает сервисы компании и жизнь людей лучше
• Интересные GitHub-проекты: «змейка» для терминала, работающая на этапе компиляции
• Microsoft показала как создают голограммы к Mixed Reality
• Adobe делает жизнь проще с новыми инструментами на базе ИИ
• Каково это быть разработчиком в …
?
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
Подкаст «Frontend Weekend», #25 – Роман Дворнов о том, как создавать Open Source и не перегореть•
Подкаст «Веб-стандарты», Выпуск №92: События, доступность и дизайн; в гостях Настя Суховерхова, создатель Веблайнд.•
Подкаст «Веб-стандарты», Выпуск №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
• Ну что, можно уже использовать 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.
Комментарии (8)
redyuf
30.10.2017 15:05Что-то раз от раза меньше материала по Angular становится, он популярность теряет или что?
Это наверное первый дайджест за последнее время, где о нем вообще ни слова, кроме тега.
alexzfort Автор
30.10.2017 15:20Уже второй такой за последнее время… по react и vue сейчас побольше новых статей, да
IamStalker
30.10.2017 16:30Заметен странный переход на эти фрэймворки/библиотеки. Меня интересует как насчет энтерпрайзов, на чем они работают? Знаю что был на нескольких интервью и там уже оговаривался переход на vue.js и react.
Что думаете?
uRusure
01.11.2017 03:22Кстати, а как насчет мемасов из мира Front-end? :) Может как-нибудь получиться добавить подобную категорию с картинками?
twentyfivesymbolsusername
Спасибо за очередной отличный дайджест!
alexzfort Предлагаю ввести рубрику GraphQL, т.к. тема достаточно популярная и новостей всегда куча (например, на прошлой неделе прошел саммит в Сан Франциско). GraphQL, хоть это уже в сторону бекенда, достаточно затрагивает и фронтенд, поэтому я считаю, что рубрика будет к месту. Спасибо :)
alexzfort Автор
Всегда пожалуйста. Отдельную рубрику по GraphQL — это наверное вряд ли, слишком специфическая тема. Но периодически включать будем :)
uRusure
Поддерживаю. Тоже хотелось бы по GraphQL. И побольше по Реакту новостей желательно :)