Pew Pew Laser Blog

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

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.

How I Got Started As A Developer.


I thought that I would share the story of how I "broke" into development. This was some number of years ago, and naturally what worked for me may not work for you.

Long long ago, I was working at a tech support call center. I had a headset, call routing system, and few internal web-based knowledgebases to search through for answers. This job suited me because I already had the secret pre-requisite amount of computer knowledge (having built machines for myself and others), and it was fairly high-paying work. As I earned experience in the job, other folks came to me for help with their calls. This got awkward when I was also on a call. So I re-purposed an extra computer under my neighbor's cubicle into an IIS intranet server to host a "for us, by us" kind of knowlegebase. I learned basic HTML and JavaScript; and the kind of CSS where you can change an <h1>'s color with inline style attributes!

After many years, the call center job was further outsourced to Canada. By this time, I had just completed an 2 year community college degree (and a 1 year certificate in "electronic commerce"), so I figured I was ready to pursue web developer as a career. This coursework had included an assignment to "make a website", so I took care of the whole gamut of webmaster duties for a friend. My unemployment benefits included community college tuition for retraining, which I used to take a whirlwind PHP / MySQL development class. Then I applied for local web development jobs. I'd also picked up a second "client" - a local non-profit organization which needed a webmaster to put their affairs in order and make occasional updates.

Six months later, my unemployment benefits had run out, and I wasn't working as a developer. Though I had built my very own PHP and duct-tape blog system. So I took another tech support job. This one was a the corporate headquarters for local video rental chain. (I told you this was a long time ago.) After several months of learning the business through tech support, one of the other groups at head quarters posted an opening for a web developer. They needed another developer to help build intranet reports for the retail store managers to detect theft. Since I had experience with the business and doing web development, I got that job and became a professional web developer. After a year or so doing that, I got another full-time development job, and that's what I've been doing ever since.

Other Skills.


Everyone has some skills beyond those that go on your resume. Here are some of mine:

Live Coding.


Live coding can be a tempting way to fill up time when you're speaking on stage. But it is very well done, live coding is one of the most painful things you can put your audience through. Doing live coding well probably takes more preparation and practice than writing your slides.

However, if you must code live, here are some tips to make things a little smoother:

3D Printer Notes.


I used to be a member at a local maker space (it's since closed) where they had certification classes for their 3D printers. Here are the notes I took during that class, and while working with the printer a half dozen times or so. The shop had MakerBot Replicator2s, and so your mileage may vary for other 3D printers.

The MakerBot Replicator2 uses fused filament or PLA type material. A "voxel" is a 3D pixel; .04mm for this machine. It will overcome a 45° overhang of empty space. The base material is food-safe, but printed things can't be food-safe because they're so porous that they can't reliably be cleaned. You can paint or finish printed things.

Set up:

From the Repbot's menu, choose Utilities, then Level.

  1. Pull out the .09 fin from the level gauge.
  2. Slide the gauge between the Repbot's nozzle and the build plate. Adjust the plate up or down using the screws underneath the plate (directly below the nozzle) until the level slides between nozzle and plate with just a wee bit of friction. The screws release tension on the page; less tension means the plate moves up.
  3. Push Repbot's M button to advance to the next point. Repeat above 2 more times.

It's OK to just set the first 3 points, and then skip the rest of the set-up.


Makerware on the host computer can import .stl or .obj file formats. You can also use an SD card directly in the Repbot.

  1. Choose File > Make it
    • Choose Low, Standard or High. (Higher resolution is slower.)
    • Check or uncheck Rafts (physical "helper" structures that help the printer overcome physical overhangs) and Supports (scaffolding for negative space. These scaffolds are meant to be removed from the item after it's printed.
  2. Check Preview before printing. The preview will show you how long the print will take.
  3. Make It!
  4. In Quality, set the Infill and Number of Shells.

Useful Commands

To customize the infill pattern for your print: Try catfill!


Export: gcode, slices only. In Makerware, File > Make from File. Or just bring it into Makerware.


Other related software:

Where Ideas Come From.


When a writer is asked "where do you get your ideas?", they might answer "Poughkeepsie" flippantly. I've done some speaking over the past year, and I thought that aspiring speakers might be interested in knowing exactly where I got my ideas for talks.

A month or 2 after I'd gotten my Sparkfun Inventor's Kit, I was talking with a non-developer friend who asked how long it took me to get set up. "A few hours", I said, "But now that I've done it, I could probably get someone running in about an hour." At the time, I thought "Is this a good talk idea" about pretty much everything, but it seemed like "From 0 to Nodebots" was a pretty good title. I could share what I had learned in these first stages, and give them a road map to fun with hardware. I gave a 25 minute version of this talk at Seattle JS (my local JS meetup) a few months later, and a 45 minute version at Nodevember 2014 a few months after that.

"Color in the Real World" came from a different place altogether. As I got more and more into blowing glass, I realized that my complete lack of drawing abilities hampered my ability to take "notes" for such a visual medium. I picked up Art Academy - a handheld video "game" that will teach players how to draw. I worked though the lessons from time to time, practicing sketching and learn some interesting things art history and color theory. As I learned about highlight coloring and atmospheric perspective I thought, "these ideas definitely apply on our modern screens". I gave a 15 minute version of this talk at SassConf 2014, and an expanded 30 minute version at CSS Conf AU 2015 just last March.

If you are looking for speaking ideas, try thinking about what you chat about when you talk with your friends and colleagues after work. When you get excited and passionate about something, or you see folks lean forward and nod when you're talking, that's something you should consider speaking about.

Building Community.


Here is a collection of thoughts and resources for building your local technology / development community.

Organizing Conferences & User Groups

Building an online community