The new web stack behind Frontend Masters is an absolute pleasure to work with! 😀
The new system was built system with two goals in mind:
Fast websites deliver the HTML content immediately and don’t block this with script parsing, style loading, or 3rd party content. The best way to achieve this, is to use a static site generator like Gatsby, Jekyll or Hugo.
By using a static site generator, your website visitors will get served prebuilt HTML files. When they request a page, it doesn’t need to be rendered on the server dynamically (like WordPress does out of the box).
With static generators, your sites are fast by default.
Our new website achieves this by serving compiled static HTML files built with Go’s static site generator, Hugo.
From there, we modified Hugo to render templates on the fly. This process enables us to use the same template we did for the static site but now hydrated with user data if the user is logged in.
What we ended up with was a system that gives us the best of both worlds. The site serves the user the static files if you’re visiting the site anonymously (which makes the ⚡️ site super fast), but if you’re logged in, you get the same templates rendered with your user data on the fly.
Overall our webpage test results are pretty good. 😀
There’s more we have planned to improve performance, such as building the JS & CSS assets into Cloudfront and updating the caching rules on them.
Why is the new system fun to work in?
We’re using Webpack to build local file changes and BrowserSync to push those changes into the browser. This is such an amazing developer experience because it means I can have several different browsers open at different sizes and have them all update as I develop! 🤩
Developing the logged in vs. logged out Hugo templates is super smooth as well since all of our data is in local YAML data files. These YAML files are what get replaced on the server when rendering the dynamic pages. Developing the logged in pages is as simple as editing the local YAML
auth.yml file and switching the logged in property to
This means we can switch out data in local YAML files to update any number of states inside the templates – one template to rule them all!
It’s a lot of fun to work in and I couldn’t be more pumped about the new system…go, team!