Underscore.js

Underscore provides 45-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so JavaScript 1.6 compliant browsers will use the native implementations of forEach, map, filter, every, some and indexOf.

for more details : http://documentcloud.github.com/underscore/

Des espaces qui s'ajoutent sous les images

On rencontre souvent ce problème, des espaces de petits pixels qui s'ajoute sous les images, et même si on leur définit les dimensions ( height ).
Pour éviter ce genre de comportement qui peut parfois gêner le contenu de votre page :
- un display :bloc pr l'image

#img { display : block }

ou
- un vertical-align : bottom

#img { display : bottom }

Problème de float

Parmi les problèmes qu'on rencontre toujours en flottant les div, c'est que le bloc conteneur ne prend pas en compte les div flottant 'fils'.

juste à préciser , on rencontre ce problème sur les naviguateurs conformes aux standards , ce qui n'est pas le cas sur le Fameux naviguateur IE(celui qui joue toujours le méchant 'naviguateur':D )

Pour voir le problème , on va prendre un petit exemple :
----------------------------------------------------------------------------------

Notre style :

#conteneur{
border:1px solid red;
width:500px;
padding:10px;
margin-bottom:20px;
}

#conteneur .div1{
float:left;
background-color:green;
width:230px;
margin-right:10px;
}

#conteneu .div2{
float:left;
width:230px;
background-color:yellow;
}

NB : le code html n'est pas autorisé , alors vous essayé de créer la page

Alors vous allez remarqué que le conteneur ne prend pas en compte les deux div , et les blocs en dessous monte en haut ..
Alors pour résoudre ce problème , on a plusieurs choix :

La propriété "clear" ( qui va nous sauver de cette problèmatique de float ) permet de gérer le contenu autour des éléments flottants et peut "pousser" un conteneur pour intégrer les éléments en float, et on procèdera comme suit :

Notre style:

#conteneur{
border:1px solid red;
width:500px;
padding:10px;
margin-bottom:20px;
}

.div1{
float:left;
background-color:green;
width:230px;
margin-right:10px;
}
.div2{
float:left;
width:230px;
background-color:yellow;
}

.spacer{
clear:both;
}


Sur la page que vous avez déjà créer : on va ajouter un "div" ou un "br" ou un "hr" et on lui attribuera la classe "spacer" après le "div2".

la class spacer a comme prop : clear :).

Sinon on peut aussi faire appel à overflow, qu'on va mettre au div conteneur , et on procèdera comme suit :

Notre style :

#conteneur{
border:1px solid red;
width:500px;
padding:10px;
margin-bottom:20px;

overflow:hidden;

}

.div1{
float:left;
background-color:green;
width:230px;
margin-right:10px;
}
.div2{
float:left;
width:230px;
background-color:yellow;
}

Juste a noter que sur IE , nécessite parfois à définir la largeur du bloc qui aura la propriété overflow :)

CSS pour l'impression

Paged media (e.g., paper, transparencies, pages that are displayed on computer screens, etc.) differ from continuous media in that the content of the document is split into one or more discrete pages. To handle pages, CSS 2.1 describes how page margins are set on page boxes, and how page breaks are declared.

plus de détails sur : http://www.w3.org/TR/CSS21/page.html

La librairie PHP JpGraph

La librairie PHP JpGraph est une librairie graphique orientée objet de haut niveau et très riche permettant de réaliser dynamiquement des graphiques depuis PHP. Elle est installée, sur le serveur Web ENAC-IT1, conjointement avec la librairie graphique GD (supportant la manipulation d'images JPEG et PNG depuis PHP) ....

Pour plus d'info , visitez le site : http://www.aditus.nu/jpgraph/

Effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu

Le filtre AlphaImageLoader a plusieurs effets secondaires. Le principal est que le texte à l'intérieur d'un élément sur lequel on a appliqué le filtre n'est plus sélectionnable, les liens plus cliquables, etc. Cela se corrige généralement en passant le texte ou les liens en positionnement relatif (mais cela peut être un peu plus subtil et il y a des cas particuliers assez retors)...

http://covertprestige.info/test/47-alphaimageloader-absolute.html

Using Images as Labels in Internet Explorer

What the label does is create an association between its contents and a control on the page. In most browsers, clicking on text or an image within the label will give focus to the area. In the case of a radio button, it will select it and in the case of a checkbox, it'll alternate between the two states (checked and unchecked).

Internet Explorer, however, has a bug where clicking on an image inside a label tag does nothing. (Actually, I should say nothing useful because with radio buttons and checkboxes it looks like it tries to select the control but never does.)

What I've done is put together a quick bit of unobtrusive JavaScript to "fix" the problem. Albeit, only for people with JavaScript turned on.

http://snook.ca/archives/javascript/using_images_as/

Masked Input Plugin(jquery)

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome.

Pour plus d'information

http://digitalbush.com/projects/masked-input-plugin/

Optimiser les PERFORMANCES de votre SITE

Optimiser les PERFORMANCES de votre SITE

7 Principles Of Clean And Optimized CSS Code

Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it’s not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it’s not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling.

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.

http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/

Handling clicks outside a specified area in jQuery

Recently I’ve needed to handle clicks in jQuery which occur anywhere inside a page but outside a specified area. I’ve been working on a drop down list control which contains a list of checkboxes. The list of checkboxes is shown and hidden by clicking the preceding h4 title, mimicing the functionality of an ordinary drop down list. I wanted to extend this functionality to hide the list when the user clicked anywhere outside the containing div. Here’s the markup for my control:

pour plus de détails :
http://rob-bell.net/2009/02/handling-clicks-outside-a-specified-area-in-jquery/

jQuery 1.3

On: IE6, XP

jQuery.com uses pngFix, which uses ("img[@src$=.png]"). The "@" now doesn't work with 1.3 and causes an unhandled exception error on most pages of jQuery.com.

yslow

à tester :
http://developer.yahoo.com/yslow/

PHP optimization tips

1. If a method can be static, declare it static. Speed improvement is by a factor of 4.

2. Avoid magic like __get, __set, __autoload

3. require_once() is expensive

4. Use full paths in includes and requires, less time spent on resolving the OS paths.

5. If you need to find out the time when the script started executing, $_SERVER['REQUEST_TIME'] is preferred to time()

6. See if you can use strncasecmp, strpbrk and stripos instead of regex

7. str_replace is faster than preg_replace, but strtr is faster than str_replace by a factor of 4

8. If the function, such as string replacement function, accepts both arrays and single characters as arguments, and if your argument list is not too long, consider writing a few redundant replacement statements, passing one character at a time, instead of one line of code that accepts arrays as search and replace arguments.

9. Error suppression with @ is very slow.

10. $row['id'] is 7 times faster than $row[id]

11. Error messages are expensive

12. Do not use functions inside of for loop, such as for ($x=0; $x < count($array); $x) The count() function gets called each time.

source : http://www.moskalyuk.com/blog/php-optimization-tips/1272

xajax

xajax is easy! Just include xajax, register a function (or an object or class method)...
then add a call to the function in your HTML or javascript...

QEvent 0.95 - a powerful tiny extensible standalone event library for elements and objects

Plus d'informations :
http://code.google.com/p/qevent/

La démo : http://daniel.steigerwald.cz/qevent/index.html