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]

YouTube Goes More Mobile

Web Design No Comments »

YouTube has launched a new mobile oriented site that brings video to more handsets, as well a mobile app.

m.youtube.com offers mobile optimized content to 3G or WiFi enabled handsets that support RTSP streaming. The mobile page supports logins and channel subscriptions, and is available in country specific form as well.

YouTube has also released a beta version of the YouTube for Mobile downloadable application. The app supports the Sony Ericsson k800, w880 and the Nokia e65, n95, n73, 6110 navigator and 6120 classic, providing the same YouTube browsing functionality currently available on the iPhone.

To obtain the app, users on compatible phones should visit m.youtube.com, where they’ll be asked if they want to install it.

More details on the YouTube blog here.


[via TechCrunch]

Internet People (classic)

MISC No Comments »

Funny video showing almost all of the famous Internet People over the last 8-10 years. Enjoy!

The ultimate password strength meter

Javascript, Ajax No Comments »

I made some improvements on the password strength meters available on the web. Using prototype/scriptaculous, I stole some code from ZeBadger (thanks!) and created a new meter which dynamically changes while typing your password.

Preview

Click here to see the demo

If you want to use this script, feel free to download the source and use it on your website.

Enjoy.

[via Ajaxorized]

Realtime email validation with scriptaculous

Javascript, Ajax No Comments »

When adding this tiny javascript to the onkeyup event of your inputbox, the border will turn green when the email address. It uses scriptaculous' morph function to perform this transformation. See a demo
(more…)

[via Ajaxorized]

Another creative way to prevent bots from stealing your email addresses

Javascript No Comments »

The following code (using prototype) prevents bots stealing the emailaddresses used on your website. Instead of including the emailaddress directly, use a div with a classname where the email-address needs to be placed:

Hi Bot! My email address is  !! Catch me if you can!

Then, use javascript to replace the email address after the page is loaded:

$$('.email_here').each( function(e) {  e.update('willem'+'@'+'ajaxorized.com').observe('click', function() { window.location = 'mailto:willem'+'@'+'ajaxorized.com'; }).setStyle({cursor:'pointer'});	});

Mind the concatenation that is used to prevent stealing from your javascript file. Include this piece of code in your body onload event and no bots will ever steal your email addresses again!

[via Ajaxorized]

Elliot Jay Stocks - Destroy the Web 2.0 Look

web2.0, Web Design No Comments »

Interesting Slideshow

35 hochwertige Freefonts

fonts No Comments »

A nice resource for some free fonts

[via del.icio.us/popular]

Entries RSS Comments RSS Login