• A Quick Visual Guide to Relative Positioning in CSS

    medium_4365152223 (2)

    Getting your head around positioning elements in CSS can be very confusing. When I first started doing front-end web development, I would often end up spending hours trying to figure out why one element or another was refusing render where I thought it should. Nine times out of ten, the problem usually had something to do with the surrounding elements and what the value of their position attribute happened to be.

    In order to help new developers understand how relative positioning works in CSS, I put together a quick visual demonstration:

    See the Pen bgHAJ by Levi Hackwith (@opnsrce) on CodePen.

    The box labeled “5” is absolutely positioned zero pixels from the right side of its parent container (by default, container 4).

    When you click on one of the checkboxes, the corresponding container div’s position property gets set to static (the default value). If you click on the checkbox labeled “Disable Level 4″, you’ll notice that the “5” box jumps from the right of box 4 to the right of box 3. This is because, by setting 4’s position to static instead of relative, you are telling box 5 that 4 is no longer the parent container. Confused? I was too. When we look at the nested nature of HTML, we would assume that the “parent container” of an element is the nearest element that contains another element. In our case, the parent of 5 would be 4. However, the browser sees things a little different. It defines a parent element as the nearest element that contains another element that also has its position element set to relative. By changing the position attribute of a parent element, you’re forcing the browser to look for the next nearest element with a relative position. Notice how, if you recheck the checkbox, the 5 box jumps back into place.

    Hopefully the clarifies things regarding relative positioning in CSS. If you have any questions or feedback, please leave a comment.

    photo credit: atzu via photopin cc

  • 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.