Pew Pew Laser Blog Hand forged code from Seattle, Washington. Gaming - analog and digital. Glass artistry. Baking. And a few pictures of cats. en-us Pew Pew Laser Blog tinylab Flashlight. Wed, 02 Aug 2017 00:00:00 PDT Photograph of a tinylab - an all-in-one arduino-compatible prototyping board. I've been fiddling around with my tinylab - an all-in-one prototyping board with an embedded Leonardo and a fair selection of components. I'd already got it working with Node and Johnny-Five. Next I wanted to do something which demonstrated interaction between the software and some real-world conditions.

Note that my tinylab (perhaps because it's an early crowd-funded version) doesn't have the breadboard shown in the current production versions of the tinylab. No worries - a mini breadboard (without the connector tabs) fits in there perfectly.

I made a "flashlight" - where an LED gets brighter when the hardware detects less ambient light. Since all the components on the tinylab are already built in, I didn't have to do any wiring. It's pretty easy to test by covering the photoresistor with your finger. Here is the code:

var five = require("johnny-five"), board, photoresistor;
var board = new five.Board();

board.on("ready", function(){

  var led1 = new five.Led(10);

  photoresistor = new five.Sensor({
    pin: "A2",
    freq: 500 // Data is polled every half second

  maxLight = 750 // Set this to the "high" value of light in your room.
  minLight = 250 // Set this to the "low" value of light in your room.
  lightRange = (maxLight - minLight) // Will change for different rooms.

  photoresistor.on("data", function() {

    currentLight = this.value;
    ledValue = (((currentLight - minLight) * 255) / lightRange); 
    ledValue = Math.max(ledValue, 0);  
    ledValue = Math.min(ledValue, 255);

    console.log("Photosensor: " + this.value + "     ledValue: " + ledValue); 
    led1.fade(ledValue, 500); // Smooth transition of LED brightness



You'll need to set the maxLight and minLight values for your environment.

With this experiment, you now have a way to read a value from your environment, report it to a computer, and act on it.

Katie Kurkoski
Subscriptions. Thu, 13 Jul 2017 00:00:00 PDT I recently bought digital subscriptions to some "newspapers" (Seattle Times, NYT, WaPo) because I believe that creators should be paid for their work, that the news media is important in these political times, and because I wanted to move the motivation equation away from "ads and eyeballs". But I'm kinda disappointed at the less-than-premium treatment of paid subscribers by these organizations. Here are some examples of what I do not want:

  • Automatically signed up to daily news and marketing emails. No, I don't want more email - that's pretty much the last thing I want.
  • Automatically renewed subscriptions. No, I'll pay again next year if I want to
  • Repeated modals asking me to sign up for the email newsletter. No! See first item in list
  • Terms of service which allow you call me on the telephone. No
  • Ads and trackers - no matter if in a website or an app. No - by paying you, I shouldn't have to deal with these. You don't get to monetize me twice
  • Paper. I really don't need more material to recycle.
Katie Kurkoski
Common Resume Feedback. Fri, 23 Jun 2017 00:00:00 PDT A resume is a marketing document. Its job is to get you a phone screen or interview. During that interview, the resume can guide the conversation. Each bullet point should be able to start a story which demonstrates the specific ways in which you are awesome.

When I was unemployed a number of years ago, I learned a lot about resume writing from books, articles, and especially the career counselor that I saw. Because of this, I've offered to review friends' resumes. After a few rounds of this, I've put together the common pieces of feedback that I've shared:

  • Instead of listing technical skills, acronyms and tools in bullet points or a keywords section at the bottom of the resume, include that thing within context of a position. This is a much stronger way to demonstrate your abilities. Something like these, for example:
    • Wrote JavaScript plug-ins to extend reporting functionality in Taleo.
    • Used Unix shell commands and bash scripts to concatenate complex reporting data
    • Developed VB scripts to automate tedious Excel data transformations.
    This method also gives you the opportunity to demonstrate what business problem you solved. (A job is all about solving the business' problem.)
  • Always send a .pdf resume. It will be most consistent visually, and a shady recruiter won't be able to swap their own contact information in place of yours like they can on a Word doc. Name the file "Your Name Resume.pdf" so that it's easy for the recruiter to find.
  • School, military, and even minimum-wage work can belong on resumes when it demonstrates experience related to the position you're applying for. Be specific about what the school projects encompassed, and if it's really old you can remove the dates. Leadership, troubleshooting and mentoring are always valuable.
  • Instead of listing your address, list just the city and state that you're seeking work in. Recruiters might judge your neighborhood and / or commute negatively.
  • Your most recent work will tend to be the most important, yet least fleshed out. A good source of material for these can be looking through your annual reviews, or coffee with coworkers.
  • Your resume can be one, or more commonly, two pages. Keep it to under two unless you're sure that they're looking for more.
  • Always have someone else review your resume for typos.
Katie Kurkoski
Orphans and Widows in Wider CSS Contexts. Tue, 06 Jun 2017 00:00:00 PDT Currently, orphans and widows aren't supported unless you're working inside paged media or columns. Phooey on that - I've got a few use cases where it would be nice to use it in other contexts.

Multiline Headline.

Here is a multiline headline inside an element whose width leaves just one word on the bottom line: Screenshot of a multiline headline in a width that leaves one word on the bottom line. See a demo. It would be nice if a declaration of orphans: 4; on the headline caused the browser to reflow the text so that 4 was the minimum number of words remaining in the bottom line of the paragraph.


Here is a group of images arranged with flexbox, and just one lonely element stretched at the bottom of the group: Screenshot of images arranged with flexbox, with one element stretched at the bottom of the group. See a demo. It would be nice if a declaration of orphans: 2; on the flexboxed element caused the browser to try its best to arrange the child elements so that 2 was the fewest number of children at the bottom row.

Katie Kurkoski
Advice for Speaking. Tue, 16 May 2017 00:00:00 PDT Here is a collection of some of the best pieces of advice for speaking at a conference that I've given and received over the last year:

  • You know how incredibly nervous you (probably) get before speaking? Call those feelings "excitement" instead. You probably are excited, and it's a positive emotion.
  • Practice your talk in front of people. (I've said this before, because it's so important.) You don't want the conference attendees to see the first (bad) version of your talk; you want them to see the revised version. And you'll get an idea of the timing of your talk that you just can't get by reading the talk to yourself.
  • Always do a tech check on stage before your speech. Head in up to the stage or your room before breakfast is over or even during lunch, and hook up to the projector. Take a quiet moment now to get your bearings on stage - check out the podium and the timer. Do a power pose and assure yourself that you own the stage.
  • You test your slides at the venue's projector resolution using Firefox's Responsive Design View.

Here are some HTML-based slideshows frameworks that you can use:

More advice:

Katie Kurkoski
Jim's Artichoke Spinach Dip. Tue, 25 Apr 2017 00:00:00 PDT Artichoke spinach dip in a casserole dish I've got a friend named Jim who is pretty skilled in the kitchen. I've stolen and modified this recipe for artichoke spinach dip from him; it's a creamy warm dip which I often make when hosting friends for the yearly gluttony and football game extravaganza. Reminder to self - many of the ingredients can be bought at Trader Joe's.

Katie Kurkoski
The STEMTera Breadboard and Johnny-Five's <code>five.Leds</code>. Fri, 07 Apr 2017 00:00:00 PDT The STEMTera Breadboard is a nifty combination Ardunio (Uno R3) / breadboard. It has a Lego-compatible backside and it's available in black, white, and pink. When I got mine, of course the first thing I did was get it set up to run with Johnny Five. The StemTERA breadboard with some resistors and LEDs installed.

Basic Functionality / Hello world

Making an LED blink is the Hello world! of hardware. It's common to just use an Arduino's onboard LED on pin 13. Here's what you do to get up and running from scratch:

  • Make sure Node, npm, Johnny-Five, and the Arduino app are all installed and updated.
  • Connect the StemTera breadboard to your computer.

    Protip: Be sure to use a USB mini cable that supports both charging and data transfer. I've been fooled more than once by a charging-only cable. When I tried using a charging-only cable to flash the Arduino, I'd see the "On" LED turn on, but the Arduino app didn't report the device on any port. I've since purged my supplies of any charging-only cables, hopefully.

  • In the Arduino application, from the Tools menu, select Port and set it to whatever is newest (something like /dev/cu.usbmodem1441); the Arduino app should detect the port that your breadboard is connected to. Then from the Tools menu, set the Board to Arduino/Genuino Uno. Then from the File menu, choose Examples, then Firmata, and finally Standard Firmata. Then from the File menu, choose Upload. When the upload is successful, you can close the Arduino app.
  • Open up your terminal / command line and create a new file called blink.js. Navigate to this file's location. Put this code in the file and then save it:
    var five = require("johnny-five");
    var board = new five.Board();
    board.on("ready", function() {
      led = new five.Led(13);
      led.strobe( 1000 );
      this.repl.inject({ // make led available as "led" in REPL
        led: led
  • From the command line, type node blink.js and then hit enter or return.
  • Your onboard LED should start blinking on and off every second - yay!
  • In the new prompt from Node (called the REPL), you can interact with the board's LED. Try any one of these:
    • led.stop();: The LED will stop what it's doing, and stay at it's current state.
    • led.strobe(3000);: The LED will blink on and off every 3 seconds. You can change the 3000 to the number of milliseconds you want the LED to blink at.
    • led.on();

Red and Green LEDs

Fritzing diagram of StemTERA breadboard with LEDs and resistors installed. Now let's add external LEDs (and protective resistors of course). Build your circuit as shown here, using 2 330? resistors, two 3mm LEDs, and two jumper wires. This is the magic of the StemTERA breadboard - the circuit doesn't need to hop back and forth between the breadboard and the external Arduino.

Here's the code - store it in a file and run it as with the first block of code.

var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

  // We can address them separately, or together in leds
  var red = new five.Led(6);
  var green = new five.Led(5);
  var leds = new five.Leds([red, green]);;

    leds: leds
    // leds.stop() // Stop the strobing
    // // Turn them both off
    // leds.stop().off(); // Combine!


You should see the red and green LEDs alternating between on and off every second, and only one of the LEDs will be on at a time.

The interesting thing about this code is that it uses the Leds class - which allows us to control all the LEDs at the same time. At first, the green LED is off, and the red one is on. Then we blink the leds class; flipping the on/off state of each LED at the same time. You could use this to easily control many more LEDs.

Katie Kurkoski
Things that Matter To Me As a Speaker. Mon, 20 Mar 2017 00:00:00 PDT Beyond the basics such as an enforced code of conduct and covered travel and lodging, there are a few things that I really appreciate as a speaker:

  • Speaker dinner / lunch / hangout time. Getting a chance to talk to other speakers in a non-public situation is great for conquering my imposter syndrome. Even if they're super famous, we're still sharing food and I can get a chance to connect as peers.
  • Recommended lodging. I've already got to write a speech - do I really have to track down the best hotel too? Having the majority of the conf stay at the same venue can lead to powerful chance meetings between attendees.
  • Video of speech. This is such a great artifact for a speaker to have. This can be a powerful tool for finding the next speaking opportunity.
Katie Kurkoski
Sublime Text ColorHighlighter Tips. Fri, 24 Feb 2017 00:00:00 PST Sreenshot demonstrating ColorHighlighter for Sublime Text ColorHighlighter is a pretty nifty package for Sublime Text which can display the color of CSS colors values right in the text editor. Here are a few usage and configuration tips if you want to use it yourself.

  • There are two different settings for how to display the colors:
    • ha_style: The style at any time.
    • style: The style when that text has focus (line 7 in the image above).
    Here's an example of the ColorHighlighter.sublime-settings file which results in the image above:
      "ha_style": "underlined_solid",
      "style": "filled"
  • You can convert colors to different formats such as rgba, with "Convert Color" from the context menu. Enter sharp6 for old-fashioned hex colors. This is quite useful for converting CSS named colors.
  • You can open your operating system's color picker with "Choose Color" from the context menu.
  • Dashes in the names of variables for colors produce weird results.
  • For the colored circles in the gutter, ImageMagick needs to be installed.
Katie Kurkoski
Print vs. Online Products. Thu, 02 Feb 2017 00:00:00 PST Let us take a little time to compare and contrast printed products with their online counterparts - such as a printed newspaper and the same newspaper's website.

The printed version is tangible and tactile. Once printed, it can't be revised by the creator, though the user can make notes on the paper. Since it's a tangle product, the user must find a way to dispose of the used product; which may be repurposed as combustion or packing material. Each newspaper will probably only be used by one or two users.

The online version is interactive: searchable and sharable. It is easily updated. The website is much more likely to be seen by users outside of the physical area of the newspaper. Many users will use the same "version" of the paper, which can generate comments and discussions.

These are completely different products, even though they share the same content.

Katie Kurkoski