Browse all posts

Learning from the New Experimental CRA to Next.js Migration Codemod

As web development evolves, many developers find themselves wanting to migrate their Create React App (CRA) projects to Next.js to take advantage of features like server-side rendering, static site generation, and improved routing. Today, I’m breaking down an exciting new experimental codemod tool that has recently landed in the @next/codemod package designed to automate this migration process. Experimental CRA to Next.js Migration Tool This transformation has recently been added to the official @next/codemod package as an experimental feature, making it easier than ever to migrate existing CRA applications to Next.js. Being experimental, it may continue to evolve as the Next.js team gathers feedback from early adopters. ...

July 26, 2021 · 5 min · 986 words

Cypress vs. Playwright: The Evolving Landscape of Modern E2E Testing

The State of E2E Testing E2E testing has traditionally been a headache. Selenium tests are notoriously brittle, and while unit or integration tests catch a lot, they often miss real-world user flows. Cypress helped change that narrative. With its clean API and time-travel debugging, it quickly became the go-to for many developers. That said, Playwright has been picking up steam—especially with teams that need serious cross-browser support. Released by Microsoft not too long ago, it takes lessons from older tools and builds on them, filling gaps that Cypress hasn’t fully addressed yet. ...

May 10, 2021 · 4 min · 786 words

Code Splitting with @loadable/component

The Code Splitting Dilemma The React team recognized bundle size challenges by introducing React.lazy() and Suspense for component-based code splitting. This native solution works great for client-side rendering, but falls apart when you need SSR: // This works fine with client-side rendering const LazyComponent = React.lazy(() => import('./LazyComponent')); function MyComponent() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); } If you’re using Next.js, Gatsby, or any other SSR solution, the code above will throw the dreaded error: “Suspense is not supported during server-side rendering.” ...

April 30, 2021 · 4 min · 651 words

Beyond the Network: Building Truly Resilient PWAs with Offline Support

Progressive Web Apps have been with us for a while now, transforming the way we think about web applications and blurring the line between native and web experiences. But despite the technology’s maturity, I’ve found that many developers continue to overlook one of the most powerful PWA features: offline support. And according to recent announcements from the Chrome team, this oversight is about to become a much bigger problem. The coming offline requirement If you’ve deployed a PWA recently and checked your console, you might have noticed a new warning: “Page does not work offline.” This isn’t just a friendly reminder—it’s a harbinger of significant changes. Starting with Chrome 93 (scheduled for release in August), Google will be changing their installability criteria to require offline functionality. Without it, your PWA simply won’t be installable. ...

February 5, 2021 · 7 min · 1356 words

GitHub Actions: Powerful CI/CD with Persistent Growing Pains

Over the past year, GitHub Actions has transformed from an exciting beta feature into a core offering that many developers (myself included) have eagerly adopted for our CI/CD pipelines. The promise is compelling: native automation workflows right where your code lives, with a generous free tier and an ever-growing marketplace of community actions. But as with any maturing technology, the journey hasn’t been without its fair share of turbulence. The Good Parts Let’s start with what makes GitHub Actions genuinely fantastic: ...

January 31, 2021 · 6 min · 1194 words