Sandfield That’s Technical

Arduino - Not just childs play

Brent Tyler-Davies — Thu, 23 Oct 2014 11:00:00 GMT

An Arduino is essentially a small portable computer that is capable of taking inputs and interpreting that information to control various outputs.

Arduino bridges programming and the physical world. These are not merely for kids but allow you to build all types of prototypes and projects, including GPS, tweeting and camera snapping.

When for a school project my daughter wanted to invent a locking pencil case, I saw this as a good excuse to get an Arduino.

Our first step was to get a Sparkfun Inventor’s Kit from Mindkits, with some additional components that we would be needing.

The Kit is a great way to get started as it includes a guide book and all the pieces needed to get 14 basic circuits working.

To get a circuit constructed, you plug the electronic components (wires, registers, motors) into a breadboard. No soldering is required. You then connect wires from the ports on the Arduino to the breadboard.

To make it work, you write a sketch (an Arduino term for a program) using the Arduino software. You compile the sketch and load it through the USB cable onto the Arduino. Once loaded, if the circuit is connected correctly, things start happening.

The good part with the Kit, is that all these steps are documented for you, and it provides 14 different circuits for you to construct with example sketches, ready for you to load and run.

Sketch for controlling a motor:

// We'll be controlling the motor from pin 9.
const int motorPin = 9;
　
void setup()
{
// Set up the motor pin to be an output:
pinMode(motorPin, OUTPUT);
}
void loop()
{
motorOnThenOff();
}
　
// This function turns the motor on and off like the blinking LED.
// Try different values to affect the timing.
void motorOnThenOff()
{
int onTime = 3000; // milliseconds to turn the motor on
int offTime = 3000; // milliseconds to turn the motor off
digitalWrite(motorPin, HIGH); // turn the motor on (full speed)
delay(onTime); // delay for onTime milliseconds
digitalWrite(motorPin, LOW); // turn the motor off
delay(offTime); // delay for offTime milliseconds
}

As you can see, a sketch is quite simple in its elements, but is very powerful with the results.

The Arduino is a great way to get your child interested in electronics and programming, as it provides a simple and tangible way of relating electronics to the real world. They can experiment by adjusting the example sketches to create new behaviour and learn basic programming skills.

So after experimenting with how the Arduino works, my daughter decided that she wanted to have a keypad that would accept a code to unlock the pencil case.

So I helped her turn her design into a working prototype. We combined three Arduino sketches to make a keypad controlled solenoid which moved to open the lock.

The three example sketches used were:

Electronic motor (replaced with a solenoid)
Buzzer
Keypad

The hardest part was actually making the latch for the solenoid to click into.

Below is the final Pencil Passlock. Given the space that the Arduino took up, there wasn’t much room for the pencils.

// Pencil Passlock - keypad and solenoid
/*
note 	frequency
c 262 Hz
d 294 Hz
e 330 Hz
f 349 Hz
g 392 Hz
a 440 Hz
b 494 Hz
C 523 Hz
*/
const int buzzerPin = 9;
const int duration = 150;
const int note = 262;
const int solenoidPin = 10;
const int onTime = 3000; // milliseconds to turn the solenoid on
const int offTime = 3000; // milliseconds to turn the solenoid off
const int numRows = 4; // number of rows in the keypad
const int numCols = 3; // number of columns
const int debounceTime = 20; // number of milliseconds for switch to be 
// stable  keymap defines the character returned when the corresponding 
// key is pressed 
const char keymap[numRows][numCols] = {
{ '1', '2', '3' } ,
{ '4', '5', '6' } ,
{ '7', '8', '9' } ,
{ '*', '0', '#' }
};
// this array determines the pins used for rows and columns
const int rowPins[numRows] = { 8, 7, 6, 5 }; // Rows 0 through 3
const int colPins[numCols] = { 4, 3, 2 }; // Columns 0 through 2
String passcode = "4224";
String code;
void setup()
{
code = "";
// Set up the motor pin to be an output:
pinMode(solenoidPin, OUTPUT);
// Set up the buzzer:
pinMode(buzzerPin, OUTPUT);
// Set up the serial port:
Serial.begin(9600);
for (int row = 0; row < numRows; row++)
{
pinMode(rowPins[row],INPUT); // Set row pins as input
digitalWrite(rowPins[row],HIGH); // turn on Pull-ups
}
for (int column = 0; column < numCols; column++)
{
pinMode(colPins[column],OUTPUT); // Set column pins as outputs
digitalWrite(colPins[column],HIGH); // Make all columns inactive
}
}
　
void loop()
{
char key = getKey();
if( key != 0) { // if the character is not 0 then
// it's a valid key press
Serial.print("Got key ");
Serial.println(key);
tone(buzzerPin, note, duration);
delay(duration); // wait for tone to finish
if( isDigit(key) ) {
code = code + key;
}
if( key == '*') {
code = "";
}
if( key == '#') {
Serial.print("Got code ");
Serial.println(code);
if( code.compareTo(passcode) == 0){
Serial.println("Right code");
tone(buzzerPin, note, duration);
delay(duration); // wait for tone to finish
turnSolenoidOn();
}
code = "";
}
}
}
　
void turnSolenoidOn()
{
digitalWrite(solenoidPin, HIGH); // turn the motor on (full speed)
delay(onTime); // delay for onTime milliseconds
digitalWrite(solenoidPin, LOW); // turn the motor off
delay(offTime); // delay for offTime milliseconds
}
// returns with the key pressed, or 0 if no key is pressed
char getKey()
{
char key = 0; // 0 indicates no key pressed
for(int column = 0; column < numCols; column++)
{
digitalWrite(colPins[column],LOW); // Activate the current column.
for(int row = 0; row < numRows; row++) // Scan all rows for
// a key press.
{
if(digitalRead(rowPins[row]) == LOW) // Is a key pressed?
{
delay(debounceTime); // debounce
while(digitalRead(rowPins[row]) == LOW); // wait for key
    // to be released
key = keymap[row][column]; // Remember which key
     // was pressed.
}
}
digitalWrite(colPins[column],HIGH); // De-activate the current column.
}
return key; // returns the key pressed or 0 if none
}

To get going yourself, check out the following links:

https://www.mindkits.co.nz/

https://www.mindkits.co.nz/store/kits/sparkfun-inventors-kit-v3-1

https://learn.sparkfun.com/

AngularJS

Mathew Porter — Wed, 20 Nov 2013 11:00:00 GMT

What is AngularJS?

AngularJS is an open-source JavaScript framework that has been designed for the construction of single-page applications. It was first released in 2009 and is currently built and maintained by Google as well as the community.

AngularJS was built with the MVC software pattern in mind and encourages loose coupling between presentation, data, and logic layers. It brings traditional server-side components such as view dependent controllers to the client-side. This removes much of the processing burden from the server and leads to a much lighter and more responsive web application.

Where does AngularJS fit in?

AngularJS is considered to be what HTML would have been had it been designed for applications. HTML is a great markup language for building static documents. However it doesn’t really contain much in the way of dynamic application building, and as a result, building web applications with HTML is an exercise in “what do I have to do to trick the browser into doing what I need it to do”.

This issue between dynamic applications and static documents is often solved with:

a library - a collection of functions where your code is in charge and it calls into the library when it needs to perform a specialised task e.g. jQuery.
a framework - a particular implementation of a web application where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific e.g. knockoutJS.

AngularJS takes a different approach to these. It attempts to enhance HTML for application building by adding new constructs known as directives. Directives are applied as extra attributes to HTML elements and are used by AngularJS to add additional functionality to a web application.

Here are some common AngularJS directives that help improve HTML for application building.

ng-app

Declares an element as the root of an application and is used to initialise directives that are nested inside it.

ng-bind

Automatically changes the text of a HTML element to the value of a given expression.

ng-model

Similar to ng-bind, but facilitates two-way data binding between a view and the angular scope object (explained later).

ng-class

Allows class attributes to be dynamically loaded into the page. This is useful because it allows the developer to change the class attribute of a particular element based on the result of an expression.

ng-controller

Specifies a JavaScript controller class that can be used to evaluate HTML expressions.

ng-repeat

Used to iterate through an array of items and render a block of html for each item in the collection.

ng-show & ng-hide

Used to conditionally show or hide an element which is determined by the result of a boolean expression.

Core components

Every angular application is comprised of the following core components which follow the Model-View-Controller (MVC) software engineering pattern.

Model (Scope)

In AngularJS scope is an object that is used to define the model of an application. Each application can have multiple scopes which are arranged in hierarchical structure to mimic the DOM. Scope can be thought of as the link between the application controller and the view.

When an application is loaded, directives set up watchers on the scope. These watchers enable directives to be notified of value changes and perform actions based on those changes as they occur. As you interact with an AngularJS application, you’ll notice that variables bound to the scope automatically update the page as changes occur. This gives the user a dynamic experience without having to perform postbacks to display new information.

View

The view is a projection of the data model (scope) which is set up by the controller. The view consists of plain HTML code and AngularJS directives.

Controller

In AngularJS controllers are nothing but plain JavaScript functions which are bound to a particular scope object. Controllers reside in the code behind the view and their job is to construct the data model and publish it to the view for rendering.

Key points

Controllers are written in JavaScript and should not contain any rendering information, such as DOM references or HTML fragments.
Views are written in HTML and should not contain any behaviour.
Controllers are not aware of the view they are attached to, so it’s possible to have multiple views attached to the same controller. This is useful because it enables you to create device specific views. For example, you can have a separate view for mobile and desktop devices and have them use the same controller for functionality.

<html ng-app>
<head>
<title>Controllers</title>
<script src="../Scripts/angular.min.js"></script>
<script type="text/javascript">
  //Controller takes $scope object as a parameter
  //to establish link to the view
  function ContactController($scope) {

    $scope.contacts = ["John", "Jane"];

      $scope.add = function () {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
    }
  }
</script>
</head>
<body>
<h1>Controllers</h1>

<!-- View with controller defined -->
<div ng-controller="ContactController">
  Contact <input type="text" ng-model="newcontact"/>
          <button ng-click="add()">Add</button>
  <h3>Contacts</h3>
  <ul>
    <!-- Iterate over the contact array defined in scope -->
    <li ng-repeat="contact in contacts">{{contact}}</li>
  </ul>
</div>
</body>
</html>

Filters

A common requirement when building an application is formatting the data before it is displayed to the user. AngularJS provides filters for this purpose. Filters are applied to expressions on the page, they can be chained together, and some can also take optional parameters.

To apply a filter we use the following syntax.

{{ expression | filter:param }}

Some common filters include:

Number - By default, the number filter will format a number to two decimal places. This can also take decimal places as an optional parameter.

{{ "12345.67123" | number:3 }} evaluates to 12345.671 at runtime.

Currency - Formats a number as currency. This can also take an optional symbol parameter.

{{ "12345.67" | currency:"NZD$" }} evaluates to NZD$12,345.67 at runtime.

Date - Formats a JavaScript date variable. This can also take an optional date format parameter, which could be one of the predefined date strings provided by AngularJS or a standard date format string.

{{ dateVariable | date:"mediumDate" }}

OrderBy - A very useful filter which can be used to apply sorting to an array. In its simplest form the orderBy filter accepts a string for evaluation and uses the result for sorting.

<html ng-app>
<head>
  <title>Date Filters</title>
  <script src="../Scripts/angular.min.js"></script>
  <script type="text/javascript">

    function DateController($scope) {
      $scope.currentDate = new Date();
    }

  </script>
</head>
<body>
  <h1>Date Filters</h1>
  <table ng-controller="DateController">
    <tr><th align="left">Filter</th><th align="left">Output</th></tr>
    <tr><td>default:</td><td>{{ currentDate | date }}</td></tr>
    <tr><td>mediumDate:</td><td>{{ currentDate | date:"mediumDate" }}</td></tr>
    <tr><td>short:</td><td>{{ currentDate | date:"short" }}</td></tr>
    <tr><td>fullDate:</td><td>{{ currentDate | date:"fullDate" }}</td></tr>
    <tr><td>longDate:</td><td>{{ currentDate | date:"longDate" }}</td></tr>
    <tr><td>shortDate:</td><td>{{ currentDate | date:"shortDate" }}</td></tr>
    <tr><td>mediumTime:</td><td>{{ currentDate | date:"mediumTime" }}</td></tr>
    <tr><td>shortTime:</td><td>{{ currentDate | date:"shortTime" }}</td></tr>
  </table>
</body>
</html>

Validation

AngularJS makes it very simple to add client-side validation without much effort. Although client-side validation doesn’t ensure that an application will be secure, it does allow us to provide feedback to the user on the current state of a form without having to call the server.

Some common AngularJS validators include:

required - Provided in HTML5 and utilised by AngularJS. This ensures that the user enters a value into an input field.

ng-minlength - Checks whether a field value is at least a specified number of characters in length.

ng-maxlength - Checks whether a field value is no greater than a specified number of characters in length.

ng-pattern - Checks whether a value matches a given regex pattern.

AngularJS also provides validation properties on the $scope object. This is useful because it enables us to react to changes to validation in real time.

Validation properties available through the scope object include:

$pristine - a boolean variable that evaluates to “True” if the user has not interacted with the form yet.

