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
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
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 i
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 de
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 imag
Next.js' API routes are handy, but they're unfortunately limited when it comes to reading static files. Here's a quick guide on how to read markdown files in a Next.js API route.
While re-building ironeko as a static site I got to the point of needing to rework how my sitemap is generated. I previously wrote about outputting XML content from Next.j
