One-Line Website(simeramov.com)
simeramov.com
One-Line Website
http://simeramov.com/2010-07-ocd
13 comments
It is not that simple. Initially I used that method. But then you have to put:
Got tired of it, put background image instead and simplified the CSS further :)
As for the RSS feed, it won't have any.
html, body { height: 100%; }
Got tired of it, put background image instead and simplified the CSS further :)
As for the RSS feed, it won't have any.
You're right. Actually, just this will do it:
html {border-left:18px solid #ebf7fb; height:100%;}Like I said, it is not that simple. The best would be to make a copy of the page, de-minify it and try for yourself. Then tell me the results ;) Focus on top and bottom parts of the page. If you don't see it, try a page with more content, so it will scroll.
All kinds of issues will arise.
All kinds of issues will arise.
How come you don't have a link on each page to the home page?
I have. Click on my name. If you are on the article it will take you home. If you are home, it will send me an email.
Maybe has some usability issues but it was a minimal and elegant solution to a problem.
Maybe has some usability issues but it was a minimal and elegant solution to a problem.
I know this is silly but you might want to put your name way up top, like a regular site.
Considered, but I like the bottom-up approach, putting content dead first. First you read something and then if you like it look up the author etc... Seen it on couple of sites and immediately liked it.
Also, my name is in every page title.
Also, my name is in every page title.
You've thought this through, I like it. Keep it up!
Ait, cool. I'd remove the email link, or at least label it, drives people nuts when a hyperlink starts Outlook etc.
The pages load really fast:-)
I've put title attributes on links ('Send me an email' and 'Go back to front page').
Minimalist trade-offs :)
Minimalist trade-offs :)
Added a note about nginx http_gzip_static_module which doesn't get used as much as it should.
One tip on the gzip parameters, I use -9cn. The 'n' flag is important as your gzipped files will not appear corrupted by many gzip online checking tools. E.g. everything is green: http://redbot.org/?uri=http%3A%2F%2Fsimeramov.com%2F2010-07-.... Took me a while to figure it out. I believe it also benefits rsync.
There is one serious downside to all this reckless optimization -- I don't even notice the bandwidth RRD graphs changing if some page hit the HN front page or get featured elsewhere. The pages are so small the graphs almost always look the same, i.e. basically flat :) All the bandwidth is from me backing up my home dir to server.
One tip on the gzip parameters, I use -9cn. The 'n' flag is important as your gzipped files will not appear corrupted by many gzip online checking tools. E.g. everything is green: http://redbot.org/?uri=http%3A%2F%2Fsimeramov.com%2F2010-07-.... Took me a while to figure it out. I believe it also benefits rsync.
There is one serious downside to all this reckless optimization -- I don't even notice the bandwidth RRD graphs changing if some page hit the HN front page or get featured elsewhere. The pages are so small the graphs almost always look the same, i.e. basically flat :) All the bandwidth is from me backing up my home dir to server.
so clean, the minimalist in me loves it.
So minimal... So inefficient...
There's a reason we do image, css and javascript includes in HTML. This idea undoes all that.
I can't imagine why the author, clearly a bright guy, went out of his way to build this thing.
There's a reason we do image, css and javascript includes in HTML. This idea undoes all that.
I can't imagine why the author, clearly a bright guy, went out of his way to build this thing.
Do a test proving it this way is more inefficient.
BTW, everything is separated before publishing. CSS is one file, reset CSS is in another, there is a HTML template etc. Easy maintenance off line, online and published does not matter. It is similar with dynamic publishing.
As for the inefficiency we all know HTTP requests are the biggest enemy. All my pages are exactly one request. With everything being minimized, gzipped and unused CSS selectors stripped I do not see how this can be more 'inefficient'.
BTW, everything is separated before publishing. CSS is one file, reset CSS is in another, there is a HTML template etc. Easy maintenance off line, online and published does not matter. It is similar with dynamic publishing.
As for the inefficiency we all know HTTP requests are the biggest enemy. All my pages are exactly one request. With everything being minimized, gzipped and unused CSS selectors stripped I do not see how this can be more 'inefficient'.
To be fair, since it's your thing and you're going against conventional wisdom, it's probably your job to demonstrate it's better.
As it stands, you're re-sending all your images and all your css and all your javascript to every one of your users every time they ask for a page on your site. So if I like your blog and read 50 articles, you've sent me that stuff 50 times over.
If you come to my site and flip through 50 pages, you'll get one css file, seven images, and one javascript file from the first page you request, all minified, gzipped and compressed just like yours is. The only difference being those extra requests, which might end up faster overall since they're to a CDN endpoint at your end of whatever continent you're on.
For the next 49 requests, all you get is content.
As it stands, you're re-sending all your images and all your css and all your javascript to every one of your users every time they ask for a page on your site. So if I like your blog and read 50 articles, you've sent me that stuff 50 times over.
If you come to my site and flip through 50 pages, you'll get one css file, seven images, and one javascript file from the first page you request, all minified, gzipped and compressed just like yours is. The only difference being those extra requests, which might end up faster overall since they're to a CDN endpoint at your end of whatever continent you're on.
For the next 49 requests, all you get is content.
I don't have any JavaScript, CSS is small, there is only one tiny image which is very small even base64 encoded. So I don't think this applies in my case.
For bigger advanced sites, yes, you are right.
Up to certain point, this is 'better', from the certain point, it is not.
For bigger advanced sites, yes, you are right.
Up to certain point, this is 'better', from the certain point, it is not.
You could probably do one better one yourself if you served the CSS separately (with the inline images included). Two requests isn't that bad. And that's only two requests the first time someone visits your site--the next visits will have cached the CSS and will only request the HTML. But I definitely see the novelty in only having one.
I was thinking this exact thing while reading his article (losing the benefit of caching external files locally). It would be my guess that this does improve performance for single requests (like an article that gets popular on HN...), but as you said, reading 50 pages would be worse.
Still it's very cool, especially for a minimalist blog.
Still it's very cool, especially for a minimalist blog.
How long would it take to understand, learn, implement, and test this set up?
I understand the fully-packed 1 request situation is great for serve-time and page-rank, and after it is all said and done its probably the better solution. This is a slippery slope though because its possible to do too much of that and not enough real work.
I understand the fully-packed 1 request situation is great for serve-time and page-rank, and after it is all said and done its probably the better solution. This is a slippery slope though because its possible to do too much of that and not enough real work.
There is a distinction to be made here. Inefficient in page load times and performance or inefficient in the unnecessary complication? I was talking/responding about performance.
The bigger the site, lesser the point in all of this (and harder). It is a small personal site and I enjoyed the process of doing all of this. Makefile is nice to have in the end, which means it was a one time investment.
The bigger the site, lesser the point in all of this (and harder). It is a small personal site and I enjoyed the process of doing all of this. Makefile is nice to have in the end, which means it was a one time investment.
Right - I was merely pointing out the opportunity cost of doing it. I'm sure its a fun project and for a personal site would work great.
Unless you have it set up in a certain way - it does require one more step. When you save the content you still have to run the makefile and then upload it. Even though this could be done in a batch script, just looking at the problem you are trying to solve (run a personal site/blog), it seems rather over-complicated.
The virtue and delivery of the idea is cool though - never discounted that. I just wanted to play devil's advocate on the practicality - which you seem to agree that it isn't really practical.
Unless you have it set up in a certain way - it does require one more step. When you save the content you still have to run the makefile and then upload it. Even though this could be done in a batch script, just looking at the problem you are trying to solve (run a personal site/blog), it seems rather over-complicated.
The virtue and delivery of the idea is cool though - never discounted that. I just wanted to play devil's advocate on the practicality - which you seem to agree that it isn't really practical.
The one more step is the same as in Jekyll or any other static site generator. You have content on disk, (re)generate the site and then upload it. In my case I edit an article or write a new one, type 'make all', preview the result locally in the browser, if it is fine, I type 'make live' and off it goes to a server -- with only differences from the last time uploaded.
It can also be integrated with DVCS post-hooks.
It can also be integrated with DVCS post-hooks.
I like it, it's clever, but I was disappointed that the headline was misleading in the interest of being catchy. "How I made my website a one-hit-wonder (intentionally)" might have done the same thing without me thinking "oh, he just stripped out newlines".
I can see being it received like that. But the issue is deeper. Take a regular thousand line site and strip the newlines. It is not a same thing. A fact that buildout depends on so many utilities and little scripts and glue makes it clear the result is something a majority of people would not bother messing with. I bother because I really do care about the little differences. There is also no body, html, head, any divs or optional end tags etc.
On the website, it is clearly stated I am a minimalist and perfectionist. The URL slug of this article also reveals something :)
As for the title, it might be perceived as catchy. But I like nice titles on my sites and the fact I self publish entries (because of the HN blog comments experiment -- which I am happy with) makes it even harder.
Is it not a one-line website? :) Short and accurate title I would say.
On the website, it is clearly stated I am a minimalist and perfectionist. The URL slug of this article also reveals something :)
As for the title, it might be perceived as catchy. But I like nice titles on my sites and the fact I self publish entries (because of the HN blog comments experiment -- which I am happy with) makes it even harder.
Is it not a one-line website? :) Short and accurate title I would say.
But your buildout "now ended up requiring Haskell (GHC, Pandoc), Java, Python 2, Python 3, lxml, pyquery and YUI Compressor for my site to build!"
I don't think I'd call something that was built in 3 languages, one with two versions, as minimalist.
I don't think I'd call something that was built in 3 languages, one with two versions, as minimalist.
Those are just tools. A means to an end. The end result is minimal. In essence, it is only one small Makefile, which calls various external scripts.
Much like in life, where minimalism often involves more work. It is harder to design something simple, then something complex.
Much like in life, where minimalism often involves more work. It is harder to design something simple, then something complex.
My build scripts are such an "evolved" mish-mash of Python3, Python2, Java, makefiles, and shell scripts that I'm amazed they work for me, much less for anyone else. (This point was brought home to me when I moved to a new laptop and spent too long trying to remember and install all the dependencies.)
Anyway, nice job, and hooray for unintended uses of open source code.
Anyway, nice job, and hooray for unintended uses of open source code.
You are right. It takes a certain structure, quite a bit of adjusting etc.
But the result is what it makes all worthwhile.
BTW, I was doing all the optimization you were doing on some of my sites, but I always missed some nice ways to automate. Imagine the happiness when I stumbled on your hg.diveinto* repositories. A candy shop.
So, thank you.
But the result is what it makes all worthwhile.
BTW, I was doing all the optimization you were doing on some of my sites, but I always missed some nice ways to automate. Imagine the happiness when I stumbled on your hg.diveinto* repositories. A candy shop.
So, thank you.
Great for websites with no design whatsoever.
50% of my load time was trying to pull the favicon and getting the 404. I wonder if there is a way to use the <LINK rel=icon ...> tag to tell a browser not to look for a favicon. It is eluding my googlabilty if there is.
Thought: do data urls work in .css files? e.g. background: url(data:....); ? Because then you could have one cacheable file (everything.css) that sits along side your pages (use background images instead of plain old imgs), so you would only have to download them once, not on every page load.
Looking at the source, there's no html, head or body tag in the document (but there are CSS styles referencing the body tag, hmm).
This could be some minimization trickery that assumes most browsers can deal with malformed html documents, but [slams fists on table] IT'S NOT RIGHT, I TELL YOU!
This could be some minimization trickery that assumes most browsers can deal with malformed html documents, but [slams fists on table] IT'S NOT RIGHT, I TELL YOU!
Feel free to put it through W3 validator, it is perfectly valid HTML5 (but the same can be done with 4 too).
This is not a valid document according to http://validator.w3.org/.
I suggest you run it through and see for yourself.
As a design/technology exercise, this is interesting, but it is not usable in any real-world application.
I suggest you run it through and see for yourself.
As a design/technology exercise, this is interesting, but it is not usable in any real-world application.
Validator is having hiccups ATM. It is valid, trust me. Try later. If you don't believe me, try some other pages, including the W3 one itself, they all come out as invalid.
Edit: The validator works now.
Edit: The validator works now.
Includes are valuable for re-usability. If a website has a relatively low number of page hits/user or doesn't implement a standard across many pages, the benefits of includes are reduced.
This concept could be progressed into a proxy server!
This concept could be progressed into a proxy server!
body {border-left:18px solid #ebf7fb;}
:)
Oh, and an RSS feed would be great, too!