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 the have money to own a Mac.
I got my first Mac when I was 19. It was an iBook 700 Mhz, acquired on 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 spend on a hobby. Most of the time I buy the devices from people on Craigslist.
After a few laptops and iDevices, I decided that I should start collecting info about my iThings. In the beginning, I created a Gist containing the model, serial number, how I got the device, the minimum/maximum OS, and so on.
The list kept getting bigger and bigger, and the content started looking messy. I thought showing this content on a website would be perfect, and I didn't need to hire a developer :D
At first, I decided I would organize my data in an 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 that I even ignored the backend language and UI details like SASS or styled-components. It all sounded a bit overwhelming when my ultimate goal was showing a list of items in a nice design.
That being said, I thought about how I can 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 on 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, and no custom CSS. I'd like to share the experience of building the site with you.
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>
No JS framework/library and tooling
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 could avoid adding Webpack and Babel. No need to dig into presets and loaders.
P.S. You can argue that I could 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 not to write any 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 into it
- I wanted to use Tailwind CSS
If you've never heard about Tailwind CSS, please don’t just think, “It's just an alternative to Bootstrap.” 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, and by experimenting with it you can have a better understanding of how people use this feature.
- Modals: Modals can be problematic. I 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 my site, 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 with an XMLHttpRequest.
- Tailwind uses Flexbox in many elements. Safari only started supporting Flexbox in iOS 7. Maybe I could write a few properties for their existing elements to achieve a decent look.
- SSL Certificates may be an issue for 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 will be useful to prototype a feature or build 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 my objectives, it helped me understand more and more about how all the pieces are connected.
I totally recommend doing 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 between coding, creating the data, testing and writing this post I’ve worked 13 hours on this.