JavaScript Function doc.Support LQDN banner

Posts Tagged ‘Molokoloco


No image, no webGL, no native !

 

 

With this prototype,  on desktop browsers you can move around  the 3D CSS clock model with your mouse. On mobile browsers, rotation is triggered by the mobile orientation …

 

C’est un prototype (plus un Framework qu’un plugin) qui permet de tester les fonctionnalités sur différents types d’écrans et de navigateurs : Desktop, mobile, tablette…
La rotation 3D est pilotée par la souris (le “pointer”) ou simplement par l’orientation du mobile…
Crédit : The code to 3D rotate a CSS box was originally inspired from there : http://www.laplace2be.com/projects/phone/
(It’s seem “laplacetobe” have been inspired too by http://lenticular.attasi.com ;)
I have refactored the code following Twitter boostrap plugin guideline :
http://twitter.github.io/bootstrap/javascript.html

 

Avec le triptyque suivant pour la partie cross-browsers du projet :

 

[UPDATE]

La présentation que je fais pour #ParisJS est ici !

https://docs.google.com/document/d/1khVWiDeFj-KY2OhVqbZN_w1aef2iCC0yhhLEdj8p8yY/edit?usp=sharing

 

On my HTC One S with Chrome browser and Firefox browser…

 

2013-05-30_15-33-35  2013-05-30_15-37-26

 

Here on your PC…

 

 

Some others infos here :

http://www.b2bweb.fr/molokoloco/pixels-polished-jquery-css3-analogue-clock/

 

Un de mes amis sur Facebook :

 

Fautes d’orthographe, de syntaxe, de style, d’inattention, erreurs de conjugaison, fautes de frappe, clavier anglais sans accentuation, indolence ou paresse intellectuelle, mésemploi de logiciels de correction ou inemploi de dictionnaires, de synonymes ou bien la mémoire qui flanche, je ne sais plus très bien…

Il avait été mentionné que l’écriture était la science des ânes. Ceci précéda : “l’orthographe est la science des ânes”. Ce à quoi Napoléon aurait ajouté : “Je ne parle pas aux cons, ça les instruit” remarquablement repris par Coluche. Nous sommes, nous-mêmes, pour la défense de la langue française et à l’instar de Jean Guéhenno, nous dirions que : “l’orthographe est la politesse de la langue”.

 

Ma Mes réponses :

 

Julien Guézennec Lol je suis si null en orthographe… et pourtant je parle plusieurs (un S a plusierus ?) langues… Espagnol, Anglais, HTML, JavaScript, AS3, Shell, et j’en passe… Tu veux jouer au plus fort avec l’orthographe ? Moi je te prends sur l’ingénierie, les maths, la mécanique… etc, c’est mes armes de nature.. mais pitié ! Les gens qui defoncent un bon texte car il il y une faute d’accord, un je ne sais plus de pas composé ! Et bien ca m’enerve. La forme oui le fond encore plus. L’orthographe c’est à faire de son mieux, c’est ce que je fais… mais ne me traite surtout pas de con si je n’ai pas la moyenne à la dictée de Pivot… please…. :)

 

Julien Guézennec C’est d’ailleurs peut être pas un hasard si aucun correcteur d’orthographe ne fonctionne bien… On n’arrive pas à computer cette connerie !! Cf le site http://bonpatron.com/ un des meilleurs correcteur… tu y mets un de mes textes.. il reste 300 fautes… (j’ai des textes sur mon blog si tu cherche(s?) ;)

 

« BonPatron » correcteur d’orthographe et de grammaire en ligne pour les textes français

« BonPatron » est un correcteur de grammaire qui trouve des fautes d’orthographe et de grammaire en français.

 

Julien Guézennec Tiens un film énorme sur les lettres silencieuses.. http://www.theverge.com/2012/7/1/3129227/silenc-project-silent-letters

 

‘Silenc’ project exposes the silent letters we never really say

www.theverge.com

The Roman alphabet is an unwieldy vessel for the multitude of sounds in many Wes..

 

Julien Guézennec Bon allé, dernier acharnement.. mais là ca me fait plus tripper que la grammaire ^^ une typo évolutive ->http://colloquy-type.com/ #typographie

 

Colloquy – affective type
colloquy-type.com

 

Merci à @bobylito qui vient de mettre les vidéos (du live) en ligne sur Dailymotion.

On trouve entre autre ma présentation sur readr.js . Mais aussi plein de super autres sujets (http://www.dailymotion.com/ParisJS #ParisJS)

Ça fait drôle de se voir en vidéo, et ça fait drôle de parler devant beaucoup de gens avec plein de lumière dans les yeux :)

 

ReadR.JS by Julien Guézennec (@molokoloco) – ParisJS 13

[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)

 

 

 

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/

@paulrouget à lancé un défis a @GeoffreyDorne pour refaire la bannière de son blog :
https://twitter.com/#!/paulrouget/status/123672623761719296

 

J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS plutot qu’en canvas, histoire de comparer les performances…

C’est un plugin très customisable avec un principe d’emitter de particules contenu dans une div.
L’animation n’est pas faite avec $.animate() mais grâce aux propriétés CSS3 de transition, ce qui permet de bénéficier de l’accélération matériel (GPU)

 

La petite démo est ici  (V0.1)  : http://jsfiddle.net/molokoloco/KASGN/

 

boxFx-test1

 

 

boxFx-test2

 
La grosse démo est ici (V0.3) : http://jsfiddle.net/molokoloco/NGm4M/

 

