JS230 Side Project: Website Redesign
Recently I decided to rebuild my website, as I thought it would be an interesting challenge given all of the frontend work I had been doing for JS230 (DOM and Asynchronous Programming with JavaScript), the final course in Launch School's Core Curriculum. And as it turns out, I'll need to put together a personal website as part of the prep work for entering Launch School's Capstone program, so it looks like I'm ahead of the curve on work I'll need to do anyway. [1]
For years I had been using the publishing platform Ghost to power some version of a blog and personal website. However, I had never been in a position to customize it to any meaningful extent; I simply picked a theme and then stumbled my way through making basic CSS edits via Ghost's 'code injection' feature. This feature gives you a setting (by way of a text box) that allows you to override your theme's CSS by 'injecting' your custom edits into your website's <head> element. But if I wanted to have full control over the structure and design, I would need to know JavaScript as well as the templating language Ghost uses, Handlebars.js.
Lucky me, as I've been learning just that — extensive JavaScript as well as Handlebars — so I set out to build a custom Ghost theme from scratch.
Designing a Custom Theme
Well, to say that I designed a theme from scratch isn't entirely true. I used a bare bones starter template, Undefined, which provides the essential structure of a theme for developers but without any styling. Think of it like plain HTML documents that give you just enough markup to get a minimal website up and running. The difference is that these are .hbs (Handlebars) files that allow you to write Handlebars template expressions inside what would otherwise be plain HTML documents.
Towards the end of JS230, the coursework introduces templating with JavaScript using Handlebars.
Now that I had experience with Handlebars I was able to make sense of both the structure and functionality of templates in Ghost, in addition to implementing the more sophisticated CSS I had been learning. In particular I was able to understand how partial templates work, create my own templates, and use and create helpers to add functionality to the design. These are all critical elements for piecing together a well-structured, highly functional Ghost theme.
And three to four days later I had created more or less the design you see now.
Switching to Gatsby, Learning React and GraphQL, and Just in Time Learning
It turned out that redesigning the Ghost frontend was rather painless. Launch School's coursework is both rigorous and thorough, and I had recently been doing a lot of frontend work as part of JS230, so I was well prepared to tackle designing Handlebars-based templates. I won't say it was too easy, but it was easy enough that I wanted to push myself a bit further with the redesign.
So what could I do?
Out of the box, Ghost gives you both the backend CMS and the frontend design, just as other CMSs like Wordpress. But it also has a solid API that enables you to decouple the CMS and use a different framework for the frontend (using the CMS as what is often called a headless CMS). In other words, you could host an independent frontend and then source content from your Ghost installation to that frontend via the Ghost API, limiting use of Ghost purely to content management.
There are lots of ways to run a headless CMS. Years ago I had come across Gatsby, and while it was intriguing because of all of the benefits that come with JAMstack architecture and static site generators, at the time I just didn't know enough to build a frontend using it. That intrigue was reignited earlier this year after watching a presentation about Gatsby from a Launch School alumnus who's an engineer at Gatsby. It also turned out that Gatsby has hired a lot of Launch School graduates over the years, so I thought it would be an interesting project to learn Gatsby and see if I could implement it as the frontend of a headless Ghost installation.
To make it a little easier, Ghost has a Gatsby starter template that I used as a starting point. However, as you can see in the demo, the starter template is quite different from the design you see now.
In order to reimplement my design using Gatsby I had to learn React and GraphQL, neither of which I had any previous experience with. But that's the beauty of Launch School: you don't just learn languages and syntax; you learn how to learn. Because of Launch School's pedagogical approach, which focuses on mastery of fundamental concepts in software engineering as well as how to learn those concepts, it unlocks a skill called 'Just in time' (JIT) learning, which enables one to learn a new language to a productive level in a very short period of time.
Of course, that doesn't mean I became an expert in React and GraphQL overnight, nor is that the intent of JIT learning. What it did though was enable me to learn enough React and GraphQL to, in a relatively short period of time, redesign my website with a Gatsby frontend. Using the starter template as a guide, along with a combination of Gatsby, React and GraphQL documentation, this process took about a week and a half.
Building Features with JavaScript and CSS
One of the cool things about being at the end of JS230 is being able to build interactive features using JavaScript and CSS. Here are some of the features I was able to implement using what I learned from JS230:
| Feature | Implementation | Notes |
|---|---|---|
| Responsive Menu | CSS media query | Depending on the size of the viewport, the navigation menu is displayed as a row of links (desktop) or is hidden with a hamburger menu icon in its place (mobile). |
| Display Mobile Navigation | JavaScript event interface | Once the standard navigation menu is hidden on mobile devices, I used JavaScript event listeners and handlers to display and hide the navigation links. |
| Post Feed Animation | JavaScript event interface | I used JavaScript event listeners and handlers to display and hide the double chevron icon on hover. |
| Contact Form | Asynchronous JavaScript | I use a service called EmailJS which requires use of an asynchronous function to send form data upon submission. It also required learning how to integrate Google’s reCATPCHA service so that a successful HTTP response was sent only upon submission of the reCAPTCHA form. |
| Contact Form Response Message | DOM and Asynchronous JavaScript | Depending on the response received from the EmailJS server, I triggered a ‘failure’ alert window or used DOM elements to replace the form with a ‘success’ message. |
Nothing earth-shattering, but it demonstrates on a practical level some of what I’ve learned in JS230. The key thing is that I went from knowing essentially nothing about frontend design to having full control over my website using rather sophisticated technologies.
Looking Ahead
For now I’ll leave my website as is, as I need to start preparing for the JS239 assessments— one written and one project-based. However, at some point I’d like to add some additional features such as:
- Dark mode
- Algolia powered search
- A ‘Projects’ directory
Of course, that last item assumes I have projects to showcase. I’ll spend this fall engaged in Capstone prep work, and I plan to include some projects as part of that work to display here.
Thanks for reading, and if you have any feedback or questions about the new design, don’t hesitate to leave a comment below or drop me a note here.
I'll be entering the Winter '23 Capstone cohort, which starts in January. ↩︎
Comments