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.

The video series “Everything wrong with $movie in $length minutes or less” by Cinema Sins is a big YouTube success and for a movie buff like me a lot of fun to watch.

The team behind it take a lot of time to meticulously analyse goofs and issues in movies and mercilessly point them out in short movies. Frankly, I am amazed they can show that much footage of current movies without take-downs and that they have such a quick turnaround time. It is funny, it is parody and satire and it shows that even the most polished and expensive products of the entertainment history aren’t safe from slip-ups. What I like most about them though is that they are also pointing out how they themselves are not without fault: “We are not reviewers – we’re assholes”.

I see a lot of parallels in how people criticise products on the web – we don’t really look at the why and how something was built but from the get-go try to find the simple to prove fault and talk about that instead. The fault that probably only us web developers will ever see or even remotely care about.

This, in itself is not a bad thing as it shows that we care about our craft and look at what other people do. This can be gratifying which is why we leave code comments and easter eggs – a secret handshake from one professional to another. We want people to look at what we do. We do not, however need people to nit-pick at one small detail and disregard the rest of our work as that is hurtful and makes the person reporting the issue (and only this issue) appear as intentionally hurting or trying to find a flaw at all cost.

Things go wrong, and in many cases we don’t know the reason. It could be that the place the content is published has limited access to the writer, thus forcing us to use an image where a text with CSS would have been better. Zeldman put that eloquently in his Get off my lawn! essay where he explained that it is not ironic if an article about a certain best practice gets published on a platform that doesn’t follow that practice.

It could be that the product had to be shipped at a certain date no matter what and corners had to be cut – a fault of the project manager, not the developer/designer. Many things are impacting the release of a web product (and that includes apps in my book); it is unfair to blame the executing party.

Maybe it is a good idea to reconsider publishing that one fault publicly and instead do a two minute research finding the makers of the product and report the fault there. Instead of public naming and shaming and – let’s face it – gloating we could thus either report an unknown fault to those who can fix it or learn why something happened. In either case, this means you are a constructive critic and don’t come across as a know-it-all. It is very simple to point out a flaw, harder to fix it and hardest to prevent them. To the outside, our constant nit-picking doesn’t make us look an inviting bunch, and is the small moment of fame finding the obvious bug worth that?

The second day of Chrome Developer Summit continued as strong as the first one, with few surprises but solid information.

Here’s my personal reviews of the sessions – again to be taken with the knowledge that I spend a lot of times at conferences so there is less “new to me”.

Blink: Behind the scenes – Greg Simon and Eric Seidel

This session was a well paced, good introduction of what is new in Blink and what this means to Chrome. It seems Blink is concentrating on interesting things like Webcomponents, partial layout and CSS grids (which was a bit of a surprise seeing that it is the IE contender for Flexbox). The presentation was solid and delivered with the right amount of “look at us”. Interesting.

#perfmatters: Instant mobile web apps – Bryan McQuade

Bryan gave a performance talk that was catered to making a web site to show up in a mobile browser in one second rather than the twenty it originally took. He explained the steps needed to make that happen, repeating a lot of information that has been mentioned in talks in for example Yahoo some years ago but that sadly enough keep getting forgotten.

I liked this presentation a lot – rather than just showing off the tools Chrome has to analyse your content it showed the difference a few tweaks can make. A lot is going back to what we did in the past and replaced by clever JS trickery – like writing static HTML instead of generating a, well, static page.

Best UX patterns for mobile web apps – Paul Kinlan

Paul Kinlan is a good, dry and very down to earth presenter. He showed a lot of issues with web products being shown on mobiles starting with an analysis of the top 1000 pages in Alexa and the very basic things they do wrong, like omitting a viewport definition. He then proceeded to show how the results of that research got incorporated into the Pagespeed Insights tool in a new “User Experience” section to follow which allows you to fix the biggest issues. This experimental feature (enabled by adding a ux=1 parameter) needs feedback, so play with it. Good talk and insights.

Multi-device accessibility – Alice Boxhall

It was great to see an accessibility talk at the event and Alice did a good job repeating the need for basic keyboard access and mistakes being made that are simple to fix but result in a massive barrier for people with different abilities. She also did a good job debunking the idea that accessibility is only for people with severe problems but a matter of availability. The talk covered various accessibility issues and how to fix them, the accessibility add-on for Chrome devtools which allows to debug ARIA and shows problems to fix and ended with a list of free resources like screenreaders to test with. Nothing new here (to me at least), but very important information for this audience. I get a bit worried about ARIA as a solution though as it really is meant to be a fix. A lot of times it is not needed if you use the correct markup to start with.

Got SSL? An overview of why you need it and how to do it right. – Parisa Tabriz

This was probably my favourite talk of the day. Parisa did a great job explaining why you should use SSL, how to do it, what it protects you and your users from and what still can go wrong in terms of privacy and security. A good reminder that HTTPS is not slow and expensive like it used to be but actually easy to go for these days.

DevTools for Mobile – Paul Irish

Paul is a seasoned presenter and has gotten better and better over time. I am not very partial to the “yay, dudes, this is how easy stuff is” style of presenting and was happy to see that this was not one of them. Paul did a good job of telling a story of how developer tools evolved and bit by bit showed the audience the great new features in Chrome devtools to remote debug on mobile devices and simulate devices on the desktop. A boatload of great new features have been added. Talking to other people there was not much here that wasn’t in his Google IO talk, but I was impressed, both by the features shown and the nonchalant way he presented them.

Optimizing your workflow for a cross-device world – Matt Gaunt

Matt took over from where Paul started and showed how to test on various devices in parallel and using tools like Yeoman to work on desktop and mobile in parallel without having to reload any of them. He is a valuable new addition to the devrel team and dealt with breakage of demos gracefully explaining simply what could have happened. It is refreshing to see a native developer share his story how he got more web focused and bringing his tooling requirements to the new environment.

Chrome and Android leadership Q&A panel

The final panel had the leads of different technology platforms in Google answer people’s questions with Jake Archibald trying to juggle the answers and collate lots of different questions. Interesting insights here and some good explanations why some decisions were made that look like going back in the “don’t be evil” and “HTML5 is the platform” messaging. If you want to know why packaged apps were the way to go for Chrome, there were some good answers here.

Breakout session: Code education

The last thing I attended was a longer session on code education covering Coder which was a very open discussion about online education in general. Coder is an interesting idea and I tried to see how we can align and re-use some of the content of Webmaker

Summary

All in all, I have to congratulate the Chrome team on a very successful event. There was a lot to take in, there was no dull moment and all the speakers did a good job mixing news with explaining the why and repeating important messages. There was no hand-waving but we heard about the possible but also about what still needs to be done.
My initial fear of getting a Chrome indoctrination over two days was not at all validated, this was a summit about web technologies and how Chrome solves some of the problems for developers but also for their needs. There is a lot of innovation going on here and whilst not all will come to fruition it is something to compare to the work of other people and align to get this ready for all.
It was very much worth my time coming and I had no trouble staying interested and following the action. Great job all around.