Aleksandar • Vacić

iOS bits and pieces

Javascript's hidden gems

I know I did not write for over a week now. I’m damn busy. Again, it’s Tim Connor’s fault. He left this fantastic link in the comments and after I read it, I was hooked so much that I’m overburning.

Mr. Crockford opened up a whole new level of Javascript programming for me. Before it, I was finally having a grip on how Javascript should be used in standards oriented pages. There, JS is not required to complete an action, but if you do enable it, you will complete it a lot quicker. The secret can simply be called..

Class abuse

As my latest WCH shows, I use one particular class to make the script working in IE5.0. I add WCHhider to any element that should be hidden when WCH is applied. That class is not in any CSS file, it is simply there as a marker.

This is a mild case of abuse.

Worse one is where I deliberately place classes on certain elements, just to be able to find them afterwards, when page is loaded. Using Mike Foster’s excellent X library you can do wonders. Here, I’m interested in xGetElementsByClassName, which returns an array of elements that have passed class name. Since all modern browsers support multiple class names, this is a sure-hit strategy.

What can you actually do with this? Well, let’s say that you have an unknown number of links on the page that all opens up the same link, but in the new window (see here, Horse form and Live commentary). There are various ways to open it up, but I wanted an accessible, yet usable stuff. Accessible means that even people with JS off can see this, and those with JS on will see it in new window.

To achieve that, I placed a regular A element, with href equal to link which should open in new window, and one dummy class.

<a href="link-to-open" class="TTwnd">....</a>

Now, on window.onload, you need to find all the links with this class and process all of them like this:

window.onload = function() {
  var aTmp = xGetElementsByClassName("TTwnd", document, "a");
  for (var i=0;i<aTmp.length;i++) {
    aTmp[i].onclick = function() {
      sHref = this.href;
      window.open(sHref...);
      return false;
    };
  }
}:

Very neat and very useful.

Private members and inheritance

So, just when I (more of less) finished recoding all my scripts to that, inheritance comes. I have developed several large JS applications, but I always disliked the fact that each function could call any other. Even though it is fastest to code, it also creates a whole a lot of mess, with no clear structure.

I was always trying to somehow divide my scripts into namespaces (for the lack of better word). That is why you see ADXM, WCH and other prefixes. Douglas Crockford showed that Javascript can have private properties and methods as well as some sort of protected and public ones (not identical to Java or C# with same name).

So, now I’m recoding all of it again, using the parasitic inheritance to gradually build my objects. I have recoded WCH and ADxMenu to use this, only I don’t have time to post them. I’m damn busy recoding commercial work into this so I can use all the benefits of it. That work features 5 large Javascript modules, all calling each other here and there.

Now, instead of doing..

if (typeof(BS_BodyHide) != "undefined" && ...) ...

…I can use much cleaner form..

if (BS && ...) ....

This is the simplest example - possibilities are endless. And I just love it when I see something like this now:

LU.Market.Start();
LU.Sel.Start();

WCH3. Works in IE5.0+

I have to stop giving definitive sentences. I just decided recently that I’m gonna develop two version of WCH2, and than Tim Connor spoils it all and hands the idea of short and sweet way of covering IE5.01, without too much code. Oh well. :)

So, now I have 3rd generation of WCH, which covers IE5.0 and later. Also, I took the opportunity to rewrite the script the same way as ADxMenu. WCH is now an object, and you simply call its methods.

