Pure CSS Landscape – An Evening in Southwold(codepen.io)
codepen.io
Pure CSS Landscape – An Evening in Southwold
https://codepen.io/ivorjetski/pen/xxGYWQG
39 comments
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...
https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...
This is amazing
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.
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.
This is incredible. But can you explain the “groin” tag?
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)
If you delete them you'll see which bits disappear respectively from the image - in this case: https://en.wikipedia.org/wiki/Groyne
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.
I'll second other people that I would love to see more of the design and planning that went into this.
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
Still Life https://codepen.io/ivorjetski/pen/xMJoYO
Portrait https://codepen.io/ivorjetski/pen/dBYWWZ
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.
100% would love to know how this is built and know more about the planning.
The artist's account on Twitter:
https://twitter.com/ivorjetski/status/1238063321015889921
I too am eager to read a blog post on the technique.
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
https://www.youtube.com/watch?v=rUCVBNNyjC4
this is really taking the Befunge way
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 :)
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.
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...
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.
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).
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.
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/
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!
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 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.
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 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...
Edit: Scroll down the article to see one of her wonderful illustrations using MS Word
[0] - https://economictimes.indiatimes.com/magazines/panache/women...
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.