Code – Work Wild Web @ b2bWeb.fr

Posts Tagged ‘Code’

Emitter Sprites/Particules factory with jQuery & CSS3

In Coding Projects,Molokoloco | 23 Oct 2011 | Laisser un commentaire

[UPDATE : Projet en cours de refonte ici : https://github.com/molokoloco/jQuery.boxFx]

J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS (Sans canvas)…

C’est un plugin léger et hyper-customisable, son principe et de (re)générer, X fois par secondes, un élément HTML, de lui appliquer des propriétés CSS3 (de départ), de l’insérer dans le DOM.

Le plugin applique quasi immédiatement les propriétés CSS de fin, et, au bout d’un certain temps, recycle l’élément : L’animation n’est pas faite avec jQuery $.animate() mais grâce aux propriétés CSS3 de transition, afin de bénéficier de l’accélération matériel (GPU)

Live Demo V0.7 : http://jsfiddle.net/molokoloco/aqfsC/
Plain demo : http://www.b2bweb.fr/framework/jquery.emitter/jquery.emitter.html
Github repository : https://github.com/molokoloco/jquery.emitter
Cloud9ide editor : http://cloud9ide.com/molokoloco/jquery_emitter

En arrière plan, le plugin contient quelques méthodes qui permettent aux propriétés “cssFrom” et “cssTo” de supporter automatiquement l’ajout du “browser prefix” :

Fix and apply styles on element with correct browsers prefix
$(e).crossCss({borderRadius:’10px’}) >>> $(e).css({WebkitBorderRadius:’10px’})
Use Modernizer : https://github.com/Modernizr/Modernizr/blob/master/modernizr.js
Modernizr.prefixed(“borderRadius”); // e.g FF3.6 ‘MozBorderRadius’, FF4 ‘borderRadius’

$.fn.crossCss = function(css) {
	return this.each(function() {
		var $this = $(this);
		if (typeof css != 'object') return $this;
		for (var p in css)
			if (Modernizr.prefixed(p))
				css[Modernizr.prefixed(p)] = css[p];
		return $this.css(css);
	 });
};

Support cross-browser : Transition, borderRadius, borderImage, maskImage, Transform, boxShadow, etc

Le plugin écoute (bind) plusieurs événement via des méthodes publiques : start, stop, update, …
Exemple d’utilisation :

// Permet de mettre à jour, depuis n'importe quelle fonction, une ou des propriétés de l'émetteur
$emitter1.trigger('update', [{emitterRadius:16, rate:0}]);

Il envois (trigger) un évènement à chaque emission de particule (Cf. source) :

// Ecouter si un nouveau sprite à été émis
$emitter1.bind('emit', function(e, $sprite) { 
    $sprite.html('Ok'); // On modifie en live le contenu
});

Si la valeur “options.rate” est mise à Zéro, le plugin utilise la fonction “requestAnimationFrame()”, à la place de “setTimeout()”, afin de maximiser les performance.

Pour le moment il fait des bulles dans l’espace… mais on peu tout imaginer, des tweets, une cascade verticale, des images, beaucoup beaucoup de possibilités… de la synchro audio/vidéo,… Par exemple tapez une lettre entre les deux balises “<div></div>”
C’est pour cela que le code est ouvert sur Github ! :)

J’ai fais ce que j’ai pu pour chasser les bugs, mais il doit bien en rester ^^, vos commentaires sont les bienvenus…

PS : Cette ancienne démo est rigolote aussi :
http://jsfiddle.net/molokoloco/wRS8A/

Tags : Code, CSS3, Framework, HTML5, JavaScript, jQuery, Molokoloco, Plugin

Twitter Bootstrap Toolkit for Kickstart Web Development

In Shared Items | 27 Sep 2011

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. With the help and feedback of many engineers at Twitter, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns.

Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox. Bootstrap comes complete with compiled CSS, uncompiled, and example templates.

Source : http://www.webappers.com/2011/09/15/twitter-bootstrap-toolkit-for-kickstart-web-development/

Tags : Code, Framework, HTML5, Open Source, Tool

Diaspora

In Molokoloco | 27 Sep 2011 | Laisser un commentaire

Shared by molokoloco

This come from an email send by the Diaspora* Crew

Dear Friend of Diaspora*

Thanks again for your interest in joining the Diaspora* community, and for your patience. We’re working on getting your invite out to you as quickly as possible, and we’re still committed to getting it to you by the end of October. We’re pushing out hundreds of thousands of invitations as quickly as we can — thanks for bearing with us.

As promised in our previous message, we want to tell you a little more about why we believe so strongly in Diaspora*’s mission: to build a new and better social web, one that’s 100% owned and controlled by you and other Diasporans.

Diaspora*’s distributed design is a huge part of it. Like the Internet itself, Diaspora* isn’t housed in any one place, and it’s not controlled by any one entity (including us). We’ve created software that lets you set up and run your own social network on your own “pod” (or server) and connect your network to the larger Diaspora* ecosystem. You can have a pod all to yourself, or one for just you and your friends, or your family, giving you complete ownership and control over your personal social information (including your identity, your posts, and your photos) and how it’s all stored and shared. Or you can simply join one of more than 20 open pods.^[1]

This means you can do what you want. You can express yourself candidly, and be your authentic self. You can go by whatever name you like on Diaspora*. Pseudonyms are fine, and this both protects you (if you want to say something your boss or your parents disagree with) and opens the door to real connection. Here’s how one blogger and Diasporan put it:

Maybe his kind words mean so much to me because T is someone I’ve met through a [pseudo]nym — he got to know the real me’s ideals and beliefs, and liked that person… A compliment from [him] is based on my own sincerity, and thus, has a certain purity. It is untainted by perceptions of how I look, what I’m wearing, and so on. Given that, I value it especially highly.^[2]

This kind of authentic connection brings back the social freedom that made the Internet awesome in the first place. And this is just the beginning.

You can make great connections with anyone in the Diaspora* ecosystem, not just the people on your own pod, because the pods are linked together.

You can also use Diaspora* as a home base for your outbound posts on Facebook, Twitter, and Tumblr, writing to them all from Diaspora*. In the future, you’ll be able to monitor your inbound streams from Diaspora* as well.

Yet our distributed design means no big corporation will ever control Diaspora*. Diaspora* will never sell your social life to advertisers, and you won’t have to conform to someone’s arbitrary rules or look over your shoulder before you speak.

And because your information is yours, not ours, you’ll have the ultimate power – the ability to move your profile and all your social data from one pod to another, without sacrificing your connection to the social web. Over time, this will bring an end to the indifferent, self-serving behavior that people can’t stand^[3] from the walled gardens that dominate social networking today. When you can vote with your feet for the environment where you feel safest, the big guys will have to shape up, or risk losing you.

We’re still building this move-your-profile capability, as well as other key features. It’s hard work, but we’re building the future we want to see, with incredible community support.

Diaspora* is a genuine community effort. More than 160 people have contributed to our code, putting us in the top 2% of all open source projects tracked by Ohloh.^[4] Hundreds more volunteers have translated Diaspora* into 13 of the world’s spoken languages so far, with another 32 translations in progress. Thousands of Diasporans have given us more than 3,000 points of feedback. (We’re listening closely, and building the features you’re asking for as fast as we can.) And of course, thousands of donors have helped pay for our development, and hundreds of thousands of people — including you — are patiently waiting for access to try it out.

Thanks again for your patience. We can’t wait to see you here, and to build a brighter future together.

Sincerely,

- Dan, Max, Ilya, Sarah, Yosem, and Peter
Wednesday, September 21st, 2011

[1]: JoinDiaspora.com is just one of the pods within the Diaspora* ecosystem. Here’s a directory of some of the others that are open to new users (there are even more out there too, including many that are private, not open).
[2]: Excerpts from this blog post by Garidin Winslow.
[3]: “Report: Facebook Is Most Hated Social Media Company”, Courtney Rubin, Inc. Magazine, July 20, 2011.
[4]: http://www.ohloh.net/p/diaspora/factoids/10029264

Tags : Code, Network, Open Source, Politics, Privacy, Social, WebApp

My Book ReadR V1.12 – HTML5 / jQuery polished “Page as a Book” reader

In Coding Projects,Molokoloco | 29 Aug 2011 | Laisser un commentaire

[UPDATE 30/11/11 - Présentation en ligne : http://www.b2bweb.fr/bonus/my-book-readr/]

J’ai passé pas mal de temps pour réécrire complétement le code du lecteur de livre en ligne que j’avais publié avant les vacances.

My Book Readr, c’est un code source ouvert qui peut permettre à tout à chacun de publier un long texte sur Internet via une page dédiée à la lecture en ligne.

Voici donc un code tout frais, inspiré des recommendations officielles de la team jQuery.

Je ne suis pas parti dans un code purement orienté object, mais dans un concept qui me parait beaucoup plus souple, et adapté à une forte customisation de tous les paramètres.

Le mieux que vous puissiez faire, c’est jeter un coup d’oeuil sur le fichier JavaScript principal (Cf. lien plus bas…)

Au menu de cette V1.12 :

Mise en page simple, claire et typographique, compatible HTML5
Création d’un sommaire automatique, à partir des balises de titres (Ex. <H4>) du texte
Le texte est redimensionnale en largeur (Poignée à droite dans la marge) et en taille de police (CSS basé sur les .em)
Gestion du défilement vertical de la page, pour ne pas se perdre dans le texte
- Un indicateur sur le paragraphe en cours de lecture pour stabiliser visuellement le défilement vertical (Repère)
- Assouplissement du défillement par défaut de la molette, comportement progressif suivant la vitesse
- Le défilement des chapitres est indiqué dans le sommaire, fixe à l’écran
- Vignettes dynamiques indiquant le nombre “d’écrans” de la page (Nombre variant suivant l’affichage) et la position verticale actuelle
- Le fond de page est cliquable et peut glisser de haut en bas
- Flèches Haut/Bas pour défiler de page en page : Flèches Droite/Gauche pour défiler doucement
- Fonction de lecture automatique (La touche “Entrée” active un défilement vertical continu réglable)
Commentaires dynamiques
- Chaque paragraphe accueil un mini-forum Disqus. API gratuite, qui accepte plusieurs type d’identification (Open ID, Facebook, Google, Twitter, Disqus, etc))
- Possiblité de commenter le texte en utilisant les petites bulles sur la gauche
- Sélection du texte pour annoter, copier ou éditer
Edition WYSIWYG et HTML du texte, avec téléchargement d’une sauvegarde possible
Création de notes à partir d’extraits de texte et sauvegarde au format .txt
Défaut : Testé uniquement sous Firefox 6 et Chrome 14… (mais avec un code normalement générique !)

Utilisation du clavier

“Espace” ou “Entrée” : Lecture automatique
- Touches 1,2,3,…,9 pour régler la vitesse (5, valeur par défaut)
Flèches “Haut” et “Bas” : Défilement de la page
- Flèches “Gauche” et “Droite” : Défilement doux
“+” et “-” ~~ou “Ctrl” + “Molette de la souris“~~ : Ajustement de la taille du texte
… et “F11” pour le plein écran !

Exemple de code, créé pour l’application…

My Book ReadR V1.12 – Polished HTML5/CSS3 and jQuery powered “read-a-book” page

This start from the idea to design a page specially engineered to read a long book on the web…

Demo : http://www.b2bweb.fr/bonus/piratons-la-democratie.html
Infos : http://www.b2bweb.fr/molokoloco/my-book-readr-v1-12-html5-jquery-polished-page-as-a-book-reader/
Main Script : https://github.com/molokoloco/My-Book-ReadR/blob/master/js/jquery.readr.js
GIT Sources : https://github.com/molokoloco/My-Book-ReadR/

RESSOURCES :

BoilerPlate HTML5 starter pack : https://github.com/paulirish/html5-boilerplate
TinyMCE, JS WYSIWYG HTML editor (jQuery version) : http://tinymce.moxiecode.com
jQuery Waypoints v1.1 : https://github.com/imakewebthings/jquery-waypoints/
jQuery Mousewheel : http://adomas.org/javascript-mouse-wheel/
Copy to clipboard with ZeroClipboard.swf : http://www.steamdev.com/zclip/
DISCUS comment system API : http://docs.disqus.com/developers/universal/
Google Plus API : https://code.google.com/intl/fr/apis/+1button/
Twitter API : https://twitter.com/about/resources/tweetbutton
Facebook API : https://developers.facebook.com/docs/reference/plugins/like/
Use Google Fonts API : http://www.google.com/webfonts/v2

[Appel] Ce projet manque de contributeurs sur GitHub !!!

