When I saw Nicholas C. Zakas blog that he was writing a new book on JavaScript performance techniques, I instantly went to pre-order it as I hoped it would be another top-notch book from Zakas & Yahoo! Press. Having partially read through High Performance JavaScript by now, I wasn’t let down.

Since JavaScript is such an expressive language, there are dozens of different ways to do the same thing. Some of them good, some mediocre, and a lot of them bad. It’s amazing how much awful JS info is on the web, all leftover from the dark ages of JS (’96 – ’05). Up until this point, we haven’t had an authoritative source on the topic of how to write JavaScript that performs well, both in and out of the browser. Sure we’re had great books about web performance (High Performance Web Sites is my favorite), but we haven’t had anything specific to JavaScript. Now we do.

Nicholas is widely known as one of the best minds in the JavaScript world today. He joined Yahoo! in 2006 as a front end engineer and has been working on one of the most trafficked pages on the interwebs, the Yahoo! home page. His blog (nczonline.net) is a treasure trove of information on all things JavaScript & web performance. Some recent gems include Interviewing the front-end engineer & Writing maintainable code. It goes without saying that he knows his stuff when it comes to JavaScript & performance. As his books and blog posts have shown, he’s also a very skilled technical writer, keeping topics fresh, concise, & relevant.

I’m writing this as I read along, so the verbosity of this post is due to me taking reference notes on interesting things as I go.

Chapter 1: Loading & Execution

Nick doesn’t waste any time getting into what the reader wants, fresh tips! Right away we begin to learn the specifics of how browsers react depending on where & how you include your JS. There are many ways that work, but few ways that work well.

Specifically:

• Why is it important to put your <script> includes just above the closing </body> tag?
• What is the browser doing while loading those external files?
• Why should you put all your in-page JS code above your CSS includes? (A: If you put it after a </link> tag referencing an external stylesheet, the browser will block execution while waiting for that stylesheet to download)
• How you can use the defer attribute in <script> tags to delay non-essential execution of code.
• A thorough look at dynamic script loading to import & execute your JS without blocking the browser.
• An overview of some of the common JS loaders used today (YUI3, LazyLoader, & LABjs).

While much of the content in this chapter contains common knowledge among experienced developers, it is important knowledge to cover as it serves as the foundation for the rest of the book. Don’t worry, we’ll get more advanced.

Chapter 2: Data Access

Here’s where the sexy parts come into play; diagrams, graphs, and benchmarks! This second chapter is where you’ll learn about how exactly the JS engine accesses data depending on how you store it. The steepest learning curve within JavaScript for beginning developers is understanding variable scope. This is the first time I’ve ever come across an explanation of JavaScript’s [[Scope]] property, now all the scoping & speed issues make perfect sense!

Major topics covered in this chapter:

• Why do global variables perform so slowly?
• Why creating data as local variables as opposed to object properties is 10%-50% faster (depending on the browser).
• Why is it a good idea to create local instances of global variables?
• Why with, try/catch, and eval are bad ideas from a performance perspective. (A: they augment the scope by inserting themselves first on the tree)
• What truly happens under the hood when a variable is found to be undefined?
• Closure scope and why they can cause memory leaks.
• How prototype’s work and performance issues related to traversing up the prototype chain.
• Why is it bad to use deeply nested object members (i.e. foo.bar.baz.bop())?

There were so many “Ah hah! I get it now!” moments in this chapter for me that it alone was worth the price of the book. It took me about 5x as long as it should have to get through this chapter because I was too busy playing with Firebug as I began to learn some of these concepts.

Chapter 3: DOM Scripting

This book contains a few guest author chapters, and this is one of them. In this chapter we learn about DOM scripting by another Yahoo, Stoyan Stefanov.

Many web developers don’t understanding what exactly “DOM scripting” is, even though they likely do it on a daily basis. Many could tell you what the acronym stands for and that it represents the structure of an (X)HTML/XML document, but most don’t know that it also represents the API part of how you interact with the document. When you are using document.getElementById(“foobar”) or myelement.style.color = “blue”, you are utilizing a DOM API function accessible via JavaScript, but it has nothing to do with the ECMAScript (aka: JavaScript) standard.

This chapter is chalk-full of great best practices & overviews of DOM principles. The first thing we learn is that accessing the DOM is so slow because we’re crossing the bridge between JavaScript and native browser code. Jumping between the two is expensive, and should be kept to a minimum. There are a lot of tricks & tips that are very under-utilized by most developers when DOM scripting.

For example:

• Using the non-standard innerhtml is way faster than creating nodes via the native document.createElement() method.
• When looping through a NodeCollection you should cache the length of the node in a local variable because it’s own length property is very slow.
• Iterating through nextSibling() can be 100x faster than using childNodes()

This chapter also goes into a detailed explanation of what repaint & reflow are, when they occur, and how understanding them will improve your application performance. The realization I had after reading the R&R explanation is we do stupid stuff all the time simply because we don’t understand how the browser renders and updates our pages. You know how you’ve always heard using margin-left & margin-right as separate styles is a bad idea? Well, here you find out why. Oh, and did you know there was a cssText property you can use to batch your CSS modifications? I didn’t.

As JS libraries get more & more popular, knowledge of good DOM scripting is becoming increasingly rare. Take event delegation for example. Many developers just presume jQuery’s live() or YUI3′s delegate() methods are just magic. They’re far from it, and are actually easy to understand concepts. When interviewing candidates for front end jobs at Yahoo!, this is one of the primary concepts we expect candidates to understand. They may have never used it, but the good ones will figure it out as they are whiteboarding and we walk them through the challenges.

JS libraries are awesome, but it’s because they abstract out the cross-browser differences & fix a flawed language, not because they allow you to forget what it actually going on under the hood.

Chapter 4: Algorithms & Flow Control

Chapter 4 kicks off with a quick overview of the 4 different types of loops in JavaScript (while, do-while, for, for-in). The first 3 have equivalent performance, but for-in is the one to watch out for and should only be used when iterating an unknown number of elements (i.e. object properties). We then learn about important concepts like length caching and various other optimization techniques focused on reducing the number of operations per iteration.

Next up are conditionals, such as if-else and switch. We learn when it is appropriate to use each one, and when they can be ditched for a much faster method, like using arrays as lookup tables.

Finally we come to the topic of recursion. We skip the basics of “What is recursion” and jump straight into browser limitations with call stacks and advanced recursion topics such as memoization to cut out the fat in your stack.

Since the majority of our time spent coding is inside of loops, conditionals, and (if we really want to optimize) recursion, this chapter has great, basic information on efficient shortcuts that will set you apart from the other developers on your team. Techniques learned in this chapter extend beyond the scope of JavaScript and can be used in just about every other programming language.

Chapter 5: Strings and Regular Expressions

Another guest author chapter, this time by regex guru Steve Levithan

Along with loops, another very common task in JavaScript is string manipulation, most commonly one by concatenation or regular expressions, so it makes sense to have a whole chapter to itself.

When most people start out with JS, their concatenation method is likely var str = “foo”; str = str + “bar”; //str = “foobar”, then they discover the += operator and it becomes var str = “foo”; str += “bar”; //str = “foobar”. It turns out that one of those is more efficient when it comes to memory usage, and it happens to not be the latter. This chapter provides some memory allocation table diagrams to explain the difference and how different browsers perform that operation. It should also be noted that another alternate method of concatenation, ['foo','bar'].join(”); is the preferred method in IE 6 & 7, so that should be considered depending on your userbase.

The second half of this chapter covers regular expressions, which usually make me cringe. I have no problem writing them, but they’re an absolute nightmare to maintain sometimes. Douglas Crockford has a saying, “If a regular expression is longer than 2 inches, find another method.” I couldn’t agree more.

In Part 2 of this review, I’ll look at the remaining five chapters of this book:

• Chapter 6: Responsive Interfaces
• Chapter 7: Ajax
• Chapter 8: Programming Practices
• Chapter 9: Building and Deploying high performance JavaScript applications
• Chapter 10: Tools

If you like what you’ve seen so far, go buy it!

The more I play around with Node.js, the more I love server-side JavaScript. Once you get over the weirdness of writing JavaScript outside of the browser, it feels very natural. And the bonus is that it is blazing fast.

Also, as I’ve been playing around with YQL (Yahoo Query Language) more lately, I realized I wanted to be able to access YQL data from within my Node app. So, I created a node-yql module.

Now you can do something like…

YQL.get("SELECT * FROM weather.forecast WHERE location=90066", function(response) {
 
	var location  = response.query.results.channel.location,
	    condition = response.query.results.channel.item.condition;
 
	sys.puts("The current temperature in " + location.city + " is " + condition.temp + " degrees");
});
// Output: The current temperature in Los Angeles is 57 degrees

The real power of jsFiddle is that you have the option to include any of the most popular JS libraries, including; Mootools, jQuery, Prototype, YUI2.8, YUI3, Glow, Vanilla, Dojo, Processing.js, & ExtJS. This feature gives anyone the ability to try out any of these libraries without going through the task of downloading, extracting, and coded up some examples. With a few mouse-clicks you can view example snippets from any of the major JS libraries, and start editing them to see how they work.

As if that wasn’t enough, jsFiddle also includes social features that give you the ability to write a snippet, save it, and share the URL. As I was hanging out in various JavaScript IRC chatrooms tonight, I continually found myself using jsFiddle to code up snippets to answer questions. In the past, everyone would always just use Pastebin.com, but that lacks any interactive features. Now you can use jsFiddle as a replacement to Pastebin for any JS, HTML, or CSS snippets and the user will have the ability to actually edit, execute, and view the output.

As icing on the cake, you can take your snippets, copy the embed code, and paste them anywhere. Here’s a snippet that I was able to code up in about 15 minutes (writing this blog post took longer than that!) to demonstrate the power of YUI3, YQL, and the Twitter API. In this iframe, you’ll find all the JS, CSS, and HTML you need to create a simple little Twitter widget.

In all, this is an amazing product that I’ll likely find myself using on a daily basis.

Up until now the Twitter developer ecosystem has been very closed. Sure the Twitter APIs are as open as possible, but all the clients out there are largely closed platforms. There are a few exceptions, including Spaz and Tweenky (my client) which are open-source. It is great to have a starting point (aside from raw libraries) that gives developers a place to start with when building a Twitter application. With Seesmic Desktop invading Windows with a programmable version that you can write plugins for, this is a huge step that hopefully will push other developers/companies towards the same model.

When I launched Tweenky about 18 months ago, I hadn’t event thought about making it programmable, but pretty quickly afterwards I realized the potential it could have if it were programmable, and so I began a rewrite, and coded it in 99% JavaScript with two plugins out of the box, Twitter and Identi.ca. I had plans for other plugins (Facebook), but the problem with developing a platform, and not just an application, is that it takes a loooot of time. For one guy working in his spare time, it just wasn’t going to be possible to abstract out a platform and develop a community around it. So, I started with another rewrite and only focused support for Twitter. I still think it was the right move given the limited amount of time I can spend developing it.

What I’m really waiting for is an easy way for Twitter developers to monetize their applications. We’ve all seen what the Apple has accomplished with the App Store and the ecosystem they created overnight. While most iPhone developers have made very little, others have won the lottery and struck it rich. While Twitter (the company) has been very supportive of the developer community, they should really look at giving it a push and figuring out a way to monetarily reward Twitter developers. Nothing gets developers going like a big, fat, diamond crusted carrot dangling in front of their noses. Afterall, Twitter wouldn’t be Twitter if it weren’t for the developers. The various clients are what made the service usable for the hard-core Twitter users that create most of the valuable content.

P.S. You can still view the programmable version at beta.tweenky.com.

function genRandomString($length = 10) {
    $characters = ‘0123456789abcdefghijklmnopqrstuvwxyz’;
    $string = ”;
    for ($p = 0; $p < $length; $p++) {
        $string .= $characters[mt_rand(0, strlen($characters))];
    }
 
    return $string;
}

While that’s great and all, don’t you just feel like there’s some better, simpler way to generate a random string? Preferably something done all in one line, so you don’t even need a function inside your code?

There is a way. Actually, there are lots of ways. There are numerous functions in PHP that can be used to generate a string of random characters, and the one I typically use here is something you’ve probably used quite a bit… md5().

If you aren’t familiar with it, MD5 is a commonly used hashing technique that can be used to generate a unique 32-character “fingerprint” of a string. While it has been shown to have some security holes and not be collision proof, that isn’t really a concern the majority of the time you need to generate a random string. So, we’ll go ahead and use it here.

echo MD5(); // PHP Warning:  md5() expects at least 1 parameter, 0 given

