Smoky Cogs

Wouldn’t it be great if you could look at the web page you are developing and be able to instantly tell if something is amiss. Say you forgot to add alt tags to your images, or you are using deprecated markup.

This might be a case for Holmes, the CSS Markup Detective.

What Holmes does is add CSS styling to elements in an HTML page that do not conform to standard, and will highlight any markup that is non-compliant, deprecated, or missing required attributes. All you need to do to make it work is to include a single CSS file in your web page, and you can then see the results immediately.

Since Holmes uses the W3C HTML5 standard (as it stands now), it is particularly useful for modernising old websites or existing codebases without too much trouble.

I haven’t made much use of Windows batch files for many, many years. I just haven’t had a need for it, but I learnt a few interesting titbits of Batch file use that I never really knew before today.

Putting IFs into FOR loops
Firstly, batch files support FOR loops as well as IF statements, and therefore putting this together, I would expect this piece of code to work:

for /D %%d in (*) do (
  if "%%d" == "a" goto A 
  if "%%d" == "b" goto B

  echo "Default - %%d"
  goto CONTINUE

  :A
  echo "A - %%d"
  goto CONTINUE

  :B
  echo "B - %%d"
  goto CONTINUE

  :CONTINUE
)

At first glance this code should work. It is merely a few IF statements inside the for loop, which loop through all the directories inside the current directory, and then prints a message following the logic of the if statements.

This code fails (at least while running on Windows 7) because, while it will work for the first item, after the goto statements, the for loop decides to stop working.

To get around this, the solution I used was to move the logic inside the for loop into a separate batch file, and then using the CALL command to execute the second batch file from within the FOR loop. This works a charm

First batch file

for /D %%d in (*) do (
 	CALL SecondFile.bat %%d
)

Second batch file

if "%1" == "a" goto A 
if "%1" == "b" goto B

echo "Default - %1"
goto CONTINUE

:A
echo "A - %1"
goto CONTINUE

:B
echo "B - %1"
goto CONTINUE

:CONTINUE
)

Substring in Batch files
What I also wanted to do, was only compare a portion of the directory name, so then discovered that Batch files have a very simple method of substringing.

The basic format is %varname:~[x],[y]%, where [x] is the starting index in the string, and [y] determines the number of characters to select, which is optional

If the first parameter is positive, then it denotes the index from the start of the string, while if it is negative, it will denote the index from the end of the string.

So let us use an example

set var=teststring

echo %var:~0,5%
echo %var:~-3%
echo %var:~-5,2%
echo %var:~4%

This will output the following output

tests
ing
tr
string

With AJAX being the norm for websites these days, and JavaScript taking on more a more central role in building up web content, you are more than likely going to find yourself having to build up strings containing html to display in a webpage using JavaScript.

This does come at a price though. String concatenations can be rather slow, especially if there is a lot of data that needs to get processed, such as a large table. Unsurprisingly, this is most noticeable in Internet Explorer.

A colleague of mine came up with an alternative way of creating the new html string, using an array to build it up instead of a string.

So using the traditional method you would write:

var htmlStr = '<table>';
for(i = 0; i < data.count; i++){
  htmlStr += '<tr><td>' + data[i] + '</td></tr>';
}
htmlStr += '</table>';
document.getElementById(elemId).innerHTML = htmlStr;

Using an array though, this can be rewritten as

var htmlArray = [];
htmlArray.push('<table>');
for(i = 0; i < data.count; i++){
  htmlArray.push('<tr><td>');
  htmlArray.push(data[i]);
  htmlArray.push('</td></tr>');
}
htmlArray.push('</table>');
document.getElementById(elemId).innerHTML = htmlArray.join('');

In some tests, my colleague found that speed improvements of up to 80x-400x were shown using the array method, varying on the complexity of the concatenations. The biggest improvements were shown in Internet Explorer, with less gains measured in Firefox and Chrome, although quick results were measured in each one.

I have always admired subway maps for the clarity and elegance with which they are able represent a convoluted public transport system. Now there is a way to expand this concept and create your own maps using a subway map plugin for jQuery written by Nik Kalyani.

This plugin allows you to specify the data for drawing the map, and makes the concept of the subway map entensible to represent anything you would like. In fact, I recently saw one detailing the progression of modern rock music, with the different lines representing different musical genres as a timeline, and major bands representing “stations”.

Sample subway map from Nik's demo

For a detailed tutorial of how to use this plugin, go read the original post by Nik Kalyani on his blog.

Statistics is not exactly the easiest of fields to work with. I am not talking about the “how many hits has my blog had today” type of stats, but rather, the “what is the standard deviation of today’s hits compared to the rest of the month” type of stats.

I studied a course in statistics at university many years ago, and I still shudder at some of the mathematical techniques used.

Well, as a programmer, these days, I would just use a statistics library to do the heavy lifting for me, sparing my brainpower for coding instead.

One such library I have found for JavaScript, jStat, makes inserting statistical data and graphs ridiculously easy, and there are several samples on their website detailing how to use the library.

Being a JavaScript library, this can add a lot to just about any web application.

I can think of many, many uses for this…

With interactive web applications becoming more and more complex, the demand for simpler ways of doing things becomes very attractive.

Let’s take a look at client-server interaction. AJAX has been able to do this for years, and there are many good libraries out there, such as jQuery, which make it very easy to use.

I stumbled on NowJS, which simplifies things dramatically. This library makes it very easy to accomplish realtime client-server communication.

The example they have on their side is for building a chat server, in a ridiculously few lines of code.

The library allows you to set up a server component, which can then interact with the client component, by simply making a function call. The server can call a client function, and the client can call a server function, so updating can happen in any direction.

The nicest thing I can see about the library, is that it is really lightweight, and promises to play nicely with all your other JavaScript libraries.

A few days ago I blogged about my first Android app, and in that post I promised another one coming along soon. Well, it is now done.

For my second foray into Android application development, I decided to port some C# code I had previously written to draw a plasma fractal to Java.

A plasma fractal

The original code is based on a Java applet written by Justin Seyster, which I ported to C#, and modified slightly, a few years ago for another project.

I have previously blogged about the algorithm used to generate the plasma fractal itself in my series on Fractals in C#, so I won’t go into detail about how the fractal is generated here.

The application consists of three activies.

The main activity displays the generated plasma fractal, with menu options to refresh the fractal, which regenerates the fractal, and saving the image to the sdcard.

The menu also has options to launch the settings activity and the about activity.

The settings activity enables you to change the fractal type – the options being, Plasma, Cloud and Grayscale – as well as the roughness, which changes the amount of variation in the image.

The about activity merely showssome information about the application.

While, by no means, a complicated application, this app implements a fair amount of Androids basic features.

You can download the Plasmatic android package here