A rather geeky/technical weblog, est. 2001, by Bramus
The GitHub homepage features a very nice rotating 3D globe, augmented with realtime data shooting around. Here’s how they built it: At the most fundamental level, the globe runs in a WebGL context powered by three.js. We feed it data of recent pull requests that have been created and merged around the world through a …
Thomas Steiner: WebHID allows websites to access devices that use the human interface devices (HID) protocol via JavaScript. Here is a little Christmas present 🎄 to the community to celebrate the API approval: releasing Joy-Con WebHID, a WebHID “driver” for Nintendo Joy-Con controllers so you can use them in the browser. If you have Joy-Cons, …
Continue reading “Using Nintendo Switch Joy-Con Controllers on the Web with the WebHID API”
Lea Verou: A pattern that has come up a few times in my code is the following: an object has a property which defaults to an expression based on its other properties unless it’s explicitly set, in which case it functions like a normal property. Essentially, the expression functions as a default value. Think of …
Steve Fulghum takes a look at how we can use Houdini’s Paint API to paint a complex shadow. See the Pen Simulating Drop Shadows with the CSS Paint API by Steve Fulghum (@steve_fulghum) on CodePen. If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial. Simulating …
Continue reading “Simulating Drop Shadows with the CSS Paint API”
“Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it’s worth having a look already as they’re really exciting.
Nice demo by Michelle Barker, in which she recreates snowflakes based on those folded paper cutouts we all made as a child. ⚠️ Warning: quite a heavy demo. Uses both a clip-path and mask-image to generate the cutout shapes. And oh, everything’s defined using Custom Properties. Love the attention to detail on this one too: …
See the Pen Cooltipz.css – Cool tooltips made from pure CSS by Bramus (@bramus) on CodePen. I especially like the fact that these are customisable using CSS Custom Properties. Here’s a few of them: :root { –cooltipz-bg-color: #fff; –cooltipz-text-color: #333; –cooltipz-border-radius: 5rem; } Installation per NPM: npm install cooltipz-css Cooltipz.css →
Anthony Ricaud, writing for the Web Performance Calendar, on the extra load that JavaScript can put on your site, and how you can replace some things with basic HTML and CSS: Relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards. These …
Continue reading “HTML and CSS techniques to reduce your JavaScript”
Great research by Sara Soueidan: If you have a question with a binary Yes/No answer, is it better to use one checkbox or two radio buttons? As per usual: It Depends™. The consensus however seems to be that requiring an explicit “No” is the determining factor to avoid the simple checkbox. Over at CSS-Tricks Chris …
Continue reading ““Yes or No?” — One Checkbox vs Two Radio Buttons”
You can export the results as an SVG or as a set of CSS Custom Properties: :root { –sunset1:#332971; –sunset2:#5f3767; –sunset3:#ac5067; –sunset4:#e67369; –sunset5:#fb9c63; –sunset6:#febf57; –sunset7:#ffd043; } Parametric Color Mixer →