Pew Pew Laser Blog

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

Blogs about javascript

Breakpoint Backgrounds Bookmarklet.

7.29.2015

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:

javascript:(function(){
  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; } }";
  document.body.appendChild(css);
})();

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.

3.7.2015

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 http://mudcu.be/labs/. 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) {
      document.getElementById("lid_623").appendChild(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 http://commons.wikimedia.org/wiki/File%3AFruit_basket_alessi.JPG Rainbow from Budapest by Takkk / CC 3.0 http://commons.wikimedia.org/wiki/File:Rainbow_in_Budapest.jpg

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.

Nodevember 2014.

11.18.2014

I was a selected speaker at this year's inaugural Nodevemer in Nashville last weekend. (You can view my talk "0 to Nodebots in 45 Minutes" at https://www.youtube.com/watch?v=TFUSHrn8jPw; here are the related links: http://katiek2.github.io/0-to-nodebots-links/.) I was also able to attend some really great talks:

The Shoulders of Giants (Opening Keynote) - Eliza Brock

Gonzo Game Dev - Earle Castledine

Make Art Not Apps - John Brown

Open Sourcing Mental Illness - Ed Finkler

Build Your Own #bada55 NodeJS Development Environment - Derick Bailey

Growing Up JavaScript (Closing Keynote) - Jason Orendorff

There were other talks that I wasn't able to go to, which I heard were really good. Fortunately, all of the talks were recorded, so I can check them out when I have time:

CascadiaJS 2014 Talk Notes.

8.27.2014

This year's CascadiaJS was in Portland. The weather was unusually hot, but it was a great conference!

Technology as a Means to Equality - Willow Brugh

Everything you never wanted to know about maps - Patrick Arlt

Contributors wanted: encouraging diversity in your open source project - Kate Hudson

How To Run A Successful Local User Group - Jason Campbell

GIFs vs Web Components - Glen Maddern

Decisions, Open Source, Graph Theory, and Static Analysis - Charlie Robbins

ReInventing the Wheel (The Magic of Custom Event Emitters) - Nick Niemeir

Your Website is Not Accessible - Alex Qin

Bookmarklets FTW: The Case for Bookmarklets in Everyday Life - Lydia Katsamberis

Practical Optimization for v8 (is it okay to write JavaScript yet?) - David Manning

Writing Robot Plays: NodeJS, Reddit, and The Aesthetics of Unwitting Participation - Joe Lepper

Embracing Failure - Soledad Penadés

Cat-DNS: a DNS server that resolves everything to cats - Monica Dinculescu

ARIA Was Made For This: Accessibility of JavaScript MVCs - Marcy Sutton

Constantly Losing Stuff: Lessons learned developing and using continuation-local-storage in Node - Forrest Norvell

AllNightRave.js - Floh Herra-Vega

Making JavaScript Tests Fast, Easy, and Friendly - Ryan Roemer

Barriers to Entry - Ruth Baril

Hash Functions Taste Great with Anything - Curtis Lassam

Node.js for fun, profit and Whiskey - Jim Heising

Hacking Mentor.js - Marlena Compton & Ryan Dy

Put A Database On It! - Bryce Baril

A Story About NodeSchool and Community Building - Jason Rhodes

No More Unicorns - CJ Silverio

Notes - Intro to Node.

5.14.2014

Several months ago I went to a 3 hour Intro to Node.js workshop through Meetup by Ryan Eastridge of Formidable Labs. Here are the notes I took. Beware - without Ryan's walk-though, some of the stuff here doesn't make much sense.

Node's strength is asynchronicity - there is no halt while waiting for a response.

$ node [filename]    #execute that file
$ localhost:8000     #from NOT Node console
var fs=require("fs");
fs.writeFileSync("hw.txt", "Hello World");
#Possible, but use async and callbacks.

Modules installed during workshop: Express, Request, Cheerio. Other useful modules: easyxdm, socket.io, simonl. Also github.com/caolan/async; to avoid callback hell - set up in series.

Shouter: process.stdin.resume(); #Don't exit, wait for input

More blogs about javascript: