I encountered this bug while building Lystener. I change the location hash there quite often, and each time I did, the favicon would disappear. Finding the root cause took me quite a while, and apart from the bug report I could not find any page describing why this happens and what to do about it. So I figured that I’d write a quick post about it to make it Google-able at least.

Luckily, there is an easy fix: Just reset the favicon after changing the window.location.hash. Here’s a jQuery function that does just that:

function setFavicon() {
  var link = $('link[type=image/x-icon]').remove().attr("href");
  $('<link href="'+ link +'" rel="shortcut icon" type="image/x-icon" />').appendTo('head');
}

It’s fairly straightforward: We find the current <link> referencing the favicon, remove it, and then, making use of jQuery’s standard of functions returning themselves, get the href attribute of the just-deleted link. Then we simply set that as the href in a newly created link element, and add that to the head.

Just execute that function each time you change the window.location.hash, and you’re all set!

Feel free to Flattr this post at flattr.com, if you like it.

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

The case of the disappearing favicon

F.lux for Ubuntu is an indicator applet (like the new Messaging Menu), so it works very nicely on Ubuntu 10.04 and 10.10. Michael improved the commandline application by leaps and bounds. There are a bunch of new configuration options (all available in the GUI), the night/daytime cycle is now much more accurate, and it even takes daylight savings into account.

The F.lux indicator applet automatically manages the color temperature of your screen based on your latitude and longitude, or if you are in the US, your zipcode. In the preferences panel, you can set your preferred nighttime colortemperature and see a preview, as well as seeing the current color temperature.

Installation

Installation is easily done by adding the PPA for f.lux, simply type the following into your terminal:

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

When you first launch the application (via ‘accessories’ in the menu, or by pressing alt+f2 and opening “fluxgui”) you will be asked to fill in either your latitude and langitude, or your zipcode. If you want f.lux to autostart at the next startup, select the “autostart” option. Close the preferences panel and you’re all set!

There is a bug in the current version of Fluxgui that’s preventing it from running correctly the first time it’s started. I wrote a fix that’ll be available in the PPA shortly (version 1.1.4). If you can’t start because fluxgui claims it’s already running, remove “fluxgui.pid” from the /tmp folder. After the update, it should work as advertised!

On developing F.lux for Ubuntu

As I mentioned, F.lux for Ubuntu is built using GTK+. This isn’t by choice, but needed because I wanted to built an indicator applet.

Coming from Python + Qt (for Trimage) , GTK+ feels like a serious step back. The Glade interface builder is clunky and quirky, and surprisingly, modules such as python-gconf and python-appindicator are virtually undocumented. There is a massive amount of time spent on figuring out what-goes-where-and-how.

Nevertheless, I like Python more each time I use it, and going back to JavaScript often feels weird (“Oh, yes, parentheses!”) so I think it’s time to start doing more with Coffeescript in the future.

Official announcement

Michael posted an official announcement on the F.lux website with these instructions as well: f.lux for linux, so be sure to go there and leave nice comments for us and tell us what we can improve! :)

Future versions

The currently released version is 1.1.1, For version 1.2 we will be adding a “pause for an hour” function, as well as an indication of how long until sunset/sunrise. Feel free to suggest other new features or fork the project on Github. It’s build using Python and GTK+, and the GUI is MIT licenced.

I’m quite proud of the result so far, and I hope it’ll be as useful to others as it already has been to me! Please leave suggestions for new features in the replies :)

Feel free to Flattr this post at flattr.com, if you like it.

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

F.lux for Ubuntu

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!

Feel free to Flattr this post at flattr.com, if you like it.

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!

Feel free to Flattr this post at flattr.com, if you like it.

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

Fronteers Conference 2010

A while ago I made a design with lot’s of semi transparent areas (I know, stupid me, it’s only 2010 after all) and solved that in modern browsers with rgba(). All fine and well, I threw in some border-radius and box-shadow, and from Opera through Firefox to Webkit, it looked increasingly better. Great, I’m all for progressive enhancement. Except it of course looked really bad in IE. I set out to find an acceptable solution.

Gradients, where?

For general opacity, we have the alpha filter. but that sets the opacity of foreground elements as well, making it useless in this case. Looking a bit further, I found the gradient filter. Seeing as how I needed transparency and not gradients, this didn’t seem very useful.

But the gradient filter supports some fun stuff. While it’s not mentioned anywhere in the msdn article, the gradient filter has an #ARGB syntax. That’s right, the A is for Alpha. No, I don’t know why it’s at the front.

Anyway, Gradients don’t have to be between two different colours, right? You can just as easily go from white…to white. So that’s what I did:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);

And there you go, alpha-transparent backgrounds!

Gotcha’s

Of course, it’s not that easy. rgba() notation is in values from 0 to 255, with the a being a floating point between 0 and 1, and #ARGB is in hexadecimal format. You need to convert rgba() to #ARGB to make it useful.

I’ve saved you the math, here’s an easy (to and from) converter:

Convert to and from rgba() and #ARGB

More gotcha’s (or: Oh, IE!)

Of course, just finding the correct value for #ARGB isn’t the only problem you will have. There are more downsides. For one, the code above isn’t actually the one you have to write. The code below is:

background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;

Firstly, you have to set the actual background to none, then you have to use -ms-filter for IE8, filter for everything below, and set zoom:1; to make sure the element has hasLayout (or else the filter doesn’t work.)

Apart from the code, there are two other downsides: When you use filters, ClearType gets disabled. That’s a pretty big downside, since non-cleartyped text looks hideous. According to some you can fix it, but YMMV.

Secondly, as soon as you place the website in an iframe, say goodbye to the A in your gradient. the backgrounds will lose there transparancy and look hideous. I learned that the hard way. if you use the gradient filter, don’t display your site in an iframe.

Should you use it?

Using stuff like this, it’s a bit like we’re dragging IE along, kicking and screaming. And that’s what we do. We want to move forward, so we find ways to get around the limitations of lesser browsers. Whether losing ClearType is worth it depends wholly on the design. In my case it did, in your case, it might not.

Feel free to Flattr this post at flattr.com, if you like it.

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

How to use RGBA() in IE

‘We’ in this case is my team at Fluxility. Most of the time we make websites and webapps for clients, but we’re focusing more and more on building our own sites. This was at once a fun diversion, a project to see how fast we could bring something “to market” and whether we can make a Facebook app work. We’re still out on the last one, but the first two have been a major success in our book. :)

Facebook integration

The worst thing Facebook could do was change their API right before we started. Which of course they did. This meant we couldn’t use the current Django facebook apps available, and had to write our own.

With focusing on getting the website online, that app needs to be cleaned up a bit first but then we’ll open source it over at Github so everyone can use it. Facebook’s documentation and application settings are pretty bad. Every thing’s there, sure, but it’s very opaque and hard to find. We got there, but it took far more work than necessary.

Front-end stuff

As the website is basically one page, there is a lot of JavaScript and AJAX stuff going on (yay!), including getting the YouTube videos. For that we use oEmbed. We started out with the jquery-oembed plugin. Unfortunately during testing the webservice behind that plugin (oohembed.org) was offline a lot. It’s hosted for free at Google AppEngine, so it’s understandable, but we need something a bit more reliable.

Enter Embed.ly. I replaced the jquery-oembed libary with 6 lines of youtube-specific code, wrapped it in a jQuery plugin and it worked. Awesome! One thing I hope Embed.ly will do is add a wmode=transparant to YouTube videos to make it easier for us to do stuff with it. I could add it in with JavaScript myself, but I’d rather not.

Up next

Everything is working pretty well right now, but of course we have plans to expand. We offer a homepage position for videos for 300 euros a week (discounted from 500 for this month only). People can vote for this video too, so if your video is awesome enough, it’ll enjoy another week in the top ten.

As for the site itself, we want to get to daily top tens as soon as possible, but this means we need traction first (so get on there!). I’m also developing a Bookmarklet so you can vote directly from YouTube and we’re going to add a page with all submitted videos for you to peruse.

