Handling API data in React - all the tools you need
Fetching data in React is easy. fetch is all you need, right? But what about loading state? Well, just use useState to keep track of it. And error state? Uhm, another useState? And...
Read moreIntroducing TinyDeskDB: Your New Go-To for Tiny Desk Concerts
Explore the creation of tinydeskdb.com, a small search engine for NPR's Tiny Desk Concerts. Discover how I gathered data, designed the interface, and implemented features to help fans...
Read moreScheduled web scraping made easy: using Playwright with GitHub Actions
Web scraping is a beautiful thing. It allows you to extract data from websites that don't provide an API. Use it to monitor prices, collect data for research, aggregate news from your...
Read moreDeveloping Azure DevOps extensions: Good Practices
I've spent a good amount of months developing an Azure DevOps extension for a customer, and I'd like to share my learnings so you can have an easy start.
Read moreContinuous file saving in React
Here's a short tutorial on how to implement saving custom content to the file system of an end user. This not only gives us the opportunity to save the file once, but by working in a...
Read moreUse MUI (Emotion) sourcemaps with Vite
When running npm run dev, the project runs locally and everything works fine. The only thing that doesn't work out of the box, are MUI sourcemaps. For those of you who don't know,...
Read moreReact useImperativeHandle: Let the parent trigger functions of a child component
In React, the way of communicating between parent and child components is usually done in 2 ways; the parent sends `props` to the child and the child can send data back to the parent...
Read moreHow to fix "The AzureDevOps SDK is already loaded" for the azure-devops-extension-sdk package
I recently ran into an issue when developing an Azure DevOps extension. I was using the azure-devops-extension-sdk package get data from the Azure DevOps project I was running the...
Read moreConsuming multiple GraphQL endpoints using Apollo Client
View on GitHub Imagine this, you spent day and night working on the perfect web application. You worked together with the backend devs to craft the smoothest and most stable GraphQL...
Read moreNx + Apollo Server: Automatically generate Typescript types
I created a repository where I show how to automatically generate Typescript types from a GraphQL schema using Nx. This works both while running the 'serve' and the 'build' commands...
Read moreDeploy your Node.js Telegram bot as an Azure Function App
How to create and deploy a Node.js Telegram bot as an Azure Function App using GitHub Actions, and how to develop the bot in a local development environment...
Read moreFront-end development with mock APIs
NodeJS mock server: JavaScript client: --- If you've ever worked with APIs or backend developers these scenarios might sound familiar: - My front-end doesn't work because an API...
Read moreClient-side caching strategy and offline support for SSR websites using the Service Worker
How to cache your client-side assets using the Service Worker when working with a server-side rendered website...
Read morereact-redux-toolkit-starter: a jump-start for every hobby project
A simple React+Typescript+Redux starter project including a neat folder structure, fetching data and global state management...
Read morereact-context-mutex: lock a function and prevent it from running multiple times unwanted
I recently stumbled upon an issue I had to fix. I had created a React hook with a `useEffect` function in which I executed a fetch call. The data was then put into a Redux storage. All...
Read moreRun E2E JavaScript tests in Azure Devops
End-to-end tests are useful for simulating and validating a real user scenario. It is even more useful if you can automate these tests in a continuous integration service like Travis...
Read moreTesting your React components with Jest and @testing-library
There are several different ways of React component testing, but I chose for this particular combination because `create-react-app` uses Jest as their default test...
Read moreUse immer for state manipulation
Have you ever come across a situation where you have a deeply nested state and want you mutate a single property on the deepest level? You could do that using destructuring, but that...
Read moreCreate a simple API caching layer using Typescript
Caching API requests is something that's often forgotten, even though it can possibly improve performance and reduce use of resources. The implementation can be really simple, as I...
Read moreUse the Netlify CMS select widget with dynamic values
What I wanted to achieve was a custom select widget, filled with dynamic values, thus not set in the config.yml. The default select widget of the Netlify CMS is very useful though,...
Read more