JAVASCRIPT_BROWSER.md

Браузеры, API, PWA, WebAssembly, Web Components

Браузеры

• 🇺🇸 Особенности использования модулей в браузере
• 🇺🇸 Поддержка старых браузеров без вреда для остальных
• 🇷🇺 Как рисует браузер. Доклад Яндекса
• 🇺🇸 Hide iPhone HTML5 video play button
• 🇺🇸 ECMAScript features compatibility table
• 🇷🇺 Browser Fingerprint — анонимная идентификация браузеров
• 🇷🇺/🇺🇸 Современная загрузка скриптов перевод/оригинал
• 🇷🇺 Взаимодействие сайта в браузере и локально запущенной программы
• 🇷🇺/🇺🇸 DevTips: Советы веб-разработчику частичный перевод 1, частичный перевод 2, частичный перевод 3, частичный перевод 4/оригинал
• 🇺🇸 how to manage HTML DOM with vanilla JavaScript only?
• 🇺🇸 Browser Architecture: Web-to-App Communication Overview
• 🇺🇸 🔥 What every Browser knows about you

Event loop

• 🇺🇸 Event loop explainer
• 🇷🇺 Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome
• 🇺🇸 Demystifying Asynchronous JavaScript — Event Loop, Call stack, Task Queue, and More!

Полезные расширения

• WhatRuns — определитель технологий сайта
• JsonDiscovery — самый годный просмотрщик JSON
• Обход блокировок Рунета

Разработка расширений

• 🇷🇺 Пишем безопасное браузерное расширение
• 🇺🇸 web-extension-starter
• 🇺🇸 Getting started with web-ext

Про отладку в браузерах

• 🇷🇺 Мои любимые инструменты разработчика в Chrome
• 🇷🇺 10 малоизвестных возможностей инструментов разработчика Chrome
• 🇺🇸 Eruda — подключаемый DevTools для мобильных браузеров
• 🇺🇸 Отладка Mobile Firefox
• 🇺🇸 Touch Bar Demo App — эмулятор тачбара MacBook
• 🇺🇸 Feature Queries Manager — отладка браузеров с разным значением @supports
• 🇺🇸 CSS Feature Toggles
• 🇺🇸 List of Chromium Command Line Switches
• 🇺🇸 Enabling the Microphone/Camera in Chrome for (Local) Unsecure Origins

Про новинки в браузерах

• 🇺🇸 Microsoft Edge
• 🇺🇸 Safari (WebKit)
• 🇺🇸 Firefox developer release notes

Где найти старые версии браузеров:

• Firefox
• Opera Chromium desktop, все платформы
  • Отключить автообновление Opera на macOS 31-: "Показать содержимое пакета" -> удалить Contents/MacOS/opera_autoupdate
  • Отключить автообновление Opera на macOS 32+
• UCBrowser, Android
• Chrome, инструкция как откопать старый билд
• Edge на движке EdgeHTML можно найти в том или ином билде Windows 10
  • 12: v.1507, build 10240
  • 13: v.1511, build 10586
  • 14: v.1607, build 14393
  • 15: v.1703, build 15063
  • 16: v.1709, build 16299
  • 17: v.1803, build 17134
  • 18: v.1809, build 17763
  • 18: v.1903, build 18362
  • 18: v.1909, build 18363
  • Chromium-based: v.2004

Explainers — объяснение мотивации для разработки новых API и других вещей

• 🇺🇸 WebKit Explainers
• 🇺🇸 Microsoft Edge Explainers

Прочее

• 🇺🇸 Mozilla Specification Positions
• 🇺🇸 Техподдержка SamsungInternet

Работа с событиями

• 🇺🇸 A Simple Explanation of Event Delegation in JavaScript
• 🇺🇸 addEventListener accepts functions and (!) objects

Библиотеки

