Our lives as web developers are amazing. Information flows plentiful and is ever increasing and our quiver of tools to play with ever replenishing. Every week there is some new, groundbreaking thing happening and web technologies are promising amazing access to hardware and making our lives much simpler.

Instead of picking and choosing from these offerings and using the right one for the job, we seem to spend an extraordinary amount of time re-creating the same solutions in several technologies. Not because it is needed, but because we can.

This becomes almost painfully ironic when you see articles that are a massive pat on our own backs for using “plain HTML”, “vanilla JavaScript” or “pure CSS” that utterly and totally miss the mark of using these technologies. Or just omit or misunderstand enough to be broken and a worse performer than a “closed technology” solution.

Examples like these are beautifully styled forms that utterly fail to have labels that do what labels do – connect input elements with descriptive text (both in assistive technology and by making the text clickable in browsers) – as the author failed to understand that you need to nest elements inside labels or connect them with a for/id attribute coupling.

Other examples are creating complex graphical animations and paint with I, B or DIV elements. These are impressive, but no, they are not – at all – semantic HTML. True, SPAN and DIV are defined as elements with no meaning for us to use any which way we want to and I and B are defined as “visual” elements that could display anything. However, nowhere is a definition that adding a lot of nested empty elements is a good idea. That’s like raspberrying, watermelon or capybara your hedgehog in aparagus, right? What? The last sentence didn’t make sense? Don’t worry, there is probably some conversion tool that will make it useful – sadly enough you don’t have access to it right now, though. This is what you do when you use HTML to paint in the browser. You abstract away meaning and make it dependent on other technologies.

Semantic HTML means a few things, none of which are covered by exercises like that:

• You deal in content. Semantic HTML describes content. It is not a tool to paint with. You could easily create an image using a table with a cell with a background colour as each pixel. It wouldn’t make sense though as a table is meant to give tabular data its structure and describe the relationship of the data parts to each other. Images do not have that need, what they need is an alternative text.
• You give content meaning. A P tag around a block of text says that this is a paragraph. It says it to people, browsers and assistive technology. It even means it displays with whitespace around it when there is no CSS and it allows you to collapse it in editors. A DIV with a class of “paragraph” does the same for human readers, but only makes sense visually with CSS and none to assistive technology.
• You increase maintainability. You keep everything that is to be changed when it comes to content in the HTML. You do not have text labels in JavaScript or generate textual information in CSS with pseudo content. That way people don’t have to wonder where a text on the screen came from when they need to change, translate or remove it. CMS have no issue separating content from presentation to make it easy for people to edit pages when you used semantic HTML. When all you use is DIVs with classes, CMS editors will choke.
• Semantic HTML is a sign of quality and future thinking – it is true: browsers do not care a bit if an element is a DIV or a P. Maintainers do though. And browsers and rendering software or marked up content comes and goes. Semantic HTML is there for humans, computers, search engines, conversion tools and many other things. You can create incredibly terse and nonsensical code and browsers will still do something with it. What you sacrifice though is readability. Sometimes in order to make things easier to understand, you need to write more. That is not a waste, it means you care about what you do and don’t leave it to machines to translate for you for other machines to display.

In order to reap the rewards of clean and semantic markup, you need to think about meaning first and then about code or markup. Writing intelligent, beneficial HTML is an exercise in organising and describing; you could say labeling. It is not about using HTML as the tool to create things that look impressive.

So next time you feel like showing off that you can do things “in plain HTML”, consider the consequences. Think if what you did in HTML really gives the content meaning or if you just painted with tags. We won’t succeed in promoting open technologies as the obvious and better alternative if we abuse them to reach a goal they were not meant for. This is especially important in terms of performance. Every DOM access, every reflow is costly. Let’s use them sparingly.

What we need is more rewards for doing the right thing. That’s why articles like Heydon Pickering’s “Semantic CSS With Intelligent Selectors” are so important. They don’t wave a flag for semantic HTML – instead they make it beneficial to do the right thing. We need more of those, giving people rewards for learning and understanding HTML before they apply it. What we don’t need is more experiments proving things can be done in a technology that wasn’t meant for them. These can be inspiring and are fun to do, but they don’t help the cause in the long run.

I am currently in Toronto, Canada at a work-week of the websites and developer engagement team in Mozilla. We’re organising a lot of things, plan and also share. In the lightning talk round I got up to share five tools I use to create visuals for presentations.

The screencast is available on YouTube.

The tools in detail are:

• LiceCap is a very simple tool to create animated GIFs from parts of the screen simply by selecting it and hitting a record button.
• Showterm is a recording tool for the command line
• YouTube Download is a script to download YouTube videos on the command line. This can be used to download creative commons videos for editing later. There are quite a few Browser add-ons available, that do the same but these are more dodgy as many of them inject ads into the YouTube page.
• Miro Converter is a video converter allowing you to create videos optimised for several platforms and devices
• MPEG Streamclip is a simple video editing tool.
• Droid@Screen allows you to connect an Android phone via USB and show it on screen or take screencasts of it. It is good to show things but bad for showing performance as it is low-FPS.

These are just a few tools that make my life easier, all of them are free to use, so hopefully they are useful for you, too.

In the last few weeks I was slightly off the grid. I had a quick holiday, I traveled, I enjoyed the “fun” of wireless offers in US hotels. Sometimes that is a good thing. I realised a few things in that time, and discovered a few amazing posts online that very much agreed with what I thought.

