Building for Accessibility and Performance: The Story of Heckerspace 🌚🌝

Setting Goals 🎯

Decision made, I'm building a blog! I knew that it'll be crucial to set clear goals and choose the right tools to bring my vision to life. 🔮

Key objectives:
1.🚀 Performance: Heckerspace has to be fast. Who the heck likes to wait?

2.🙏 Accessibility: Hey, it's 2023, let's make things easy for everyone! Accessibility should be a no-brainer, not an afterthought.

3.🎨 Theme support: I don't want your eyes to bleed at night and users shouldn't have to struggle in sunny days. Gimmie the the choice!

4.📝 Content creation: I'll be writing articles in markdown, so I need to find a way to render that content.

5.🎨 Syntax highlighting: As I'll be sharing code snippets, it'd be important to have a system for syntax highlighting. Bonus points if users can also easily copy that code.

6.🧱 Content management: With a growing number of entries, it'll be handy to have a CMS that makes it easy to manage and organize content.

7.💬 Feedback: It would be great to have a comment system in place.

8. 💌 Newsletter: While it's not a top priority now, I may add a newsletter in the future to keep my readers up-to-date with new content.

9.🆕 CI/CD: I'd like to have a CI/CD pipeline that will automatically rebuild and update the page as new features / articles fly in.

10.🔎 SEO: Last but not least, I want to make sure that this content is easily discoverable. This means paying attention to SEO best practices.

Choosing my weapons 🪚

It's time to pick the tools 🔧 for my project! Here's what I settled on:

• Next.js: A well-optimized, React-based framework with great performance and built-in SEO 📦
• TypeScript: I need type-safety for sure! 🔒
• Framer Motion: A lightweight animation library with a great set of features ✨
• Hygraph and GraphQL: More on that in the CMS Chapter 🧑‍💼
• Zustand/react-hooks-global-state: A neat tool for simple global state management, based on Zustand 🌐
• Styled Components: I considered using CSS-Modules or zero-runtime alternatives such as Linaria, but I decided to stick with Styled Components. My testing showed minimal performance impact, and I find CSS-in-JS to be more convenient and legible. One day I'll write a separate article comparing these tools in detail. 💅
• use-hooks-ts: A lovely set of well-typed hooks 🪝

Building this blog was a wild ride through the vast landscape of tech solutions. ⛰️ I invested a significant amount of time and energy into it, but ultimately realized that overanalyzing every option is a waste of time. ⏳ More often than not, the differences between technologies are subtle and go unnoticed by the end users. 🤷

So, heed my advice fellow heckers and avoid falling into the same trap I did.

Choose the tools that you're familiar with and enjoy using, create a minimum viable product that simply works, and then refine the details as you go.

Finding the Ultimate CMS 🔍

Finding the ideal CMS was quite the rollercoaster. 🎢 First, I was going to go with MDX to keep things local. ( MDX is a fancy way of writing markdown with added React component perks. ) It was looking promising, but I realized I missed having my content and code separated. So, I thought about setting up a Strapi app, but then I found out that Heroku won't be free soon and the whole setup was becoming a hassle. 😪 So I started searching for a hosted alternative and let me tell you, I couldn't find anything that could match Strapi's versatility.

But then, drumroll 🥁 please... I stumbled upon Hygraph CMS! 💕 It's got all the perks of Strapi but with the added bonus of a cloud-based setup, so no configuration necessary! You can create modules and posts in markdown and there's even a fantastic playground for crafting those GraphQL queries. And the best part? Their community/free tier is extremely generous. 🎉

Accessibility 🧍‍♀️

I made a conscious effort to design this blog with accessibility in mind, so that everyone can comfortably use it.

Responsiveness and browser zoom

• Starting from the basics - the whole website is responsive and should work well on both phones and 4K screens. It should also not break if you use browser zoom or reader view.

Colors

• This blog supports both light and dark theme, and I was trying to make sure that all colors have sufficient color-ratio, without making the contrast too high.

Keyboard navigation

• I did some testing with Accessibility Insights to make sure that all elements are focusable with Tab and that there are no focus traps. Finally to make your experience a bit better I have added some keyboard shortcuts and visual cues that appear once u press Tab

Content structure

• I was aiming to use semantically correct tags so users can easily navigate through page landmarks, and heading structure should be quite healthy.

While I tested this site's accessibility using Accessibility Insights, there is still room for improvement in the future. I will continue to make updates to ensure that everyone can enjoy a seamless and inclusive browsing experience. 🦋

Performance 💥

NextJS is fast out-of-the-box, so the challenge was not to break it. To optimize the bundle size for production, I'm using Preact and loading all the bells and whistles with lazy-loading. This means they are only loaded when they are actually needed, thus avoiding any delay in the initial page load.

Additionally, I carefully chose external packages using BundlePhobia.

The end result is quite satisfying, with a 100/100 rating from Google LightHouse 🚀, four times over 🥳.

Hosting Made Easy 🧁

Choosing a hosting was a piece of cake, thanks to the big brains 🧠 behind NextJS who also happened to create the best hosting platform out there: Vercel 💥 It seamlessly connects to your GitHub repository and Hygraph CMS has a ready-made integration for Vercel, making it super easy to use. 💯

Vercel boasts a user-friendly interface, top-notch analytics 📊, build logs and tons of build-in integrations. When paired with Checkly (the tool that checks performance before every deploy), it's the ultimate choice for programmers heckers 🐙.

Comment System 💬

Having a way to engage with my audience was crucial for me, as thats one of the main reasons why I'm even building this blog. After some research I found two great options: Utterances and Giscus.

I ultimately decided to go with Giscus over Utterances because it's powered by GitHub Discussions, while Utterances uses Github Issues. (And I don't want to clutter Issues tab with comments)

With Giscus, each article generates a new discussion on GitHub where all comments are neatly organized.Thanks to GitHub Authentication there's no risk of bot-generated spam. On top of that it supports markdown, with familiar Github code highlighting and lazy-loading for faster page loads. 💨

I can't wait to see what kind of conversations will emerge in the comments section! 🤗