• Moment.js — Bibliothèque Javascript pour parser, manipuler et formater les dates.
• Timeago — Plugin jQuery qui rend la gestion des timestamps plus humain ( ex. : « Il y a 4 minutes » ou « Il y a presque 1 jour »).
• Datejs — Bibliothèque Javascript open-source, intuitive et rapide. Datejs a passé tous les tests et est prêt à se battre.

Via @n1k0 @antoineguiral

Moobile est composé des éléments suivants :

• MooTools, en version minifiée ou non,
• Moobile, en version minifiée ou non,
• Simulateur Moobile,
• Feuilles de styles CSS,
• Documentation,
• Scripts,
• YUI Compressor.

Les micro-frameworks sont le couteau suisse des bibliothèques Javascript. Pour souvent moins de 5 K, ils nous sortent le grand jeu dans leur domaine uniquement, mais il le font bien, sans excès.

Pour trouver le mini-framework dont vous avez besoin, il suffit de sélectionner une des 30 thématiques.

Vous avez besoin de  :

1. Framework multi-fonctions,
2. Utilitaires DOM,
3. Templating,
4. Animations CSS,
5. Animations Javascript,
6. Moteur de sélecteur CSS,
7. Manipulation de données,
8. Gestion des classes Javascript,
9. Programmation fonctionnelle,
10. Chargeur de script,
11. JSON,
12. Ajax,
13. Faire des tests,
14. Créer des jeux,
15. Graphiques 2D/Canvas,
16. Conversion de couleur,
17. Faire des recherches et trier des listes,
18. Faire une application en une seule page,
19. Stockage persistant de données,
20. MVC côté client,
21. Détection de fonctionnalités et/ou de navigateurs,
22. Gestion des événements,
23. Bibliothèques Webkit,
24. Bibliothèques mobiles,
25. Webdesign «responsive»,
26. Polyfills,
27. Google Analytics,
28. Typographie (césures),
29. Développement asynchrone,
30. Créer votre framework Javascript,
31. Créer votre liste de micro-framework ?

→ Envie d’ajouter votre framework Javascript «petit mais costaud» dans cette liste ? Proposez votre projet sur GitHub !

Graphics Programming

• GPU Gems
• GPU Gems 2 - ch 8,14,18,29,30 as pdf
• GPU Gems 3
• Graphics Programming Black Book
• ShaderX series
• DirectX manual (draft)
• Learning Modern 3D Graphics Programming (draft)

Language Agnostic

• Object-Oriented Reengineering Patterns
• Foundations of Programming
• Computer Musings (lectures by Donald Knuth)
• The Cathedral and the Bazaar
• Patterns and Practices: Application Architecture Guide 2.0
• Security Engineering
• Digital Signal Processing For Engineers and Scientists
• Getting Real
• Domain Driven Design Quickly
• OO Design
• Best Kept Secrets of Peer Code Review
• NASA Software Measurement Handbook
• NASA Manager Handbook for Software Development (PDF)
• Introduction to Functional Programming (class lectures and slides)
• How to Design Programs
• Guide to the Software Engineering Body of Knowledge
• Online Course Materials
• Algorithms (draft)
• Data Structures and Algorithms
• Essential Skills for Agile Development
• Programming Languages: Application and Interpretation
• Learn to Program
• Patterns of Software: Tales from the Software Community (PDF)
• How to write Unmaintainable Code
• The Art of Unix Programming
• The Definitive Guide to Building Code Quality
• How to Think Like a Computer Scientist
• Planning Algorithms
• Mathematical Logic – an Introduction (PDF)
• An Introduction to the Theory of Computation
• Developers Developers Developers Developers (broken download link?)
• Linkers and loaders
• Let’s Build a Compiler
• Producing Open Source Software
• How to Write Parallel Programs
• Don’t Just Roll the Dice
• 97 Things Every Programmer Should Know
• How Computers Work
• Introduction to Information Retrieval
• Is Parallel Programming Hard, And, If So, What Can You Do About It?
• Matters Computational
• Type Theory and Functional Programming
• Getting started with Open source development (PDF)
• Database Fundamentals (PDF)
• Clever Algorithms
• Summary of the GoF Design Patterns
• Flow based Programming
• Algorithms and Data-Structures (PDF)
• Compiler Construction (PDF)
• Project Oberon (PDF)
• The Little Book of Semaphores
• Essential Skills for Agile Development
• I Am a Bug
• Mining of Massive Datasets
• Data-Intensive Text Processing with MapReduce (PDF)
• Understanding IP Addressing: Everything you ever wanted to know(PDF)
• Operating Systems and Middleware (PDF and LaTeX)
• Think Stats: Probability and Statistics for Programmers (PDF, code written in Python)
• The Architecture of Open Source Applications

ASP.NET MVC

• NerdDinner Walkthrough

Assembly Language

• ProgrammingGroundUp (PDF)
• Paul Carter’s Tutorial on x86 Assembly
• Software optimization resources by Agner Fog

Bash

• Advanced Bash-Scripting Guide
• Lhunath’s Bash Guide

C / C++

• The new C standard – an annotated reference
• Matters Computational: Ideas, Algorithms, Source Code, by Jorg Arndt
• The C book
• Thinking in C++, Second Edition
• C++ Annotations
• Software optimization resources by Agner Fog
• Introduction to Design Patterns in C++ with Qt 4 (PDF)
• Object Oriented Programming in C (PDF)
• Beej’s Guide to Network Programming
• Learn C the hard way
• Also see: The Definitive C++ Book Guide and List

C#

• C# School (covers C# 1.0 and 2.0)
• Threading in C#
• C# Yellow Book (intro to programming)
• C# Programming – Wikibook
• C# Essentials
• Data Structures and Algorithms with Object-Oriented Design Patterns in C#
• Illustrated C# 2008 (.zip, dead link)

Clojure

• Clojure Programming

ColdFusion

• CFML In 100 Minutes

DB2

• Getting started with IBM Data Studio for DB2 (PDF)
• Getting started with IBM DB2 development (PDF)
• Getting started with DB2 Express-C (PDF)

Delphi / Pascal

• Essential Pascal Version 1 and 2
• The Tomes of Delphi

Django

• Djangobook.com

Erlang

• Learn You Some Erlang For Great Good

Flex

• Getting started with Adobe Flex (PDF)

F#

• The F# Survival Guide
• F Sharp Programming in Wikibooks
• Real World Functional Programming (MSDN Chapters)

Forth

• Starting Forth
• Thinking Forth

Git

• Pro Git
• The Git Community Book
• Git From The Bottom Up (PDF)

Grails

• Getting Start with Grails

Haskell

• Learn You a Haskell
• Real World Haskell

HTML / CSS

• Dive Into HTML5
• HTML Dog Tutorials

Java

• Sun’s Java Tutorials
• Thinking in Java
• How to Think Like a Computer Scientist
• Java Thin-Client Programming
• OSGi in Practice (PDF)
• Java 6 Tutorial (PDF)

JavaScript

• Eloquent JavaScript
• Crockford’s JavaScript
• jQuery Fundamentals (starts with JavaScript basics)
• Mozilla Developer Network’s JavaScript Guide
• Essential Javascript & jQuery Design Patterns for Beginners

JavaScript (Node.js specific)

• Up and Running with Node
• The Node Beginner Book
• Mastering Node.js

Latex

• The Not So Short Introduction to LATEX (perfect for beginners)

Linux

• Advanced Linux Programming

Lisp

• COMMON LISP: An Interactive Approach
• A Short Course in Common Lisp
• Structure And Interpretation of Computer Programs
• A Gentle Introduction to Symbolic Computation (PDF)
• Practical Common Lisp
• On Lisp
• ANSI Common Lisp
• Common Lisp the Language, 2nd Edition
• Successful Lisp
• Let Over Lambda – 50 Years of Lisp
• Natural Language Processing in Lisp

