jquery.flash is on github! (and updated)
I’ve recently starting committing changes made to jquery-flash to github. You can view the project page for it here.
I’ve also made a few updates, the most notable being; I moved the checking code to seperate functions called isie(), hasflash() and flashversion(). All of which can be used anywhere, with or without using $().flash(). I also did some minor optimizations to make execution a little speedier.
Node.js – I’m a fanboy already.
About a week ago I discovered a unique new programming technology called node.js. It’s an event-driven javascript system running on Google’s V8 engine and is primarily focused on functioning as a web server. I hesitate to call it a web server however–it’s much more than that!
Using this amazing new system I was able to integrate support for the new WebSockets specification that Google recently added support for in Chrome, and I used this to make a simple real-time chat application with emoticon support and translation of image links to inline images and youtube links to inline videos.
…and the best part? This only took me about an hour!
There are some simple architectural differences that make it vastly more powerful that most any other popular web programming languages. One of my favorite characteristics of it’s unique design is that variables assigned in a global scope can be accessed across all requests…that means regular database querying becomes completely unnecessary! You could create a json object where you store your data, then check it over every once in awhile, and apply any changes to the database. It’d work as a query queue of sorts that would greatly reduce database interaction overhead and it wouldn’t require setting up some other incredibly complex software to proxy the requests!
I’m also quite fond of the branching design. There is a module called ‘http’ for running web servers, but it’s really just routing everything through the tcp module, which essentially does the same thing. The ‘http’ module just simplifies the interface and makes common actions like sending headers more elegant. It’s a clever design really; supply varying levels of complexity in control to match varying levels of complexity in application–not everyone is going to want the ability to create a mail server, so why would they want to have to access tcp directly? Inversely; not everyone is only going to want a web server, so why would you only supply access to http-related code?
Have a look at this sample code I ripped-off from the homepage of node.js;
var sys = require('sys'),
http = require('http');
http.createServer(function (req, res) {
setTimeout(function () {
res.sendHeader(200, {'Content-Type': 'text/plain'});
res.sendBody('Hello World');
res.finish();
}, 2000);
}).listen(8000);
sys.puts('Server running at http://127.0.0.1:8000/');
Isn’t it so simple? You just include a few modules, run http.createServer() with a callback function passing in the request and response objects and tell the server to listen on whatever port you want and whatever domain you want. In the callback you can branch of by breaking apart request.url to find the user’s query and use that to redirect via a switch block or whatever other means you see fit. Best of all, it’s asynchronous, so you don’t need to halt execution for every little thing. It’s even compatible with many common Javascript utility libraries such as Underscore
OiNK admin found not guilty, pigs fly, hell freezes over.
Alan Ellis, creator of OiNK, the most renowned Bit Torrent based music sharing site has been unanimously declared not guilty in his recent court appearance. This is a massive success for freedom and a huge blow to the corruption of the current music industry. It will be most interesting to see what the response is to this in the coming days.
[Source]
Talker – Waves? Campfires? I just want to talk!
I, among many, jumped on the Google Wave Dev Preview bandwagon. The video demonstrations they had were so nice and polished looking, but after getting the chance to try it first hand it’s polished sheen quickly faded–it was buggy to the point of being unusable and collaboration was so awkward. As a Wave expanded it became more and more difficult to determine what was new and what you had read before. Conversations would branch all over the place and you would quickly lose track of what was actually being discussed. There was other alternatives for business communication, but they all had one thing in common; over complication. Integration is fine and all, but sometimes the users don’t need what it integrates with, so it shouldn’t be built around that.
In steps Talker, a deceptively flexible messaging system wrapped in a simple interface that anyone could understand. Who likes explaining to their coworkers how an app is supposed to work, show of hands. None? Yeah, I thought so.
I first stumbled across Talker through Marc-André Cournoyer’s LinkedIn profile and, to be honest, bookmarked it and forgot about it. It was in beta at the time and didn’t have much to see, so I overlooked it’s simple nature. Today though, I received word that Talker was ready for launch. I slipped into the demo room and made a few posts. Everything was quick and responsive and the functionality was so elegant; I posted a link to an image–it loaded the image itself in it’s place, I posted a youtube link–it embedded the video right there. The attention to detail down to things like the auto-completing / commands and @ usernames was a very nice touch.
What really blew me away though was the simplicity of the plugin interface. Many useful plugins like autocomplete are literally one-liners! You can’t get much simpler than that, unlike Wave’s monolithic Python plugins that need to load a million and one external libraries just to make a basic word filter. If you haven’t checked it out already I seriously recommend you give it a try, who knows, you might like it.
jquery.flash v1.3.1 – Squashing IE-related bugs.
If you downloaded v1.3 of jquery.flash I would recommend switching to this one. There has been no functionality changes, so it should just be drop-in. It fixes a minor bug I added when I switched to using indexOf() for iterating through attributes and parameters…apparently IE doesn’t support it. >.>
That’s fixed now and I did a few minor structural changes to reduce the character count a little and make things ever so slightly speedier. I also created a fancy tutorial page type thing for it, which you can check out here.
Downloads:
Minified – 2.03 KB
Non-Minified – 4.35 KB
jquery.flash v1.3 is ready!
There’s nothing major to change in such a minimal library, but such a difference the little things can make! New in version 1.3 is;
- Class inheritance
- Src inheritance from href for easy conversion of links
- Built-in support for allowfullscreen parameter
- Minor fix to dimensions inheritance
- Added availattrs and availparams to settings object allowing anyone to add support for any extra attributes or parameters they might need!
- Moved lots of code around to use as little characters as possible, allowing optimal minification. All this new functionality and it got even smaller! It’s now down to 1.91 KB.
Available options and their defaults:
$(this).flash({
// As always; all settings are entirely optional.
id : $(this).attr('id'), // ID
class : $(this).attr('class'), // class
width : $(this).attr('width'), // Width
height : $(this).attr('height'), // Height
src : $(this).attr('href'), // Path to swf
flashvars : null, // JSON structured flashvars data
bgcolor : null, // Background color
quality : null, // Quality
wmode : null, // Window mode
allowscriptaccess : null, // Set to "always" to allow script access across domains
allowfullscreen : null, // Allow fullscreen viewing.
classid : 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000', // For IE support.
codebase : 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=', // Ditto.
pluginspace : 'http://get.adobe.com/flashplayer', // Download Firefox plugin if missing.
// Custom attributes and parameters are added like this;
// ['someattributename','someotherattributename']
//
// Then add it to the settings just like the ones above were added.
availattrs : [], // These are the attributes we should attempt to add.
availparams : [], // These are the parameters we should attempt to add.
// Version is used for flash version detection in conjunction with the express install swf value below.
version : '9.0.24', // Minimum Flash version
express : null // Path to express install swf
});
jquery.flash.js – Uncompressed
jquery.flash.min.js – Minified
jquery.flash – Who needs swfobject when you have this?
I’ve used swfobject many times before in the past, but I just don’t like it. It works well enough, but in the modern web of high-traffic web apps and Javascript frameworks that give you elegant access to DOM elements it just feels clunky having to go back to the ‘old’ way of doing things…so I decided to make jquery.flash!
Why use it? Well for starters it minifies to just over 2 KB, rather than the 10 KB of swfobject! How about automatic plugin and version detection? How about complete cross-browser compatibility? If jquery.flash isn’t a perfect fit for your flash embedding needs then you are just asking for too much. 
How do you use it? Just like this;
<script type="text/javascript">
$(document).ready(function(){
$('.flash').flash({
"src":"your_flash.swf",
"width":100,
"height":100,
"vars":{"name":"value"},
"color":"#fff",
"quality":"high",
"wmode":"transparent",
"access":"domain",
"express":"express_install.swf",
"classid":"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
"codebase":"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=",
"plugin":"http://get.adobe.com/flashplayer",
"mime":"application/x-shockwave-flash",
"version":"9.0.24",
});
});
</script>
All arguments are optional and will just be left out if you don’t use them unless they have a default. Everything from classid down has a default. Width and Height, when not declared, will use the current dimensions of the element that is being replaced. Flashvars are passed as a json object to ‘vars’ and are automatically serialized into a query string. If there is demand for it I may add a check to allow already made query strings to be used instead of a json object, but it wasn’t really of any importance to me.
If you have any questions feel free to ask. 
Hello world!
stephenbelanger.com is online (it’s about time. >.>)
I’ve migrated most of the more ‘tech’ posts from my other blog. I’ll be using this one for sharing technical insights and releasing awesome open source stuff. I’ve got a jQuery-based SWFobject replacement that will be released here soon and I’ll have many Kohana helpers and modules to share in the near future. Look forward to much free and open goodness in the near future.
How To: Install Current FFmpeg and FFmpeg-PHP in CentOS/RHEL with x264, Xvid, MP3, AAC and more!
First of all, I’m going to assume you already have httpd and php installed. If you don’t have them already you should install them now. I recommend Jason Litka’s Yum Repository.
This guide is written with bash comments, so the whole text block below can be copied and pasted into an install.sh file if you’d rather not go through step by step. I wouldn’t recommend it though, as something could always go wrong, and it could be challenging hunting down the problem in that massive wall of output lines!
#!/bin/bash # Mplayer Codecs # Switch to working directory cd /usr/local/src # Download the codec files needed wget http://www3.mplayerhq.hu/MPlayer/releases/codecs/essential-amd64-20071007.tar.bz2 # Extract the codec files bunzip2 essential-amd64-20071007.tar.bz2; tar xvf essential-amd64-20071007.tar # Create a directory for the codecs & import them mkdir /usr/local/lib/codecs/ mv essential-amd64-20071007/* /usr/local/lib/codecs/ chmod -R 755 /usr/local/lib/codecs # FLVTool2 # Switch to working directory cd /usr/local/src # Download the source files needed wget http://rubyforge.org/frs/download.php/17497/flvtool2-1.0.6.tgz # Extract the Source files tar zxvf flvtool2-1.0.6.tgz # Compile cd /usr/local/src/flvtool2-1.0.6 ruby setup.rb config ruby setup.rb setup ruby setup.rb install # LAME MP3 Encoder # Switch to working directory cd /usr/local/src # Download the source files needed wget http://downloads.sourceforge.net/lame/lame-398-2.tar.gz # Extract the Source files tar zxvf lame-398-2.tar.gz # Compile cd /usr/local/src/lame-398-2 ./configure make && make install # libOGG # Switch to working directory cd /usr/local/src # Download the source files needed wget http://downloads.xiph.org/releases/ogg/libogg-1.1.4rc1.tar.gz # Extract the Source files tar zxvf libogg-1.1.4rc1.tar.gz # Compile cd /usr/local/src/libogg-1.1.4rc1 ./configure make && make install # libVorbis # Switch to working directory cd /usr/local/src # Download the source files needed wget http://downloads.xiph.org/releases/vorbis/libvorbis-1.2.3.tar.gz # Extract the Source files tar zxvf libvorbis-1.2.3.tar.gz # Compile cd /usr/local/src/libvorbis-1.2.3 ./configure make && make install # liba52 # Switch to working directory cd /usr/local/src # Download the source files needed wget http://liba52.sourceforge.net/files/a52dec-0.7.4.tar.gz # Extract the Source files tar zxvf a52dec-0.7.4.tar.gz # Compile cd /usr/local/src/a52dec-0.7.4 ./configure --enable-shared=PKGS make && make install # libFAAD2 # Switch to working directory cd /usr/local/src # Download the source files needed wget http://downloads.sourceforge.net/faac/faad2-2.7.tar.gz # Extract the Source files tar zxvf faad2-2.7.tar.gz # Compile cd /usr/local/src/faad2-2.7 autoreconf -vif ./configure --disable-drm --disable-mpeg4ip make && make install # libFAAC # Switch to working directory cd /usr/local/src # Download the source files needed wget http://downloads.sourceforge.net/faac/faac-1.28.tar.gz # Extract the Source files tar zxvf faac-1.28.tar.gz # Compile cd /usr/local/src/faac-1.28 ./bootstrap ./configure --disable-mp4v2 make && make install # YASM (required by x264) # Switch to working directory cd /usr/local/src # Download the source files needed wget http://www.tortall.net/projects/yasm/releases/yasm-0.7.0.tar.gz # Extract the Source files tar zxvf yasm-0.7.0.tar.gz # Compile cd /usr/local/src/yasm-0.7.0 ./configure make && make install # x264 daily snapshot # Switch to working directory cd /usr/local/src # Download the source files needed wget http://download.videolan.org/pub/videolan/x264/snapshots/x264-snapshot-20090901-2245.tar.bz2 # Extract the Source files bzip2 -d x264-snapshot-20090901-2245.tar.bz2; tar xvf x264-snapshot-20090901-2245.tar # Compile cd /usr/local/src/x264-snapshot-20090901-2245 ./configure --enable-mp4-output --enable-shared --enable-pthread make && make install # XVID # Switch to working directory cd /usr/local/src # Download the source files needed wget http://downloads.xvid.org/downloads/xvidcore-1.2.2.tar.gz # Extract the Source files tar zxvf xvidcore-1.2.2.tar.gz # Compile cd /usr/local/src/xvidcore/build/generic ./configure make && make install # Install SVN/Ruby yum install -y subversion ruby ncurses-devel # Fix few Lib issues for next steps echo "/usr/local/lib" >> /etc/ld.so.conf ldconfig -v # MPlayer Core # Switch to working directory cd /usr/local/src # Get the latest version from the subversion svn checkout svn://svn.mplayerhq.hu/mplayer/trunk mplayer # Compile cd /usr/local/src/mplayer ./configure make && make install # FFMPEG # Switch to working directory cd /usr/local/src # Get the latest version from the subversion svn checkout svn://svn.mplayerhq.hu/ffmpeg/trunk ffmpeg # Compile cd /usr/local/src/ffmpeg ./configure --enable-gpl --enable-postproc --enable-nonfree --enable-postproc --enable-libfaad --enable-avfilter --enable-pthreads --enable-libxvid --enable-libx264 --enable-libmp3lame --enable-libfaac --disable-ffserver --disable-ffplay --enable-shared echo '#define HAVE_LRINTF 1' >> config.h make && make install # Finalize the codec setups ln -s /usr/local/lib/libavformat.so.50 /usr/lib/libavformat.so.50 ln -s /usr/local/lib/libavcodec.so.51 /usr/lib/libavcodec.so.51 ln -s /usr/local/lib/libavutil.so.49 /usr/lib/libavutil.so.49 ln -s /usr/local/lib/libmp3lame.so.0 /usr/lib/libmp3lame.so.0 ln -s /usr/local/lib/libavformat.so.51 /usr/lib/libavformat.so.51 # Few tasks before compiling FFMPEG-PHP yum install -y automake autoconf libtool # FFmpeg-php # Switch to working directory cd /usr/local/src # Download the source files needed wget http://downloads.sourceforge.net/ffmpeg-php/ffmpeg-php-0.6.0.tbz2 # Extract the Source files bunzip2 ffmpeg-php-0.6.0.tbz2; tar xvf ffmpeg-php-0.6.0.tar # Compile cd /usr/local/src/ffmpeg-php-0.6.0 phpize ./configure make make install # Add FFMPEG-PHP as an extension of PHP # Add this line to your php.ini file (Check the correct path of php.ini) echo "extension=ffmpeg.so" >> /etc/php.ini # Restart Apache to load FFMPEG-PHP service httpd restart # Cleanup cd .. rm -f -r ./ffmpeg-php
Wow! That was long…glad that’s over. Anyway, you should check and make sure it worked by running phpinfo() in php and searching for a block called ‘ffmpeg’. If anyone has any suggestions for improvements to the script or other encoders I should add let me know.
Tiled Maps for XNA – Full support for the Tiled Map XML specification!
So yesterday I came across a very basic loader for Tiled Maps (*.tmx) made with the Tiled Map Editor. It only supported the basics–Tileset loading and Layer rendering–so I took it upon myself to complete the loader by adding support for the rest of the features that were left out;
-added ProhibitDtd = false, so you don’t need to remove the doctype line after each time you edit the map.
-changed everything to use SortedLists for named referencing–so much easier
-added objectgroups
-added movable and resizable objects
-added object images
-added meta property support to maps, layers, object groups and objects
-added support for non-binary encoded layer data
-added layer and object group transparency
I created a simple demo to show off some of the features. You should see a partially transparent object with a resized image of Ness (Earthbound) on top of a partially transparent layer of grass with the words “Tile Maps Rule” written in rock with a pulsating opacity. Use the arrow keys to move Ness around. All objects and object groups can have their X and Y coordinates set dynamically, so you can do cool stuff like parallax clouds drifting overhead.