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. 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. In my case, I wanted to diff the whole tree in html (since I can generated the tree itself from a nice re-usable Grails taglib). The library comes with a sample JavaScript “prettyHtml” diff which you can cut and paste and customise. Loving the new diff feature! Thanks to Neil Fraser for an awesome lib!
The XMLHttpRequest Object Abstract The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a server. Status of this Document This section describes the status of this document at the time of its publication. This document is published as a snapshot of the XMLHttpRequest Living Specification. If you wish to make comments regarding this document in a manner that is tracked by the W3C, please submit them via using our public bug database, or please send comments to public-webapps@w3.org (archived) with [XHR] at the start of the subject line. The W3C Web Applications Working Group is the W3C working group responsible for this specification's progress along the W3C Recommendation track. Publication as a Working Draft does not imply endorsement by the W3C Membership. Work on this specification is also done at the WHATWG. This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction
A Full Javascript Architecture, Part Two - Chrome Extension In the first part of this series we saw how to create a simple Node server which tracks and broadcast tweets about the What’s Next event in real time. In this one we’ll see how to develop a Google Chrome extension that will display the tweets thanks to the HTML5 notification API. The extension will also use the Local Storage API and the Socket.IO client side library. Google Chrome Extensions Google Chrome extensions are very easy to develop and have a good documentation to rely on. With extensions you can interact with web pages, tabs, bookmarks and servers. Just like a Chrome tab, extensions run in different processes to avoid taking down other extensions or the browser itself when an extension crashes. Extensions Architecture A Chrome extension is based on a manifest file that describe it's architecture with Json encoded data. In the manifest.json you declare the name, version and description for your extension. The What’s Next Extension Prerequisites The Manifest permissions browser_action
Javascript Object Tree Favelet Looking for the drawings? They're over here, and my drawing blog is this way. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs inShare33 The best strategy for dealing with Internet Explorer 6 is not to support it. Stop. This isn't one of those rants about IE6 or a campaign to try to kill it. I've scoured the web for resources and also included some of my own fixes for IE6 and now I've put it all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6. This massive IE6 guide took a while to put together, so bookmark it, share it, tweet it, and use it to save yourself and your coworkers hours of screaming at your monitor and banging your head against your desk or other inanimate objects. Update: Yann Faurie has graciously provided a French translation of this article. Table Of Contents Strategies Before addressing IE6-specific bugs and fixes, it's important to first visit some strategies that will help minimize the occurence of troublesome issues. Contents | Top IE6 Market Share Plan Your Design and Keep It Simple Use A Correct Doctype HTML 4.01 Strict A Simple Reset
Understanding MVC And MVP (For JavaScript And Backbone Developers) Last updated: 16th Jan, 2012. Before exploring any JavaScript frameworks that assist in structuring applications, it can be useful to gain a basic understanding of architectural design patterns. Design patterns are proven solutions to common development problems and can suggest structural paradigms to help guide us in adding some organization to our application. I think patterns are exciting as they're effectively a grass roots effort that build upon the collective experience of skilled developers who have previously faced similar problems as we do now. Although developers 10 or 20 years ago may not have been using the same programming languages for implementing patterns, there are many lessons we can learn from their efforts. In this section, we're going to review two popular patterns – MVC and MVP. MVC (Model-View-Controller) is an architectural design pattern that encourages improved application organization through a separation of concerns. Smalltalk-80 MVC Models Views Templating Summary
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. Le maître mot de ses concepteurs semble avoir été la versatilité. La théorie La pratique
Rich JavaScript Applications – the Seven Frameworks (Throne of JS, 2012) It’s no longer good enough to build web apps around full page loads and then “progressively enhance” them to behave more dynamically. Building apps which are fast, responsive and modern require you to completely rethink your approach. The premise was to take the seven top JavaScript frameworks/libraries for single-page and rich JavaScript applications — AngularJS, Backbone, Batman, CanJS, Ember, Meteor, Knockout, Spine — get the creators of all of them in one location, and compare the technologies head to head. Disclaimer: I was there to represent Knockout, so obviously I’m not neutral. * Yes, I know that’s eight frameworks, not seven. TL;DR Executive Summary For many web developers, it’s now taken for granted that such client-side frameworks are the way to build rich web apps. Technologies: Agreement and Disagreement As each SPA technology was presented, some fairly clear patterns of similarity and difference emerged. Agreement: Progressive enhancement isn’t for building real apps. Backbone
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. 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. Note bis : Dans chaque script, j'utilise la fonction console.log("script numéro exécuté !") Légende : Technique 1 Résultats dans le HEAD (test dispo ici) : Technique 2 Technique 3