Lua

• Programming In Lua (for v5 but still largely relevant)
• Lua Programming Gems (not entirely free, but has a lot of free chapters and accompanying code)

Maven

• Better Builds with Maven
• Maven by Example
• Maven: The Complete Reference
• Repository Management with Nexus
• Developing with Eclipse and Maven

Mercurial

• Mercurial: The Definitive Guide
• HGInit – Mercurial Tutorial by Joel Spolsky

Nemerle

• Nemerle

.NET

• C# School (covers C# 1.0 and 2.0)
• Visual Studio Tips and Tricks (VS 2003-2005 only)
• Entity Framework
• Charles Petzold’s .NET Book 0
• Threading in C#
• C# Yellow Book (intro to programming)
• C# Programming – Wikibook
• C# Essentials
• Data Structures and Algorithms with Object-Oriented Design Patterns in C#
• Nemerle

NoSQL

• CouchDB: The Definitive Guide
• The Little MongoDB Book

Oberon

• Programming in Oberon (PDF)

Objective-C

• The Objective-C Programming Language

OCaml

• Unix System Programming in OCaml
• Introduction to OCaml (PDF)

Oracle Server

• Oracle’s Guides and Manuals

Oracle PL/SQL

• PL/SQL Language Reference
• PL/SQL Packages and Types Reference
• Steven Feuerstein’s PL/SQL Obsession – Videos and Presentations

Parrot / Perl 6

• Using Perl 6 (work in progress)

Perl

• Higher-Order Perl
• Perl The Hard Way
• Extreme Perl
• Perl Free Online EBooks (meta-list)
• The Mason Book
• Practical mod_perl
• Beginning Perl
• Embedding Perl in HTML with Mason
• Perl & LWP
• Perl for the Web
• Web Client Programming with Perl
• Modern Perl 5

PHP

• Symfony2
• Practical PHP Programming (wiki containing O’Reilly’s PHP In a Nutshell)
• Zend Framework: Survive the Deep End

PowerShell

• Mastering PowerShell

Prolog

• Building Expert Systems in Prolog
• Adventure in Prolog
• Prolog Programming A First Course
• Logic, Programming and Prolog (2ed)
• Introduction to Prolog for Mathematicians
• Learn Prolog Now!
• Natural Language Processing in Prolog
• Natural Language Processing Techniques in Prolog
• Prolog techniques
• Applications of Prolog
• Simply logical

PostgreSQL

• Practical PostgreSQL

Python

• Byte of Python
• Building Skills in Python Version 2.5
• Python Bibliotheca
• Think Python (PDF)
• Data Structures and Algorithms in Python
• Dive into Python
• How to Think Like a Computer Scientist: Learning with Python
• Python for Fun
• Invent Your Own Computer Games With Python
• Learn Python The Hard Way
• Thinking in Python
• The Django Book
• Snake Wrangling For Kids
• Natural Language Processing with Python

R

• The R Manuals
• The R Language
• R by example
• Computational Statistics, Jeremy Penzer

Ruby

• Programming Ruby
• Why’s (Poignant) Guide to Ruby (mirror)
• Mr. Neighborly’s Humble Little Ruby Book
• Ruby Best Practices
• MacRuby: The Definitive Guide
• Learn Ruby the hard way

Ruby on Rails

• Ruby on Rails Tutorial: Learn Rails By Example

Scala

• Programming in Scala, First Edition
• A Scala Tutorial for Java programmers (PDF)
• Scala By Example (PDF)
• Programming Scala
• Xtrace (Github)
• Lift (Github)
• Pro Scala: Monadic Design Patterns for the Web
• Exploring Lift (published earlier as « The Definitive Guide to Lift »,PDF)

Scheme

• The Scheme Programming Language (Edition 4)

Smalltalk

• Free Online Smalltalk Books (meta-list)
• Squeak By Example (Smalltalk IDE)

