Archive for category Web Development

Mozilla releases Rust as a replacement to C++

In the wake of all the technologies created by companies in order to resolve some flaws, Mozilla releases a new programming language entitled Rust in order to, one day, replace C++ as their main programming language. From what I’ve read, there aren’t new features in the language, only old concepts. It seems to want to treat memory better in order to prevent memory leaks.

Here’s an article about it:

http://www.extremetech.com/computing/115207-mozilla-releases-rust-0-1-the-language-that-will-eventually-usurp-firefoxs-c

, ,

No Comments

CSS Best Practice: Class Composition

This is not a new topic, but I still see a lot of production code which could have been simplified by CSS class composition. So here’s a little hint about how to do it.

Let’s say you’re building a list in which items can be flagged as new or deleted, or even both at the same time. Here are the requirements for the behavior:

  • The items are displayed in a list, in normal text;
  • The new items are in bold with a yellow background;
  • The deleted items have gray text and are stroked.

Some beginners in CSS would have the reflex to do a class for each possibility. So they would create something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.new {
    background-color: yellow;
    font-weight: bold;
}
 
.deleted {
    color: gray;
    text-decoration:line-through;
}
 
/* This is wrong, read on */
.new-deleted {
    background-color: yellow;
    font-weight: bold;
    color: gray;
    text-decoration:line-through;
}

I must admit, in my first run through with CSS, this was the kind of code I wrote myself. While this seems clear and easy to do, its maintainability is quite bad. What happens if we wish to have starred items in our list, where we want the bullet to be a star instead of a simple circle? Then we’d need to have the following classes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.new {
    background-color: yellow;
    font-weight: bold;
}
 
.deleted {
    color: gray;
    text-decoration:line-through;
}
 
/* This is wrong, read on */
.new-deleted {
    background-color: yellow;
    font-weight: bold;
    color: gray;
    text-decoration:line-through;
}
 
.star {
    list-style-image:url('star.png');
}
 
/* This is wrong, read on */
.new-star {
    background-color: yellow;
    font-weight: bold;
    list-style-image:url('star.png');
}
 
/* This is wrong, read on */
.deleted-star {
    color: gray;
    text-decoration:line-through;
    list-style-image:url('star.png');
}
 
/* This is wrong, read on */
.new-deleted-star {
    background-color: yellow;
    font-weight: bold;
    color: gray;
    text-decoration:line-through;
    list-style-image:url('star.png');
}

See how we doubled our classes for the addition of a single situation? For the mathematicians among you, in the case where you’ll have n situation (new, deleted and star means 3 situation), you’ll end up with 2n – 1 CSS class (7 in our example). Furthermore, it is hard to remember in which order the keywords are used in the class, is it deleted-star-new? star-deleted-new? new-star-deleted? and so on…

Class Composition

This is where class composition kicks in. You can provide more than one class to a HTML element. Here’s the CSS we’ll use:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* content of style.css */
.new {
    background-color: yellow;
    font-weight: bold;
}
 
.deleted {
    color: gray;
    text-decoration:line-through;
}
 
.star {
    list-style-image:url('star.png');
}

And here’s the HTML to which it will be applied:

1
2
3
4
5
6
7
8
9
10
<ul>
    <li>My standard item</li>
    <li class="new">My new item</li>
    <li class="star">My starred item</li>
    <li class="deleted">My deleted item</li>
    <li class="new deleted">My new and deleted item</li>
    <li class="star deleted">My starred and deleted item</li>
    <li class="star new">My starred and new item</li>
    <li class="star new deleted">My starred, new and deleted item</li>
</ul>

This simplifies a lot our CSS, and lets us forget about the order of the classes to apply.

Targeting a special element with multiple classes

There’s one notion which is important to know when using class item. Sometimes, you want to apply many classes which are in conflict together, or you want to target a specified combination of classes.

Let’s say that we wanted starred and deleted items to have red text, here’s the CSS how to do it:

1
2
3
.star.deleted {
    color: red;
}

When combining the CSS classes that way, you target only the items which have the star AND deleted classes applied.

Here’s a clearer example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* This targets all the items with the star class */
.star {
    list-style-image:url('star.png');
}
 
/* This targets all the items with the deleted class */
.deleted {
    color: gray;
    text-decoration:line-through;
}
 
/* 
   This applies to all the items which have BOTH the star and deleted class.
   And since the selector is more precised, this text color will be used instead of the deleted class.
*/
.star.deleted {
    color: red;
}
 
/* This is only a reminder, this will apply to all deleted items which are child of a star element */
.star .deleted {
    color: blue;
}

No Comments

Equivalent of a Thread.sleep in javascript

Lately, a colleague of mine asked me if it was possible to wait for an event in javascript. He had to work with a third party program, and he had to intercept something in order to properly display information. But there were no events or anything on which to hook.

The solution we came with was to do some kind of loop, which waits until something becomes available, and expires if a timeout is met.

I used the setTimeout method of javascript, within a recursive method and a count in order to watch for a timeout.

Here’s the code I came up with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var MAX_TRIES = 10;
var NEXT_TRY_TIMER = 500;
 
function tryUntilSuccess( tryCount ) {
    if( !tryCount ) {
        tryCount = 0;
    } else if( tryCount == MAX_TRIES ) {
        alert( "TIMEOUT" );
        return;
    }
 
    alert( "Try: " + tryCount );
    try {
        // This is only to show what happens if an exception is thrown.
        throw "What I'm waiting for didn't happen, so I throw an exception.";
    } catch( e ) {
        setTimeout( function() {
            tryUntilSuccess( ++tryCount );
        }, NEXT_TRY_TIMER);
    }
}
tryUntilSuccess();

Alerts are there only to illustrate the behavior of the code, and should be removed, and the exception should be thrown in the situation where you don’t have what you need.

,

No Comments

Force Internet Explorer to use Compatibility View

For those of you looking for a quick answer, put this with the other meta tags in the <head> of your document:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

The Reason

In previous versions of Internet Explorer, CSS standards weren’t respected as much as we would like it too. So, as a Microsoft Web Developer, we tend to favor Internet Explorer, since most client buying Microsoft solutions have their systems run a specific version of Internet Explorer. That’s why a lot of web sites and web applications were made for Internet Explorer 7. But as time goes by, later versions of Internet Explorer respected standards even more, to a point where web pages made for Internet Explorer 7 and earlier seem broken on Internet Explorer 8 and above. So this is a quick fix which tells Internet Explorer 8 and later to emulate the rendering engine of Internet Explorer 7. Though I agree this is a QUICK fix, it shouldn’t stay long in production code.

Best Practice

The best practice would be to revamp your web site to meet the new standards, and if you need to keep some specific code for IE7 and below, there are special comments which allows Internet Explorer to include code only for some versions. I don’t recommend to stay only with the meta tag for the following reasons:

  1. Because Microsoft, believe it or not, seems to go towards the standards of the web;
  2. Your website will seem broken in all other browsers, which, according to these stats as of October 2011, is 78.3% of the world.

No Comments