Closing Thoughts on Big Nerd Ranch’s Front End Web Class

I posted a few thoughts while I was attending the Front End Web class last week and I figured I’d put a cap on it with some final thoughts.

Disclaimer: If you happen to find this post and don’t know, I do in fact work for Big Nerd Ranch, so yes I’m partial but these are still my honest opinions.

Who is this class for?

Like other BNR books and classes, there is an expectation of some experience. You don’t need to be an expert by any means for this class but you should be comfortable with the basics of web design, hosting and how the web works. If you are looking for these beginner skills I’d recommend Code School and/or Code Academy.

With the basics taken care of, this class provides an accelerated but thorough tour of modern web development and the toolchains that you need to know. The class is great for people like myself, who have a history of web development but have been out of the game for a few years or mostly focused on the backend systems. Others who would find value include those who are looking to jumpstart a new web skill set for a new job or project.

Having a full week to escape the distractions of work and personal obligations really enables you to focus on the class at hand. Combine this with guided lectures and an experienced instructor to answer questions and discuss patterns, really elevates the value to “priceless”.

The Syllabus

The table of contents titles don’t really do justice to the details of each chapter. In total we build four separate projects:

  • The first had us work with HTML5, CSS and JavaScript to do a moderately complex layout of a slideshow like page that included animations, responsive layout and modern markup techniques.
  • The second project was a Coffee Order system the helped us use HTML5 forms, Bootstrap styles, and JavaScript to communicate with a backend via AJAX.
  • The third project was a chat app, that utilized web sockets. For this app we not only built the front end but the backend too, in Node.js.
  • The fourth and final project was an EmberJS app that would have us catalog monster sightings. Ember is a big framework but I think the book does a fair introduction. We got to work with a relationship of models, and executed all the big features.

I thought the chapter and project progression went really well. There are some who might prefer to end with Angular or React instead of Ember but the good thing to know is the early class concepts give you a great JavaScript foundation to build on so you’ll be empowered to experiment with all of those projects and more over time.

That is a core value of Big Nerd Ranch classes that I really agree with. They teach you from the bottom up so you can understand how things work and not just how to assemble/configure things.

The Extras

There is lots of open lab time at night. You are encouraged to bring a side project to work on. While I did make some progress on my own project, an Ember Wiki project (I have some basic models and forms working, all backed up my a Firebase persistence layer), I did have to dedicate some lab time to the book itself to make sure I kept up.

In the afternoons we’d have time for a walk around the resort and on some of the days we even arranged for a shuttle van to take us to some of the exhibits, like the Birds of Prey and the Butterfly Center. Considering how focused we are during the class, these excursions are very welcome and a great way to clear your head and get a second wind.

Final Thoughts

If you want to learn a new technology, in this case Front End Web Development, and in particular if there is a time-sensitive nature to your needs it’s hard to imagine a better environment than a Big Nerd Ranch class. The ticket price does include lodging and food for the week so keep that in mind when shopping around or putting together a formal company request. If you have any questions, feel free to contact training support. They’ll be happy to help you out.

Mid-week Checkin

It’s Wednesday night and as expected it’s been both an exhausting and rewarding week so far here at the Front End Web class. Here is the table of contents we’ve been working through:

  • Introduction
  • Chapter 1: Setting Up Your Development Environment
  • Chapter 2: Setting Up Your First Project
  • Chapter 3: Styles
  • Chapter 4: Responsive Layouts with Flexbox
  • Chapter 5: Adaptive Layouts with Media Queries
  • Chapter 6: Handling Events with JavaScript
  • Chapter 7: Visual Effects with CSS
  • Chapter 8: Modules, Objects and Methods
  • Chapter 9: Introduction to Bootstrap
  • Chapter 10: Processing Forms with JavaScript
  • Chapter 11: From Data to DOM
  • Chapter 12: Validating Forms
  • Chapter 13: Ajax
  • Chapter 14: Deferred and Promises
  • Chapter 15: Introduction to Node.js
  • Chapter 16: Real-Time Communication with WebSockets

