New design for 2021

Taking everything that I've learned from 2020 about what works and what doesn't work on the blog, I have made adjustments and upgrades to the site for 2021.

Overall the website has new design elements and a more streamlined look. Every page got an overhaul in this new v2.0. Some might be subtle changes, such as font family and color, while others are more drastic and involve new features, which I will go into down below.

But more than anything, sometimes making drastic changes is really the only way to move forward and to see where it leads.

Clearer goals

The biggest change really is in how the overall website "feels" to new users. The previous design essentially mimicked your everyday news site that you find online these days. There was a chronological listing of articles with a corresponding thumbnail image and a quick blurb or two for each article.

The biggest issue with that particular design choice was that this blog now features over 600+ articles and the homepage at most would only show around 12 or so at a time. After about a month, many articles became buried in different pages and would mainly rely on Google for traffic.

This made it very challenging to present old (but useful) content to everyone. It also made it difficult to group content together in a relevant way, mainly because the content on this blog is varied. There are how-to articles mixed in with API implementations mixed in with personal coding stories.

While tagging mechanisms are popular on most websites, they stop being useful when 100's of articles have the same tag. This new design should address that.

Collections

Collections are the solution to the content quantity problem. Collections are not 'tags' in a sense. These are more hand-picked and curated groups of articles that are more closely related to a particular topic.

Not only is the resulting collection more organized, but the possibility of creating new groups of related content is much easier now. If I want to create a collection for "React For Beginners" as an example, this is now built into the CMS and won't require any extra work. Whereas in the past, these articles would be scattered on different publishing dates and it would be the readers job to piece them together using the various tags and searches.

If an article belongs to a particular collection now, you will now see a new right-side panel listing all other articles in that same collection, making it seamless to continue reading relevant content.

You will also find that as you read content, the right-side nav will show you whether you have read a particular article already or not.

As more content is added to the website this year, this list will grow in side and in content with the hope that it gets more and more relevant to the readers interests.

Mark as read

Articles can now be flagged as 'Read' without you having to log in or create an account. At the bottom of each article, you will find the 'Mark as Read' button.

If an article belongs to a particular collection, you will see that it will be marked as 'read' for you moving forward. This is mainly designed with Collections in mind as some collections might include 10-20 articles in them which might require multiple days to get through. Or sometimes you might come back a month later looking for the same thing and now you will know whether you have been here before or not.

Again, the main goal here is to have collections in which a more complex and involved topic can be covered in multiple articles without a reader losing their place in the material.

Performance

Updates to the back-end code were big in this new rollout. This should improve overall speeds on the website, though don't expect any phenomenal numbers.

The biggest change here really was in server-side rendering versus client-side rendering. The original code was mainly designed with the JAMStack approach in mind. While this particular way of coding makes it easier to make updates on the fly, it also causes performance hits as AJAX requests are made one after the other causing various flicker affects at times.

This new design alters that a bit and goes back to a truer server-side rendering approach. Essentially, the server creates the content and delivers it as a whole. This both allows for caching of the content on the server and avoids any flickers as well on the client.

What's to come

There are many new features in the works currently for 2021 as well. These include potentially members-only content, in which I will cover more advanced and long term topics and projects to certain users.

And a new 1-1 messaging system, in which you can send me your questions or feedback through a secure and personal link just for you.

And as always, if there's any feature you would find useful, send an email to walt@thatsoftwaredude.com and just let me know.

And lastly, if you have any feedback on this new v2.0 design, please let me know as I am more than happy to hear what you think about the changes.