Ryan Fitzer

Application Shopping

I tend to get stuck in my computing habits during the year. So each December vacation (since last year anyway) I’ve taken to trying out new applications. Here’s the list (so far) for this year:

• TotalFinder

  Adds tabbing, docking, folders-on-top, and more to OSX’s native Finder.app.

  So far I love it. The docking feature (named “Visor” and not to be confused with their other app of the same name) allows for a Finder window to animate in/out with a hotkey (⌥` by default), or whenever I switch to the Finder app. And with tabs, I don’t have to manage 50 different Finder windows any longer.

  It’s priced reasonably at $15 and has a 14 day trial period. I’m sure I will be buying it.

• Visor

  I’ve been learning Git lately (github.com/ryanfitzer) which involves a lot of Terminal.app usage. Like TotalFinder, Visor allows you to dock Terminal to your screen and animate it in/out with a hotkey (^` by default).

  Free and open sourced at github.com/darwin/visor.

• XRefresh

  Refresh your page Firefox whenever a file changes. So, I give a path to my working directory (I use MAMP so it’s “/Applcations/MAMP/htdocs”) and whenever a file changes, Firefox simply refreshes. No more toggling back and forth between Textmate and Firefox, constantly hitting ⌘r to refresh the changes just made. Working with 2 monitors makes this even easier since I can have Textmate running on one and Firefox on another. I never have to toggle over to see my changes.

  It is composed of an addon to Firebug and Ruby Cocoa (has a native OSX installer). Start the server via the command line with xrefresh-server, open a new Firefox window and watch with wonderment.

  You can also set it to soft-refresh any css updates to avoid page reloads.

  It’s awesome, free and open sourced at github.com/darwin/xrefresh.

• Tower

  Since my Terminal skills (mostly it’s my typing skills) are pretty rough I thought I’d also try a GUI for Git. I use Versions for SVN and Tower has so far proven to be the equivalent for Git.

  It’s currently free and in beta, but it will be priced once they have a solid release. I’m sure I’ll buy it.

• Alfred

  Billed as a “productivity application for Mac OS X, which aims to save you time in searching your local computer and the web”. And that’s exactly what it is. I’ve used Quicksilver for years, but the original developer ceased updates a log time ago and the community has kept it (mostly) alive (you find a good build at github.com/tiennou/blacktree-alchemy).

  I new I’d eventually have to find a replacement and Andy Clarke posted about Alfred this week.

  It’s free and currently in beta. An intersting note on how they plan to make money giving it away for free their FAQ page states [emphasis mine]:

  “We can provide the Alfred core for free thanks to users who support it by purchasing the Powerpack. We also include affiliate codes in Amazon links“

  It’s a great model and I’m interested to see it how it scales. I might buy the Powerpack, but I want to get familiar with the Alfred core first.

If anyone has any other recommendations I’d love to hear it.

Picking Apart the DMCA

Super interesting post describing an expert witness’ prepared testimony on the intricacies of DMCA’s anti-circumvention definition.

USA v. Crippen — A Retrospective

Two Sides to the Story of Support

Side one, the Developer

To the question:

“Do the thanks and appreciation go anywhere near compensating the constant e-mail asking for support? What inspires your desire to give without return?”

Alex King responded, in part, with this paragraph:

“In talking with other plugin developers, it seems fairly universal that the reward for a successful plugin is a deluge of support email that includes the worst kind of sense of entitlement, rudeness and ignorance. The community as a whole seems to expect to be able to pay nothing, yet received expert and individual help and support for free.”

Every time I’ve thought of releasing a plugin for WordPress (or jQuery), I’ve had to think through this same issue. It hasn’t yet stopped me from releasing a plugin (I still have yet to release any, but they’re in the works), but it definitely stakes a claim in the “How” of the decision making process.

So far I have yet to find a bulletproof solution. The 3 best options I’ve observed are:

1. Directing all support to the WordPress forums via tagging.
2. Directing all support to Alex King’s WordPress Help Center.
3. Create a subscription-based support structure as exemplified by Justin Tadlock’s ThemeHybrid and Ingenesis Limited’s Shopp Plugin.

Even with one (or all) of these strategies in place, there are still going to be issues. Mostly, that you’re not able to fully recoup your efforts managing support work (via payment and/or hours that could have been devoted to coding). Plus, it’s not really that enjoyable, for either party.

Side two, The User

As a WordPress user, relying on free plugins that provide little or no support can get frustrating very quickly. I started using WordPress in 2005 and later joined the community in 2006. Not long after, I realized that relying on the free, forum-based support model was unsustainable. As a result, I quickly began contracting developers to write plugins I needed.

