WNAS

ListenToYouTube.com: "Youtube to MP3, get mp3 from youtube video, flv to mp3, extract audio from youtube, youtube mp3"

Will have to test this myself, but it looks promising...

I am now working on some coding conventions for use at one of my clients. Having done some work on the HTML and CSS ones, I recently started with the javascript one. As I was working on it, I looked at the work done by others, like Douglas Crockford. Some of my co-workers suggested that we did this:

var nameSpace = (function () {
    // declare all of your var's before using them..
	var config, init,x,doStuff;
    config = {
		a : 'a'
	};
	init = function ( arg ) {
		doStuff( arg );
	};
	x = '36';
	doStuff = function ( arg ) {
		// dostuff
	};
	return {
		init:init
	};
}());

While I initially agreed with this, as it seems nice and neat, I spotted a problem with it when it gets big. As you get a really big script and more people working on it, chances are that you will get someone to forget to declare a var in the beginning of the function, hence making it global.
Like this:

var nameSpace = (function () {
	// declare all of your var's before using them..
	var config, init,x,doStuff;// we forgot to add doMoreStuff
	config = {
		a : 'a'
	};
	init = function ( arg ) {
		doStuff( arg );
	};
	x = '36';
	doStuff = function ( arg ) {
		// dostuff
		doMoreStuff();
	};// doMoreStuff is global
	doMoreStuff = function () {
		alert( config.b );
	};	return {
		init:init
	};
}());

So I came up with a (not so revolutionary) way of avoiding this and I am curious what you think of it?
It goes like this:

var nameSpace = (function () {
	// start with var to avoid global variables
	var config = {
		a : 'a',
		b : 'b'
	},
	// continue with a comma to stay in the same var declaration.
		init = function ( arg ) {
		doStuff( arg );
	},
		x = '3',
		doStuff = function ( arg ) {
		// dostuff
	};
	// end with a semi colon.
	return {
		init:init
	};
}());

I think that this has the advantage that when someone else continues with this code he can extend it easily, while not accidentally introducing globlal variables...

var nameSpace = (function () {
	// start with var to avoid global variables
	var config = {
		a : 'a',
		b : 'b'
	},
	// continue with a comma to stay in the same var declaration.
		init = function ( arg ) {
		doStuff( arg );
	},
		x = '3',
		doStuff = function ( arg ) {
		// doStuff
	},// if you add a new var it's not global
		doMoreStuff = function (){
		// do more stuff
	};
	// end with a semi colon.
	return {
		init:init
	};
}());

What do you think, is this a good way to structure your code or am I missing something?

Really funny and no soccer!!!

The Art of Analog Computing from meltmedia on Vimeo.

Thanks to Gerben at g-mag.

Nagging again, will do some work soon to make it easier to embed html5 video from youtube or vimeo... Keep you posted.

I really hope something like this happens this sunday...

But I really hope youtube would make it easier for me to include a frigging #html5 video and let me build me own flash fallback.... Come on people, 2001 called and it wants it's flash tags back.

Problem

I recently came across a small problem. When trying to get a movie (using the html5 video tag ofcourse) I found out that the iPhone doesn't play movies larger than 640 x 480 pixels and with a base profile other than H.264. Don't believe me, but look at their page.

As the client really wanted his rather large movie on the page and did not wanted it to be scaled down a notch, I was presented with a challenge. He also really wanted it to work on his beloved iPhone... What is a guy to do?

Solution

After some time I came up with a solution and a rather simple one it is. I use the rather excellent html5media script to get it to work in browsers without support for the video tag and want it to work in as many browsers as possible. So I already have two different sources in my video tag.

Like this:

<video
	poster="pathto/poster.png"
	width="780"
	height="470"
	controls
	preload>
	<source
		src="pathto/movie.ogv"
		type='video/ogg; codecs="theora, vorbis"'></source>
	<source
		src="pathto/movie.mp4"
		type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>

As the movie I tried to play was to big, the iPhone didn't wanted to play it. Turned out all I had to do was include a third source into the video tag, pointing to a iPhone specific file, like this:

<video
  poster="pathto/poster.png"
  width="780"
  height="470"
  controls
  preload>
  <source
    src="pathto/movie.ogv"
    type='video/ogg; codecs="theora, vorbis"'></source>
  <source
    src="pathto/movie.mp4"
    type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
  <source src="pathto/movie.m4v"
    type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>

Here you go, a solution to play large video's on your website, without compromising the quality for the desktop and still get it to work on the iPhone...

I hope this will help someone and if you have a better solution, please let me know...

Links

Some stuff I used to get the whole video she-bang working:

camendesign

This got me started

html5media

And this is what I use now to get it to work.

Cool and long overdue. The sites that make me visit multiple pages for one article only make me use the reader functionality of safari.

And get annoyed...

"Think of how a typical user session works on most news sites these days. A user loads an article (1 pageview), pops open a slideshow (1 pageview), flips through 30 slides of an HTML-based slideshow (30 pageviews). That’s 32 pageviews and a lot of extraneous downloading and page refreshing.

On new msnbc.com story pages, the above sequence would register one pageview: the initial one. The rest of the interactions occur within the page itself. Can msnbc.com serve ad impressions against in-page interactions? Sure, and that’s key to the strategy, but as a user, your experience is much smoother, and as an advertiser, the impressions you purchase are almost guaranteed to come across human eyes since your ads are only loaded upon user interaction."

(Another Nail in the Pageview Coffin | Mike Industries.)

Just found a weird feature in Google's chrome browser, version 5.0.375.70. It seems that if you put the ogg src before the mp4, it won't play...

      <video 
        class="video" 
        poster="http://wnas.nl/files/movie/example.jpg" 
        width="780" 
        height="470" 
        controls preload>
          
          <source 
            src="http://wnas.nl/files/movie/example.mp4" 
            type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
          </source>

		<source 
           src="http://wnas.nl/files/movie/example.ogv" 
           type='video/ogg; codecs="theora, vorbis"'>
          </source>
    </video>

So you need to pay attention to one more thing when doing video and want it to work cross-browser...

And yes, I am aware that it won't play in IE and I don't care :). What I do care about is that the second video won't play in chrome for some reason, if anyone has a clue...

But what bothers me is that the iPhone won't play the thing if it's got a poster frame... So you need to omit that if you care about the iphone. I thought that they had that fixed with the ios4 upgrade, but apperently not...

Now this is really good for us real web craftsman and women. Real knowledge of your field once again proves itself against frameworks. How much I loved the demos of jQtouch at last weeks @media ( or #wdx as it is called now ), I still think that using a library or a framework isn't the thing to do for speed. So Ipad and Iphone development will create a new demand for good old hand coders.

"Don’t rely on frameworks or what standards zealots tell you. In our case, a highly trimmed HTML page, with inline CSS, just some pure JavaScript without a framework and using the capabilities of the target platform (iPad) as much as possible allows for a lean page that loads almost instantly, caches well and works great offline. Yes, we could have used JavaScript and CSS frameworks, but sometimes less is more (and remember, you don’t need all the cross-browser heavy lifting that frameworks do for you)."

(Via Thomas Fuchs.)

Lot's of new (true) html5 features, like: offline storage and web workers... And fast

" It has innovative new features that improve the way you view the web. And powerful new tools to help developers enhance and customize the browsing experience altogether. Learn more"

(Apple - Safari - Browse the web in smarter, more powerful ways.)

I was just documenting a whole bunch of scripts and I noticed that my coding style is not so consistent as I like to think. It seems like I am a real person too :). But this put a question in my head, what do most people do if you chain lots of things. All on one line, or each method on it's own line. Mind you, I compress my code when I go live, so size don't matter much, just readability.

So do you like:

	$( 'foo' )
				.clone()
				.appendTo('#bar')
				.find('p')
				.removeClass( 'one' )
				.find('input, label')
				.val('')
				.removeClass( 'two' );

Or do you like this one better:

$( 'foo' ).clone().appendTo('#bar').find('p').removeClass( 'one' ).find('input, label').val('').removeClass( 'two' );

Me I do both, in general I go for the one a method way when it's a lot of code and all on one line when it's only three or four things I am chaining. So, although I go for a consistent style in coding, I seem to violate my own principles when I review a project that I (like this one) work on for months. I wonder if this is something that can be prevented by setting strict coding guidelines or that we should accept it, as long as the overal principles are being followed.

After all, this is a project I worked on with several people, over a period of 6 months. In that time, deviations in coding style can occur, but when you follow the overall guidelines it does no harm in my opinion. The thing is that you should not make you coding standards to strict, as people tend to feel that they are in the way of their work, instead of helping them. Me, I am quit relaxed about coding styles, I tend to agree upon a certain naming convention and some common pattern and that is that. Formatting I can do from textmate, so other people's preferences don't bother me as I take over some code or do a review.

So we agree on a naming convention, like all-small-caps or maybe camelCasing or even using_underscores, and we then select for instance the Revealing Module Patter and of we go...

I am curious about your opinion on this. How do you people approach this when you do a big project or product? Do you work with more extensive guidelines or none at all...

I would really like to hear different opinions, as I think that this sort of thing is getting more important by the day...

By the way, I wrote about CSS coding conventions a long time ago... It still holds in my opion