Pew Pew Laser Blog

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

CSS Conf AU 2015 - "Building Better Interfaces With SVG" Talk Notes.


A while ago, I promised to publish notes from Sara Soueidan's talk "Building Better Interfaces With SVG" at CSS Conf AU in Melbourne. Here they are:

Building Better Interfaces With SVG - Sara Soueidan

Here's the best news: All of the CSS CONF AU 2015 talks are now available on-line, including Sara's.

Doing Q&A Well.


As you may know, I'm not a fan of Question and Answer time following a conference talk. But with some deliberate preparation, there are techniques to improve the experience for everyone.

One large part of the problem is making the entire audience watch the questions of just a few attendees get answered. Instead of this, plan ahead and direct attendees to ask their questions via Twitter, IRC, index cards or the like.

From this pool of questions, you can have an emcee or organizer filter and then ask the most interesting ones. Of course, they could even seed with their own questions. If you have a single track conference, instead of doing this at the end of the talk, you could have all the speakers on a panel at the end of the day to answer questions.

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: