selbekk

Articles

Here, you'll find most of the articles I've written the last couple of years. You can search for specific articles below, or just browse.

Moving from Next to Remix

Moving from Next to Remix

April 20, 2022

Wondering about rewriting your site from Next.js to Remix? This is how you do it!

Tips for creating a component library

Tips for creating a component library

March 30, 2022

Let's look at how you should approach creating a component library in your organization.

Creating a table of content widget in React

Creating a table of content widget in React

March 10, 2022

Want to learn how to create your own in-page table of content widget? Look no further.

The Most Popular Alternative UI Libraries

The Most Popular Alternative UI Libraries

February 22, 2022

Let's look beyond React, Vue and Svelte, and see what else fun frontend frameworks are out there!

How to get started with React in 2022

How to get started with React in 2022

January 23, 2022

Looking to get started on your React journey in 2022? This is what I would've done!

My git workflow

My git workflow

January 14, 2022

People always ask me about my git routine. They do, I promise! Well, here it is, anyways.

Open source sustainability: It's time to step up

Open source sustainability: It's time to step up

January 12, 2022

Open source libraries can't sustainably be maintained without its users leaning into their responsibility.

Bye borders, hello there box-shadow!

Bye borders, hello there box-shadow!

January 12, 2022

Borders are annoying. Learn why, and how you can use box-shadows instead!

A look back on 2021

A look back on 2021

December 31, 2021

A summary of what happened to me in 2021

Migrating your data with sanity exec

Migrating your data with sanity exec

December 23, 2021

Ever wished you chose a slightly different data structure for your structured content? Let's learn how to fix it!

Why I love Style Dictionary, and why you should too

Why I love Style Dictionary, and why you should too

December 20, 2021

Style Dictionary is one of the very best tools I've ever encountered. It's powerful, fun, and great for managing your design tokens!

Redux Who? Handle your own state instead

Redux Who? Handle your own state instead

December 13, 2021

Do you really need a state management library, or can you roll your own?

Implementing unfurling URLs in Sanity

Implementing unfurling URLs in Sanity

December 8, 2021

Want to add those nice-looking link previews you get when you share a link on Medium or Twitter? Then this article is for you!

Create a useful link abstraction in Next.js

Create a useful link abstraction in Next.js

December 6, 2021

The internal link abstraction with Next.js less than perfect. Let's create a better one!

How Relevant is Still TypeScript in 2021?

How Relevant is Still TypeScript in 2021?

October 6, 2021

Let's revisit TypeScript - is it still the best choice for web development in 2021?

Catching Errors in React with Error Boundaries

Catching Errors in React with Error Boundaries

August 7, 2021

How do you handle runtime errors in React? Let's look at a few different approaches.

Redux Alternatives in 2021

Redux Alternatives in 2021

June 10, 2021

Redux is so 2020. Let's look at the most current alternatives!

An introduction to React Dev Tools

An introduction to React Dev Tools

April 17, 2021

Are you finding it hard to debug your React apps? Here's a great introduction to the React DevTools, and what they can do for you.

Writing end-to-end tests in 2021

Writing end-to-end tests in 2021

March 29, 2021

Writing end-to-end tests has never been easier. This article shows you why it's a great idea, and what tools to use to implement it!

Smart Optimization Techniques: Lazy Loading with React

Smart Optimization Techniques: Lazy Loading with React

March 3, 2021

Want your React app to go from pretty fast to blazing fast? Then let me introduce you to the art of lazy loading your code!

Is Redux Dead?

Is Redux Dead?

March 1, 2021

Is Redux still worth learning in 2021? This article dives into where it came from, and what you can use instead.

How to generate PDFs with Firebase functions

How to generate PDFs with Firebase functions

February 14, 2021

A step by step tutorial for creating a PDF, uploading it and returning an expiring link to download it.

/** Make the nice list with JSDoc */

/** Make the nice list with JSDoc */

December 20, 2020

Documenting stuff is important, folks! Where would Santa be without his naughty and nice list? Let's spend a few minutes learning how you can improve the user experience of your components by adding a slash and a couple of stars in front of it!

How to force-refresh your app every once in a while

How to force-refresh your app every once in a while

December 18, 2020

Learn how to make your app automatically fetch a new version from the server after n hours of idle time.

How to present like me

How to present like me

December 13, 2020

Want to learn some public speaking tips from a guy that has done dozens? Then this is the article form you!

Creating React contexts for fun and profit

Creating React contexts for fun and profit

November 3, 2020

