Introduction

C is a general purpose, structured programming language. Its instructions consist of terms that resemble algebraic expressions, augmented by certain English keywords such as if, else, for, do and while. In this respect it resembles high level structured programming languages such as Pascal and Fortran. C also contains additional features, that allow it to be used at a lower level, thus bridging the gap between machine language and high level language. This flexibility allows C to be used for systems programming as well as for applications programming. Therefore C is called a middle level language.  

C is characterized by the ability to write very concise source programs, due in part to the large number of operators included within the language. It has a relatively small instruction set, though actual implementations include extensive library functions which enhance the basic instructions. C encourages users to create their own library fuctions.

An important characteristic of C is that its programs are highly portable. The reason for this is that C relegates most computer dependent features to its library functions. Thus, every version of C is accompanied by its own set of library functions which are relatively standardized. Therefore most C programs can be processed on many different computers with little or no alteration.

History of C:

C was developed in the 1970′s by Dennis Ritchie at Bell Telephone Laboratories,Inc. (now a part of AT&T). It is an outgrowth of two earlier languages, called BCPL and B, which were also developed at Bell Laboratories.

The Combined Programming Language(CPL) was developed at Cambridge University in 1963 with the goal of developing a common programming language which can be used to solve different types of problems on various hardware platforms. However it turned out to be too complex, hard to learn and difficult to implement. Subsequently in 1967, a subset of CPL, Basic CPL(BCPL) was developed by Martin Richards incorporating only the essential features. However it was not found to be sufficiently powerful. Around the same time another subset of CPL, a language called B was developed by Ken Thompson at Bell Labs. However it also turned out to be insufficient . Then, in 1972, Dennis Ritchie at Bell Labs developed the C language incorporating the best features of both BCPL and B.

C was largely confined to use within Bell Labs until 1978, when Brian Kernighan and Ritchie published a definitive description of the language . The Kerninghan and Ritchie description of C is commonly referred to as ‘K &R C’.

Following the publication of ‘K&R C’,computer professionals, impressed with C’s many desirable features, began to promote the use of C. By the mid 1980′s the popularity of C had become widespread-many c compilers and interpreters had been written for computers of all sizes and many commercial application programs had been developed. Moreover, many commercial software products that had originally been written in other languages were rewritten in C in order to take advantage of its efficiency and portability.

Early commercial implementations of C differed a little from Kerninghan and Ritchie’s original description, resulting in minor incompatibilities between different implementations. As a result, the American National Standards Institute(ANSI committee X3J11)  developed a standardized definition of C. Virtually all commercial compilers and interpreters adhere to the ANSI standard. Many provide additional features of their own.

C and Systems Programming:

There are several features of C, which make it suitable for systems programming. They are as follows:

• C is a machine independent and highly portable language.
• It is easy to learn; it has only 28 keywords.
• It has a comprehensive set of operators to tackle business as well as scientific applications with ease.
• Users can create their own functions and add to the C library to perform a variety of tasks.
• C language allows the manipulation of bits, bytes and addresses.
• It has a large library of functions.
• C operates on the same data types as the computer, so the codes generated are fast and efficient.

Structure of a C Program:

Every C program consists of one or more modules called functions. One of the functions must be called main. The program will always begin by executing the main function, which may access other functions. The main function is normally,but not necessarily located at the beginning of the program. The group of statements within main( ) are executed sequentially. When the closing brace of main( ) is encountered, program execution stops and control is returned to the operating system.

Any other function defintions must be defined separately, either ahead or after main( ). Each function must contain:

1. A function heading, which consists of the function name, followed by an optional list of arguments, enclosed in parantheses.

2. A return type written before the function name. It denotes the type of data that the function will return to the program.

3. A list of argument declarations, if arguments are included in the heading.

4. A compound statement, which comprises the remainder of the function.

The arguments(also called parameters) are symbols that represent information being passed between the function and other parts of the program.

Each compound statement is enclosed between a pair of braces{ }. The braces may contain one or more elementary statements (called expression statements) and other compound statements. Thus compound statements may be nested one within another. Each expression statement must end with a semicolon(;).

Comments (remarks) may appear anywhere within a program as long as they are enclosed within the delimiters /* and */. Comments are used for documentation and are useful in identifying the program’s principal features or in explaining the underlying logic of various program features.

Components of C Language:

There are five main components of the C Language:-

1. The character set: C uses the uppercase letters A to Z, the lowercase letters a to z, the digits 0 to 9 and certain special characters as building blocks to form basic program elements(e. g. constants, variables, expressions, statements etc. ).

2. Data Types: The C language is designed to handle five primary data types, namely, character, integer, float, double and void; and secondary data types like array, pointer, structure, union and enum.

3. Constants: A constant is a fixed value entity that does not change its value throughout program execution.

4. Variables: A variable is an entity whose value can change during program execution. They are used for storing input data or to store values generated as a result of processing.

5. Keywords: Keywords are reserved words which have been assigned specific meanings in the C language. Keywords cannot be used as variable names.

The components of C language will be discussed in greater detail in the following articles. This section gives only a brief introduction to the components of C.

Example 1: The following program reads in the radius of a circle, calculates the area and then prints the result.

/* program to calculate the area of a circle*/
#include<stdio. h> /*Library file access*/
#include<conio. h> /*Library file access*/
void main( )            /* Function Heading*/
    {
       float radius, area; /*Variable declarations*/
       /*Output Statement(prompt)*/
       printf("Enter the radius :");
      /*Input Statement*/
      scanf("%f", &radius);
      /*Assignment Statement*/
      area = 3. 14159*radius*radius;
      /*Output Statement*/
      printf("Area of the circle :", area);
       getch( );
     }

Program output:-

Enter the radius: 3

Area of the circle: 28. 27431

The following points must be considered to understand the above program:-

1. The program is typed in lowercase. C is case sensitive i. e. uppercase and lowercase characters are not equivalent in C. It is customary to type C instructions in lowercase. Comments and messages(such as those printed using printf() ) can be typed in anycase.

2. The first line is a comment that identifies the purpose of the program.

3. The instruction #include <stdio. h> contains a reference to a special file called stdio. h . This file contains the definition of certain functions required to read and print data such as printf() and scanf() . It is a header file and hence the extension . h.

4. Similarly #include <conio. h> links the file conio. h which is another header file that contains the definitions of functions used for reading and printing data at the console. The function getch() is defined in conio. h. # denotes a preprocessor directive. More about this in a later article.

5. The instruction void main() is a heading for the function main( ). The keyword void denotes the return type of main and indicates that the function does not return any value to the program after the program has finished executing. The empty parantheses ( ) after main indicates that this function does not include any arguments. Program execution always begins from main( ).

6. The remaining five lines of the program are indented and enclosed in a pair of braces { }. These five lines comprise the compound statement within the function main( ).

7. The instruction float radius, area;  is a variable declaration. It establishes the symbolic names ‘radius’ and ‘area’ as floating point variables. These variables can accept values of type ‘float ‘ i. e numbers containing a decimal point or an exponent.

8. The next four instructions are  expression statements. The instruction printf(“Enter the radius :”); generates a request for information namely,the value for the radius. This statement generates a prompt where the user enters the value .

9. The value of the radius is read into (or stored in) the variable radius with the help of the scanf ( ) function. The instruction scanf(“%f”, &radius); is used for reading data.   “%f” is a conversion character which is used to accept a floating point value.

10. The next instruction, area = 3. 14159*radius*radius; is called an  assignment statement. This instruction calculates the area by using the value of radius entered by the user and assigns the value to the variable area.

11. The next printf( ) statement prints the message Area of the circle followed by the calculated area.

12. The statement getch(); is used to pause the screen so that you can read the output. If getch( ) is not used the screen will just flash and go away. This function waits for the user to input some character(as it accepts a character as input), after the program has finished executing. Any key present on the keyboard pressed by the user is accepted by the getch function as input and its ASCII value is returned to main( ).

Example2: Below is a variation of the above program:

/*program to calculate the area of a circle using a user defined function*/
#include <stdio. h>
#include <conio. h>
#define PI 3. 14159
float process(float radius);/*function prototype*/
void main()
    {
      float area,radius;
      printf("\n Enter the radius:");
      scanf("%f", &radius);
      area= process(radius);
      printf("Area =%f", area);
      getch();
     }
float process( float r);
     {
     float a; /*local variable declaration*/
     a= PI*r*r;
     return(a);
     }

This version utilizes a separate programmer defined function called process, to calculate the area. Within this function, r is an argument (also called a parameter) that accepts the value of radius supplied to  process from main, and a is the calculated result returned to main. A reference to the function appears in main( ), within the statement area= process(radius);

In this statement, the value of area being returned from the function process is stored in the variable area.

The main function is preceeded by a function prototype, which indicates that there is a user defined function called process which is defined after main and that it accepts a floating point argument and returns a floating point value. If the user defined function process, was defined before main( ), the function prototype would,generally, have not been required.

More explanation about this when I write about functions in a later article.

This program also contains a symbolic constant, PI, which represents the numeric value 3. 14159. This is a form of shorthand that exists for the programmers convenience. When the program is actually compiled, the symbolic constant will automatically be replaced by its numerical value. The output of this program is the same as that of the previous program.

This article was a brief introduction, it gives an idea of C programming. The next article will talk about the fundamental concepts of C which include the C character set, Identifiers and keywords, data types in detail, constants,variables, variable declarations, expressions, statements and symbolic constants .

I doubt you noticed but Chrome 19 was released this week. I rarely mention Chrome’s updates because, well, they’re rarely worth mentioning. However, I’ve discovered a few hidden gems in the latest browser…

Tab Syncing

The big new feature is tab syncing. If you’re using Chrome on two or more PCs/smartphones, you should see an “Other devices” link on the new tab page. Click it and you can open synchronized links. I say “should” because I haven’t been able to get it working.

Tab syncing has been available in Firefox for a while so I’m surprised it’s taken quite so long to appear in Chrome. Hopefully, you’ll have better luck than I did.

CSS3 calc() Support

The webkit team has finally implemented one of my favorite CSS3 features: the little-known calc() function. It allows you to define calculated dimensions, e.g.

#myelement { width: calc(50% - 2em + 4px); }

Chrome supports calc() with the -webkit prefix. Firefox uses -moz and IE9 is happy without prefixes. To use it effectively, you’ll need fallback code such as:

#myelement
{
	width: 46%;
	width: -webkit-calc(50% - 2em + 4px);
	width: -moz-calc(50% - 2em + 4px);
	width: -o-calc(50% - 2em + 4px);
	width: calc(50% - 2em + 4px);
}

Combined Settings Page

Choosing tool > Settings now displays a side menu with History, Extensions, Settings and Help. The Help page provides a couple of links and the update checker which normally appears on the “About” dialog (will that disappear soon?)

New JavaScript/ECMAScript 5.1 (Harmony) Features

A number of experimental JavaScript features have made their way from the Harmony specification into Chrome’s V8 engine. However, they’re not available by default — you’ll need to “Enable Experimental JavaScript” in chrome://flags. Language structures such as collections and proxies look great, but it’ll be some time before they’re available in all browsers.

Security and Bug Fixes

21 issues have been fixed in Chrome 19 and Google has paid almost $15,000 to eagle-eyed security hackers.

Chrome has remained fast and stable. It looks set to knock IE from the top of the browser usage chart during the summer of 2012. I’m not convinced any other vendor can prevent Google’s domination of the web and the software we use to access it.

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?

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.

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!

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

In February 2012, we reported the minutes of W3C meeting where Mozilla, Opera and Microsoft discussed implementing -webkit prefixes in non-webkit browsers. The reason: some developers use only webkit prefixes — their sites look good in some browsers, but broken in others even when they offer the same level of CSS3 support. The issue is especially prevalent on mobile browsers and many developers fail to look beyond their high-end Apple or Android devices.

Opera has now announced support for 14 CSS3 webkit properties in their Mobile Emulator. The implementation will eventually reach all editions of their desktop and mobile browsers. If you’re thinking “Opera has a tiny market share”, think again: it’s the world’s most-used mobile browser.

Perhaps I’m being overly dramatic, but Charlton Heston’s famous line comes to mind: “They finally, really did it. You manics. You blew it up!”

Opera -webkit Aliasing

Opera analyzed stylesheets from 10,000 popular websites to determine which CSS values/properties would receive -webkit aliases:

If the browser encounters a property such as -webkit-border-radius, it will apply that effect. If you’ve defined -webkit-border-radius, -o-border-radius and border-radius, normal CSS cascading rules apply and the last defined rule or most appropriate selector will be applied, e.g.

#myelement
{
	-o-border-radius: 3px;
	border-radius: 6px;
	-webkit-border-radius: 9px;
}

All properties are considered to have equal priority so Opera applies a border radius of 9px.

With regard to differences in behavior, Opera state:

As far as we can tell, the behavior the properties that we have aliased is identical in WebKit and Opera, or at least close enough that the differences will not matter in practice. If it turns out that there are differences big enough to cause breakage, we will consider our options, one of which is to align the behavior of our -webkit- prefixed variant to what WebKit actually does.

Opera make a reasonable case to justify their decision. While they understand the complaints, their primary goal is to create a browser which works well for users — who outnumber developers by many thousands to one.

The Backlash

Most developers understand the problem but disagree with the solution. It’s crude and has the potential to break the web. Taking the decision to it’s logical extreme, all vendors would support every prefix but any implementation differences would render the CSS property useless.

The solution rewards bad development practices. While Opera advises you use all vendor prefixes, they will exacerbate the problem:

• Less conscientious developers will see this as justification for only targeting webkit browsers.
• If your site uses differing -webkit and -o values, it will now be affected by CSS cascade rules. Is it easier to analyze and retest your code or simply remove the Opera properties?
• It will become easier to accidentally omit the -o prefix since sites will work as expected.

Several problems have already been reported. For example, Modernizr evaluates prefixes in turn until it finds one the browser supports. Therefore:

Modernizr.prefixed("transition");

now returns WebkitTransition in Opera. Transitions are new to Opera and the browser doesn’t support every webkit CSS and JavaScript property. If you want to adjust or disable effects in Opera, you can’t rely on Modernizr-like detection code. You may even need to implement nasty browser sniffing.

However, my biggest issue is this: where are all these problem sites? Has user experience suffered from the lack of rounded corner, gradient, shadow, transition and transform effects? Are those sites genuinely broken or has Opera taken a (marketing) opportunity to make their browser look better?

Since Opera has analyzed 10,000 websites they can contact the owners directly. At the very least, they could publish a “hall of shame” which provides examples and highlights the technical issues. Many developers would happily contact companies on Opera’s behalf. Some would be prepared to fix sites for free since it could lead to future contracts.

There are no easy solutions to the vendor prefix crisis. I understand Opera’s reasons but, regardless of how this is implemented, it’s inevitable that something will end up broken.

Some good news: Microsoft has announced they will not support webkit prefixes in Internet Explorer (although there’s nothing to prevent them reversing that decision). Mozilla is yet to reveal their intentions — they will be watching Opera’s situation closely.

A console is a software artifact for reading line-oriented textual input from the keyboard and writing line-oriented textual output to the screen. Consoles are often used to implement operating systemcommand-line interfaces, but are also handy in text-based adventure games and other contexts.

Although text-oriented consoles are not as popular as they once were because of the proliferation of graphical user interfaces, they can be useful to power users who are not intimidated by this style of interface. Also, consoles can open up a new class of web application such as the embedded browser shell.

This article begins a two-part series that presents a JavaScript-based console library for use with web applications that may benefit from this style of user interface. Part 1 introduces you to the library’s simple API along with a browser shell application that serves as a useful demonstration of this API. Part 2 shows you how the library is implemented so that you can modify it to meet additional requirements.

Explore the Console Library

The console library consists of a global object named Console with several properties. This arrangement minimizes pollution of the global namespace. Furthermore, it reflects my desire to avoid supporting multiple consoles, as I find it easier to implement a singleton console.
Console provides the following features:

• easy initialization based on number of desired rows and columns (the <canvas> tag requires only an id attribute)

• canvas placed in tab order and gains keyboard focus immediately for browsers such as Firefox

• clear console capability

• green on black text with monospace font

• visible cursor that marks the current input position

• text echoing capability

• vertically scrollable when text flows past the lower-right character position

• simplified editing in terms of the backspace key

• automatically call a function when no input is available

• supports FireFox, Internet Explorer, Chrome, Opera, and Safari

Although Console encapsulates multiple accessible properties, I consider only four of them to be members of the “public” API. The other properties should not be accessed; they exist to support the following four properties and could change in a subsequent version of the library:

• init(canvasName, numCols, numRows) initializes the console. The string passed to canvasName must match the value of an existing <canvas> element’s id attribute. The integer passed tonumCols identifies the desired number of columns (e.g., 80), and the integer passed to numRows identifies the desired number of rows (e.g., 25). The console is cleared and the cursor position is set (0, 0). The resulting console displays green text on a black background. This function does not return a value.

• clear() clears the console and sets the cursor position to (0, 0). This function does not return a value.

• getLine(callback) returns a line of input and echoes this input to the console. It first checks if a line has been entered by noting whether a newline character (indicated by the user having pressed the key labeled Enter or Return) is present in the input. If so, the line is returned without the newline character. If a newline is not present, or if there is no input, this function returns null. When a function is passed to callback, that function is called when nothing has been entered.

• echo(msg) echoes the string passed to msg to the console starting at the cursor position, which is updated. The console scrolls vertically when the message flows past the lower-right corner. This function recognizes \b (backspace) and \n (newline) special characters. Also, it does not return a value.

The getLine(callback) function does not block the current thread while waiting for the user to press Enter/Return. Instead, it returns immediately. It does so because JavaScript code runs on a single thread. (HTML5′s web workers are an exception, and are beyond the scope of this article.) Blocking this thread for longer than what the browser considers acceptable causes the browser to display a dialog box that reports an unresponsive script.

The console library is easy to use. After defining a <canvas> element, and after initializing and echoing any preliminary text to the console, repeatedly execute a function via JavaScript’ssetInterval() function. Each execution should invoke getLine(callback) (with an optional callback function) and then take appropriate action based on getLine()‘s return value. Listing 1 presents the HTML for a simple demonstration of this library.

<html>
   <head>
      <title>
         Console Demo
      </title>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
      <script src="../Console/Console.js">
      </script>
   </head>
   <body style="text-align: center">
      <p>
      <h2>
        Console Demo
      </h2>
      <canvas id="mycanvas">
      HTML5 canvas element not supported by this browser.
      </canvas>
      <p>
      You might have to press the Tab key or click the canvas to give it keyboard focus.
      </p>
      <script>
         Console.init("mycanvas", 64, 16);
         Console.echo(">");
         function tick()
         {
            var line = Console.getLine();
            if (line != null)
            {
               if (line != "")
                  Console.echo(line+"\n");
               Console.echo(">");
            }
         }
         setInterval("tick()", 50); // Invoke tick() every 50 milliseconds.
      </script>
   </body>
