Infinity.js A ListView is a container that moves content in and out of the DOM on the scroll event. ListViews help keep repaint times of expensive pages down (and scrolling smooth) by making sure that there are never too many elements onscreen at a single time. ListViews excel at speeding up long lists of complex HTML elements, where new content is frequently appended to the end and existing content is rarely removed. ListViews are simple, and have several caveats: they can't be nested inside each other, and they can't have heights set via CSS. Note Because Firefox implements the unspecified behavior of <img> tags without src attributes differently than other browsers, if you're lazy-loading images inside of a ListView you should set their display to either block or inline-block, or Firefox will report the wrong height data to Infinity.
airbnb/javascript location.hash is dead. Long live HTML5 pushState! For a long time, location.hash was a way for AJAX applications to get back button and bookmarking support, and libraries like jQuery BBQ from Ben Alman made dealing with it cross browser a cinch. Now, with HTML5 coming of age, there is a new feature that aims to replace the use of location.hash with a better solution: pushState. Over on the Spoiled Milk blog, Jamie Appleseed describes the API as “a way to change the URL displayed in the browser through JavaScript without reloading the page.” It works on the history object like this: window.history.pushState(data, "Title", "/new-url"); The last argument is the new URL. In order to support the back and forward buttons you must be notified when they are clicked. Currently, pushState has support from the latest versions of Safari and Chrome, and Firefox 4 will be supporting it as well. If you’d like to read a more in depth overview of these new features, you should check out the aforementioned blog post by Jamie Appleseed.
Demander confirmation à la fermeture d’un onglet en javascript Votre utilisateur est en train d’écrire un commentaire, upload un ficher ou fait un truc quelconque qui n’est pas terminé. Puis il clique sur “fermer l’onglet”. Dans certains cas, vous voulez lui demander confirmation pour éviter qu’il perde tout son travail. var confirmOnLeave = function(msg) { window.onbeforeunload = function (e) { e = e || window.event; msg = msg || ''; // For IE and Firefox if (e) {e.returnValue = msg;} // For Chrome and Safari return msg; }; }; // message de confirmation générique du navigateur confirmOnLeave(); // message de confirmation personnalisé confirmOnLeave('Vous allez perdre votre travail, êtes vous sûr(e) de vouloir quitter la page ?'); Quand vous appelez la fonction confirmOnLeave(), le callback de l’événement ‘onbeforeunload’ va être remplacé par une nouvelle fonction. Cette fonction ne fait que retourner un message et assigner le message à l’attribut returnValue. La navigateur va réagir ainsi: Dans la plupart des cas, cette fonction suffit.
A plain english guide to JavaScript prototypes - Sebastian's Blog When I first started learning about JavaScript object model my reaction was of horror and disbelief. I was totally puzzled by its prototype nature as it was my first encounter with a prototype based language. I didn’t help that JavaScript has a unique take on prototypes as it adds the concept of function constructors. I bet that many of you have had similar experience. But as I used JavaScript more I didn’t just learn to understand its object model but also started love parts of it. Thanks to JavaScript I have find out the elegance and flexibility of prototypes languages. Prototypes in Javascript Most guides / tutorials start explaining JavaScript objects by going directly to ‘constructor functions’, I think this is a mistake, as they introduce a fairly complex concept early on making Javascript look difficult and confusing from the start. Prototype chains (aka prototype inheritance) Every object in Javascript has a prototype. Prototype inheritance chains can go as long as you want.
React | Why did we build React? There are a lot of JavaScript MVC frameworks out there. Why did we build React and why would you want to use it? React isn't an MVC framework. # React is a library for building composable user interfaces. React doesn't use templates Traditionally, web application UIs are built using templates or HTML directives. React approaches building user interfaces differently by breaking them into components. JavaScript is a flexible, powerful programming language with the ability to build abstractions. We've also created JSX, an optional syntax extension, in case you prefer the readability of HTML to raw JavaScript. Reactive updates are dead simple React really shines when your data changes over time. In a traditional JavaScript application, you need to look at what data changed and imperatively make changes to the DOM to keep it up-to-date. React takes a different approach. When your component is first initialized, the render method is called, generating a lightweight representation of your view.
CoffeeScript vs. TypeScript by Paul Oliver on Prezi Making Use of jQuery UI’s Widget Factory For a long time, the only way to write custom controls in jQuery was to extend the $.fn namespace. This works well for simple widgets, however, as you start building more stateful widgets, it quickly becomes cumbersome. To aid in the process of building widgets, the jQuery UI team introduced the Widget Factory, which removes most of the boilerplate that is typically associated with managing a widget. The widget factory, part of the jQuery UI Core, provides an object-oriented way to manage the lifecycle of a widget. These lifecycle activities include: Creating and destroying a widgetChanging widget options Making "super" calls in subclassed widgetsEvent notifications Let's explore this API, as we build a simple bullet chart widget. The Bullet Chart Widget Before we build this widget, let's understand some of the building blocks of the widget. The chart consists of a set of bars and markers overlaid on each other to indicate relative performance. The HTML for this chart looks like so: Summary
Sur la route d'Oxiane » Blog Archive Application AngularJS avec Yeoman, Express et JewelryBox sous Mac OS X Yeoman a été créé dans l’optique de faciliter l’initialisation de web apps JavaScript, en regroupant un ensemble de 3 utilitaires tournant sous Node.js : Yo : initialise la structure de la web app.Grunt : déclenche les phases de test, preview et build de la web app.Bower : assure la gestion des dépendances. Express est un framework d’application web fonctionnant lui aussi sous Node.js. Lorsque l’on génère le squelette d’une web app angular, Yo propose de gérer le design avec Twitter Bootstrap et des feuilles de style SASS. Les feuilles de style SASS, bien que très pratiques, doivent être compilées en CSS. Ruby est installé par défaut sous OS X, mais il est préférable, comme sous d’autres OS d’avoir recours à RVM, un outil en ligne de commande qui installe, gère et permet de travailler facilement avec plusieurs environnements Ruby différents. Pour installer et utiliser RVM il existe un client graphique très pratique : JewelryBox. Mise à jour de XCode Installation de JewerlyBox
Climb That Mountain: JavaScript Testing with Mocha JavaScript is a neat and powerful language. Sure it has its flaws, but serious software can be developed with it. The way I prefer developing JavaScript applications is by test driving the code with some kind of testing tool. I recently started playing with Visionmedia's mocha testing framework. This blog post will show you the first couple of steps you need to take to test drive your JavaScript code with mocha in the CLI. First of all, you need node.js to run JavaScript code in the terminal. At the time of this writing my current node version is 0.6.6. Next you need node's package management tool (npm). With these two steps you're ready to roll. I really wanted to help you - Dear Reader - so I created this shell script to make your life easier. curl -L | sh If everything goes OK, you will see this: create the src directory... create the test directory... write the package.json file... install npm packages... ✔ 1 tests complete (1ms) ✖ 1 of 2 tests failed:
Brian Ford AngularJS is like the missing Batarang on your utility belt of web development awesomeness. It gives you two-way data binding that's both easy to use and fast, a powerful directive system that lets you use create reusable custom components, plus a lot more. Express is an excellent webserver for Node.js that provides routing, middleware, and sessions. Incidentally, the two work quite well together! In this tutorial, I'm going to walk through writing a simple blog app with Angular and Express. If you'd rather skip to the end and see the finished product, you can grab the finished product from Github, or take a look at a live demo here. Anatomy of the App This application is really divided into two parts: client, and server. Getting the Angular Express Seed To kick start the process of writing an AngularJS app, I've created the Angular Express Seed, based on the Express web server (which runs on Node.js) and the Angular Seed. or download it as a zip. λ → npm install λ → node app.js <! Conclusion
A Few New Things Coming To JavaScript I believe the day-to-day practice of writing JavaScript is going to change dramatically for the better when ECMAScript.next arrives. The coming year is going to be an exciting time for developers as features proposed or finalised for the next versions of the language start to become more widely available. In this post, I will review some of the features I'm personally looking forward to landing and being used in 2013 and beyond. ES.next implementation status Be sure to look at Juriy Zaytsev's ECMAScript 6 compatibility table, Mozilla's ES6 status page as well as the bleeding edge versions of modern browsers (e.g Chrome Canary, Firefox Aurora) to find out what ES.next features are available to play with right now. In Canary, remember that to enable all of the latest JavaScript experiments you should navigate to chrome:flags and use the 'Enable Experimental JavaScript' option. Modules We're used to separating our code into manageable blocks of functionality. We can just import drive(): Maps Sets
AngularJS and SEO Turns out it is possible to have your AngularJS application indexed AngularJS and just about all JavaScript MVC frameworks modify the contents of your HTML structure which make the pre-rendered HTML invalid for search engines. Luckily there is a way to get around this and to have full SEO support for your AngularJS application by using some special URL routing and a headless browser to retrieve the HTML for you. Continue reading this article to figure out how to make this amazing framework work well with your favourite search engines. This page was first published on November 7th 2012 and was last updated on January 21st 2013. To best follow along with this article, be sure to clone the repo, yearofmoo/AngularJS-SEO-Article and look through the code and compare it to what's on the blog to get a better idea of how everything works. git clone cd . . Truly amazing!