Building Pawlean 2.0

August 6th 2019

Why rebuild? 

If it ain’t broke, don’t fix it. 

Apart from this one exception 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. 

Food-list
Food-list

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.

Our Kanban board for Project Pawlean 2.0
Our Kanban board for Project Pawlean 2.0

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.

Loading spinner and bar demo
Loading spinner and bar demo

📄 Year/Month Archives load in the same page

Archives demo
Archives demo

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.

Hover over div demo
Hover over div demo

🌓 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! 

Team Mattline!
Team Mattline!

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. ✨

Leave a reply





10 comments

  1. Mattsays

    Dream team ❤️

    1. THE best. 💜

  2. Megansays

    Wow, really cool! It looks awesome. I love the random touches of purple too!

    1. Thanks Megan 💜 I’m glad that you like it! The purple really adds to it too 😊

  3. Megansays

    Wow, I love all the new touches and stuff. And awesome how you just rebuilt it. Love the random touches of purple!

  4. This is a test comment. 😉

  5. Ashleysays

    Wow! Just wow! This look is so awesome! I love how quick it is and how nice and clean everything is. I’m picky about that kind of thing as well but I don’t have the will power to want to even make my own wordpress theme much less all this awesome stuff you and Matt have done. It is funny, I started off in the tech world thinking I would be growing in web design and coding but then started to find out how much I loved troubleshooting, hardware, and other things. Now I’m working in EMR as an analyst… how things change. haha

    1. Career pathways are never what they seem! I started out in life sciences and now loving the tech side of things 🙂

      I’m so glad that you like the new theme, we’re really chuffed with it!

  6. Janesays

    The features you have now are so cool! I don’t know anything about React, so I don’t know how it functions, but I like the new additions to your blog.~

    1. Thanks Jane 🙂 Glad that you like it!