
ChatGPT, what does this regex do?

```
https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)
```

<div style={{
	margin: '120px 0 300px 0',
	textAlign: 'center',
}}>

Oh mighty regex, so finely wrought  
With symbols and characters so fraught  
Thou art a tool of great renown  
For matching patterns in strings found

Thy format, strict and yet so free  
Can match a URL with certainty  
Whether HTTP or HTTPS is used  
Thou wilt not be confused

Thy versatility, a sight to see  
Can match a domain and TLD, oh glee!  
And even a path or query, if desired  
Thou art truly a regex, most highly admired

So let us sing thy praises loud  
For thou doth make our work more proud  
A regex of great value and worth  
Thou bringest joy and success to this earth.

</div>



As developers, we all want to write code that is not only functional, but also easy to understand and maintain.
After all, nobody wants to be stuck debugging spaghetti code or trying to understand someone else's convoluted solution.
Here are a few tips I like to keep in mind for writing high quality code:

## The first user of your code is another developer.

So embrace it and focus on _developer experience_. Think of other developers as your users.
How are they going to use your code? What are they going to do with it in the future?

**Write beautiful APIs that spark joy. ✨**

Elegant implementation details may be impressive, but it's the _elegant interfaces_ that people actually care about.

You're a designer. You design APIs, interfaces and abstractions to make the life of other developers easier.

So next time you're tempted to write that super clever solution that only you will understand,
take a step back and think about the poor soul who will have to use your code.
Are you making their lives easier, or are you adding unnecessary complexity?

Remember: Someday, you may have to understand your own code.

## The only constant is change.

Embrace the change. Code evolves. It should never stand still. If it does, it's probably dead.

Write code so that it's as flexible as possible.
Don't spend too much time over-abstracting your code, only to have it thrown away later because of some requirement changes.
Prefer to write code that is more verbose but flexible, rather than code that is limited and hard to change or adapt.

## Don't fear touching code.

Whenever you come across code that you're hesitant to touch because you don't understand what it does and fear breaking it:
Touch it. Take the opportunity to dive in and try to understand it. Rewrite it in a way that makes sense to you.

Just make sure to have someone else review it to ensure that you're not the only one who understands that code.

## Make it speak for itself.

Nobody likes writing documentation. It's annoying and always out of sync. Write code that is really easy to understand on its own,
so you don't have to write documentation. Use abstractions and naming that make the code self-explanatory and avoid using abbreviations
or jargon that only make sense to you.

> If you know ABAP, you know what I'm talking about. I'm looking at you, `PERNR`.

And if you need to write documentation for edge cases, try to keep it as close to the code as possible.
This helps it to stay updated and makes it easy to find.

The worst thing you can do is to create a documentation page for code that changes frequently.

> Note: This is obviously different for public facing APIs.

## Keep it stupidly simple

Keep your code simple. Added code always results in added complexity. Using abstractions only hides complexity.
The only way to truly remove complexity is to eliminate code.

It's tempting to add more and more tools and libraries to our projects,
especially when they promise to make our lives easier. But the truth is that each one adds complexity and cognitive load.
Do you really need to add that state management library? Remember: A new user (developer) has to learn and understand the whole stack.
And the new developer might be you in two months.



> This is an old post from 2020. I'm keeping it here for archival purposes.

Created a little darkmode toggle button with pure CSS.

