Writing

Blog

Writing on system design, React, web performance, and the craft of building software.

Part 1•4 min read•Most frontend developers use maybe 10% of the browser's API surface. Here is what the other 90% can actually do.

Api Maturity Levels

Part 1•4 min read•Not all browser APIs work everywhere. Here is how to read the maturity tiers, why Chrome on iOS is not Chrome, and how to ship capability-dependent features safely.

Origin Trials

Part 2•5 min read•Origin trials let you ship experimental browser APIs to real users without them doing anything. Here is how they work, what happens when they expire, and whether you should use them in production.

Red Apis And Feature Detection

Part 3•5 min read•Some browser capabilities will never exist on the open web -- not because they are too new, but because they would be too dangerous. Here is how the standards pipeline works and how to detect what is actually available.

Capability Resources

Part 4•5 min read•Six tools that answer every browser compatibility question -- from how to use an API, to which browser version ships it, to whether it is safe to rely on in production.

The Apis Not Covered Here

Part 5•6 min read•The web platform has hundreds of JavaScript APIs. This series covers 36 of them -- here is what the rest of the landscape looks like and where to go deeper.

The Permission Model

Part 1•4 min read•The browser permission model is asymmetric: getting access is a one-time dialog, losing it is permanent. Here is how grants work, why denial is sticky, and how to handle it gracefully.

Permissions Policy

Part 2•4 min read•The Permissions-Policy HTTP header lets you disable or restrict capabilities on your page and in any iframes you embed. Here is the syntax, the iframe allow attribute, and the Permissions API's real limitations.

Sensor Types

Part 1•5 min read•Your phone has been running an accelerometer, gyroscope, and magnetometer since before smartphones had app stores. Here is what each sensor measures and what the browser can read from it.

Sensor Apis Dom Vs Generic

Part 2•5 min read•The browser has two sensor APIs from different vendors. The old DOM events work on iOS. The new Generic Sensor API does not. Here is how both work and when to use each.

Ios Sensor Permission

Part 3•5 min read•iOS 13 silently added a sensor permission dialog that broke thousands of web experiences. Here is how DeviceMotionEvent.requestPermission works and the privacy reason it exists.

How Geolocation Works

Part 4•5 min read•Geolocation in the browser almost never uses GPS. Here is how Wi-Fi scanning works, why it's faster and cheaper than satellites, and what each provider actually tells the browser.

Geolocation Api

Part 5•5 min read•The Geolocation API was standardized in 2008, uses callbacks instead of promises, and gives you exactly five properties from each location fix. Here is everything the API does.

Ios Imprecise Location

Part 6•4 min read•iOS 14 lets users share approximate location instead of precise. For native apps, it's per app. For Safari, one choice affects every website. Here is what that means and how to detect it.

Screen Orientation

Part 7•3 min read•Reading screen orientation works in every browser. Locking it -- forcing portrait or landscape -- is a different tier. Here is the API, what values it returns, and the one orientation to never use.

Touch And Pointer Events

Part 8•4 min read•Touch events were Apple's invention and ship as an array. Pointer events are the W3C response and fire per finger. Both live on every modern phone. Here is when to use which.

Virtual Keyboard Api

Part 9•3 min read•The virtual keyboard has always been a blind spot for web layout. An API that tells you where it sits on screen -- and CSS environment variables to respond to it -- exists in Chrome. Apple is not there yet.

Gamepad Api

Part 10•4 min read•The Gamepad API is green tier and works with any USB or Bluetooth controller. But it does not push events -- you poll button state 60 times per second. Here is the loop pattern and why you need previous-state tracking.

Webhid Api

Part 11•4 min read•The Gamepad API gives you buttons and axes. WebHID gives you everything else -- LED color, rumble, accelerometer inside the controller, Stream Deck keys. It is also low-level, Chromium-only, and requires user permission.

Speech Recognition

Part 12•4 min read•The Web Speech API lets a browser transcribe spoken words into text with no library and no API key. Here is the webkit prefix story, the result event, and why continuous mode needs a restart pattern.

Speech Synthesis

Part 13•3 min read•SpeechSynthesisUtterance turns a string into spoken audio in one call. No permission, no cloud, no library -- but voices come from the OS, which means they vary by device and browser.

Shape Detection Api

Part 14•4 min read•BarcodeDetector, FaceDetector, and TextDetector use OS-native vision frameworks to analyze images. BarcodeDetector ships by default in Chrome. The other two are experimental. No JavaScript library needed.

Mediadevices Api

