Different var, same subject

Apr 28, 2011 1 Comment
Tagged: , and

I recently tried to do something and I don't know if it is all that good. If somebody has an opinion about it, I would love to hear it.

I have been using the $ suffix for variables that are really jQuery objects. But I keep coming across occurrences that need the real variable, aka not the jQuery one.

So what I tend to do now is something like:

collection : {
$foo : $('.bar'),
foo : '.bar'
}

In this way I can use both the jQuery object easily and the normal variable, like this:

// use the jQuery object
collection.$foo.action()// use the normal object
$('body').find(collection.foo)

What do you think, is this too much or do you use this too?

I am trying to get a better last example, 'cause this ain't all that clear I think...

Datetime in habari

Right now I am reading the most excellent book by the esteemed Bruce Lawson and his partner in crime Remy Sharp. I must say, to start with, that is a great read, which has me whipping out my laptop. Even on a sunday morning, before my 2nd breakfast, which is really uncommon. I even started to hack away at this site, just for the heck of it...

And that is the small thing that I wanted to share with you. I don't know why but I haven't gotten around to properly adding the time attribute to this site, even though I got it in #html5 for quite some time now. Somehow it didn't happen, but anyway, here is the code to add it in habari.

<time 
datetime="<?php echo $post->pubdate->text_format('{Y}-{m}-{d}'); ?>"
pubtime>
<?php echo $post->pubdate->
text_format('<span>{M}</span>
<span>{d}</span>,
<span>{Y}</span>');
?>
</time>

It's just a small bit, but I hope it is of help to someone who uses habari...

It's visible content is in dutch / european order, but I'm sure you can change that to suit yours...

Javascript coding suggestions

crockford 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?

large movies on iphone - a solution

Jul 07, 2010 0 Comments
Tagged: , , , , and

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.

Zeldman on standards

Apr 16, 2009 0 Comments
Tagged: , , , and

This is one to see.

A great interview with jeffrey zeldman about web standards. He talks about his view on them and how the adoption came around. A nice piece is around the 6th minute, where he explains why he started doing standards. Turns out he had the same reason I did, he just didn't want to build 4 versions of each page but wanted to focus on the content and the design.

So In other words, if you use web standards you get to go to the pub earlier :.