Draggable Contact Card

2014

Curious Components is coming back! Update: new episode is out. For this second series, I decided to expand the show to talk about making things with computers in general. I did this because, for the last year, I spent more time as a front-end developer than as an Arduino hacker. For this first episode I'm going to talk about how to make a web app.

The crux of making a web app is creating reusable pieces of UI that reflect different data. To illustrate this, I created a contact card example you see on the left ➔

You have a contact card and above & below it are these zones that are assigned to a person (you can see their JSON representation in the zones). Drag the contact card to that zone and it will reflect that person. Besides learning how to make a <div> draggable and knowing when it intersects with another <div>, I had to figure out a way to reassign the $scope inside the contact card with the $scope of the zones it entered into. The solution I came up with was to simply replace the user defined properties in the contact card directive's $scope, with the user defined properties in the zone directive's $scope. The episode won't detail this implementation, so check the JS code in the embed below to learn more:

More About The Show

I'm happy to work again with my friend and talented videographer, Luis Mascareno. He has a new Canon camera and the initial shots we've made with them are more than promising. I'm also working with my other friend Melody Liu, who has the magical ability of creating the most adorable drawings on earth:

So much cuteness!!!!