Writing

  1. Going Buildless

    code

    Can we do modern web development without a build step? How can we solve common build problems in HTML, CSS and Javascript using just the platform?

  2. Live CMS Previews with Sanity and Eleventy

    code

    How to set up on-demand building in Eleventy to allow live content previews with Sanity CMS.

  3. Upgrading to Eleventy v3

    code

    I took some time this week to upgrade my site to the newest version of Eleventy. Here's what I learned.

  4. Old Dogs, new CSS Tricks

    code

    A lot of new CSS features have shipped in the last years, but actual usage is still low. One of the biggest barriers: we need to re-wire our own brains.

  5. A year in review: 2023

    general

    You know how these work: I'll tell you about the year I've had. Maybe you'll get a couple of good links out of it.

  6. 7 Reasons why I don't write

    general

    I didn't write a lot last year, even though I wanted to. Here are the things I tell myself that keep me from writing, and why they are probably bullshit.

  7. The IndieWeb for Everyone

    indieweb

    Many people are looking for alternatives to Twitter. Can the IndieWeb step up? How can we build better social media for people without technical knowledge?

  8. Make Free Stuff

    general

    On web3, Wordle and the radical concept of building things for free.

  9. Media Queries in Times of @container

    code

    With container queries now on the horizon - will we need media queries at all?

  10. Container Queries in Web Components

    code

    Container Queries are one of the most anticipated new features in CSS. I recently got a chance to play with them a bit and came up with this demo.

  11. Asset Pipelines in Eleventy

    code

    While some SSGs have a standardized way of handling assets, Eleventy does not. That's a good thing! Here are a few possible approaches you can take.

  12. Medium-Style Share Highlights in Eleventy

    code

    I built an Eleventy plugin to do Medium-style text highlights that can be shared. It uses a webcomponent, custom properties and the Web Share API.

  13. Space Jam

    code

    I'm running a speed test on the new Space Jam site: the 1996 version on dial-up VS. the 2021 version on a 3G connection. Who will win?

  14. Webmention Analytics

    code, design

    I built a tool to analyze incoming webmentions. This new side project generates monthly reports to see how and where my content is mentioned.

  15. Making Persistent Build Folders in Netlify

    code

    I recently learned how to make persistent cache folders that stick around between builds on Netlify, and I'm using it to store webmention data.

  16. A year in review: 2020

    general

    I don't think I have to tell anyone why this year sucked. I still want to continue the end-of-the-year blogpost tradition, but focus on the good things that happened instead.

  17. Whimsical Website Club

    design

    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.

  18. The Return of the 90s Web

    code

    Are we ready to revisit some of the ideas of the early web again? There are trends that suggest we might just have come full circle - and I like it.

  19. Human Code

    general

    Some problems can’t be solved with technology. You can’t code away systemic racism, and you can’t design your way out of a human rights crisis.

  20. Color Theme Switcher

    code, design

    Let users customize your website with their favorite color scheme! Your site has a dark mode? Mine has ten different themes now, and they're named after Mario Kart 64 race tracks.

  21. Eleventy Résumé Builder

    code

    A free template to generate semantic, accessible & resilient résumés for the web and print.

  22. The Emergency Website Kit

    code

    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.

  23. Making a Gigposter

    design

    How to create a custom print design for a Rage against the Machine show using Illustrator, Photoshop and zero drawing skills.

  24. A year in review: 2019

    general

    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.

  25. Webclerks Conference

    general

    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.

  26. Roads

    general

    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.

  27. IndieWeb Link Sharing

    code

    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. Let's improve that.

  28. Good Enough

    writing

    Feeling like something isn't ready yet can keep many good ideas from going public. I'm trying out a new strategy to combat "publishing anxiety".

  29. The CSS Mindset

    code

    CSS can be difficult to grasp if you think about it in terms of a "traditional" programming language. There is a certain mindset involved that helps to understand why it works the way it does.

  30. A Webring Kit

    code

    After Tatiana Mac proposed to bring webrings back, I hacked something new together over the weekend: A starter kit for hosting your own webring!

  31. On Simplicity

    general

    We assume that complex problems always require complex solutions. But sometimes the smarter way to build things is to try and take some pieces away, rather than add more to it.

  32. Using Webmentions in Eleventy

    code

    How to pull interactions from social media platforms like Twitter back to your own site, using Webmentions, webmention.io and Bridgy.

  33. Syndicating Content to Twitter

    code

    How to automatically publish content from a static site on Twitter, using Eleventy and Netlify's lambda functions.

  34. The Hurricane Web

    general

    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.

  35. Connection-Aware Components

    code

    The Network Information API provides insight into a user's network condition. Combining it with React might enable us to build sites that can respond to different connection speeds.

  36. The Layouts of Tomorrow

    code, design

    I went over to dribbble in search of fresh webdesign ideas - how hard is it to build a non-standard layout, given the modern CSS tools we have today? An experiment on CodePen.

  37. Semantic JSX

    code

    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.

  38. CSS Grid Admin Dashboard

    code

    A closer look at how CSS grid layout can be used in production today, including fallback styles for flexbox.

  39. Building Skeleton Screens with CSS

    code

    Designing loading states on the web is often overlooked or dismissed as an afterthought. Building an experience that works with slow connections is not only a developer's challenge...

  40. Offline-Friendly Forms

    code

    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.

  41. You're Offline

    code

    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.

  42. How to turn your website into a PWA

    code

    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.

  43. Bottle Slider Wiggle Effect

    code, design

    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.

  44. Prototyping an App in Static HTML

    code

    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.

  45. Three Goals for 2017

    general

    At the beginning of 2017, I did some thinking about where I wanted things to go for me.

  46. The Relaunch Post

    code

    Two weeks into 2017, I used some spare time to relaunch this website. I do this as a way for me to try new things and catch up on latest techniques.

  47. Frontend Developer Interview Answers

    code

    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.

  48. The Lost Art of the Gigposter

    design

    I'm a big fan of good looking music posters. I used to do them myself back when I was in school, and my living room still features some of my favourite designs.

  49. Music to work to

    general

    I don't like to work in silence. Especially when I'm doing something that needs concentration, I keep my best focus with the right background music.

  50. Travelling

    general

    For the last couple of years, I've been fortunate enough to travel to quite a few beautiful places on this planet. Here are some of them.