Tag Archives: web

Webbed Briefs – Brief videos about web technologies and how to make the most of them.

Heydon is back with a new project named “Webbed Briefs”: WEBBED BRIEFS are brief videos about the web, its technologies, and how to make the most of them. They’re packed with information, fun times™, and actual goats. Yes, it’s a vlog, but it isn’t on Youtube. Unthinkable! The first video is entitled “What Is ARIA …

Continue reading “Webbed Briefs – Brief videos about web technologies and how to make the most of them.”

How to embed AV1 Image File Format (AVIF) images

New in Chromium 85 is support for the AV1 Image File Format (AVIF), which is pretty impressive: AVIF offers significant file size reduction for images compared with JPEG or WebP; ~50% savings compared to JPEG, and ~20% savings compared to WebP. 🦊 Using Firefox and can’t wait to use AVIF images? Set the image.avif.enabled flag …

Continue reading “How to embed AV1 Image File Format (AVIF) images”

Semantically Identify a Heading Subtitle with ARIA role="doc-subtitle"

Over at CSS-Tricks, Chris takes a look at how to mark up a “Double Heading”, a common pattern where you have a big heading with a little one preceding/succeeding it (as pictured above). After going over a few options, the answer comes from a tweet by Steve Faulkner: use role="doc-subtitle" for the secondary heading. As …

Continue reading “Semantically Identify a Heading Subtitle with ARIA role="doc-subtitle"“

Realtime Face and Hand Tracking in the browser with TensorFlow

The MediaPipe and Tensorflow.js teams have released facemesh and handpose: The facemesh package infers approximate 3D facial surface geometry from an image or video stream, requiring only a single camera input without the need for a depth sensor. This geometry locates features such as the eyes, nose, and lips within the face, including details such …

Continue reading “Realtime Face and Hand Tracking in the browser with TensorFlow”

Craft.js – A React framework for building drag-n-drop page editors.

Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task. Craft.js solves this problem by modularising the building blocks of a page editor. It provides a drag-n-drop system and handles the way user components should be rendered, updated and moved – among other …

Continue reading “Craft.js – A React framework for building drag-n-drop page editors.”

Performance Budgets for those who don’t know where to start

Harry Roberts on how to set a Performance Budgets if you really don’t have a clue where to start: Time and again I hear clients discussing their performance budgets in terms of goals: “We’re aiming toward a budget of 250KB uncompressed JavaScript; we hope to be interactive in 2.75s”. While it’s absolutely vital that these …

Continue reading “Performance Budgets for those who don’t know where to start”

Making a Better Custom Select Element

24ways – the advent calendar for web geeks – is back! First post is “Making a Better Custom Select Element” in which Julie Grundy tries to create an accessible Custom Select Element: Sometimes, I can’t recommend the select input. We want a way for someone to choose an item from a list of options, but …

Continue reading “Making a Better Custom Select Element”

JSONbox – Free HTTP based JSON Storage

jsonbox.io lets you store, read & modify JSON data over HTTP APIs for free. Copy the URL below and start sending HTTP requests to play around with your data store. Oh, this will come in handy for Workshops and quick Proof Of Concepts: curl -X POST ‘https://jsonbox.io/demobox_6d9e326c183fde7b’ \ -H ‘content-type: application/json’ \ -d ‘{“name”: “Jon …

Continue reading “JSONbox – Free HTTP based JSON Storage”