Ashish Datta, Author at {5} Setfive - Talking to the World

One of the more opaque concepts about AngularJS is the process that converts a chunk of HTML from a template into “Angularized” HTML which is then inserted into the DOM. During this conversions, custom directives are replaced with their corresponding HTML content, Angular directives like ng-repeat are processed, and any event handlers of interest are wired up. As it turns out, Angular’s $compile service is what’s responsible for making the magic happen. OK great, but why is this interesting or important? Because leveraging the $compile service directly lets you take dynamic content and process it to enable Angular directives and behaviors.

Since examples are always helpful, here’s an admittedly contrived one that we’ll walkthrough. Imagine that we’re building a WordPress slideshow plugin and we want to support custom themes for individual slides. So in our plugin, a user would be able to modify the HTML that displays a slide, we’d save it to the database, and then retrieve that template when we render the slides. For arguments sake, let’s assume the “default” template for the slideshow looks something like this:

As you can see, we’ve got a few directives and by default we’re displaying some description. Generally, we could set this up by creating a “slide” directive that looks something like:

Great, nothing to crazy but with this setup there’s no way to supply dynamic HTML from our database to use in the template. In order to allow a custom template you’d just need to modify the directive to look something like:

And then you’d be able to use it with:

The key difference is that in the modified directive the template is inserted into the directive’s element using “angular.element(el).html(scope[“slide”].template);” and then finally the $compile service is invoked to process the regular HTML to get Angular magic.

Anyway, as always questions or comments welcome!

Labor day has come and gone so summer is officially over. We sat down with our intern Phil to chat about his time interning at Setfive.

Favorite Part About Interning At Setfive?

My favorite part about interning at Setfive was being introduced to so many different programming tools, and having the ability to increase my programming skill set. This summer I learned about PHP, the Symfony 2 Framework, MYSQL, I improved my JavaScript skills, learned some Angular.js, and even learned how to write unit tests. I was exposed to so many new things that everyday was fun and no two days were ever the same.

The environment here encouraged questions, and allowed me to ask and receive answers to anything I wanted to know more about. Some of the guys would even go out of their way to send me related documentation about something if they felt that they couldn’t confidently answer it themselves.

Working under the guys here was an incredible experience, I was given the freedom to make mistakes and figure out problems on my own, but at the same time was given sufficient structure to make consistent progress. It was awesome to have the comfort of knowing I had a smart, qualified person to guide me in the right direction if I ever got too stuck on any one problem.

Most important thing that you learned?

The most important skill that I learned was definitely an improved conceptual understanding of MVC, and that while sometimes using this pattern slows down your programming, in the long run it helps you create readable, modular code.

I also learned that installation is just the worst.

Most Memorable Moment?

The most memorable moment of the summer was the first time we used the Txty Jukebox in the office. It didn’t quite work the first time around, however, watching people use and get enjoyment out of something that I helped to create was something that I’ will never forget.

Where do you want to go from here?

From here I definitely want to continue building custom applications. I’ve spent the last part of the summer teaching myself objective-c, and the skills that I’ve learned here will definitely help me make the transition into developing iOS applications.

Top 5 Things To Eat

Buffalo Soulja – Darwins (Only available on Thursdays)
Mango Bubble Tea – Dosa Factory
Steak Sammy – Orinoco
Burger topped with shortrib meat – Charlies Beer Garden
Chicken Pad Thai – Thelonious Monkfish
Honorable Mention: Cuban Sammy – Plough and Stars

A couple of days ago in my journey down the AngularJS rabbit hole I ran into an interesting issue. If you have a directive that’s dynamically adding an iframe tag how can you set an onLoad handler on the iframe with access to the directive’s $scope?

Interestingly, the top StackOverflow answer on Google recommends adding a function to the window object and then setting the onLoad attribute to that function. Although it works, this approach is decidedly not “the Angular way” and would definitely become unwieldy with more than one iframe on the page. I poked around a bit and turns out there’s a better way to do this. The “trick” is that it’s possible to access a directive’s $scope from inside its link function so you can set onLoad on the iframe element from there. This post provides an overview but it’s a bit light on details so here’s a concrete example.

This summer we have an engineering intern from Tufts University (go Jumbos) joining the team. He’ll be working on internal projects including Rotorobot and a couple of new ideas. Here’s Phil in his own words.

Could you tell us a little bit about yourself?

Sure. I’m from Haverhill, MA originally so I’d call Boston home. I’m currently attending Tufts University and pursuing a BA in both Computer Science and Cognitive Science. At Tufts, I’m also working with the linguistics department on a couple of research projects surrounding the structure of the mental lexicon.

