Skinny Guardian was inspired by sites like CNN Lite and Thin NPR – news served with next to no styling. While this may sound (and look) unexciting I find a simple list of headlines an excellent way to get something to read quickly, and because there’s nothing going on behind the scenes they load instantly. Perfect on a train or bus journey into work with a poor mobile connection, or when you want something quick to read during your lunch.
My paper of choice is The Guardian, which has an open API. So the project gave me a chance to work with external, queryable data, an area I’d only worked on once before (with the Google Maps API).
The set up
Skinny Guardian uses Jekyll to generate static HTML files, thereby removing any database requirement. I use Netlify hosting for free SSL and a build hook URL, which means I can automate site builds once every 30m if I use something like a free Postman account to send the URL a POST request.
The site simply queries the content whenever it’s built, grabbing the 50 most recent articles and converting the json response into Jekyll data files with the Jekyll Get plugin.
I then use the Jekyll Datapage Generator plugin to convert the json into Jekyll pages that I can list and feed through layout files. Throw in the Tachyons CSS framework, and you have a fast, regularly updated list of Guardian articles to peruse and read.
Making it quick
There’s a bit going on under the hood to make sure the site serves as quickly as possible.
I only use the Tachyons CSS modules the site needs, using as few as possible (there are no hover effects, for example). This means that, when gzipped, the CSS weighs in at around 7k, half the magic 14k figure. So instead of making a separate request for a CSS file, styles are placed directly in the HTML document’s head, cutting down on load and display times.
Additionally, CSS and HTML are aggressively minimised to keep page sizes low.
All this means Skinny Guardian should load quickly, regardless of the quality of your connection. Ideal if you’re stuck between, say, Ingatestone and Brentwood on your commute into work 😄