Pew Pew Laser Blog http://www.pewpewlaser.com/ Hand forged code from Seattle, Washington. Gaming - analog and digital. Glass artistry. Baking. And a few pictures of cats. en-us Pew Pew Laser Blog http://www.pewpewlaser.com/images/icons/ray-gun.png http://www.pewpewlaser.com/ Keyboard Shortcuts for Web Dev Tools Inspector and Console. http://www.pewpewlaser.com/blogs/679 http://www.pewpewlaser.com/blogs/679 Thu, 07 Dec 2017 00:00:00 PST Sometimes, right clicking on something in a browser and picking "Inspect" from the context menu just isn't fast enough for me. I wanted to find a way to quickly open the Inspector and Console tabs in a browser's web developer tools, so naturally I turned to keyboard shortcuts. I've compiled a reference of the commands for Firefox and Chrome here.

Firefox:

  • Inspector: Ctrl Shift c (Cmd Option c on OSX)
  • Console: Ctrl Shift k (Cmd Option k on OSX)

Even better, the Web Dev tools will open up - with the last active tab - when you hit your F12 key. (In OSX, use fn F12 if you haven't enabled the "Use all F1, F2, etc keys as standard function keys" Keyboard Preference.)

Chrome:

  • Inspector: Chrome doesn't have a keyboard shortcut specific to "Elements" (Inspector), but Ctrl Shift i (Cmd Option i on OSX) will open the most recently used tab, just like F12.
  • Console: Ctrl Shift j (Cmd Option j on OSX)
]]>
Katie Kurkoski
The <code>DL</code> Element. http://www.pewpewlaser.com/blogs/678 http://www.pewpewlaser.com/blogs/678 Tue, 14 Nov 2017 00:00:00 PST At a conference earlier this year, I was asked what my favorite HTML element was. In fact, I do have one: the Definition List, along with its children Definition Term and Definition Description. The definition list is great because it provides an inherent semantic relationship between two elements - the term and the one or more descriptions. I feel like these elements are under-used; especially considering that they've been around since HTML 4.01.

I was going to invent a clever example to demonstrate the definition list, but I don't think I can do any better than the one provided by the Mozilla Developer Network:

Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).

Here is the source code for that:

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long). </dd>
</dl>

This shows one term (Firefox) along with two definitions of that term. Because it's a list, you can add as many groups of terms and definitions as needed for your content.

]]>
Katie Kurkoski
Virtual Reality. http://www.pewpewlaser.com/blogs/677 http://www.pewpewlaser.com/blogs/677 Mon, 23 Oct 2017 00:00:00 PDT An attendee tests VR goggles at JSConf Last Call Folks love to post pictures of people using virtual reality (VR) googles, because everyone just looks so darn goofy with the headset on. But virtual reality really does have legs. In the past couple years, I've seen some truly convincing VR demos, and run across amazing uses for VR. (Photo by Matthew Bergman from JSConf Last Call; CC BY-NC-ND 2.0.)

This year, 3 friends and I played a demo of Marvel Powers United VR on 4 fully loaded Oculus setups with motion sensitive headsets and hand-held controllers. A single set of this gear costs multiple hundreds of dollars. When my system booted up, I was The Hulk - I was taller than everyone, my strides consumed feet like they were inches, and I could grab puny humans by their baseball-size skulls. It was unbelievably immersive; my brain easily believed in this new reality. I only experienced a little motion sickness; see (this for more on gender and VR motion sickness).

With any one of a number of electronic headsets and their companion apps, you can record and view panoramic or even 720° photos (some with even ambient sound). You can then view these high-resolution photos on the headset where moving your head moves the view of the photo. I've had demos of this too, and they're also very immersive. Can you imagine immersing your family in your vacation photos like this? Or remember that folks with disabilities are often technology's earliest adopters - virtual environments like this would be huge for those with severe anxiety or people who have trouble traveling.

Think about watching your favorite sports team; with 3D sound and picture captured right on the sidelines? Beyond games and entertainment, the universal on-line educational system of "Ready Player One" seems tantalizingly close. If you ever get a chance to try out some of this technology, I highly recommend checking it out.

There are more utilitarian ways to utilize VR. Google offers Cardboard, a $15 set of "glasses" that you insert your smartphone into. As just one example of apps for Cardboard, here is one which simulates a conference stage, so that you can practice your public speaking.

If you're a developer, this is a great time to start working with VR technologies. A great place to start is Shagufta Gurmukhdas's SeattleJS Conf 2017 talk about VR and Mozilla's A-Frame.

]]>
Katie Kurkoski
OSX Screenshots. http://www.pewpewlaser.com/blogs/676 http://www.pewpewlaser.com/blogs/676 Sat, 30 Sep 2017 00:00:00 PDT In Windows, I use either the PrintScreen key or the Snip program for screenshots. But I can never remember the keyboard commands for screenshots in OSX, so here is a quick reference:

  • Shift Command 3: Capture the whole screen.
  • Shift Command 4: Use crosshairs to select an area to capture.

Both of the above methods will save the screenshot on your Desktop.

If I'm working in Firefox, I just use the built-in screenshot tools in Firefox too. (The files are saved in Downloads.)

]]>
Katie Kurkoski
Spinning Up a New GitHub Pages Site. http://www.pewpewlaser.com/blogs/675 http://www.pewpewlaser.com/blogs/675 Mon, 11 Sep 2017 00:00:00 PDT Pages might just be one of my favorite things about GitHub. Though I often use them for lists of links to go along with my presentations, they are capable of much more complex static sites.

Here is a quick reminder of how to set up a new GitHub Pages site:

  1. Create a new repo on GitHub.
  2. Don't create any new files yet, even licenses or readmes. If you have already created files, then stash them.
  3. Clone that repo locally and check out a new gh-pages branch (git checkout -b gh-pages).
  4. Pop any files you've stashed. Add any other files you want in your repo.
  5. Commit the changes, and then push the gh-pages branch up to Github.

You're done! You can now view your new page at https://[your-user-name].github.io/[your-repo-name]/.

If you have somehow ended up with a master branch with commits, you can remove it thusly:

  • On the GitHub site, make the gh-pages branch the default.
  • Delete the master branch both on the GitHub site and locally.
]]>
Katie Kurkoski
Free Images. http://www.pewpewlaser.com/blogs/674 http://www.pewpewlaser.com/blogs/674 Tue, 22 Aug 2017 00:00:00 PDT Here are some sources for free images that you can use for your website, presentation, art project or whatever.

There are also companies which will give you free photos or credits on your first sign-up or periodically: iStock, Adobe Stock (fotolia), Shutterstock and Creative Market. And both Google and Flickr will let you search for CC licensed photos.

]]>
Katie Kurkoski
tinylab Flashlight. http://www.pewpewlaser.com/blogs/673 http://www.pewpewlaser.com/blogs/673 Wed, 02 Aug 2017 00:00:00 PDT Photograph of a tinylab - an all-in-one arduino-compatible prototyping board. I've been fiddling around with my tinylab - an all-in-one prototyping board with an embedded Leonardo and a fair selection of components. I'd already got it working with Node and Johnny-Five. Next I wanted to do something which demonstrated interaction between the software and some real-world conditions.

