Once the Web was a thriving ecosystem of happily evolving, beautiful creatures. Like with any environment, sooner or later man will step in and kill a lot of things – actively or by accident – and diminish the diversity and health of said ecosystem.

In this series we will look at some of the strange animals that make up the Web as we know it, re-introduce them and show how you can do your part to make sure they don’t die out.

We start with the most important part of the Web: the Link.

A Link is what makes the web, well, the web. It is an address where you can access a certain resource. This could be an HTML document (another animal we’ll cover soon), a video, an image, a text file, a server-side script that does things like sending an email – anything really.

In order to make links work two things are needed: a working end point where the Link should point to (URL or URI – for the difference meet a few people who have too much time and not enough social interactions in their lives and discuss) and an interaction that makes a user agent try to fetch the Link. That could be a user typing the URL in an address bar of a browser, a cURL request on a command line or an HTML element pointing to the URL.

Links are kind of magical, insofar that they allow anyone to have a voice and be found. Check Paul Neave’s “Why I create for the web” to read a heartfelt ode to the Link. And it is true; once you managed to publish something at a URL all kind of wonderful things can happen:

• People can go there directly
• Search engines can index it so people can find it searching for similar terms
• Consumers can get the content you published without having to identify themselves and enter their credit card details (like they have to in almost any App Marketplace)
• Consumers can keep the URL for later and share it with others, thus advertising for you without being paid for it
• And much more…

It is the most simple and most effective world-wide, open and free publishing mechanism. That it is why we need to protect them from extinction.

In HTML, the absolutely best animal to use to make it easy for someone to access a URL is an anchor element or A. But of course there are other elements – in essence anything with an href or src attribute is a link out to the Web.

Endangering the interaction part

There are may ways people kill or endanger Links these days. The biggest one is people not using real links and yet expect Web interaction to happen. You can see anchor elements with href attributes of “javascript:void(0)” or “#” and script functionality applied to them (using event handling) to make them load content from the web or point to another resource. Ajax was the big new shiny thing there that made this the practice du jour and so much better than that awful loading of whole documents.

This is not the Web and it will hurt you. In essence these people do something very simple very wrong and then try to cover their tracks by still using anchor elements. Of course you can glue wings on a dog, but you shouldn’t expect it to be able to fly without a lot of assistance afterwards. There is no need for not pointing your anchors to a real, existing URL. If you do that, anything can go wrong and your functionality will still be OK - the person who activated the link will still get to the resource. Of course, that only works if that resource exists where you point to, which does lead to the second problem we have with Links these days.

Cool URLs don’t mutate

The practice of creating script-dependent links has also lead to another mutation of the link which turned out to be a terrible idea: the hashbang URL. This Frankenstein URL used fragment identifiers acting as Web resources, which they are not (try to do a meta refresh to a fragment if you doubt me). Luckily for us, we have the history API in browsers now which means we don’t need to rely on hashbang URLs for single page applications and we can very much redirect real, valid URLs on the server to their intended resource.

The second, big player in the endangerment of the Link is them dying or mutating. One of the traditional ways of dealing with Links to make them happy is to herd them in enclosures like “bookmarks” or “blog posts” or “articles” where you can group them with like-minded Links and even feed them with “tags” and “descriptions”, yummy things Links really love to chew on. Especially the “description” helps a lot – imagine giving a user a hint of what the anchor they click on will take them to. Sounds good, doesn’t it? People would only call those Links they want to play with and not make them run around without really caring for them.

Catch me if you can?

Talking about running around: social media is killing a lot of Links these days using an evil practice called “shortlinking”. Instead of sending the real URL to people to click on or remember we give them a much shorter version, which – though probably easier to remember – is flaky at best.

Every jump from URL to URL until we reach the endpoint we actually wanted to go to is slowing down our web interactions and is a possible point of failure. Try surfing the web on a slow connection that struggles with DNS lookups and you see what I mean.

Instead of herding the real Links and feeding them descriptions and tags we add hashtags to a URL that might or might not redirect to another. Bookmarks, emails and messages do not contain the real endpoint, but one pointing to it, possibly via another one. It is a big game of Chinese Whispers on a DNS lookup and HTTP redirect level.

In essence, there is a lot of hopping around the web happening that doesn’t benefit anyone – neither the end user who clicked on a link nor the maintainer or the resource as their referrers get all messed up. Twitter does not count the full length of the URL any longer but only uses 19 characters for any URL in a tweet (as it uses a t.co redirect under the hood to filter malicious links) thus using URL shorteners in Tweets is a pointless extra.

How can you help to save the Links?

Ensuring the survival of the Link is pretty easy, all you need to do is treat it with respect and make sure it can be found online rather than being disguised behind lots of mock-Links and relying on a special habitat like the flawless execution of scripts.

• If what you put inside a href attribute doesn’t do anything when you copy and paste it into a browser URL field, you’ve killed a Link
• If you post a URL that only redirects to another URL to save some characters, you killed a Link

You can do some very simple steps to ensure the survival of Links though:

• If you read a short article talking about a resource that has a “/via” link, follow all the “via”s and then post the final, real resource in your social media channels (I covered this some time ago in “That /via nonsense (and putting text in images)“)
• Tell everybody about server-side redirects, the history API and that hashbangs will not bring them any joy but are a very short-lived hack
• Do not use social media sharing buttons. Copy and paste the URL instead. A lot of these add yet another shorturl for tracking purposes (btw, you can use the one here, it uses the real URL - damn you almost got to say “isn’t it ironic, that…” and no, it isn’t)
• Read up on what humble elements like A, META and LINK can do
• If you want to interact with scripts and never ever point to a URL, use a BUTTON element – or create the anchor using JavaScript to prevent it from ever showing up when it can’t be used.

Please help us let the Links stay alive and frolic in the wild. It is beautiful sight to behold.

One of my biggest bugbears with education, learning and teaching – especially online – is the focus we have on testing people by giving them multiple choice questions or having them fill out a very specific and rigidly defined test. This is a remnant from school education, where it is important to compare pupils and to also make it easy to measure the success rate and effectiveness of the teacher. Overly simplified, our school systems are designed to create new professors, not people who use the knowledge elsewhere. Ken Robinson covered this nicely in his TED talk How schools kill creativity and Salman Khan (founder of Khan Academy) ran with it in his TED talk as well.

The problem with rigid tests is that they can be gamed. I knew quite a few students and interviewees who learned information by heart, aced tests and came out not remembering a single thing let alone being able to apply the knowledge in a different scenario. The learned the what, but not the why.

Job interviewers make the mistake of having a fixed set of questions and then compare different applicants by how they fared. This is not only boring for the interviewer, it also doesn’t tell you much about how the person you interview ticks. And in the end you want to work with that person, see them grow and apply their problem solving skills in various different scenarios. At Yahoo we had a great way of doing this – we gave people a code exercise that encompassed creating a small web site from a photoshop comp. We told them what the thing should do and then let them decide how to approach it. We looked at the result they sent us and if it worked nicely, we invited them to an interview where the first half hour or hour was them explaining to us why they approached solving the problem in a certain way, what their frustrations were, and how they cut corners and why. We learned a lot about the people that way, because programmers who can explain what they did are people who can code.

This is why I am very happy to see that some people are creative enough to approach teaching to code differently than others. There are quite a few new resources out there that teach coding by describing problems and asking the learner to write code that then gets validated in a worker thread (in the case of JavaScript). Code Combat for example is a beautiful product using that approach.

Yesterday I was super happy to see that Mozillian Brian Bondy who took in onto himself to create a series of videos explaining how to contribute to Firefox at codefirefox.com added a series of small coding exercises to this endeavour.

Instead of telling you to “create variable a and assign the value foo to it as a string” the exercises on codefirefox.com are task descriptions like

Create a new variable declaration and initialize it with a literal value in one statement.

This teaches you the lingo (you might have to look it up to understand the question but you now what a declaration is afterwards) and allows you to choose what you want to do. You creatively code instead of answering a question. There is a text editor embedded in the page that analyses what you do and if you manage to get a task done, ticks it off for you. All you do is code instead of following yet another “next lesson” button navigation.

Even better is that Brian released the framework that allows you to create tests like that. Under the hood it uses Acorn by Marijn Haverbeke in a web worker to analyse the code and test it against assertions you defined in a simple API.

var c = new Codec();
c.addAssertion("x = 3;");
c.addAssertion("x++", { blacklist: true, otherProps: "hi" });
c.parseSample("if (x) { x = 3; }", function(err) {
  console.log('whitelist hit? ' + c.assertions[0].hit);
  console.log('blacklist hit? ' + c.assertions[1].hit);
});

The codefirefox exercise module code is available on GitHub.

I am very excited about this and hope that some people will take this on. Brian is doing a great job with this and more is to come.

Earlier today my colleague Anton Kovalyov who works on the Firefox JavaScript Profiler ran across an interesting problem: if you have a table in the page and you want to colour every odd row differently to make it easier to read (christened as “Zebra Tables” by David F. Miller on Alistapart in 2004) the great thing is that we have support for :nth-child in browsers these days. Without having to resort to JavaScript, you can stripe a table like this.

Now, if you add a class of “hidden” to a row (or set its CSS property of display to none), you visually hide the element, but you don’t remove it from the document. Thus, the striping is broken. Try it out by clicking the “remove row 3” button:

The solution Anton found other people to use is a repeating gradient background instead:

This works to a degree but seems just odd with the fixed size of line-height (what if one table row spans more than one line?).

Jens Grochtdreis offered a pure CSS solution that on the first glance seems to do the job using a mixture of nth-of-type, nth-child and the tilde selector.