$dirty - a boolean variable that evaluates to “True” if the user has already interacted with the form.

$valid - a boolean variable that evaluates to “True” if all of the containing forms and controls are valid.

$invalid - a boolean variable that evaluates to “True” if at least one containing control or form is invalid.

$error - an object hash containing references to all invalid controls or forms. This is useful for identifying specific controls that are invalid on the page.

When AngularJS validates a form, special classes are applied to the element based on the validation applied to the element. This means that CSS can be used to style the page based on validation.

AngularJS applies the following validation classes to elements.

.ng-pristine - added when the user has not interacted with the control being validated.

.ng-dirty - added if the user has interacted with the control being validated.

.ng-valid - added if the control being validated is valid.

.ng-invalid - added if the control being validated is invalid.

<html ng-app>
<head>
  <title>Validation</title>
  <style type="text/css">
     input.ng-valid 
     {
       background-color:lightgreen;
     }
     input.ng-invalid 
     {
       border:1px solid red !important;
     }
     input.ng-pristine 
     {
       border:1px solid #dadada !important;
     }
     .error 
     {
       display:inline;
     }
  </style>
  <script src="../Scripts/angular.min.js"></script>
</head>
<body>
  <form name="frmSignUp">
    <div>
      <label>Enter your name</label>

      <input type="text"
         placeholder="Name"
         class="form-control"
         name="name"
         ng-model="name"
         ng-minlength="3"
         ng-maxlength="20" 
         required  />

      <br />
      <button type="submit"
          ng-disabled="frmSignUp.$invalid">Submit</button>

      <div class="error"
         ng-show="frmSignUp.name.$dirty && frmSignUp.name.$invalid">

           <small class="error"
                  ng-show="frmSignUp.name.$error.required">
              Your name is required.
           </small>

           <small class="error"
                  ng-show="frmSignUp.name.$error.minlength">
              Your name is required to be at least 3 characters.
           </small>

           <small class="error"
                  ng-show="frmSignUp.name.$error.maxlength">
              Your name cannot be longer than 20 characters.
           </small>

       </div>
    </div>
  </form>
</body>
</html>

Conclusion

AngularJS makes building applications faster by removing boilerplate code and presenting a higher level of abstraction. Its in-built expressions and data binding enables AngularJS to validate, format, and display updated information on the page without performing post backs, making AngularJS an ideal component for building single page applications.

AngularJS was built with the Create, Read, Update and Delete (CRUD) application in mind, though in our opinion the best fit would be for simple CRUD applications. Applications that require intensive and tricky DOM manipulation are not a good fit for AngularJS, so a library such as jQuery should probably be used in these cases.

References

WordPress Security

Ana Petreska — Thu, 22 Aug 2013 12:00:00 GMT

WordPress is a popular and widely used content management system. In fact, around 19% of all websites to date are running on WordPress. The growing popularity and use of WordPress as a CMS makes securing it more important than ever. According to a security article written by WPTemplate.com the number of WordPress websites that were hacked in 2012 alone, reached a whopping 170,000. It is completely up to the website owner to ensure that their WordPress website is secured as tightly as possible to avoid being compromised.

WordPress security encompasses three major areas:

the hosting environment
the database environment
WordPress specific settings and files

This article covers the first of the three areas mentioned above. As we host a number of our clients' websites, we need to ensure that these websites are as secure as possible in order to avoid malicious attacks to the websites, or even worse, to our servers.

According to WPTemplate.com, one of the main reasons WordPress sites get hacked is due to poor security considerations in the hosting environment.

At Sandfield, our systems and websites are built and hosted on Windows servers. This makes dealing with WordPress slightly more complicated as the majority of WordPress websites are hosted on Linux/Apache environments and thus the documentation for a Windows environment is harder to find. I wrote this article in the hopes that my experiences will save others time and effort and also to illustrate that securing WordPress websites on a Windows/IIS environment can be done effectively.

The Initial Setup

Web Platform Installer (Web PI) is a tool that installs everything you need to get WordPress up and running on a Windows machine.

What is installed?

Web PI will only install dependencies to WordPress that your current environment doesn’t have. This includes:

PHP
IIS
WordPress
MySQL
IIS URL Rewrite Module
- https://www.iis.net/downloads/microsoft/url-rewrite
- This module is used to get “Pretty Permalinks” for WordPress working.
WinCache Extension for PHP
- https://www.iis.net/downloads/microsoft/wincache-extension
- A PHP accelerator that is used to increase the speed of PHP applications on Windows.
- Stores compiled versions of PHP scripts in memory in order to be readily available when needed.

What accounts get created?

During installation, you will be asked to create an account for the MySQL instance. You will need to set up the administrator (root) password for the MySQL database.

Be sure to save this information as you will need it later in the process.
Make sure you don’t use default passwords.
Remember to change the administrator's username from root to something harder to guess.
You will then be prompted to enter the necessary information for your WordPress website.
When it comes to entering a series of secret keys, I found this tool to be quite handy to generate four unique keys on the fly.

WordPress will now be successfully installed on your Windows machine.

IIS and File Permissions

This area cost me a lot of time and patience to get right due to the limited documentation and the different versions of IIS on different Windows servers. When initially starting up, I ran into many permission related issues. These ranged from not being able to automatically update WordPress and/or plugins, to getting 500 Internal errors upon clicking images when the files were uploaded to the server via a third party plugin. After countless failed attempts and much trial and error I have finally come up with a permissions system on IIS that is as tightly secured as possible and runs as expected.

Firstly, you should never set your WordPress file permissions to be accessible by the generic “Everyone” group. This will give every user on the server access to your files and a malicious attacker could use this to their advantage.

IIS 7

In IIS 7, the IIS web server by default runs under its own user and user group - IUSR and IIS_IUSRS respectively. It is acceptable to set the file permissions on the website files to be read by the IIS_IUSRS group. Acceptable but not ideal as the IUSR runs as a NETWORK SERVICE account which can be tampered with by other services that run under the same identity. If possible we recommend upgrading to IIS 7.5.

IIS 7.5

With the release of IIS 7.5, the IIS worker processes became isolated from other Windows system services through a feature called “Virtual Accounts”. This feature allows IIS to create unique accounts for each Application Pool.

IIS 7.5 on Windows Server 2008 R2

If you are running IIS 7.5 on Windows Server 2008 R2, you don't have to do anything to use the new identity. For every application pool created, the IIS Admin Process (WAS) will create a virtual account with the same name as the Application Pool, and will run the Application Pool’s worker processes under this account. This gives another layer of security to the server as now files can be granted read/write access only by the specified application pool identity user.

IIS 7.5 on Windows Server 2008

If you are running IIS 7.5 on Windows Server 2008, you have to change the IdentityType property of the Application Pools you create to "AppPoolIdentity". Here is how:

Open IIS Manager.
Open the Application Pools node underneath the machine node. Select the Application Pool you want to change to run under an automatically generated Application Pool Identity.
Right click the Application Pool and select "Advanced Settings..."
Set the Process Model "Identity" to "ApplicationPoolIdentity".

Securing your files (IIS 7.5 on 2008 and 2008 R2)

Once you have your App Pool Identity sorted out, you need to set authentication on IIS to use the Application Pool Identity as opposed to the default account IUSR.

In IIS Manager, click on the Website node.
Double click the Authentication icon
Right click on the authentication your website uses (usually Anonymous) and select “Edit”
Select “Application pool identity” as the user that IIS will execute under.

Lastly, you need to change the permissions on your files. To grant access to this new virtual account, you would go to the root folder of your website installation. Right click -> “Properties”. Remove all groups that are not applicable, e.g. Everyone, Users. Do not remove System or Administrators, then click on “Edit…”, then on “Add”

In the object name to select, type in “IIS APPPOOL\App Pool Name”. (Make sure the location is set to the top level computer). Replacing “App Pool Name” with your application pool, in this case “Test”.

When you click “Check Names”, the name has been accepted if only the Application Pool name remains in underlined font.

Once done, make sure the new Application Pool virtual account has the appropriate access to the folder selected. If it was the top level WordPress folder, then the Application Pool virtual account should only have Read/Execute access. Click OK.

To ensure that these permissions get propagated all the way throughout the website folder structure, click on the Security tab -> Advanced and check the box that says “Replace all child object permission entries with inheritable permission entries from this object”.

Once you are done with this step, all that is left to do is to give the new Application Pool virtual account write access to the folders you would like it to be writable to. If you want to update plugins automatically, the webserver needs “Write” access to the plugins folder. Similarly with theme updates. Generally it is okay to have the wp-content folder writable by the webserver, but you can restrict this as much as you like.

If you have made it this far, congratulations. And remember, make sure you test your website!

References

https://venturebeat.com/2013/07/27/19-percent-of-the-web-runs-on-wordpress/
https://codex.wordpress.org/Installing_on_Microsoft_IIS
https://codex.wordpress.org/Installing_WordPress#Easy_5_Minute_WordPress_Installation_on_Windows
https://docs.joomla.org/How_do_Windows_file_permissions_work%3F
https://stackoverflow.com/questions/14934006/iis-iusrs-and-iusr-permissions-in-iis8
https://chris.wastedhalo.com/2011/01/wordpress-upload-permissions-on-iis-7-fix/
https://www.wptemplate.com/features/safety-and-security-of-wordpress-blog-infographic.html

Web SQL

Phillip Moon — Sun, 21 Jul 2013 12:00:00 GMT

Web SQL and its possible applications

These days it's becoming more common that smart phones and tablets are being used for business applications. Some business applications need to store complex data on the device, and this is where Web SQL excels. Web SQL is a browser based API that allows data to be stored and retrieved with basic SQL statements. Having data stored on the device using Web SQL gives the ability to access information without the need to connect to a server.

The alternative to Web SQL is IndexedDB, a NoSQL approach. IndexedDB allows you to store objects with the ability to query by a key and a combination of other attributes in the object. In late 2010 Web SQL was deprecated, but is still currently supported on the majority of mobile platforms, whereas IndexedDB is not. For this reason, if you are developing web applications for mobile platforms Web SQL is still a practical database to use.

We use Web SQL as a means of data storage for a web application that runs on tablet devices for a client. The application handles large forms that users fill out with data that's stored and then periodically sent to a web server (if an Internet connection is available). Using Web SQL allows data to be stored locally, and thus gives the ability for the web application to be fully functional, even when an Internet connection is not available. For the client this was critical as the end users weren't always guaranteed to have access to an Internet connection.

Our Experience with Web SQL

Implementing Web SQL had a small learning curve as SQL is a common language used to query all sorts of databases. If you are familiar with JavaScript, learning to make calls to the Web SQL API is fairly straightforward. The only difficulty I discovered while implementing Web SQL was the asynchronous execution and callbacks. For the majority of the time where you are doing basic SELECTs, INSERTs, or UPDATEs as a single action, this is not an issue. However, if you need to execute an INSERT, UPDATE, and then a SELECT in that order, you will need to carefully manage the asynchronous callbacks for each query call. For example:

If you wanted to update a record and then select it out, and the select finished executing before the update, it may return old data.

Using Web SQL

Setup/Open DB

The following code opens the Web SQL DB. Opening the Web SQL DB is required each time a page is loaded.

function setupDB() {
  var dbName = 'Sandfield_DB';
  var dbVersion = '1.0';
  var dbDescription = 'This is a Web SQL DB used for Sandfield.';
  var dbSize = 2 * 1024 * 1024; //2MB IN BYTES
  db = openDatabase(dbName, dbVersion, dbDescription, dbSize);
}

Query DB

As previously mentioned, to query the Web SQL DB you use SQL. The following function takes in three parameters: the SQL query, parameters for the SQL query (optional), and a success function that will be executed when the query has successfully completed.

function dbQuery(query, params, fncOnSuccess) {
 //CREATE TRANSACTION
 db.transaction(function (tx) {
   tx.executeSql(query, params, function (tx, results){
     successCallback(tx, results, fncOnSuccess); }, sqlErrorHandler);
 });
}

Here are a couple of examples of how you could use this function,

 var query = 'SELECT * FROM tblCustomer';
   var successFnc = function (tx, results) {
     alert('The query has finished executing.');
   }
   dbQuery(query, null, successFnc);

 var query = 'UPDATE tblCustomer SET ' + 
   'Name = ?, Address = ?, PhoneNumber = ? ' + 
   'WHERE CustomerID = 1';
 var params = [ 'Joe Bloggs', '123 Sesame Street', '123-45678' ];
 var successFnc = function (tx, results) {
   alert('The customer has successfully updated.');
 }
 
 dbQuery(query, params, successFnc);

Notice in example (2.) that the params array is used to replace the “?” placeholders in the query. This is the preferred way to put dynamic values into the query, as opposed to building the query string by concatenating values.

Display Results

The following function is used as the success function from a query. Inside the results parameter is a rows object that contains the rows of data returned from the query. You can use the Object.keys JavaScript function to read the columns returned from the query; here it uses it to write out the table header to show the column names. Once it has written out the rows of results into the table, it finally calls otherSuccessCallback.

