ohmyfetch is a better fetch API. Works on node, browser and workers. import { $fetch } from ‘ohmyfetch’ Import it and use it as you’d use regular fetch. On top of that, you can use some of the extra convenience methods and options — such as easy response parsing, JSON body, Auto Retry, … — …
Tag Archives: javascript
CSS Houdini Blobs
Tim Broddin — ubernerd and also my tech colleague at VRT Creative Lab — released a very nice Houdini Paint Worklet that draws some smooth blobs. .css-houdini-blobs { –num-blobs: 40; –seed: 4749; –colors: #71a7ee, #7940c1, #f0e891; –min-opacity: 0.1; –max-opacity: 0.5; background: paint(blobs); } Glad to see Tim used css-houdini-circles as a starting point to work …
ECMAScript Proposals Overview
Saad Quadri created a handy website that lists all ECMAScript Proposals. On one single page you can get a quick glimpse of all proposals and the current stage they are in. Great to see that the various stages of the TC39 Development Process themselves —something I always mention in my ever-evolving talk on ESNext— get …
Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline
Just before I left on holiday, the 2nd article I wrote for CSS-Tricks got published. In it, I take a look at the JavaScript side of the Scroll-Linked Animations specification. With WAAPI + ScrollTimeline, a typical “progressbar as you scroll” can be coded like this: const myScrollTimeline = new ScrollTimeline({ source: document.scrollingElement, orientation: 'block', scrollOffsets: …
Continue reading “Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline”
Yes, we use a Joy-Con to change slides. Here’s how… | HTTP 203
In this episode of HTTP 203 Jake and Surma go over the code that’s needed to use a Joy-Con (a Nintendo Switch Controller) on the web, which they also use for their own slide decks. As mentioned it’s not possible to get the orientation of the Joy-Con via (the current version of) the Gamepad API. …
Continue reading “Yes, we use a Joy-Con to change slides. Here’s how… | HTTP 203”
Tonic — A thin wrapper around Web Components
A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free. Basic component definition is really simple: import Tonic from "https://cdn.skypack.dev/@optoolco/tonic" class MyGreeting extends Tonic { render () { return this.html`<div>Hello, ${this.props.name ?? 'Stranger'}.</div>` } } Tonic.add(MyGreeting); Tonic will automatically convert the CamelCased class name to the proper custom element name. <my-greeting></my-greeting> …
Continue reading “Tonic — A thin wrapper around Web Components”
Alpha Paintlet
Dave Rupert created a little lovely Houdini Paint Worklet that allows you set a background color with an alpha on elements. The Worklet’s code is as simple as this: registerPaint(‘alpha’, class { static get inputProperties() { return [‘–bg-alpha’, ‘–bg-color’] } paint(ctx, size, props) { ctx.globalAlpha = props.get(‘–bg-alpha’); ctx.fillStyle = props.get(‘–bg-color’); ctx.fillRect(0, 0, size.width, size.height); } …
Natively Format JavaScript Dates and Times
Elijah Manor digs into Date’s toLocaleDateString() and toLocaleTimeString() methods to format Dates and Times in JavaScript, with respect to a passed locale. const date = new Date(); console.log(date.toLocaleDateString(‘en-US’)); // 7/19/2020 const dateOptions = { weekday: ‘long’, year: ‘numeric’, month: ‘long’, day: ‘numeric’, }; console.log(date.toLocaleDateString(‘en-US’, dateOptions)); // Sunday, July 19, 2020 console.log( date.toLocaleDateString(‘fr-FR’, { month: ‘long’, …
Continue reading “Natively Format JavaScript Dates and Times”
Tachometer – Statistically rigorous benchmark runner for the web
From the Polymer team: Tachometer is a tool for running benchmarks in web browsers. It uses repeated sampling and statistics to reliably identify even tiny differences in runtime. To compare two files, run it like so: npx tachometer variant1.html variant2.html Tachometer will open Chrome and load each HTML file, measuring the time between bench.start() and …
Continue reading “Tachometer – Statistically rigorous benchmark runner for the web”
ESNext: Import Assertions (JSON Modules, CSS Modules, …)
Did you know you can import JSON and CSS files just like you import JavaScript Modules? Thanks to Import Assertions, it’s as easy as this: Building upon "Import Assertions" we recently saw JSON Modules land in V8/Chromium 91: “`import json from './foo.json' assert { type: 'json' };“` In Chromium 93 the same thing for CSS …
Continue reading “ESNext: Import Assertions (JSON Modules, CSS Modules, …)”