Lights Out! - Overengineering a Dark Mode
read the full articleWith 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.
Scaffolding an App with Vue 3, Nuxt and TypeScript
read the full articleFor 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
, andindexedDB
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)
2004 - 2021: Retrospective
read the full articleThis 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...
Rebuilding My Website
read the full articleThat's what you do under the Coronavirus Lockdown, right? Rebuilding your personal website.
7 Things to improve my Websites Performance
read the full articleReaching 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)
Building a Synthesizer in Javascript
read the full articleI'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?
A deep dive into webfonts
read the full articleInspired by Ben Halperns discussion about webfonts, I decided to take a deep dive into the subject. What are Webfonts, where did they come from and how do we load them as fast as possible?
7 habits to get into an accessible mindset
read the full articleIn times of crisis like the one we're facing now it's more important than ever to make our applications as accessible as possible. People rely on getting information from the apps and websites we design. Not being able to get a certain information because of poor network connectivity, weak hardware, or (most commonly) some stupid design mistake can be critical.
What most of our workflows right now are optimized for is MVP-and-ship. If your app somehow runs, it's good enough. Testing for accessibility pitfalls can be time consuming and arduous, so it's mostly ignored.
But we can fix that. By adopting a few habits we can get ourselves into a working mode that incorporates A11y into our daily grind.
Frameworking my Site
read the full articleI don't use one of the major frameworks to power my site. I instead opted to write my own - and in the process understand what a framework is and how it's built.
In Defense of the Separation of Concerns
read the full articleI'd like to make a point for the separation of concerns in web development.
HTML is a language that's been created for structuring and linking documents. CSS is for styling said documents. JS provides additional functionality. The three languages are heavily specialized to their intended use. They're also really good in what they're supposed to be doing.
But where's light there's also shadow. Straying away from their paths means you'd have to accept (or even mitigate) some disadvantages. Let's take a look at some of those.