One-Line Website

http://simeramov.com/2010-07-ocd

by sramov • 16 years ago

46 39 16 years ago

simeramov.com

slater2• 16 years ago

You could shorten it even more by just using

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

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

sramov16• 16 years ago

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.

slater2• 16 years ago

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

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

kabanossen4• 16 years ago

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

sramov16• 16 years ago

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.

kabanossen4• 16 years ago

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:-)

kabanossen4• 16 years ago

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

sramov16• 16 years ago

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.

fishercs• 16 years ago

so clean, the minimalist in me loves it.

jasonkester2• 16 years ago

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.

sramov16• 16 years ago

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

alttab2• 16 years ago

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.

jasonkester2• 16 years ago

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.

efsavage2• 16 years ago

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

sramov16• 16 years ago

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.

efsavage2• 16 years ago

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.

MarkPilgrim• 16 years ago

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.

sramov16• 16 years ago

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.

marknutter• 16 years ago

Great for websites with no design whatsoever.

jws• 16 years ago

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.

sramov16• 16 years ago

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.

famfam2• 16 years ago

I thought the favicon could be a data url? Isn't that how they implemented Defender Of The Favicon?

famfam2• 16 years ago

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.

jmcnevin• 16 years ago

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!

sramov16• 16 years ago

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

stevepi• 16 years ago

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.

daverodecker• 16 years ago

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!

One-Line Website

Related Stories