How I created a website for my Apple collection


A while ago I started an Apple Collection. I’ve been following Apple hardware (and its aesthetics) since I was a teenager but at that time I didn’t have money to own a Mac.

I got my first Mac when I was 19. It was an iBook 700 Mhz, acquired in an eBay-like website in Brazil. The money came from a Flash project. After living in Canada for a few years, now I have some extra money to toss in a hobby. Most of the times I buy the devices from people on Craigslist.

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, and so on.

The list kept going bigger and bigger and the content started looking messy. Showing this content on a website would be perfect and I didn’t need to hire a developer 😀

At first, I decided I would organize my data inside a SQL database, with the information distributed in different columns and tables. After that, I would create a graphQL API to provide 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 see that there are many technologies – and I even ignored the backend language and UI details like SASS or styled-components. It sounded a bit overwhelming when my ultimate goal was showing a list of items in a nice design.

That 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. At the end, I would like to share the experience.

TL,DR:

Let’s talk about the constraints, point by point:

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 looked 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>

I 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 not write CSS here. I had a few good reasons to avoid doing it:

  • I had no designs in mind, and despite the fact that 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 just 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 reminded 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 away from your content.

I am not an accessibility expert but here are a few accessibility-related things I’ve worked on for 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 on for 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. Having this kind of pet project gave me a good reason to work with tech that I don’t use in my job. Maybe in the future Stein and/or TailwindCSS can be useful to prototype a feature or a hackathon project. The fact that I added “constraints” to my project made me think outside the box. Even though I didn’t achive all objectives, it helped me understand more and more about how the pieces are connected.

I totally recommend having something like this to give you a chance to play with different tech. It doesn’t need to be an Apple Collection: you can create a site to list your favourite books or the best hikes you’ve done. In this case, the journey matters more than the goal.

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.

Also posted on my blog. Follow me on Twitter





Source link