
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>
```



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

This is how to copy text to clipboard with JavaScript. Or use the @compactjs/clipboard npm module. ✌

You first need to select text:

```javascript
inputElement.select();
```

Then you can copy it with:

```javascript
document.execCommand('copy');
```

> warning ""
> Copying text does only work when following a user action, like a button press.

If you want to copy text without being visible to the user, we need to create an input field to copy from:

```javascript
const inputElement = document.createElement('textarea');
```

Fix its position to prevent the window from scrolling:

```javascript
inputElement.style = 'position:fixed;top:0;left:0;';
```

Then we can add the text we want to copy:

```javascript
inputElement.value = 'Awesome text!';
```

To copy the text we need to append it somewhere to the DOM:

```javascript
document.body.appendChild(inputElement);
```

Now just copy the text like shown above and afterwards we can just remove it again:

```javascript
document.body.removeChild(inputElement);
```

To make things easier, I made a quick JavaScript module called `@compactjs/clipboard`.

So, using npm, it's as easy as this:

```sh
npm install @compactjs/clipboard
```

```javascript
import { clipboard } from '@compactjs/clipboard';

document
	.getElementById('copy-string')
	.addEventListener('click', () =>
		clipboard('This text is going to be copied.')
	);
```

Source code: [GitHub](https://github.com/CompactJS/clipboard)

Remember: It needs to follow a user action to work!



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

Eversleep is a polyphasic sleep planner for Everyman schedules.

Everyman is an experimental schedule for reducing the amount of sleep per day by doing multiple naps per day.

With Eversleep you are able to select an Everyman variant and plan your day.

It uses the [SettingsUI](https://github.com/TimoBechtel/settings-ui) Library for generating the UI.

Try it out now: [eversleep.timobechtel.com](https://eversleep.timobechtel.com)

![Eversleep Screenshot](/assets/posts/eversleep/eversleep.jpg)



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

Yesterday I looked at how to trigger a mobile share dialog from a webpage, so today we look at how to share content **to** a webpage.

To have a kind of real world example, I made a simple Web app, that displays a text word for word.

> warning ""
> The Web Share Target API, I used here, only works with the newest Chrome Browser on an Android Phone!

The change you have to make to define your webpage as a share target is pretty small. We just need to have a PWA with a manifest.json already set up.

Then we just need to add the "share_target" property to our web manifest:

```json
"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}
```

Here we define the endpoint that should receive the content that we want to share with our webpage. We can also define the request method as well as map the query parameter to custom ones.

That's it. Have a nice day ✌️



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

Learn how to easily create a share button on a webpage, that triggers the native share dialog!

I thought about how I might integrate a share functionality into my blog. Now I could set up a share button for all sorts of social media websites. However this often means sharing user information with third parties and limiting the website to share to.

Now this where I saw the opportunity to integrate a native share dialog into this website. Now this only works under certain circumstances:

- It needs a SSL secured connection (https)
- It only works on modern mobile browsers like Chrome (> 61) and Safari (> 12.2) [\*](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
- It needs to be triggered by an action, like a click of a button

The actual implementation is pretty easy:

```javascript
navigator.share({ text: 'Hi!' });
```

It returns a Promise and needs a object that has at least one of the following properties: `test`, `title`, `url` or `files`.

So my code looks something like this. I added a check for supporting browsers and used the canonical URL if available:

```javascript
if (navigator.share) {
	const button = document.getElementById('share-button');
	button.style.display = 'block';
	button.addEventListener('click', function () {
		let url = document.location.href;
		const canonicalElement = document.querySelector('link[rel=canonical]');
		if (canonicalElement !== null) {
			url = canonicalElement.href;
		}
		navigator.share({
			title: 'My awesome title',
			text: 'An awesome text',
			url: url,
		});
	});
}
```

More information about this API:

- [https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
- [https://web.dev/web-share/](https://web.dev/web-share/)



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

## What is data binding?

Data binding means having a data model somewhere, that is automatically synced with the ui, like input fields.

## An experimental way to implement data binding with vanilla JavaScript and HTML

This is what I came up with:

> This is just an experiment and by no means perfect. Use with care!

Let's use a very simple syntax to defines values to be bound directly in html, like this:

```html
<input
	id="test"
	type="text"
	:value="username"
	:placeholder="usernamePlaceholder"
