Creating a website for my Apple Collection
Also posted on my blog
A while ago I started an Apple Collection. After a few laptops and a few iDevices, I decided that I should start collecting info about my iThings. In the beginning, I created a gist containing model, serial number, how did I get the device, minimum/maximum OS, etc.
The list kept going bigger and bigger and the content started looking messy. The natural way to organize my data would be inside a SQL database, with the information distributed in columns. After organizing the information in tables, I would create a graphQL API (the one cool kids use these days) to give me the data needed to populate my UI – probably written in React, compiled with Babel and packed with webpack.
Reading the previous paragraph aloud, you can hear many technologies and I even ignored the backend language and UI details like SASS or styled-components. It sounds a bit overwhelming when the ultimate goal is showing a list of items in a nice design.
That’s being said, I thought: how can I deliver this content without:
- An API or any backend work
- Any JS framework/library
- Any JS tooling (webpack, babel, etc)
- Any CSS work
On top of these constraints, I had a few stretch goals:
- Create a website with good accessibility
- Create a website that works in old browsers, since I have computers running Mac OS 9.2 and iDevices running iOS 3
Challenge accepted. One index.html, a few vanilla JS files, no custom CSS. TL,DR:
No API or any backend work
A while ago I saw a SaaS product called Stein. You create your data inside a Google Sheets document and they give you an endpoint with your data. Their library works like handlebars and it looks perfect for my use case:
<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
<div>
<h1>{{title}}</h1>
<h6>By {{author}}</h6>
{{content}}
Read on <a href="{{link}}">Medium</a>
</div>
</div>
No JS framework/library and tooling
Decided to avoid adding a framework or library in this project since the use case didn’t need one. All JS interactions on this page are quite simple (show/hide menus, open a modal screen, handle permalinks).
Since I was not using a framework/library, I would avoid adding webpack and babel. No need to dig into presets and loaders.
PS. You can argue that I’d have chosen create-react-app or Next.js and get all these problems solved, but no.
No CSS work
I love writing CSS, especially when I can use SASS but I decided to do not write CSS here. I had a few good reasons to avoid doing it:
- I had no designs and despite I could do something decent-looking, I didn’t want to put time and energy on it;
- I wanted to use Tailwind CSS.
If you never heard about Tailwind CSS, please don’t try to think “it is a Bootstrap option”. Here is a good short explanation, from their website:
Most CSS frameworks do too much.
…
Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.
This is pretty much true. A quick search gives you many web apps “rebuilt” with Tailwind CSS:
Create a website with good accessibility
Last month I started taking accessibility courses at Deque University. Their content is great and it reminders me that HTML is accessible by default. By using a semantic HTML structure and testing basic things like keyboard navigation and colour contrast you eliminate several barries that move people with disabilities from your content. I am not an accessibility expert but here are a few accessibility-related things I’ve worked on this website:
- Disable stylesheets: by disabling stylesheets you can ensure that your content follows a logical/structural way.
- VoiceOver: VoiceOver is included in macOS and iOS. It is very simple to use it and by using it you can have a better understanding of how people use this feature.
- Modals: modals can be problematic. Decided to follow Ire Aderinokun’s approach.
- axe: the extension is an accessibility checker for WCAG 2 and Section 508 accessibility rules.
It is not perfect, there are a few things that I didn’t work it, like adding a skip link to the main content. If you are curious, here is the Pull Request with all the changes.
Create a website that works in old browsers
I couldn’t achieve this objective since I had no control over scripts and styles. However, it doesn’t seem to be impossible. A few things I noticed:
- Expedite (Stein client) uses fetch, which was only added in Safari 10. The request to their server could be probably replaced for an XMLHttpRequest.
- Tailwind uses flexbox in many elements. Safari only started supporting Flexbox in iOS 7. Maybe I could write a few properties to their existing elements to achieve a decent look.
- SSL Certificates may be an issue to old browsers.
Conclusions
Making this website was super fun. The fact I added “constraints” to it made think outside the box. Out of curiosity, I tracked my time using Clockify and I’ve worked 13h on this, between coding, creating the data, testing and writing this post.
