Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Blogs about code

Johnny-Five on tinylab.


I got my tinylab last week; it's a nifty little prototyping board with an Arduino Leonardo and a bunch of embedded components that was funded on IndieGoGo. So naturally I wanted to get Johnny-Five working and start fiddling with the tinylab as soon as possible. Unfortunately, it seems like the hardest part of every hardware project is the grand upgrading of the softwares that must proceed fiddling. Here's the process that worked for me.

  1. Re-install Node. My Node installation was a few versions old, and somehow npm was missing. So I went ahead and installed Node.js from I decided to live dangerously and install the "Current" version rather than the Stable one.
  2. Upgrade My Arduino install was older than the Leonardo, so I needed to upgrade it too. I got version 1.6.10 from
  3. Upgrade npm packages. npm outdated showed that several packages (including Johnny Five) were out of date. This required a few rounds of npm update.
  4. Write the Johnny Five code. I checked the excellent Johnny Five docs and wrote this code for the first LED on the tinylab.
    var five = require("johnny-five");
    var board = new five.Board();
    board.on("ready", function(){
      var led = new five.Led(13);
    This should make LED1 (on pin D13) pulse on an off. At first I tried using "D13" to address the LED (since that's what's silk-screened on the board) but it was just 13 that worked.


Here is some tinylab documentation that might come in handy next time:

Seven Things You Should Know About Flexbox.


Flexbox is a great CSS module for making clean and flexible layouts. But flexbox is a bit odd, it can be tricky to get the results you're looking for when you're just getting started. Here are some things you should know about flexbox:

  1. display: flex; goes on a parent element. Then all children of that element become flex items and will accept other flex properties.
  2. Don't use float or box-sizing: border-box; with flex elements. It won't work they way that you'd expect from display or inline elements.
  3. flex-direction defaults to row to lay flex elements out horizontally. Sometimes, you want column to lay elements out vertically instead.
  4. margin-[side]: auto; makes the margin use up all the available space on that side. If multiple margins (in the same dimension) are auto, they each take an even share of the available space
  5. flex-grow: defaults to 0; where elements won't grow beyond the content's width. You probably want flex-grow: 1. Among other things, this handy for making all input elements stretch to use up the remaining space:
  6. flex-wrap: defaults to nowrap, where all elements will be stuffed on a single line (or a single column, for flex-direction: column;). Alternately, you may want flex-wrap: wrap; to allow the elements to flow to multiple rows.
  7. Flexbox is well-supported in all recent versions of Firefox, Chrome, Safari, Chrome, Edge, mobile browsers, and even passably-well supported in IE. See

For more about flexbox, see:

Breakpoint Backgrounds Bookmarklet.


When working with media queries, I find it useful to set a page's background color to something to indicate the breakpoint change. But it gets tedious to set it in the browser development tools over and over again, so I figured I'd just handle it with a bookmarklet - a block of JavaScript that you can execute by using a bookmark in your browser.

Since this is just a debugging tool on a local machine, even the simplest methods will get the job done. The most interesting thing is the enclosing javascript:(function(){ and })(); - just javascript protocol which tells the browser to execute it, and wee little anonymous function to hold everything together. Inside that, I create a style tag, and populate it with new media queries and declarations: set the background color to magenta for roughly mobile width browsers, teal for tablets, and orange for widescreen. (I couldn't think of an alliterative color for "w", since I usually wanted to overrule a white background.) All of the styles have a !important to avoid worrying about specificity. Here's the whole thing:

  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = "@media only screen and (max-width: 800px) { body { background-color: teal !important; } }" +
    "@media only screen and (max-width: 540px) { body { background-color: magenta !important; } } " +
    "@media screen and (min-width:1300px) { body { background-color: orange !important; } }";

Just load this up inside the location field for a new bookmark, and run it whenever you want to add the colors. Feel free to change the breakpoints to something for your site. It's just CSS on the inside, so you might have to reset a few more colors or adjust the selectors for your site.

For more on bookmarklets, see Bookmarklets FTW The Case by Lydia Katsamberis from Cascadia JS 2014.

Colorblindness Simulation with JavaScript.


Around 4% of humans have some form of colorblindness. Since that's a significant portion of your web site traffic, it's probably worth doing some testing for how your site would look to those users. One way is the simulate.js from For each image in an array of images, this JavaScript adds a new canvas element with shifted colors. Below is an example usage for Deuteranope type vision. The script also includes functions for Protanope and Tritanope type vision.

var images = scope.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  Color.Vision.Simulate(images[i], {
    type: "Deuteranope",
    callback: function(canvas) {

Below is the script in action: the fruit bowl and rainbow images are shown normally, and below each is simulated with deuteranopia, protanopia finally tritanopia.

Alessi fruit bowl, filled by Dirk Ingo Franke / CC 1.0 Public Domain Rainbow from Budapest by Takkk / CC 3.0

The canvas element seems a tad unreliable - refresh the page once or twice to get the new images to load. It also can't be added when Codepen.

Vertical Centering is Solved.


Every once in a while, I see a passing reference to how impossible it is to center something vertically using CSS. But vertical centering isn't difficult, not anymore. Here are some methods for vertical centering using only CSS (even on elements of unknown height) which are completely feasible for most sites.


Flexbox makes it dead simple to vertically center an element. Assuming you've got a height (even in % or rems), just throw display: flex; on the outer element, and margin: auto; on the inner element. This uses the flexbox mode, which is pretty well supported as of IE11, Firefox 33, Chrome 11, iOS Safari 7.1, and Android Browser 4.4.


The 2D transforms offer wider browser support (adding IE9, IE10 and Android Browser 4.1+) and a slightly more complex implementation. Put any height and position: relative; on the outer element, and these specifications on the inner element. This still works when the inner element is using an unspecified (or auto) height. Example:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

In case you need even more options or details on these solutions, I've detailed more methods here on Codepen.

More blogs about code: