SitePoint » Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and More » Web Tech

HTML5 and the Future of Online Games

Jarred Draney — Fri, 25 May 2012 17:30:00 +0000

The Golden Child: Flash Games

For several years now Adobe Flash has been the dominate technology used to create online games. It is so popular in fact that the term “flash games” has almost become synonymous with browser based games in general. Take a look at all of the major gaming portals; with a few exceptions, practically all of the games they offer are flash games.

What’s so wrong with Flash you ask? Well nothing really. It was an amazing technology that was used to add all sorts of functionality to browsers. Through the use of a plug-in developers could now include all sorts of interactivity and animated graphics to their web pages. However things are changing, and Flash may no longer be the best fit for many online applications.

Browsers are a lot smarter now and they are only going to continue to get smarter. Rather than relying upon plug-ins to display interactive and graphically intense pages modern browsers can do it all by themselves. Utilizing the W3C, the specification for HTML5, browser makers are including all sorts of functionality into their products
that web developers can now use to make graphically intensive and interactive websites. This has special implications for online game designers. Soon (hopefully) designers will no longer be forced to choose from a select few proprietary technologies that not only are expensive, but also obligate their end users to download, install, and regularly update the respective plug-ins.

The New Kid on the Block: HTML5 Games

Traditionally the role of HTML has been used primarily to define and layout the text on web pages. Over the years, however, its role has slowly evolved to be more interactive. The new HTML5 spec furthers this evolution by including definitions for several additional elements aimed at interactivity, multimedia, and graphics. Combine
these new HTML5 elements with the faster and enhanced JavaScript engines available in modern browsers and you now have a set of tools perfectly suited for online game development.

Some advantages of HTML5 for Games

Not only are the HTML5 technologies well suited for creating browser based games, they offer several advantages over proprietary options. HTML5 is an open technology. It doesn’t cost anything and technically only requires a simple text editor to code in. Never underestimate the power of free. Flash and other proprietary technologies all cost the developer. While this certainly isn’t the only factor that a game developer would consider, it certainly does play a role, and for the small time indie developer it might be a very big factor. Compatibility is another huge advantage HTML5 has. HTML is the lowest common denominator for all web based devices. By using HTML5 you can target a wider array of devices and gadgets without having to specifically port your game to each different platform. Another often forgotten advantage is ease of use. For the technically savvy, downloading, installing, and updating plug-ins is only a minor hassle. However, for less technically savvy users this can be quite a hurdle and just may turn away users altogether.

Some Interesting Charts

Above you will find some charts from Google Trends for the search term “flash games” and then also the term “html5 games”. It is easy to see that searches for “flash games” have been in steady decline for over the past 5 years while searches for HTML5 games have seen some pretty impressive growth in the past 3 years. While this really doesn’t prove anything, it is an interesting metric to help gauge the popularity trends of the two different technologies. It is important to note that these charts show only relative search volume and not overall volume. Per the Google Adwords tool, the monthly global search volume for “flash games” is 11,100,000 compared to a measly 49,500 for “html5 games”.

The Future of online Games

Will HTML5 be the end of plug-in based games? If it is, it is pretty safe to say that it won’t be happening anytime soon. It is estimated that the HTML5 spec will not be fully implemented until 2022. Despite this long time-frame, browser makers are already racing to include all the HTML5 functionality that they can. Game developers have taken advantage of this and created numerous quality games that easily compete with their flash counterparts. Take a look at all these HTML5 games to see some excellent
examples of what is already possible with the new technology.

Given the current search trends and the several advantages HTML5 has over Flash, the future for HTML5 games looks bright. While it is not certain if HTML5 will eventually win out to become the gaming technology of choice, one thing is for certain: the love of online casual gaming has captured the interest of millions and as long as
that interest exists developers will continue to create fun and exciting games.

How Start a Newsletter in Minutes With TinyLetter

Lior Levin — Fri, 25 May 2012 15:00:22 +0000

An email newsletter is a brilliant way to stay connected to your customers or community members. Many people who visit your website may like it. Some may even love it, but if no one reminds them to keep visiting, those people may forget all about it. By inviting them to subscribe to a periodic newsletter, you can turn those site visitors into regulars, and TinyLetter makes it easy to get started in a matter of minutes.

TinyLetter is a free service that makes it extremely easy to setup an email newsletter, share it with subscribers, and even charge them a fee for your high-quality periodical content. TinyLetter is a subsidiary of MailChimp, but it uses a simplified interface and is designed for “distraction free” mass communication with your subscribers, rather than robust email marketing campaigns.

Creating a Newsletter

To get started with TinyLetter, follow these simple instructions:

1. Point your web browser to tinyletter.com

2. Click “Register”

3. Fill out the registration form, including your username, real name (yours or your organization’s), newsletter name, a brief description, your email address, and a password.

4. Click “create my account”

5. Click where it says “click here to get the embed code”. This will allow you to publicize it on your website.

6. Paste the embed code into your website’s code where you want it to appear.

Users should now be able to subscribe directly from your site. Alternatively, you can give them the direct link (tinyletter.com/your-username), which is helpful if you want to share it on Facebook, Twitter, etc.

Sending Your First Message

Once you have some subscribers, you should start communicating with them. Go back to the TinyLetter website and click “Write A Newsletter”. Enter a subject, and start writing just like you would with a normal email message. When you are finished, click “Preview” to get a glimpse of what your message will look like, and then click “Send to all” to make it final.

Other Features
If you already have a contact list of users, you can import their email addresses directly into TinyLetter. On the main configuration screen, click “Import email address.” Note that it has a limit of 25 email addresses per day, likely to prevent spammers from using it to quickly build lists.

Another useful feature is that you can configure the appearance of the subscription page to look more integrated with your website’s theme. By clicking “Design and settings”, you can upload a background image, change the text that appears on the page, add a background pattern to the email subscription box, and configure payment information.

Payments

On the same “Design and settings” page, click the red link at the bottom of the first section that says “show even more settings”. Most of these settings allow you to tweak the text of your subscription form, but the bottom three settings allow you to configure payment options.

The first payment option, ”make money price”, sets the amount that subscribers must pay to get your newsletter. They will be charged monthly for the subscription. Therefore, if you only plan to send four newsletters per year, you should definitely make sure they know that. The “Free trial” setting gives you the option to give users their first month free. The final option is for how payment is collected, either from TinyLetter or directly to your PayPal account.

When you are finished changing settings, click “Save Changes” at the very bottom.

Expanding Your Reader Base

An email newsletter is a great way to extend your website to your readers who may not have time to check your site for updates and may not be accustomed to using RSS. Some users may have Facebook. Some may have Twitter. But all of your users probably have email accounts, and as long as you use some restraint with the frequency of your messages, many of them will love to get mail with quality content from you.

Scalable Vector Graphics: Drawing Basics

Craig Buckler — Tue, 22 May 2012 16:38:16 +0000

In my previous posts we discussed what SVGs are and reasons you should consider SVGs for your project. In this article we’ll look at the basic concepts, document structure and drawing elements.

SVG Co-ordinate Space

An SVG is defined in whatever co-ordinate space you give it. That space does not necessarily relate to pixels, cm, inches or other units because the images are scalable to any dimension.

Optionally, you can define a viewbox which determines the co-ordinates your SVG uses. The following SVGs would look identical:

An SVG with a viewbox of 0,0 to 200,100 with a line from 0,0 to 100,50.
An SVG with a viewbox of 0,0 to 300,150 with a line from 0,0 to 150,75.

Your images are rendered within a viewport, i.e. the whole browser window or a block in an HTML page. By default, an SVG viewbox will stretch in either direction to fill the viewport space. However, you can state that you want the aspect ratio preserved.

Unlike mathematical graphs, the SVG co-ordinate system starts at the top left (usually 0,0) with the x-axis pointing right and y-axis pointing down. Therefore, a point at 100,200 represents 100 units to the right of the left hand edge and 200 units down from the top edge.

SVG Length Units

Lengths in SVG can be specified either as:

a relative value in the SVG space, e.g. 10
an absolute or relative measurement, e.g. 10px. SVG supports em, ex, px, pt, pc, cm, mm, in and percentage units.

If your image will be scaled, use units which are relative to your viewbox, e.g. a line width of 10 within a 100×100 viewbox will be 10% of the full width/height.

SVG XML Document

An SVG image is defined as an XML document. Assuming you’re creating a new SVG file, such as image.svg, an XML declaration and doctype must appear at the top of the document:

This is followed by the root SVG element:

Several optional attributes can be applied to the svg element. Two important ones are:

viewBox: establish the dimensions — a rectangular co-ordinate area used for your image specified as “min-X min-Y width and height”, e.g. viewBox="0 0 600 400". It’s important to remember this is an abstract space; it does not relate to pixels and your drawing elements are not constrained within these co-ordinates.
preserveAspectRatio: defines how a viewbox is scaled. There are many options, for example preserveAspectRatio="xMidYMid meet" ensures the middle of an SVG’s viewbox is aligned with the middle of the viewport (the browser window or HTML element containing the SVG) and the image fits the space available while preserving its aspect ratio.

An optional title and description can be defined using title and desc elements. Our basic XML document is therefore:

Grouping Elements

Any set of elements (lines, circles, rectangles, text, etc.) can be grouped using … tags. In essence, it’s identical to grouping drawing objects in a graphics package so they can be manipulated as a single item.

Personally, I prefer to define a root group node so I can modify the whole image easily via JavaScript or CSS, e.g.

A single group can have any number of nested inner groups.

Lines

A single line between two points is drawn using the line element:

The stroke-linecap attribute defines the line-end effect and accepts values of butt (the default), round, square or inherit:

Polylines

Polylines define a set of connected straight line segments:

The stroke-linejoin attribute defines the line-joining effect and accepts values of miter (the default), round, bevel or inherit:

Polygons

Polygons are are similar to polylines except that the resulting shape will always be closed:

Rectangles

Square or rounded rectangles are defined using the rect element:

The x and y attributes define the top-left corner. rx and ry specify the horizontal and vertical corner rounding.

Circles

Circles are defined using a center point and radius:

Ellipses

Ellipses are defined using a center point and two radii values:

Text

Basic text can be added using the text element:

SVG

The x and y attributes define the bottom-left co-ordinate of the first character in the string.

The Result

Our final SVG document contains the following XML code:

and renders this image:

click to view the actual SVG

While this is a simple example, the file is 1,176 bytes before minification and gzipping. The equivalent compressed PNG above is 5,611 bytes — it’s almost 5x larger and cannot be scaled above its native 407×274 resolution without losing quality.

Further Scalable Vector Graphic articles will appear on SitePoint soon…

Get Tweeting and win a Kindle Fire at Web Directions Code!

Tom Museth — Tue, 22 May 2012 03:40:52 +0000

At SitePoint we live and breathe web tech … and we love our ebooks. Combining these two passions is a challenge we relish, whether we’re releasing an all-encompassing guide to the world of WordPress (like The WordPress Anthology), an analysis of cutting-edge design approaches (say, The Principles of Beautiful Web Design) or an introduction to the latest web development standards and methods (for instance, HTML5 & CSS3 For the Real World).

Which is why we decided we ought to share these passions with our treasured SitePoint community – especially those of you who are attending the bound-to-be-awesome Web Directions Code conference, taking place in Melbourne on Wednesday, May 23 and Thursday, May 24. We’re sending a whole bunch of SitePoint staffers along to this two-day festival of all things JavaScript and HTML5 (check out the program) where we’ll be attending excellent talks from the likes of Max Wheeler, Ryan Seddon and Rob Hawkes, to name a few. But our crew are also going to be hoping you’ll hook up with them and enter our SitePoint Twitaway Competition! Check out the details on the Twitaway Competition page.

Here’s how it works.

When you’re at the conference, look out for a SitePoint staffer (you can find us wandering around in our T-shirts, probably armed to the teeth with books, mugs and other SitePoint gear we’re itching to give away). Who’ll be there? Louis, Tom, Di, Alex, Harley and Ole. We’re waiting to meet you.
Grab one of us … but be gentle.
Take a photo of yourself with said SitePointer.
Send a unique, funny tweet, with your photo and the hashtag #lovesitepoint.
That’s it … unless, of course, you want to stick around and have a chat with us!

This will put you in the running for our great giveaway: a Kindle Fire, which we’ll hand over to the winner on the Thursday afternoon, and happily load up with a whole bunch of SitePoint ebooks.

But wait … ‘cos there’s more. Everyone who sends a tweet with a photo and the #lovesitepoint hashtag will win an ebook anyway. Why? Well, because you deserve it. And we want you to be awesome developers … something we hope we can give you a hand with when you choose one ebook from the following: The WordPress Anthology, The Principles of Beautiful Web Design, or HTML5 & CSS3 For the Real World.

The details are all on the promotion page. All you have to do is get to Web Directions Code, hunt us down and get tweeting!

Ubuntu 12.04 LTS Precise Pangolin: File sharing with Samba.

Jonathan Hobson — Mon, 21 May 2012 15:00:10 +0000

Samba is the software package that allows you to share files, printers and other common resources across a network. Delivering full connectivity with the Windows workgroup it is known and respected as an invaluable tool in homes and offices around the world and in this article I will be showing you how to install, set-up and manage a Samba Server on Ubuntu 12.04 LTS Precise Pangolin.
So let’s begin …

Prerequisites

To get the best out of Samba your system should be running a static IP address and if you happen to be running a firewall, you should open the relevant ports to give the Samba service full access to your network.

Yes, you can use DHCP, but you will need to ensure that your DHCP server or router is providing you with a ‘fixed’ DHCP licence; but for those who wish to learn how to implement a static IP address on Ubuntu 12.04 you can read my previous article on networking tips and tricks

Update your system

Installing Samba is a very straight forward process so we shall begin by updating the system.
In Terminal or in your console type:

sudo apt-get update && apt-get upgrade

If there are any updates available to you, do that now before we proceed :-)

Installing Samba

For the purposes of this article I will have provided you with three different approaches to installing Samba:
1. For desktop users, who want to take advantage of ‘winbind’ (winbin) and use the graphical tools (system-config-samba), open Terminal and type:

sudo apt-get install samba samba-common system-config-samba winbind

2. For desktop users, who wish to take advantage of ‘winbind’ (winbind) but do not wish to use the graphical tools, open Terminal and type:

sudo apt-get install samba samba-common winbind

3. For server users, in your console type:

sudo apt-get install samba samba-common

Configuring Winbind

Before we tackle the subject of Samba itself, desktop users will notice that we have installed Winbin.
The purpose of this is to ensure that Ubuntu can provide full hostname resolution when viewing your local network and so we will want to configure this before moving on. Don’t worry, it is very simple as all we need to do is make a quick ‘order change’ to the ‘nsswitch.conf’ file.
To begin, open Terminal and type:

sudo gedit /etc/nsswitch.conf

Find the line that looks like this:

osts:          files mdns4_minimal [NOTFOUND=return] dns mdns4

Now change it to look like this:

hosts:          files mdns4_minimal [NOTFOUND=return] wins dns mdns4

Your nsswitch.conf file should now look something like this:

passwd:         compat
group:          compat
shadow:         compat
hosts:          files mdns4_minimal [NOTFOUND=return] wins dns mdns4
networks:       files
protocols:      db files
services:       db files
ethers:         db files
rpc:            db files
netgroup:       nis

When complete, simply ‘save’ and close your file before rebooting like so:

sudo reboot

Having done this you should now be able to select ‘GO > Network’ from the desktop menu and view your entire Windows and Linux based network.

From this point onwards the article will act a guide and depending on your needs it should not be viewed as an ordered process or a solution. For example, you may wish to add system users prior to completing any configuration work or you may even need to repeat some processes in order to add multiple users. Remember, everyone’s network needs are unique :-)

Using the desktop graphical tools.

Before you begin to use the graphical tools (system-config-samba) we will need to ‘fine-tune’ the Samba Server Settings.

To do this, open the dash and use the search bar to find Samba like so:

Launch the Samba configuration tool and choose, ‘Preferences > Server Settings’ like so:

In most cases the ‘default settings’ may be exactly what you need but in some instances you may need to make a few changes.

Complete the ‘basic’ tab settings and click ‘OK’ when done:

Workgroup.This field should be the same value as that used by your Windows Workgroupi.e if your WIndows Users are members of the ‘Home’ workgroup, type ‘Home’ in this field.
Description.This is the name of your computer as seen by Windows Users.i.e.
keep it simple, use a name similar to that of your actual computer name and do not use spaces on non-internet friendly characters.

As it is not advisable to allow ‘Guests’ there should be no reason to change the ‘security’ settings tab unless you wish to do so:

Now click ‘OK’ to close the ‘Server Settings’ window.
To manage your current users simply choose ‘Preferences > Samba Users’ like so:

Now launch the ‘Samba Users’ dialogue box. Select your username and click ‘Edit User’ to launch the ‘Create New Samab User’ dialogue box.

Complete the fields as required:

Windows Username. Confirm the username to be used by Windows users when accessing your share folder(s).
Samba Password. Use this field to confirm the password to be used by Windows users when accessing your share folder(s).
Confirm Samba Password. Use this field to re-confirm the password to be used by Windows users when accessing your share folder(s).

Although you may see ‘stars’ in the password field(s) prior to doing this. Delete them and re-type the password.

When complete, click ‘OK’ to close both dialogue boxes before restarting the Samba service like so.

Open Terminal and type:

sudo restart smbd && sudo restart nmbd

Adding a new (Linux) user account with the desktop graphical tools.

If you want to add a new Linux user account, simply:

Open ‘System Settings’.
Choose ‘User Accounts’ and unlock the panel using your administration password.
Use the + (plus) icon to create a new user.
Enter the new user’s full name (the username will be filled in automatically based on the full name).

As this folder is for ‘sharing purposes only’ do not assign ‘administrative rights’ to this user account.

When finished, click .
As the account is initially disabled, we now need to set the users password.

To do this, simply:

Ensure the ‘User Accounts’ panel is still unlocked.
Click ‘Account Disabled’ and complete the resulting dialogue box.

When finished, click ‘Change’.
If you return to the ‘Samba Users’ dialogue box and click ‘Add User’, your new user account should be found in the Unix Username drop-down box like so:

Simply complete the relevant details and click to finish.
When done, you will be able to assign this user account to specific folders like so:

More information on user accounts can be found here https://help.ubuntu.com/12.04/ubuntu-help/user-accounts.html.

Sharing folders with the graphical tools.

To share a folder with Samba, click the green ‘+’ (plus) icon to open a dialogue box called ‘Create Samba Share’ like so:

Complete the ‘basic’ tab with the required information.

Directory. Click ‘Browse’ to locate the relevant folder you wish to share.
Share Name. Use this field to specify a ‘human friendly’ name for your share folder.
Description. Type a description of the ‘share folder’ in this field.
Writable. Shared folders are ‘read-only’ by default, so place a tick in this box if you would like to enable ‘write’ access.
Visible. Place a tick in this box if you want your share folder to be ‘visible’ on the network.

Following this, we now need to set the permissions for your new share folder.

To do this, simply click the ‘access’ tab in the same dialogue box like so:

If you would like to restrict access to this folder:

Select ‘Only allow access to specific users’.
Use the tick boxes to confirm which users can access the folder in question.

If you would like everyone to access the folder:

Select ‘Allow access to everyone’.

When complete, click ‘OK’ to close the dialogue box.

To remove any shared folder from Samba, simply choose the relevant folder in the configuration tool and click the ‘red icon’. Don’t worry, this action will not delete the folder or its contents.

And that’s it, your share folders are now active.

Configuring Samba on the command line

Using the graphical tools has its advantages, but if you really want to control every aspect of your Samba server, nothing beats the command line.

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

cp /etc/samba/smb.conf /etc/samba/smb.conf.bak

And open the content of the current configuration file like so:

sudo nano /etc/samba/smb.conf

We are now going to configure the Samba Server by using a basic example to get you started …

I am not going to explain every aspect of Samba (as most server administrators will want to read the official documentation found at http://www.samba.org/) so instead I have provided you with a template in order to get you up and running in no time at all. You should consider this to be a basic template only. It is not definitive by any means and nor do I expect you to replicate it but if you do use it – remember to change the values shown with values relevant to your specific needs or network requirements:
And here is the template:

[global]
    unix charset = UTF-8
    # -------------------------------------------
    # DEFINE YOUR WORKGROUP AND COMPUTER NAME HERE
    workgroup = YOUR-WORKGROUP-NAME
    server string = YOUR-COMPUTER-NAME
	  netbios name = YOUR-COMPUTER-NAME
    # -------------------------------------------
    dns proxy = no
    # -------------------------------------------
    # IF YOU SET BIND INTERFACES TO YES, TO AVOID LOG ERRORS,
	  # MAKE SURE YOUR SAMBA SERVICE STARTS AFTER THE ETHERNET CARD IS SWITCHED ON
    # bind interfaces only = no
    # bind interfaces only = yes
    bind interfaces only = no
    # ADD THE ETHERNET CARD AND IP ADDRESSES YOU ALLOW
    interfaces = eth0 127.0.0.0/8 192.168.1.0/24
    # -------------------------------------------
    # SAMBA LOG FILES
    log file = /var/log/samba/log.%m
    max log size = 1000
    syslog only = no
    syslog = 0
    # -------------------------------------------
    panic action = /usr/share/samba/panic-action %d
    # LIMIT ACCESS TO USERS ONLY
    security = user
    # USING TDBSAM
    encrypt passwords = true
    passdb backend = tdbsam
    obey pam restrictions = yes
    unix password sync = yes
    passwd program = /usr/bin/passwd %u
    passwd chat = *Enter\snew\s*\spassword:* %n\n *Retype\snew\s*\spassword:* %n\n *password\supdated\ssuccessfully* .
    pam password change = yes
    map to guest = bad user
    usershare allow guests = no
    # -------------------------------------------
    # INCLUDE THIS SECTION TO DISABLE PRINTERS/CUPS ONLY
    #load printers = no
    #printing = bsd
    #printcap name = /dev/null
    #disable spoolss = yes
    # -------------------------------------------
    # DIRECTORIES
    # -------------------------------------------
    # ENABLE HOME FOLDER ACCESS
    [homes]
        comment = Home Directories
        browseable = no
        writable = yes
        valid users = %S
        valid users = MYDOMAIN\%S
        create mask =0755
        directory mask =0755
    # -------------------------------------------
    # EXAMPLE FOLDER WITH LIMITED ACCESS, UNCOMMENT AND CUSTOMISE AS NECESSARY
    #[example]
    #   comment = example share folder on my-computer-name
    #   path = /foldername/foldername/
    #   browseable = yes
    #   guest ok = no
    #   writable = yes
    #   create mask = 0755
    #   directory mask = 0755
    #   valid users = @your-username
    #   force group = your-username-or-group
    #   force create mode = 0755
    # -------------------------------------------

To un-comment a line, simply remove the # (hash) symbol.

Either copy the content of this file to /etc/samba/smb.conf or simply work through the samba configuration file using my template as a guide. Don’t worry, there’s no rush …

When done, ‘save’ the file, ‘close’ it and restart the Samba service in order that it can apply the new settings by using:

sudo service smbd restart && sudo service nmbd restart

Creating (Linux) users and home folders on the command line

Although a complete tutorial on ‘working with files, directories and users’ is beyond the scope of this current article, adding a new user account and creating a home folder is a relatively simple task – just remember to replace my values with something relevant to your needs.

To create a new user with an associated home folder on your server or desktop, use:

sudo adduser new-username-here

Ubuntu will now ask you a few basic questions and then complete the task of [a] creating the new user, [b] creating a specific group for that user and then [c] creating a home folder for the user in question.

And all with a single command :-)

To explain this, here is a step-by-step example with the resulting output. I am going to create a new user called ‘new-username-here’.

The process begins after I type the following command:

sudo adduser new-username-here

Ubuntu will now start the process:

Adding user `new-username-here' ...
Adding new group `new-username-here' (1004) ...
Adding new user `new-username-here' (1004) with group `new-username-here' ...
Creating home directory `/home/new-username-here' ...
Copying files from `/etc/skel' ...

At this point you will be asked to create a password:

Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully
Changing the user information for new-username-here

At this point you will be asked to complete some user-based details:
(to leave a field blank, just press the key)

Enter the new value, or press ENTER for the default
	Full Name []: new-username-here
	Room Number []:
	Work Phone []:
	Home Phone []:
	Other []:

At this point you will be asked to confirm your instruction:

Is the information correct? [Y/n]

Wasn’t that easy :-)

Adding (Samba) users on the command line

Finally let’s create a Samba user based on the example above with the following command.

smbpasswd -a new-username-here

You will be asked to confirm a password, but it is as simple as that …

Remember, you will need to give the relevant username and password to your network user.

So until next time …
I hope you continue to enjoy using Ubuntu 12.04 LTS Precise Pangolin.

An Introduction to C

Surabhi Saxena — Sat, 19 May 2012 15:00:53 +0000

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 /*Library file access*/
#include /*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 :%f", 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 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 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 
#include 
#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 .

What’s New in Chrome 19

Craig Buckler — Thu, 17 May 2012 17:24:05 +0000

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.

Two New Proposals to Solve the CSS3 Vendor Prefix Crisis

Craig Buckler — Tue, 15 May 2012 15:41:07 +0000

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:

Vendors implement experimental CSS3 properties using their own prefix, e.g. -webkit-transform, -moz-transform, -ms-transform, -o-transform.
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.
Once a property becomes a W3C recommendation, all browser vendors can provide a stable unprefixed property, e.g. transform.
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:

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.
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.
Once a property becomes a W3C recommendation, all browser vendors can provide a stable unprefixed property, e.g. transform…
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.
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?

Ubuntu 12.04 LTS Precise Pangolin: Networking tips and tricks

Jonathan Hobson — Mon, 14 May 2012 15:00:50 +0000

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

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.

Scalable Vector Graphics: an Overview

Craig Buckler — Fri, 11 May 2012 18:30:38 +0000

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:

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:

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

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!

My Website’s Broken: 5 Steps to Determine What’s Wrong

Craig Buckler — Wed, 09 May 2012 15:30:03 +0000

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?

Are You as Smart as Kevin Yank? Take the PHP & MySQL Quiz and Find Out.

Mick Gibson — Wed, 09 May 2012 06:24:16 +0000

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 :)

Judgment Day Arrives: Opera Implements the CSS3 Webkit Prefix

Craig Buckler — Sat, 05 May 2012 12:05:30 +0000

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:

-o- prefix	-webkit- alias
-o-linear-gradient	-webkit-linear-gradient
box-shadow	-webkit-box-shadow
-o-transform	-webkit-transform
-o-transform-origin	-webkit-transform-origin
border-radius	-webkit-border-radius
border-top-left-radius	-webkit-border-top-left-radius
border-top-right-radius	-webkit-border-top-right-radius
border-bottom-left-radius	-webkit-border-bottom-left-radius
border-bottom-right-radius	-webkit-border-bottom-right-radius
-o-transition	-webkit-transition
-o-transition-delay	-webkit-transition-delay
-o-transition-duration	-webkit-transition-duration
-o-transition-property	-webkit-transition-property
-o-transition-timing-function	-webkit-transition-timing-function

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.

Add a Web Console to Your Toolbox, Part 1

Jeff Friesen — Thu, 03 May 2012 15:00:43 +0000

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 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 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 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.

Console Demo

You might have to press the Tab key or click the canvas to give it keyboard focus.

Listing 1: Echoing entered text on the console

Listing 1 describes ConsoleDemo.html. This listing is fairly straightfoward, except perhaps for the 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

`Browser Shell`


      
      
      You might have to press the Tab key or click the canvas to give it keyboard focus.
      
        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.
Note
All files pertaining to this article are located in code.zip.