Mootools has 3 native methods for accessing an attribute/property for a node (which in the DOM, often overlaps). .get(’name’), .retrieve(’name’), and getProperty(’name’). While they are all meant to do things a little differently (eg. set an attribute for a node, store a data object in an existing object (which could be a DOM node) or store a property in an object (which again, could be a DOM node), they seem to overlap a lot.

So I have this anchor, and when I tried accessing it (grabbing the href) using the accessors I have, here at the results for FF (mac) vs. IE6 (windows):

.[name]
FF: full path including host
IE6: full path including host

.get
FF: request path (excluding host)
IE6: full path including host

.retrieve
FF: null
IE6: null

.getProperty
FF: request path (excluding host)
IE6: full path including host

Now it’s hard to say what is the correct expectation. I’m sure I could figure it out in the eyes of the W3C, but rather, here’s what I’ve noticed. Both browsers take whatever path is specified and render it internally with the host. I understand this since it’s what the browser would need to actually make a full request.

The 2nd and 4th accessors, though, are inconsistent and cause problems since their expected results different. IE6 includes the full path & host each time which is most likely an issue with how it accesses it. When the browser defines the href in memory it must overwrite the local pointer which then can’t be accessed properly.

So what do I do about this? Nothing really. I have this documented now so that if there is a pre-dom-ready source that I need to inspect (for example, href values written but no rendered after the dom has been loaded), I should be using the .[name] accessor, and make adjustments accordingly based on what is being accessed (in this case the href which has the host prepended).

These differences really suck since they introduce inconsistencies in places where you wouldn’t expect them and thus break applications/scripts (like what drove me to discover this). I would hope a framework/library would help mitigate this kind of thing, but alas, they can’t do everything, and I’m just happy for what they do bring to the table.

Then I ran into IE6, whereby I got a nice “This command is not supported.”. It took me a while to figure this out. At first I thought the node didn’t have mootools ’set’ method for some reason (didn’t access it right?), but once I found out the reason, I looked for workarounds. None really. Other resolutions that attempted completely different code, but no workaround for IE6 specific to change the type. It seemed microsoft had decided that an input field’s type should not be able to change after it’d been loaded. I’ll get to that in a second

My Resolution
Spit out password fields on the page for when it gets sent back to the client. When the DOM has loaded, iterate over the input[type=password] fields (I did this via the mootools selector node.getElements(’input[type=password’)), make them hidden (via add a class or adjusting it’s style property), and make a new node that has an input type with the text value. I added the same classes to it as the password node had. When a user focused on the field (the text one that was originally a password field), I destroyed it, and removed the hidden class.

What really bothered me
“This is an expected behavior. One can’t change the type of an INPUT element once it is already created and became part of the DOM. The behavior is documented below in the Remarsk Section:”
That was microsoft’s response in their developer forums. That was last year, and instead of addressing it as an issue and complying with a standard, they were stubborn and basically refuted the claim as a bug. I’m not sure how I feel about the standard. I understand why an input type is set after the DOM has been loaded. I can’t change a tag type from div to span after the fact (or at least I shouldn’t be able to). Ideally, in my own head that is, every input type should have a separate tag value. <button />, <select />, <file />, <text />, <textarea /> and <password />. I think that’d be ideal, and save a lot of confusion.

Either way, that’s my resolution. M$ response is kind of sucky, but what can ya do.

What I mean by this is, be very very very good in a very very very specific field/discipline. Be the best out of all the people you know. If you’re a server side developer, don’t try and learn all the server side languages; rather be the best object-oriented php5 developer who knows the ins and outs of PECL and PEAR extensions. Or be the best db admin who can optimize an InnoDB mysql engine better than anyone you’ve met. That way, when anyone is looking for something specific, you’ll be the first person to come to mind.

I’m too obsessive to follow this though. I would hate being really good at one thing, and then just having to depend on someone else to help me out with the other. Because of that, I’m not very very very good in one area, rather I’m pretty good in a bunch of them. But this is actually still making me fall into a very specific niche; namely, if someone is looking for one guy who can configure a linux/apache box, set up and admin a db, set up a server side dev env., do designs in photoshop, turn them into html/css/js, and add in ajax/js techniques to make a more interactive application/website, I’m that guy. If I were to work in a company with other developers, I probably wouldn’t be better than anyone in any specific area. I wouldn’t be the best JS guy, or CSS guy, or DB guy, and because of that I’m probably not suited for a lot of companies, but for my current contract, they needed one guy who can wear 5 or 6 different hats.

So ironically, the fact that I don’t specialize in one specific area, rather 5 or 6 of them, makes me specialized. It makes me the specific person to go to when you need one person who is pretty good in a bunch of areas.

If you read the title, you might wonder what this has to do with it; it’s a segway into my point. On my current project, I’m having to do both client and server side dev., and it’s making me realize something. The server is way more flexible than the client.

—
Here’s why.
—

The server is usually a linux/unix box. It’s role in a web application/site is to fulfill client side requests, push out data, yadda yadda. It normally doesn’t do anything visual. The client, however, is intrinsically visual. It’s supposed to represent a server architecture in a cohesive, logical way. Now when doing client side dev., you have to normally worry about ie6, ie7, ie8, ff3, sf, opera and chrome (not always this, but thats the goal). At times you’ll run into things you can’t do in the others (CSS3, certain types of ajax callbacks, etc.); sometimes they’ll be things that aren’t worth the time, but other times, it just can’t be done. There is no hack or way around it, it just can’t be done. It’s frustrating to say the least, but it’s making me really value and respect the entire web paradigm and the server’s role in it all.

—
How does this relate to my introduction?
—

I find that there is a lot of ego involved in the web industry. A lot of butting heads in terms of how important people/disciplines are in the grand schemes of things. There are the executives/bus.dev. guys, marketing dudes/gals, client side developers, server side developers, operations/db dudes, and creative/design people. That’s generally how I break it down, and with some exceptions, everyone thinks their role is one of the most important ones. They’ll pretend and put on a face that they don’t believe it, but at their core, there is a lot of pretense about their own positions. I suppose that’s normal considering that’s their professional role.

I’ve always maintained (and have a post that should be coming soon) that one of the most important roles, which I’m terrible at and in no way consider myself part of, is in fact the creative/design ones. I’ll leave my reasoning here for another post. My understanding of the flexibility of client vs server side therefore comes from the fact that I don’t specialize in any one area. If I were a operations/db guy, I’d think the db was the most flexible. If I was a pure server side guy, I’d think it was the most flexible, and the same for the client side.

The point I tried to make with my introduction and the conclusion of the server side being the most flexible is that because of my lack of specialization (and therefore abstract specialization) in the full life cycle of a web application, I think I’m in a unique situation to make that judgment. It’s not right or infallible or anything, but I come at it from a unique perspective. My career/financial stability doesn’t hinge on any one area of the cycle. I could find a job doing client side, or server side, or db/operations, maybe even some mild graphic/creative design stuff. Even as far as more on the management and marketing stance, I think I’d be alright. And because of this, I think I’m in a convenient location to sit back, analyze where any bottle necks are in flexibility, and make a call on what makes the most sense and is most accommodating.

And my conclusion? The server side is way more flexible. There is never a point/time when I can’t do something. It might take more time than I’d hope, require more resources (memory, developers, etc.), but at no point do I have to create ‘hacks’. It’s logical and follows procedures and standards. I think this is mainly because it’s been around longer. The server side env. is really just a programming environment. It’s been around, and perfected, since the 50’s. The web client-side has been around, for the most part, for less than 15 years.

That being said, the client side is getting better. With Flash, Adobe Air, Google Gears, and some really cool plugins (Rhino, for one) the client side is trying real hard, and milding succeeding, in become less of a bottle neck for an application. I think with time it will succeed, but as it stands right now, the server side is where it’s at. Fewer headaches, and more logic, make it one of the most time-satisfying parts of the projects I’m doing lately.

A consistent theme I’m finding in the past few months has been css3/html5 posts. They talk about new effects, rules, possibilities, etc. etc. Now I try to be optimistic about web development; I try to practice valid w3c content, semantic markup, everywhere I can. But the age of css3/html5, at least for me, is still so far off. 25% (at the least) of internet users are still using ie6, another 40% are using ie7; that takes us to about 65% of internet users using subpar browsers (ie7 is a step up, but still very much sub-par) that don’t support anything close to css3 and html5.

These browsers are so terrible that I spend about 80% of my client side development time focused on fixing issues I run into there. I write code that is semantic, valid, and based on standards, and then debug it and add in browser-specific fixes for them. Now the reason for bringing up my (and obviously most client side developer’s) hatred for it is because of this sudden (last 4-6 months) pushed towards css3, but even more, html5. Put simply, we’re jumping the gun.

We’re not anywhere near the period of time whereby these standards can be used properly for the vast majority of users. Yes, graceful degradation and progressive enhancement do allow us to make use of them for those vendors that have supplied standards-based browsers, but the time being, maybe only 25-35% of users will get to experience these enhancements. So why put so much effort into transforming your sites and communities to use these standards? Is it worth it?

HTML5 is, believe-it-or-not, a pretty large step forward. While it’s simply an extension of html 4 and more than anything, introduces some different namespaces and tags, I keep coming back to thinking whether we should bother with it right now. It won’t be until IE9 or an IE8 service pack/update that the majority of users will get any use out of it, and for large companies and communities, it represents hundreds/thousands of hours of work, changing your design/style guides, and means often times having multiple code/script bases for different browsers that represent which support html5, and which don’t.

Now I’m coming at this from a freelance/contract developer. I have a task, and it’s in my best interest to make it work in the top 3 browsers (ie6, ie7, ff3) as fast as possible, and as cleanly (the fewer moving parts, the better). I might use some css3, I might use some transparent png’s, but that’s my limit. Going over board with css3 and integrating html5 is not a priority of mine, and would represent extra hours which I couldn’t work into my pricing/rates. I would rather spend my time writing semantic, standards based code, and open sourcing anything and everything I could to help out others; at least until one of the top two browsers supports html5 (ff isn’t there yet, despite many claims that it’s the number 2 browser next to ie7).

This approach by me has it’s problems. Namely, if people don’t push technologies that aren’t yet wide spread, than the major vendors won’t feel as pressured to support them. I understand this, and in many ways, it’s up to the big guys to help push new technologies. But this brings me back to the post’s title. Are we jumping the gun? We’re years away from a top two browser from supporting either css3/html5. So should we spend all this effort, time and money developing for something that most user’s won’t even experience?

There are exceptions to this; if I’m designing an app/site for an intranet where I can control the browser type. Or if it’s for a specific niche (eg. graphic designers, web developers) where I can safely assume or pressure the visitor to use a new-age browser (safari, chrome, ff3). Then maybe I’ll take the time to learn the new semantics, make the site pop like it never could. I’ll spend the extra time, effort and money to create a richer experience. But these are exceptions, not the rules.

These are thoughts/ramblings that have been going through my head for quite some time now. They aren’t polished, they aren’t definite, but they are something that I’ve thought of, and I assume other’s in the community have as well.

While these are my thoughts, and I’ll stick by them for a while, I won’t stop trying to learn about the new technologies. Progressive enhancement, ajax, json, jsonp, and whatever else comes along, I’ll jump into, just like css3/html5, but just like ajax didn’t become popular until XHR became widespread in most browsers, I won’t make use of it (with certain exceptions) until major vendors (m$) decide to give me the tools to do so.

But they are not frameworks. I know this probably just seems like a semantics issue, but I want to make it clear that they are not frameworks, they are libraries. From http://dictionary.reference.com/browse/framework

frame⋅work  [freym-wurk] Show IPA
–noun
1. a skeletal structure designed to support or enclose something.
2. a frame or structure composed of parts fitted and joined together.
3. the construction or sale of frames.
4. work done in, on, or with a frame.

A framework should be referenced only when your development is surrounded or incased by some structure. On the php side of things, this makes sense; an MVC based framework since every piece of code you write it part of the execution of the framework. On the client side though, it’s not so clear cut.

While you can work inside of a client side library as if you were in a framework (eg. creating new, framework-specific, classes), most of the code you write is simply using the library to help it out. As an example, you attach event handlers, create and manage JSON, make ajax calls, etc. All of this you can do natively, or you can have the library help you out. But when you use one of the library’s helpers, you’re not tied to it. You’re still writing native javascript, just short-cutting through the library’s helper methods and naming conventions.

I’m not sure why this deserved a post, such a long post at that. I suppose as I learn more about true frameworks, I’m realizing that semantics like this really do matter. When I write in CI or Cake, I have to fall in line with their file, naming and folder conventions. I need to work inside of a controller, which is triggered by the framework. I need to define the interface in view/template/layout files, which are loaded and compiled by the framework. And I need to access the data set through their ORM, which is managed by the framework.

JavaScript isn’t like that.
Now while the specific cases I’m talking about (YUI,dojo,jQuery,Moo) are in my eyes libraries, that’s not to say that there couldn’t be/aren’t client side frameworks. I imagine javascript/ajax driven applications (large ones like gmail or a few Ycombinator/startup’s) have client side frameworks.

They have these systems in place where you have to work inside of them; the work is delineated among an MVC pattern, or some sort of separation of logic. I think that’d be really cool to check out, but because of the nature of javascript, I don’t think it’s as necessary as it is on the server side. Maybe I’m just saying that because I haven’t really been exposed to one, but client side JS is more modular and sparse than server side development, and for that reason having a library to help you tap into short cuts makes tons of sense.

My last point though, is that while I’ll always consider these javascript extensions libraries, I can definitely understand how some people would call them frameworks due to the way they use them. If you constantly are creating new framework-specific classes that follow standard programming practices (eg. hierarchy, casting, separation of logic), I think it’d be fair to see you’re using the library AS a framework. I’m cool with that. Lets just be clear about how the extension is used by the general public.

I wasn’t sure if this was note worthy of a post, but I reckon I’ll fill this up with enough keywords that it’ll hopefully show up in the SERP’s for mootools event trigger target source, etc.

We shall see.

Then what I did, was go around to all the different frameworks. I don’t even think JQuery existed in it’s current incarnation at that point (December of 2005), and I looked around at as many as I could (dojo, mootools, and a few others that have since become relics). This post though, isn’t about the greatness of these frameworks; rather it’s about the terrible abuse.

With any new technology, there will be people who embrace it for ease of use and creating a new standard, and then there will be those who completely abuse it. The screen shot below is a perfect example of that (click it for the full size):

If you can’t see what I have a problem with, then you need to leave this post right now. For everyone else, this is an absolute joke. This is for a travel promotion site called StudentCity. My count of javascript assets: 20 (excluding any dynamically load ajax/jsonp requests). My count of css assets: 11.

These tallies were retrieved via after the DOM had been rendered, so they may not match up perfectly with the source, but I assure you they’re accurate.

If you visit this site, you’re not going to notice too much. A few swfs, a bit of animation, and a few non-css related hover effects. In no way, should this account for the number of requests for just js/css assets. It doesn’t make sense, and is terrible programming/development. I understand that in many projects, control is sometimes non-existent. You need to conform to someone elses demands, some other developers tendencies, or some other designers inexperience. But for the firm who developed this site, if anyone had taken a look at the source after it had been finished, a huge red flag should have gone up.

Concatenating files is easy; minimizing requests is easy, and a faster client side render time will actually make you money, for a relatively low cost (maybe 2 hours). This speaks to what frameworks are doing these days.

JS frameworks, and even php/server side ones like CakePHP and CodeIgniter (ones I’m working with now) are leading to a generation of websites and applications that were developed by people who have very little idea what they’re doing. I don’t think it’s much different than the age of Frontpage/Dreamweaver/GoLive developed sites, but it’s certainly not something that you should be paying for it you’re working with a development firm. It’s annoying as a developer to see this, and probably a do-or-die thing if I were to be working with or hiring another developer to work with me.

In short, it’s a set of suggestions rather than rules, that should be kept in mind when designing a user interface or experience. I’m tending to lean away from the word interface, as an interface is only good if it’s experience is effective. Gmail’s experience is what affects me, it’s interface is just what I look at rather than what I use.

What’s even more impressive about this list is it was first developed in 1994. I don’t mean to sound condescending in terms of advice coming from 15 years ago, but it’s shocking to me to find interfaces such as Google’s, Twitter’s, and Basecamp’s so incredibly in line with every single heuristic recommended.

My personal favorites:

1. Visibility of system status
   The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
2. User control and freedom
   Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
3. Aesthetic and minimalist design
   Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.