Marc Wright

Refactor Songs and Code

Wed, 10 May 2017 10:29:23 +0000

I love to write code. It’s the only activity I’ve found that gives me the same buzz as writing a song. Here are some thoughts on similarities between writing code and writing a song.

Generally, the word “dry” refers to something boring or uninteresting. In the programming world, DRY stands for “Don’t Repeat Yourself.” If we have a bit of code that we’re going to reuse then we’d refactor it into a structure/module like a function or a method.

Songs are modular too. They can be approached as sections of reusable chords and lyrics. We reuse chord structures and repeat chorus lyrics all the time.

A tightly written, well crafted song is very concise. Part of this is for airplay and not boring the listener. There is an idiom in the songwriting world- “Don’t bore us, get to the chorus.” The quicker you can get to the hook (generally the chorus) the better. A tightly written, interesting song doesn’t meander either musically or lyrically. There is purpose. Sometimes I’ll go back and revisit an older song of mine and find ways to edit, refactor and make it better.

In the programming world we refactor all the time. We’ll try to condense multiple lines of code into fewer lines. We can encapsulate code into reusable functions and methods. Or, specifically in Ruby, I frequently use ternary operators to DRY up my code where appropriate.

The Clean Coder

Tue, 02 May 2017 08:29:23 +0000

I recently read an excellent book called The Clean Coder written by Robert C. Martin, a.k.a. Dr. Bob. I wanted to share a few excellent points that stuck with me.

USING THE WORD “TRY”

Dr. Bob talks a lot about saying “yes”, “no” and how to manage client (or management’s) expectations. We want to be nice people and hate to disappoint. So when we’re asked if we can meet a particular deadline, even if it’s unrealistic, we frequently answer “I’ll try.” Deep down, we know that we probably won’t be able to deliver. However, instead of “i’ll try”, the client or management hears “Yes.” Part of being a good developer and professional is managing expectations and giving honest answers. Saying “no” upfront can be tough and uncomfortable… but it is better than not delivering something altogether or at the last minute.

TESTING

Dr. Bob is a huge Test Driven Development and Extreme Programming practitioner. He suggests that you are not a professional programmer unless you write tests before the code. One of the arguments against testing upfront is that “there isn’t time, we have to ship/deploy.” The idea is that testing takes too long. Unfortunately, the lack of writing tests will create technical debt that must be repaid. Eventually, bugs will happen, apps will break and you’ll have to spend panic time fixing those issues. A test suite upfront will provide peace of mind and help assure that your code is not brittle.

PROFESSIONAL DEVELOPMENT

It is your responsibility as a professional to not only maintain your current skill set, but to continually add new tools to it. One shouldn’t rely on his/her employer to do this. A professional should be proactive about daily code challenges, working on side projects, learning new libraries and languages, etc.

Front-end is icing on the cake

Thu, 17 Nov 2016 09:29:23 +0000

Our students have 4-6 main projects that they create both individually and as a group during their time in WDI. One thing I preach to my students is process over product. Here are a few take-a-ways from a project week sprint that I feel are more valuable than having the most awesome project. Did the student…

Learn and follow Git + GitHub best practices?
Write well commented and readable code?
Create User Stories?
Use a tool like Trello for project management?

One of the biggest issues that students run into is with project management. Students will sometimes work on making their app look good before finishing the functionality. So in a 5 day sprint, frequently a student may spend 3 or 4 days on polishing an app that doesn’t even work.

Front-end is fun for most folks, especially newer devs. You get immediate visual feedback which is more satisfying for new developers. Databases and server-side programming can feel a little ‘black-boxy’ and more obtuse than rendering HTML/CSS/JS in the browser.

Plus, when the back-end gets a little confusing or intimidating, it’s sometimes good to switch gears and work on something more visual and

jquery append() v. appendTo()

Tue, 29 Mar 2016 09:29:23 +0000

As an exercise, I started creating a tic-tac-toe game in Codepen using Javascript and jQuery only (no HTML or CSS). The difference between append() and appendTo() is pretty straightforward, but I’d never really come across a sufficent reason to use one over the other until I started building my game. I had a interesting realization I wanted to share.

Both methods append one object to another, but the difference lies in the way you want to order the objects. Let’s say that I wanted to append() a new div with the id of container to body:

$('body').append("<div id='container'></div>");

In this example, we create a jQuery object from the CSS selector body then we append() a new HTML element to it. Another way to do this would be to first create the new element, assign it to a variable, then use appendTo to append it to the body object:

var newElement = "<div id='container'></div>";

$(newElement).appendTo('body');

Both appear to give us the same result so when should we use one over the other?

To build my gameboard, I used a for loop to dynamically create 9 divs. I also needed to attach click events to each div in order to track the moves.

For my first attempt at this, I created a jQuery object out of $('#container') then appended the newly created divs to it. When I clicked an individual div I returned 9 console.log messages instead of 1. I realized that somehow I had attached 9 click events to the #container. Then I decided to try something like this:

for (i=0; i < 9; i++) {
  $("<div class='cell' id='cel" + i + "'></div>")
    .one('click', function(e){
      index = parseInt((e.target.id)[3]);
      moves[index] = (counter % 2 == 0) ? "X" : "O"; 
      counter++;
    })
    .appendTo('#container');
};

Using appendTo allowed me to FIRST successfully add click events to each div BEFORE appending to the #container. I learned that order matters.

rails + angular + bower

Tue, 15 Mar 2016 20:29:23 +0000

Rails provides an excellent backend for your Javascript front-end framework.

Why Rails?

Rails is a great lightweight, powerful server-side solution. You can add your front-end framework on top of it.

The Rails motto is “convention over configuration”. Rails provides a set of standards that the community has agreed upon as best practice. So if another Rails dev is checking out your app, it’s easier to get up and running.

Rails allows you to scaffold apps very quickly so it’s great for startups. It’s relatively painless to roll out a prototype.

e.g.- AirBnB, Hulu, Twitter, Blue Apron, Plated, Daily Burn, GA website, Robinhood FAQ, Death Wish Coffee (Intuit Super Bowl Ad)

Rails is “auto-magical”, which can be good or bad.

GOOD - rapid prototyping
BAD - Sometimes you don’t always know what’s going on under the hood, but as long as you play in their sandbox you’re ok (e.g.- use their helper methods, sset pipeline, etc).

Rails API

You may also use Rails for API-only Apps and scaffold a project with no views. This would allow you to host Rails on one server and your front end on another. This makes for an extremely lightweight Rails app since it takes out any middlewares and extra cruft that the views would normally use.

For a clunky analogy… the Rails API would be like a hard-top convertible in that we can completely remove the views. A soft-top convertible is like scaffolding a standard Rails app but ignoring the views (even though the functionality is always available).

Add Angular to a Rails app

CDN
Download angular files
Ruby Gem
Bower (what we’re using tonight)

Rails App Code Along

Completed code for this article can be found here. Credit goes to this excellent Angular-Rails tutorial. It was my reference for the initial Bower implementation.

1) rails new books -T --database=postgresql

This command will create a new rails project + directory called books. -T tells Rails not to scaffold a test suite. --database=postgresql will automatically bundle the gem pg so we may use a PostgreSQL database. By default Rails uses SQLite.

2) cd books && bin/rake db:create

This will cd into the project directory and create our database. Rake is Ruby Make, a standalone Ruby utility used for common administration tasks, especially sophisticated ones that build off of each other.

3) At this point, we can start our Rails server with rails server and checkout the welcome page at http://127.0.0.1:3000

Add and configure Angular + Bootstrap using Bower

Bower was created by Twitter specifically to manage front-end assets. We’ll use it to set up our front-end packages and dependencies.

4) Add gem 'bower-rails' to the Gemfile. From the command line, run bundle install to add the library.

Ruby gems are similar to npm modules, the Gemfile is similiar to package.json and bundle install is very similar to npm install

5) Next, on the command line, run touch Bowerfile. This will create a Bowerfile in the root of the project. Then add the following to that file:

# This will add Angular and Bootstrap-Sass
asset 'angular'
asset 'bootstrap-sass-official'

6) Run rake bower:install

Bower installs dependencies in vendor/assets/bower_components. The Rails asset pipeline dictates that 3rd party code lives in the vendor directory.

7) Let’s add the Angular require paths to app/assets/javascripts/application.js. Turbolinks is a gem that uses Ajax to speed up page rendering in most applications. We’ll remove turbolinks since it can hinder performance for front-end frameworks. Your requires should look like so:

//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require_tree .

8) Let’s import our bootstrap stylesheets in app/assets/stylesheets/application.css.scss beneath all of the comments. Also, be sure to add the .scss extension to the file name so it will @import correctly:

@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";

Add a doorway route for our Angular app

9) Add root 'home#index' to routes.rb. This will be the main route that will serve as the doorway to our Angular app.

10) Let’s create a controller for that route. Create app/assets/controllers/home_controller.rb and add:

class HomeController < ApplicationController
  def index
  end
end

Instantiate our Angular App

11) For this demo we’re gonna use a Book Model so we’ll call this our bookApp. Let’s create app/assets/javascripts/app.js and add code to instantiate our Angular app:

angular.module('bookApp',[])
 .controller('BooksController', BooksController);

  function BooksController() {
    var vm = this;
    vm.names = ["Marc", "Maren", "Diesel"]
  }

We’re using var vm here for view model. I’ve also included some dummy data to make sure our view is wired up correctly.

Create a view

12) Create app/assets/views/home/index.html.erb and add:

<div class="container-fluid" ng-app="bookApp">
  <div class="panel panel-success">
    <div class="panel-heading">
      
      <h1 ng-if="name">Hello, {{name}}</h1>
      
    </div>
    <div class="panel-body">
      <form class="form-inline">
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Enter your name" autofocus ng-model="name">
        </div>
      </form>
    </div>
  </div>

  <div class="panel panel-success" ng-controller="BooksController as ctrl">
    <div class="panel-heading">
      <ul ng-repeat="book in ctrl.names">
        
        Hello, {{book}}
        
      </ul>
    </div>
  </div>
</div>

You could also add ng-app to the body tag in app/assets/views/layouts/application.html.erb. Then our entire app would belong to booksApp.

13) We can start up our rails server and go to localhost:3000 to make sure that Angular is working.

Create the Book model + add some seed data

14) rails g model Book title author

We’ll create a model for Book with title and author fields (both Strings, by default)

15) Let’s add some seed data to db/seed.rb to populate our database:

Book.destroy_all
Book.create([
  {title: "50 Shades", author: "Schmitty"},
  {title: "Lawyer Books", author: "Grisham"},
  {title: "The Hunger Games", author: "Collins"},
  {title: "JS Good Stuff", author: "Crockford"}
])

16) From the command line run rake db:migrate db:seed

This will create our schema file and seed our database

Set up our REST-ful api endpoint to serve the JSON

17) Add a route to our app/config/routes.rb file under our root route.

 get '/books' => 'books#index'

A route consists of the HTTP verb, the URL and the controller/action.

18) Eventually, we’re gonna use $http.get in our Angular controller to grab our data. Let’s create a controller to handle the JSON data from our API. Create a file in app/assets/controllers/books_controller.rb. Then, let’s make all the books available via JSON in our BooksController index action:

class BooksController < ApplicationController
  def index
    @books = Book.all
  end
end

19) We’re gonna use jbuilder to serve our books API data. Let’s create app/assets/views/books/index.json.jbuilder and add:

json.array!(@books) do |book|
  json.extract! book, :id, :title, :author
end

20) Now we can start our server rails server and go to http://localhost:3000/books.json (try it in a new window) to see that Rails is serving our data as JSON.

Consume the data with Angular

21) Let’s add some code to grab all the books from our endpoint in app/assets/javascripts/app.js

angular.module('bookApp',[])
 .controller('BooksController', BooksController);

function BooksController($http) {
  var vm = this;
  vm.names = ["Marc", "Maren", "Diesel"];
  
  vm.books = getBooks().success(function(data){
    vm.books = data;
  });

  function getBooks(){
    return $http.get('http://localhost:3000/books.json');
  }
}

We’ll add a getBooks() function to grab all the books from our REST-ful endpoint. We’ll assign the results of that function to the variable vm.books. Also, don’t forget to inject $http into BooksController.

Update our view

22) Let’s go to our app/assets/views/home/home.html.erb page and make some small tweaks. First, we’ll adjust our ng-repeat so it repeats our vm.book variable. We’ll also add some code to render the title and author of each book. Here’s the code for our ul:

<ul ng-repeat="book in ctrl.books">
  
  Title: {{book.title}} </br> 
  Author: {{book.author}}
  
</ul>

Conclusion

I really love Rails. It’s great to pair the rapid prototyping ability of Rails with an Angular front-end!

Gear Freaks

Thu, 25 Feb 2016 00:00:00 +0000

There are gear freaks in both the music and tech worlds.

If you go to guitar center on a Saturday (or anytime actually) you’ll see folks raging on crazy pieces of gear always into the latest and greatest effects pedal, etc. I was never one of those people. Admittedly, I usually didn’t have the patience to sit down and figure out a crazy pedal board or effects box. I can barely manage a simple delay pedal with 3 knobs on it.

I think tech is great and can be used for inspiration, but it shouldn’t be relied on. If your song doesn’t translate with the purity of one guitar and one voice then all the over-production in the world won’t save it.

I love going to songwriter nights and hearing the writers perform their work. The artists that recorded the tracks may have world class voices and talent, but it didn’t matter. The songs were just as powerful with an ok musician and vocalist performing them because the raw songs themselves are bulletproof.

I noticed that the really great songwriters that I worked with or talked to kept it really simple. They’d usually write on an acoustic guitar or piano. They’d occasionally have a loop to keep things interesting.

