Analyse : Différentes façons d'intégrer un script Javascript | Blog de Jean-Philippe Blary
Récemment, je me suis posé quelques questions concernant les différentes possibilités d'intégrer des scripts Javascript dans une page web. On trouve différentes méthodes sur Internet : l'un dira qu'il faut toujours mettre ses scripts en bas du BODY, un autre dira qu'il faut les charger en programmation (avec appendChild )... J'ai voulu mettre mes idées reçues de côtés, et faire des tests moi-même de tous les cas possibles. Pour cela, j'ai utilisé l'outil WebPageTest, qui permet d'analyser ce qu'il se passe exactement au niveau navigateur web. J'ai créé une page simpliste en HTML5, avec juste quelques paragraphes Lorem Ipsum, 10 images (toutes de 30Ko), et un fichier CSS de 96Ko. Je ne modifie que l'insertion des deux scripts JS "script0.min.js" (374Ko) et "script1.min.js" (93Ko). Note : Pour chaque tecnhique, je vais faire à chaque fois deux tests : tout d'abord on le rajoutant dans le HEAD, puis tout en bas du BODY. Légende : Technique 1 Résultats dans le HEAD (test dispo ici) : Technique 2
egghead
20 JavaScript Frameworks Worth Checking Out
The number of web applications being created and used has grown rapidly since the new millenium. And importantly, so has the sheer complexity of them -- specially on the front end. No more static pages, no sir! You have a ton of sections each interacting with each other and the server and yes, it's as complicated as it sounds and just as hard to pull off. If you think jQuery is the answer, you lose a cookie and get an F grade! Creating responsive, fluid, and maintainable interfaces for web apps isn't as easy as one would imagine -- there is data to be sent back to the server and the results parsed, data stores to be updated, views to be re-rendered and so much else that needs to be done in the background. The monstrous rise in the number of web apps being built recently has really made it apparent that we need better tools and frameworks and the devs have responded with a staggering amount of solutions. Sproutcore powers a lot of high profile apps including MobileMe amongst others.
JavaScript : 3 fondamentaux
Après quelques années à écrire dans un langage, on finit facilement par oublier les premières difficultés que l’on avait rencontrées. Et à force de faire de la veille, de l’autoformation et de parler entre experts dans des conférences, j’ai un peu quitté la réalité de la majorité des équipes Web. Maintenant que je suis consultant indépendant je retourne dans des équipes qui avaient autre chose à faire que de se demander si on a le droit de parler de classe en JavaScript, quelle est la bonne définition d’une closure, ou quelles sont les fonctionnalités de EcmaScript 5 qui auraient du rester dans Ecmascript.Next. J’avais déjà parlé sur ce blog de JavaScript et la programmation orienté objet pour les développeurs PHP, nous allons explorer ici les 3 notions fondamentales de JavaScript qui sont probablement les plus grosses sources de bugs, d’incompréhension et de frustration pour le développeur Web moyen. Et qui accessoirement sont la base d’une programmation plus évoluée par la suite.
jQuery Mobile | jQuery Mobile
EaselJS | A Javascript library that makes working with the HTML5 Canvas element easy.
Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added Graphics.store() / unstore() The Story Why we built EaselJS About EaselJS EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries. By b10b b10b
Memory leak patterns in JavaScript
JavaScript is a powerful scripting language used to add dynamic content to Web pages. It is especially beneficial for everyday tasks such as password validation and creating dynamic menu components. While JavaScript is easy to learn and write, it is prone to memory leaks in certain browsers. In this introductory article we explain what causes memory leaks in JavaScript, demonstrate some of the common memory leak patterns to watch out for, and show you how to work around them. Note that the article assumes you are familiar with using JavaScript and DOM elements to develop Web applications. Memory leaks in JavaScript JavaScript is a garbage collected language, meaning that memory is allocated to objects upon their creation and reclaimed by the browser when there are no more references to them. Internet Explorer and Mozilla Firefox are two browsers that use reference counting to handle memory for DOM objects. What's wrong with circular references? Listing 1. Another memory leak pattern
A perfectly squared circle
13 Awesome Javascript Libraries for HTML5
The growing popularity of HTML5 has created a boom in the development of JavaScript libraries that can integrate with HTML5. These libraries are easy to implement and can instantly provide a whole new level of power and control over an existing HTML 5 application. We put together a list of 13 awesome, light JS libraries to help you get your next HTML 5 application off and running. CreateJS is actually a suite of four different JavaScript libraries. WYSIHTML5 Is a lightweight rich text editor that can generate valid and semantic HTML5 markup. Fixie is a great way to add in the Latin filler text based on the interpreted HTML5 tag used. Sisyphus uses local storage to save your existing form input in the event of a browser crash. Kinetic JS aims to make content creation and manipulation in the canvas a much easier and faster experience. Paperfold uses CSS3 and JavaScript to create a neat visual effect of making divs appear like they are folding like paper. About the author Blog
Adding a JavaScript-based diff « Glen Smith
Posted by Glen on Mar 17, 2011 in Grails, Groovy | 3 comments I’ve been on the hunt lately for some JavaScript based diffing routines.I’ve had a look at a few of them, and the one I’ve settled on is google-diff-match-patch which they use in the Grails wiki! (Thanks Peter Ledbrook for the pointer!) My particular need was around diffing a fairly complex “tree” structure. These tree structures are actually imported from files that 3rd party releases from time to time and client import them directly into our product (it’s not always easy to see what’s changed between the versions they release – hence the need for a quick “visual diff” solution. Here’s an example of the one of these control libraries (the Australian ISM) being diffed (notice the token changes I’ve hacked into the version on the right): What I really like about google-diff-match-patch is that the API is very simple, and comes in a single JS file with no dependencies. Loving the new diff feature!
