At the end of 2010 I had a meeting with Alper, who asked if I was available for a helping him with building a kick-ass mapping application that would make it super easy for lay people to create visualizations. Sort of a bigger, better version of an app he made previously, Dutchstats. Making an editor for maps using 100% web technologies had never been done before (not counting flash, obviously) so it was a really exciting project and I jumped at the chance.

Statlas was built by a combined team of us at Fluxility, Monster Swell and Alexander Zeh. We took care of the development, Monsterswell took the lead and Alexander Zeh made the graphics.

We quickly settled on using Polymaps for the mapping and Django for the back-end. Starting out, I explored what was possible with Polymaps. I wrote a little tool to process geoJson files in the Dutch “Rijksdriehoekscoordinaten” format to a format that Polymaps supported, and within an afternoon I had a working copy of the aforementioned Dutchstats (but with six linked maps!)

Then came the hard work. Building the editor and viewer, linking up the values with the parts on the map and autogenerating the colour scheme. That turned out to be a bit longer process, and integrating it nicely with the Django backend took a fair couple of months.

This first version is something I’m really proud of. It’s the first mapping editor made fully in web technologies that’s easy enough for normal people to use, and the maps are then very easily distributable, via embedding, linking or printing.

Municipalities I’ve been to … That I can remember!

So, that’s Statlas. Check it out and let me know what you think!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Statlas beta release

I decided to start a Fuck Yeah blog because I, perhaps immaturely, think that putting “Fuck yeah” in front of stuff makes it at least twice as cool. A day later someone on twitter said I should’ve named it “FLIck Yeah Keming” and have a double keming, which would’ve been even better if it wasn’t slightly confusing. Still, a missed opportunity.

Anyway, as I hadn’t announced it on my own blog yet, here is a copy of the introduction post I made on the blog:

Welcorne!

Hey all! After seeing a horrible kerned image of type for the umpteenth time, I decided to do something about it! And in true internet style, I of course make a Fuck yeah Blog. You’re watching it right now!

Keming is a term coined by Ironic Sans. I am not associated with them, but they have an awesome shirt available.

The writer of this blog is Kilian Valkhof, A web developer/designer from the Netherlands. Suggestions welcome via the suggest button up top, or by sending a message to me via twitter: @kilianvalkhof.

Kem on!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Fuck yeah Keming!

Annoying.js

The file itself is commented with “functionality”, so I won’t bother repeating it here. You can invoke different functions via the Annoying object: Annoying.noSelect(); will disable text selection, Annoying.noRightClick(); will disable the context menu, and Annoying.kitchensink(); Will turn all the functionality on. But you’re not going to use it anyway, right? ;)

JavaScript is evil!

As you can see, you can do some pretty bad things with JavaScript that will certainly drive your visitors away (or insane!). So why is this kind of functionality available? Some functions is actually very useful if you’re writing complex “html5″ web applications. By disabling text-selection on interface elements you can make the application easier to use, and you can re-implement the right click menu using your own options.

Breaking out of iframes is something I think more websites should implement, actually, if only to prevent the “OMG!!!! Look What this Kid did to his School after being Expelled! ” scams that all of my friends on Facebook keep falling for.

Using JavaScript to resize someone’s browser without consent should be reason enough to revoke someone’s license to making websites, though.

Let me know if you have any horrible additions!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Annoying.js: How to be an asshole

A while ago, Vasilis asked for a web app that allowed you to draw lasers. Just drawing lasers is a bit boring though, so I took it a step further, and decided to use all the new cool html API’s for rendering and eye detection to shoot lasers from eyes. I press-ganged recruited Paul Chaplin to help build the site.

The result is Laser Eyes!. Simply drag and drop an image from your computer onto the photo area (or connect with Facebook), and watch the magic happen!

Facebook

When building a web app, nowadays, you can’t not have Facebook integration. For Laser Eyes!, what I’d really wanted is the ability to, with one click set a laserified (it’s a word, alright?) image as your profile picture. So, you can’t do that. Most people said you can’t even get a full sized profile picture via the API. In fact, you can. Once you connect Laser Eyes! with Facebook, you can load in your profile image and post any photo to Facebook into a special Laser Eyes! photo album.

…Then you can manually set your profile picture to the laserified version ;)

Technical stuff

Paul and I went all-out with new API’s and really used this as a project to try out new cool shit: Canvas, drag and drop, the file API, openCV, and Ep.io. Due to all these new things, support, for now, is limited to Google Chrome (but it’s really slow on mac) and Mozilla Firefox (fast everywhere). I’ll add in a more regular file uploader to support Opera and Safari soon.

Other stuff I want to improve is adding a bunch of photos to try it out and a color picker for people that like pink lasers. Or blue lasers. I’m open to other ideas, please send them to contact@laserey.es.

If you want to check out the javascript that powers all of Laser Eyes, the unminified, sparsely commented version is available here.

Laser Eyes! is hosted on Ep.io, a Python/Django cloud hosting system currently in private beta. The team at Ep.io has been super helpful with troubleshooting my app and openCV’s python bindings. Big thanks to them, and you should really consider them if you need an easy Python or Django hosting solution.

In closing

Working with new html5 api’s and python opencv bindings has been a lot of fun as well as somewhat of a nightmare. You can learn a ton, but some things are just so weird. I’m certain I did a whole bunch of stuff the worst way possible, and there are a bunch of weird bugs and errors that I hope people won’t notice when using the app. (Why are my strokes aliased in Chrome? Why do certain angles crash Firefox?? Why is it over 4 times as slow on Mac? And more of the sort). If you notice any of the bugs and know a solution, please let me know!

Now, go laserify yourself.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Laserey.es: Draw lasers from your eyes.

Getting the profile picture the normal way

Getting via the normal way is quite easy, it’s this link:

http://graph.facebook.com/<user.id>/picture?type=large

If you’re happy with a 200px wide image, you’re best off using this link.

Impossible?

All questions I found regarding getting a full size profile picture ended in “it can’t be done”. But I’m a stubborn guy, so I asked about it again on the Facebook developer forums and then went to work with the (horribly underdocumented) Facebook JavaScript SDK. I got it working and a couple of days later someone posted an FQL method as a reply to my forum thread. Both methods take two API calls, so it’s a matter of preference which one you want to use. I’m posting them both.

Assumptions

The following scripts assume a couple of things:

• You’re obviously using the Facebook javascript SDK
• You have an authenticated Facebook user
• You have requested permission to access user_photos
• All you care about is the URL of the full size profile image

Graph API method

The following Graph API method works by doing two API calls: The first requests all the user albums and gets the ID of the album with the name “Profile pictures”, the second gets the first image from that album. Conveniently, the current profile picture is always the first in the returned list.

//Get a list of all the albums
FB.api('/me/albums', function (response) {
  for (album in response.data) {

    // Find the Profile Picture album
    if (response.data[album].name == "Profile Pictures") {

      // Get a list of all photos in that album.
      FB.api(response.data[album].id + "/photos", function(response) {

        //The image link
        image = response.data[0].images[0].source;

      });
    }
  }
});

FQL method

The FQL method also requires two api calls: one to get the user id, and a second FQL query for that user’s profile picture. You could lower this to one API call if you store the user id sometime earlier.

//get the current user id
FB.api('/me', function (response) {

  // the FQL query: Get the link of the image, that is the first in the album "Profile pictures" of this user.
  var query = FB.Data.query('select src_big from photo where pid in (select cover_pid from album where owner={0} and name="Profile Pictures")', response.id);
  query.wait(function (rows) {

    //the image link
    image = rows[0].src_big;
  });
});

There you go!

A full size Facebook profile picture, free for you to do all sorts of cool stuff with. Let me know if you build a cool Facebook app and have been able to use this!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Full size profile picture via the Facebook JavaScript SDK

What is Guitaryst?

Just how Lystener shows you the lyrics while you’re listening to the song, Guitaryst shows you the guitar tab. If you don’t know what guitar tabs are, Wikipedia has the answer. Guitaryst works by search, or with Last.fm, Like.fm and Libre.fm. I emailed the latter two and asked if they could add the API I needed for Lystener, and both did that ridiculously fast, so kudos to them. Definitely check them both out.

One of the annoying things when it comes to playing guitar from tabs on your screen, is having the guitar in your lap and having to reach over to type in the next song. But what’s also annoying is when you come to the bottom of the screen, the tab isn’t finished and you have to scroll to get to the next part.

I wanted Guitaryst to work without you ever having to touch your screen. So it should Find the tab for you and when it has it, Scroll it for you. Just scrolling at a set rate (like some other tab sites do) isn’t good enough though. I wanted tabs to scroll along with the song. With Guitaryst, you should never have to leave your guitar.

So I implemented another API, this time The Echonest API. I can send the title and artist of a song to their api, and get the exact length of the song. This means that Guitaryst will scroll the tabs in sync with the song!

Code-wise, Lystener and Guitaryst are almost the same, so “porting” it served as a nice incentive to clean up and improve on both. Lystener has changed a lot in the last couple of weeks, and this is mostly due to insight gained from building Guitaryst.

iPad!

I bought an iPad when it came out, and immediatelly thought of the awesome things you could do with it. So I used some webkit-fu to make Guitaryst work nicely on the iPad. You can install it to your home screen, it has a nice icon and looks pretty good. There are probably some improvements I can make yet (it only works in landscape mode, for example), so feel free to tell me where I dropped the ball.

Djangy hosting

Guitaryst is hosted at Djangy, a “Heroku for Django”. I got a private beta invite, tried it out and apart from some obscure stuff with my nonstandard Git config, it’s worked flawless. No longer do I have to mess around with vhost files, wsgi settings and database stuff, Djangy does it all. They saw my app when I was still testing it and liked it so much they wanted to mention it at their blog, so that was nice.

I have private beta invites for 10 interested people. Comment in the replies with a valid e-mail address if you want one, and tell me what you want to do with them!

Guitaryst and Lystener

I’m sensing a trend, and I would love to expand this into more areas. Alas, other music data is hard to find. I’ll try getting a bass tab version going soon. I decided against adding Amazon referral links and Youtube videos as I really like the interface as it is now, but I will probably add one or both in the next couple of weeks, in a non-obtrusive way.

Guitaryst has it’s own twitter account: @guitaryst, so follow that to continue getting updates. Please let me know what you think of guitaryst in the replies, on twitter or via kilian@guitaryst.com.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Guitar tabs as they should be: Guitaryst.com

No dead animals please

Flickr’s photo search API allows you to search by excluding certain tags. This is great, because it means I can filter out all sorts of stuff that you just don’t want to see while looking for cute animals, such as anything concerning dead, shooting, fighting but also knitting, graffiti, skulls, playboy (bunnies), fur and stuff I hadn’t even imagined would give problems, such as “kitchen”, “makeup”, “art”, and a whole slew of other tags.

But it seems that exclusion tags are merely a suggestion to Flickr. Flickr doesn’t really seem to care when I say I don’t want dead animals. Every now and then, it just slips one in to see if I notice. Unfortunately the difference is pretty clear. On the other side, seeing a knitted hedgehog isn’t quite as offensive, but it isn’t quite a real animal, either.

What it comes down to though, is this: if you want to look at just some cute animals, a dead rodent is a major buzzkill.

This really is my biggest problem, and I don’t have a solution for it yet other than obsessively blacklisting individual photos. Suggestions are very welcome

Not that photo again!

When I select photo’s, I request a random search page between page 1 and 10000, with each search page containing one photo. You’d think the odds of the same photo popping up twice would be really minimal, right? As it turns out, the page attribute is also merely a suggestion to the API. There are a number of photos that just keep popping up for everyone, up to a point where they’re the only photo visible. Now, my random number generator isn’t broken, so it’s definitely happening at Flickr’s end.

This photo is really cute, but it starts to lose it’s shine after randomly showing for the tenth time.

Luckily I can circumvent this by checking if I already showed you this photo, and then requesting another one. I’m kind of forcing randomness here, I guess.

Sometimes, one means zero

Lastly, I tell the API to only return one photo, because, well, I only need to display one, and requesting more is wasting both my and Flickr’s bandwidth. However sometimes in the API one means zero and no photo gets returned. It doesn’t give an error or anything, but it doesn’t give me a photo either. This problem goes away entirely when you request two photos. So that’s what I do now. If it does go wrong again, I have a sickeningly adorable Red panda on my error page that should see you through to the next page refresh.

Thus concludes a weekend of playing with the Flickr API. The above three problems are very annoying so I hope Flickr will improve their search to fix these problems. If only so I can show people even more cute animals ;)

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Flickr, please fix your API!

She did!

…But it took the entire audience.

What interested me though, is the conclusion OMG!Ubuntu! came with:

But dig a little deeper and people are actually a lot smarter than given credit for. Had those people [...] been given a laptop and asked to log in to Facebook the majority would’ve managed it fine.

And that’s just it. Who cares if people don’t know the difference between a browser and a search engine. They can use their computers to visit your website, that’s awesome.

Apps

On Ubuntu (and mac OSX, too) the lines between a web app and a desktop app are blurring. You can use HTML + CSS + javascript to make desktop apps, and websites can be installed as if they were regular applications. With desktop and web apps blurring together, the concept of a browser is getting increasingly vague.

Knowing what a browser is isn’t important, it’s knowing how to use one that is.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Which one of these is not a web browser?

SenCSs

When last written about, SenCSs was at version 0.7. We’re currently at version 0.8.1, with a bunch of vertical rhythm fixes, mostly for form elements, and added support for HTML5 elements. You can now add it to the list of “HTML5 CSS frameworks”. ;) Though, “framework” it is not, so I decided to just rename it to what it is: a Baseline.

Get more info at SenCSs.kilianvalkhof.com

F.lux for Ubuntu

After releasing F.lux for Ubuntu this summer, It went from 1.1.1 to 1.1.8 mostly improving stability and making different parts of the application (such as the preview button) work more like users expect. I’ve also been working on KDE/XFCE support, which was kind of finnicky due to the way I select the indicator applet icon. Version 1.1.9, which will be released soon, will hopefully bring this support. After that, it’s onward to 1.2, which will include the ‘turn off for an hour’ functionality.

Get more info at stereopsis.com/flux/linux.html

Trimage

After announcing Trimage in March of this year, I’ve gone from 1.0.0-beta to 1.0.5, with a slew of added functionality in between. I’ve gotten a lot of help from people such as Tarnay Kálmán and Thomas Lété in adding cool new functions. Here’s what has changed since 1.0.0:

• Correct unicode support for all filenames
• Adding a notification area icon
• Using a threadpool for processing (much faster)
• Showing more statistics when compressing
• Window geometry and last opened directory are now remembered
• Ability to drag in entire folders
• Prevent Trimage from overwriting already smaller images
• Add PNGcrush to get even better compression
• Miscelanious speed improvements

A while ago I tried getting Trimage into Debian via debian-mentors. This was unfortunately a very opaque process and in the end no-one wanted to sponsor Trimage despite numerous changes to the build system. I’d still like to get Trimage into the main repositories, so if anyone wants to help me out, that would be greatly appreciated.

For 1.1, Paul is going to update the command line options and generally use his python-fu to improve stuff.

Get more info at trimage.org

Grafico

Announced at the beginning of this year, Grafico has seen a bunch of cool improvements. Within a week, Jan Paul Posma implemented stream graph functionality (after I mentioned the math was much too hard for me, ahem…). Since then, David Parry added stacked bar charts, Rémy Coutable greatly improved my hover code while Jaap van der Meer improved the control of text in the hovers, Menno van der Sman implemented an awesome axis-value algorithm and a lot of options have become much more customizable. Most charts now support negative values as well as positive values, and I’ve done a whole slew of bug fixes and speed improvements.

Get more info at Grafico.kilianvalkhof.com

All in all, a whole bunch of work by a whole bunch of awesome people!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Open source updates