function successCallback(tx, results, otherSuccessCallback) { 
 var rows = results.rows;
 var rowsCount = rows.length;
 var resultsToDisplay = '';
 var tbl = document.createElement('table');

 for (var i = 0; i < rowsCount; i++) {
   var currentRow = rows.item(i);
   var keys = Object.keys(currentRow);
   var keysCount = keys.length;
   var tblRow = document.createElement('tr');

   if (i == 0) {
      for (var h = 0; h < keysCount; h++) {
         var tblHeader = document.createElement('th');

         tblHeader.innerHTML = keys[h];
         tblRow.appendChild(tblHeader);
      }

      tbl.appendChild(tblRow);
      tblRow = document.createElement('tr');
    }

   for (var k = 0; k < keysCount; k++) { 
         var tblCol = document.createElement('td'); 

         tblCol.innerHTML = currentRow[keys[k]];
         tblRow.appendChild(tblCol);
      }
 
      tbl.appendChild(tblRow);
   }

   tableResults().appendChild(tbl);

   if (otherSuccessCallback) {
      otherSuccessCallback();
   }
}

Handle SQL OnError

The following is a simple JavaScript function that handles any errors that may occur when trying to query the Web SQL DB.

 function sqlErrorHandler(tx, error) {
   console.log(error.code + ' - ' + error.message);
 }

 tx.executeSql(query, params, fncOnSuccess, sqlErrorHandler);

The error codes and messages generally lack detail so you could improve the error handling by including the query and params that failed to execute. Having this information is very useful to debug any issues you may experience.

function sqlErrorHandler(tx, error, query, params) {
   console.log(error.code + ' - ' + error.message);
   console.log('Query: ' + query);
   console.log('Params: ' + params);
}

tx.executeSql(query, params, fncOnSuccess, 
   function (tx, error) {
      sqlErrorHandler(tx, error, query, params);
   }
);

A list of error codes can be found at https://www.w3.org/TR/webdatabase/#errors-and-exceptions

Stored Procedures

JavaScript functions can be considered as a stored procedure for making calls to your Web SQL DB. A great way to have a consistent structure/schema for these functions is to store them in a JavaScript object.

var stp = {
   Customer: {
      Select: function (callback) { 
         //Select out customers from DB
      }
   },
   Job: {
      Select: function (callback) {
         //Select out jobs from DB
      }
   }
};

From the structure above you will have clean and manageable code, and will find it easier to chain Web SQL transactions.

stp.Customer.Select(stp.Job.Select) will firstly select customers and then once that is complete it will select out jobs.

Summary

If you need a browser API to store and query data effectively on many mobile platforms (Android, iOS, Blackberry, etc), Web SQL is a powerful API to use. Setting up your web application to use Web SQL is simple if you are familiar with JavaScript and SQL. With the use of the example code above, you can add basic Web SQL functionality to your web application. The following links are great if you want to read and learn more about Web SQL,

Raw JavaScript vs jQuery

Logan Benjamin — Thu, 27 Jun 2013 12:00:00 GMT

Recently in the office there has been some discussion of when to use raw JavaScript and when to use jQuery. In some cases I have seen people using jQuery like its a competition to replace all raw JavaScript.

My general theory is that raw JavaScript will be faster performance-wise and jQuery quicker for development, so I decided to do put it to the test.

Note that these are not necessarily real-world scenarios or the best examples of how to code.

Test 1 - Incrementing a textbox counter

The first test is incrementing the value in a textbox.

Raw JavaScript

function incrementCounter() {
    document.getElementById('txtCounter').value++;
}

jQuery

function incrementCounter() {
    var txtCounter = $('#txtCounter');

    txtCounter.val(parseInt(txtCounter.val()) + 1);
}

Raw JavaScript	0.003 ms
jQuery	0.010 ms

I ran this test multiple times to get an average time that it ran, the times above are for it running once. In this case the raw JavaScript is more simple and about 3 times faster than jQuery. Of course, if you were doing this just once the speed difference is negligible.

Test 2 - Appending HTML

A more common task is appending some HTML to a table or div. Commonly in raw JavaScript I see people use the innerHTML property and when using jQuery the .append function.

Shared function

function buildHTML(data) {
    var html = '';

    // LOOP THROUGH DATA
        html += name + ': ' + value + '<br />';
    // END LOOP

    return html;
}

Raw JavaScript

function appendRows(data) {
    document.getElementById('div').innerHTML += buildHTML(data);
}

jQuery

function appendRows(data) {
    $('#div').append(buildHTML(data));
}

Raw JavaScript	0 ms	4 ms	7 ms	10 ms	12 ms	15 ms	18 ms	20 ms	24 ms
jQuery	6 ms	3 ms	3 ms	3 ms	2 ms	2 ms	2 ms	2 ms	2 ms

If there is nothing in the div then both methods run fairly quickly. However once there is HTML in the div the raw JavaScript method gets incrementally slower as it appears the browser has to destroy the contents of the div and reload the entire div’s HTML.

The jQuery append function actually builds a DOM object then appends it using the appendChild function. To get a similar result in raw JavaScript you would need to make your code look something like the following:

Raw JavaScript DOM Object

function appendRows(data) {
    var append = document.createElement('div');
    append.innerHTML = buildHTML(data);

    document.getElementById('div').appendChild(append);
}

Final results

Raw JavaScript	0 ms	4 ms	7 ms	10 ms	12 ms	15 ms	18 ms	20 ms	24 ms
jQuery	6 ms	3 ms	3 ms	3 ms	2 ms	2 ms	2 ms	2 ms	2 ms
Raw JavaScript DOM Object	1 ms	1 ms	1 ms	1 ms	1 ms	1 ms	1 ms	1 ms	1 ms

Building a DOM object and using the appendChild function does not take much more code, and with the exception of the first run in an empty div it performs better than the other two options.

Test 3 - Calling web services

We call web services all the time, whether it be to get data or save data. Let’s see how it works in raw JavaScript.

Raw JavaScript AJAX function

function ajax(url, arguments, successCallback, errorCallback) {
    var xhr;

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xmlhttp.status == 200 && successCallback) {
                successCallback(xhr);
            } else if (errorCallback) {
                errorCallback(xhr);
            }
        }
    }

    var first = true;

    // LOOP THROUGH DATA
        url += (first ? '?' : '&') + 
            urlencode(name) + '=' + urlencode(value);
        first = false;
    // LOOP

    xmlhttp.open('GET', url, true);
    xmlhttp.send();
}

Raw JavaScript AJAX Usage

ajax(
  url,
  arguments,
  function() { alert('Success'); },
  function() { alert('Failure'); }
);

It’s a reasonably-sized function, but what if you want to support JSON and JSONP, you’ll probably have to add more code to handle that. jQuery provides a nice function we can use called ‘ajax’.

