Saturday, February 23rd, 2008
Category: Ajax
, Programming, Yahoo!
JavaScript is a language that can be approached from many angles. Historically it was UI-driven web developers that started playing with it, but lately and with the advent of large JS applications "the world's most misunderstood programming language" is also written by people that feel much more at home in higher programming languages. The nature of JavaScript then can become a barrier for fluid and rapid development.
This is where in the best of cases developer specialization comes in - which is not cheap. Another way to tackle the issue is to use metaprogramming to make the end language behave in the way you want it to.
James Coglan got inspiration from Dustin Diaz' DED|Chain and wrote a chaining wrapper for the the YUI's DOM, event, animation and Ajax modules called Ojay.
He wraps up his intentions thus:
To me, expressiveness is not just ’syntactic sugar’, a tool to help you type fewer lines of code. It’s a core factor in how maintainable and well-designed your codebase is. We have a team made up of Java devs, a few Ruby enthusiasts and a couple of JavaScripters, and it’s crucially important to us that anyone can look at a piece of code and figure out what it does. Code should tell a story.
What this translates to is shown in this example:
JAVASCRIPT:
-
-
$('a#run-this-code').on('click', $.stopEvent)
-
.setContent('Running...')
-
._('#example').animate({
-
height: {to: 0},
-
opacity: {from: 1, to: 0}
-
}, 0.5)
-
._($.HTTP).GET('/service/hello.html')
-
.insertInto('#example')
-
._('#example').animate({
-
height: {to: 80},
-
opacity: {from: 0, to: 1}
-
}, 0.7);
-
I am not sure about the morale of this story, but I can see that we will see more and more of this sort of metaprogramming and skillset mash-up happening in the nearer future. Therefore it is great to start conversations early about how to tackle multidisciplinary teams writing code.
Wednesday, September 12th, 2007
Category: Toolkit, Programming
ActiveState have announced the launch of The Open Komodo Project which will offer an open source code base from which to develop integrated development environments.
The Open Komodo Project, based on the award-winning Komodo IDE, is a new initiative by ActiveState to create an open source platform for building developer environments. The Open Komodo Project will create Firefox-integrated web developer tools that support the open web.
The Open Komodo Project aims to create a full-featured web development tool for client-side web development integrated with Firefox©, Mozilla's free, open source web browser, and based on the award-winning Komodo IDE. This new tool, codenamed Komodo Snapdragon, will be developed in collaboration with the open source community.
Best known for their ActivePerl, Komodo Edit and Komodo IDE development tools, ActiveState wanted to give back to the open source community which has long supported their products and efforts:
Meanwhile, our friends within the Mozilla Community were looking for tools and applications that advocate the open web. Since Komodo is built on the Mozilla platform and ActiveState has had a long-standing relationship with the open source community, making Komodo a part of the technology stack for the open web was an obvious choice, one that benefits both the open source community and ActiveState.
This announcement even got Dojo's Alex Russell all worked up:
Very few of the Web IDE vendors seem to really “get” the web, and along with the folks at Aptana and Panic, the ActiveState bunch have impressed the hell out of me with their constant support of Open Source, deep understanding of why webdev sucks, and what they can do to fix it.
The first technology preview is expected to be ready by early November along with access to a public source repository and the Open Komodo website.
Full information about the project can be found on their project page
Saturday, June 30th, 2007
Category: JavaScript, Google, Programming, Widgets
I've written some notes on the Google Gadget API and how to write a gadget, targeted at developers who already know Ajax.
What's a Gadget?
- The gadget is an XML file sitting on your server. In my case, http://ajaxify.com/run/widgets/google/diggroundup.xml. It will get cached, so effectively it must be a static file.
- The user adds your gadget to their igoogle portal, or codes it into their own website, by specifying this URL (it may be done indirectly - via the gadget registry. You'll appear in the registry if you've submitted your gadget to igoogle.)
- The gadget is rendered as an iframe, so you have all the usual security constraints which stop you borking the portal and other gadgets. This also means you can't communicate with other Gadgets other than via than remote calls to a common third-party server (or has anyone tried hooking them together using the iframe-fragment identifier hack? ).
It's based on a Digg Roundup tool, where the gadget show Digg stories according to user preferences such as topic and whether to go for popular or upcoming stories.
Wednesday, January 31st, 2007
Category: JavaScript, Programming, Remoting
Plaxo's Joseph Smarr has been playing with on-demand javascript, i.e. downloading extra JS code after the page has already loaded. When you grab the code via a remote call and eval() it, it doesn't get into global scope. So here's how he dealt with it.
Here’s a simplified version of the situation we faced:
function loadMyFuncModule() {
// imagine this was loaded via XHR/etc
var code = 'function myFunc() { alert(\"myFunc\"); }';
return eval(code); // doesn’t work in FF or IE
}
function runApp() {
loadMyFuncModule(); // load extra code “on demand”
myFunc(); // execute newly loaded code
}
The thing to note above is that just calling eval() doesn’t stick the code in global scope in either browser. Dojo’s loader code solves this in Firefox by creating a dj_global variable that points to the global scope and then calling eval on dj_global if possible:
function loadMyFuncModule() {
// imagine this was loaded via XHR/etc
var code = 'function myFunc() { alert(\"myFunc\"); }';
var dj_global = this; // global scope object
return dj_global.eval ? dj_global.eval(code) : eval(code);
}
This works in Firefox but not in IE (eval is not an object method in IE). So what to do? The answer turns out to be that you can use a proprietary IE method window.execScript to eval code in the global scope (thanks to Ryan “Roger” Moore on our team for figuring this out). The only thing to note about execScript is that it does NOT return any value (unlike eval). However when we’re just loading code on-demand, we aren’t returning anything so this doesn’t matter.
The final working code looks like this:
function loadMyFuncModule() {
var dj_global = this; // global scope reference
if (window.execScript) {
window.execScript(code); // eval in global scope for IE
return null; // execScript doesn’t return anything
}
return dj_global.eval ? dj_global.eval(code) : eval(code);
}
function runApp() {
loadMyFuncModule(); // load extra code “on demand”
myFunc(); // execute newly loaded code
}
And once again all is well in the world.
Sunday, January 14th, 2007
Category: JavaScript, Library, Programming
Dan Webb asks what are your JavaScript essentials? Those bits and pieces you can't live without that get copy/pasted from project to project. His pragmatic list includes the $ function, getElementsByClassName, Dean's event handling, the JS 1.6 array methods, and the DOMContentLoaded event. His full script that he guarantees he _won't_ support is here.
Do you start with a full on framework or library no matter what the project size, or do you have a small script you use similiar to Dan's? Do you go with a clean slate until you really feel pain, or do you just swear off javascript and start with GWT or a drag and drop IDE?
Sunday, December 3rd, 2006
Category: Programming, Recording
Googlers Joe Walnes and Adam Connors gave a presentation on testable Ajax back in September (we didn't cover it at the time) ... "Does my button look big in this? Building testable AJAX applications." at the Google London Test Automation Conference. The theme is how to automate website testing with all the complexity Ajax adds. They talk mostly about testing strategies and technologies (like JUnit), but also mention the importance of architecting for testability.
Direct Link
Tuesday, October 3rd, 2006
Category: UI, Canvas, Programming
Dynamic graphics inside the browser are starting to become a little bit more practical, thanks to increased support for Canvas and SVG. I recently discussed eight competing techniques for generating dynamic graphics in an Ajax application, each with their own implications for portability, usability, and performance.
The following techniques are descibed:
- SVG
- Canvas
- Dynamic images from the server
- VML
- Richer Plugin (e.g. Flash)
- CSS/DOM
- data: resource
- XBM
Wednesday, September 20th, 2006
Category: JavaScript, PHP, Programming
Ever feel like, when you're coing up that next great Ajax application, that you're doing the same things over and over again? Like there has to be something better out there to help you make development of common functionality a lighter and easier task? MVC (Model/View/Controller) just might be what you're looking for, and in this new posting on PHPied.com, they show you the basics of creating your own Ajax MVC framework.
This is sort of a framework thing to create AJAX applications, based on the MVC design pattern. Yep, I have a lot of buzzwords here, I admit, but this shouldn't be taken too seriously. I was doing a bunch of small projects lately and I found myself using something like this little framework, without even thinking about it. Then I thought about it and I found that the scripts and the organization of them may resamble MVC a bit. So how does MVC fit when you mix things like thin and fatter client, HTML, JavaScript, XMLHttpRequest, PHP and CSS?
They answer the question by comparing the "usual flow" of an Ajax application to the structure that MVC provides. They use PHP for some of the backend work, but they use Javascript (including some Yahoo UI libraries) to handle the interaction with the user (in the View). They also use an Ajax connection to grab data from the backend server and a little extra Javascript to push that content out to the page.
It's a pretty simple example of what can be done, but it gives you a good idea of how Ajax/advanced Javascript can be integrated very easily with the Model/View/Controller style of development. To check out a demo of this mini-app, click here, and to just grab the source files click here.
Tuesday, September 19th, 2006
Category: JavaScript, Programming
Javascript is just like any other language - well, sorta. It has the power to make your web applications really earn their keep and perform for the user. It also can be confusing if things start getting pretty complex. Thankfully, there's something that can help you compartmentalize your code and make it simpler to use more modularly - the object oriented functionality Javascript offers. Don't know how to get started with it? Well, check out this new article over on Digital Web Magazine for a few tips.
As scripts get larger, functions become more interrelated. Suddenly, you’ve got ten functions on a page, six of them calling each other to accomplish one task, and another four working towards something else entirely. For someone taking a first look at this code, it certainly wouldn’t be immediately clear which were meant to work together and which weren’t. This is where objects come in.
The author, Jonathan Snook, gets down to the basics of objects in Javascript - what they are, how to create them, how to access them, and much more. If you've ever done any work with the popular libraries like Prototype or Script.aculo.us, some of this will look familiar. He even gets into design patterns in OOP for Javascript with setting up Singletons and Factory patterns.
Friday, September 15th, 2006
Category: XmlHttpRequest, Toolkit, Programming
According to Harry Fuecks in this post on the SitePoint PHP blog, using Ajax should be easier:
The Catch 22 of AJAX is, for the sake of an easy life, most of the time we want to write “synchronous code” but asynchronous is the only way to avoid some rather nasty usability issues. This means rather than being able to write simple code, as we’d like to. We’re required instead to handle this via callbacks, but that’s now introduced a whole load more potential issues.
These issues he mentions include requiring a global XMLHttpRequest object to be available and handling multiple calls to a javascript function (like if the user gets a little too impatient). To help combat these issues, Harry recommends a two projects out there that have the functionality to make life a little bit simpler:
Friday, August 25th, 2006
Category: JavaScript, Programming
The Find Motive blog has a quick tip for Lightbox users looking for a little bit different way to tdisplay the images. They show how to push the information into an iframe instead.
Particle tree's hack of Lightbox allows other content besides images to be put into a Lightbox, but it uses AJAX to pull the content into the box. For my purposes this is overkill because an AJAX call is loading an iFrame which results in 2 HTTP requests and for forms inside a lightbox this won't function the way I want. I want the form to act separately from the current page so the user will not be redirected when the form is submitted. To me this gives the UI a smoother feel. Here is the code section that I modified.
Here's the code:
JAVASCRIPT:
-
-
// Write an iFrame instead of using an AJAX call to pull the content
-
loadInfo: function() {
-
info = "<div id='lbContent'><center><a href='#' class='lbAction' rel='deactivate'>(x) close.</a></center><iframe frameborder='0' width='500' height='350' src='" + this.content + "'</iframe></iframe></div>";
-
new Insertion.Before($('lbLoadMessage'), info)
-
$('lightbox').className = "done";
-
this.actions();
-
},
-
You can also just download the code to make the update.
Tuesday, August 15th, 2006
Category: JavaScript, Programming
Josh Gertzen of Thinwire has written up a detailed survey of techniques for OO-style inheritance in Javascript, leading up to the technique he's recently developed to overcome flaws in the existing approaches.
I set out to see if I could devise a working design of my own. It took me about a week to work out something that behaved correctly under all situations, but once I felt confident that it was working, I quickly integrated the approach into the framework. As it stands now, both the beta and beta2 releases of ThinWire leverage that initial design.
His analysis starts with standard prototype chaining techniques (SubClass.prototype = new BaseClass();) and explains where they fall down, in particular problems with calling superclass methods. He then walks through a range of improvements, notably Doug Crockford's well-known "classic inheritance" technique.
Admittedly, Crockford's approach is one of the most solid that I found and there is no arguing that based on the body of work he has done on JavaScript programming, he is a master of JavaScript. However, if you review the code for the three classes and then look at the output, you'll notice that there is subtle issue.
... (I)t should be clear that the results of the above example are incorrect. Additionally, a downside of Crockford's approach and of many other approaches, is that every super call requires an additional method call and additional processing of some kind. Whether this is an issue for your situation, will depend on how many super calls you have in your code. ThinWire makes extensive use of super calling in it's client-side code and therefore it's important that super calls are as fast as possible.
Josh eventually developed an alternative solution that is somewhat Aspect-Oriented:
Essentially, 'extend' wraps every method in your class definition with an intermediate function that swaps the super class reference '$' to the correct reference with every method call. The only real issue with this approach is that it requires a number of intermediate functions, which may have an impact on performance.
A further refinement exploits the little-known callee property.
(T)he 'arguments' array contains a reference in the property 'callee', which points to the current function that is being executed. This is important, because it's the only way that you can get such a reference since the function reference available via the 'this' object, always refers to the overridden function that is defined in the class at the top of the hierarchy.
See Josh's article for all the code and analysis on Javascript inheritance techniques.
(Thanks to Ted Howard for the link.)
Thursday, August 10th, 2006
Category: Library, PHP, Programming
Back with the second part of his postings on adding Ajax to a website, Joshua Eichorn has this new item on his blog today (picking up from this previous post) - a look at polling the server for the latest data with the HTML_AJAX PEAR package.
I have a lot more change’s i’d like to make to webthumb so the last article (Adding AJAX to a website step by step) is now the start of the series. In this article will be taking front page of webthumb and making it live. The the stats and recent thumbnails will update in real time, making for a nice slick presentation.
He first focuses on getting real-time information back with the help of Ajax. In his case, it's grabbing the latest thumbnails created by the application, fetched by periodic polling back from a timed script performing an Ajax request.
He moves on to the code, showing how to export the PHP class for the updater, a sample result for the request and the code for the actual server the Ajax request will be made to. Then, it's back to the client side of things with the Javascript needed to make the call back to the server, parse the response, and update the page with the latest information.
There's also a little aside that talks about how the HTML_AJAX package delivers it's Javascript libraries and how this can be used to grab and push out the moo.fx library along with the other scripts to create a a fade in and out of the updates made to the page to make them more apparent to the user.
Wednesday, August 9th, 2006
Category: JavaScript, Programming
A wise man once said that one can never have too many Javascript hints and tricks. Well, okay - so maybe I made the man up, but the tips are real and there are some over in this new post from Alexander Kirk.
I have been programming for about 10 years now, and I am always longing for improving my code. Throughout time I added a few habits that I consider to be good practices and increase the quality of my code.
The subjects of the tips vary, but are all still useful little nuggests of information. The list of his tips include:
- Adding Parameters Hints
- Search JavaScript documentation (with usable results)
- Reducing the indentation amount
with a total of five hints, each with their own code and explainations to flesh them out.
Tuesday, August 8th, 2006
Category: Toolkit, PHP, Programming
In his latest post, HTML_AJAX package developer Joshua Eichorn shares his methods for adding Ajax to an example website (with HTML_AJAX's help, of course), and he shows it step-by-step.
When looking at a adding AJAX you have a couple decisions you’ll want to make up front. One is what tools your going to use. In the webthumb case thats pretty easy. Webthumb is a simple PHP app and doesn’t use a framework, so I need a nice general PHP/AJAX framework that is easy to use, HTML_AJAX fits that need.
After picking my tools I need to decide what my goals are. My main focus will be to improve usability, but I also want to use AJAX to make the site seem a bit flashier, so its a bit of a technology demo too.
The Webthumb mentioned there is a pet project of his, allowing for the generation of thumbnails taken directly of websites (more on that here). He uses an updated to this application as his illustration.
He demonstrates the remoting functionality, his use of a class named RequestStatus for finding the status of the Ajax connection, exporting this in the PHP (easy thanks to HTML_AJAX), and make the actual calls to the backend with the newly exported function.
Monday, August 7th, 2006
Category: Dojo, Programming, Framework
In this new post on his blog, Alexander Netkachev demonstrates how to create a Model/View/Controller framework in Javascript with when help of the Dojo Toolkit.
My goal for this article is to write a simple JavaScript component that can show a power of the language. The component is a kind of the HTML ListBox (“select” HTML tag) control with an editable list of items: the user can select item and remove it or add new items into the list. I will use Dojo toolkit class building functions [link] to create three classes that implement the Dojo’s event system for subscribing on DHTML events and for notifying the View about changes in the Model.
He first talks about what the Model/View/Controller pattern is for those that haven't used it before (a simple definition). He applies it more to web applications t make it easier to bridge the gap between traditional web development and this design method.
From there it's all about thge code, first the creation of the 'ListModel' to handle the functionality, then the 'ListView' to make the HTML output of the script, and, finally, the 'ListController' to manage the view and model when a request comes in. Code for that is included too, making a simple multi-select box you can easily add and remove items from.
—
Next Page »
