Announcing Codeforgeek Version 5 – One of Our Major Upgrades

We redesigned Codeforgeek and this new version comes up with lots of major upgrades which will set the path for the future of Codeforgeek. This is our fifth iteration and in this article, we will discuss the redesign process and features.

The Goal

In our fifth iteration of Codeforgeek, we had one very important goal and that is PERFORMANCE.

We wanted our site to be fast, quick to access in every device even on 3G network.

The second major goal about this redesign was to move away from WordPress.

Why moving away from WordPress

WordPress is a great tool and without a doubt a go-to software for the bloggers and website developers. I love WordPress and it’s simplicity in everything.

Why move away then? Well, I tried almost every caching plugins and technique out there to supercharge WordPress and improve performance. I did improve it though on a level but it wasn’t what I wanted.

Second, I believe that a tightly coupled architecture of WordPress doesn’t allow us to scale it the way we want.

But, I still believe WordPress has one of the best Admin section out there to manage content and that’s the reason I still use WordPress admin bar.

Decoupling WordPress

Developing your own content management system is a huge task and I think unnecessary as well. All I wanted is to build a Server which can handle and deliver the content in milliseconds to the browser.

I researched and ask around about the ways to decouple WordPress and found following doable options:

  • Move to new CMS – like Ghost/Contentful, etc.
  • Use a framework like Gatsby to build the front end using WordPress as a backend.
  • Build a custom Server which serves content but still use WordPress to manage content.

I liked the last approach.

One of the best ways to achieve impressive performance is generating HTML files way before and serving it on the request. We call them static sites which don’t require any database calls or loading dynamic things like comments, reactions, etc.

However, I am still not comfortable to convert my site into a static site. I have some plans for the future and static sites won’t fit into it.

Our approach

I decided to build a custom Server in Node which serves content by generating HTML files from the local database. We cache that HTML in Nginx and ask CloudFront to cache it all around the world for static site speed.

This is just a gist though. It’s more complicated than that. I will explain the complete architecture and design process in a separate article.

Current stack

Codeforgeek V5 runs on the following stack:

  • Content Server: Node.js
  • Web Server: Nginx
  • Template generation: Pug
  • Databases: MongoDB and Redis

It’s simple and works.

Features

Codeforgeek provides the following features:

  • New design: We redid the design from scratch.
  • Performance: We load the homepage and article page in 1-2 second range.
  • Comment system: We move to Disqus for comments.
  • Article metadata: We provide page views and time to read details.
  • Sticky table of contents: When you read the article, you can always navigate back and forth.
  • Courses: We built courses as a single-page app.
  • Services: We are starting development services on a contract basis.

The navigation of a website should be neat and simple. Hence, we divided major chunk of our content into articles and courses. We redid our Start here page for new visitors.

We added new topics and there will be tons of content on each of them in the future.

categories

Articles now show how much time an average person needs to read a particular article. Dev’s always reads faster though!

time to read

Course section is now a awesome single-page app. Check it out.

courses

Performance

As I said, performance is the major thing we aimed for in this design. Check out our homepage speed.
homepage speed pingdom

Check out our article page speed.
article page speed pingdom

Checkout Google score for our homepage.

The speed may differ based on the location of the globe but it’s in the range of 1-2 seconds. (Sometimes ads do take time to load, hence page speed differ location wise.)

Conclusion

This redesign was a great learning curve for me. I learned so many tricks and techniques during the development journey and I am going to share all of that with you.