What's the best way to create and consume contexts? This article shows my take on that question.

What is a cache?

What is a cache?

October 18, 2020

Do you have a vague idea of what a cache is, but want to really understand it? Want to learn how you can use caching to make your apps faster, more resilient, and even less resource-intensive for your clients? Then this article is for you.

Diving into the new JSX transform

Diving into the new JSX transform

September 23, 2020

React 17 came with a fresh new transform for JSX. Learn what that means for you!

Real confidence with Cypress E2E tests

Real confidence with Cypress E2E tests

August 2, 2020

Write the tests that matter with end-to-end testing with Cypress

Create a stable random value with React.useRef

Create a stable random value with React.useRef

July 28, 2020

Want to select a random value from an array in React? Want to select the same random value on every render? Then this article is for you.

Using Chakra UI with NextJS

Using Chakra UI with NextJS

July 22, 2020

Want to use Chakra UI with NextJS? This article shows you how!

Catching clicks outside your element with useClickOutside

Catching clicks outside your element with useClickOutside

July 12, 2020

Do you want to close your menu, slide-out or modal when people click outside of it? Let me show you how to fix that with a custom React hook.

Terminal illness

Terminal illness

July 3, 2020

You don't have to be a linux hacker to use the terminal to be productive. Here's a few tips I've picked up the last couple of years that might make you even iller in the terminal.

Creating forms in React in 2020

Creating forms in React in 2020

May 17, 2020

Learn some of the ways you can do forms in React in 2020

Forwarding refs in TypeScript

Forwarding refs in TypeScript

May 17, 2020

Learn how you can forward refs in React and TypeScript!

Creating Sortable Tables With React

Creating Sortable Tables With React

March 19, 2020

Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, we’re going to implement all you need to sort out all of your table sorting needs.

Welcome to my new blog

Welcome to my new blog

February 25, 2020

Every blog needs a first blog post. This was mine.

New media queries you need to know

New media queries you need to know

February 25, 2020

The Media Query Level 5 specification is out, and it's packing some serious heat. Let's look at what new media queries we get to play with!

A late adopter’s guide to TypeScript

A late adopter’s guide to TypeScript

February 18, 2020

Everybody and their mother uses TypeScript these days, so I guess I have to, too. This is the guide I wish somebody showed me a few years ago about how good TypeScript is!

Setting Up a Development Environment in Elm

Setting Up a Development Environment in Elm

February 16, 2020

How do you set up a nice development environment for our Elm app? This article dives into some of the different options.

Dad jokes and HTTP requests in Elm

Dad jokes and HTTP requests in Elm

January 2, 2020

Let's build a dad joke generator in Elm!

A Year of React - 2019 in Review

A Year of React - 2019 in Review

December 31, 2019

What was the big takeaways from React in 2019? This post summarizes the biggest news stories, updates and releases.

How to get started with React in 2020

How to get started with React in 2020

December 30, 2019

If you want to do front-end development, React is a great tool to have in your tool chest. However - in a sea of content large enough to drown in - where should you look for resources to learn React?

Creating a todo app in Elm

Creating a todo app in Elm

December 30, 2019

This is a step-by-step guide to creating your own TODO-app in Elm!

My first Elm app

My first Elm app

December 29, 2019

A step-by-step guide to how you can write your first Elm app

Gotcha! Ways I've screwed up CSS

Gotcha! Ways I've screwed up CSS

December 18, 2019

10 years of writing CSS has taught me one important lesson - there's always new ways to screw up. Let's look at some of the ways I've failed in the last decade.

How I test my React apps in 2019

How I test my React apps in 2019

December 17, 2019

Testing your apps is becoming so easy, it's starting to become worth the trouble!

Document your stuff with Docz

Document your stuff with Docz

December 15, 2019

Having great documentation is what differentiates a great library from an ok one. I've spent the last couple of months creating a design system and its documentation site in Docz, and I'd like to share some experiences.

Control your components

Control your components

December 9, 2019

A quick and easy guide to creating components that control their own state, if you want them to.

Bleeding edge - making your grids bleed

Bleeding edge - making your grids bleed

December 9, 2019

Grid layouts are nice until you need to do something slightly outside of its bounds. Want to learn a quick trick to escape?

Switch it up with CSS custom properties

Switch it up with CSS custom properties

December 1, 2019

Custom properties doesn't look like much, but is one of the real super powers of CSS. Let's see what it's all about!

Two media queries you should care about

Two media queries you should care about

September 27, 2019

The user should be the boss of you - learn how to respect their preferences