• 🇺🇸 Intro.js — Step-by-step guide and feature introduction
• 🇺🇸 interactjs — JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping
• 🇺🇸 Lottie — плеер для воспроизведения анимаций из After Effect
• 🇺🇸 Micromodal — доступные модальные окна
• 🇺🇸 markdown-it — Markdown parser
• 🇺🇸 FileSaver.js
• 🇺🇸 Vanilla Tilt — анимированные 3D-плашки
• 🇺🇸 Pure JavaScript Image Crop Component
• 🇺🇸 The Vanilla JavaScript Repository — сборник различных библиотек
• 🇺🇸 🔥 ZXing — библиотека для распознавания штрихкодов
• 🇺🇸 🔥 Browser or Node.js — определение окружения
• 🇺🇸 🔥 Browser, please — определение версии браузера
• 🇺🇸 🔥 js-cookie
• 🇺🇸 🔥 throttle-debounce
• 🇺🇸 🔥 uuid — генератор UUID (universally unique identifier «универсальный уникальный идентификатор»)
• 🇺🇸 Piecon — Pie charts in your favicon!
• 🇺🇸 AR.js - Augmented Reality on the Web
• 🇺🇸 Cashify – Lightweight currency conversion library, successor of money.js
• 🇺🇸 Mousetrap – работа с шорткатами
• 🇺🇸 shiki – Syntax Highlighter (подсветка синтаксиса)
• 🇺🇸 Fluid Framework

Карусели

• 🇺🇸 glide
• 🇺🇸 Flickity
• 🇺🇸 Siema

Выпадающие списки

• 🇺🇸 Choices

Даты и время

• 🇺🇸 date-fns — Modern JavaScript date utility library
• 🇺🇸 Day.js — легковесная альтернатива Moment.js
• 🇺🇸 Luxon — A powerful, modern, and friendly wrapper for Javascript dates and times.

Также см. JavaScript -> Intl

Календари

• 🇺🇸 Duet Date Picker – на веб-компонентах

Формы

• 🇺🇸 yup — до смерти простой валидатор объектов
• 🇺🇸 🔥 Final Form — работа с формами
• 🇺🇸 🔥 Final Form Arrays — работа с массивами в Final Form
• 🇺🇸 🔥 Text Mask
• 🇺🇸 Cleave.js — Format your input content when you are typing

Скролл и скроллбар

