I see CSS examples like this, and just want to cry that I can barely make a UI that works. I know CSS is powerful, yet it is absolutely mind numbing in getting consistent results. Anything I make looks like it was designed by a developer. The only good thing is that I know this to be the case, and I'm constantly on the look out for ways to improve.
There’s a stage of investment in some specific skill mindset that results in being able to produce things that seem to be absurd or impossible or “I could never do that”.
There aren’t many real-life opportunities to productively exercise that degree of skill in obvious ways; if you cut down a tree perfectly, few will truly notice how perfect the stump is, even if they may appreciate the result unthinkingly.
So crafting something maximum-insanity like this is a way to exercise all those hard-earned muscles of some random skills, in coordination, for the pure joy of being able to produce a pointless but awesome result.
It isn’t so much about “a thousand hours” as it is about “learning how things work at the deepest level”, and sometimes to do that you have to learn something unrelated and cross-apply the skills.
If you want to learn to paint-by-stylesheet, pick up a children’s paint by numbers coloring book and color it in however you like and then try to work out what the CSS for it would be. Whether you succeed or not, you’ll be forced to rethink CSS at a basic level, which will expand your mindset and eventually your skill set.
Or study how GL shaders work, and try to comprehend what’s going on when people build cool GL demos like the fish benchmark. You may not ever end up using that GL knowledge, but you’ll be more prepared for SVG and canvas elements, which cross-applies to CSS gradients and layout skills.
Or study how DOOM level maps (“wad files”) are built. There are stellar writeups of how ultra-basic technology and ridiculous hacks (“no bridges”) were used to make 3D perform brilliant things with the tiniest of CPU resources. There is zero practical value in this on the surface, but it carries some valuable lessons in how to make a great UI with careful selection of tradeoffs, and you’ll probably end up being better at time-design compromises as a result.
One thousand of those later, you will be able to paint the Mona Lisa in CSS, and it’ll be enjoyable as an evening project over several weeks or months :)
Cut down a tree perfectly, and you maximise the yield of lumber you get from it. I think that is somewhat obvious. But I'm being pedantic, you make a good point.
I totally get the concept of spending countless hours on something that "sane" people would never attempt. I have plenty of electronic projects in my workspace at various levels of completion. They were all started from my looking at off-the-shelf options that were either too expensive for my budget or only providing ~80% of the features I needed. The most dangerous thing for me is someone else to tell me I "can't" anything. I'll run my fingers to the bone just to prove I "could" (to various degrees of success).
TLDR: it's the learning along the way that matters more than the result in and of itself.
UI is very different from position:absolute on a thousand divs. That's why these examples can serve as only art. They are not representative of CSS' applicability to building UIs (it still sucks).
This is next level. If you expand the frame you can see how the reflection and water are created with simple shapes, but the houses on the right are extremely detailed. Some of this is basically pixel art... I would love knowing how long this took, or if any tools assisted in the creation.
Always strange to see things close to home on HN. I spent New Years in Southwold, a lovely place to visit on the Suffolk coast with the fantastic Adnams Brewery right in the heart of the town.
For those who don't know, these custom arcade machines were made by Tim Hunkin, a mechanical genius who co-created the show "A Secret Life of Machines" in the 80s and 90s. Most of them up are on Youtube, go check them out: [0].
Also, I absolutely love that website, as well as Tim Hunkin's personal website[1]. It has a charm about it that few websites have these days.
For a fun browser painting performance test try resizing the pane with the illustration. It's nice to see WebRender doing quite a bit better on it compared to other browsers.
Fascinating. And very impressive the way the sun color is parameterized so you can do, e.g., `$sun1: aquamarine;` in the CSS and still get something that makes sense and looks quite psychedelic.
The groin is the sea defence you can see in the foreground. It stops long shore drift (but there is some debate about if they just shift the problem elsewhere)
Still Life https://codepen.io/ivorjetski/pen/xMJoYO
Portrait https://codepen.io/ivorjetski/pen/dBYWWZ