I think the essence of a song is about whether it translates when everything else is stripped away. A great song is a great song whether it’s way overproduced or stripped down.

I feel the same way about code. There’s always a new technology or framework that will be the new kid on the block. Using fancy tech doesn’t make you a great developer, however, a great developer can use those tools to make his/her simple “acoustic guitar demo” code something great.

I hear students asking about what they should be learning- Angular, Angular 2, React, Ionic, Backbone… the sheer amount of choices can be overwhelming. I tell my students that the goal should be to be really good at Javascript and not rely on libraries or frameworks. Those libraries and frameworks (e.g. - effects pedals) will do you know good if you can’t craft your code without them.

There will always be a new tech but can you create without them.

Python + Ruby Differences

Tue, 23 Feb 2016 13:29:23 +0000

I’m taking a Data Science course that incorporates Python. I thought I’d write a quick + dirty summary of some key (cool) differences between the two languages. Forgive me if the syntax is slightly off as I’m writing this from memory.

Methods

Python and Ruby both use the method declaration def, but Python also uses (): at the end of the declaration. In Ruby, the parens are optional. In Python, the parens and colons are required. Python also requires colons for for loops and if/else statements.

Python does not need the end keyword to signify the end of a method block. Python relies on whitespace and indentation to signify the end of a block of code.

In Ruby, methods return the last line of code that is evaluated. In Python, you must be explicit and use return.

Objects

In Ruby, a collection that uses index is called an Array. Python calls them lists.

In Ruby, a collection of key/value pairs is called a Hash. Python calls them Dictionaries.

Classes

Ruby uses the initialize method to instatiate new instances of a class. Python uses __init()__.

In Python, you must pass in the keyword self as the first argument in a method. In Ruby, you can assign a method to self as in self.name_of_method.

`&&`, `||` operators

Ruby uses && and || for comparisons. Python uses the keywords and and or.

Whitespace and colons

…to be continued

Taylor Swift HTML

Mon, 08 Feb 2016 20:29:23 +0000

in progress…

GitHub CodePen

Both songwriting and good code are about patterns. We encapuslate our code for readability and reusability. Songs are similar. When building a track, you may reuse a snippet of audio from one verse to pop into another. When you’re using Logic or Pro Tools you also want your environment to be very clean and use good naming conventions.

With that in mind, I decided to take stab at what Taylor Swift’s “Style” would look like as scaffolded in HTML5. Here are some assumptions…

####I needed a song that was very consistent and linear This song has only 4 chords and can be easily broken down into 2 bar sections.

####Headers will be the main section dividers I’m gonna use headers to encapsulate the song into the main sections of INTRO, VERSE, CHORUS, BRIDGE, OUTRO

####I’ll use classes for the sonic variety Just as CSS rules are the adjectives for the different sonic patterns:

vocals
guitar
bass
drums

####Each Chord change will be an <ol> of 2 bars represented by <li> tags

Why Fire Ready Aim?

Mon, 08 Feb 2016 20:29:23 +0000

I’ve wanted to set-up Jekyll for a while to blog about my musical and development ramblings. I see a lot of similarities between the musical and development worlds.

Here is an article on learning and failure. It’s a perfect metaphor for Fire Ready Aim.

It tells a story of a pottery class that was split into two groups. One group would be graded on the quantity of what they produced and the other group would be graded on the quantity. So, group #1 worked to make one pot as perfect as possible, while group #2 focused on creating several.

The “moral” of the story is that the group that created 10 pots ended up making better ones than the group that focused on one. The quantity group learned from their mistakes and became better craftsmen.

As a songwriter, I can relate to over-thinking. I’ve often spent too much time attempting to craft the perfect song instead of crafting ten and learning from my mistakes. I’m definitely a perfectionist (most of us are), sometimes against my own best interest. I will try to be ok with failure.

Check out the Marc’s WDI Wordpress Blog.

Marc Wright

Refactor Songs and Code

The Clean Coder

USING THE WORD “TRY”

TESTING

PROFESSIONAL DEVELOPMENT

Front-end is icing on the cake

jquery append() v. appendTo()

rails + angular + bower

Why Rails?

Rails API

Add Angular to a Rails app

Rails App Code Along

Add and configure Angular + Bootstrap using Bower

Add a doorway route for our Angular app

Instantiate our Angular App

Create a view

Create the Book model + add some seed data

Set up our REST-ful api endpoint to serve the JSON

Consume the data with Angular

Update our view

Conclusion

Gear Freaks

Python + Ruby Differences

Methods

Objects

Classes

&&, || operators

Whitespace and colons

Taylor Swift HTML

Why Fire Ready Aim?

`&&`, `||` operators