Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
• 
Подкаст «Frontend Weekend» FW #30 – Евгений Родионов о том, как из верстальщика стать директором по продуктам
• 
Подкаст «devschacht»: Ночной фронтенд #13— Дарт, Полимер и велосипеды
• 
Подкаст «Фронтенд Юность (18+)» #28 React разрывает пуканы
• 
Подкаст «Drinkcast», #19 — «Пресвятой JavaScript»
• 
«ALL YOUR HTML» #25: «ALL YOUR HTML, Рисуем фото линиями в 3d, three.js»
Веб-разработка
• 
Введение в тестирование фронтенда
• 
Баги на продакшене — грязная дюжина самых популярных
• 
Как начать работать со статическими сайтами — обзор генераторов
• 
Чеклист фронтенда — это только инструмент… все зависит от вас
• 
Лучшие подкасты о веб-дизайне и веб-разработке
- Производительность:
•
Производительность как восприятие: восприятие времени
• Google не использует метрику TTFB в ранжировании
•
Лучший запрос — это отсутствие запросов. Пересмотр стратегии оптимизации под HTTP/2
•
23 инструмента для повышения производительности веб-сайтов
•
Советы по оптимизации производительности JavaScript
•
Прогрессивная загрузка изображений с помощью Intersection Observer и SQIP Progressive
•
HTTP/2 PUSH или HTTP Preload
- AMP/PWA:
•
Анализ экономического влияния AMP на издателей и e-commerce
•
Разработка для безбраузерного веба (в контексте PWA)
•
Addy Osmani подробно о создании PWA для Pinterest и о существенном повышении производительности в связи с этим
- Tools:
•
Как (и зачем) использовать eslint на вашем проекте
•
WebStorm 2017.3: улучшенная поддержка Vue.js, рефакторинг, новый REST клиент и прочее
- Accessibility:
•
Что нужно знать о 2018-м: грядущие дедлайны соблюдения стандартов и этапы
•
Сначала доступность: переосмысление того, как мы подходим к дизайну и разработке сайтов
•
Руководство по доступности веб-контента для людей, которые не читали об этом раньше
•
funkify — расширение для Хрома, позволяющее эмулировать многие расстройства зрения, моторики, а также некоторые когнитивные
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #64
•
Анимация лейаутов с помощью техники FLIP
•
Декоративный фон на WebGL
•
infinitown — WebGL эксперимент с процедурально создаваемым городом
•
GLSL: Voronoi octave
CSS
• 
Учим CSS Grid за 5 минут
• 
О логике построения типографики и пропорций в V6
• 
Современная асинхронная загрузка CSS
• 
Инструменты для инлайнинга CSS, которые пригодятся при создании Email шаблона
• 
Использование feature queries (@supports) для каскада в веб-разработке
• 
Как я воссоздал эффект хлопка на Medium, и что я понял из этого эксперимента
• 
Генерация вайрфреймов с контурами и диагоналями при помощи CSS и HTML
• 
Гибкий контроль переполнения контейнеров с помощью флексов
• 
Шрифтастическая производительность веба — доклад Monica Dinculescu на SmashingConf Barcelona 2017, а также небольшое пояснение свойства font-display для доклада
JavaScript
• 
Как работает JS: особенности и сфера применения WebAssembly
• Создание библиотеки компонентов с использованием Storybook
• 
Путешествие в Fantasy-land. Егор Трубников-Панов рассказывает о функциональном стиле программирования на JavaScript и спецификации Fantasy-land.
• 
JSRobot — изучайте JavaScript, играя в игру
• 
Введение в спекулятивную оптимизацию в V8
• 
JavaScript хаки для ES6 хипстеров
• 
Полный справочник по собеседованию Javascript разработчика
• 
Реализация Сита Эратосфена в JavaScript
• 
MobX vs Redux с React: вопросы и сравнение для новичка
• 
Участие в ECMAScript: инструкция
VueJS:
•
Приложение реального времени на Vue.js
•
madewithvuejs — коллекция проектов, сделанных с помощью vue.js
•
Как понять Scoped slots во Vue.js
•
vuetron — инструмент для тестирования и отладки ваших приложений на Vue + Vuex
React:
•
Отладка производительности React с помощью React 16 и Chrome Devtools.
•
Введение в React VR
•
GiraffQL — инструмент для интерактивного погружения в GraphQL, написанный на React
•
Представление React Food Truck — курируемый набор расширений для VS Code
•
reactopt — Инструмент для оптимизации React приложений, идентифицирует определенные события, которые могут вызывать ненужный повторный рендеринг
Angular:
•
Использование нового HTTP клиента в Angular v4
•
telemachy — визуальное подсказки в виде интерактивного тура по сайту для приложений Angular
•
История ngUpgrade: миграция AngularJS приложения с версии 1.6 на Angular 4
- Libs & Plugins:
•
Classily.js — небольшой плагин для тогглинга классов: простое решение для не всегда простых задач
•
rapid.js — подобный ORM интерфейс и роутер для API запросов
•
superstruct — простой и компонуемый способ валидации данных в Javascript
Браузеры
• 
В Firefox 58 будет запрещён прямой переход на URL «data:»
• 
Chrome 63 — что нового в DevTools
• 
Chrome 64 — что нового в DevTools
• 
Мобильный браузер Microsoft Edge стал доступен всем пользователям Android и iOS
• 
Новый и улучшеный инспектор событий и CSS в Microsoft Edge DevTools
Занимательное
• Власть имиджбордов: Как 4chan стал рассадником насилия
• Проект Mozilla выпустил открытую систему распознавания речи
• Объяснения по обновлениям алгоритмов Google
• 24 Pull Requests: ежегодное мероприятие GitHub по развитию открытых проектов
• HDMI 2.1: новый стандарт, новый кабель
• Квантовые компьютеры и квантовый интернет сегодня и завтра
• Резкие взлёты и падения популярности технологий на Stack Overflow
• Photoshop будет использовать ИИ для быстрого выделения объектов
• Эрик Шмидт: медицина и наука – основные отрасли, где будет использоваться ИИ в ближайшем будущем
• 
Scripting Cyrillic. О внедрении кириллицы в Google Docs и Slides
• 
OWASP Top 10 — 2017 — десять наиболее критичных уязвимостей веб приложений
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort
