Launching iMessage on Spotify

This week, a project me and my friends here in San Francisco have been working on finally went live. The Spotify iMessage App Extension.

This app extension let’s you search for songs, send them to friends, and then play short 30 sec clips.

I know it doesn’t look like much – but it was a lot of work! You’ve got just the basic functionality of the App itself. You’ve got error handling. How to handle going off line. Analytics. Authorization. The expand and collapse interaction of iMessage. Nasty bugs. And the requirement to support both portrait and landscape orientations too (thank you UIStackView).

You don’t launch something like this without a lot of help. And I want to thank:

• Saurabh Verma
• Samuel Kohonen
• David Ehrmann
• Matt Montag
• Sonny Chen
• Jon Yeo
• Kevin Mindeguia
• Kristian Lindwall
• Jacob Schulman
• Lisa_Kleinsorge
• Kevin Hutchinson
• Alva
• Daniel Persson
• Dan Flemming

And my partner in crime, with whom this all started as a Spotify hackweek project, Joseph Baena.

Without them none of this would have worked.
So thank you team.
Onwards and upwards.
Looking forward to iterating more on this great platform!

Oh. And we are hiring! So if you are a mobile iOS or Android engineer, and have always wanted to work a great team in the great San Francisco Bay area, go checkout our job listings here and see if you’d like to join the band.

Links

• TechCrunch – Spotify launches an iMessage app for texting songs to friends
• Engadget – Spotify’s iMessage app shares clips of your favorite songs
• The Verge – Spotify’s new iMessage app lets you share 30-second song previews with friends
• The Next Web – Spotify finally lands in the iMessage App Store
• Macrumors –
  Spotify Introduces iMessage App With Search Function for Sharing Music With Friends
• Billboard – Spotify iMessage App Allows Users to Share Songs Without Leaving the Conversation
• Product Hunt

Advertisements

Some nice words from the opening of the Steve Jobs Theatre

These words really resonated with me yesterday while watching yesterday’s Apple event.

There’s lots of ways to be. As a person.
And some people express there deep appreciation in different ways.
But one of the ways, that I believe people express their appreciation to the rest of humanity, is to make something wonderful. And put it out there.
And you never meet the people.
You never shake their hands.
You never hear their story or tell yours…
But some how, in the act of making something with a great deal of love and care,
Something is transmitted there.
And it’s a way of expressing ourselves to the rest of our species our deep appreciation.
So, we need to be true to who we are,
And remember what’s really important to us.

Steve Jobs

 

How to keep you tests non-flakey

Something I am always striving to avoid in my unit tests is flakiness. That’s why when I needed to deal with a UINavigation bar in the previous version of iMessage, I ended up writing a method that looked like this:

This method puts the responsibility on the client to figure out the runtime of the device, so this method is relatively straight forward and doesn’t suffer from any of the shenanigans that come with embedding lines of code like this, in classes you want to test.

The power of overriding – or always asking for more

A colleague and I in a code review where debating the merits of this approach. The ugliness of exposing these details versus the desire to keep the code clean and testable. Together we came upon the following solution.

Make a public API that is easy and another one that is testable. Then have the public API call the more testable one

So that’s what we did.

The lesson for me here is to always remember you can do anything with software. Got an interface you don’t like? Create a new one. Software is the one disciple where you can have your cake and eat it to. Just create whatever you need, and implement behind the scenes however your like.

Computer History Museum Tour

This weekend, being my last in San Francisco, I headed to what is probably one of my favorite museums in the world. The Computer History Museum in Palo Alto California.

The Trillion Dollar Startup

It all started with Fairchild semi-conductor. Robert Noyce’s conceiving of the integrated circuit, and Gordon Moore’s ‘law’ encouraged integrated circuit advancements which spawned not only a whole new industry, but a whole new way of working.

Openness over hierarchy, meritocracy, flat organizational structures, and management by walking around are still very much alive and well, and are still alive and well in the culture of Silicon Valley.

Early computers

The earliest computers where calculators and slide rules.

Here is a slide rule wheel created by Elizur Wright for doing insurance calculations in 1869. He is known as the father of Life Insurance.

