CAT | Web Development
Ajaxian had a story yesterday about a brand-new JavaScript playground called jsFiddle. A write and execute web-based JavaScript IDE is nothing new, but this is much, much more than that.
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.
30
On: Programmable Twitter Clients
0 Comments | Posted by Derek in Social Media, Technology, Web Development
Loic Lemuer (CEO of Seesmic) recently announced at Microsoft’s Developer Conference that he’ll be releasing a new version of Seesmic that supports plugins. This is huge for developers, as well as users.
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.
Often times you’ll come across the need to generate a random string. When you search for something like “PHP random string function” which will probably just be cut & pasted into your code, you’ll typically find something like this function:
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?
If you are doing some more advanced JavaScript applications, you’ll likely run into the problem at one point or another when you need to dynamically generate the name of a function you wish to call. This is the equivalent of PHP’s call_user_func().
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.
Looks like I may be able to soon replace Adobe Fireworks as my image editing tool of choice for the web. Ajaxian recently featured a new tool called Opacity, and if you follow through to their website, you’ll find a great video tutorial that shows how you can create great looking icons and simple images.
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.
Today Wordpress.com announced RSS Cloud support for all their hosted blogs. Not to be left out of the party, I also installed the RSS Cloud plugin on this blog.
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!
As JavaScript becomes a more integral part to the core functionality of websites, ensuring that a user has a fresh copy of the latest code is as important as ever. Normally a browser will cache certain filetypes (CSS, JS, JPG, etc…) for an indefinite period of time. If the code within one of these cached files is updated, sometimes a browser will not know to reload that file. So, if those changes are important for the functionality of your website, your users may run into issues and not be able to use your site properly. Worse, they likely won’t have any idea what the issue is and will eventually give up and go elsewhere. But have no fear, there’s a solution to this problem… versioning your static files.
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.
7
Upcoming events for Kansas City developers/designers
1 Comment | Posted by Derek in Kansas City, Technology, Web Development
I’m involved with organizing two upcoming events in the Kansas City area for web developer/designers.
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/
Here’s another “How-to” with 1and1 hosting, and this time I want to get the source code control/versioning program “Git” installed on my shared host with 1&1. This was actually remarkably easy.
- 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
- SSH into your 1&1 account
- “wget http://kernel.org/pub/software/scm/git/git-1.6.1.tar.gz”, and that will download the package
- “tar -xvzf git-1.6.1.tar.gz” which will decompress the gzip file into a subdirectory
- “cd git*” to change into the subdirctory
- “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.
- 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!
26
Tweenky, Zendcon, vacations, CCCKC, DotNext, etc…
0 Comments | Posted by Derek in Random, Technology, Web Development
Blogging is something that comes in waves for me, and once I get out of the habit, it is tough to get back into it. I enjoy it, but sometimes there’s just so much going on that it completely escapes me. The last few months have been one of those periods. So let’s start from the top…
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.
A user uploaded a Quicktime video to my website the other day and the server ran into a problem transcoding it to FLV. I hit up #ffmpeg and it was suggested that I upgrade my install of FFMPEG and libfaad. Alrighty, no big deal, done it before. So first thing this morning was going to be update the sources and recompile.
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.
19
Reddit fighting with its developers
0 Comments | Posted by Derek in Technology, Web Development
Day #1 of Reddit going open source, and they are already fighting with their developers. C’mon guys, you clearly don’t understand what is being requested, so ask for clarification instead of being so stubborn. We understand you are busy getting this project off the ground, but you need to understand that you can’t fight with your own developers, especially this early in the game. If you can’t manage that, they why did you open source it in the first place?
Well, I finally got around to giving Ajax (Asynchronous JavaScript and XML) a whirl. I wasn’t trying to do anything spectacular, just something functional to wet my appetite. I started out just wanting to allow people to send me text messages via the side bar. I got it all set up using PHP in about 2 minutes, and I thought… “It works, but I hate reloading the page for something so simple.” And then Ajax popped in my head and thought it would be a great first script.
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.
I came across these files earlier today and have decided to throw them up here. This is basically what you do with your time living in a college town during the summer, unemployed. I don’t even think at this point 6 years ago I had any idea what MySQL or PHP was, because if I did, it would have made everything a whole lot easier. For my MLS simulator, I was using Java arrays containing about 10,000 items. Something tells me that isn’t the most efficient way to move data. Also this was back in the day when I used Word and Excel to make webpages, how embarrassing! Check it out @ The Java Soccer Page

