Directives from Scratch: Slides from AngularJS DC Meetup

You can find the associated (poorly-documented) demo files on github. And here are the slides from my previous ‘From Scratch’ Meetup, which was an introduction to the rest of Angular.

Tagged , , , , , ,

The Common Cold, Common Stock, and TDD; Or: the ‘Cargo-Culting’ of Automated Testing

Nearly everyone in software engineering, whether they use automated testing and/or TDD (test-driven development) or not, should read Test Double’s post on “The Failures of ‘Intro to TDD'”. It encapsulates quite nicely the best intentions of TDD, and demonstrates that Test Double are smart people working hard at the Craft of Software.

But… here’s my problem with it: saying that “TDD is about solving problems incrementally with a side effect of total regression safety” is a lot like saying that “Airplanes are about having 5 hours of distraction-free work time with a side-effect of getting you from one place to another.” Both statements are true independently, but it confuses the purpose with the side-effect, even if the side-effect is overall more important to the success of the system. (There are days when having 5 hours of distraction-free work time does indeed feel like it changed my life more than did merely getting from New York to San Francisco. But it’s still merely a side-effect of my trip, not its purpose.) Continue reading

Tagged , , , , ,

Slides: “I’m Postal For Promises in Angular”, delivered at NG-Conf 2014

(I’m a text guy myself, but if anybody prefers to absorb content through audio/video, you can catch this presentation on YouTube.)

This presentation is a high-level introduction to promises, with some additional details related to Angular. But if you’d like deep-dive training on the structure of Promises, and building your own, see my previous post, with slides from a two-hour hands-on training.

Tagged , , ,

Eliminating Distracting Duplicate Files From Sublime Text

Sublime has some super-cool productivity features: the Sidebar, GoTo Anything, site-wide search, etc. But they run smack into the modern web dev workflow reality that we often have multiple copies of everything sitting around. You’ve got your `app` folder perhaps, where your source lives. Then you’ve maybe got a `dist` for building into, and you may have that weird `.tmp` folder that lives in the hellscape purgatory between the two. And therefore, there might be a `main.css` file in all three of those places.

Which means you’ve got a problem if you just <CMD-P>, take the first `main.css` you see there, and edit away. Or, you’ve got a ton of files and folders in the sidebar, and you just glance over and open the one that *looks* the one you need, only it turned out to be nested inside the totally wrong folder, because you had been checking out the success of your build a couple minutes before. Etc. Shit Happens.

But, lo: you can reduce the incidence of such shit! You can make Sublime ignore those folders – and their non-authoritative contents – entirely, without needing to change the way you organize your project, or the folders you add to it. You’ll still be able to access them whenever you need them, via the magic of the `Open` command, but they’ll no longer be cluttering your view – and your mind – the vast majority of the time.

To disappear them from Sublime (which I thought would bother me, but doesn’t in the least now, as I can always get them with File >> Open), just add a single line to your *User* Settings file. Here’s the original line in the Default Settings:

"folder_exclude_patterns": [".svn", ".git", ".hg", "CVS"],

So, Sublime is by default hiding all your files and folders related to source-control metadata. We’re going to add a couple more items to that, which will then really allow you to de-clutter, and focus in on just what matters: the source code you’re actually writing:

"folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "dist", ".tmp", "node_modules", "bower_components"],

No surprises here, but a quick explanation for anyone just getting used to these items: my Yeoman/Grunt-based workflow tools build distributable files into the `dist` folder; and they use `.tmp` as a staging area for pre-compilation during development and build. `node_modules` is where Yeoman and Grunt themselves live (along with all their other handy workflow cousins). And Bower is an amazing package manager that handles Javascript dependencies like Libraries and Frameworks. `bower_components` is where it stores them all.

All of those things are files that I most certainly need and want in my project. And yet they’re also stuff that I need to see and interact with only occasionally. When I need to do that, <CMD-O> takes care of it. But if this isn’t your exact cup of tea, take this basic idea, and customize it to your heart’s content. Cheers.

BONUS HINT ON FILE NAVIGATION: Lots of folks already know this, but don’t forget that you can use Sublime (and many other apps) to view invisible files in the Open Dialog using a simple key-stroke: < CMD – SHIFT – . > I use this most often when I need to add stuff to ~/.bash_profile, but it comes in handy any other time you want to poke around and find a hidden file in an environment more visual than Terminal.

Angular from Scratch: Slides from AngularJS Meetup DC

Thanks to all who attended! Thanks to Leigh Frampton for organizing and to LearningObjects (and Optoro :-)) for hosting. Demo files available to clone here.

Tagged , , , , , ,

Migrating to Angular 1.2: Modular Routing, Animations, ng-If, et al.

Note that Angular 1.2 is not yet officially released. They’re currently at Release Candidate 3, which you can install via direct download of the ‘unstable’ release at, or with:

bower install angular#1.2.0-rc.3

There’s no official migration guide available as yet. So, I’m assembling bits and pieces from my own experience and from posts by others. Bottom line: many big changes in Angular are incremental and break nothing. But other changes are pretty substantial and will require modifications of your existing code to even get your app up and running.  Continue reading

Angular’s ng-Show vs ng-Switch (and ng-If!): Important Differences

There’s a critical and undocumented (AFAIK) distinction between several of Angular’s directives. On the surface, ng-show/ng-hide, ng-switch and the new ng-if all produce exactly the same results: partials/DOM-fragments that appear and disappear. I used to think that ng-Show and ng-Switch were just different syntax for the same thing: convenience variations, essentially. And then, ng-If came along for Angular 1.2, which made me scratch my head and take another look.

Turns out the apparent similarities in outcome are deceptive, and mask fundamentally different implementations: ng-show & ng-hide simply toggle the visibility of an element or DOM fragment that’s already in the DOM, while ng-switch and ng-If actually detach and reattach the elements/fragments/templates from the DOM. (Note that Angular 1.0.8 and 1.2 do this in different ways. The 1.2 implementation is far preferable. Comparative implementations are linked from the relevant code below.)

This has significant implications for performance, for how you construct your CSS selectors, and much else.

I built a CodePen to demonstrate the differences between these directives, and added a separate Plunker (linked from the CodePen) to show how Angular 1.08 did ng-Switch differently than 1.2. Use your inspector to see what’s going on under the hood. I’d embed said Codepen, if only was a little more flexible…

Angular 1.2 CodePen

Google+ Finally Permits Cross-posts from WordPress!

I wrote previously about what a pain it is to get your WordPress blog posts over into G+, like you can easily do for Twitter,  Facebook, and LinkedIn. Really, it was only semi-feasible, and didn’t work automatically. Problem solved. You can now add Google+ to your ‘Publicize’ options in the WordPress Dashboard, at least on

Does anybody know: has Google at last opened up an API for this (years too late), or did WordPress just find a creative workaround?

Converting a Hybrid Mobile Project to XCode 5 & iOS7

I had just a momentary lapse of reason the other day: after weeks of holding off on upgrading my iPad to iOS 7, I abruptly felt that I had been left behind. So, after double-checking that all our key enterprise features were supported, I made the leap. And then I went back to work.

On a project that was due the next day. And which I needed to be able to test on that iPad. Eeek.  Continue reading

Tagged , , ,

Intro To Angular.JS Directives: Slides from NationJS 2013

Here are my slides from the talk I gave at NationJS. The 3 demos are available via Dropbox, but definitely need some explanation/documentation to make them maximally useful. Task for tomorrow…