LAB.js - a nifty little javascript loader

LAB.js (Loading And Blocking JavaScript) allows you load in parallel your js scripts , speeding up the process ( sometimes a lot). But also it can force that scripts are loaded in a certain order, so this way no dependencies are broken.

The developer declares a 2x speed improvement on his site.

On an ondevelopment project , with 9 js scripts and 282k without labjs the page loaded in 8 seconds and with labjs in 2.5. So we have a >3x improvement.

Mootools - browser sniffing

I know, I know, browser sniffing is a bad habit and it should not be used, but still, there are cases when you will want to display a message to the user (ordinary users, that don’t hack their’s browser navigator.userAgent), or you really need to know what browser is.

For example Chrome. Is ok, is webkit, but is not webkit… transparent png, with opacity set lower then 1 will look just awful in  Chrome.

So I wrote a simple function, “stealing” some code from PPK.

Include the script in your pages, and it will give you 2 more variables in Browser.Engine:

Browser.Engine.browserName

Browser.Engine.browserVersion

Unobtrusive PHP ?

Strange? 

What do you say, if we use this term for a form validation, server side? I say “Unobrusive PHP” because is what I know, but it can be any other language.

Let me explain:

We already do this in javascript. We attach a class to a field we want to validate, then, when the user try to submit, we try to validate the input by a rule associated to the class. All is fine, only that we need to make this server-side too, we cannot trust the users, don’t we.

So what if to the input name, we attach a specific segment, that will be validated once it reach the server, removes the attachment, and pass further the data like never happened?

something like:

<input type=”text” name=”email” />

for js validation would be 

<input type=”text” name=”email” class=”email”/>

for php would be

<input type=”text” name=”email___email” />

and the validation class would take the $_POST array, search for a value  that contains ___email, validates it, then simple remove the segment for further processing.

$_POST["emai"] = $_POST["email___email"];

This idea is the preamble of a next post regarding a more  universal validator for forms.
Is only a concept. Let me now your thoughts.

Textmate - check your JavaScript syntax

Following the previous post, we will see today how to check the syntax for JS.

In this case we will need a bundle wrote some time ago by Andrew Dupont here. (read the article , scroll down and download the bundle). 

Install the bundle.

In this moment you are almost good to go, as the bundle is set to run just as the previous PHP check syntax, when you save the file.

I say almost good to go, because there is an warning you get from ruby,  ”Insecure world writable dir”.
So open the Bundle Editor, find Javascript tools, click on the Quick Lint command and add a -W0 ( is a zero here ) after the ruby word, like this:

ruby -W0 “$TM_BUNDLE_SUPPORT/bin/quick_lint.rb”

Close the Bundle Editor.

This is how it looks in action:

That’s it.

Kroppr - v1.2 update

We updated our online cropping script Kroppr, to version v1.2

This version fixes some problems for certain servers configuration:

 - servers that do not allow to write the cropped image into the cache folder, due to a server configuration setting,

 - servers with magic_quotes_gpc set to On.

Kroppr - image cropping widget for your site

Kroppr is an unobtrusive script that enhance any site that wants to offer an image cropping tool for his visitors.

Unlike other scripts, Kroppr is able to ROTATE, zoom and move the image in the real time without using plugins - flash or java. The actual picture crop is done after the user is satisfied with his settings. In this way, the load put on the server is minimised and also the visitor’s experience.

The installation  is also very simple , being enough to add a script tag in the header’s page, and a class to the image that makes the cropping subject. More info on the Kroppr page.

How to create a product viewer using mooZoom

There are cases when we need to show a zoomed image of a product ( or something else ), that require to be as much as user friendly as possible. One of the cases are e-commerce sites that use high quality images for high impact over the client’s mind (jewelery for example).

In this case zooming a particular point ( but arbitrary chosen by visitor/client ) would be very useful, but without forcing it to leave the page, or hide some page controls - maybe buy button - like a “lightbox” script would do.

