I've been waiting to write this post for a very very very long time. Work on this v8 site started in February of this year. This is version 8 in the 4.5 years we've been in existence.
Table of Contents
- Site speed was slow for international users
- Finding content was difficult
- Better author tools for coding tutorials
- Major Features
- Speed! Speed! Speed!
- Pages fully cached by Cloudflare
- Real-time search everywhere
- Better Discoverability
- New Dashboard
- New Writing Tools
- Writing Templates
- A Better Video Experience
- Conclusion and Future
Rebuilding Scotch has always been a fun project for me. Getting to try all the latest and greatest toys in a site. Aside from trying new toys though, here's the main reasons I decided to start another new site:
Site speed was slow for international users
Since our servers live in New York, we saw site loading speeds of 5-10 seconds. For international users however, they were seeing a 20+** **second load time. Unacceptable!
Finding content was difficult
We now have over 400+ guest authors. We were often publishing these amazing articles and then seeing them get buried down the feed. On top of that, our site search didn't surface the right content.
Our main nav in the previous site only had three links in it to find content. People didn't even know we had three major sections for:
- Guides: Think docs for specific technologies
- Courses: Videos to build real-world projects
- Posts: Written tutorials
Better author tools for coding tutorials
Those were the three big reasons for jumping to another redesign. This v8 will be the foundation for Scotch moving forward and I swear I'm done redesigning. If I start to try, somebody take away my keyboard.Essential Reading: Learn React from Scratch! (2019 Edition)
These are the features I'm most excited about:
Performance is a feature. With Google using site speed as a ranking factor, this was very important now more than ever. Using SpeedCurve, we can see the differences between old site and new site.
I'll be doing a whole guide on web performance soon, but here's the gist of what we did technically:
- Fully cache entire HTML
- Responsive and optimized images with Cloudinary
- Multiple lazy-loaded JS files with webpack
We moved closer to a JAM stack type setup without completely moving to a JAM stack setup. v8 is JAMstack-ish! There's all this great work happening around static sites generated with tools like Gatsby and Hugo. We can have that fun too and cache our entire site.
Backend is still Laravel. Frontend is React. All API communication between the two using JWTs.
Pages fully cached by Cloudflare
Cloudflare is a brilliant service that helped us grow Scotch from a tiny Digital Ocean box to what we are today. Up until now, we've had Cloudflare only cache assets like images/js/css.
A BIG performance boost can be found in letting Cloudflare cache your entire siteincluding the HTML.
This effectively means that Cloudflare can serve HTML directly to your users without having to hit your server.
By turning on full page cache through Cloudflare, we've been able to save server usage. We may even get to downgrade our servers and save some dough.
We had worked on a little real-time search in v7. It was only on our
/tutorials page though. In v8, real-time search courtesy of Algolia is everywhere. *Give it a try!
- The header search bar
- The home page
- Courses and Posts pages
Please excuse the ugly gif color representation
And the header search:
With the new header and also real-time search, I'm hoping that readers can find more of what they need. A good exercise is:
Try finding your favorite Scotch post and see if it comes up!
The header also has links to popular tags and sections of Scotch. I'm hoping the nav let's people see that we have more than just the written tutorials. More to be added soon!
The new dashboard is found at https://my.scotch.io and is fully a React SPA. The dashboard was moved out of the main site repo and into it's own repo.
The new dashboard is authenticated using JWTs and powered by the Laravel API.
The goal is to have the best writing experience and tools for coding tutorials.
This is the foundation of our new editor and we'll be adding more to this in the coming weeks. Here's a couple things we're looking at
A lot of posts that you want to write will have the same foundations. I'm also sprinkling in my favorite best practices for writing each type of post. Coming soon.
Our courses and videos have gotten a big redesign to be much simpler to click around.
Playlist on the right side just like you'd expect from any of the viewing sites.
Moving forward, I think we've landed on a good foundation for all the goals we have for the coming year. Let me know in the comments what you think. Is the site fast for you? Can you find what you're looking for?
Here's some things I'm looking to add in the coming weeks:
- Learning Guides. Everything you need to learn a language/library/project in one centralized location
- Post Ideas: Submit and vote on what posts you'd like to see written next
- Job Board
- Cool Stuff: I get asked a lot what kind of tools I use, I'll write it all here
Like this article? Follow @chrisoncode on Twitter