babbling with merfolk
- between the layers of JS hardware -

WHUT

suz hinton

  1. @noopkat

  2. NYC

  3. front-end dev @ kickstarter

  4. i like robots

illustrated silhouette of cat bust

yep

grid of 12 technology related projects on kickstarter that the presenter has backed

micro-controllers

detailed illustration of an Uno edition of the Arduino

 

shoes decorated to look like cats, connected with a wire
chunky black plastic bracelet worn on posed wrist, with 2 red 8-bit style hearts embossed on top of bracelet iPhone on table with text messages of kitten pictures displaying

 

oled screen on a breadboard, displaing a pixelated monchrome picture of a cat's face

how

arduino uno

detailed illustration of an Uno edition of the Arduino

johnny-five

logo of the johnny-five javascript framework (black illustration of johnny-five the robot, on a yellow square shaped background)

⚠︎ WARNING ⚠︎

✖︎ how to get started ✖︎

☛ johnny-five.io

✧ abstraction ✧

> 700

JavaScript though?

JavaScript though?

tweet from @nodebotanist, says ''

JavaScript though?

tweet from @nodebotanist, says ''

NodeJS modularity

robot.doCoolThing()

why?

illustration of a magician performing the floating lady trick, and passing a hoop over her

taking a peek underneath

where are you taking me?

let's begin

hello world

illustration of an Arduino Uno with LED connected to pin 13, and blinking green

hello world

  • var five = require("johnny-five");
  • var board = new five.Board();
  • board.on("ready", function() {
  •   var led = new five.Led(13);
  •   led.blink(500);
  • });

hello world

  • var five = require("johnny-five");
  • var board = new five.Board();
  • board.on("ready", function() {
  •   var led = new five.Led(13);
  •   led.blink(500); // <= ♥︎ ♥︎
  • });

hello world

  • var five = require("johnny-five");
  • var board = new five.Board();
  • board.on("ready", function() {
  •   var led = new five.Led(13);
  •   led.blink(500); // <= ??
  • });

deeper

  • setInterval(function() {
  •   this.toggle();
  • }.bind(this), rate);

deeper

  • setInterval(function() {
  •   this.toggle(); // <= ??
  • }.bind(this), rate);

deeper again

  • // turn on
  • this.value = 255;
  • this.write();
  • // turn off
  • this.value = 0;
  • this.write();

deeper again

  • // turn on
  • this.value = 255; // <= brightness
  • this.write();
  • // turn off
  • this.value = 0 // <= brightness;
  • this.write();

deeper again

  • // turn on
  • this.value = 255;
  • this.write(); // <= ??
  • // turn off
  • this.value = 0;
  • this.write(); // <= ??
illustration of an Arduino and laptop confused about how to speak to one another. The laptop has an awkward facial expression, and the Arduino is throwing its arms up in a confused manner
detailed illustration of an Uno edition of the Arduino
detailed illustration of an Uno edition of the Arduino with copper traces simulated from analog pins to atMega chip
detailed illustration of an Uno edition of the Arduino with copper traces simulated from analog pins to atMega chip and other pins circled
detailed illustration of an Uno edition of the Arduino with copper traces simulated from analog pins to atMega chip and digital pin 13 circled
detailed illustration of an Uno edition of the Arduino with digital pin 13 circled and atMega chip registers marked in yellow
detailed illustration of an Uno edition of the Arduino with digital pin 13 circled and atMega chip represented as an office with one door and a stone red roof

Down at the atMega328 building

Down at the atMega328 building

DDR : input or output?

PORT : write a value to a pin

PIN : read a value from a pin

office activity?

Q: how do they know to flip bits?

A: Firmata

deeper again

  • // turn on
  • this.value = 255;
  • this.write(); // <= ??
  • // turn off
  • this.value = 0;
  • this.write(); // <= ??
illustration of an Arduino and laptop confused about how to speak to one another. The laptop has an awkward facial expression, and the Arduino is throwing its arms up in a confused manner. The phone call between the crocodile and the cat previously is illustrated above the arduino.
illustration of an Arduino and laptop confused about how to speak to one another. The laptop has an awkward facial expression, and the Arduino is throwing its arms up in a confused manner. The phone call between the crocodile and the cat previously is illustrated above the arduino. An indentical crocodile is posed above the laptop now wth the letters 'JS' next to her.

firmata.js

  • // on
  • new Buffer([237,  127,  1])
  • // off
  • new Buffer([237,  0,  0])
illustration of an Arduino and laptop confused about how to speak to one another. The laptop has an awkward facial expression, and the Arduino is throwing its arms up in a confused manner. The phone call between the crocodile and the cat previously is illustrated above the arduino. An indentical crocodile is posed above the laptop now wth the letters 'JS' next to her.

lol

lol

lol

a scrappy illustration of an electric eel with 3 lightning bolts surrounding it.
illustration of an Arduino and laptop confused about how to speak to one another. The laptop has an awkward facial expression, and the Arduino is throwing its arms up in a confused manner. The phone call between the crocodile and the cat previously is illustrated above the arduino. An indentical crocodile is posed above the laptop now wth the letters 'JS' next to her.
illustration of an Arduino and laptop confused about how to speak to one another. The laptop has an awkward facial expression, and the Arduino is throwing its arms up in a confused manner. The phone call between the crocodile and the cat previously is illustrated above the arduino. An indentical crocodile is posed above the laptop now wth the letters 'JS' next to her. An eletric eel now appears between the arduino and the laptop.

node-serialport

  • // on
  • serialPort.write( new Buffer([237,  127,  1]) )
  • // off
  • serialPort.write( new Buffer([237,  0,  0]) )

hello world

illustration of an Arduino Uno with LED connected to pin 13, and blinking green
illustration of an Arduino and laptop confused about how to speak to one another. The laptop has an awkward facial expression, and the Arduino is throwing its arms up in a confused manner. The phone call between the crocodile and the cat previously is illustrated above the arduino. An indentical crocodile is posed above the laptop now wth the letters 'JS' next to her. An eletric eel now appears between the arduino and the laptop.

recap

illustration of a laptop on the left and arduino on the right. The laptop has 3 stacked bricks underneath labeled johnny-five, firmata.js, and node-serialport. The arduino has 3 stacked bricks underneath labeled firmata progran, arduino library and atMega328P.

whew

abstraction = good

developer empathy

library authors:
delight your users

library users:
don't ignore your node_modules

> ls node_modules

illustration of johnny-five the robot, a bellboy cat, nerdy crocodile with glasses, and an eletric eel looking a llittle concerned. 

> console.log('thank you');

← →