Фронтенд-дайджест №375 (1 — 11 августа 2019)

Медиа

• Подкаст CSSSR: Новости 512 — 25 лет PHP, Github Actions, дизайн, CSS и оптимизация Instagram
• Подкаст «devschacht» #89: Роман Прудников про работу в 2ГИС и Яндекс Музыке.
• Подкаст «Фронтенд Юность (18+)» #103: Маленькая чёрная дыра — Приют для Столлмана
• "Repozitorro" #24: Портфолио джуниора под другим углом...
• Подкаст «Веб-стандарты», №187. HTML semantics, Web Components, W3C and WHATWG, HTML5 Doctor, Prince XML, Web Monetization
• Now Live: Your SmashingConf Toronto Playlist

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

• Фантастические веб-спецификации и где они обитают

• Блеск Mavo при создании интерактивных веб-приложений

• Простое введение в Web Workers в JavaScript

• Создание интерактивных оптимизированных электронных писем с помощью AMP Framework от Google

• Почему современная веб-разработка так сложна? Длинное, но поспешное объяснение: часть 1

• Что лучше: программа лояльности PWA или мобильное приложение?

• Contact Picker API, детали нового API в блоге разработчиков Google

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

  • Особенности Google PageSpeed: улучшение оценки сайта и его рейтинга в поиске
  • Largest Contentful Paint (LCP). Новая метрика производительности, которая поможет измерить время загрузки основного содержимого веб-страницы.
  • Time to First Byte: что это такое и почему это важно
  • Нативная ленивая загрузка в вебе
  • Нативный Lazy-Loading уже работает в Chrome 76!
  • Установите сетевые подключения заранее, для улучшения воспринимаемой скорости страницы
  • Высокопроизводительная обработка инпута в вебе

• Tools:

  • 5 полезных плагинов для webpack
  • Руководство по горячим клавишам Visual Studio Code, для более высокой продуктивности и 30 моих любимых сокращений, которые стоит выучить
  • SVG Gobbler - простое расширение, которое находит SVG в текущем окне, выделяет уникальные атрибуты, включая размер, и позволяет загружать или копировать в буфер обмена уже оптимизированную версию

• Accessibility:

  • Web Accessibility vs. Usability
  • Неожиданные советы по доступности

• Анимация:

  • Эффект оставления следов изображениями при движении мыши
  • Подобка впечатляющих сайтов Inspirational Websites Roundup #7
  • Как создать веб-анимацию с Anime.js

CSS

• Пользовательские CSS-атрибуты как механизм передачи данных из JavaScript в CSS
• Writing Modes и CSS Layout
• Изучение CSS, читая спецификации
• Client-side JS Redirects: может ли робот Googlebot их обнаружить?
• Обработка неиспользуемого CSS в SASS для повышения производительности
• CSS :empty Selector
• Еженедельные новости платформы: CSS font-style: oblique, webhin browser extension, CSS Modules V1
• Принципы дизайна для разработчиков: процессы и советы по CSS для лучшего веб-дизайна
• Перемещение текста по изогнутой траектории
• 5 классных CSS Grid генераторов для ваших раскладок
• Субпиксельный рендеринг и границы

JavaScript

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

• Современный учебник JavaScript. Большое обновление популярного ресурса от Ильи Кантора

• Как реализовать Drag & Drop для HTML элементов и файлов с помощью Javascript

• Создание моего первого приложения на Svelte: мысли и впечатления

• Теория:

  • Часто задаваемые вопросы о системах типов
  • Defined or Undefined? Нюансы создания массивов в JavaScript
  • Использование let объявлений переменных и особенности образуемых при этом замыканий в JavaScript
  • Design Patterns #1 - Singleton (Одиночка)
  • Работаем с ECMAScript 2019 Asynchronous Iteration с помощью for-of
  • Intl.NumberFormat
  • Интересные варианты использования битовых операторов JavaScript
  • JavaScript Promise комбинаторы: .all(), .race(), .allSettled()

• React:

  • Анимированное руководство по базовым механизмам React
  • Релиз React v16.9.0 и обновление дорожной карты
  • Что нового в React v16.9
  • Как работает Development Mode Work?
  • Создание мобильных приложений с Ionic и React
  • useEffect или useLayoutEffect на простом доступном языке
  • Использование Immer для управлением состоянием React приложения

• VueJS:

  • Создание SPA на Vue.js поверх Headless WordPress
  • Как настроить среду разработки для Vue
  • Модификация данных компонента с помощью источников событий во Vue.js
  • Получая больше от асинхронных Vue компонентов

• Angular:

  • Использование функции async-await в Angular
  • Асинхронные модули и компоненты в Angular Ivy
  • На пути к Angular 9: три исправленных ошибки в Angular 9
  • Как обмениваться Angular компонентами между проектами и приложениями

• Libs & Plugins:

  • sharec - проект для замены бойлерплейтов и пакетов типа Create React App, который позволяет обновлять конфиги и позволяет вносить в них изменения
  • Frosted Panel - кросс-браузерная библиотека на чистом JS для реализации отзывчивого эффекта "Замерзшего Стекла"
  • murphyjs: простой способ реализовать анимацию, основанную на прокрутке, в ваших компонентах.

Браузеры

• Найден метод для определения просмотра в режиме инкогнито в Chrome 76
• В Chrome 78 Canary тестируется функция принудительного тёмного режима для всех сайтов
• В ночные сборки Firefox добавлен режим строгой изоляции страниц
• Заметки к релизу Safari Technology Preview 89