Where can we find you outside of work and school?

I’ve been playing Rugby at Tufts for the past few years so probably on the pitch, or maybe relaxing in my hammock with a book and an IPA.

What’s been the hardest part about learning PHP and Symfony2?

The hardest parts about learning Symfony2 have been recognizing how the many components of the framework fit together, and allowing the framework to take care of some of the heavy lifting. It was a leap to go from hacking away with straight PHP to designing an application, keeping both structure and modularity in mind.

Which computer science course has helped the most in transitioning to “real world” programming?

The computer science curriculum at Tufts has definitely helped me make the transition into real world programming. In particular, the course: Comp20 – Introduction to Web Development has given me exposure to the many tools that are used in the creation of web applications.

What technology/language/framework/etc. are you excited to learn more about?

This summer I’m excited to learn more about back end programming, the SQL language in particular as well as learning Bash more in depth so I can improve my use of the shell.

So far, what’s your favorite lunch spot been?

My favorite lunch spot so far has definitely been Orinoco in Harvard Square. I will buy some of their hot sauce by the summers end.

And finally, movie quote you live by?

“Crying: Acceptable only at funerals and the Grand Canyon” – Ron Swanson

For the uninitiated, Orinoco has an authentic Venezuelan hot sauce which has been known to destroy even veteran hot sauce connoisseurs. Here’s Phil deciding to take the plunge:

There’s plenty of opinions about the efficacy of technical interviews and an equally large amount written on the topic. Personally, I don’t think there’s much value in putting someone in front of a whiteboard and seeing if they can regurgitate how merge sort works (I couldn’t) and there’s plenty of blog posts arguing that point. Something that I do think is valuable is trying to gauge how well someone really knows a language that they’ve listed on their resume or used in a project. And recently, with the surging popularity of Node.js and “coding boot camps” it seems like every resume we’ve seen mentions a proficiency in Javascript.

So how could you suss out someone’s knowledge of Javascript? I poked around on Quora a bit and ran across few top voted related questions: What are some good JavaScript interview questions? and What are the most important JavaScript concepts to know for a job interview?. Skimming through them know, the questions are mostly focussed on “tricks” which isn’t very useful and the list of skill is a bit underwhelming as well. Ok, so what questions can we ask?

Prototypical Inheritance

Prototype based inheritance is woven into the fabric of Javascript so I think chatting about it will reveal a lot about a candidate. You’ll get a sense if they generally “get” how object oriented programming works and then more specifically how Prototype inheritance in Javascript works.

Looking at code, a good starting point would be talking through the difference between “Duck” in the following sample:

From there, there’s the natural philosophical discussion about how Javascript doesn’t have classes but instead objects are copied from existing ones down the prototype chain. That seems to naturally lead to a discussion of how you’d accomplish something like (don’t in production):

First Class Functions and this/bind

First class functions are heavily used Javascript in idiomatic Javascript so they certainly deserve some discussion. At a high level, describing first class functions is fairly simple. Functions are treated like any other object so that they can be passed as arguments, inserted into arrays, and all the other things you’d normally be able to do with objects.

Jumping back into code. An interesting first discussion would be “How could you implement a switch statement without using ‘if’ statements or a ‘switch’ block?”

Getting a bit fancier, another task would be to implement a “filter” method similar to the one found in lodash/underscore. “filter” accepts an array of elements and a callback and returns the elements which return “true” when passed to the callback. So as an example:

The big change is in our “filter” we’re changing the semantics so that “this” is the value from the list being filtered. Watching how someone approaches and implements this will reveal how deeply they understand Javascript’s function semantics.

Async and Promises

Last up would be touching on Javascript’s model of asynchronous programming followed by a Promise implementation (q, jQuery, etc.). The difference between asynchronous code and synchronous code is large enough that it probably could fuel an interesting discussion. A couple of interesting points to touch on:

At a high level, what is the difference between asynchronous and synchronous code?
In a single threaded environment like a Javascript engine, why would an asynchronous model be beneficial?
Typically, why would an implementation using Promises be more flexible than just a callback?

Jumping back into some code. A good first task would be to execute a set of asynchronous operations in series – Another interesting task would be to implement a tiny API using regular callbacks and then using a Promises library.

Anyway, just a couple of quick ideas. I’m still new to the recruiting and interviewing game so I’d love any feedback or comments!

Author: Ashish Datta

AngularJS: Using dynamic content with $compile

Setfive: Looking back on a summer of shenanigans