A rather geeky/technical weblog, est. 2001, by Bramus
The collection precisely uses a 7:1 color contrast ratio, a contrast level that makes a visual most accessible to people with disability. We use an international vision enhancement method by W3C organization, which makes a content or object visible at Level AAA standard (a highest level of visibility). Must say I find them visually quite …
When embedding a GitHub Gist using a script tag, its contents gets injected into your page’s DOM. As the injected wrapper node has a .gist class, it’s perfectly possible to customize the appearance on your own site. Will Boyd walks us through it. Will also created a repository with several pre-built themes. Simply add one …
Very cool project by Jo Francetti in which she created a live captioning service. She uses a webpage on a phone to capture her speech — using getUserMedia() — which she then sends over to Azure Cognitive Services’ “Speech to Text” Service to get back the text. The text eventually ends up on the flexible …
Continue reading “Live Caption yourself using Azure Cognitive Services and Ably Realtime”
Few tips by Jake Archibald — as presented at #ChromeDevSummit — on how you can use some of the new and upcoming web features to improve the performance of your page. Covered are the aforementioned content-visibility, Font metric override descriptors, the Back/Forward Cache, Portals, and Preloading
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”
css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles
Last night — inspired by the Paint Worklet demos on Houdini.how — I decided to give Houdini a spin myself and created my own Paint Worklet. The result is css-houdini-circles which draws a bunch of random circles on the background. As a user you can configure the number of circles, the size range, the opacity …
In this video from #ChromeDevSummit 2020, Una walks us through Houdini and the aforementioned houdini.how CSS Houdini is an umbrella term that describes a series of low-level browser APIs and worklets which enable developers to hook into the browser’s rendering engine and extend the styling capabilities of today. Learn about the various Houdini API’s, as …
During #ChromDevSummit, Houdini.how got announced: Houdini.how is a library and reference for Houdini worklets and resources. It provides everything you need to know about CSS Houdini: browser support, an overview of its various APIs, usage information, additional resources, and live paint worklet samples. Each sample on Houdini.how is backed by the CSS Paint API, meaning …
Continue reading “Supercharging your CSS with Houdini Paint Worklets”
Will Boyd: CSS custom properties can hold all sorts of things. Some of these things were not obvious to me, which is why I decided to write this. In short: they can contain just about everything. It’s only until CSS Custom Properties are used in a certain context as a CSS Variable — using var() …
Continue reading “What values can you put in a CSS Custom Property?”
