4 years ago

Following on from the last post I decided to play a bit more with the hexagonal grid and created a diamond grid. It works similar to the last grid except it uses squares rotated 45 degrees, so it is basically a regular grid tipped on its side with even-odd number alternating rows.

4 years ago

Most grids are square packed – that is each cell is stacked like a block which is great, but if you are after something slightly different maybe you should try a hexagonally packed grid. I will show you how to create a hexagonally packed grid using only CSS. But first, here is the difference between a square and a hexagonal packed grid:

4 years ago

4 years ago

I needed to be able to set up a watch task with Grunt to only watch a specific client sub directory. This directory would change depending on the client I was working on and new clients were constantly added so I need a way to watch the specific client that I was working on only, without hard coding all the clients into separate tasks. The only thing I could think of doing this was to pass some sort of parameters when starting the watch task.

This is how I set it up. It might not be the best method but it works for me.

First I had to set a value in the grunt configuration, which would be taken from the command line args. With Grunt you can get them them using:

1

grunt.option('someCommandLineArg');

You can also set a configuration value using:

1

grunt.config.set('myValue','someValue');

So combining those two methods, the following will get a command line arg called “watchDir” (and assign a default value of src if it was not specified) and set it in the grunt config. I added this line after initConfig in my Gruntfile:

1

grunt.config.set('watchDir', grunt.option('watchDir')||'src');

You can then access this property using a template string in your task:

4 years ago

Here is a little snippet to get local AJAX (with jQuery) working when running content locally in IE 11. Local content is not allowed to use the XMLHttpRequest but it can use the proprietary ActiveXObject, so this tells jQuery to always use the ActiveXObject if it’s available.

I needed to use this to run local content on a Surface RT which doesn’t have IIS or any other browsers. This allowed me to run content that relied on AJAX from the desktop in IE modern.

4 years ago

Since Chrome 25 we have had access to the new Web Speech API which allows us to create web apps that can utilse voice to text or voice control with a microphone. I have been wanting to experiment with this for quite a while so I built simple example to using voice commands to control an e-learning module made with my e-learning framework. I recorded a video below demonstrating navigation through voice commands. After the video I will show show you how easy it is to set up this basic control.

To use speech recognition for voice commands, this is how I implemented it:

1. Create a new speech recognition object

1

var recognition =new webkitSpeechRecognition();

2. Make the object continuously check the microphone

1

recognition.continuous=true;

3. Set the language to use. By default it will use the document’s language

1

recognition.lang="en-AU";

4. Start the speech recognition

1

recognition.start();

5. Get results on the ‘onresult’ event

1234567891011

recognition.onresult=function(e){// loop through the resultsfor(var i = e.resultIndex; i < e.results.length;++i){// only get the final resultsif(e.results[i].isFinal){// trim any whitespace from result and pass to our command handler// note: I am using jQuery here to trim the string because my e-learning demo already had jQuery included
runCommand($.trim((e.results[i][0].transcript).toLowerCase()));}}};