mysiteonline™

jQuery: Edit Content Inline on Dynamically Created Elements

nospam@example.com (Brendon Kozlowski) — Thu, 22 Jul 2010 12:34:48 -0700

Unless you've been living under a rock while learning jQuery, everyone should have learned of the .live() call within the jQuery JavaScript toolkit. If you haven't, shove that rock aside - the .live() method takes the place of bind() (which is the more powerful, and base method of .click(), .blur(), etc...) for elements that are created dynamically at runtime. If you dynamically create elements after the DOM has loaded, and assume generalized JavaScript functions you've written to target these new elements (we'll presume you're targeting a "findMe" class) will work. Well it won't, unless you use .live().

Now that we have that out of the way, another one of jQuery's really great features that mimics why Wordpress is so great - all of the user contributed plugins, whether they're efficient or not, the fact that someone else has already created a solution for you, and is willing to share it with you (most likely for free) is awesome. One such type of plugin that I was looking for today, and knew I'd want to eventually use at some point, was an edit-in-place, or inline edit plugin - something that allowed me to edit content from within the DOM, such as in a DIV container (not in a textbox - or at least not initially rendered in one) dynamically.

In my case today, I was experimenting with dynamically creating elements that might need to be edited after being created. My first gut-instinct thought? Yup, you guessed it: .live(). I replaced the call to .bind() in the plugin's source and voilà! Nothing. It didn't work. The jQuery code in the plugin had been optimized beyond a point where I was comfortable to modify it further and understand what I was doing in order to make it work (which was kind of pathetic, but I digress).

So, how could I solve my little problem? Quite easily - I wasn't really thinking.

The call to instantiate an event on targeted objects after the DOM is ready is something like this:
I was scratching my head, trying to figure out if I'd have to uninstantiate all elements and reinstantiate the event bubbling throughout the DOM each time I created a dynamically created element. I was over-thinking it. Instead, all I had to do was create the event on that newly created element on the element's creation itself. Ooh, hard. I know, I know - I'm brilliant!

jQuery v1.4+ example code:
Easy and simple.
You can see how to further use and extend Arash Karimzadeh's jQuery Editable plugin, or if you'd prefer a more popular plugin for inline editing with jQuery, there's also Mika Tuupola's Jeditable plugin. According to the comments Mika intends to add .live() support soon, but until he does this should work just fine.

"Why did you choose Editable over Jeditable if Jeditable is more popular?"
In this specific case I didn't want to submit anything back to the server on edit, and it seemed like Jeditable was all about saving back to a data store somewhere. Editable just seemed simpler for what I was working on at the moment.

Happy programming!

Edit a Wordpress Article with PHP and XML-RPC

nospam@example.com (Brendon Kozlowski) — Sun, 09 May 2010 20:44:50 -0700

I had created a topic discussing how to create an interface to add new posts to a Wordpress blog using PHP and XML-RPC. It was something I had needed for work. Unfortunately for many of my site visitors and readers from Google, I never had the need to edit an article, but many of them did. I no longer had a development installation of Wordpress and I don't particularly like Wordpress (due to its spaghetti like codebase).

The people have spoken though, and I have listened. I reinstalled Wordpress to see if I could get an edit action to work. This is a two step process, you must first get the contents of the post, and then submit the edited version back to Wordpress. The tricky part here is modifying the date field.

