Tag Archives: web development

Setting a Zend Framework _redirect Referer

Seems to be impossible, just because the only parameters you can set are far less than setting a referrer. Thus you’ve to rely on your browser capabilities. However the most reliable way is to redirect with referrer in mind. Something like _GET parameters.

$this->_redirect('/url/return-to/1');

Once this parameter is processed by the controller/action you can return to the referrer!

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.

CSS effective selector

CSS optimization

Recently I posted an article about CSS optimization describing five simple steps you can do to speed up the page load time and the bowser execution time. One of the key features is to use effective selectors, but what exactly that means.

Parents and children

In CSS, after the name of cascading, there is a very powerful feature of inheritance and you can simply describe a child style by a selector which can be something like that:

div table tr td a { color: red; }

In reality is very, but very inefficient. Event it is a working example, the browser will find every anchor <a tag within the page than check if it’s child of a td, than tr and so on until the closing outer most div tag.

That’s why the browser is really hard to find every one of these tags just to apply a simple font color. What the big problem is that once you have thousands of tags in that page the browser starts to use CPU and the application starts to be irresponsive.

The solution

Of course there’s a simple solution, which can be described as transformation from inefficient to efficient selectors. Because the browser can find a tag way faster by a given ID or CLASS you can simply convert the code above with something like:

a.my-class { color: red; }

and than change a bit the markup with a tags with that specific class name. Which is a bit tricky, but speedups the performance a lot.

How can I find bad selectors?

Actually that is the big problem. Once you’re into the deep of web development the applications are so big, with so many CSS selectors and so many CSS rules that you simply cannot track that any more.

Hopefully there comes some tools that can describe you everything and point you the inefficient selectors. My personal choice is the Google’s Page Speed plugin, which can be installed to the Firebug on Mozilla Firefox. It can analyze the page and extract a list of inefficient and so called very inefficient selectors that must be fixed!

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

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.

What should be optimized in one web page?

Well that’s a question that has been asked so many times in the web and I my intention is not to repeat that. In my web development experience after so many web sites behind my back, there is always something that repeats in every site. And that’s the technology that support the development – the languages we use. Although they differ in some way, especially those used on the server site, or so called server scripts, which can vary between many options, but in fact almost every web project consist of one of the following things:

  • HTML
  • CSS
  • JavaScript
  • Flash or Silverlight
  • Server side scripting language, like PHP, ASP or whatever
  • Database server

I’d like to add one category more and that’s the images we use in every website to construct the desirable layout. They are extremely important when optimizing a web page, because almost always they make more than half of the traffic of a page.

In few posts I’ll write what and how can be optimized, according to my experience and according to the articles I’ve read. I won’t mention again why the optimization is important – I’ve written already some posts about that and the web is full of articles.

As I can say nowadays this is the most important topic of the web development. Almost everyone’s speaking about it and I’d like to give some references in my talks, just to make it more clear and to give you some basic points from where you can start optimizing.