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

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

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

---

Медиа

• Подкаст «Frontend Weekend» #56 – Дмитрий Карловский о создании $mol или как написать свой нишевый фреймворк
• Подкаст «devschacht»: Ночной фронтенд #36 — Обсуждаем с Николаем Матвиенко выступление Райана Дала на JSConf EU 2018
• Подкаст «Фронтенд Юность (18+)» #51 Dan Abramov Package Manager
• «ALL YOUR HTML» #52: «Параллакс на шейдере с сайта antoni.de»
• Колхозный Фронтенд. Песня, которая не оставит равнодушными современных веб-разработчиков

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

• Google Fonts и GDPR compliance
• Новое в AMP: Q2, 2018 Edition
• WCAG 2.1 получил официальный статус “W3C Recommendation”
• Инклюзивные компоненты: подробное руководство по созданию доступных карточек

• Производительность:
  • Что такое Time to First Byte (TTFB) и Speed Index?
  • Воспитание культуры веб-производительности
  • 15+ экспертов делятся советами по веб-производительности на 2018й год
  • Google AMP и проблема ожирения сайтов
  • Серия статей «Test My Site», часть 1 – Инструментарий Google и Google Speed Update
  

• Tools:
  • JSFiddle — новая версия
  • JSUI — мощный UI инструмент для организации, создания и управления JS проектами
  • 8 советов по Emmet, о которых вы, возможно, не знали
  • Google Font Downloader — CLI инструмент, позволяющий скачать нужный шрифт с Google
  • Yarn import теперь использует package-lock.json
  

• Эффекты:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #79
  • Эффект коллапсинга логотипа
  • Анимация изображений и видео с помощью curtains.js
  

CSS

• Как начать работать с вариативными шрифтами в вебе
• Side-channel атака на браузеры с помощью CSS3 свойства
• Упрощение реализации сторителинга на страницах с помощью position sticky
• Исследование новых граней CSS анимации
• Воссоздание ID карточек Мстителей на HTML и CSS
• Повышение вашего уровня владения CSS селекторами
• Комбинация мощностей методологий SEM и BIO для улучшения CSS
• Специфичность в :not(), :has() и :matches()

JavaScript

• Мониторинг JavaScript-ошибок с помощью window.onerror
• Полезные методы массивов и объектов в JavaScript
• Обзор некоторых JavaScript объектов, имеющих инкапсуляцию
• Съест ли JavaScript монолитные CMS?
• Приоритеты для диагностики сайтов на JavaScript
• Отладка JavaScript на продакшене с помощью Source Maps
• Создание SPA без фреймворка
• Презентация Luna — инструмент для правильного тестирования в JavaScript
• Релиз Meteor 1.7 и вечнозелёная мечта

• Теория:
  • Быстрое введение в JavaScript Proxies
  • Что такое “this” в JavaScript?
  • Когда (и зачем) вы должны использовать стрелочные функции ES6 — и когда вам не стоит это делать
  

• VueJS:
  • Перенос веб-приложения с чистого JavaScript на Vue.js
  • Узнайте, как использовать Vue.js CLI
  • Замена jQuery на Vue
  • Ускоряем разработку с помощью прототипирования и Vue
  • Нумерация страниц на Vuejs
  • Канбан доска в реальном времени с помощью Vue.js и Hamoni Sync
  

• React:
  • Год, проведённый с React: выводы и рекомендации
  • Компоненты высшего порядка с использованием Recompose
  • 5 общих практик, которые мы можете перестать делать в React
  • React — это не новый JQuery
  • Как (и как НЕ) учить REACT?
  • Подробное руководство по React Material
  • Jest, React и Preact!
  

• Angular:
  • Angular cli 6: зачем нужен и как использовать
  • 3 полезных совета для Angular
  • Архитектура в проектах на Angular
  • Преимущества нормализации получаемых данных в Angular
  

• Libs & Plugins:
  • MapKit JS от Apple — инструмент, позволяющий вставлять в сайт Apple Maps.
  • 11 JS библиотек для анимации в 2018
  • Short and Sweet, доступный счетчик символов
  • LuminJS — JavaScript библиотека для прогрессивного выделения любого текста на странице
  

Браузеры

• Запущен проект Fusion по слиянию Tor Browser и Firefox
• Google представила Chrome 68 Beta
• В Firefox тестируется возможность одновременного просмотра разных вкладок
• Доля Firefox опустилась ниже 10% по статистике сервиса Net Applications
• В «Яндекс.Браузере» появился режим экономии энергии

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

• GitHub теперь официально принадлежит Microsoft
• Новый глава GitHub рассказал, чего ждать после слияния с Microsoft
• Шесть альтернатив GitHub для совместной разработки
• Google: блокировка страницы в robots.txt может не сработать, если на неё есть ссылки
• Google опубликовала правила использования искусственного интеллекта
• Вкратце: о чём Apple рассказала на открытии WWDC 2018
• Как основатели WhatsApp поссорились с Facebook и сколько это стоило
• Facebook обязала разработчиков использовать HTTPS в Facebook Login


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

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