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

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

Graphs

This means you get awesome graphs such as stacked area charts and sparklines, but no pie charts or bar charts with every bar a different color. There are a lot of bad charts out there, and Grafico will do it’s best to prevent you from adding charts onto that pile. ;)

Website, Documentation (might be slow on some browsers due to all the examples)

Grafico requires Raphaël 1.0+ and Prototype.js 1.6+

Each graph type has numerous API options to customize it’s look and behavior. Many examples of this can be found in the documentation. Some highlights: pop-up hovers, meanlines and watermarks. Minified, Grafico is about 30kb and available under the MIT license.

Grafico is also available on Github and includes a minification script made by Menno using the Google Closure Compiler.

History

In april 2009 I started working on new visualizations for Wakoopa. I had set it my target to provide unique and interesting graphs. One thing that particularly inspired me was the stream graph, but the math behind it scared the crap out of me. I decided to focus on stacked area graphs instead.

After doing extensive research on the available JavaScript charting libraries, and being slightly disappointed by most, Ico by Alex Young was the most promising. In the (almost ) year I worked on it, the graphs, code and API changed considerably. To avoid confusion I decided to rename my version to Grafico.

Todo

As always, there are points of improvement. The major one is speed. Grafico is very speedy on modern browsers, but of course IE lags behind. When building graphs, drawing pop-up hovers for all data points takes too much time and I have yet to find a way to improve this. The project lives on Github, so if you have improvements, fork away and I’ll gladly pull them!

Update! (16 Feb 2010)

Jan Paul Posma wrote the code to implement the aforementioned stream graphs into Grafico. Which is awesome. I have updated the links in this article accordingly.

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!

Grafico: Javascript charting library

Typeselect

Let’s take a look at the new kid on the block. Typeselect is based on version 0.12 of Typeface.js, and defines it’s goal boldly in a custom, text-selectable font on it’s homepage:

You shouldn’t have to compromise the design or the user’s experience to have selectable text.

Amen!

Typeselect acts as a layer above Typeface.js. You should take this as literal as possible, since the way Typeselect works is by adding transparent text on top of your replaced text. Script-wise, added to Typeface.js are jQuery 1.3.2 and their own js file, typeselect.js that takes care of the actual selection of text.

Including Typeselect in your website

<head>
…
  <script type="text/javascript" src="js/typeface-custom.js"></script>
  <script type="text/javascript" src="fonts/nilland_regular.typeface.js"></script>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/typeselect.js"></script>
…
</head>

While it takes two more javascript files when compared to Typeface.js and Cufón, chances are that you already use jQuery and you can always choose to combine multiple javascript files. When we move on though, actually changing the font is pretty easy. By adding the class select to the elements you want to replace, and adding your typeface.js converted font to the css, the font will be replaced!

<div class="myclass select">
…
h1,  h2 {
  font-family:nilland, Georgia, Serif;
  font-style:italic;
}

Future?

It seems that Typeselect aims to be a layer above typeface.js and Cufón to provide selectable text for both. Apart from that, better rendering of the fonts is on the roadmap as well as a host of other things. Only… Typeface.js currently has it’s own, very similar, implementation of selectable text built right in. Actually, as far as I can see, it’s identical. So without Cufón support, I’m not sure if Typeselect is the best choice you can make.

Typeface.js

Typeface.js added text selection in version 0.13 in the same way as Typeselect: selectable text is implemented by overlaying real, transparent text on top of the rendered text. Pretty smart! AS you can see on Typeface.js’ download page, it works really well.

However, by doing this, performance goes down a bit. Not enough to really notice it, but if you want to disable it, there’s an app option for that. By adding the following to your <head> in a script element, selecting text gets disabled:

_typeface_js.configure({ disableSelection: true })

Cufón?

So, where does that leave Cufón? Well, text selection is planned in version 1.2. Right now Cufón is at version 1.08, so we’ll have to wait a little longer.

Conclusion

For now, Typeface.js is pretty much the best way to use good looking fonts while also allowing selectable text, cross-browser. However, with some work, @font-face can be made working in Firefox 3.5, Safari 3.1+, Opera 9+, Internet explorer 4+ and Chrome 0.3+. So, basically every browser. However, it is a lot of work compared to using Typeface.js, Cufón or Typeselect.

Personally I think that in most browsers, using the javascript replacement results in better looking text, and it’s definitely easier to implement. In terms of forward compatibility, @font-face is a better choice. It’s up to you!

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 state of selectable text-replacement

Canvas

…is pretty easy. There are good guides available, not the least the one from Dive into HTML5, Let’s Call It A Draw(ing Surface). You need them, because there are a couple of gotcha’s. For example, to get different colored lines, you need to explicitly start new paths (but you don’t have to explicitly end them, just draw them on the canvas before starting another line). Once you get the way this works, it’s pretty much straightforward from there.

Another example is that in canvas, pixels are seen as small squares (yes, really.) When you draw a line from a pixel, it actually draws the line centered in the top-left corner of the pixel. When it renders, that means that the line gets blurred because it’s actually drawn on two pixels. This means that in order to correctly draw a 1px wide line, on a single pixel, you actually need to position it 0.5 pixel further. (so it’s in the ‘middle’ of the pixel). It turns out, that sort of fails in Firefox (but not in Safari) because of a rounding error. If I used +0.5, Some lines just wouldn’t appear! However, if you just subtract 0.5, then everything works as expected.

Download and demo

The whole project is hosted at github as well: gridBuilder.js on Github. gridBuilder.js is 4kb unpacked, uses jQuery and works in real browsers*. It’s dual licensed under the GPL and MIT licenses.

*A real browser here is defined as one that supports both canvas and data-url’s. The latter is being used to set the canvas as a background image for your element.

Code

Since it’s a jQuery plugin, gridBuilder.js works for any jquery element. gridBuilder.js offers 5 customizable settings, a primary and secondary color for gridlines and secondary gridlines (positioned in the middle between two gridlines), a height for the vertical rhythm, a width for the horizontal strokes and a gutter (spacing) for between the strokes.

Entering false for any of the options will disable that particular option, so you can for example just have a vertical rhythm and no horizontal strokes, or disable the secondary gridlines. The default settings are shown below.

$(document).ready(function(){
  $("body").gridBuilder({
    color:          '#eee',    // color of the primary gridlines
    secondaryColor: '#f9f9f9', // color of the secondary gridlines
    vertical:       18,        // height of the vertical rhythm
    horizontal:     140,       // width of horizontal strokes
    gutter:         40,        // width of the gutter between strokes
  });
});

While this is a plugin you’d primarily use while building a website, should you want to remove it via javascript, you can call this function:

$("body").destroyGrid();

Future improvements

I would like to add a floating panel where you can enter all options and have the grid regenerate on the fly, as well as giving you the javascript code to invoke that particular grid. This would make it easier to tweak your grid, since you wouldn’t have to edit your file, save it and then refresh.

It’s hosted on Github, so feel free to fork it and do with it whatever you like :)

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!

gridBuilder.js, background grid generator in canvas

How does it work?

Cufón and Typeface.js both work by converting a regular font file into an internal format. On execution, they display the font using Canvas in modern browsers, and VML in Internet Explorer. The benefits of doing it this way is that you do not need to load the Flash plugin. This makes it faster compared to sIFR, and visible on more computers.

Quick stats

Cufón and Typeface are very similar, here’s a quick list of their properties:

Font Conversion

Both Typeface.js and Cufón have an online font converter:

• Font converter for Cufón
• Font converter for Typeface.js

You upload your font, select which glyph groups (which are sets like uppercase, lowercase, numbers, punctuation etc.) you want to include and it returns a .js file containing your font. Typeface.js only supports TrueType (.ttf) fonts. Cufón also supports OpenType (.otf), Printer Font Binary and postscript. The converter for Typeface.js has a build-in check for the font license, and will refuse to convert any font that doesn’t allow embedding.

On uploading, Typeface.js forwards to a page where you can select your glyphs and download your file. Cufón lets you select the glyphs on the first page, and also give you the option to include a bold and an italic variant in the same file. Besides that, it allows you to restrict usage to certain domains, and set the quality of the font (lower quality is faster performance).

I used both to convert Optimer with uppercase, lowercase, numerals, punctuation and extended latin. Cufón’s file is called Optimer_400.font.js and is 27.3kb while Typeface.js’ file is called optimer_regular.typeface.js and is 68.7kb.

Including Cufón or Typeface.js in your website

Cufón and Typeface.js both work by linking to their javascript file and the font file in your <head>:
Cufón

<head>
  …
  <script src="cufon-yui.js" type="text/javascript"></script>
  <script src="Optimer_400.font.js" type="text/javascript"></script>
  …
</head>

Typeface.js

<head>
  …
  <script src="typeface-0.11.js" type="text/javascript"></script>
  <script src="optimer_regular.typeface.js" type="text/javascript"></script>
  …
</head>

To select which elements to convert, you have to add the following <head> for Cufón:

<script type="text/javascript">
  Cufon.replace('h1');
  //If you also include a library, you can add complex selectors like #content h1
</script>

Typeface.js does things a bit differently, and in my opinion, easier. Typeface.js automatically changes all heading elements that reference Typeface.js fonts (which is the first part of your font file name, in our case optimer, and any element that has the class typeface-js:

<div class="myclass typeface-js">
…
h1,  h2 {
  font-family:optimer;
}

Multiple fonts

Both Typeface.js and Cufón allow you to load in multiple fonts. Typeface.js finds them automatically when you specify them in your CSS, and Cufón allows you to use multiple fonts by specifying the font-family in it’s initial function:

Cufón.replace('h2', { fontFamily: 'Qlassik Medium' }); 

Internet Explorer 7

No party would be complete without someone trying to ruin it for everyone, so here’s internet explorer’s problem: for both Cufón and Typeface.js, the script can have a couple of milliseconds of delay, causing the text to ‘flicker’. To stop it from doing so, place the following code right before the closing </body> body tag:

Cufón:

<script type="text/javascript"> Cufon.now(); </script>

Typeface.js

<script type="text/javascript"> _typeface_js.renderDocument(); </script>

Side by Side

Of course, all this is fun, but it would be nice to see them in action besides each other. No worries, I’ve made a Demo Comparison Page.

On rendering, you can see a number of spacing differences. There are especially noticeable when looking at the spacing in the typographic scale, where Cufón performs much better than Typeface.js

Conclusion

Which one is better? Cufón or Typeface.js? In terms of functionality, the difference is small. Cufón supports more filetypes, Typeface.js supports more CSS properties. Both however, support the stuff you’re most likely to need. Typeface.js is easier to use (just use the right font-family and, if it’s not a header, add a class), Cufón is about 40kb smaller in total and handles spacing better out of the box.

For now, Cufón performs slightly better due to handling spacing better, but I don’t think there is a clear winner. That just means that the race is on: the first one to add selectable text wins!

Next Week

Come back next week for an article on how to combine these techniques with @font-face!

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!

Cufón vs. Typeface.js, which one is better?

How it works

This version is an edit of the original Fancyzoom, available at http://www.fancyzoom.com.

I’m used to writing JavaScript with a library like jQuery or Prototype, but since Fancyzoom was library-free, I decided not to add additional dependencies. Turns out, regular JavaScript makes you type a whole lot more. Here’s what I did:

For next and previous links to work we need to know which images are next and previous, and even if there is a next or previous image. So on initialisation I compose an array of ‘candidate images’. When you then open an image, it checks the position of the current image in the array, and adds or hides the previous/next links accordingly. The first image doesn’t get a previous, the last image doesn’t get a next, everything in between gets both links.

When displaying the links, I add the corresponding image number to the previous and next links (current image number minus one for previous, and plus one for next). When you click either of the links, it finds the image in the array, sets up an onload event, and displays the loading spinner. Once the image is loaded, I remove the spinner and update the previous and next links.

Keystrokes

Now, one of the cool things of Fancyzoom is it’s keystrokes. esc closes the image overlay, ctrl and alt are click-throughs (no overlay, just open the image). Like in OSX you can press shift while clicking to make the zoom effect go really slow. Since I was adding next and previous links, I wanted the arrow keys to work as well.

I started with PPK’s key reference page to see which charcode I had to use. PPK then gave me a smart tip: “Use keydown, not keypress. Saves you a lot of hassle.”. Fancyzoom used keypress, which indeed make things more annoying to do cross-browser. I changed it to keydown, and it worked without having to change any of the other code. In the end it worked so well that for kicks I also added the spacebar as a way to go to the next image.

The above is of course only a cursory view of the changes made, but the fancyzoom.js and fancyzoomhtml.js files themselves are well documented so with minimal JavaScript knowledge you should be able to follow what’s happening. (and if not, don’t hesitate to ask!)

Download

Fancyzoom exists out of two files, and I added a third CSS file to it (which you can just copy/paste into your own css file)

• Fancyzoom.js
• Fancyzoomhtml.js
• Fancyzoom.css

License: this is free for personal use. For all other uses, refer to the full license in the fancyzoom.js file.

You can see it in action on the numerous software pages on Wakoopa, for example the Safari page or the Openoffice page.

Let me know what you think, and if you have improvements 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!

Fancyzoom image gallery functionality

Ubiquity?

Ubiquity is quickly becoming my most used Firefox extension. I love it. If you are familiar with Gnome-do (Linux), Quicksilver (Mac) or Launchy (Windows) then you already know how powerful a keystroke launcher is. Ubiquity is such a keystroke launcher for the internet. For a great overview, read this article by Ryan Carson.

Ubiquity commands are basically Javascript, but Ubiquity provides some handy additional options to make it very easy to use (and also, you get to write Javascript for just one browser, yay!). They have an excellent tutorial available here: Ubiquity Author tutorial.

Binary

A while ago xkcd posted this comic which features a bunch of binary. Unlike some people, I can’t read binary, so I set out to find a binary translator for Ubiquity. Turns out there wasn’t one! So I immediatelly promised to make one that weekend, which I didn’t. Instead I made it a weekend later.

You can also try it out on that page, or out in the wild, for example with Google’s first Twitter message.

Yoda speak

Now, It might not be much of a surprise that I am a huge Star Wars geek. Dutch television recently aired all Star Wars movies, and during The Empire strikes back, Leon ported the Yoda speak translator to Ruby. Realising how awesome it would be to use that in your browser as well, I immediatelly set out to port it to Ubiquity.

I hadn’t had much experience with handling sentences (and cutting them up and placing them back in different orders), so the Yoda translator turned out to be a bit harder to make. Luckily I had help from some friends that reviewed my sometimes silly code and gave corrections.

I also included a handy list of Star Wars quotes to get you going.

Ubiquity = Fun!

Building Ubiquity commands is fun. I didn’t describe how to build them in this article because the aforementioned tutorial is much better than I ever could. If you are familiar with Javascript, it’s pretty easy as well. Writing a Ubiquity command is the perfect bite-size afternoon project.

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!

Yoda and binary in Firefox with Ubiquity

How it works

One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. For a more in-depth explanation of how the technique itself works, please read the original article. It should work in Internet Explorer 5.5 to Internet Explorer 8, since I also added the new Internet Explorer 8 version of filter, -ms-filter.

Demo

Demo. Works only in Internet Explorer. :)

