In code review last week the topic of efficient CSS selectors in your JavaScript came up. I have always been a fan of using as simple selectors as possible. Typically I use a class name on the elements I’m selecting. Others on the team are fans of using more complex selectors such as

body > div > div:first > span:first > p

I hate this. I think that it is confusing for a human to figure out what’s being selected there without hunting through the DOM. I also think it isincrediblybrittle. All it takes is adding one element somewhere in that chain and your selectors stop working. With dynamic pages that hierarchy may well be open to change even during the life of the page. I think this example is particularly bad because it descends right from the root of the body. Even something simple like adding a notification box is going to break this.

My argument was not wellreceived. The counter argument was that any changes to the page would require a change to the JavaScript anyway so it isn’t a big deal. Humm”¦ okay, different approach.

Well I didn’t have the stats on speed of selectors at the time but today I found some. The benchmark somebody build at jsperf.comis fantastic for my purposes.

Ah ha! Looks like my method of selecting using just a class is way more efficient than parent child selectors (51% slower vs 80% slower than optimal). However my method is still quite a bit slower than having a context and using find. I was a bit surprised by that because I expected that with the commonality of selecting with a class would have been optimized to theumpteenthdegree. I was even more shocked to see that specifying the tag and then a class wasn’t faster than just selecting a class.

I think the take away here is to use classes over the confusing mess above(sorry, coworkers) and that having an id at least on a parent container allows for more efficient selection. I’m also not convinced that these aren’t micro-optimizations which should be ignored but as the rules above can be used in place of each other you might as well use the more optimal version.

I can’t tell you the number of times I go to a website to buy something and I have to select the type of credit card being used. It is a minor step but by gum you want to make checking out of your website as painless as possible for people. That’s why Amazon’s one click was such an amazing idea. I frequently get to that last step and abandon the order because I’ve thought better of it (sorry, WebStorm, one of these days).

Instead of asking for a credit card type why not use these simple rules(Taken from eHow)

The first two to six digits of a credit card determine who the credit provider is. For example, Master Card begins with the numbers 51-55, American Express begins with 34 or 37 and Discover begins with 6011

So it looks like from the first few digits you can tell what the card type is without having to ask your users. There is a much more complete list of the prefixes on Wikipedia. According to that article these card numbers are actually part of a larger scheme which can identify the major industry as well as the sort of card.

As an example of detecting the card type I threw together a little script. You can try it out here. It currently detects Visa, MasterCard, American Express and China Union cards(hey, they have 1.2 million ATMs, they’re doing something right). Just type in a couple of digits.

• 4 Visa
• 34 American Express
• “¦

So much better than making people type and so quickly done.

I know what you’re thinking: you’re thinking that the lines in an SVG image are pretty boring and how did I get a whole post out of this? Actually lines have some interesting properties in SVG which makes them super-cool(you have to say super-cool with a French accent ““ the oxymoronic nature of being both French and cool is delicious).

Up first is that you can specify line endings for any line. If you’ve done work with PowerPoint or any sort of graph software then you’ll have seen lines with arrows at the end. In SVG you can actually end line with any shape you want. Firs you need to specify a marker then apply it to a line. For a normal arrow ending you just need to specify a quick triangular path.

There are also some fun attributes hanging off the marker itself. The id specifies a name; this is used later to attach the marker to the line. Next a view box is simply a way of defining how big of an object we’re creating. This is a small arrow so we’ve set the offset to (0,0) and it is 10 pixels by 10 pixels. The refX and refY will offset the arrow from the attachment point. We’re setting a value here just enough to center it on the line. Next is the actual size of the marker and the final orientation attribute rotates the marker so it follows the same slope as the final segment of the line.

This marker can easily be attached to a line like so:

And it ends up looking like

Arrows are pretty boring so let’s make something more interesting.

Will get you

That stop sign is a little sickly but it gives you a good idea of what you can do.

The next cool thing is that you can specify a dotted line. This is easily done with thestroke-dasharray attribute.

This line is created with a value of 10,10. That’s 10 pixels of line then 10 pixels of space. The hilarious thing is that you can specify very complex pattern of dots and dashes. Each alternate number is either a space or a visible part of the line. For instance this is how it looks with a value ofstroke-dasharray=”3,3,3,3,3,3,10,10,10,10,10,10,3,3,3,3,3,3”³.

For the very observant you may recognize this pattern as SOS in Morse code.

Don’t say I’ve never given you information you can use to signal planes from a life raft using only a mirror.

I talk a lot about alternatives to writing JavaScript(typescript, coffeescript, dart,”¦) and that JavaScript is really just an assembly language for the web. That got me thinking about SQL and whether we should be considering it an assembly language for databases.

SQL has a lot of problems which make it more difficult to use. Just look at the list of key words for it.aspx): the list is huge and the list of future reserved words bring the list to crazy levels. It would be nicer if the keywords were moved from being keywords to being library functions. The syntax is also not conducive to providing autocompletes. Consider the simple SQL

select Id, Name, Number from tblThingies

The autocomplete domain is the set of columns in tblThingies, because this is naturally typed from left to right (at least in English, how does this work in Arabic?) the domain isn’t defined until after the terms Id, Name and Number are written. This is not at all conducive to autocomplete.

The concepts in SQL are sound. Largely functions in SQL are set operations and if you treat the language as a set manipulation language instead of a procedural language then it is really good at it. Modern languages have a different approach to syntax and formatting from which SQL couldbenefit.

There are actually a number of languages which do compile to SQL. LINQ is one example and the HQL language from Hibernate and NHibernate is another. I think HQL gives a good example of what a more modern query language looks like. From the HQL community documentation I took this example:

You can see the select ordering still doesn’t provide us autocomplete capabilities and the key words are still very SQLly. I don’t think that HQL goes far enough in fixing the problems of SQL LINQ does a better job. That same query in LINQ would look something like

(although I haven’t tested this).

You can see the select is moved to the end and at the same time the select is transfigured into a more object oriented syntax. I like the idea of returning objects by default. It makes the language more powerful and it reduces the friction in talking to OO languages which are going to be the majority of languages now.

I don’t think we’ve explored the idea of SQL as an assembly language enough yet. LINQ is available through LINQ pad but I’m not aware of any standalone system which allows for HQL queries to be run against a server. I like the idea of compiling languages to SQL. The syntax is going to take some work but it would be great to see something adopted by the major vendors.

Some years back Google decided to build a browser. As I understand it Chrome cam about not as a 20% project like so many other google products but as an effort by the foundersSergey Brin and Larry Page. It was a brilliant move which has changed the face not just of browsers but of how we use computers in general.

Is it that Chrome ushered in the era of fast JavaScript? Is it that Chrome wasn’t afraid to innovate by including new features? Is it that Chrome introduced process per tab to eliminate the crashing hanging monstrosity that was Macromedia Flash? No the big innovation in Chrome was that it updated itself.

I know what you’re saying: lots of applications update themselves. Well that’s true. I remember building an automatic update system for a desktop application I worked on back in 2005. It was a great system but it had a flaw which I didn’t even realize until Chrome solved the problem. Myapplicationasked users if they wanted to update before the update ran. The update was not silent. Chrome just updates in the background. This results in adoption curves which look like this:

Within a few weeks almost everybody is using the latest and greatest. For years we’be dealing with the legacy of slow adoption of internet explorer versions. That should not be anywhere near as bad a problem with Chrome.

While it is impressive how easily Chome is updated what is moreimpressiveto me is that there are so few problems with this continual upgrade cycle. As was pointed out to me in a meeting today IT departments tend to be very resistant to this sort of update model. They are terrified that new versions of software are going to break things for their users. This has proven to be false. It was always amusing to me that IT departments would claim that they need to do some sort of comprehensive testing on all their software when a new version of a browser came out. There is so much to test I really don’t know how you would ever do it.

Instead it is easier to just be spry and update your apps to account for new versions of browsers. The continual updates are likely to be small and not break much. If the entire internet can handle chrome updates it seems like a single IT department could do it too.

Chrome’s big revolution has been to prove the viability of continual updates.

I hear that the way github as a company works is that if you work there and think that github needs a feature you just build it. One of the features I’ve just recently discovered are github pages. Pages allow projects and people to put up simple static pages to communicate about the project.

