Skip to content

Recent Articles

20
Apr

Twitter-esque Animated Placeholders with Dojo

Have you seen the cool text input boxes on the Twitter homepage recently (make sure you are logged out). Twitter is using CSS transitions to achieve the effect but unfortunately those are still not fully adopted just yet. I created (with a bit of cleanup help from kgf on #dojo @ irc.freenode.net) a similar effect with Dojo and made a dojo.query() “plugin” out of it which does work in most browsers:

It’s simple enough to use this on your own code. Use the same HTML layout, and include the JavaScript plugin code on your page to use the plugin.

13
Mar

Public Dojo Workshops Announced

I’ve had many ask me about any workshops for developers who work with Dojo. When I direct them at SitePen, they always respond with, but those are geared towards companies—aren’t there any public workshops? Aside from telling them to read the documentation and getting involved online, I’ve had to reply with a solemn “no”. That has all changed as SitePen has announced that they are going to start an offering of public workshops.

They are going to offer two of them in San Jose for a first round, we’ll see what happens after that. They’re $2500 a pop but it sounds like they will be covering a lot of great content!

2
Mar

Dojo Classes, Inherited and Constructors

Dojo provides the ability for developers to create Java-like classes with the powerful dojo.declare(). It does this by allowing you to easily create namespaced classes that support multiple inheritance (which are basically mixins). Provided in this functionality is the ability to call:

this.inherited(arguments);

… from within any of your methods in a class that extends another and have it call the super class instance of that method in the same way you would call super() in a Java class to call the super class’ method.

This past week I was on a couple of new classes, one super class and another class that extends that super class. I called this.inherited() within my constructor of the class to call the super constructor. I was noticing something strange in Firebug though—my super class’ constructor was getting called twice even though I was only calling it once. I reproduced this in JSFiddle as you can see below:

If you had FireBug (or JavaScript console in WebKit) open you would have seen that the super constructor was getting called twice. After pinging #dojo on irc at irc.freenode.net about the issue, @phiggins reminded me that when you instantiate classes that extend other classes, the constructor method automatically calls the super on its own. So if you call it again, it will be called twice. You can read about the default constructor chaining that dojo.declare gives you on the Reference Guide.

To summarize, only use this.inherited() within non-constructor methods in your classes. I recall running into this issue once before so I thought I blog about it for my own personal reference and for that of others.

17
Jan

Difference between dojo.byId() and dijit.byId()

Since we’ve completely committed to using the Dojo Toolkit at work, there have been more questions raised about various aspects of the toolkit. One of the more popular ones that I am asked and that I see asked often online is what is the difference between dojo.byId() and dijit.byId()?.

Dojo.byId() is simply a replacement for the native document.getElementById(). Dijit.byId() on the other hand is a utility method that you use to get a reference to an instance of a dijit widget on the page. This means that you won’t be getting a reference to a DOM node like you do with dojo.byId() but rather an instance of a dijit widget class along with access to all of its methods and properties.

13
Jun

Return JSON with PHP

When bringing Ajax technologies into your websites, it’s almost certain you’ll comes across the need to return data from the backend in a format that JavaScript works well with, such as JSON. With that, PHP is often a popular choice amongst developers for backend programming due to its wide adoption and low cost (FREE!). Thankfully PHP is actively developed and it supports many of todays web standards including JSON.
Read more »

21
May

Decoupling Widget to Widget Interaction with Dojo

As a programmer, you should try to think of how you can write your code in a way that is maintainable and loosely coupled from other parts of your application. Loosely coupled basically means that you don’t tie down functionality and modules to be dependent on other parts of your application. In a way, you want to try and categorize the functionality and keep the functionality in one spot. Take our modern day telephone system for example. If you wanted to use your phone at home to call your friend on their phone on the other side of the world, the phones themselves don’t have to know each other. All they are concerned about is how to interact directly with the telephone system. The telephone system simply requires a telephone to know how to dial out and to be able to receive a phone call when the line is being rung.
Read more »

20
Apr

Things about JavaScript I wish I knew earlier

Christian Hellman wrote another excellent JavaScript article over at Smashing Magazine. This time he addresses styles and techniques of coding that is widely supported, accepted, and expected by good JavaScript developers. If you’ve been programming JavaScript for awhile, you’ll notice much of the stuff is different now than it was less than a decade ago now that JavaScript has evolved and improved based on the  needs of the JavaScript community as well as the capabilities of modern-day browsers.
Read more »

3
Feb

Cross-Domain Ajax with Dojo

If you are fairly new to JavaScript development or Ajax programming, you may not know that JavaScript has a limitation in which it cannot make a remote call to a service that is not on the same domain the script was called from. For instance, if I hosted a simple web service at kylehayes.info, I would not be able to access it from this site through the normal methods such as dojo.xhrGet() or dojo.xhrPost(). However, there are a couple of solutions to this issue. One of those is to consume web services that use a format called JSON-P (JSON with padding).
Read more »

6
Jan

Source Code for Getting StartED with Dojo

Thanks to a reader for reaching out to me and pointing out that the source code is not posted on the Friends of ED site or this site for the book. I sincerely apologize for this inconvenience and mishap. For now, until it is posted on the publisher’s site, I have provided a link below that will allow you to download all the source code zipped up.

Source Code for Getting StartED with Dojo

Note, there is no source code in Chapter 3 and therefore you will not see a “ch03″ folder in the zip file that you download.

Update: Here is the code for Chapter 6 which contains animationEvents.html – Download .zip

2
Jan

Simple Ajax Form Tutorial

Submitting an Ajax form using Dojo is very straightforward and simple. The main goal here is to simply send the values of a form to a backend script (whatever your preference, e.g. PHP or Python), without ever leaving the page. The page should also show a response to the user confirming that their request was sent successfully.

For starters, we need a simple HTML form that we are going to send. Construct this as you normally would with an id, action, and method values. In my example, I’ve created a basic contact form:
Read more »