Web developers have been concerned about the vendor prefix crisis since February 2012. To summarize the issue, this is what should happen in an ideal world:

1. Vendors implement experimental CSS3 properties using their own prefix, e.g. -webkit-transform, -moz-transform, -ms-transform, -o-transform.
2. Developers can use the technologies today without breaking cross-browser compatibility. Properties can be listed with their prefixed and unprefixed names to ensure they work everywhere.
3. Once a property becomes a W3C recommendation, all browser vendors can provide a stable unprefixed property, e.g. transform.
4. Optionally, developers can remove the prefixed properties from their stylesheets. However, it’s not strictly necessary if the unprefixed property is defined last and CSS cascade rules apply.

This is what occurs in the real world:

1. Vendors implement experimental CSS3 properties using their own prefix. In some cases, vendors promote them as an HTML5 “standard” even if they’re device-specific or never submitted to the W3C.
2. Some developers use the proprietary property from a single vendor, e.g. only -webkit-transform. This might be owing to ignorance, laziness or because they’re testing a limited number of devices.
3. Once a property becomes a W3C recommendation, all browser vendors can provide a stable unprefixed property, e.g. transform…
4. but developers neglect to change their stylesheets. The site looks good in some browsers but worse in others even when they support the standard W3C specification.
5. The vendors become concerned and add support for other prefixes into their browser, i.e. Opera implements the -webkit prefix for some properties. The prefix process is broken and, while it’s too early to predict the outcome, the majority of developers consider it to be a bad move.

We have discussed the issues at length on SitePoint; there are no easy solutions. However, two interesting proposals have been raised by W3C members during the past week.

Option 1: Unprefixed Properties are Supported From Day One

The first proposal comes from Florian Rivoal, Opera’s W3C representative:

When a browser vendor implements a new CSS feature, it should support it, from day 1, both prefixed and unprefixed, the two being aliased. If a style sheet contains both prefixed and unprefixed, the last one wins, according to the cascade.

Authors should write their style sheets using the unprefixed property, and only add a prefixed version of the property (below the unprefixed one) if they discover a bug or inconsistency that they need to work around in a particular browser.

If a large amount of content accumulates using the a particular vendor prefix to work around an issue with the early implementation in that browser, the vendor could decide to freeze the behavior of the prefixed property while continuing to improve the unprefixed one.

For example, you could use the following transform code in your CSS:

transform: rotate(30deg);

The property would be ignored by all browsers which had not implemented transforms. If there were a difference between two or more implementations, e.g. webkit browsers rotated anti-clockwise by default, you could override the property accordingly, e.g.

transform: rotate(30deg);
-webkit-transform: rotate(-30deg);

It’s a simple solution and easy to implement. Most existing stylesheets would continue to work and prefixed properties would rarely be necessary. In most cases, you would never need to update your CSS again.

However, what would happen if webkit changed rotation to the W3C-approved clockwise direction? Developers would need to fix their stylesheets by removing or rearranging the -webkit-transform: rotate(-30deg); property. Unfortunately, not everyone uses the same version of the webkit engine at the same time. You could encounter a situation where your site works in Chrome but not in Safari for several months.

Option 2: A New Vendor-Draft Modifier

The second proposal comes from François Remy:

Let’s introduce the “!vendor-draft” value modifier. I propose we use unprefixed properties from start, but with a token explaining which version of the property we built our CSS for:
border-radius: 3px !webkit-draft;

Any browser which is not webkit but implemented border-radius in a way that is compatible with the “webkit draft” can support the declaration. This is different from vendor prefixes: other browsers don’t impersonate webkit, they just acknowledge they support one specific property the way the webkit draft defines it. Browsers which are not compatible with that draft will just ignore the declaration. Browsers that change their implementation of a property are encouraged to iterate their “!vendor-draft” flag (using a version number, if appropriate).

This solves the issue by changing the property value rather than its name (in a similar way to the !important modifier). Again, the following transform code could be used:

transform: rotate(30deg);

But a default anti-clockwise rotation could be fixed in any browser adhering to a webkit specification:

transform: rotate(30deg);
transform: rotate(-30deg) !webkit-draft;

If a browser subsequently supported the W3C specification, the second property would be ignored.

It would also be possible to implement draft versioning, e.g.

transform: rotate(30deg);
transform: rotate(-30degrees) !webkit-draft;
transform: rotate(-30deg) !webkit-draft-2;

It’s a flexible solution which finally addresses the issue of properties evolving over time.

Unfortunately, it’s more difficult to implement and could take months to appear in browsers even if all vendors agreed today. It may be technically better, but it’s a fundamentally different approach which could break existing stylesheets. In the short term, vendors would probably support both prefixes and value modifiers — and that would lead to confusion.

I like both solutions. From a coding perspective, vendor-draft modifiers seems the most logical option but I doubt it can be considered until vendors “complete” CSS3 and begin work on CSS4.

Supporting unprefixed properties is more practical but will certainly cause versioning issues which couldn’t be fixed in CSS alone. But perhaps that’s the price you pay for using experimental technology?

Do you have a preference for either of these options? Or is it too late to prevent a vendor prefix catastrophe?

Web developers have long yearned for a way to store data long term.  Cookies are an option, but they can only store 4KB of data.  Additionally, cookies are sent to the server with each HTTP request.  This means that cookies, especially large ones, can consume considerable network bandwidth.  There have been other attempts to implement storage techniques, but for the most part they have been hacks.  Then, along came HTML5 and the Web Storage API to the rescue.

The Web Storage API defines two types of storage areas ― local storage and session storage.  Local storage is persistent data which remains until it is explicitly deleted, or until the browser’s cache is cleared.  According to the specification, browsers should allocate at least 5MB of local storage per domain.  The second storage type, session storage, is also persistent data, however the data is tied to a “top-level browsing context” (i.e. a browser tab or window).  Session data remains until it is either deleted or the browsing context is closed.  Session storage is particularly useful when a user is interacting with multiple instances of the same website.  In such a situation, using local storage could result in the different instances overwriting each others data.

The two types of storage areas are accessed through global objects named “localStorage” and “sessionStorage”.  Both storage areas implement the exact same API.  Data is stored as key/value pairs, and all data is stored in string form.  When adding data to storage, it is implicitly converted to a string.  However, when the string data is retrieved from storage it needs to be explicitly converted to the appropriate data type using functions such as parseInt().  When dealing with objects, the JSON.parse() and JSON.stringify() methods should be used for serialization and deserialization.

Detecting Storage Support

The Web Storage API, like many other HTML5 features, is not supported by all browsers.  To check if a browser supports storage, use the function shown below.  The function checks for the existence of the global “localStorage” object.  A similar function could be created to check for session storage, but it can be safely assumed that if one storage area exists, then so does the other.

function localStorageSupported() {
  try {
    return "localStorage" in window && window["localStorage"] !== null;
  } catch (e) {
    return false;
  }
}

Storing Data

Data is added to storage using the setItem() method.  setItem() takes a key and value as arguments.  If the key does not already exist in storage, then the key/value pair is added.  If the key is already present, then the value is updated.  Several example setItem() usages are shown below.  The examples show how to add data of various types to local and session storage.  Notice that the “key” argument must always be a string, while the type of “value” can vary.

localStorage.setItem("key", "value");
sessionStorage.setItem("foo", 3.14);
localStorage.setItem("bar", true);
sessionStorage.setItem("baz", JSON.stringify(object));

Data can also be added to storage using object property assignment statements.  The previous setItem() examples have been rewritten below using assignment statements. Note that the assignment to “key” on the first line will fail silently.  This is because the storage areas have a built in function named key() that will be covered later.  For this reason, the API methods are the preferred way to access storage.

localStorage.key = "value"; // this fails silently
sessionStorage.foo = 3.14;
localStorage["bar"] = true;
sessionStorage["baz"] = JSON.stringify(object);

If a site attempts to store too much data, eventually the browser’s storage quota will be exceeded and an exception will be thrown.  To handle this case, try-catch blocks should be used when storing data.  An example of this is shown below.

try {
  localStorage.setItem("key", "value");
} catch (e) {
  alert("Exceeded Storage Quota!");
}

Reading Stored Data

To read data from storage, the getItem() method is used.  getItem() takes a lookup key as its sole argument.  If the key exists in storage, then the corresponding value is returned.  If the key does not exist, then null is returned.  The following examples use the getItem() method to retrieve the data stored in the setItem() examples.

var string = localStorage.getItem("key");
var number = sessionStorage.getItem("foo");
var boolean = localStorage.getItem("bar");
var object = JSON.parse(sessionStorage.getItem("baz"));

Stored data can also be accessed by reading properties of the “localStorage” and “sessionStorage” objects.  The previous getItem() examples have been rewritten below using object property syntax.

var string = localStorage.key;
var number = sessionStorage.foo;
var boolean = localStorage["bar"];
var object = JSON.parse(sessionStorage["baz"]);

Iterating Over Stored Data

Often times, it is necessary to programmatically loop over all of the items in storage.  The loop’s upper bound is determined by the “length” property of the particular storage area.  The stored keys can be retrieved one at a time using the key() method.  key() takes a single integer parameter that acts as an index to the storage area.  An example of looping over each key/value pair in “localStorage” is shown below.  Of course, session storage can be processed in a similar fashion by substituting “sessionStorage” for “localStorage”.

