Tag Archives: JavaScript

Using Loops in Jasmine

Leave a reply

If you want to test your code against 10 different inputs you don’t want to have to write 10 different tests. You want to write one test you can call 10 times.

The cleanest way to achieve this is to have your inputs and outputs stored in an array or object (In the example below I have chosen an array).

Intuitively (especially if you are familiar with how to write Rspec tests) it might feel like all you need to do is wrap your it block in a for loop and have your arrays feed into it, unfortunately due to the nature of how Jasmine executes this will not work.

What you need to do is wrap your it block inside a function, which you can then call from inside a loop. For example;

describe('this is my looping test!', function() {
  var input = [1,2,3];
  var output = [10, 20, 30];

  function test_my_times_ten(input, output) {
    it('should multiply ' + input + ' by 10 to give ' + output, function() {
      expect(input * 10).toEqual(output)
    });
  }

  for(var x = 0; x < input.size; x++) {
    test_my_times_ten(input[x], output[x]);
  }
});

With this technique you can see how you could quickly build up a very large and comprehensive test suite without writing a large amount of tests, things start to get really interesting if you start having nested loops passing in input. Just be aware of the performance implications of nested loops though!

Share this on

Useful Chrome Extension for Backbone.js Debugging

Leave a reply

If you do much work with Backbone.js inevitably you are going to have to end up debugging some silly mistake you have made, I know I have been making about 5000 a second over the past few days.

Luckily I read today that there is a Google Chrome extension out that can help debug Backbone.js issues. The code can be found here along with an easy to follow installation guide.

One thing the guide does not mention is that you will more than likely need to restart Chrome to get this to work, I know I did.

Whilst it is clearly still in early development, I have already been putting it to use and getting good stuff back from it

Share this on

Insert Gists without JavaScript

Leave a reply

If you would like to insert Github’s Gists into your blog posts or pages but don’t want the overhead or potential security implications of loading some JavaScript from a third party then it is relatively straight forward to get around.

Here is a gist I have created just for this post – https://gist.github.com/tosbourn/4949176

And here is the JavaScript file I am meant to include;

<script src=”https://gist.github.com/tosbourn/4949176.js”></script>

But instead of including it, lets visit the JavaScript file at https://gist.github.com/tosbourn/4949176.js

Well, well, well! Looks like it is just some Document.Writes, those guys are pretty easy to work with, so lets copy the entire thing and paste it into a text editor.

Once in the text editor we need to run a find and replace on a three things;

  1. Find any reference of \n and remove it.
  2. Find any reference of \ and remove it.
  3. Find any double spaces and remove them.

Then just remove the document.write(' and '); from the start and end of the two lines.

You are left with something like this;

<link href="https://gist.github.com/assets/embed-0af287a4b5c981db301049e56f06e5d3.css" media="screen" rel="stylesheet" />
<div id="gist4949176"><div><div><div><table cellpadding="0" cellspacing="0"><tr><td><span id="file-gistfile1-txt-L1" rel="file-gistfile1-txt-L1">1</span><span id="file-gistfile1-txt-L2" rel="file-gistfile1-txt-L2">2</span><span id="file-gistfile1-txt-L3" rel="file-gistfile1-txt-L3">3</span></td><td><pre><div id="file-gistfile1-txt-LC1">Here is my Gist!</div><div id="file-gistfile1-txt-LC2">Look at it!</div><div id="file-gistfile1-txt-LC3">Gisting all over the place</div></pre></td></tr></table></div></div><div><a href="https://gist.github.com/tosbourn/4949176/raw/678465ea9db744f03fa7628745942fae281d1123/gistfile1.txt" style="float:right">view raw</a><a href="https://gist.github.com/tosbourn/4949176#file-gistfile1-txt" style="float:right; margin-right:10px; color:#666;">gistfile1.txt</a><a href="https://gist.github.com/tosbourn/4949176">This Gist</a> brought to you by <a href="http://github.com">GitHub</a>.</div></div></div>

Now we are almost there, we could include this on our page and no JavaScript would run, but we do still need to go across to Github to grab the CSS file and of course there will be a slight performance hit with that, so lets go on over to https://gist.github.com/assets/embed-0af287a4b5c981db301049e56f06e5d3.css and grab the CSS.

Now we simply replace the first line of our code from the link element to a style block and include the CSS, now all that is left is to copy and paste this code from our text editor into our website.

Here is the result sans external calls;

123
Here is my Gist!
Look at it!
Gisting all over the place
view rawgistfile1.txtThis Gist brought to you by GitHub.

I think it works well and you can’t deny the performance benefits.

You can also make this process a bit smoother by requesting the .json or .txt versions of the Gist, in our example change .js to either .json or .txt, like so: https://gist.github.com/tosbourn/4949176.txt

