Labą dieną Smashing Friends,

Legacy isn’t the most exciting matter in front-end or UX. We often speak about shiny new things, yet most products around run on legacy systems. These systems are slow, bulky, broken and unmaintained — but often business-critical, with a huge ecosystem of legacy dependencies on their own.

In this newsletter, we look into legacy — how to rebuild, refactor, redesign and migrate, both for front-end engineers and for UX designers. If you are working with legacy systems, hopefully you’ll find a few useful gems in there.

Smashing Meets Future of Design Systems, on Tuesday, Feb 27.

In the Smashing universe, we’ve just announced a few new (and free) community events — on The Future of Design Systems with Brad Frost and The Magic of CSS with Kevin Powell. We’d be absolutely delighted to see you there.

And as always, here’s a little reminder about a few thingies we’ve been tirelessly working for 2024:

• Free Workshop: Designing Search UX In 2024 🌎 with Vitaly Friedman — Feb 29
• New Online Workshops on UX, design and front-end.
• SmashingConf Freiburg 2024 🇩🇪 — The Web, Sep 9–11
• SmashingConf NY 2024 🇺🇸 — Front-End & UX, Oct 7–10
• SmashingConf Antwerp 2024 🇧🇪 — UX, Oct 28–31

Have a productive week, everyone — and hopefully you won’t have to struggle with legacy too much!

— Vitaly

1. Understanding Legacy Code

We all have to deal with legacy code, and let’s be honest, it’s hard. To help you tame messy codebases without breaking anything, Nicolas Carlo started “Understand Legacy Code,” a collection of articles, guides, books, podcasts, and talks for refactoring code you’re afraid to change.

Whether you’re about to dive into a large, undocumented codebase, aren’t sure if a pattern will make the code more maintainable, or you feel you’ve hit the point of no return where burning it all and starting all over seems like the best option, Nicolas has got your back.

His guide also dives deeper into questions like what you can do to make others care about the technical debt that is piling up and how AI could help tame legacy codebases. One for the bookmarks. (cm)

2. Legacy System Modernization

Legacy systems are everywhere, and even though their technology is outdated, they power critical day-to-day operations. Think of the pager still in use in healthcare today, for example, or federal organizations relying on old software. And while changing a legacy system also brings along risks, the effort is well worth it.

A great starting point for tackling legacy systems and transforming an enterprise for a digital future is the whitepaper that AltexSoft published. It dives deep into legacy system modernization, the challenges it brings along, and best practices for solving them.

Another comprehensive guide to a UX-based overhaul of legacy building products comes from UX design agency Koru. It helps you understand the business value of your legacy application and explores three different approaches to making it more efficient, scalable, and safer. (cm)

From our sponsor

Kiss Bugs Goodbye With Fully Automated End-To-End Test Coverage

QA Wolf gets web apps to 80% automated test coverage in less than 4 months. They build and maintain your automated test suite, plus provide unlimited parallel test runs.

Skeptical? A case study shows how Salesloft saves $750k/year in QA engineering + executes 300+ tests in parallel on every PR in minutes. ⭐ Rated 4.8/5 on G2. Trusted by Cohere, Napster, Gumroad, and many others. Schedule a demo to learn more.

3. Improving A Legacy Codebase

Probably every developer has been there before: You’re confronted with a legacy codebase and need to turn it into a healthy, maintainable project that doesn’t hinder your work. Where do you begin? Jacques Mattheij shares a roadmap that takes you through the complete process step by step — from making a backup to releasing your changes into production.

Jack Franklin also wrote a practical five-step guide to tackling legacy code. It helps teams prioritize updates and follow an incremental approach instead of a “big bang” release. A great reminder that legacy code is not a failing of an individual or a team and that we should learn to embrace it as an interesting technical challenge.

You want to dig even deeper into improving legacy codebases? Then Michael C. Feathers’ book Working Effectively with Legacy Code and Martin Fowler’s Refactoring: Improving the Design of Existing Code might be for you. (cm)

4. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

• Figma Workflow Masterclass Workflow
  with Christine Vallaure. Feb 1–9
• Live Interface Design Patterns UX Training (Spring 2024) UX
  with Vitaly Friedman. Mar 8 – Apr 5
• Resilient & Maintainable CSS Dev
  with Miriam Suzanne. Feb 26 – Mar 12
• Scalable CSS Masterclass Dev
  with Andy Bell. May 9–23
• Smart Interface Design Patterns Video Course UX
  10h-video + Live UX Training with Vitaly Friedman
• Jump to all workshops →

5. UX Migration Strategy For Legacy Applications

Planning ahead and putting users first is key to successfully migrating a legacy application. To help you master the challenge, Tamara Chehayeb Makarem shares her UX migration strategy for legacy applications. It goes beyond simply moving existing features to a new system and instead helps you build a strategic system that supports your business goals.

Tamara’s strategy consists of three steps. In the first step, you’ll identify the reasons for the migration and its impact on users. The second step involves choosing the best migration option for your context. Finally, the third step is all about outlining your goals and planning your strategic roadmap. A handy set of guidelines to help you ensure your new system is adopted and welcomed by users. (cm)

From our sponsor

Manage Your Projects And Resources With Our Modern Web Component Suite

By integrating with Angular, React and Vue or plain vanilla JS apps, the web can be a powerful application platform. Bryntum provides advanced UI components and dev tools for over 5000 companies in 70+ countries. Download your trial today.

6. Designing With Legacy

Having faced legacy in all major career assignments, Peter Zalman knows from experience that there is no single correct approach to dealing with decades-old product legacy. But a few common patterns can help teams make the right decisions, as he points out in his article “Designing With Legacy.”

In the article, Peter highlights the risks that a complete redesign and continuous improvements can bring along, putting special focus on an aspect that can easily be overseen: the users’ emotional attachment to the existing product. The article is also a great reminder that you’re not only dealing with a legacy product but also with a knowledge base that has grown over years and that can’t just be replaced with a shiny new design concept. A must-read to prevent you from hasty decisions that could do more harm than good. (cm)

7. News From The Smashing Library 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

• Understanding Privacy by Heather Burns
• Touch Design for Mobile Interfaces by Steven Hoober
• Image Optimization by Addy Osmani
• Check out all books →

… and we’re currently working on a new book: Success At Scale, shipping in February. Pre-order your copy or browse the complete library.

8. Recent Smashing Articles

• CSS Blurry Shimmer Effect
• The AI Dilemma In Graphic Design: Steering Towards Excellence In Typography And Beyond
• The Complex But Awesome CSS border-image Property
• Top Front-End Tools Of 2023

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook