Фронтенд-дайджест №367 (27 мая — 2 июня 2019)

Медиа

• Подкаст «Веб-стандарты», 177. Новости браузеров, font-display, иконочные шрифты, формы, доступность
• Подкаст «devschacht» #81: HolyJS Piter 2019
• "Repozitorro" #16 - От jQuery до React 1 шаг?
• РИТ++ 2019, cамые лучшие доклады всех семи конференций фестиваля: день первый, день второй

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

• Статический веб: возврат к истокам?

• Как eBay делал сканер штрих-кодов на WebAssembly

• W3C и WHATWG: неужели долгожданный мир?

• Начало работы с GraphQL: это довольно просто!

• How !important are we? Christian Heilmann (Microsoft) рассуждает о роли фронтенда в современной разработке

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

  • Анонс Cloudflare Image Resizing: упрощение оптимальной доставки изображений
  • Lighthouse плагин, который помогает измерять значение производительности у реальных пользователей, а не в эмулированной среде.
  • Ваш первый бюджет производительности с Lighthouse
  • Self-Host для ваших статических ассетов

• Tools:

  • 10 полезных советов по реализации Pixel Perfect дизайна во Front-end разработке (на примере работы с редактором Sketch)
  • Entropic — новый распределенный реестр пакетов для Node.js
  • Удалённая разработка в VS Code: ваша жизнь никогда не будет прежней
  • Что нового в DevTools (Chrome 76)

• Accessibility:

  • Разница между навигацией с клавиатурой и при помощи скринридера
  • Инструменты измерения доступности цветового контраста
  • Исправьте 85% проблем с веб-доступностью с помощью 5 простых шагов
  • Tabindex: использование редко бывает положительным

CSS

• CSS Subgrid новости
• Вертикальное и горизонтальное центрирование всего и вся в CSS Flexbox
• Utility-first CSS:: невероятно быстрая разработка интерфейса практически для любого дизайна
• Использование метода Grid Shepherd для упорядочивания данных с помощью CSS
• Понимание CSS-переменных
• Многострочное подчеркивание текста с закругленными краями
• xstyled - Новый способ стилизации компонентов
• Почему мы предпочитаем кастомные свойства CSS вместо переменных SASS
• Свойство CSS background-image как анти-паттерн

JavaScript

• API IntersectionObserver и ленивая загрузка изображений

• Разрабатываем игру на Svelte 3

• SEO тест: индексация JavaScript-сайтов

• 9 вопросов для получения должности JavaScript-разработчик

• Анонс TypeScript 3.5

• Почему я до сих пор использую jQuery в 2019 году

• Самый быстрый способ рендера DOM

• Теория:

  • 5 способов преобразовать значение в строку в JavaScript
  • Функциональный JavaScript: пять способов вычисления среднего значения с array reduce
  • Реализация приватных переменных в JavaScript

• React:

  • Управление стейтом с помощью React Hooks – без Redux и Context API
  • Запрос к API c React Hooks, HOC или Render Prop
  • Uibook — инструмент для визуального тестирования React-компонентов с медиа-запросами
  • Как Fiber сделал React значительно быстрее
  • React 16 + Three.js, советы по интеграции (2019)
  • Typing React (1) – Основы
  • zoom-level - Комплексный кросс-браузерный пакет, позволяющий определить уровень масштабирования страницы и элемента
  • Возвращаем null из setState в React 16

• Angular:

  • Готовьтесь: Angular 8 уже близко
  • Двустороннее связывание Angular, чуть больше понимания
  • Версия 8 Angular - меньшие бандлы, CLI API и согласование с экосистемой
  • Angular & RxJS: обнаружение утечек памяти
  • Изучение порталов Angular CDK

• Ember.js:

  • Ember.js: The Documentary (Русская версия)
  • Релиз Ember 3.10
  • EmberData - превращаем разочарование в праздник
  • Динамические компоненты в Ember

• VueJS:

  • Vue.js и SEO: как оптимизировать реактивные сайты для поисковых систем и ботов
  • Как создать расширение для Chrome с помощью Vue
  • Vue.js встречается с bootstrap: представлен новый проект Vootstrap
  • Классы компонентов во Vue отклонены
  • tiptap: расширяемый редактор форматированного текста для Vue.js

• Libs & Plugins:

  • Представлен Zdog 1.0, псевдо-3D движок для Web, использующий Canvas и SVG
  • atomico - Небольшая библиотека для создания интерфейсов на основе веб-компонентов, только с использованием функций и хуков.
  • Scene.js - анимационная библиотека на JavaScript & CSS на основе временной шкалы
  • pickr: простая и расширяемая библиотека для добавления пипетки с выбором цвета, без jQuery зависимости

Браузеры

• Как включить тёмную тему в Chrome на Android
• Google продолжает настаивать на ограничении API, востребованного в блокировщиках рекламы
• Волна вредоносных дополнений в каталоге Firefox, прикрывающихся Adobe Flash
• Представлен менеджер паролей Firefox Lockwise
• Tor Browser - первая стабильная версия анонимного браузера для Android
• В Google Chrome теперь можно переопределять геолокацию для тестирования сайтов
• Google заставляет пользователей Microsoft Edge Preview использовать Chrome для полноценной работы YouTube
• До Netscape: забытые веб-браузеры начала 1990-х