Once I posted about JavaScript object coding style. Back than I made the analogy with PHP array coding style. In breve it’s useful to format the arrays in PHP simply like that:

$data = array(
	'key1' => 'value1',
	'key2' => 'value2',
	'key3' => 'value3',
	'key4' => 'value4',
	'key5' => 'value5',
);

Note that there is a trailing comma after the last key/value pair. This is not a syntax error and helps you add new elements to the array with no fear to forget the comma. This coding standard is quite well known in the PHP community, but in fact writing JavaScript objects can be “translated” to something very similar. The only problem is that the trailing comma in JavaScript will result to an error, especially in Internet Explorer, so it is important to remove it.

var obj = {
	key1 : 'value1',
	key2 : 'value2',
	key3 : 'value3',
	key4 : 'value4',
	key5 : 'value5'
};

The problem is that when you’ve to add one key/value pair, you’ve to add the comma after the last pair. This actually makes it useless.

Better Solution

There is another way, much better I think, that may help you more when adding new pairs to the object.

var obj = 
	{ key1 : 'value1'
	, key2 : 'value2'
	, key3 : 'value3'
	, key4 : 'value4'
	, key5 : 'value5'
	};

In this example you can simply copy/paste the last pair and change the key and value, or you can simply can continue writing the way the object is constructed.

Thus you don’t have the problem with the last comma and syntax errors.

and that is really bad!

There’s a Quick Fix …

Simply add an onerror handler on the IMG tag

Yes it is! Actually I stumbled these days on a video where one of the guys talked about a quite interesting technique, that all the site was sent in one response from the server. But how is it possible? Actually everything is collected on the server side, i.e. with PHP which groups everything within a string. Obviously the images are base64ed. Than everything is send to the client with appropriate delimiters and mime types, and the client separates the string and build ups the page.

Problems

Of course there are some problems. First of all, as you may guess, MSIE doesn’t support base64. Another bad thing is that this isn’t cacheable.

One Good Use

There is however a good place to use this technique. In mobile versions. There is no much need of caches and most of all MSIE is not there!

Either are bad, because vendor prefixes work on specific browsers, while CSS3 is not implemented fully by those browsers. When talking about vendor prefixes in CSS, let me tell you in breve, what’s this. If you’d like to make rounded corner under Mozilla Firefox, you usually use a background image, but there’s another way to do it – with Mozilla specific CSS:

-moz-border-radius: 5px;

That’s bad because it works only on Mozilla based browsers, although there’s a webkit based similar syntax:

-webkit-border-radius: 5px;

Even after that our “favorite” browser MSIE until version 9 is not displaying any rounded corners.

In other hand CSS3 gives us the possibility to write the simple:

border-radius:5px;

which is not implemented in many currently used browsers, but it may be used for progressive enhancements.

In Breve …

Everybody’s talking about vendor prefixes after the famous post of PPK, but there are both opinions – pros and cons. However it’s good to use it, but very carefully, and think about what CSS3 may give you!

This is one of the main problems of web design and development now, even if it sounds strange. The thing is that with round corners the elements become more nice and groovy and most of the web designers make such design templates. The problem than comes over the web developer who’s supposed to convert this into HTML and CSS. Of course it would be nice if all browsers support rounded corners in CSS, but they don’t and guess what IE fully doesn’t support it.

-moz and -webkit

Most of you have heart about this patches in CSS when you can use this prefixes for Mozilla based and Safari’s Webkit based browsers. Than you can use border radius with no pain, and you get the same effect as with using images.

-moz-border-radius : 4px;
-webkit-border-radius : 4px;

Of course on IE this doesn’t work and the element remains with square corners. But what the question is, should we make both versions for non IE browsers without images and a version for the “great” MSIE and all of its versions?

My answer is: no!

Although many sites do that, see vimeo for instance, there’s no need to support that. As the rumor and the MSIE blog says in IE9 which is … coming soon there will be – border-radius property.

That’s awesome!

Finally Microsoft has done something good! So stop using background images! This is hard to maintain, difficult to make and it’s bad for the browser loading time, because of the extra images/sprites.

<param name=”allowFullScreen” value=”true”>

parameter of the object tag. You may also set allowFullScreen=”true” of embed tag.

Very well known is that these tags help to put a flash movie into the HTML, but why they are two, and can they be used in other cases remains unanswered.

These tags, in general, are really most used to put flash movie into the web site, and as anyone can guess they are two cause of the differences in the web, specially between the web browsers. The <object> tag helps for the browser who use ActiveX controls to display properly the flash movie. In fact the newest Internet Explorer browsers like 7 version and 8 beta, display the movie correctly even without the <object> tag, but not always those flash movies work in the expected manner. Somethimes there are problems with autoplay or something like that. Especially this can be problematic when using some kind of .flv player. In that case (depending from the player) the movie initialize but the required .flv does not load and play. This was the problem I wrote for in my previous post about Opera and JW FLV Player.

As you may guess the <object> tag can handle much more the flash movie, but as many other entities as there are ActiveX controls.

To be more exact the <object> tag is for Internet Explorer, while the <embed> tag is for Netscape and related to it browsers using Netscape plugin to display a flash movie. More detailed information can be found on Adobe site:

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_4150

All the specification can be found online but more important is to mention the semantics of some of the attributes.

For both of the tags valid attributes are width and height. They can be either pixels or percentage, which are relative from the element containing the object/embed pair, i.e. if the flash is in a div with fixed width of 800px and the object/embed pair is 100% width the movie will became 800px wide.

Notice: some browsers do not calculate the height correctly when the height is set in percentage.

For the <object> tag only there should be classid, codebase, movie attributes, while for the <embed> tag only is src and pluginspage.

see which attributes are mandatory and which one are not at: object and embed tags revealed