Thanks so much to PunKeel for suggesting the .json or .txt variants.

Share this on

Replacing Social Media Share Buttons with non-JavaScript counterparts

Leave a reply

Social media share buttons are a bit of an expected feature on today’s websites, love them or hate them they are probably going to hang around for a while.

Of course like anything on the internet there are arguments for and against them from a user experience point of view but one thing that there can be no arguments about is that they cause extra load on your webpage. All the major social media share icons as supplied by the services use JavaScript hosted on their websites.

What this means in practical terms is that if you have four social share buttons on your article you are adding in at least four additional network requests to your page load, obviously there are worse things you could be loading in, each of the major players is smart enough to serve up pretty good code, but that isn’t the point — even the most efficient code in the world still requires a network request, a download, a parse, etc. etc.

Is this an issue? Probably not on your nice high-speed broadband, but is it an issue on your phone? You betcha. The entire reason I was looking at this in the first place was I received a bug report* for something I was working on that on some mobile browsers the page was reporting it was only 95% loaded when all assets appeared to be served and working. The asset that was not loaded was a Facebook share button and until it loaded the page was in a mobile loading state, which is not nice for the user.

At first I started looking at better ways to load in the buttons, and there are plenty of good ones (http://socialitejs.com/ looked very good) but I started thinking about what I wanted to be doing which is passing the user over to their social networking site of choice to allow them to share my content.

Then in a moment of extreme clarity I remembered that HTML5 has an element that allows you to do just that, in fact it has been in HTML for a while, that’s right, the <a> element, all I want to do is allow the user to jump onto their social network at their sharing page and all the major ones allow it and HTML has supported links for a very long time.

Here is some sample code showing the four social networks I decided to target (including the actual links used in my project, I am too lazy to change them):


Share us on 
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdigitalcreativejobs.com">Facebook</a> 
<a target="_blank" href="https://twitter.com/intent/tweet?text=Find%20a%20digital%2C%20creative%20job%20in%20%23NI%20&url=http%3A%2F%2Fdigitalcreativejobs.com&via=tosbourn">Twitter</a> 
<a target="_blank" href="https://plus.google.com/share?url=http%3A%2F%2Fdigitalcreativejobs.com">Google+</a> 
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fdigitalcreativejobs.com&title=Digital%20Creative%20Jobs%20in%20Northern%20Ireland&summary=Find%20a%20job%20in%20the%20Northern%20Irish%20Digital%20Creative%20Industry&source=Digital%20Creative%20Jobs">LinkedIn</a>

Not a single line of JavaScript required.

Of course this technique does have some downsides, the first is that you don’t have access to things like share counts and features like Facebook showing you if your friends have liked an article.

The second is that you can’t get them in a nice pop-up or expanding box like you can with JavaScript, you can just send them to a page.

Both of these things I am fine with, and other issues like not being able to track clicks onto them are easily mitigated with some JavaScript feeding into your analytics package.

There is also an added bonus in that you don’t need to have Facebook/Twitter/Etc cookies coming from your website.

If you want to see the icons in action you can view the website I am working on, which is a Job Board for Northern Irish Digital, Creative types.

*Thanks to Derek for the feedback.

You can discuss this post on Reddit or Hacker News if you like, or tweet me.

Share this on
invalid

Every time you write non-standard or invalid code

Leave a reply

Warning — I am about to go on a rant.

Every time you write non-standard or invalid code and it works, just remember that some poor sonofabitch browser developer has had to spend developer time to interpret your shitty code, to work out that you probably meant to close that tag, or that you probably meant ” when you used ‘. The same goes for when a crawler finds your content and spiders your website — if you haven’t written your code correctly someone has had to write something to figure out your mess.

Before I get much further, full disclaimer — my code on this site doesn’t validate, I am indeed being part of the problem.

A good example of what I am talking about is how IE doesn’t support &apos; to many it feels like a bug on Microsoft’s part, but it isn’t because &apos; isn’t a supported HTML entity and they have no need to support it, but because so many people write their code with this in it in many people’s eyes it is seen as a bug.

Now you may argue that the code had already been written, and the browser’s job is to interpret websites and if a lot of websites do the same thing then the browser should be able to display that, and I guess that bares some weight, but here is the thing — imagine how good browsers could be if they didn’t need to worry about incorrect code.

Imagine how much further specs could be if browser manufacturers were able to concentrate on new features and less on supporting shite code.

Interestingly, I can’t find much written online about the amount of time or lines of code that are spent trying to support invalid code, I would love to hear from anyone who has access to that information.

Obviously if browsers were to stop supporting invalid code people would complain and ultimately stop using the browser, but what if all the major browsers got together and released something at the same time — sure it would break some of the web for a while, but the developers would soon get plenty of emails from people and plenty of grief until they fixed their mistake.

Share this on