Javascript factory functions

Leave a comment

class Dog {
  constructor() {
    this.sound = 'woof'
  }
  talk() {
    console.log(this.sound)
  }
}
const sniffles = new Dog()
sniffles.talk(); // outputs 'woof'

Problem with the above class is that as soon as you use it somewhere else, you get a different this.

$('button.myButton').click(sniffles.talk)  // breaks

The way to fix this is to bind the ‘this’ to be sniffles.

$('button.myButton').click(sniffles.talk.bind) 

Or you could do this

$('button.myButton').click( _ => sniffles.talk() )

A better way – function factories

In JavaScript we don’t have to use classes. Instead we can use factory functions.

Here dog is simply a function.

const dog = () => {

  const sound = 'woof'
  return {
    talk: () => console.log(sound)
  }
}

const sniffles = dog()
sniffles.talk() // woof

This is just a variable, ‘sound’, and then return a simple object literal with one property ‘talk’. And because of closures the talk function has access to the variable sound.

This also has the added benefit in that variable sound is private. No one else can see it except this function.

So the advantages here are:
– privateness of variables
– no explicit bind necessary
– and no magical ‘this’ to worry about because it’s all constructed in the right way

Advertisements

Launching iMessage on Spotify

Leave a comment

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

Screen Shot 2017-08-04 at 1.25.07 PM.png

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

Sep-15-2017 08-14-06.gif

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).

Sep-15-2017 08-18-08.gif

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

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

Some nice words from the opening of the Steve Jobs Theatre

Leave a comment

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

Leave a comment

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:

Screen Shot 2017-09-13 at 10.19.35 AM.png

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.

Screen Shot 2017-09-13 at 10.25.54 AM.png

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.

Screen Shot 2017-09-13 at 10.30.17 AM.png

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

Leave a comment

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.

Screen Shot 2017-09-09 at 10.55.01 AM.png

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.

Screen Shot 2017-09-09 at 10.55.09 AM.png

Screen Shot 2017-09-09 at 10.55.16 AM.png

Screen Shot 2017-09-09 at 10.55.23 AM.png

Early computers

The earliest computers where calculators and slide rules.

Screen Shot 2017-09-09 at 11.26.02 AM.png

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.

Screen Shot 2017-09-09 at 11.26.14 AM.png

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.

Screen Shot 2017-09-09 at 11.35.56 AM.png

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.

Screen Shot 2017-09-09 at 11.36.06 AM.png

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.

Screen Shot 2017-09-09 at 11.49.05 AM.png

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

Screen Shot 2017-09-09 at 1.55.29 PM.png

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.

Screen Shot 2017-09-09 at 1.55.47 PM.png

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.

Screen Shot 2017-09-09 at 1.55.55 PM.png

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

Screen Shot 2017-09-09 at 2.00.25 PM.png

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.

Screen Shot 2017-09-09 at 2.32.59 PM.png

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″.

Screen Shot 2017-09-09 at 2.33.05 PM.png

A little a head of it’s time

See if you can guess what this is.

Screen Shot 2017-09-09 at 2.48.57 PM.png

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.

Screen Shot 2017-09-09 at 3.27.55 PM.png

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.

Screen Shot 2017-09-09 at 11.08.52 AM.png

Screen Shot 2017-09-09 at 11.08.59 AM.png

Screen Shot 2017-09-09 at 11.09.06 AM.png

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.

Screen Shot 2017-09-09 at 3.44.38 PM.png

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

Screen Shot 2017-09-09 at 3.44.50 PM.png

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

Screen Shot 2017-09-09 at 3.44.58 PM.png

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.

Screen Shot 2017-09-09 at 3.50.07 PM.png

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

Screen Shot 2017-09-09 at 3.52.15 PM.png

Handling events and callbacks in ReactJS

Leave a comment

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.

Screen Shot 2017-09-01 at 8.44.25 AM.png

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.

Screen Shot 2017-09-01 at 8.47.15 AM.png

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

Screen Shot 2017-09-01 at 8.49.31 AM.png

And then you pass it to your child like so:

Screen Shot 2017-09-01 at 8.50.04 AM.png

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.

Screen Shot 2017-09-01 at 8.51.20 AM.png

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.

Screen Shot 2017-09-01 at 8.53.06 AM.png

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

Leave a comment

You define the callback like this

Screen Shot 2017-08-31 at 8.31.52 AM.png

You pass it using the arrow functions like this

Screen Shot 2017-08-31 at 8.32.28 AM.png

You set it’s parameter values like this:

Screen Shot 2017-08-31 at 8.35.38 AM.png

You pass it to other components and functions like this

Screen Shot 2017-08-31 at 8.33.10 AM.png

And you add it to your controls like this

Screen Shot 2017-08-31 at 8.33.43 AM.png

Older Entries

%d bloggers like this: