Finding that blogging balance!

I work hard. Least that’s what I get told :P – I’ve found it hard to find the time to blog as I much as I’d like to but after a recent conversation I had an epiphany. While I’m working on Fillta I’ve decided to do some contract jobs, “student internships” and whatever else I can to survive while I do it. After a recent interview I got a really nice compliment from the guy and it got me thinking. He basically said I’m way more knowledgeable than he expected, my age and being a recent graduate (Technically not true, graduation is in July) completely hides my experience and knowledge from an outset. He said he’d checked out my blog from my CV and it didn’t reflect it either…

So starting next week (finishing up 2 projects now) I’ll be writing a blog post at least 3 per week with the intention that as I get back into it I’ll increase the amount. Read more of this post

AngularJS: If you don’t have a dot, you’re doing it wrong!

This has bitten me twice in the last 3 days so I’m doing a quick post to remind myself.

With AngularJS models, you typically have two way bindings between UI elements and your controller’s properties. Directly from the docs (Plunker)

<!doctype html>
<html ng-app>
 <script src=""></script>
 <script src="script.js"></script>


<form name="myForm" ng-controller="Ctrl">
 Single word: <input type="text" name="input" ng-model="text"
 ng-pattern="word" required>
 <span class="error" ng-show="myForm.input.$error.required">
 <span class="error" ng-show="myForm.input.$error.pattern">
 Single word only!</span>

<tt>text = {{text}}</tt><br/>
 <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
 <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
 <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
 <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>

Read more of this post

AngularJS – Communicate between controllers, services and directives

This solution uses JQuery.
I already include JQuery in the page so why not use it. If you need a non-JQuery solution here are a few links:

StackOverflow suggestions
Video tutorial
Native AngularJS broadcast

angular.module('fillta.service.Events', ['ngResource'])
    .factory('Events', function () {
        var el = document.createElement('div')
        var EventsListener = {
            on:function (event, callback, unsubscribeOnResponse) {
                $(el).on(event, function () {
                    if (unsubscribeOnResponse) {
                        $(el).off(event, el, callback)
                    callback.apply(this, arguments) //invoke client callback
            emit:function (event) {
                $(el).trigger(event, arguments)
        return EventsListener;

This is a very quick and dirty entry. Essentially JQuery already has an amazing, cross-browser event system implemented. Its included in the page to make use of a few plugins, it seemed like a better idea to just use it over the other work arounds. And it seems (apparently, not tested myself) the native AngularJS way can be inefficient.

Stick that block of code in your services file. whenever you need to use it in another server or controller just add “Events” as a dependency then you can use, Events.emit(‘event’,arg1,arg2) and in your other controllers subscribe using Events.on(‘event’,function(arg1,arg2){},false) – The third argument is optional, if true then a function is unsubscribed when the event is emitted for the first time, otherwise it stays subscribed and listen for events.

That’s it. I have about 30 unpublished posts I need to finish off – Hopefully get the time soon but look forward to some tutorials and info on my experiences working with a range of technologies the last 7+ months (NodeJS,Socket.IO,Cassandra,AngularJS,requireJS,Netty,Higgs and loads more). Hope it is useful.

Dynamically require/include a Javascript file into a page and be notified when its loaded

This is a simple little JavaScript snippet I wrote the other day that basically includes an external javascript file in an HTML page head section.

Its pretty straight forward,

  • it first gets a reference to the head tag.
  • Creates a script element using document.createElement
  • Sets the source/url of the file
  • sets the type of the script element to the correct mime type of “text/javascript”
  • Then sets the onload property of the script element to a callback function you supply. In i.e. it will check the onreadystatechange and execute the callback function you provide.
  • And finally it appends the script element to the head of the page

		 *Load an externl JS file and append it to the head
		function require(file,callback){
			var head=document.getElementsByTagName("head")[0];
			var script=document.createElement('script');
			//real browsers
			//Internet explorer
			script.onreadystatechange = function() {
				if (_this.readyState == 'complete') {

Probably a million and one ways to do this but it works decently in I.E 7+,Firefox,Chrome,Safari and Opera

Quick tips for squeezing performance out of Google’s Javascript charts with live (continuous) data/streams

I, until a few days ago always used JQuery for literally everything that needed Javascript. I’ve recently needed to use Google charts to show a live graphical representation of data. It needed to be a widget that didn’t rely on any framework so I had to brush up on my Javascript and forget all the easy stuff JQuery usually gives me! The chart would be updated EVERY SECOND, yeah pretty often! In every second there could be any amount of new points to be plotted. In addition, I’m only interested in points that have occurred within a fixed time period, the results of all this will be an “animated” graph that shifts left when data is updated. Read more of this post


Get every new post delivered to your Inbox.

Join 1,384 other followers

%d bloggers like this: