Author Archive

Getting the href value with jQuery in IE

I ran into a ‘bug’ in jQuery that only occurs in IE and under specific circumstances. Actually, it’s not really a bug in jQuery… it’s more a funky “feature” of our beloved* browser: Internet Explorer. (* yeah right, muaha :P )

In jQuery you can easily get the href attribute value off of a link by doing $("mylink").attr("href"); but sometimes in IE this isn’t reliable. For example: normally, if the href value is “#myAnchor”, jQuery will return —surprise, surprise— the string: “#myAnchor”. But in some cases with IE, you’ll get the full URL path of the page you’re currently on, with the anchor string value appended to it (for example: “http://labs.thesedays.com/#myAnchor”).

This bug is specifically annoying when you use the href value in a selector in jQuery. For example, you should never do the following, because it may result in unexpected results when browsing in IE: $("a[href='#myAnchor']").click(...);

Workaround? Instead of using the href attribute, you could use the rel or xref attributes of a link, but these attributes aren’t supposed to be used for this purpose and if you disable javascript, the anchors won’t work anymore.

The  jQuery devs should fix this issue ASAP, because I think that issues like these are the main reason why people use javascript libraries like jQuery: they make hacky javascript work!

For me, this proves once again that Internet Explorer totally fails at DOM management.

These Days for Life, the silent killer site

We didn’t only do an internal auction for Music For Life, we also made a little website where we need your help… to kill a mosquito! Check it out and raise money!

mfl_silent_killer

These Days for Life, the auction

In less than a week we raised €5.247,46 with a talent auction for Music For Life! Check out the other side of the These Days staff: who did what and for how much. Follow @thesedaysBE for updates on footage from each challenge.

Expected highlights: a bucket off water on Myriam, Nuria’s Mexican serenada, Babs’ bellydancing class, Michiels slap-in-the-face-wake-up-call and many more… check it out here.

mfl_auction

jQuery basics

Yesterday I gave a presentation for students of KDG on the basics of jQuery. I didn’t quite know how technical I could go in my presentation so I kept it very basic. The presentation was —hopefully— a good trigger for them to get started with learning jQuery.

jQuery is an awesome tool in these modern times. Point is, javascript has been around since 1995 and although loads of things have happened… not much has changed since then. Using javascript these days is basically the same as 10 years ago. What has changed is the way we use javascript. It’s because of javascript libraries like prototype js that we can all use javascript to the maximum of its abilities without too much hassle.

I started off my presentation with an explanation of the DOM, since I think this is key to understanding how Javascript works. Javascript works with the DOM, not the HTML. And just like javascript works with the DOM, it works with CSS. By just playing around with the DOM and CSS you can do really cool effects. Some examples where I used jQuery to the max are Nokia Comes With Music Launch and the “flappy thingie” on Sistr.it.

Disclaimer: My presentation is more an introduction to jQuery for the students of KDG. There are loads more things that I could talk about like, for example, chaining. If you want to learn more about jQuery I suggest you check out this nice presentation or buy a good jQuery book ;)

An introduction to regular expressions

Wikipedia describes Regular Expressions like this: “In computing, regular expressions provide a concise and flexible means for identifying strings of text of interest, such as particular characters, words, or patterns of characters.”. That’s almost as clear as a fresh glass of one of the finest Belgian beers :) In this post I’ll try my best to get you familiarized with the basics of Regular Expressions.

What?

Regular Expressions (regex or regexp) are a very powerful “tool” that’s available is most common programming languages (PHP, Actionscript, Javascript, C#, …) but can be quite complex to grasp. Simply put: It’s a unified way of finding or replacing complex parts of a string. Well, it can be much more complex than that, but I guess this is the most common reason why we use regex.

How?

Some smart bloke just decided to use patterns to define Regular Expressions. These patterns are predefined and you just got to learn them by heart (yeah, of course… there are tools available, more on that later). Some pattern examples:

\d searches for a digit
[a-z] searches for a single character in the range from a to z
(a|b) searches for the string “a” OR the “b”
a{2,4} searches for at least 2 “a” characters next to each other and maximum 4 (for example: “a” and “aaaaa” won’t match, but “aa”, “aaa” and “aaaa” would)

E-mail validation

Although the examples above are quite clear, the whole concept of Regular Expressions might still seem a little vague to you. So to fully explain regex I think it’s better to give you a real life example of probably the most common use of regex: e-mail validation. Emails addresses always have a similar structure: <part.one>@<part.two>.<tld> (I deliberately used a point in the first two parts because it can contain a point, but it might as well can contain a dash or an underscore). This could be a good example of a regex for e-mail validation:

([a-zA-Z0-9_\.\-])+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+

If you’re new to regex you might find the code above pretty unreadable, but I think it’s probably the most readable version of a regex for e-mail validation. :) This one is not:

/^\S+@\S+\.\S+$/

Now you know that there always are multiple solutions to get the same effect, but don’t let that scare you off, let’s go trough the first example step by step:

  1. ([a-zA-Z0-9])+ will match any character in the range from a to z and A to Z (case sensitive) and 0 to 9. Because of the + after the brackets it will fetch multiple chars (unlimited number).
  2. ([a-zA-Z0-9_\.\-])+ to allow an underscore, point and dash, you just add these characters (notice the backslash, this is used because a point and dash have a predefined regex meaning too).
  3. @ this is the actual @ character from the e-mail address :)
  4. (([a-zA-Z0-9\-])+\.)+ same here, the a to z, A to Z and 0 to 9 allow all chars in that range plus the dash and at the end a point. Notice the plus at the end, with this the previous group can be matched multiple times.
  5. ([a-zA-Z0-9]{2,4})+ the last bit, same story a to z, A to Z and 0 to 9 but in stead of unlimited chars it’s limited by 2, 3 or 4. That’s done with the curly brackets.

Now you know how it’s done, but it’s going to take a while to get used to and even longer to write them yourself. When you are making Regular Expressions, you often look at the result and are almost amazed that you wrote them yourself, because they look so complex when they are done.

The idea of regex is simple, but you have to write them one step at the time. That’s the same when you are learning regex: one step at the time. First you’ll be reading them, understanding them, making some modifications of your own, until you end up writing them yourself. It’s very important that you know exactly what everything does, for example the curly braces (to limit the previous found element) or the dash (used to find a range of chars). To learn the pattern syntax, check out this page or Google for regex examples.

Tools

There are numerous tools available to make Regular expressions. One of the best is this RegExr app by gskinner. He made an Adobe AIR desktop app out of it too.

Real life examples (Actionscript, Javascript and PHP)

As I said before, there are always multiple solutions for making a regex. Below some real-life examples on how to use e-mail validating Regular Expressions in AS3, JS and PHP:

AS3

private function validMail(mail:String):Boolean {
    var emailExpression:RegExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/i;
    return emailExpression.test(mail);
}

Javascript version:

function isEmail(v) {
    return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(v);
}

PHP version:

function isEmail($email) {
    $regex = '/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+/';
    preg_match($regex, $email, $isEmail);
    return (bool) !empty($isEmail);
}