Pagination, Comments and Storyblok
Me
As developers, we’re often told not to solve problems that have already been solved. This leads to us using libraries, algorithms and designs that were developed by somebody else. The problem with this, however, is that we have to conform to the original developer’s implementation and way of thinking. It becomes especially problematic when their solution is less than ideal. So eventually, you have to take matters into your own hands and create some custom solutions. Let’s take a look at some of mine on blog.tinomuzambi.com.
Some Context
If you haven’t already picked it up, this blog’s gonna be very technical so you’ve been warned. blog.tinomuzambi.com is a site I built myself from the ground up. Initially the site was purely static HTML pages styled with CSS. I eventually rebuilt it with React to take advantage of using components and the dynamic aspects of wrapping HTML with JavaScript.
From upgrading to React, I also upgraded to Sass to take advantage of partials, mixins and Sass functions. Bringing all this together, my editor of choice is Visual Studio Code and notable extensions include Emmet, Prettier and ES7 React snippets. Now that we have some context, let’s get into pagination.
Pagination
When I initially built the site with React, I opted for jw-react-pagination because it got the job done and offered a good range of customisation options. But one of the major problems it has, and a problem in general with using other people’s components, is that if you want to override the styling, you’ll find yourself putting !important everywhere in your CSS which every dev knows is generally bad practice. The way it handled changing to the next page of items was also very confusing and making it work with my implementation wasn’t the most straightforward thing in the world.
So I did yarn remove jw-react-pagination and created my own pagination component. In creating it, I remembered why we use other people’s components. Turns out creating a pagination component isn’t so straightforward. It involved way more Math than I would’ve liked and a lot of JavaScript trickery but like a true dev, I placed console.log(“here”) everywhere until every bug was squashed.
Here it is in action if you’re curious:
Comments
No blog is complete without a comment section right, so when I was looking for a comment section solution, two options came out on top namely, Facebook and Disqus. I ruled out Facebook cause it’s Facebook and I also wasn’t thrilled about forcing a reader to need to have a Facebook account to make a comment. So Disqus it was.
The Problem
Disqus was actually a great solution and worked like a charm when my blog was still static HTML pages but, it wasn’t flawless. When I made the move to React, however, Disqus didn’t seem to like it. I lost all the comments on my earlier blogs on the React site and if that wasn’t already bad enough, it would sometimes show comments that don’t belong to that blog. I knew a custom component would be the solution but thinking of the complexity of one deterred me for a while. Until one day I mustered the energy to rm Disqus.jsx.
The Solution
There were two primary problems to solve with a comment section. The first was tapping into a database to store comments as well as commenters' data. The second was an authentication system so readers can be identified when they comment. I decided to kill both those birds with the stone called Firebase.
Firestore
For storage, I hooked into Firebase’s Firestore which is a NoSQL real-time database which makes interacting with it a breeze. For the structure of the data, all the comments are stored in one big JSON object which at the root is an array and each blog’s comment data is an element of the array. Each comment has data linked to it such as a timestamp for when it was made, the reader who made the comment, the number of likes it has etcetera.
Some reader data is also stored, nothing hectic though. Only the display name, email (for sending emails when someone replies to your comment) and profile picture linked to your Google account, if you choose to sign in with Google that is. This data is stored in a similar manner to comment data.
Firebase Authentication
Authentication is a very complicated thing to implement, I learnt this the hard way when I did it manually for my Table Time project. So for my comment section, tapping into Firebase’s authentication was a breath of fresh air. I settled for two signing in options: with Google and anonymously. Everyone has a Google account right, so it made sense to use that as the main sign in option. But for the five people who don’t have one, or if you wanna be lowkey, signing in anonymously is an option, though that comes with some limitations we’ll get into a bit later.
Everything Else
Once the basic functionality was in place, I also added some creature comforts such as liking comments (you can’t like your own comments though because no), editing your own comments as well as deleting them. Anonymous users don’t get some of these though, anonymity comes at a cost. Anonymous users can’t like, edit or delete their comments. Readers can also reply to other comments forming an indented comment structure (see picture below). This can only go two levels deep though for reasons which we won’t go into today, or ever.
In terms of styling, I opted for a look that’s simple yet visually appealing. Rounded images and curved corners are a staple here. I also followed a colour palette and font palette that is used throughout the entire site so it blends right in. Everything also shrinks and feels right at home on mobile.
Storyblok
This last thing isn’t really a custom component but something else I implemented to make life a bit easier for myself. Storyblok is a Content Management System (CMS). What CMSes do is provide an intuitive interface by which you can modify and add content to a site. Previously I had to go into the code and create files for each new blog, now I can simply use the Storyblok interface and add an entry in my blogs folder and it’ll (like magic) just appear on the site.
Their API allows for easy integration between the code and the Storyblok platform and their docs do a really good job of explaining how to get the data just the way you want it.
That’s a wrap for some of the latest improvements to blog.tinomuzambi.com. The code is available on GitHub if you wanna poke holes in it. Lastly, feel free to use the new comment section below to let me know your thoughts and keep your eyes peeled for a new (probably non-technical) blog coming soon.