Web Tools Weekly Issue #58 (mouseEvent, Media, GitHub/CLI, Productivity)

Issue #58 (mouseEvent, Media, GitHub/CLI, Productivity)08/28/14

As discussed in a previous tip, when you create an instance of a mouse event, there are a number of properties you can read. For example:

var btn = document.querySelector('button'),
    op = document.querySelectorAll('output');

btn.addEventListener('mousedown', function (e) {
  op[0].innerHTML = '<p><b>ALT key:</b> ' + e.altKey + '</p>';
  op[1].innerHTML = '<p><b>CTRL Key:</b> ' + e.ctrlKey + '</p>';
  op[2].innerHTML = '<p><b>SHIFT Key:</b> ' + e.shiftKey + '</p>';
  op[3].innerHTML = '<p><b>Which button:</b> ' + e.button + '</p>';
}, false);

(Try on JS Bin)

Here I'm checking to see if the ALT, CTRL, or SHIFT key was pressed while the mouse event fired. Click the button using any mouse button (left, right, or middle) and look at the result output. Try holding down the CTRL, ALT, or SHIFT key, or a combination of them to see the output change.

The results are displayed by accessing the various properties on the mouse event instance (e.altKey, e.ctrlKey, etc). I'm also displaying which mouse button was pressed (identified by a number).

MDN has a full list of the readable properties for mouse events. You can also use click, dblclick, mouseup, and others, if they are applicable to what you're trying to read.

Now on to this week's tools!

Support Web Tools Weekly: 384 pages of CSS for $7

Multimedia Tools

HueWheel
"An HSL/HSV HTML5 color wheel control. Supports HSL/HSV <-> RGB values with many options for appearance and functionality. The control can be controlled with both mouse and touch/pen."

JSCapture
Uses an experimental API (Chrome only) to capture or record your desktop with just JavaScript.

Loopalo
A GUI pattern creation tool to create snake-like looping patterns that can be exported as SVG.

PrettyEmbed.js
"Prettier embeds for your YouTubes -- with nice options like high-res preview images, advanced customization of embed options, and optional FitVids support."

ikuno
"A simple, Grunt image and SVG optimiser."

WURFL Image Tailor
"WURFL will detect the device, and its screen size, resize and optimize the image accordingly."

<voice-elements>
"A couple of Web Components that can do amazing stuff using the Web Speech API."

<x-gif>
"A web component for flexible GIF playback. Speed them up, slow them down, play them in reverse, synch multiple beats to a rhythm, synch them to audio, whatever you like."

VLEX
An attempt to overcome the problem of trying to include layouts inside of SVG graphics.

Filterous
"Instagram-like photo manipulation library in JavaScript."

Recordit
Native Mac or Windows app for fast screencast creation with GIF and Twitter support.

Git, GitHub, and Command Line Tools

jq
"A lightweight and flexible command-line JSON processor."

Babun
"A linux-like console on a Windows host."

HuBoard
"Built from the ground up using the GitHub public API. HuBoard issues are GitHub issues, you will never have to deal with synchronization problems. Keep issues where they belong, in the repository with your code."

Tower
"Version control with Git - made easy. In a beautiful, efficient, and powerful app." Now at version 2, only for Mac.

jrnl
"Collect your thoughts and notes without leaving the command line."

GitHub Tab Size
A Chrome extension to make tab indented code more readable by forcing the tab size to 4 instead of 8.

Waffle.io
"Work Better on GitHub Issues. Waffle creates a full project management solution from your existing GitHub Issues."

KeyBox
"A web-based SSH console that executes commands on multiple shells. KeyBox allows you to manage keys, share terminal commands, and upload files to multiple systems simultaneously."

Sup
"A console-based email client for people with a lot of email."

jsfmt
"For formatting, searching, and rewriting JavaScript. Analogous to gofmt."

Productivity Tools

artoo.js
"A piece of JavaScript code meant to be run in your browser's console to provide you with some scraping utilities."

Whiteboard Fox
"Simple online whiteboard. Share a virtual whiteboard in real-time using any modern web browser."

Clutter Free
A Chrome Extension to prevent duplicate tabs, in and across windows. Also handy to quickly duplicate the current tab, from right-click/context menu or browser button.

Bookmarks++
Chrome extension: A better Bookmarks manager that helps you to easily manage and search your bookmarks.

Hang0ut
"Faster access to Google Hangouts."

Stack
"Brings your team, tasks, workflow and discussions together, so you can get more done."

Starlet
Chrome extension: "Provides a keyboard driven search based access to your bookmarklets (and optionally, bookmarks). On any webpage (except the webstore) hit the backtick (`) key to open Starlet."

Support Web Tools Weekly: 384 pages of CSS for $7

A Tweet for Thought

Yoz Grahame provides a humorous take on software engineering.

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.

Before I Go...

The simplest things can benefit from good engineering. If you haven't seen it already, check out the Rapid Packing Container (YouTube link).

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly