Category Archives: Programming

Custom Event Management in JavaScript

Posted on by
Reply

If you have used any JavaScript libraries before, you are most likely quite familiar with the concept of binding functions to specific events within an object, but have you ever considered creating your own custom events for your JavaScript classes to allow users even more flexibility in implementing your code? Binding listeners to user events (such as click or mouseover) is a necessity for robust coding, but what happens when I want to allow developers to execute a specific bit of logic only when my library element has been rendered to the page? I need to build my code in such a way as to give “hooks” to the coder in the form of events for which they can listen.
Continue reading →

HTML5 Canvas Layering

Posted on by
Reply


I have recently begun to study a couple different ideas to ease the pain of more complex animations using the HTML5 canvas element. Primarily, I have been focusing on layering – stacking individual transparent canvas elements – to achieve a robust effect and help manage individual objects without having to redraw the entire pane with every refresh. In the orbit example above, the center sphere and background are drawn statically on the bottommost layer, while the animation of the satellites is calculated and drawn on a second layer. By clicking on the demo, you can toggle the visibility of the animation layer. If you cannot see the animation at all, you may want to consider picking up a real web browser: Firefox or Chrome are always good options.
Continue reading →

jQuery Slideshow Plugin Update

Posted on by
2

I have finally found a few spare minutes to refactor the Google Code Project I started for my jQuery plugin last year. While I still am far from where I want to be with it, I have managed to set the plugin into a fully OOP codebase and add in events and the capability for custom handlers on those events. My hope is that people will now be able to find a bit more usability to the slideshow, since it is fully customizable. Feel free to swing by my Google Code page and let me know thoughts or ideas on ways to improve the slideshow as it evolves.

Introduction to Manual Compiling with Flex SDK

Posted on by
Reply

So, many of you have sent me emails or asked me in person about how, exactly, to get started playing with the Flex SDK without having to pour any money into unnecessary resources or IDEs. First, let me say that purchasing and using Flex Builder will be one of the best investments you can make in your Flex development learning, but yes, you can indeed download the SDK free of charge and manually compile AS3 and AIR applications. This will be a very simple post dealing with just how this can be done. While there are many, many, many details we could approach, I want to tackle this issue in its simplest form and hopefully get people on the ground running within minutes of reading this post. Please note that this will be written for Windows users, though I highly recommend people set up a Linux environment and play with the command line tools there as well, if possible.
Continue reading →

JavaScript Library Nightly Builds, SymLinks and Auto-Updates

Posted on by
Reply

Something has been bothering me for some time, and I finally took the time to resolve the issue once and for all – relatively speaking. As mentioned in my previous post, I have had opportunity to work with multiple different JavaScript libraries, and I often find myself running behind on the newest bug fixes for a given module. Many of the library development teams offer a nightly build available to checkout via SVN or Git (usually by way of GitHub), and I devised a way to automatically update my shared repositories among all the domains on my server. While not rocket science, nor an entirely new idea to most of you, it is quite helpful to me, and I thought I’d share my method here.

There are actually four steps involved with this update, so I apologize in advance if this gets too long.

Continue reading →

Handling Larger Maps in AS3

Posted on by
2

I have been working on some ideas for a TD game that would be both entertaining and original, and I feel that – with the help of a couple friends’ input – I’m on the way to something worth developing. Since I have already put together much of the “guts” for a TD game, I am hoping that I will be able to quickly put together a prototype in my free time. Ideally, once I have a prototype together, I will be able to find a sponsor to pay for development, and I would then be able to focus some solid time on the project, but that is a bit optimistic at this point, since we are still in the baby conceptual stage.

Without giving too much away on my idea, I’m going to try to cover some concepts and specific ideas that I have had to resolve in order to visualize different portions of the interface and interactions. The first thing I realized was, to fully succeed with the idea I want to implement, I would have to be able to support fairly large maps (in some remote cases, massive may be a better term). Having been a long time RTS (Real Time Strategy) player, I decided to take some cues from them and implement a similar map-handling system. Surprisingly, once things started falling into place, it was quite easy to tweak and get working to a satisfactory level.
Continue reading →

jQuery Plugin: gwSlideshow launched

Posted on by
Reply

A while ago, I wrote a jQuery based slideshow that I shared with some friends, and I ended up getting a pretty good response to it – enough to merit making a full plugin with it. Here is the initial launch of the plugin and project, and I’d love to get any feedback pertaining to usability and additional features.

The intent is to remain very lightweight but flexible, and so far, that seems to be met. Following, you will find links to my Google Code project page as well as a sample script that demos the working slideshow. For any additional questions, please feel free to contact me.

Google Code: http://code.google.com/p/gw-slideshow/
Demo: http://code.guahanweb.com/jquery/demos/gwSlideshow.html

Enjoy!

Optional Config Objects in JavaScript OOP

Posted on by
Reply

Well, one of the challenges in writing our custom JavaScript library for this next release of our CMS at work has been to come up with a modularized approach to our objects that can be followed precisely while still allowing a measure of flexibility to the end developer (Imagine that! Actually trying to support some framework style design principles in JavaScript!). Anyway, what has been one of the most challenging pieces to the puzzle has been to appropriately handle configuration objects passed to constructors that override specific, default behavior of the object.

No, the challenge was not so much handling a config object proper — that is relatively easy. Where the challenge began to really take shape was in allowing a user to provide specific pieces of optional data and only use the valid pieces of the config object to override existing default values while ignoring the rest so as not to cause any JavaScript errors to be thrown elsewhere in the script. For a quick example, let’s say we have the following data object that loads itself up using an Ajax call (NOTE: all examples in this post are using the ExtJS lib).
Continue reading →

Google Analytics Style Graphing with AS3

Posted on by
2

Developers who have been using Google Analytics for any time can appreciate the flexibility and power behind some of the graphing software it offers. I recently found myself wondering just how they get the incredibly usable effect they have, so I began tinkering with some Actionscript and soon found myself with a very workable base that not only could be modified and grown to match what this software offers but is also surprisingly simplistic in nature.

Basically, we simply have our main application (or graph in this case) that can take any number of argument values and calculate not only their position based on ratio but also spreads them across the graph in a readable way. So, we create a simple point object that handles the visuals – both the expanding and contracting as well as the showing and hiding of the value text – and allow our graph to do some very simple calculations to spread them out evenly.
Continue reading →

Harnassing the Power of Timers in AS3

Posted on by
Reply

Anyone who has had the experience of trying to time events for web via client side scripting before can readily appreciate the power and ease of using the robust Timer class in Actionscript 3. Similar to the idea of using JavaScript’s setTimout and/or setInterval methods, we can use this class to set a timer for a millisecond count that will simply trigger a TimerEvent when the timer has reached its end. The beauty of it, though, is that when the timer is created, we can explicitly declare how many times we want the timer to run! No more sloppy looping of intervals or timeouts: just set your timer to X number of loops and start it running.

So, obviously, if we create a timer to run once, it is the equivalent of running a setTimeout function. As with the aforementioned JavaScript functions, we set the timer with a number of milliseconds we want to wait before triggering its event. As an optional second argument, we pass in the number of cycles we wish the timer to run. Also, since the timer is an object, even if we set the timer to run only once, we can call the start method on it and manually run that single timer multiple times throughout our script. With a little creative thinking, I’m sure you can already come up with dozens of ways this could be useful.
Continue reading →