This little contraption, known as Napier’s Bones was a multiplication aid Europeans used in 1617.

Mechanical Genius

Something I really love about museums are the stories. The people who built and created incredible things that most of us will probably never hear of.

Take Curt Herzstark for example. Here he is, leading a nice quiet life in 1942 before being sent off to a Nazi concentration camp.

While in the concentration camp, Curt refines he per-war design for a calculator. Only this isn’t an electronic calculator. It’s mechanical. The worlds smallest, four function calculator ever built.

And it was used in the 50s and 60s by sports cars enthusiasts because of it’s durability, simplicity, and ease of use. It is still studied today as a work of art.

Punch cards

No doubt you’ve hard of punch cards and how early computers used cards to input programs and store data. Everything from early loom machines, to concensus machines for US elections. It was all punch cards. And no one dominated that space like IBM.

IBM didn’t just own punch cards. They dominated it and create a new way of life for the computer corporate business man.

Uniforms, rally songs, and it was all lead by Thomas Watson, Sr in 1914. Watson lead IBM for 42 years. Through two World Wars, the depression, and created a culture, life style, and loyalty program never seen before in corporate culture.

He wanted his sales mean to be intelligent, morally fit individuals who dressed a certain way, looked a certain way, and thought a certain way. Rallies, speeches, songs, it was all a part of the culture. And IBM dominated computer for much of the 20th century.

Analog computing

Believe it or not there was a time when not all computers were digital. Early artillery computers solving complicated differential equations were analog.

Analog means instead of discrete 1’s and 0’s being sent around a computer, you used voltages and currents.

For example, in 1930, Vannevar Bush, an electrical engineering professors at MIT, created a device that was hailed as ‘the most important computer in existence in the United States’. Bush’s differential analyzer calculated artillery tables based on 6th order differential equations. Analog computers were really good at this.

And it was innovations like this, along with Bell Labs engineer David Parkinson, who one night in 1940 dreamt of a analog voltage amplifier, that helped destroy 76% of German V-1 Buzz Bombs.

Eniac

In WW2 the U.S. Army was sending a lot of material to England. But the one thing they lacked were accurate artillery tables. Enter the Eniac. Started in 1942, it never was actually used in WW2 (it didn’t finish until 1945). But it, and all it’s tubes (18,000) did help out in the Manhattan project and other projects after the war.

Fun fact: Eniac was not binary. It was base 10. That means instead of story memory as a 1 or 0, it stored it as a 0,1,2,3,4,5,6,7,9. Neat!

Univac

The first computer to really ‘make it’ was the Univac. It was a general purpose computer, created by some of the same people who created the Eniac, and it’s claim to frame was it successfully predicted the result of a US election. And that Eisenhower would win.

Within six years, Univac went on to sell 46 machines. Each costing $1M dollars. With the last going into retirement in 1970.

Hey mom. Remember when I asked for 4MB of memory for my birthday when I was 18? Thank fully I wasnt’ around when the Univac was popular. Here is the memory unit for this computer.

I don’t fully understand how it works, but it uses mercury and received data as mercury waves.

Cray super computers

Not many people have heard of Seymour Cray, but he is hero of mine. The father of super computing, Seymour Cray, revolutionized high speed computing for over 40 years, and he did it in a way any engineer would admire.

When management got in the way, he packed up and moved his small team out into the woods, 100s of miles away from management, and did amazing things.

The biggest break for Cray came in 1976 with the Cray-1. Just look at this machine. All hand wired. Super freon cooled. Each machine costed $1M. Cray need to sell 10 to survive. They sold over 100. It was the fastest computer in the world, designed in a unique circular shape to account for the speed of light with no signal having to travel more than 3″.

A little a head of it’s time

See if you can guess what this is.

This was Honeywell’s answer to the kitchen recipe book. A full on kitchen computer that stored recipes. In 1969, in the Neiman-Marcus catalog, this home kitchen computer could be yours for the cool price of $10,600. Apron and two week programming course included.

Not surprisingly, non of these were sold.

Snatching defeat from the jaws of victory

