Tag Archives: web developer

Should I do Something Only Because Crockford Says So?

web development, , , , , , ,

Crockford says: “Don’t do that, please stop doing it!?” It may be related to JavaScript, YUI, CSS or whatever. PPK recently posted about browser prefixes with the same intonation. OK, fine, it’s difficult to maintain, it’s ugly but my job is to make the site look as nice as possible.

I agree with Crokford that only with copy/paste now JavaScript has the reputation of badly standardized language with no programmers that understand it at all. It’s true, but however this maybe made JavaScript so popular, now all the libraries come with that abstraction in mind and this gap seems to be smaller.

In addition I’ll say that’s fine if Crockford or PPK say something like that, but the primary goal of every web developer is not to be in good relations with Crockford, but to satisfy clients! I’d like to repeat – clients!

CSS border-radius vs. images!

css, web development, , , , , , , , , , , , ,

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.

Fancy tooltips with jQuery

javascript, micro tutorial, , , , , , ,

I was decided to write this post from long time ago and now I’m pretty sure it has to be published. What I see in my practice and my browsing in the web there are too many old fashioned tooltips all over the web, as web developer don’t know how to make pretty good fancy tooltips.

That’s why I decided to show what’s not and what is fancy tooltip, with the help of jQuery. Of course don’t hesitate to make with every other library or pure JS code.

What is NOT fancy?

It’s not fancy when the tooltip is with fixed position. In the example here I made one pretty small sample:

What is fancy?

In the other side you can make the tooltip moving with the mouse pointer which is way better, as you can see here:

Speed up the JavaScript. It can change dramatically the user experience.

javascript, micro tutorial, web development, , , , , , , , , , , , , , , , , , ,

JavaScript in a modern web application

If someone asks you what is the javascript in modern web developer, probably you should answer it’s almost the half of the traffic of your site and it’s almost everything when dealing with user experience.

Today’s big web apps are useless without it AJAX/JS part. Think about Facebook, Google products, Twitter, Yahoo!, Youtube.

Actually they made this a standart. The times when you used to use JavaScript as a helper language just to figure out how a drop down menu will work are far way in the past. Now JavaScript is everything in a rich web sites. With no JS they will be no rich at all! Then it comes the question how to improve sites with lots of javascript. Actually one of the main problems in the web now is that JavaScript is blocking content.

Blocked by the JavaScript

What that means at all is that until the browser receives and parses the JavaScript file/s it doesn’t process anything else, it even doesn’t load any other resources. Now you can imagine how big the problem is. When it comes to large files more than 100K the user experience will be very bad!

Optimize the web? What about optimizing JavaScript!

If the problem is so big as I described above why should we doubt about where to start with the optimization process? But of course with the JavaScript and the natural question that rises is how this can be optimized at all?

Three steps

Like me, many of you may heart of some techniques that improve javascript performance. Here are some I was able to select as important:

1. minify/compress

That’s rule number one. If everything that is a JavaScript file is processed once it arrives to the client than make it smaller and make it go faster trough the wire. Actually one technique to speed up things more is to concatenated all the files you have into one single big file. Although this will not spend you some space will reduce the HTTP requests and therefore speed up the loading process. Good tools that you can use to minify javascript files are the Yahoo’s YUI Compressor, that beside that compresses CSS and Google Closure Compiler. Both are extremely useful and by the last measurements the Google’s Compiler is even better, but it’s up to you to decide which one to pick up.

2 .write fast and smart code

You can minify everything that’s JavaScript and the code may remain slow. But why is that? That’s because the JavaScript is written in a bad way. You know there are many resources in the web describing what is a bad and what is a good practice when writing JS. Even more you can measure it by yourself if you’d like to use the Firebug’s profiler. That’s a good start to avoid bad practices.

3. improve loading – lazy loading

That’s a bit more complicated. If there’s a really big javascript file after compressing and concatenating all the JS functionality remains big. How to avoid that? Simply let’s the user to see the most important functionality and than load the entire app. Some good tutorials about lazy loading again can be found online. Don’t hesitate to search about.

Beside this really basic advices I’ll continue to write in my blog about specific techniques how to improve the JavaScript as this is one of the most interesting parts of web development by me.

cssText and how it can be very very useful

css, javascript, micro tutorial, , ,

We all know, or at least all of us reading every new coming news on the web development sky, that making your browser reflow and repaint is expensive. Actually it is quite expensive.

What I’m about to say comes under the tag of “very good news” for those how didn’t know what repaint as and what cssText is.

When it comes to the repaint and reflow, which sounds really strange, there are lots and lots of articles what this is, but in breve, just to let you know what is and where’s the bad part of it I’ll describe it again. Continue reading cssText and how it can be very very useful →