This article is about a Norwegian educational initiative that I helped start up, Koding.no. For this reason, the article is in Norwegian. Kode24 skrev i dag om Koding.no, et nytt initiativ som jeg nylig har startet i gang. Koding.no sikter mot å bli en solid ressurs for nybegynnere som har lyst til å lære seg […]
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 […]
@ryfylke-react/toast is a lightweight headless toast library. The problem Most toast-libraries I’ve come over are generally very clunky and opinionated. Yes, you can customize the toasts through options and props, but it’s generally tedious, and you have to overwrite their existing styles. I’ve found that whenever I’ve needed to build a toast-system, I’ve ended up […]
I’ve been continuing to work on RTK Query Loader, on the side, since it’s inception 4 months ago. In that time, I’ve fixed some bugs, added some new features and written a proper documentation site. Interface updates One thing that I’ve thought about for a while, was rewriting the input/output format for the loaders. It’s […]
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 […]
A new package that I’ve made. What problem does it solve? Let us say that you are using redux toolkit, and utilising createAPI and it’s generated useQuery hooks. You might have found yourself in a situation similar to this: I have a component that needs data from multiple queries And depending on your preferences, you […]
So I’ve been working on this educational site, an internal project at my company. One of the things I really wanted as a big feature was a on-site code-editor that can run React-code. In my mind this seemed like it was a pretty big task, but it turns out it’s actually relatively straight forward. First […]
Before createAPI came out, my current team needed a way of cleaning up all of the loading logic around our async thunks. We were using @reduxjs/toolkit, with createSlice and createAsyncThunk. A simple solution to our problem was essentially adding a match on the extraReducer builder for any thunk that included “:load” in its name, and […]
Hi! It’s been a while. I wanted to write an article to explain what I’ve been up to lately, and share some hopefully interesting thoughts. Yearly write up Hopefully, I’ll be able to write more than one article next year. It’s been busy for sure, and just really a big change of scene. When covid […]
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 […]
I’ve made a real simple “hook + display component” library that you can easily implement whenever you want pagination. It’s easily configurable, customisable and also very lightweight at only 20.8kb. To install the library, run npm i @impedans/usepagination For documentation, see @impedans/usepagination on NPM
Here are a few tips and tricks I’ve picked up over the years that will help you create interesting and performant animations & transitions for your next project. Tip #1 – Some properties are more taxing than others The most common cause of laggy animations on the web comes down to this. Generally, most properties […]
My portfolio is, at heart, just a big hobby project. I love tinkering with the design, and it’s a nice workplace to try out new methods and designs. This time around, the main reason for redesigning (or rather recreating) my portfolio was the code-base. After working at Idean for several months with other colleagues in […]
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 […]
Moving on from “SUBComponents”, I decided to make a new component library that was lighter, more reusable and well more useful in general. All of the components are published separately on NPM, so if you find one neat little useful component – you can install just that. The components usually have no dependencies, but a […]
I’ve never had a real go at creating and animating my own SVG from “scratch” before, so I decided to test it out for a redesign of my artist-page. Creating the SVG I chose to use Figma to design the vector image, and I found an image from Unsplash to use for tracing. Using mostly […]
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 […]
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 […]
Just redesigned the landing page for haakon.underbakke.net. Here’s a self-contained component that only needs styled-components (and material icons cdn, if you want the same icons) installed to work, if you want to use it for yourself. The laptop also turns white (to contrast darker backgrounds) on @media (prefers-color-scheme: dark). https://codesandbox.io/s/laptop-animation-d70o1
I love the onClick-ripple effect that material design buttons offer. I decided to make my own button-component that inhabits this effect by default, but is also flexible beyond that feature. Here’s the result: I went for react-jss for styling the component as to make it as self-contained as possible. If you don’t want to use […]
Say you want to warn users before closing the page, but only when a specific component is loaded, here’s what to do:
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 […]
What is Ida? Ida by LIGL is a Norwegian progressive web application, which I helped develop in React. The app features several juridical processes which are fully customisable, to easily allow the user to create his or her own contracts and documents. https://ida.ligl.no Humble beginnings Ida started out as a simple web app I wrote […]
My latest project has been developing Ryfylke Kranservice as’s website. They wanted a simple website, with a simple back-system for them to edit the website. I decided to go for React again for this project, mainly for the benefits of maintenance, but also the performance. Drag ‘n’ drop editing This was my first introduction to […]
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 […]
While working at a local computer-repair & book-selling shop, I offered to create a new website for them. They took me up on my offer, and the website still stands to this day (06.11.2019). The website was made back in 2014, but it still works fine for their use. Check out Ryfylke Bok & IT.