JavaScript Function doc.Support LQDN banner

Posts Tagged ‘Code


 

63

CITATIONS

 

Facts do not cease to exist because they are ignored.” – Aldous Huxley http://twitter.com/AnonyOps/status/487321750665834497/photo/1 (@AnonyOps)

 

We need less hackathons, more apprenticeships. Less bootcamps, more classes. Less rockstars, more mentors. Develop people instead of product (@JordanRinke)

 

DNA is the ugliest code ever written (@thomasfuchs)

 

Junior dev: uses the latest hip frameworks Senior dev: uses hip frameworks from 3 years ago Wise dev: avoids frameworks and keeps it simple (@thomasfuchs)

 

On a tous au moins un ami plus con que nous. Lequel a aussi [...]


Lire la suite...

gueznet 62

Great quote: “If we have data, let’s look at data.
If all we have are opinions, let’s go with mine.
” -Jim Barksdale via @drnugent (@getify)

 

RT @LoicPrigent: “Elle est maquillée comme un compte de campagne UMP.” (@jujusete)

 

Sarkozy est une sorte de boomerang, quand il revient, il faut l’attraper au vol. (@PierreDeruelle)

 

Applaudir des sportifs surpayés pour taper dans un ballon,
et fustiger des salariés exploités qui défendent un service public
. #ohwait (@PierreDeruelle)

 

Et il dit qu’on a un échange avec Siri °°
C’est une idée fausse, l’interaction avec la [...]


Lire la suite...

Comme le veut la tradition, je mets ici en open-source “copyleft” mes travaux :)

Cette année, j’ai fait pour la première fois des interventions sur HTML5/CSS3 et en particulier JavaScript et… jQuery pour deux écoles Parisiennes de web.

Voici le document de cours et de travaux pratiques (TP) ”1ère année développement” qui m’a servi de support.

En ce sens, pour des débutants, le premier cours JS est dans l’unique but d’aborder jQuery par la suite.  Nous ne ferons donc qu’un rapide survol de l’ensemble des possibilités du langage.

  1. Historique du langage
  2. Les outils de développement
  3. La documentation
  4. Inter-agir en JavaScript
  5. Notions D.O.M. essentielles
  6. Notions Évènements
  7. Généralités sur le code JavaScript
  8. CONSOLE… live in your browser !
  9. Insérer des commentaires
  10. Déclaration de variables
  11. Les opérateurs
  12. Structures de contrôle
  13. Types d’objet
  14. Les types : tests et conversions
  15. Les fonctions “f()”
  16. Les méthodes et propriétés
  17. Plus loin avec les fonctions
  18. Les performances
  19. Remote debug your mobile
  20. …AUTRES RESSOURCES…
  21. Exercices complémentaires

Julien Guézennec, Cours/TP JavaScript, Licence Copyleft, 2014

 

cours-tp-javascript-doc

 

Comment’s are very welcome :)

C’est le second document de la série…

Comme le veut la tradition, je mets ici en open-source “copyleft” mes travaux :)

Cette année , j’ai fait pour la première fois des interventions sur HTML5/CSS3 et en particulier JavaScript et… jQuery pour deux écoles Parisiennes de web.

Cela m’a occupé des semaines et des WE pour rassembler les meilleures informations sur jQuery…

Voici le document de cours et de travaux pratiques (TP) ”1ère année développement” qui m’a servi de support.

Le cours est illustré avec de nombreux exemples en liens sur JSfiddle. Pour la partie jQuery, cela représente environ une semaine de formation.

  • COURS
    • Les outils de développement
    • jQuery ???
    • jQuery -in practice-
    • Documentation jQuery
    • Cibler et modifier des éléments
    • -Parenthèse- “this” is out of control!
    • Evènements utilisateur et dynamiques
    • Animations (“Effects”)
    • Les Formulaires
    • Les requêtes “AJAX”
    • “Promise” et “Deferred” ?
    • Les bases d’un plugin jQuery
    • Plugins jQuery utiles
  • EXERCICES / TP
    • Navigation par onglet
    • Validation de formulaires
    • Concept de carrousel

 Julien Guézennec, Cours/TP jQuery, Licence Copyleft

 