/>
```

> Note: This is not a valid html syntax. But because browsers are very forgiving, it works. 😎

So, now we want to bind the input value and placeholder attribute to this sample data object:

```js
let store = {
	username: '',
	usernamePlaceholder: 'Input a username',
};
```

First, iterate over all elements that have our special :[attribute] syntax and initialize it. For every value attribute I added an input listener to update our store.

```js
[].forEach.call(document.querySelectorAll('*'), (e) => {
	e.getAttributeNames().forEach((attr) => {
		if (attr.startsWith(':')) {
			const propertyName = e.getAttribute(attr);
			const attributeName = attr.split(':')[1];
			if (store[propertyName] !== undefined)
				e[attributeName] = store[propertyName];
			if (attributeName === 'value')
				e.addEventListener('input', () => {
					store[propertyName] = e[attributeName];
				});
		}
	});
});
```

To also update other attributes like placeholders, I used a MutationObserver. I added a `boundAttributes` object that stores all bound attributes. Then I added the MutationObserver to every element to update the store when a bound attribute is updated:

```js
[].forEach.call(document.querySelectorAll('*'), (e) => {
	const boundAttributes = {};
	e.getAttributeNames().forEach((attr) => {
		if (attr.startsWith(':')) {
			const propertyName = e.getAttribute(attr);
			const attributeName = attr.split(':')[1];
			if (store[propertyName] !== undefined)
				e[attributeName] = store[propertyName];
			if (attributeName === 'value')
				e.addEventListener('input', () => {
					store[propertyName] = e[attributeName];
				});
			boundAttributes[attributeName] = propertyName;
		}
	});
	const observer = new MutationObserver((muations) =>
		muations.forEach((m) => {
			const prop = boundAttributes[m.attributeName];
			if (
				m.type === 'attribute' &&
				prop &&
				store[prop] !== e[m.attributeName]
			) {
				store[prop] = e[m.attributeName];
			}
		})
	);
	observer.observe(e, {
		attributes: true,
	});
});
```

Now if we update a attribute that was bound, like `:placeholder="usernamePlaceholder"` the corresponding property in the store is automatically updated:

```js
document.getElementById('test').placeholder = 'test';

console.log(store.usernamePlaceholder); // => test
```

Now it only updates our store when we change out HTML Element. To also update our HTML Elements when changing our store, we can wrap our store in a Proxy:

```js
store = new Proxy(store, {
	set: (obj, prop, value) => {
		// Handle updates her
		obj[prop] = value;
		return true;
	},
});
```

I saved a function for updating every HTML Element in a storeListener object to access it in our Proxy:

```js
const storeListener = {};
[].forEach.call(document.querySelectorAll('*'), (e) => {
	const boundAttributes = {};
	e.getAttributeNames().forEach((attr) => {
		if (attr.startsWith(':')) {
			const propertyName = e.getAttribute(attr);
			const attributeName = attr.split(':')[1];
			if (store[propertyName] !== undefined)
				e[attributeName] = store[propertyName];
			if (attributeName === 'value')
				e.addEventListener('input', () => {
					store[propertyName] = e[attributeName];
				});
			// define a function to be used in our proxy
			storeListener[propertyName] = (value) => {
				e[attributeName] = value;
			};
			boundAttributes[attributeName] = propertyName;
		}
	});
	const observer = new MutationObserver((muations) =>
		muations.forEach((m) => {
			const prop = boundAttributes[m.attributeName];
			if (
				m.type === 'attribute' &&
				prop &&
				store[prop] !== e[m.attributeName]
			) {
				store[prop] = e[m.attributeName];
			}
		})
	);
	observer.observe(e, {
		attributes: true,
	});
});
return new Proxy(store, {
	set: (obj, prop, value) => {
		// update our html element:
		if (obj[prop] !== value && storeListener[prop]) storeListener[prop](value);
		obj[prop] = value;
		return true;
	},
});
```

Finally I wrapped everything in a function and added a onUpdate function to be able to react on updated values.

```js
const bind = (store, onUpdate) => {
	const storeListener = {};
	[].forEach.call(document.querySelectorAll('*'), (e) => {
		const boundAttributes = {};
		e.getAttributeNames().forEach((attr) => {
			if (attr.startsWith(':')) {
				const propertyName = e.getAttribute(attr);
				const attributeName = attr.split(':')[1];
				if (store[propertyName] !== undefined)
					e[attributeName] = store[propertyName];
				if (attributeName === 'value')
					e.addEventListener('input', () => {
						store[propertyName] = e[attributeName];
						onUpdate(propertyName, store[propertyName]);
					});
				storeListener[propertyName] = (value) => {
					e[attributeName] = value;
					onUpdate(propertyName, value);
				};
				boundAttributes[attributeName] = propertyName;
			}
		});
		const observer = new MutationObserver((muations) =>
			muations.forEach((m) => {
				const prop = boundAttributes[m.attributeName];
				if (
					m.type === 'attribute' &&
					prop &&
					store[prop] !== e[m.attributeName]
				) {
					store[prop] = e[m.attributeName];
					onUpdate(store[prop], e[m.attributeName]);
				}
			})
		);
		observer.observe(e, {
			attributes: true,
		});
	});
	return new Proxy(store, {
		set: (obj, prop, value) => {
			if (obj[prop] !== value && storeListener[prop])
				storeListener[prop](value);
			obj[prop] = value;
			return true;
		},
	});
};
```

This can now easily be called liked this:

```js
let store = {
	username: '',
	usernamePlaceholder: 'Input a username',
};
store = bind(store, (key, value) => console.log(`${key} set to ${value}`));
store.username = 'Tim';
```

Now when typing something in the input field, the console will log changes 😎

```
username set to Tim
```



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

JavaScript is awesome. It's pretty popular, so many people agree.
But JavaScript can also be pretty weird.
Like coming up with a good comparison.
It seemed like a good idea at first, but as soon as you write it, it gets weirder and weirder.
Eventually you remove it again.

So lets quickly move to some JavaScript weirdness.

Like this:
`0.1 + 0.2` = <a href="#" onClick={(e) => {e.target.innerHTML=0.1+0.2; e.preventDefault();}}>Test live</a>

What happens if you print this out?
You get this: 0.30000000000000004

Well that is a floating point issue, where precision is limited. This can happen in other programming languages as well.

<br />
Try some of these too:

- `true + true` = <a href="#" onClick={e => {e.target.innerHTML=`${true + true}`; e.preventDefault();}}>Test live</a>
- `true + 'true'` = <a href="#" onClick={e => {e.target.innerHTML=`'${true + 'true'}'`; e.preventDefault();}}>Test live</a>
- `true * 3` = <a href="#" onClick={e => {e.target.innerHTML=`${true *3}`; e.preventDefault();}}>Test live</a>

As you can see, JavaScript tries to convert values to one for that specific context. Because the 'truthy' value of true is 1, you can actually do calculations.

<br />
But what about this:

`![] + [];` = <a href="#" onClick={ e => {e.target.innerHTML=`'${![] + []}'`; e.preventDefault();}}>Test live</a>

It returns false, but as a string! That's because JavaScripts detects an addition operation between these two arrays and converts both values to their primitive values. Which is done with the .toString() method. Because arrays are truthy, the first value is false. Then this is converted to a string (try false.toString()) = "false" \\
Like this:

```javascript
1. ![] + []
2. false + []
3. "false" + ""
```

<br />
<>
	Now this `+[]` =
	<a
		href="#"
		onClick={(e) => {
			e.target.innerHTML = `'${+[]}'`;
			e.preventDefault();
		}}
	>
		(Test live)
	</a>
</>
converts an array into a number, which is 0.

<br />
Now with this knowledge and because we can use a string similar to an array (e.g.
`'false'[0] = 'f'`), we can create something beautiful like this: 😎

```javascript
let hello =
	([] + ![])[+[]] +
	([] + !![])[+!![]] +
	([![]] + [][[]])[+!+[] + [+[]]] +
	([!![]] + [][[]])[+!+[] + [+!![]]] +
	([][[]] + [])[!![] + ![]] +
	([!![]] + !+[] + [][[]])[+!+[] + [+[]]];
console.log(hello);
```

Go ahead and try it yourself in your browser developer console! Or click the link below.

<p>
	<span>console.log(hello) => </span>
	<a
		href=""
		onClick={(e) => {
			let hello =
				([] + ![])[+[]] +
				([] + !![])[+!![]] +
				([![]] + [][[]])[+!+[] + [+[]]] +
				([!![]] + [][[]])[+!+[] + [+!![]]] +
				([][[]] + [])[!![] + ![]] +
				([!![]] + !+[] + [][[]])[+!+[] + [+[]]];
			e.target.innerHTML = hello;
			e.preventDefault();
		}}
	>
		<span>Test live</span>
	</a>
</p>
<br />

Someone made a guide on how to program just with these 6 characters: [https://github.com/aemkei/jsfuck](https://github.com/aemkei/jsfuck)

<br />
**If you want to find out more about some JavaScript "weirdness", this is a pretty
good collection: [https://github.com/denysdovhan/wtfjs](https://github.com/denysdovhan/wtfjs)**


Latest

An Ode to the Mighty Regex

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

Darkmode toggle

More

Copy text to clipboard with vanilla JavaScrip...

Eversleep - The polyphasic sleep scheduler

Share content to a website through the native...

Trigger the native share dialog on a website

Two way data binding with vanilla JavaScript

JavaScript is awesome but also weird