The product of a web developer with a little too much caffeine

New Hugoware Site – I’m Moving!

with 3 comments

It’s here! The brand new Hugoware website!

After months (literally) of designing, trashing, re-designing, re-trashing, pouting, shouting and all around general nit-picking, the new Hugoware website has finally been completed.

I’ve been through quite a few designs but I finally came up with something I was happy with.

I’ve converted all of my blog posts from my old blog to this new site. Moving forward I’ll be blogging at my new site. WordPress was great but it's just time to move on.

I've also moved all of my projects to this site. Each of the project have their own section along with instructions, command lists and pretty much everything else you might need.

There are still several parts of the site that need some work but the site is far enough along it is usable.

Anyways, thanks WordPress – you’ve been great!

Visit my new site at

Written by hugoware

April 8, 2011 at 12:36 pm

Posted in General Update

jsshell 3.0

with one comment

This weekend I finished up an upgrade for jsshell to version 3.0. I also put together a new jsshell landing page to help users get started.

New Stuff In 3.0

  1. jQuery and jLinq Upgrade: Both libraries have been upgraded to their newest versions. jQuery 1.4.4 and jQuery UI 1.8.7. jLinq has been upgraded to 3.0.2.
  2. Auto Complete: Previously, jsshell would show css classes, IDs and tags that were on the page as a ‘auto-suggest” popup but you couldn’t select anything on the list. Now, jsshell allows you use TAB to select the currently highlighted item. You can use up and down to change the highlighted item.
  3. More Auto Complete Sources: jsshell now shows suggestions for jQuery and jLinq commands, current IDs, tag names and css classes on the page and now some Javascript keywords and common CSS properties.
  4. Remember Last Command: jsshell now remembers the last successfully executed command. If you browse to a new page or refresh the view, the last command you ran will still be waiting for you.
  5. Access ‘file:///’ URL: Previously, Google denied the app from being released because it had access to the file URL. It seems they have changed the way this rule is handled so this version now includes the local file url.
  6. A ‘Run’ Button – Finally…: The only way to run commands before was to press CTRL+Enter. Now there is a button that does the same thing.

Special thanks to @stevehebert for his great suggestions on improvements for jsshell.

Please feel free to let me know if anything isn’t behaving as expected.

Written by hugoware

December 20, 2010 at 1:01 am

Teaching Software Development With Games

with 6 comments

Since an early age I was always interested in doing game development. I’ve made several efforts at developing games doing both the art and the code. I can honestly say that it was my interest in games that led me to become a software developer as a career.

Games have always been a great way to teach. You can see it applied to many different topics and to many different age groups.

So this last week I started on a project to do just that using Canvas and Javascript. The general idea behind the game is to build a better ‘bot’ to pilot your ship. The ships fight it out and the last one standing is the winner.

The logic for the ships, how they move, when they shoot, are all actually written by developers and then plug into the game.

Sounds complicated? Well that is up to the developer. In order to create a ship you only need to create a simple Javascript class.

var yourBotName = function() {
    //a visual name for your bot = "Display name";

    //the preferred weapons for your bot
    this.weapons = ["lazer", "burst", "tracker"];

    // a method to update your bot
    this.update = function(gameState, botState) {
        //do something here

And there you have it! Your bot is ready to go!

The developer is passed game and bot state information that they can use to determine how to behave. This means a developer can write their code to behave anyway they like. That means if you write good code then your bot will do great – if you write bad code (the kind that causes exceptions or tries to cheat) then your bot is penalized.

I have some more work to do to get the game in a web ready format (meaning people can upload their own bots, challenge others, etc…). But so far the game is coming along great.

Below is a quick video showing how the game works and what you can expect. Enjoy!

[Watch the preview video]

Written by hugoware

October 31, 2010 at 11:23 pm

Campfire, Google Chrome and Extensions

with one comment

If you’ve never heard of them before, there is this little company called ’37 Signals’… they made a couple mildly popular products one of which is called Campfire.

Campfire has a really neat chat client you can use to collaborate with other team members. It even comes with some pretty handy features such as uploading files or tracking (and searching) chat history… and it all works even when you aren’t online.

That said, as neat as Campfire is – it is still a website so some of its functionality is a bit limited. For example, desktop notifications. Of course there could be stuff out there but I haven’t checked.

So with a bit of tinkering I came up with a handy little Chrome Extension to do the job.

You can click the image above or this link to install the Extension.

Chrome is especially useful with the Application Shortcuts feature. I use it in a variety of places like Grooveshark or Toggl so naturally Campfire chat fits in perfectly.

Anyways, if you use Campfire and Chrome then this might be a handy extension for you!

Written by hugoware

October 19, 2010 at 11:50 pm

Waiter, There Is Some jQuery In My jLinq…

leave a comment »

jLinq occasionally gets confused as a plug-in for jQuery. Unfortunately, jLinq doesn’t do much to help performing queries in jLinq. I’ve written some extension methods before to help link the two together but they were packaged with other projects (and not really ever released)

So this weekend I put together a few helpful extension methods and released them on GitHub.

Naturally, you’ll need the core jLinq library and the jLinq.jQuery library along with jQuery. Since a lot of jQuery uses chained methods you’ll need to use the special invoke syntax for jLinq queries (just an array).

Here are some of the commands you can use.

  • jlinq.$([selector]) : Starts a new query from document.body with the starting selector (if any).
  • $(selector).query([selector]) : Starts a new query from the current jQuery object. Allows an optional selector.
  • .include(selector, [jQuery Object]) : Includes the matches of the provided selector into the current query. You can use a different jQuery object as the source (otherwise it defaults to the object that started the query).
  • .get([selector]) : Converts the current matches in the query to a jQuery object. Allows an optional selector to further filter the results.

Just as a reminder, in order to invoke methods within a query you need to use an array where the first value is the name of the method and following values are the arguments. These arguments are all where the field name would normally be. Here are a few examples in case you need them.

//Example 1: Non-method query
    "fieldName", //the field to pull the value from
    "check for this" //the argument for contains

// Example 2 : No arguments
// function test() { ... }
    ["test"], //no arguments, but still an invoke
    "check for this" //the argument for contains

// Example 3 : With arguments
// function test(arg1, arg2) { ... }
    ["test", 33, false], //the method with arguments
    "check for this" //the argument for contains

So what do these new methods look like? Well here are a few examples to get you started!

//finds all .result elements containing red or green
//and is also case-insensitive
    .contains(["text"], "red")

//finds all links pointing to MP3 files then sorts and styles them
var mp3Links = jlinq.$("a")
    .endsWith(["attr","href"], ".mp3")

//highlights all of the matching markup with 'Joe Smith'
    .contains(["html"], "Joe Smith")
    .each(function(rec) { 
        var markup = rec.html()
            .replace(/Joe Smith/g, 
                "<span class='highlight'>Joe Smith</span>");

Now you can enjoy the awesomeness of jQuery along with the semi-usefulness of jLinq! You have access to ‘or’-ing, case insensitivity, sorting — It is all there!

This code is all brand new so I don’t recommend using it anywhere important just yet, but it is fun to see how jLinq can make queries a little bit easier.

Written by hugoware

September 26, 2010 at 10:18 pm

Getting Organized With Toggl

with 3 comments

I’ve been really busy the past few weeks trying to get ready for my new job and wrapping up projects at my previous job — needless to say free time has been pretty limited.

Up until now I’ve managed my time and projects using ‘The Notepad System’… or basically I just write stuff down, get it done and then check it off… not really something that is going to cut it going forward. Having personal projects, work projects and contract work all being merged into a single list is going to quickly get out of control.

My solution? Toggl!

This, my friends, is a masterpiece of web design and functionality. The devs (and designers) at Toggl have done an incredible job at taking something difficult like time tracking and making it not only super simple… but also hosted on the web!

Toggl makes it simple to create multiple clients, projects and tasks and manage time for each of them. Even better, if you try to enter the name of a client or project that doesn’t exist, it will create it for you on the fly! Every action seems to have been streamlined so that it doesn’t interfere with you doing your actual work!

Tracking time spent on tasks can be handled using the menu on the right hand side by simply clicking the red button (you can even close the window and the timer keeps going). This starts the timer for that task so you know how much time is spent doing something. To take it a step further, if you start a timer for another task, Toggl automatically stops any running timers for you!

Toggl also allows you to open the timer management in a separate window called ‘Nano’ — Which works perfectly with Chrome Applications. (If you do this just make sure you point the url for your Chrome app to

And to take it a step further, I wrote a script with jsshell to add some buttons to the view (of course, you can reach them in a menu but I wanted them along the top as well :)).

Toggl also works with a variety of the mobile platforms as well, which is really handy if you aren’t always sitting at a computer.

If you manage a lot of projects at the same time or just simply need to keep track of where your time is going, then I highly recommend Toggl. Signup takes almost no time at all and you get 30 days to try it for free (then it is only $5 a month after that).

I could ramble on about how awesome Toggl is but I’ve already spent 36 minutes and 26 seconds on this task – time to move on to something else!

Written by hugoware

September 19, 2010 at 7:32 pm

Making A Change!

with 4 comments

Cool news! I’m starting a new job on Monday 20th, 2010 at TrackAbout!

I’ll finally be working with incredible developers that will no doubt teach all sorts of awesome new things!

I have been with my current employer for more than 7 years now and I’m definitely sad to leave but there comes a point when you simply cannot improve anymore working by yourself. Fortunately, I’ll be working from home (or the nearest coffee shop), so I’ll be able to go catch up with them for lunch every once in awhile.

Anyways, just wanted to share some good news!

Written by hugoware

September 8, 2010 at 9:02 pm

Posted in General Update

Tagged with , , ,