A college sent out this link. And I just couldn’t resist installing it and I am glad I did.
Yes, Ke$ha I know … it keeps my engaged and is loud enough to block distractions when I code.
A few weeks back I was inspired by github.com implementation of the tree slider and I had a project at patch.com where I was building a dashboard for Business owners to manage features through our site. In order to make a dashboard with multiple pages and make it snappy and interactive I felt using a proper history control was in order. I have never had pleasant relationship with Really Simple History or any other history library for that matter. So I started investigating the new html5 history api. The nice thing about the new history api is that it will always result in a “proper” url so linking straight to a particular page is doable without having to have js kick in and respond to a location hash on your page. This also makes it easier to manage history when coming traveling into the feature as well as out of it. One problem with RSH is that you have to handle that awkward first stage where you end up dealing with issues going between pages that are paged in via xhr vs pages that are full requests.
One thing that is clear and helped in making a design choice was the fact that the history api is not even close to being implemented in the IE family. This I doesn’t bother me too much since this is what you label as progressive enhancement but this limitation did make force me implement the pages in a way that it was working without it which is a good practice any ways this way it can work without javascript for example. I was lucky because the “page” area was well defined so I was able to create two endpoints in our rails stack where it switches between rendering a whole page and a partial depending on if the request is an xhr request or not … rails is good at that type of stuff.
Then for the history javascript example. I used the history.js library that offers some hashbang support as a html4 fallback. But you can use similar code for the native history api support with a few replacements
if( !History.enabled ) { return; }
var loadPage = function( opts ) {
if( opts ) {
$.each( opts, function( k, v ) {
defaultOptions[ k ] = v;
} );
}
var panels = contentSpace.data( 'panels' );
if(!panels[opts.path]) {
$.get( opts.path, function( data ) {
//cache page
if( opts.page ) {
panels[ opts.path ] = { 'data' : data, 'page' : opts.page };
contentSpace.data( 'panels', panels );
}
contentSpace.html( data );
});
} else {
contentSpace.html( panels[ opts.path ].data );
}
}
History.Adapter.bind( window, 'statechange', function(e) {
var opts = { 'path' : History.getState().hash, 'page' : History.getState().data.page };
loadPage( opts );
});
// hit it for the first time
History.pushState( optionHash, "Title", "the url path" );
This implementation is specific to fit the requirements I had but I wanted it to be out there in the interest of having more examples of how this can be implemented and demonstrate that it’s relatively straight forward. I sugar coded this with caching which will obviously prevent the users to see any “real” time info if there are any.
Good Links to explore HTML5 history api
So, many years ago, I was pretty pumped up about having found a decent way to run JSlint on the command line instead of having to either paste it into the jslint website or even run it through an IDE. That approach works well so long that you have a little project and you don’t have massive code base. This time around I wanted to find a decent way of running it against a larger code base with multiple developers, jsLintWrapper is the proposed solution. When I was investigating ways to do this I didn’t find anything that worked well for me and no good way of excluding some of the errors that jslint complains about. When I looked at the jquery project they had a good way to exclude some of the errors so I snagged that idea and built it further to run on a large code base. This meant finding a way to run them on all files and be reasonably quick. I also added in some ways of placing a stick in the ground, sort of speak where you pick an day where you want to be lint free after and then you only have to lint files that you modify this is a good strategy for getting a clean run which you can then tie into your commit hooks, build process or what ever ways work for your workflow. This is still a work in progress so I would appreciate feedback and suggestions for features.
Made another goofy dom game. This game used to be on my old Motorola phone, ages ago, and I was absolutely addicted to it.
The dom games collection is at games.snitchmedia.com.
This one uses workers so it will not work in IE.
I don’t know what hit me but I decided to start making little html/css/js games. Using as little extra possible. Here is my first Connect Four. And yes, this has to be about the geekiest friday night activities known to man.
This game is made from nothing other than html/css/js. The circles are the discs on the li elements.
My plan is to make more and stash them here.
December 7, 2010: Patch.com opened up a site covering all things local in Park Slope. This makes me very excited as I live in Park Slope and because I work for Patch. This also marks the end of an era. 5 years ago I started working on a site that covered local restaurant reviews in Park Slope called Grubsnitch. Grubsnitch was conceived at a local bar where my wife and I found that reviews of new restaurants in Park Slope were lacking. This was at the dawn of what is now called social media. Facebook hadn’t yet opened up registration to the general public. We felt strongly that anyone should be able to review their restaurant experience in their local communities. Another drive that was much more important to me was to use this to as a way to experiment with new technology. I haven’t touched the site in over 3 years now, so it seems reasonable to euthanize it. I certainly miss the daydreams and the prospect of world domination 
Even though this crazy adventure didn’t make me into a web 2.0 start-up mogul, millionaire or cooler than I already am, I still will always look at this failure as the greatest learning opportunity I have ever had. In fact I wouldn’t be working for an awesome place like Patch without it. To users and everyone that helped out kisses and BIG thanks.
I was quite thrilled about this solution so I might as well brag about it.
I have a scenario where I need to create document nodes with an id and to be able to create more than one in a given document I wanted the id string to be somewhat random just so I don’t create the same one twice and so that it doesn’t accidentally clash with an existing element on the page. Enter Random Enough String function.
function randomEnoughIdString() {
var MAX = [90,122];
var MIN = [65,97];
var randomString = [];
for(var i = 0; i < 5; i++){
var x = Math.round(Math.random());
var randomNumberInRange = Math.floor((Math.random()*100) % (MAX[x] - MIN[x] + 1) + MIN[x]);
randomString.push(String.fromCharCode(randomNumberInRange));
}
return randomString.join("");
}
This can be extended in lots of different ways, current implementation only uses characters in the range 65..97 and 90..122 which are alpha characters without any symbols. This implementation also hardcodes the length of the string which could be passed in as an option.
I am not saying it isn’t fun hacking together a combination of ffmpeg, mencoder and dealing with all the dependencies and throwing down one ninja trick after another, just to transcode your video so it will display properly on the web, iphone or what ever device you want them on.
Using zencoder makes processing videos really satisfying. Just tell them where the source video is and tell them where you want them to dump the output, and as any modern web application it has implemented a web hook so if you want to stay tuned about the process specify a url where the status updates will be posted to. It looks like they only send you status when it is completed. Here is a quick example of how to get this working with ruby code.
require 'rubygems'
require 'rest_client'
require 'json'
HOST = "https://app.zencoder.com/api/jobs"
opts = {
"test" => 1,
"input" => "s3://bucketname/filename",
"output" => [
{
"label" => "fromapi",
"base_url" => "s3://bucketname/",
"filename" => "newfilename",
"width" => 500,
"quality" => 3,
"speed" => 1,
"h264_profile" => "high",
"audio_channels" => 2,
"notifications" => [
"http://example.com/status",
"you@example.com"
]
}
],
"api_key" => "youapikeyhere"
}
headers = {:content_type => :json, :accept => :json}
RestClient.post HOST, JSON.generate(opts), headers
Then on the receiving end you get the status update
{
"output": {"url":"s3://bucketname/filename",
"state":"finished",
"label":"fromapi",
"id":38384},
"job":{"test":true,
"state":"finished",
"id":38328}
}
This is pretty much all you need to start up your “next going to conquer the world and become a web celeb” venture, well this and a lot of free time. There are some acl settings you need to apply on your bucket something I have covered previously but using the firefox pluggin for S3 is good for that stuff as well
The things I really like about this approach is that it’s decoupled from the upload process. They will pick up your file so the only thing is that you have to either have it uploaded to S3 or simply have your somewhere accessibly to them. The benefits of having it all on S3 is that the access control is built in so you don’t have to expose your high quality videos to the public unless you want to.
The pricing seems reasonable, especially given that they charges for minutes of video transcoded instead of filesize, which is a really refreshing perspective. 6 cents a minute makes it $3.6 to transcode all of the stuff my flip mino HD can record.
Go check it out it’s really fun to play with and it was written up by techcrunch today
Recent Comments