As a sidenote, you should really sign up for Blurb.fm. I don’t read enough books. I really want to, but I just don’t make the time. Blurb.fm is a great way to still get the general gist of interesting non-fiction books, ranging from inspirational biographies to neuro-pop-science books such as “how we decide” (Jonah Lehrer, highly recommended!). No, I’m not getting paid to say this ;) (though feel free to Flattr if you like this). Now without further ado, the review:

How pleasure works

“How pleasure works” is a book about religion, cannibalism, fake vomit, virgins, family guy and pornography for monkeys. Not things you would immediately associate with pleasure. And yet the author, Paul Bloom, manages to weave these topics and accompanying stories into an intricate pattern of, indeed, how pleasure works.

Humans are unique in the way they feel pleasure. What other species has teenagers that enjoy cutting themselves with razors, adults that enjoy spending evening after evening in front of the television more than socially interacting with others, or individuals that would pay tens of thousands of dollars for a tape deck used by J.F. Kennedy? Humans, when it comes to pleasure, are pretty unique.

Paul Bloom is a professor of Psychology and cognitive science at Yale university. He researches how children and adults understand the world, language, fiction and art. This research is often used as starting points for different parts of “How Pleasure Works”.

Essentialists

Bloom argues that all people are essentialist. They perceive humans, animals and objects to have an innate essence. Or as Bloom himself says, the idea that things “have an underlying reality or true nature”, and that it is this true nature that really matters. To support this notion, Bloom describes research he did with very young children. The kids were first shown a picture of a tiger, and then a picture of the same tiger, made to look like a lion. They were told that this happened (the tiger now looked like a lion) and were subsequently asked if the tiger was still a tiger, or if it had become a lion. Of course, the children insisted that once a tiger, always a tiger. But while this feels logical to us, it means there is something more to the tiger than it’s mere outside. There is something inside the tiger that makes it, inherently, a tiger. Why do humans do this?

As it turns out, this essentialism helped our ancestors make sense of the world. It helped them categorize the world into friend and foe, deadly and edible. Our illogical sources of pleasure, Bloom argues, are side effects of this essentialism. Side effects, because pleasures didn’t evolve as a biological adaption to the world. Quite often, you would make better decisions if pleasure wasn’t involved. However, pleasures evolved in us as a byproduct of other, actually useful traits.

Take for example pornography. No biologist could argue with a straight face that pornography is useful for the proliferation of our species. In fact it might very well be detrimental, because without it we would undoubtedly spent more time with lovers of flesh and blood. However, the pleasure we derive from watching pornography comes from another source: the urge to look at “attractive naked people”, causing us to want sex.

What does it mean to be “adaptive”?

It is this realization that returns and returns in ‘How pleasure works’. Why do we enjoy books, movies, gaming art or even daydreaming so much? Bloom says, “Surely we would be better off pursuing more adaptive activities”. It’s just that, retreating into imagined worlds, the pleasure is almost as real as the real thing. “Reality Lite”, as Bloom calls it. Our ability to imagine things, and think of them as having essences, both adaptive advantages, make perceiving pleasure above and beyond merely pleasure derived from sensory stimulating activities possible.

Art is a prime example of the way this works. Art can be visually stimulating. It can be pretty. But much of the pleasure we get from art is “rooted in an appreciation of the human history underlying it’s creation”. In other words, it’s essence. The books opens with an anecdote about Van Meegeren being arrested for selling a Vermeer (A historical treasure!) to the Nazi leader Herman Goering. After six weeks in prison, Van Meegeren confessed. Not to selling a Vermeer, but to making and selling a fake. Upon hearing this, Goebing looked “as if for the first time he had discovered there was evil in the world”. This is remarkable, because for all intents and purposes, a Van Meegeren couldn’t be distinguished from a Vermeer (To prove his claim, Van Meegeren had to paint another “Vermeer”, only then was he believed).

It is thus the way “How pleasure works” is written. Reading this book won’t tell you how to be happier, how to get pleasure from your work or how to spend your time more usefully than watching television at night. But it will tell you how pleasure works.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Book review: How pleasure works