BorkWeb » javascript

Web Programming Guest Lecture: JavaScript

Matt — Mon, 07 Dec 2009 21:37:00 +0000

I have once again given a JavaScript guest lecture to Zach‘s Web Programming class. This year I have taken the liberty of swiping some of Douglas Crockford’s “JavaScript: The Good Parts” presentation for the leading slides.

Here’s the presentation:

Javascript 2009

View more presentations from borkweb.

Guest Lecture: JavaScript, Ajax & DOM Manipulation

Matt — Wed, 03 Dec 2008 19:16:52 +0000

Zach has asked me to give a JavaScript guest lecture in his Web Programming class. We’ll cover: JS basics, node manipulation, DOM traversal, AJAX, JavaScript libraries, and myPlymouth implementations of those topics. Here are the slides (get the .ppt here):

Javascript: Ajax & DOM Manipulation v1.2

View SlideShare presentation or Upload your own. (tags: javascript jquery)

A few resources that are mentioned:

Note: this is an updated talk on the workshop I led two years ago

Luminis: Forcing CSS/JavaScript Updates to Clients

Matt — Mon, 02 Jun 2008 17:42:08 +0000

[[innerindex]]

Introduction

I gave a talk at SunGard Summit in Anaheim this spring on Plymouth State‘s portal (myPlymouth). There were a number of really great questions that came up following my presentation, one of which is the topic of this post:

“How do you force a client’s browser to always use the correct version of CSS and/or JavaScript in Luminis?”

When upgrading Plymouth State’s Luminis installation from III to IV, we had to tackle this same issue and after banging my head against the wall a number of times, I found our answer. I wanted to:

Ensure that the JavaScript and CSS that is being served up to our users can be cached by their browser in order to optimize their download speeds.
Control when a user’s browser has to re-download a new version of the code.
Do the above within the bounds of the very restrictive caching provided by the Luminis product.

All of it was super easy to do, although I must admit I knocked my head against the wall a few times coming up with the solution to the 3rd in that list.

Step 1: Basic Browser Caching

When I sat down to tackle this problem, I knew that the inline JavaScript within nested_tables.xsl was an unforgiving issue – if I wanted to make a change to some of the inline JavaScript, those changes would not be forced upon the users until Luminis decided to let go of its cached nested_tables.xsl.

That didn’t work for me. So I ripped the inline styles out and combined a few JavaScript files into one…called combined.js.

My header within the regularLayout template in nested_tables.xslnow looked something like this:


   .........

The files clientsniffer.js and util.js are SunGard delivered and I did not touch those two. As I mentioned before, I yanked out all the inline JavaScript (provided by SunGard) and dropped that into combined.js along with a number of jQuery code. Our own custom Luminis JavaScript that controls a lot of our Ajax-like functionality in myPlymouth is in behavior.js. And of course, style.css holds the CSS for our portal.

All of these files could now be cached by users’ browsers. Yay. I bounced the development portal and saw my changes in all their glory. Life was good.

Step 2: Browser Cache, Code Changes, and You

Invigorated by my recent success of effectively doing nothing, I grabbed a soda and began tackling the next objective. I had done this numerous times in my PHP applications and it was as simple as placing a version number at the end of the URLs used in the link and script tags. As such:


   .........

Once again, I bounced our portal, saw the changes, and danced around the room. Step 2. Accomplished.

Step 3: Taming Versioning/Cache Expiration in Luminis

The goal of taming this versioning/cache expiration was to do so without the need for bouncing the portal so I could make changes on the fly without planning for down times. Step 2 – as I detailed above – only gets you so far. With Step 2 in place, I could easily make a change in my CSS file and edit nested_tables.xsl to one-up my version number. But, because nested_tables is cached by Luminis, that wasn’t good enough. Here’s what I came up with:

I removed the script and link tags in the header of the regularLayout template in nested_tables, created a file called load.js, and dropped the homeless script/link tags as document.writes in load.js…as so:

Start of a Solution: load.js

document.write('');
document.write('');
document.write('');
document.write('');
document.write('');

But wait…

This gave me a file with all of my script/link tags and their appropriate versions. However…I couldn’t simply replace all those script/link tags with a script tag that pointed at load.js because load.js itself would be cached by users’ browsers. So this got past the Luminis caching, but not our end users. So I came up with this:

Final Solution: pre_load.js

So…I wanted to cache all my sub-files and prevent load.js from caching so that I could version my scripts easily without bouncing the portal. The solution? Yet another file! I called it pre_load.js and it looks something like this:

document.write('');

A simple document.write of a script tag with an appended variable based on time in order to prevent caching on the browser side. Yup…load.js is never cached, but it is a small price to pay.

