Double Slashes In A Url

Many developers was wondering about the following line

<script src="//"></script>

What does the “double slashes” do or is this line of code correct?

It’s a relative URL without a scheme(http or https) according to RFC 3986: “Uniform Resource Identifier (URI): Generic Syntax”, Section 4.2. It’s useful when switching between http and https, because you won’t need to explicitly specify the scheme. It’s also supported in all web browsers.

More detailed, the two forward slashes are described as a common shorthand for whatever protocol being used


z-index Property

What is z-index

z-index is a css property that specifies the stack order of an element.  The stack order is based on the defined value. If an element has higher z-index, it’s in front of a lower z-index element. The default value is 0.
Note: z-index only works on positioned elements(absolute, relative, fixed)


tag {
    z-index: value;


Property Value Example Description
z-index auto z-index: auto; Sets the stack order equal to its parents. This is default
number z-index: 10; Sets the stack order of the element. Negative numbers are allowed
inherit z-index: inherit; nherits this property from its parent element

Browser Support

Most browser fully supports z-index property. IE7 doesn’t support the value “inherit”, IE8 requires !Doctype

Property compatible_ie compatible_firefox compatible_chrome compatible_safari compatible_opera
version 4.0 3.0 1.0 1.0 4.0


img {
    position: relative;
    left: 0px;
    bottom: 0px;
    z-index: 99;

PHP Composer

What is PHP Composer?

It’s a very good dependency management tool for PHP. It manages all the libraries that you have on your project.


The composer will pull all the required libraries, dependencies and keep track all of them just in individual project not globally. Furthermore, you might be aware of PEAR which is established as PHP package manager. However, it has been abandoned for several reasons. First of all, much of the code in PEAR is out of date. Secondly, PEAR forces you to install packages system wide rather than on a project-by-project.


Installing composer is quite easy. In this tutorial, I’ll use curl to install composer thus make sure you have curl installed or enabled in your system. If not, use the following to install

sudo apt-get install php5 git php5-curl

Now move to your project location and run this command:

curl -sS | php

You should see a success message like this:

All settings correct for using Composer
Composer successfully installed to: /var/www/my_project/composer.phar
Use it: php composer.phar


Now that you have composer installed. To use the composer, it requires composer.json file in which describes the dependencies of your project. For instance, our project depends on PEAR, Mail, Mail_Mime, Net_SMTP, Service_JSON. So let’s create the file:

    "require": {
        "": "1.9.4", 
        "": "1.2.0",
        "": "1.8.5",
        "": "1.6.1",
        "": "1.0.3"

One question rising from here is that where you can find the package and the version for this file. Here is a good place for you to do that.
Ok now you can run a command to install those dependencies on your project:

php composer.phar install


Once you have all your dependencies installed. You need to autoload them into your project. In your PHP project, simply specify this in your index or bootstrap file:

require 'vendor/autoload.php';


Composer is now widely used by many PHP developers. So it’s better for you to start using it today.

Use Javascript navigator.useragent to detect mobile devices

There are many ways to detect a device. Today, i suggest  a method of using JavaScript to detect a device

Navigator.useragent allows you to detect mobile devices including ipad

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

and use it as the following:

 if( isMobile.iOS() ) alert('iOS');

or simply including all in a function

function detectmob() {
     return !!navigator.userAgent.match(/iPad|iPhone|Android|BlackBerry|Windows Phone|webOS/i));

Insert and Update multiple records at once

INSERT Statement
If you want to insert a numbers of records, try the following:


For MySQL syntax, please visit MySQL :: MySQL 5.1 Reference Manual :: 13.2.5 INSERT Syntax
For PostgreSQL syntax, please visit PostgreSQL: Documentation: 9.3: Inserting Data
UPDATE Statement

SET(A, B) = (

There’s a problem with above UPDATE statement. In the subquery “SELECT VALUE1, VALUE2 FROM TABLE_NAME2 AS T2 WHERE T1.COL1=T2.COL2”, if it returns NULL values, your query could update with those NULL values. Hence, you should have a WHERE condition to prevent this problem, for example:

SET(A, B) = (

For MySQL syntax, please visit MySQL :: MySQL 5.1 Reference Manual :: 13.2.10 UPDATE Syntax
For PostgreSQL syntax, please visit PostgreSQL: Documentation: 9.3: UPDATE

Persistance and Duplication jQuery cookie

Using jQuery cookies to maintain user states becomes more popular. However, i’ve recently found a problem where state didn’t appear to be persisting and on viewing the cookie information, using the web developer toolbar, i had multiple versions of the same cookie.

when a cookie is created, its path is set default to ‘/’ meaning that the cookie is valid throughout the whole domain

Cookies can also be set per directory and they’ll be valid for a certain set of pages.

Therefore, to overcome this problem, instead of a simple name, value pair:

$.cookie('the_cookie', 'the_value');

you need explicitly set the cookie’s path as "/"

$.cookie('the_cookie', 'the_value', { path: "/" });

How to edit images in Adobe Fireworks CS6

Just follow these steps to cut your image areas:

  1. Select the Crop tool from the Select area of the Tools panel or from the Image editing panel
  2. Click and drag to select the area you want to keep when the crop is complete
  3. Press the Enter and Return key

the image is cropped to the selected area

If you’re working with a wireframe of a larger web page design, you might want to export only a small area not the rest of the image. To crop it, follow these steps:

  1. Click and hold the Crop tool to select the Export Area tool
  2. Click and drag to select the area you want to keep when the image is exported
  3. Double-click in the middle of the cropped area
  4. Right click to copy
  5. Create new document and paste it
  6. Then select File to export, you can select any type of GIF, BMP, JPEG, PNG, … to export