La gestion des événements en JavaScript Cet article est une introduction aux notions nécessaires pour bien comprendre et utiliser les événements en JavaScript. JavaScript est un langage événementiel : le développeur a un contrôle limité sur le flux d'exécution du code, qui est déterminé principalement par les interactions avec l'environnement (activation d'un lien, mouvement de la souris, chargement du contenu du document, …). La gestion des événements est un sujet essentiel dans le cadre de ce langage. Elle reste pourtant assez mal comprise, en partie à cause des lacunes et erreurs d'implémentation des différents navigateurs. Cet article présente les trois grandes familles d'interfaces qui sont aujourd'hui à notre disposition : Le DOM niveau 0, standard de facto hérité de Netscape ; il s'agit de l'interface la plus largement supportée mais aussi la moins puissante. Les concepts présentés dans la suite de l'article sont communs à ces trois familles, sauf indication contraire. L'objet Event target type stopPropagation preventDefault
16 JavaScript Concepts You Must Know Well (Essential JavaScript Concepts for Modern JavaScript Development ) If you plan to work as JavaScript Professional, you must know some JavaScript concepts and JavaScript-related web-development technologies, particularly as a modern JavaScript developer. If you know the 16 concepts enumerated below, you have the skill necessary to build world-class modern JavaScript web applications, and you are set for the near future—0 to 3 years. I will expound on each of these sixteen concepts, and I am hopeful all of us will have become better JavaScript programmers by the time we get through all of them. I have completed most of the 16 concepts with just a few more to go, so keep reading and learning. I trust you have learned JavaScript properly or you already know JavaScript enough to build a simple JavaScript-only web application.
Light Table - a new IDE concept You can now try Light Table out via the Light Table Playground! Light Table's kickstarter has wrapped up! Despite the dramatic shift toward simplification in software interfaces, the world of development tools continues to shrink our workspace with feature after feature in every release. Even with all of these things at our disposal, we're stuck in a world of files and forced organization - why are we still looking all over the place for the things we need when we're coding? Why is everything just static text? Bret Victor hinted at the idea that we can do much better than we are now - we can provide instant feedback, we can show you how your changes affect a system. We can do better, and to that end, let me introduce you to Light Table is based on a very simple idea: we need a real work surface to code on, not just an editor and a project explorer. Light table is based on a few guiding principles: Let's take a look at how these things manifest themselves in Light Table. Docs everywhere
BNOTIONS We laughed, we learned and we connected with hundreds of developers at the jQueryTO 2013 conference in downtown Toronto. The 2-day conference attracted the top talent in the city and beyond, featuring cutting edge presentations and a stellar speaker lineup, which included Paul Irish and Addy Osmani from the Chrome team and some of the biggest names in the jQuery developer community. (Slides for all the speaker’s presentations follow below.) We used Google+ as a social platform during the event and asked everyone to “check-in” and use “party mode,” so we could crowd-source photos from the conference. Over 2 days, more than 150 photos were uploaded from attendees! You can find all of them on the event page here: A collection of great photos from jQueryTO 2013 “A huge thank you to the 500+ devs that stayed to watch my paint performance keynote at +jQueryTO. We want to thank all the volunteers for their help in running an awesome conference. Greg Carron | Chief Evangelist | @pixeladdikt
95+ Stunning Jquery Effects, Lightbox, Tutorials JQuery is one of the most popular JavaScript frameworks which are powerful tools and huge benefit for developers to improves the designs integration with Web applications. This article will briefly introduce you to the jQuery with excellent examples. JQuery is really wonderful plug-in for designers which are giving attractive functionality to the web sites. 01. In this demo, what appears to be a regular static image gallery is given some extra interactivity by using a multi-layer zoom effect when hovering over an image. 02. This demo shows the much used Flash effect of circling an image around a page – all done using jQuery. 03. Although this demo may seem like eye-candy at first glance, it could be a very powerful tool for working with large images when coupled with AJAX or HTML5 local storage. 04. Here the developer makes good use of color transitions and animation to produce a very attractive and interactive menu. 05. 06. 07. 08. Another unique take on the typical slideshow interface.
Lazy Load Plugin for jQuery Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac. For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H). When checking the demos clear browser cache between each request. How to Use? Lazy Load depends on jQuery. You must alter your image tags. <img class="lazy" data-original="img/example.jpg" width="640" height="480"> $(function() { $("img.lazy").lazyload(); }); This causes all images of class lazy to be lazy loaded. PRO TIP! Setting Threshold Event to Trigger Loading
JSONLint - The JSON Validator. 24 JavaScript Best Practices for Beginners | Nettuts+ As a follow-up to "30 HTML and CSS Best Practices", this week, we'll review JavaScript! Once you've reviewed the list, be sure to let us know what little tips you've come across! JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to always use the former set when comparing. "If two operands are of the same type and value, then === produces true and ! However, when working with == and ! For those unfamiliar, the "eval" function gives us access to JavaScript's compiler. Not only will this decrease your script's performance substantially, but it also poses a huge security risk because it grants far too much power to the passed in text. Technically, you can get away with omitting most curly braces and semi-colons. However, consider this: One might think that the code above would be equivalent to: Unfortunately, he'd be wrong. As you'll notice, the indentation mimics the functionality of the curly brace. Consider the following code:
Frontend Single Point of Failure | Dean Hume At this year's Velocity Europe conference, I watched a great talk by Google's Patrick Meenan about 3rd party scripts and frontend Single Point of Failure (SPOF). A single point of failure is a part of a system that, if it fails, will stop the entire system from working. Quite often, you may add 3rd party scripts such as jQuery, social sharing buttons or Ad tracking scripts to your website with the best intentions, but depending on the way that these scripts are loaded you could potentially create a frontend single point of failure that can block the entire site! If these 3rd party scripts are not implemented and deployed properly they pose a significant risk for the websites that host them. Once you have downloaded and added the plugin to Chrome, simply navigate to your desired webpage. Click on the plugin and you will be presented with a list of the blocking scripts. As you surf the web with this plugin enabled, you may notice how many websites have blocking scripts on their pages!
Introduction to JavaScript Source Maps Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps. Basically it's a way to map a combined/minified file back to an unbuilt state. Demo: Get original location The above demo allows you to right click anywhere in the textarea containing the generated source. Real world Before you view the following real world implementation of Source Maps make sure you've enabled the source maps feature in either Chrome Canary or WebKit nightly by clicking the settings cog in the dev tools panel and checking the "Enable source maps" option. Firefox 23+ has source maps enabled by default in the built in dev tools. So... Demo: View scripts panel (with source maps) on fontdragr.com Why should I care about source maps? Demo: Write ES6, debug it, view source mapping in action How does the source map work? Potential XSSI issues
Thinking Async Here's the rub: when you load JavaScript from a third party you should do it asynchronously. You might want to load your own scripts asynchronously too, but for this article let's focus on third parties. There are two reasons for this: If the third-party goes down or is slow, your page won't be held up trying to load that resource.It can speed up page loads. At Wufoo, we just switched over to an asynchronous embed snippet. Let's explore this whole async thing. Uhm. There is a little terminology involved here that will help us understand the umbrella "asynchronous" term. "Parser blocking" - The browser reads your HTML and when it comes to a <script> it downloads that entire resource before moving on with the parsing. To prevent problematic parser blocking, scripts can be "script inserted" (i.e. insert another script with JavaScript) which then forces them to execute asynchronously (except in Opera or pre 4.0 Firefox). The HTML5 Way The Classic Async Way Ad Networks Couple of things to note here: