the singularity of being and nothingness
JavaScript
Dynamically Loading JavaScript…with Spry!
Dec 23rd
I've written a couple of articles in the last few months about my adventures in JavaScript. While I certainly don't claim to be even proficient, I am getting better day by day. As I pick up tricks and tips, I try to pass them on to help others out (hopefully!).
Recently, we ran into an issue at work. We're constantly adding JavaScript functionality to our company intranet. While adding references to JavaScript files in the master pages that drive the templates is easy to do, there is a process that all master page changes have to go through, and this can limit the desirability of future changes. What we needed was a way to dynamically load JavaScript files when needed, so that only the core init.js file that is loaded with every page request needs to be referenced on the master pages.
I've never done this kind of thing before, so I did a little snooping around. There are apparently alot of solutions out there, some of them better and more robust than others. After studying what they do, I decided to try my hand at building a simple JS loader in Spry, given that the core files I need are More >
Elegant JavaScript
Nov 30th
In his excellent book (and equally great NOVA mini-series), The Elegant Universe, physicist Brian Greene outlines the history of "the search for the theory of everything," the elusive, unifying theory that will explain the universe in all of its manifold glory. The interesting thing about this theory, however, is that it's primary characteristic is not soaring profundity nor escaliting complexity. To the contrary, Greene is convinced that the theory of everything, when finally discovered, will be characterized primarly by simplicity-or in his words, "elegance."
To Greene, the "theory of everything" will be elegant because it will bring together what are now disparate theories that describe the nature of the universe. It will be a theory that cohesively weaves together an understanding of the micro and macro universe; will unify the known physical laws; and will fundamentally "feel" right because of how it describes the infinitude of life in a simple theorem.
So what in the world does this have to do with writing JavaScript? Well, it's somewhat of a stretch, but as I continue to grow in my JavaScript skills, the principle of "elegance" which Greene so eruditely describes resonates with me.
Let me explain. In no way do I wish More >
Flippin' Cool Spry Goodness
Sep 1st
As followers of this blog know, I am a pretty big fan of Adobe's JavaScript framework, Spry. Admittedly, it's not a super-huge framework like jQuery, but I like its simplicity and how rapidly I can develop a solution with it.
One thing I've been frustrated with is Spry's effects. While they have some good effects, I never found them particularly flexible or usable beyond little dynamic enhacements. Apparently, most of this is because I hadn't read the documentation enough.
Enter effect clustering. Normally, Spry effects run in turn of function call: so if you have, say, a tool-tip that you want to fade out and move, these effects would run in order (which wouldn't really make sense to do anyway). However, as I discovered with great joy yesterday, Spry allows for something called "effect clustering" which allows any number of effects to be run in parallel with one another.
I about peed my pants when I found this out, it's so cool and useful. So here's an example of this in action.
And here's the code:
FadeMove = function(element, options) { Spry.Effect.Cluster.call(this, options); var duration = 1000; var toggle = 'false'; var from = 100; var to = 0; var fromPos = new Spry.Effect.Utils.Position(); fromPos.x = More > AJAX Gotcha…POST vs. GET
Jun 12th
A rather annoying issue I ran into this evening when testing my up-and-coming CSS gallery on a live server was that all of my cross-domain AJAX calls were failing in Firefox. I'm used to stuff failing for stupid reasons in IE, but this one was unique. I tested in Safari (for Windows), IE 7, and Opera-all of them worked beautifully. But for whatever reason, Firefox horked on the code.
Well, it turns out it was a simple fix. In my AJAX calls, I was using the Spry loadURL() function. For this function, you can specify whether the call should be a "POST" or "GET" method. I assumed for my remote calls that I would be doing POST methods.
After all was said and done, it was apparently the POST methods that Firefox was having a coniption over. I changed the methods really quickly to GETs, and everything worked again in all browsers.
As I am mostly stupid, I have no reason why this happened-however, perhaps this will be useful to some other poor code monkey out there who is betrayed by Firefox in the wee-hours of the night, and maybe a wiser soul would be kind enough to post a comment about More >
Spry's Rating Widget
Apr 16th
For a new project I'm working on, I will need a mechanism for users to vote on certain pieces of content. Now it turns out that there are a billion and one ways of doing this, with an additional billion sets of frameworks. I was quite overwhelmed by the number of choices, so I've been putting it off for a while now.
Yet fortuitously, a couple days ago I was browsing the Spry docs and noticed two very promising words: Rating Widget.
Surely this cannot be what I'm looking for, could it? Ah but it was!
Recently, Spry updated its growing library of widgets to include a standard "star" rating system. Like it's other widgets, the rating widget comes with a single css file and a single javascript file. And also like other Spry widgets, it is completely simple to implement.
Assuming you have referenced the css and javascript files correctly, here's all it takes to set up a star rating system:
<span id="myrating" class="ratingContainer"> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <input type="text" id="ratingValue" name="dynamic_rate"/> <span class="ratingRatedMsg">Thanks for voting !</span> </span>
It's so simple it's almost laughable. But it gets much better. Like More >
Unobtrusive JavaScript…Duh!
Apr 15th
As I develop more applications that leverage JavaScript-both for data manipulation AND for superfluous effects-the more I come to realize the inexpressible need for finding as many shortcuts as possible. Without exception, as my JavaScript becomes more involved, so the complexity increases exponentially. To remedy this, I've started relying on frameworks such as Adobe's Spry, mooTools, jQuery, etc. to make my life easier for everything from element selection to major effects processing.
However, probably the biggest time-saver is making a concerted effort to make my JavaScript unobtrusive. What is this, you say? Well, by no means does it have a solidified meaning. However, a few principles are core to any definition.
The first is the idea of abstracting the functionality of JavaScript (be it data handling or effect processing) from the design layer on which the functionality is placed. In short, this means that the HTML markup of a site (and its corresponding CSS) should not be dependent on the functionality of JavaScript; rather, the functionality of JavaScript should be "pluggable" into the markup that it finds.
Now of course, this is all-too-idealistic. There is never a scenario in which markup and functionality are mutually ambivalent towards one another. However, the More >
Adobe's Spry Framework, Part Second
Mar 24th
A couple days ago, I posted an example of how Adobe's Spry Framework allows one to easily and quickly incorporate XML datasets into an application, allowing for a great alternative to page-to-page navigation and data mining.
One of the limitations I pointed out was the initial amount of coding involved. Well, that was because I'm an idiot.
While I've used Spry's Spry.Data.XMLDataSet() many times before, I literally had no idea how powerful it is, nor that it could interact with dynamically generated XML files, such as I was doing with ColdFusion components in my last example. However, such is not the case. Not only does this method allow me to do everything I was doing before, it involves a heck of lot less code. The entire invoke for the datasets here is:
var dsCities = new Spry.Data.XMLDataSet("getlocations.cfc method=getCities", "cities/city");var dsLocations = new Spry.Data.XMLDataSet("getlocations.cfc?method=getLocations&cityID={dsCities::@id}", "locations/location");
Two lines of javascript! Now of course, there is more to handle some of the behaviors…but I have effectively cut out about 100 lines from what I was doing before. Pretty cool!
Finally, the best part about this is it allows me to take full advantage of the framework's "spry:state". With this, one can set different "states" that will fire in relation More >
Web 2.0 Goodness - Adobe's Spry Framework
Mar 24th
Ok, so as everyone who reads this blog knows (or should know…), I am a web designer/web developer. On the development side, I am best at ColdFusion , one of the under-appreciated programming langugages out there. While ColdFusion is awesome, one of the drawbacks of it (as well as of PHP, .NET, etc.) is that it is a server-side technology, meaning (surprise, surprise) that all of the code processing done is accomplished on the server. So, any of the cool Web 2.0 stuff out there, like asynchronous form submission, has to use Javascript.
While ColdFusion 8 has some seriously cool AJAX features built into it that handle alot of this kind of thing with ease, it is not free and wonderful hosting companies (like GoDaddy) are slow to upgrade their servers to the newest version. Therefore, the onus is upon the developer to utilize the various work-arounds until ColdFusion 8 is firmly entrenched.
One tool that makes life significantly easier is Adobe's Spry Framework . While Spry includes a lot of the cool effects of other Javascript frameworks, one of the best parts of it is the easy way in which it allows Spry to make server-side calls to allow applications to harness More >
Why It's Important to Read the Docs…
Dec 20th
This morning, I was working on a bit of code for a dynamic directory search that I am building for work. Because I like the paging options that Spry provides, I decided to wire up Spry to ColdFusion to create some datasets. No big deal.
However, I came across an issue I have not encountered with Spry before. Normally, in the master/detail/filter mode of Spry dataset work, I will load a dataset from ColdFusion on page load and then use Spry to filter these results. The filter parameters normally come from the dataset itself.
For example, here's a run of the mill dataset:
var dsPeople = new Spry.Data.XMLDataSet("com/getpeople.cfc?method=getPeople, "/directory/person");
This will get all the people in my database from the query results of my ColdFusion component. If I wanted to see a detailed view of one of the people, I would simply pass a Spry dataset value (e.g., '@id') to this dataset, and it would handle it nicely.
While this works fine for a small number of records, what if we're talking about tens of thousands? I'm actually not sure how long it would take for Spry to deal with, say, 10,000 personal information records. However, I suspect it would be an arduous task More >
Slowly Getting Handier with Javascript
Oct 30th
Okay, so for people who are javascript heroes, what I'm going to write about is ridiculously lame. But I think it's cool.
Yesterday, I was working on an application for a client. Part of it needed to use the fancy lightbox feature for images. But on top of this, the client wanted to be able to not only place captions on the lightbox images, but also make elements of the caption linkable.
This is not hard, but for those not used to writing HTML, much less nested HTML, this can be a challenge-definitely not user-friendly from a client's perspective. The easy solution was to provide a "template" that the user could copy, paste and alter as needed. Unfortunately, this is not a very good solution as slight mistakes can cause terrible problems which are not easily resolved by those who don't know how to fix it, much less what the problem actually is.
So I set out for another solution. I've always admired WYSIWYG editors in that they allow users to easily add complex bits of code (like <a> tags with multiple attributes) through a form, which itself inserts the complied code into another form. Always intimidated by javascript, I thought this More >
