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

    Медиа    |    Веб-разработка    |    CSS    |    Javascript    |    Браузеры    |    Занимательное

---

Медиа

• Подкаст «Frontend Weekend» #24 – Вадим Резвый об основании Moscow Coding School, дружбе с президентами, рэпе и индуизме
• Подкаст «devschacht»: Выпуск №9?—?эйчары, Cerebral и вопросы деплоя
• Подкаст «Фронтенд Юность (18+)» #23 Всё что вы должны знать о функциональщине
• Подкаст «Drinkcast», Выпуск #13 — «ООП — это обман»
• «ALL YOUR HTML» #19: «Ласточки в небе под Штрауса»

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

• Mozilla, Microsoft, Google, W3C и Samsung унифицируют документацию по Web-технологиям
• Жизнь фронтендера в Spotify
• Ошибки и спорные вопросы в HTML-CSS вёрстке. Часть 3: стилизация
• Front-End-Checklist — подробный структурированный чеклист для разработчиков фронтенда — от веб-шрифтов и мета-тегов до accessibility и SEO
• 5 советов перед стартом рефакторинга фронтенда на проекте
• Безболезненное введение в API: использование, интеграция и преимущества
• Миграция в сторону Yarn и Webpack
• Как бы я объяснил десятилетие веб-разработки путешественнику во времени из 2007-го
• Компоненты доступности: #1 цвета и контраст, #2 динамические метки ARIA

• AMP/PWA:
  • Проекту AMP 2 года, Automattic взаимодействует с Google для улучшения WordPress-плагина
  • AMP: два года страницам, ориентированным на пользователя
  • Аргументы для AMP: уроки из десяти практических примеров
  • Советы по работе с Progressive Web Apps в DevTools
  • Как отлаживать Progressive Web Apps с помощью браузерных инструментов
  

• Производительность:
  • Весь веб на 60+ FPS: как новый рендерер в Firefox избавился от рывков и подтормаживаний
  • Погодите, а WebP вообще-то ничего!
  • Можете ли вы себе это позволить? Бюджеты производительности в реальном мире
  • Повышаем скорость сайта Shopify – пошаговый разбор оптимизации
  

• Анимация:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #58
  • Первый взгляд на “GSDevTools” от GreenSock, визуальный инструмент для работы с комплексными анимациями
  • Эффект отображения оверлея с помощью динамических форм на SVG
  • Бесшовный цикл для анимации SVG stroke
  • Интересный эффект растекания капель на CSS
  • Metaballs — подробно о морфинг-эффекте перетекания одной круглой формы в другую
  

CSS

• Как фокус помогает. Менеджер и дизайнер заставляют везде убирать аутлайн. Расскажите им, что это плохая идея!
• Организация отступов в верстке (margin/padding)
• Взгляд назад на историю CSS
• Prettier + Stylelint: написание очень чистого CSS
• Итак, можем ли мы уже использовать CSS переменные?
• CSS Box Shadow vs. Drop Shadow — сравнение двух методов
• Мой подход к использованию z-index

• Шрифты:
  • Впечатляющая подборка стратегий загрузки веб-шрифтов от Zach Leatherman, с демо и описаниями
  • Веб-типографика: цифры в шрифтах
  • Fontisto — иконочный шрифт с набором из 267-ми доступных иконок
  

• Grid Layout:
  • История CSS Grid от его создателей
  • Наименование вещей в CSS Grid Layout
  • Что я узнала о лейаутах на CSS Grid,- доклад Rachel Andrew на CSS Day 2017
  • Введение в CSS Grid Layout: Часть 1, Часть 2
  

JavaScript

• Почему роботы должны форматировать код за нас
• Хитрый вопрос по JavaScript, который задают на собеседованиях в Google и Amazon
• Как работает JS: цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
• Первая демонстрация TypeScript
• Современный JavaScript, объясненный для динозавров
• Плавильный котел JavaScript, статья Дена Абрамова
• Контроль видимости объекта с помощью Intersection­Observer API
• Ember.js: идеальный фреймворк для веб-приложений

• ES2015+:
  • ES6 для начинающих с примерами
  • Шпаргалка по ES2015+
  • Моки в тестах — это код 'с душком'
  

• VueJS:
  • Создание чата в реальном времени на VueJS, Vuex & Cloud Firestore
  • vue-mc — модели и коллекции для Vue.js
  • Vue.js + Brunch: альтернатива Webpack, которую вы ждали
  

• React:
  • 8 ключевых решений в разработке на React
  • Как мы на React 16 переезжали
  • Как структурировать компоненты в React?
  • Как мигрировать приложение с AngularJS на React и Redux
  

• Angular:
  • Топ 12 советов по продуктивной работе с Angular в WebStorm – часть 1
  • Основы Angular 4: привязка данных
  

• Libs & Plugins:
  • Скажите привет Schnack.js: новой библиотеке для комментирования в стиле Disqus, для статических сайтов
  • Знакомство с опенсорсным кроссдоменным javascript пакетом от PayPal
  • accessibilityjs — клиентский сканнер ошибок доступности
  

Браузеры

• Google Chrome 62: добавлена поддержка шрифтов OpenType Variable Fonts, расширены предупреждения HTTP
• Bleeping Computer: Chrome получит функцию блокировки майнинга на сайтах
• Google добавила в браузер Chrome для Windows функции антивируса
• Google раскритиковала систему обновлений Microsoft. В ответ Microsoft рассказала о RCE-баге в Chrome
• Что нового в Microsoft Edge для Windows 10 Fall Creators Update: CSS Grid Layout, object-fit/position, WebVR motion controllers, Service Worker preview, улучшения DevTools и многое другое
• В Firefox Nightly появилась поддержка PWA
• Технические детали Safari Technology Preview 42

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

• Microsoft официально выпустила Windows 10 Fall Creators Update
• Опубликована подробная информация о проблемах WPA2
• Критическая уязвимость в протоколе защиты Wi-Fi WPA2: обзор ситуации
• Как технологические компании отреагировали на новость об уязвимости в Wi-Fi
• GitHub опубликовал статистику за 2017 год
• Тим Кук: «Лучше изучать код, а не английский, вместо второго языка»
• Новые сервисы для майнинга через браузеры появляются как грибы после дождя
• Как великие инженеры обращаются за помощью
?

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

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.