Tag Archives: Software engineering

PHP if-else-endif Statements

PHP, , , , , , , , , , , , , , ,

PHP: if

A typical web developer knows exactly how a PHP if statement looks like:

   if ( expression ) {
      // if the expression was true proceed here
   } else {
      // there was a false expression
  }

HTML mess with PHP

When it comes to merge PHP and HTML the things are becoming ugly. Indeed most of the template systems as Smarty are improved and developed to overcome this issue, however when working with a native PHP code with no template system or with template system where the PHP code is allowed the things are really bad.

Let me show this in a breve example. Image you have to show different formatted HTML depending on a PHP expression. Something like that

<?php if (expression) { ?>
<div class="message">OK. Your registration is successful</div>
<?php } else { ?>
<div class="error">Something went wrong! Please try again later! </div>
<?php } ?>

Now you can see how difficult to maintain this code is when it doesn’t make use of only one code of HTML markup. Imaging you’ve to print differently formatted tables! Indeed the PHP curly brackets are different to follow.

PHP: the different IF syntax

So there is a PHP syntax that tries to help you manage this. You can write more human readable code like this:

<?php if ( expression ) : ?>
<div>message goes here</div>
<?php endif ?>

Thus you get the ENDIF instead of only one curly bracket. That’s indeed readable enough. In fact you can use this syntax with any conditional or loop statement in PHP:

<?php foreach($array as $key => $val) : ?>
<div class="message"><?php echo $val ?></div><br />
<?php endforeach ?>

To return in the previous example the code above should be transformed in that:

<?php if ( expression ) : ?>
<div class="message">some message here!</div>
<?php else : ?>
<div class="error">some error here!</div>
<?php endif ?>

What make JavaScript closures work?

javascript, micro tutorial, , , , , , , , , , ,

Closures again

Most of the JavaScript developer don’t even know what a JS closure is and that’s why Crockfrod is so angry. Yes, it’s true, most of the “developers” just copy and paste the code without even know how it works. OK, just in breve the closure is an anonymous function, which thus helps you define a pseudo namespace, as you may know that in a function everything is visible inside it and only there.

function myFunc() {
    var a = 10;
}

The code above makes the variable a to be visible only inside the function. But as you know there must be a function call to make “all this code work”.

myFunc();

However you can make an anonymous function – or a closure, where the function is with no name and is called once the code has been processed. The right syntax is like so:

(function() { var a = 10; })();

Why and how?

The question is: why and how that works? Why this syntax is correct?

Hint

A tiny hint is that you can make the following line working:

var myFunc = function(){ var a = 10; }();

Pay attention to this syntax and the assignment is what makes all this working.

CSS selectors – new look over them

css, , , , , , ,

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.

JavaScript optimization. Lazy loading.

javascript, micro tutorial, , , , , , , , ,

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.