Category Archives: Web Development

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 →

Debug Logging in JavaScript

Posted on by
Reply

So, one of the repeat topics I’ve heard in JavaScript discussions both internal and external to work is that of tracing and logging JavaScript activities. What is the best way? How do you know in what order your code is actually completing? These are all valid concerns, and thankfully, there is a fairly easy way to help yourself out. There are back-end libraries to assist with this type of logging such as Apache’s log4j – which has been ported to other popular languages like PHP and C++, but what about seeing under the hood of your browser run scripts?
Continue reading →

Introducing JSWidgets

Posted on by
Reply

I have been, for some time, working on a concept that would allow the average JavaScript user to create robust, interactive applications with ease. A daunting task, I know, but having tried to implement so many bloated libraries for simplistic interaction, I wanted to create a way for the beginning or average web developer to create advanced modules quickly. One of the biggest things I have noticed in recent years is the lack of attention given by many to the client side code structure. With this project, I hope to help educate developers a bit more in the necessity of code separation, documentation and reuse of code.

I have been asked if I’m guilty of reinventing the wheel, and it is possible that you may think so, but I feel this offers a level of uniqueness not found in a library this lightweight. In fact, the purpose of this library is not to be a solution to the need in and of itself, but rather it is intended to lay the groundwork for developers to quickly extend their own widgets and have them working in no time. While I am introducing this library in its infancy, I am already in the process of overhauling the template structure to leverage Underscore.js, the most lightweight and robust JavaScript template engine I’ve found to date.
Continue reading →

Zen Coding – HTML Shorthand

Posted on by
1

In one of the greatest discoveries of my web development career, I stumbled upon the Zen Coding Project the other day. This is an absolutely amazing project that allows for building robust and — more importantly — valid HTML markup with a fraction of the keystrokes. What’s more, this new method of writing the code uses CSS selectors for an extremely small learning curve. Rather than another language to learn, this little shorthand script is available as a plugin or macro for almost all major IDEs and text editors (Eclipse, NetBeans and even Notepad++ to name a few).
Continue reading →

WordPress Widgets and Flickr RESTful APIs

Posted on by
4

I have done some significant WordPress modifications for friends in the past, be it basic theme manipulations or custom hacking of plugins, but I decided that I wanted to write my own widget to help tie my Flickr account into my blog. I did some searching on the currently hosted WordPress plugin site, and while there were several that tapped the Flickr API, they all seemed too clunky or not quite flexible enough for what I had in mind. Simply listing the most recent thumbnails from my photostream couldn’t be that hard, right? As it turns out, no, it wasn’t.
Continue reading →

Line Movement and Interaction in AS3

Posted on by
1

For quite some time now, I’ve been trying to figure out the best way to get lines to “move” in AS3. By this, I don’t mean simple rotation and skewing of an existing line, but actually changing the line structure: length, thickness, etc. The challenge first became noteworthy when I was working on my Tower Defense code, and I wanted to have a laser-esque tower that would shoot constantly at an enemy rather than launching projectiles. In other words, I wanted the origin point of my segment to be stationary while the other end of the segment follows the targeted creep. Based on some old Java graphics experience I have, my first thought was to re-render (literally create and destroy) the Sprite object housing the laser on a timer or Event.ENTER_FRAME. However, this immediately proved to be a poor decision, since it caused a horrible flicker, just like a Java applet that was animating without double buffering. So, needless to say, I needed to dig a little deeper into the core of the AS3 Graphics object.
Continue reading →

Particle Generation and Management Study

Posted on by
4

Over the past week, I have had opportunity to play with some ideas for particle generation that have been floating around in my mind for a while. Why particles? Well, while single object animations are great, there is a certain level of realism to movement in everything from explosions and fireworks to dust and debris when your environment can act upon the individual particles that make up your animation. Enter the particle generator. Instead of simply embedding an explosion movie into the appropriate scene, we can instead render a particle generator. These generators will then produce the debris for our effect, and each element (or particle) of that debris will be able to interact with its environment – from gravity to boundaries. By calculating each particle to have a mass of its own, the effects can be quite pleasing.
Continue reading →

Adding Links to a Dynamic Flash AS3 Slideshow

Posted on by
Reply

Those of you who may have followed my previous Flash AS3 Slideshow post may have noted that it was rather limiting in function. While there are sometimes valid uses for a slideshow to statically transition between images (whether or not those images are dynamically loaded), there are typically much more useful things we can do in the presentation. In this post, we will review how to add an optional link to each slide in the XML data that will then turn the individual slides into hyperlinks whenever they are displayed.
Continue reading →

How to Manually Trigger Events in JavaScript

Posted on by
Reply

Occasionally, I find need to be able to manually trigger a predefined JavaScript event from within the context of a web application. Those of you who didn’t understand that first statement may want to stop reading now or risk suffering from extreme boredom, but those who actually have encountered the same challenge in coding, please read on!

Let’s examine a possible scenario that could merit actually taking hold of the reigns on individual event calls. Consider the situation that you have devised a very user friendly data entry form, and in conjunction with specifications, you have a select box that triggers certain fields to be visible based on user selection. Typically, you would have simply attached a listener to the select box’s onchange event that checks the value of the field and performs the necessary showing and hiding. So far, we have done nothing difficult or out of the ordinary.

Now, suppose you also have need to be able to populate the form with a preexisting data set and get your form to behave in the same way. You could always write an onload listener for the body of your page that runs all the field checks and manipulates the fields accordingly, and in most cases, this may not be a poor solution. However, when loading dynamically via AJAX or other method, the onload event may not be triggered, and therefore, neither is your form updated.
Continue reading →