Tag: #web

2024-04-24

Including uncaught errors, unhandled promise rejections, image load failures, Content Security Policy violations, and console.error calls. 2024-03-14

Errors in JavaScript cause an ErrorEvent on window. Preventing the default action blocks console output. Resource errors follow the capture-bubble event model. 2024-03-13

Try setting the root font-size to calc(1rem + 0.25vw) instead of using media queries with fixed breakpoints. 2024-03-12

Estimating viewing distance from screen size to set optimal font-size, but other factors like user mobility, long-sightedness, and short-sightedness complicate the ideal font-size calculation. 2024-03-11

“Session replay” tools record user interactions by capturing DOM changes, external resources, and viewport state, using efficient techniques like the MutationObserver API. 2024-03-09

A neural network architecture that can output bounding boxes. It uses a fixed set of “anchor points” and predicts offsets and sizes for each anchor. 2021-02-16

Load the model, convert the input to a tensor, preprocess the tensor to match the model’s expected format, run inference with .predict(), and decode the prediction tensor. 2021-02-15

To replace a GIF with an HTML <video> element in 2021, use a long list of attributes disable unwanted browser behaviors. 2021-01-19

A demo of real-time microphone volume measurement using the Web Audio API’s AnalyserNode. 2021-01-18

A playground to explore the various widths and heights of a <video> element, as reported by different browser APIs, when displaying a webcam stream with dynamically adjustable constraints. 2020-10-23

The MediaStream Recording API converts a MediaStream to a Blob of compressed video and audio. A demo where you can record a 5-second clip. 2020-10-17

Babel is a JavaScript compiler that transforms JavaScript code. Here I use its API programmatically. 2020-10-16

A WebRTC-based group chat application that uses Ably’s publish-subscribe system for signaling. Clients connect directly via peer-to-peer data channels, with Ably facilitating the initial connection. 2020-10-13

A method for calculating a bounding circle around a head, using facial landmarks from BlazeFace. Plus a live demo that you can run on your own face. 2020-10-12

A method for calculating a bounding circle around a head, using facial landmarks from BlazeFace. Plus a live demo that you can run on your own face. 2020-10-11

Involves downloading the model manifest file and associated binary weight files, to avoid downloading large models every application launch. 2020-10-07

Creating a “floating head” effect using WebGL and the BodyPix machine learning model to segment the face from a webcam feed. 2020-10-06

UMD modules are a way to write JavaScript code that can be used in any module system (e.g. CommonJS, AMD, or as a global variable). 2020-10-04

“Simplified CommonJS wrapping” feature is a hacky attempt to support synchronous require calls by using regexes. It’s gross. 2020-10-03

ES modules are just concatenated source files, with some error checking and variable renaming. Live bindings are an illusion - they’re just ordinary variables at the top-level scope. 2020-09-28

Source maps map generated JavaScript to original source files, allowing debugging of the original code in the browser’s dev tools. 2020-09-26

JavaScript modules enable better dependency management and scoping. A guide for developers like me who still use <script> tags everywhere. 2020-09-25

A WebGL shader that uses BodyPix segmentation to set the alpha channel. 2020-09-24

Applying the BodyPix machine learning model to a video stream for real-time person segmentation, with separate render and segmentation loops to optimize performance. 2020-09-23

The CSS resize property allows any element to be resized, not just <textarea>! But there are some gotchas. 2020-09-22

A demo that uses the BlazeFace model from TensorFlow.js to detect faces in a webcam stream, and draws the detected landmarks on the video. 2020-09-21

A step-away background removal technique using WebGL, which compares both chrominance and luminance differences between the webcam feed and a captured background image to create a transparent mask. 2020-09-20

A WebGL fragment shader that implements the Sobel filter, a method for detecting edges in an image. A demo processes your webcam video stream. 2020-08-31

BodyPix is a TensorFlow model for person segmentation. A demo of BodyPix in the browser. 2020-08-16

WebGL alpha-transparency may appear wrong because of premultiplied alpha. Fix it by setting premultipliedAlpha: false when creating the WebGL context. 2020-08-12

A green screen implementation in the browser using WebGL and chroma key. Includes a live demo. 2020-08-11

An green screen implementation in the browser using WebGL and a chroma key shader. Includes a demo that replaces sufficiently green pixels with magenta. 2020-08-10

A green screen implementation in the browser using WebGL and chroma key. Includes a live demo. 2020-08-09

Using the MediaRecorder API to record a canvas element as a WebM video file, allowing the user to download the recorded video. 2020-03-13

I write an ArrayBuffer to a canvas by interpreting the buffer as pixel data and using ImageData to provide the dimensions. 2020-03-01

Glitch’s “Show in a new window” feature uses the window.open API to open a new window, and then manipulates the contents of that window by updating its location property when the source code is edited. 2020-01-01

CSS variables, also called custom properties, allow defining and using dynamic values in CSS. They cascade and inherit like other CSS properties, with the var() function used to reference them. 2019-12-21

CSS visited link styles are limited for security reasons, as they could reveal a user’s browsing history. Color can be changed, but getComputedStyle will lie about it. 2019-03-08

I demonstrate animating a cat walk cycle on an HTML canvas using a sprite sheet image and the drawImage method. 2018-12-29

Cookies are client-side storage that get sent with every HTTP request. A cookie is scoped to a domain suffix, a path prefix, and a time range. The API is old and weird. 2018-12-22

A WebGL clock face with moving hands that updates every second, using a vertex shader to convert polar coordinates to 3D positions. 2017-10-07

The web Notification API allows web apps to display system-level notifications, requiring user permission. It has two key parts: requesting permission and creating notifications. 2017-09-07

Authoritative DNS servers provide definitive responses for their domains, while recursive DNS servers consult other servers to serve responses, caching results to reduce load on authorities. 2017-08-20

WebRTC has many challenges - browser API inconsistencies, protocol ambiguities, infrastructure requirements, and lack of built-in “business logic”. Not as easy as it seemed at first. 2017-02-04

A C program that creates an HTTP server that responds with “Hello, world!” to every request. 2016-12-20

2016-08-10

2014-08-21

2012-04-08

2010-01-17