</html>

Listing 1: Echoing entered text on the console

Listing 1 describes ConsoleDemo.html. This listing is fairly straightfoward, except perhaps for the <meta> element. This element enforces a compatibility mode – use latest standards rendering mode — so that the console will work under Internet Explorer 9 (and probably higher versions of this browser). Otherwise, Explorer outputs an error message about the Canvas API’s getContext() function not being defined.

Listing 1 continues with a <script> element that includes the contents of a JavaScript source file named Console.js. This file defines the console library and is located in a Console directory that’s accessed relative to ConsoleDemo.html. The code file that’s attached to this article contains ConsoleDemo.html and Console.js in appropriate directories relative to each other, so you should be able to run ConsoleDemo without problems.

The body of this HTML file specifies a <canvas> element whose id attribute is assigned mycanvas. No other attribute is required because the console library takes care of them. The body also contains a <script> element that presents the console demonstration code.

The code first initializes the canvas to a 64-column-by-16-row drawing area — I chose these values because they were the dimensions of the text screen on my old TRS-80 Model III microcomputer. The code then echoes a > character to the console as the initial input line’s prompt.

At this point, a function named tick() is defined for repeated execution. This function will be executed every 50 milliseconds courtesy of the setInterval("tick()", 50) function call. Each invocation attempts to retrieve and echo back to the console a line of input.

tick() first invokes getLine() without passing a callback function because none is needed in this example. If this function returns null because nothing has been entered or the user is typing some input (and has not yet pressed Enter/Return), nothing further happens. Otherwise, if the returned line is not equal to the empty string (only Enter/Return was pressed), the entered text followed by a newline is echoed to the console. At this point, a > prompt is echoed to inform the user that another line of input is expected.

Figure 1 shows you the resulting console in the context of Firefox.

Figure 1: You don’t have to press Tab to start using the console on Firefox.

Encounter a Browser Shell

A shell provides an operating system’s user interface, and its primary purpose is to run programs. Modern operating systems feature graphical shells, but many also feature traditional command-line-oriented shells (e.g, Unix’s Korn and Bourne shells). A similar shell can be embedded within a web page via the console library, and this browser shell can be used to execute browser-oriented commands.I’ve created a browser shell application as a useful demonstration of the console library. Figure 2 reveals this application’s console in the context of the Internet Explorer 9 browser.

Figure 2: The browser shell currently supports four commands.

Figure 2 reveals an interesting anomaly: geolocation information is not immediately displayed. Instead, latitude and longitude data is often presented multiple lines later in the browser. You will learn the reason while exploring Listing 2.

<html>
   <head>
      <title>
         Browser Shell
      </title>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
      <script src="../Console/Console.js">
      </script>
   </head>
   <body style="text-align: center">
      <p>
      <h2>
        Browser Shell
      </h2>
      <canvas id="mycanvas">
      HTML5 canvas element not supported by this browser.
      </canvas>
      <p>
      You might have to press the Tab key or click the canvas to give it keyboard focus.
      </p>
      <script>
         Console.init("mycanvas", 64, 22);
         Console.echo("Browser Shell 1.0\n\n");
         Console.echo("Type 'help' (without the quotes) to obtain help\n\n");
         Console.echo(">");
         var geo = "";
         function callback()
         {
            if (geo == "")
               return;
            Console.echo(geo+"\n");
            Console.echo(">");
            geo = "";
         }
         function tick()
         {
            var line = Console.getLine(callback);
            if (line != null)
            {
               line = line.trim();
               if (line == "browser")
                  Console.echo(navigator.userAgent+"\n\n"); else if (line == "cls") Console.clear(); else if (line == "geo") { Console.echo("querying location info...may take a few moments\n\n"); function report_error(error) { geo = error.message; if (geo == "") // geo is "" on Safari geo = "unknown error"; } function report_geolocation_query(position) { geo = "Lat: "+position.coords.latitude+", Lon: "+position.coords.latitude; } navigator.geolocation.getCurrentPosition(report_geolocation_query, report_error); } else if (line == "help") { Console.echo("Available commands...\n"); Console.echo("browser -- display current browser info\n"); Console.echo("cls -- clear screen\n"); Console.echo("geo -- obtain geolocation information\n"); Console.echo("help -- display this help text\n\n"); } else if (line != "") Console.echo("bad command\n"); Console.echo(">"); } } setInterval("tick()", 50); // Invoke tick() every 50 milliseconds. </script> </body> </html>

Listing 2: Interpreting and executing commands

Listing 2 presents BrowserShell.html. This listing has a similar layout to Listing 1 and should be fairly easy to follow. After initializing and echoing preliminary text to the console, the tick()function is repeatedly executed to get the next line of input, trim whitespace from both ends, check for one of four possible commands, and execute the command. If an invalid command is entered, bad command is echoed to the console. Regardless, the user is then prompted to enter the next command.

The geo command is the most complex to implement. It obtains geolocation information about the user via the Geolocation API, which is asynchronous to avoid blocking the JavaScript thread.navigator.geolocation.getCurrentPosition(report_geolocation_query, report_error) queries the user to grant permission to obtain geolocation information, proceeds to get that information when the user accepts, and then invokes one of two callback functions:

• report_geolocation_query(position) is invoked (upon success) with a Position argument that stores the geolocation data via its coords member, of Document Object Model typeCoordinates. This DOM interface includes latitude and longitude fields of DOM type double.

• report_error(error) is invoked (upon failure) with a PositionError argument that stores the reason for failure via its message member, of DOM type DOMString, and its code member, of DOM type unsigned short.

Each of these callbacks extracts information from its passed argument and builds a string that it assigns to the geo variable. During testing on Safari, I discovered that this browser wouldn’t let me obtain geolocation information. Furthermore, it assigned the empty string to message. To address this situation, I coded report_error(error) to assign "unknown error" to message. (I could have output a message based on error.code whose value was 2 — the position is unavailable. I leave making this change with you as an exercise.)

Listing 2 declares a callback() function that it passes as an argument to getLine(callback). This function is invoked each time getLine(callback) detects that there is no input. After verifying that something has been assigned to geo, callback() echoes this variable’s value followed by a > prompt to the console, and then assigns the empty string to this variable (to avoid having geo‘s value repeatedly output).

Why don’t I echo geo‘s value within report_geolocation_query(position) and report_error(error) (and then I wouldn’t need geo but could use a local variable) instead of going to the trouble of passing a callback function to getLine(callback)? If I did so, that navigation data could be output in the midst of entering a command, resulting in a mess. For example, while entering help I might end up with the following intermixed output:

>helLat: 49.88, Lon: 49.88
>p

Conclusion

Console is a useful tool for embedding a simple console into web pages. The previous browser shell application gives you an idea of what’s possible. You might want to extend this application with additional commands, such as a dir command for obtaining a directory listing of web storage. However, you first need to understand how this library works, and that is the subject of Part 2.

” … Just as PHP and MySQL have grown from the young upstarts of the web development world into mature, stable platforms for billion-dollar businesses, this book that I’ve been writing again and again for over a decade has grown up … It’s time to write PHP like the big kids do…” 

This is how Kevin Yank describes the 5th edition of his just-released book “PHP & MYSQL: Novice to Ninja“

Watch Kevin as he introduces you to his NEW book!

As part of the launch of Kevin’s book, it’s now on special with – SAVINGS of up to 50%

Rumors of a Google cloud-based file storage service have been circulating since 2006 but Google Drive was finally released on April 24, 2012. That’s an unusually long gestation period for a company that normally releases first then tweaks (or abandons) later.

Google Drive is a direct competitor to established players such as Dropbox, SugarSync, Box, Cubby, Microsoft SkyDrive and Apple iCloud. But is it better?

Google Drive Features

It’s important to realize that Google Drive is a replacement for Google Docs (GDocs). Once you sign-up with your Google account, the docs.google.com URL will redirect to drive.google.com. The web interface is fundamentally the same and you can add, create, edit and delete files and folders as before.

Replacing GDocs is a clever idea. The projects are compatible and your cloud-based documents can be browsed from your desktop — an attractive feature for those migrating from Microsoft Office. It’s also apparent Google has learned lessons from doomed projects such as Wave; it’s easier to piggy-back on the success of an existing project than build a new user base from scratch. GDoc’s 40 million users have little reason not to adopt Google Drive.

To make the most of Google Drive, you need to install the desktop application on your PCs, tablets and smart phones. Native applications are currently available for Windows, Mac, Android and iOS but you can be certain that other platforms including Linux and Blackberry will appear shortly.

The desktop application creates a folder on your device. Its files and sub-folders are automatically synchronized to the web and your other devices. Google offer a generous 5GB of free space with competitive plans including 100GB for $60 per year.

How Does it Compare?

Following sign-up, you’ll need to wait for around 24 hours before your existing Docs account is converted. I suspect Google will convert all accounts at some point in the future.

The desktop application is simple to install — assuming it doesn’t throw fatal errors. Many Windows users have reported similar experiences to me although installing Microsoft’s Visual C++ 2008 SP1 Redistributable rectified my issues. Once installed, there’s a little configuration to set the Google Drive folder and the application will run in the background so you can forget about it. On my system, it required a little over 30MB memory to execute — not horrendous, but Dropbox uses less than half that.

If you’ve used similar services you’ll understand how Google Drive works. The main difference is that you’ll find Google Docs files in your synchronized folder. Resources such as PDFs are downloaded as-is so you can open them directly.

Native Google documents are simply URL links which open the file in a browser. While that’s practical, it means you can’t open files offline and you don’t have a real backup in the event of connectivity or service problems. I’m not convinced it’s a major drawback but an option for automatic conversion to desktop formats such as TXT, RTF, DOC, ODT, XLS and PDF would be a bonus.

Finally, there’s the issue of trust. From an ownership perspective, the terms and conditions are clear:

You retain ownership of any intellectual property rights that you hold in that content. In short, what belongs to you stays yours.

Privacy is another matter…

When you upload or otherwise submit content to our Services, you give Google (and those we work with) a worldwide license to use, host, store, reproduce, modify, create derivative works (such as those resulting from translations, adaptations or other changes we make so that your content works better with our Services), communicate, publish, publicly perform, publicly display and distribute such content. The rights you grant in this license are for the limited purpose of operating, promoting, and improving our Services, and to develop new ones. This license continues even if you stop using our Services.

Could Google take a sneaky peek at your files to provide context-sensitive advertising? Put it this way, I suggest caution if you’re planning to upload documents containing personal information. But the same can be said for every online service since the dawn of the web.

Google Docs Summary

In essence, there’s little to distinguish Google Drive from its competitors. Google has copied the best features from Dropbox and, while that’s no bad thing, it doesn’t offer a compelling reason to switch. Yet.

More competition is great for users, though. Google may drive down storage prices and you can install different services concurrently to obtain many gigabytes of free backup space.

Pros:

• The service works.
• Generous 5GB of free space and inexpensive storage plans.
• Automatic Google Docs synchronization.
• Google will evolve the product rapidly.

Cons:

• Currently limited to Windows, Mac, iOS and Android platforms.
• Some rough edges; application installation problems and less-efficient memory use.
• Google document synchronization is a little kludgey.
• Fewer features, no API and less capable than competing products.
• Potential trust issues.

Have you installed Google Drive? Do you prefer it to competing services? Should Dropbox be concerned? Do you trust Google keep their eyes off your data?