I'm a web developer based in Malmö, Sweden. During the day I’m web developer and founder of Tula Studio. This site contains the bits and bobs I decide to publish online.

Peter Simonsson – Web developer in Malmö, Sweden

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.

```css
/* Don’t do it */
:focus {
	outline: 0;
}
```

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:

```js
window.addEventListener('keydown', ev => {
	if (ev.key === 'Tab') {
		document.documentElement.classList.add('tabbed');
	}
});

window.addEventListener('mousedown', () => {
	document.documentElement.classList.remove('tabbed');
});
```

This adds and removes the `tabbed` class to the HTML element, which we can then use in our CSS:

```css
:focus {
	outline: 0;
}

.tabbed :focus {
	outline: 2px solid #000;
}
```

You can try it out on this [CodePen](https://codepen.io/pss/pen/ywbrVq).

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

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 `odd` or `even` are easy to predict the result of, something like `3n+1` can be a bit more difficult.

## An example

The way to reason about it is to replace `n` with a sequence of numbers, and nth-child() selects the results.

For the pattern `3n+1`:

| Pattern | n   | Equation       | Selected element |
| :------ | :-- | :------------- | :--------------- |
| `3n+1`  | 0   | 3 × 0 + 1 = 1  | 1                |
| `3n+1`  | 1   | 3 × 1 + 1 = 4  | 4                |
| `3n+1`  | 2   | 3 × 2 + 1 = 7  | 7                |
| `3n+1`  | 3   | 3 × 3 + 1 = 10 | 10               |
| `3n+1`  | 4   | 3 × 4 + 1 = 13 | 13               |

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 `4n+3` will select.

## The solution

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!

[Try it here](https://nth-child.simonsson.com/)

![screenshot.png](/uploads/screenshot_5d771aa1c7.png)

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

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.

## Results

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.

## My role and responsibility

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

Har vi ditt lösenord? was a service to complement SVT Dold’s reportage on password security. 2 million people used the service during its 9 day campaign period.

large_start.jpg

medium_start.jpg

small_start.jpg

thumbnail_start.jpg

start.jpg

large_safe.jpg

medium_safe.jpg

small_safe.jpg

thumbnail_safe.jpg

safe.jpg

large_hacked.jpg

medium_hacked.jpg

small_hacked.jpg

thumbnail_hacked.jpg

hacked.jpg

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.

## My role and responsibility

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.

The website Svenska löpare gives access to all running races, trainings and events organized by the Swedish Athletic Association and its members.

large_map.jpg

medium_map.jpg

small_map.jpg

thumbnail_map.jpg

map.jpg

Svenska löpare

Needs More JPEG is a web service created as a reference to the "Needs More JPEG" [internet meme](http://knowyourmeme.com/memes/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. Can also be used through a [Facebook Messenger bot](https://m.me/needsmorejpg).

Needs More JPEG is a web service created as a reference to the "Needs More JPEG" internet meme. Upload your image, and the service will completely ruin it for you.

Needs More JPEG

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.

## Results

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.

## My role and responsibility

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 was a Facebook app created to bring attention to the premiere of MTV’s new dating show Are You the One?.

Match Machine

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.

## Results

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&#8198;% due to Utmanare Redo.

## My role and responsibility

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 (Contender Ready) was a campaign with the goal of attracting the fitness audience to the TV show Gladiatorerna (The Gladiators).

Peter Simonsson