Subversion

• Subversion Version Control (PDF)
• Version Control with Subversion

SQL

• Developing Time-Oriented Database Applications in SQL
• Use The Index, Luke! (a guide to SQL database performance for developers)
• Learn SQL The Hard Way

Vim

• A Byte of Vim
• Vim Recipes

Emacs

• An Introduction to Programming in Emacs Lisp (Third Edition)
• GNU Emacs manual

Merci à :

• @yann_madeleine yann-madeleine.com
• @DirtyF frank.taillandier.me

1. Présentation de l’application
2. Les outils
3. La page HTML 5
4. Récupération des données
5. Chargement des cartes et gestion du cache
6. Affichage des cartes
7. Gestion de la souris
8. Stockage de l’état
9. Animations
10. Gestion des différents types de clients
11. Conclusion
12. Pour aller plus loin

→ Lire Retours sur un développement HTML5 & JavaScript avec Visual Studio 2010

Exemple avec la géolocalisation

yepnope({
    test : Modernizr.geolocation,
    yep  : 'normal.js',
    nope : ['polyfill.js', 'wrapper.js']
});

Si le navigateur prend en charge la géolocalisation, nous chargeons le script normal.js, sinon, nous chargeons  les deux scripts passés en paramètres.

Devoirs à rendre pour lundi ;-)

1. → Télécharger yepnope.js sur GitHub,
2. → Télécharger Modernizr,
3. → Lire Regressive Enhancement with Modernizr and Yepnope.

Avant Minify

Après Minify

Ces deux images issues d’un test complet de Minify montrent comment ce script PHP élimine 5 requêtes HTTP et réduit la bande passante nécessaire aux fichiers Javascript et CSS de 70% !

Grosses cerises sur le bouquet déjà bien garni de Minify :

• WP-Minify — Plugin pour WordPress
• W3 Total Cache — Ce plugin indispensable pour tout site WordPress est prêt pour Minify, il ne reste plus qu’à l’activer et à spécifier les fichiers Javascript et CSS que vous voulez concaténer et minifier. Attention toutefois à bien respecter l’ordre d’apparition des différents fichiers dans votre code et l’endroit où le script affichera le lien pour le fichier généré. En cas de problème, la version autonome permet de créer des groupes de fichiers que l’on pourra placer où l’on veut dans la page : dans le head ou juste avant la fermeture de la balise body selon vos besoins.
• Un Helper pour Zend Framework est également disponible.

Treesaver est compatible avec la plupart des navigateurs modernes et se dégrade avec grâce dans les anciens, ou lorsque Javascript est désactivé. La licence est sympathique elle aussi, puisque Treesaver est disponibles à la fois sous licence MIT et GPL.

Treesaver est conçu pour donner le meilleur de lui-même pour l’affichage de textes et d’images. Les tableaux complexes, l’affichage de vidéos, les scripts Javascript peuvent fonctionner, ou pas : Treesaver est encore jeune.

• Une démonstration,
• Une autre démonstration,
• La documentation,
• Treesaver est disponible sur GitHub,
• Suivez @treesaverjs sur Twitter.

Via @Sventovit (Monsieur CSS3 & autres geekeries)

Par exemple, avec le marquage HTML :

<h1 class="fancy_title">Some Title</h1>

Et le plugin Lettering appliqué avec les paramètres adéquats :

<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
    $(document).ready(function() {
        $(".fancy_title").lettering();
    });
</script>

On obtiendra le résultat suivant :

<h1 class="fancy_title">
    <span class="char1">S</span>
    <span class="char2">o</span>
    <span class="char3">m</span>
    <span class="char4">e</span>
    <span class="char5"></span>
    <span class="char6">T</span>
    <span class="char7">i</span>
    <span class="char8">t</span>
    <span class="char9">l</span>
    <span class="char10">e</span>
</h1>