Here’s what I realised: we are obsessed with numbers and it is killing our creativity. Our online life right now is running the danger of being a constant chase of bigger numbers and more reach and there is actually not much substance to it.

Instead of concentrating on writing and sharing and creating we start hunting the quicker impact, the larger group to talk to and the more immediate feedback. This leads to a quick collection of seemingly impressive numbers that actually don’t mean much but in essence are a quick fix to make us feel important. Instead of thinking our work through, we throw it out. We throw it far and wide and we hope that a pure law of large numbers means that we reach a lot of people that either need to know what we talk about or get inspired by it. Or relay it to even more people which increases our impact even more. Alas, it doesn’t. As everybody else is running the same race.

The social web we are amazed about and – in some cases – addicted to is the perfect Operant conditioning chamber. Just like a slot machine we are constantly chasing the next reward, we always think our next update will be the next big thing. Getting a positive result for each of our actions is boring. Getting one big reward every once in a while means we keep going on and on throwing things out there until we get the next reward. We chase a pattern of success that doesn’t exist, but as it happens once in a while we keep thinking there was some logic to it.

A lot of what ends up on social networks is not something we wanted to put there but because we believe it but something that will get the most results and responses. Likes, retweets, Google Pluses, Comments, hits on our blogs. All things that are easy to measure and obvious to see as a success although we have no clue whatsoever if what we put out there was even read before people shared it. A lot of people do that. We re-distribute what other people – people who others look up to – say because that shows we are “in the know” and know where to go to find good content. One of the biggest needs for things to “go viral” is not the quality of the content – it is the ease of distribution. This is why people post quotes of famous people – in many cases even misquoted – as images to get around limitations like 140 characters.

We trade creation and creativity for quick, meaningless, but easily quantifiable success. We inflate our blog post with grandiose titles like “the best solution to $x”, “why $x should do $y” or the incredibly inflated “35 things everyone needs to know about $z”.

The amazing publishing platform web is running the danger of becoming a bazaar where amateur marketers compete in making things look cooler, simpler, wittier than they are to get a quick applause in the form of likes. We don’t go online to find out things in depth – we want a quick solution to allow us to do more in less time to add more to the already impossible to understand pile of stimulants and shards of information. The thirst for knowledge or entertainment is not the main reason why we get our phones out, instead it is the nagging blinking sign of unread new updates, each an enticing hint that the next cool thing might be one of them and we need to keep getting them not to miss the all important one – which most likely we will miss as we are preoccupied with the chase of more and newer.

We even do this at the cost of our privacy as Cory Doctorow mentioned in his TedX Observer talk, but more importantly is the point that we are acting like junkies, filling our need for quick validation and immediate satisfaction instead of taking the time to really consume what we get or to cherish the relationships we form.

The Innovation of Loneliness is a superb, very short talk about this, and validated my worries and thoughts:

The Innovation of Loneliness from Shimi Cohen on Vimeo.

The main message here is that as humans we can only consume and stomach a certain amount of social interactions and relationships. As social media is a massive game of numbers we ironically start to get more lonely by connecting more as we cheapen relationships and reduce them to numbers and instead of deepening the relationships we increase the number of “friends” we have. The goal is to collect more, not to care about who they are. It is a hoarding mentality, accumulating lots of relationships in case we need to follow up with them later when we need them. Not realising that in order to be able to rely on a relationship, we also need to foster and nurture it. And a “like” does not cut it.

Rogie King’s Derailed is another superb post on this subject. He speaks in detail about the “social addiction” we can fall into and the bitter disappointment we can feel when all our efforts were just there to increase numbers.

Let’s stop being rats in a box pressing a button. Let’s break the game by not playing it but realising that an increase in numbers is not a real win and that a few unread updates really are not the end of the world.

Following a few discussions I had with the developer evangelism reps group lately, I just added a small update to the Developer Evangelism Handbook. In the “Work with your own company” I added a new section called Balance your personal and official channels.

This one gives advice why it is not a great plan to publish company specific information on your personal blog or social media channels but instead on the official, company sanctioned ones. That way you don’t cause internal controversy and leave yourself open to moving on without burdening yourself with maintenance of information you don’t control.

In short: your company’s products are not there to promote you or your blog. You are there to promote the products and bring people to where the up-to-date, officially maintained information is. That is what being a developer evangelist is about.

Earlier this year, I was lucky enough to speak at Beyond Tellerand in Germany. My talk Fixing the mobile web (video on Vimeo) was a passionate session on how the web is not only for the rich with the coolest, newest devices, but for everyone. Marc Thiele, the organiser of Beyond Tellerand, is not only a good friend who I have a long history with, but also fiercely passionate about making his events memorable. One of the very unique things about this event was that all talks were sampled and remixed live in the breaks between talks by the German electronica artist Baldower.

Here is what they did with my talk. You can hear the song “The Web is for everybody” by Baldower on Soundcloud.

I was first confused but then giggled at the small laugh sample at the end of the song, of course an homage to Melle Mel’s laugh in Grandmaster Flash and the Furious Five’s “The Message”, although I am pretty sure I could not get away with his style:

You can listen to all the songs from Beyond Tellerand them on Baldower’s Soundcloud page