for (var i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  var value = localStorage.getItem(key);
  // do something with the key and value
}

Deleting Stored Data

When data is no longer needed, it should be explicitly removed.  This is especially true for local storage, as it will persist even after the browser is closed.  To delete individual key/value pairs from storage, the removeItem() method is used.  The removeItem() method takes the key to be deleted as its only parameter.  If the key is not present then nothing will happen.  Examples of the removeItem() method are shown below.

localStorage.removeItem("key");
sessionStorage.removeItem("foo");
localStorage.removeItem("bar");
sessionStorage.removeItem("baz");

The delete operator can also be used to remove stored data.  The previous example is rewritten below using delete instead of removeItem().

delete localStorage.key;
delete sessionStorage.foo;
delete localStorage["bar"];
delete sessionStorage["baz"];

While removeItem() is used to delete individual pieces of data, the clear() method is used to delete all stored data.  Usages of the clear() method are shown below.

localStorage.clear();
sessionStorage.clear();

The storage Event

A user can potentially have several instances of the same site open at any given time.  Changes made to a storage area in one instance need to be reflected in the other instances.  The Web Storage API accomplishes this synchronization using the “storage” event.  When a storage area is changed, a “storage” event is fired for any other tabs/windows that are sharing the storage area.  Note that a “storage” event is not fired for the tab/window that changes the storage area.

Storage areas can be changed by calls to setItem(), removeItem(), and clear().  However, not all calls to these methods actually change the storage area.  For example, calling clear() on an empty storage area or removeItem() on a key that does not exist will not change the storage area, and therefore will not fire an event.

The “storage” event object has several fields of interest which are described below.  Following the description of the fields is an example “storage” event handler.

• “key” ― This field is the key argument of setItem() or removeItem(), or null when clear() caused the event to be fired.
• “newValue” ― The “value” argument to setItem() is reflected in this field.  Calls to removeItem() and clear() cause this field to be null.
• “oldValue” ― This field holds the key’s value prior to a call to setItem() or removeItem().  Calls to clear() cause this field to be null.
• “url” ― The “url” field stores the address of the page whose storage area was affected.
• “storageArea” ― The “storageArea” field corresponds to the local or session storage area that was changed.

window.addEventListener("storage", function(event) {
  var key = event.key;
  var newValue = event.newValue;
  var oldValue = event.oldValue;
  var url = event.url;
  var storageArea = event.storageArea;
  // handle the event
});

Example Page

The following code implements a sample page for manipulating local storage.  The page is also available online here.  The example covers the entire local storage API, including the “storage” event.  In order to see the “storage” event in action, the page must be open in at least two separate tabs/windows of the same browser.  The “storage” event will also only work if the page is served over HTTP (i.e. the file:// protocol will not work).

<!DOCTYPE html>
<html>
<head>
  <title>Web Storage Example</title>
  <meta charset="UTF-8" />
  <script>
    "use strict";
    window.addEventListener("load", function(event) {
      var key = document.getElementById("key");
      var value = document.getElementById("value");
      var add = document.getElementById("add");
      var remove = document.getElementById("remove");
      var clear = document.getElementById("clear");
      var content = document.getElementById("content");
      add.addEventListener("click", function(event) {
        if (key.value !== "") {
          try {
            localStorage.setItem(key.value, value.value);
          } catch (e) {
            alert("Exceeded Storage Quota!");
          }
          refreshContents();
        }
      });
      remove.addEventListener("click", function(event) {
        if (key.value !== "") {
          localStorage.removeItem(key.value);
          refreshContents();
        }
      });
      clear.addEventListener("click", function(event) {
        localStorage.clear();
        refreshContents();
      });
      window.addEventListener("storage", function(event) {
        var k = event.key;
        var newValue = event.newValue;
        var oldValue = event.oldValue;
        var url = event.url;
        var storageArea = event.storageArea;
        alert("EVENT:\n" + k + "\n" + newValue + "\n" + oldValue + "\n" + url + "\n" + storageArea);
        refreshContents();
      });
      function refreshContents() {
        var str = "";
        for (var i = 0, len = localStorage.length; i < len; i++) {
          var k = localStorage.key(i);
          var v = localStorage.getItem(k);
          str += "'" + k + "' = '" + v + "'<br />";
        }
        key.value = "";
        value.value = "";
        content.innerHTML = str;
      }
      refreshContents();
    });
  </script>
</head>
<body>
  Key:  <input type="text" id="key" /><br />
  Value: <input type="text" id="value" /><br />
  <input type="button" id="add" value="Add to Storage" />&nbsp;
  <input type="button" id="remove" value="Remove from Storage" />&nbsp;
  <input type="button" id="clear" value="Clear Storage" /><br />
  Contents of Local Storage:<br />
  <span id="content"></span>
</body>
</html>

Things to Remember

• Local storage persists until it is explicitly deleted or the browser’s cache is cleared.
• Session storage persists until it is explicitly deleted or the browsing context is closed.
• Data stored by one browser is not accessible by another browser.  For example, data stored by Chrome is not seen by Firefox.
• Objects should be stored as JSON strings.
• For security reasons, sensitive data should not be stored, especially in local storage.
• Changes to a storage area cause a “storage” event to be fired.
• As with many other HTML5 features, web storage is not yet implemented consistently.

Storage image via Shutterstock

Networking is often regarded to be complicated and very difficult to manage but as it forms an essential role in the day-to-day use of your computer the purpose of this article is to expose a few ‘tips and tricks’ that will serve to improve your computers connectivity and overall performance by showing you how easy it is to take control of Ubuntu 12.04, LTS Precise Pangolin.

So let’s get started …

What is my local IP address

It may be a easy question to begin with, but in a world of complexity it is often the simple questions that get overlooked.

Using the graphical tools:

Right click on the ‘networking icon’ in the top panel of the Ubuntu desktop and choose ‘Connection Information’ as shown below:

The resulting dialogue box will then provide feedback on your current settings.

Using the command line interface:

On the other hand, for those individuals who are beginning to enjoy the power of Terminal or for those of you who use a server (via the Console or Putty or similar).

If you have a wireless based connection, run:

iwconfig

If you have a ‘wired’ connection, run

ifconfig

The results for ‘ifconfig’ will look something like this:

eth0      Link encap:Ethernet  HWaddr 00:1d:92:65:09:e1
          inet addr:192.168.1.100  Bcast:192.168.1.255  Mask:255.255.255.0
          inet6 addr: fe80::21d:92ff:fe65:9e1/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:510 errors:0 dropped:0 overruns:0 frame:0
          TX packets:315 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:80353 (80.3 KB)  TX bytes:38731 (38.7 KB)
          Interrupt:42 Base address:0xa000
lo        Link encap:Local Loopback
          inet addr:127.0.0.1  Mask:255.0.0.0
          inet6 addr: ::1/128 Scope:Host
          UP LOOPBACK RUNNING  MTU:16436  Metric:1
          RX packets:108 errors:0 dropped:0 overruns:0 frame:0
          TX packets:108 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0
          RX bytes:8176 (8.1 KB)  TX bytes:8176 (8.1 KB)

And because the command line provides us with additional opportunities, if you would like to quickly identify all the available ethernet devices on your computer, you can run

ifconfig -a | grep eth

The result will look something like this:

eth0      Link encap:Ethernet  HWaddr 00:1d:92:65:09:e1

Well done, but just before we finish-up I would like to take this opportunity to show you another useful command that can help identify all the network interfaces available to your system. Known as the ‘lshw’ command, this tool will not only detail your ethernet devices but it will also provide a plethora of information on your hardware’s ‘other’ capabilities.

To use this tool, simply run the following command and wait a few seconds whilst Ubuntu quieries your devices:

sudo lshw -class network

And the result will look something like this:

  *-network
       description: Ethernet interface
       product: RTL8111/8168B PCI Express Gigabit Ethernet controller
       vendor: Realtek Semiconductor Co., Ltd.
       physical id: 0
       bus info: pci@0000:02:00.0
       logical name: eth0
       version: 01
       serial: 00:1d:92:65:09:e1
       size: 100Mbit/s
       capacity: 1Gbit/s
       width: 64 bits
       clock: 33MHz
       capabilities: pm vpd msi pciexpress bus_master cap_list rom ethernet physical tp mii 10bt 10bt-fd 100bt 100bt-fd 1000bt 1000bt-fd autonegotiation
       configuration: autonegotiation=on broadcast=yes driver=r8169 driverversion=2.3LK-NAPI duplex=full firmware=N/A ip=192.168.1.160 latency=0 link=yes multicast=yes port=MII speed=100Mbit/s
       resources: irq:43 ioport:d800(size=256) memory:feaff000-feafffff memory:feac0000-feadffff

Sometimes you’ve just ‘gotta’ love the details, but now we know something about our computer we can begin to take control :-)

How do I create a static IP address with the Network Manager

The following instruction shows you how to create a fixed (or static) IP address with the Network Manager.

