

One-Line Website - sramov
http://simeramov.com/2010-07-ocd

======
jasonkester
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.

~~~
sramov
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'.

~~~
jasonkester
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.

~~~
sramov
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.

~~~
theli0nheart
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.

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

~~~
sramov
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.

------
efsavage
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".

~~~
sramov
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.

~~~
efsavage
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.

~~~
sramov
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.

------
sramov
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-...](http://redbot.org/?uri=http%3A%2F%2Fsimeramov.com%2F2010-07-ocd).
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.

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

~~~
sramov
AFAIK there is not.

I've just touched a favicon.ico. Zero byte, but at least it's not 404. I might
do the same for robots.txt. Thanks.

------
slater
You could shorten it even more by just using

body {border-left:18px solid #ebf7fb;}

:)

Oh, and an RSS feed would be great, too!

~~~
sramov
It is not that simple. Initially I used that method. But then you have to put:

    
    
        html, body { height: 100%; }
    

After which you end up with padding issues which you need to workaround with
some stupid methods.

Got tired of it, put background image instead and simplified the CSS further
:)

As for the RSS feed, it won't have any.

~~~
slater
You're right. Actually, just this will do it:

    
    
      html {border-left:18px solid #ebf7fb; height:100%;}

~~~
sramov
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.

------
jmcnevin
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!

~~~
sramov
Feel free to put it through W3 validator, it is perfectly valid HTML5 (but the
same can be done with 4 too).

~~~
stevepi
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.

~~~
sramov
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.

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

------
daverodecker
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!

------
fishercs
so clean, the minimalist in me loves it.

------
marknutter
Great for websites with no design whatsoever.

------
kabanossen
How come you don't have a link on each page to the home page?

~~~
sramov
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.

~~~
kabanossen
I know this is silly but you might want to put your name way up top, like a
regular site.

~~~
sramov
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.

~~~
kabanossen
You've thought this through, I like it. Keep it up!

