Дайджест свежих материалов из мира фронтенда за последнюю неделю №331 (17 — 23 сентября 2018)

Медиа

• Подкаст «Frontend Weekend» #71 – Иван Акулов о том, как и зачем основывать своё performance consulting агентство в 20 лет
• Подкаст «CSSSR» Новости 512 — Выпуск №22 (17.09 — 23.09)
• Подкаст Weekly Vue #5
• Подкаст «Пятиминутка React» #48 Есть две книги: Величие Vue.js 2 (The Majesty of Vue.js 2) и Путь к изучению React (The Road to learn React) — какую сам прочитаешь, а какую другу посоветуешь?
• «Девшахта — подкаст»: #51: 12-факторные приложения
• Подкаст «Фронтенд Юность (18+)» #65: DDoS-атака на твой CSS, #64: 33 лайфхака для повышения продуктивности
• Presentable Podcast #51: Устная история веб-стандартов с Джефри Зельдманом

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

• Архитектура веба: основы для начинающих разработчиков
• Google массово переводит сайты на mobile-first индексацию, однако полный переход на mobile-first индексацию может занять годы
• Google предложил новую модель управления для проекта AMP
• Представление Bing AMP viewer и Bing AMP cache
• Что определяет хорошего фронтенд-девелопера?

Производительность:

• Idle Until Urgent. Подробно о новой технике повышения производительности и FID в частности в статье Филиппа Уолтона
• Фреймворк для веб-производительности. Джереми Кейт сделал диаграмму производительности, чтобы помочь выяснить, как приоритезировать работу с фронтендом
• Большая подборка ресурсов, посвященных веб-производительности

Tools:

• Улучшаем навыки отладки с помощью Chrome DevTools (часть 2)
• Sublime merge — встречайте новый клиент Git от создателей Sublime Text
• Yarn Plug'n'Play: избавление от node_modules, Аналогичный концепт от npm под названием tink

Accessibility:

• Как вынести урок из ошибок доступности на сайте Apple
• Много шума вокруг ARIA
• Отладка доступности с помощью Chrome DevTools

Анимация:

• Объемный город, построенный из эмоджи «на чистом CSS»
• Забавная йети-пагинация
• Световой луч из цветных частиц

CSS

• CSS Grid — швейцарский армейский нож для макетов сайтов и приложений
• Химия CSS-гридов
• Refresh CSS Bookmarklet v2. Обновленный классический букмарклет Пола Айриша руками Лия Веру
• Flexbox: насколько велики размеры элементов в Flex контейнере?
• Наглядная демонстрация работы свойства transform-origin
• Развлекаемся с эффектами наведения для ссылок
• Что такое Модульный CSS?

JavaScript

• Портирование JS на Эльбрус
• Новые релизы: Вышел Electron 3.0, фреймворк для создания нативных JS-приложений, Next.js 7, Gatsby 2.0.0,
• Меньше кода, больше приложений: как Vulcan.js делает из меня эффективного разработчика
• 5 советов по лучшему написанию условных выражений в JavaScript
• Bundlephobia — Хочется сохранять размеры JavaScript бандлов маленькими? С помощью Bundlephobia.com можно проверить размер зависимостей до добавления их в проект
• О создании игры для конкурса js13K «Underrun»
• Как на JS создать интерактивный инструмент для построения Flex раскладок

Media:

• Подкаст Script & Style Show: Episode 21: Третьесторонний JavaScript и веб-производительность с Charlie Vazac
• React Podcast №21: Delete Your Components with Kent C. Dodds
• React Alicante 2018, 22 videos

VueJS:

• Как организовать ваши зависимости во Vue-приложении
• Nuxt.js 2.0: Webpack 4, ESM Modules, create-nuxt-app и многое другое!
• Vue.js + GSAP = Анимации
• Использование Scoped Slots в Vue.js для абстрактных функций
• 5 наиболее запрашиваемых функций для Vue.js в 2018 году
• 7 уроков по архитектуре фронтенда от Nuxt.js

React:

• React и SEO: как их подружить?
• Почему не стоит использовать компоненты высшего порядка в Реакте
• Enterprise React в 2018–2019
• Автостопом по галактике React Router v4: [match, location, history] — ваши лучшие друзья!
• Почему React16 — это благословение для разработчиков на React
• Как начать работать с React Context API
• Создание компонента в стиле React на ванильном javascript.
• Иммутабельность в React и Redux: полное руководство
• Использование Font Awesome 5 в React
• react-flip-toolkit — библиотека, облегчающая FLIP анимацию в React
• Делаем Autocomplete-виджет с помощью React и Elastic Search

Angular:

• Упрощаем работу доступность с помощью Angular CDK
• Создание PWA с помощью Angular 6
• Повышаем уровень владения NgRx
• Три столпа Angular Router — Router States и URL Matching

Браузеры

• Mozilla представила финальную версию браузера Firefox Reality для очков и шлемов виртуальной реальности
• Microsoft уже отключила функцию Windows 10, отговаривающую пользователей от установки других браузеров вместо Edge
• Перехват и модификация запросов в Chrome с помощью Devtools Protocol

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

• Google: мы полностью индексируем и ранжируем контент во вкладках
• Путь единорога: как GitLab шел к оценке в $1 млрд
• Google провалил клонирование Twitch и позвал редких геймеров смотреть YouTube
• В MIT создали нейросеть, распознающую объекты по голосовому описанию
• «ВКонтакте» запустила платформу подкастов
• Почему YouTube Gaming проиграл конкуренцию Twitch
• Работа над ошибками: Как я живу с дислексией

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