How to do semantics the right way

How to do semantics the right way

September 20, 2019

You've heard about semantic HTML, and how important it is to do it right. But what's the right way to do it?

How to fade in content as it scrolls into view

How to fade in content as it scrolls into view

August 29, 2019

Want to make your content fade in as it scrolls into view? This article will give you the how-to!

How to stop your spinner from jumping in React

How to stop your spinner from jumping in React

August 22, 2019

Want to improve your spinner game? This article shows you how to keep your spinning animation looping without a glitch

How to make your footer stick to the bottom of your page

How to make your footer stick to the bottom of your page

August 20, 2019

This article shows you how to stick the footer to the bottom of your screen, even if you don't have enough content to push it down there.

How to overlay your background images

How to overlay your background images

June 26, 2019

Here's two cool new ways to darken your background images, so you can put content on top!

The 10 Component Commandments

The 10 Component Commandments

June 22, 2019

This article gives you 10 golden rules to live by when you're designing your React component APIs.

Creating Your Own React Validation Library: The Experience

Creating Your Own React Validation Library: The Experience

May 30, 2019

This final part of this series will focus on improving the user experience for the people that will use our validation library: the developers.

Creating Your Own React Validation Library: The Features

Creating Your Own React Validation Library: The Features

May 23, 2019

Implementing a validation library isn’t all that hard. Neither is adding all of those extra features that make your validation library much better than the rest

Creating Your Own React Validation Library: The Basics

Creating Your Own React Validation Library: The Basics

May 16, 2019

Ever wondered how validation libraries work? This article will tell you how to build your very own validation library for React step by step.

How to write a progressive image loading hook

How to write a progressive image loading hook

May 9, 2019

Want to display a fallback thumbnail while you download your hero image? Then this article is for you!

Persisting your React state in 9 lines

Persisting your React state in 9 lines

May 7, 2019

This quick little article will teach you a nice technique for storing UI state between visits

5 things you didn't know about React DevTools

5 things you didn't know about React DevTools

May 1, 2019

React DevTools is becoming more powerful by the day. Let's look at some of the features you might not have tried yet!

Redux in 27 lines

Redux in 27 lines

March 21, 2019

Ever wondered how Redux works? Here's how you can implement your own!

Creating Flexible Components

Creating Flexible Components

March 18, 2019

A bunch of tips and tricks to how you can make your components more flexible, reusable and accessible by default.

The Hitchhikers Guide to Refs

The Hitchhikers Guide to Refs

March 14, 2019

Ever got confused about refs in React? This article is about to set the record straight.

Refactoring a Small Next App to Use Hooks

Refactoring a Small Next App to Use Hooks

March 11, 2019

Enough of these contrived examples. Let's look at how I refactored a small React app to use Hooks

Do you even JSX bro?

Do you even JSX bro?

December 22, 2018

Most React apps use JSX - but how can you set up a JSX environment yourself?

How to create components

How to create components

December 19, 2018

React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!

Error Handling in React

Error Handling in React

December 13, 2018

Let's deal with those pesky errors once and for all

Creating a progressive image loader

Creating a progressive image loader

December 11, 2018

I needed one for this site - follow along if you want one too!

5 tips for reusable components

5 tips for reusable components

December 10, 2018

I've spent the last year helping build a design system. These are some of the things I learned along the way

Creating Composite Components

Creating Composite Components

December 9, 2018

Do you need to create a complex, yet reusable piece of UI? What's the best approach?

Handling metadata in Redux

Handling metadata in Redux

December 1, 2018

Is this the last reducer you'll ever write?

How to set up your editor for React development

How to set up your editor for React development

August 9, 2018

Looking cool has never been this easy 🆒

Webpack and LESS

Webpack and LESS

August 1, 2018

How to make them play along nicely

Handling Data Fetching with State Machines

Handling Data Fetching with State Machines

July 25, 2018

Fetching data just got a bit easier

Math with Dates in JavaScript

Math with Dates in JavaScript

June 20, 2018

A JavaScript Date is an adventure to deal with. Here’s a short introduction to its ridiculousness.

Introducing Calidation

Introducing Calidation

April 24, 2018

Although form validation is boring af, it’s also one of the most important improvements to your user experience. Get ready to be mildly impressed!

Introducing Timeproxy

Introducing Timeproxy

April 20, 2018

Every once in a while, you need to make sure something happens every so often. Or fails within a reasonable time frame. Or do anything related to time. I am about to make your life so much better.

All rights reserved © 2022