From
smashingmagazine.com
Email Address
newsletter@smashingmagazine.com
Sent On
Tue, Aug 24, 2021 11:15 AM
Email Preheader Text
On refactoring CSS, migrating from JavaScript to TypeScript, optimizing for Next.js, and front-end c
HTML
On refactoring CSS, migrating from JavaScript to TypeScript, optimizing for Next.js, and front-end case studies.Issue #315 ⢠August 24, 2021 ⢠[View in the browser]( ð¨ [Smashing Newsletter]( Howdy Smashing Friends, As much as we love rebuilding projects from scratch, often itâs way too expensive and way too time-consuming. Yet the technical debt is there, so eventually we roll up our sleeves and launch a [big-bang refactoring project]( or perhaps a [migration story]( from one system to another. But where do we even start? And how do we architect our front-end to make the transition smooth? In this newsletter, we explore refactoring and migration, with some case studies and tools to help you get off the good start. [How to migrate from WordPress to a headless CMS](
Our new free workshop on [how to migrate from WordPress to a headless CMS]( with Alba Silvente. 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. [Gorillasâ nav: a case study]( Kitty Giraudel shares an interesting [case study]( about how the navigation on the site came to be. Designed as a dropdown, it relies on
and
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](. [Migrating from JavaScript to TypeScript]( 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]( 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. [Smashing Online Workshops]( Front-end and design can sometimes feel like youâre riding some pretty wild waves! Weâve got your back with [personal and inclusive events](. 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](. [CSS Refactoring]( 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. [My experience migrating projects to Next.js]( 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. [Scaling smallcase managersâ microsite with 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. [Frontend Case Studies]( 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) --------------------------------------------------------------- #8. New On Smashing Job Board - [UX & DesignOps Manager]( at Gravity Works Design (Remote) - [Product Designer]( at Kinsta (United States, Canada) - [Director]( at iDreamers Corp (Los Angeles, San Francisco, Palo Alto) --------------------------------------------------------------- #10. Our Recent Articles - [Free Open-Source Icons]( - [HTTP/3: Performance Improvements (Part 2)/a>]( - [Jamstack CMS: The Past, The Present and The Future]( - [How To Build An Ethical User Research Practice At Any Organization]( - [Creating An Interactive Gantt Chart Component With Vanilla JavaScript]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( ⢠[update preferences]( ⢠[view in your browser](
EDM Keywords (155)
zynga
written
workshop
work
wordpress
wondering
well
weaknesses
way
want
use
typescript
types
ts
topics
tools
tooling
tool
thought
things
testing
team
talk
taking
take
tackling
switches
support
storyblok
step
statically
soon
sleeves
site
show
shares
series
scales
save
safely
roll
riding
resources
relies
refactorings
refactoring
reading
rather
pros
project
productivity
process
problems
prevent
present
plenty
planning
plan
personal
perhaps
path
past
pages
overwhelming
overview
observed
newsletter
netlify
navigation
much
moving
move
migration
migrating
migrate
might
make
look
list
line
like
learned
launch
know
js
join
job
javascript
issues
interested
installed
hundreds
hopefully
help
heard
handle
guides
got
github
get
gain
future
framework
foundation
findings
file
feel
familiar
fact
explains
experience
expensive
example
exactly
eventually
emails
else
element
edited
dropdown
developers
details
designed
design
deploy
dealt
deal
covered
couple
control
christian
choose
challenge
built
build
browser
background
back
available
auditing
atlassian
aspect
articles
article
architect
application
another
animations
always
also
airbnb
advantages
adding
accumulating
accessibility
1password