jQuery AJAX Usage

$.ajax({
  url: url,
  data: arguments,
  success: function() { alert('Success'); },
  error: function() { alert('Failure'); }
});

Let’s not worry about running performance on this one, your lag to the web service that you are calling will be much higher than the time it takes to run these scripts.

The usage of the 2 functions end up being fairly similar, the difference is that jQuery is well tested across all browsers and provides many advanced features out of the box. Such as:

Choice of asynchronous or synchronous calls
Cross domain calls
Different data responses (XML, JSON, HTML etc)
Header modification
HTTP authentication
And much more, check out the jQuery.ajax() reference

Sure, you could delve into the manual for XMLHttpRequest and add most of these features but it will take time and resources that could be better spent elsewhere.

Conclusions

As I had expected raw JavaScript did end up being faster performance-wise, although in general the difference is negligible and often jQuery would require less code. Using jQuery in the right place can help you to develop code faster. It can also help to simplify your code which will make your code more readable and easier to support.

Recommendation

Our recommendation is to use raw JavaScript as a default, definitely use raw JavaScript if you’re trying to squeeze out every bit of performance. Use jQuery where it makes complex JavaScript simpler, and if there’s no great performance hit.

Handy VS/SSMS Extensions

Oliver Muir — Thu, 23 May 2013 12:00:00 GMT

IDE extensions provide developers with a great way to improve productivity.

Here are just a few of our favourite extensions for Microsoft Visual Studio and SQL Server Management Studio (SSMS).

Web Essentials

This extension comes from Mads Kristensen, Program Manager at the Microsoft Web Platform team, and should be considered essential for all Visual Studio web developers.

There are too many features to list here but some highlights are:

CSS
- "Live Web Preview" of changes.
- Vendor specific property generation.
- Embed url() references as base64 strings.
- Colour, font and image preview on mouse hover.
- Support for defining #regions and TODO comments.
- Easy conversion between hex, RGB and named colour values.
- Easily apply the CSS hacks needed to target specific versions of Internet Explorer.

There are also several handy JavaScript and HTML features.

Supported versions of Visual Studio: 2010, 2012.

VS 2010: https://visualstudiogallery.msdn.microsoft.com/6ed4c78f-a23e-49ad-b5fd-369af0c2107f

VS 2012: https://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

Image Optimizer

Another extension from Mads Kristensen, this one optimises PNG, GIF and JPG file sizes without any quality loss.

Just right-click a file or folder in Solution Explorer and this extension will reduce the size of your image(s) by removing EXIF and other metadata.

Supported versions of Visual Studio: 2010, 2012.

https://visualstudiogallery.msdn.microsoft.com/a56eddd3-d79b-48ac-8c8f-2db06ade77c3

JavaScript Parser

A set of useful tools which makes working with large JavaScript files much easier.

There are lots of features but some of the the top ones are:

Errors in your code are shown in the notification popup bar.
The function tree view provides quick navigation (and shows comments on hover).
If you use camel case names you can find a function by using the capital letters in its name.
//TODO: comments are shown in the task list.

Supported versions of Visual Studio: 2008, 2010, 2012.

https://code.google.com/p/js-addin/

SSMS Boost

This extension provides a number of handy features that you wish SQL Server Management Studio came with natively.

Here are some of the top ones:

"Go to Definition" - right-click on the name of a stored procedure in the SQL editor and select "Script Object".
Quick connection switch between different databases on different servers.
Auto format SQL code.
Find in the results grid.
Visualise data in the results grid, e.g. display an image from binary data.
Auto replacements and macros.

There is both a professional and a free community edition.

Supported versions of SSMS: 2008, 2012

https://www.ssmsboost.com/

SignalR

Oliver Muir — Tue, 15 Jan 2013 11:00:00 GMT

SignalR is “a client and server side library for .NET that provides messaging and an abstraction over a persistent connection”.

Basically this means you can use SignalR to “push” messages to your client apps. These messages may be notifications or updates to a web page and can be sent to individual (or groups of) clients or to all connected clients (e.g. system-wide notifications).

There are a number of other different ways to implement this type of “push” functionality including polling, long polling, EventSource events and WebSockets. SignalR provides an easy .Net centric way to achieve the same result.

There are of course other Comet type technologies such as socket.io, nowjs and all have their pros and cons. SignalR though is very easy to get started with if you are using .NET.

SignalR supports a number of different clients, including:

JavaScript
.NET (includes WinRT)
Windows Phone
Silverlight

This means your server code can exchange SignalR messages with clients on a variety of different platforms.

Adding SignalR to your Visual Studio project is easy using NuGet - just enter “Install-Package SignalR” in the Package Manager Console, or search for SignalR in the Manage NuGet Packages screen.

The easiest way to use SignalR is to use Hubs. A Hub object is created on the server which clients can connect to and use to send and receive messages to all (or specific) clients which are connected to the same Hub.

The classic chat sample application can be created in just a few easy steps using SignalR:

Create a new .NET 4 web application in Visual Studio.
Add SignalR (using NuGet).
Add the class that inherits from Hub to the project:

public class ChatHub : SignalR.Hubs.Hub
{
   public void Send(string message)
   {
      Clients.receive(Caller.name, message);
   }
}

Add a new web page to the project with the following code:

<head>
   <script src="Scripts/jquery-1.8.2.min.js"></script>
   <script src="Scripts/jquery.signalR-0.5.3.min.js"></script>
   <script src="http://www.sandfield.co.nz/signalr/hubs"></script>
   <script>
   $(function () {
       var chat = $.connection.chatHub;
       chat.name = prompt('Who are you?', '');
       chat.receive = function (name, message) {
           $('#ulMessages').append('<li>' + name + ': ' + message + '</li>');
       };
       $('#btnSend').click(function () {
           chat.send($('#txtMessage').val());
       });
       $.connection.hub.start();
   });
   </script>
</head>
<body>
   <input type="text" id="txtMessage" />
   <input type="button" id="btnSend" value="Send" />
   <br />
   <ul id="ulMessages"></ul>
</body>

Run the application.

Note that the “/signalr/hubs” script source is used to refer to a dynamically generated JavaScript proxy for the server-side Hub.

If you need more control than what Hubs can provide then SignalR also provides a more low level PersistentConnection class.

Scott Hanselman has a good blog post entitled “Asynchronous scalable web applications with real-time persistent long-running connections with SignalR”.

The web chat application JabbR is powered by SignalR.

The following Channel 9 video entitled “C#5, ASP.NET MVC 4, and asynchronous Web applications” by Steven Sanderson is a great introduction on the various techniques and technologies behind creating asynchronous web applications.

