Brad is a front-end developer and designer living in Melbourne and working with the team at SitePoint. He tries to keep on top of the ever changing front-end universe by eating JavaScript/CSS for breakfast.

Brad's articles

  1. Tidy Up Your Angular Controllers with Factories and Services

    There was a time, around five or six years ago, when jQuery was dominating the client side of the web. It read like plain English, it was easy to install, and the learning curve was flat enough for toddlers to ride their tricycles on it. With that ease of access however, came a slew of problems. jQuery made it easy to hack together something that “worked” but that came at the cost of best practices, maintainability, and scalability.

    Then, the framework wars began and soon everyone was clamouring to try the latest and greatest framework that would bring the promised structure and scalability to their app. One of those frameworks is AngularJS. Now, Angular’s learning curve is significantly steeper than jQuery’s but I think it has reached a point where many developers can quite confidently set up a basic application. That said, using a framework doesn’t automatically solve the core problem of application design. It’s still possible to build applications in frameworks like AngularJS, EmberJS or React that aren’t maintanable or scalable – in fact it’s rather common for beginners and even intermediate framework users to make this mistake.

    How Do Things Get Out of Hand So Easily?

    In order to demonstrate how this sudden complexity can occur in even the most basic of AngularJS apps, let’s start building one and observe where we might go wrong. Then, later, we’ll look at ways to fix it.

    Let’s Create a Simple App

    The app we’re going to create is a scoring app for http://dribbble.com players. We’ll be able to type in a Dribbble user’s name and have them added to a score board.

    Spoiler – You can see a working implementation of the final product http://codepen.io/Haizyfox/pen/CIzbh/.

    Begin by creating an index.html file with the following contents to get started:

    [html]
    < !DOCTYPE html>



    Dribbble Player Scores

    Add Dribbble players to see how they rank:




    [/html]

    Create Our AngularJS App

    If you’ve written an Angular app before, the next few steps should be fairly familiar to you. First of all, we’ll create an app.js file where we’ll instantiate our AngularJS app:

    [js]
    var app = angular.module(“dribbbleScorer”, []);
    [/js]

    Now we’ll include that in our index.html file. We’ll also add the ng-app="dribbbleScorer" attribute to our <html> tag to bootstrap the Angular app.

    [html]





    [/html]

    Now that our app is setup and bootstrapped we can start handling the business logic of our app.

    Making It Work

    It’s time to actually implement our app. Remember that we’re approaching this in a “let’s get it working” fashion, because that’s often the reality we’re faced with. In the same way that one might’ve rushed to add a click handler with jQuery, Angular users will often reach for the quickest route to a working app: ng-controller. Let’s see how that might work.

    In app.js we’ll define a controller and some dummy player data:

    [js]
    var app = angular.module(“dribbbleScorer”, []);

    app.controller(“DribbbleController”, function($scope) {
    $scope.players = ["Tom", "Dick", "Harry"];
    });
    [/js]

    In index.html we’ll insert our controller using ng-controller, and we’ll edit our ul list to loop over the players and display each of them in an li:

    [html]

    • {{player}}


    [/html]

    If you save both files and open up index.html in a browser you should see a list of the three names Tom, Dick and Harry. Pretty easy and so far, quite clean.

    Implementing the Form

    Next, let’s get our form working. We’ll need a variable to use as the ng-model for the input field, and we’ll need a click handler for the button. The click handler will need to add our input to the current list of players.

    In index.html add the model and click handler to our form:

    [html]


    [/html]

    Next, we’ll implement those two things in app.js:

    [js]
    app.controller(“DribbbleController”, function($scope) {
    $scope.newPlayer = null; // Our model value is null by default
    $scope.players = ["Tom", "Dick", "Harry"];

    // Adds a player to the list of players
    $scope.addPlayer = function(player) {
    $scope.players.push(player);
    }
    });
    [/js]

    Test it out in the browser. Type in a name, click the Add button, and it should appear in the list. It’s pretty easy to get something working really quickly with AngularJS controllers.

    Fetching Data From Dribbble

    Now, rather than just using dummy player names, let’s actually fetch the player information from Dribbble. We’ll update our addPlayer() function to send the player name to Dribbble’s API, and push the result into the list instead:

    [js]
    app.controller(“DribbbleController”, function($scope, $http) {
    $scope.newPlayer = null; // Our model value is null by default
    $scope.players = ["Tom", "Dick", "Harry"];

    // Fetches a Dribbble player and adds them to the list
    $scope.addPlayer = function(player) {
    $http.jsonp(
    ‘http://api.dribbble.com/players/’ + player + ‘?callback=JSON_CALLBACK’
    ).success(function(dribbble_player){
    $scope.players.push(dribbble_player.name);
    }).error(function(){
    // handle errors
    });
    }
    });
    [/js]

    Remember to inject the $http service into your controller first. The Dribbble API is JSONP based, so we need to use the $http.jsonp() method and add ?callback=JSON_CALLBACK to the URL to allow Angular to automagically handle the response for us. The rest is pretty simple. In our success callback, we push the player’s name into the list. Go ahead and try this out in the browser.

    Removing a Player

    Let’s add a remove button to our player rows. First, make the following changes to index.html.

    [html]

    • {{player}}


    [/html]

    Then, make these changes in app.js:

    [js]
    app.controller(“DribbbleController”, function($scope, $http) {

    $scope.removePlayer = function(player) {
    $scope.players.splice($scope.players.indexOf(player), 1);
    };
    });
    [/js]

    You should now be able to add and remove players from your list.

  2. Creating Rich Video Experiences with Popcorn.js

    Considering just how easy it is to embed videos in websites it’s a marvel that developers often stop at just that: plain old embedded videos. What if you could create an entire experience for your user that’s directed by the video itself? With Popcorn.js you can do just that – and this article will teach you how.

    Popcorn.js Fundamentals

    Let’s start small. We’ll get Popcorn.js installed, and then get a “Hello World” example up and running in no time.

    1. Create a Simple HTML Page

    We’ll start off by creating an index.html file with the following content. The .video div is, unsurprisingly, where our video will eventually appear.

    [html]
    < !doctype html>




    [/html]

    2. Include Our Custom Styles

    Next, let’s include some basic styles for our project. The updated head section of the previous HTML page is shown below.

    [html]


    [/html]

    3. Include Popcorn.js

    Next, we need to include the Popcorn.js library itself. There are a number of options to choose from on the Popcorn.js download page. We’re going to use the ‘complete’ version, which includes all of the official Popcorn.js plugins. We’ll use the minified version in this tutorial, but you can use the development version if you’d like to have a poke around the source. Note the additional imports in the following code sample.

    [html]



    [/html]

    4. Create and Include app.js

    Next, let’s create the main JavaScript file for our app. This is where we’ll initialize our Popcorn.js instance. Create app.js and include it in your index.html file. The contents of app.js are shown below.

    [js]
    // Wait for the DOM to load
    window.onload = function() {
    // Create popcorn instance from the YouTube video and insert it into the .video div
    var pop = Popcorn.youtube(“.video”, “http//www.youtube.com/watch?v=x88Z5txBc7w”);

    // Play the video automatically
    pop.play();
    };
    [/js]

    And, the updated index.html head section as shown here.

    [html]




    [/html]

    In app.js we’ve used the Popcorn object’s youtube() method to create a video instance from a YouTube URL. The first parameter is a selector for our .video div. This is where Popcorn.js will insert our video. The second parameter is the YouTube URL. At the end of the file, we call pop.play() which does exactly what it says – it plays our video.

  3. Using Sass To Semantically @extend Bootstrap

    Bootstrap provides a quick and easy way to create a scaffold for your latest site or app whether you’re a novice or a professional developer. For this reason, more and more developers are including the framework in their personal toolbox.

    There is, however, a dark side to Bootstrap, in that it makes it incredibly easy to write cluttered, non-semantic and non-reusable markup that will render correctly across all browsers.

    In this article, I’ll explain how you can use Bootstrap in a more robust and semantic way. Bootstrap’s latest version shipped with [an official Sass port][the @extend directive.

  4. Deploying a Yeoman/Angular app to Heroku

    So you’ve used Yeoman to Kickstart your AngularJS app and now you’re ready to show it to the world? Well you can, by deploying it to Heroku! Prerequisites To get the most out of this tutorial we recommend you have the following skills and resources available: A terminal and basic knowledge of the command line […]

  5. Kickstart Your AngularJS Development with Yeoman, Grunt and Bower

    Whether you love or hate it, there’s no denying that AngularJS is the framework on every developer’s lips. It may not be for everybody, but AngularJS has a quirky, efficient and powerful feature set. Couple that with a few useful development tools like Yeoman, Grunt and Bower and you’ve got yourself an incredibly fast rapid […]