Archive for the ‘Javascript’ Category

jsNoSpam – make it harder for bots to find your email address

March 6, 2016

If you want to put an email address on a web page, and have it human readable and easy to click on to open up in a mail client you run the risk of exposing yourself to one of the sleazier sides of the internet. Spam email. There are bots out there which relentlessly hunt down email addresses so their masters can deluge you with unsolicited commercial email (or worse, virus infections).

The best solution is to never show the email address – get your users to use a “Contact Us” form or similar so that there’s nothing for the bots to find. But sometimes you can’t do that, either because of how the pages are hosted or your client simply doesn’t want you to.

So… jsNoSpam was born. 100% javascript, so all client side and easy to insert anywhere that allows you to edit raw HTML and include javascript.

The script works by doing a number of things…

  • Requires you to encode the email addresses so they never appear in a recognizable form in the script or HTML source.
  • Supports decoding the email address back to a usable format
  • Allows you to display the de-coded address on the page, or to require a user action (mouse over, click, keyboard navigation etc) before revealing the address.

Because the email address which is inserted into the page via the script is clickable and usable like any regular mailto: link would be user inconvenience is reduced to a minimum, but the effort for a bot to scrape the address is increased and hopefully as there are enough potential variants in how the script can be applied it will keep it ahead of the game.

Here is a live demo of the code in action.

The code is hosted on GitHub, and is open source and unrestricted license (though it would be great if you find it useful if you comment here). It’s been tested in as many browsers as I can and also with assistive technologies (eg NVDA) but if you do find an issue please comment (or better yet fire off a pull request for me to incorporate your fix).

On their own, the techniques used (encoding the address, requiring user intervention etc) are not new, but hopefully combined they will produce a robust enough solution for people who need this workaround.

Browser Profiles – an excuse to play with Chrome Extensions

December 27, 2013

Like many people I use a laptop that I carry from home to work and back again. That coupled with browser preferences syncing to my other machines means all my bookmarks and extensions travel everywhere with me.

At work (or on our VPN) there are certain intranet sites I can access that are not public, so I’d prefer not to see them if i can’t click on them. There are also some browser extensions that I don’t want to run at work because they are not on our IT departments approved list. This means that either I have to stop syncing settings, or use a different browser for work… or come up with a smarter solution. (more…)

Mobile Browsers getting better

December 14, 2011

After struggling for years with sub-par browsers on small screen devices Apple did a good job raising the bar with Safari on the iPhone and now iPad. Google for some reason stumbled a little out of the gate with the browser on Android – rather than take their existing and proven Chrome they delivered an older and less capable core and it looks like only now with the 4.x generation devices that they’re finally starting to improve things (though that doesn’t help the 80-90% of their existing user base who will never get an upgrade to the latest goodness)

With the initial release of Windows Phone 7 it seemed like Microsoft had fallen into the trap of not treating mobile browsing as a first class experience and they shipped an IE7-like browser. That changed however with the release of v7.5 “Mango” which brought the full capabilities of IE9 (arguably the most standard adherent HTML5 browser) to the platform.

With people paying more attention to the mobile browser evolution and digging into capabilities (such as this review from Sencha) and arguing that the mobile web is not going away any time soon it would be great to see how the "Mango" with IE9 stacks up in these tests against the other two… Would be great to see Sencha or similar run their tests against all three? So far playing around with IE9 in Mango, it seems to do a really good job in most situations but I’ve not drilled down to quite the level of detail that they have yet.

playing a .pls source in the video tag

October 6, 2011

One thing that had been bugging me with the <audio> tag in HTML5 was that it while it was great at handling single files it doesn’t cope very well with being pointed at a shoutcast/icecast .pls file.


A bit of digging and I found that if you broke open the .pls file and used the actual stream source as the <audio src=”?”> parameter then it was quite happy to play the stream.


As a .pls file can contain a number of source files (subsequent items in a playlist, failovers in case one server isn’t running etc) the code also needed to cope with either an error or the selected stream coming to an end – luckily that isn’t too difficult with the event model supported by the audio tag.


I’ve shared a first cut of the code here on GitHub so feel free to edit/improve and share – for instance my code assumes that the NumberOfEntries parameter in the .pls file is the second line (in some instances it’s the last but one line) so there’s room to make it more robust.


Obviously it can’t perform magic … unless the stream is using a codec that your browser supports it will simply error out, but it does provide a fairly simple way to extend the capabilities of the <audio> tag

GUIDs in JavaScript

July 14, 2011

Update: From the comments below it looks like I arrived at the same solution as someone else had  come up with earlier. Recommend you check out the code as they have done more work on making it more performant and robust.




A while ago I needed a quick and simple way to generate a GUID in a JavaScript project but most of the examples that I could find were either slow, cumbersome or didn’t always pass GUIDs that would pass verification, so I had an attempt at writing my own that had to be performant, small and robust enough to use in a real world environment at scale.


Well, after generating 50 million GUIDs across all the mainstream browsers (and some pretty obscure ones!) in my other logging system (an internal project, not jsErrLog – though it’s used there as well) I’m happy that it’s behaving well enough to share so with no further ado…


function guid() { // section 4.4

                return ‘aaaaaaaa-aaaa-4aaa-baaa-aaaaaaaaaaaa’.replace(/[ab]/g, function(ch) {

                                var digit = Math.random()*16|0, newch = ch == ‘a’ ? digit : (digit&0x3|0x8);

                                return newch.toString(16);




Regular expressions, nested functions and logical operators… probably the most I’ve every crammed into that few characters though if you’re really obsessive you can crunch it down even further to one line at the cost of readability:


guid=function(){return”aaaaaaaa-aaaa-4aaa-baaa-aaaaaaaaaaaa”.replace(/[ab]/g,function(ch){var a=Math.random()*16|0;return(ch==”a”?a:a&3|8).toString(16)}).toUpperCase()};

jsErrLog: now alerts via XMPP

June 13, 2011

Although it’s nice to know that the jsErrLog service is sitting there recording errors that your users are seeing it does put the onus on developers to remember to check the report page for their URL to see if there have been any issues.

To make things a little more pro-active registered users can now connect to an XMPP (Google Chat) client (eg Digsby) and every time there’s a new error reported the bot will send you an alert.

Because you might get a flurry of messages if you deploy a version and there’s an error, or a 3rd party component has a problem the bot also listens to a set of messages so it’s easy to suspect the alerting (or turn it back on when the problem has been fixed).

At the moment there a few restrictions:

·         alerts have to match a specific URL

·         for a given user all alerts are turned off/on (no per URL granularity)

·         alerting is only available to users who’ve made a donation or promoted jsErrLog

The reason for the first one is a limitation with the way AppEngine lets me query data (unlike SQL the GQL query language does not support the CONTAINS or LIKE verbs)… I’m looking for a solution to that

The second is a feature that I plan to add soon depending on demand.

The third… at the moment it takes a little bit of setup to add new users so I’m adding it as the first freemium feature though this may change. If you want that enabled please let me know the URL you are monitoring and your Google Chat ID and I’ll let you know what else you need to do to enable it…

jsErrLog – now with XML

June 9, 2011

To help analyze data from jsErrLog – my Javascript Error Log service – I added a new feature today: An XML data feed for reports.

You can access a report as normal and view it in the browser, eg the sample report and on there you will now see a direct link to the XML version of the report.

If you know the name of the URL you want to report against then you simple access it via where the parameter after the sn is the URL you want to query.


Both the report and the XML show up to the last 500 results for the URL. I plan to add limits to the XML feed, and pagination to the HTML report in a future release (let me know in the comments what’s more important, and any other requests). I would like to implement a full OData feed for the data but haven’t found a good Python / App Engine sample out there yet…

One great thing about having the data available as an XML source is that you can add it as a Data Source in Excel and from there filter and sort to your hearts content


update: New version of the Javascript debugger

March 18, 2011

Although jsErrLog, my “Web Watson” has only been out a couple of days I had a great suggestion to let developers add some additional context to errors that are being trapped.

To support this I’ve added a new parameter that’s a string variable you can update at any time (after the library has been registered on your page of course) and the first 512 characters simply get passed through to the report database.

To use this new feature simply add a line that updates what you want passed through with the data you want passed and if the error handler gets called then the data will be transferred to the database = “Populated the Info Message to pass to logger”;

Any other features you think are worth adding?

Watson for the web – trapping Javascript errors

March 16, 2011

A while ago I wrote a small piece of JavaScript code that I needed to be able to integrate into lots of different sites to help streamline the Silverlight experience, but it was important that I didn’t break anyone’s existing code.

While we did extensive testing with the partners before we deployed it there was always the worry that a combination of browser and OS and plug-in we’d not tested would cause a problem we’d not foreseen.

As websites get more complex, and HTML5 brings more of the heavy lifting back to rely on JavaScript to build really dynamic experiences so my little nagging concern was just going to keep on getting bigger.

While you can wrap every statement in a Try…Catch loop and deal with exceptions that way it’s not the most efficient, and if you’re integrating libraries from a  lot of different sources then it’s not really practical.

As luck would have it two of the browsers had already implemented the key to the solution… the humble JavaScript window.onError function. In IE and Firefox it allowed you to attach an event handler that would kick in whenever an un-trapped error occurred and allow you do to whatever you needed to manage the problem.

I took that functionality and build a small script that could be injected via a single line of JavaScript into the page you want to monitor that would catch any unhandled error condition and report back to a remote cloud service the script, the error, the browser and OS versions so a developer could quickly and easily re-create the test scenarios. The code is available at jsErrLog.

Then because Chrome, Safari and Opera didn’t support the onError function I rather shelved the project. Just a few days though with the release of Chrome v10 another browser could be added to the support matrix for remote error reporting (and as the fix is in the WebKit core we can only hope that a release of Safari greater than v5 will roll out support as well)

While I wait for Safari and hopefully Opera to catch up with this I’m making a couple of other small tweaks to the code to make it a bit more reliable, as well as adding some extra functionality to allow developers to pass additional information back to the reporting database to help with debugging their specific apps.

Check it out , kick the tires and let me know if you have any feedback…