How I Redesigned my Website the Way I Refactor Legacy Projects

Found a typo? Edit me

I have wanted to redesign my website since Autumn 2020. I felt it's overly detailed with attention shotgun feeling. Because of intensive && extensive work on Rector to make it better, I could not get to it on the book with Matthias and writing posts. With no deadline, there is no rush, right?

I had to hack around my brain to make it happen. It would be a shame to release Rector book on the old design, so I took the book release as a co-task.

The first hour I struggled with the redesign approach, I realized I could use the skill I use daily - refactoring legacy.

"Perfection is achieved, not when there is nothing more to add,
but when there is nothing left to take away."
Antoine de Saint-Exupery

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?





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?





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.


2016–2020
2021–?


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.

Updated post
Deprecated post


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!


Have you find this post useful? Do you want more?

Follow me on Twitter, RSS or support me on GitHub Sponsors.