Tag Archives: Computing

CSS selectors – new look over them

How do you select?

When it comes to CSS selectors, most of us are using the most familiar selectors by id or class name. Something like:

.my-class {}
#my-id {}

But as you can see in most of the big JavaScript libraries, such as jQuery, you can improve the selection of element/s by using complex selector syntax.

Do you know the syntax?

Maybe yes, but maybe not! As I stumbled upon an interesting article on http://css-tricks.com
The Skinny on CSS Attribute Selectors.
The good part is that now you can use this powerful selector syntax to improve CSS.

Browsers

Because this is the most interesting part – yes it is supported by MSIE, and no – not before IE7, be careful if you’d like to support it.

CSS border-radius vs. images!

Rounded corners

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.

How to detect a variable existence in JavaScript?

Preface

After reading one of the latest posts from Stoyan Stefanov’s blog – phpied.com I stumbled upon an interesting construction in JavaScript describing how to check an object property existence. I’m going to cover this case using as an example the console object, which comes with the Firebug enabled, and I think it may be very useful, just because this object is widely used, but doesn’t exists over all the browsers, even under Firefox when Firebug is disabled. This construction is known as the IN statement and it looks something like that:

property in object

which I’m going to cover later in details.

How you detect a variable existence?

There are three main ways to detect the existence of a property I see in my practice.

1. The most widely used:

if ( console ) { ... }

2. The second and more professional one:

if ( typeof console != 'undefined' ) { ... }

3. And finally the third and most unknown:

if ( console in window ) { ... }

Of course two of them are wrong! Which one should be changed?

Is everything working correctly? No!

Lets see how they are working. First of all I’m going to test all of them on Firefox 3.6 either with enabled and disabled Firebug, just shouting with old school’s alert().

Now the first one using the IN statement:

if ( console in window )
   alert('object exists!');
else
   alert('object doesn\'t exists!');

With Firebug disabled the answer is … nothing! No alert! That’s because the syntax is wrong. There’s an error within the IF statement. We should modify a bit the first row like that:

if ( 'console' in window )
   alert('object exists!');
else
   alert('object doesn\'t exists!');

Now everything’s OK. With a disabled Firebug the answer is: “object doesn’t exists!”, and after enabling it, normally the “object exists!”.

Lets move on the next example:

if ( console )
   alert('object exists!');
else
   alert('object doesn\'t exists!');

With Firebug enabled the answer is as we expect: “object exists!”, but after disabling it yet again – nothing?! Why’s that? Because the console object doesn’t exists anymore and the IF statement doesn’t return true or false, but simply crashes. How to modify the code? Simply by adding a window.console instead of console.

if ( window.console )
   alert('object exists!');
else
   alert('object doesn\'t exists!');

Than the answer is: “the object doesn’t exists!” after what we expected!

The third method is the mostly used, just because it’s completely clear what’s the goal of the IF statement:

if ( typeof console != 'undefined' )
   alert('object exists!');
else
   alert('object doesn\'t exists!');

In both disabled and enabled Firebug the answer is as expected!

Now the IN statement may be used if not for the console, but for checking the existence of a property of within an object.

JavaScript optimization. Lazy loading.

Javascript files are too big!

Yes that’s the reality and when they become more and more bigger the web pages becomes to be irresponsible. The bitter reality is that you load any functionality that slows down the first user impression, but is needed only when you click on a button and so on. That’s a problem because you can load only that chunks you need in the beginning and than after a few seconds to load everything else. Some web applications have more than 100K of javascript which become really bad.

Separate logic

What you can do is to separate the logic into one or more files. Even when the user thinks everything is on the page and he can interact with the application and than to start to load the rest of the functionality.

That’s a pretty good technique. Nobody can start interacting on the 5th second of the load process. Usually the user looks at the interface starts to explore the app and after approximately the 10th second he start interacting with the page.

Lazy loading

There are various techniques of loading JavaScript on demand. So I wont cover it, but that pattern of loading it latter when needed is really powerful.

Manage JavaScript and CSS includes within Zend Framework application

How to include JavaScript and CSS files?

In Zend Framework there is a very elegant way to include CSS and JavaScript. Because in one single view of any action you cannot include a JavaScript or CSS because they wont be executed from the browser, you can simply use a helper.

You can see the original source of how that’s done here. And in breve you can include a JS file like so:

<? $this->headScript()->appendFile('/media/js/global.js') ?>

but where the problem is?

As a very good PHP point of view, there is really that way to include JS into the application. But a PHP point of view is not a JavaScript point of view so this solution is not the best one.

As almost everybody knows JavaScript blocks other content until it’s loaded and executed from the server and nowadays the most popular way to include JS is just before the closing <body> tag.

That’s why the ZF solution is not optimal. What we actually need as both PHP and JavaScript developers is a most robust solution!