A JavaScript Module Pattern Eric Miraglia (@miraglia) is an engineering manager for the YUI project at Yahoo. Eric has been at Yahoo since 2003, working on projects ranging from Yahoo Sports to YUI. For the past several years, Eric and his colleagues on the YUI team have worked to establish YUI as the foundation for Yahoo’s frontend engineering work while open-sourcing the project and sharing it with the world under a liberal BSD license. Eric is an editor and frequent contributor to YUIBlog; his personal blog is at ericmiraglia.com. Prior to working at Yahoo, Eric taught writing at Stanford and elsewhere and led frontend engineering teams at several startups. Global variables are evil. Douglas Crockford has been teaching a useful singleton pattern for achieving this discipline, and I thought his pattern might be of interest to those of you building on top of YUI. 1. YAHOO.namespace("myProject"); This assigns an empty object myProject as a member of YAHOO (but doesn’t overwrite myProject if it already exists). 2.
Réaliser un lien « top » qui apparaît au scroll de la page avec jQuery - Les tutoriels | CreativeJuiz - Du jus, des fruits, du fun... et du Web ! Réaliser un lien « top » qui apparaît au scroll de la page avec jQuery Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 17 431 fois. C’est décidé, je vous proposerai de temps à autres quelques tutoriels relativement simples lorsque mes disponibilités me le permettront (ou plus simplement pour faire une petite pause dans mon travail). Avant-propos L’utilisation de la bibliothèque jQuery implique pour le visiteur un téléchargement de celle-ci, qui, non-zippée peut-être assez lourde si vous ne l’utilisez que pour ajouter un petit lien « top ». L’idée Ce que nous souhaitons c’est faire apparaître un lien qui mène en haut de page. Le code par étapes Petit rappel : nous utilisons jQuery. En espérant que ce tutoriel vous aura été utile et abordable. A la prochaine, enjoy ! Liens utiles : - Bibliothèque jQuery - Documentation jQuery À propos de Geoffrey Voir ses articles • Son site personnel • Son compte Twitter Laisser un commentaire
jQuery Proven Performance Tips And Tricks (Slides) Thanks to everyone that attended the jQuery London and London Web Standards meetups this month. As requested, here are the slides from my talks including links to all of the jsPerf tests embedded for each section. Summary In case you missed the talk, the main takeaway from it was the importance of performance-testing your JavaScript and jQuery code (and appreciating performance gotchas you can keep in mind when writing code that uses jQuery). I feel that this is an area developers can significantly benefit from investigating further. If you haven't been using it, jsPerf.comis the bizness, so check it out. From the feedback so far it looks like the majority of the audience found the content useful, so please feel free to share the slides if you think they can assist other developers. Thanks I'd like to extend my thanks to Adam Sontag, JD Dalton, Mathias Bynens, Andree Hansson and others for helping tech review the slides and tests. Until next time, g'luck with your projects! Addy
JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Leaving out the var statement inside the function test will override the value of foo. // global scopevar items = [/* some list */];for(var i = 0; i < 10; i++) { subLoop();}
Formly - Style et validation sur vos formulaires HTML avec jQuery Formly est un plugin jQuery permettant de donner du style à vos formulaires et ajouter une couche de validation Javascript avant la soumission du formulaire. Les formulaires HTML de base ne sont pas très design ... grâce à Formly vous aurez la possibilité de donner du style aux input, checkbox, radio ... en quelques lignes de code ! En effet, la librairie dispose d'un système de thème permettant de donner un style plutôt sympa à vos formulaires. Par défaut, il existe un thème light et un thème dark. A vous de décider de la forme à donner à votre formulaire, son style sera automatiquement appliqué. Deuxième point, le système de validation Javascript des champs, paramètrable directement dans le HTML du formulaire grâce aux propriétés validate, required ... Voici un exemple d'utilisation: 1. 2. 3. 4. 5. 6. 7. 8. Et le jQuery pour instancier le plugin: 1. Plutôt pratique comme plugin, reste à créer ses propres thèmes pour coller au mieux avec son site. Site Officiel
Learn JavaScript | Mozilla Developer Network Our policy on modern JavaScript JavaScript is an actively evolving language and has changed greatly over the years. In particular, the 6th edition of the language (sometimes known as ECMAScript 2015 or ES6), introduced in 2015, added many new features. At the same time, to maintain backwards compatibility with older websites, old features of the language have been retained, even when they are no longer considered good practice. We think that the features added to JavaScript in ECMAScript 2015 and subsequent versions enable developers to write more readable, reliable, and expressive code, and that it's important to learn about them. The features we teach in this course are stable and have been supported by all major browsers for several years. This topic contains the following modules, in a suggested order for working through them. JavaScript first steps In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?" JavaScript building blocks
Processing.js Demos below! As a sort-of reverse birthday present I’ve decided to release one of my largest projects, in recent memory. This is the project that I’ve been alluding to for quite some time now: I’ve ported the Processing visualization language to JavaScript, using the Canvas element. I’ve been working on this project, off-and-on now, for the past 7 months – it’s been a fun, and quite rewarding, challenge. The full scope of the project can be broken down into two portions: The Processing Language The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. It works “fairly well” (in that it’s able to handle anything that the processing.org web site throws at it) but I’m sure its total scope is limited (until a proper parser is involved). The language includes a number of interesting aspects, many of which are covered in the basic demos. The Processing API The second portion of the project is the full 2d Processing API.
Ubersvn - Une application complète de gestion de Subversion sociale UberSVN est une plateforme web permettant de gérer votre Subversion Apache tout en ajoutant une dose sociale pour le développement collaboratif. Lorsque vous travaillez collaborativement avec Subversion sur un projet, la communication doit souvent se faire pour savoir qui commit quoi, qui travaille sur quelle partie etc. UberSVN est une plateforme web permettant à la fois de gérer vos différents repository SVN: Bien pratique, plutôt que d'avoir à lancer votre script préféré, ou pire taper les commandes une par une. ubersvn permet aussi de gérer les différents utilisateurs et équipes de développeurs, leurs droits ... Dans un premier temps, ubersvn permet donc de se simplifier la tâche en ce qui concerne la gestion des projets SVN et les utilisateurs associés. La deuxième partie concerne les fonctions sociales de l'application qui permettront aux développeurs de communiquer sur un mur leurs différents commit, commenter certaines versions etc. Qu'en pensez-vous ? Site Officiel
Learning Three.js