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.
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
Our previous editor was old school. A combination of textarea, wysiwyg, and some JavaScript. I’ve learned a fair amount about writing coding tutorials and think that the tools for writing these should be better. More on this in the coming months, but this new site was meant to be a foundation for all those cool new things coming.
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.
Major Features
These are the features I’m most excited about:
Speed! Speed! Speed!
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 did a writeup on How We’re Getting to 1s Speeds. TLDR: We are fully caching the HTML of our pages and serving globally using Cloudflare.
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
- Auth moved to JavaScript (React) and JWTs
- 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.
A caveat for doing full page cache through Cloudflare’s page rules is that all your authentication has to be done via client-side JavaScript. If you handle authentication server side, then an authenticated page may be served to future users that aren’t authenticated. This is similar to how you would handle authentication in a single page app.
Real-time search everywhere
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!
undefined
- The header search bar
- The home page
- Courses and Posts pages
Please excuse the ugly gif color representation
And the header search:
Better Discoverability
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!
New Dashboard
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.
It is hosted on Netlify, which is an awesome tool if you are looking to host any Single Page Apps. It was between Netlify and zeit’s now service which is also awesome.
New Writing Tools
With the help of genius Samuel Oloruntoba (@kayandrae07), we’ve been able to build out a new editor that is far more modern than our last one.
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
Writing Templates
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.
A Better Video Experience
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.
Conclusion and Future
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
Bonus
I’m super stoked to have this tiny feature. Hover over the logo in the top left for the animated logo made by Luis Manuel (@lmgonzalves)!
Source: Scotch.io