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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №83: Браузер без головы, многопоточный JS, новинки Edge, оптимизация загрузки, фавиконки в Шортах, на все руки веб-мастер.
• Подкаст «Пятиминутка Angular» #3: Meetups, CodeDojo MEAN, Angular 5 beta6, Cli bazel, PWA
• Подкаст «Frontend Weekend» FW #17 – Вадим Макеев про HTML Academy, Opera, конфликты и сексизм
• Подкаст «Пятиминутка React» #33: Кирилл Мокевнин, Hexlet.io
• Подкаст «devschacht»: Ночной фронтенд #2
• Подкаст «Фронтенд Юность (18+)» #17: Как прокачиваться на работе: Новинки DevTools, Quantum CSS, Code Retreat, Безголовые браузеры и многое другое
• Подкаст «Drinkcast», Выпуск #6: «Тим Маринин и мышки на тёрке»
• «ALL YOUR HTML» #13: «Анимируем SVG в 3D с помощью Three.js»
• HTML Шорты: Какие нужны фавиконки, текстовая версия

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

• Прототип проекта стоимостью $86 миллионов в 57 строках кода
• Ссылки вокруг блоков. Можно ли оборачивать ссылкой блочные элементы?
• Мобильные браузеры и их пушистые лапки. Про отладку сайта в мобильных браузерах
• Быстрый старт: начало работы с безголовым Chrome в Node.js
• Организация работы фронтенд-инфраструктуры и развития команд. Разработчик из AdRoll делится опытом
• Сравнение Bootstrap 4 и Foundation 6.4?. Часть №1 — Гриды

• AMP/PWA:
  • Android Oreo откусывает кусочек от PWA
  • Да, ваш проект должен быть PWA
  • Создаем Progressive Web App с помощью React
  • Создаем Progressive Web Apps с помощью Angular?
  • iOS 11 Safari превратит ссылки Google AMP в обычные при шаринге
  

• Производительность:
  • Лекция Виталия Харисова «10k» про лёгкую версию поиска для медленных соединений и способы оптимизации кода, позволяющие уложиться в 10 килобайт.
  • Гонка за скоростью. Ускоряем загрузку сайтов в эпоху смартфонов
  • 20 практических советов по улучшению производительности работы JavaScript
  • Состояние интернета. Руководство по эффективному улучшению производительности от Karolina Szczur
  • Почему задержка (latency) имеет значение: основы веб-производительности. Нюансы и факторы, влияющие на скорость соединения на канале Front End Center
  

• Accessibility:
  • Инклюзивность в веб-разработке: как обеспечить доступность контента каждому пользователю
  • Лучший способ программного масштабирования веб-приложения
  • Способы создания доступного пользовательского интерфейса, часть I
  

• Анимация:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #51
  • Усиливаем анимацию суперспособностями с помощью requestAnimationFrame
  • Vivify — небольшая CSS-библиотека для анимации
  

CSS

• Внутри супер-быстрого CSS-движка: Quantum CSS (aka Stylo)
• Проверяем браузер на поддержку определённого CSS свойства
• Решаем проблему специфичности с помощью CSS модулей
• Как я интегрирую Bootstrap 4 и структуру моего SCSS в маленькие и средние проекты
• Создание «Skeleton Screens» с помощью пользовательских свойств CSS
• cssgrid.cc — подробнейшее руководство от CoffeeCup по построению лейаутов с помощью CSS Grid
• Библиотека чекбоксов на CSS

• Шрифты:
  • Adobe Typekit: теперь шрифты можно подключать без JavaScript (по аналогу с Google Fonts), шрифты готовы к Google AMP
  • Подробное руководство по веб-шрифтам от litmus (+ о веб-шрифтах в шаблонах писем)
  • Пользовательские интрефейсы для вариативных шрифтов
  

• CSS & JS:
  • Как изображения на чистом CSS помогли мне понять компоненты React
  • Доступ и модификация CSS переменных с помощью Javascript (и почему они лучше, чем переменные в SASS)
  • Как можно безопасно использовать CSS-in-JS?

JavaScript

• Пятничный JS: reqyire.js и очепятко-ориентированное программирование
• Microsoft анонсировала обновление TypeScript 2.5
• Изучаем JavaScript: 9 основных ошибок, которые вас тормозят
• BackboneJS: Getting Started. Как быстро начать создавать приложения на BackboneJS.
• Официальный блог JS движка V8: быстрые свойства в V8
• Лучшие JS фреймворки для фронтенда
• Angular vs. React vs. Vue: сравнение в 2017
• JavaScript — от коллбеков до async/await

• VueJS:
  • Реактивность Vue.js. Реактивность фреймворка Vue.js и использование метода Vue.set
  • Почему мы перешли с Angular 2 на Vue.js (и почему мы не выбрали React)
  • Переход с Angular на Vue.js
  • AT-UI — свежий UI-Kit от китайцев для создания десктопных веб-приложений на Vue.js 2.0
  • Используем TypeScript для разработки веб-приложений на Vue.js. Бесплатный курс на egghead.io
  • Async в Vue.js — часть 1
  • Быстрое введение в Vue.js на примере Super Mario Pixel Art
  

• React:
  • semiotic — фреймворк для визуализации данных в React (React & D3)
  • Перетаскиваемые элементы с помощью RxJS
  • План миграции с экосистемы React из-за вопросов с патентом
  

• Angular:
  • Шпаргалка по Angular 4
  • Введение в роутинг компонентов с помощью Angular Router
  • Все про AngularJS, Angular 2 и Angular 4
  • Процесс router-навигации в Angular за 7 шагов
  • 12 полезных бойлерплейтов для AngularJS
  • Angular 4 и взаимодействие соседних компонентов
  

• Libs & Plugins:
  • easter-egg-collection — js библиотека, включающая в себя набор пасхальных яиц
  • Quokka? — ?живой JavaScript Scratchpad теперь и для редактора Atom
  • lozad.js — продвинутый производительный Lazy Loader, использующий Intersection Observer API
  • jest-in-case — утилита для jest для создания вариаций одного теста
  

Браузеры

• Метод идентификации через определение дополнений, установленных в Chrome и Firefox
• Что нового в DevTools (Chrome 62)
• Новые возможности Microsoft Edge: Event Listeners, CSS object-fit/object-position, position: sticky и многое другое

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

• 18 SEO-мифов, о которых нужно забыть
• История разрушения SoundCloud: рассказ инсайдеров компании
• Обнаружена очередная атака на веб-браузеры, заражающая компьютеры при установке шрифтов
• YouTube представил новый дизайн и логотип
• Google ARCore – новая платформа дополненной реальности поискового гиганта для Android-устройств, Project Tango уходит в прошлое
• В чат Skype внедрили редактор кода для проведения собеседований
• Microsoft и Amazon договорились о совместной работе голосовых помощников Cortana и Alexa
• Microsoft и Red Hat объявили о расширении сотрудничества
• Криптовалютный трейдер Тони Вейс — о «пузыре» вокруг биткоина, плохих ICO и переоценённости блокчейна
• Как братья-миллиардеры хотят создать более дешевого конкурента Slack

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

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