6 ms·

One-Line Website

46 points by sramov 16y ago

slater 16y 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!
- sramov 16y 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.
  - slater 16y ago
    You're right. Actually, just this will do it: html {border-left:18px solid #ebf7fb; height:100%;}
    - sramov 16y ago
      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.
kabanossen 16y ago
How come you don't have a link on each page to the home page?
- sramov 16y 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.
  - kabanossen 16y 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:-)
    - sramov 16y ago
      I've put title attributes on links ('Send me an email' and 'Go back to front page'). Minimalist trade-offs :)
  - kabanossen 16y ago
    I know this is silly but you might want to put your name way up top, like a regular site.
    - sramov 16y ago
      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 16y ago
        You've thought this through, I like it. Keep it up!
sramov 16y 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-ocd 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 16y ago
so clean, the minimalist in me loves it.
jasonkester 16y 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.
- sramov 16y 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'.
  - alttab 16y 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.
    - sramov 16y ago
      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.
      - alttab 16y ago
        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.
efsavage 16y 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".
- sramov 16y 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.
  - efsavage 16y 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.
    - sramov 16y ago
      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.
MarkPilgrim 16y 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.
- sramov 16y 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 16y ago
Great for websites with no design whatsoever.
jws 16y 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.
- sramov 16y 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.
- famfam 16y ago
  I thought the favicon could be a data url? Isn't that how they implemented Defender Of The Favicon?
famfam 16y 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 16y 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!
- sramov 16y ago
  Feel free to put it through W3 validator, it is perfectly valid HTML5 (but the same can be done with 4 too).
  - stevepi 16y ago
    This is not a valid document according to http://validator.w3.org/ 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 16y ago
      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.
daverodecker 16y 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!
suckitlolol 16y ago
retarded lol

46 points by sramov 16y 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!

sramov 16y 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.
- slater 16y ago
  You're right. Actually, just this will do it: html {border-left:18px solid #ebf7fb; height:100%;}
  - sramov 16y ago
    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.

kabanossen 16y ago

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

sramov 16y 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.
- kabanossen 16y 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:-)
  - sramov 16y ago
    I've put title attributes on links ('Send me an email' and 'Go back to front page'). Minimalist trade-offs :)
- kabanossen 16y ago
  I know this is silly but you might want to put your name way up top, like a regular site.
  - sramov 16y ago
    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 16y ago
      You've thought this through, I like it. Keep it up!

sramov 16y 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-ocd 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 16y ago

so clean, the minimalist in me loves it.

jasonkester 16y 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.

sramov 16y 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'.
- alttab 16y 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.
  - sramov 16y ago
    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.
    - alttab 16y ago
      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.

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

sramov 16y 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.
- efsavage 16y 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.
  - sramov 16y ago
    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.

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

sramov 16y 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 16y ago

Great for websites with no design whatsoever.

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

sramov 16y 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.
famfam 16y ago
I thought the favicon could be a data url? Isn't that how they implemented Defender Of The Favicon?

famfam 16y 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 16y 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!

sramov 16y ago
Feel free to put it through W3 validator, it is perfectly valid HTML5 (but the same can be done with 4 too).
- stevepi 16y ago
  This is not a valid document according to http://validator.w3.org/ 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 16y ago
    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.

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

suckitlolol 16y ago

retarded lol