Pew Pew Laser Blog

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

Past Blogs

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 headquarters 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:

Last Month

Next Month