Here’s a useful abstraction on top of custom events that let you more easily set up typesafe channels to communicate between. This can be used in React like a hook: It’s worth noting that the events collected in the hook are cleared when the component is unmounted, and it only start listening once the component […]
Category Archives: Tips
Some interesting Typescript features I’ve learnt while writing NPM packages
Typescript is great, for many reasons. I think everyone will agree with that statement if they’ve given it a proper try. While writing type-safe NPM-packages, I’ve learnt a few tips and tricks that can help you utilize it for it’s full worth. Generics are magic Generics let you essentially tell Typescript that “I’m not sure […]
Watching the size of a React element
I’ve recently come upon the task to replace a React accordion component from a UI library. This turned out to be an interesting challenge that has taught me a few things about MutationObservers and layout effects. The problem If you’re going to animate between states, you’re going to need hard values. There is a trick […]
Working with mouseMove on the front-end
Mouse movement events can initially be really hard to wrap your head around, but bear with me, and follow along as I’m going to show you how simple it really is. Let’s track mouse movements… …Relative to the entire page 💻 With this tiny bit of Javascript, we’re getting the coordinates of the mouse whenever […]
Searching the inner text content of nested react nodes
I came across an interesting challenge recently while I was building a flexible searchable list component. I wanted it to work so that you could pass any JSX or react components into the list, and be able to search it just like a normal string. I came up with a neat recursive function to help […]
Syntax highlighting with React & WordPress
THIS ARTICLE IS OUTDATED. I’m currently using a different, better setup. Please refer to this article instead. The problem: WordPress’ REST API supplies the blogpost’s body as a string of HTML. This makes things a bit more complicated when trying to add most of the react syntax-highlighting packages, seeing as most of them are wrapper […]
Beforeunload on a React component
Say you want to warn users before closing the page, but only when a specific component is loaded, here’s what to do:
Notifying users about updates (create-react-app)
In serviceWorker.js there is a function that sits around line 74, called installingWorker.onstatechange. Inside of the function there is a condition checking if the state is “installed” and then logging out a message for the console. The goal here is to simply insert your own code below to notify the user of this outside of […]
Merging WordPress’ REST API with React
In the past, my go to method of quickly spinning up a blog for myself has been just directly posting into my database, spinning up a quick API in PHP and then rendering the page with some sort of Javascript framework (I prefer React). I’ve since realised, though, that using WordPress’ REST API is essentially […]