And of course the creators of SignalR, Damian Edwards and David Fowler, have a very interesting introduction to SignalR video as well.

5 Ways To Write Faster C#

Henry Payne — Sat, 22 Dec 2012 11:00:00 GMT

Much of my time is spent working on Sandfield’s Crossfire EDI engine. It is essentially a program similar to Biztalk, which convert files between different formats (e.g. CSV to XML)

Some customers do over over 50,000 conversions in just a working day, so we need to run frequent performance tests to ensure the code is running optimally.

We use a tool called ANTS Performance Profiler, from Redgate which is excellent at identifying slow running functions. Here are 5 easy ways to make your C# application run faster.

1. Use XmlNodeReader over XPath

The XmlNodeReader and XmlTextReader will perform significantly faster than using any XPath expression. It obviously has some limitations, but executed in almost half the time when we made this optimisation.

Slow

string text = nav.SelectSingleNode("/Text").value;

Fast

XmlNodeReader nodeReader = new XmlNodeReader(root);
while (nodeReader.Read()) {
  if (nodeReader.Name == "Text")
  {
    string text = nodeReader.Value;
  }
}

2. Use String.Compare instead of =’s

When doing a case-insensitive compare, the String.Compare function provides far greater performance than using the equals operator and two case modifying functions.

Slow

bool match = s1.ToLower() == s2.ToLower();

Fast

bool match = (string.Compare(s1, s2, true) == 0);

3. Avoid many calls to Guid.NewGuid()

A GUID is a very easy way to give an object a unique id, so you would be tempted to use it, but this takes significantly longer than simply assigning a sequential counter.

Slow

string uniqueID = Guid.NewGuid().ToString();

Fast

static int sequentialNumber;
string uniqueID = sequentialNumber++.ToString();

4. Use For instead of ForEach

Using a for loop when not using collections can be up to twice as fast as running the same loop using foreach.

Slow

int[] myInteger = new int[1];
int total = 0;
foreach (int i in myInteger) {
  total += i;
}

Fast

int[] myInteger = new int[1];
int total = 0;
for (int i = 0; i < myInteger.Length; i++) {
  total += myInteger[i];
}

There is a great explanation on the differences between for and foreach loops here.

5. Use Release Mode

Something every developer should be doing anyway, our live installations in release mode perform about 20% faster than in debug mode on the same machine.

Hopefully, you find a use for at least one of these in your applications. Happy developing.

Retina display ready websites

Johannes Wannenburg — Mon, 17 Dec 2012 11:00:00 GMT

Retina quality displays have been around on smartphones for a couple of years now, in the last year we have seen retina displays extended to the iPad and MacBook Pro. In the Windows world devices with HiDPI (the Windows terminology for retina) will also ship in the coming months alongside Windows 8. Several Android devices also have retina-like displays.

What does this mean to us as developers?

When looking at the way we live, we are becoming dependable on small pocket devices to read news, communicate over social networks and even perform daily tasks. One of the keys of being a great developer means that the end user likes what they see and has a great experience using your products.

Typically when the resolution of a screen increases all the user interface elements get smaller. To counter this, retina devices like the MacBook Pro have a scaling factor of 2 to scale the content up. This means that user interface elements maintain the correct size and the quality of the display rendering improves. A MacBook Pro can handle scaling at a window level, if you have a second screen like a projector connected, it will detect if this screen is a retina display and automatically adjust the scaling factor.

What is important to note is that 1 CSS pixel is not equal to 1 device pixel, it is a relative measuring system. As a sample, an iPad 3 will have 4 device pixels for each CSS pixel due to its pixel density.

One method to counter this is to manipulate the view port of a web site, which will tell the device what ratio to use to display content. Mobile Safari is assuming device pixels of 980 as the viewport, which means if you design a web site to have a width of 320px, it will use a calculation of 980/320=3.0625 to scale your content. We can manipulate this by setting a viewport in a meta tag:

<meta name="viewport" content="width=320" />

Without setting the viewport setting, a div like <div style="width:320px;background-color:red;">My 320px div</div> would end up using ⅓ of your screen, whereas the viewport setting would change this to display full screen.

Using Images

For the best results when using images on a web site, it is suggested to display an image in a container that is the same size as the actual image. To display an image with dimensions of 100 x 100px, we would use a tag like this:

<img src="image.jpg" width="100" height="100" />

As retina devices double the scale factor, we will need to have images that are double the amount of pixels to prevent blurry images on the web site. Here are a couple of ways to achieve this:

CSS Sizing
Query Device Scale
Image Set

CSS Sizing

This technique is always loading a high resolution image, e.g. an image with dimensions of 200 x 200px but we display it in a smaller container like the image tag above with a size of 100 x 100px. A retina device will then scale this image size up and load the correct sized element onto the page displaying the image at the correct ratio.

It is important to remember that this technique will always work, but it is very bad for data bandwidth. As we are always downloading a bigger image, it will use a lot more bandwidth which will have a negative effect on users with small mobile data plans.

Query Device Scale

Media queries have been around for a few years and it can be used to target specific devices. This technique will only download an image that is targeted by this query and it will dynamically update if the device scale factor changes.

Here are some css samples to target specific devices:

@media screen and (device-width: 320px) { 	
  /* For iPhone */ 
  body {
    width: 320px;
  } 
} 
@media screen and (device-width: 768px) { 	
  /* For iPad */ 
  body {
    width: 768px;
  }
} 
@media screen and (-webkit-device-pixel-ratio: 1) { 	
  /* For non-Retina display */ 
  .mainImage { 
    background-image: url(image.jpg);
    background-size: 100px 100px;
  } 
} 
@media screen and (-webkit-min-device-pixel-ratio: 2) { 	
  /* For Retina-Display */ 
  .mainImage {
    background-image: url(image@2x.jpg);
    background-size: 100px 100px;
  } 
}

A similar result can be achieved by using a javascript loader for images, note that we need to attach a listen event for to detect when the device ratio changes:

function addImages() { 
  var image = new Image();

  //Method 1
  if ('styleMedia' in window && 
      window.styleMedia.matchMedia('screen and (-webkit-min-device-pixel-ratio: 2)')) {
    // Load high resolution images 
    image.src = 'image@2x.jpg'; 
  } else { 
    image.src = 'image.jpg'; 
  } 

  //Method 2
  if (window.devicePixelRatio >= 2) { 
    // Load high resolution images 
    image.src = 'image@2x.jpg'; 
  } else { 
    image.src = 'image.jpg'; 
  } 

  document.body.appendChild(image); 
}

function reload() { 	
  // Reload images based on window.devicePixelRatio 
}
 
window.matchMedia("( -webkit-device-pixel-ratio: 1)").addListener(reload);

