laterstars blog

Article Previews

This was actually added a few weeks ago, albeit a bit under the radar… but, you can now preview any link within laterstars. As you’ve probably noticed, if a link is to something we detected as being media, like images and videos, there is an icon on the right side that is either a small preview (images) or a video service icon. If you click on that icon or tap ‘p’ on the keyboard, a larger preview will pop up real quick for you to check out. Usually, this is all I ever really need, and I don’t have to follow the link to the original site. (In fact, I might need to add an option to mark links as read when they’re previewed).

Having this for images and videos is great, but as much as I love to fave funny pics and stuff, the vast majority of my list is made up of links to actual articles… blog posts, stories on newspaper sites, stuff like that. This usually isn’t too bad — the keyboard nav makes it easy to open the links up and you can get through things pretty quickly. However, going to many of these sites is still a bit of a chore… they’re of questionable speed, might be down, and lots of times the part you actually want to read is buried within tons of noisy junk and javascript widgets.

A solution to this has been to use Readability once you get to the page. If you haven’t checked out Readability, it’s this awesome open source bookmarklet that goes through the page you’re on and tries to determine what the stuff you actually want to read is, then strips everything else out and leaves the text in nice, big, readable text. It’s a wonderful thing and I highly recommend it, it makes the web a more enjoyable place.

So, I figured the best thing to do would be to try to have that automatically applied to all the articles in laterstars. I did a bunch of experimentation with that using iFrames and wacky javascript, but in the end I ended up just attempting to port it to Ruby so I could process all the articles when they’re imported and save the processed copies. I say “attempted” because Readability is a bunch of pretty gnarly javascript doing somewhat strange things that “just work” and I haven’t quite been able to duplicate all the functionality… but, it works pretty well so far and I think it’s good enough to start using.

So now that all your links are getting run through this Ruby version (which will probably be called “Rudability” at the insistance of @3n and eventually open sourced) you can preview pretty much everything in your list - just click the new preview link within the gear menu, or just tap ‘p’ like you would for the image and video previews.

You’ll be presented with a stripped down version of the page right there above your list, with some images and videos left in if it they were deemed relevant. You can use the normal keyboard nav in the previews, so j & k scroll you up and down, shift+j/k page you up and down, and the arrows and space bar work as well. To get rid of it, just hit escape or ‘p’ or use your mouse, it’s all pretty flexible.

Just like the other previews, these are usually all I really need when I want to read the articles in my list. I still visit the original links a lot to get the full view or check out comments, but for most things the preview is perfect.

You might occasionally get a “sorry we couldn’t generate a preview” message which will give you a link to the original article… like I said, this is very much a work in progress, so if you come across some things that don’t work that seem like they should, just let us know.

Oh, and a nice side-effect of having these stripped down preview versions sitting around? They’re perfect for reading on an iPad… more on that in the next post :)