Geek Programming that is Too Cool
Mar. 3rd, 2004 07:13 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
elfsUnder the heading of "why didn't I think of that?" comes this lesson in how to program DTHML called unobtrusive DHTML. The concept behind it is brilliant.
Cascading Style Sheets (CSS) decorate an object in HTML (a list, an anchor, a division of the page) with visual effects such as background colors, text colors, borders, font descriptions, and the rest. This is done with either an object ID or an object class. The way you identify a class is through a modifier inside an HTML tag, what we usually call an attribute. As of IE6 and Moz 1.0, you can now say "find me all of the tags with attribute X that has value Y".
Javascript allows you to "decorate" an HTML object with behaviors-- on mouse over, do this. On click, do that. Usually, the way this happens is that write the complicated function at the top of the HTML page, and then for each object you want to exhibit this behavior, you attach the behavior by adding an attribute such as onmouseout="dothatthing();". Doing this over and over and over is a serious pain in the neck.
Unobtrusive HTML takes care of that. It takes the Javascript "Find me all tags with attribute X that has value Y", and the concept of CSS classes, and allows you to decorate a CSS class with Javascript behaviors. The idea is simple. When the page loads, you say, "Find me all the tags of class 'foo' and attach this onmouseout behavior to them." It's so elegant because it means that spelling mistakes, HTML bulkiness, and Javascript ugliness is eliminated from your code.
And the creator takes in one step further-- by sandwiching your CSS between some initialization javascript and the body of the javascript, you can attach the behaviors to the CSS declaration itself. Along with "font-family" and "border", you can add "onclick" and "onhover" as if they were CSS declarations. That seems to be a bit experimental, but damn... it is way too cool.
Makes my life easier, at any rate.
Combine this with the fact that Mozilla 2.0 will have a backend interpreter with a python (instead of javascript) plug-in, and my luck will be complete, my career assured for a while to come.
Cascading Style Sheets (CSS) decorate an object in HTML (a list, an anchor, a division of the page) with visual effects such as background colors, text colors, borders, font descriptions, and the rest. This is done with either an object ID or an object class. The way you identify a class is through a modifier inside an HTML tag, what we usually call an attribute. As of IE6 and Moz 1.0, you can now say "find me all of the tags with attribute X that has value Y".
Javascript allows you to "decorate" an HTML object with behaviors-- on mouse over, do this. On click, do that. Usually, the way this happens is that write the complicated function at the top of the HTML page, and then for each object you want to exhibit this behavior, you attach the behavior by adding an attribute such as onmouseout="dothatthing();". Doing this over and over and over is a serious pain in the neck.
Unobtrusive HTML takes care of that. It takes the Javascript "Find me all tags with attribute X that has value Y", and the concept of CSS classes, and allows you to decorate a CSS class with Javascript behaviors. The idea is simple. When the page loads, you say, "Find me all the tags of class 'foo' and attach this onmouseout behavior to them." It's so elegant because it means that spelling mistakes, HTML bulkiness, and Javascript ugliness is eliminated from your code.
And the creator takes in one step further-- by sandwiching your CSS between some initialization javascript and the body of the javascript, you can attach the behaviors to the CSS declaration itself. Along with "font-family" and "border", you can add "onclick" and "onhover" as if they were CSS declarations. That seems to be a bit experimental, but damn... it is way too cool.
Makes my life easier, at any rate.
Combine this with the fact that Mozilla 2.0 will have a backend interpreter with a python (instead of javascript) plug-in, and my luck will be complete, my career assured for a while to come.
Thanks for the props!
Date: 2004-07-08 04:04 pm (UTC)And I'd like to see the Mozilla Python work, too...:)