The Plugin

The plugin itself offers two functions: textShadow(); and removeTextShadow();, which do what you expect them to do.

textShadow(); Allows you to optionally overwrite the text-shadow declaration from your CSS to tweak the look of the text-shadow in Internet Explorer, if needed. The available options look like this:

$(elem).textShadow({
	color:   "#000",
	xoffset: "5px",
	yoffset: "5px",
	radius:  "5px",
	opacity: "50"
});

You’ll notice that all the regular options of text-shadow are there but that I’ve also added opacity, which helps tweak the intensity of the text-shadow. It’s translates to Internet Explorer alpha-opacity, so it’s range is 0 to 100. 50 works best in most cases and is also the default.

Limitations

There is really only one major limitation, it just doesn’t look as good as native text-shadow support in the other browsers. It works pretty well for average-sized text-shadows, but it falls apart on smaller or larger sizes. Tweaking it may help, but YMMV.

Another small limitation is that the padding-top and padding-left of the elements that get a shadow need to be in pixels, otherwise it won’t work. I could theoretically write something that takes care of em, %, cm, mm, pt, pc and in, but I’d really rather not.

Download

Here you go: jquery.textshadow.js. Tested with jQuery 1.2+ but will probably work with older versions as well.

Update (26 Feb 2010)

I just released version 1.1, which fixes the problems with IE8. Have fun! In some cases you have to add a z-index to the element that you are adding a shadow to.

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!

Text-shadow in IE with jQuery

Twitter search in sidebar

Click the link to install it using Greasemonkey: twittersearch.user.js

And this is what it looks like:

Greasemonkey

There is one awesome thing about doing stuff with Greasemonkey: it’s easy. You’re just writing regular javascript and some comments that tell Greasemonkey the name and description, which websites to apply to (or not to apply to) and that’s it. The above script took me about an hour, including eating my dinner.

If you need to do heavier stuff and want to make use of library’s, you can do that, too. The only gotcha I really had, had to do with innerHTML (shock!) that acted a bit icky with onfocus functions and parameters in quotes. Solution: remove the quotes.

Onfocus? Not event listeners? Well, no. Greasemonkey script themselves are javascript already, so if it’s in the page, then the user has javascript on. Using an onfocus then is just much easier :)

There are a couple of websites I looked around to find info on Greasemonkey:

• Dive into Greasemonkey
• The Greasemonkey wiki

If there’s an annoyance with a website you use often, and you think you could fix it easily, then Greasemonkey is an excellent way to do that fast and easy. Do you have any tips for Greasemonkey?

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!

Twitter search in sidebar using Greasemonkey