If you haven't read my first post on adding a new post in Wordpress with PHP and XML-RPC, you'll want to read that. There I cover all of the basics you would be better off knowing before tackling an edit straight from this code (it won't make much sense otherwise).

Using the same IXR library that I used in the post creation article, we'll use a similar approach to retrieve an article. There are two ways to get article information - if we know the ID of the article we can simply use metaWeblog.getPost, or we can get a list of recent posts (with a maximum limit of - I believe - 15) using metaWeblog.getRecentPosts.

A simple print_r() of $response will give me the following:

Array
(
    [dateCreated] => IXR_Date Object
        (
            [year] => 2010
            [month] => 05
            [day] => 07
            [hour] => 01
            [minute] => 33
            [second] => 49
            [timezone] => 
        )

[userid] => 1
    [postid] => 1
    [description] => Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! WAHOO! WAHOO!
    [title] => Hello world!
    [link] => http://example.com/?p=1
    [permaLink] => http://example.com/?p=1
    [categories] => Array
        (
            [0] => Uncategorized
        )

[mt_excerpt] => 
    [mt_text_more] => 
    [mt_allow_comments] => 1
    [mt_allow_pings] => 1
    [mt_keywords] => 
    [wp_slug] => hello-world
    [wp_password] => 
    [wp_author_id] => 1
    [wp_author_display_name] => username
    [date_created_gmt] => IXR_Date Object
        (
            [year] => 2010
            [month] => 05
            [day] => 07
            [hour] => 01
            [minute] => 33
            [second] => 49
            [timezone] => 
        )

[post_status] => publish
    [custom_fields] => Array
        (
        )

[sticky] => 
)

As I said, the tricky part here is the date. If we want to modify the date, we need to supply the IXR_Client object an IXR_Date object. But how do you do that? Well, looking at the IXR class code, the constructor needs to be supplied either an ISO date, or a timestamp. Since it's easy to supply a timestamp, I'll do that for this example.

I used strtotime() with "now" as the passed parameter so that we'll get back a timestamp for the current time. This is just an example, make it fit to your needs. I've also put in the necessary data required for the $content variable, and used most of the variables from the previous metaWeblog.getPost request. So...now we simply call the actual query for metaWeblog.editPost:

That's it. metaWeblog.editPost is pretty easy as long as you have the right data being sent to it.

Note: I will NOT be indulging questions pertaining to anything beyond the scope of this article, such as custom fields or any type of plugin that modifies the standard behavior.

SWFObject 2.x and Zoomify

nospam@example.com (Brendon Kozlowski) — Tue, 04 May 2010 19:28:39 -0700

Zoomify is a software company/product that allows for continuous zooming on extremely large image data (JPEG2000) by first separating the original image in to many parts, and then using Flash (and XML) to dynamically piece them together again within a viewer. It works quite well (you can see an example from their website). They have a free "express" version; a version that comes bundled as part of Adobe Photoshop (CS3 or above - File -> Export -> Zoomify); a version that allows you to modify the look and feel of the view with XML (retail product), a version that contains the FLA source code (retail), and their flagship product, the Enterprise version which allows you to house everything necessary for simplistic creation all on the server...including everything all of the other versions offer, as well as more features and the ability to simply upload images directly to the server for parsing.

SWFObject is a JavaScript utility used for dynamically (or statically assisted) inserting of Flash media to a web page. If a user does not have Flash (or the correct version), it will automatically prompt them to download and install it. If they do not have JavaScript enabled, whatever content you were originally going to replace with the JavaScript will simply show instead. It also is unobtrusive, is Adobe's recommended way of embedding Flash to a web page, and has been time-tested to cover many edge-cases of its use.

Zoomify is a great tool to use in places where fine detail is needed to be viewed, but either a slow connection or speedy access is required to the content (plus, who wants to wait over 30 seconds for an image to load?). With working in a library, I've found it's an excellent tool for displaying historic images - such as digital archives. These high resolution images are not really useful in a regular web-centric view, but once you add the ability to zoom in to see detail, such as a person's face from something which was originally a 1.5"x3" panoramic scene - well, even I was in awe. ...and it's quick!

The problem with Zoomify is that by default, the free tools (for download from their website, or the one included in Photoshop) export an HTML page with EMBED and OBJECT tags directly in the HTML. If you work for a local/federal government or state owned library in the US, you are legally obliged to follow standards, and the EMBED tag is not an HTML standard and therefore breaks standards compatibility. What to do? Use SWFObject - it dynamically inserts the necessary code to get your browser to render the Flash movie on the page. Unfortunately, there's little information (if any?) on getting Zoomify to work with SWFObject out there on the web. Before I discovered I had a typo in my code, I emailed Zoomify support to ask about it and they emailed me back with Adobe's own version of AC_RunActiveContent.js - however Adobe recommends the use of SWFObject over their own JS implementation. I intend to thank Zoomify for trying, and giving them a link to this article entry. After all, they're more specialized as Flash developers so I can't fault them and their product really does seem to be the best (perhaps they accidentally attached the wrong project archive, who knows). Microsoft's Seadragon claimed to be revolutionary, and I had already been using Zoomify for about a year, and Zoomify felt more responsive and more people use Flash. Oh well, Microsoft. It's still cool.

Sorry for my rambling, on to some substance.

Zoomify provides the following HTML code by default in the HTML template that it creates for you:

So ignoring all of the classid, codebase, and other junk we don't completely care about, let's look at the actual values being passed to the browser through the PARAM tags within the OBJECT tag. These are the values we'll need to pass to SWFObject.

SWFObject separates its value passing to two variables, flashvars and params. FlashVars, found above, is its own PARAM variable, containing multiple values URL encoded. In this example, we have the variable zoomifyImagePath with a value of "example_img", and zoomifyNavigator set to false. The navigator is a small box that hovers over your image (full opacity) showing where you're viewing within the overall aspect of the original image. That takes care of the flashvars values, not to the params which is everything else. bgcolor is, of course, the background color for the flash stage, which will be covered up by your image data, so you can optionally ignore it if you'd like. menu...to be honest I don't know what this does, I changed the values and saw no difference and even removed it. src is the source, or location of the Zoomify viewing flash application that is used to actually view your data. This is a relative path to your viewer file. If you will be using this script in more than a single place on your website, I strongly recommend you only use one viewer and point all of them to that single viewer. Also notice the HEIGHT and WIDTH attributes to both the EMBED and OBJECT tags here. You can change them if you don't care about standards support and SWFObject, but they must match.

So how do we set up SWFObject with the knowledge now in our hands? Well, let's take a look at a standard (dynamic) SWFObject call.

So going from the example there, and the data we've collected, it seems pretty simple! But wait, what exactly is the zoomifyImagePath? Should that have some sort of file extension? Well, no, and that's what threw me, honestly (quite silly, really). The Flash file knows to look for the XML file in the folder that you're telling it to look in, so all you need to do is send the location of the folder (relative URL) and it'll do the rest. So let's see what that would look like:

The flashvars and params variables expected by swfobject.embedSWF are JavaScript objects, not simple variables (or rather, variables with object notation) as the variables themselves hold variables.

That's it. Keep in mind that the example above didn't use the bgcolor, or menu values. I also didn't use the "attributes" variable that can be passed to SWFObject where you can define the id, name, class, and align values. It's unnecessary for this example so I skipped it, as is showing a callback method (unnecessary that is).

Mix that together with a little modal magic and you have something a little bit nicer, such as what I did in the following page:
Honoring Saratoga County Veterans

Enjoy!

U.S. Public Education and Technology

nospam@example.com (Brendon Kozlowski) — Mon, 19 Apr 2010 12:00:00 -0700

"Are You Smarter Than a Fifth Grader™"?

Although this cliché'd phrase has definitely been overused, the premise of the show of the same name just screams volumes to me. I remember learning all of that information during my education in school. I most definitely don't remember the vast majority of it today; nor is there much reason for me to have to (save being on that show to win some money). Think to yourself: exactly what percentage of the things we learned are we truly using in our lives today? How much of it did we need to lead a fulfilling life, or to prepare us for our jobs?

It seems that kids are simply assembly line workers from a database repository. Let's see how much generic information we can fill them up with. Not only that, but we're telling them what to learn, we're not suggesting that they learn things that pertain to their own interests, the New York State Regents diploma doesn't really mesh well with that.

Even with the ideology of pushing as broad of a range of topics on to children so they'll know (or discover) what interests them, when we do need to know something that we learned in school, how much of that do we typically have to look up again anyway? I am here to say honestly and truthfully - I am NOT smarter than a Fifth grader.

Workforce Intelligence

But how does that work in to technology? I might not be smarter than a fifth grader, but I can find the information much quicker than most fifth graders that I know. Why? I've taught myself how to use computers, applications, and how to successfully navigate the internet (and which websites I should try first, second, or third). I'll be honest in that I have had official educational "training" in these areas, but 85% of what I know in this field is all self-taught, and that pertained to me pre-workforce as well as what I'm doing currently. However, this is me, not my entire organization.

Many of my coworkers have something called "book smarts", or "social smarts" (a people person), or they're able to apply knowledge logically to situations. It's interesting to watch the different types work to solve similar situations. However, out of each group, many of them are limited in their technical knowledge and experience. They were not exposed to computers in their education, and now that they're in the workforce (and have been for some time) they're lacking a serious tool for their livelihood in the workforce itself.

Is education to blame? Continuing education? The speed of technological advances versus required training and funding? Perhaps it's change itself which is to blame as some people just are not good at dealing with change.

Generation Gap

Perhaps it's actually a generation gap. I often hear that, "Kids grew up with that stuff," or, "I don't need it, I can do my job without it." Although both might be true, (1)you were engrossed in it while things were changing around you, and (2)you can do it better (more efficiently) with it. Alternatively, I've also heard, "Why do I need to know Algebra, I can use a calculator!" from the younger generation. Since I am part of that younger generation, I do agree with it. "Oh no!"

Think about it: if a company's computer system goes down entirely, does the business remain open or do they close operations? Can it be done by hand? It sure can! Do most managers want to take the risk of extra possibility for human error to occur? From my experience, not likely. So again I ask, what is the point? In an ever-increasing world of electronic media, answers, and communication, there's little need for advanced mathematics (algebra was a poor example, I use algebra all the time, but how about Matrices? They were fun as hell to me, like a math-based Sudoku puzzle, but I've never used it since). Obviously if you're going to be working as a mathematician you'd need to know it, study it, learn and re-learn it, but for the vast majority of us, why are we being force-fed this extensive knowledge when we could simply look it up on-demand after getting the simpler introductions to it instead?

Technology in the Classrooms

No cellphones
No computers
No group work

So how exactly does this mimic preparation for the workforce?
Do I use my cellphone at/for work? Yes.
Do I use a computer at work? (lol) Yes. Only two departments don't use a computer, although every staff member has an account to access our system.

So again, I ask, why are we removing technology in the classrooms when we should be encouraging it? Even on tests, if we are in "crunchtime" on the job and need to be more efficient, we may use our computers; yet children aren't allowed? Sometimes proving that you can solve the answer in more important than how you solved the answer (keeping in mind copyrights).

College Capstone Courses versus Apprenticeship

Perhaps my colleges weren't as beneficial in this regard as other colleges, but the capstone courses were made to theoretically mimic a real-life situation in business. Rarely did it seem like a business. We had other "departments" (courses) we were working for at any given time, we only went to work 2 or 3 days out of the week, and the "boss" wasn't ever worried about a deadline or economic downturn. How much experience did this really give me? Well, it actually did give a lot of experience as the courses were made to mix topics learned throughout our years there in to a single unified curriculum for the semester...however, it is no where near the amount of experience that could have been gained had we had an apprenticeship instead. Being able to work under someone in the exact same field that you aspire to be a part of, see the actual causes and effects from things done (or not done), feel real pressures, and take home true lessons that couldn't be learned in a classroom. (This is all assuming the apprenticeship itself wasn't run by someone working out of their garage.)

Final Thoughts

I have to at least quickly mention "No Child Left Behind". I think the ideals behind it were magnificent. I think the actual implementation of it is the most dreadful thing I've ever witnessed happen to the public educational institution in a long time. Some people just will be held back. For instance: I am terrible at remembering Computer Networking topics. It was the hardest course I've ever taken. I managed to get a B-, and I was proud of that B-. Alternatively, I can sleep through other classes and get better than a B-. Some people are just better at certain things than others. If you force everyone to an equal footing, you've already failed your students.

Personally, I favor specialized career training such as what areas in Europe are doing. If we know we are bored out of our skull over History and we just want to work on cars to be an automotive technician, LET US. We'll be better at it, and you'll be better for it! However, we need specialized training for everyone. If only a small portion of the student body is given this opportunity, that minority will be ridiculed for being "different" by their peers. Yes, it's important.

Anyhow, getting back the main point: Specialized training in schools would go a long way to realizing a better system. We should be embracing technology and the changes that come with it, not sticking to old arbitrary thoughts of, "Well if I did it, you should too". I learned how to type at 120wpm by the time I was 16; you're 46, I think you should too. ...does that sound reasonable to you? No?

Whatever the case may be, our system needs a drastic look at how it's currently being implemented, and compared closely to successful systems overseas. I support teachers and the education system itself; but it also needs an overhaul. Example: Horrible tenured teachers should not be locked in to their jobs; they should be held accountable just like anyone else. I hope some day some more fruitful changes come around from great ideas through our politicians.

20Couch - A new web-based Twitter Client

nospam@example.com (Brendon Kozlowski) — Thu, 15 Apr 2010 07:56:26 -0700

Note: My review is of version 1.02, and the current version is already at either 1.06 or 1.07, fixing a few of the issues I had described in my discussion.

I've had the luxury recently to test out an application recently built to make it easier to follow along with our Twitter conversations. It's taken me about 4 weeks to finally get my review up on the web. Why? Because video/screen capture recording programs suck, that's why. After trying 3 different applications and trying to fix the video from one of them after-the-fact (which I took 2 days alone trying to fix it), I gave up and downloaded the trial of Camtasia Studio. Ironically, Camtasia crashed on me during post-processing. Thankfully I saved the project moments before.

Anyway... I did a video review so that I could talk freely for as long as I wanted without posting 20 odd pictures and causing huge scrolling. Unfortunately because the video was 20 minutes long, I couldn't upload it to Youtube (I couldn't get Camtasia to recognize my Youtube account information to upload it for me anyway), so it's currently an external link hosted on my own website.

