Author Archive for gregory

Switching from Scriptalicious to Mootools

Recently, I inherited a website that was using Scriptalicious and the Prototype.js libraries, Asylum.com. Unfortunately, the larger group that I work for has standardized on Mootools. Because the site was built by contractors, and not internally, no guidelines on a JavaScript framework were communicated to the contracting company.

After inheriting the site, I found no immediate need to switch to Mootools. But as the business development team began adding features to the site, and wanting to integrate features available from the other AOL Entertainment sites (AOL Music, AOL TV and Moviefone), it became necessary to reconcile the JS library differences between sites.

As you probably already know, Scriptalicious & Prototype.js cannot co-exist with Mootools. There are many reason why this is, but the main concern is the conflict in name space. Both Scriptalicious and Mootools utilize the $() functionality as well as many other similarities that cause these libraries to not play well together.

My first priority was identifying what was going to break if Scriptalicious was removed. Step one was contacting the contractors who wrote the code in order to provide some background. With their help and a simple text search, I identified 15 functions that were relying on Scriptalicious. Not horrible, but easily a week’s worth of work. I would have to rewrite or convert these functions in order to provide the exact same functionality. Additionally, there was the opportunity to make some minor tweaks that would improve the user experience.

I wanted to utilize Mootools classes so that my rewrite to Mootools would be reusable for other members of the AOL Entertainment Front End Development [FED] team.

Typically, including half-a-dozen or more, independent, JavaScript class files (broken down one class per file) would be unwieldy and highly undesirable. However, AOL has written an amazing backend process that concatenates individual files into a single object that is stored on our Content Distribution Network [CDN]. Apache offers a similar plugin called mod_concat written by Ian Holsman. AOL calls its proprietary functionality the merge tool.

With this powerful tool, Front End Developers can breakup JavaScript (and CSS) files into easily readable, and highly specific files without fear of adding overhead to page load times.

With these tools (Mootools and the merge tool) I would be able use a Java-like approach for development. Perfect, now to the details. It was my goal to not require any HTML markup changes. I was determined to only need to switch the JavaScript functionality. As always, this was easier said than done.

I decided to work on the most complex features first. There is a promotional slider at the top of the page that uses a tween effect to move the CSS left position. I wrote this tween class to provide the same functionality.

The second piece is an Ajax style menu flyout. In the original implementation, it was possible for multiple instances of the flyout to be created. I attempted to resolve this by tying the flyout to an Id and looking for that Ids existence. If it’s already created, use it, otherwise create it. It’s not bulletproof, but it prevents multiple appearances of the menu. I also used the Element.store() method that is new to Mootools 1.2. It’s very cool and very fast. Read more about Element Storage here.You can find my class here.

The third class I created is very specific to the blogging software we use. I’ll spare you the details.

Much of the other code was extremely specific to the Asylum design and did not necessitate the creation of a Mootools class. Head over to asylum.com and check out the changes, if you have been before you probably cannot tell a difference - that’s the point - but now I have something I can build on!

Open or Create a file in Terminal to Coda

I have recently started using Coda by Panic (the people who make Transmit). I have to say I really like it. I have been a die hard BBEdit fan for years and was hesitant to make the switch. However, a co-worker was talking up Coda and mentioned that it had auto-complete - a feature that has been sorely lacking from BBEdit.

The switch turned out to be fairly painless. One feature that I really missed from BBEdit was the ability to create or open files from the command line simply by invoking the following

$: bbedit -c myFileToOpen

Sadly, Coda didn’t appear to have the same functionality. I contacted the Coda team, they liked the idea and planned to look into it, but I am way too impatient to wait. In the meantime, I decided to write my own little bash script that I named ‘coda’

#! /bin/bash
if [ "$1" = "" ]; then
	echo “Please specify a file to open or create”
	exit 0
else
	for ARG in $*
		do
    	            touch -a $ARG && open -a Coda $ARG
		done
	exit 0
fi

By using touch, I am able to create a file if it doesn’t exist. I pass the ‘a’ argument, but not the ‘m’ argument so the timestamp doesn’t change for already existing files. After touch works its magic, the open command opens the file in Coda. I am running a for loop over the list of arguments in order to allow a list of files or a wildcard as well as a single file to be passed into the script. Sweetness! I threw this little script in my bin folder and set it to executable using chmod +x. Using the script looks like this

