A rather geeky/technical weblog, est. 2001, by Bramus
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”
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"“
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”
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.”
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”
Speaking of Push Notifications in the previous post, how about this Dark Pattern right here which I encountered recently: Press Allow to verify that you’re not a robot Pretty sure many users walk blindly into that trap!? 😞
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 …
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 …
The Web Perception Toolkit is an open-source library that provides the tools for you to add visual search to your website. The toolkit works by taking a stream from the device camera, and passing it through a set of detectors. Any markers or targets that are identified by the detectors are mapped to structured data …
Continue reading “Visually Search using your Phone’s Camera with The Web Perception Toolkit”
Jeremy recently implemented “Dark Mode” on his site. Tanks to CSS Custom Properties the implementation is pretty straightforward (also see my writeup here). But of course, Jeremy added some extra details that make the difference: In Dark Mode images are toned down to make ‘m blend in better, as detailed by Melanie Richards: @media (prefers-color-scheme: …