Now my header in the regularLayout template in nested_tables.xsl looks like this:


   .........

How it works

Luminis happily caches the pre_load.js script tag in the nested_tables.xsl.
The JavaScript within pre_load.js writes another script tag to the document at render time. That script’s URL is a call to load.js along with a variable that changes each page load thus preventing load.js from being cached.
load.js then document.writes the appropriately versioned script/link tags into the document.
The individual script/link tags load the associated JavaScript/CSS files. If the browser has already cached that script/link URL (remember, we change the version numbers when we make changes to the JS or CSS), then the cached file is loaded…otherwise the new version is retrieved from the server.

Summary

The set-up is fairly basic but the results just what we were hoping! And all it took was:

Placing inline JavaScript into a file (combined.js)
Creating load.js to document.write script/link tags
Creating pre_load.js to document.write a script tag that uses a cache-free URL call to load.js

To date, we have not had any reported issues with local or server-side caching of our JS/CSS files using this method! You just need to make sure you remember to version your URLs in load.js!

Plymouth State: JavaScript Workshop

Matt — Mon, 12 Nov 2007 01:40:11 +0000

Tonight I led a workshop on JavaScript for some PSU Employees. We discussed JS basics, node manipulation, DOM traversal, AJAX, JavaScript libraries, and myPlymouth implementations of those topics. Here are the slides:

| View | Upload your own

A few resources that were mentioned:

jQuery 1.2 Released!

Matt — Tue, 11 Sep 2007 11:29:15 +0000

This is a major release for the JavaScript library that I have grown to love. Before I list the new features, it is important to note what functionality has been removed from jQuery.

Here’s the deprecated functionality:

These Selectors
- XPath Descendant Selector: $(“div//p”)
- XPath Child Selector: $(“div/p”)
- XPath Parent Selector: $(“p/../div”)
- XPath Contains Predicate Selector: $(“div[p]“)
- XPath Attribute Selector: $(“a[@href]“)
Calling clone() with an argument: $(“div”).clone(false);
These Traversal Functions use the new .slice() instead):
- $(“div”).eq(0);
- $(“div”).lt(2);
- $(“div”).gt(2);
These Ajax Functions:
- $(“#elem”).loadIfModified(“some.php”);
- $.getIfModified(“some.php”);
- $.ajaxTimeout(3000);
- $(…).evalScripts();

Thankfully a number of those don’t effect me. I’ll have to comb through my code to get rid of the .gt, .lt, and .eq traversal functions as well as a few of the selectors…but other than that, I’m good to go. To find out more about workarounds for the above removed functionality, check the jQuery 1.2 release notes

Now…on to the good stuff.

New features!

Selectors
- :has(selector)
- :header
- :animated
- XPath Selector Plugin
Attributes
- .val() Overhaul
Traversing
- .map()
- .prevAll() / .nextAll()
- .slice()
- .hasClass()
- .andSelf()
- .contents()
Manipulation
- .wrapInner() / .wrapAll()
- .replaceWith() / .replaceAll()
- Event Cloning
CSS
- .offset()
- .height() / .width() for document and window
Ajax
- Partial .load()
- Cross-Domain getScript
- JSONP
- .serialize() Overhaul
- Disable Caching
Effects
- .stop()
- %/em Animations
- Color Animations
- Relative Animations
- Queue Control
- :animated
- step: Function
Events
- Namespaced Events
- .triggerHandler()
Internals
- Documentation Move
- Expando Management

I have to say…it is a pretty snazzy release and I’ll begin implementing the new version shortly. w00t.

jQuery Plugin: Live Query

Matt — Wed, 22 Aug 2007 14:24:00 +0000

My hear is exploding with happiness and joy at the existence of Brandon Aaron. He has built a sweet jQuery plugin (Live Query) that reduces complexity in Ajax and general DOM manipulation coding by a great deal (when it comes to applying behaviors). First, let me tell you the problem (if you don’t already know):

Say I build a web application where I want to assign an onClick event to an tag. In jQuery I’d do it like this:

First the HTML:

Grab Another!


  Bork
  Bork
  Bork

Now lets do up the JavaScript:

$(document).ready(function(){
  $('a.whatever').bind('click',function(){
    alert('ZOMG Hai');
    return false;
  });
});

Simple, right? Yeah. It is. Nothing new. Now…say that I manipulate the DOM and add in another tag with the class “whatever” that I want the same even applied (with or without Ajax, doesn’t matter). Here’s what I would have had to do in the past:

$(document).ready(function(){
  $('a.another').bind('click',function(){
    $('ul').append('Bork');

    $('a.whatever').bind('click',function(){
      alert('ZOMG Hai');
      return false;
    });

    return false;
  });
});

See that? Kinda complex. Things become quite complex when you begin doing Cross Domain Scripting via Remote JavaScript calls (which is what is heavily used in one of the apps I have done front-end development for).

The Live Query plugin is a beautiful thing as it “auto-magically” binds events to dynamically added elements within the page as they appear! So ALL of that JavaScript from both examples becomes:

$(document).ready(function(){
  $('a.whatever').livequery('click',function(){
    alert('ZOMG Hai');
    return false;
  });

  $('a.another').bind('click',function(){
    $('ul').append('Bork');
    return false;
  });
});

Yup. That’s it. Bind a livequery event to an element and as elements that match appear on the page…BAM! The event is applied.

There are some more advanced things you can do with the plugin and you can find those out at the Live Query site.

Book Review: Learning jQuery

Matt — Mon, 06 Aug 2007 22:21:08 +0000

I’m a huge fan and avid user of jQuery and have been extremely impressed by the documentation provided on the jQuery website. The one thing that documentation lacks, however, is really contextual examples that drive home some bare essentials of JavaScripting with the jQuery library. Learning jQuery – a book by Jonathan Chaffer and Karl Swedberg – is an excellent introductory book for those that are thinking about using (or struggling with) jQuery.

jQuery, while a fairly high level JavaScript library is a beautiful thing but can be very daunting to a developer that is new to JavaScripting or is coming from a dissimilar library, being thrust full bore into a ‘new’ way of doing old tricks. (Which jQuery is great at by the way…it makes the new ways super sexy, sleek, and easy). The authors do a great job of explaining what jQuery is and why it is such a powerful tool.

Throughout the book are examples on traversing and manipulating the DOM, event handling, leveraging jQuery’s JS effect capabilities, AJAX, etc; many of which are built off of previously detailed examples, allowing the reader to easily grasp what is going on and why a chunk of code was used.

While I feel this book is primarily an excellent introductory source for diving into the world of JavaScript development with jQuery, the fairly seasoned jQuery user (like myself) may find a trick or two that they hadn’t quite thought of… As I read through, I found a few choice bits that allowed me to make my own code more efficient!

My only real complaint with the book is the index at the back. There are a number of jQuery functions that are discussed within the chapters yet weren’t referenced in the index. A small nitpick, I know, but I’m a sucker for a good index :)

So. Overall, I think the book is a good thing to keep on the bookshelf, whether a you are a jQuery n00b or not. There’s always a co-worker/friend/programming buddy that will want to learn jQuery and what better way to get them rolling on there own than a link to the jQuery docs and a sweet book?

You can get the book here.

Plugin: Sexy Comments v1.4 Released!

Matt — Fri, 03 Aug 2007 12:52:24 +0000

[[innerindex]]

Introduction

This has been a long time coming and I am happy to announce the release of Sexy Comments v1.4! With this version comes a lot of changes…so be sure to read the installation section! Along with simple optimizations and general restructure, the following features are now available:

Feature List

Ajax comment preview (new feature)
Author post highlighting
Avatars
- Either display/hide avatars
- Select your avatar service of choice (Gravatar and MyBlogLog options are available)
- Specify maximum avatar dimension (Gravatar Only)
- Customize default/trackback avatars
Comment Reply-To (new feature)
Comment Themes (new feature)
CSS overriding
“Number of Comments” message customization
jQuery inclusion toggling

Installation & Upgrading

Download Sexy Comments v1.4 from the WordPress plugin directory
Unzip that little sucker
Place sexy-comments folder in your wp-content/plugins directory (it should look like this: wp-content/plugins/sexy-comments/
Log in to your WordPress plugin admin page and activate the plugin.
In the plugin admin page, click the SexyComments sub-menu.
Customize the settings until you have something that works for you.
Locate your theme’s template file that displays comments (typically comments.php). Remove the comment output loop and replace with:
```
< ?php sexycomments::show($comments); ?>
```
If you plan to use the Ajax features or the Reply-To features, you will need to do two things.
1. Enable jQuery and jQuery Form Extension via the Plugin > SexyComments administration page.
2. Locate the template file that contains the comment submission form (typically comments.php near the bottom) and replace that chunk of code with:
```
< ?php sexycomments::form(); ?>
```
NOTE: Be sure not to touch the section that generates the form for adding comments! This plugin does not re-create the comment creation form.
Lastly, consider disabling the plugin CSS and taking the example CSS provided and customize it to suit your theme’s color scheme.
You should be all set, now! w00t w00t! Go make a MyBlogLog or Gravatar account if you don’t already have one and upload an avatar. Gravatar tends to be pretty flakey so I’d suggest using MyBlogLog.

FAQs

Q: What is this “comment loop” you speak of?

A: Ah, yes. That thing. Well, its anatomy looks similar to this (there will be some variation from theme to theme):

< ?php if ($comments) : ?>
	

	< ?php foreach ($comments as $comment) : ?>
        

	< ?php endforeach; /* end for each comment */ ?>
	
 < ?php else : // this is displayed if there are no comments so far ?>
	< ?php if ('open' == $post->comment_status) : ?>
		
	 < ?php else : // comments are closed ?>
		
	< ?php endif; ?>
< ?php endif; ?>

Q: Ok…so I just upgraded to a new version and there is nothing in the SexyComments admin page…WTF?
A: Yeah. Sorry about that. In this version, the directory structure has changed drastically and Sexy Comments should no longer live in wp-content/plugins/sexycomments.php OR wp-content/plugins/sexycomments/sexycomments.php, but instead it should be in wp-content/plugins/sexy-comments/. Make sure that the plugin is in the correct location of your plugins directory.
Q: What happened to sexycomments_print($comments)? I used to use that to get my comments to display…will it still work?
A: Along with a directory structure overhaul, this version had a large code overhaul as well. The old function (sexycomments_print) is deprecated but will still work for the time being. I greatly urge you to move over to the new function call sexycomments::show($comments) as that is the new *impoved* function.

jQuery 1.1.3: Speed Improvements and Bug Fixes

Matt — Mon, 02 Jul 2007 11:44:35 +0000

After a long wait, jQuery 1.1.3 has been released! (Download it at the jQuery site) When I first adopted jQuery a year ago, the library boasted both faster speeds and smaller size than any other JavaScript Ajax/DOM tool. With the release of jQuery’s version 1.1.2, a number of jQuery’s operations became very slow and inefficiencient, as evidenced by MooTool’s SlickSpeed CSS Selector Test (found via Ajaxian) which crept up a few weeks ago.

This new release boasts an 800% speed improvement with a number of its selectors along with various enhancements across the board! The selector speed boost makes me one happy camper. Check out the enhancements as it compares to 1.1.2:

Browser	jQuery 1.1.2	jQuery 1.1.3	% Improvement
IE 6	4890ms	661ms	740%
Firefox 2	5629ms	567ms	993%
Safari 2	3575ms	475ms	753%
Opera 9.1	3196ms	326ms	980%
Average improvement:			867%

And here’s how it now stacks up against the SlickSpeed test:

Browser	Prototype	jQuery	Mootools	Ext	Dojo
IE 6	1476ms	661ms	1238ms	672ms	738ms
Firefox 2	219ms	567ms	220ms	951ms	440ms
Safari 2	1568ms	475ms	909ms	417ms	527ms
Opera 9.1	220ms	326ms	217ms	296ms	220ms

In addition to the speed enhancements, there were several other notable things:

Unicode Selectors: Yup…now you can use fancy non-english characters.
Escape Selectors: This is awesome. Now, if you use weird characters (i.e. punctuation) in a class/id name, you can now escape those characters within the selector syntax. E.g. $(“div#foo\.bar”)
Inequality Selector: You can now select elements where their attributes do not match a specific string of characters. E.g. $(“div[@id!=test]“)
:nth-child() improvements: jQuery has supported selectors like :nth-child(1) and :nth-child(odd) since the beginning of jQuery, now they’ve added advanced :nth-child selectors, such as:
- $(“div:nth-child(2n)”)
- $(“div:nth-child(2n+1)”)
- $(“div:nth-child(n)”)
Space-separated attributes: After being removed in jQuery 1.0, this selector has now been brought back by popular demand. It allows you to locate individual items in a space-separated attribute (such as a class or rel attribute). E.g. $(“a[@rel~=test]“)
Animation Improvements: Animations are now significantly faster and smoother. Additionally, you can run more simultaneous animations without incurring any speed hits.
DOM Event Listeners: Internally, the jQuery Event system has been overhauled to use the DOM Event system, rather than the classical “onclick” style of binding event handlers. This improvement allows you to be more unobtrusive in your use of the library (not affecting the flow of other libraries around it). Additionally, it helped to resolve some of the outstanding issues that existed with binding event listeners to IFrames.
Event Normalization: Some great steps have been taken to normalize keyboard and mouse events. You can now access the event.which property to get most details about the specific key or button that was pressed.
Multiple .is(): The .is() method can now take multiple selectors, separated by a comma. This allows you to test your jQuery set against multiple selectors. E.g. $(“div”).is(“:visible, :first”)
Browser Version: A commonly requested feature, by plugin authors, was a way to determine what browser version their users were using. We now expose an extra property through which this information can be accessed. E.g. jQuery.browser.version

Additionally, the jQuery team has addressed 80+ bugs and has roadmapped out the next two releases (v1.1.4 and v1.2). To check out the full jQuery 1.2 roadmap, go here.

jQuery 1.1a Released

Matt — Mon, 08 Jan 2007 13:50:10 +0000

The jQuery 1.1a has been released today by the jQuery team! Its important to note that this is an alpha version before you go out and install it in a production environment, but the jQuery team asks that people give it a round of testing prior to the release this weekend.

The “Quick and Dirty” on v1.1:

Its selectors are 10-20x faster than those in jQuery 1.0.4.
The documentation has been completely revamped.
The complexity of the API has dropped by 47%.
It has a ton of bug fixes.
It has a bunch of great new features.
… and it’s still the small 19KB that you’ve come to expect.

With this release come a lot of API changes:

Firstly, :nth-child() now starts at 1, instead of 0.

A number of methods have been re-organized/re-named. Here’s the translation of old to new functions:

Old Way (1.0.x)	New Way (1.1)
.ancestors()	.parents()
.width()	.css(”width”)
.height()	.css(”height”)
.top()	.css(”top”)
.left()	.css(”left”)
.position()	.css(”position”)
.float()	.css(”float”)
.overflow()	.css(”overflow”)
.color()	.css(”color”)
.background()	.css(”background”)
.id()	.attr(”id”)
.title()	.attr(”title”)
.name()	.attr(”name”)
.href()	.attr(”href”)
.src()	.attr(”src”)
.rel()	.attr(”rel”)
.oneblur(fn)	.one(”blur”,fn)
.onefocus(fn)	.one(”focus”,fn)
.oneload(fn)	.one(”load”,fn)
.oneresize(fn)	.one(”resize”,fn)
.onescroll(fn)	.one(”scroll”,fn)
.oneunload(fn)	.one(”unload”,fn)
.oneclick(fn)	.one(”click”,fn)
.onedblclick(fn)	.one(”dblclick”,fn)
.onemousedown(fn)	.one(”mousedown”,fn)
.onemouseup(fn)	.one(”mouseup”,fn)
.onemousemove(fn)	.one(”mousemove”,fn)
.onemouseover(fn)	.one(”mouseover”,fn)
.onemouseout(fn)	.one(”mouseout”,fn)
.onechange(fn)	.one(”change”,fn)
.onereset(fn)	.one(”reset”,fn)
.oneselect(fn)	.one(”select”,fn)
.onesubmit(fn)	.one(”submit”,fn)
.onekeydown(fn)	.one(”keydown”,fn)
.onekeypress(fn)	.one(”keypress”,fn)
.onekeyup(fn)	.one(”keyup”,fn)
.oneerror(fn)	.one(”error”,fn)
.unblur(fn)	.unbind(”blur”,fn)
.unfocus(fn)	.unbind(”focus”,fn)
.unload(fn)	.unbind(”load”,fn)
.unresize(fn)	.unbind(”resize”,fn)
.unscroll(fn)	.unbind(”scroll”,fn)
.ununload(fn)	.unbind(”unload”,fn)
.unclick(fn)	.unbind(”click”,fn)
.undblclick(fn)	.unbind(”dblclick”,fn)
.unmousedown(fn)	.unbind(”mousedown”,fn)
.unmouseup(fn)	.unbind(”mouseup”,fn)
.unmousemove(fn)	.unbind(”mousemove”,fn)
.unmouseover(fn)	.unbind(”mouseover”,fn)
.unmouseout(fn)	.unbind(”mouseout”,fn)
.unchange(fn)	.unbind(”change”,fn)
.unreset(fn)	.unbind(”reset”,fn)
.unselect(fn)	.unbind(”select”,fn)
.unsubmit(fn)	.unbind(”submit”,fn)
.unkeydown(fn)	.unbind(”keydown”,fn)
.unkeypress(fn)	.unbind(”keypress”,fn)
.unkeyup(fn)	.unbind(”keyup”,fn)
.unerror(fn)	.unbind(”error”,fn)

What’s more? Well, the jQuery team will be posting throughout the week on all the cool new things you can do with jQuery 1.1. I’m looking forward to seeing the changes! Oh, with regards to changes, its important to note with that list of functions above…the old method will no longer work come v1.1. To keep those functions in use, a ‘helper’ library will need to be used…chances are that won’t be available until the 1.1 final.