Trying to work was a side project born from the frustrations of trying to find a space to work in Belfast City Centre with fast and stable wifi. Often, I’d grab a tea and sit down in a coffee shop to do some work only to find that the wifi speed is a #tbt to the good ole days of dial up (I'm looking at you, Starbucks).
The web app was designed and built over an Easter weekend (fuelled by chocolate, of course).
The design was kept simple. The focus had to be on the spaces themselves, with little distraction.
A space consists of several key attributes:
- The title
- Space type and location
- Wifi speed (in Mbps)
- Wifi password (if protected)
- Opening hours
And that is all there is to it. I thought it was important to focus only on the key aspects of a working space; the wifi speed, opening hours and password (so you’re not looking around wondering who to ask) - no images (for performance reasons), and no reviews. Foursquare and tripAdvisor do reviews brilliantly, it was important to focus on only one metric - the wifi speed.
I used a Service Worker to ready the web app for offline use. A service worker is a script that your browser runs in the background, independently of the web page. In this case it was used to cache static assets to ready them for offline use, if needed.
I figured it was particularly important that the website worked offline given that its primary use is to find spaces with wifi.
Progressive Web App
This was my first time in taking active measures to create a progressive web app(PWA).
“A PWA uses modern web capabilities to deliver an app-like experience.”
I used this nifty tool to test the website and after some adjustments and tweaks, managed to get a perfect score. The website was now a PWA.
Built in Jekyll
I decided to use [Jekyll](https://jekyllrb.com/) for this as a starting point. Its easy to use, really fast and perfect for small side projects. The spaces are populated using markdown files. All data is pulled from the frontmatter in the markdown file. Its laid out like so:
Entries are added manually for the time being by adding new markdown files and pushing to github but I would like to automate this at some point in the future.
With a load time of around 300ms over 30Mb/s this is definitely the fastest site I have built to date. Here are some of the methods I used to achieve this:
- SVG Sprite - All icons on the page are grouped into an svg sprite and inlined in the head of the document. This saves on requests for individual icons and because it's all SVG, the overhead is tiny. You can read more about svg sprites and how to utilise them here
- CSS Development with Tachyons - This was my first time using Tachyons and I’m very impressed with it. Regardless of your thoughts on atomic vs semantic css, you can’t deny the performance benefits of using a library such as Tachyons. Paired with uncss, which strips out all unused CSS, the total CSS size comes to just 7kb, and thats before gzipping.
- Inlining CSS - To stop CSS render blocking the page before it has loaded I inlined it in the head of the document. The maximum size Google recommends for inlined CSS is 14kb so at 7kb it was a no brainer to just inline all of it.
- Concatenate, minify and asynchronously load js - This is easy to do with a gulp task and means less requests to the browser. Adding
asyncto the script tag means it can be loaded asynchronously also.
- SSL - Having SSL enabled gives you access to HTTP/2 and service workers. Github Pages does provide free SSL, but only for their
username.github.iodomains and not custom domains. The easiest way to get around this is to just use Cloudflare as they provide free SSL certs.
- Cloudflare - Github Pages is already fast but adding Cloudflare means free SSL, a better CDN and more customisable caching options.
This was just a weekend side project. If it gains interest I will look into extending the functionality so that users can submit and edit spaces themselves.
I would also like to expand it out for other cities, such as Dublin, London etc.
tryingtowork.in/london Wouldn’t that be cool?