Joe Blau

Design Engineer

Read this first

Symbol For Context

 Know When Your Computer Is Intelligent

Over the past few years, I have spent a considerable amount of time on side projects investigating contextual products. A contextual product uses hardware and software sensor inputs to create a better experience. Context goes beyond issuing commands to computers and waiting for a responses. Context seeks to codify computers with humanlike responses the product’s user desires.

There are many examples of contextual products being built today such as Apple’s iPhone, Amazon’s Echo, Nest’s Thermostat, and Tesla’s Autopilot. These products, which are a combination of hardware and software, capture one or more sensor inputs and perform mathematical calculations resulting in one or many intuitive decisions. Take Autopilot for example: Using a camera, radar, and 360 degree sonar sensors, Autopilot identifies highway road lanes. With lane classification

Continue reading →


Contextual iOS Software

 Building Better Products With iOS’s Sensors

I categorize sensors in the iPhone into three categories: Internal, External, and Compound. An Internal sensor is one that natively runs on the device. While Internal sensors may require external hardware (GPS satellite, Bluetooth beacon), the functionality that captures and processes data is all handled by hardware on the device. Conversely, External sensors rely entirely on systems which capture, process, and send data results to the mobile device via a third party API integration (weather, sports scores, restaurant ratings, commute times, theater listings). A Compound sensor is comprised of at least two Internal and/or External sensors.

The goal of classifying these sensors is to assist product developers so they can focus on creating the next generation of contextual products. The design process for creating amazing and unique

Continue reading →


Gitignore.io Open Source System Architecture

 Building A Service On Great Open Source Tools

I’ve been working on gitignore.io as a side project since February 10th, 2013 and the service has slowly grown to host over 250 gitignore templates. I finally got a chance to create a diagram of gitignore.io’s architecture to show how I maintain an extremely low cost service built using amazing open source and free tools.

system-architecture.png

  1. GitHub Free OSS - Source code repository
    • Source - https://github.com/joeblau/gitignore.io/
    • Issues - https://github.com/joeblau/gitignore.io/issues/
  2. Travis CI Free OSS - Continuous integration and unit testing
    • Status - https://travis-ci.org/joeblau/gitignore.io/
  3. Heroku Staging Free Single Dyno - Public facing staging app for online testing of latest build
    • Internal URL - https://gitignore-io-staging.herokuapp.com/
    • External URL - https://staging.gitignore.io/
  4. Heorku Production Free Single Dyno -

Continue reading →


Noise Canceling Apple Earbuds

I attempted to create noise canceling headphones in software from Apple’s stock earbuds.

 TLDR; It did not work

The theory to this concept is simple, but relies on a prerequisite understanding of how noise canceling is implemented. I’m focusing on the challenge at a high-level, but explain what went wrong and offer some suggestions for how Apple can probably implement this.

This is a five step overview of how to implement noise cancellation.

  1. Start with a live ambient noise that will be captured by the ear.
  2. Capture the ambient audio noise with a microphone.
  3. Filter the audio signal to the desired band of the frequencey spectrum to cancel out. Assume you want to eliminate low rumblings of a server room or an airplane engine; You’ll need to run to remove the high frequencies from being processed.
  4. Invert the audio signal phase. To cancel out an audio signal, play the inverted signal

Continue reading →


Dust

 Creating Ephemeral Gestures On iOS8

Last week, Apple announced the Watch and one of the features I was really interested in was the gesture based communication tool which lets people sketch an ephemeral message to other Watch users.
applewatchsketchtap.gif

I decided on Friday that I wanted that feature now, so I wrote it and here is the breakdown of what I’m calling Dust. Dust uses Apple’s Multipeer Connectivity framework, but could build this on any realtime peer to peer networking system including Firebase or ZeroMQ. I chose Multipeer Connectivity so I could run the app offline only using a Bluetooth connection between peers.