Let me know what you think and of course Become a fan and Start using Youtubetopten.com!

Feel free to Flattr this post at flattr.com, if you like it.

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

YouTube Top Ten: my new Facebook app

Why they exist

You see, vendor prefixes exist for one important reason. Vendor prefixes are used for unfinished specifications. Unfinished specifications change. They evolve. Sometimes they don’t describe the implementation at all, or the syntax has yet to be agreed upon. They are not done yet. They are unfinished.

This means browsers could, and will implement things differently. To give a concrete example: Gecko and Webkit implemented the border-radius syntax differently. Had there been only one “-beta-” prefix, you could not have used border-radius in a cross browser way. That doesn’t seem like a real solution, does it?

“But I have to type so much!”

Sure, typing -moz-, -webkit, -o- again and again gets annoying, but come on, you’re a developer. It’s trivial to make a snippet (or whatever your editor calls them) for this, or to use a Sass or LESS mixin. Tools will save us.

Vendor prefixes are awesome

Vendor prefixes allow us to test out new technologies, they allow different browsers to implement them in the way they seem most conforming to the specification (at that moment). This in turn allows developers to deal with browser differences by setting different values for each vendor prefix.

Browsers get to test out different implementations, and developers get early access to new possibilities. That seems like an excellent deal to me.

Feel free to Flattr this post at flattr.com, if you like it.

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

CSS Vendor prefixes considered important

Demo

If you’re the impatient type, I’ve set up a simple demo: A simple list filter with jQuery.

The HTML

The basic HTML you need for this is simple: just a header and a simple unordered list. They both have id’s so we can easily and uniquely find them:

<h1 id="header">List of countries</h1>

<ul id="list">
  <li><a href="/australia">Australia</a>&lt/li>
  <li><a href="/austria">Austria</a>&lt/li>
  <li><a href="/belgium">Belgium</a>&lt/li>
  …
<ul>

With the HTML ready, here is what the filter function needs to do:

1. Add an input to the header
2. Set up events to check when someone is typing in the input
3. Check the value of the input, and compare it to the countries in the list
4. Hide the non-matching ones, while showing the matching ones

Step 1: add an input to the header

We’ll start with a simple function, we’ll call it listFilter:

function listFilter(header, list) {
  …
}

As you see, the function takes two arguments. We’ll use jQuery to select the aforementioned header and list and give them as arguments to our function. Next, we need to create a form with an input in it, and append it to the header:

function listFilter(header, list) {
  // create and add the filter form to the header
  var form = $("<form>").attr({"class":"filterform","action":"#"}),
      input = $("<input>").attr({"class":"filterinput","type":"text"});

  $(form).append(input).appendTo(header);
  …
}

Using $(“<form>”) (with brackets) we can create new elements, and by inserting the input into the form using append(), and then using the appendTo() function to add the form (with the input in it) to the header, we easily add it into the page. For easy of use I’ve given both the form and the input classes, so you can style them easily.

That’s step one done, but it doesn’t do anything yet, for that we need to…

Step 2: set up events

To check for text in the input, we can use the change event. This fires every time the value of the input has changed, but only when you exit the input. However, this doesn’t work with a letter-for-letter filter. For that, we need to watch the keyup event a well. We use keyup instead of keydown because it fires after you pressed the key, and so the value of the input then includes the just-typed letter. With keydown, the event gets fired before the letter is added, so JavaScript can’t pick it up in the value of the input.

While using two events, there is no need to do double work. When we receive a keyup event, we just fire a change event:

function listFilter(header, list) {
  …
  $(input).change( function () {
    …
  }).keyup( function () {
    // fire the above change event after every letter
    $(this).change();
  });
  …
}

We’re now all set to start with the actual checking!

Step 3: compare the values

jQuery has a way to check for matched elements easily: the :contains() selector. Using this, you can very easily select all element containing the text between the parenthesis:

function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val(); // get the value of the input, which we filter on
    $(list).find("a:contains(" + filter + ")").parent().slideDown();
  });
  …
}

