skip to main content
Hello.

I made a homepage.

I'm old enough to call this thing a "home page".

Who am I? Off to the About section.

Super Cars Online They might make the fastest cars in the world, but do they have the fastest websites in the world?
Understanding website loading times The first thing to do to optimize a website's loading time is to understand what part of the loading is slow.
What is 'a fast website'? What does fast mean when it comes to putting something online? Is it how long a page takes to down? To render? To be interactive?
Split View Example An example of an accessible split view image comparison component.
Modern Image Formats Most websites have images. And, quite honestly, they're usually terrible. Web developers are stuck in the past using unoptimized JPG and PNG formats that take up *way* too much bandwidth. It needs to stop.
Mario Blocks in CSS Taking a style from a video game and using it on the web is a lot of fun, not to mention dubious in the light of copyright. Still, let's do it anyway.
CSS Gradients CSS is amazing in 2020, and we can use it to do some pretty whizzy effects on pages. One of the best features are the gradients - linear-gradient, radial-gradient and conic-gradient. Here's a few ways to do some interesting things with them.
CSS Grid Shuffler A CSS grid that slowly shuffles over time to change the placement of elements.
Whacky Egg A sequencer app that's made using React and a fab vapourwave asthetic. With better samples it might even be possible to make something that sounds good.
Voronoi GLSL Shader A GLSL WebGL shader using voronoi cells
Understanding Waves Figuring out how to draw SDF waves in GLSL
Super Mario Div A div with Super Mario World style grass on top.
Sunburst GLSL Sunburst effect in GLSL
Spinning Squares 2 Animated squares with staggered rotation using SDF squares and IDs in GLSL
2D Perlin Noise Shader Perlin noise with clamping in GLSL
Shader Doodle Div Mask A sequencer app that's made using React and a fab vapourwave asthetic. With better samples it might even be possible to make something that sounds good.
Rainbow Rotator 2 A bright half-tone checkerboard moving in a circular path
Rainbow Caterpillar Scroller A page background effect that 'walks' like a caterpillar.
Layering CSS Conic Gradients An effect make from layering conic gradients and animation
Cut Up Youtube Video A 'shattered' YouTube video made using node cloning and clip-paths.
Crack the Safe A sequencer app that's made using React and a fab vapourwave asthetic. With better samples it might even be possible to make something that sounds good.
3D Carousel in CSS A sequencer app that's made using React and a fab vapourwave asthetic. With better samples it might even be possible to make something that sounds good.
YT1210 A record deck in React. It loads a playlist of YouTube videos, and plays them with record crackle over the top.
Typo Drop a font in one of the panels in the bottom half of the screen, then drop a second font in the other panel, and use the slider in the top panel to compare how they look. If you're using a variable font that's great - any variables will get sliders to play with values.
Timemachine A little nod to the amazing CSS Zen Garden, Time Machine is a webpage that's styled to look like different popular designs throughout the past 20 years.
Github.

A lot of the code I write is available to see on Github.

Browse my repos

Twitter.

I tweet a bit on Twitter.

@onion2k

Hacker News

I post on Hacker News more than I really ought to. Last time I updated this website I had about 24.8 k karma.