<ClientOnly>
<style>
  {`
    #fake-screen {
    margin-top: 80px;
    height: 200px;
    width: 200px;
    background: rgb(208, 214, 221);
    transition: background-color 0.5s;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
  }

#fake-screen.dark {
background: rgb(115, 116, 117);
}

#darkmode-switch {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#darkmode-switch input {
display: none;
}

#darkmode-switch label {
position: relative;
display: block;
width: 70px;
height: 35px;
border-radius: 45px;
background: rgb(76, 170, 233);
transition: background-color 0.5s;
}

#darkmode-switch label .cloud {
position: absolute;
display: block;
border-radius: 5px;
background: rgb(176, 215, 241);
transition: all 0.4s cubic-bezier(0.7, -0.5, 0.25, 1.5);
}

#darkmode-switch label .cloud:nth-child(1) {
top: 11px;
right: 12px;
height: 6px;
width: 14px;
}

#darkmode-switch label .cloud:nth-child(2) {
top: 18px;
right: 18px;
width: 6px;
height: 3px;
}

#darkmode-switch input:checked ~ label {
background-color: rgb(23, 76, 109);
}

#darkmode-switch input:checked ~ label .cloud {
transform: translateX(-27px);
width: 3px;
height: 3px;
background: rgb(104, 144, 168);
}

#darkmode-switch label::after {
box-sizing: border-box;
content: '';
display: block;
position: absolute;
width: 25px;
height: 25px;
margin: 5px;
left: 0;
top: 0;
border-radius: 20px;
background: rgb(235, 201, 108);
transition: all 0.4s cubic-bezier(0.7, -0.5, 0.25, 1.5);
}

#darkmode-switch input:checked ~ label::after {
left: 35px;
box-shadow: 10px 6px 0 0 rgb(235, 201, 108);
transform: translate(-10px, -6px);
background: transparent;
}
`}

</style>

<div id="fake-screen">
	<div id="darkmode-switch">
		<input type="checkbox" id="darkmode-switch-radio" />
		<label
			htmlFor="darkmode-switch-radio"
			onClick={() => {
				document.getElementById('fake-screen').classList.toggle('dark');
			}}
		>
			<span className="cloud"></span>
			<span className="cloud"></span>
		</label>
	</div>
</div>

</ClientOnly>

Code:

```html
<style>
	#darkmode-switch {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#darkmode-switch input {
		display: none;
	}

	#darkmode-switch label {
		position: relative;
		display: block;
		width: 70px;
		height: 35px;
		border-radius: 45px;
		background: rgb(76, 170, 233);
		transition: background-color 0.5s;
	}

	#darkmode-switch label .cloud {
		position: absolute;
		display: block;
		border-radius: 5px;
		background: rgb(176, 215, 241);
		transition: all 0.4s cubic-bezier(0.7, -0.5, 0.25, 1.5);
	}

	#darkmode-switch label .cloud:nth-child(1) {
		top: 11px;
		right: 12px;
		height: 6px;
		width: 14px;
	}

	#darkmode-switch label .cloud:nth-child(2) {
		top: 18px;
		right: 18px;
		width: 6px;
		height: 3px;
	}

	#darkmode-switch input:checked ~ label {
		background-color: rgb(23, 76, 109);
	}

	#darkmode-switch input:checked ~ label .cloud {
		transform: translateX(-27px);
		width: 3px;
		height: 3px;
		background: rgb(104, 144, 168);
	}

	#darkmode-switch label::after {
		box-sizing: border-box;
		content: '';
		display: block;
		position: absolute;
		width: 25px;
		height: 25px;
		margin: 5px;
		left: 0;
		top: 0;
		border-radius: 20px;
		background: rgb(235, 201, 108);
		transition: all 0.4s cubic-bezier(0.7, -0.5, 0.25, 1.5);
	}

	#darkmode-switch input:checked ~ label::after {
		left: 35px;
		box-shadow: 10px 6px 0 0 rgb(235, 201, 108);
		transform: translate(-10px, -6px);
		background: transparent;
	}
</style>

<div id="darkmode-switch">
	<input type="checkbox" id="darkmode-switch-radio" />
	<label for="darkmode-switch-radio">
		<span class="cloud"></span>
		<span class="cloud"></span>
	</label>
</div>
```


Hi, I’m Timo.

A creative coder based in Cologne Germany.

An Ode to the Mighty Regex

A Developer's Guide to Writing High Quality C...

Darkmode toggle