Tuesday, 16 May, 2017 UTC
Summary
Last week we released v7 of Scotch.io. This makes seven versions in 3.5 years! This was a big redesign for us since it is the foundation for where we want to go in the future.
The main points we wanted to drive home in this redesign were:
- Faster! Almost as fast as the fastest site on Earth
- Mobile speed. Google is very particular about mobile speed this year.
- Combined platform. Completely on Laravel now!
- Easier to find content. Search and real-time filtering (thanks Algolia)
- Provide organization across all content (between guides/courses/tutorials)
- Easier commenting and community growth (thanks Spot.IM)
A main feedback we got from visitors to the site is that they weren't completely sure what Scotch.io was. Is it about the scotch alcohol? It looks like it's some kind of programming. Is it a place to drink and code?
One thing we wanted to do a bit more of was branding. Small thing like adding the home page banner and a little blurb in the footer should go a long way.
Design is something we like to have fun with. Maybe it's because we did the redesign in spring this year, but we wanted to go light and fun this time around.
Here's our previous designs for reference:
v1 too ugly for a picture
v2
v3
v4
v5
v6: Added School and Pub
v7
Reading Experience
Our reading experience has always been an important point for us. Spending hours choosing a font is something that we do with every design. For v7, we landed on Nunito. Rounded and playful, easy to read, and works well with the light and fun design we had in mind.
We also put a bit more emphasis on the code blocks (there's a drop shadow and subtle background on them to make them pop).
For reading experience, we are very particular about our typography sizing:
- Line length: 80-100 characters
- Line height: 1.65
- Font size: 19-20px
Here's a great writeup that mirrors our thoughts on the subject: https://uxplanet.org/typographical-dilemmas-the-experiment-on-positive-online-reading-experience-78e2f1897109
Speed, Speed, and More Speed
As with all other projects, new features get added, features get taken away. Old code is left to hang out in random places. Towards the end of v6, things felt a little sluggish to us.
We went back to the drawing board and came back with the following improvements:
Mobile Speed and SEO
With Google emphasizing mobile speed more and more this year (they are even using it to rank SEO), we wanted to make sure we were ready for the future. SEO is a big deal for us and we try to stay ahead of the curve in that regard.
I know it's not the end-all-be-all metric, but Google's PageSpeed metric is fun to try to rank high. We got our mobile rank up to a 99. Look at the reason we get docked that one point! Let's just blame Google for this one! Great improvement considering our old site was ranking somewhere in the low 80s.
Things are a little lower on the desktop side with a score of 97. The reason for the docks here is for third-party JavaScript that we don't load on mobile devices.
Check the Google mobile friendly test to see how your site ranks also:
AMP
Accelerated Mobile Pages (AMP) is something that we wanted to add in. It's more geared towards news organizations in my opinion, but if Google thinks sites should have it, then we're happy to add it in. AMP is essentially a very pared down version of your site that has to follow very strict guidelines. The result is a much faster mobile site that Google can push more prominently in search results.
See the differences between an AMP and normal mobile site.
Far Smaller Payload
The JavaScript for this version of the site clocks in at a tiny 22.2KB (minified and gzipped). Removed jQuery in this version and went vanilla JS. If you haven't worked vanilla JS in a while, give it a shot. It's a blast in ES6. Check out our Getting Started with JS for Web Dev course.
The CSS comes in at 30KB (minified and gzipped). It's interesting that the CSS comes in at a heavier size than the JavaScript. Might need to strip away some things there.
We pulled in a few parts of Bootstrap (mostly the reset) and a flexbox framework we wanted to give a try called Bulma. After working with it a bit, I highly recommend giving it a try.
50KB for the both the CSS and JS was the goal we set and I'm happy we came very close to it!
Almost Everything is Cached
We heavily utilize memcached and redis to cache things. Helps bring our server's application times down to an average 30ms. That really helps to bring our TTFB (time to first byte) down below 200ms.
Here's some before and after stats thanks to SpeedCurve:
This is also a little skewed because the old site had full HTML caching and it's being compared to the current site which doesn't yet have fully HTML caching. We're still figuring out the best possible option to add this in. We've been testing Varnish but configuring that with the site authentication and dynamic features has been a challenge.
Here's some payload stats:
Overall, a solid step in the right direction! I could talk
HTTP/2 Improvements
HTTP/2 has some great features that we've been able to implement very easily.
Multiplexing:
The ability to pull down multiple file requests in one TCP connection. You don't have to bundle and send your users one giant file anymore. Each page only sends the necessary files it needs!
Take our Courses and Tutorials pages for instance. The Algolia library needed to make all that real-time goodness work is 200kb. It doesn't make sense to load all that on pages that won't be using the files.
Server Push:
Normally you would send a document to the browser. The browser would parse it, find the
<link> and <script> tags, and then go find the corresponding href and src. This is a time consuming process. With Server Push, you can set a header on the response and tell the browser what files to go get immediately. This adds up to be some awesome savings during the browser render.On the Tutorials page, notice how the assets have the Push next to them in the Initiator column:
Now compare this to one of our other sites Scotch Box. Notice the lookup takes about 50ms instead of the immediate 5ms. Not the most significant timewise, but that's a solid 90% savings!
Combined Platform
This is something we've wanted to do for a while now. We used to have the three branded sites:
- Scotch.io: Main blog. Built on WordPress
- Scotch Pub: Writing platform. Built on Laravel
- Scotch School: Premium video courses. Built on Laravel
We are still fans of WordPress. If you use it correctly (don't add every plugin under the sun) and understand how to build your own efficient themes, it can be a phenomenal tool. It helped us start this blog by just letting us write and not worrying about the underlying platform creation.
The main reason we went the Laravel route is to have more customization in the writing platform and the video courses.
It's all Scotch now!
We ran into some confusion with the branding of the three parts. Now that we've got everything on Laravel, we've done away with the subdomains. Everything lives on the main
scotch.io domain now. No more school.scotch.io or pub.scotch.io. This will be better in the long run and will help for SEO for those that are writing their posts with us since the main domain is more powerful than a subdomain. Your posts will live at
Easier to Find Content
https://scotch.io/@coolio/my-post-slug!With 578 Tutorials, 28 Courses, and a lot more on the way, we wanted to make it easier to find content. Great content started getting buried and we'd like to help them rise to the surface again.
With the help of Algolia, we've gone real-time filtering on our archive pages. We'll be adding more filters and improving this section greatly in the coming weeks.
Go ahead and give it a try. Let us know what if you like how it works!
Synced Up Content Between Guides/Courses/Tutorials
This goal hasn't come to full fruition just yet. I believe we have the groundwork for it though. The goal has always been to be one of the absolute best learning resources on the web. Now that we have all this content, I feel there's a disconnect between it all.
The flow of how things will go is:
- Guides will be the top-level
- Courses will be the premium guided content
- Tutorials will be high quality written content
There is also a disconnect between finding related content from tutorials to courses to guides and that's something that we'll be working on.
Commenting and Community Growth
With this redesign we've switched away from Disqus and over to Spot.IM. All old comments have been ported over and this will be an experiment that we'd love to get feedback from you on.
The main reasons for the switch:
- Disqus is slow. It loads a lotlotlot of scripts. This didn't work well with our speed goal.
- Spot.IM provides a great commenting platform
- Spot.IM provides a great newsfeed feature to see discussions happening across the site (the plus icon on the right side of the site)
- Spot.IM provides a great "popular in the community" widget
Here's the newsfeed feature:
We're really excited to use Spot.IM and see if we can get more engagement and great conversations going. See you in the comments!
The Future
The mission forward is the same mission we've always had:
Provide the highest quality tutorials for learning how to code.
We've been working at the tutorials and publishing a great deal this past year. Now that the Courses are in the mix, we introduced Guides to show a path of learning. We'll be building the Guides out more so you can see that grow from here moving forward.
A Giant Thanks!
Thanks so much for all your support! Your feedback and participation in the Scotch community has turned this tiny side-project into something we never dreamed was possible!
Thanks to everyone that's found our little blog and has stuck around whether in Slack, on Twitter and Facebook, and in the comments and forums.
It truly means the world that you, our amazing readers, have come from around the world to learn to code and fight the war on bugs with us!