meter; the HTML5 element

I’m amazed at how often I still “discover” a new HTML5 element. I say discover because really they’re all written down in specs. But then again, who reads specs for their enjoyment?

Today I discovered the meter-element (by first discovering the progress-element). They’re essentially the same, except that <meter> also adds some sugary deliciousness in the form of colouring. It’s here that you should note that IE10 (and higher) only support <progress> at the moment and not <meter>. So while both elements are rendered pretty much the same by browsers, it’s the semantic meaning that you have to pick.

What makes <meter> cool

So what makes it cool, you ask? Well the sugary deliciousness that I mentioned.

The meter-element has your standard min and max attributes, but also low, high and optimum.

If you’re using a supported browser for <meter> you will see the bar in the Result tab. I have added some JavaScript to update the bar with 5 units every 500 milliseconds. My bar is set up from 0 to 100, so it could be percentage based. You’re of course free to choose any numbers.

If you’re using IE or a specific mobile browser, you’ll probably see the fallback message. This element falls back graciously and I even added some JavaScript to also update my fallback text. Although I later found out that meter.value is NaN, so you have to change the JS to be independent from that element.

For IE 10 and higher, you could also change the meter-element to a <progress>-element and it will work, even with the same JavaScript code. The low, high and optimum attributes won’t do anything and so you have no colour, but still a cool progress bar in HTML5.

Automatic colouring

If you look at the HTML again, you can see how you’re supposed to use the low, high and optimum attributes. These are your ‘breaking points’ for when the browser starts to make your bar red, yellow and green respectively. You can even use CSS to change the <meter>’s style, although this is still vendor prefixed.

My meter is using sensible breaking points at 30% (low) and 60% (high). But you can change this and for example, if you’re using it as an Health Points bar, you might have the low on 10% and high on 40%.

To be honest, I’m not really sure why there is an optimum attribute, so far it doesn’t really do anything. But all in all, a really cool HTML5 element that takes away so much manual work for you!

Piwik logo

Piwik, a free open-source analytics tool

I have been using Piwik for a couple of months and I love it.

I started using it first at my internship at leadelephant.com, not really as an analytics tool, but more as a data collection tool.

The main goal of Piwik is an analytics tool, a direct competitor to Google Analytics. But it’s really more than that. Like the data collection method I just mentioned, it could also be a  community monitoring tool, which is how we use it at Habbies.nl.

Piwik is a JavaScript tracking snippet backed by a PHP dashboard and MySQL backend. Installation is really simple and it works out of the box.
If you’re site is having 1000 visitors a day it’s a good idea to read through the Optimization docs. If you’re using Cloudflare, you might want to tweak the config file to start using X-FORWARDED-FOR headers.
Other than that it’s just a quick install and you’re done!

Piwik underwent a big redesign in 2014 and is looking quite good. (It used to look a little dated!)

Piwik dashboard
Piwik dashboard in 2014

I run both Google Analytics and Piwik. I use Piwik daily, to check up on real-time visitors and trends. I use Google Analytics for end-of-the-month kind of actions, looking at the aggregated data. There are a lot of blogposts already comparing GA with Piwik, but as you can see, you don’t have to pick one.

You can use both!

So take 5 minutes out of your day and download and install Piwik.

Akismet doesn’t cut it anymore, utilize Cloudflare against spam

Spam queue in WordPress
Spam queue in WordPress

I have been noticing a severe drop in spam in my comment queue. I used to have to delete anywhere from 5 to 10 comments a day in the queue with only Akismet. Now there’s not one comment.. 99.99% of the time.

I didn’t really think anything of it until I just realized why this change occurred; I had enabled Cloudflare for my blog.

Cloudflare saving requests and thus MBs
Cloudflare saving requests and thus MBs

Cloudflare acts as somewhat of a firewall and CDN in one, it blocks malicious requests and serves cached versions of your blog/site/resources. For this particular blog the stats aren’t that overwhelming, but for one of my other sites we’re talking about multiple gigabytes!

The Cloudflare plugin for WordPress doesn’t only adjust the incoming IPs (they have to change it to the X-FORWARDED-FOR IP, because my webserver will otherwise only see the Cloudflare IPs) but it also will tag any comment (and accompanying meta-data) as a spammer in the CF system.

So with my efforts and those of the other thousand of Cloudflare users combined, the spam queue is getting smaller and smaller every month. The spammers don’t even get to reach the stage where Akismet has to kick in.

SocialSpace at ESTEC in Noordwijk

A day worths of swag!
A days worth of swag!

Yesterday I went to the open day at ESTEC (European Space Research and Technology Centre) in Noordwijk, the Netherlands. This is the ESA (European Space Agency) facility that houses most of the technology research and project development. I’m not even sure what it was anymore, but they have some rooms and utilties over there that even make NASA jealous!
Continue reading