Note that my tinylab (perhaps because it's an early crowd-funded version) doesn't have the breadboard shown in the current production versions of the tinylab. No worries - a mini breadboard (without the connector tabs) fits in there perfectly.

I made a "flashlight" - where an LED gets brighter when the hardware detects less ambient light. Since all the components on the tinylab are already built in, I didn't have to do any wiring. It's pretty easy to test by covering the photoresistor with your finger. Here is the code:

var five = require("johnny-five"), board, photoresistor;
var board = new five.Board();

board.on("ready", function(){

  var led1 = new five.Led(10);

  photoresistor = new five.Sensor({
    pin: "A2",
    freq: 500 // Data is polled every half second
  });

  maxLight = 750 // Set this to the "high" value of light in your room.
  minLight = 250 // Set this to the "low" value of light in your room.
  lightRange = (maxLight - minLight) // Will change for different rooms.

  photoresistor.on("data", function() {

    currentLight = this.value;
    ledValue = (((currentLight - minLight) * 255) / lightRange); 
    ledValue = Math.max(ledValue, 0);  
    ledValue = Math.min(ledValue, 255);

    console.log("Photosensor: " + this.value + "     ledValue: " + ledValue); 
    led1.fade(ledValue, 500); // Smooth transition of LED brightness

  });

});

You'll need to set the maxLight and minLight values for your environment.

With this experiment, you now have a way to read a value from your environment, report it to a computer, and act on it.

]]>
Katie Kurkoski
Subscriptions. http://www.pewpewlaser.com/blogs/672 http://www.pewpewlaser.com/blogs/672 Thu, 13 Jul 2017 00:00:00 PDT I recently bought digital subscriptions to some "newspapers" (Seattle Times, NYT, WaPo) because I believe that creators should be paid for their work, that the news media is important in these political times, and because I wanted to move the motivation equation away from "ads and eyeballs". But I'm kinda disappointed at the less-than-premium treatment of paid subscribers by these organizations. Here are some examples of what I do not want:

  • Automatically signed up to daily news and marketing emails. No, I don't want more email - that's pretty much the last thing I want.
  • Automatically renewed subscriptions. No, I'll pay again next year if I want to
  • Repeated modals asking me to sign up for the email newsletter. No! See first item in list
  • Terms of service which allow you call me on the telephone. No
  • Ads and trackers - no matter if in a website or an app. No - by paying you, I shouldn't have to deal with these. You don't get to monetize me twice
  • Paper. I really don't need more material to recycle.
]]>
Katie Kurkoski
Common Resume Feedback. http://www.pewpewlaser.com/blogs/671 http://www.pewpewlaser.com/blogs/671 Fri, 23 Jun 2017 00:00:00 PDT A resume is a marketing document. Its job is to get you a phone screen or interview. During that interview, the resume can guide the conversation. Each bullet point should be able to start a story which demonstrates the specific ways in which you are awesome.

When I was unemployed a number of years ago, I learned a lot about resume writing from books, articles, and especially the career counselor that I saw. Because of this, I've offered to review friends' resumes. After a few rounds of this, I've put together the common pieces of feedback that I've shared:

  • Instead of listing technical skills, acronyms and tools in bullet points or a keywords section at the bottom of the resume, include that thing within context of a position. This is a much stronger way to demonstrate your abilities. Something like these, for example:
    • Wrote JavaScript plug-ins to extend reporting functionality in Taleo.
    • Used Unix shell commands and bash scripts to concatenate complex reporting data
    • Developed VB scripts to automate tedious Excel data transformations.
    This method also gives you the opportunity to demonstrate what business problem you solved. (A job is all about solving the business' problem.)
  • Always send a .pdf resume. It will be most consistent visually, and a shady recruiter won't be able to swap their own contact information in place of yours like they can on a Word doc. Name the file "Your Name Resume.pdf" so that it's easy for the recruiter to find.
  • School, military, and even minimum-wage work can belong on resumes when it demonstrates experience related to the position you're applying for. Be specific about what the school projects encompassed, and if it's really old you can remove the dates. Leadership, troubleshooting and mentoring are always valuable.
  • Instead of listing your address, list just the city and state that you're seeking work in. Recruiters might judge your neighborhood and / or commute negatively.
  • Your most recent work will tend to be the most important, yet least fleshed out. A good source of material for these can be looking through your annual reviews, or coffee with coworkers.
  • Your resume can be one, or more commonly, two pages. Keep it to under two unless you're sure that they're looking for more.
  • Always have someone else review your resume for typos.
]]>
Katie Kurkoski
Orphans and Widows in Wider CSS Contexts. http://www.pewpewlaser.com/blogs/670 http://www.pewpewlaser.com/blogs/670 Tue, 06 Jun 2017 00:00:00 PDT Currently, orphans and widows aren't supported unless you're working inside paged media or columns. Phooey on that - I've got a few use cases where it would be nice to use it in other contexts.

Multiline Headline.

Here is a multiline headline inside an element whose width leaves just one word on the bottom line: Screenshot of a multiline headline in a width that leaves one word on the bottom line. See a demo. It would be nice if a declaration of orphans: 4; on the headline caused the browser to reflow the text so that 4 was the minimum number of words remaining in the bottom line of the paragraph.

Flexbox.

Here is a group of images arranged with flexbox, and just one lonely element stretched at the bottom of the group: Screenshot of images arranged with flexbox, with one element stretched at the bottom of the group. See a demo. It would be nice if a declaration of orphans: 2; on the flexboxed element caused the browser to try its best to arrange the child elements so that 2 was the fewest number of children at the bottom row.

]]>
Katie Kurkoski