Дайджест свежих материалов из мира фронтенда за последнюю неделю №320 (18 — 24 июня 2018)

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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №126: Как нас слушать, Web Animations API, вариативные шрифты, Keyframes.app, ARIA: Hidden или None, плохой placeholder, доступный React и код картинкой.
• Подкаст «Frontend Weekend» #58 – Марина Миранович о жизни в Лос-Анджелесе и работе в EPAM
• Подкаст «devschacht»: Ночной фронтенд #38 — Airbnb отказались от React Native
• Подкаст «CSSSR»: Новости 512 — Выпуск №11 (18.06 — 24.06)
• «ALL YOUR HTML» #54: «Полет в тоннеле»
• ШРИ в Москве 2018, 9 видео

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

• Могут ли PWA (Progressive Web Apps) образца 2018 года составить достойную конкуренцию нативным приложениям?
• Исчезающие фреймворки
• Mozilla представила A-Terrain, картографические данные для веб-разработки
• БЭМ для начинающих: почему вам нужен БЭМ
• Новые релизы: ESLint v5.0.0, Electron 3.0.0-beta.1, V8 release v6.8, Node v10.5.0 (Current),
• Анализ проблем, зафиксированных в наиболее популярных фреймворках на GitHub
• Jake Archibald: Я обнаружил ошибку браузера

• Производительность:
  • «Performance» — Иван Карев, Андрей Морозов, Михаил Мокрушин, Андрей Роенко, Тамерлан Локьяев на ШРИ 2018
  • Оптимизация скорости сайта с помощью Chrome DevTools
  • Улучшаем восприятие скорости загрузки за счет примитивного арта
  

• Инструменты:
  • Встречайте Teleport: инструмент для горячей перезагрузки и отладки PWA️
  • Как использовать Visual Studio Code
  • Введение в tronic — webpack с разумными значениями по умолчанию
  • VS Code может делать так?! Подборка лучших советов для Visual Studio Code, о которых никто не позаботился вам рассказать
  

• Accessibility:
  • Не используй атрибут placeholder
  • stylelint-a11y — Плагин для stylelint с правилами a11y
  • WCAG 2.1 — Изучение жестов указателя
  

• Анимация:
  • Анимированная каллиграфия с SVG
  • Лоадер на SVG в виде анимированной капли
  • Voronoi Airports WebGL
  

CSS

• Вариативные шрифты
• Не следует просто копировать код @font-face с Google Fonts URLs
• keyframes.app — простой способ создавать CSS анимации
• По поводу инструментов, определяющих «неиспользуемый CSS»
• Центрирование в CSS: новый клевый способ vs. старый клевый способ
• 8-Point Grid: Типографика в вебе
• Использование кастомных шрифтов с SVG в теге Img
• Псевдо-элементы CSS и трансформации: мои любимые инструменты CSS
• Оптимизация CSS: ID селекторы и другие мифы

JavaScript

• Новшества объектных литералов в JavaScript ES6
• Конструкция async/await в JavaScript: сильные стороны, подводные камни и особенности использования
• Команды для работы с JavaScript-консолью в браузерах и повышение производительности труда программиста
• Quantum Mechanics of Calculations in JS
• Знакомство с разработкой через тестирование в JavaScript
• Новый выпуск ".getInstance": Итераторы в JavaScript
• Использование JavaScript модулей в вебе
• Быстрое и полное руководство по типам в TypeScript
• MobX 5: сага продолжается…
• Введение в шаблон Single Element
• Гляди ма, без рук! JS, управляемый мозгом — Charlie Gerard на JSConf EU 2018

• VueJS:
  • Vue.js — соображения и трюки
  • Использование vue-template-loader с Vue.js для компиляции шаблонов HTML
  • Написание абстрактных компонентов во Vue.js
  • От нуля до деплоя: разработка системы документации с помощью Vue и VuePress
  • vue-translations — поддержка мультиязычности в ваших vuejs проектах
  • Создание RSS Viewer на Vue: Часть 1, Часть 2
  • Vue.js: хороший, «ни о чем», ужасный
  • Галерея в стиле Instagram на Vue.js и CSS Grid
  • Топ 21 Vue.js UI библиотек для ваших приложений
  

• React:
  • React Native в Airbnb. AirBnb уходит от использования React Native. Узнайте интересные подробности разработки за последние два года
  • Настройка React Hot Loader за 10 минут
  • Гитхабовские звёзды !== использование: React всё ещё более распространён, чем Vue и Angular
  

• Angular:
  • Визуализация данных при помощи Angular и D3
  • Компоненты Angular: советы и трюки
  • Как создавать динамические компоненты в Angular 6
  

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

• Мулленвег анонсировал дорожную карту для Gutenberg
• Учимся программировать с помощью задач с числами
• Apple, Samsung и автопроизводители утвердили первую версию стандарта электронного ключа для автомобилей
• Google, Lyft, Uber создают коалицию, чтобы развеять страхи по поводу робомобилей
• Семь игр, которые научат программировать
• Что такое VR, AR и смешанная реальность — сайты, приложения и статьи, которые помогут разобраться
• В Instagram уже более 1 млрд пользователей. Соцсеть запускает новый сервис IGTV для вертикальных видео длительностью до часа
• Как Маск, Безос, Брэнсон, Цукерберг, Брин, Гейтс и Тиль видят будущее
• «GitHub — платформа для великих приложений». От любительского проекта до сделки с Microsoft: история сервиса для совместной разработки стоимостью в $7,5 млрд.


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

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