Image Set

Image set is the Apple introduced alternative which is scheduled to become part of the Image Level 4 module in CSS. This is new as of Safari 6 and Safari for iOS 6. Like media queries, only the correct image will be downloaded at all times. Note, unlike normal CSS behaviour where slices in borders are in the image coordinate system, image set will automatically take care of this for you and adjust the values as required.

#main {
  border-image-source: -webkit-image-set(url(images/low/DSC00402_burn.JPG) 1x,
                                        url(images/high/DSC00402_burn.JPG) 2x); 	
  border-width: 10px 10px 10px 10px; 	
  border-image-slice: 10 10 10 10; 
}

Comparing these 3 techniques

Method	Performance	Simplicity	Cross-Browser
CSS Sizing	Very bad, always download a big image	Very simple	Yes
Query Device Scale	Good, just download what it needs	*Slightly complicated to maintain and keep track of what scale you are in	Yes
Image Set	Good, just download what it needs	Simple and clean approach	Not yet cross-browser. Supported in - Safari 6 OS X - Safari iOS 6 - Chrome 21

* This might be complicated to use but there are a lot of javascript libraries you can find with a quick search, like retina.js, that you can use to load these for you in a simple manner. Retina.js does have a few things to be aware though. It is hooking into window.onload which means you can’t use this event in your own javascript. It is also loading all low resolution images into the DOM and then make a further round trip to the server for each image to see if it can find a 2x image on the server by getting the headers for these files. This means that it will add extra traffic on the site and additionally download 2 images for each image that you have as a high resolution image.

If you have a site that you want to get off the ground quickly with a few high resolution images, this library would be good to use still.

When to use which technique

Method	Number Of Images	Type of Web content
CSS Sizing	Small number of local images to prevent downloading over mobile networks	Apps and Books
Query Device Scale	Many images	Websites, Apps and Books
Image Set	Many images	Anything targeting WebKit

Writing Less CSS

Matt Weston — Tue, 04 Dec 2012 11:00:00 GMT

Something I’ve been experimenting with recently is “LESS” <https://lesscss.org/>. It’s a neat extension to CSS which provides some of the dynamic functionality you’re used to in programming languages in your stylesheets.

What can it do for me?

Less allows you to to write CSS in such a way that you can reuse specific values, styles, and even classes throughout your stylesheet. It does this by providing four key features: Variables, Mixins, Functions and Nested Rules.

Variables allow you to define a value for reuse (and manipulation) through your stylesheet. For example, it would allow you to define a ‘default font size’ variable which you can later pick up and use directly in your classes; or add to/subtract from to create larger and smaller text elements. If you change the variable, the entire stylesheet will change.

Mixins are probably most simply described as a mixture of a CSS class and a function. Any class you define is automatically a mixin - there’s no special syntax required at the simplest level. It allows you to call another class from within your current class and pick up any rules it has and apply them to your current class. You can also pass parameters, which could be used to create ‘utility’ mixins for certain UI elements in your page.

Functions are predefined operations in the LESS library which allow you to process and manipulate properties to calculate new values. My favourite set of functions here is colour mathematics - allowing me to calculate “lighter” and “darker” versions of a base colour on the fly. In the client side implementation, these can also map to JavaScript code - allowing even greater flexibility.

Nested rules allow you to build up complex CSS selectors as a single hierarchical tree - simplifying presentation, clearly showing inheritance and increasing readability of the code. It also allows you to nest all rules related to a specific element, making it very clear what rules will be in effect.

LESS can be run through a client side library directly on the users browser. This only supports Chrome, Safari and Firefox though; which rules this out for most projects.

LESS does however compile into standard CSS - this can be done on the server side through a HTTP handler or by preprocessing the LESS file into CSS in your development environment before deploying your project. This way you can ensure support for all browsers; and your users are none the wiser. As far as they can see, your site is just using standard CSS.

Example time!

The best thing I’ve found about LESS is that it’s truly an extension to CSS. Everything you already know about CSS still applies, and the new features integrate in a very fluid and natural way. Take variables, for example.

In standard CSS, I might set my colours and font sizes to reuse a single colour, and have the sizes stepping up with different H-tags like so:

#header {
  color: #FF0000;
}

h1, h2, h3 {
  color: #FF0000;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 15px;
}

h3 {
  font-size: 12px;
}

p {
  font-size: 10px;
}

Easy enough. But if I decide to change the colour scheme of the site, or increase the font size, all of the properties will need to be updated. Time to break out find and replace. Alternatively, in LESS, I could have just assigned variables:

@base-color: #FF0000;
@base-font-size: 10px;

#header {
  color: @base-color;
}

h1 {
  color: @base-color;
  font-size: @base-font-size * 2;
}

h2 {
  color: @base-color;
  font-size: @base-font-size * 1.5;
}

h3 {
  color: @base-color;
  font-size: @base-font-size * 1.2;
}

p {
  font-size: @base-font-size;
}

In this example the LESS ends up just as long - but as your stylesheet grows in size to encompass your entire project, variable reuse will make your UI far more flexible, and make sweeping changes to the look and feel quick and easy.

You can also use mixins to create reusable UI elements. For example, you can make a generic “rounded corners” mixin which you can apply to classes. This example is straight from the LESS website - but I think it’s the most elegant way to represent it.

@base-color: #FF0000;
@base-font-size: 10px;

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

The ideal use case for LESS is when building a stylesheet for a system which you intend to retheme for different purposes. It would allow you to set up some base rules which drive all of the colours, positioning, image sets etc. You can use LESS to create ‘settings’ type files which include a ‘base’ type file which has all of the LESS required to generate the stylesheet. Sort of like your own stylesheet framework.

Speaking of frameworks, the Twitter Bootstrap <https://twitter.github.com/bootstrap/> framework utilises LESS in exactly this way. A core settings allows for the look and feel to be completely changed quickly and easily, while retaining the same class names and grid functionality.

Some implementation tips and tricks

During development, using a HTTP Handler such as the one provided by dotless <https://www.dotlesscss.org/> will make things quick and easy, and allow you to test your LESS without too many hassles.

As mentioned, the client side library only works on Chrome, Safari and Firefox. This will probably rule it out for most people, but if you’ve got an app which you’re specifically targeting a specific platform, the benefits of having the JavaScript integration might be worth the trade off.

Dotless also has a command line utility for compiling LESS to CSS - I’d recommend implementing this as a post-build step rather than relying on the handler in a production environment. The file isn’t going to change, so a static CSS file would be the ideal way to serve this up.

LESS also plays well with minifiers- dotless includes a CSS minifier to clean up all of that unnecessary whitespace. It could make life hard in the development environment; but for your live release this is definitely worth considering.