This approach is best suited to all desktop users who may require the need to keep the functionality of the Network Manager or for those that use netbooks, laptops and and other wireless connections that may require a DHCP based option in the future. Don’t worry, it is all very simple:

Click the network menu on the top panel (the ‘up/down’ arrows icon) and select ‘Edit Connections’.

Alternatively you can choose System Settings > Network > Choose your ‘Network Connection’ from the left hand panel and select ‘Options’.

Now choose the relevant connection and click edit.

For example, if you are using a ‘wired connection’, choose the ‘wired’ tab to find your connection.

In the resulting dialogue box you should:

• Select the ‘IPv4 Settings’ tab and change the ‘Method’ to ‘Manual’.
• Click Add and complete each field with your IP address, network mask and default gateway.Always press the ‘Enter/Return’ when you’ve finished typing each address otherwise the dialogue will fail to accept your new settings and the ‘save’ button will remain inactive/greyed-out.
• Include the IP addresses of the DNS servers. Multiple addresses should be separated by commas.
• Click Save and close the remaining dialogue boxes.

And there you go …

If all is well you should be able to view web sites and/or view your local network but in some situations and depending on your network topology a reboot may be necessary.

To confirm your new settings, simply check your connection settings as shown previously (see above)

But what if I need DHCP again?
If you ever need to return to a dynamically assigned IP address simply re-run the previous steps. Find your current connection, select the ‘IPv4 Settings’ tab and change the ‘Method’ to ‘Automatic (DHCP)’. To finalise this reversal click save and reboot (depending on the network conditions and how the DHCP server is configured).

Disable the Network Manager and ‘hard-code’ a static IP address

This solution explains how to create a fixed (or static) IP address without using the Network Manager.

The Network Manager is a very nice feature, but only suitable for individuals who require dynamically assigned connections or those who require wireless connectivity. Yes, it is true to say that these are both very popular in homes and offices throught the world but for those of us who use and prefer the benefit of a ‘wired connection’ using the Network Manager does come at the cost of performance. So this solution uses the traditional approach to ‘hard-coding’ your network connection and it is most suitable to those individuals who demand maximum performance or absolute stability.

By using this approach you should note that we will not be removing the Network Manager, merely disabling it with the intention to capitalise on the performance gains by by-passing or side-stepping this device. These performance gains will not only be noticed in terms of network speed but also in terms of the computer in general.

Again, don’t worry, the process to disable the Network Manager is very simple but it will require us to run various ‘commands’ in Terminal in order to complete some steps.

So let’s begin by making a backup of our original file.

In Terminal type:

sudo cp /etc/NetworkManager/NetworkManager.conf /etc/NetworkManager/NetworkManager.conf.bak

This will serve to back-up our original file to ‘/etc/NetworkManager/NetworkManager.conf.bak’. Hopefully you will not need it, but if you ever need to restore the original file simply open Terminal and reverse the command like so: ‘sudo cp /etc/NetworkManager/NetworkManager.conf.bak /etc/NetworkManager/NetworkManager.conf’ and reboot.

And with the confidence that we are fully backed-up we shall now proceed to disable the Network Manager.

In Terminal, type:

sudo gedit /etc/NetworkManager/NetworkManager.conf

This will open the ‘NetworkManager.conf’ file in our text editor.

Now change:

managed=false

to

managed=true

So it looks like this:

When done, save the file and close it.

You can re-enable the network manager at any time by simply reversing the steps shown above or by restoring your back-up file. Remember to reboot in order to apply these changes.

Now we have successfully disabled the Network Manager we can proceed to create our Static IP address by making some direct changes to the ‘interface’ file; but with safety in mind let’s begin by making a backup of our original file.

In Terminal and type:

sudo cp /etc/network/interfaces /etc/network/interfaces.bak

This will back-up our original file to /etc/network/interfaces.bak. Again, it is not expected that we will need it but if you ever need to restore it open Terminal and reverse the command like so: sudo cp /etc/network/interfaces.bak /etc/network/interfaces

Now lets add our static IP address.

In Terminal type:

sudo gedit /etc/network/interfaces

Authenticate yourself in the usual way and then replace the file contents as shown below, where xxx represents values relevant to your needs:

auto lo
iface lo inet loopback
auto eth0
iface eth0 inet static
	address 	xxx.xxx.xxx.xxx
	netmask 	xxx.xxx.xxx.xxx
	network 	xxx.xxx.xxx.xxx
	broadcast 	xxx.xxx.xxx.xxx
	gateway 	xxx.xxx.xxx.xxx

And to help you out, here is an example with an explanation of the values concerned:

auto lo
iface lo inet loopback
auto eth0
iface eth0 inet static
	address 	192.168.1.100 	(this is my computers IP address)
	netmask 	255.255.255.0 	(this is my subnet mask)
	network 	192.168.1.0	(this is my network base address)
	broadcast 	192.168.1.255	(this is my broadcast address)
	gateway 	192.168.1.254	(this is my gateway/router's ip address)

When complete, simply save and close the file and reboot your computer to complete these steps.

We are re-booting our computer at this point in order to ‘dis-engage’ the Network Manager, and once complete you can always re-configure your IP address at any time by making the necessary changes to the ‘interfaces’ file (shown above) and using the following command to restart your networking service: ‘sudo /etc/init.d/networking restart’.

After you restart your computer you will discover (visually) that nothing has changed but as a consequence you should be experiencing a ‘more’ responsive computer and network connection.

Should you ever want to re-enable the Network Manager. Simply reverse the steps we have taken above and/or restore you back-up files and reboot and as we created them with the ‘cp’ or copy command – unless you delete them, your original backup files will always remain for future reference.

Create Virtual Network Adapters (add more than 1 IP address to a single ethernet card)

In some situations this can be very useful and as an extension to our previous solution of ‘disabling the network manager and hard-coding a static IP address’ I will now show you how to assign more than one IP address to the same ethernet card:

In Terminal type:

sudo gedit /etc/network/interfaces

Authenticate yourself and then replace the file contents like so, where xxx represents values relevant to your needs:

auto lo
iface lo inet loopback
auto eth0
iface eth0 static
	address 	xxx.xxx.xxx.xxx
	netmask 	xxx.xxx.xxx.xxx
	network 	xxx.xxx.xxx.xxx
	broadcast 	xxx.xxx.xxx.xxx
	gateway 	xxx.xxx.xxx.xxx
auto eth0:0
iface eth0:0 static
	address 	xxx.xxx.xxx.xxx
	netmask 	xxx.xxx.xxx.xxx
	gateway 	xxx.xxx.xxx.xxx

And to make this as simple as possible, here is an example:

auto lo
iface lo inet loopback
auto eth0
iface eth0 static
	address 	192.168.1.100
	netmask 	255.255.255.0
	network 	192.168.1.0
	broadcast 	192.168.1.255
	gateway 	192.168.1.254
auto eth0:0
iface eth0:0 static
	address 	192.168.1.101
	netmask 	255.255.255.0
	gateway 	192.168.1.254

By doing this I will be adding two IP addresses to my a single ethernet card. It will not only have the IP address of 192.168.1.100 but it will also have the alternative address of 192.168.1.101 (as a virtual instance).

The trick is to follow the virtual naming scheme (i.e. eth0:0, eth0:1, eth0:2 etc …) and to ensure that every instance maintains a unique IP address. In this way you can create as many ‘instances’ of an IP address as required.

To illustrate this point, let’s add a third IP address to our example:

auto lo
iface lo inet loopback
auto eth0
iface eth0 static
	address 	192.168.1.100
	netmask 	255.255.255.0
	network 	192.168.1.0
	broadcast 	192.168.1.255
	gateway 	192.168.1.254
auto eth0:0
iface eth0:0 static
	address 	192.168.1.101
	netmask 	255.255.255.0
	gateway 	192.168.1.254
iface eth0:1 static
	address 	192.168.1.102
	netmask 	255.255.255.0
	gateway 	192.168.1.254

When complete, remember to reboot your computer to apply the changes or open Terminal and type:

sudo /etc/init.d/networking restart

You can then run ‘ifconfig’ to view your new settings.

Have fun ..!

Change your computer’s hostname

You may like your current computer name, or you may want to change it.

In this short recipe I will show you how to view and change your computer name with relative ease …

In Terminal type:

sudo gedit /etc/hostname

The file will probably look something like this:

ubuntu-computername

To change the name of your computer, simply delete the existing content and replace as required.

Remember, the actual name can be anything your want as long as you remember some basic principles:

• Desktops generally use a singular name (as shown above) whereas all servers or ‘desktops acting as servers’ should be in the format of computername.computerdomain.suffix.
• On a local network computers should refrain from using the standard or typical internet based suffix or TLD unless your local DNS can account for such similarities.
• Use ‘internet friendly’ names and do not use a computer name that already exists on your network.
• Do not use spaces or non-internet friendly characters.

Once complete, simply choose ‘save’, ‘close’ the file and reboot your computer to see the changes.

Your new computer name will be in the top-left hand side of the login screen but if you missed this or need to confirm your current or new hostname at any time.

Open Terminal and type:

sudo hostname

And the result should reflect the changes you made …

Managing the Hosts file

The hosts file file consists of a list of IP addresses and corresponding hostnames. Most users may never need to touch this area of their computer but there maybe an occasion when you need to edit the hosts file on your machine. This can because of any number of reasons (i.e. reversing the effect of malicious activity) or it can be because your are trying to make your life that little ‘quicker’ buy ‘hard-coding’ the address of an internal or external web site. Similarly, if your network contains computers whose IP addresses that are not listed in an existing DNS record, then it is recommended that you add them to the hosts file. So with this in mind I will now show you how to manage you hosts file.

Before you begin, you can make a back-up of this file by simply typing the following command in to Terminal:

sudo cp /etc/hosts /etc/hosts.bak

Now, to proceed and customise your hosts file simply return to the command line and type:

sudo gedit /etc/hosts

A typical desktop file will look like this (simply substitue the example values with those relevant to your computer):

127.0.0.1			localhost
127.0.1.1			ubuntu-computername
# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

However, having said that and just for the record, for the ‘server’ or ‘desktop server’ version of the same file should look more like this:

127.0.0.1       localhost.localdomain   localhost
192.168.1.100 	ubuntu-computername.ubuntu-domainname.lan  ubuntu-computername
# The following lines are desirable for IPv6 capable hosts
::1     localhost ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

You will notice that my examples include the IPv6 instruction and this is entirely at your discretion as it depends on whether your network supports it.

For example, you may ignore these values (not include them or comment them out by placing a ‘hash’ character at the beginning of the line) like so if your computer does not use IPv6.

# The following lines are desirable for IPv6 capable hosts
#::1     ip6-localhost ip6-loopback
#fe00::0 ip6-localnet
#ff00::0 ip6-mcastprefix
#ff02::1 ip6-allnodes
#ff02::2 ip6-allrouters

Of course, disabling IPv6 is optional and can sometimes improve performance but if you are in doubt, simply ignore them (but as they sometimes say in ‘old blighty’ – ‘don’t fix what ain’t broke’).

So getting back on track …

In your hosts file you may want to include a list or pre-identified servers and workstations in order to speed-up name resolution like so:

192.168.1.200		servername1 www servername1.localdomain.lan
192.168.1.200		servername2 mail servername2.localdomain.lan

In my example I have included an alias in addition to the actual names – i.e. servername1 is also known as www and servername2 is also known as mail. You do not need to do this as my other examples will show.

Windows (and Mac) users should notice that this process very similar to customisng the ‘hosts’ file on any Windows/Mac based operating system and the resulting file could look like this:

127.0.0.1			localhost
127.0.1.1			ubuntu-computername
# PUT YOU COMMENT AFTER A HASH (#) FOR REFERENCE - NOT REQUIRED BUT USEFUL
192.168.1.200		www.website1.com
192.168.1.201		www.website2.com
# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

Consequently, my computer will now use the IP address for www.website1.com instead of searching a DNS record thereby ensuring that my ability to view the website in question would be quicker than before.

Taking this one step further … and by giving it a little twist.

For those of you who wish to excercise some ‘parental power’ you could easily use this as a way to block direct access to some ‘unwanted web sites’ by sending someone who expects to go to www.website1.com to www.website2.com, like so:

#192.168.1.200	www.website1.com
192.168.1.201		www.website1.com
192.168.1.201		www.website2.com
192.168.1.202		www.website3.com
192.168.1.123		www.website4.com
192.168.1.167		www.website5.com

Notice I have commented out the real address of website1 with a hash (#) and that both website1 and website 2 now have the same IP address … (the IP address being the actual address of website2)

It isn’t a perfect of solution by any means but it is food for thought and can serve as a starting point for future development ;-)

How to re-configure DNS resolution

The purpose of this section is to show you how to configure the appropriate nameserver to use when resolving IP address to hostnames and vice versa. It is not intended to explain how to configure the system as a name server as this is something I will be covering in a future article. You should only affect this file if you are not using the Network Manager and want to use a static IP address.

The resolv.conf file is the resolver configuration file and it is used to configure workstation or server access to the Internet Domain Name System (DNS). This file defines which nameservers to use and in what order they are tried. You should therefore put the most reliable server first. It is convention that up to three name servers are supported. However, if no nameserver option is given, the resolver will attempt to connect to the name server on the local host.

Resolv.conf still does this, but with the release of the Precise Pangolin a few things have changed, and regardless as to whether you are running a desktop or a server your system is probably running the resolveconf program:

‘Resolveconf’ is a small program that resides in ‘/etc/resolvconf’ that dynamically modifies the nameserver information on boot. It is a useful tool, but for our purposes it can be disruptive, so we are going to work around it by simply adding a new entry to our ‘/etc/network/interfaces’ file:

In Terminal type:

sudo gedit /etc/network/interfaces

Now add the following nameserver line to your file, changing XXX to something more applicable to your needs:

dns-nameservers xxx.xxx.xxx.xxx xxx.xxx.xxx.xxx

Similar to the example shown above here is the new file using Google’s public nameservers:

auto lo
iface lo inet loopback
auto eth0
iface eth0 static
	address 	192.168.1.100
	netmask 	255.255.255.0
	network 	192.168.1.0
	broadcast 	192.168.1.255
	gateway 	192.168.1.254
        dns-nameservers 8.8.8.8 8.8.4.4

When complete, click ‘save’, then ‘close’ the file and reboot to apply the changes.

On reboot, you can see that the new nameserver information has now been applied to our ‘resolve.conf’ file by opening Terminal and typing:

cat /etc/resolv.conf

Which may look something like this:

# Dynamic resolv.conf(5) file for glibc resolver(3) generated by resolvconf(8)
#     DO NOT EDIT THIS FILE BY HAND -- YOUR CHANGES WILL BE OVERWRITTEN
nameserver 8.8.8.8
nameserver 8.8.4.4
nameserver 127.0.0.1

So having made your changes, to query the DNS capabilities of your system, simply return to the command line and type:

nslookup www.sitepoint.com

or alternatively try

dig www.sitepoint.com

And that’s it for now … but most of all, have fun :-)

So until next time …

I hope that you continue to enjoy using Ubuntu 12.04 LTS Precise Pangolin.

In my series on Putting a Stop to Abusive Clients, I’ve talked a lot from the seller’s perspective. But before I put the final wraps on the series, I’m going to take a slight detour to discuss things from the buyer’s side of the fence. Let’s talk about how to get hired.

Over the past few days, I’ve had to post two different job opportunities; one for a full-time sales rep, and the other for some contract web work. The responses I’ve gotten have been interesting, to say the least.

One of the things I deliberately do is include both an email and my direct phone number as contact points. Which you chose may very well mean the difference between getting hired and getting ignored.

Within minutes of posting the ad for the contract position, I received a phone call. Shortly afterwards, I received a second call from another firm. Both took the time to find out my objectives and what I’m trying to accomplish before talking up their firm.

The rest sent an email with some variation of “check out my website“ and “call me back.”

Who do you suppose I’m considering?

Hiding behind Web 2.0

Recently, my son’s scoutmaster left a voice mail message about an upcoming Eagle ceremony for one of the other boys in his troop, and that his attendance was “mandatory.” The only problem was, all he gave us was the name of the church where the ceremony was being held … no address, no city, nada.

After a Google search turned up just one church with that name several cities over, I asked my son to confirm if this was indeed the right church. So on the day of the ceremony, he made phone calls and left voice mail messages, trying to find out. No one, not the scoutmaster, his patrol leader nor any of the other boys in his troop responded. Finally, out of desperation, he posted the question on Facebook.

Within 15 minutes, three boys replied. I fear this does not bode well for the future of our youth.

Too often, we use Web 2.0 tools to avoid direct interaction. For instance, it’s easy to hide behind marketing to avoid selling. Don’t fall into that trap. When I give you the choice, pick up the phone and call me.

Why would I say that? Two reasons. One: I’m really, really busy. When you call me, you get first-mover advantage, because you’ve taken a task off my all-too-busy plate—the need to follow up on all the emails responses I received. I really don’t have time to “check out your website,” and then “give you a call.” Besides, your website probably contains the same generic fluff as everyone else’s. How about you demonstrate why you’re different and why I ought to hire you? You can do that by picking up the phone and having an actual conversation with me.

Reason Number Two is: it shows me you have initiative as well as people skills. You see, if I really have a need, I’m going to want to talk with you to determine if you are someone who can fill that need. If I’m the one hiding behind web 2.0 tools, asking you to communicate with me via email or Facebook, I may not be a genuine prospect at all. I might be someone who’s merely “interested,” or not far enough along in the buying cycle to waste valuable time with. But if I’ve offered my phone number, than means I’d like to speak with a living, breathing person. That person could be you.

Here’s another tip: When I ask you to follow up if you haven’t heard back from me by such-and-such date, that might be a test. Calling me back shows me you want the gig.

What I didn’t mention is that there was a third firm that called; but he got the short straw—my voice mail—and never called back. If you have a genuine lead, keep pursuing it, even if they aren’t returning your calls. If you saw my desk, you’d know why I didn’t call you back.

Image credit

HTML5 keeps on stunning the Internet community with revolutionary web features. One of the key HTML5 enhancements is the advanced video support. With a new HTML5 standard, users don’t need any special plugins to stream video in web browsers both on PC or any portable device. Still in spite of the growing popularity of HTML5 standard, most web developers and designers are reluctant to migrate to the new markup language, maybe because of the absence of a complete HTML5 specification or lack of practical information on HTML5 сoding. In this post, I’d like to take a deeper look at HTML5 video element and explain its main points in plain English.

<video> tag vs. <object> tag

The <object> tag referrs to an embedded element within a web page: audio, video, Java applet, ActiveX, PDF, or Flash. The markup for this tag is fairly cryptic. Thus, if you wanted to embed a Flash video into a web page, you had to insert the following code:

<object id=0 type="application/x-shockwave-flash" data=player_flv_maxi.swf width=420 height=240
<param name="movie" value=player_flv_maxi.swf />
<param name="wmode" value="opaque" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="autoplay" value="false" />
<param name="autoload" value="false" />
<param name="FlashVars" value="flv=Wildlife.flv&width=420&height=240&autoplay=0&autoload=0&buffer=5&buffermessage=&playercolor=464646&loadingcolor=999898&buttoncolor=ffffff&buttonovercolor=dddcdc&slidercolor=ffffff&sliderovercolor=dddcdc&showvolume=1&showfullscreen=1&playeralpha=100&title=Wildlife.flv&margin=0&buffershowbg=0" />

To play this, users can’t do without a Flash player plugin which is ndispensable for all modern browsers except Google Chrome since the player is already pre-installed in the browser.

HTML5 introduces the new <video> tag which replaces the former <object> tag for Flash video embedment. The benefits of using HTML5 <video> tag are numerous. It brings not only minimalism and simplicity of video code, but also the ease of search bots to properly index your video file. Website developers can add a video to a page in the same way they would add an image, since the basic markup necessary for </video><video> in HTML5 is refreshingly simple and straightforward:

</video><video width="320" height="240" controls autoplay poster="video.jpg">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 Your browser does not support the video tag.
</video>

Such code can be easily composed even by a not tech-savvy specialist. In the simplest way the code may be reduced to:<video src="movie.mp4" controls width="320" height="480"></video>

Video Attributes

As you can see, the <video> tag is used just like any other tags in HTML. Between opening and closing tags you can place various attributes to get the video player you want.

Several of the attributes are boolean (e.g. controls, loop, muted) – no value is required. So by including or omitting them, you set the value “true” or “false” respectively.

HTML5 specialists also recommend inserting the following line within video tag:
Video not playing? <a href="pics/video.mp4">Download the file instead.

Controls

The browsers supporting HTML5 video have the video players already built-in. All of them include a standard set of controls: Play, Pause, Seek, Volume. However, each browser provides its own look for the video player: from the minimal approach of Chrome and IE to the more elaborate controls of Firefox, Opera and Safari.

If you want to keep controls the same across all browsers, or integrate the player with our website design, you can create our own controls from scratch. Here are some useful resources:

Video source

The <video> tag allows multiple <source> elements which can link to one and the same video in different formats, for example:

       <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
       <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
       <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>

As you see, the source tag has two attributes, src and type. The “type” attribute specifies the MIME type and possibly a list of codecs, which helps the browser to determine whether it can decode the file. By default, the browser will use the first recognized format. All modern browsers support at least one HTML5 video format.

Browser Support

For up to date information on browser support, you can check out the YouTube HTML5 Page

Codecs

There’s a long debate on which video formats/codecs to pursue and consensus hasn’t been reached yet. As a result, in the draft of HTML5 specification any references to a particular codec were removed. Instead, the following creteria to the video codec were put forward:

Three codecs were suggested for HTML5 video element: H.264, OGG Theora, and WebM VP8. Here are their advantages and disadvantages.

H.264

Pros
It gives good quality video and small file sizes. It outputs excellent video both for low-bandwidth, low-CPU mobile devices and high-bandwidth, high-CPU modern PCs and everything in between. It’s free for Internet end-users.

Cons
The underlying compression mechanisms in H.264 are patented and adopters have to pay royalties for commercial use to a licensing consortium called MPEG-LA.

OGG Theora

Pros
It’s a royalty-free codec and is not encumbered by any known patents other than the original VP3 patents, which have been licensed royalty-free.

Cons
Theora generates high quality videos with comparatively larger file sizes. Plus it is a lot harder to find tools to convert to OGG Theora.

WebM VP8

Pros
In 2010, Google acquired On2 – the company behind VP8, and published the video codec specification as open source, and all the patents as royalty-free.

Cons

While Google claims that WebM has the highest video quality of all the web codecs, most independent sources find that either H.264 is slightly better or there is very little difference between the two. The problem is that it can be very difficult to find tools to encode video to WebM.

Until a complete consensus on video codecs issue is reached, web developers have to convert video to all these three formats. There’s some helpful software which deal with HTML5 video preparing:

Some webmasters also combine HTML5 <video&ht; element with Flash-based code, so that a video could be played in any browser, including old IE versions.

No doubt, HTML5 video still has a lot of benefits if compared to Flash. However, it’s still debatable whether H.264, WebM and Theora OGG will remain the default video formats supported in the video element. And since the specification of HTML5 video formats depends a lot on the decisions of Apple, Microsoft and Google corporations, the future of the whole new standard seems vague but still promising.

Perhaps I’m showing my age but is it really 20 years since Wolfenstein 3D exploded onto the PC gaming scene? To celebrate that momentous occasion, the full game can now be played online within your browser at:

wolfenstein.bethsoft.com

(Note the game is recommended for those over 12 and banned in Germany and several other countries).

The site states it’s compatible with IE9, Firefox, Chrome and Safari — although Opera seems to work if you’re not too bothered by a few graphical glitches. The game is mouse-enabled (set it within the configuration options) although few PCs had mice in 1992 and you’ll find keyboard control best.

Wolfenstein was released as DOS shareware in 1992. The web was largely unknown and bulletin boards were the reserve of rich geeks but, despite a lack of social networks and online file sharing, word spread and so did thousands of 720kB floppy disks. Suddenly, there was a reason to use a PC for more than Lotus-123 spreadsheets.

So why the fuss? Wolfenstein started the 3D first-person gaming genre. In 1992, there were relatively few 3D games and most resorted to isometric graphics (Marble Madness, Paperboy), wire-frame (Star Wars, Elite, Starglider) or faked overlaid 2D sprites (Outrun, Chase HQ, Space Harrier). True 3D games were available in the arcades (I-Robot, Hard Drivin’) but they took themselves a little too seriously and couldn’t be replicated on the 16-bit PCs of the day.

I remember playing Wolfenstein for the first time; it changed my perceptions about what could be achieved on a PC. While it looks basic today, having the freedom to explore realistic 3D rooms blasting stuff was revolutionary — and shouldn’t have been possible given the hardware limitations.

More importantly, the game was fun; you played a prisoner trying to escape from a Nazi-controlled castle in World War II. The VGA gore was amusing and you could defeat a robotically-enhanced Hitler at the end of the game. That said, not everything was perfect. The walking movement was unrealistically smooth and the corridor map was always rectangular — combine that with may hours game play and Wolfenstein remains the only game which made me feel genuinely queasy!

iD Software’s success with Wolfenstein led to Doom a year later — it’s fair to say you wouldn’t be playing Call of Duty today if it weren’t for those two ground-breaking games.

A version of Wolfenstein was released on almost every computer and gaming platform (even Nintendo permitted the gore-fest on their family-friendly consoles, although iD were instructed to replace guard dogs with large rats). The browser version if faithful to the original DOS version and permits you to play every level. Actually, it probably plays and sounds better than it did on the latest 386 PCs we had in 1992.

Technically, the game is implemented using JavaScript and HTML5 audio. I first thought it was rendered using a canvas element but, thanks to further investigation by Matt Vaughan (below), it’s actually 320 horizontally-stacked DIVs which have their background, vertical size and top location modified as you move around. It’s clever but slightly unusual solution. The full page weight is a little over 800kB of mostly uncompressed JavaScript — impressive given that most sites use that for their home page.

But who cares about the technical details … Happy Birthday Wolfenstein 3D and thanks for 20 great years of great gaming.

In my recent article, we discussed 7 Reasons to Consider SVGs Instead of Canvas. SVGs are ideal if you require a scalable diagram such as a chart or logo which can be altered or animated using JavaScript DOM methods.

So … what are SVGs and how do we use them? This is the first part in a series articles about the vector image format.

What Are SVGs?

SVGs are vector graphics. Rather than defining the color of each pixel like you would in a bitmap (JPEG, PNG, GIF, BMP etc.), vector graphics define lines and shapes, e.g. draw a black line from co-ordinate 0,0 to 100,100. This has a number of advantages: vectors are easy to modify, generally require smaller files and are scalable to any dimension without losing quality — which makes them ideal for responsive web design. Bitmaps remain the best choice for photographs or very complex images (note that SVGs can include embedded bitmaps).

SVG is a royalty-free web standard maintained by the W3C SVG Working Group. Version 1.0 of the technology was originally proposed in 1999. Version 1.1 is the most recent standard with version 2.0 expected in 2013.