I happen to do some development on a little project called Angela Smithand it needs a website. At the moment all the documentation is scatted over a series of blog posts by the various contributors. It would be great to bring that all together.

It was pretty simple to set up the most basic of pages. I checked out the latest version of AngelaSmith and created a new branch.

git branch gh-pages git checkout gh-pages

The gh-pages branch is a special branch which is monitored by a build process at github. When it detects a new checkin it will build the site and deploy it to .github.io/. In my case that meanshttp://stimms.github.io/AngelaSmith/.

That’s not a very friendly name so it is possible to set up a custom url to point at that.

You can also use the Jekyll static page generator to build pages from templates and using includes. There is a bunch of documentation out there on how to use Jekyll. I have to say that while the documentation looks good it isn’t super informative. It took me quite some time to figure out that the character encoding was very important. I ended up backing my content down to code page 437 and not UTF-8.

Once I get Jekyll figured out I’ll put up more posts on it.

If you read the comments on yesterday’s post there was a bit of a discussion about some alternatives to the number of boxes in the best of visualization I created. When I built that visualization I based it on the number of games + 1. This would prevent a situation where a full series was required and the final score was ambiguous

By using colours it is possible to make this look a bit better. This also offers us an opportunity to generalize some of the code written yesterday.

The most obvious improvement is around the function shouldBeFilled

First thing is that the function name is lying. It isn’t telling if the box should be filled or not. It is setting the fill color. So let’s rename it. Next up the use of hard coded values for the colours bugs me. If we’re going to be using a different colour for each team then we have to change this.

Here I’ve gone ahead and assumed that I have an options object in my class. I don’t so one will need to be added. I’d like to maintain backwards compatibility so I’ll set up some default values for options.

Nobody calling my needs to change their signature but they can still override the options if they wish. $.extend is a jQuery helper which merges the properties on two objects. One could even say that it composes a new object.

To set the options a caller can just do

There was also talk of adding some emphasis to the center block. I do have some ideas for that which we’ll explore in a future post. You can see the results of today’s post athttp://bl.ocks.org/stimms/5734160

Having moved to Canada late in life I never really got into the hockey spirit. It might have been that hockey looked hard or it might have been a strategic campaign of hockey disinformation perpetrated by my parents in order to avoid driving to Tiny Town in the Middle of Nowhere, Alberta at 6am on a Saturday. If the latter then it is a brilliant plan I intend to duplicate with my children. Ideally they will play a sport which enables me to travel to warm location and sit on a beach while they do whatever they do. Competitive tiddlywinks, perhaps.

Despite this lack of interest in hockey I do find myself on the NHL website several times a month. Partially my visits are due to a well developed sense of schadenfreude around the pathetic Calgary Flames. Partially they are due to a love of statistics. I like watching the numbers of points move and the teams go up and down and calculating just how hopeless the Flames are.

I don’t think I’m the only one who likes sports statistics but the presentation of these statistics is really dry. A table of numbers is, generally, not very accessible to people. I thought I might try building a few simple visualizations to try to improve upon that. If you happen to be a representative of some professional sporting organization which pays their players millions of dollars and you want to steal these visualizations then they are ultra-mega-super-purple-ninja copyrighted(we can work out a massive license agreement). If you’re anybody else then they’re open source.

Today I’m going to look at a best of series. These are very common and are typically in the form of the first team to 3 wins wins the series. You know, unless you’re the NHL and stretch the season out into July by making your series best of 7. On nhl.com tonight there is a graphic showing how the teams are doing. We’re down to 4 teams so these are the semi-finals.

The key information for which people are looking on an image like this is:

1. which teams are playing

2. who is winning the series

3. the next game time

The graphic they use is pretty good at giving the teams playing. It is clear which teams are playing against each other and, if you’re fan enough to go to nhl.com, the logos are obvious. The next game in the series is also obvious. However the number of games won by each team in the series isn’t. My eye is drawn to the number under the team abbreviation. This is actually the standing of the team in the regular season. For the series on the left it is relatively apparent this isn’t the information for which I’m looking: there can be no one team with 5 wins. The series on right is less obvious. Boston could well be leading 4-1.

Instead of putting in “BOS LEADS 3 ““ 0”³ we could put in an easy visualization.

There are some improvements possible here too:

