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

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.

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

The idea

Finding lyrics has been a longstanding pet-peeve of mine. A lot of music players don’t allow to you easily copy the title and artist so you have to manually type them into Google. Once you’re there, most sites are cluttered and spammy. Way too annoying.

Lystener asks you for your last.fm username, and then displays the lyrics to what you’re listening to. Simple but effective.

But that’s not the entire idea. Posting lyrics to Facebook and Twitter is something a lot of people do, and the process for that sucks, too: you had to find the lyrics via Google and the spammy sites I mentioned earlier, copy the part you like, paste it into the form on Twitter or Facebook, format it, add the title and artist and only then you’d be done. With Lystener, you just select the lyrics you like and Lystener takes care of the rest, leaving you to just click the ‘tweet’ or ‘publish’ button.

Launch!

Go check it out! I’m pretty exited to see what everyone thinks, so please let me know. I have a whole bunch of ideas lined up to expand Lystener, but if you have ideas I’d love to hear them. To keep up with the updates, follow @LystenerApp on Twitter or like Lystener on Facebook.

Read on to know how I made it:

The process

After getting home I bought the domain name (I had thought up a name in that great moment when you’re not quite sleeping and not quite awake yet and everything is clear as glass.) and started sketching and coding. At the end of the day, the app was 60% done and after working on it for the entire Saturday, the minimum viable version was done as well. I invited people for the ‘beta’ and gave people access on Sunday, requesting feedback in the process.

That’s it, a web app in a weekend. What now?

The response under my beta testers was overwhelmingly positive, save for one thing: the lyrics themselves. I used an API that didn’t give full lyrics, and didn’t have a lot of songs, and was really error prone. It sucked. A website can work well technically, but if it doesn’t display what you want, or only partially displays it, it’s not useful.

So I decided to switch over to another API, the chartlyrics API. It had a lot more matches, it provided full lyrics and if lyrics were missing, they have options to easily add the lyrics. From Sunday to Thursday I tweaked my fetching script to find more lyrics and match better.

I’ll be iterating Lystener.com from now on, and if you have ideas I’d love to hear them!

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

A web app in a weekend: Lystener.com

Fronteers 2010 will be held the 7th and 8th of October in the beautiful Tuschinski Theatre in Amsterdam. While usually a movie theatre, we’ll be using the gorgeous room with awesome soft, red cinema seats, a huge stage and an absolutely gorgeous art-deco interior as the place where, for two days straight, the best of the best of front-end will come together.

Speakers

Fronteers 2010 has an impressive list of speakers:

• Cameron Adams
• Jina Bolton
• Jeff Croft
• Brendan Eich
• Jeremy Keith
• Nicholas Zakas

And those are just the first six of our fourteen presentations covered! Just yesterday we also announced Brad Neuberg and Steve Faulkner + Hans Hillen, and you can expect a whole bunch of really cool names to follow in the next couple of months.

The conference will be hosted by my buddy Justin, who did an excellent job at being the master of ceremonies, last year.

In terms of topics, We’re shooting for a more diverse range of topics than last year, while still keeping the technical level high. Expect topics dealing with HTML5, CSS3, JavaScript, performance, SVG and accessibility.

Workshops

Apart from two days of awesome presentations, this year we also host two workshop days in advance of the Conference. One workshop by Andy Clarke, and one by Dan Rubin. The former will be interesting to front-end developers looking to really hone their skills and be updates to all the latest CSS3 goodness, while the latter is set up specifically for designers interested in starting with CSS, or at least getting more of a grip on it.

Tickets

As of writing, there are just 50 early bird tickets left, at the insane price of just € 275. After next week, the price for a ticket will go up with 100 euro. So, go get some tickets and I’ll see you there!

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

Fronteers Conference 2010

Trimage

Trimage is a GUI front-end to a couple of command line tools available on most linux based systems (though it should work on mac and windows, too), and can losslessy compress both PNG and JPG files. It looks native, (dare I say) pretty and is very easy to use.

