Naming your Webpack chunks helps you understand the contents of each bundle of code, and keep consistency between deploys. In this post, we look at named outputs, including dynamic imports, split chunks, and common chunks.
Is Webpack telling you your bundle sizes are too big? Is all of your ReactJS code in a single app.js bundle? In this blog post, I look at why you should try code splitting and how to split your code up into smaller chunks.
Do you or your users get a ChunkLoadError after your deploy updates? If you use code splitting and dynamic imports, old code can cause this issue. Here's how to fix it in React.lazy() with a custom function.
If you have a sticky or fixed position header with a textarea or a contenteditable element, the soft keyboard can push it off the screen on iOS devices. Not good if you need it to stay visible during editing. Here's how you can fix it.
Do you need to create a drag and drop file upload component in React? This blog post has you covered. Build a component that listens to drag events, handles drops, and falls back to the traditional file picker.
Want the convenience of easy access to a sticker header, without it getting in your way all of the time? Here's how you can hide your sticky header when scrolling down, and get it back as soon as you scroll up!
In this blog post, I share a ReactJS hook you can use to listen to the scroll direction of the browser. Is the user going up or down the page? Now you can always know! Unless they stay still!
Regex groups are super useful when you need to replace specific patterns in strings. In this blog post, discover how to use multiple groups to perform simple (and complex) replacements.
Take your regex further by breaking it down and accessing specific parts of your match with groups. Find out how you can create and use groups inside your regex with match() and matchAll().
Image files can get big, so you might want to think about reducing image sizes when you let users upload photos on your website. Here's how you can use npm packages like sharp and multer to handle files and images in Node.js.
TextEdit might seem like a basic text editor. It is simple to use, with a minimal design, but it does more than it first appears. You can use the Insert Pattern feature in Find and Replace to get a word count, character count, and some pretty complex replacements!
On static sites, your back end is totally separate from your front end. But you might be leaking information with your API calls. Here's how you can use Netlify redirects to reverse proxy to your back end services (and why you might want to).
Static sites means static content, right? But if you run a blog, you might want to schedule content to maximise your productivity and consistency. Let's look at how you can schedule your posts for the future by adding dates and updating your build process.
All the best static site providers give you continuous deployment from Git. But what about your images files? Should you store them in your Git repository too? Noooo! Don't do it! Here are some solutions for image storage without bloating your repository.
How can you schedule static site builds? Run a cron job! But if you don't have a server, how do you run a cron job? Do you need an extra tool or service? If you already store your code on GitHub, you have everything you need. Say hello to GitHub Actions.
NaN isn't something you will often (if ever) write into your code. But it can crop up from time to time. And when it does, you can't check for it in the same way you could check for other values. Because NaN does not equal NaN. Are you confused? Don't be! Let's get to know NaN.
I recently updated a bunch of npm packages on one of my websites and got rid of over 30 vulnerabilities. I was over the moon - until my Netlify builds started failing. And the problem was my Node version. Here's how I found the problem and fixed it.