$: coda myFileToOpenOrCreate
$: coda *.txt

Daffodil Shop Launches

For almost a year now I have been speaking with my godmother about doing a website where she can sell her crafts. And I happy to announce the site launched on Sunday. Check out daffodilshop.com.

We have yet to really drive any traffic into the site, but I think it turned out well. The site uses a great Wordpress plugin I found called WP e-Commerce. It integrates with Google Checkout as well as PayPal, making the job a snap.

Digg Widget, A Lightweight, DOM Friendly JavaScript Alternative

The website I have been working with, Asylum.com, recently expressed interest in adding a Digg Most Popular widget to their site. Asylum.com asked me to apply some CSS to resolve the display issues they were having. After I spent a little while investigating the HTML markup in the standard Digg widget, I decided it wouldn’t be in Asylum’s best interest to use it in it’s current form.

While the widget is well done, it used a few techniques that are frowned upon at AOL. The most disconcerting issue was the use of document.write(). If you are familiar with JavaScript, then you are aware that document.write() causes issues on a few levels. First off, document.write() blocks while it is working. This blocking prevents other items on the page, such as CSS or images, from loading while the write occurs. Additionally, elements and text created via document.write() are not added to the DOM ( Document Object Model ) and cannot be manipulated in the same way. I envisioned code that was more friendly to both the page load and the DOM.

In addition to document.write(), the Digg Widget was calling in the entire jQuery framework. This seemed like overkill. I didn’t want to include an entire library just to create this widget.

The Digg API lives on the Digg server, I couldn’t use classic Ajax because of the same origin policy. However, Digg provides JSONP (JavaScript Object Notation with Padding). This allows you to wrap the JSON with a callback function that will be executed once the script loads. To use JSONP, you have to dynamically create a script tag and assign the Digg API url to the src attribute. Most modern browsers support dynamic creation of script tags, it would look as follows.


var s = document.createElement( "script" );
s.setAttribute('src', apiURLAndArguements );
s.setAttribute( 'type', 'text/javascript' );
var h = document.getElementsByTagName( 'head' );
h[0].appendChild( s );

The Asylum team asked that the Digg widget have both the most popular articles and the upcoming articles contained within the widget. Since I didn’t want to write the same code twice, I sought an Object Oriented, self-contained widget that could use the same JavaScript blueprint to use both calls.

The biggest obstacle to creating this was JavaScript scope. If I instantiated an object to contain the Digg data, I would lose scope the moment the callback function was triggered. The callback would be called in the scope of the window and not the scope of the object that first created the script tag.

The Digg API further complicated this because it does not allow periods, square brackets or curly brackets in the name of the callback function. I spent some time researching JavaScript inheritance and closures hoping they would provide the resolution I needed.

In the end, I used a combination of JavaScript closure and JavaScript function pointers to provide the solution. The key lay within providing the callback function a correlation to the original object. Since Digg doesn’t allow periods and square brackets in the name of the callback function, I couldn’t create a simple global array with a reference to the object. Instead, I had to generate a function name appended with a random string that would live in the global scope. The function interior would look as follows.


var method = this; // a reference to the calling object
function wrapperFunc( obj )
{
method.returnDataHandler( obj ); // the function to be triggered within the original calling function
}
var rand = Math.ceil( Math.random() * 100000000000 );
window['DiggAsylumCallback' + rand] = wrapperFunc; // store this pointer in the global scope
var urlBase = “http://digg.com/tools/services?type=javascript&callback=DiggAsylumCallback”+rand+”&endPoint=”+ finalEndPoint +”&domain=”+ yourDomain +”&sort=digg_count-desc&count=” + numberDisplayed
return urlBase;

Once the callback function triggers, it stores the JSON inside the original calling function and the prototype methods can be called in the correct scope. Here is a look at how the object is triggered.


var popular = new diggAsylum( 5, "asylum.com", "/stories/popular", "diggDivId", true, "desc" );

The diggAsylum constructor signature looks as follows.


function diggAsylum( count, domain, endPoint, htmlId, showDesc, sortType ) { .... }

Get the complete JavaScript file here, see it in action here, get a zip file of the CSS, JS and HTML here.

Eclipse, Git and eGit