That’s why Trimage has multiple ways of accepting files: You can drop them onto the app, you can open them via a file dialog, and you can feed it images or entire directories via the command line. So you can pick the method you find most comfortable, and use that.

More information can be found on the website: Trimage.org.

How to install

For the moment, I only have installation guides for Ubuntu and other linux-based systems. If you can help me with Mac and Windows, please e-mail me at help@trimage.org!

Ubuntu

Ubuntu is by far the easiest to install. If you’re on karmic or lucid, simply enter this into your console:

1. sudo add-apt-repository ppa:kilian/trimage
2. sudo apt-get update
3. sudo apt-get install trimage

If you are still on Jaunty, read this guide on installing PPA’s.

Other Linux:

I’m still looking for help with making .debs, .rpms and the like, but you can install Trimage via python as well:

1. Download the source via GitHub or Launchpad
2. Make sure you have all the requirements installed: python 2.6, python-qt4 4.4, optipng 0.6.2.1, advancecomp 1.15, jpegoptim 1.2.2, or higher versions
3. Enter python setup.py install into your console
4. Launch by executing trimage

Why and how

As I said in the intro, I wrote this mostly to scratch my own itch. I wanted an easier way to compress my files that didn’t involve mucking about on the command line or uploading all my images to some server far away via a crappy flash application.

Trimage was inspired by ImageOptim. It is made using python and the PyQt GUI framework. The choice for PyQt was made for a couple of reasons: the Qt4 designer is very easy to use, it’s available cross-platform and most importantly, it provides native widgets. As the latter is my number one annoyance, and I actively avoid using programs that do not look like they belong in my gnome desktop, this was a big issue for me. Paul Chaplin helped me with a lot of the python stuff.

However, PyQt has some downsides as well. For one. The documentation is bad. It’s not complete, hard to read and sometimes isn’t even correct. That’s not to say it’s unusable, but it clearly needs some more love.

Where the documentation lacks however, the #pyqt IRC channel on freenode is awesome. There are a bunch of really smart and nice people there that go out of their way to help you. Every community should be like this.

If you want to build a GUI app for Ubuntu using python, the best start you can get is PyAppTemplate by Neil Wallace, which takes care of all the Hoohaa and voodoo that goes into a setup.py and the debian build files. It took me a day to try and figure it all out by myself, and then an hour to get it working using PyAppTemplate.

Future development

As you can see on the website, I have a bunch of features lined up for the coming versions. All development is done on GitHub, so if you want to help out, add more options or scratch an item from the todo, I appreciate all help!

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

Trimage image compressor

So I decided some action needed to be taken. I got the domainname websitesthatdontworkwithoutwww.com, installed Chyrp, got a Thumbalizr API key and started making a list. Name ‘em and shame ‘em!. If any of the websites fix their non-www version, the without thumbnail will automatically update and I’ll add a link to their site :)

Input time

The site is there, and it has a couple of websites on it, but now I need your input to start adding more and more! If you encounter sites that don’t work without www., please send them to submit@websitesthatdontworkwithoutwww.com. You can also @reply the twitter account: @wtdwww. (and better yet, follow it!)

The Firefox thing

During development I got a couple of remarks that “well, site X just works you know”, to which I could wittily (*ahem*) reply “Nope, it doesn’t. I bet you use Firefox 3.5!”. That’s because Firefox 3.5 automatically adds www. in front of domain names if they don’t work without. While this is awesome for end users, it just hides the fact that a lot of hosting providers/webmasters are incompetent at doing their jobs. In that regard it’s a shame.

Since I don’t want to just point and laught, fun as that is, I’ve also added a help page, where some explanation of how to fix the non-www website will be placed. I’m still working on that, if you want you can help (just shoot me an e-mail!)

This was a fun little project I made in a couple of evenings. I still have to soften up some of the edges and tweak parts of the “site”, but overall I’m pretty happy with how easy it was to set up.

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

Websites that don’t work without www