Jason Leveille’s Blog

jQuery took what would have been a 4 - 6 hour job ordeal and turned it into 10 minutes of pure enjoyment. Read on.

One of our clients at work has a site which is maintained with Dreamweaver (DW) templates and Contribute. If there is anything I have learned about this combination, especially DW templates, it’s that updating templates/libraries and pushing those updates to pages can become increasingly painful as a site grows. This particular client insisted on the template/Contribute route, and at the time we couldn’t make a solid argument about why they should not pursue this solution to content management (we now have that argument). We are on a maintenance contract with this client and once per week we have requests to update content. Because I did the initial setup, and because I have the most experience with DW, this job falls on my plate. Here’s the rough flow of data management / updates.

• We get a request to update the xxx section based on the yyy template.
• We checkout the xxx section pages, and the yyy template. Some sections have 100+ pages. In total this site has ~600 pages.
  • With each page checkout, DW performs a check to see if the page is already checked out.
  • DW checks the page out.
  • DW updates a lock file indicating that the pages is currently checked out.
• Templates/Libraries are updated and changes are pushed out to files.
• Files get checked back in (and locks are removed, etc)

This process is time consuming, slow at best, and very frustrating. Now I would normally be working on other tasks while files are being checked in/out, however that’s not the point. This whole workflow makes we want to vomit.

Today we had a request to add a footer to each page in the site, where previously there had been no footer. That’s an update for every template file, and every page in the site. You might be thinking, why didn’t you initially add markup for an empty footer, or at least add an include that pointed to an empty file? We didn’t, but that is a good idea. Instead, I took what would have amounted to 4 - 6 hours worth of mindless, brain numbing work (believe it or not, it would have taken 4 - 6 hours), and instead implemented a javascript/php include solution. This took about 10 minutes. Here is the markup.

$.get("/assets/php/includes/footer.inc.php", function(data){
   $("#wrap").after(data);
});

As you can see, I created a footer include file, used jQuery’s get method to retrieve the contents, and inserted those contents after the main wrapper div. I chose to pull the contents of the footer from an include file in order to make future updates of that content more manageable. I wouldn’t want a future developer pecking around in the JavaScript just to update the footer. That would be just plain wrong.

Conclusion

In the world of web development implementation typically isn’t the issue. Figuring out the proper solution usually takes more time. What I’ve done here isn’t rocket science, but it did save me hours of time, while not sacrificing future application maintenance. I can live with that.

I just finished a great Digital Web Magazine article about improving page load times with lazy loading techniques. The article (by Jakob Heuser) was very well written and described proximity, timeout, and event based lazy loading. If you continue to read you will see how I was able to reduce page load by 300+kb by implementing lazy loading.

What is Lazy Loading

Lazy loading, described by Martin Fowler in “Patterns of Enterprise Application Architecture”, is the process by which an object isn’t loaded with data until it is needed. Of course “needed” is subjective to the needs of your application (for example needed in proximity or based on an event). In the context of this article, Jakob Heuser was really talking about lazy loading JavaScript files when they are needed, as opposed to loading them on page load. The loading of the files happens via XHR (therefore the request is subject to the browser same origin policy). He provides examples of Gaia Online and Zimbra who both reduced their page load by 200k+ after implementing lazy loading techniques. (more…)

I have taken some time to refactor my original implementation of Depth First Search and Iterative Deepening in JavaScript. Namely, I removed any dependencies on the ExtJS JavaScript library, and added dependencies to the jQuery library. The advantage here is that the combined size of the files is now < 60k, whereas the original implementation was needlessly around 500k.

The Goodies

• Depth First Search and Iterative Deepening Implementation
• dfs-id-javascript-implementation.zip

(more…)

Yes, I know, displaying the time with JavaScript. Something that’s been written about since the dawn of time. Following is a trivial bit of code, but one that I thought others might find useful. We are working with a client whose application broadcasts meetings (and screen captures from those meetings) to client computers. A very cool project that I’d like to write about some day. With regard to time, there are 2 requirements:

1. Time must be in Eastern Standard Time (or Eastern Daylight Time)
2. They shouldn’t have to configure any settings to adjust for daylight savings time

(more…)

I have had a bit of a hair pulling experience over the last few hours, until finally I got some sense and looked at the Definition and Usage of parseInt. Here’s the example:

<script type="text/javascript">
   var data = new Array('007', '008', '009', '010');
   for(var x in data)
   {
      console.log(data[x] + ' -> ' + parseInt(data[x]));
   }
</script>

And the result:

007 -> 7
008 -> 0
009 -> 0
010 -> 8

What I wanted was the result 7, 8, 9, and 10. The result seen above comes from the fact that, because I have a leading 0 in my strings, parseInt is reverting to a base 8 (octal) radix. The solution of course is to specify a base 10 (decimal) radix.

<script type="text/javascript">
   var data = new Array('007', '008', '009', '010');
   for(var x in data)
   {
      console.log(data[x] + ' -> ' + parseInt(data[x], 10));
   }
</script>

And the result:

007 -> 7
008 -> 8
009 -> 9
010 -> 10

I recently implemented DFS and Iterative Deepening algorithms to search for a target node in a tree. Initially I thought I would write my program in C++, however after some thought I decided to go the route of JavaScript. I believe the source code is commented sufficiently to give you a glimpse into some of the decisions I made, therefore I won’t be providing any real detail in this post.

DFS and Iterative Deepening Project

I have to give much thanks to Kirupa, as his ActionScript implementation of DFS and BFS gave me the inspiration to go the route of JavaScript. Not only that, but I was able to use much of his work as a model for the direction I took. I hope you find that I did provide sufficient credit in my comments. Enjoy.

NOTE: I stayed up until 1am, two nights in a row to finish this. I don’t work well late at night and that is likely reflected in some of the algorithmic decisions I made. If you have any questions please don’t hesitate to ask. Also, you might be asking, WTH did he use extjs here? Honestly, I don’t know. I originally had grand visions for my node tree, etc, however those didn’t pan out. In it’s current state there is no advantage to using that framework.