mysiteonline™

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:
$('div.editable').editable();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:
var pickSummary = $('<div>', {'text': 'Hello World!'}).addClass('editable').appendTo($('body')).editable({type:'textarea'});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!

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.
if (!$client->query('metaWeblog.getPost','1', 'username','password')) { die('An error occurred - '.$client->getErrorCode().':'.$client->getErrorMessage()); } $request = $client->getResponse();
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.
$newDate = new IXR_Date(strtotime('now')); $content = array( 'title' => $request[0]['title'], 'description' => $request[0]['description'].' <p>I've added this text to the end of the entry.</p>', 'dateCreated' => $newDate, 'categories' => $request[0]['categories'] );
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:
$published = ($request[0]['post_status'] == 'publish'); if(!$client->query('metaWeblog.editPost', $request[0]['postid'], 'username', 'password', $content, $published)){ die('An error occurred editing the post - '.$client->getErrorCode().':'.$client->getErrorMessage()); }

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.

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:
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" WIDTH="400" HEIGHT="400" ID="theMovie"> <PARAM NAME="FlashVars" VALUE="zoomifyImagePath=example_img&zoomifyNavigatorVisible=false"> <PARAM NAME="BGCOLOR" VALUE="#000000"> <PARAM NAME="MENU" VALUE="FALSE"> <PARAM NAME="SRC" VALUE="example_img/zoomifyViewer.swf"> <EMBED FlashVars="zoomifyImagePath=example_img&zoomifyNavigatorVisible=false" SRC="example_img/zoomifyViewer.swf" BGCOLOR="#000000" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" WIDTH="400" HEIGHT="400" NAME="theMovie"></EMBED> </OBJECT>
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.
<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> //class object -> method call ( "location of SWF", "the element ID on the page you wish to replace", "width", "height", "Minimum flash version required", // "path to Flash player installer/detection", "any flash vars to pass", "any parameters to pass" ); swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params); </script>
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:
<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = { zoomifyImagePath:'example_img', zoomifyNavigatorVisible:'false' }; var params = { src: 'example_img/zoomifyViewer.swf' }; swfobject.embedSWF("example_img/zoomifyViewer.swf", "replaceMe", "400", "400", "9.0.98", "expressInstall.swf", flashvars, params); </script> <div><p id="replaceMe">This text should be replaced, if it is not, you have JavaScript disabled.</p></div>
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!

"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.

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?