I'm not the original author. It was posted on russian HN/Reddit clone Habrahabr: http://habrahabr.ru/post/203048/
Habrahabr featured translations of "30 LOC of javascript" topics from HN, some people continued it for a bit, and this one was created as an ironic answer to that.
Here's a (partial) translation of the author's post on Habra Habr.
-----
I didn't want to take part in this week's trend on Habra: "We can write everything in 30 lines of code!" I didn't have the time to spare.
But theaqua's post [0] about writing a "Hello, World" in a single line of pure JavaScript inspired me to beat that record. I had already written a game using JavaScript, HTML, and CSS, and here it is now with a grand total of zero lines of code.
After reading theaqua's post, I couldn't sleep. I was agonized by insomnia, so I gathered myself and sat down to re-write the game. Mindful that I had to use exactly zero lines of JavaScript, I was very scared. Writing a program in 1000 lines or more is no problem. But writing zero lines of code ... that's insane. It turns your brain inside out. It changes the way you look at the web. You realize that, before, you didn't do things right.
For those of you who don't like to wait, here's a demo [1].
It's not a fake. It's a full game. Details after the cut.
...
I've been programming for a long time. And it was for just that reason that I believed that I could manage a complex task like taking a game that was originally written using JS and re-writing it with zero lines of code.
Before this project I looked down on HTML programmers†. But now I realize that they'll soon rule the world. You'll remember how there was a time when JS programmers weren't taken seriously. Do you remember those dark ages? But now take a look ... JavaScript is not just a trend. It's everywhere. In the browser, on the server, running on microcontrollers and mobile OSes. You can write operating systems in it, and games. ... And now, HTML programming is quietly creeping up
on it.
One of these days writing zero lines of JS will be the norm. JS will fall out of fashion in the same way Flash did. Why write JavaScript if it's slower than an HTML program written by an HTML programmer with the aid of CSS?
I have a hard time understanding how someone so familiar with HTML can claim that "HTML programming" is creeping up on JavaScript. Perhaps it has to do with lack of computer science education (more specifically not understanding Truing completeness)? Perhaps you don't need it to write games?
Technically, as long as we have multiple languages with different people knowing different languages then this is a problem for everyone. There might be Russians out there wondering about the interesting things they are missing out on because they don't know English.
I for one want to watch TV programming from around the world just to experience the differences in culture and what they find humorous, sad, exciting, and so on. Sub-titles just don't always translate emotions very well.
Ah, yes, but since I'm an American the idea of learning a foreign language was not impressed on me as I was growing up. Contrast this with some Europeans I run into on my travels and they speak 2, 3, & 4 languages.
That's probably because they likely need to know those languages. At best only a percentage of Americans could find a second language, Spanish, useful in their day-to-day lives.
Nice. There are also "games" [1] made with just GLSL shaders in WebGL. There are several of those on Shadertoy but I particularly like https://www.shadertoy.com/view/MsX3Rf.
[1] Edit: "Games" in scare quotes because the lose state doesn't (can't) persist in a way that requires player action.
In fact you can leave the ship anywhere in the game window. As long as you are not moving it, the collision detection does not work. (Anyone knows why?)
Actually.. There is a way to do it that I was in the process of creating for my personal CSS only game I made 2+ years ago. It involved having a div slide over the content with a specific hover event that would require the user to keep moving their mouse every X seconds or the you lose screen would cover the page.
This is pretty cool. Although, I'm having trouble clicking on the bonuses and don't see my score. I must be overlooking something and cba to decipher how this works at this hour.
Edit: Managed to make it the whole way through by leaving the ship in the bottom left. And then when the bonuses kept flying by uncontested because the game was "over", I was able to click on them after a few tries. The issue must have been that the cursor wasn't where I thought it was. Still very cool!
I'd bet that Doom, a much better game, was written in 0 lines of JS as well (in the same sense). I fail to see how is this trend of "doing something the horrible way" interesting. Just because it's unconventional?
The analogy would be more like writing Doom in zero lines of C/++ and just implementing it using resource files. Or some similarly mindblowing constraint.
"I wrote X in HTML5" yes can get tired, but this is a specific use of the technology that's interesting to web developers.
I don't see something 'done the horrible way', I see someone having fun using a technology in a creative way, maybe in a way it's not really meant to be used. It's not a bad space shooter, it's an invitation to be curious.
This is exactly what I would expect at a site that calls itself hacker news.
I fail to see how is this trend of "doing something the horrible way" interesting.
If people in the history of computing had stayed conventional and avoided doing something the horrible way, demoscene probably wouldn't been born at all. Breaking the boundaries and pushing to the limits was the point. Of course the young programmers of 1980's could have just waited doing nothing for 1990's to come with more powerful personal computers :)
Going on record in support of this statement. Very, very, very tired of seeing this stuff. Please quit giving Upworthy titles to techniques or tools I will never, ever want to use any part of in practice. When I make something for fun or to try something novel, I still use the best techniques I find suitable for the problem. If it's really a pedagogical tool, it would have comments, built up examples, and conclusions about the paradigm in light of what was learned in the implementation. This is utter nonsense that reminds me of doing random things in middle school when it was quite plausible that any information was valuable information in light of a relative lack of experience to draw upon.
I think they're just fun little hacks. I personally find more interesting than the typical; "How sleeping only 20 minutes a day helped me sell my startup for 100 million dollars"
I suspect the community feels the same. There's always something beneficial that comes out of these for me. Whether it's seeing how *not to do something or picking up a little piece of code that can be repurposed somewhere else.
So you're never interested in seeing interesting explorations of CSS? Looking at the source for this didn't teach you anything interesting about new CSS features.
No-one is seriously suggesting we write CSS-only games. You're rather missing the point.
Whatever interesting CSS features this game contains could be applied to more practical use via a different sort of implementation -- in this case the reason is solely to get away with not having to write a line of JavaScript when clearly JS is a better way to write something like this.
It's one thing to write something that uses 30 lines of JS code only, than to create this and say "Look Ma, no JS!!"
I'm still slightly uncomfortable with css being able to do anything more than positioning, coloring and fonts... and maybe hover selectors though I did abuse those severely when I found out about them.
That is because the animation capabilities of CSS are still meant to be used for presentation purposes (like a cute response to mouse movement or a head bobbing around), rather than an all out game engine. The idea is still cute, but I freak that people will think this is the new way to design online games.
I share your practicality, but not your pessimism (nor the attitude which seems to think you can decree what others find interesting)
People going against perceived wisdom and doing the wrong things with the wrong tools is a great way to learn and innovate, I know CSS very well and I am fairly sure I wouldnt have been able to come up with this, it may not be the next big game engine but there definetely scope for very practical new techniques and insights from abusing tools in this way
Part of hacker culture is an appreciation for problems solved under arbitrary, weird, and usually difficult constraints. Practical this is not, but it's a cool demo that might inspire something useful.
If you lose that sense of playfulness with tech you might as well go work in some other field, because tech is about using things in ways they were never designed to be used... because it's fun first, and later because your under a weird constraint and you have this corpus of seemingly useless (at the time of acquisition) knowledge to draw on.
Things like this only promote a deeper understanding of what can be done in pure CSS. Yes he took it too far, but that's the point.
Just because you don't like it doesn't mean that others feel the same. In much the same way that you are very, very, very tired of seeing this stuff, I'm very, very, very tired of seeing this sort of comment on HN!
It could have been worst, imagine if the author instead had spent some of his precious time whining on a forum about how other people should spend their spare time on stuff he considers to be more valuable.
Hacking things to make them do something they were not designed to do is the life and blood of all things computers. It's just so damn fun.
What I find most hilarious in hindsight is that the parent poster, myself, and everyone in this thread except the article poster seemed to miss the first line about "ironic answer" yet we're all insisting that it was a serious example meant to really show off something awesome. I've seen some really out-there code that was really instructional, such as Urbit http://www.urbit.org/2013/09/24/urbit-intro.html, in spite of its admitted uselessness, but CSS transforms were all I expected to see and all I got.
Now that I understand the author's intent, it's furthermore impossible for me to go along with a narrative that every experiment has equal or potential to lead to some mind-rattling insight. If anything, the posts about how someday shaders might build entire games etc just demonstrate how, behind the wall of basic comprehension of how GLSL's inner workings and things like Chomsky grammar concepts create fundamental limitations, the barriers one will encounter are both insurmountable and undetectable. See http://stackoverflow.com/questions/1732348/regex-match-open-...
CSS itself has annoying limits that can be summed up with the existence of tools like LESS and Stylus that add expressions to generated CSS, giving us an infinitely more capable styling system, albeit still suffering from annoying limitations that keep me sour to many CSS uses. Quite simply, everything in CSS transitions has an API so far from how animation is dealt with programmatically that I find only the most basic utilizations to -ever- be appropriate. This doesn't even mention the fact of shims, fallbacks, and the JS that deals with them. The idea that we're "pushing limits", much less making progress with examples like this is not one I'm buying into.
Personally, I spend a lot of time in HTML, CSS and JavaScript. This post was interesting to me because I was able to see the techniques that were used to accomplish what was going on in the snippet. What may not be relevant to you could be relevant to others.
imo this shows what modern CSS can do, thats what its about. I for one didnt know this was possible. Imagine a 3D game written only using shaders or something like that. It doesnt make sense, but is still impressive to see.
Most things can be done in html4/css2 (though browsers don't usually support all of css2). Most of the platform for these things was there five years ago, it's just taken us this long to build up the tooling and infrastructure around it.
Off topic, but I had to make an Android game for my Junior year final project, and I think I used that exact same space ship sprite (it was an Asteroids clone with motion controls).
I ended up building a generator for the CSS+HTML and at the time I had a PHP script (2+ years ago, I would use Node now) that could allow me to pick the number of lanes, the difficulty etc. Now it's just a single snapshot. I built it in about a week. There is a new bug apparently where the cursor is not changing as expected in chrome.
What am I supposed to be seeing here? Chrome 31, Windows 7 x64. Maybe my proxy server is screwing something up, because I mouse over the blue area, and then the scroll bar goes wonky for a bit, and then it turns red and says "game over".
"This Site Totally Doesn't Work Without JavaScript.
Like, at all. Sorry. If you enable it and reload this page you'll be good to go. Need to know how? Go here." Okay, that's funny.
When Javascript is on: Ah, Nice little game. Interested how it needs a .js file with just a comment. Can we improve this to remove it?
Edit: oh, so maybe the overall website need JS, not the game(?).
I'm impressed this is possible in pure CSS. What implications does this have for security/privacy? Should I be blocking CSS in addition to JS now just in case?
This really illustrates the true power of the web. No construct has a stable definition. If we can't or don't want to use JS to write algorithms, just add new features to CSS until it has the ability. Nobody needs a reliable format to write static documents. We need to keep extending amending extending amending extending amending (while trying to be backwards compatible)!
Is this not Hacker News? Seriously, what the fuck is up with all these closed-minded, anti-hacker comments today? Is HN really just a bunch of knuckle-dragging, startup-fellating retards now?
Really you think you are super smart and everyone else is "startup-fellating" retard? Solve a real problem for once in your life and then start to say crap.
I felt the project was useless and didn't solve anything. I am entitled to my opinion.
Apart from "Masturbating monkey" like you who get exciting at anything that comes at #1 on HN, for once use your mind and think if it really helped you or did you learn anything new?
? Of how little javascript you need to get a whole bunch of things done. In this game, you could efficiently generate several different objects of various animations doing different sorts of stuff simply by putting in the least of javascript. It is less resource intensive and more natural to the browser because it leverages things it expects.
Several years ago, this game would be very resource heavy and use lots of JS, but as more common uses of JS are merged into CSS, JS is less and less relied on.
Well, if you take a look at the code. Most of it is doing things in CSS what could easily have been done in JS.
Doing something to make a statement and doing something useful are two different things.
I have two questions for you though i agree with you on couple of points:
- Are you ever going to use this in near future(say 1/2 years)?
- Will you ever be able to maintain or write something of this sort when complexity arises? CSS is a domain specific declarative language. A lot of cool things could be done with it.But for game development? Hell No!
You might find some sense in these arguments, i hope!
Little disappointed on the content quality of HN nowadays , rather than seeing stories of inspiring people solving some real problem and doing some real shit. All i see now is anything goes up at #1.
I'm not the original author. It was posted on russian HN/Reddit clone Habrahabr: http://habrahabr.ru/post/203048/ Habrahabr featured translations of "30 LOC of javascript" topics from HN, some people continued it for a bit, and this one was created as an ironic answer to that.