Il reste quelques pétouilles à corriger (évidemment… ;), deux ou trois TODOs dans les commentaires, et surtout, prendre un peu de temps pour le faire tourner sur les i-machins et autres Droids…

Tags : Code, HTML5, jQuery, Media, Molokoloco, Multimedia, Open Source, Tool, WebApp

HTC sort un outil pour déverrouiller ses modèles sous Android

In Shared Items | 23 Aug 2011

HTC sort un outil pour déverrouiller ses smartphones sous Android
Conséquence du rachat de la branche mobile de Motorola par Google ?

Faut-il y voir une des premières conséquences du rachat de la branche mobile de Motorola par Google ? Possible.

Quoi qu’il en soit, HTC vient de changer radicalement de position sur le « déverrouillage » de ses smartphones sous Android.

Le constructeur vient en effet de s’engager à mettre à la disposition de ses clients (plus exactement de ses clients avertis) un outil qui permettra de modifier l’OS, notamment pour accéder à des galeries [...]

Source : http://www.developpez.com/actu/36147/HTC-sort-un-outil-pour-deverrouiller-ses-modeles-sous-Android-consequence-du-rachat-de-la-branche-mobile-de-Motorola-par-Google/

Tags : Censorship, Code, Free, Google, Hacker, iPhone, Mobile

Molokoloco Coding Project

In Coding Projects,Molokoloco | 13 Jul 2011 | Laisser un commentaire

Fork me on GitHub

Blog code entry
My feed on b2bweb.fr/coding-project/

Keep updated with the RSS feed

Public Repositories
My code on GitHub/molokoloco

FastWebStart Une page de démarrage rapide et pratique !
FRAMEWORK Sharing some code…
And more…

Personnal codingsheets
My wiki on “Molokoloco Coding Project“

! New source code is now hosted on Github !

What you can find on my WIKI !

JS/php Class & Fonctions

PHP/js Class and Fonctions

Mixed LAMPX TIPS

Others Services Tips

And also my Virtual Admin PHP4/JS Prototype Framework, for managing CMS (2005~2008)

Julien Guézennec 2011 | molokoloco@gmail.com | http://www.b2bweb.fr …. Work definitely in progress…

Tags : Code, Framework, Interactive, Internet, JavaScript, jQuery, Molokoloco, PHP, Prototype, WebApp, WebSite

Compte-rendu du huitième ParisJS

In Coding Projects,Shared Items | 30 Jun 2011

Shared by molokoloco

@Clochix a fait un bon résumé du #ParisJS d’hier, avec un petit passage, qui m’a bien fait rire, sur votre humble serviteur ;)

J’attaque enfin sérieusement ma reconversion professionnelle à JavaScript, et ai donc été faire un tour hier soir à la huitième soirée organisée par le groupe des utilisateurs parisien de JavaScript, histoire de prendre la température de la communauté. Quelques ressentis personnels et un résumé des

présentations.

Grognements liminaires

L’engouement pour JavaScript que je ressens sur le Net se confirme sur le terrain. Il [...]

Source : http://www.clochix.net/post/2011/06/30/Compte-rendu-du-huiti%C3%A8me-ParisJS

Tags : Code, Development, Framework, HTML5, JavaScript, parisJS

Animation HTML (CSS/Canvas) avec timeline.js

In Molokoloco | 25 Jun 2011 | Laisser un commentaire

Cool, c’est enfin arrivé. Un bon départ pour des animations full JS/HTML/CSS et Canvas !
(Après les solutions propriétaires Sencha Animator ou le futur Adobe Edge)

Timeline.js : “A compact JavaScript animation library with a GUI timeline for fast editing”

anim(sprite).to({x:100}, 1, Timeline.Easing.Quadratic.EaseIn).to(5, {x:0}, 2);

http://marcinignac.com/blog/timeline-js/ (Blog)
https://github.com/vorg/timeline.js (Sources / New fork)

Tags : Animation, Code, CSS, Editor, HTML5, JavaScript, Tool

(L’ubër geek) Ryan Dahl, créateur de node.js

In Shared Items | 23 Jun 2011

Shared by molokoloco

Explications par Ryan Dahl à propos du TRÈS PROMETTEUR node.js

