Published on April 17, 2020

Confs Space v2

Confs Space v2

Quick Intro#

A platform to browse and learn about numerous technologies. It curates conference talks from hundreds of speakers around the world.

Current status: Active

Highlights#

  • Fully static website with 4500+ pages
  • Instant search across all talks
  • Performant pages
  • Show suggested videos relevant to currently watched one
  • Dark mode support

Tech Behind#

1. Static Site#

The version 1 of the site was using Gatsby as static site generator, for it's out-of-the-box performance benefits and data sources support. But as the content started growing, the build times increased drastically.

Not to blame on the framework, the primary reason for the increase in build time was the image asset optimizaton. This became as big blocker for me to maintain as the site started taking ~20 minutes per build.

In order to solve this, version 2 was completely rebuild from scratch using Hugo. Hugo was a champ in terms of build performance. The new version just took 2 - 3 seconds to build, which is super impressive.

This was a challenging feature to add, expecially when the site needs to remain static. I evaluated multiple approaches for search but finally decided to go with having a search index and using a client-side library to perform search.

The whole process is documented in a blog post here: Fast Search for Static Sites

3. Suggested Videos#

This was a nice-to-have feature as it can improve the time spent by user on the website. The initial implementation was basically using the Related feature thst came along with Hugo. This was quick to implement, but soon I noticed that the content was looping after two nested clicks. This means that the suggested content was very limited.

Confs.Space Related Content

In order to overcome this, I had to write a custom logic to overcome this. This came with a cost of build performance. The build time went upto 12 seconds as getting related content required to refetch all the posts. But this time increase was a good trade-off to have considering that it gives a better experience.

Performance#

As they say A picture is worth a thousand words, the below image talks more about how the site performs than I ever could.

Confs.Space Page Performance Insight

Biggest Learning#

I've build multiple JAMStack sites earlier based on usecases. But, this one was quite interesting as the output needs to feel dynamic to the user. From some feedback I received, it was clear that not most people can expect this to be a static site at all. This was big as it clearly showcases the limits of JAMStack.

🎉 Interested in Frontend or Indie-hacking?

I talk about the latest in frontend, along with my experience in building various (Indie) side-projects