“There are only the pursued, the pursuing, the busy and the tired.” – Nick Carraway
I admit it, I was busy. Even worse, I was tired. I love WordPress, I love Vue, but Bootstrap…not so much. However, I wanted to build something a little bit different, a little bit more modern, and a whole lot faster.
It’s not like I don’t have some background in this. At my $oldjob, we decided to experiment with the concept of the JAMStack site with a news site project we were given after a last minute scope change required it to be its own site. Since we started building it in a Vue app that was chassised on our corporate WordPress site and a deadline of 2 months (Yikes!), we decided to keep with Vue and use Nuxt to build out the first iteration, using the existing WordPress site as a data store.
It worked, was stable and fast, despite the short timeline, small team with other responsibilities, and no hosting budget (Hello, Gitlab Pages). The concept worked, and the site got love from our customers and other stakeholders, including the folks at Gartner. Even better, it proved that by investing in technologies like the JAMStack, your dev teams can rapidly develop sites that can scale.
“Reserving judgements is a matter of infinite hope.” – Nick Carraway
Fast-forward a year and I found myself at a new company, working on the same old stuff with plans to convert to the JAMStack. WordPress, some Vue components, Bootstrap. I wanted to do something a little different, so I decided to convert my personal site from Vue on top of WordPress to a WordPress-data fed site built on Gatsby. Gatsby is a React-based Static Site Generator framework that can build both static JAMStack sites and server-side rendered sites that search engines love.
Considering it’s my own site and I have the luxury of time to implement any features or content, I decided to level up the challenge by migrating away from Bootstrap and onto TailwindCSS. Tailwind takes Bootstrap’s utilities and put it on steroids. Although familiar with the concepts and some React, this was indeed my first rodeo with Gatsby, React, and Tailwind.
However will this work?!
The Gatsby part was fine. I understood Static Site Generators and Single Page Application libraries from my work with Vue and Nuxt. I’ve studied enough React to be dangerous. But branching out beyond Bootstrap (after close to a decade of using it in some form) and the promise of not needing to build out custom classes on top of it?! I thought there was no way that it would work. Like, how could I possibly convert a site with at least 500 lines of custom SCSS on top of Bootstrap to a site with ~40 custom CSS lines?
But boy, did it work…
Welp, I did it in 2 days (this is a very small, simple site). After struggling with my WordPress host’s security headers blocking Gatsby’s image download (buh-bye), I one-click migrated my site over to Pantheon (a much better WordPress hosting platform) and was off to the races.
After re-building the data and tying it to React components inside Gatsby, I needed to style it. I could have done scoped styles or CSS-in-JS, but my brain works with separate style files- decided to continue on that track for this project. Luckily, Tailwind support customizable classes, can be easily extended with Layers, and thought of almost everything to make this work with writing minimal custom CSS. To be fair, my site is simple. However, I was still floored.
For instance, in the tailwind config file, you can setup your fonts, custom sizing for classes, and the like that will be integrated into their CSS library. In addition, you can extend it using layers, which add additional classes that can extend what you already have in Tailwind. One of the wildest features was the ability to use arbitrary sizing, colors, and the like that are incorporated directly into the class name.
For instance, if you want your div to be 45px tall and 30px wide as a one-off, simply add it to the class like so:
Granted, if you’re using this as part of a large-scale design system, even if built inside of components, it’s not the best idea to use free-form classes everywhere. But the cool thing is that you can. And I did here because I wanted to see how much I could push it.
“So we drove on toward death through the cooling twilight.” -Nick Carraway
Well, maybe driving towards death is a little dramatic. But I did manage to get a functional site up in 2 days that looks pretty darn close to my existing site. What didn’t even come close; however, was the performance gains on Gatsby.
I used Gatsby cloud to host the new front-end, keeping my old site on a subdomain for comparison purposes. The original Vue site always performed well on desktop (98 on Lighthouse), and decently on mobile (86 on Lighthouse). Running a brief test saw a mere 1% gain on desktop, but pushed my mobile score up by 6 points (92). Core vitals improved across the board, most likely due to it loading a static site and having the images lazy loaded from the site itself vs. a CDN.
“I’m p-paralyzed with happiness.” – Daisy Buchanan
Overall, I was very impressed with the end result. There’s still more to do (social/meta tags, porting over the Coronavirus game, and maybe a few new features), but this has been a really cool experience that reaffirms my love for coding.
Next Steps
Since I did this quickly to get my head around the concepts and frameworks, there are things that I will be exploring adding. Since WordPress often delivers content as an html blob, yet it’s all entered/built-out on Gutenberg, I would like to add Gutenberg block support to my WPGraphQL to help better tie in the Gutenberg blocks to the front-end layout. This will connect ease of publishing into safer delivery of content.