Part 15•3 min read•navigator.mediaDevices.getUserMedia() returns a live MediaStream from the camera or microphone. Feed it to a video element, pull frames to canvas, or pipe it anywhere. Green tier, HTTPS-only, permission-required.

Webxr And Ar

Part 16•3 min read•Augmented reality on the web has three paths: native WebXR (Chrome/Android), AR Quick Look (iOS/Safari), and the model-viewer web component that wraps both. None of them works everywhere -- but model-viewer comes closest.

Screen Wake Lock

Part 17•3 min read•navigator.wakeLock.request('screen') prevents the display from sleeping. One async call, a release event for when the OS revokes it, and a good-citizen pattern for re-requesting. Now green tier -- Safari finally shipped it.

Web Bluetooth

Part 1•6 min read•Web Bluetooth reaches past the device to BLE hardware nearby. The API itself is 30 lines. The hard part is the GATT protocol -- finding service and characteristic UUIDs that are mostly manufacturer-defined with no central registry.

Web Audio

Part 2•5 min read•The Web Audio API is not for playing files -- it is a signal processing graph. Sources feed into effects, effects chain into each other, and the result goes to your speakers. AudioContext, AudioNode, and AudioWorklet are the three concepts that unlock the whole thing.

Web Midi

Part 3•4 min read•MIDI is 40 years old and still ships in every browser except Safari. The Web MIDI API gives JavaScript direct access to synthesizers, keyboards, and drum machines -- and understanding the 3-byte message format is the unlock.

Web Serial

Part 4•4 min read•Web Serial gives a browser tab direct read/write access to any serial device -- Arduino, CNC machine, lab instrument. It is desktop-only, Chromium-only, and everything is raw bytes over a Streams-based API.

Web Usb

Part 5•3 min read•Web USB targets device vendors, not web developers. When a USB device has no OS driver, Web USB lets a website communicate with it directly -- updating firmware, flashing software, or running the device without any native software installed.

Web Nfc

Part 6•4 min read•Web NFC reads and writes NDEF tags using an NDEFReader. The serial number alone is enough to build location-aware unlocks and treasure hunts. Writing adds a URL or text payload to a physical tag. Chrome on Android only.

Vibration Api

Part 1•2 min read•The Vibration API is one function call. Pass a number for a single buzz, or an array alternating vibrate/pause durations for a pattern. Chrome on Android only -- iOS does not support it.

Battery Status

Part 2•3 min read•navigator.getBattery() returns a BatteryManager with level, charging state, and time estimates, plus four events that fire when any of those change. Chrome and Android only -- not iOS, and Firefox removed it over fingerprinting concerns.

Idle Detection

Part 3•4 min read•IdleDetector reports whether the user has been inactive and whether the screen is locked -- using OS-level signals, not just tab focus. The threshold is minimum 60 seconds, and it requires explicit permission. Chromium only.

Pwa And Os Integration

Part 1•4 min read•A PWA is a web app that installs and behaves like a native app -- no app store, no download, no driver. Understanding installation is the foundation for every OS integration API in this chapter.

Window Management

Part 2•4 min read•PWAs get their own window -- and with it, the old 90s window APIs that tabbed browsers killed. The Multi-Screen Window Placement API and Windows Controls Overlay go further, letting PWAs span displays and render HTML in the title bar.

File Handling Protocol Handlers

Part 3•4 min read•File Handling lets your PWA register as the default opener for custom file types -- double-click a .recipe and your app launches with it. Protocol Handlers do the same for custom URL schemes like web+myapp://

Web Share

Part 4•4 min read•navigator.share() triggers the native OS share sheet with one call -- title, text, URL, and files. Web Share Target flips the direction: your PWA becomes a target in other apps' share sheets.

Contact Picker Fullscreen Payment

Part 5•5 min read•Three APIs that reach into different parts of the device. Contact Picker reads from the native address book. Fullscreen expands an element to fill the screen. Payment Request collects payment details natively without your code ever seeing a card number.

Installed Apps Badging Shortcuts

Part 6•5 min read•Three APIs that make a PWA feel native on the home screen. Get Installed Related Apps checks if your native app is already there. App Badging puts a number on the icon. App Shortcuts add right-click menu items.

Blog

Chapter 1: Introduction

Chapter 2: Api Maturity

Chapter 3: Permissions

Chapter 4: Sensors And Input

Chapter 5: External Devices

Chapter 6: Device State

Chapter 7: Os Integration

Chapter 1: Introduction

Chapter 2: Api Maturity

Chapter 3: Permissions

Chapter 4: Sensors And Input

Chapter 5: External Devices

Chapter 6: Device State

Chapter 7: Os Integration