Pure CSS Landscape – An Evening in Southwold | Hacker News Reader

Pure CSS Landscape – An Evening in Southwold

codepen.io

219 pointstambourine_man39 comments

The artist describes this piece as "The final part to my pointless trilogy" and links to these works in the comments:

Still Life https://codepen.io/ivorjetski/pen/xMJoYO

Portrait https://codepen.io/ivorjetski/pen/dBYWWZ

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.

I know what you mean but you shouldn't forget that you can also find people painting the Mona Lisa in MS Paint on YouTube with stunning results.

Though it still remains a pretty impressive feat...

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).

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.

Perfection in lumberwork isn't just about yield: https://www.youtube.com/watch?v=9NRmYzLrvfM

Very entertaining! Seeing the position of the buildings, I was certain the video was going to end terribly.

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.

Whole moly, changing the sunset colour changes the whole thing. This is crazy.

100% would love to know how this is built and know more about the planning.

If you thought postscript was bad, welcome the world’s most terrible vector image format.

Please don't upset the NeWS fans on HN or we'll come and tweak your transformation matrix ;-)

The artist's account on Twitter:

https://twitter.com/ivorjetski/status/1238063321015889921

I too am eager to read a blog post on the technique.

He also posted a video of the work being created. Wondering what tools he used to make it.

https://www.youtube.com/watch?v=rUCVBNNyjC4

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.

Also don't forget the wonderful Under The Pier Show[1]

It's a set of weird and wonderful custom arcade machines such as the "Rent-a-dog" game and, my favourite, the "Small Hadron Collider".

[1] http://underthepier.com/

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.

[0] https://www.youtube.com/playlist?list=PLByTa5duIolYRtq45Cz_G...

[1] http://timhunkin.com/control/o_about_the_site.htm. Take a look at the "about the site" page!

This reminded me of a recent article where an old lady breathtakingly creates beautilful drawings[0] using 'MS Word'.

Edit: Scroll down the article to see one of her wonderful illustrations using MS Word

[0] - https://economictimes.indiatimes.com/magazines/panache/women...

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.

How was this made? Manually? Or somehow converted from a vector graphic? In any case, it's beautiful. I love the dots in the water.

I was wondering the same thing. I can't imagine the amount of trial and error that would go into making something like this manually.

The code is super clean, I'm pretty sure it was done manually.

Where do the custom HTML tags (sea,beach etc) come from?

I do not see any preprocessor in codepen.io settings.

I thought that in order to use something like https://html.spec.whatwg.org/multipage/custom-elements.html you'd need Javascript.

They are rendered as HTMLUnknownElement and just don’t have any behavior or style as default, you can still refer to the tags in your css

https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...

Holy heck, this is amazing.

I'll second other people that I would love to see more of the design and planning that went into this.

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.

Grey sun makes it B/W!

Instant vaporwave aesthetic:

$sun1: cyan;

$sun1: green; for an instant aurora.

This is incredible. But can you explain the “groin” tag?

https://en.wikipedia.org/wiki/Groyne

If you delete them you'll see which bits disappear respectively from the image - in this case: https://en.wikipedia.org/wiki/Groyne

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)

Zooming in on the image crashed my phone.

Rightfully so

This is absolutely crazy in a good way.

And if you let me paraphrase a bit:

Your developers were so preoccupied with whether or not they could, they didn’t stop to think if they should.

This is amazing

this is really taking the Befunge way

Reply on news.ycombinator.com