And what’s up next:

  • Chapter 17: Using ES6 with Babel
  • Chapter 18: ES6, the Adventure Continues
  • Chapter 19: Introduction to MVC and Ember
  • Chapter 20: Routing, Routes and Models
  • Chapter 21: Models and Data Binding
  • Chapter 22: Data: Adapters, Serializers and Transforms
  • Chapter 23: Views and Templates
  • Chapter 24: Controllers
  • Chapter 25: Components
  • Chapter 26: Afterword

Entering the class I was a little worried that my past web development experience would have made the early chapters moot, but to my enjoyment there is a lot of new web features and tools available since I did Rails full time back in 2012. Flexbox is particularly interesting and has me excited to do some testing to see if it will help me solve some layout concerns I have in my side project.

I also enjoyed the time we’ve spent working in pure JavaScript. We built out a very modularized system that would react to a simple coffee order page. I appreciate how we’ve taken the time to learn JavaScript from the bottom up. It makes you better understand and appreciate what more advanced tools like Babel and Ember are doing.

Tonight we closed with web sockets which is something I’m really hoping to embrace on future projects. Live content, no reload and real-time collaboration is where it’s at.

And then of course comes the “ranch” venue itself. Being able to get away and focus on the learning is priceless. Afternoon walks help clear your head. Here are some photos. Wish you were here. 🙂

Greetings, from the Ranch

One of the great perks of working at Big Nerd Ranch is that you are allowed to take one Big Nerd Ranch class a year. This week I’m taking the Front End Web class, and am really looking forward to it.

At nights we are encouraged to work on a side project to help practice what we are learning in the day. I think I’m going to work on a wiki app — with a few touches that I myself have an itch for, drag and drop image uploads, code syntax coloring, and more.

I’ll check in later through the week. Wish me luck.

Isolating Mac Application Menu Behaviors

A Place for Everything, and Everything in It’s Place

My side project is a Mac app and last week I was working on a small story about sending feedback.

Send Feedback under Help Menu

As a user,
I want to be able to Submit Feedback via the Help menu,
So that I let the developer know what I’d like changed.

Acceptance Criteria:

  • Under the Help menu there should be option to submit feedback.
  • Upon selecting this menu item a new email will be open.
  • to: mzornek+storyteller@gmail.com
  • subject: [Storyteller Feedback] [1.0(101)] — that is the version number and build number

This was easy enough to get working but I wasn’t in love with my first implementation. If you read up on the Menu documentation for macOS you’ll find out application menus will follow the Responder Chain . A responder chain of a document-based application looks like this:

responder chain of a document-based application

Now while this is a document-based application this behavior is an application-level behavior. The best spot to put it is in the AppDelegate but I don’t like polluting that class.

My new solutions helps improve the situation in lieu of the framework’s design constraints. I still have the IBAction inside the AppDelegate but it now forwards the behavior to another object that is more isolated, with a single responsibility and is easier to test.

// AppDelegate+SubmitFeedback.swift
import Cocoa

extension AppDelegate {
    @IBAction private func submitFeedback(sender: AnyObject?) {
        submitFeedbackService.submitFeedback()
    }
}


// SubmitFeedbackService.swift
import Cocoa

protocol URLOpener {
    func openURL(url: NSURL) -> Bool
}

extension NSWorkspace: URLOpener { }

struct SubmitFeedbackService {

    private var to: String {
        return "mzornek+storyteller@gmail.com".urlEscape()
    }

    private var subject: String {
        return "[Feedback: Storyteller \(versionString)] ".urlEscape()
    }

    private var versionString: String {
        let appVersion = NSBundle.mainBundle().appVersion
        let bundleVersion = NSBundle.mainBundle().appBundleVersion
        return "\(appVersion) (\(bundleVersion))"
    }

    private let urlOpener: URLOpener

    init(workspace: URLOpener = NSWorkspace.sharedWorkspace()) {
        urlOpener = workspace
    }

    func submitFeedback() {
        let urlTemplate = "mailto:\(to)?subject=\(subject)"
        guard let emailURL = NSURL(string: urlTemplate) else {
            assertionFailure("Email should parse fine.")
            return
        }
        urlOpener.openURL(emailURL)
    }
}

private extension String {
    func urlEscape() -> String {
        guard let result = self.stringByAddingPercentEncodingWithAllowedCharacters(NSCharacterSet.URLQueryAllowedCharacterSet()) else {
            assertionFailure("Could not escape string for URL")
            return self
        }
        return result
    }
}

// SubmitFeedbackServiceTests.swift

import XCTest
@testable import Storyteller

class SubmitFeedbackServiceTests: XCTestCase {

    func testCallingSubmitFeedbackOpensAMailtoURL() {
        let mockWorkspace = NSWorkspaceMock()
        let service = SubmitFeedbackService(workspace: mockWorkspace)
        service.submitFeedback()
        XCTAssertNotNil(mockWorkspace.lastOpenedURL)
        XCTAssertEqual(mockWorkspace.lastOpenedURL!.scheme, "mailto")
    }

}

class NSWorkspaceMock: NSObject, URLOpener {
    var lastOpenedURL: NSURL?
    func openURL(url: NSURL) -> Bool {
        lastOpenedURL = url
        return true
    }
}

Feels cleaner to me but I welcome feedback. I also suspect SubmitFeedbackService will evolve in time as there is other communication needs in the future.

PS: I hope to share more about the implementation of project in the future. I know there is a void of Mac application programming discussions going on out in the web. I will try to help out with my own journalling the best I can. Questions welcome.

Regarding Knight Rider and Delegation

One of the saddest aspects of being a Big Nerd Ranch instructor in 2016 is that students these days do not appreciate the Michael Knight is to Delegation, as RoboCop is to Subclassing discussion of yesteryear.

From Cocoa Programming for OS X: The Big Nerd Ranch Guide:

Delegation

Let’s start with a story: Once upon a time, there was a man with no name. Knight Industries decided that if this man were given guns and wheels and booster rockets, he would be the perfect crime-fighting tool. First they thought, “Let’s subclass him and override everything we need to add the guns and wheels and booster rockets.” The problem was that to subclass Michael Knight, they needed to wire his insides to the guns, wheels, and booster rockets – a time-consuming task requiring lots of specialized knowledge. So instead, Knight Industries created a helper object, the Knight Industries 2000, or “KITT,” a well-equipped car designed to assist Michael Knight in a variety of crime- fighting situations.

While approaching the perimeter of an arms dealer’s compound, Michael Knight would say, “KITT, I need to get to the other side of that wall.” KITT would then blast a big hole in the wall with a small rocket. After destroying the wall, KITT would return control to Michael, who would charge through the rubble and capture the arms dealer.
Note how creating a helper object is different from the RoboCop approach. RoboCop was a man subclassed and extended. The RoboCop project involved dozens of surgeons who extended the man into a fighting machine. This is the approach taken by many object-oriented frameworks.

In the Cocoa framework, many objects are extended in the Knight Industries way – by supplying them with helper objects. In this section, you are going to provide the speech synthesizer with a type of helper object called a delegate.

What do you think the new metaphor should be?

Join Us at CocoaConf DC, Sept 9-10th

I’ve been to multiple CocoaConfs as an attendee and it’s with great pride I’m happy to say I’ll be a speaker at one soon.

CocoaConf Boston

CocoaConf is a traveling conference focused on Apple technologies that has been around since 2011. It’s big enough to have multiple tracks of content but small enough that you’ll have time to socialize with most of the other speakers and attendees throughout the event.

The 2016 “tour” is coming to a close. I’ll be speaking at the Washington DC CocoaConf (Sept 9-10) but if you are on the west coast you might want to consider San Jose, CocoaConf (Nov 4-5th).

When registering use code “COCOAHEADS” for 10% off!

I can’t wait to see everyone. If you will joining us, please come by and say hi. I’ll have some Big Nerd Ranch swag for ya.

The World Needs a Better Core Data

Lots of WWDC predictions out there this week. Here’s a dream of mine. Sadly one that I’ve given up on, at least from Apple.

A Better Core Data.

  • Tracking state is 1970s thinking. We should be tracking changes over time and rendering the current state of the object graph.
  • Migrations, the number one feature. As you add new entities to a store, you do so through a migration. Change a column name, you do it through a migration. The current Core Data migration story is embarrassingly complex and very fragile. We need to have trust in our migrations.
  • A single, focused, persistent store format. Allowing people to choose between XML, Binary, SQLite, InMemory and Custom adds more pain than it solves. Keep things simple. One on-disk format.

Clash of the Coders: Day 0

One of the many interesting benefits I get working for Big Nerd Ranch is the opportunity to participate in many fun and unique events. One of the bigger ones is called Clash of the Coders.

Clash of the Coders is an annual coding competition, whereby Big Nerd Ranch effectively “shuts down” for a a few days to allow developers to flex their coding muscles in to build something (anything) that is both wizardly and useful.

This years edition of “Clash” starts at 6pm tonight, Wednesday March 30th. While people are encouraged to brainstorm ideas and form teams ahead of time, no code shall be written until the event starts.

During the event we are treated to full time catering, shoulder and neck massages as well as other free-form geek activities. (I hear Christian will have his new Oculus Rift around for testing.)

While remote nerds can choose to stay remote and participate, anyone who wants to come into the office can. Last year I was at home and didn’t really get into it. This year I’m working out of the office so I’m anxious to see how it all works out.

As for my project and team, I’m still working on it. I have an idea and if need be will work on it solo but am also hosting a meeting after lunch for ‘Clash Singles’ to see if we can form some last minute teams.

At the end of Clash (Saturday, 6pm) we have a nice BBQ dinner (spouses and kids welcome) and we run a science fair of sorts, where people demo their work and answer questions. People are judged on project complexity, presentation and other factors. Bonus points are awarded if your team was interdisciplinary (mixing people of different departments) and if you were able to integrate any of the emerging technologies on our watch list. Top prize allows you to choose from list of high end geeky toys (think drones and musical instruments) with second/third prizes getting some nice Amazon gift cards.

I’ll post more as Clash gets going. If you have any questions let me know.

Managing Remote Teams

Local company Wildbit has been nice enough to host a running series of meetup events focused on running a software business and all that it can entail. Last night we discussed Managing Remote Teams and as a remote employee myself I was interested to hear what others people had to share. Below are some of my notes.

Context

In attendance we had about 12 or so people. Many from Wildbit (many of their remote people were in town), but we also had a pair from another small (6+) local software company, one from a local company researching coworking and myself, whom works remotely for the Big Nerd Ranch, down in Atlanta.

General Observations

  • Running an all in-person office has unique organization challenges and benefits.
  • Running an all remote office has unique organization challenges and benefits.
  • Running a hybrid in-person and remote office has unique organization challenges and benefits.
  • Even still, things vary based on the size and work of your company.
  • No rules are true for everyone so be flexible.
  • Be prepared to spend time and energy on this.

Why Consider Remote Employees

  • Expands your potential hiring pool greatly.
  • Very helpful if you are using niche technologies where it can be hard to find experts (Closure, Rust, etc.).
  • Potential benefits in having time shifted work (but this can also introduce communication problems, lag).

How to Get Started

  • If you currently have a 100% in-person company, adding remote people will be a significant culture shift. Be prepared.
  • No one wants to be the first remote hire on a team.
  • Consider adding multiple remotes at once.
  • Consider offering work from home to current in-person staff to help the new culture work itself out.

Challenges

  • It can be hard for a remote employee to demonstrate what they are working on.
  • Being remote requires more thorough and regular communication than most people expect.
  • Lots of people romanticize remote work from DHH’s writings and don’t respect the real life challenges of it all.
  • Sometimes with a hybrid company, teams will be setup where you have two people “in office” and one person remote on a project. It can be real easy for the two people in office to share more face-to-face leaving the remote person feel left out.
  • If you have employees in different states / countries, you have to make sure you are following the approbate employment laws of those states / countries.
  • The whole “programming in your underwear” trope is really misguided. Most successful remote people have a schedule, take showers, get properly dressed and have a dedicated work spaces.

Face to Face Retreats

  • Everyone seemed to agree that it’s a bad idea for the remotes to never come together. Everyone benefits from real face to face time so plan for it early.
  • Wildbit has yearly company retreats, where they work, plan for the year ahead and otherwise define the goals and values that should guide all their decisions.
  • Other companies do more vacation oriented retreats to help connect people socially.
  • It was also suggested that depending on the size of the company it could benefit from have some company wide events and then some smaller more team focused events.

Things You Can Do to Help Remote Employees

  • Setup a Slack or HipChat for communication.
    • Additionally try to have people communicate what they are doing. “Starting feature X”, Reviewing PR Y”, “Stepping out to get some coffee”, “Breaking for an hour to watch a conference talk” — sharing these can help people better understand what’s going on.
  • Consider giving them an annual office stipend to improve their workspace; equivalent to the money you’d spend giving them an office in your building.
  • Make sure all in-office systems are available to remote folks. Things like file servers, whitelisted IP API access, etc.
  • Prefer video chat over audio chat. Seeing human faces helps communication and empathy.
  • When running a video chat, consider having even the in-office people stay at their desk and connect to give every “virtual head” its own space. (I’ve also had everyone use their laptop for the video and a shared phone for the voice.
  • If you are presenting and the video is going out to remote people, don’t forget to ask them for questions and check the chat room.
  • If you are a manager and are set up to have 1:1 monthly meetings with in-office people, consider offering bi-weekly for remotes — since they might be more out of sync.

Equipment

  • Some people were enjoying the HighFive video conferencing hardware — though they needed more seats than the current solution offers for their company wide stuff.
  • BNR’s recently been using the YouTube Live service to stream and capture video with fair success for our larger meetings / internal educational talks.
  • One AV tool BNR uses is a toss-able chat box that contains a microphone so after large meetings, during Q and A, the remote folks can hear the questions being asked.
  • The Double was brought up reguarding its use as a virtual presence. It’s cool stuff but of questionable return value.

Hope you enjoyed my notes. If you have anything to share about your own remote work let me know.

Xcode Shortcut: Quick Open in Assistant

This answer / revelation caused a bit of a stir in the Philly CocoaHeads Slack so I figured I’d share it here as well.

Lots of people know and live by Xcode’s Quick Open Menu. You hit Command-Shift-O and start typing the name of a file, a class or a method and have some very good options made available to you. Make a selection, hit return and bam, the file is now live in your editor.

But what about the assistant editor? Historically some of the best uses for the assistance editor was to view a file’s counterpart file, the header for an implementation file and visa-versa. With Swift’s lack of a header files, some people have come to put use the assistance editor of test files.

Regardless as to what you want in the assistant editor it’s always been a little clunky to pick the file. Well now you can use the Quick Open menu for this too, and it’s oh so simple.

Hit Command-Shift-O and make your selection as normal. Instead of hitting Return, hit Option-Return — the file will now open in the assistant editor pane, opening it if need be.

Quick Open in Assistant in Action GIF

That’s all there is to it. It’s a small feature but very handy for those trying to stick to their keyboard and avoid the mouse while moving around in Xcode.

For a handy Xcode 7 Shortcut Reference Card check out the Big Nerd Ranch iOS Course Resource repo for a PDF download. You can also get the card in print by ordering our latest edition of iOS Programming, 5th Edition — updated for Xcode 7 and Swift 2.

PS: Props to @lyricsboy for catching my typos!