If you check the pull requests tab there's also a showcase of why some people resist putting stuff on GitHub. Most of the pull requests are low-effort tickets like "update bart.css" with no further explanation and a bunch of random changes in the diff.
Those almost certainly come from people using GitHub's web editor - the default commit message is 'Update {filename}'. I despise it, I don't know why they encourage such useless commit messages, there should be no default message because there can be no useful default.
For projects that are "finished" and will not be updated, I think using the archive function could be helpful. Marking a project as archived removes the issues tab among other things and clearly communicates that the owner is not interested in continued development.
This is cool - CSS art is one of the first things I tried when learning to program. I wonder if we will ever see a CSS art exhibition at a gallery or something.
You're using the cert for octopushr.app... Unfortunately port 80 is also closed, so even the most recent wayback machine wasn't working. Here's a link from 2016 which goes into your methods, which honestly, are a bit on the sparse side (it doesn't detract at all from what you've done):
Both FF73 and Chrome, on mac, messes up for me. It's most noticeable on Comic-book-guy but many of the later ones are messed up to various degrees, mainly hair/whiskers, sometimes spurious lines/strokes outside the main image.
SVG would be a better fit. Hand written SVG is underrated. But maybe it would not be difficult enough to make them in SVG. Whenever you feel the CSS get a bit hacky, like backgrounds with round shapes, it can usually be solved in a few lines of SVG.
SVG also has classes and CSS, yes you can have CSS in SVG for style reusability and abstraction. You can also create SVG on the fly using JavaScript.
If everything I did had a practical purpose, I'd die from boredom without learning anything beforehand. Kudos to the poster for sharing this.
Also, if I was hiring a developer with decent CSS knowledge, and found this attached to their CV, it'll help me skip a ton of questions (and I'll be less bored during the interview).
Next step: ensure that the related Simpons characters' images are build using CSS cascade:)
Sidenote: I think we should put more energy in replying to the OP, rather than feeding trolls (I'm up for constructive criticism, but genuinely think that the parent comment doesn't add anything to the discussion).
>but genuinely think that the parent comment doesn't add anything to the discussion
I am so tired of having to use flawed tools to achieve a certain goal. Why can't there be a non flawed tool? Often it doesn't exist and then people start cursing. This HN submission is not like that. Proper tools like SVG exist and they make this work like this painless. This is an example of someone going out of his way to feel pain. I don't like pain and I don't want to encourage others to inflict "self harm" upon themselves just because it's cool.
Better tools exist. Someone was just trying to have fun, ffs.
Your approach to work/learning might not necessarily reflect the others'.
Picking a technical detail (bear in mind, almost everyone here knows about SVG, WebGL etc...) seems a bit ironic to me, as you mention "pain" and "self harm", whereas the reply by itself seems to lack empathy. Or, an understanding of context.
I like unconventional solutions and hacks as much as the next guy, but a good hack should be better than the conventional solution in at least some way (like simplicity or tweakability). If the hack is worse in every way - the CSS is both longer and harder to write than the equivalent SVG - it's not as interesting to me.
"It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat."
― Theodore Roosevelt
Would it be too inconvenient to first appreciate the art before barfing all over someone else's "birthday cake?"
Some art you need to know how hard it is to make in order to appreciate it.
Next time you are stuck with a CSS problem, you might think that if this guy can paint freaking Simpons in CSS why can't I get this simple curve to look like I want!? Then you solve the problem in SVG instead. And start to appreciate the art even more.
You can however cheat in CSS "art" by creating lots of div's with absolute positioning, where a SVG solution would be more elegant.
Quora is bad about this. I change my default background to a grey and I always notice it on their site because they have a white central element surrounded by grey.
Animated even and the code looks hand-drawn. I <3 it.
Fun fact: I worked at a nuclear engineering consultancy in the 90's. That's the not the fun fact. The hostnames of the computers were all Simpsons' character names.
I work at a place now that uses USS Starship names for projects.
Really brings home the old adage about the hardest parts of computer science being naming things when the decision comes down to a discussion of the philosophical implications of a TV episode from 1994.
My first work encounter with Unix (SunOS, Solaris) had a weather phenomena naming scheme, "lightning", "thunder" and so on, all very exciting. When I and the other new hire called ours "overcast" and "mizzle", the older coders were nonplussed, but couldn't really complain about our sarcasm.
A long time ago I was a sysadmin for a company that gave us a Windows client desktop, and a desktop running Windows Server. The rule was that you had to name the server after a brewery. I'm not a beer drinker, so I named mine A&W. Spelled as "Ayeanddubya." (Aye and dubya) That was fun for a while, people would call it names like "Abbadabba." I later switched it to Duff.
During that time our manager, who wasn't that bright, rushed over and exclaimed. "There is a rouge server on the network!"
We did some looking around and discovered that she had seen my coworker's server, named after Rouge Brewery.
So that's where the Sun 2 box was UUCPing email from. ;) Decomm... that sounds painful.
One of their main products, CORETRAN, was a Monte Carlo reactor simulator written in millions of lines of FORTRAN by nuclear engineers over ~60 years. I helped port to Win32 and sped it up 300% by disabling swap (128 MiB of RAM in 1997 was a lot).
No, you're right. I wouldn't choose CSS based "vector" graphics over SVG at all. But as a playing tool, I would definitely give a CSS based drawing tool a test-drive.
My first reaction when I saw the title was "oh, not this again", but this looks neat and the CSS source, surprisingly clean!
I really enjoyed the first attempts at 3d in CSS (in pre-canvas, WebGL times). Can't find the right example, but in a nutshell, the approach involved using border-width to create triangles, and thus triangle meshes.
I think a hidden gem here is at the end, when it says 'what's cool is, I can now do stuff like.. green Bart, colorless Bart'
That's something I've often thought is a real ace in the sleeve of CSS and also SVG, that ability to basically have artistic parameters as code and change them, animate them, etc.
Obviously you can do that offline so to speak in image applications, but the iteration time is hugely longer, stuff like caching becomes a problem, and you definitely can't automate it based on runtime inputs etc. It's almost like having that image application running in the browser, rendering whatever changes you need in real time.
104 comments
[ 0.81 ms ] story [ 248 ms ] thread- Disable issues (pretty sure Github didn't give that option to me alone)
- Write on the readme that you're not working on this and will ignore/close any submitted issues
"Resisting" putting stuff on GitHub is not necessary.
I'm surprised that it's the year 2020 and Firefox still doesn't score 100% in the Acid3 test.
Acid3 was a great step forward at its time, but it just isn't that useful any more. There are so many more specs that are more important.
More infos here: https://news.ycombinator.com/item?id=15256890
Krusty looks pretty terrifying though.
Thanks to whoever shared this.
https://www.chrispattle.com/blog/simpsons-in-css/
You're using the cert for octopushr.app... Unfortunately port 80 is also closed, so even the most recent wayback machine wasn't working. Here's a link from 2016 which goes into your methods, which honestly, are a bit on the sparse side (it doesn't detract at all from what you've done):
https://web.archive.org/web/20160111044359/https://www.chris...
I guess an illustrator would do a similar thing.
Good work though :)
Same type of scary ovals.
Still a fantastic job!
Reminds me of another exercise in CSS: https://diana-adrianne.com/purecss-francine/
Also, if I was hiring a developer with decent CSS knowledge, and found this attached to their CV, it'll help me skip a ton of questions (and I'll be less bored during the interview).
Next step: ensure that the related Simpons characters' images are build using CSS cascade:)
Sidenote: I think we should put more energy in replying to the OP, rather than feeding trolls (I'm up for constructive criticism, but genuinely think that the parent comment doesn't add anything to the discussion).
I am so tired of having to use flawed tools to achieve a certain goal. Why can't there be a non flawed tool? Often it doesn't exist and then people start cursing. This HN submission is not like that. Proper tools like SVG exist and they make this work like this painless. This is an example of someone going out of his way to feel pain. I don't like pain and I don't want to encourage others to inflict "self harm" upon themselves just because it's cool.
Your approach to work/learning might not necessarily reflect the others'.
Picking a technical detail (bear in mind, almost everyone here knows about SVG, WebGL etc...) seems a bit ironic to me, as you mention "pain" and "self harm", whereas the reply by itself seems to lack empathy. Or, an understanding of context.
This is not a good hack.
It is art.
― Theodore Roosevelt
Would it be too inconvenient to first appreciate the art before barfing all over someone else's "birthday cake?"
https://i.imgur.com/AUTXPfW.png
https://en.wikipedia.org/wiki/Treehouse_of_Horror_XXVIII#Cor...
Still this CSS is pretty amazing, with all the neat stuff you can do with it just by changing some CSS or enabling dark mode.
Everyone forgets that white is not the default background colour. There is no default background colour!
Not being a fan of CSS, I think this (the CSS source code) shows fairly well why I'm not a fan of CSS.
Sure, doing things like this is not what CSS is meant for.
CSS is meant for making HTML do things it wasn't meant for.
That's mighty damn impressive.
More skills I will never have, like penmanship and singing. Give me about a week, and I'll have a red square and a blue circle aligned.
Fun fact: I worked at a nuclear engineering consultancy in the 90's. That's the not the fun fact. The hostnames of the computers were all Simpsons' character names.
Really brings home the old adage about the hardest parts of computer science being naming things when the decision comes down to a discussion of the philosophical implications of a TV episode from 1994.
Our boss, whom we didn't know was religious, says, "that's fantastic! Books of the bible, yes?! Next release is 'Exodus'?"
"Er, no it's Start Trek, next release is gonna be called 'Picard'."
During that time our manager, who wasn't that bright, rushed over and exclaimed. "There is a rouge server on the network!"
We did some looking around and discovered that she had seen my coworker's server, named after Rouge Brewery.
One of their main products, CORETRAN, was a Monte Carlo reactor simulator written in millions of lines of FORTRAN by nuclear engineers over ~60 years. I helped port to Win32 and sped it up 300% by disabling swap (128 MiB of RAM in 1997 was a lot).
Now just give me a design surface tool that takes my raster drawn images and converts it to these CSS and I will be on it like a rash.
This is a classic.
I really enjoyed the first attempts at 3d in CSS (in pre-canvas, WebGL times). Can't find the right example, but in a nutshell, the approach involved using border-width to create triangles, and thus triangle meshes.
You might like this one: https://keithclark.co.uk/labs/css-fps/desktop/
That's something I've often thought is a real ace in the sleeve of CSS and also SVG, that ability to basically have artistic parameters as code and change them, animate them, etc.
Obviously you can do that offline so to speak in image applications, but the iteration time is hugely longer, stuff like caching becomes a problem, and you definitely can't automate it based on runtime inputs etc. It's almost like having that image application running in the browser, rendering whatever changes you need in real time.
https://www.youtube.com/channel/UCfITAHFPUbFwCbMYrhMJJCw