Check it out here!

Update: I'm happy to announce that since I've skipped 5 minor versions (1.02 -> 1.07), 20Couch now has the ability to mark posts as read by a set timeframe:
- all
- older than 6 hours
- older than a day
- older than 2 days
- older than a week

Still no individual markings, but this is loads better. Also, this week was a code-storm week for Matt, developing one minor release each day of the week. Thanks for all of the hard work, Matt. Might I suggest some documentation on plugin and skin support?

Style Switcher with jQuery

nospam@example.com (Brendon Kozlowski) — Wed, 07 Apr 2010 07:41:52 -0700

While developing an Adobe AIR application using CSS/HTML/JS, I decided I wanted to allow for templating of the application. The default template has the ability to switch view states (horizontal, or vertical). Since I'm building the application with CSS, HTML and JavaScript (with jQuery), I thought that in order to create this effect, I'd use a style switcher.

I then thought...hey, I wonder if this would work in browsers other than the WebKit version I've been testing under?!

It worked in Firefox 3.6.3, Opera 10.51, Chrome 5.0.342.8 beta, and Internet Explorer 6 (although my test CSS was broken in IE6). Opera 10.50 (tested first) had an issue with loading the secondary CSS on first attempt, but had it cached after that. 10.51 loaded everything just fine, but I can't be sure if it was still cached from the attempt with 10.50, or if 10.51 fixed an unknown issue to help fix it.

