theotherzach

#UI Engineer - Browser JavaScript

2Checkout UI Engineers are not jerks, in fact they are a friendly folk who generally enjoy what they do for a living. If you're also not a jerk and the following applies to you, then we'd really like to meet you.

##You

• Appreciate feedback when it's specific, actionable, and kind.
• Don't think you've got this programming thing figured out, but you're sure excited about it some of the time. (Nobody is excited about their job all of the time.)

##You're also already good at, or interested in learning more about:

theotherzach

Angular 2 Routing with JavaScript

As I sit here and write this, Angular 2 is in alpha 26 which means it is early days for the framework. The existing examples are sparse and typically written in TypeScript. As far as I can tell, there are actually no examples that employ both the router and JavaScript.

Note: The Angular 2 docs refer to code that runs in the browser as "ES5." That's crap. The code that runs in a Web browser is called JavaScript.

Optional: Serving Static Files

Let's get started with an empty directory so you can see that we have nothing up our sleeves. No build steps, no web server, just an empty directory and a few static files.

theotherzach

var compileTypeScript = require('broccoli-typescript');

var app = compileTypeScript('src', {
  out: "app.js"
})

module.exports = app

theotherzach

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap, For, If} from 'angular2/angular2';

class FriendsService {
    names: Array<string>;

    constructor() {
      this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

theotherzach

• 1 oz high quality sweet vermouth like Carpano Antica
• 2 oz 90+ proof whiskey with high rye content like Rittenhouse Bottled in Bond
• 2 dashes decent bitters such as Fee Brothers or Bitter Truth
• rocks glass chilled with ice water
• Shaker or pint glass filled with ice

Pour the sweet vermouth, whiskey, and bitters into your pint glass. Stir, do not shake the mixture. Pour the ice water out of the rocks glass. Using a fork to strain the drink, pour the cocktail from the pint glass into the rocks glass. Sip slowly with the confidence that you’re drinking a well made cocktail.

Notes:

theotherzach

class Connection
  
  def initialize(db_address)
    @db_address = db_address
  end
  
  def query(query_string)
    Database.query(query_string, @db_address)
  end
end

theotherzach

[ui-view].ng-enter, [ui-view].ng-leave {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    top: 0px;

theotherzach

(def scenes [{:subject  "Frankie"
              :action   "say"
              :object   "relax"}

             {:subject  "Lucy"
              :action   "❤s"
              :object   "Clojure"}

             {:subject  "Rich"
              :action   "tries"

theotherzach

(ns clj-bowling.core)

(defn last-frame? [rolls]
  (<= (count rolls) 3))

(defn strike? [rolls]
  (= 10 (first rolls)))

(defn spare? [rolls]
  (= 10 (sum (take 2 rolls))))

theotherzach

BARUCO 2014 Angular Workshop

Notes

80% of my Angular use is restricted to:

• ng-controller https://docs.angularjs.org/guide/controller
• ng-submit https://docs.angularjs.org/api/ng/directive/ngSubmit
• ng-repeat https://docs.angularjs.org/api/ng/directive/ngRepeat
• ng-model https://docs.angularjs.org/api/ng/directive/ngModel
• ng-repeat + filter https://egghead.io/lessons/angularjs-ngrepeat-and-filtering-data
• Data binding: https://docs.angularjs.org/guide/databinding