cours tp jquery doc

 

Comment’s are very welcome :)

C’est le premier document de la série…

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

 

Voici un projet que j’aimerais enfin présenter (6 mois après !). Je ne sais pas par où commencer tellement le sujet est vaste ^^

 

Pour cerner le sujet en quelques ligne : jQuery BoxFX est un émetteur de particules DOM
C’est un plugin jQuery léger (~1000 lignes) et hyper-customisable qui permet de créer/animer des éléments dans une page. De manière simple. En moins de dix lignes de configuration, pour les développeurs ou les designers…

 

Pour faire une animation il faut une surface, cela donne les coordonnées X et Y. C’est la “Box”. Cela peut être une DIV, le BODY… Ensuite il nous faut des trucs à faire bouger dedans… des abeilles ? !! Non trop intelligentes les abeilles… on va prendre des “graines” (seeds) On vas secouer des graines dans une boite ^^

Le principe et de 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. Quasi immédiatement, le plugin applique les propriétés CSS de fin, le navigateur se chargeant de faire l’animation, et, au bout d’un certain temps, on recycle l’élément. Le plugin fonctionne aussi très bien avec les Keyframes. Un des avantages est de pouvoir manipuler des éléments en masse, sans éditer de CSS en masse !!

 

Sur les page web nouvelle génération, il s’agit souvent de flux d’infos : le mur facebook avec des news, Twitter, votre site d’actus préféré, les commentaires autour des morceaux sur soundcloud… Des petites boites avec un contenu qui passent et peuvent disparaissent une fois vue… Un flux de de donné sous forme d’items…
BoxFX est capable de prendre un tableau de donné et de le dépiler dans un nombre d’éléments HTML que vous définissez. Cela peut être 50 news a faire défiler une fois dans une dizaine de “boites” ou à l’inverse 3 mots a faire tourner en boucle dans 100 petites boites.

 

Tout est expliqué dans le README du projet (qui est assez conséquent et en Anglais… Courage !)

 

Au fond, le plugin peut s’utiliser de toutes les manières :

  • Créer des éléments ou utiliser des collections existantes
  • Gérer les transitions, des images-clés (keyframes) et s’occuper de la compatibilité entre les navigateurs
  • Créez des animations, pleines de graphisme ou seulement automatiser l’insertion DOM
  • Gérer en masse les propriétés CSS de l’animations, ou régler finement sur la base de l’index d’élément
  • Appliquer des “effets” sur tous les éléments et les gérer dans le temps
  • Associer des données JSON (ou pas!), et se servir d’un template dynamique

(C’est la suite de http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/)

 

Rien ne vaut une démo… donc :

 

 

Voici un exemple concret pour votre site :

 

$emitter1 = $('div#emitterZone1').boxFx({
	seeds             : '<div>N°{id} - {title}</div>',
	data              : [
            {id:1, title:'toto'}, {id:2, title:'tutu'}, {id:3, title:'toto'}, {id:4, title:'tutu'},
            {id:5, title:'toto'}, {id:6, title:'tutu'}, {id:7, title:'toto'}, {id:8, title:'tutu'}
        ],
	effect            : '',
	newAtTop          : true,
	stopAtEnd         : 'detach',
	delay             : 4000,
	maxSeeds          : 10,
	emitterRadius     : 0, 
	styles            : {},
	keyframes         : [{
		duration         : '24000ms',
		timingFunction   : 'linear',
		iterationCount   : '1',
		direction        : 'normal',
		steps            : [{
				step: '0%',
				opacity: .7,
				transform : function() { return 'translate(-100px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; } // rotate('+$.getRand(-6, 6)+'deg) 
			}, {
				step: '30%',
				opacity: 0
			}, {
				step: '70%',
				opacity: 0
			}, {
				step: '100%',
				opacity: .7,
				transform : function() { return 'translate('+($.q.windowWidth + 100)+'px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; }
		}]
	}]
});
 
$('a#stop').click(function() { $emitter1.trigger('stop'); });

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

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.

 

bootstrap-twitter

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

 

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

4 pages