Et c’est aussi simple que cela si l’on désire envelopper des mots ou des lignes plutôt que des caractères individuels. Ensuite, à vous de jouer avec les CSS !

Téléchargez et documentez-vous à propos de Lettering.js sur Github

Voici le marquage HTML pour utiliser SimpleTabs :

<div class="simpleTabs">
    <ul class="simpleTabsNavigation">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab3 (and so on)</a></li>
    </ul>
    <div class="simpleTabsContent">Content here to be called when "Tab 1" is clicked.</div>
    <div class="simpleTabsContent">Content here to be called when "Tab 2" is clicked.</div>
    <div class="simpleTabsContent">Content here to be called when "Tab 3" is clicked.</div>
</div>

PS : Il existe un script de gestion d’onglets sous la forme d’un plugin Mootools appelé également SimpleTabs écrit par Harald Kirschner.

L’appel à la feuille de style externe suivante :

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css"/>

Permet d’adresser la CSS `shetland.css` uniquement aux navigateurs possédant une résolution horizontale (`max-device-width`) inférieure ou égale à 480px.

Voir aussi le plugin jQuery CSS 3 Media Queries for all Browser. via

Choisissez ensuite entre les trois méthodes :

1. CSS en ligne dans un attribut HTML `style`,
2. HTML avec des classes CSS séparée,
3. Javascript.

Merci à @martin1975 (Une araignée au plafond) pour le lien o/

var slideshow=new TINY.slider.slide('slideshow',{
    id:'slides', // ID of the parent slideshow unordered list
    auto:3, // Seconds to auto-advance, defaults to disabled
    resume:true, // Resume after interrupted, defaults to false
    navid:'pagination', // Optional ID of direct navigation UL
    activeclass:'current', // If navid, class to set on the current LI
    visible:true, // Initially display the first slide vs fading it in
    position:0 // Initial slide position, defaulting to the 0 index
});

• Voir la démonstration,
• Télécharger TinyFader,
• Via John’s Graphisme.

<div class="simpleCart_shelfItem">
    <h2 class="item_name">Awesome T-Shirt</h2>
    <span class="item_price">$35.95</span>
    <input type="text" class="item_quantity" value="1">
    <a href="javascript:;" class="item_add">Add to Cart</a>
</div>

En bref

• Système de paiement Paypal,
• La documentation est complète,
• La démo est bien jolie,
• Le Wiki est là pour aller plus loin.

Voici un exemple assez parlant. Si le navigateur accepte les images de fond multiples, la classe `.multiplebgs` est ajoutée à l’élément html, sinon c’est la classe `.no-multiplebgs` qui s’inscrit, ce qui simplifie la mise en place de fallbacks.

.multiplebgs div p {
    /* properties for browsers that
    support multiple backgrounds */
}
.no-multiplebgs div p {
    /* optional fallback properties
    for browsers that don't */
}

Utiliser IE7.js

<!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->

Note : la partie `IE7_PNG_SUFFIX= ».png »;` entre les balises script est là pour appliquer la gestion de la transparence des images PNG 24 bits sur les images dont l’extension se termine par `.png` (par défaut, les images concernées par le script doivent se terminer par `-trans.png`).

L’algorithme de IE7.js ne gère pas la transparence des PNG lorsque les propriétés `background-repeat` ou `background-position` sont utilisées. Si vous préférez un autre script comme DD_belatedPNG — et pour éviter d’éventuels conflits –, il sera judicieux d’utiliser la variable  `IE7_PNG_SUFFIX = « : »;`.

Quoi de neuf par rapport à 2008 ?

• Arrêt de la prise en compte de IE5.0,
• Les largeurs fixes ne sont appliquées qu’à IE5.5 en Quirks Mode,
• Ajout de IE9.js qui ajoute les fonctionnalités manquantes à IE8 pour s’approcher des standards,
• Gestion de l’opacité transférée dans IE9.js.

Nouveaux sélecteurs CSS (IE9.js):

• :first-of-type,
• :last-of-type,
• :only-of-type,
• :nth-of-type(),
• :nth-last-of-type(),
• :contains() a été supprimé car aucun autre navigateur ne l’a implémenté.

Changement pour la gestion des PNG

• Correction de nombreux bugs,
• Moteur de sélection plus rapide et plus précis (le même dont sera doté la prochaine version de base2,
• Le problème des liens non cliquable devrait également être réglé.

Lire le détail des fonctionnalités prises en charge par IE.7.js pour plus d’information.

Dean Edwards ?

Ce gourou du Javascript est également l’auteur des projets suivants à consommer sans modération :

• IE7.js
• base2
• /packer/
• MiniWeb
• Base
• cssQuery()
• moz-behaviors.xml

L’auteur encourage le hotlinking depuis son serveur ce qui peut être un plus en terme de bande passante mais aussi un moins en terme de sécurité. Dans le doute, il est possible de télécharger DLink sur son propre serveur. Le plugin Link Improver pour WordPress permet de personnaliser la palette des couleur utilisées par DLink en plus d’ajouter le script.

Revue complète chez Web Sourcing.

Raccourcis claviers

Durant l’affichage du plein écran, vous pouvez faire défiler les images, démarrer/arrêter le mode diaporama, et sortir du mode plein écran, à l’aide des touches de claviers suivantes :

• Page up, flèche gauche, - : Image précédente.
• Page down, flèche droite, + : Image suivante.
• Entrée, espace, flèche bas : Démarrer/arrêter le slide.
• Esc, Suppr, flèche haut, x : Sortir du plein écran.

1. Google peut tomber en panne

C’est peu probable, mais au cas où, nous pouvons détecter si la variable `jQuery` a été initialisée ou pas, auquel cas, on peut aller chercher jQuery sur notre serveur.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
if (!jQuery) {
    document.write('<script src="/js/jquery.min.js"></script>');
}
</script>

2. Google peut en profiter pour modifier notre DOM

C’est un risque que l’on court chaque fois que l’on installe un script. Mais si vous utilisez déjà un outil de mesure d’audience comme Google Analytics, vous avez déjà pris ce risque…

3. Google peut collecter des données personnelles

Idem.

Plus d’information dans le billet Avec AJAX Libraries API, c’est si simple de mettre à jour son jQuery ! et plus particulièrement dans les commentaires.

Comment faire ?

Suivez simplement les conseils prodigués par Teylor Feliz qui ont été traduits par KalyParker dans Comment créer facilement un framework JavaScript Partie 1 et Partie 2. Au menu, vous trouverez des conseils concernant la méthode à utiliser pour : créer l’objet principal de votre framework (constructeur vs objet littéral) ; naviguer dans le DOM ; concevoir une méthode de chainage, etc.

Les articles originaux

Au cas où, voici les tutoriels en anglais :

1. How to Easily Create a JavaScript Framework, Part 1
2. How to Easily Create a JavaScript Framework, Part 2
3. How to Easily Create a JavaScript Framework, Part 3
4. How to Easily Create a JavaScript Framework, Part 4

A.P.E (Ajax Push Engine) est un serveur web de type Comet : Il s’agit d’une approche nouvelle du web, qui permet au serveur d’envoyer des informations au navigateur sans que celui-ci ne lui ait demandé quoi que ce soit. L’intérêt est bien entendu de pouvoir échanger des données en temps réel sur un navigateur, sans avoir à recharger la page !

Lire également Ajax Push Engine : Un serveur web open-source solide et novateur pour plus d’informations.

var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider', // ID of the parent slideshow div
	auto:3, // Seconds to auto-advance, defaults to disabled
	resume:true, // Resume auto after interrupted, defaults to false
	vertical:false, // Direction, defaults to false
	navid:'pagination', // Optional ID of direct navigation UL
	activeclass:'current', // Class to set on the current LI
	position:0 // Initial slide position, defaulting to index 0
});

Voir la démonstration.