If you've ever tried to add Typescript script to one of your Node.js projects to run it on its own from the command line, it's very likely you came across one of these messages:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:
Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
A quick search on Google doesn't help much. The solutions range from trying a variety of different tsconfig.json configurations and even adding "type": "module" to your
Skeleton Loading is the practice of displaying a mockup of a a part of your interface while data that is supposed to fill that interface is loaded. In theory this is no different than showing the user a spinning icon or telling them that you're loading something, but there is research that suggests skeleton loading tricks users into thinking your app loads faster than it does.
Beyond that, it's an excellent way to avoid parts of your
Next.js' <Image> component is a really impressive piece of engineering. It offers automatic image optimisation, all the SEO features you'd want from html image tags and some more arcane properties like blurDataURL, which is supposed to help Next.js display a low-res blurred image before loading its full-res version.
If that sounds too good to be true, well that's prob
Buttons and loading states are one of the most fundamental parts of any app or website. For me at least, I'd press a button to submit information to an endpoint so often that I found myself looking for easy ways to improve this action's UX.
My immediate thought was that it would be great to show a loading state and disable the button until the action had completed. Unfortunately doing this manually for each button looked like far too much boilerplate code.
Add a state to keep track of loading evrey time a button to submit is used<
I've previously talked about how to read markdown files from Next.js' API routes. However, it was only recently, while improving some of my blog's logic, that I realised the true value of this technique. So here's a simple guide on how to create an incredibly powerful content API from your Markdown files and double your build speed while you're at it.
According to the 2022 Stack Overflow survey, React has finally surpassed jQuery as the most used web framework. So while React undoubtedly still has a bright future ahead of it, a few questions remain unanswered with regards to how to best use React. One of the most popular debates is whether you should use Next.js vs Create React App, so here are my thoughts on the argument.
Why do we need Next.js and Create React App?
Atomic Design in React is an (allegedly) popular way of structuring React projects which is said to offer great scalability. Before 2020 I never worked on a project big enough to need something like this, but as Staffscanner's features grew I felt the need to enforce a more scalable structure. So here's some thoughts on my first year with React and Atomic Design.
How does Atomic Design work?
Atomic Design at its core is fairly simple. It mainly consists of dividing up your components depending
The modern front-end development world is far too complex... Or is it? The narrative seems to be that React (and other complex frameworks) should not be used for simple sites or small projects. But why? And is there even a downside?
Depending on which programming circles you frequent, you might be aware of this issue which often comes up when discussing the complexity of modern web-development: the overuse of complex frameworks (namely React, Vue and Angular) for simple projects like blogs and personal sites.
Specifically, this article was inspired by
While working with a Next.js API that uses Apollo GraphQL I found my queries were not completing and remained in a pending state indefinitely. Here's how to fix this annoying issue.
If you're trying to implement a GraphQL API on Next.js it's likely you've settled on using Apollo GraphQL Micro as it's perfect for use on Next.js' serverless API. If after implementing Apollo you found your queries getting stuck in a pending state it's because of a lesser known Next.js setting.
Go into the file where your GraphQL handler runs (for me it was pages/ap
Perhaps you've heard of the amazing Next.js Image component but found yourself lost when trying to implement it on your markdown blog. If so, it's hardly your fault. After all, Vercel and the Next.js docs don't give much away on how to use it. So here's a simple guide on how to use Next.js Image with Markdown or MDX.
The Image component is pretty fantastic:
It converts images to w
