Фронтенд-дайджест №352 (11 — 17 февраля 2019)

Медиа

• Подкаст «Веб-стандарты», Выпуск №: 161 - Chrome 73 и CSS 2019, SVG, таблицы, гриды и кнопки, будущее Фоторамы
• Подкаст «Frontend Weekend» #88 – Что изменилось за год у Сергея Попова (о создании Лиги А и проблеме фронтендеров без опыта)
• Подкаст «devschacht»: 69: Я ❤ Frontend
• Подкаст «Фронтенд Юность (18+)» #83 Пересядь на звёздный стэк
• Турнир: "Лучшая JS-фича 2018" (ЧАСТЬ 2)
• Подкаст «Frontreview» №5: Правильное Резюме и Портфолио Junior разработчика/Resume & Portfolio Junior Developer
• Ember.js: документальный фильм (официальный релиз)

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

• HTML, который мы потеряли

• О линтерах, качестве кода, качестве вообще и управлении качеством

• Краткий план по изучению фронтенда, или #100ДнейКода

• HTML5 Boilerplate обновился до версии 7

• Bootstrap 4.3.0. Релиз новой версии, в которой отказались от поддержки jQuery

• Введение в WebBluetooth

• Полное руководство - Как ускорить GIF-видео в вебе

• Производительность:

  • Улучшаем производительность веб-шрифтов на реальном примере
  • Приоритезация ресурсов - используем помощь браузеров
  • Предварительная загрузка шрифтов и загадки приоритетов
  • Пример производительности DOM
  • third-party-web - подборка с краткой информацией о степени влияния третьесторонних скриптов на сайты в вебе

• Инструменты:

  • Собираем бандл мечты с помощью Webpack
  • Встречайте: pika/pack - новый способ управления npm пакетами
  • Что нового в DevTools (Chrome 73)
  • Puppeteer - мой новый сервер для разработки

• Accessibility:

  • Uncanny A11y
  • Советы по обеспечению доступности интерактивных элементов на мобильных устройствах
  • Проектирование интерфейсов будущего: инлайновый SVG

• Эффектный веб:

  • Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
  • Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer
  • SVG Filter Effects: согласование текста с текстурой поверхности с помощью
  • Эффект сеточного заполнения фона с помощью Anime.js
  • Water and Lemons - детализированная картина на чистом CSS

CSS

• Новый опрос #StateOfCSS 2019 от создателей StateOfJS
• Темная сторона Гридов (часть 1)
• Новый подход к утилитарным классам видимости на основе переменных CSS
• 10-шаговое руководство по Flexbox
• Конструируемые таблицы стилей: бесшовные переиспользуемые стили
• Процесс имплементации дизайна пользовательского интерфейса с нуля на примере шапки сайта
• CSS selectors level 4
• Введение в метрики шрифтов с подробным объяснением деталей каждого аспекта
• На Grid или на Flex?
• CSS Scroll Snap - как это работает
• В чем разница между Flexbox и Grid?

JavaScript

• 10 консольных команд, которые помогут дебажить JavaScript-код like a PRO

• Надёжный JavaScript: в погоне за мифом

• Информатика в JavaScript: двусвязные списки

• 5 способов создавать приложения в реальном времени с помощью JavaScript

• Как вывести JavaScript за пределы веба в 2019 году

• JavaScript: забавные моменты

• Как я избавился от новых спонсируемых постов в Facebook.

• ES5 to ESNext - вот все функции, добавленные в JavaScript с 2015 года

• Теория:

  • Всё, что нужно знать об async/await. Циклы, контроль потоков, ограничения
  • Управление состоянием. Серия лекций, состоящих из пяти видео, от Ильи Климова
  • Визуальное руководство по определениям и областям применения переменных JavaScript
  • Основы определения и всплытия переменных в JavaScript
  • Изучите чистые функции с помощью JavaScript

• TypeScript:

  • clean-code-typescript - концепты Clean Code, адаптированные под TypeScript
  • ReasonML vs TypeScript: сравнение их системы типизации
  • Как использовать Typescript с React и Redux

• React:

  • Почему React Hooks так взволновали меня?
  • Создание компонента автозаполнения React с нуля
  • Анимация в React
  • Магия многошаговых форм на React
  • Все, что вам нужно для создания пользовательского React Hook
  • Как достигнуть поддержки доступности в React приложениях
  • Что я почерпнула, изучив React за две ночи, после нескольких лет работы с Angular

• Angular:

  • Angular Universal: всё, что нужно знать SEO-специалисту
  • Управление брейкпоинтами изображений с помощью Angular
  • Тур по Angular Console
  • Создания тултипа на Angular CDK

• VueJS:

  • VueJS 3.0: Революция?. Мнение Ильи Климова
  • Создание SPA на Vue.js для продажи футболок
  • Превращение статических SVG рисунков в интерактивные виджеты и инфографику с Vue.js

Браузеры

• Мобильная Opera обзавелась бесплатным VPN
• Представлен новый интерфейс браузера Opera
• Браузер Samsung Internet Browser преодолел рубеж в 1 млрд загрузок в Google Play Store
• Сотрудник Microsoft: не используйте Internet Explorer по умолчанию
• В Chrome появится поддержка ссылок на отдельные слова и фразы в тексте
• Экономия памяти в Brave: сокращение на 33–66% по сравнению с Chrome