You probably heard the story where Steve Jobs got his ideas for the Mac from a demo at Xerox. This is the computer that he say. The Alto.

The Alto was light years ahead of it’s time. WSIWIG editing. Object Oriented programming. Network computing. Mouse. The Alto had it all.

Note the orientation of the monitor. It goes up and down length wise, not across like most monitors today. That’s because the designed wanted to replicate the size and orientation of 8.5×11″ paper. It did’t stick. But it sure should how deeply they thought about the computer experience.

The Alto is considered one of the greatest blunders in corporate history. Why invest in a technology that discourages photocopying went the thinking at the time.

Computers in Music

This was an interesting section on music. It showed the evolution gramaphones, to records, to 8-tracks, walkman, early mp3 players, and then ultimately streaming.

And I can tell you having worked at Spotify, the innovation in music has only just begun.

Other notables

This was my first computer. The good’ol Apple ][e.

Here’s the Apple Mac (based on the ideas Steve got from the Alto).

And this was a neat find. An actual Pixar hardware computer.

Not enough time

This museum is awesome. I have only scratched the surface here and there is simply note enough time. There are tours. Demos of mainframews, Spacewares on PDP machines, gaming. And you can talk to actual engineers who worked on this things. It’s a wonderful place.

And if you are at all interested in technology, history, and the some of the genius and work that our world depends on, this is the place to be.

The computer history museum is one of those stars in the lower right hand corner of the map in Palo Alto.

The other dot is Steve Jobs house which I also visited this morning. It looks like this.

Handling events and callbacks in ReactJS

https://facebook.github.io/react/docs/thinking-in-react.html

So I have been studying ReactJS that last couple weeks. Mostly banging my head trying to come up with simple examples. Here is one based on Thinking in React that demos how to do callbacks.

Starting simple

Here is a simple bit of code that counts words.

Note the main component is called ‘WordCount’, and it does a fine job of counting words.

Adding composition and parent callbacks

But what I want to do is create a sub-component, maintain the state in the parent component, and have the parent component pass it’s callback down to the subcomponent so it can be called back.

Here is what I got working.

Note the following.

1. Child calls parent callback

I don’t know if this is common, or even necessary, but based on the Thinking in React example this is what they do.

You define your parent callback like so

And then you pass it to your child like so:

Note the name pattern. ‘onSomething’ ‘handleSomething’. This I have seen in many examples and this seems common.

But then in the child you define another similar callback, and have it do nothing more than prep the data and call the parent.

I don’t know what you would do this. I guess if you wanted to do some more processing (you know the saying about always adding another layer of indirection).

And then you use this child callback locally which in turn calls the parent callback we just defined.

This works. I am just not sure if it’s right or needed.

What I would have expected to be able to do, is just pass the parent callback directly to the child component itself.

But I haven’t been able to figure out how to do that yet. Stay tuned…

How to pass anonymous arrow functions ReactJS

You define the callback like this

You pass it using the arrow functions like this

You set it’s parameter values like this:

You pass it to other components and functions like this

And you add it to your controls like this

ReactJS example using callback with User

https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36

Here is a simple example that showing the plumbing for a ReactJS app using a callback.

import React from 'react';
import { render } from 'react-dom';

class User extends React.PureComponent {
  render() {
    const {name, onDeleteClick } = this.props
    console.log(`${name} just rendered`);
    return (
      <li>             
        <input 
          type="button" 
          value="Delete" 
          onClick={onDeleteClick} 
        /> 
        {name}
      </li>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { id: 1, name: 'Cory' }, 
        { id: 2, name: 'Meg' }, 
        { id: 3, name: 'Bob' }
      ]
    };
  }
  
  deleteUser = id => {
    this.setState(prevState => {
      return { 
        users: prevState.users.filter( user => user.id !== id)
      }
    })
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        <ul>
        { 
          this.state.users.map( user => {
            return <User 
              key={user.id} 
              name={user.name} 
              onDeleteClick={() => this.deleteUser(user.id)} />
          })
        }
        </ul>
      </div>
    );
  }
}

export default App;

render(<App />, document.getElementById('root'));