Got some kombucha brewing here in this 3D scene modeled, textured and rendered in Blender. All materials are procedural except for labels, logos and book cover. I used geometry nodes to scatter dust, crumbs and bubbles.

Kombucha

A couple of weeks ago, me and my cat traveled by ferry from Amsterdam to Newcastle. After walking around the deck for a bit I did the obvious thing; went back to the cabin and started up Blender. The foundation of the piece was made during the night at sea, and it was completed in the evenings of the following week.

Made in Blender 4.0, all materials are procedural except for text and symbols which were made in Photoshop and added as image textures inside the materials.

Making the most of an over-night ferry ride.

Maritime scene

Scouring Pinterest for project ideas, I happened upon a picture of an old radio receiver – the SP Sailor 66TS shortwave receiver. I decided to recreate it in 3D. Made in a beta version of Blender 4.1.

Scene featuring the rugged, utilitarian Sailor shortwave receiver.

Sailor Shortwave Receiver

In a state of simultaneous inspiration and boredom I scoured the house for interesting objects to model. I found a BIC Mini Lighter in a drawer and got to work. I was especially interested by the combination of metal and plastic.

Modeling, texturing and rendering objects found around the house.

BIC Mini Lighter

In our house, the day often starts with coffee brewed in our Bialetti Moka Express. It's a good brewer but also an iconic object. Here is one of my first attempts at modeling an object from a real-life reference.

Bialetti Moka Express

The Pilot G-2 is a fantastic writing utensil. As an homage to its greatness, I have here recreated it in 3D. All done in Blender 3.6 with some simple texture work in Photoshop.

Modeling and rendering of what I would argue is the best pen.

Pilot G-2 gel pen

Despite CSS’s relatively simple nature, there are a few things that I just can’t seem to grok. One of these things is the pattern that the :nth-child() pseudo selector takes. Things usually deteriorates into a trial-and-error search for the right pattern. So, let's take a step back and talk about what it does and how it works.

By adding :nth-child() to a selector, you're selecting a sequence from a list of elements, according to the pattern. While keyword patterns like 

 are easy to predict the result of, something like 

The way to reason about it is to replace 

 with a sequence of numbers, and nth-child() selects the results.

This is all fine in theory, but becomes confusing when you have to type the pattern for “every third element starting with number four” or determine what 

To quickly and visually get an understanding of how it works, I created a small tool that provides an easier way to reason about it. This helped me, and maybe it will help you too. Give it a try and tell me what you think!

The patterns of :nth-child() can sometimes be tricky to understand. I made a small website to help out.

Using the :nth-child() CSS pseudo-class

Working with forms and buttons, there's a thing that often comes up when implementing the different states; the blue focus outline. It's there to let users know where the focus on the page is, and it's essential for keyboard navigation.

For some designs though, it might not be desired. Maybe you're into more subtle effects, maybe you're working with a designer who is. Well, being a crafty person, you can simply decide to hide it and be done with it.

This solves the cosmetic issue, but while doing so it also completely destroys keyboard navigation. The user can't see where focus is, which is comparable to hiding the cursor for users who use a mouse.

The simple solution to the problem is to just not do it. Leave the outline and accept it – with time you might even learn to like it. If you do remove it, you are responsible for ensuring that the focus states are visible to the users who need them. We can infer that the user wants to see the focus states if they press the tab key, and hide them again if the user clicks with the mouse. This can be done with the following JavaScript:

 class to the HTML element, which we can then use in our CSS:

The benefit of doing this is that you can now make the focus state super obvious. Make it big and contrasty and don't let anyone miss it.

How to remove the :focus outline while improving keyboard navigation.

Removing :focus outline without destroying accessibility

Har vi ditt lösenord? was a service to complement SVT Dold’s reportage on password security. Users could inquire whether their login details were part of the over 1 billion accounts that SVT compiled from data breaches. If the login details were found, the user could request an email with information about the hacked websites, and instructions on how to improve the user’s password security.

2 million people (1/5 of the Swedish population) used the service during its 9 day campaign period. It was the main topic in the Swedish media on its launch day.

I did the web development and was responsible for operations during the campaign. The service was built on Django.

Har vi ditt lösenord?

The website Svenska löpare gives access to all running races, trainings and events organized by the Swedish Athletic Association and its members. The goal of Svenska löpare is health promotion and social gathering through running.

Svenska löpare is a long term project. It’s now in its second year and we’re seeing strong growth primarily from organic search. We’re also rolling out a feature where race organizers can log in and customize their pages.

I did the interaction design, web development, and some project management. Svenska löpare is built on WordPress. React is used for the more advanced front-end functionality.

Svenska löpare

Utmanare Redo ("Contender Ready") was a campaign with the goal of attracting the fitness audience to the TV show Gladiatorerna ("The Gladiators"). We created a website where gladiators challenged the public in weekly fitness exercises. By accepting the challenge visitors could realize the level of fitness required of the gladiators, thus changing their opinion on them, from pure muscle mass to actual athletes.

The website attracted over 100,000 visitors with an average session duration of three minutes. The number of streams started on TV4 Play rose by 15 % due to Utmanare Redo.

I was on the creative team and responsible for the development of the website. The front-end is built with React. All animations are CSS based and the website relies heavily on the HTML5 video elements for visuals and gladiator challenges. The site runs on a PHP back-end developed by More Digital Studio.

Utmanare redo

Match Machine was a Facebook app created to bring attention to the premiere of MTV’s new dating show Are You the One?. Through a sophisticated algorithm, users could find out their perfect match among their Facebook friends. The results were good enough to achieve a 19 percent conversion rate from visit to share, and Match Machine went viral.

The Match Machine had more than 48 million users between its launch in January 2014 until its end in May 2015, generated over one billion impressions on Facebook, and contributed to Are You the One? being renewed for another season.

I did the development on the project, including Facebook Graph API integration and matching algorithm. Match Machine was built on a PHP based back-end. I was also responsible for operations and maintenance throughout the lifetime of the app.

Match Machine

Needs More JPEG is a web service created as a reference to the "Needs More JPEG" 

. Upload your image, and the service will completely ruin it for you. Despite its limited utility roughly 20,000 people a month seem to like it.

Artworks