This works, until you remove more than one row. Try it by clicking the button again. :(

In essence, the issue we are facing here is that hiding something doesn’t remove it from the DOM which can mess with many things – assistive technology, search engines and, yes, CSS counters.

The solution to the problem is not to hide the parts you want to get rid of but really, physically remove them from the document, thus forcing the browser to re-stripe the table. Stuart Langridge offered a clever solution to simply move the table rows you want to hide to the end of the table using appendChild() and hide them by storing their index (for later retrieval) in an expando:

[…]rows[i].dataset.idx=i;table.appendChild(rows[i]) and [data-idx] { display:none }

That way the original even/odd pairs will get reshuffled. My solution is similar, except I remove the rows completely and store them in a cache object instead:

This solution also takes advantage of the fact that the result of querySelectorAll is not a live list and thus can be used as a copy of the original table.

As with everything on the web, there are many solutions to the same problem and it is fun to try out different ways. I am sure there is a pure CSS solution. It would also be interesting to see how the different ways perform differently. With a huge dataset like the JS Profiler I’d be tempted to guess that using a full table instead of a table scrolling in a viewport with recycling of table rows might actually be a bottleneck. Time will tell.

People who have seen me speak at one of the dozens of conferences I covered in the last year know that I am passionate about presenting and that I love covering topic from a different angle instead of doing a sales pitch or go through the motions of delivering a packaged talk over and over again.

For a few months now I have been pondering a quite different talk than the topics I normally cover – the open web, JavaScript and development – and I’d love to pitch this talk to the unknown here to find a conference it might fit. If you are organising a conference around digital distribution, tech journalism or publishing, I’d love to come around to deliver it. Probably a perfect setting would be a TEDx or Wired-like event. Without further ado, here is the pitch:

Accidental arrchivism

The subject of media and software piracy is covered in mainstream media with a lot of talk about greedy, unpleasant people who use their knowledge to steal information and make money with it. The image of the arrogant computer nerd as perfectly displayed in Jurassic Park. There is also no shortage of poster children that fit this bill and it is easy to bring up numbers that show how piracy is hurting a whole industry.

This kind of piracy, however, is just the tip of the iceberg when it comes to the whole subject matter. If you dig deeper you will find a complex structure of hierarchies, rules, quality control mechanisms and distribution formats in the piracy scene. These are in many cases superior to those of legal distributors and much more technologically and socially advanced.

In this talk Chris Heilmann will show the results of his research into the matter and show a more faceted view of piracy – one that publishers and distributors could learn from. He will also show positive – if accidental – results of piracy and explain which needs yet unfilled by legal release channels are covered and result in the success of the pirates – not all of them being about things becoming “free”. You can not kill piracy by making it illegal and applying scare tactics – its decentralised structure and its very nature of already being illegal makes that impossible. A lot of piracy happens based on convenience of access. If legal channels embraced and understood some of the ways pirates work and the history of piracy and offered a similar service, a lot of it would be rendered unnecessary.

If you are a conference organiser who’d be interested, my normal presentation rules apply:

• I want this to be a keynote, or closing keynote, not a talk in a side track in front of 20 people
• I want a good quality recording to be published after the event. So far I was most impressed with what Baconconf delivered on that front with the recording of my “Helping or Hurting” presentation.
• I’d like to get my travel expenses back. If your event is in London, Stockholm or the valley, this could be zero as I keep staying in these places

Get in contact either via Twitter (@codepo8), Facebook (thechrisheilmann), LinkedIn, Google+ (+ChristianHeilmann) or email (catch-all email, the answer will come from another one).

If you are a fan of what I do right now and you’d be interested in seeing this talk, spread this pitch far and wide and give it to conference organisers. Thanks.

A few years ago now, I spent two afternoons to write down all I knew back then about Developer Evangelism/Advocacy and created the Developer Evangelism Handbook. It has been a massive success in terms of readers and what I hear from people has helped a lot of them find a new role in their current company or a new job in others. I know for a fact that the handbook is used in a few companies as training material and I am very happy about that. I also got thanked by a lot of people not in a role like this learning something from the handbook. This made me even happier.

With the role of developer evangelist/advocat being rampant now and not a fringe part of what we do in IT I think it is time to give the handbook some love and brush it up to a larger “Guide to Developer Evangelism/Advocacy” by re-writing parts of it and adding new, more interactive features.

For this, I am considering starting a Kickstarter project as I will have to do that in my free-time and I see people making money with things they learned. Ads on the page do not cut it – at all (a common issue when you write content for people who use ad-blockers). That’s why I want to sound the waters now to see what you’d want this guide to be like to make it worth you supporting me.

In order to learn, I put together a small survey about the Guide and I’d very much appreciate literally 5 minutes of your time to fill it out. No, you can’t win an iPad or a holiday in the Carribean, this is a legit survey.

Let’s get this started, I’d love to hear what you think.

Got comments? Please tell me on Google+ or Facebook or Twitter.