There are a couple of other flavors: SVG Tiny and SVG Mobile. These are simplified profiles or subsets of the full SVG specification which target devices with reduced computational and display capabilities. These standards largely relate to how rendering engines parse the image; an SVG 1.1 file can be rendered on a device which supports SVG Tiny but some effects such as gradients and opacities would not be applied.

How are SVGs Defined?

SVGs are declared using eXtensible Markup Language (XML). It uses tags like HTML — the following code draws a white circle with a black border:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

Be aware that XML is stricter than HTML. You cannot, for example, omit a closing tag since this will make the file invalid and the SVG will not be rendered.

The W3C SVG1.1 specification defines 14 main features:

1. Basic shapes: straight lines, polygons, circles, ellipses, and rectangles with or without rounded corners.
2. Paths: outlined or filled paths containing curved or straight lines.
3. Text: on straight or curved paths in any direction.
4. Painting: fills and outlines using solid colors, gradients, patterns, transparency, and markers (line terminators such as arrow heads).
5. Color: fill and stroke properties defined using standard 3 or 6-digit hex or rgb values.
6. Gradients and patterns: CSS3-like gradient declarations or bitmap backgrounds.
7. Clipping, masking and compositing: using elements to outline regions which can be painted.
8. Filters: effects applied to all elements within a container, e.g. blurring, lighting, color adjustments, etc.
9. Linking: hyperlinks to other documents.
10. Interactivity: attaching event handlers using JavaScript.
11. DOM Scripting: accessing and manipulating SVG elements using the Document Object Model.
12. Animation: built-in animations using Synchronized Multimedia Integration Language (SMIL).
13. Fonts: text glyphs defined in an SVG file which can be used as a standard font.
14. Metadata: titles, descriptions, subjects, creators and other properties about the SVG image.

Cascading Stylesheets in SVGs

SVGs also support embedded or external CSS rules. Like HTML, the selectors can target tag types or IDs and classes assigned to specific elements. CSS properties and values generally follow element attributes. For example, this CSS renders every circle in the SVG with the same white fill and black border color:

circle
{
	stroke: #000;
	fill: #fff;
}

SVG Creation Tools

Creating SVGs in a text editor is possible but it’s a slow process, error-prone and not much fun. Fortunately, there are several open source and commercial tools which allow designers and non-programmers to easily create SVG images:

• Inkscape
• OpenOffice or LibreOffice Draw
• svg-edit

Therefore, a design team could create a great-looking chart which a programmer can modify by applying real data to specific elements.

However, note that some graphics packages may not create the most optimal code or apply their own XML extensions.

SVG Browser Support

Although the technology has been available for more than a decade, SVG use within browsers was held back by Internet Explorer which first provided support in IE9. Today, most desktop and mobile browsers can handle SVGs and it is a recognized HTML5 standard.

Browser implementations vary, but SVGs can either be:

• viewed as a separate file directly in a web browser.
• embedded as an XML section within an HTML page.
• defined as an external page resource within img, object or the old embed tags (or as an iframe, although that’s effectively viewing the SVG file)
• set as background image in CSS.

There are a number of plug-in and shim options if you require SVG support in Internet Explorer 8.0 and below. Several fallback to Vector Markup Language (VML); a technology used in Microsoft products which influenced the SVG standard:

• Raphaël — JavaScript/VML
• AmpleSDK — JavaScript/VML
• svgweb — JavaScript/Flash
• Batik — Java toolkit

SVG Performance in Browsers

SVG XML must be parsed to render images on-screen and represented in memory as a Document Object Model. As with HTML pages, performance will be affected if you attempt to move or manipulate SVGs containing a large number of elements. In extreme cases, the redraw will be noticeable.

For this reason, it’s often preferable to use the HTML5 canvas tag for fast action games with hundreds of animated items. However, you may be able to adopt SVGs for some aspects, e.g. a player’s spaceship could be a simple SVG which can be moved, rotated, scaled and warped over a canvas-generated background.

SVGs and Accessibility

Owing to their XML data structure, SVGs provide better accessibility than bitmap images. At a basic level, meta data, short text and long text alternatives can be applied to any SVG image.

That said, screen reader support is poor. SVGs were not considered a viable browser technology until the release of IE9 so vendors did not consider them a priority. The situation will undoubtedly improve.

In the short term, you could consider transforming SVG XML into a text-based alternative using XSLT.

SVGs and Search Engine Optimization

Unlike bitmaps, XML is inherently machine-readable so static SVG files can be read, parsed and indexed by search engine bots. Google has been indexing SVG content since August 2010 and results can be found in the standard and image search systems.

Replacing a few PNGs with SVGs is unlikely to improve your rankings. However, if you’re displaying data as images without textual fall-backs, switching to SVGs could offer an SEO boost.

In my next SVG article we’ll create our first images without the use of a graphics package!

A console is a software artifact for reading line-oriented textual input from the keyboard and writing line-oriented textual output to the screen. Part 1 of this two-part series introduced you to a console library for embedding a console in a web page, and demonstrated the usefulness of such a console via a browser shell. Part 2 shows you how the console library is implemented.

Discover how Console Works

The console library is fairly complete, but you might want to extend it with new capabilities (e.g., echo asterisks while inputting a password). Alternatively, you might want to improve performance or implement error checking. Regardless of your purpose, you’ll need to understand how the library works. The first step in gaining this knowledge is to grasp the library’s overall architecture. Listing 1 presents an overview.

var Console =
{
   init: function(canvasName, numCols, numRows)
         {
         },
   clear: function()
          {
          },
   getLine: function(callback)
            {
            },
   echo: function(msg)
         {
         },
   render: function()
           {
           },
   writeChar: function(ch)
              {
              },
   scroll: function()
           {
           }
}

Listing 1: The console library’s skeletal structure

Listing 1 reveals a global object named Console consisting of seven function properties. The first four properties comprise the public API, whereas the last three properties should be considered private and not accessed. This list of properties is far from complete because the init(canvasName, numCols, numRows) function introduces additional properties.

Discover init(canvasName, numCols, numRows)

Listing 2 presents init(canvasName, numCols, numRows).

init: function(canvasName, numCols, numRows)
      {
         var canvas = document.getElementById(canvasName); Console.numCols = numCols; Console.numRows = numRows; Console.ctx = canvas.getContext("2d"); Console.ctx.font = "20px/20px monospace"; Console.ctx.textBaseline = "top"; Console.charWidth = Console.ctx.measureText("m").width; Console.charHeight = 20; canvas.width = Console.charWidth*numCols+10; canvas.height = Console.charHeight*numRows+10; Console.buffer = document.createElement("canvas"); Console.buffer.width = canvas.width; Console.buffer.height = canvas.height; Console.bufferCtx = Console.buffer.getContext("2d"); Console.bufferCtx.font = "20px/20px monospace"; Console.bufferCtx.textBaseline = "top"; Console.screen = new Array(numRows); for (var row = 0; row < numRows; row++) Console.screen[row] = new Array(numCols); Console.keyQueue = new Array(); function keyDown(event) { // This function is called by all browsers for backspace. if (event.keyCode == 8) // backspace? { Console.keyQueue.push("\b"); // The following code is needed by Chrome to prevent backspace // from moving back in page history. event.preventDefault(); } } canvas.addEventListener("keydown", keyDown, true); function keyPress(event) { if (event.keyCode == 8) { // The following code is needed by Opera to prevent backspace // from moving back in page history. event.preventDefault(); return; } if (event.keyCode == 13) // return? { Console.keyQueue.push("\n"); return; } var ch = (event.keyCode == 0) ? event.charCode : event.keyCode; if (ch >= 32 && ch < 127) Console.keyQueue.push(String.fromCharCode(ch)); } canvas.addEventListener("keypress", keyPress, true); canvas.tabIndex = 0; // Place canvas in tab order. canvas.focus(); // Give keyboard focus to canvas. Doesn't work on // Internet Explorer. Console.cursorOn = true; Console.cursorCounter = 0; Console.cursorCounterMax = 5; Console.line = ""; Console.clear(); }

Listing 2: Initializing the console library

Listing 2 first obtains a reference to the named <canvas> element and saves the number of columns and number of rows in Console properties for use by other functions. It then obtains a context for drawing on this canvas, and initializes this context to a 20-pixel size monospace font. The text baseline is set to the top of the font so that a character’s coordinates are relative to its upper-left corner.

Now that the font has been specified, its character width and height are calculated so that the characters can be positioned properly on the canvas. This information is then used to calculate the width and height of the canvas. An extra 10 pixels is added to the width and height so that a five-pixel border surrounds the canvas (and prevents the cursor from being invisible on the bottom row when viewed in Internet Explorer).

The next few lines create and initialize a buffer to support double buffering. The goal is to avoid flicker by drawing into the buffer and then copying the buffer contents to the canvas. Various blog posts (e.g., http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering) suggest that current browsers support double buffering automatically, whereas older browsers typically don’t.

A two-dimensional screen array for storing characters that are echoed to the console is now created. JavaScript implements a two-dimensional array as a one-dimensional row array of one-dimensional column arrays. The Array object is used to create the row array and then, for each row element, a column array whose reference is assigned to the row array element.

Although each row in this table could potentially store a different number of columns (which is known as a ragged array), I’ve chosen to fix the number of columns to the value passed to Array‘s constructor. An element in the Screen array is accessed via syntax Console.screen[row][col] – row and column indexes are zero-based.

Moving on, the Array object is used to create a keyQueue array for storing character and special keystrokes (e.g., newline). This array behaves as a queue in which keystrokes are added at one end and removed at the other. Code that adds keystrokes to this queue is contained in a pair of event-handling functions that are registered with the canvas to respond to key-down and key-press events.

The key-down event handler responds to the backspace key only. I would have preferred to handle this key via key-press, but that event handler is not called when backspace is pressed in Internet Explorer, Chrome, or Safari contexts. After adding \b to the queue, key-down executes event.preventDefault() to prevent the current page from being replaced by the previous page in Chrome’s page history.

The key-press event handler also responds to the backspace key for Firefox and Opera. It ignores this key under these browsers (it would not be a good idea to add a second \b code to the queue), but executes event.preventDefault() to prevent the current page from being replaced by the previous page in Opera’s page history.

The key-press event handler also responds to the Enter/Return key by adding a newline character to the queue, and responds to keys whose codes range from 32 through 126 by calling String‘sfromCharCode() function on the code and adding the equivalent character to the queue. On Firefox, keyCode contains 0 for a character key (e.g., A), and the appropriate code must be obtained fromcharCode.

HTML provides a tabindex attribute and a tabIndex DOM property for placing elements into tab order. Zero is assigned to the canvas’s tabIndex property for this purpose. Next, the canvas’sfocus() function is invoked to give this element the keyboard focus. Although focus is given on Firefox, focus is not given on Internet Explorer — you must press the Tab key once or click the mouse on the canvas.

The canvas manages a cursor via cursorOn, cursorCounter, and cursorCounterMax properties. The cursor is visible when true is assigned to cursorOn (the default value), and the cursor remains visible until cursorCounter reaches cursorCounterMax, at which point it is reset to 0. It then becomes invisible and remains as such for the same duration.

There are two final tasks for init(canvasName, numCols, numRows) to perform. First, it assigns the empty string to the line property, which is a buffer for storing characters until Enter/Return is pressed. Second, it invokes the clear() function to clear the console and reset the location of the cursor to the upper-left character position.

Discover clear()

Listing 3 presents clear().

clear: function()
       {
          for (var row = 0; row < Console.numRows; row++)
             for (var col = 0; col < Console.numCols; col++)
                Console.screen[row][col] = " ";
          Console.row = 0;
          Console.col = 0;
          Console.render();
       }

Listing 3: Clearing the console

Listing 3 clears the console by assigning a space to each screen array element. (Although not very performant, I’m emphasizing clarity. I could probably speed up the code by leveraging Array‘ssplice() function.) It then resets the current cursor position (indicated by Console‘s col and row properties) to the upper-left character position, and renders screen‘s contents onto the canvas. (I discuss render() later.)

Discover getLine(callback)

Listing 4 presents getLine(callback).

getLine: function(callback)
         {
            Console.render(); // update cursor
            if (Console.keyQueue.length == 0)
            {
               if (Console.line.length == 0)
               {
                  if (callback != undefined)
                     callback();
               }
               return null;
            }
            var ch = Console.keyQueue.shift();
            if (ch == "\b") // handle backspace
            {
               if (Console.line.length != 0)
               {
                  Console.line = Console.line.substr(0,
                                                     Console.line.length-1);
                  Console.echo(ch);
               }
               return null;
            }
            Console.echo(ch);
            if (ch == "\n") // handle newline
            {
               var temp = Console.line;
               Console.line = "";
               return temp;
            }
            else
               Console.line += ch;
            return null;
         }

Listing 4: Getting a line of input

Listing 4 describes a polling function that continually checks for input and processes this input one character at a time. The first task is to show or hide the cursor, and this task is accomplished by invoking Console.render(). Because getLine() is continuously invoked by the console demo and browser shell applications, the illusion of a blinking cursor is maintained.

The next task is to determine whether any characters are present in the queue. If the queue is empty, getLine() can return. However, it first needs to invoke any callback function passed as an argument, but can only invoke this function when the line buffer is empty (a line of input is not in progress), to prevent screwing up the input line as demonstrated while discussing the browser shell.

At this point, the queue contains a character that is subsequently removed. If this character is the backspace, and if the line buffer is not empty, the rightmost character is removed from the buffer and the backspace is echoed to the console to keep the screen array synchronized, and null is returned because a complete line of input is not yet available.

After echoing the character to the console, getLine() checks the current character to see if it is a newline. If so, the line buffer is reset to the empty string in anticipation of the next line of input, and its previous contents are returned. Otherwise, the current character is appended to this buffer, and null is returned because a complete line of input is not yet available.

Discover echo(msg)

Listing 5 presents echo(msg).

echo: function(msg)
      {
         for (var i = 0; i < msg.length; i++)
            Console.writeChar(msg.charAt(i)); Console.render(); }

Listing 5: Echoing a string to the console

Listing 5 echoes a string of characters to the console one character at a time, updating the current cursor position in the process. The code employs writeChar(ch) for this purpose, and I will explain this function shortly. After writing out the string, Console.render() is invoked to update the canvas with the contents of the screen array.

Discover render()

Listing 6 presents render().

render: function()
        {
           Console.bufferCtx.fillStyle = "#000"; // black
           Console.bufferCtx.fillRect(0, 0, Console.ctx.canvas.width,
                                      Console.ctx.canvas.height);
           Console.bufferCtx.fillStyle = "#0f0"; // green
           var y = 0;
           for (var row = 0; row < Console.numRows; row++)
           {
              var x = 0;
              for (var col = 0; col < Console.numCols; col++)
              {
                  var s = Console.screen[row][col]+"";
                  Console.bufferCtx.fillText(s, x+5, y+5);
                  x += Console.charWidth;
              }
              y += Console.charHeight;
           }
           if (Console.cursorOn)
              Console.bufferCtx.fillStyle = "#0f0"; // green
           else
              Console.bufferCtx.fillStyle = "#000"; // black
           Console.bufferCtx.fillText("_", Console.col*Console.charWidth+5, Console.row*Console.charHeight+5); if (++Console.cursorCounter == Console.cursorCounterMax) { Console.cursorCounter = 0; Console.cursorOn = !Console.cursorOn; } Console.ctx.drawImage(Console.buffer, 0, 0); }

Listing 6: Rendering the screen array to the buffer (and more)

Listing 6 is responsible for rendering the screen array to the buffer and updating the cursor. It renders to the background buffer, and ultimately copies this buffer to the canvas to avoid flicker for those browsers where flicker could occur. The background buffer is first cleared to black to remove potential garbage from a previous rendering.

After setting the drawing color to green, render() iterates over the screen array, invoking the Canvas API’s fillText() function to draw each character. An offset of five pixels is added to the character’s upper-left corner to support an empty border that’s drawn around the console. Characters are separated horizontally by charWidth pixels and vertically by charHeight pixels.

The next section of code is responsible for rendering the cursor. An appropriate fill style is chosen based on the value of cursorOn: green when true and black when false. Either a green or black underline is then displayed at the current cursor position. The black underline completely erases what was previously displayed.

Finally, the cursor’s on/off interval is established: the cursor is visible over five calls to render() and invisible over five calls to this function. Because render() is called by getLine(), and becausegetLine() is invoked repeatedly by the application under the control of setInterval(), a blinking cursor is observed.

Discover writeChar(ch)

Listing 7 presents writeChar(ch).

writeChar: function(ch)
           {
              if (ch == "\b")
              {
                 if (Console.col == 0 && Console.row == 0)
                    return; // cannot backspace past the upper-left corner
                 Console.col--;
                 if (Console.col < 0)
                 {
                    Console.col = Console.numCols-1;
                    Console.row--;
                 }
                 Console.screen[Console.row][Console.col] = " "; return; } if (ch == "\n") { Console.col = 0; if (++Console.row >= Console.numRows) Console.scroll(); return; } Console.screen[Console.row][Console.col] = ch; if (++Console.col >= Console.numCols) { Console.col = 0; if (++Console.row >= Console.numRows) Console.scroll(); } }

Listing 7: Writing a single character to the screen array

Listing 7 writes its single character argument to the screen array and updates the current cursor position. If the character is a backspace, the appropriate element in the screen array is removed. Otherwise, if the character is a newline, the current row advances and the console scrolls vertically upward when necessary. Otherwise, the character is stored at the current position, which advances and possibly scrolls upward.

Discover scroll

Listing 8 presents scroll().

scroll: function()
        {
           Console.row = Console.numRows-1;
           for (var row = 0; row < Console.numRows-1; row++)
               for (var col = 0; col < Console.numCols; col++)
                  Console.screen[row][col] = Console.screen[row+1][col];
           for (var col = 0; col < Console.numCols; col++)
              Console.screen[Console.numRows-1][col] = " "; }

Listing 8: Scrolling the console upward one row

Listing 8 performs a simple scrolling operation that moves the contents of the screen array up by one row. The first row’s contents are replaced by the second row’s contents, and the final row is set to spaces. I’ve coded this function for clarity, but it could be improved from a performance perspective.

Conclusion

Console’s implementation leaves lots of room for improvement. You can add missing features (e.g., echo asterisks while entering a password), boost screen-oriented loop performance (perhaps viaArray‘s splice() function), and make the library more robust through argument validation (e.g., compare what is passed with undefined) and exception throwing. Have fun.

I’m a big fan of the SitePoint forums, and it’s not just because I write for SitePoint. In fact, I signed up a good five years before ever doing any work with SitePoint, so I’m allowed to say it. One of my favorite forums is the Business & Legal Issues one, however they have a forum for just about everything, and even better; they have a great community.

So, whilst looking through my favorite forum, I came across this questions from one of the posters. You can read the whole question here, however let me paraphrase;

Once you’ve sent the proposal what should we do? Should we wait and have the client go elsewhere, should we call back after a day or two, or wait longer. Should we not send it via email and personally hand it explaining everything to them so they are sure to know what they are getting, reducing the chance of them going elsewhere because they are not properly educated.

I’m glad you asked! There are three options available to you, and depending on the size of the deal, and what your take of the prospect is, you may want to choose the most appropriate, however here are my three suggestions, in order of importance.

Option 1: Meet and hand over the proposal in person.

This is a great way to ensure that the prospect has a good grasp of what you are offering. The important part here is try and get the actual decision maker in the room – remember, the person you may be sending your proposal to may in fact not be the person who decides, so ensure your proposal covers all the points and walk it through with the decision maker.

At the end of the conversation, don’t be afraid to ask for the business; something along the lines of ‘Do you have any further questions, or shall we discuss when we can get started?’ works best for me.

This option obviously isn’t the solution if the client is remote, or indeed the work is only small in value.

Option 2: Send proposal over by email and call immediately.

This is a great way to make sure that your prospect understands that you are keen to work with him/her. It also means you can ask them for a suitable time in the next 24 hours, so you can chat again on the phone (if they don’t have the time right then) to walk through your offering over the phone. This helps answer any questions and avoid any roadblocks, as does the above.

Option 3: Send proposal and call back a day or two later.

This should be the absolute last straw approach. If you don’t get through straight away, send them an email asking if they had any questions, and let them know you’ll try calling again in another two days. Keep this up for a handful of calls, or an answer either positive or negative. It reflects you are keen, and ensures you come across helpful as well.

Now you’ll note I haven’t offered the sales losers approach. I used to do this regularly years ago, and it’s definitely not the way to handle a proposal follow up; this one is don’t follow up. If you don’t follow up, you are demonstrating you don’t are about the work.

In this instance, you’d be just as better off writing a figure on the back of your business card and leaving it with the prospect at your initial meeting; it doesn’t say anything more about your professionalism or keenness to work with that prospect. Don’t be that sales loser – pick one of the first three options!

Good luck with that next sale!

We’ve all been there. Your wonderful website has been running successfully for months then — BAM — it disappears. Or, more often, certain features stop functioning. Despite your protests that nothing has changed, your client isn’t happy. Prepare yourself for a few frustrating hours of problem probing.

Step 1: Identify the Issue

This might sound obvious, but I’ve known many developers open their IDE and start hacking at random code. It’s more important to determine the issue than the cause at this stage. Is the site unavailable? Is a particular page or function failing? Is it limited to specific browsers?

Step 2: Test Resource Availability

Nine times out of ten, the problem will be caused by a connectivity issue at your end or the client’s. If you can’t access any other pages, it’s not surprising that your website has disappeared. That said, it’s not always obvious; certain IP ranges, countries or sections of the internet can become temporarily blocked.

Test your site from a variety of locations — a public proxy server will help identify whether it’s a local or global problem. If possible, examine the status of other sites running from the same server or web host.

One less obvious problem is disk space. If you’re running a busy site, server logs can rapidly use the available space even when your application’s storage requirements are low.

Remember that you might be using resources on other servers. This includes CDN-hosted files, database servers, or remotely-hosted APIs such as those for Google Maps, YouTube, Twitter, advertising services etc.

You should also check your server loads. A major traffic spike or Denial of Service attack will cause access problems.

Finally, is your domain registration valid and is the DNS server responding as it should?

Step 3: Identify What Changed

Once you’ve rejected connectivity, traffic, DNS and disk space, it’s time to determine what changed. 999 times out of 1,000 the problem will have been caused by an update.

You may not have touched the files but are you sure others haven’t? Check with everyone who has access but don’t necessarily believe them. Here’s a typical conversation you’ll encounter…

Client: My sites not working. What are you going to do about it?
You: I’ll fix it. Have you made any changes recently?
Client: No. It was like that when I got here.
…five hour’s frantic investigation…
You: You changed X, didn’t you?
Client: X? Oh yes, I changed X. I did that when I was fiddling with Y and Z.

Your application may not be directly to blame. Has your web host updated the OS, language runtime, database software or file permissions? While vendors attempt to ensure PHP, Ruby, Python, MySQL, PostgreSQL, etc. remain backward compatible, features will almost certainly change or break between editions.

Step 4: Reject the Edge Cases

Although rare, you should look for signs of cracking. Software such as WordPress, Joomla and OScommerce are obvious targets, however, changes are often subtle because the cracker wants to retain access. For example, you might discover that a file explorer add-on has been installed or phishing pages have appeared deep within the file structure.

Finally, you should never rule out hardware problems. Corrupt memory chips or disk sectors could be responsible for any number of bizarre issues. If possible, evaluate your application on a similar set-up or install a separate test version on the same server.

Step 5: Fix Your App

Once you have eliminated the impossible, whatever remains, however improbable, must be the truth. Perhaps your code isn’t as perfect as you thought…

Do you have any tips for diagnosing website or application problems? What was the most difficult issue you encountered?

We all know Kevin Yank is a pretty smart guy.

Now’s your chance to see if you’re as smart as Kev, by taking the PHP & MySQL Quiz (which accompanies his new book “PHP & MySQl: Novice to Ninja“)

Jump in now, and take on the elephant in the room :)

PHP Security: Cross-site Scripting Attacks (XSS)

Every PHP programmer has the responsibility to understand how attacks can be carried out against their code to exploit possible security vulnerabilities. Learn about cross-site scripting (XSS) attacks and how you can prevent them in your PHP scripts.

An Introduction to Redis in PHP Using Predis

Redis is an open-source data structure server with an in-memory data set that does much more than simple key/value storage. This article introduces you to some of the basic yet powerful commands that Redis has to offer using the Predis library.

REST: Can you do more than spell it?

Though you’ll often see the words “REST” and “architecture” together, REST is not a specific architecture. This four-part series introduces you to REST, a set of principles that define how a server and client can communicate with each other (and external resources) in a straightforward and robust manner.

Using an Access database with PHP

Sometimes a client will already have a database and ask that we make it available on the Web, and sometimes that database is in Access. Never fear, for PHP can easily work with Access databases using an ODBC driver. Learn the essential elements you’ll need to put an existing Access database online.

Working with Files in PHP

You’re familiar with databases such as MySQL and Access, but data can also be stored in files. This article gives you an introduction into working with text and CSV files, as well as find out information about the files (such as permissions and the last time it was modified).

Content can be inserted into your page using innerHTML or outerHTML…

var container = document.getElementById("container");
container.innerHTML = "<p>Here's some new <strong>DOM</strong> content.</p>";

(Note that jQuery also uses innerHTML for DOM content manipulation).

It’s fast and easy — but it’s not without problems:

1. Invalid HTML strings can be inserted which make errors difficult to spot and debug.
2. You may encounter browser issues if you attempt complex activities such as using or modifying nodes in the resulting DOM content.
3. Although it’s well supported, innerHTML is a proprietary technology and not part of the W3C DOM. It offends the standards gods.

So let’s look at the DOM-based alternative:

var newpara = document.createElement("p");
var newstrong = document.createElement("strong");
newstrong.appendChild(document.createTextNode("DOM"));
newpara.appendChild(document.createTextNode("Here's some new "));
newpara.appendChild(newstrong);
newpara.appendChild(document.createTextNode(" content."));
var container = document.getElementById("container");
container.appendChild(newpara);

Nasty. It’s three times longer, slower to execute and still prone to human error.

Several years ago I devised by own solution, BetterInnerHTML, which loaded an HTML string as XML, recursed the structure and inserted appropriate nodes into the DOM. It worked, but I was never totally happy with performance or issues such as HTML entities.

Fortunately, Joe Stelmach has devised an alternative. It’s a small standalone utility named Laconic which uses a logical JavaScript notation to map directly to HTML, e.g.

$.el.p(
	"Here's some new ",
	$.el.strong("DOM"),
	" content."
).appendTo(document.getElementById("container"));

Attributes are supported using object literal notation:

// produce <div class="example"><div>Content</div></div>
$.el.div(
	{ "class": "example"},
	$.el.div("Content")
);

I like it. While innerHTML remains the best option for quick and dirty DOM content generation, Laconic will be useful in those odd situations when it fails to work as expected.

For more information and downloads, refer to:

• Laconic on GitHub
• Laconic example page