August 24, 2021 Smashing Newsletter: Issue #315

If you’re interested, we also have a free online workshop by Alba Silvente and Christian Zoppi on How to Migrate From WordPress To A Headless CMS. In the workshop, Alba and Christian will show how to migrate content from WordPress and create reusable blocks and custom workflows with a headless CMS, powered by our good friends at storyblok.

In the meantime, let’s take a look at some useful case studies that hopefully will help you save time and avoid headaches.

— Vitaly (@smashingmag)

1. Gorillas: A Navigation Case Study

A React-based solution that uses Next.js to build pages and deploy them statically with Netlify. That’s the foundation of the new Gorillas website. The site itself is rather simple with only a couple of pages and not much interaction, its main goal is rather to showcase Gorillas’ branding as the service expands across Europe. However, there’s an aspect that is worth taking a second look at: navigation.

Kitty Giraudel shares an interesting case study about how the navigation on the site came to be. Designed as a dropdown, it relies on <details> and <summary> without JavaScript and switches to a more flexible solution when JavaScript kicks in. The case study explores aspects like closing the navigation, preserving landmarks, using CSS to apply filter to the background of an element, as well as an elegant skip link that neatly integrates into the design. Lots of valuable takeaways guaranteed. (cm)

2. Migrating From JavaScript to TypeScript

So you’d like to finally adopt TypeScript to a legacy codebase with hundreds of JavaScript files. Where do you even start? That’s exactly the challenge that the AirBnB team had to deal with. On their path to migration, they learned a few things and Sergii Rudenko explains some of these findings in his article on migrating to TypeScript at scale.

Rather than partially migrating file by file and fixing type errors, the team went all-in by taking the entire codebase and moving it to TypeScript at once and adding some any types and @ts-ignore comments to avoid compilation errors. Along the way, they built ts-migrate, a tool for migrating a frontend app to TypeScript which you can use as well. The article also hightlights many fine details of migration and other tooling the team has built to avoid unexpected surprises.

You can also watch a talk by Brie Bunge about the migration, or take a look at a simple guide for migrating from JS to TS, a brief overview of pros and cons along with a series of 15 video clips by Jeremy Likness. Hopefully, this should have you covered! (vf)

3. Automating Refactoring With VS Code

If you want to save you precious time or feel that the refactoring process itself is overwhelming, there’s a useful little VSCode extension that does the job for you: Abracadabra.

Abracadabra automates refactoring in JavaScript and Typescript, quickly and safely. It can handle more than 35 automated refactorings, such as Extract Variable, Extract Type, Flip If/Else, and Move to Existing File (you can get a complete overview of all of them on GitHub). Once installed, the refactorings are available through VS Code’s command palette. (cm)

4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. 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.

For example, we have Rémi Parmentier’s workshop on building modern HTML emails. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.

• Designing The Perfect Navigation UX
  with Vitaly Friedman. August 31 – Sep 1.
• Architecting Design Systems Workflow
  with Nathan Curtis. September 2–10.
• Vue.js: The Practical Guide Dev
  with Natalia Tepluhina. September 14-28.
• Jump to all online workshops →

5. Refactoring CSS And Going Headless

Bloated code, duplicate code, unused selectors, unnecessary hacks — we’ve all dealt with CSS codebases that had technical debt like this before. To prevent it from accumulating and causing severe issues down the line, it might be a good idea to consider refactoring.

If this idea sounds daunting to you, Adrian Bece wrote an article series in which he shares tips for tackling the challenge: from auditing a CSS codebase’s health, discovering its weaknesses, and convincing management to invest time and resources into the process in part 1 to planning out the refactoring strategy in part 2.

If you’re wondering if it might make sense for your project to migrate to a headless setup to improve performance further and gain more control over the application, Alba’s article has got you covered. She shares a step-by-step guide on how to migrate WordPress to Storyblok Headless CMS, why you might want to do it in the first place, the problems that could arise during the migration process and how to deal with them. (cm)

6. Tips For Migrating To Next.js

Do you plan to migrate your React app to Next.js but you don’t know where to start? Bernadetta Fryczkowska wrote a helpful article in which she explains why and how to migrate to Next.js. Perfect for developers who aren’t familiar with Next.js yet, Bernadetta shares an overview of Next.js and its advantages before she guides you step by step through the migration process.

During the migration process, you might encounter specific use cases in your application that aren’t covered in the official documentation or a migration guide. For those instances, Rinat Rezyapov’s article might be of great help. He shares his experience from migrating projects to Next.js and covers things like folder structure refactoring, importing charts and animations that use Web API, or storing authentication tokens. Two for the bookmarks. (cm)

7. Scaling Microsites With Next.js

How do you adapt non-SSR friendly code into a multi-tenanted service that scales to almost every microsite? This was the challenge that the team at Smallcase faced. Shubham Singh recently published a case study in which they share insights into their migration to Next.js.

The case study dives deeper into the migration process itself and issues they faced along the way, their new microsite architecture, and the overall benefits they observed with Next.js: improved SEO, better performance, improved Web Vitals, out-of-the-box TypeScript support, and improved developer velocity and productivity. A great overview of using Next.js at scale. (cm)

8. Front-End Case Studies

How does a framework or technology solve real-world problems? And how does it work at a large scale? Case studies are the best way to get answers to questions like these. Andrey Romanov curated a list of technical talks and articles about real-world enterprise front-end development.

From companies ranging from Airbnb and Atlassian to Zynga and 1Password and topics covering everything from migration and refactoring to managing design tokens and testing the accessibility of emails, the list is a treasure chest for every developer. (cm)

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

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.