So, how did I do it?

Back in the day, Firefox had a little-known and not-often-used feature that allowed web-designers to incorporate multiple CSS layouts/designs right in the site, and the users could choose on-the-fly which UI they'd like to use (on each session) by going to View, Page Style, and then choose the style you wanted - if more than a single style was available from within the code. To give users this option, you include secondary stylesheets after the first, but in the link element, you specify that it's an alternative stylesheet, as so:

I originally started with this concept and tried swapping out the primary for the secondary and vice versa. Unfortunately this had some issues during development that may have been related to some other problems, but I dropped this attempt (but if Opera has a problem with caching, this route would solve that). Instead, I simply changed the href property of the link element. It was easier to target with jQuery without using URL matching/REGEX, or arbitrary naming of the rel property.

Anyhow, here's the code that I used (in this example, I am clicking on a button with ID of "switch"):

What this is doing:

Bind an onClick event to the element with an id of "switch"
find the LINK element of a media type of screen that contains an href property and assign it to the variable "cssStyle"
fade out the application (or a website wrapper?)
swap the CSS style for another (inline), depending on what's currently loaded
fade the application (or website wrapper) back in with new style

...and we now have our style swapped out (quickly and easily) for an entirely new style.

Adobe AIR 2.0

nospam@example.com (Brendon Kozlowski) — Fri, 19 Mar 2010 10:27:54 -0700

As I was redesigning the interface to my "RefStat" (Reference Statistics Tracking) application, I came across a web page that claimed support for CSS3 in Adobe AIR, so immediately began creating the new interface using Safari 4 as a testing ground for my UI. After almost completing it, it was brought to my attention that this would not be available until version 2 of AIR was released. I am still using v1.5.x. Not awesome.

The good news however, is that there is a public release of AIR 2.0 Beta 2 for download, which gives me hope that the stable release is not too far away. Since I am also waiting on an update to the tooltip library I am using, this wait hopefully won't be too long after I am ready for it.

New features in Adobe AIR 2.0 that I am looking forward to:

UDP packet support (interfacing with some game servers)
TCP/open socket listening (acts as server)
~30% more efficient than AIR 1.x
WebKit version updated to Safari 4.0.3 equivalent
(Better?) Printer support

Features planned for my redesigned UI (v2):

8+ more buttons? 800x600 or less resolution? No problem anymore! The buttons wrap and the app scales.
Templates/Skinning support
No more color coded buttons (in default templates)
Redone UI in my template won't have the hover bug for tooltips (mouseout from inside AIR app, thinks you're still hovering)...AIR 2.0 might fix this on its own.
On-the-fly template switching
Refactored object class

I might add a graph rendering to display current stats for the day too as I've been asked for it, but it wasn't meant to view reports, only create the data used for them. This seems less important to me than the user interface and code updates though (template/skinning was so users could switch between horizontal and vertical displays depending on their desktop icon arrangements or resolution).

Current mockup (without tooltip) rendered by Safari 4.0.5 for Windows.

Reference Statistics Tracker for SSPL v2

I never claimed to be a UI designer. The handles on the left/right sides are "grip" or handle areas in order to move the application. The resize/change template button is not yet implemented in this template (though all controls would be in the orange group). The notepad is the new feedback button (in place of the "T|" from before), and of course minimize and close. The image shows a hover state, not a mouse-down state. The colors are meant to be similar to our library's "official" color (#621E27 or close variations).

jQuery Printed Footer Links

nospam@example.com (Brendon Kozlowski) — Mon, 08 Mar 2010 11:52:51 -0800

I was randomly perusing the web and stumbled across an older interesting List Apart article (September 19, 2005 to be exact). In it, the author used JavaScript to create a list of all links found on the page, and then create a footer with a footnote-like list. I was using simple CSS to display the URL of the hyperlink in print display media, but that doesn't work in some browsers (IE), and worse off it can really mess up the visual order of the page.

Inspired by the article's intentions, I decided to use some jQuery to whip up a similar solution and I took the opportunity to use jQuery 1.4's new syntax for object creation (so this is 1.4 code only - see comments for a 1.3.x solution). Differences? I exclude hyperlinks set to the hash symbol (#) which shouldn't be found anyway (graceful degredation people!), "mailto" links, and I don't find link element's citations (blockquote "cite" property). I also believe his script would grab image information, but I'm not entirely sure, mine only searches hyperlinks. I also opted not to exclude listings of duplicate hyperlink values. If it's found twice, it lists it in the footer twice. Less JS processing, and more clear to the visitor (in my opinion).

Expected Issues: It requires JavaScript (and the jQuery library included on your page). If JavaScript is enabled but CSS is disabled, the hidden content will be visible to the user.

On to the code!

First thing's first, we should find the links in our code that we'd like to target. For my situation, I have a content class defined on my page for all content, and the column that contains the actual body is called ".col2_right" (yes, I know, ignore the fact of the poor naming scheme). So, in jQuery, we're going to target all hyperlinks found in the col2_right and content classes, but we don't want to include links to hashes or mailto links. I've also removed listing to nofollow links, but that is my choice (probably not a good one, but I digress).

We'll also need some sort of container to keep these found links wrapped in. I chose to use a fieldset and legend, you could just as easily create a DIV and a H2 or other tags for your own purposes. I also want to create an ordered list to match the found hyperlinks.

Here comes the real center, meaty goodness of the script: looping through our list of found hyperlinks, creating a little notification text next to the hyperlink's text, and add the hyperlink URL itself to the footnote section in the ordered list as a list item.

We use jQuery's each() method to loop through the items in the array, grab the link's URL so that we can do some testing on it, and modify it's value for inclusion in to the footnotes. Some links may be relative URLs, but that doesn't mean much to someone who doesn't know what a relative URL is. In fact, it would probably confuse me too at first. I happen to know that my domain forces www for the subdomain so I've added that in, fix that up as you like. I then create a span tag to hold the associated footnote number (the ListApart article used a superscript tag, I found regular text is more easily readable), add a class to it so it's only visible when printed, and create my list item element with the URL from our link, and place those elements in to the document in the appropriate places with the appendTo jQuery function.

Last but not least, we append our entire footnote to the end of our content body section. The full code is below.

$(document).ready(function(){
	//get the container and target
	var links = $('.col2_right.content a[href]:not([href^=#],[href^=mailto],[rel=nofollow])');

if($(links).length){
		//create a container and heading for the footnotes
		var footnotesWrapper = $('<fieldset>', {
			css: {
				clear: 'both'
			}
		}).addClass('print_only');
		var footnotesLabel = $('<legend>', {
			text: 'Website Addresses Used in the Document'
		}).appendTo(footnotesWrapper);

//create an OL to hold the footnotes
		var footnoteList = $('<ol>').appendTo(footnotesWrapper);

$.each(links, function(i){
			var linkText = $(this).text();
			var linkValue = $(this).attr('href');
			if(linkValue.substring(0,1) === '/'){
				linkValue = 'http://www.'+document.location.host + linkValue;
			}
			//create element to hold span with class to hide except on print
			var newElement = $('<span>', {
				text: ' ['+ ++i +']'
			}).addClass('print_only').appendTo($(this));

var listEntry = $('<li>', {
				text: linkValue
			}).appendTo(footnoteList);
		});

// append the heading and <ol> to the target
		$('.col2_right.content').append(footnotesWrapper);
	}
});

Note the added "if" statement to check the length of the links variable. If it is empty, we did not find any links and don't want to create any extra markup when printing the page.

Oh, and the CSS: ".print_only { display:none; }" This should be placed in your normal style sheet, and leave it out from your print style sheet. If you don't have a print style sheet, extend it a bit: @media print { .print_only { display:none; } }

Note: Thanks to Stiles to provide some fixes and compatibility changes for jQuery 1.3.x.

Website Render Time with PHP >= 5.1

nospam@example.com (Brendon Kozlowski) — Tue, 02 Mar 2010 08:35:01 -0800

In CakePHP v1.3.x, there will no longer be an automatic dump of tons of information (probably because the DebugKit plugin can handle all of that information for us) when in debug mode. However, in my non-CakePHP websites, and even in my Cake websites, I have become accustomed to viewing the source to see a full render time for the page in an HTML comment. Thanks to the help of "jnay" over at CakeQs.org, I've found out about a new (as of PHP 5.1) $_SERVER variable argument called "REQUEST_TIME". It holds the UNIX timestamp of the initiation of the call.

By using this variable, along with the optional boolean argument for microtime (as of PHP 5.0.0), we can determine the HTML render time of our application with the following calculation in either our footer view/template, or controller (preferably in the last possible iteration of your project's render):

The echo is optional and used only as an example here; it simply depends on how you use the calculation in your script(s)/framework(s). This is much easier than starting the timer in the header and calculating the difference in the footer like I had to do in the PHP 4 days!

Remember, this is only for trivial estimations and comparisons. If you need to thoroughly evaluate your script(s) for time efficiency you should be using something else, such as Xdebug and a form of CacheGrind for your choice of OS.

YSlow: Getting a better score and a faster site.

nospam@example.com (Brendon Kozlowski) — Sun, 28 Feb 2010 14:06:05 -0800

I decided that it was finally time I took a serious look at increasing the YSlow score for our websites. I was under the impression that browsers would automatically cache (by default anyway) certain graphic elements to save on bandwidth, but our staff website has a repeating background image for a left hand navigation bar, and it would disappear for a fraction of a second while reloading the other page; this told me that something was not right, and YSlow might be the answer I was looking for (and that my PHP framework of choice was not to blame).

YSlow:
Initial Score: 67

I choose the smallest size images exported from Photoshop, and if I ever use a PNG, I use a great tool called "PNGGuantlet" (Windows only) which compresses PNGs while also removing the alpha channel problems that make PNGs appear with different colors than they were intended to. I also have compressed my main JS file, and CSS file(s). All XHTML should be valid (unless I updated a link and forget to escape an ampersand), the DOCTYPE is listed, character set is given, and all non-background images contain height and width properties. Oh, I also have a default favicon.ico file. These are all good recommendations to do regardless, and in doing so YSlow gave me a pretty decent score (albeit, not that great if it was a test in school).

Two modifications to YSlow's scoring:
1. I am not Amazon. I don't necessarily need a CDN for my content.
2. I don't need a subdomain to house my CSS, JS, and images. If I end up storing videos, that already has a subdomain set up and ready.

Therefore, I modified YSlow's grading scheme. To do so, there is a dropdown menu to the right of the 4 tabs in the YSlow toolbar, it is labelled "YSlow(V2)". Click the "Edit" button to the immediate right of that. In my scheme, I disabled "Use a Content Delivery Network (CDN)" and "Use cookie-free domains". You cannot overwrite the rule set, so you have to save it as something else, I named mine "SSPL" since that is the website domain that I care about (for work). Different websites have different criteria, so it only makes sense to name it something related to the website you are concerned about. Go through and uncheck what you don't believe applies to you. If you're uncertain, leave it checked. This little configuration raises my grade up already - that was easy.

Here are the .htaccess rules I've added to raise my own score, what they're for and why I chose to make them:

Enable GZip'ing of components:
The AddOutputFilterByType DEFLATE [list of mimetypes] was the command I used to gzip the particularly listed files that have such a MIME-Type: html, txt, js, css, js (variation), json, json (variation). Some browsers read JSON and JavaScript as an application mime-type whereas others read it as a text type, I figured I would simply cover my bases. Although these are ASCII types, you could just as easily gzip binary types, such as GIF, JPG, or PDF (though theoretically they should already be compressed and you're just adding extra work for the server).

Configure ETags:
From what I have read, ETags are a mixed breed. They can have some benefits, but they can also have some detractions. Again, considering that I'm not Amazon and I will be enabling the Expires heading, I opted to simply disable ETags. You can disable ETags in Apache under an .htaccess file with the unset rule above, along with the FileETag None to cover most supporting browsers (one would hope). I wasn't able to find any examples on how to properly "configure" ETags so that YSlow would not complain other than to simply turn them off. ETags, from what I've read, are a variation on telling the browser to cache certain files in a certain manner, but it doesn't work on any website that is run on multiple servers for the same content. Either way, I opted for the Expires heading which made ETags rather redundant from what I could tell.

Enabling an Expires Heading:
It appears that in Apache, by default, Expires headings are disabled, and just like mod_rewrite, you must explicitly tell Apache that you wish to use it, so the first thing you have to do is turn it on: "ExpiresActive On". Once that is done, there are a few ways to set the expiry time; I opted to use a human readable implementation, and YSlow expects a "far future" date (from the date last modified). As one of my sites is currently built with HTML files pulling in a template, the original files won't typically be modified for a long time, so I had to make my future date a FAR future date (10 years from last modification) - your experience may vary. For further information on Expires, take a look at the Apache documentation for mod_expires.

Additional speed enhancements:
I recently read that if you have a framework that may take some time figuring out what data must be displayed prior to even getting it to the server, it may be a good idea to flush the buffer so that the data that can be sent to the browser can be sent prior to everything else - such as the document head which contains the page title, CSS, and sometimes JS. That way, while the rest of the page is being rendered by the server, the JS/CSS has time to download. This is actually why I decided to leave my JS at the top of my website rather than placing it in the footer. I live by graceful degredation, but if the page loads before the JS does, it can also cause a screen flicker which is against accessibility guidelines for HTML. In this case, it was possible speed for accessibility - I choose accessibility. I personally really don't want me, or my client(s) getting sued for accessibility issues because "Oh hey, it loads a second faster now!". If you had an interactive rich website such as Facebook or MySpace, I'd imagine you'd have to place JS in the footer and have a separate, accessible domain for others...if that's even easily possible. Anyway, what I did with flushing the output buffer was to (in PHP) modify my template file, I called PHP's flush() function after the closing HEAD tag in the HTML template file.

Anyway, with those small tweaks and tricks, I was able to get my score up to 96. I have a B in 3 categories:
1. Expires header issue (CDN of ajax.googleapis.com, it won't recognize my CDN) as a CDN has a non-far future expiration date in the called JS file.
2. Minify CSS and JS - it is minified, so I'm not sure what it wants from me. The filesize is probably too large for an A.
3. Put JavaScript at the Bottom - I already explained why I don't want to do this, but I've left the rule in anyway.

Now my site seems to be a bit more responsive, and the background image I mentioned before no longer disappears and reappears (unless I press refresh really, really fast, confusing the browser's cache I guess).

Cassie Print Station - Automatically Close the Window

nospam@example.com (Brendon Kozlowski) — Fri, 19 Feb 2010 20:05:48 -0800

Cassie is a PC Reservation Management system software built for libraries, or other venues that wish to offer multiple PCs for the public to use. It also has a print management station. Unfortunately, as of the current version, when a user goes to view their own print jobs, their account window stays active "forever" until they, or someone else clicks on the "Close" button. When using with a JAMEX corporation coinbox, it also doesn't give the user their change until the window is closed (insert $1.00 for a $0.60 charge, it won't expell the $0.40 until the window is closed).

This is a bit of a problem.

I've used AutoIT, an automation scripting language, to automate the process of a user clicking on the close button. The makers of Cassie didn't make it easy though, I was unable to detect the actual button, thankfully ALT+F4 worked (ESC worked until the JAMEX portion was added, for some reason it stopped working afterward).

This uses the included Timers.au3 file to do most of the dirty work in detecting an idle state. If the computer is left idle for 45 seconds, it will issue ALT+F4 and close the window. ALT+F4 cannot close the application itself in this instance (and won't be issued unless that window exists and is active anyway). Although it checks every 100 milliseconds and runs at all times that the computer is turned on, I tested the resources it takes up...it was barely noticeable on an old P4 @ 2.80 GHz w/2.86 GB RAM (my work PC). This application (once compiled with AutoIT) should be placed in the Windows' Startup folder (or a respective registry key).

Enabling SSL (HTTPS) via htaccess Only if Matching a Specific Domain

nospam@example.com (Brendon Kozlowski) — Thu, 18 Feb 2010 09:19:08 -0800

I had a momentary stumble today that I (somehow) couldn't get through my head. Perhaps it's just because it's been so long since I've worked with mod_rewrite, but regardless of that, here's the situation and the solution:

"The Situation" said that the situation is:
I had multiple conditions that needed to be met before a rule should be run, otherwise it should be ignored.
I am running (and require) SSL on my production server.
I am not running SSL on my development box.
I didn't want multiple .htaccess files in my SVN repository.

The solution:
"Duh." Multiple RewriteCond in a row (separated by a newline) all must be met before the RewriteRule is run.

The resulting .htaccess took the following form:

The last 3 lines dealing with rewrite in my .htaccess file are related to the code library I'm using, and are not pertinent to the problem here. The important lines are as follows:
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^staff\.sspl\.org [NC]
RewriteRule ^(.*) https://%{SERVER_NAME}/$1 [R,L]

The first condition tests to see if SSL (https protocol) is not being used in the request.
The second condition tests that the domain's host is "employees.sspl.org" (URL changed to protect the innocent).
If both tests pass, then I redirect the user to the host (and path "/$1") while using the https protocol (SSL). Done.

Interesting Links from the Web - January 2010 Edition (Part 2)

nospam@example.com (Brendon Kozlowski) — Fri, 05 Feb 2010 19:06:50 -0800

Twitter can be a real boon for learning new things and finding interesting little projects so long as you manage to follow the right people.

Sticky Footer: Alternative Approach - This takes an alternative approach using only a single conditional statement for IE and supports IE5.5+, with 100% valid CSS and HTML

Design Contract Template - A template for contractual jobs in design, alter to your own use (quite verbose)

15 Tips for Designing Tables - A nice resource on using CSS and JS to markup and add interaction to your tables, a nice new take on it with good examples

A review of Rich Text Editors - Not just your grandma's WYSIWYG Editor...great thorough review

An HTML5 Video Player - Created with JavaScript and HTML5 markup; no Flash here folks!

Microsoft's Translator Widget - This thing is the coolest translator I think I've ever seen. It loads the translated version progressively via AJAX without any new page load -- with a loading bar to boot!

Free SEO Toolkit for IIS - I don't use IIS, but for those that do, this would be an enormous help, watch the video to see (good to watch even if you don't use IIS)

Dygraphs - Interactive, zoomable, plottable, QUICK JavaScript-based graphing library - it might give Highcharts.js a run for its money on line graphs (it's basically all this does, unfortunately)

Vector Social Media Icons - I'm not usually one to be excited enough about icons to tell people about them, but the fact that the author supplied two versions of the icons in vector format is pretty darn cool (32x32 and 16x16; 32x32 never scales well to 16x16 size, and 16x16 size is made especially for that size and doesn't look good stretched out)

Revised Font Stack - Looking for more fonts to use in your CSS without requiring @font-face or sIFR? OS's have updated their default font base, check here to see what more options us web developers might have nowadays

jQTouch - "A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices." Check out the demo, it's sick...in the good sense.

Free App A Day.com - For all you iPod Touch and iPhone users, check out this site for some free apps! (Don't say I never gave you anything!)

Server Load, Take 2

nospam@example.com (Brendon Kozlowski) — Fri, 29 Jan 2010 19:48:36 -0800

So I worked on the CakePHP plugin for Prowl a bit more, and in doing so, I created shell-based access to the plugin. I can now send Prowl messages from the console (i.e.: I can run PHP via cron to check on things and send myself the results, if necessary). A shell task I created was for server load, as a followup to my previous post. In working this out, I've modified the output for CakePHP's Shell::out() method so that it auto-wraps and indents a bit more nicely (my ticket in the LighthouseApp is here). Time for some output examples:

Issuing the Load Alert help call: cake prowl load_alert help

Sending a message is as simple as: cake prowl msg [apikey] ... it can get as advanced as cake prowl msg [apikey] [priority] [application] [event] [description]

The output for running the load alert command?

If it's above my arbitrarily set values, it'll send a different warning depending on the level to my Prowl-enabled device. By sending a "-silent 1" parameter to the command message, output is disabled (perfect for cron).

Please note that I don't have any styling for shell output (something I'll have to fix) so the pasted character spacing and newlines won't work as expected in my example output.

Interesting Links from the Web - January 2010 Edition

nospam@example.com (Brendon Kozlowski) — Mon, 25 Jan 2010 19:12:50 -0800

I've signed up for "Project 52", and I've already missed last week, only the third week in. That being said, the whole point of Project 52 is to get people using their blog, to post more. There is a goal, but the ultimate goal is simply to post more.

A lot of my lack of success is simply trying to come up with real valuable content each and every week. I must realize that it's simply not going to be possible - at least not up to my own standards. That's not to say that I can't still post interesting things, just not necessarily the type of stuff I'd want to write about with gusto and enthusiasm - but still kinda cool. I mean, we learn things on an almost daily (if not hourly) rate as web developers. Why can't I simply zero in on one and discuss it? Or, perhaps mention all the neat things I've found in a particular week if I simply don't have time to write a full article on something I'm working on (which is what happened this past week - I was shipping furniture to my new house in a rental truck from out of state).

Anyhow, here are some interesting links that I've found (mostly from Smashing Magazine's Twitter account) within the past week or so (in no particular order):

- Why Mood Boards Matter: A look in to a quick way of getting a client on board with your end-result design without actually showcasing any direct portion of the site. An interesting approach that I had heard of and seen, but this iteration looks much nicer and more professional (the 2nd example).

- PostageApp: "The easier way to send email from web apps". This service offers a (currently) freely available (beta) API to send emails, also allowing for reporting services and debugging for such tasks. Quite the interesting little project, and could be extremely useful and handy.

- Uptime Robot: I currently am using mon.itor.us for my website uptime reporting. However, I originally signed up for the IM chat based alerting, and it only worked for the first two-three weeks. They adjusted the alerting mechanism to only alert via email when it had X number of consecutive bad pings...it might be time to evaluate a competitor, and here's one of them!

- jQuery Sheet: To quote their own description - "jQuery.sheet addresses the web-based spreadsheet or "websheet" in a different, simple, approach - using html, you simply load the sheet from a url, and you save it to a url... Simple. Or write your own approch. jQuery.sheet manages the sheet creation, viewing, and editing processes, you simply build your application around it." Quite interesting, and although I don't currently have a use for it, it's definitely something that I could see being very useful and powerful.

- Project Sikuli: This project is quite different. It appears (from a quick glance) to be a scripting language to help automate tasks. That's nothing new. The new part is the fact that it uses screenshot captures to do the scripting. Yes, that's correct. I honestly can't do it justice to talk about it, so check out the site and watch the video and read up on it if it sounds at all interesting.

- WhiteSmoke Writer 2010: The new version adds "writing review", which according to the quick animated Flash file on their homepage, might even be useful for me. It suggests changes to grammar to make a "negative sentence" neutral, or positive. This is something I sometimes have issues with when it was not intended. If I start a business of my own on the side, it's the last thing I want to do to my clients, so this might be worth a purchase, or at least an evaluation/consideration.

- SupportDetails.com: Although it's such an easy concept and execution (practically anyone could create this service), it's got a nice UI and...hey, I didn't think of it first. SupportDetails.com grabs the details of your current session data and allows you to mail it to someone. Let's say a website visitor is claiming there's this weird bug on your site, but you just can't see it. This could possibly identify the odd combination of software/resolution/settings that could cause the issue. At the very least, it's a simple and neat idea.

...and saved for last just because... The Ultimate PC Chair: I want one for work. Quoted from the linked blog discussing it: "NOTE TO MY BOSS – Dear Mr Boss, I am certain that my productivity would increase by 60,000% if you bought me this chair
DISCLAIMER: There is also a chance that I will be so comfy that I will fall asleep during work hours."