Creating a website for my Apple Collection

Read in 5 minutes ·

Part of the collection

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.

Avatar photo If you like my content, follow me on Twitter and GitHub

Comments

comments powered by Disqus