I’m a fan of Eclipse as a Java IDE.  I have enjoyed subclipse (an SVN plugin for Eclipse) for a few years. When I began looking at Git, I immediately wanted an Eclipse plugin. After stumbling over the installation instructions for eGit, I found a nice quick guide on Chris Cruft’s blog, here. It’s excellent in guiding you through the process of compiling an Eclipse plugin from source. You will need the latest version of Git, which you should have if you read this post, as well as the Java 1.5 or greater. 

The jury is still out on eGit, I am not completely sure it will support git-svn, but that remains to be seen.

 

How Effective is Your Website?

The Institute for Dynamic Educational Advancement [IDEA] recently completed a study regarding online experiences. The report is an excellent read. The three groups surveyed were non-for-profits, designers and visitors (the general public). Although commercial businesses were not directly included in the survery, it’s still a great analysis on how user’s perceive web interactions and what visitors expect in their online experience.

By at least one point on a five-point scale, visitors have higher expectations of effectiveness than designers

An effective site was measured by three indicators. User enjoyment, relative ease of finding information on the site and users ability to navigate. Effective sites provided an enjoyable experience, allowed easy access to information and kept users from getting lost inside the site.

Regarding navigability, the study suggests that designers have an inherent misperception that their designs are understandable and easy to use, but the general public felt otherwise. Site visitors wanted sites to provide “personal navigation aid”, essentially a site concierge in order to help users find content quickly and easily. 

Other interesting findings in the study are that designers are too optimistic about visitors ability to maintain orientation within a site. Also, the general public considers the entire World Wide Web an information source rather than a particular website.

Overwhelmingly, visitors want their information fast. There is nothing new about this idea, people want their information quickly. Most organizations with sophisticated enough tracking software understand user bailout. However, in the age of broadband, designers and developers are often undeterred to build bloated, slow experiences claiming it will provide a richer user experience. Additionally, designers claim connection speeds are already fast and getting faster, the general public does not share these views.

Amazingly, the study did not pose a question regarding speed of access. It found speed of access was important to visitors through the typed comment area.

I encourage everyone to read and refer to this report, here is the link again.

Direct link to the complete study [pdf]

Installing Git on Mac OSX 10.5

I was able to find an excellent tutorial for installing Git on a Mac over at Tim Dysinger’s blog, here. I highly recommend it. It worked like a charm for me. The one item I did change was grabbing a slightly more recent tarball than Tim has in his instructions. I grabbed git-1.5.6.4.tar.bz2 instead of git-1.5.5.tar.bz2. Otherwise, it works great. More on Git and it’s integration with SVN and Eclipse coming soon, stay tuned.

The one caveat, you must have Xcode (Developer Tool Box for Mac) installed in order to compile Git from source. You can find the Xcode DMG here, you will need an Apple Id - don’t worry it’s free.

Sorry, I have a meeting

The mighty meeting, great time suck or critical ally in staying a project’s course?

As a junior employee at my first job after college I was rarely, if ever, invited to meetings. After a few months of work this changed. First, it was the morning meeting. This meeting ensured all team members were focused on the goals for that day.

As my responsibilities changed from daily work to long term / special projects I started attending kickoff meetings and project status meetings in addition to the morning meeting. For the most part, these meetings were necessary to keep management apprised of my status. Around the same time, co-workers started realizing I could help them get their ‘pet’ projects into production, which brought on more meetings. These extra meetings, often called by one co-worker that I didn’t directly report too, usually consisted of a lot of “what-if” type comments and “wouldn’t it be neat” ideas. 

After a few of these meetings, the manager I reported to called me into his/her office and informed me that I worked for him/her and not to spend my time on requests that did not come from him/her. This made sense, but it didn’t stop the extra meetings.

A manager told me at a later job, “Meetings are a tool for people to justify their existence”.

By the end of my tenure at my first job, my calendar contained many meeting requests, which I always attended, but they didn’t do much to enrich or enlighten me.

As I moved into my second job, I tried to stay off the meeting radar as much as possible. I had an amazing manager who asked his team to attend project kickoff meetings in person and take additional ones over-the-phone. Brilliant, I could tune into the meeting when needed and focus on coding the majority of the time. Sadly, this made meetings longer. Co-workers asked me questions, but I would be only halfway listening. This necessitated that the question be repeated, which slowed the meeting’s pace. 

After a marathon install call of 9 hours, the over-the-phone meetings fell by the wayside. My company was trying out a new way of practicing agile development. It was called the scrum meeting. The idea was short daily meetings to keep the team on the same page. The new meeting format also came with a new practice of product management writing brief project requirements. The real beauty of the meeting, developers could ask senior product managers exactly how they wanted specific features to work. 

For instance, when we were building the comments module, we asked simple questions. How should the comments be sorted? Should the newest be at the top or the bottom? Should comments be threaded? Should character limits be enabled on comments? The development staff had the ear of the product lead and our questions could be answered in seconds. 

When primary development ended, and went to Quality Assurance [QA], the meeting dynamic began to change dramatically. QA had bugs we needed to fix, developers had questions about bugs and the product team needed to make sure the project was on schedule, which makes sense. The meetings were painful, but they were critical to a timely launch.

The real issue was when these scrums went on for months. It formed a long term pattern that began to wear on all parties involved. 

After a few months, meetings had become so numerous and long people began proposing ideas to curb the sheer number of meetings. My favorite suggestion was the monthly meeting budget. The project management team and product team would be allowed a certain number of hours for meetings per employee. Obviously management and upper management would need larger allocations than developers and junior employees, but it’s a sound concept.

Other ideas included meeting length limits. Meetings could only be 15 minutes long. Many employees were willing to try anything in order to avoid 2 hour long meetings where they were only needed or engaged for 3 minutes.

As you probably guessed, these ideas were never implemented. Within a few months, I decided to leave corporate life in favor of a startup. Startups are nice, if you only have 3 employees in your company, meetings are very short and informal. If you work for an organization larger than 15 people, meetings are going to be a necessary evil, but how do we keep that evil in check. The following are some of my thoughts.

Untie Employee Value from Meetings.

As I wrote earlier in this piece, some employees use meetings as a way to justify their existence in the company. In quarterly reviews, total meeting time should be treated like a golf score, the lower the better. Now, this won’t always help to alleviate lengthy meetings, but it will keep employees attending as few meetings as possible. Meeting times should also be cross referenced with the number of project launches an employee has had over the previous quarter. If the number of successful launches is low and the number of meeting hours is high, something is dysfunctional. 

Keep Required Attendees At Meetings Low.

Everyone and their mother does not need to be at project meetings. More people means more chit-chat. Meetings aren’t the time to catch up with friends, save that for lunch and happy hour. 

Embrace Web 2.0.

Use wikis to communicate project details. Encourage developers to share their work early and often. This mentality goes hand-in-hand with the “don’t worry, be crappy” and launch  early-and-often development philosophies. The web is constantly changing. New web products need to be introduced to a community of users as soon as they are ready in order to get valuable feedback. Don’t allow teams to be a black box, transparency is important both internally and externally.

Know Your Employees, Know Your Project.

Project managers and managers should keep on eye on employee activity at meetings. If employees are bringing in laptops and ‘zoning out’ then they don’t need to be present. This doesn’t mean if employees don’t have something to say they aren’t needed, but if they aren’t listening and aren’t speaking they aren’t needed.

Trust Your Team.

This should go without saying, but I have seen inexperienced managers hovering over employee progress. If employees aren’t self-starters or aren’t living up to expectations it needs to be dealt with in other ways than micro managing. A manager’s greatest asset is his/her team. Let employees spread their wings and fly, good things will come or the unproductive employee will have to be addressed.

These tips won’t work for all projects. They are just a few ideas on making meetings less important than the projects. I have limited experience as a manager, but I have had plenty of managers and I know what I like and what I hate. What are your thoughts on handling meetings?


SVN Burned

I am in my last week at my current job. It’s time to check-in all the little projects and tweaks that are currently unfinished, or not ready for prime-time, into Subversion. My main concern, like that of any conscientious developer, is that I don’t totally pollute the head of the main repository with tweaks the rest of the team may not want to implement for days, weeks or ever.

I pulled out my SVN manual (svn help via Terminal) and started hunting for the perfect command. I needed something that would allow me to change my current working repository to a branch in the same repository. I have never needed to do this before so it was definitely going to be a learning experience. 

There are many svn commands, I count 30. My favorite is ’svn blame’ though I have never had the opportunity to use it, I just love the name. 

I found my command, ’svn switch’, and ran ’svn switch -h’ to get more information on it. You can find the same info here. I found exactly what I was looking for:

Update the working copy to mirror a new URL within the repository. This behaviour is similar to ’svn update’, and is the way to move a working copy to a branch or tag within the same repository.

