Simple technique to preload images at specified moment

There are many ways to preload images, including methods that rely on CSS, JavaScript, and various combinations thereof. Here I would like to present some of my favorite technique which can be used for preloading images.

Why preloading?

Preloading images can be useful when you need resources without waiting for download them. However, while technique for preloading is important then sometimes is more important when you do this.

Disadvantages

Preloading is useful. However, there is a problems which could affect on overall performance[……]

Read more

JS tip: always use full reference

Let’s say we have an example of code like this:

(function(){

    function close_window() {
        if (typeof self.close === 'function') {
            self.close();
        }
    }
    // and somewhere in the code above method is called many times

    function some_action() {
        // here some code
        close_window();
    }

}());

Note: method close_window could be written in a better way, but in that case I wanted to show just a simple example.

Some time later someone did more changes and then after all the code[……]

Read more

PHP: simplexml_load_file and unable to find the wrapper

Tried to use method simplexml_load_file, but I’ve got Warning: simplexml_load_file(): Unable to find the wrapper "https" – did you forget to enable it when you configured PHP?. I use WAMP package and I found that I had no enabled php_openssl.dll in PHP ini configuration. So, I solved it by removing comment in line ;extension=php_openssl.dll in file c:\wamp\bin\apache\apache2.2.22\bin\php.ini (this depend on your configuration, so check where php.ini is).[……]

Read more

CSS: provide a unit for zero lengths

Zero lengths do not need unit. However, there is some significant benefits of using unit with zero lengths while developing code.

See real unit and easy change of them in browser developer tools

If you have an element which you need to modify the margin, padding, width or height for, you can use the cursor keys to increment/decrement the size. Simply use the up and down cursor keys to increment/decrement by a unit of 1.

In Chrome, Firefox and Safari you can increment/decrement by a unit of 10 by holding the “Shift” key whilst pressing th[……]

Read more

Get HTML img element reference by document.getElementById vs document.images

document.images returns a collection of the images in the current HTML document. Well, I assumed that it could be faster to get image reference by using document.images collection than just document.getElementById because document.images not operating on as large an HTMLCollection.

However, I made some test (on jsperf as well) and seems that document.getElementById method is faster in Firefox 22 and Chrome 27.0.1453.116 m, but not in IE 10.0.9200.16618 and not in Opera 12.15. All tests was done on Windows 7, 64bit.

Note:

As suggested b[……]

Read more

To cache or not to cache “length” property

I asked Thomas Lahn on comp.lang.javascript newsgroup about caching “length” property:

According to discussion here http://stackoverflow.com/questions/6261953/do-modern-javascript-jiters-need-array-length-caching-in-loops in your opinion property “length” still needs to be stored in variable before loop? Or this can be omitted because modern browsers caching (?) “length” property?

and he answered me:

One should never rely on what one cannot know. You cannot know the runtime
environments code once written will be exposed to. There i[……]

Read more

Accessibility Tip: ARIA role button

If you do your element clickable then add attribute role="button" to tell screen reader that the element is a button. This is useful especially for element A where we want to tell that this is a button, not a link. Read more on MDN.

Note: Windows Narrator on Windows 7 doesn’t read web content inside the browsers.[……]

Read more

Clearing IE history, cookies and temporary files from command line

During my work I had to frequency cleanse the history, cookies and temporary files of Internet Explorer. Doing it manually it’s just annoying. There is a better way: use command line. So, create a clearie.bat file with commands:

:: Clear IE history
START RunDll32.exe InetCpl.cpl,ClearMyTracksByProcess 1
:: Clear IE Cookies
START RunDll32.exe InetCpl.cpl,ClearMyTracksByProcess 2
:: Clear IE Temp files
START RunDll32.exe InetCpl.cpl,ClearMyTracksByProcess 8

START command enables a user to start a separate window in Windows from the Win[……]

Read more

Apache syntax check (Windows TIP)

If you want to check Apache configuration file syntax then use simple httpd.exe -t command. Run it from place where your Apache is installed, eg. C:\wamp\bin\apache\apache2.2.22\bin>. If everything is fine then you’ll see:

Syntax OK

[……]

Read more

3 ways to check if object do not contains any properties (is “empty”)

During some tests I found at least 3 ways to check if object “is empty”. I mean, do not contains any enumerable properties. Assuming we have an object:

var obj = {};

Then we can use:

if(JSON.stringify(obj) == '{}'){
    // object is "empty"
}

or

if(Object.keys(obj).length == 0){
    // object is "empty"
}

or

var isObjectEmpty = function (obj) {
    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            return false;
        }
    }
    return true;
};

if(isObjectEmpty([......]
Read more