How I Redesigned my Website the Way I Refactor Legacy Projects

2021-06-03

"Perfection is achieved, not when there is nothing more to add,
but when there is nothing left to take away."

This redesign was inspired by Little Prince, Don't Make me Think, Steal Like an Artist and Show Your Work.

What do designer and legacy cleaner have in common? The final product must work, be intuitive and bring value to the user. I realized the old design had many spaces to improve, and a lot of code text and "cool features" should be removed.

When we get a project to refactor in Rector company, the first 1-2 months we don't do any PHP or framework upgrades at all. We focus on preparing the environment, remove everything that is not needed for developers and business to grow. At first, it looks like we come to destroy the project by removing 30 % of it. But in the end, after solid and reliable code remains, we can move unbelievably fast with upgrades and pattern refactoring.

Deprecating Clusters - Use Words People Understand

3 years ago I wanted to write a little book about a single topic. I was too scared, so I created a new work instead. A word that is not for a book, not for a post. It's a collection of post on single topic - clusters. There was a section "Clusters" in the menu for the last 3 years, and it contained eight groups of posts. The initial feedback was confusion. I was confused, too. It was time to let go old fears and remove this section. Either write a book or a post.

Occams' Razor

I use this idea or rather technique during refactoring legacy projects a lot. If some external tool handles something better than our custom code, remove the custom code and delegate it to an external tool. We'll save ourselves from testing our code, maintaining it, and teaching it to every new programmer.

One example from a project I was mentoring just yesterday: a custom autoload that finds all autoload.php files across the root directory and manually includes them. It was around 200 lines of magic (at least at first sight). We remove this part and used composer instead. Now it's 5 lines and code is standardized. We will never have to think about autoloading again.

2600 Lines Removed

How did I apply Occams' razor to redesign my website?

• Google Search - there were two searches on the homepage, both with dummy website search - Could Google with "last year" filters beat this? Do people go to my website and only then google there? No, they just google instantly from the browser's URL field
  → Remove Google search and let people use Google instead

• Cleaning Lady List - the cleaning lady list was similar to clusters, just little side project with check-list of refactoring legacy. Thank you, Kerrial, for working on it and pushing it further. I didn't maintain it, nor used it myself, because every legacy project has its special problems
  → Remove Cleaning Lady list and focus on content

• Blog, archive, clusters... - there were at least three places to find posts. Why?
  → Keep it simple on a "blog" page.

• Tested posts - 2 years ago, I wrote a post about how posts should be tested in CI, so the content is easy to upgrade. In reality, this lead to 2 actions - first, I put a lot of work into making sure the content is tested, so the content itself was a bit neglected. Second, I was discouraged from creating tests for a new post because it was too much work. In the end, there were about 20 tested posts, so the coverage was inferior and not useful. Let's save this for a book
  → Tests for articles are removed

In the end, there are now fewer sections, less nesting, and more focus on content. You can read posts or get training. Simple. What changed in design?

Design With Focus on Content

What if we apply the refactoring legacy approach to the website design itself?

• Do we need 1609 Font Awesome icons for the content? I've checked the content, and 95 % of them are ✅ and ❌ emojis
  →Drop Font Awesome

• Do we need a special menu for mobile and website with fluid, responsible design (that often breaks on various platforms)? We need links that work for people - click and work.
  →Remove ul/li/nav/navbar/navbar-content mobile/laptop menu matrix and use simple a links instead.

• Do we need three font styles for titles? With bold, thin, size, margin, padding differences?
  →Use one font and different by size.

• Do we need jQuery? No.
  →Drop it.

Website is Dead, Long Live the Website

And the results? Simple, airy, with no clutter and content that is a joy to read on a laptop or in the tram.

Show Updated and Deprecated Posts

Did you know some posts get updated? Other posts are no longer valid and are deprecated to avoid spreading lousy practice as a way to go.

I'll write about reflection on past mistakes in one of my future posts.

10 months of Preparation, 2 Days at Coffee House

Do you know the 80/20 rule? 20 % of a project takes 80 % of the time to finish. It's not true.

I'm not sure if the stars were right, if I accidentally took some deep-focus drugs or if that was the right thing to do. I went to a coffee house in Tenerife at 10 AM. I'm thinking... what should I do today? I worked on a work project refactoring yesterday; Rector is running and released, and I already published a post for the week. Mmm, maybe I'll check what I can do on the website design.

I turned off my phone, opened my laptop, got a cortado (it's like flat white for Spanish), and started working.

Three hours later, I was tired, my battery was almost 0 %, and my table didn't have the electrical plug. The table next to me got it, but one family occupied it. Suddenly, when I was about to leave, they stood up and went to the counter. I thought... ok, I'll charge my laptop for 20 mins first. Suddenly it's 4 PM, and I'm leaving the coffee house with half of the website redesign done. Most importantly, with a clear vision of what to do next and how the website will look.

Don't you believe me? See the pull-request.

Do you ever have moments like this? I guess it was the right time and right place to do the right thing :)

How do you like it? Let me know and stay safe.

Happy coding!

---

Do you learn from my contents or use open-souce packages like Rector every day?
Consider supporting it on GitHub Sponsors. I'd really appreciate it!