I've had some fun with random colors lately! To speed up development, I made a utility function for getting a random color. It's really simple:

export const getRandomColor = () => {
	const red = Math.floor(Math.random() * 256)
	const green = Math.floor(Math.random() * 256)
	const blue = Math.floor(Math.random() * 256)

	const color = `rgb(${red}, ${green}, ${blue})`

	return color
}

<h1 class="h2"></h1>

That's a line of code (or at least an HTML start tag with a class) that apparently makes many people mad or confused.

When you generate URLs from titles, the title typically can't be used directly — spaces, question marks and other special characters don't belong in URL slugs. That's where a slugify function comes in handy.

I recently faced a task to create a contact form, with input rows in one column and a textarea and submit button in the other column. The fun little challenge was to make the textarea fill the available space above the submit button in a responsive way, so that the textarea will continue to fill the available space regardless of the number of input rows in the column to the left.

Here is the design, where you can choose the number of input rows:

Consider this array of names:

const names = [
	"Filip",
	"Anna",
	"Jennifer",
	"Anna",
	"Robert",
	"Emma",
	"Filip",
	"Anna",
]

In this array, Filip occurs two times and Anna three times. What if we want to filter out the duplicates and get an array with the unique names?

I often face the task of centering something. Either horizontally or vertically, and often in both directions at the same time. When flex and grid didn't exist in CSS, it could be quite cumbersome to get vertical and horizontal centering working. Now there are easy solutions!

We start from a span element in a div:

Use this counter if you want to count words, characters or a sequence of characters in a text!

Number of words: 0

Number of characters: 0

Colors on the web can be defined in many different ways. There are 140 color names, such as green, goldenrod and navy. On top of that, there are four standards for color values: HEX, RGB, RGBA and HSL. I'll go through them one by one in this post and also show how to generate random color values for each standard with React.

How many decimals of pi do you know? Here you can test yourself and try to improve. Click the box below and type the first decimal to begin. If you want help, you can click the "Show answer" button, where you'll also see how far you've come — the correctly typed decimals have a green background.

Let's look at how to perform operations on immutable objects in JavaScript, just like we did for arrays in this post.

We start with an object representing a person:

const person = {
	name: "Filip",
	age: 26,
	city: "Uppsala",
}