Quick tip: using modulo to re-start loops without the need of an if statement

the more you know

A few days ago Jake Archibald posted a JSBin example of five ways to center vertically in CSS to stop the meme of “CSS is too hard and useless”. What I found really interesting in this example is how he animated showing the different examples (this being a CSS demo, I’d probably would’ve done a CSS animation and delays, but he wanted to support OldIE, hence the use of className instead of classList):

var els = document.querySelectorAll('p');
var showing = 0;
setInterval(function() {
  // this is easier with classlist, but meh:
  els[showing].className = els[showing].className.replace(' active', '');
  showing = (showing + 1) % 5;
  els[showing].className += ' active';
}, 4000);

The interesting part to me here is the showing = (showing + 1) % 5; line. This means that if showing is 4 showing becomes 0, thus starting the looping demo back from the first example. This is the remainder operator of JavaScript, giving you the remaining value of dividing the first value with the second. So, in the case of 4 + 1 % 5, this is zero.

Whenever I used to write something like this, I’d do an if statement, like:

if (showing === 5) { showing = 0; }

Using the remainder seems cleaner, especially when instead of the hard-coded 5, you’d just use the length of the element collection.

var els = document.querySelectorAll('p');
var all = els.length;
var c = 'active';
var showing = 0;
setInterval(function() {
  showing = (showing + 1) % all;
}, 4000);

A neat little trick to keep in mind.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Detecting AdBlock without an extra HTTP overhead

The other day Cats who code had a blog post about detecting AdBlock, where the main trick is to try to load a JavaScript document with the name adframe.js:

<script type="text/javascript">
var adblock = true;
<script type="text/javascript" src="adframe.js"></script>
<script type="text/javascript">
if(adblock) {
  //adblock is installed

The adframe.js document only contains one line unsetting the adblock Boolean:

var adblock = false;

This seems to work pretty well (and you can see it used in many web sites), but also seems a bit wasteful having to try another script loading and executing. Of course there are many adblocker detection scripts available (some with colourful names), but I wondered what the easiest way to do that is. The trick described in the abovementioned article using a bsarocks class on an element stopped working.

Detecting AdBlock without another request

What does work, though is the following and you can see it in action and get the code on GitHub:

var test = document.createElement('div');
test.innerHTML = '&nbsp;';
test.className = 'adsbox';
window.setTimeout(function() {
  if (test.offsetHeight === 0) {
}, 100);

The trick is the following:

  • You create an element with the class adsbox (as defined as a removable element in the definition file of AdBlock Plus)
  • You add it to the document and after a short while you read its offsetHeight
  • If AdBlock is installed, the element won’t have any height.

You can see it in action here:

detecting adblock


Play nice with this. I’m not going into the ethics of ad blocking or detecting ad blockers. Fact is, we started an arms race with that nobody can win. The more we block, the more aggressive ads will get. As users we should vote with our voice and tell companies that we hate their aggressive advertising. We should also start to understand that nothing is free. As publishers, we should start thinking that showing ads as our only revenue stream is a doomed way of monetisation unless we play dirty.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Testing out node and express without a local install or editor

Node.js and Express.js based web apps are getting a lot of attention these days. Setting up the environment is not rocket science, but might be too much effort if all you want to kick the tires of this technology stack.


Here’s a simple way to play with both for an hour without having to install anything on your computer or even having access to an editor. This is a great opportunity for showcases, hackathons or a quick proof of concept.

The trick is to use a one-hour trial server of Azure. You don’t need to sign in for anything other than an authentication and you can use Facebook, Google or a Microsoft account for that. You can edit your site right in the browser or by using Git and you can export your efforts for re-use after you discarded the trial server.

Here’s the short process to start playing:

  1. Go to http://tryappservice.azure.com/
  2. Make sure “Web App” is selected (it is the default)
  3. Click “Next”
  4. Select “ExpressJS”
  5. Click “Create”
  6. Sign in with a Facebook, Google or Microsoft account. *
  7. Wait for the server to get set up (1-2 minutes)
  8. Click the URL of your app to see it
  9. Select “Edit with Visual Studio online”
  10. Start editing your site live in the browser

* This is a prevention measure to avoid people spawning lots of bots with this service. Your information isn’t stored, you won’t be contacted and you don’t need to provide any payment details.

You can also clone the site, edit it locally and push to the server with Git. The server is available for an hour and will expire after that. In addition to Git you can also download the app or it’s publishing profile.


There is a quick video of me showing setting up a trial server on YouTube.

Video transcript

Hello I am Chris Heilmann and I want to quickly show you how to set up a
node and Express.js server without having to install anything on your computer. This is a good way to try these technologies out without having to mess with your settings, without having to have an editor. Or if you want to show something to a client who don’t know what node and express do for them.

What you do is you go to a website that allows you to try out Microsoft Azure without having to do anything like buying it, or signing up for it or something like that.

Everything happens in the browser. You go to tryappwebservice.azure.com and then you say you want to start an application. I say I want to have a web application and if I click Next I have a choice of saying I want an asp.net page or whatever. But now I just want to have an Express.js page here right now. I click this one, I say
create and then it can sign in with any of these settings. We only do that so spammers don’t create lots and lots of files and lots and lots of servers.

There’s no billing going on there is no recording going on. You can sign out again afterwards. You can log in with Facebook, log in with Google or you can login with Microsoft. In this case let’s sign in with Google – it’s just my account here – and I sign in with it.

Then I can select what kind of application I want. So now it’s churning in the background and setting up a machine for me on Azure that I will have for one hour. It has a node install and Express.js install and also gives me an online editor so I can play with the information without having to use my own editor or having an editor on my computer.

This takes about a minute up to two minutes depending on how how much traffic we have on the servers but I’ve never waited more than five minutes.

So there you go – your free web app is available for one hour and will expire in in 58 minutes. So you got that much time to play with the express and Node server. After that, you can download the app content, you can download a publishing profile (in case you want to stay on Azure and do something there). Or you can clone or push with git so you can have it on your local machine or you put it on another server afterwards.

What you also have is that you can edit with Visual Studio “Monaco”. So if I click on that one, I get Visual Studio in my browser. I don’t have to download anything, I don’t have to install anything – I can start playing with the application.

The URL is up here so I just click on that one. This is of course not a pretty URL but it’s just for one hour so it’s a throwaway URL anyways. So now I have “express” and “welcome to express” here and if I go to my www root and I start editing in my views and start editing the index.jade file I can say “high at” instead of “welcome to”. It automatically saved it for me in the background so if I now reload the page it should tell me “hi at express” here. I can also go through all the views and all the functionality and the routes – the things that Express.js gives me. If I edit index.js here and instead of “express” I say Azure it again saves automatically for me. I don’t have to do anything else; I just reload the page and instead of “express” it says “Azure”.

If you’re done with it you can just download it or you can download the publishing profile or you can just let it go away. If you say for example you want to have a previous session it will ask you to delete the one that you have right now.

It’s a great way to test things out and you don’t have to install anything on your computer. So if you always wanted to play with node.js and express but you were too timid to go to the command line or to mess up your computer and to have your own editor this is a great way to show people the power of node and express without having to have any server. So, have fun and play with that.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

The true king rules without a crown – yes, you matter on the web

Going through the Twitter feedback of my closing keynote at Smashingconf I read a lot of “this is awesome, I feel so ready to do stuff, but what can I do – I am not a known entity on the web.”.

I guess everybody has songs to listen to when need some perking up. You know, the ones that make you tap your feet or, if you are like me, bounce a bit. Friday I’m in Love by The Cure is a classic for that. One of my favourites is the Mighty Mighty Bosstones’ Everybody’s better:

The lyrics of that one have some wonderful moments:

Everybody’s better than I am
I think everybody’s better than me
And everybody’s swell I guess
They’re doing well some more or less
Everybody’s better than I am I think
You know to be king you don’t need a castle
To row back to shore can sure be a hassle

Why you walk around with your head low down
The true king rules without a crown
If your boat’s afloat after the typhoon
Row it safely back to the lagoon
And nevermind the green grass you won’t mow

Or what it is you have or don’t to show
Or what it is you can or can’t afford
The good are good without reward

I think there is a lot of truth in that – especially on the web. So if you are not a known entity on the web, so what? You are still very much invited to participate, your actions can speak for you and bit by bit you will get people thanking and encouraging you.

Lower profile = less pressure

You can get the warm fuzzy feeling without getting the pressure of having to be perfect in all you do. Once you are known on the web it can be quite annoying that something you throw out as an idea or a concept or a hack gets quoted out of context as the best thing ever and something to use immediately. As a part of the “making” web crowd you can play, get others to improve and build upon what you did and get feedback – good or bad – that is untainted.

With know web entities I find that not enough people challenge what they do and give constructive criticism. Instead there is a lot of polarisation going on – either people love your work or they try to show that you are wrong and their other heroes are right. Or people will attack you personally and disagree just to be part of the conversation and appear as someone in the know.

Everybody else is better

As mentioned in my keynote, there is quite a tendency in people to compare our behind the scenes footage with other people’s highlight reels. There is no need to go from zero to hero in a fortnight and it is not a natural thing to happen. I blame all the “talent” shows on television giving us that impression – it is the Tinseltown dream and the old from dishwasher to millionaire illusion pushed to a seemingly more achievable goal. Only seemingly, though.

Communication is a key

I don’t consider myself a web entity or a celebrity, but here is how I got where I am now: a lot of work. And not only paid work – on the contrary. Most of my connections and learnings happened outside the delivery cycle in my companies. They happened on mailing lists, IRC, forums, conference hallways, in cafés when people commented on my computer or what I did on the screen. It boils down to communication and being not afraid to ask questions and to talk to people.

It is not about a breakthrough product

One big mistake people make is thinking that quick products will get you known and a following. That can happen, but as they are quick products they are also a dime a dozen and hundreds of links on hacker news a day. I’ve made that mistake – a lot:

  • A PHP templating system to allow for HTML/JavaScript documentation
  • A “Learn to let go” PHP script that allows for users to define the page layout
  • The “Obsoletely famous” blog to name and shame outdated web resources and re-link them to better ones
  • The “CSS Toolshed”, a CSS Zen Garden but with a simulated CMS output – asking designers to come up with flexible CSS to support changing content and variable navigation item numbers
  • A PHP script to allow for CSS variables by precompiling the CSS – in 2005

All of these were massive failures, and frustrated me quite a lot and ask myself what is wrong with me that nobody calls these awesome and mentions them in talks. There can be many reasons why they failed, but the main one was that I thought I’d build it and people use it. This is not how it works.

Collaborative work wins

All the products that got people known in the last few years were works of collaboration: Modernizr being probably the most shining example. So if you want to go that route, don’t go for the quick win and call it finished, throw out an idea and a stub instead and call for people to work with you.

The best way to get known and to have fun and achieve things though is to collaborate with existing projects, give feedback, write documentation and examples – in short, get yourself out there visible as a helpful person who knows their stuff. The MDN documentation is a great starting point as it is an open Wiki and needs some love in many places. And as soon as you edit your name will be under it.

when your flesh and blood is gone your actions will remain

So here’s to all the kings without a crown – you are doing great work, even if it doesn’t look it and the immediate success is yet to come. Have patience, share, communicate and give constructive feedback in the form of feature requests, pull requests and patches. Your work will be visible and speak for you – even if you are not yet a loud voice.

Got a comment? How about joining the thread on Google+

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Datatable to barchart without images, libraries or plugins

Following the results of a survey on library use by developers I was asked to make it easier to do a head to head comparison of the data of one of the questions. I thought it’d be interesting to start a dynamic bar chart from scratch and it is incredible just how easy these things are nowadays.

Animated barchart from datatable example

Here is the final result:

The code is available on GitHub and you can see it in action there, too.

Check the code comments to see what I did – there is no magic in there, just using what browsers give us these days.

There is a bit more to it as I explain in this Screencast on YouTube:

If you don’t want the barcharts to show up but check if meter or progress is supported instead, add a parameter to the URL:

This is an interesting little demo as you’d probably be tempted to use meter from the get-go, but thinking about the data here makes a data table the best starting point.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)