Mostly frontend, sometimes art
It’s been a while since I’ve coded for myself. I did push an update on Ssstyles and JSSynth every now and then, but I haven’t done something new. Why? I needed a habit tracker to get on top of my health again. It needed to be easy to use and sync across devices without selling my data to ad companies, which means selfhosting. The awesome selfhosted list has a few projects, but… Habitica looks…
CSS View Transitions have landed in Chrome and are (for better or worse) widely available to most end users now. Safari is not far behind, with the feature being available in TP and Firefox is at least working on it . I love how much simpler the implementation of multi-page transitions have become, but at the same time, I realized a big pet-peeve with them: Elements that are out-of-viewport start…
I really like the idea of a classless CSS stylesheet that can be applied to just about any website. There are already a few examples out there, as listed below. But none of them really ticked all the boxes for me. I wanted to have my own shot, so I made Ssstyles . Classless stylesheets are ones that apply directly to HTML tags. I like their spirit of simplicity and separation of concerns. You can…
One morning I woke up to a mobile plan limit warning. (In case you’re wondering, unlimited plans aren’t a thing in Germany) That’s never happened to me before. I don’t stream a lot of videos, I don’t play games, I don’t really do anything that uses excessive data. But still, there it was. Then I noticed the absence of the WiFi icon. That explains it, I guess. I went into my network settings and…
(updated 06.05.2024) The view Transition API is probably one of the most exciting new CSS mechaninsms. It's currently only available in Chrome Canary, but that's okay. It's designed from the ground up to be a progressive enhancement. It promises to provide a native way to build SPA-like page transitions. (Heck, forget about SPAs. Think of cinematic wipes. Video game menus! Remember fancy DVD…
You know those kid’s bikes that you can upgrade from a balance bike to a something that will take your child to elementary school? CSS did something like that for me. I can still remember the days of floating layouts. We used a lot of hacks to get things to behave like we wanted them to, like the Clearfix or browser-detecting media queries . The designs were just starting to move from table-based…
Chris Coyier updates his stance on his Great Divide theory: "Since there is too much for any web developer to know, what is the most graceful and professionally acceptable way of not knowing things?" I think the answer is honesty. It's okay to say that you don't know stuff. My workplace pits me against the Great Unknown all the time: a huge complex monster of a core product. Internal tooling…
So, I rebuilt my website, again . Not because I grew bored of my design (at least not entirely), not because I wanted to update it for the Indieweb Revolution that’s certainly coming this year, for sure. It’s because my old Hugo setup was coming apart at the seams. I overcomplicated things and now i started to get the consequences of it. Time to rebuild a new over-engineered, complicated monstrum…
I don’t usually do multipart posts, but this one grew a bit after I published the initial article . The setup I’ve got there describes how to import content from Notion to Eleventy and render a site. But it’s getting very slow very soon. Webhooks I described how to use Zapier as a deployment method. Two weeks later I found out that their generic webhooks are free only in their grace period. I…
Static Site Generators are a great tool to generate a JAM Stack website from a data feed. That feed can be markdown files, or like in the case of Eleventy, an API endpoint that returns its data as an object. I thought It would be simple enough to attach Notion, as it makes an awesome CMS. The two seem like they could pair up really well, but getting them actually to play nice with each other takes…
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. Before we dig in further, I should clarify that most of my code snippets in this article are truncated to the relevant lines. The entire code can be found on GitHub . I want it to be a top-down fighting game. Top-down…
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…
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. Control Structures More traditional, general-purpose languages (like JavaScript) give us tools…
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…
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…
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…
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... 2020 This is the current version of this website. It's a Hugo-based static HTML/CSS site, with a little Javascript sprinkled on top. It's also the version that I first started blogging on tech topics on. 2016 I started…
That's what you do under the Coronavirus Lockdown, right? Rebuilding your personal website. So... Hugo After a few years of running on Wordpress, I made the switch to Hugo. I found a database system to be too much of a hassle to work with. Finally, the switch to Gutenberg would have meant for me to implement a new content system if I wanted to stay up to date. Markdown just seems so much easier to…
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 ) #1: Components and Bundling I've split up my website into component bundles. That way I can load only the parts that are…
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? The API is built like an actual modular syntheizer . That came to me as a pleasant surprise. I've been experimenting with Pure Data a while back, so I know more or less how those things work. And now I can apply this knowledge to…
Inspired 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? TL;DR convert your font to woff/woff2 split font files into character sets and load them with unicode-range preload your font or use HTTP2 server pushes use font-display: fallback; or optional; Cache your fonts…
In 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…
I 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. Disclaimer: You probably don't wanna use any of this in live projects. I made this purely for my own purposes. It works good enough for me , but that doesn't mean that it will for you . Stick to something that's better documented and…
I'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.…
This is going to be an article about motion in Interface Design. You'll hear me rambling about the implications of animation, when and what to animate, and how to be responsible with it. None of what I say is set in stone. I'll just try to give some general advice for handling animations in UI. However, you won't find any actual code snippets or step by step tutorials here. Before we start: Being…
Let's build a website. Let's make it about food, because I like food. Also, we need cats, because the Internet is made of cats. Also, because it's 2019, it can't have page reloads. What's that? All those small pages use way too much Vue and React and all of the Javascripts, you say? Alright, let's try without then, let's have it your way. In order to have a website about food and cats, we need to…
This article appeared first on CSS-Tricks . Thank you, Chris & Geoff! This is an experiment to see how far into an interactive experience I can get using only CSS. What better project to attempt than a game? Battleship seemed like a good challenge and a step up from the CSS games I’ve seen so far because it has the complexity of multiple areas that have to interact with two players. Wanna see the…