mysiteonline™

htmlentities() in PHP is Your Friend

After constantly badgering a certain library calendar vendor over 2 years to fix his software's RSS feed charset issues. Personally I don't think getting raw text describing times in the form of "6:30â€“8:30 p.m." is all that valuable...that's just a single example. The calendar website declared no charset information. I have no idea what charset the database is in, and the RSS feed was declared as ISO-8859-1. Our website, database, and everything else was declared as UTF-8, not that it really mattered though since the raw incoming text from the RSS feed was all garbled to begin with.

Every once and awhile I'd randomly try to find an answer to the problem. I've been through using all sorts of different algorithms to solve the problem. None of them seemed to work, until one day I saw someone mention on StackOverflow (unfortunately I've lost the link) that he tried using htmlentities() to solve his problem and it worked. I thought, "It couldn't be that simple..." However, I had nothing to lose and tested it. It worked. (What???) I still don't know why or how htmlentities managed to run a translation table on the garbled input to output the appropriate values, but I'm happy! Even my attempts at REGEX were unsuccessful, though I probably was just unable to find ALL the right bit-level character code sequences needed. Apparently the translation table that htmlentities uses is pretty darn thorough! Thanks, PHP team!

Okay, so that was the first use of htmlentities(). The second one?

I realized I overlooked a severe security hole in my forms. When users did not provide correct details in their forms, I was simply reinserting the values they provided back in to the HTML form's VALUE tag (or in the case of a textarea, just rendering the value between the tags). For some reason this didn't strike me as being severely stupid at the time. I don't know why. I guess the "never reprint what your users submit to you" only made me think of "back to the DOM" - but only outside form elements. Who knows why. This let someone who actually put some (minimal) thought into it to run whatever PHP code they wanted simply by submitting a form without all required data. Escape the form element by using a standard HTML closing tag, then start writing the PHP. If you wanted valid HTML, just make sure to also include a dummy HTML input or textarea field once done. Simple. (Note: I am also in the process of re-examining CHMOD values of files and folders.)

When I went back to "fix" my stupidity, I also initially thought of using PHP's filter functions. Although they worked, they also would sometimes (depending on user input) remove certain characters. Like a bolt of lightning (while I was eating lunch) it came to me. I just used htmlentities(), why not just use it again? ...so I did. Now my forms are a bit more protected and our RSS feed is no longer displaying obnoxious characters to visitors due to the encoding mishaps of an external developer.

Sometimes PHP's little gems are so awesome...

Edit a Wordpress Article with PHP and XML-RPC

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 $request 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.

Outlook Web Access (Exchange) with PHP and cURL

I needed a way to authenticate users from our library from a server outside our network, and therefore also not connected to Active Directory. At first I was thinking LDAP would be the best way...then I did my research and learned enough about LDAP to realize just how much information it gives out - WAY too much for it to be very secure. Even if I used SSL, created an account specifically for this access, set that account to read only...all it would take would be one person to hack our server and grab that information and all our organization's data is out there. Although it's about as much of a chance as getting hit by lightning in the middle of the desert in a sand storm, I wouldn't want to be responsible.

The only server with any sort of external web presence that is also touching the internet is our Exchange server's web access portal. I thought, "Ah HA! I can use cURL, or streams, or fsockopen or something to fake a login to this page to verify authentication!" After searching a bit (I'm terrible every time I attempt to write something using cURL to authenticate), I came across a few things.

Exchange Server 2007 uses SOAP to provide a web service...AWESOME! We currently use 2003 though, but we will be upgrading later this year, so this may be helpful later on. [Link]
1. HowToForge article on how to use PHP with 2007's SOAP Web Service
I found this PHP script that I tested, which successfully contacted our OWA server and authenticated.
I also found a PHP class on Google Code from Tyler Hall - it's not any particular project repository, just miscellaneous code he's hosting. It looks like it's slightly more feature rich, allowing info from address books and a user's inbox, for example.

I only needed to authenticate our building, so thankfully we had our own subdomain (not sure of the proper terminology) in the AD... If your domain was example.com (DC=example,DC=com), just getting OUR office (assume "Office1") was as easy as defining office1.example.com (DC=office1,DC=example,DC=com) after the @ symbol in the user's username (typically unnecessary information with OWA, but adding it explicitly was important here). It (seemingly) worked perfectly.

If you plan on doing something similar, just make sure that you cache (and encrypt) username/password information locally, hitting the OWA page continuously would probably make your System (or Email) Administrators a little unhappy with you.

Disable the Security Component in CakePHP only for Certain Actions

As I'm working on a desktop application that needs to connect to the database backend, and CakePHP provides an awesome mechanism for REST or AJAX communication (as well as data validation), I decided to have my desktop application talk directly through the Cake interface to do its magic.

Unfortunately, I was also using CakePHP's rather secure Security component to prevent XSS/CSRF attacks. The problem is that because the desktop application was directly accessing the method with data and bypassing CakePHP's FormHelper automatically created (and Security Component friendly) rendered HTML, it was failing (and because it wouldn't even get to the action since the Security Component was set in the AppController, I couldn't even use $this->log($this, LOG_DEBUG) to see what was happening).

After searching for a good 30 minutes or so, I came across this archived Google Group post by franky06l:
I updated this to only be used in my specific controller's action, as so:
Voila! It now works as expected.

Note: One will need to be extra cautious when disabling the Security Component. The Security Component takes care of a lot of issues for us automatically, by disabling it, you're opening yourself up to some possible troubles. Extra precaution is recommended, and I relinquish myself from any use of the above code that may cause harm - use at your own peril (or absolute need)! :D

jQuery Printed Footer Links

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 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://'+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.

jQuery and Google Analytics: Take 2

Awhile back I had reported on my findings of how to use jQuery to automatically tag links on my site (that link to a site that is not my own) for event tracking with Google Analytics.

Although there are ways to use the pageView method and parse the data within Analytics so that it does not skew your view of overall visits/hits, I simply find it easier to mark these as events since they aren't actually page views, but events.

Unfortunately, it's helpful to see which external links are pertinent to people, and which page they're leaving your site from (and where they're going), so rather than identifying the event type itself (click), I used that field for a value instead so it could be categorized by any of these things from within Google Analytics.

The problem I was having personally was that the values I was using were not strings (in my own tests at least; the code on the blog should have worked, theoretically). I was using document.location (type: object) and passing it to the trackEvent() method, which checks for value types (and denies incorrect calls). Here is the updated (using the new Async method) code which is tested, and works:

(function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

//the above code is Google's default code, below is my addition (using jQuery)
    $(document).ready(function(){
      var domain = document.location.host; //includes port if exists, whereas hostname does not
      var curPage = document.location.href;
      $('a[href^="http"]:not([href*="'+domain+'"])').each(function(){
        //track the events (string unless noted): 1st = method, 2nd = category, 3rd = action, 4th = label, 5th = (int)value
        //http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html
        $(this).click(function(){
          //track an outbound link-click event
          _gaq.push(['_trackEvent', 'Outbound', curPage, $(this).attr('href')]);
        });
      });
    });
  </script>

Remember to change your own account ID in the code above!

There is no need to define your domain's actual information anywhere unless you want to track both subdomains as well as top-level domains under a single account. For that, take a look at the Google Analytics documentation. I haven't done this myself so would not be able to suggest a best-method approach for it. This code tracks any HTML-based links (links inserted dynamically with JS will not be tracked, you can do this with $(this).live('click', function()...) instead of $(this).click()) that point to anywhere NOT within your domain. If you use a redirect script as part of your domain, (ex: ...tracker.php?go=http://someothersite.com), then this will not track that page click as-is.

This code specifically defines the event as "Outbound", the category as the currently viewed page's URL, and the action field as the URL that the user will be taken to. Modify 'til your heart's content. :)

For even more accurate results, see how to delay the loading of the external site so that the tracking code has more time to accomplish its task (race conditions are fun): Google's Solution

Copying a jQuery Event from One Element to Another

When you're working with plugins, or trying to be as unobtrusive as possible while doing a bunch of different things to your original markup, sometimes you have the problem of specific elements being triggered by multiple actions.

What happens when one action ends up replacing (visually) or covering up one element with another? Typically it's not a problem - unless the element that was replaced or covered up had an event attached to it. I had this happen to me recently when one jQuery script (dynamic icon overlay using a span) covered up another script (onclick event for an image to load a modal window for a video player). Uh oh!

I could have ignored the problem and simply duplicated the original images and added the "play" icon directly to the images themselves. However, if I ever should want to change the icon, that would require modifying all of the images again - and I'd need to keep the original images somewhere if that were ever the case. I could have built the overlay in to the original script, but then it's sort of losing scope on its original focus and intention.

It seemed the best way to combat the problem was to try to get the event(s) (a click event in this case) that was registered on the IMG element, and apply it to the SPAN that was overlayed on top of it.

While searching for answers, I accidentally stumbled across slides from a talk by John Resig that contained a bit of jQuery that I had never known about before - but apparently every time I now hear about it, every one raves about it. It's jQuery's $.data() utility method. Through using this method (and outputting JSON data directly through an alert box using Firefox's proprietary toSource() function), I was able to ascertain information about the events associated with a specific element.

Note: The following alert would only work in Firefox. To alert JSON in all (native JSON unsupported) browsers, you'd want to use Douglas Crockford's JSON2. In newer browsers, you should be able to just use the stringify() function (I just chose not to).

The above JS code acting on the HTML element (in my code, anyway) created the following string:

At first I thought I could just copy the data from one element's data property to another element. Unfortunately that does not work as it doesn't actually register anything. I asked a question over at StackOverflow, and although the answers that I got weren't exactly what I was looking for, someone had already created a jQuery events copy plugin. I didn't want to have dependencies on other plugins in my code, so I looked over the plugin's code to go about my own solution.

Since not all handlers will be using a plugin (and therefore simply contain a function name), very few will have a namespace. I didn't bother with that in my code (but I may refactor later). Instead, I took the necessary information and simply looped the events registered with the element, and re-binded them using jQuery's own bind() method.

Keep in mind that this specific piece of code I was working on created an overlay (an element that surrounded and rested) atop the target element (thus the parent().bind). Your particular uses may vary. The 2nd bind() was also specific to this code's purpose. Although a SPAN tag was created, if the target element's parent was not an anchor element, it would create one and wrap itself in that. The only way to prevent the default behavior of an anchor tag was to issue a 2nd bind (I didn't know how to pass it in to the initial bind call).

Note: jQuery's "helper" events (ex: mouseenter, mouseleave) duplicate and/or enhance functionality of the mouseover and mouseout behaviors. Because of this, if you use jQuery to create a mouseenter event, internally it binds the element with a mouseover event, and then binds again with its own overriding event (from what I can tell, anyway). Therefore, my code here copies and registers both events (mouseenter and mouseover) and unfortunately will also fire both of them. This code (as-is) works best on native event types.

Unfortunately I was unable to determine how to unregister or remove specific events. After looping I could remove all events from an object, but I couldn't perceive a way to do it within the loop itself. If you had to target a specific handler in your loops, I don't know if it would be possible to move events, but only copy.

Hacked.

My blog system has been hacked for the 2nd time now. I've begun writing a new system at the root of this domain (no more subdomain), so if your RSS feeds break, I've either moved to my new blog, or I've upgraded this blog to fix the hack for the interim - until I can get comments working (which will take me to just get Akismet integration as comments are already technically ready).

I'm don't think the blog system has been secured, so I'd suggest not posting any comments until or unless I update this post mentioning that it is now safe.

Update: Despire the german theme's "Written by" text, this blog's been reinstalled from scratch with the newest version software, but using the same database. Hopefully nothing's still infected. This should give me a decent amount of time to properly move the article entries and comments to the new blog system without worrying too much (and figure out a mod_rewrite rule for the SEO redirects).

Finding all application Controllers in CakePHP (v1.3.x)

At some point in time you may find the need to get a list of all of the controllers within your application. It's actually quite simple so long as you don't need controllers from any plugins.

Place this code in any of your controllers and view it from the web (for instance, from the Users Controller): http://www.example.com/users/listControllers

You'll see something similar to the following:

The App::objects() method returns an array of objects of the given type, such as: 'model', 'controller', 'helper', or 'plugin' - it also accepts other parameters, such as "path" in case you do eventually need to check controllers for your plugins.

The array_diff() is there as a much simpler method to remove the AppController and PagesController from the returned results as they would most likely exist in your application regardless and aren't normally something you'd need to worry about with ACL as there are other means within Cake to handle access to them. You'll notice that array_diff doesn't return an array starting at index of 0 since it removes keys from the original array too. That shouldn't be a problem, but if it is you can always use a loop instead of array_diff() and just unset or splice the matching values.

I used the CakePHP convenience method of pr() (print_r surrounded by PRE tags), and a die() simply to show the returned results and print them to the screen. You'd probably prefer to double underscore the function name (__listControllers()) to make it a private method to the class (rather than publicly viewable via the web), and change pr() to return.

What's the purpose of this?
- Maybe you'd want to create a web interface for ACL and need to know which controllers to give/deny access to/from
- Maybe you want to create a navigation menu based on your controllers
...maybe you can think of something that I can't. :)

Alter to your own tastes. This is only a starting point.

Other useful links (check version compatibility in these resources):
Quick dessert: List all controllers of a CakePHP application
Automatically load all controllers and actions into ACO tables for ACL with a CakePHP Task
How to list all controllers

Installing and Setting up Subversion (SVN) Under Windows XP

For a long time I've wanted to start using Subversion. I see all the benefits of using such a system, but I haven't taken the time to learn it. I've installed it (v1.3.2) a long time ago, but I never really did anything with it -- it was simply so I could interact with SmartSVN (a SVN client) to download others' repositories. I think it's about time I start using it in a more meaningful way on my own projects. In order to do this, I thought it would be best to start from scratch (and therefore uninstalled all previous, remotely related software). (For further learning on SVN, please visit Red-Bean's SVN Book online.)

So, it had been so long since I've done anything with Subversion, where was I to begin? I've read about all the great and wonderful things SVN can offer, but...how do I get it, how do I install it, and then how can I access it?
Continue reading "Installing and Setting up Subversion (SVN) Under Windows XP"

jQuery: Edit Content Inline on Dynamically Created Elements

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!

SWFObject 2.x and Zoomify

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

"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

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

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.