PUBLIC MARKS from camel with tags javascript & code

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website

Les frameworks CSS ont été mentionnés la première fois dans la conférence Working in the Now (visualiser la présentation). Au final, on n’était pas loin de faire salle comble avec plus d’une vingtaine de participants à vue de nez. Une petite scéance de rattrapage s’impose ;-) Pourquoi avoir choisi ce sujet ? J’ai lu un article sur l’importance du rythme vertical l’an dernier sur Biologeek et ça m’a sensibilisé au fait qu’on pouvait rendre la lecture d’un site tout simplement en rendant prédictible la position du texte. Entre temps j’ai également lu l’excellent Transcender CSS d’Andy Clarke. J’y ai été sublimé par des présentations de sites totalement en grille. Depuis je suis devenu fan de Blueprint CSS (je crois que ça s’est remarqué lors de mon intervention ;-)). J’ai commencé à l’utiliser sur des projets personnels puis dans un cadre professionnel. J’utilisais déjà symfony comme framework PHP et jQuery comme framework JavaScript alors pourquoi pas Blueprint ? Comme le suggérait très justement Christian Heilmann dans sa présentation, l’utilisation d’outils déjà existants est nécessaire pour réduire les coûts de production. C’était déjà un bon alibi mais je les apprécie aussi parce qu’on gagne un temps fou ! On se concentre sur le code métier, pas le reste.

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular JavaScript open source libraries.

TYPOlight est un système de gestion de contenu web créé en 2004 par Leo Feyer, et soutenu aujourd’hui par une équipe d’une vingtaine de développeurs. L’objectif était dès le départ de proposer un CMS : * 100% accessible qu’il s’agisse de l’interface d’administration fondée sur AJAX mais fonctionnant aussi sans javascript (suffisamment rare pour être noté) ou du code généré côté utilisateur (tous deux conformes WAI) ; * moderne avec dès le départ une base de code en PHP5 orienté objet, un système de mise à jour automatique (payant, dégressif pour plusieurs domaines), un outil d’installation des extensions simple et sûr et un code généré valide XHTML strict ; * flexible du point de vue de la personnalisation des modèles de page (en s’appuyant sur un solide framework CSS) ou nativement du point de vue des types de contenus (pas de contrainte de structure de type titre - sous-titre - contenu).

ID Selector: Quick Guide It's all about getting users signed into your website as quickly and efficiently as possible. It achieves this by providing a simple, consistent, provider neutral interface, and by educating the user about OpenID during the sign in process. In short, it makes OpenID easier for the end user and benefits both the relying parties and OpenID providers. What is the Selector? It's a widget that you add to the existing OpenID login form on your website. You embed a snippet of javascript code into your page, and it writes in an HTML button tag styled to match your CSS.

This emulates a feature in danga's perlbal. the ability to join multiple files together in a single request. This is a performance optimization. instead of requesting 5 seperate CSS or javascript files from your server, you can do it one request.

The Jiffy Firefox Extension is written Bill Scott of Netflix. It adds an additional panel to Firebug that provides a visual view of the Javascript time measurements captured by Jiffy-Web. The extension is available under Creative Commons license. Jiffy-Web is a fine-grained and flexible website performance tracking and analysis suite written by Scott Ruthfield and the team at Whitepages.com. The library provides a simple way to insert and capture time measurements in your Javascript code and save them to a backend service for later analysis.

Speeqe is a web based, group chat client that works with the XMPP/MUC protocol. It is chat made simple. The goal is to give the user the best and easiest experience in creating chat rooms. It is a combination of javascript and python code using a collection of open source software and software tools. This collection is nginx or apache for a frontend. The frontend serves the webclient which is javascript using Strophe and JQuery. It also proxies to Punjab for the BOSH connection to connect to XMPP based servers. To tie it all together there is a small amount of django. Features ¶ HTML/javascript client Themable (all UI is in one html file) Inline images. Inline youtube videos. Kick,ban,unban support. Room configuration. DNS named rooms (ie http://speeqers.speeqe.com will go to the room speeqers@…) Ability to connect to federated XMPP servers and chat rooms.

Google Website Optimizer est un service proposé par Google pour comparer différentes versions de votre site et ainsi choisir les meilleurs options compte tenu des expériences utilisateurs de vos visiteurs. L’installation est a priori simple, il suffit de paramétrer une expérience et puis d’installer un petit code javascript pour tracker les informations. Et puis de tester des variations de design, de logo, d’image, de navigation, bref tout ce que vous voulez tester…

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.

There are 4 relatively easy ways by which you can speed up the time it takes a browser to download a page: * Make fewer HTTP requests * Add a far-future expires header * Gzip your page's components * Minify your JavaScript, CSS and HTML Following on from my post on joining CSS and JavaScript files, I have written a PHP script which will automatically do all of the above.

IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

Pour répondre à la demande d'un collègue graphiste, j'ai developpé un equivalent au script mootools suivant (source PhatFusion) mais basé sur la librairie jQuery. le résultat me semblant réussi (bien qu'il soit surement possible d'optimiser le code de nombreuse manière) je vous le propose. Voir la démonstration Je tiens à signaler que ce script n'est pas obstrusif et que la désactivation du javascript et ou du css ne gène en rien la consultation et l'utilisation du menu

Le script LightBox permet de faire un effet de zoom dans une galerie photo J’ai eu l’occasion de jeter un oeil dans le code pour le personnaliser, voici donc quelques trucs qui sont facilement modifiables et qui n’ont pas à ma connaissance “d’effets secondaires”.

SwfIR n'est pas une marque de produits nettoyant révolutionnaire mais une methode pour appliquer des styles originaux à vos images en passant par un JavaScript et un peu de Flash. Vous connaissiez sIFR, découvrez SwfIR… SwfIR est un script non intrusif, c'est-à-dire qu'outre le fait que vous devez linker un fichier JavaScript à votre page, vous n'avez pas besoin de modifier le code XHTML de votre page. Ce script permet à vos images d'appliquer des styles inexistants en CSS2 : ombres portées, bordures arrondies, coins arrondis, rotation. Le principe est que SwfIR va remplacer les images que vous aurez spécifiées par un Flash qui intégrera ces images pour leur appliquer ces styles.

Bamboo helps you to create standards-based, cross-browser page layouts more easily by providing a new layout language that is more natural than CSS for defining layouts. Bamboo interprets your layout defined in the Bamboo layout language and translates it to standards-based CSS and JavaScript code that implements that layout.

Ce tutoriel vous montre, au travers de bonnes pratiques, comment obtenir un code Javascript non intrusif, évolutif, accessible, facilitant la maintenance et minimisant les risques d'interaction. Ce document regroupe diverses notions de base et d'autres plus avancées telles que les tests de fonctions, les variables globales, la séparation de la structure, de la présentation, du comportement voire des données, le modèle objet, les littéraux, une introduction à JSON ou encore la gestion des événements.

Une petite astuce que j'ai découverte récemment et testée pour trouver la meilleure utilisation. Le but est donc de ne plus avoir de gestion d'événements (onload, onlick...) dans le code xHTML mais que tout soit géré dans le javascript. On va d'abord définir une fonction quelconque en javascript que l'on va essayer d'appeler avec l'événement interne, puis en externe :

Pour détecter ces fuites de mémoire, David Baron (développeur Mozilla) a développé une petite extension firefox avertissant des blocs de mémoire perdus lorsque l'on quitte une page web. Bien pratique.