Most users would be surprised to find that the cost of contracting a plugin is minimal, especially when compared against time spent in the forums asking and waiting for help. The range for a plugin (one that doesn’t need to reinvent the wheel) is around $100-$400. I realize this price range could be prohibitive depending on your financial status, but I wasn’t making much then (first job out of grad school and a heap of student loans).

To be sure, the forums are a great resource, staffed and frequented by a lot of excellent and helpful people. I owe them for a good bit of help and have contributed back over the years

Choosing a great developer is key. Their reputation and hourly rate isn’t necessarily indicative of your potential cost. Great developers work quickly and have a vault of stored solutions they’ve developed over the years that will directly benefit your project’s budget. An inexperienced developer charging half the hourly rate may take 4x as long to complete the job. Not to mention that the code quality may have you needing frequent fixes and upgrades as WordPress evolves.

A few points in support of my opinion:

• They’re normally willing to give you a flat rate. This avoids any surprise overages.
• They’ll usually provide free support, especially if they feel it was their mistake or that they could have written the code to be more forgiving of certain edge cases.
• They tend quote lower if your idea presents good challenge. Developers love to be challenged.
• They usually will not charge for time spent learning something needed to code your solution.

Regarding choosing a great developer, start by contacting the most prominent names in the plugin community. I’ve never had to go further than contacting 3 people for a given project. The best ones are always busy, but if your schedule is flexible you’ll have more luck.

Small disclaimer, I am currently using Alex King’s WordPress Help Center for 2 large pieces of client work.

Some Links I Want to Check Out

In need of a blog dusting, here are some links I’d like to check out.

From AddyOsmani.com

• Essential JavaScript And jQuery Design Patterns – A Free New Book
  

  Hey guys. Today I’m happy to announce the release of a free book I’ve written called ‘Essential JavaScript & jQuery Design Patterns For Beginners’. Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal.

• JavaScript 101 – A Free 10 Hour Audio Course
  

  Hey guys. Today I’m happy to announce the release of a free 10 hour downloadable JavaScript audio course for beginners called JavaScript 101. This is a course you can listen to at your own pace and covers many core JavaScript fundamentals ranging from the basics to syntax, objects, ajax and it also includes an hour of training on jQuery.

From Rebecca Murphey

• jQuery Fundamentals
  

  The purpose of this book is to provide an overview of the jQuery JavaScript library; when you’re done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.

From Andy Clarke

• Working on MobiCart

  Andy shares his files and technique on using Dropbox as a client-friendly versioning system. The code contains his use of HTML5 and CSS3. Seeing this in an actual client project from a veteran like Clarke is a great opportunity to learn real-world use-cases for the new and upcoming specs/modules.

Phone Screens Using Skype

In the limited amount of phone screens I’ve done this sounds like it would have helped.

The biggest problem with doing technical interviews over the phone is that when you ask hard questions, the subject of the interview has to think about their answer, and may even need to write things down to get their answer together. When you’re talking on the phone, nothing is conveyed. There’s an awkward silence punctuated by the interviewer letting the interviewee know that it’s OK that they’re not talking while they think about it. People get more nervous, and I think it hurts the quality of their answers.

Interviewing over Skype

This Looks Interesting: noSWFUpload

I’ve been thinking about the subpar experience of the WordPress media manager lately. Getting it out of a modal and removing the need for Flash to upload multiple files would go a long way towards providing a better posting experience.

While searching out anyone else who might be thinking the same thing, I found the following project in Google Code:

noSWFUpload

“Multiple files upload without SWF objects, applets Java, or other third parts plug-ins.”

I’ll be trying this out first chance I get.

Room to Work

I was just thinking about how nice it would be to have a Textmate command that could help you isolate the block of code you’re working on.

Here’s the  idea, when you’re working in a big, messy file you could:

1. highlight a block of code
2. press a key combination
3. Textmate grabs that selected block
4. opens a new file and sets it to the current language
5. pastes in the block of code
6. make all of your edits
7. press the same key combo
8. Textmate cuts the edited code
9. closes the temp document
10. replaces the original block of code with the updated version

That sounds like it would be pretty handy. When I get some time I’ll try to create such a thing. Plus, I need to rework my css property arranger. Some friends (and I) have found glitches.

Using jQuery’s queue(), dequeue() and delay() Methods

These methods were very confusing to me so I decided to do some demystification and see what the hell was going on. jQuery’s documentation sets them up as methods related to the effects api. By default this is true, but I found this little misleading.

queue() / dequeue(), in short, allows you to create a queue of functions to be executed on the matched element(s) and then execute them in order.

delay() allows you to create a delay between functions in the queue.

None of the functions are run until the dequeue() method is run. This could be a click event, for instance.

Take for instance the following code:

$(document).ready(function() {

	// cache the body element
	var body = $('body');

	/*
	  Create a "bodyQueue" queue for the body element and add a function into it.
	  After this funnction runs it will delay the "bodyQueue" queue by 5 seconds.
          None of the functions are run until an event triggers the dequeue() method.
          This event is defined at the end using a click on the body.
	*/
	body.queue('bodyQueue', function(){ 
	    console.log('1st function. Next one is delayed by 5 seconds');
	    $(this).dequeue('bodyQueue');
	}).delay(5000, 'bodyQueue');

	// Add another
	body.queue('bodyQueue', function(){ 
	    console.log('2nd function (delayed 5 seconds)');
	    $(this).dequeue('bodyQueue');
	});

	// Add another
	body.queue('bodyQueue', function(){ 
	    console.log('3rd function');
	    $(this).dequeue('bodyQueue');			
	});

	// Add another
	body.queue('bodyQueue', function(){ 
	    console.log('4th function');
	    $(this).dequeue('bodyQueue');
	});

	/*
	  Add another and delay the "bodyQueue" queue by 5 seconds.
	*/
	body.queue('bodyQueue', function(){ 
	    console.log('5th function. Next one is delayed by 5 seconds');
	    $(this).dequeue('bodyQueue');
	}).delay(5000, 'bodyQueue');

	// Add the last one
	body.queue('bodyQueue', function(){ 
	    console.log('6th function (delayed 5 seconds)');
	});

	// Show the queued functions when the page loads
	var queue = body.queue('bodyQueue');                               
	console.log('There are ' + queue.length + ' functions left in the "bodyQueue" queue:');
	console.log(body.queue('bodyQueue'));

	// Add an event to fire the "bodyQueue" queue
	body.click(function(){

	    // Run everything in the "bodyQueue" queue
	    body.dequeue('bodyQueue');

	});

});

What I’ve defined here is a queue with the name bodyQueue, attached it to the body element and added a series of functions. When the body element registers a click event, the callback runs body.dequeue('bodyQueue'), firing the queued functions in bodyQueue.

View the demo. Make sure you run it in Firefox with the Firebug console open to view the feedback.

Resources:

jQuery for Designers | API: queue & dequeue

jQuery in Action 2nd edition: Queuing functions for execution

List of Computer Term Etymologies from A-Z

C++

C++ creator Bjarne Stroustrup called his new language “C with Classes” and then “new C”. Because of which the original C began to be called “old C” which was considered insulting to the C community. At this time Rick Mascitti suggested the name C++ as a successor to C. In C the ‘++’ operator increments the value of the variable it is appended to, thus C++ would increment the value of C.

A lot of interesting back-stories.

Using the J/K keys for Content Navigation

If anyone has ever been to the Boston Globe’s The Big Picture or FFFFOUND! you may have used your keyboard to navigate through a page’s content. The j (forward) and k (backward) keys use as navigation has started to trickle into modern sites. Even Google’s Gmail uses this convention to navigate between emails.

I wanted to give it a try so I’ve created a sample jQuery plugin (not really all that full-featured) that offers similar functionality as The Big Picture. Try out the demo with some pics of a graffiti-ridden water tower.

The code is pretty straight forward. It simply finds all images inside the given container.

$('#image-wrapper').jkNavigation();

Keeping track of the currentImage variable was a bit tricky so if anyone has any optimizations, let me know.

Tested in Safari 4.0.4 and Firefox 3.5.7.

Download sample plugin

(function($) {
	
	$.fn.extend({
		jkNavigation: function(options) {
			return this.each(function() {
				new $.JKNavigation(this, options);
			});
		}
	});
	
	$.JKNavigation = function(element, options) {
		
		var defaults = {
			// no options at the moment
		};
		this.options		= $.extend({}, defaults, options || {});
		this.element		= $(element);
		this.images			= $('img', this.element);
		this.currentImage	= null;
		this.run();
	};
	
	$.extend($.JKNavigation.prototype, {
		
		run: function() {
			
			self = this;
			
			$(window).bind('keydown', function(event) {
								
				var key = event.keyCode;
				
				switch(key) {
					case 74:
						if(self.currentImage == null) {
							self.currentImage = 0;
						} else if(!(self.currentImage == self.images.length - 1)) {
							self.currentImage++;
						}
						break;
					case 75:
						if(self.currentImage == null) {
							return;
						} else if(!(self.currentImage == 0)) {
							self.currentImage--;
						}
						break;
					default:
					return;
				}
				
				var img = self.images.eq(self.currentImage);
				var pos = img.offset().top;
				
				$('html, body').scrollTop(pos);
				
			});
			
		}
		
	});
	
})(jQuery);