So we created mooZoom.

mooZoom is unobtrusive and allows a visitor to zoom an image in a very friendly way - just scroll the mouse in a desired point.

The image will zoom in/zoom out, depending on the direction of the wheel.  In a zoomed stage a simple drag will reveal the hidden part of the image.

The setup is ultra easy - you just need to add " class='moozoom' " to the zoomable images and give at least one dimension - width or height.

something like this:

<img class=”moozoom” src=”flower.jpg” alt=”mooZoom” style=”width:200px;”>

and mooZoom will take care of the rest. You will  also need mootools v1.11. (a script for v1.2 will be available as soon as possible)

We setup here a small demo, making a nice frame for a virtual product presentation.

There is always room for improvements  so if you have any suggestion  or found a bug  don’t hesitate to comment here.

Create window-like element with mootools

We continue our serie related to mootools with a tutorial that shows us how to build a window-like element on our page, that can be resized and moved. Based on previous tutorials, we will will create first the html and apply some js code to it, to obtain what we want. This tutorial is a simple one, so will cover only the basics to help a beginner to understand easier. A future tutorial will show, based on this, ho to create a class for windows.

So, for the beginning we need to set the html.We need next elements:

the ‘window‘ div = the window itslef;

the ‘topbar‘ - the window’s topbar, that will be used to move the window and to hold the title;

the ‘resizer‘ - the element that will resize the window.

All will look something like his:

Ok, we’ll give some ids to elements, “win” for window, “topbar” for topbar, “resizer” for resizer - pretty straight :).

the html code will be something like this:

<div id="win">

    <div id="topbar">window title</div>

    <div id="resizer"></div>

 content

</div>

We won’t cover here the CSS part,please look at the demo for basic style.

Then on event domready, we set “win” to be draggable, with handle set to “topbar”, set to be resizable, with handle “resizer”, and put some limits on resize, using “limit” property. This way we avoid some bad behaviour , like minimize too much the window.

document.addEvent( 'domready' , function() {

	$('win').makeDraggable({'handle':$('topbar')});
	$('win').makeResizable({

		'handle':$('resizer') ,

		'limit':{'x':[220,400], 'y':[120,400]}

		});

} );

Well, that is all. Pretty easy and nice, no?

Here is the demo.

This is done with MooTools V1.11. A later tutorial will explain how to do this with V1.2.

Let me know your thoughts or questions.

Singles Singles

Mootools 1.2 stable is out!

It seems that MooTools team just released the stable 1.2 version of popular framework mootools. Great job, and a big step forward.My only concern is what is going to happen with 1.11, as the website for the moment is working in a reduced form, docs, download being available only, but as they said “At least you can download, right?” :) Again, congratulations!    

A beginner’s mootools - create draggable and resizable elements

The today tutorial will try to explain how to make an element draggable or resizable - or even both in the same time, using the MooTools framework. To accomplish this we’ll make use of two functions existent in mootools: makeDraggable() and makeResizable().

This is very simple.We simply select the element we want to be resizable or draggable and use one of those functions:

$(’id_of_the_element’).makeDraggable();

or

$(’id_of_the_element’).makeResizable();

A good idea would be to set in css of the elements “position:relative” as, those functions assume that elements are positioned absolute, and may break your layout. But this depends on the layout you have.

Doing so, a drag of the element will drag it or resize it.

There are some parameters we can use for this functions.

One of this is ‘handle‘. Handle passed to the function will tell what other element is used to manage the drag or the resize of the main element.so something like :

$(’id_of_the_element’).makeResizable({handle:$(’id_of_handler’)});

will have the effect we obtain in demo page, for the orange div.

What do you have to pay attention on is that handle is an selected element so we need to use $(’id_of_handler’).

In the next tutorial we will try to use all the knowledge we learned until now - select and create elements, add events and make draggable or resizable, to create a window-like element than can be resized or moved around our page.