There's a famous quote that people in tech like to use. It was supposedly said by Henry Ford about the invention of the automobile: If I had asked my customers what they wanted, they would have said ‘faster horses’. There is no actual evidence that Ford ever said this - regardless, it has become a favorite adage for people talking about creativity and innovation. It’s often accompanied by a smirk…
2024 was in many ways a very challenging year for me, but it was also one of the most significant. This year’s annual review post is a bit different. In previous years, I reflected on the work that I did, the web projects I built, the posts that I wrote and so on. There was lots of that in 2024 too of course (well maybe except the blogging part, that seems to become a pattern ). But the truth is,…
The year is 2005. You're blasting a pirated mp3 of "Feel Good Inc" and chugging vanilla coke while updating your website. It’s just a simple change, so you log on via FTP, edit your style.css file, hit save - and reload the page to see your changes live. Did that story resonate with you? Well then congrats A) you’re a nerd and B) you’re old enough to remember a time before bundlers, pipelines and…
Headless Content Management Systems are great because they decouple the frontend from the backend logic. However, sometimes this decoupling can also be a hinderance. When someone makes changes to the content via the CMS, they usually don’t get it done in one go and hit publish - it’s an iterative process, going back and forth between CMS and website. Editors might need to check whether a piece of…
I took some time this week to upgrade my site to the newest version of Eleventy. Although v3.0.0 is still in alpha, I wanted to give it a try. This iteration of mxb.dev is already 7 years old, so some of its internal dependencies had become quite dusty. Thankfully with static sites that didn’t matter as much, since the output was still good. Still, it was time for some spring cleaning. Switching…
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains. New feature fatigue Permalink to “New feature fatigue” # Right now, we’re in the middle of a real renai-css-ance (the C is silent) . It’s a great time to write CSS, but it can also feel…
Haven't done one of these since 2020, but this feels like a good opportunity to get some writing in just before the new year. Let's see if I can still remember how to do this blogging thing. Work Permalink to “Work” # We built a lot of interesting projects in 2023 with Codista , and we’ve had a very good year working with established clients and partners. Some of it has been quite challenging, but…
I have recently been made aware that the frequency of new content published on my site has gone down quite a bit. Ok fine, I trash-talked Manuel’s website on Mastodon and he correctly pointed out that while I wrote an impressive two (2) blogposts last year, he wrote around 90 (while also doing talks, audits, raising an infant daughter and probably training for a marathon or some shit like that, I…
Dear Reader, Since there’s a good chance that you -like me- are involved in web development and/or have a special interest in technology, I want you to play along and engage in a thought experiment for this post: Imagine you’re a regular user. Imagine you have never heard of git branches, postgres or a “webpack config” (lucky you). You really don’t care about all of that, but you do care about…
When I first fell in love with the web, it was a radically different place. Aside from the many technical improvements that have been made, I feel like the general culture of the web has changed a lot as well. Growing up with the web as a teenager meant having access to an infinite treasure chest of content. A lot of that content was spread across blogs, forums and personal websites. The…
With container queries now on the horizon - will we need media queries at all? Is there a future where we build responsive interfaces completely without them? Ethan, who coined the term responsive web design over a decade ago, has recently said that media-query-less layouts are certainly within bounds: Can we consider a flexible layout to be “responsive” if it doesn’t use any media queries, but…
Container Queries are one of the most anticipated new features in CSS. I recently got a chance to play with them a bit and take the new syntax for a spin. I came up with this demo of a book store. Each of the books is draggable and can be moved to one of three sections, with varying available space. Depending on where it is placed, different styles will be applied to the book. The full source code…
"Asset Pipeline" is a fancy way of describing a process that compiles CSS, Javascript or other things you want to transform from a bunch of sources to a production-ready output file. While some static site generators have a standardized way of handling assets, Eleventy does not. That’s a good thing - it gives you the flexibility to handle this any way you want, rather than forcing an opinionated…
I took a stab at building a plugin for Eleventy that lets me highlight selected pieces of text and provide users with an easy way to share them. This feature was first made popular by Medium , where authors can pick a “top highlight” in a post and hovering it will show a tooltip with sharing options. I wanted something like this for independent blogging too, so I came up with a custom solution.…
The iconic 1996 "Space Jam" website was recently relaunched to promote the new movie. Thankfully, the developers still kept the old site around to preserve its intergalactic legacy. It’s not often that a website stays up mostly unchanged for 25 years. So out of curiosity, I ran a quick check on both sites. Unsurprisingly, the new site is a lot heavier than the original: with 4.673KB vs. 120KB ,…
I'm a fan of webmentions. I've written about how to use them before, and I'm quite happy with having them on my site. However, it can get difficult to see what’s going on with them - especially if there’s a lot of “background noise”. Many sites just scrape content from well-known blogs and republish it for SEO juice. If that content includes a link to your site, it can lead to webmention spam.…
Static Site Generators are all-or-nothing. Each time they build a new version of the site, they throw away everything that was created before and start from scratch. That’s usually what you want to ensure everything is up-to-date. But there are special cases when keeping parts of the previous build around makes sense. For example, If you fetch lots of data from an external source during your…
I don't think I have to tell anyone why this year sucked, what with the pandemic and all. 2020 is going down in history as a massive crapstorm. Still, I want to continue the tradition of “end-of-the-year” blogposts and since there’s already enough doom out there these days, I’m trying to focus on the good things that happened instead. Work Permalink to “Work” # The web industry is among the…
The web needs to take itself less seriously. It's barely out of its twenties and suddenly it's all like "I can't make fansites for hippos anymore, I have businesses to run". It used to be cooler. It used to be weirder . As Sarah Drasner puts it in “In Defense of a Fussy Website” : While we’re all laser-focused on shipping the newest feature with the hottest software and the best Lighthouse scores,…
In big cultural concepts like music or fashion, things have a way of coming around full circle. I'm pretty sure someday grunge will come back as a hot new sample, and at some point our kids might think frosted hair tips are totally cool. When I look at some of the trends on the web today, I wonder if we’re at that point yet. I wonder if we’re ready to revisit some of the ideas of the early web…
Violence and injustice are omnipresent these days. We’re faced with an ugly truth and it’s gut-wrenching to watch. Through my developer-centric filter bubble, I sometimes see the tech world react to times of crisis. Often our first instinct seems to be to turn to technology. Build something to fix this. I get that if all you have is a hammer, everything looks like a nail. I’m guilty of this…
Last year, the design gods decided that dark modes were the new hotness. "Light colors are for suckers", they laughed, drinking matcha tea on their fixie bikes or whatever. And so every operating system, app and even some websites (mine included) suddenly had to come up with a dark mode. Fortunately though, this coincided nicely with widespread support for CSS custom properties and the…
Last week I came across this post by Eric Bailey. In it he describes some of the issues he's seeing with overengineered, inaccessible résumés. This again addresses the over-reliance on powerful Javascript frameworks like React, even in cases where simple semantic HTML might be better suited for the task. I’m currently putting my self-isolated weekend time towards side projects, and I thought this…
In cases of emergency, many organizations need a quick way to publish critical information. But existing (CMS) websites are often unable to handle sudden spikes in traffic. Just received a shelter-in-place emergency alert with a web address for more information. Clicked the link. The site is down. All emergency sites should be static. — Nicholas C. Zakas (@slicknet) March 17, 2020 To make…
Long before I wrote my first line of code, all I wanted to do was make music. I went to a music-focused high school, played in a couple of bands, and I loved it. I also loved making flyers, posters and CD artwork for local bands - It’s actually what got me started in design and ultimately led me to build for the web. You see I can’t really draw, so my only option to create the images in my head…
As the final hours of 2019 are winding down, I want to take a moment and look back at everything that happened this year - because it was a busy one. Work Permalink to “Work” # At the beginning of 2019, I became a partner at Codista , the software studio where I’ve been working for some time now. Thomas, Luis and I now run the company as a trio, and building together has been great. Besides…
It has been three days now since I stood on stage at Urania Vienna, hearing Manuel close our very first conference . I'm still not really sure how we pulled that off. Photo by Sergey Poliakov (Twitter) I have been to quite a few web development conferences as an attendee, and lately even as a speaker. But the organization of such events always eluded me. I of course noticed when an event was…
There's a small town that needs a new road. The old road is pretty worn and full of potholes, so it's time for a change. First plans look promising. It’s really nice and modern. The old road had sidewalks and a bike lane, but these don’t really fit in with the new design and take too much time to build. Nobody on the planning committee knows any pedestrians or cyclists anyway, so the project…
A pain point of the IndieWeb is that it's sometimes not as convenient to share content as it is on the common social media platforms. Posting a new short “note” on my site currently requires me to commit a new markdown file to the repository on Github. That’s doable (for a developer), but not really convenient, especially when you’re on the go and just want to share a quick link. Twitter and other…
There is a thing that happens to me while writing. I start with a fresh idea, excited to shape it into words. But as time passes, I lose confidence. The original concept starts to look shallow or irrelevant, and the phrases sound awkward and repetitive. It just doesn’t feel good anymore. I don’t think that’s unique to me - In fact I guess one of the reasons why many people would rather write a…
Ah yes, CSS. Hardly a week passes without it being the topic of a heated online discussion. It's too hard. It's too simple. It's unpredictable. It's not a real programming language. Peter Griffin struggles with blinds dot gif. I don’t know why CSS sparks so many different emotions in developers, but I have a hunch as to why it can sometimes seem illogical or frustrating: You need a certain mindset…
After Tatiana Mac proposed to bring webrings back , I hacked something new together over the weekend: A starter kit for hosting your own webring! What’s a Webring? Permalink to “What’s a Webring?” # It’s a blast from the past: In the 90s, sites about a common topic could join together in a central index. To be a member, you had to embed a little widget on your page that contained a “forward”, a…
In the 1997 movie "Contact", Jodie Foster discovers an alien signal that contains the construction plans for a spaceship. Trying to assemble it, the engineers are surprised to find that the crew capsule is just an empty metal pod. “That shit’s unsafe”, they say (I’m paraphrasing), so they attach a complicated wall-mounted seat to the inside. When the ship launches, that seat starts to pick up…
In last week's post, I talked about syndicating content from a static site to Twitter. But getting content out is only half the challenge. The real value of social media (apart from the massive ad revenue and dystopian data mining) is in the reactions we get from other people. The likes, reposts and replies - they’re what makes it “social”. To gain control over our own content, we need to capture…
One of the core principles of the IndieWeb is that people should own their own content. Controlling how and where they publish makes users more independent from big content silos. However, the main reason why people publish on Twitter / Medium or other platforms is that they can reach a much bigger audience there - everyone’s on them, so you have to be too. Publishing on a personal site can cut…
As Hurricane Florence makes its way across the US southeast coast, many people are stuck in areas with severe flooding. These people rely on outside information, yet have limited bandwidth and power. To help them, news platforms like CNN and NPR provide text-only versions of their sites: We have a text-only version of our website for anyone who needs to stay up-to-date on Hurricane Florence news…
Over the last decade, we have learned to embrace the uncertainty of developing for the web. We don’t design sites for specific screen dimensions anymore, we make them responsive. We don’t assume ideal browsers and devices, we use progressive enhancement. When it comes to connectivity though, we still treat that as a binary choice: you’re either on- or offline. Real connections are not that simple.…
If you’ve been to any web design talk in the last couple of years, you’ve probably seen this famous tweet by Jon Gold: which one of the two possible websites are you currently designing? pic.twitter.com/ZD0uRGTqqm — Jon Gold (@jongold) 2. Februar 2016 It mocks the fact that a lot of today’s websites look the same, as they all follow the same standard layout practices that we’ve collectively…
The React JSX Syntax offers a layer of abstraction that's very useful for component-based systems - but it's easy to forget that everything you write ultimately compiles down to HTML. Encapsulating pieces of UI this way makes it easier to compose larger systems, but it also hides the “bare bones” structure of an application. That’s not a bad thing - but I feel like it’s one of the reasons why…
Good News! CSS Grid has been out for some time now, and browser support is very good. If you're building stuff on the web, this is definitely a tool you should have on your belt. Not only is grid worth checking out, it’s also ready to be used in production, today. You know - on the real web. Grid support as of 04/18. Look at all that green. So, what can we build with this? I’ve used grid on…
This article was originally published on CSS-Tricks.com . Designing loading states on the web is often overlooked or dismissed as an afterthought. Performance is not only a developer's responsibility - building an experience that works with slow connections can be a design challenge as well. While developers need to pay attention to things like minification or caching, designers have to think…
Forms on the web don't usually play nice with bad connections. If you try to submit a form while offline, you'll most likely just lose your input. Here's how we might fix that. TL;DR: Here’s the CodePen Demo of this post. With the introduction of Service Workers, developers are now able to supply experiences on the web that will work even without an internet connection. While it’s relatively easy…
A truly responsive website should adapt to all kinds of situations. Besides different viewport sizes, there are other factors to consider. A change in connectivity is one of them. Earlier this week, I was sitting in a train on my way to speak at a local meetup. InterCity trains in Austria all have WIFI now, so I was doing some last-minute work on my slides online. Train WIFI being what it is…
A Progressive Web App, or PWA, uses modern web capabilities to deliver an app-like user experience. Any website can be a PWA - here's how to do it. The "add to homescreen" prompt in a PWA Turning a basic website into a PWA is not that hard and has a lot of real benefits, so I want to take a look at the three main steps necessary to achieve just that. But first, let me address some common…
I built this product slider as part of a wine shop I was working on in 2015, and since it's also featured in a case study here on my site, I had a couple of people asking me how the animation was done. Well, it’s really quite simple – so here’s a quick rundown on how to make the bottles dance. You can see the actual live thing in action on one of the product pages here . Grab some Grüner Veltliner…
I recently worked on a larger new web app. The product was in its early stages, so one of the first big tasks was to come up with a prototype for the UI design. I started doing some pen-and-paper mockups and some concepts in Sketch, but the project details weren’t clearly defined yet, and things would change very frequently. I had to redo a lot of components or modify them often to reflect changes…
I've been a freelance web developer for about seven years now. I started making websites when I was still in school - I used to do fun little sites for local bands, events and other things. At some point I decided to do it professionally, registered my business and had my first real clients. I’ve learned a lot since then, and I still do now. At the beginning of 2017, I did some thinking about…
Two weeks into 2017, I used some spare time to relaunch my website. I do this almost every year - not (only) because of my neverending quest to optimize the shit out of it, but because it’s a great way for me to try new things I want to learn on a “real life” project. Altough it’s a fairly simple site - basically just a small portfolio section, a blog and a contact form, it’s still a good exercise…
I recently came across the H5BP’s Frontend Developer Interview Questions . It’s a collection of questions related to building websites, meant for employers to vet potential candidates for a job. Although I’m currently not looking for a (regular) job, I thought it would be interesting to try and answer as many as possible and see where I stand. I think when you first start learning about web…
I’m a big fan of good looking band art. Sadly though, unlike other countries, Austria doesn’t really have a culture of well designed concert posters - they’re usually just bold type on bright neon paper stapled to a signpost. So for a long time, collecting and designing covers and gig posters for local bands has been one of my favourite hobbies. I just love when music and design come together like…