the singularity of being and nothingness
JavaScript
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 all 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 >
A Sexy Spry Gallery
Oct 27th
If one has been on the internet for 3 seconds, it is obvious that dynamic photo galleries are useful and popular things. After all, who wants to scroll through pages of pictures when they can all be loaded into one interface that can be controlled like a CD player (remember those…)?
Historically, the best photo galleries have been handled by Flash. After all, it is a super easy thing to do, can be highly stylized and customized, and just generally works well. The attendant problem, however, has been two-fold. Although generally lightweight, Flash is still pretty bulky, and as Interent Explorer has made us painfully aware, is not always treated with open arms by browsers. Second, unless one has gone to trouble of coding to read an XML file, or is using remoting to connect to a database, Flash is just a pain to manage and can be time consuming to make simple additions, deletions, etc.
In recent years, some very good javascript alternatives have popped up. While some are far better than others, the appeal of all is that they are generally less bandwidth expensive than flash and can be *more easily* modified than their flash alternatives.
Spry has made its More >
A Feedreader with Spry
Oct 18th
I know I've been posting alot about Spry lately, but the more I use it, the more I love it! Using the simple-to-implement tools which Spry provides, I am able to spend more time dealing with server-side processing, rather than fighting javascript to get a couple of cool effects.
A few weeks ago, I blogged about using Spry to return confirmation or error messages for a registration form asychronously to alert users to possible errors in their form BEFORE submission.
Today's example is based on the same principle, although more of an "independant app." A week ago, a co-worker and I were talking about the idea of placing a "feed reader" inside of a web page, so that users could not only display links to feeds that they follow, but also allow for the feed to be displayed directly in the page. After our conversation, my thoughts immediately turned to Spry as I was sure a quick, easy solution would be possible.
I was right.
There is really nothing to this. In classic Spry usability-friendliness, this can be accomplished in about two lines of code:
var dsFeeds = new Spry.Data.XMLDataSet("getfeeds.cfc?method=updateFeed", "feeds/feed", { useCache:false });var dsFeedContent = new Spry.Data.XMLDataSet("getfeeds.cfc?method=getFeeds&feedURL={dsFeeds::link}", "rss/channel/item");
The first line creates a Spry More >
