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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №127: Доклады на BeerJS, графика в интернете, шрифты в SVG, исчезающие фреймворки, модули ES2015+, див не кликается, почему CSS такой.
• Подкаст «Frontend Weekend» #59 – Дмитрий Мананников об истории переезда в Данию, создании стартапа в Чили и BreakfastJS
• Подкаст «devschacht»: Ночной фронтенд #39 — Кровавый энтепрайз vs атмосфера стартапа
• Подкаст «Фронтенд Юность (18+)» #54 Хочешь быстроты — пиши на плюсах
• Подкаст «CSSSR», Новости 512 — Выпуск №12 (25.06 — 01.07)
• «ALL YOUR HTML» #55: «Каталог стримов на Vue.js + Nuxt»
• Dev.Tube — агрегатор лучших видео для разработчиков
• Конференция DUMP-2018: видео всех докладов и презентации
• YGLF 2018 Kyiv, все видео с конференции

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

• 11 лучших англоязычных ресурсов для верстальщиков
• Как WebAssembly ускоряет будущее веб-разработки
• Как сделать ваши веб-приложения дружественными к мобильным устройствам
• Веб-кеширование, объясненное процессом покупки молока в супермаркете
• Релиз Foundation 6.5.0 (RC 1) с большим количеством багфиксов и улучшений

• Производительность:
  • В Google PageSpeed Insights появились данные о скорости загрузки всего сайта
  • Состояние дел в вебе: главные стратегии оптимизации изображений
  • Улучшаем производительность загрузки страниц: Pingdom, YSlow и GTmetrix
  • Обзор методологии производительности RAIL
  

• Tools:
  • Пакетный менеджер Yarn — инструкция по применению
  • lepto — автоматизация редактирования, оптимизации и анализа изображений с помощью CLI и веб-интерфейса
  

• Accessibility:
  • Обеспечение быстрой работы сайта как часть конвейера разработки
  • «Доступность интерфейсов» — Дмитрий Батогов на ШРИ
  • Инспектор доступности в Firefox Developer Tools
  • Создание доступных интерфейсов — это несложно
  

• Эффекты:
  • Креативное меню, созданное в рамках CodePen Challenge
  • Слайдер с тремя панелями и анимациями перехода
  • Rabbit Ear — библиотека для креативного создания оригами.
  • tenori-off.glitch.me — музыкальный секвенсор на JavaScript от Monica Dinculescu. Для подбора ударных используется Machine Learning
  

CSS

• Устойчивый, декларативный, контекстный (новый взгляд на сильные стороны CSS)
• Как я избавился от 250 KB мертвого CSS с помощью PurgeCSS
• Рисование изображений с помощью CSS градиентов
• Pixels vs. Ems: Users DO Change Font Size
• Как и зачем мы проводим юнит-тестирование нашему Sass
• Где CSS4? Когда же он выйдет?
• Как быстро прототипировать приложения с помощью CSS Grid и CSS переменных
• Что такое единица ‘ch’ в CSS?
• Руководство по CSS Grid для чайников

JavaScript

• История React Native в Airbnb. Gabriel Peal в переводе Андрея Мелихова: Часть 1: React Native в Airbnb, Часть 2: Технология, Часть 3: Создание кроссплатформенной мобильной команды, Часть 4: Принятие решения по React Native, Часть 5: Что дальше с мобильной разработкой
• Новый выпуск ".getInstance": Map & WeakMap
• Практическое введение в ES2017 Async-Await
• Создание AR/VR с помощью Javascript и HTML
• Использование JavaScript в индустриях
• Новая книга: фул-стэк веб-разработка на JavaScript— от А до Я

• Теория:
  • Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
  • JavaScript for Designers — структурированный конспект из информационных отрывков, созданный Михаилом Колосковым в процессе изучения JS
  • Минимальное руководство по декораторам ECMAScript
  • Классы и Интерфейсы в TypeScript
  • Изучите эти основные концепции JavaScript всего за несколько минут
  • Умеет ли он мутировать? Список из 30 методов для работы с массивами в JavaScript с пометкой, мутируют ли они существующий массив или возвращают новый
  • Клевые штуки ES6 — большая жирная стрела
  

• React:
  • Новый контекст Реакта или жизнь без боли и бойлерплейта
  • Lition, написанный на React.js
  • Создание статического блога с помощью Gatsby, CosmicJS и React
  • Как использовать Error Boundaries в React 16
  • Объединяем React, D3 и их экосистемы
  • Новые свойства и исправления, которые мы получили с последним релизом React
  

• VueJS:
  • Как писать Vue-компоненты, которые хорошо взаимодействуют
  • Vue + TypeScript: комбинация в вашем редакторе кода
  • Шаблоны динамических компонентов с помощью Vue.js
  

• Angular:
  • 5 лучших курсов для изучения Angular в 2018
  • Angular — советы и трюки
  • Архитектуры громадных энтерпрайз проектов на Angular
  

• Libs & Plugins:
  • gio.js — JS библиотека для создания трехмерной инфографики в виде глобуса, использующая Three.js
  • face-api.js — JavaScript API для распознавания лиц в браузере с помощью tensorflow.js
  • docz — ещё никогда документирование не было таким простым
  

Браузеры

• Firefox проверит скомпрометированные пароли методом k-анонимизации
• Релиз Firefox 61
• Доступен релиз Opera 54 с обновленным Speed Dial и новыми функциями восстановления
• В «Яндекс.Браузере» появился режим для слабых компьютеров
• В браузер Brave встроена поддержка Tor
• Mozilla добавляет функцию «Была ли утечка» в Firefox
• Firefox 61 – Quantum of Solstice
• Улучшения производительности JavaScript и WebAssembly в EdgeHTML 17

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

• Что случилось с Punto Switcher
• JetBrains опубликовала результаты ежегодного опроса среди программистов
• 49 вопросов, которые задают на собеседованиях в Apple
• Взломана инфраструктура проекта Gentoo на GitHub
• Google инвестирует 22 млн долларов в KaiOS, форк Firefox OS
• Google создала ИИ, раскрашивающий чёрно-белые видео по одной фотографии
• Facebook передумала и сняла запрет на рекламу криптовалют спустя полгода после его введения
• Гайд по подключению платежей к Telegram ботам.

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

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