Category Archives: JavaScript

Hiring Software Engineers in Cambridge

Thanks for taking a look. As you’ll have gathered from the headline I’m hiring software engineers to join myself and David Priddle in our new Cambridge office. I’ve put a few salient details below and, if you’d like to find out more, I’d love to hear from you. Please drop me an email at [email protected].

The company is MIG Global, a small-ish London based market research company, operating since the mid-noughties under the name Morar Consulting. The team we’re building in Cambridge is concerned with two of their products:

  • The first is an long-standing survey platform that is being rebuilt and enhanced,
  • The second, and the one I’m hiring for here, is a brand new data visualisation and analysis product.

We’re very much aiming to build a best in class offering so, to that end, I’m looking for two mid- to senior-level software engineers. Ideally you’ll have some full stack experience, and you’ll work with myself and a UX engineer to deliver our new product.

Technology-wise, there are still some decisions to be made, but the overall platform will be C# – and very likely F# – with ASP.NET Core, TypeScript, D3, HTML5, SQL Server, RabbitMQ, and possibly a NoSQL store for caching. Wonderfully, we are not encumbered by the need to support older versions of Internet Explorer.

The office itself will be a small, friendly affair on the Science Park. We’re hoping to be in by the end of this week, at which point you’re welcome to stop by for a tour.

I mentioned that MIG is headquartered in London so naturally you’re probably wondering if you’ll need to spend any time in London. The answer is yes, but it’s likely to average out at once every week or two.

Before I finish, I should also mention package. Salary is obviously going to be dependent on your experience, but I can tell you with certainty that in terms of Cambridge we are extremely competitive. We also offer a good benefits and flexible working.

I’m very happy to provide more detail on any of the above so if you are interested drop me a line. Once again, my email address is [email protected].

If you have a website or a LinkedIn profile, please feel free to include a link, but don’t worry about a CV unless you already have one to hand. Mostly the email is just so I can arrange a time to speak with you, so short and sweet is fine.

Thanks for taking the time to read and consider!

Reminder: Demoing Node Tools for Visual Studio 1.0 Beta at NodeJS & JavaScript Cambridge TONIGHT!

Hey everyone, just wanted to put out a quick reminder that I’ll be demoing the latest Node Tools for Visual Studio 1.0 Beta at the NodeJS & JavaScript Cambridge meetup tonight.

It all kicks off at The Fountain on Regent Street from 7.45pm with beer.

I do love events that start off with beer, particularly ones where I’m speaking because it takes the edge off a little. Sign up at:

http://www.meetup.com/NodeJS-Cambridge/events/164845272/

Also speaking is my friend, and former colleague, Forbes Lindsey. He is an active Jade contributor and will be giving a talk entitled The Jade template language, which I would highly recommend.

It should be a fun and interesting evening, with plenty of time for questions and discussion, so do come along if you can. I’ll certainly be happy to receive any feedback or suggestions you have for Node Tools for Visual Studio, and will pass it along to the team.

Look forward to seeing some of you there!

Node Tools for Visual Studio 1.0 Beta has landed

Those of you lucky enough to be at BUILD last week will no doubt be aware that Node Tools for Visual Studio 1.0 Beta has just been released.

Here are some of the headline improvements:

It’s also worth calling out the extensive Azure support in the suite, offering the ability to create, deploy, and debug Node apps on Azure (including on Linux) – exciting stuff!

Rather than have me talk too much about it, take a look at the videos the team have put together and see it in action for yourselves:

  • Installation walkthrough from Pavel. There’s something very exciting in this video: you may not be aware, but Visual Studio 2013 is available for FREE for both startups, via BizSpark, and students, via DreamSpark.

See the full announcement on Soma Somasegar’s blog.

As ever, please have a play. We’d love to hear your feedback so please get involved in the discussion. Also, do please let us know about any bugs you find.

Detect mobile browsers in server-side code

Last week I found myself needing to detect mobile browsers on the server-side and ran across this extremely useful site:

http://detectmobilebrowsers.com/

It offers open source code for doing just that. Many languages are available: C#, Ruby, JavaScript & node.js, PHP, Python, and more. Even Perl!

Often you’d use this code to redirect the user to a mobile version of your site. However, my site uses the responsive Twenty Twelve WordPress theme. This works well on mobile browsers. Thus, I don’t really want or need to redirect the user.

Unfortunately, there’s one particular piece of content that was banjaxxing the page width on mobile devices. It needed to be replaced. Normally I’d do this on the client-side, which is what the theme does. In this cases the content’s Ts & Cs meant I wasn’t allowed to. But I could do it on the server.

You probably know that you can’t get the client’s screen resolution or browser window dimensions on the server. However, you can use the user-agent string to detect mobile browsers. This is exactly what the code at detectmobilebrowsers.com does. They’ve written and tested code that will reliably detect mobile browsers across most devices. That isn’t something I wanted to attempt myself (how would I test it?), and neither should you.

WordPress runs on PHP so I now have this particularly minging, but highly functional, lump of code in one of my template scripts:

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) : ?>

    <div style="padding-bottom: 16px; margin-left: -24px; margin-top: -24px;">
        <!-- Content displayed on mobile (but not tablet) browsers here -->
    </div>

<?php else : ?>

    <span style="float: right; clear: right; padding-bottom: 8px;">
        <!-- Content displayed on all other browsers here -->
    </span>

<?php endif; ?>

DO NOT copy this code. New devices are being released all the time so make sure you grab the latest version from detectmobilebrowsers.com. That way your code will work with the most recent generation of devices.

To edit your WordPress templates just open up your dashboard and click Appearance > Editor:

Edit WordPress templates.

(Oh, and if I ever need that check in more than one place I’ll refactor it into a method. For now I can live with it sitting in the one template where I need it.)

As my comment in the code suggests, this won’t work for tablets. If you need special support for them, add the code snippet under the Tablets section here to the first regex. You can also separate the checks for mobiles and tablets, or even different models of mobile/tablet, if you need more fine-grained control over site behaviour.

Node.js apps: what’s the difference between installing npm packages locally and globally?

You don’t need to spend too much time with Google to realise that there’s some amount of confusion about the purpose of global packages. Local packages people seem to grasp easily. Global packages… well, confusion. And if you’re one of those confuse people, don’t feel alone: I was confused too.

Ironic, considering I’m working on the npm support in Node Tools for Visual Studio. But, up until recently, global packages really weren’t that important in the implementation. We gave you a way to install and uninstall them in the alpha, but that was about it. Not much further thought given really:

Managing global packages in NTVS's npm Package Management dialog.

More recently I’ve been improving the way you interact with npm packages, and global packages are back in the frame. And the question is, what are they for? When (and how) should you use them? And when shouldn’t you?

Let’s take a step back. You might already be familiar with the outline structure of a node.js app:

Structure of a node.js app

On the left we’ve got the Explorer tree, and I’ve highlighted the root ExpressApp2 folder of my app (I was just using this for testing). The ExpressApp2 folder you can see above that is the Visual Studio solution folder.

On the right you can see the contents of my Node.js app, which is pretty sparse, along with the Visual Studio ExpressApp2.njsproj project file.

We also have the node_modules folder, where locally installed npm packages are stored. You can see that I’ve got angular, express, jade, and stylus installed locally.

If I want to use one of these modules in my code, I’d write something like:

var express = require('express');

No surprises so far. But what if express wasn’t there, but was instead installed globally? Could I still use it?

Well, yes, and no.

You see the global package installation folder (for such it is) is not just a big bucket of miscellaneous stuff that’s visible and accessible to all your node applications. There’s no way you can say in package.json, “please get this from (or install it to) the globally installed packages”. And if you try to require it in your code, well, that won’t work either.

And this makes sense, right? I mean you could have anything in your global packages so you probably don’t want all of them visible in all your node.js apps. The potential for problems would be significant.

So, back on point, what are global packages for?

Global packages are for anything that you need to access from the shell. By contrast local packages are for using within your apps.

So you’ll often find yourself installing frameworky or infrastructurey things in your global packages. Installed globally they’ll be on your PATH so you can use them anywhere.

A good example is Yeoman and its generators. You’ll use yo from the command line to scaffold out projects in a variety of places, so both Yeoman and the generators you want to use must be globally accessible.

Going back to express, this is an example of a package that you’ll often want to use in your node apps, so you’d normally install it locally. Except that it also has a command line interface… so you’ll want to install it globally?

Well, you can actually do both, and this might be the easiest option.

But, as I said earlier, you can use that global install in your apps. Maybe you have a lot of apps and you want to use the same version of express in all of them. That way, when you upgrade express, you only have to upgrade it globally and all your apps will get the upgrade. Nice, right?

If you wanted to do this, you’d need to link express into your node apps. To try this out, execute the commands below from the shell in a convenient folder. Couple of points:

  • On Windows you’ll need to run the Command Prompt as administrator, or you won’t be able to create the link,
  • For the npm init command, which will scaffold out a basic package.json for you, just accept all the default suggestions.
mkdir linktest
cd linktest
npm init
npm install express -g
npm link express

Unfortunately, unlike the npm install command, there’s no way to save express into your package.json dependencies list. You’ll need to edit the file and add it yourself. However, you should find that your linktest folder now contains a node_modules folder. Within that, you’ll find a symbolic link to your global express install. You can obviously drill into that folder just as if it were really in the linktest folder.

Now, as I said, if you update your global install of express your linktest node app will also get the update.

Hopefully that clears up the differences between local and global packages.

TAKE-HOME MESSAGE: always try to use local packages unless there’s a very good reason not to! (I.e., you need to use the package from the command line.)

 

Speaking on Node Tools for Visual Studio at Node.js & JavaScript Cambridge Meetup

I’m pleased to say I’ll be speaking at the Node.js & JavaScript Cambridge meetup on Tuesday 8th April. It’s upstairs at the Fountain Inn on Regent Street in Cambridge (UK), starting at 7.45PM.

I’ll be talking about and demoing Node Tools for Visual Studio. If you want to learn how to develop for Node on Windows, and you’re in the local area, please do come along. You can already sign up at:

http://www.meetup.com/NodeJS-Cambridge/events/164845272/

There will be two talks during the evening. I’m not sure what the other one is yet, but I’ll post as soon as I know. The usual format is 20 minute talks with 10 minutes at the end of each for questions.

I’m going to try to cover:

  • The different project templates
  • npm
  • Editing
  • Debugging
  • Profiling
  • Azure deployment

That’ll probably more than fill 20 minutes without too much difficulty. Being Cambridge, people love to ask questions so we’ll see if I can get through it all or not!

As I say, if you’re in the area that night, please do come along. They’re a sociable crowd and there’s plenty of time for drinking and chatting afterwards.