iStrategyBlabs

The Power of “I Don’t Know”

shrugging-guy

I’d say in most of life, but particularly in development, sometimes the best answer to a question is “I Don’t Know.” I am a huge fan of the Freakonomics podcast series, and was recently listening to episode 167 “The Three Hardest Words in the English Language” where they talked about how saying “I Don’t Know” is so incredibly hard. They cited a study where 2/3 – 3/4 of children and roughly 1/4 of adults would answer unknowable questions (seriously, they just made stuff up). While listening to this, I realized this is one of the key things we try to avoid in development here at iStrategyLabs.

When working together to solve a problem, the development team strives to keep an open mind about all of the technologies available in our toolbox. When faced with a new problem, not saying “I Don’t Know” when we need to hinders the discovery of new, possibly more effective ways of doing things. Saying “I Don’t Know” means that you are open to exploring the problem space fully before deciding on a particular solution.

tumblr_n40xbd9GG11qgk46eo1_500

Similarly, when talking with clients during an initial meeting or a discovery session, we want to be  confident in our ability to say “I Don’t Know.”  It is at these times that I am always reminded of a cliché I heard during an Agile training session. When do you know the least amount of information about a project? That’d be the initial kickoff. So why would we define every technical decision at this point? Instead, and our ability to do this is predicated on our success in delivering, the best thing to do is to say “I Don’t Know” and to then explain the steps we will take to explore the problem space and define the best possible solutions.

To be clear, saying “I Don’t Know” is not an act of ignorance. In fact, it is often times the clearest indicator of a cogent understanding of the issue at hand and trust in a client. And if you find yourself saying “I Don’t Know” too often, take the time to examine why and either focus in on the problem spaces you’re tackling or take a deeper dive into the area you’re working in.

RobotsConf 2013 Recap

img_7112

The inaugural RobotsConf event was held on Dec 6th-7th at Amelia Island, Florida. As a whole, the event aimed to be “A Software Developer’s Hardware Conference,” bringing software developers of all backgrounds (skill levels, programming languages, and yes even editor choice) together to interact with each other and build inventive projects — by all accounts it was an incredible success. We had the pleasure of attending and running a workshop highlighting the skills of wiring, soldering, and prototyping. While this may sound a bit dry, it actually afforded us the opportunity to see all of the other conference goers build their awesome projects throughout the course of the weekend.

As a wrap up to the conference we wanted to highlight a couple of the coolest things that we experienced.

familyphoto

Tech Recap

One really awesome component of RobotsConf was all of the available technology.  Not only was there a bounty of the latest gadgets on display, but all attendees were given free developer kits, which held various items including an Arduino Uno, a LeapMotion, and a Spark Core. Throughout the weekend we came across an array of items such as the Oculus Rift, BeagleBone boards, XBee shields, Tessel prototypes, Spheros, and even quadcopters. While we use Arduinos almost exclusively for our projects at ISL, it was really interesting to see how much of a de facto standard it was (and is) for other developers.

RobotsConf gave us the opportunity to interact with a Spark Core for the first time.  The Spark Core is a very small, wifi-enabled development board similar to Arduino in both its look and feel (aside from the different chipset on the board). We found the biggest benefit to be that Spark Core comes with on-board wifi that works! This has been a big pain point during many of ISL’s recent projects. If you want internet, you need to use an ethernet shield, which tethers you.

All conference attendees received one of these devices in their gift bags and the Spark Core promptly became the go-to device for getting things up and running throughout the event. As the Spark Core was used widely during the conference many perks were quickly discovered. For example, the learned possibility to remotely flash new firmware onto the board over the internet. In fact, the editor of choice is the web-based IDE from which you can deploy the code to the board with just the click of a button — Awesome! Once this was discovered people in the room immediately started creating easily accessible libraries for the Spark Core including a node.js library, a web-based tool and a cylon.js library.

Community Recap

In its inaugural year, RobotConf boasted an extremely impressive spectrum of speakers and attendees.  The roughly 150 people present represented Denmark, Columbia, Canada, Brazil, Guatemala, Mexico, Myanmar, Australia, and almost every state in America.  Of these 150 people 35% were non-male.  Even though it was a first-time conference, that statistic speaks volumes about its viability moving forward.

One of the most riveting keynotes during the conference came from a 12 year old girl and her father. Sylvia (@MakerSylvia) and James Todd (@techninja42) are a father-daughter team that worked together to build a watercoloring robot. A WATERCOLORING ROBOT! They even had the opportunity to show it off to President Obama at the White House Science Fair. The team’s energy was infectious and set the tone for the rest of the conference as everyone else then went on to build with great excitement.

The workshops, which were used for building, had the truest and most amazing sense of community.  While there were experts on site to help create bots, it was really the other attendees who offered their assistance and expertise to fellow conference-goers that kept things moving with great ease.  The camaraderie was unparalleled to any conference I had ever been to before. We came across people teaching one another everything from soldering to coding. It was truly fantastic to see people acting in a fashion befitting a community.

Science Fair

One of the best moments of the conference was the presentation of the final products at the Science Fair. A panel of judges walked around the room talking to individuals and teams asking about what they had built. Many people where just happy to have gotten a robot built, while others boasted some more impressive bots. Some of the crazier projects we came across were a third person camera that follows you around using an Oculus Rift, a quiz game tug of war in which a Sphero moves slowly towards the winner, a LeapMotion controlled water glass playing machine, and a facial detection robot that uses RaspberryPi. The father-daughter team from before? They made a dog rescuing quadcopter (seen below).

 

We had a great time at RobotsConf and hopefully we’ll be a fixture in conferences to come. We get to do some really amazing things here at ISL everyday working on projects like Redds, Nickelodeon, Redskins, and the GE Fridge, and it was really great to get to meet up with a group of likeminded people looking to make amazing things together.

 

Header image from MAKE

ISL Logo, We Need to Talk About Your Flare

logo-feature

We have a tall stack of technologies in use at ISL. There are GNU/Linux systems running in Amazon’s cloud plus a few languages coordinating with frameworks, platforms, and CMSs. Those communicate with database engines, web servers, memory caching systems, and more. Essentially, all that stuff works together to package a digital experience as HTML, CSS, and Javascript for consumption by you and your browser. Mmmm.

Recently, I took some time to experiment with CSS animations and thought it’d be fun to apply my findings to the ISL logo, which, thanks to the incredible design team here, already provides a fun geometry and color set to work with. Take a look at what I came up with:

Building Letters from the Inside Out

I have circles in mind for this experiment. Maybe it’s a desire to balance out the logo’s sharp corners, or maybe it’s just carryover excitement from the last time I used them to find popular Instagram users. Circles are awesome. Their influence will be obvious when we start rotating the logo later on, but they’re present along the way helping to make sense of angles and edge lengths.

We can break the logo down to basic shapes and use HTML and CSS to create those shapes in the browser. By starting with the ‘S’ we’re less constrained by the other components, and after it’s complete we can build out from there.

The shaded rectangles represent areas we can easily create by defining a background color, height, and width to HTML divs. We’ll make the curved segments of the ‘S’ by extending the shaded areas into the highlighted portions and rounding one of the corners with the CSS property border-radius.

figure_0

figure_1

The ‘I’ is much simpler to complete. It just needs one tall shaded rectangle and a pseudo-element that we absolutely position with zero height and width, and colored borders that overflow its dimensionless self. Ya.

figure_2

figure_3

Our final letter, ‘L’, is more or less the same as the ‘I’, only we tack on an additional rectangle to complete the base. The base may be a bit stubby, but I like how the dimensions are working out so onward!

figure_4

figure_5

Cutting the Background

Now that the letters are complete, it’s time to tackle the background. We draw a dashed enclosing rectangle around the letters and measure one and a half units of margin to the background’s perimeter. That looks about right.

figure_6

figure_7

Next we highlight on the rectangle two corners that we’ll cut away from. These highlighted regions are conveniently positioned to make use of some of the known dimensions while we calculate how to trim so that we maintain the 1.5 units of spacing.

figure_8

figure_9

That’s that. Add some pink to pop, and we’ve got our logo.

figure_10

figure_11

The real fun begins here. Let’s consider what it would look like if we pivoted our logo around its bottom right corner.

figure_12

figure_13

That’s 20.625 degrees of rotation, ample range for a little animation with room left over…

Continuing the breakdown, we move on to color. We have the CMYK color model which provides four colors to start with, but we have so many degrees to play with so let’s add more. For each of the four colors, we tint towards white five times to yield the spectrum here.

colors

Now for each of these colors, let’s create the logo’s hexagonal background filled with that color. Conceptually, we stack them all and have a deck of twenty-four logos to work with.

Let’s make each one rotate such that we get the forward tilting effect shown earlier, and let’s also have each successive background rotate just a bit further than the last one to create something of a flare. The first one will rotate 20.625 degrees, the next will rotate 1.875 degrees more, the next an additional 1.875 degrees, and so on. These rotations will be the peaks for their respective logos. Once a peak is reached, we’ll rewind the logo back to its starting point returning the cards to their original stacking.

If we froze each logo at the peak of its animation, we’d get the following figures. The first shows only the black tints, and the second shows the full set of colors.

figure_14

figure_15

That looks cool, but I’m not aiming to have them all move in unison. It should feel livelier if each logo, while related to the movement of its neighbors, has its own more independent motion.

The Result

With a touch of javascript, we trigger each logo’s animation and coordinate the trigger frequency with the animation durations so that the next logo is emerging past the previous one just as the previous one is peaking.

Here’s the result.

This was a CSS exercise. There are certainly improvements to be made and other technologies to consider. If you want to mess around with it, check out the codepen. Have fun!

Finding Instagram’s Most Wanted