• use the team colours to fill the boxes
• use a gradient to show how each game gets closer to hitting the magic 4
• make it more obvious that they only have to get to half way
• change the shade of the fill depending on the score differential

You can check out my d3.js version of this over athttp://bl.ocks.org/stimms/5727304

In an ideal world every website would have a friendly JSON interface which would allow you to, at the very least, read data. We sure don’t live in that world. For a couple of the windows 8 and windows phone apps with which I’ve been playing I’ve needed to go out to a website and parse some content. I started off in python using a library called BeautifulSoup. I got that all working fine but I ran into a problem inserting the records I had retrieved into an SQL Azure database. As it turns out there are some silly inconsistencies with using FreeTDS on OSX which would have required me to recompile to get it to work against Azure SQL.

Nope.

There was a time when I was all over building my own kernel and tweeking things. I’m past that now and I just want stuff to work. God, just work (I have a whole rant about printers and printing not working but it descends into language which would melt your face so quickly that I dare not post it). So that went out the Window and I switched to C#. Actually, first I switched to using a JavaScript scheduled task in Azure mobile services. However there were limited node modules available and I didn’t feel like writing or including a whole HTTP library.

Right. I chose to use the HTML agility pack which is a pretty good parser for HTML. Frequently sites don’t have well formed HTML which makes parsing them with a full featured XML parser impossible. You don’t want to get involved in XML anyway - it is a gateway drug to proprietary file formats.

The agility pack has a built in HTTP client but I wasn’t too impressed with it as it just returned the document and not the status code. Without knowing if the page was a 404 my particular parsing job was difficult. Instead I made use of the HTTP client in System.Net.Http to pull the page. In this case I’m pulling down a page from the web comic XKCD.

All this stuff is asynchronous in .net 4.5 which is great. For all too long we’ve laboured in code bases which assume that network operations run at local speeds. I’m looking at you windows file system.

Parsing the returned document is also very simple

Now we have the document loaded into the agility pack we can perform simple XPath queries against it.

The first query there selects the first image in the first div with an id attribute with value comic. Using a double // means that I’m not concerned about how deep in the tree the node appears. The second query just grabs the first div with an id of ctitle. You can also use a SelectNodes function to select multiple matching nodes.

I’m not crazy about using xpath for this sort of thing. It would be great to have a CSS selector based library in C#. As it turns out there is a project called Fizzler. I guess it is still in beta, but the few things I read about it suggest it works quite well. I’ll have to play with it for another post. It certainly would be nice to only have to know one HTML query language.

I’ve been playing around a bit with angularJS and Windows 8 JavaScript. For the most part it has been a pleasant sort of endeavour. I did run into one thing for which I had to find a solution and I thought I would post it here.

The JavaScript context of WinJS applications is slightly more restrictive in some ways than IE10 JavaScript on which it is based. One of the limits is around adding content to a page. Because the Windows 8 apps have more power over the local file system than the sandboxed IE10 implementation there are some increased risks to allowing arbitrary content to be added to the page.

The functions

• innerHTML
• outerHTML
• document.write

Are all illegal functions. Instead one should be making use of

• innerText
• document.createElement
• setAttribute

There are two posts on the topic

• http://onehungrymind.com/windows-8-and-angularjs/
• http://blog.jonathanchannon.com/2013/01/24/using-angularjsbackbonejs-in-windows-8-javascript-app/

However both of them are out of date as they reference custom builds of jQuery. As of jQuery 2.0 you don’t need to use these tricks to get jQuery to work. However I did find that the latest angular still had an issue. In the final line of angular some styling information is injected onto the page.

angular.element(document).find(‘head’).append(‘‘);

As you can see this just uses an append. Now append typically just calls appendChild which is permitted by WinJS. I still found it to be an issue, perhaps because we’re appending a child with properties instead of a child with properties set with setAttribute. I solved it by using the execUnsafeLocalFunction method in WinJS. This overrides the security restrictions for the function passed in as an argument. I was confident the angular code was not going do harm so I felt okay about using this. In general I would take the time to rewrite the code to be more secure.

MSApp.execUnsafeLocalFunction(function () { angular.element(document).find(‘head’).append(‘‘); }); You just need to make sure to include angular after the Microsoft JavaScript libraries.