Simple enough, I just needed to switch over to the branch and check-in my changes. Sadly, it didn’t go down quite that easy.

After I ran the ’svn switch’ command, svn stopped abruptly and complained that one of the files I had in my working copy had been deleted from the main repository. To verify this I checked out a totally separate instance of the project and discovered that the file had been deleted then restored in the same location with the same name. Subversion was unable to comprehend this and threw an error.

To verify if the switch command had been successful, I ran ’svn info’ in the root directory of the project and the other folders I had been making edits. I determined that the switch had been successful. The URL indicated my branch, which seemed reasonable, so I proceeded to check-in my files.

Later that day, a co-worker was getting ready to push a few small enhancements to production and updated his working copy only to find all my minor tweaks and edits polluting the head, and now his working copy. Holy crap, that’s a problem! I knew I had switched to the branch, so how had my changes magically shown up in the head of the repository?

I began combing the repository history and also searching on Google. The command I was using, ’svn switch’, runs as recursive by default. Plus, I had verified that the subdirectories’ URL had changed to the branch. After I restored the trunk to the planned and wanted revision, I took a deeper look at the problem.

It turns out that Subversion had switched many (but not all) of the folders to the branch. Also, it had not switched many of the files to the branch. Parts of my working copy were pointing to the trunk and parts of it were pointing to the branch. While this is a fairly cool and useful feature of Subversion, it’s not what I wanted in my situation.  

What I found even more perplexing is the files that had been switched to the branch were in no particular order. It was definitely not done in alphabetical order. I ran ’svn switch’ again on my working copy, which caused a little more confusion because files that had been commited into the trunk were now being deleted out of the branch. It was a fairly frustrating experience. Even more disappointing, this is not the first time myself or a co-worker has been burned by SVN.

At my next job, which is also an SVN shop, I plan to take a look at Git. I have looked at Git in the past, but because I was working in CVS or SVN shops, it seemed to painful to switch. However, a peer got me very excited about Git after running down some cool features. He also told me that Git has an SVN sync feature,  so you can use Git locally and still sync with a global SVN repository. I will save my experiences with Git for another post.

What’s your favorite revision control system?

Google Can Crawl Flash?

Google announced late Monday evening that is has launched a crawler that can dig through Flash content to expose the text found inside the Flash movie.

For years, sites have been going to great efforts to expose content inside of Flash movies to web crawlers. Most often, websites would create one experience entirely in Flash and a carbon copy of that experience in HTML solely for google bot. 

Other methods of opening up Flash content involved powering your Flash movie with XML. You would use PHP or another server side language to parse the contents of the XML and append that data to a page. Or, if you’re site was mostly static you could just add the text into the HTML by hand.

Googlebots inability to crawl Flash caused much frustration to site designers and developers who needed their sites found. However, for those sites that didn’t want to be found, Flash - like Ajax -provided a benefit. 

One tactic we used at AOL in order to target pages for SEO was hiding non relevant content behind JavaScript / Ajax and Flash. This guaranteed non relevant information wouldn’t distract from the page target. For instance, on this video, the page is attempting to win on the video title ‘Makes Me Wonder’ not on Maroon 5, and not on any other terms.  AOL Music wanted to win on very specific terms while also providing a robust user experience, because of this, items like the ‘Poll’ in the right column and the ‘More on AOL’ at the bottom of the page are pulled in via Ajax in order to keep crawlers out. 

If Googlebot now has the ability to crawl Flash and perhaps (or maybe already) JavaScript, site designers may become unable to control what is indexed on their site. Or worse yet, may be forced to limit user experience in order to win in SEO. Back in September, I raised this concern in my post ‘That Monster Called SEO‘. It’s problematic that in order to win in SEO via the bots algorithm, one must degrade the overall user experience.

Matt Cutts also blogged about the expansion of indexing Flash sites, here. However, he didn’t offer any insight on how Googlebot will see content in Flash or how Google will link directly to content that may be pages / clicks deep into a complex Flash site. Hopefully, these critical details will soon become available.

Update: Lee Brimelow has posted on The Flash Blog, here, that Yahoo! will also be able to crawl and index Flash files in the future. Lee is also saying that no best practices have been created yet. Looks like it will be another long, slow road of trial and error, which *could* drastically effect the way in which Flash SWF files are authored.