A rather geeky/technical weblog, est. 2001, by Bramus
As the name suggests, the Page Lifecycle API exposes the web page lifecycle hooks to JavaScript. However, it isn’t an entirely new concept. Page Visibility API existed for some time, revealing some of the page visibility events to JavaScript. However, if you happen to choose between these two, it’s worth mentioning some of the limitations …
One of the side-effects when drawing things with a Houdini Paint Worklet and relying on Math.random() in your code, is that your layout might be jumpy. Check out my CSS Houdini Paint Worklet that draws colorful circles for example: whenever you resize the available space or change one of its properties — or some of …
Continue reading “Creating random-but-stable effects with the CSS Paint API”
In The several ways to import React, Kent C. Dodds also covers a bit about JSX and “the JSX pragma”. Here’s a video of CSS Tricks’ Chris Coyier goofing around with it. JSX is not fancy. It essentially transforms angle brackets in JavaScript into function calls. That works great for React, but because we can …
With the release of React 17 we also had to change the way we import React: To clarify: ✅ import { useState } from 'react'✅ import * as React from 'react'🟡 import React from 'react' The third one is called "default import" and in the long term (maybe in 19 or 20) we will stop …
Handy website by Harry Roberts and Ryan Townsend to mimic slow loading CSS or JS files. Basic params to tweak are the type and delay ones. The resulting HTTP Status Code (status) and max-age can also be tweaked. Slowfil.es →
I was delighted to read that CodePen now has built-in support for Skypack. This is a huge step forward to working with packages on CodePen. Great addition to the product! But what exactly is Skypack? Well, it’s the successor to the aforementioned Pika CDN with some extra juice: Skypack not only serves packages that export …
Continue reading “Skypack — Load optimized npm packages with no install and no build tools”
Martin Kleppe has created tixy.land, “the most minimalist creative coding environment” as he calls it Control the size and color of a 16×16 dot matrix with a single JavaScript function. The input is limited to 32 characters – but no limits to your creativity! I especially like how the site starts off with some simple …
Handy tool by Josh W. Comeau to look up JavaScript operators. JavaScript Operator Lookup → 🤩 If you’ve been following bram.us for a while you might already know that my favourite operators are the optional chaining operator (.?) and the null coalescing operator (??). Definitely check them out as they will change the way you …
Continue reading “Operator Lookup — Search JavaScript Operators”
When double clicking a form’s submit button your form will be sent twice. With a tad of JavaScript this can be prevented from happening.
Have a static site but looking to add backendy stuff — such as subscribing to a newsletter — to it? Geoffrey Dhuyvetters from madewithlove walks us trough setting up a serverless function with Vercel (formerly known as Zeit): In this article I’ll walk you through the steps to create serverless functions with Vercel. These functions …