Ever since the web was born, it’s been constantly changing. It started off as a text based medium for academics. Now it’s a global media powerhouse, creating entire industries. Yet the foundation of the web hasn’t changed. HTML isn’t even a correct description now, as most of the data is media.

Over the past few years there’s been a shift in the information schemas of the web. The Data Object notation is becoming de facto; AJAX, config files and data storage are all adopting it. For example the newer nginx uses a JSON like config files, vs Apache’s older XML files. Some bloggers have even claimed XML is dead.

Applying this paradigm to webpages is the next logical step; HTML is still using an ugly dialect of SGML. Hyper Text Data Objects or (or HTDO) are better in many ways:

• it’s more readable
• can be built by objects. OOP guys will love this: build up the DOM server side using objects (though you can still spit HTDO out as a string). Imagine adding a class to your input tag object, and they all change!
• reflects the DOM better. Inline tags could be a simple string:string relationship, while block level elements could be arrays of other objects. There are a few exceptions, for example it’s handy having anchors as block level elements.

Here’s a mockup of what it could look like:

{
        "title":"webpage",
        "meta":"charset:UTF-8",
        "stylesheet":"styles/style.css",
        "content":
        {
                "h1":"welcome to my webpage",
                "p":"this is my content",
                "a": {
                        "href":"/page2.htdo",
                        "title":"click me",
                        "link":"the next page"
                }
        }
}

Because the DOM can be built both server & client side, it would make for an interesting use of the _target anchor tag attribute. Imagine if you sent #selectorID as a tag, it sent with a header, and the server responded with only the HTML you needed? It would keep your URL intact but feel just as snappy as an AJAX request.

I’d love to see a DOM parser built as an extension in Firefox or Chrome for this experimental format. It might even fit in with Google’s “build a faster web” campaign.

There are a few disadvantages, for example <em>emphasis or bold</em> tags are more cumbersome. Also putting ID & classes on inline elements is a hairy problem if they’re strings only. Either you could wrap it in an id, have a CSS selector “string#IDname”:”string”, or have inline elements as arrays. For purity, I’d rather just warp the inline element.

Tags: concept, HTDO, HTML, meta

In Internet Explorer you get black rings around your 24 bit PNG files while fading in or out. It usually happens when using fadeIn() or fadeOut(). This is caused by IE only being able to apply transparency to one alpha filter at a time to an element. It effects IE 6, 7 and 8.

The first step: fade out the container, not the elements you want to fade.

This solution works for PNG files set by CSS.

The next is to apply this jQuery magic to the elements inside the container:

if($.browser.msie && $.browser.version< 9) {

$('ul#HomeFaderControls li').css('filter', 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#01FFFFFF,endColorstr=#01FFFFFF)');

}

It works by making an invisible gradient behind the element that will apply a color to it. Other solutions call for multiple non standard CSS hacks. You’ll have to change ‘ul#HomeFaderControls li’ to the elements you want to fade out.

Smart coders will pick up there’s one bit of alpha channel in there. IE 7 sees the color is transparent and doesn’t apply the filter, so we force it by applying one bit of color. Most monitors won’t be able to display that while it’s transitioning.

Tags: HTML, IE, js

1. don’t put JavaScript in the header. Yahoo! recommends putting <script> on the bottom. This makes pages display faster, so your JavaScript can load after your page
2. don’t use onClick(). You shouldn’t use any JavaScript events in the HTML. It messes up the description when people hover, makes HTML hard to read and makes reusing code harder. Create the events in the .js file
3. don’t use too many images. You can combine images by using CSS sprites. Even on fast connections, each image request takes time. Speed things up by using CSS sprites

By avoiding these things and sticking to best practices, you too make make sites that don’t suck!

Tags: CSS, HTML, javascript

If you want to get the index # a child is in, using jQuery, you can use this:

$('ul li a').click(function (e){
 var index = $('ul li a').index(this);
 console.log("Your index is ", index);
}

Tags: HTML, javascript

The coolest animated CSS login form I’ve ever seen – http://kaylarose.github.com/Glowform/. And it’s made in CSS!

It looks like something made in flash, very professional. It degrades too, though it doesn’t work in ffx4.

Tags: CSS, HTML