So, we need to pass in something, anything, but try to be unique. microtime() is a good choice.

echo MD5(microtime()); // 5959e4c551ee3a91d89449437b681ead

Great, now we have a random 32 character string. But what if you only want a slice of that, like 5 characters? substr() is your answer.

echo substr(MD5(microtime(), 0, 5); // 5959e

If you are concerned about security and making this string as random as possible, just shuffle it with str_shuffle().

echo substr(str_shuffle(MD5(microtime())), 0, 5); // 6c468

Now wasn’t that easy?

Here’s how you can do it.

// Define some vars
var foo = "hello";
var bar = "world";
var function_name = "say_" + foo + bar;
 
// Since its name is being dynamically generated, always ensure your function actually exists
if (typeof(window[function_name]) === "function")
{
	window[function_name](" World!");
}
else
{
	throw("Error.  Function " + function_name + " does not exist.");
}
 
function say_helloworld(the_word)
{
	alert("Hello " + the_word);
}
 
// Browser will alert "Hello World!"

When you think about it, it makes a lot of sense considering all global objects in JavaScript are actually properties of the “window” object. Take a look at this example to understand that concept a bit more.

var foo = "apple";
 
function foobar()
{
	var foo = "orange";
	alert(window["foo"]); // alerts "apple"
	alert(foo); // alerts "orange"
	alert(window["foobar"]); // alerts the foobar function
}
 
foobar();

Here’s another example of when using a string to call a function could come in handy. This time we’re calling the property of an object we’ve created.

function Person()
{
	this.message = "Hello World!";
	this.say_hello = function(to)
	{
		alert(this.message);
	}
}
 
var Derek = new Person();
function_name = "say_hello";
Derek[function_name]();

See how it looks pretty much the same as the method above using a global function?

Hope that shed some light on your problem.

But, the best feature in my eyes could be their JavaScript export option that can be dumped inside HTML5′s <canvas> tag to render & animate the image. I haven’t yet seen the source code this generates, but it seems logical that you could translate layer based vector art into JavaScript.

Another feature I also love is the integration with the various OSX FTP clients like CyberDuck and Transmit, as well as the dynamic web preview option.

With <canvas> being relatively new on the scene, a tool like this could really bridge the gap between designers & developers and accelerate the adoption of another open standard that can help push the “open web” forward.

You can read more about Opacity at WebMonkey’s review or check out Opacity’s product page

Rogers Cadenhead recently wrote a post “The Reason RSS Cloud Failed to Catch On“. In this he argues that RSS Cloud is not sustainable when it begins to scale to thousands of users needing to receive pings every time a post is made. While he has a point, I believe his argument is much more accurate when put into the context of 1999 as opposed to 2009, and it is even more irrelevant a few years from now. This points to one thing… RSS Cloud was ahead of its time.

Today, supporting RSS Cloud is cheap. Bandwidth is a fraction of a percent now compared to what is was 10 years ago along with cloud based virtual servers available for ~$10 / month. I’d suspect a properly tweaked VPS at the Rackspace Cloud or EC2 could handle millions of pings / day without issue. Unlike PubSubHubBub, the content of the post is not delivered with RSS Cloud, it is just a body-less ping, so bandwidth isn’t even an issue. A server supporting these types of capabilities back in 1999 would have cost thousands of dollars per month. Now? Just a few bucks. 5 years from now I suspect it will be free (example: Google App Engine is currently free and could be configured for this service).

Let’s go ahead and take into consideration the dream scenario with RSS Cloud, and that is that we have completely replaced Twitter. In this scenario Ashton Kutcher will have 5 million followers and will need to notify each of those followers when he tweets out 100 mundane posts / day. Let’s not kid ourselves and not think there is a middle man in there somewhere. These services are the “Cloud” portion of whole term. Just like Feedburner and Google Reader are proxies between publisher and reader now (by storing local caches of RSS feeds), there will be many services that would be happy to host the feeds, providing a web client to the reader and analytics to the publisher in turn receiving all the statistics they chew on. Proof? Twitter purchased Summize (search.twitter.com) and Google bought FeedBurner because they saw the value of this type of service. Afterall, the analytics portion of that is the whole business model that Twitter is rumored to be building.

But ok… let’s assume those “Cloud” services never pop up because, hell… I don’t see any reason why they wouldn’t, but let’s just imagine they don’t exist. Solution? TURN OFF THE NOTIFICATIONS! That’s the beauty of RSS Cloud feeds, it’s completely backwards compatible with non-Cloud enabled feeds. If the Cloud server fails to send out notifications, then their subscribers will simply revert back to the old method of routine polls looking for new content. But, failing to notify your subscribers of new content in a sea of real-time has drastic consequences. Even if you are the first to report information, you will always be “scooped” by others because the lag caused by your inability to notify your subscribers. That alone will be enough to even the playing field. As a compromise, you could get away with just notifying a few dozen RSS aggregators (Google, Yahoo, Feedburner) to take care of the majority of your subscribers, and those using readers you don’t notify will revert to polls.

So as you can see, RSS Cloud is currently gaining traction because it wasn’t until now that it was a viable service for the masses. Even now there is very little support within the client portion of RSS Cloud, but I suspect that will be a battleground many will fight for in the next couple years.

RSS Cloud is an ancient RSS element (in web 2.0 years) that has been given new life recently as the “realtime web” in exploding (thanks to Twitter and Facebook). Basically, it allows RSS readers the ability to be notified when a feed has been updated instead of waiting minutes, hours, or days before that client has a chance to check the feed. Now, an RSS Cloud supported reader that is subscribed to an RSS Cloud enabled feed can be notified within seconds that the feed has been updated. RSS now has a realtime element.

RSS Cloud support is still in it’s infancy with only 1 RSS reader supporting RSS Cloud notifications (River2), but within the coming year, it could become a game-changing technology that can give rise to self hosted Twitter-like publishing platforms. There’s a number of people (myself included) that are working on such platforms, and hopefully I’ll be able to make an announcement in the coming weeks. My feeling is, as great as WordPress is for blogging, it’s not the ideal platform for micro-blogging. What the community needs is a microblog version of WordPress that has a real-time element, and I think this RSS Cloud element fits the bill.

Related Articles

• WordPress: RSS in the Clouds
• TechCrunch: WordPress.com Enables RSSCloud In Post Feeds
• ReadWriteWeb: WordPress Just Made Millions of Blogs Real-Time With RSSCloud
• Scripting.com: Tease! Tease! Tease!

By “versioning” these files, I’m referring to changing their filenames from “my_styles.css” to “my_styles.version274.css” for example. The problem with that example is it relies on you renaming the file and updating your includes every time you make a change. That sounds like an nightmare, right? Luckily there’s a neat tactic you can you to make it appear to the browser to be a new file, but it will actually be the same file and will require no effort on your part. This variation of the versioning tactic is often referred to as “Auto-versioning”. Here’s an example…

First, we use the following rewrite rule in .htaccess:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-s # Make the file doesn't actually exist
RewriteRule ^(.*)\.[\d]+\.(css|js)$ $1.$2 [L] # Strip out the version number

Now, we write the following PHP fuction:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;
 
  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

Now, wherever you include your CSS, change it from this:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

To this:

<link rel="stylesheet" href="<?=auto_version('/css/base.css')?>" type="text/css" />

And when rendered, will appear as:

<link rel="stylesheet" href="/css/base.1251992914.css" type="text/css" />

How does this work? Because that mod_rewrite rule above will strip out the timestamp, your server will deliver /css/base.css as the requested file. But to the user’s browser, it will appear as a different file whenever it is updated.

Neat!

Note: Some strategies to fix this caching issue is to append a version # onto the end of the css or JavaScript file with a querystring, such as:

<link rel="stylesheet" href="/css/base.css?version=1234" type="text/css" />

This method will actually prevent the file from being cached, period! This is bad. You want the benefits of caching. You don’t want to make your users pull down 100k of JavaScript & CSS files on every page load. More importantly, your servers could start to strain under the additional load.

Why is it not cached? See Section 13 from the HTTP Specification, in particular Section 13.9

13.9 Side Effects of GET and HEAD

Unless the origin server explicitly prohibits the caching of their responses, the application of GET and HEAD methods to any resources SHOULD NOT have side effects that would lead to erroneous behavior if these responses are taken from a cache. They MAY still have side effects, but a cache is not required to consider such side effects in its caching decisions. Caches are always expected to observe an origin server’s explicit restrictions on caching.

We note one exception to this rule: since some applications have traditionally used GETs and HEADs with query URLs (those containing a “?” in the rel_path part) to perform operations with significant side effects, caches MUST NOT treat responses to such URIs as fresh unless the server provides an explicit expiration time. This specifically means that responses from HTTP/1.0 servers for such URIs SHOULD NOT be taken from a cache. See section 9.1.1 for related information.

PreDevCamp – Kansas City

This is an event we just announced today that will be a “bootcamp” for developing on Palm’s new Mojo SDK platform, which is the development toolkit for the upcoming Palm Pre phone.

Website: PreDevCamp – Kansas City.

StartupWeekend – Kansas City

StartupWeekends are events that have been occuring nationwide for the past couple years, and it is Kansas City’s first  chance to host one.  These events typically take place over a weekend, starting Friday afternoon, and ending Sunday evening.  During this event, teams of developers, designers, project managers, marketing peeps, etc… will break off into teams and at the weekend the goal is to have a company up & running with a prototype product built to demo to potential investors.

Website: http://kansascity.startupweekend.com/

1. Go download Git from http://git-scm.com/download.  At the time of this posting, the latest version can be found at http://kernel.org/pub/software/scm/git/git-1.6.1.tar.gz
2. SSH into your 1&1 account
3. “wget http://kernel.org/pub/software/scm/git/git-1.6.1.tar.gz”, and that will download the package
4. “tar -xvzf git-1.6.1.tar.gz” which will decompress the gzip file into a subdirectory
5. “cd git*” to change into the subdirctory
6. “make” to begin compiling the source.  You won’t be able to do “make install” because you likely won’t have permission to install anything to the system.
7. Now Git is ready to rock with the exception of needing to add it to your $PATH.  This can be done by typing “echo ‘PATH=$PATH:~/git-1.6.1/’ > ~/.profile”

Done!

I’ve been working on a new project recently.  Tweenky is a micro blogging client I am developing that is mostly used with Twitter, but also supports Identi.ca, and hopefully more micro-blogging services soon.  The concept behind it was the lack of any good web clients out there for Twitter, and especially ones that brought back the “track” feature that Twitter took away from us a few weeks back.  It’s still very much a work in progress and I just have to find the time to work on some of the new features and further improve stability.  I’m having a blast with pushing the boundaries of JavaScript and what it should/shouldn’t be used for.  So, if you are a Twitter user, go check it out, and if it is still requiring an invite code, use “derekville”.

So I just returned from a convention out in Santa Clara called Zendcon.  As a web developer, my primary language of choice is PHP, and Zend is the company puts most of the work into the PHP project, so this was kind of their little yearly shindig.  It was 4 days of 1-2 hour training sessions on all topics related to PHP and web development.  I saw some presentations from engineers and developers from companies such as IBM, Google, Mozilla, Digg, Yahoo, and tons more.  I met a ton of really interesting people too and had a great time at Yahoo HQ for Hackday ’08.  (note to self: Don’t wear “Hackday ’08″ shirt to airport, it leads to hacker questioning from TSA agents)

Vacation #1 was on the front & back end of the Zendcon trip as I had a few days before & after the conference to play around in San Francisco.  It’s such a cool city and I had a blast driving around in the Pontiac G6 convertible I rented for the week.  I’ve never had so much fun driving a car!

Vacation #2 is coming up next month with Katye & I flying up to Seattle where we’ll also head up to Vancouver & Victoria.  I haven’t been to Seattle in about 10 years, so I’m really excited as I love that city.  Everyone I’ve talked to raves about Vancouver too, so I’m pretty excited about my first trip north of the border.

If you are a web developer in the Kansas City area, you need to check out two emerging groups.  The first being DotNext, a group in the KC area that gets together every month or so to give sessions on anything web development related.  Last month was a series of presentations of Amazon Web Services.  This month is going to be on various database related technologies. The second group is Cowtown Computer Congress who is setting up a hacker space in North Kansas City.  For those not too familiar with what a “hacker space” is (myself included), it is a place for technologists to get together to work on  various hardware & software projects, share costs on equipment, and actually socialize (something most geeks never do much of).  So should be an awesome place to convene when it officially opens in the next couple months.

And finally, a new podcast from some rather influential people in the web development world has launched that I’d like to mention.  Open Web Podcast was created by Google engineer Dion Almaer (of the Ajaxian podcast as well), Alex Russell of Dojo, and John Resig of Mozilla/jQuery.  So if you are into web standards and JavaScript, definitely check it out.

Finally, I recently discovered the FX show “It’s Always Sunny in Philadelphia”.  Hilarious!  Check out all the episodes on Hulu.

Before I get on with that, first I’ll describe the environment. We’re running on RHEL4 and have an install of FFMPEG that works fine (aside from that 1 user uploaded video). The last upgrade of FFMPEG to get h264 support wasn’t done by me, but rather our sysadmin, when we actually had a sysadmin. I believe he used rpms for the libraries and compiled FFMPEG from the SVN repo.

So I did a quick search just to remind myself what libraries I needed and I came across this post about compiling on RHEL4, our distro. Perfect. I followed directions to a T (aside from upgrading SVN) and it compiled fine. Now, time to run a test transcode…

[root@140859-www1 ~]# /home/derek/ffmpeg_sources/ffmpeg/ffmpeg -y -i /media/v2-prod/atlas/8102/20206 -ab 64k -ar 22050 -b 700K -r 15 -y -s 640×480 -ac 1 -padtop -padbottom -s vga /home/derek/blah.flv
FFmpeg version SVN-r13977, Copyright (c) 2000-2008 Fabrice Bellard, et al.
configuration: –enable-libmp3lame –enable-libvorbis –enable-libfaac –enable-libfaad –enable-gpl –enable-libtheora –enable-libx264 –enable-shared
libavutil version: 49.7.0
libavcodec version: 51.57.2
libavformat version: 52.16.0
libavdevice version: 52.0.0
built on Jun 25 2008 14:49:55, gcc: 3.4.6 20060404 (Red Hat 3.4.6-9)
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from ‘/media/v2-prod/atlas/8102/20206′:
Duration: 00:10:55.2, start: 0.000000, bitrate: 406 kb/s
Stream #0.0(und): Audio: mpeg4aac, 44100 Hz, stereo
Stream #0.1(und): Video: h264, yuv420p, 320×240 [PAR 0:1 DAR 0:1], 30.00 tb(r)
Output #0, flv, to ‘/home/derek/blah.flv’:
Stream #0.0(und): Video: flv, yuv420p, 640×480 [PAR 0:1 DAR 0:1], q=2-31, 700 kb/s, 15.00 tb(c)
Stream #0.1(und): Audio: libmp3lame, 22050 Hz, mono, 64 kb/s
Stream mapping:
Stream #0.1 -> #0.0
Stream #0.0 -> #0.1
Press [q] to stop encoding
/home/derek/ffmpeg_sources/ffmpeg/ffmpeg: symbol lookup error: /home/derek/ffmpeg_sources/ffmpeg/ffmpeg: undefined symbol: av_fifo_generic_write
You have new mail in /var/spool/mail/root

Well shit. Ok, so I hit up #ffmpeg again, but don’t get any help, so I try recompiling without any config options and it works fine. So I slowly start added on config options and it works until I add “–enable-share”, and which point it compiles a version of FFMPEG that throws the “undefined symbol” error. So that gives me a pretty good idea it has something to do with that. I go through the symlinks in the guide (linked above) and notice that /usr/lib/libavformat.so.50 is symlinked to a file that doesn’t exist. And that’s where I’m at now, kinda stumped. Am I missing libraries? how can I ensure any old libraries installed before are cleaned out and not conflicting with new ones? I’m a developer, not a linux admin. I know my way around the OS, but when it comes to this type of stuff, I’m stumped.

Any ideas? post a comment or email/gtalk me at drgath at gmail.com.

So off I went to grab the latest version of SAJAX (Simple Ajax), and boy were they right about the “simple” part. Within about 30 minutes, I had a functional script that you can now find on the side bar. Before you try it out, please use the demo page, as I don’t need everyone sending me text messages just to see how it works.

Next step, getting my responses to show up. =)

Edit: At first that last comment was a joke, but two hours later…, that was shockingly easy. I’d like to get it integrated into the side bar, but out of time tonight. I’ll post the code when I have a bit more time to work on it. So feel free to send a message or two, as I can respond rather easily. If you get annoying, I can turn it off via my cell phone too.