Reddit-like Collapsible Threads for Hacker News

I enjoy consuming and participating at Hacker News by Y Combinator resp. Paul Graham.

One thing that needs improvement is the reading comments there. At times it happens that the first comment develops into a huge thread, and then the second top-level comment (which might also be well worth reading) disappears somewhere down into the page.

Collapsible Threads at Hacker News through a bookmarkletReddit has combatted this common problem by making threads easily collapsible. I think it is worth having this also on Hacker News, so I implemented it and wrapped it into a bookmarklet so that you can use this functionality on-demand at Hacker News.

Drag this to your bookmarks bar: collapsible threads

As soon as it is available in your bookmarks bar, go to Hacker News and click on it when viewing a comments page. Next to each thread a symbol [+] will appear. Click it to collapse the thread and it will change to a [-]. Click that to expand the thread again.

I have licensed the source code under an MIT License. Click here to view the source code of hackernews-collapsible-threads.js. (Actually for caching reasons the bookmarklet currently loads hackernews-collapsible-threads-v6.js which is actually just the same)

The Hacker News HTML source code seems quite fragile in the sense that the comments section of a page can’t be identified in a really unique way (for example it does not have an HTML id attribute), so it might break when the layout of the page changes. This is why the bookmarklet is actually only a loader for the script on my server. I have tuned the HTTP headers in a way that your browser should properly cache the script so that the speed of my server should not affect the loading of the bookmarklet.

Enjoy :)

If you use Hackernews on another URL than news.ycombinator.com or hackerne.ws, use this bookmarklet: collapsible threads (no domain check)

Update March 18, 2011: Paul Biggar has contributed a greasemonkey script that also works on Firefox 4. I have adapted it so that it also works (which basically involved copying the jQuery script above mine) in Safari and Chrome (using NinjaKit).

Install Greasemonkey script

Install Paul Biggar’s Greasemonkey script

Update November 22, 2011: Eemeli Aro has sent me a little CSS tweak so that the lines don’t move around when collapsing. The code downloadable from above contains his code. Thank you!

Posted in Web

Even Faster Web Sites, a book by Steve Souders

Steve Souders has recently released something like a sequel to his previous book “High Performance Web Sites” (HPWS) which I have already reviewed earlier. With Even Faster Web Sites he and his co-authors (specialists in their fields, such as Doug Crockford (JavaScript: The Good Parts) on Javascript) elaborate on some of the rules Steve postulated in HPWS.

It needs to be stated first that if you haven’t read and followed Steve’s first book, you should go and do that first. It’s a must-read that makes it pretty easy to understand why your page might be slow and how to improve it.

In “Even Faster Web Sites”, Steve and his co-authors walk a fine line between fast and maintainable code. While most techniques described in his first book could be integrated with an intelligent deployment process, it is much harder with “Even Faster Web Sites”.

In the chapters that Steve wrote himself for “Even Faster Web Sites,” he is pretty much obsessed with analyzing when, in what sequence, and how parallel the parts of a web page are loaded. Being able to have resources transfered in parallel lead to the highest gains in page loading speed. The enemy of the parallel download is the script tag, so Steve spends (like in HPWS but in greater detail in this book) quite a few pages analyzing which technique of embedding external scripts lead to which sequence in loading the resources of the page.

Steve also covers interesting techniques such as ways to split the initial payload of a web site (lazy loading) and also chunked HTTP responses into consideration that allow sending back HTTP responses even before the script has finished. Downgrading to HTTP/1.0 can only be considered as hard-core technique that just huge sites such as Wikipedia are using right now and should be considered being covered for educational reasons only.

There is a section focussing on Optimizing Images which thankfully takes the deployment process into consideration and shows how to automate the techniques they suggest to optimize the images.

My only real disappointment with “Even Faster Web Sites” is the section by Nicolas C. Zakas. He writes about how to Write Efficient JavaScript but fails to prove it. To be fair: in the first section of the chapter he shows benchmarks and draws conclusions that I can confirm in the real world (accessing properties of objects and their child-objects can be expensive). But then he gives advice for writing code that can hardly be called maintainable (e.g. re-ordering and nesting if-statements (!), re-writing loops as repeated statements (!!!)) and then doesn’t even prove that this makes the code any faster. I suspect that the gains of these micro-optimizations are negligible, so chapters like these should be (if at all) included in an appendix.

Speaking of appendices, I love what Steve has put in here: he shows a selection of the finest performance tools that can be found in the field.

This book can help you make your site dangerously fast. You also need to be dangerously careful what tips you follow and how you try to keep your site maintainable at the same time. “Even Faster Web Sites” is great for people who can’t get enough of site optimization and therefore a worthy sequel to “High Performance Web Sites,” but just make sure that you also read and follow Steve’s first book first.

The book has been published by O’Reilly in June 2009, ISBN 9780596522308.

Posted in Web