Building Pawlean 2.0

Why rebuild? 

If it ain’t broke, don’t fix it. Apart from this one exception for Pawlean of course.

My current theme and set-up wasn’t broken at all. In fact, I was quite comfortable with it; I had been working on building WordPress themes (PHP) for as long as I could remember. Sure, it has it faults and things that frustrate the hell out of me but so does most tools! I didn’t need to rewrite and rebuild my whole blog set-up, but then…

I went to HackMed’s hackathon this year and partnered up with Matt to build a React app about food. 

It was my first time actually seeing a React project to the end. I had attempted to learn React a couple of times, but gave up because I thought that I would never actually use it. How wrong was I?! I totally fell in love with the learning React throughout that weekend that after the hackathon (and winning a prize ) I turned to Matt and said that I was keen to rebuild my blog in React. I had no idea how it would actually work with WordPress and if it was even possible!

Matt ended up looking into it a lot and discovered that WordPress has an API…

---

Our workflow

Heavily inspired by my current development rotation where we practice Scrum plus Matt’s workflow as a Software Engineer, we set up a Kanban board on GitHub to track tasks in the form of tickets which we then assigned.

Just like a regular sprint, we focused on moving as many tickets from the left to the right as quickly as possible. We made sure that each ticket was labelled (cosmetic, new feature, bug etc) and as detailed as possible. But I have to admit by the end, when we were adding new tickets, we did get a bit lazy 🙈Throughout the build, if any new ideas came to us, we would add it to our backlog and prioritize.

Our board was maybe unnecessary and a little overkill for a project-team of two people, but I loved how it kept us both accountable and focused on getting the job done.

The tech

WordPress API

The wordpress API is really extensive and fully-featured. It means you can send requests to it and then display the data for your pages with whatever technology you desire. WordPress does a lot of stuff for you. It’s a content management system (CMS), but also handles displaying your site for you. Instead, we use the API to get the data to display the site with Next.js. WordPress is then simplified to being just a CMS accessible headlessly through an API.

Next.js

We picked Next.js to use React. But it also comes packed with a bunch of awesome features out of the box, some essential for a wordpress blog.

Firstly, server rendering. This is great for SEO so that search engines can download normal HTML. Search engines don’t run much javascript so they won’t index that content well if at all.

Server-side rendering (SSR) is great, but so are single-page applications (SPA). We made a SPA at HackMed with create-react-app. But that wouldn’t work for a wordpress blog. It wouldn’t render direct HTML so we would lose all SEO benefits. We get the best of both worlds with Next.js. Single page applications AND server-rendering. All in one. It initially renders HTML on first page load, then it re-hydrates the page with React after the page loads. It can then do normal client-side routing and be a normal SPA. It even uses the exact same code to render for the SSR and the SPA.

And because it’s React, we get all of the magic from the React ecosystem. It’s all just React components and we can use any that exist on NPM.

Sass (.scss)

Heavily inspired again by the work I’ve been doing in my development rotation, we decided to jump in and use Sass for this project. Allowing us to create things like variables, mixins and all the other wonderful functions that make writing CSS a lot more fun!

We totally have a variable called $pawlean that is the Pawlean Purple you see all over the blog!

Neat features

These are just some of my favourite features we built.

📈 Progress bar and loading spinner

Matt and I noticed that when you click on a link that took some time to load, there was no real indication that the page was loading which can lead to people clicking away. Indication that something is happening is important! So we built a progress bar and loading spinner to help with that. We used the NProgress progress bar.

📄 Year/Month Archives load in the same page

This isn’t something necessary, but has been something I’ve been wanting to do for the longest time! I like how it allows navigation of my year/month archives in one page, it feels seamless and enjoyable (to me anyway) to go through. It’s like re-reading old pages of my diary! 

🕹 Hover over div

This came about from a few Twitter suggestions. Originally, there were two points you can click to get to a post – via the title or the post image. Now, you only need to hover over the whole div to get to a post and along with it, experience the post images go from grayscale to coloured! This was one of those, “why didn’t I think of this before?” moments. 😂 Totally improving the experience.

🌓 Dark mode

You can now toggle to see Pawlean in dark mode. The toggle also moves when clicked on with the power of CSS animations. 🌟

Feedback

Throughout the building process, we got all of you to contribute! By giving your thoughts, feedback and being our testers, we had the opportunity to build and ship something that users feel comfortable navigating around and are generally happy with.

Getting feedback whilst it is still in the “version 1.x” was difficult for me especially! I’m such a perfectionist and have traditionally much rather ship something I see as perfect, but this whole experience has changed my mind. It was a pleasure seeing everyone give our test site a go, give us constructive feedback thereby letting us deploy something we’re all very proud of.

---

Overall

It is surprising that this is only mine and Matt’s second project together! I thoroughly enjoyed working with him on rebuilding my blog from scratch. We both learned a lot from each other, even if that learning came after a hell lot of frustration (totally eyeing you up Archives page. 😩) This will definitely not be the last you see of us working together – we’re a dream team! 

Overall, I’m feeling happy with the rebuild of my blog. Pawlean 2.0 now rocks cleaner code giving it a light-weight, faster, optimised feel which totally rocks. 🤘🏻

If you do have any more feedback to give, we’re more than open to them! Leave them in the comments below. Thanks again to everyone that has contributed to this! It’s been a long 5 weeks, but has been so rewarding. ✨