boxFx-test3

 

[Update ! New code here http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/]

 

Je voulais partager mon nouveau plugin jQuery d’horloge analogique. C’est un script léger, sans image, et uniquement basé sur CSS3 et jQuery.
J’ai essayé d’écrire un code compatible sur les différents navigateurs et c’est commenté… Merci à cet article “quick-look-math-animations-javascript” et d’autres, pour l’inspiration…

 

La petite démo est ici : http://jsfiddle.net/molokoloco/ajcRz/

La grosse démo (V2) est ici : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]

 

 

I want to share my new jQuery analogue clock plug-in.
This is à lightweight code, with no images, and only powered with jQuery and CSS3.
I’ve intended to write a annotated cross-browser -past and futur-proof CSS3 code and a simple as possible jQuery extend… Thank to this article “quick-look-math-animations-javascript” and others, for the inspiration…

 

You can watch the demo here : http://jsfiddle.net/molokoloco/ajcRz/

Demo V2 : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]

 

GitHub sources :

 

[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…)

 

My Book ReadR V1.12

 

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…

RESSOURCES :

 

[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…

Allé… je fais péter mon mix !!! Cadeau ;)

 

“Le mix tu peux pas l’ecouter en entier !!!” – Les Inrocks
“Pas vu a la radio, pas entendu a la télé, et pas en torrent non plus !” – Radio Nova
“C’est pas tombé dans l’oreille d’un sourd…” – Psychologie magazine
“Le mix avec un moteur dedans” – Michael Schumacher
NON ! OUI !
“Explicit arpège inside !!!” – Traxx
“Oh putain, t’as cassé les woofers !!!” – Tunning Mag
“Un mauvais DJ une bonne sélection” – Molokoloco
“Désolé, j’ai taché mon slip” – Rocco
“La musique rend sourd !!!” – Bernard kouchner
“Une tuerie” – Bowline for Colombia
“Breaking news : Dead can dance” – Reuters
“T’es trop à donf, tu bouges plus !” – Coda

 

Merci de régler le volume de manière satisfaisante. Oui merci.
Already pimped : Reset your equalizer and pump the volume !

 

PS : Le premier qui l’écoute en entier gagne un paquebot

 

 

 

Molokoloco Selecta – Progressive Electro – (#1) ~Braincer~

 

 

PLAYLIST :

Fuck friend – Brodinski
Maximum Joy – Shinichi Osawa
Think different – Agoria
Kickin Flowers – DjoZE
Disco Decay – Neelix
Xtatic Truth – Chrystal Fighters
& Down – Boys Noize
E Talking – Soulwax
Poison Lips – Vitalic
Escape velocity – The Chemical Brothers
Midnight Swim – Surkin Para One remix
Stereolove – Agoria feat. Villeneuve
Electro chox part 2 – Antoine Clamaran
Idealistic – Digitalism
Dare – Soulwax Gorillaz remix
Confesssion – Klaas
Discordance – Paraiba
Krack – Soulwax
One night in NYC – The Horrorist
The parachute ending – Birdy Nam Nam
Flashmob – Vitalic
Rock Star – Pro7 Frederic de Carvalho remix
The like mix – Sovnger
Emerge – Junkie XL Fisherspooner remix
Take a walk – Bolz Bolz
Compute – Soulwax
Satisfaction – Benny Benassi
Sweet light – Boys Noize
Prime time of your life – Daft Punk
Lovelight – Soulwax Robbie Riviera remix
Fucking mix party – Dj Thibaut
Move my body – Tiga
4 AM in Miami – Donald Glaude & Dj Exodus
Murder was the bass – DK8
Hanukkah – Etienne de Crécy
Hoax – Kring
Revolution 909 – Roger Daft Punk remix
Music is awesome – Housemeister
Sommer – Housemeister
Pulpalicious – Sovnger in love remix

http://soundcloud.com/molokoloco/1-braincer-1

[EDIT] New release here – Stay tuned !

 

I come again, this time with a jQuery “polished” HTML5 “page-as-a-book”

 

Paul Da Silva a écrit un livre « Piratons la démocratie », hélas distribué au format PDF. Il était difficile à lire à l’écran… J’ai donc récupéré le texte pour le mettre dans une page HTML(5!)…

Et voila !

 

 

Features :

  • Mise en page simple claire et typographique, compatible HTML5
  • Création d’un sommaire automatique, à partir des balises <H4> du texte
    • Le défilement des chapitres est indiqué dans le sommaire fixe
  • Gestion du défilement vertical de la page, pour ne pas se perdre dans le texte
    • Barre d’espace pour défiler de page en page (et les flèches Haut/Bas)
    • Flèches Droite/Gauche pour Agrandir/Reduire le texte
    • Un indicateur visuel sur l’article en cours de lecture pour stabiliser le défilement vertical
    • Assouplissement du scrolling par défaut de la “mousewheel
  • Chaque paragraphe est linkés avec un forum via l’API DISQUS, ce qui permet d’annoter le texte (API gratuite, qui accepte plusieurs type d’identification (Open ID, Facebook, Google, Twitter, Disqus, etc))
  • Défaut : codé en une nuit, uniquement testé Firefox 4 et Chrome 12 ;)

 

Demo : http://www.b2bweb.fr/bonus/piratons-la-democratie.html

GIT Sources : https://github.com/molokoloco/My-Book-ReadR

 

Fork me on GitHub

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

Public Repositories
My code on GitHub/molokoloco

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…

 

3 pages