Core Animation’s Particle Emitter and the Multipeer Connectivity Framework are the two major components that make Dust work. The first component I’m going to talk about is the gesture based particle emitter. First, create two gestures and add the gestures so the view

Continue reading →


The Contextual Graph

 The Multi-Trillion Dollar Digital Network

Google owns the knowledge graph. If there is any information you want to know, you search Google or use one of Google’s products to find your answer. Services like Maps, Images, Video, Shopping, and Search contribute to this network of information that Google knows about the world.

Facebook owns the social graph. With over one billion users, Facebook has the most extensive relationship network. Facebook knows what music, movies, places, books, food, causes, and people you like. If users contribute the right content, Facebook’s platform has the potential to create an accurate digital representation of your social life.

There is a new graph that will be more valuable than the knowledge and social graph over the next decade. The Contextual Graph, a term coined by Shane Patterson, is the relationship between you and every smart hardware

Continue reading →


Remember Where You Heard It First

 Breaking News On Secret

If you’re in tune with the latest and greatest apps, then you’ve probably heard of Secret, an anonymous public message syndication app with the slogan “Speak Freely.” Well that’s exactly what the people are doing. Over the past few weeks, multiple news stories broke on Secret before news outlets covered them. Rightly so as journalists are expected to practice due diligence and may be under an embargo barring premature release of information. Tonight’s story? Dropbox acquiring Box.
secret.png
I don’t know if this is actually happening, but I think it adds a very interesting dynamic to the anonymous publishing broadcast medium.

Continue reading →


Full Screen Gesture Widgets

 Designing Six Full Screen Gesture Widgets For Mobile

While working on an iOS app, our team became frustrated at the speed and efficiency of native mobile widget interactions. The new mobile/touch platform is still using widgets and interactions from the old desktop/mouse platform. Realizing an opportunity for new paradigms, we challenged ourselves to reimagine widgets using the full screen. The original ideas flowed from a full screen color picker which is the first widget we implemented. The color picker was the first step in creating the Conopsys (COS) widget set.


COSGestureColor—The Aurlien inspired picker is used to select colors for smart lights. Most color pickers don’t offer great interactivity and revolve around traditional RGB or HEX desktop color pickers. GestureColor creates a playful interface which takes advantage of the whole screen. The GestureColor view replaces

Continue reading →


The www.gitignore.io Update

In November, Adam Roben (@aroben) went on a mass pull request spree merging hundreds of gitignore templates into GitHub’s master repository. Finally! Before he combed though 100’s of pull requests, it seemed like nobody was maintaining the official repo. The lack of an updated repository was one of my original reasons for creating www.gitignore.io. Since the official repository was updated, I received a suggestion from @mlang38 to create a submodule repo for gitignore.io that points to GitHub’s official list. That request combined with a few other features prompted me to spend a few hours updating the site and here are the results of the update.

  • Proper Bootstrap 3 support. Why? When I first migrated to Bootstrap 3, the Select2 box didn’t have the correct styles to support Bootstrap 3 so I found a work around. Now that there is better support, I’ve used the new Bootstrap 3 large style

Continue reading →


iOS Touch Visualizer

 Visualize Touches, Pans and Long Presses

I was working on a project with my co-founder this weekend and my task was to record a simple video that helps onboard users. One of the concepts we are using in our app is something we call Full Screen Gesture Controls. These are similar to what was demonstrated by Matthaeus Krenn in his New Car UI Video. In his video, he was able to physically show you his fingers moving across the screen, but what if you’re doing a live demo and people can’t see your hands?

That’s where Touch Visualizer comes in as an way to visualize three types of interactions with the screen.

  1. Touches: Visualized by a circle which expands and fades out
  2. Pans: Visualized by a circle with contracts and fades out into a tiny dot
  3. Long Presses: Visualized by a morphing circle

You can also customize the colors of the fill, stroke, opacity and fade out duration. Here is a

Continue reading →