• Understanding the Bubble Sort Algorithm

    3067907278_f9d38ee4af_o

    A while back, we talked about algorithms like binary search and explained how it works. Today, we’re going to do the same thing with a sorting algorithm called bubble sort. While it’s by far not the most efficient algorithm to use when sorting a list of items, it’s the simplest one to implement and is a great starting point for those interested in learning more about sorting algorithms in general.

    Read more

  • Do You Code In Your Spare Time?

    I’m curious to see how many programmers / developers out there code in their spare time after work:

  • A Massive Repo of Programming Interview Questions

    Photo Credit: https://www.flickr.com/photos/raster/

    Interviewing for a programming position is no easy task. In addition to the usual “tell me about your work at your last employer” and “tell me about a time you had to deal with [X]” kinds of questions, there’s always the coding questions. These questions are designed to establish and test the boundaries of the interviewee’s knowledge on a given topic.

    Read more

  • Creating New Conditionals in Handlebars

    High-Wheel Bicycle Enthusiasts Gather In Prague

    If you work with Handlebars long enough, you’ll start to notice a very annoying gap in its capabilities: conditionals. Now, Handlebars does come with a conditionals helper that simply tests whether or not the passed in value is truthy or not and acts accordingly. While this is fine for a good portion of scenarios, I guarantee there will come a time where you need a more robust solution. Today, we’re going to go over three conditional helpers that handlebars is lacking and how to make them yourself.

    EqualTo

    Handlebars.registerHelper('ifequal', function(value1, value2, options) {
      if(value1 === value2) {
        return options.fn(this);
      }
      return options.inverse(this);
    });
    

    LessThan and LessThanOrEqual

    Handlebars.registerHelper('iflessthan', function(value1, value2, options) {
      if(value1 < value2) {
        return options.fn(this);
      }
      return options.inverse(this);
    });
    
    Handlebars.registerHelper('iflessthanorequal', function(value1, value2, options) {
      if(value1 <= value2) {
        return options.fn(this);
      }
      return options.inverse(this);
    });
    

    If you need additional functionality (e.g., greater-than-or-eaual-to or not-equal-to), you can easily figure out what needs to be done given the examples provided. If you don’t feel like creating individual helpers for each kind of conditional, I found this really cool snippet on StackOverflow that may come in handy:

    Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
    
        switch (operator) {
            case '==':
                return (v1 == v2) ? options.fn(this) : options.inverse(this);
            case '===':
                return (v1 === v2) ? options.fn(this) : options.inverse(this);
            case '<':
                return (v1 < v2) ? options.fn(this) : options.inverse(this);
            case '<=':
                return (v1 <= v2) ? options.fn(this) : options.inverse(this);
            case '>':
                return (v1 > v2) ? options.fn(this) : options.inverse(this);
            case '>=':
                return (v1 >= v2) ? options.fn(this) : options.inverse(this);
            case '&&':
                return (v1 && v2) ? options.fn(this) : options.inverse(this);
            case '||':
                return (v1 || v2) ? options.fn(this) : options.inverse(this);
            default:
                return options.inverse(this);
        }
    });
    

    You use it like this:

    {{#ifCond var1 '==' var2}}
    
  • Helpful Tools for Web Developers: WhatFont Chrome Extension

    Chrome Web Store   WhatFont

    In my opinion, there’s no trickier aspect of web design / development like typography. It’s the one part of the design process I don’t think I’ll ever quite get my head around. Choosing the right font, pairing fonts together, or even figuring out what font is being used on an existing site that you’re attempting to draw inspiration from can prove very difficult. Luckily, there’s an awesome chrome extension that helps with the last one: WhatFont. WhatFont let’s you click on any text on a webpage and see what font is being used to render that text.
    Read more

  • Helpful Chrome Flags For Web Developers

    chrome

    Most of the time, I develop locally when writing code: I don’t like taking the time to upload files to a server for testing. Unfortunately, this can make testing things like AJAX calls and references to local files difficult due to security settings that come default with Chrome (my preferred browser). Recently, I discovered some really handy flags that you can append to Chrome when launching from the command line.

    Read more

  • JsLint Unexpected Continue Error Explained

    4388561208_d9a7a17992

    If you’ve ever had the “pleasure” of running your JavaScript code through JSLint, you’ve probably encounter the following message.

    Unexpected continue

    Recently, I encountered this message when checking some code I’d written. In an attempt to gain some clarity on what the problem was, I checked out the JS Lint Documentation which tells me to

    [a]void use of the continue statement. It tends to obscure the control flow of the function.

    Read more

  • Using Handlebars “Each” Blocks with Backbone Collections / Templates

    handlebars

    A while back I took Code School’s amazing course on Backbone.js. In one of the slides, I found this block of code:

    var TodoListView = Backbone.View.extend({
      initialize: function(){
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
      },
      addOne: function(todoItem){
        var todoView = new TodoView({model: todoItem});
        this.$el.append(todoView.render().el);
      },
      addAll: function(){
        this.collection.forEach(this.addOne, this);
      },
      render: function(){
        this.addAll();
      }
    });
    

    For the most part, it’s pretty straight forward. Basically, they are calling the addOne method and passing in the model they want to add to the list view. In the context of the lesson, they were trying to show how you might go about looping through a collection of items and adding them to a list while avoiding issues related to scope.

    Read more

  • Code Snippet: Create a Simple “Winner” Badge Using only CSS

    badge

    Today I’m just going to share with you something I made over the weekend: a really simple “winner” badge using only CSS3.

    First, the Markup:

    ...
    <div class = "badge">
        <div id = "content">Winner</div>
    </div>
    ...
    

    And the CSS:

    @font-face {
        font-family: 'AirstreamRegular';
        src: url('../fonts/Airstream/airstream.eot');
        src: url('../fonts/Airstream/airstream.eot') format('embedded-opentype'),
             url('../fonts/Airstream/airstream.woff') format('woff'),
             url('../fonts/Airstream/airstream.ttf') format('truetype'),
             url('../fonts/Airstream/airstream.svg#AirstreamRegular') format('svg');
    }
    
    .badge {
        background: rgb(35%, 22%, 12%);
        width: 180px;
        height: 180px;
        left: 150px;
        top: 75px;
        position: relative;
        text-align: center;
        border-radius: 30px;
    }
    .badge:before, .badge:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: inherit;
        border-radius: inherit;
    }
    .badge:before {
        -webkit-transform: rotate(30deg);
           -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
             -o-transform: rotate(30deg);
    }
    .badge:after {
        -webkit-transform: rotate(60deg);
           -moz-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
             -o-transform: rotate(60deg);
    }
    #content {
        position: relative;
        z-index: 1;
        text-align: center;
        line-height: 180px;
        font-family: 'AirstreamRegular';
        border-radius: 360px;
        background-color: white;
        box-sizing: border-box;
        width: 180px;
        height: 180px;
        font-size: 3.5em;
        color: rgb(35%, 22%, 12%);
        top: 0;
        left: 0;
        background: rgba(224, 214, 187, 1);
    }
    

    The end result is what you saw at the beginning of the post.

    A special thanks to Alan Johnson for coming up with the original 12-point burst CSS I modified to make this happen.

  • Element.dataset not supported in IE: Here’s a Workaround

    Recently, I was working on a project that used the dataset property to store some additional info about element and I discovered that none of my code worked in IE. After doing some research, I found out that dataset property is not supported by IE (at least not until version 11 comes out). If you’ve ever run into this issue, here’s a quick workaround:

    var myElement = document.getElementById('myElement'), // contains attribute data-my-custom-value
        myCustomValue;
    
    if(myElement.dataset !== undefined) { // standard approach
        myCustomValue = myElement.dataset.myCustomValue;
    } else {
        myCustomValue = myElement.getAttribute('data-my-custom-value'); // IE approach
    }
    

    In the above example, if the dataset property is undefined, we use the getAttribute method to grab it instead. The one thing to note here is that when you use dataset property to retrieve the value of the my-custom-value attribute, the name of the attribute gets converted to camel-case and the “data” portion of the name is dropped; when you use getAttribute the value is retrieved using the original hyphened value.