Brad Frost shares a clever use of the
picture element in combination with a
prefers-reduced-motion media query to make animated GIFs more accessible.
Chris Coyier explores several ways to do HTML includes. I particularly like Scott Jehl’s approach involving self-removing
There’s so much in Jeremy’s post that I can relate to. If they weren’t that long, I would wear his closing remarks on a t-shirt.
When we’re evaluating technologies for appropriateness, I hope that we will do so through the lens of what’s best for users, not what we feel compelled to use based on a gnawing sense of irrelevancy driven by the perceived popularity of newer technologies.
Brad Frost on wether an
input type="number" is always a good idea. (Hint: it's not)
And another really nice visual cheatsheet for CSS flexbox properties.
A really nice cheatsheet for CSS grid properties.
Although I’ve chosen making websites as my profession—either freelance or as part of a team—I’ve always tried to make time for personal projects, the very first one and longest running being my own website of course. And despite the fact that only “real client work” is paying the bills, I think we as webdesigners can benefit profoundly and in many different aspects from working on our own projects from time to time.
Let me tell you a little story. Some time ago, some of my team mates and me decided to try and taste a new beer every friday. Think of it as a weekly cool down/reward event. We set some rules (german beer only, real beer, no mixed beverages allowed) and we were eager to find out, how many fridays we could go on like this before there were no beers left that we hadn’t tried before. Admittedly a fanciful endeavour, but we started it nonetheless.
Soon we realised, we needed to keep track of the beers we tasted, not only to avoid repetition, but also because we wanted to rate them with a simple five star system. An ordinary spreadsheet was the obvious way to go at first, but that didn’t last very long.
Turning it up
After only a few weeks I thought: maybe I could write a little web application for that. It took me just one (although very long) evening to throw together a basic version that allowed people to log in, submit and edit new beers and of course to rate them. Over the course of a few days we came up with some improvements that I implemented and voilà: we had something we could use to replace our boring spreadsheet.
I really enjoyed building this thing. Not just because it really helped us “scratch our own itch”, but also because I had the opportunity to try new things and learn from it in the process. I figured out how to use the Processwire CMS for handling the data, I learnt about user management and sessions, I got to use flexbox a lot for layout purposes and I tried to make the interface as fast as possible. And thanks to Jeremy’s insights, I dipped my toes into SVG sparklines to create activity visualisations.
Up until now, we have assembled a nice backlog of ideas to further enhance our little app. I’m sure I’ll have a go at making the site work offline using a service worker at some point for instance.
Taking it one step further
Our initial plan was to try and taste one beer every friday. But soon enough, we started using the app outside of that time constraint. Barely three months in, there were already over 60 beers submitted, tasted and rated.
Not having found the perfect beer for us (yet), we came up with another plan: we wanted to make our own beer! After a few weeks of research and gathering of materials we started brewing. Of course, our beer needed a name and appropriate branding so we started working on those things during our lunch breaks and in our free time. We came up with some basic design elements and just went from there: we created a website, a Facebook page and an Instagram account that we’ve been posting on ever since.
You see where I’m going with this, right?
It fascinates me how ideas turn into small side projects and that these projects themselves spark other ideas that turn into projects once again.
I think, personal projects are incredibly valuable for a number of reasons:
Freedom of failure
Unconstrained by any client work, you can just do whatever you like. Never used a particular technique before? Just go ahead and do it. What could go wrong? The cost of failure is very low, the learning possibilities however are endless.
If we’re not careful, we tend to get stuck in kind of a rut when we do client work. Sure, every client is different and we need to adapt how we approach things depending on specific requirements. But: we are also humans. And as such we try to do things in a way we feel comfortable with. Working on a side project allows us to do things differently and in doing so offers us the possibility to learn new things, which then in turn can find their way back into our day to day client work. Just recently a colleague asked me about a particular problem she was having and I immediately knew the answer, because I had just encountered that exact same situation when I was working on the app.
Working on something you are excited about is an excellent catalyst for new ideas. We went from beer tasting to developing a web application to brewing our own beer in just a few weeks. I really like the kind of flow you’re getting into, especially if it’s not just you working on a personal project. When there are other people involved, there’s infinite room for bouncing around ideas and sharing thoughts.
A few years ago I started adopting the IndieWeb principles on my website. I have set up a micropub endpoint, I post to twitter from my own site, and I’ve been using OwnYourGram to pull in the photos I post on Instagram.
One thing that I’ve been wanting to do since then, was to include the bike rides I track and post on Strava. Strava let’s you upload activities through their API, which would make it the perfect choice for the POSSE principle.
However, there is a downside to this approach: I don’t have a separate GPS tracking device to record my rides. Instead, I use Strava’s iPhone app which is absolutely brilliant. So I decided to go with the PESOS principle here. I wrote a module for Processwire (the CMS I’m using) that hooks into the LazyCron module, fetches the rides I’m tracking and posts them in the notes section of this site, including the photos I took on the ride, a map and some stats. The final result looks like this.
I really enjoyed playing around with Strava’s API and I suspect I’m not done yet. Next steps might include grabbing the kudos and comments on my rides and displaying them here.