The code above works like this: in the list, which is the <ul> element. it finds all the shows all the <a> elements that contain the value in the input. It then selects the parents of those <a> elements, the <li>‘s. Those li’s then get shown. However, since we filter the list, we need to also hide all the li’s that do not contain that value. For this, jQuery offers the :not() selector, and we can just wrap that around the :contains() selector, like so:

function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val(); // get the value of the input, which we filter on
    $(list).find("a:not(:contains(" + filter + "))").parent().slideUp();
    $(list).find("a:contains(" + filter + ")").parent().slideDown();
  });
  …
}

There, now with each keystroke, we check the list for matching elements, and hide the ones that don’t match. Easy-peasy.

But wait. What happens when you clear the input? Then $(this).val(); will be empty, and nothing matches with empty. So all list items will be hidden, the exact opposite of what we want. This can be remedied by just checking if $(this).val(); has any value, and if not, just showing everything:

function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val();
    if (filter) {
      $(list).find("a:not(:contains(" + filter + "))").parent().slideUp();
      $(list).find("a:contains(" + filter + ")").parent().slideDown();
    } else {
      $(list).find("li").slideDown();
    }
  });
  …
}

Typing in letters now filters down the list, and removing them all shows the entire, now unfiltered, list again. Is that all we need? Well, It would be, except that :contains() is case-sensitive. so if you filter with “austria”, you won’t find Austria!

Building a case-insensitive :contains()

jQuery allows you to add your own selector expressions, and we can use that to build our own contains filter that’s a bit more sensible:

jQuery.expr[':'].Contains = function(a,i,m){
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

This adds a :Contains() (note the uppercase) option to your selectors that does the same as :contains(), but it first converts all text to uppercase, and then compares them. So once we add this to your JavaScript, all we have to do in our listFilter function is replace :contains() with Contains() and we have a fast, simple, progressively-enhanced way to filter down a large list!

Demo

If you want to browse through the entire, documented code, and see it in action, check out the example page: A simple list filter with jQuery.

Please let me know in the comments what you would use this for, and please let me know your remarks and questions!

Feel free to Flattr this post at flattr.com, if you like it.

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

How to build a fast, simple list filter with jQuery

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!

Feel free to Flattr this post at flattr.com, if you like it.

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

Trimage image compressor

CSS transforms

CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting:

transform:rotate(45deg) translate(0, -35px);

If you rotate first, and then translate (move), it will move along the rotated axis. The above code translates a block to the top-right corner (45 degrees). (the gray div is not transformed while the black one is.)

Using this, I could rotate and translate a bunch of divs to create loading spinners (though this one doesn’t spin yet!):

In this example, each div is rotated an additional 45 degrees. The first one is not rotated, the second one is rotated 45 degrees, the one after that 90 degrees, and so forth. Additionally, each div has increased opacity to make it look like most loading spinners.

Animation

Webkit supports CSS animations, but these are continuous while most loading spinners are not. On the left side is a spinner animated with CSS animation (only works in Safari and Chrome), on the right there’s one animated with a small bit of JavaScript to look like regular loading spinners:

The code for the CSS animation is fairly straightforward:

#div2 {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}
@-webkit-keyframes rotateThis {
  from {-webkit-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);}
} 

While the (quick and dirty) code for the JavaScript animation is pretty easy as well:

  var count = 0;
  function rotate() {
    var elem2 = document.getElementById('div3');
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.setTimeout(rotate, 100);
  }
  window.setTimeout(rotate, 100);

Someone else might be able to duplicate the loading spinner-style rotation with CSS animations (please let me know!), but the JavaScript solution looks better and works in Firefox too.

Going crazy with it (More examples!)

Once I had the basic ‘functionality’ working, I just decided to go crazy with it and create a whole bunch of different style loading spinners. You can find them on this page: CSS3 loading spinner examples.

Check out the source for the way to style the different spinners and let me know when you make interesting variations!

Feel free to Flattr this post at flattr.com, if you like it.

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

CSS3 loading spinners without images