Фронтенд-дайджест №365 (13 — 19 мая 2019)

Медиа

• Подкаст «Фронтенд Юность (18+)» #93 Ворчим за фронтенд
• Подкаст «Сделайте мне красиво» Выпуск №17 - Вам не нужен SPA, новости Google и фейлы Microsoft
• Repozitorro #14: Проекты разные бывают, но такое...
• "ALL YOUR HTML" #s3e2: "Physics with Cannon.js"
• Видео со SmashingConf SF 2019
• Web at Google I/O 2019, 24 видео

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

• Картинки в вебе 2019

• Технологические тренды веб-разработки 2019

• SVG-компоненты для IoT и устройств (часть 2)

• Введение в JAMstack: архитектура современного веба

• Почему разработка с помощью JAMstack - это клево

• Все, что вы хотели знать об inputmode

• Руководство для новичков по Pug

• Разбираемся в устройстве JPEG

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

  • Как мы при помощи WebAssembly в 20 раз веб-приложение ускорили
  • Лучшая приоритизация HTTP/2 для ускорения веба
  • Глубокое погружение в нативную ленивую загрузку изображений и фреймов
  • Отчет о заседании комитета AMP Advisory
  • Оптимизация изображений: понимание точного влияния на Google’s Performance Score для повышения его уровня в 2019 году
  • Является ли 'the fold' (область первого экрана сайта) все еще важной в современной культуре скроллинга сайтов?
  • 3Pweb - онлайн-визуализатор, наглядно показывающий, сколько времени в среднем требуется для выполнения стретьесторонних скриптов

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

  • Удаленная разработка с использованием VS Code
  • Более быстрая и умная отладка JavaScript в Firefox DevTools

• Accessibility:

  • Новый (и простой) способ реализации доступности для скрытого контента
  • Состояние доступности: GAAD 2019
  • Представлена Microsoft Web Template Studio для фул-стек разработки

• Анимация:

  • Интеграция сторонних библиотек анимации в проект
  • Как создать круговую диаграмму на SVG

CSS

• Селектор :has() станет доступен для оформления?
• Это ловушка-trap-ezoid: CSS Shapes - это не то, что вы ожидаете
• Анимация CSS Grid Rows и Columns
• Subgrid. Новая статья на MDN dev docs
• CSS Scan: самый быстрый способ проверить и скопировать CSS
• CSS функция для ограничения многострочного текста троеточием была реализована в Firefox
• Отладка CSS Grid: Часть 2: что за Fr(action)?
• Google Fonts Now поддерживает font-display!
• Правила CSS, которые сделают вашу жизнь проще
• Китайская оконная решетка и CSS

JavaScript

• Первый вклад в API браузера от Facebook

• Cloudflare, Mozilla и Facebook развивают BinaryAST для ускорения загрузки JavaScript

• Начало работы с Svelte 3

• Функциональный JavaScript

• TypeScript 3.0: тип unknown

• Теория:

  • Какой здесь this? Внутренняя работа объектов JavaScript
  • Практическое руководство по Javascript Proxy
  • JavaScript движки: как они, всё-таки, работают? От стэка вызовов до промиса, (почти) всё что вам нужно знать

• VueJS:

  • Доступные сообщения валидации форм с помощью ARIA и Vue.js
  • Введение в test-driven разработку с помощью Vue.js
  • Начало работы с Vue - обзор и пошаговое руководство
  • Галерея с поддержкой жестов на Vue.js и Tailwind

• React:

  • Reakit 1.0: новый инструментарий для создания доступных веб-приложений на базе React
  • Как легко конвертировать классы React-Redux в React Hooks
  • unform - Библиотека ReactJS для создания неконтролируемых структур форм с вложенными полями, валидациями и многим другим
  • UI анимация в React
  • ReactQ - Универсальный стартовый набор для React+GraphQL: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
  • Основные шаблоны проектирования React Hooks
  • Докеризация React App
  • Создание собственной React-библиотеки для валидации: основы (часть 1)
  • Что делать, когда твое React приложение ощущается медленным

• Angular:

  • Angular: создание и публикация библиотеки
  • Представляем «CLI Builder»‎-ы
  • Создание интернет-магазина с использованием ngrx/store и Angular
  • Мои любимые советы и подсказки в Angular
  • Наследование компонентов в Angular
  • Делаем доступность проще с Angular CDK. Списки с клавиатурной навигацией

• Libs & Plugins:

  • Познакомьтесь с Storeon, крошечным менеджером состояний для современных приложений, близких по духу к Redux, реализованных в одном файле весом 173 байт
  • ola - анимационная библиотека для усреднения/интерполяции чисел в реальном времени
  • reLift-HTML - маленькая библиотека для view (3KB) позволяющая создавать веб-компоненты, кастомные элементы и помогает сделать любую HTML страницу реактивной без загрязнением большими фреймворками