Take a look at this extensive example, where WCH successfully works with:

  • drop-downs

  • Flash movies

  • Quicktime vide``` objective-c

As a side note…did you notice the W3C Schools are recommending non-standard way of including Flash or other media objects? Shameful. :(

How to use it

You need to include the WCH.js in your page, and then simply call the methods. I have renamed the functions to be less confusing.

WCH.Apply(Layer, Container);
WCH.Discard(Layer, Container);

So, when you are showing your layer, just call Apply method. When you are removing your layer, simply call Discard method.

News is that both parameters can either be an id or a reference. WCH will internally fetch the reference if id is passed.

Monkey business

Start with a cage containing five monkeys. Inside the cage, hang a banana on a string and place a set of stairs under it. Before long, a monkey will go to the stairs and start to climb towards the banana. As soon as he touches the stairs, spray all of the other monkeys with very cold high-pressure water. After a while, another monkey makes an attempt with the same result-all the other monkeys are sprayed with cold water. Pretty soon, when another monkey tries to climb the stairs, the other monkeys will try to prevent it.

Now, put away the cold water. Remove one monkey from the cage and replace it with a new one. The new monkey sees the banana and wants to climb the stairs. To his surprise and horror, all of the other monkeys attack him. After another attempt and attack, he knows that if he tries to climb the stairs, he will be assaulted. Next, remove another of the original five monkeys and replace it with a new one. The newcomer goes to the stairs and is attacked. The previous newcomer takes part in the punishment with enthusiasm!

Likewise, replace a third original monkey with a new one, then a fourth, then the fifth. Every time the newest monkey takes to the stairs, he is attacked. None of the monkeys that are beating him have any idea why they were not permitted to climb the stairs or why they are participating in the beating of the newest monkey. After replacing all the original monkeys, none of the remaining monkeys have ever been sprayed with cold water. Nevertheless, no monkey ever again approaches the stairs to try for the banana. Why not?

Because as far as they know that’s the way it’s always been done around here. And that, my friends, is how company policy begins.

Found all over the Internet.

Thanks Ivan, this made my day.

Of Standards and People

I noticed a trend recently, that is beginning to draw more and more attention. People are wondering is the web design maybe going in the wrong direction or is the emphasis maybe on the wrong subject.

Common ground is that we, the web community, are talking too much about the technical side of the craft, neglecting the center point of web design - is it good for visitors? How to improve the usability of the sites?

I emphasized neglecting, because I think that there is no room for concern. Usability and accessibility will always be primary points for any responsible developer. The fact that we mostly talk about CSS based designs is because they are still not easy to implement. I can create any layout using tables in under 5 minutes, but I can’t say the same thing for CSS based layouts. They are en-vogue, and they should be, until that moment when majority of new sites appearing on the web are based on them. They are more flexible and more efficient.

CSS based layouts and good XHTML marking are the products of books, tutorial, articles…namely, how-tos. We need more and more of those, we need ready-made solutions for any web design task. We had them for tables, Javascript menus and rollovers, browser detection and similar stuff. Now we need the same thing for CSS layouts, background-image replacement, CSS hierarchical menus and many more.

Web design is not going in the wrong direction. Actually, after many years of wandering, the good road is found, at last.

U&A; are the products of experience and user-involved testing. This is not something you go to school and learn. No matter how much books you read or panels attend, until you do few hands-on works, you know nothing. Until you actually use PDA to surf you web site you don’t know how easy or hard it is. You will never know how easy is to use the site until you ask people.

Here is one great example of that, real-world story.

My company developed a unified betting platform for fixed-odds betting: from call centre to web and betting shops. We were guided by some of the best bookies in the UK, people that know how their business operates. I was involved in web part of the job. For some of the things they asked us to do there, we thought they are plain wrong, because they forced us to create a loose structure, which was hard to control once you start to expand things.

What was event in one sport, was class in another, and was market in the third. And almost all of them was supposed to be displayed in the same manner. As developers, we would much preferred that event is an event, market is a market, and you have a set of rules how things gets displayed.

This way, we built something that have a life of its own. You could setup something in CMS, but you can’t expect that it will always be displayed that way, because the actual display depends not only on CMS setup but also on additional parameters being transparently set by user, while he surfs the site.

Here is the best part: now, when we are giving demos to potential clients, there are situations where something happens that presenter did not expect and he gets puzzled. But not the audience. The bookies grasp the logic behind it much quicker then some of us do (except, of course, several people that built the framework), because they work with it every day.

That is real usability. You can think you have done it best, but you can’t be sure until the people actually starts using it. There are no set of rules that will achieve usability on their own. Experience and user testing.

Same thing goes for accessibility, in somewhat lesser degree. I never had the opportunity to see a blind man surfing the web, or to see through the eyes of the colour-challenged (although I think there are tools that can simulate this). Once I do, then I will know accessibility a whole level better. But I doubt this is something I can read about and implement.

So keep bringing them on. Layouts, lists, menus, validations…We still need a lot of stones to pave the good road.