Sub pixel fun with browsers

Web Design No Comments »

John Resig has been tinkering with the sub pixel problems in CSS and how browsers deal with bit of pixels:

Something that jumped at me, recently, was a rendering dilemma that browsers have to encounter, and gracefully handle, on a day-by-day basis with little, to no, standardization.

Take the following page for example. You have 4 floated divs, each with a width of 25%, contained within a parent div of width 50px. Here’s the question: How wide are each of the divs?

The problem lies in the fact that each div should be, approximately, 12.5px wide and since technology isn’t at a level where we can start rendering at the sub-pixel level we tend to have to round off the number. The problem then becomes: Which way do you round the number? Up, down, or a mixture of the two? I think the results will surprise you, as they did me.

Subpixel

When I went to the example in FF3b2 on Mac, it actually looked more like IE.

[via Ajaxian]

Roxer: Simple web page creation and editing

Web Design No Comments »

Jeremiah Grossman is known for his amazing Web security talks. Now though, along with Lex Arquette, he has come out with a Dojo powered project (using 1.0.2) Roxer which aims to be the easiest way to make a web page:

Targeted mostly for novices, where with Roxer anyone can build just about any Web page they want using a Web browser (no plug-ins) and without a single line of code. Think Visio, MS Word, or OmniGraffle, but extremely simple and completely on Web-based.

There are a lot of cool features in Roxer, including cross-tab copy/paste, which were extremely difficult to implement. It’s only due to a background in JavaScript hacking were we successful. Other Web 2.0 / Ajax’ish stuff like Drag & Drop, Rich Text Editing, and Edit-in-Place were zip zap after that.

 

Video thumbnail. Click to play
Click To Play

 

[via Ajaxian]

MooTools 1.2 Beta 2 Released, Adds New Element Storage

Javascript No Comments »

The MooTools team has been quietly hacking away at their next major release of the MooTools library. A couple of days ago, project leader Valerio announced Beta 2 of MooTools v1.2 for public consumption:

Its been almost 2 months since the first 1.2 beta. Bugs were fixed, features were improved, and here it comes: the second beta. The first big feature we've been working on for 1.2 is Documentation.

1.2 Documentation is in fact almost 5 times more detailed than it was in version 1. Every class option has now its description, every method has a complete list of arguments along with description, type, and now every functionality comes with a code example — sometimes more than one. If you want to see it for yourself, here is the temporary link for the 1.2 beta documentation.

Along with enhanced documentation, this release also introduces the new Element Accessors feature which makes working with elements more concise. Valerio offered a nice example which basically negates the need for chaining:

PLAIN TEXT
LANGUAGE:
    $(element).set({
    href: 'http://mad4milk.net',
    text: 'mad4milk website',
    morph: {duration: 200, transition: 'quad:out'},
    events: {
    click: function(){
    document.location.href = this.href;
    return false;
    }
    }
    });

Tom Occhino followed up with another blog posting about the new Element Storage class which is meant to provide a better method of storing data for DOM elements. The concept came about mainly due to issues with how IE handles the storage of additional attributes within Elements especially with respect to memory leaks.

Element.Storage is brand new in MooTools 1.2. It is basically an external Hash that stores all the custom properties and events for every element you interact with. Let's take another look at our previous example, this time using the new Element.Storage API:

LANGUAGE:
    var element = $('myElement');
    element.store('effectInstance', new Fx.Tween(element, 'color'));
    element.store('customProperty', 'someProperty');

     

    element.retrieve('effectInstance'); //the Fx.Tween instance
    element.retrieve('customProperty'); //'someProperty'

Note that events and actions are no longer attached directly to the Elements. Everything is stored in the external Hash, and managed by MooTools, so as a developer, you have nothing to worry about. Finally, an elegant and coherent API for attaching custom properties, functions, and objects to Elements.

Tom's blog posting goes into greater detail about the implementation and the applicable scenarios.

[via Ajaxian]

Entries RSS Comments RSS Log in