“The suspense is killing me,” said Arthur testily.
Stress and nervous tension are now serious social problems in all parts of the Galaxy, and it is in order that this situation should not in any way be exacerbated that the following facts will now be revealed in advance.
Hitchhiker’s Guide to the Galaxy

I am not returning to Mozilla in February but go on to bring the great messages of an open web somewhere else. Where, I do not know yet. I am open to offers and I am interested in quite a few things happening right now. I want something new, with a different audience. A challenge to open and share systems and help communication where the current modus operandi is to be secretive. I want to lead a team and have a clear career path for people to follow. If you have a good challenge for me, send me some information about it.

I love everything Mozilla has done and what it stands for. I also will continue being a Mozillian. I will keep in touch with the great community and contribute to MDN and other open resources.

Of course there are many reasons for this decision, none of which need to go here. Suffice to say, I think I have done in Mozilla what I set out to do and it now needs other people to fulfil the new challenges the company faces.

I came to Mozilla with the plan to make us the “Switzerland of HTML5”, or the calming negotiator and standards implementer in the browser wars raging at that time. I also wanted to build an evangelism team and support the community in outreach on a basis of shared information and trust. I am proud of having coached a lot of people in the Mozilla community. It was very rewarding seeing them grow and share their excitement. It was great to be a spokesperson for a misfit company. A company that doesn’t worry about turning over some apple-carts if the end result means more freedom for everyone. It was an incredibly interesting challenge to work with the press in a company that has many voices and not one single communication channel. It was also great to help a crazy idea like an HTML5 based mobile operating system come to fruition and be a player people take serious.

Returning to Mozilla I’d have to start from scratch with that. Maybe it is time for Mozilla not to have a dedicated evangelism team. It is more maintainable to build an internal information network. One that empowers people to represent Mozilla and makes it easy to always have newest information.

I am looking forward to seeing what happens with Mozilla next. There is a lot of change going on and change can be a great thing. It needs the right people to stand up and come up with new ideas, have a plan to execute them and a way to measure their success.

As for me, I am sure I will miss a few things I came to love working for Mozilla. The freedoms I had. The distributed working environment. The ability to talk about everything we did. The massive resource that is enthusiasts world-wide giving their time and effort to make the fox shine.

I am looking forward to being one of them and enjoy the support the company gives me. Mozilla will be the thing I want to support and point to as a great resource to use.

Making the web work, keeping our information secure and private and allowing people world-wide to publish and have a voice is the job of all the companies out there.

As enthusiastic supporters of these ideas we’re not reaching the biggest perpetrators. I am looking forward to giving my skills to a company that needs to move further into this mindset rather than having it as its manifesto. I also want to support developers who need to get a job done in a limited and fixed environment. We need to make the web better by changing it from the inside. Every day people create, build and code a part of the web. We need to empower them, not to tell them that they need a certain technology or change their ways to enable something new.

The web is independent of hardware, software, locale and ability. This is what makes it amazing. This means that we can not tell people to use a certain browser to get a better result. We need to find ways to get rid of hurtful solutions by offering upgrades for them.

We have a lot of excuses why things break on the web. We fail to offer solutions that are easy to implement, mature enough to use and give the implementers an immediate benefit. This is a good new challenge. We are good at impressing one another, time to impress others.

“Keep on rocking the free web”, as Potch says every Monday in the Mozilla meeting.

The last five days I was without fixed internet. The reason was that someone ripped out the cables of the main exchange on my street which left a whole block without phone and data connection:

Of course, eight different internet providers tried to shift the responsibility to each other which is why it took five days to fix. I am lucky to live in a neighbourhood with lots of cafés with free wireless, and I am on leave, so it was not that much of an issue. It was interesting, though, to see just how bad an experience being online with my mobile or via hotspot on my Android still is.

Traffic watch

First of all, I thought I had unlimited traffic. Turns out that my T-Mobile, which then changed to Orange, which now turned to EE, and probably another provider next week or when the moon is full has a “fair use” limit of 5 GB per month. Other neighbours were less lucky, they had their mobile contingent used up really quickly and then had to resort to either buying expensive boosters or a different SIM.