(…) Californien d’origine et basé à San Diego, Ryan a commencé ses développements très jeune, au grand dam de son père qui le harcelait pour aller surfer quelques vagues du pacifique au lever du soleil. Heureusement pour le monde IT, ce jeune développeur a su surmonter cette tragédie familiale pour se consacrer au développement de son projet node.js…

Source : http://www.zdnet.fr/blogs/cloud-news/video-rencontre-avec-ryan-dahl-createur-de-nodejs-39761883.htm

Tags : API, Code, JavaScript, Network, Server, WebService, WebSite

Best “must know” open sources to build the new Web

In Coding Projects,Molokoloco | 18 May 2011 | 2 commentaires

[Edited 26/11/2011]

Here the dump of my ultimate collection of online Web development resources and directories, oriented for the Front-End users Interfaces (UI).

HTML5 and all related open standards are moving fast, but for now, building a whole Website/WebApp on top of that can be very inconsistent, especially across various browsers experiences.

So… how to embrace new awesome web technologies ?

Now, as Web Developers and Designers, we have to build on top of more stable framework. It’s here that come JavaScript jQuery, acting like interface into browser’s implementations. That how we can expect more stability and consistency.

There is not only JS, building a state-of-the-art webSite. That now like making a big movie, with hundred specialized tasks and jobs…

From A to Z, this is huge ! Even if i think we don’t need to be an expert for all… (Thus we try) ^^

Best things in life are free, time to learn !

LEARNING HTML 5, CODING AND DESIGN
SERVER SIDE SOFTWARES
PHP FRAMEWORKS AND TOOLS
DATABASE MANAGEMENT
API AND ONLINE DATA
ONLINE CODE AND MEDIA EDITING
CODE RESOURCES AND VERSION CONTROL
JAVASCRIPT FRAMEWORKS FOR DESKTOP
JAVASCRIPT FRAMEWORKS FOR MOBILE AND TOUCH
JQUERY PLUGINS
OTHER JQUERY RESOURCES
HTML5 VIDEO PLAYERS
JAVASCRIPT AUDIO PROCESSING AND VISUALISATION
JAVASCRIPT GRAPHICS AND 3D
JAVASCRIPT BROWSERS INTERFACES (HTML5)
JAVASCRIPT TOOLS
CLIENT SIDE AND EMULATING
CSS3 and FONTS
WEBSITE (FULL) TEMPLATES

LEARNING HTML 5, CODING AND DESIGN

★ HTML5 Rocks : Learn HTML5 by Major Feature Groups (HTML5 Demos, tutos and playground). Sources by Google
Awesome HTML5 Dashboard by Mozilla
WhatWG Developers, A clear technical specification of HTML5 for Web developers
★ StackOverflow : Welcome to Q&A for professional and enthusiast programmers
★ Addyosmani, jQuery & JavaScript articles and tutorials for the community
Sohtanaka, jQuery & JavaScript articles and tutorials for the community
★ Nettuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites. We cover HTML, CSS, Javascript, CMS’s, PHP and Ruby on Rails.
Codrops, tutorials and web resources
WebAppers, best Open Source Resources for Web Developers
Tutorialzine – PHP MySQL jQuery CSS Tutorials, Resources and Freebies
Mozilla JavaScript guide for developers
WebDev and jQuery wiki codes snippets, compiled by myself ;)

SERVER SIDE SOFTWARES

★ Node.js is a server-side JavaScript environment that uses an asynchronous event-driven model. This allows Node.js to get excellent performance based on the architectures of many Internet applications. Sources and live demo.
PhantomJS is a server-side headless WebKit with JavaScript API. It has fast and native support for various web standards : DOM handling, CSS selector, JSON, Canvas, and SVG
Lighttpd is a lightweight open-source web server. News, documentation, benchmarks, bugs, and download. Lighttpd powers several popular Web 2.0 sites like YouTube, wikipedia and meebo.
NGinx, high performance and lightweight web server as well as a reverse proxy and e-mail platform
The Apache HTTP Server Project is an effort to develop and maintain an open-source HTTP server for modern operating systems
★ PHP : Hypertext Preprocessor. Server-side HTML embedded scripting language. It provides web developers with a full suite of tools for building dynamic websites
FFmpeg – Tools to record, convert, stream and play multimedia content including libavcodec and libavformat, two libraries used by many other open source projects
And… Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go, Fantom, CoffeeScript, D, …

PHP FRAMEWORKS AND TOOLS

★ WordPress is web software you can use to create a beautiful website or blog
Drupal is an open source content management platform (CMS).
Come for the software, stay for the community
Centurion is a new open-source CMS delivered as a flexible PHP5 Content Management Framework. We simplify the use of Zend Framework, which is ZF extended. Our components are generic, simple, clear and reusable.
phpBB is a free flat-forum bulletin board software solution
SPIP est un système de publication pour l’Internet (CMS) qui s’attache particulièrement au fonctionnement collectif, au multilinguisme et à la facilité d’emploi. C’est un logiciel libre, distribué sous la licence GNU/GPL
MediaWiki is a free software open source wiki package written in PHP, originally for use on Wikipedia
★ SimplePie : Super-fast, easy-to-use, RSS and Atom feed parsing in PHP
★ PHPthumb, PHP image manipulation library
★ PHPMailer is a fully featured email transfer class for PHP
A simple, open, server-to-server web-hook-based pubsub (publish/subscribe) protocol as an extension to Atom and RSS. Parties (servers) speaking the PubSubHubbub protocol can get near-instant notifications

DATABASE MANAGEMENT

★ Apache CouchDB provides a RESTful JSON API than can be accessed from any environment that allows HTTP requests and allow document-oriented database that can be queried and indexed in a MapReduce fashion using JavaScript. CouchDB also offers incremental replication with bi-directional conflict detection and resolution. Sources.
MonoQL is an AJAX web application to manage MySQL databases. MonoQL will provide all major features of phpMyAdmin for MySQL, including database & table design, data browsing & editing, advanced querying & more
MariaDB is a community-developed branch of the MySQL database, under GPL status, as opposed to any uncertainty of MySQL license status under its current ownership by Oracle.
★ SQLite is a software library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine.
SQL online designer editor

API AND ONLINE DATA

ProgrammableWeb, Most Popular Web Services and API Directory
The following Google services provide APIs that implement the Google Data Protocol. Each API has its own set of guides and resources, including information about using client libraries
Yahoo! Developer Network – APIs & Tools
Yahoo! Pipes An interactive feed aggregator and manipulator
★ The Yahoo! Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services

ONLINE CODE AND MEDIA EDITING

★ CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser.
★ Cloud9 IDE – by javascripter for javascripters (GOOD GOOD GOOD :)
★ jsFiddle – Simple and powerfull online editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
Akshell, a server-side JavaScript development and hosting. Create web apps in JavaScript right from your browser
JSONeditor, easy editing of json strings
★ TinyMCE is a powerful WYSIWYG editor control for web browsers such as MSIE or Mozilla that enables the user to edit HTML content in a more user friendly way
Ext Designer is a desktop application that helps you create interfaces faster than ever in an easy-to-use, drag-and-drop environment.
★ Wireframes / UI Design From static wireframes to rapid prototypes, web developers can do it all with LucidChart. Collaborate with your client and design team in real-time to cut down on iterations.
Balsamiq Mockups, online sketch helping you in your design
Color Scheme Designer 3
★ Pixlr, Photoshop like image editing direct in your browser
Aviary, free online photo editor. Plus Aviary API for developers
Favicon Generator

CODE RESOURCES AND VERSION CONTROL

★ GitHub is the best way to collaborate with others. Fork, send pull requests and manage all your public and private git repositories.
Git is an extremely fast, efficient, distributed version Source Code Management tool ideal for the collaborative development of software.
Google Code est destiné aux développement relatif à Google. L’entreprise y diffuse des codes sous licence libre ainsi que la liste des API utilisables
The Google Libraries API is a content distribution network (CDN) and loading architecture for the most popular, open-source JavaScript libraries
Code Snippets, Snipplr Social Snippet Repository

JAVASCRIPT FRAMEWORKS FOR DESKTOP

★ jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Sources, API, API Browser, Fancy Doc.
★ The official jQuery User Interface (UI) library (Demos and Doc). Sources, Themes Roller, Download.
jQuery TOOLS – The missing UI library for the Web
YUI 2 — Yahoo! User Interface Library
Mootools, a super lightweight web2.0 JavaScript framework
Prototype provides class-style Object Oriented and AJAX
Dojo unbeatable JavaScript Tools – The Dojo Toolkit
★ EXT4, the industry’s most advanced JavaScript framework for building the next generation of cross-platform web apps.
PHP.js, PHP functions implemented client-side in JavaScript

JAVASCRIPT FRAMEWORKS FOR MOBILE AND TOUCH

★ jQuery Mobile : Touch-Optimized Web Framework for Smartphones & Tablets
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Sources.
Zepto.js is a minimalist inlinable framework for mobile WebKit browsers, with a jQuery-like chaining syntax. Sources.
MicroJS : Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit !
★ PhoneGap : Embed your code and access core functions on Android, iPhone and Blackberry using JavaScript. Sources.
★ Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices
JQtouch, a jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices. Sources.
DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touchscreen devices

JQUERY PLUGINS

jQuery Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element with or without infinite scrolling enabled
This jQuery plugin is an on-demand plugin loader, also known as a Lazy loader
TweenJS : A simple but powerful tweening / animation library for Javascript
Css3-like Easings for jQuery animations
Spritely is a jQuery plugin for creating dynamic character and background animation (Pan, Scroll, Sprite)
Timeline.js is a compact JavaScript animation library with a GUI timeline for fast editing
jQuery File Upload User Interface Plugin 4.4.1
JQuery Slideshow/Carousel Plugin. Sources.
Flux Slider Transitions Gallery, hardware accelerated image transitions using CSS3
Roundabout for jQuery, 3D effect carousel with sprites (Div) that turn around an axe
Supersized – Full Screen Background/Slideshow jQuery Plugin
jQuery Masonry is a layout plugin for jQuery that arranges elements vertically then horizontally according to a grid, minimizing gaps. Sources.
jQuery simple Layout Demo that manage slidable and resizable, multi-pane
Flexigrid jQuerydatagrid plugin
SlickGrid is a JavaScript grid/spreadsheet component
Isotope, an exquisite jQuery plugin for magical layouts Reveal & hide items with filtering Re–order items with sorting Dynamic, intelligent layouts
The Super Gestures jQuery plugin records gestures made by the user’s mouse. This is great for touch interface web applications
jQuery MouseWheel is a plugin that adds cross-browser mouse wheel support
AutoSuggest jQuery Plugin, add some auto-completing functionality
qTip is an advanced tooltip plugin it provides you with tonnes of features like rounded corners and speech bubble tips
jQuery Charts and graphic tool
jQuery Tools – The missing UI library for the Web

OTHER JQUERY RESOURCES

HTML5 VIDEO PLAYERS

★ Popcorn.js is an event system for HTML5 Video, with strong syntactic sugar for chaining < video > methods and adding events to the timeline. (From Mozilla)
LeanBack Player HTML5 Video Player with Subtitle-Support (From Google)
A single URL for your video. Vid.ly keep up to date with the thousands of smart phones, features phones, and tablets on the market and which type of video they support. When a mobile device visits your vid.ly url we deliver up the correct video format

JAVASCRIPT AUDIO PROCESSING AND VISUALISATION

★ Using HTML5 and Flash, SoundManager V2 provides reliable, simple and advanced, cross-platform audio under a single API
DSP, sound Digital Signal Processing for JavaScript
The Radiolab Hyper Audio Player v1, brought to you by WNYC Radiolab, SoundCloud and Mozilla Drumbeat
jPlayer, a jQuery HTML5 Audio / Video Library with comprehensive API

JAVASCRIPT GRAPHICS AND 3D

★ Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins
★ Javascript 3D Engine : ThreeJS by Mr Doob
The aim of the project is to create a lightweight 3D engine with a very low level of complexity — in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.
Shader Toy, online shaders visualizer and editor (2D/3D)
PhiloGL, a WebGL Framework for Data Visualization, Creative Coding and Game Development
What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL
WebGL frameworks listed by the Khronos Group
jCanvaScript is a JavaScript library that provides you methods to manage with the content of a HTML5 canvas element easily, like jQuery [NEW]
EaselJS, a JavaScript library for working with the html5 canvas element. Sources.
Free JavaScript Game Frameworks To Create A Web-Based Fun
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web (SVG). If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
jQuery SVG plugin that lets you interact with an SVG canvas
Display live data on your site Google chart tools are powerful, simple to use and free. Try out our rich gallery of interactive charts and data tools.
Arbor.js, a graph visualization library exploring nodes and relations and using web workers and jQuery