• 🇺🇸 perfect-scrollbar
• 🇺🇸 lax.js — imple & light weight (<3kb gzipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll!

Анимация

• 🇺🇸 Anime.js — a lightweight JavaScript animation library with a simple, yet powerful API

Canvas

• 🇺🇸 Rough.js — библиотека для имитации рисования на canvas "от руки"
• 🇺🇸 Canvas-Txt — Render text onto canvases without breaking a sweat

Графики и визуализация

• 🇺🇸 Сборник библиотек для визуализации (карты, графики, данные, цвета
• 🇺🇸 DataMaps — интерактивные карты
• 🇺🇸 Carbon Charts — с адаптерами под фреймворки
• 🇺🇸 Google Charts
• 🇺🇸 Plotly.js
• 🇺🇸 Chartist - Simple responsive charts
• 🇺🇸 ApexCharts.js
• 🇺🇸 ECharts
• 🇺🇸 Chart.js

ECharts

• 🇺🇸 Why we chose ECharts for data visualizations

Chart.js

• 🇺🇸 Data visualization with Chart.js: An introduction

D3.js

• 🇺🇸 How to learn D3.js
• 🇷🇺 Визуализация геоданных в D3.js
• 🇺🇸 d3-pre
• 🇺🇸 Rendering One Million Datapoints with D3 and WebGL
• 🇷🇺 Просто о D3.js
• 🇷🇺 Визуализация сложных данных с использованием D3 и React

Библиотеки на основе D3.js

• 🇺🇸 Britecharts
• 🇺🇸 billboard.js

Медиа (аудио, видео)

• 🇺🇸 Plyr — a simple, accessible and customisable media player
• 🇺🇸 Vime – a customizable, extensible, accessible and framework agnostic media player
• 🇷🇺 Обзор видеоплееров для веба

drag & drop library

• 🇺🇸 graggable

Физические движки

• 🇺🇸 Matter.js

Шаблонизаторы / библиотеки для рендеринга HTML

• 🇺🇸 lit-html
• 🇺🇸 hyperHTML
• 🇺🇸 lighterhtml
• 🇺🇸 lit-html vs hyperHTML vs lighterhtml
• 🇺🇸 Awesome lit-html

RxJS

• 🇺🇸 RxJS: A Simple Introduction
• 🇺🇸 Push-based Architectures with RxJS

Карты

• 🇷🇺 Google Maps — кастомизируй меня полностью
• 🇺🇸 Google Geolocation API
• 🇺🇸 Farewell, Google Maps

Иммутабельность

• 🇺🇸 Immutable.js
• 🇺🇸 Introduction to Immutable.js and Functional Programming Concepts

Поиск

• 🇺🇸 Fuse.js — powerful, lightweight fuzzy-search library
• 🇺🇸 Elasticlunr.js — Lightweight full-text search engine in Javascript for browser search and offline search

WYSIWYG

• 🇺🇸 pell
• 🇺🇸 Slate.js

Локализация

• 🇺🇸 Project Fluent

Также смотри: JAVASCRIPT_FRAMEWORKS.md -> Интернационализация

PWA

• 🇷🇺 🔥 📺 Введение в Progressive Web Apps, Сергей Пугачев (Google)

• 🇷🇺/🇺🇸 Progressive Web Apps — Websites that took all the right vitamins
• 🇺🇸 Learn PWA
• 🇺🇸 📺 Progressive Web App Training
• 🇺🇸 MDN: Progressive web apps Могут ли PWA (Progressive Web Apps) образца 2018 года составить достойную конкуренцию нативным приложениям?
• 🇺🇸 Building offline-first web and mobile apps using event-sourcing
• 🇺🇸 An Extensive Guide To Progressive Web Applications

• 🇺🇸 Designing And Building A Progressive Web Application Without A Framework Part 1, Part 2, Part 3
• 🇺🇸 Progressive Web Apps. The Superpowers of the Web and Native Apps Combined
• 🇺🇸 Appscope - Progressive Web Apps Examples
• 🇺🇸 Javascript to check if PWA or Mobile Web
• 🇺🇸 Awesome Progressive Web Apps
• 🇺🇸 What makes a good Progressive Web App?
• 🇺🇸 📺 Going Offline First (Video Series)

Web App Manifest и прочие иконки

• 🇺🇸 PWACompat to bring Web App Manifest to older browsers
• 🇺🇸 You shouldn’t use Chrome’s PWACompat library in your Progressive Web Apps
• 🇺🇸 iWAM — An experiment to polyfill Web App Manifest (WAM) into Safari on iOS useful for Progressive Web Apps
• 🇺🇸 PWA series: the manifest file cheatsheet
• 🇷🇺 Выйти за грань браузера (theme-color)
• 🇺🇸 Creating a Custom PWA Splash Screen
• 🇺🇸 pwa-asset-generator ✨
• 🇷🇺 Разработка анимированных фавиконов

Маскируемеые иконки

• 🇺🇸 Adaptive icon support in PWAs with maskable icons
• 🇺🇸 Маскируемеые иконки (в Android)
• 🇺🇸 New in Chrome 79 — Maskable Icons
• 🇺🇸 Maskable Icons: Android Adaptive Icons for Your PWA

App shortcuts

• 🇺🇸 Get things done quickly with app shortcuts

Service Worker

• 🇷🇺 Создание сервис-воркера: разбор примера
• 🇺🇸 Service Workers at Slack: Our Quest for Faster Boot Times and Offline Support
• 🇺🇸 📺 Максим Сальников — Сервис-воркеры: используем накопленный опыт и смотрим в будущее
• 🇺🇸 Service workers at TPAC
• 🇷🇺 Продуманные запросы: стратегии кэширования в век PWA
• 🇺🇸 ServiceWorker Cookbook
• 🇷🇺 Подводные камни Service Workers
• 🇺🇸 Two HTTP headers related to Service Workers you never may have heard of
• 🇺🇸 Service workers: the little heroes behind Progressive Web Apps
• 🇺🇸 Debugging Service Workers
• 🇺🇸 Stuff I wish I'd known sooner about service workers
• 🇺🇸 App shell UX with service workers and streams
• 🇺🇸 Service Worker Lifecycle Explained
• 🇺🇸 How much data should my Service Worker put upfront in the offline cache?<!--- в общем, не кэшируйте всё пордяд, подумайте о пользователе; кэшируйте основу, то что пользователь посетил и то что будет полезно ему в режиме оффлайн --->
• 🇺🇸 Offline POSTs with Progressive Web Apps
• 🇺🇸 Adaptive loading with service workers
• 🇺🇸 Understanding Service Workers

Workbox

• 🇺🇸 Workbox — JavaScript Libraries for adding offline support to web apps
• 🇷🇺 WorkBox: ваш toolkit в мире сервис-воркеров

Настраиваемый процесс установки

• 🇷🇺/🇺🇸 Как предоставлять собственный процесс установки в приложении

iOS

• 🇺🇸 🔥 @khmyznikov/pwa-install
• 🇺🇸 pwa-install-prompt

Особенности платформ

• 🇺🇸 PWA Bugs
• 🇺🇸 Десктопные PWA в Windows
• 🇺🇸 Десктопные PWA в Linux
• 🇺🇸 Progressive Web Apps on Desktop

Особенности PWA на iOS

• 🇺🇸 🔥 iOS PWA Compatibility
• 🇺🇸 PWAs are coming to iOS 11.3: Cupertino, we have a problem
• 🇺🇸 What’s new on iOS 12.2 for Progressive Web Apps
• 🇺🇸 iPhone 11, iPadOS and iOS 13 for PWAs and web development
• 🇺🇸 Safari on iOS 14 and iPadOS 14 for PWA and Web Developers
• 🇺🇸 Don’t use iOS meta tags irresponsibly in your Progressive Web Apps
• 🇺🇸 Adding Custom iOS Splash Screens To Your Progressive Web App
• 🇺🇸 Changing The iOS Status Bar Of Your Progressive Web App

PWA и магазины приложений

Google Play (TWA)

• 🇺🇸 🔥 Trusted Web Activity — Chrome Developers
• 🇷🇺/🇺🇸 ⚠️ Play Store теперь принимает прогрессивные веб-приложения (PWA) перевод/оригинал
• 🇺🇸 Bubblewrap — CLI that helps developers to create a Project for an Android application that launches an existing (PWAs) using a TWA
• 🇺🇸 How can I detect if my website is opened inside a Trusted Web Actvity?
• 🇺🇸 PWABuilder

Samsung Galaxy Store

• 🇺🇸 Introducing Progressive Web Apps to Samsung Galaxy Store

Microsoft Store

• 🇺🇸 Publishing PWA to Microsoft Store

Project Fugu

• 🇺🇸 🐡 Chromium https://goo.gle/fugu-api-tracker
• 🇺🇸 Project Fugu 🐡 at W3C TPAC

Кейсы компаний

• 🇺🇸 ⚠️ A Tinder Progressive Web App Performance Case Study
• 🇺🇸 ⚠️ A Pinterest Progressive Web App Performance Case Study
• 🇷🇺/🇺🇸 Сервис-воркеры в клиенте Slack: об ускорении загрузки и оффлайн-режиме перевод/оригинал

API

API для работы с DOM

IntersectionObserver — слежение за попаданием элемента в область видимости

• 🇺🇸 Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver
• 🇺🇸 Intersection Observers — Explainer Doc, Draft Spec, Polyfill
• 🇺🇸 🔥 IntersectionObserver polyfill

ResizeObserver — слежение за изменением размеров элемента

• 🇷🇺/🇺🇸 ResizeObserver — новый мощный инструмент для работы с адаптивностью перевод/оригинал
• 🇺🇸 Resize Observer Polyfill

Async DOM

• 🇺🇸 Async DOM proposals
• 🇺🇸 Display locking proposal
• 🇺🇸 DOMChangeList proposal
• 🇺🇸 worker-node proposal

API для работы с CSS

• 🇺🇸 An Introduction and Guide to the CSS Object Model (CSSOM)

API для работы с камерой, микрофоном и медиа

• 🇺🇸 JS Tidbits - MediaStream API
• 🇺🇸 Web 🧡 Camera

Media Capture and Streams API (MediaStream API) — получение аудио и видео

• 🇺🇸 MDN — Media Capture and Streams API (Media Stream)
• 🇺🇸 Audio & Video Capture

MediaStream Image Capture API — продвинутое управление камерой

• 🇺🇸 MDN — MediaStream Image Capture API
• 🇺🇸 Advanced Camera Controls

MediaStream Recording API — запись медиа

• 🇺🇸 MDN — MediaStream Recording API
• 🇺🇸 Recording Media
• 🇺🇸 Building a Dictaphone Using Media Recorder and getUserMedia
• 🇺🇸 webkit – MediaRecorder API

Media Source API

• 🇺🇸 Media Source API – MDN

WebRTC API — реал-тайм коммуникация

• 🇺🇸 MDN — WebRTC API
• 🇺🇸 Real-Time Communication
• 🇺🇸 A comprehensive dive into WebRTC for client-server web games

WebCodecs API

• 🇺🇸 WebCodecs – черновик предложения
• 🇺🇸 Video processing with WebCodecs

PTZ-камеры (pan, tilt, zoom)

• 🇺🇸 Control camera pan, tilt, and zoom

Picture-in-Picture API

• 🇺🇸 Picture-in-Picture
• 🇺🇸 How we built Picture-in-Picture in Firefox Desktop with more control over video

Web Video Text Tracks Format (WebVTT) — формат субтитров (подписей) для video

• 🇺🇸 Web Video Text Tracks Format (WebVTT)

Доступ к аппаратным ресурсам устройства (Device Features)

Network Information API

• 🇺🇸 MDN — Network Information API
• 🇺🇸 Network Type & Speed
• 🇺🇸 Adaptive serving based on network quality

NavigatorOnLine

• 🇺🇸 MDN — NavigatorOnLine
• 🇺🇸 Online State

Vibration API

• 🇺🇸 MDN — Vibration API
• 🇺🇸 Vibration

Battery Status API

• 🇺🇸 MDN — Battery Status API
• 🇺🇸 Battery Status

Device Memory API

• 🇺🇸 MDN — Device Memory API
• 🇺🇸 Device Memory

Web NFC

• 🇺🇸 Interact with NFC devices on Chrome for Android
• 🇺🇸 NFC
• 🇺🇸 Web NFC — черновик спецификации

Generic Sensor API

• 🇺🇸 Generic Sensor API — черновик спецификации
• 🇺🇸 Getting started with the Ambient Light Sensor
• 🇺🇸 Device Position
• 🇺🇸 Device Motion

Доступ к средствам операционной системы

Хренение информации

• 🇺🇸 Offline Storage
• 🇺🇸 MDN — Storage API
• 🇺🇸 Storage Quotas

Web Storage API

• 🇺🇸 MDN — Web Storage API
• 🇺🇸 Test of localStorage limits/quota

IndexedDB API

• 🇺🇸 MDN — IndexedDB API
• 🇺🇸 React, Web Workers and IndexedDB
• 🇺🇸 IDB-Keyval

ServiceWorker Cache

• 🇺🇸 MDN — Cache

Storage Access API

• 🇺🇸 Introducing the Storage Access API

File — доступ к выбранным файлам

• 🇺🇸 File Access
• 🇺🇸 MDN — Using files from web applications

File System Access (ex Native File System API ) — доступ к файловой системе

• 🇺🇸 File System Access – черновик предложения
• 🇺🇸 The File System Access API: simplifying access to local files
• 🇺🇸 Native File System API — explainer

Contact Picker API — доступ к контактам

• 🇺🇸 Contact Picker API, или как поделиться своими контактами с браузером
• 🇺🇸 A contact picker for the web
• 🇺🇸 An introduction to the Web Contact Picker API
• 🇺🇸 Contact Picker API Demo
• 🇺🇸 Contact Picker API — черновик предложения
• 🇺🇸 Contact Picker API — explainer
• 🇺🇸 Автозаполнение из контактов в Safari

Web OTP API — получение одноразовых кодов из СМС

• 🇺🇸 Verify phone numbers on the web with the Web OTP API
• 🇺🇸 Web OTP explainer
• 🇺🇸 Enhance SMS-delivered code security with domain-bound codes
• 🇺🇸 Автоподстановка OTP в Safari

Push API — уведомления из браузера

• 🇺🇸 Push Messages
• 🇺🇸 Web Push Book — книга про Push API и всё, что с ними связано
• 🇺🇸 web-push-libs

Shape Detection API — распознавание штрихкодов, текста, лиц с изображений

• 🇺🇸 The Shape Detection API: a picture is worth a thousand words, faces, and barcodes
• 🇺🇸 Demo и документация
• 🇺🇸 Barcode detection using Shape Detection API

Badging API — вывод меток на иконке приложения

• 🇺🇸 Badging for app icons
• 🇺🇸 Badging API Explainer

Task Scheduler API — запуск задач по расписанию

• 🇺🇸 Task Scheduler API — черновик спецификации
• 🇺🇸 Task Scheduling

Background Sync API — возможность отправлять данные после восстановления связи

• 🇺🇸 Web Background Synchronization — черновик предложения
• 🇺🇸 Background Sync
• 🇺🇸 Introducing Background Sync

Periodic Background Sync API — возможность периодически запрашивать свежие данные из сервис-воркера

• 🇺🇸 Richer offline experiences with the Periodic Background Sync API
• 🇺🇸 Periodic Background Sync Explained

Background Fetch API

• 🇺🇸 Background Fetch API — черновик спецификации
• 🇺🇸 Introducing Background Fetch
• 🇺🇸 Background Fetch API: Get Ready To Use It!

Notifications API

• 🇺🇸 📺 Implementing Web Notifications
• 🇺🇸 Local Notifications
• 🇺🇸 Notification Triggers Explainer

Page Visibility API

• 🇺🇸 Foreground Detection

Idle Detection API — определение отсутствие активности пользователя

• 🇺🇸 Detect inactive users with the Idle Detection API

Geolocation API

• 🇺🇸 Geolocation

Geolocation Sensor (не имплементировано)

• 🇺🇸 Geolocation Sensor: W3C Working Draft, Editor's Draft

Permissions API

• 🇺🇸 Permissions

Local Font Access API — низкоуровневая работа со шрифтами

• 🇺🇸 Use advanced typography with local fonts

Media Session API — доступ к мультимедийным клавишам и интерфейсу

• 🇺🇸 Customize media notifications and playback controls with the Media Session API

Взаимодействие между приложениями

• 🇺🇸 Web Share Demo (Web Share Level 2 and Web Share Target API Level 2)

Web Share API

• 🇺🇸 Share like a native app with the Web Share API
• 🇺🇸 Web Share API — черновик спецификации
• 🇺🇸 How to Use the Web Share API
• 🇺🇸 On the Web Share API

Web Share Target API

• 🇺🇸 Receiving shared data with the Web Share Target API
• 🇺🇸 Web Share Target API — черновик предложения
• 🇺🇸 Web Share Target API — Level 2 — черновик предложения

File Handling API

• 🇺🇸 Let web applications be file handlers
• 🇺🇸 File Handling explainer

API для платежей

Payment Request API

• 🇺🇸 Payment Request API — спецификация
• 🇺🇸 Web Payments Overview
• 🇺🇸 Deep Dive into the Payment Request API
• 🇷🇺 Стандартный браузерный API Payment Request
• 🇺🇸 Introducing Web Payments: Easier Online Purchases With The Payment Request API
• 🇺🇸 Introducing the Payment Request API for Apple Pay
• 🇺🇸 Accepting Payments using JavaScript Payment Request API
• 🇺🇸 What’s New in the Payment Request API for Apple Pay (Jun 6, 2019)

Payment Handler API

• 🇺🇸 Payment Handler API — черновик спецификации

Прочие API, связанные с финансами

• 🇺🇸 Google Pay API

API для авторизации

Web Authentication API (WebAuthn)

• 🇺🇸 Guide to Web Authentication
• 🇷🇺 Новые стандарты для беспарольной аутентификации: как они работают
• 🇷🇺 WebAuthn в реальной жизни
• 🇺🇸 Meet Face ID and Touch ID for the Web

Credential Management API

• 🇷🇺 Автоматический вход на сайт с использованием Credential Management API
• 🇺🇸 Credentials

Прочие API, связанные с авторизацией

• 🇷🇺 Внедряем Sign in with Apple — систему авторизации от Apple

Ввод/вывод информации

Pointer Events API

• 🇺🇸 Pointer Events API

Pointer Lock API

• 🇺🇸 Pointer Lock – спецификация

unadjustedMovement – отключение ускорения указателя

• 🇺🇸 Disable mouse acceleration to provide a better FPS gaming experience

Clipboard API — работа с буфером обмена

• 🇺🇸 Clipboard API and events Editor’s Draft
• 🇺🇸 Clipboard (Copy & Paste)

Early detection of input events

• 🇺🇸 Early detection of input events — черновик предложения
• 🇺🇸 isInputPending — explainer
• 🇷🇺/🇺🇸 Первый вклад в API браузера от Facebook перевод/оригинал

API для работы с экранами

Multi-Screen Window Placement API

• 🇺🇸 Managing several displays with the Multi-Screen Window Placement API

Fullscreen API

• 🇺🇸 Fullscreen

Screen Orientation API

• 🇺🇸 Screen Orientation & Lock

Wake Lock API

• 🇺🇸 Wake Lock
• 🇺🇸 Stay awake with the Wake Lock API
• 🇺🇸 Wake Lock API Specification
• 🇺🇸 Wake Lock API case study: 300% increase in purchase intent indicators on BettyCrocker.com

Presentation API

• 🇺🇸 Presentation Features
• 🇺🇸 Present web pages to secondary attached displays
• 🇺🇸 Presentation API Specification
• 🇺🇸 Presentation API demos
• 🇺🇸 Google Cast for Chrome on Android

Visual Viewport API — определение размера визуально видимой части страницы

• 🇺🇸 Visual Viewport API — черновик предложения
• 🇺🇸 Visual Viewport API — explainer

WebXR Device API

• 🇺🇸 Virtual & Augmented Reality
• 🇺🇸 WebXR Device API Explained
• 🇺🇸 WebXR Device API Specification
• 🇺🇸 Virtual reality comes to the web
• 🇺🇸 Virtual reality comes to the web, part II
• 🇺🇸 Positioning virtual objects in real-world views

API для работы со звуком

Web Speech API — распознавание и синтезация речи

• 🇺🇸 Speech Recognition

Web Audio API

• 🇷🇺/🇺🇸 Концепции, лежащие в основе Web Audio API перевод/оригинал

API для работы с устройствами

Gamepad API

• 🇺🇸 Play the Chrome dino game with your gamepad 🇷🇺/🇺🇸 Серфинг интернета геймпадом (Javascript) перевод/оригинал
• 🇺🇸 The Gamepad Reloaded

Web Bluetooth API

• 🇺🇸 Bluetooth

WebUSB API

• 🇺🇸 USB
• 🇺🇸 WebUSB API — черновик предложения
• 🇺🇸 Access USB Devices on the Web

WebHID API

• 🇺🇸 WebHID API – черновик предложения
• 🇺🇸 Human interface devices on the web: a few quick examples
• 🇺🇸 Connecting to uncommon HID devices
• 🇺🇸 Upcoming WebHID API - access Bluetooth/USB HID devices in web applications

Serial API

• 🇺🇸 Read and write from a serial port
• 🇺🇸 Serial API — черновик предложения

API для разработки, отладки и оптимизации

Console API / Command Line API

• 🇷🇺/🇺🇸 Используем console на полную перевод/оригинал
• 🇷🇺/🇺🇸 Руководство по API командной строки перевод/оригинал
• 🇺🇸 Mastering JS console.log like a Pro
• 🇺🇸 A Guide to Console Commands

Layout Instability API

• 🇺🇸 Fixing layout instability

Reporting API — апи для сбора информации о клиентских ошибках

• 🇺🇸 Reporting API Editor’s Draft
• 🇷🇺/🇺🇸 API ReportingObserver: взгляд на код веб-страниц с новой точки зрения перевод/оригинал
• 🇺🇸 The Reporting API

Server Timing

• 🇺🇸 Server Timing Working Draft

JavaScript Self-Profiling API

• 🇺🇸 JavaScript Self-Profiling API Proposal

API для работы с сетью

FormData

• 🇺🇸 🔥 formdata-polyfill

XMLHttpRequest

Fetch API

WebSocket API (WebSockets)

• 🇺🇸 WebSockets - A Conceptual Deep Dive

Server-sent events

• 🇷🇺 Server Sent Events – learn.javascript.ru

Beacon API

• 🇺🇸 Logging Activity With The Web Beacon API

Raw Sockets API — низкоуровневый прямой доступ к TCP/UDP

• 🇺🇸 Direct Sockets explainer

Прочие API

requestAnimationFrame

• 🇺🇸 Browsers may throttle requestAnimationFrame

Cooperative Scheduling of Background Tasks

• 🇺🇸 Cooperative Scheduling of Background Tasks – спецификация
• 🇷🇺/🇺🇸 Как организовать выполнение фоновых задач в JavaScript перевод/оригинал

Streams API

• 🇺🇸 Streams for reactive programming
• 🇺🇸 Compression Streams Explained

Content Indexing API

• 🇺🇸 Indexing your offline-capable pages with the Content Indexing API

Web Animations API

• 🇺🇸 Playing With Particles Using the Web Animations API

Web Cryptography API

• 🇺🇸 Web Cryptography API – спецификация
• 🇺🇸 Update on Web Cryptography

Portals

• 🇺🇸 Portals – черновик предложения
• 🇺🇸 Hands-on with Portals: seamless navigation on the web

Channel Messaging API

• 🇺🇸 MDN — Channel Messaging API

Совсем прочее

• 🇺🇸 How to display a "new version available" for a Progressive Web App
• 🇺🇸 Mock Service Worker
• 🇺🇸 How to Detect an Ad Blocker — как определить наличие блокировщика рекламы

Вспомогательные инструменты

• 🇺🇸 PWA Builder

Web Bundles — упаковка сайта в один файл

• 🇺🇸 Get started with Web Bundles

Web Workers

• 🇷🇺 JavaScript Web Workers: руководство для начинающих
• 🇺🇸 Use web workers to run JavaScript off the browser's main thread
• 🇺🇸 Threading the web with module workers
• 🇺🇸 Workers overview

Canvas

Также см. Библиотеки - Canvas

• 🇷🇺 Как мы учились рисовать тексты на Canvas
• 🇺🇸 HiDPI Canvas Polyfill
• 🇺🇸 Вычисление коллизий объектов в Canvas (Simulating Object Collisions With Canvas)

WebGL

• 🇷🇺 Введение в программирование шейдеров для верстальщиков
• 🇺🇸 Raw WebGL — An overview on how to write a WebGL application. Learn what key data structures and types are needed to draw in WebGL
• 🇷🇺 Применяем мозаику Вороного, пикселизацию и геометрические маски в шейдерах для украшения сайта
• 🇷🇺/D Быстрая генерализация маркеров на WebGL-карте/defront
• 🇺🇸 WebGL guide

WebGL2

• 🇺🇸 WebGL2 Fundamentals

Библиотеки для WebGL

• 🇺🇸 [Your WebGL aiders](Your WebGL aiders)
• 🇺🇸 ogl
• 🇺🇸 Post Processing
• 🇺🇸 three.js

Three.js

• 🇺🇸 JavaScript in 3D: an Introduction to Three.js
• 🇷🇺 Трехмерные презентации товаров на Three.js для самых маленьких
• 🇷🇺 Продвинутый Three.js: шейдерные материалы и постобработка
• 🇺🇸 How to Learn Three.js for Game Development
• 🇷🇺 Рендер в текстуру с использованием Three.js

Демо WebGL

• 🇺🇸 Animated Heat Distortion Effects with WebGL

UserAgent и Client Hints

• 🇺🇸 Detect mobile browsers without user agent string parsing: Client Hints

PDF и браузер

• 🇺🇸 How To Create A PDF From Your Web Application
• 🇺🇸 pdfmake — Client/server side PDF printing in pure JavaScript

Также см. React -> Библиотеки -> PDF

WebAssembly (WASM)

• 🇷🇺/🇺🇸 Начало работы с WebAssembly, используя только 14 строк на JavaScript перевод/оригинал
• 🇷🇺 Как мы внедряли WebAssembly в Яндекс.Картах и почему оставили JavaScript
• 🇺🇸 WebAssembly Studio
• 🇷🇺/🇺🇸 Как мы при помощи WebAssembly в 20 раз веб-приложение ускорили перевод/оригинал
• 🇺🇸 WebAssembly: How and why
• 🇺🇸 Hands-on WebAssembly: Try the basics
• 🇺🇸 Get Started Using WebAssembly (wasm)

AssemblyScript (компиляция из TypeScript-like подобного языка)

• 🇺🇸 AssemblyScript — A language made for WebAssembly
• 🇷🇺/🇺🇸 Первое знакомство с AssemblyScript перевод/оригинал
• 🇺🇸 Adding a WebAssembly component to a React App

Emscripten (компиляция из C или C++)

• 🇺🇸 Emscripten — toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.

Web Components (веб-компоненты)

• 🇺🇸 Web Components bookmarks
• 🇺🇸 Web Components and the Accessibility Object model (AOM)
• 🇺🇸 Web Components will replace your frontend framework
• 🇷🇺 Веб-компоненты в реальном мире часть 1, часть 2

Shadow DOM

Declarative Shadow DOM

• 🇺🇸 Declarative Shadow DOM

Устройство браузеров

• 🇷🇺/🇺🇸 Устройство современного веб-браузера Chrome – перевод часть 1, часть 2, часть 3, часть 4/оригинал часть 1, часть 2, часть 3, часть 4
• 🇺🇸 JavaScript Engines: An Overview

well-known URL

• 🇺🇸 Help users change passwords easily by adding a well-known URL for changing passwords