Following my normal surfing and computing habits, I’d have exceeded the 5GB in 6 days – and that’s while working from the cafe most of the time during the day.

Our internet traffic is ridiculous by now. And in most cases it is cruft. It is people posting an image when a text would have been enough. Huge images and lots of fonts for a simple blog. Video ads and social media solutions (“like buttons”) with lots of dependencies instead of being – say – a link or a button pointing to an API endpoint. But most of all, it is constant software updates and dependencies on anything you try out. On a fast connection, we don’t realise that much. But when you are wondering about your traffic use, any app starting and asking for an update is annoying. This is exacerbated by the fact that many updates fail to tell you upfront how big they are and what benefit they have. Are they a security fix? Or a new background image and cool new emoji packs?

My daily internet check involves naturally a lot of code related research. In the past, this involved downloading a zip file, unpacking it and playing with it – even offline. Maybe pulling a github repo. In our new world of package managers everything is a trip to the command line, dozens and dozens of resources being loaded and installed and – if you are lucky – you end up with a folder with an HTML document, a CSS file and a JS file. If you’re not lucky, you get some cryptic error messages after downloading 5MB. Or a JavaScript you’d like to try out asking you to give its installer SUDO privileges. The cherry on top is that When you try the solution out it still needs to load more resources from a CDN. Some simplicity in this case would help a lot of developers in badly connected environments.

Battery drainage and heat accumulation

Having a hotspot on your Android also means your battery is eaten very quickly. Leaving the phone attached to a lead is very much necessary. The hotspot also lives up to its name and heats up the phone nicely. With the temperatures these days, this was actually not bad, but you know what I mean.

Detection nightmare

When using the hotspot on my Android, most pages detect my laptop as a mobile device. In many cases, as an iPhone which makes no sense whatsoever as I am tethering to a Nexus 5. I then get a “mobile experience”, most of the time very limited in functionality, but at least still with retina ready imagery of several MB whilst my resolution is 1024. Far too many sites make a lot of assumptions in their detection.

Content filtering

Another thing my provider does to protect me is content filtering. A few of the web sites I use are now not available as they have “adult content”. In most cases, this is a wrong detection of a seemingly naughty word, whilst real porn sites load just fine (I heard). This is creepy. And I was never specifically asked if I am OK with that. It also means that everything I do goes through some filtering proxies. Who watches the watchmen there?

Image compression

The last thing my provider does is downsample images. This means that everything looks blurry and full of JPG artifacts whilst not really saving much in terms of file size. Each image gets a little tooltip on hover that states “Shift-R improves quality of that picture and SHIFT-A improves the quality of all pictures on that page”. This seems to be injected by proxy as I can’t find it anywhere in the page and it overrides other tooltips. The way around that is to modify the headers of your browser to set Cache Control to No-Cache.

Learnings

All in all this verified what I’ve been saying on stage for quite a while now: offline matters. Sadly enough, not any of my day to day tools works offline any more. Excellent services like Netflix don’t allow me to download something and watch it later (like the BBC Player did – or does?). Spotify works offline, if you download your songs. That’s cool.

I also realised that whilst I felt very annoyed about being offline most of my neighbours had less problems with it. The general consensus was that it is annoying as the kids can’t play their games. Another case that really would not need a connection in most cases. But it also means that what ails us as technorati really is not what everybody thinks. Time for a reality check.

All in all, I found the mobile-only connectivity still a very disappointing experience. And that is something I will keep in mind for conversations when people tell me that every user now is mobile and that neither desktop nor landlines matter any longer. Those people should go on a wireless diet like this and then re-consider what they are saying.

Of course, this is all still amazing and a few years ago we only dreamt of the things we have now. But, with big promises comes bigger disappointment. Seeing a full wireless icon and being unable to connect to the internet is a very odd experience. And we shouldn’t be surprised that things fail, after all, it is humans running this.

As part of a tool I just wrote, I had the issue that one form field was dependent on another and I didn’t want to go the full way and create the field on demand with JavaScript but keep it to CSS. You can see the result here:

A simple way to achieve this visually is to use the :checked pseudo and + selectors as you can see in this Fiddle:

The HTML is the following:

<form>
    <input type="checkbox" id="moo">
    <label for="moo">Condition</label>
    <label>
        value for condition: 
        <input type="text" value="20">
     </label>
</form>

And the important CSS are these few lines:

label + label {
    padding-left: 1em;
    opacity: 0.1;
    transition: 0.5s;
}
:checked + label + label {
    opacity: 1;
}

Questionable accessibility

Once you publish something like this, you will get a lot of tweets that this is not accessible. The same happened here, and it doesn’t matter that I wrote about the shortcomings in the first version of this post. The debate is interesting and relevant. So let’s break it down:

1. The form field that is dependent on the activation of the checkbox is available at all times. It is not taken out of the tabindex or removed or deactivated – all CSS can do is change it visually. This can be an issue as users can access the field, change its value and more or less wasted their time as it’d never get applied unless they also activate the checkbox.
2. The proper way of doing this would be to make the field unavailable until the checkbox is activated. This needs a JavaScript solution. You need to either change the tabindex dynamically or remove it from the DOM.
3. It might be enough to change the visibility to hidden or the display to none (it is – see below). I feel not safe doing that though, as I rely on implementation details of assisstive technology that is not standardised. Should a screen reader not access an element that is visbility: hidden?
4. Is a JavaScript solution really more accessible or could it be more fragile? If something happens and your JavaScript doesn’t run (a resource wasn’t loaded, an earlier script failed) end users will never get the extra field.
5. Is this the better solution? Or does it mean we rely on a very complex solution because we are used to having to apply it? A lot of feedback I got to this was “Real dynamic forms are only possible with JavaScript”, which sounds cargo cultish to me – and I’ve been a JS advocate for a long time.

It is disappointing that a simple problem like this still needs a lot of DOM manipulation and/or ARIA to really be accessible. Maybe we think too complex – a different way of solving this issue would be to cut this problem into several steps and reload the page in between. Overkill for one field, but for very complex JS-driven forms this might be a much saner solution. And it could result in smaller forms as we don’t need a framework or lots of libraries.

In this – simple – case I wonder what harm there is in the extra form field to be accessible to non-visual users. The label could say what it is. Say the checkbox has a label of “convert to JPG”. A label of “JPG quality” on the text field would make things understandable enough. Your backend could also be intelligent enough to realise that when a JPG quality was set that the user wanted a JPG to be generated. We can be intelligent in our validation that way.

Update: Visibility fixes the issue

Turns out that adding visibility to the earlier example has the same visual presentation and fixes the tabbing issue:

The HTML is still the following:

<form>
    <input type="checkbox" id="moo">
    <label for="moo">Condition</label>
    <label>
        value for condition: 
        <input type="text" value="20">
     </label>
</form>

And the updated CSS:

label + label {
    padding-left: 1em;
    opacity: 0.1;
    visibility: hidden;
    transition: 0.5s;
}
:checked + label ~ label {
    opacity: 1;
    visibility: visible;
}

UPDATE: Safari fix.

As Safari doesn’t support multiple + selectors, replacing the second one with a ~ works. Get with it, Safari!

Using my time off work to #justcode, I tweaked the Pixel logo generator I did years ago quite a bit in the last few weeks.

To make that time a bit more worth-while, I now also wrote up a detailed tutorial on how to create a logo generator like this.

The tutorial is called Canvas, images and pixels and is available on GitHub for download.

In it, I explain a few things:

• How to manipulate images in canvas
• How to create a logo from a font that is in a bitmap
• How to offer a zoom view for an image that is not blurry
• How to save a canvas as an image
• How to analyse and change the colours used in an image

All the demos are live in the page and are kept as simple as possible, using no libraries or abstractions.

Enjoy, and I hope you learn something from it!