leanrada.com notes
Check out the following CSS animations (touch to play): these are CSS-based graphics and animations, you probably need to visit the website to see If you wanted to implement complex procedural animations (like physics) on the web, you’d probably go for JS-based requestAnimationFrame update-loop and animate each frame. But everyone knows that CSS animations are much smoother than janky frame-based…
I created a new visualisation for my homepage rotation. Here’s a demo: It’s just a basic flow field simulation with particles tracing their paths along the space. I used the p5.js framework. It reacts to mouse movements! I did a few optimisations to make it smoother, but in the end I had to lower the framerate and tried to make the low frame rate look intentional. Optimisation was important…
For RSS readers: This article contains interactive content available on the original post on leanrada.com . You may have heard of the legendary naturalSort in JavaScript. /* * Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license * Author: Jim Palmer (based on chunking idea from Dave Koelle) */ function naturalSort (a, b) { var re =…
For RSS readers: This article contains interactive content available on the original post on leanrada.com . Implemented a Japanese input method in my keyboard firmware (based on QMK ). It’s used to write in katakana and hiragana (syllable-based writing systems for Japanese) using Roman / Latin letters on my keyboard. How kana works Hiragana and katakana (collectively kana ) are syllabaries,…
I wrote automated tests to keep track of my site’s URLs and prevent links from breaking. When I reorganised my site, I changed a lot of URLs and broke some inbound links. Now that more and more sites have started linking to my site, I don’t want to inadvertently break links again. Cool URIs don't change Tim Berners-Lee (1998) This post is NOT about how to implement ‘cool URLs’ . Too many ways to…
For RSS readers: This article contains interactive content available on the original post on leanrada.com . I made an input method to write Baybayin, a syllable-based writing system, using Roman letters on a hardware keyboard. Banner photo lifted from a Reddit post showing Baybayin keycaps. This post is about a real Baybayin keyboard though. The writing system Baybayin is an ancient writing system…
This website is editable! If you add ?edit to any URL on this site, it activates edit mode . In this mode, you can edit text and apply basic formatting to any element. Of course, you won’t be able to save changes without having write access to my files, but I can. Using the Web File System API , it can update my local copy of the website’s source code. In short, I can edit my site via my site. In…
For RSS readers: This article contains interactive content available on the original post on leanrada.com . This post is about how I made the GitHub heatmap widget on my site. Here’s the raw, live WebComponent <gh-contribs> by the way: Interactive content: Visit the post to interact with this content. Alternative name: Gh Contribs Scraping the data First, I had to scrape the heatmap data. I don’t…
I made Lima Gang , a map-based visualization, over a weekend using ‘vibecoding’ . Lima what? lima means five in several languages particularly in island nations in Southeast Asia and the Pacific. These are part of the Austronesian language family that spans several seas from Madagascar to Indonesia, to Taiwan, to Hawaii. Extent of Austronesian peoples. They must’ve been good with boats. Source:…
I started making my own RSS reader webapp ( a what reader? ). It can be accessed at /tools/rss/ . Currently it’s hardcoded to just load my own site feed leanrada.com/rss.xml and that’s totally fine. I made this primarily to test how my own posts get rendered in ‘reader mode’ . Reader mode You see, I like to incorporate interactive elements in my posts. However, custom elements and JS are scrubbed…
When developing my website, I’m using a simple client-side script to automatically reload the page whenever I make a change to the source files. Since it’s not coupled to any particular backend, I could continue using python3 -m http.server -d ./site/ or whatever local web server I wanted and it would still work. I could clone this repo on a new machine and get going with only preinstalled…
A year ago, I stood by the statement that AI Art is not Generative Art , arguing that the term ‘generative art’ is an art movement in itself that is separate from AI art. Safe to say, it has been a losing battle. Even the converse, “generative art is not necessarily AI art” , would be met by confusion from most people. ‘Generative’ has been equated to AI. Fidenza, a generative artwork system, by…
Here’s a CSS technique that produces blurry image placeholders (LQIPs) without cluttering up your markup — Only a single custom property needed! <img src="…" style="--lqip:192900"> The custom property above gives you this image: Try changing the property’s value (WARNING: FLASHING) Granted, it’s a very blurry placeholder especially in contrast to other leading solutions. But the point is that it’s…
For quick and dirty rendering of simple dynamic content, you may not need the complexity of a templating language like Handlebars or a PHP backend. Let’s use the example phrase, “Come on, it’s <currentYear> ” . It should result in “Come on, it’s 2025 ” when rendered today. You can write this directly in HTML— without IDs, classes, or querySelectors in your JS! Thanks to the document.currentScript…
I rewrote this website in vanilla HTML/CSS/JS. Here’s the story. But why? Over the years, I’ve used a bunch of libraries & frameworks to build this website , before finally making my own static site generator that I called compose-html . As the name suggests, it composes HTML files together, very much like Astro . compose-html’s README I like systems that have a small set of tight abstractions…
For RSS readers: This article contains interactive content available on the original post on leanrada.com . Check out this demo first (Click it!): Heart Yes, it’s the Twitter heart button. This heart animation was done using an old technique called sprite sheets 🡵 . Interactive content: Visit the website to play with interactive content! Alternative text: spinning clover Interactive content:…
tl;dr: use place-content: center on a grid container. .container { display : grid ; place-content : center ; } Here’s how that looks like: div child That’s it. Two CSS rules. Yes, four years late according to caniuse . But this is apparently still not well-known today. Based on recent developments 🡵 , looks like we just need a few more years before we can finally get rid of the extra display rule…
Last May, Apple announced a new feature called Vehicle Motion Cues for their iOS devices. It’s an overlay that can help reduce motion sickness while riding a vehicle. I have really bad motion sickness, and riding cars, buses, and trains makes me nauseous. This feature would have been a nice relief for me, but as it stands, I use Android. Instead of buying a Malus fruit device, I took the matter…
For RSS readers: This article contains interactive content available on the original post on leanrada.com . Before anything, let me present you with a set of controls with no context. Press me Press me Stop using ease-out, or ease-in-out, or whatever-out, in every UI animation! There is a lot of propaganda on the internet against ease-in, saying that it's “unnatural”, “unusual”, or that it's “of…
For RSS readers: This article contains interactive content available on the original post on leanrada.com . Here’s a quick halftone effect (i.e. a retro printed look) using CSS with only one div at the minimum. First of all, here’s a live demo: Interactive content: Visit the website to play with interactive content! Alternative text: CSS halftone demo Toggle effect Toggle the filter class using…