JAVASCRIPT BROWSERS INTERFACES (HTML5)

★ Modernizr – Feature detect HTML5 and CSS3 features, with handy css and javascript hooks so you can progressively enhance to your heart’s content. Sources. Useful list of cross-browser Polyfills
HTML5Shiv : The latest HTML5 JavaScript shim for IE to recognise and style the HTML5 elements
Polyfills : A way of getting the browser to behave and support the latest specifications. This is a collection of code snippets that support different native features of browsers using JavaScript (and if required, Flash in some cases).
YepNopeJS : An Asynchronous Conditional Resource Loader helping detecting browser missing features. Sources.
jQuery CSS3 Finalise : Tired of adding prefix for each browser when it comes to the new CSS3 attributes ?
★ Amplify.js : Store, request and pub/sub. Amplify API goal is to simplify all forms of data handling by providing a unified API for various data sources. Amplify’s store component handles persistent client-side storage, using standards like localStorage and sessionStorage, but falling back on non-standard implementations for older browsers. Sources.
History.js gracefully supports the HTML5 History/State APIs
Socket.IO aims to make realtime apps possible in every browser and mobile device

JAVASCRIPT TOOLS

★ Minimal templating with {{mustaches}} in JavaScript
json:select(), CSS-like selectors for JSON
HeadJS, Asynchronus JavaScript loading. The only script in your <HEAD>
JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.
Responsive image, an Experiment with Mobile-First Images that Scale Responsively & Responsibly
UglifyJS JavaScript API, to compress JavaScript code
Dhteumeuleu, interactive DOM scripting and DHTML open-source demos, powered with native JavaScript
Backbone give your JS App some Models, Views, Collections, and Events
Backbone supplies structure to JavaScript-heavy applications by providing models key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

CLIENT SIDE AND EMULATING

BrowserShot, check Browser Compatibility, Cross Platform Browser Test
Test everything… Enter a URL you want to test
Android browser emulator
Iphone browser emulator
Opera browser emulator
★ Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

CSS3 and FONTS

★ The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions
The Semantic GRID system. Set column and gutter widths, choose the number of columns, and switch between pixels and percentages
★ Twitter Boostrap Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more [NEW]
★ CSS3 Maker and generator
Create amazing WebKit CSS3 animations with ease. Sencha Animator is a desktop app to create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices.
CSSwarp – CSS Text to Path Generator
Gradient Editor, a powerful Photoshop-like CSS gradient editor from ColorZilla
★ Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API (open source license)
@font-face Kit Generator, convert fonts for the Web
Typetester, compare fonts for the screen
Media Queries. a collection of responsive web designs
Pattern TAP, Users Interface (UI) components

WEBSITE (FULL) TEMPLATES

★ HTML5 Boilerplate A rock-solid base HTML/CSS/JS template for HTML5 awesome, for a fast, robust and future-proof site.
After more than three years in iterative development, you get the best of the best practices baked in : cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. Sources.
HTML5 starter pack is a clean & ordered directory structure that fit for most projects, a few of the most common files (html, css, js), as well as a basic Photoshop web design template, again with an groups structure fit for most projects.
★ Initializr is an HTML5 templates generator to help you getting started with an HTML5 project, in 15 seconds !
Animated Portfolio Gallery with jQuery
Making a Slick MobileApp Website with jQuery & CSS
How to Build an RSS Reader with jQuery Mobile
★ Building Single Page Applications With jQuery’s Best Friends (Backbone, Underscore, …)
Google TV Optimized Templates, to make website optimization for TV easier, we are providing templates – 2 in HTML5 and 2 in Flash – that developers can download and modify with their own content and style. The HTML5 version of these templates are utilizing the Google TV UI library, jQuery based and Closure based. The UI library can be used independent of the templates.

I know this is a monkey list ! Keep calm, you don’t have to read all… at least if you click on all starred links, it’s cool ;)

PS : Come take a look to my browser start page portal, giving WebDev an efficient access to Web resources… And don’t forget #TAG searches in this site :)

PS2 : Thanks a lot to #FOWD providing me wifi connection and inspiration ;)

Tags : Browser, Code, CSS3, Editor, Framework, Freedom, HTML5, Interface, Internet, jQuery, Open Source, Ressources, Tools, UI, Web

3 pages