isl-ig-feature

At iSL, we’re excited about the Olympics - go world! – and we’re dreaming up new ways of engaging our global audience. As part of the process, we thought it’d be cool to find Instagram users with the most pull in this year’s Olympic host city, London, so we built a little web app.

Here’s How It All Goes Down

First we need to decide on a search target, e.g. a city. Next we look for photos taken in our target area, and finally we process the media to discover those people deemed interesting by society. Google Maps provides incredible groundwork for our first requirement. We use Instagram as our photo source and follower rank. Then we match usernames with Klout. Putting it all together we should end up with a live monitoring system configurable via Google Maps.

The Challenges

It would be awesome if Instagram had the streaming support that Twitter does thus simplifying the build of a truly live system. Instagram does offer a realtime solution via its subscription service, but it involves significant back and forth so managing rate limits becomes an extra problem to solve. For now we settle on basic media scans.

As you may already know, our super-computer-mobile-gizmo-phones are sending our geographic positions embedded in every photo we upload to Instagram. That geo info is then made available via an API. Both subscriptions and the standard REST endpoints allow us to filter results based on this geographic data.

Here’s where things get tricky. Geographic queries to Instagram are limited to a 5000m radius, and we may very well want to search a larger area than this. London, for example, is 1,577 km². To get around the limitation, we’ll perform multiple searches with the maximum allowable radius, repositioning each time until we cover our target area.

Using Math to Solve our Problems

The problem we’re faced with amounts to filling a big circle with little ones. It’s obvious we can’t fill the larger circle with fixed-sized smaller ones without overlapping. See?

On the subject of circle packing though, there’s some super math out there. With this, our problem requires overlapping circles. This was our solution:

Let’s think about squares for a minute and come back to circles. We can imagine a square that encloses the large circle. It’s easy to then break that square into smaller ones that, combined, cover the entirety of the larger square and by association, the enclosed circle.

Now if we stop to think that inside every circle lives a square, we have a solution to our overlapping problem.

Accounting for a 3D World

Life is good in 2-D. Don’t believe me? Read Flatland, and do your best to ignore its unfortunate classification of women – it does have other redeeming qualities.

Things get tricky when dealing with life on Earth. As you probably noticed, stuff around here exists in three dimensions. Translation: we need to map our convenient 2-D system to the real world.

If you’ve ever traveled by plane, you’ve benefited from the math that helps us all move from a to b when |a – b| is pretty big. Straight lines don’t happen; instead our flight path is curved with the Earth’s surface. Thankfully, lives aren’t at stake here so I opted to use a relatively simple method for computing coordinates.

I’m going to combine this with some of the math used to generate earlier figures to get our circle center generating function, in Python:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
def generate_circle_centers(lat, lng, radius):
    # One side of a unit of the grid measures the distance of the
    # side of the largest square that will fit in an Instagram
    # search circle.
    unit = (2 * INSTGRM_MAX_RAD) / math.sqrt(2)
    # Find bounds of the grid. Bounds exceed desired radius by less
    # than one unit.
    x_max = y_max = int(math.ceil(radius / unit))
    # Generate centers for the grid without considering latitude
    # or longitude yet.
    ideal_centers = [[(unit*(i+.5),unit*(j+.5))
      for i in range(-x_max,x_max+1)
      if i+.5<x_max and j+.5<y_max] for j in range(-y_max,y_max+1)]
    # Map the centers to lat lng values, in degrees.
    lng_change = lambda x, lat1, lat2: math.degrees(
      x/(EARTH_RADIUS*math.cos(math.radians(
        (lat1 + lat2)/2
      ))))
    lat_change = lambda y: math.degrees(y/EARTH_RADIUS)
    centers = []
    for row in ideal_centers:
        for ic in row:
            y, x = ic
            # Skip circles that fall entirely outside of target.
            if math.sqrt(x**2 + y**2) > radius + INSTGRM_MAX_RAD:
                continue
            centers.append((lat_change(y)+lat,lng_change(x, lat,
                lat+lat_change(y))+lng))
    return centers

The Final Product

Now we plug this into a web framework, bring in a library or two, extend the previously mentioned awesomeness from Google, tie it all together with a dash of CSS, and voilà!

We’re scanning London for popular Instagram users. The yellow fill represents scans that successfully found people. We can also move and resize our target to look all over. Here we are back home.

So it looks like the smaller circular regions are being scanned. It should appropriately skip areas where people aren’t. Chicago sits at the southern tip of Lake Michigan, and I’m guessing there isn’t anyone uploading photos to Instagram from their boat. Let’s see what happens.

Nice.

Reaching Out on Twitter

Now that Instagram users we may find interesting are scrolling past, let’s see about getting in touch. We found a high correlation between matching Twitter usernames and Instagram usernames for popular Instagram users so we query Twitter to see if the prospective account exists. If we get a match, a link to the user’s Twitter feed is included. Now @ those you like!