Daniel Schulz

I know people make all kinds of stuff with <canvas> but that's all black magic to me. Time to change that. This is how I built Attacke!, a simple 2D fighting game in JavaScript.

Josh W. Comeau talked on Twitter about no-code solutions, specifically for CSS, and how they impact what developers work on after trivial tasks in their workflow have been automated.

Imagine a spectrum. At one end, you have template-focused website builders like SquareSpace. A little further along, you have Webflow. At the opposite end, you have raw HTML/CSS.

This is a very nice perspective on the subject. And one I'd like to talk about, not just in the context of CSS.

CSS is a highly specialized programming language focusing on style systems. Because of this unique use case and its declarative nature, it's sometimes hard to understand. Some folks even deny it's a programming language altogether. Let's prove them wrong by programming a smart, flexible style system.

Adding syntax highlighting to an input field can be a hard task. <textarea> supports neither styling of individual characters or words, nor HTML tags within itself, there is no fully supported native solution for that. Most editors work with contenteditable to actually render a fully marked up code snippet and let the user edit its content. This requires a lot of work to get it accessible (as in restore all the native functions of a textarea) and still adds a lot of complexity. If you don’t want that and are just looking for a quick, dead-simple solution: Here’s how to colorize a textarea.

With the upcoming launch of the redesigned Safari themes are all the rage. It's not a new feature. Chrome on Android had it for years, Vivaldi brought it to Desktop, Apple brings new attention to it.

Theming can be much more than just providing a meta tag, though. Let's take a close look at how users can customize a website to their own preferences and how to implement them in a clean, fast and modern way and wrap everything up in a small, clean boilerplate template.

For most of my projects I use my own, simple setup that takes a step back from large, JavaScript-based web apps. One limitation that comes with it is sharing state between multiple screens. My setup doesn't do soft navigations by design, so it has to rely on localStorage, sessionStorage, and indexedDB for persistent states. That becomes cumbersome very quickly and I acknowledge that some projects absolutely benefit from reactivity and the automagic mechanisms, that the likes of Vue and React bring with them.

Setting up such a project can be tricky, especially if you don't know the entire ecosystem of your chosen framework and simply want to get on with a little side project. Here's how and why mine a wired together - from choosing a tech stack to implementing a persistent store.

(This article was last updated on 18.09.2021)

This website first went online in 2004 as 'psz-graphics.net'. It's been through a lot, especially in its infancy. Let's go back there from today and see how weird it gets...

That's what you do under the Coronavirus Lockdown, right? Rebuilding your personal website.

Reaching a 100% score in Lighthouses performance audit is just the beginning. We can go much further and even optimize for aspects that most automated audits don't check.

Here are 7 Things I did to massively improve my loading and navigation times.

(Sloth by LillyCantabile)

I've been playing around with the WebAudio API. You can generate sounds from it. So I've built a synthesizer app with it as a weekend project. How hard can it be?