So, You Want to Learn to Program?

Killer Apps

An old friend of mine got in touch with me today and asked:

Hey man… Best idea for beginning to learn programming?

I was actually very excited when my friend reached out because, in my opinion, learning to program is something that can only enhance one’s possibility of advancement in many careers.

But, Before You Get Started…

I don’t doubt for a second that you could learn to program. But, that doesn’t mean it’s easy.

Sure, in some cases it is fairly simple. For example, let’s write a program that just says “Hello World”.

console.log( "Hello World" );

Now, let’s print out every number up to 1,000 that is odd in Javascript

for ( var i = 1; i < 1000; i++ ) {
    if ( i % 2 == 1 ) {
        console.log( i + ' is odd' );
    }
}

For funsies, here’s a video that shows you how to run both of these little snippets in your browser.

That being said, while basic programming and writing code itself is fairly simple, being a good developer is much more complex. I’ll defer to Beau Lebens on this subject and link you to his post, “Why Web Development is Complex.”

If you’re still here and are still interested in learning to program – Hell yes! Let’s get on with it then 🙂

Where to Get Started

My absolute favorite place for beginner tutorials on programming, including everything from iOS and Android to web development, is Treehouse. This is a paid website, starting at $25, but is well worth it for how well organized the videos are.

I was very lucky to get a free account for two years when Treehouse had a giveaway for students. That being said, I would gladly pay the $25 per month if I were just starting to learn.

Team Treehouse

Once signing up and logging in, you will be presented with many tracks that you can learn from. These tracks start you off at a very basic level and bit-by-bit teach you the many thing you need to become a beginner developer.

Treehouse Tracks

You want to build the next badass iOS app. Great, do the “iOS Development with Objective-C” track.

Do you want to learn web development? Awesome. Take the “Front End Web Development” track.

Here is an example of the quality of the interface and videos that you will get within each lesson.

Android Development

And Start a Damned WordPress Site

My passion for development all started with me creating a WordPress site. Sure, I supplemented along the way with my BA in Computer Science, but nearly all of web development skills are self-taught by actually building stuff.

So, go get a cheap hosting account. Figure out how to install WordPress. Install some plugins and a theme. Then, when you want to add something cool to your site? Figure out how to program it.

Here’s the thing… The WordPress community is amazing. There is no shortage of tutorials, code snippets, and amazing people to help you learn to program.

Users Do the Damnedest Things

I had a good laugh over this tweet yesterday when I read -1 beers. After all, who the hell orders negative beers?

But as I thought more about the tweet, it struck a chord with me.

While the tweet was meant as a joke, it pointed out the fact that we, as developers, have to ruthlessly test our software and assume that users:

  1. Have no idea how to use our software
  2. Are intentionally trying to melt our servers

Tech User

Example: Uploading 1700+ Images at Once

As a developer, I would seriously doubt that anyone would ever want to upload 1700+ images at once through a web interface.

But, as a user, I found myself doing exactly that today after I found out that cloud drive has unlimited free photo storage for prime users!

Amazon Cloud Drive Upload

Takeaway

For me, this Tweet served as a reminder that I should test my code not only how it should be used, but how it might be used.

Print PHP Stack Trace

I was having a bit of trouble tracking down exactly where a method was getting called from today.

Usually a search in my project directory will turn up the result very quickly, but I wasn’t having luck with PHPStorm for some reason.

So, the next best thing was to get a stack trace so that I could get the last few functions that had been run. I don’t do stack traces much in PHP, so I had to track down the code to use.

Of the few options to use, this seemed to be the easiest to use and remember.

$e = new Exception;

// Output the stack trace to the browser
echo $e->getTraceAsString();

// Send stack trace to error log
error_log( $e->getTraceAsString() );

And if you’re wanting more verbose output, including the arguments that were passed to each function, try this.

$e = new \Exception;

// Recursively print the stack trace
print_r( $e->getTrace() );

// Log the stack trace object
error_log( print_r( $e->getTrace(), true ) );

Get Most Visible Element on a Web Page

Recently, I was working on updating keyboard shortcuts for o2 and came across a unique shortcut.

When pressing r, we wanted to open the reply box for the most visible post. When I first started thinking about this requirement, I found myself thinking: “How the hell can I determine what the most visible post is?”

Attaching to Scroll Event

One of the first things that crossed my mind was that I could attach to the window scroll event and then update a mostVisiblePost variable as needed. For example, when a scroll event occurs:

  • Get all posts on the page
  • Check which posts are in the viewport
  • Get the offsets for each and try to determine which is most visible.

I wasn’t quite fond of this method because it could make scrolling janky and seemed prone to error.

An Alternative Surfaces

While I was reading Javascript: The Definitive Guide I came across the JavaScript method elementFromPoint(x,y).

As I thought more about getting the most visible element on the page, I came up with the idea of creating a grid of points that covered the page. I could then get the element at each point and traverse up the DOM to find which post was at that point.

After thinking through this a bit more, I decided to go for it and came up with the following solution:

// Note that Underscores and Backbone are being used here.

//Let's create a grid of points in the top half of the viewport.
var viewPortWidth  = $( window ).width(),
    viewPortHeight = $( window ).height(),
    xCoords = _.map( [ .2 , .4, .6, .8 ], function( num, key ){ return num * viewPortWidth; } ),
    yCoords = _.map( [ 0, .1, .2, .3, .4 ], function( num, key ){ return num * viewPortHeight; } );

/*
* For each coordiante pair (x,y), get element at point,
* traverse up to find a post, and add post ID to elems.
*/
var elems = [];
_.each( yCoords, function( y ){
    _.each( xCoords, function( x ){
        var element = $( document.elementFromPoint( x, y ) ),
            closest = element.closest( o2Keyboard.threadContainer + '.post' );

        if ( closest.length > 0 ) {
            elems.push( closest.attr( 'id' ) );
        }
    });
});

// Find most frequent (mode) post ID in elems array.
// Thanks Matthew Flaschen - http://stackoverflow.com/a/1053865
if ( elems.length > 0 ) {
    var modeMap = {};

    var maxEl = elems[0],
        maxCount = 1;

    _.each( elems, function( el ){
        if ( modeMap[ el ] == null ) {
            modeMap[ el ] = 1;
        } else {
            modeMap[ el ]++;
        }

        if ( modeMap[ el ] > maxCount ) {
            maxEl = el;
            maxCount = modeMap[ el ];
        }
    });
}

For the purposes of O2, we defined the most visible post to be in the top 40% of the viewport. So, we created an array of y points from 0-.4 times the viewport height. We then created an array of x points that covered most of the viewport.

Once we’ve created the xCoords and yCoords arrays, we then loop over these two arrays and get the element at each (x,y) coordinate pair. In this example, we will be creating 20 unique (x,y) coordinate pairs. You can fine tune that for your needs.

Once we have the element at each point, we traverse up the DOM to see if there is a post. If there is, that post’s ID gets added to an array.

We then take a mode, essentially finding the post with the most hits, on the elems array and that is the most visible post.

Questions or Comments?

If you have any questions or comments about this method, feel free to leave a comment below.

Basic Authentication in WordPress

About a month ago, I worked on a plugin to help retrieve a lawyer’s reviews from the AVVO API. One of the key aspects of connecting with the AVVO API was using basic authentication, which was a new method of connecting to an API for me.

What is Basic Authentication?

Basic authentication requires that an authorization header be sent that contains the following:

'Basic ' . base64_encode( "{$username}:{$password}" )

That is the string Basic, followed by a base 64 encoded string comprised of a username, colon, and then password.

Implementing Basic Authentication in WordPress

One of my favorite tools in WordPress is the HTTP API. Not only does it handle different server configurations and simplify the process of making API calls, but it makes setting headers as simple as passing an array of arguments.

Here is an example of how I implemented the basic authentication API call.

function make_basic_auth_request( $api_url, $username, $password ) {
    $request = wp_remote_get(
        $api_url,
        array(
            &#039;headers&#039; =&gt; array(
                &#039;Authorization&#039; =&gt; &#039;Basic &#039; . base64_encode( &quot;{$username}:{$password}&quot; )
            )
        )
    );

    if ( is_wp_error( $request ) ) {
        return $request;
    } else {
        return json_decode( wp_remove_retrieve_body( $request ) );
    }
}

The function above will return a WP_Error object if the API call fails or a JSON decoded string if the API call was successful.

A Real Life Example

I have published the WordPress plugin I built to get AVVO reviews on Github.

Note: This plugin only implements the reviews portion of the AVVO API, and its purpose was solely to factor out code from a custom theme. As such, it should not be looked at as complete.