Side projects are a good way to enhance your programming skills and broaden your experience. You can learn a ton of things with usually no restrictions on what language, IDE, technology, etc. to use. I just launched my new side project: hypevizz.com, a data visualization blog built on Firebase, and I would like to share some pieces of it.

The idea, name & logo 💡

Some time ago I had this idea of building a service that visualizes data gathered from the music industry. However, this seemed like a massive undertaking for me so I pivoted this idea to create a non-specialized data visualization blog. This is a much more attainable goal and allows much more freedom in terms of topic.

Once I settled with the idea I had to come up with a name. When looking for a name I try to figure out one that's not already taken from the .com top-level domain. A good place to check this is the domain finder of any .com domain registrar, I used godaddy.com. Another thing I did was verifying whether the username "hypevizz" was taken on Instagram, Twitter, or Facebook (luckily it wasn't on either).

Next, I created the logo. I rarely create logos, but when I do I try to make the best of it. In my opinion a logo has to be very simple and distinguishable so I just went with a special font and the name itself (see the cover image). I skipped creating a custom graphic, icon, or symbol because I'm just not skilled enough to do so. I simply used the first letter "h" from the logo as the favicon and profile picture on social media.

The technology 🔥

Since the primary focus of this project is not earning money (yet?), I try to minimize the cost of it. Hosting a website or a web service is rarely free, or when it is free it comes with limitations. I found that the Firebase Spark Plan suits my needs: it is free with no time limitation, but with some data transfer and/or request per day or month type of limitations. When starting out a new service or blog you wouldn't expect hundreds of thousands of requests per day so it's perfect in the early phase.

Blog-like websites can be (and probably should be) very static. I decided that the posts/articles will be static HTML pages, but the home page that kind of serves as a dashboard will be a Single Page Application. I generated a React App with Create React App for the SPA part, then created some templates and npm scripts for drafting/publishing/updating posts. Firebase Hosting serves the SPA, posts, and any additional media (mostly images), and a Firestore database is the "glue" between the SPA and posts.

The npm scripts are used to render posts, update RSS/sitemap/database and deploy to hosting. They are written in TypeScript and executed by ts-node. The posts are basically pure HTML, CSS, and JS. Of course there are some common primitives like the header fragment, styling, and some utility functions. The post content resides in GitHub along with the source code.

Visualizations 📈

I built a custom "player" for the visualizations, you can see it in the first post. It's keyboard-enabled and has three buttons. The first button is a Play/Pause button (Space) that pauses the visualization. The second button (c) is used to capture and save the current frame as an image. The third button is the Full screen button (f, or double-click) which does exactly what you think it does.

To create the visualizations themselves D3.js is one of the go-to choices. I heard about D3 a lot of times throughout the last few of years, but I never really understood what it was. With this project I finally figured out what it is and how it works. Sites like d3-graph-gallery.com, bl.ocks.org, observablehq.com helped tremendously.

Creating Content ✍️

All these pieces provide a platform on which I will try to produce content with a reasonable cadence. The good thing is I'm already full of topics to cover, the bad thing is that I don't always have the time. It took me a hundred days to get here from the first commit, I hope it won't be so long until the next post.

I've set up the hypevizz Twitter and Instagram accounts to keep contact with people. I also maintain an RSS feed for people using RSS. The Facebook account is still under the works.

I will be creating some more content on different platforms to get a better reach for the blog. Of course one of them is going to be my dev.to where I will be sharing (in a shorter form) some tips and ideas I used. My CodePen is going to be the place where I will be putting the code snippets and demos. I will be using some other ones on a more ad-hoc basis.

Final thoughts 😌

I hope to be as enthusiastic about this project as I have been in the past few months. In theory the easy part should come now, but we'll see 😄. Let us know in the comments if this writing has inspired you to create something new!

Thank you for reading this far!