Web Tools Weekly Issue #37 (e.button, CSS/HTML, Testing, Productivity)

Issue #37 (e.button, CSS/HTML, Testing, Productivity)04/03/14

The click event might be the most used event in JavaScript. There's a very similar event you've also likely used called mousedown, and the related mouseup.

Here are the distinct traits of all three of these events, after which I'll describe a related property you may not have used before:

A click event will fire when the mouse button is clicked then released, so it's kind of like a combination of mousedown and mouseup (i.e. both must occur on the same element).
mousedown will fire when the primary mouse button is pushed down, technically prior to the button being released.
mouseup will occur when the mouse button is released, but the mousedown action can occur on a different element. For example, you can mousedown on the background, then drag the cursor onto an element expecting the mouseup event, release the mouse, and the event will fire.

One of the main differences between click and mousedown (or mouseup), however, is the fact that the mousedown and mouseup events give you the ability to detect which of three mouse buttons was pressed. Take the following code:

btn.onmousedown = function (event) {
  console.log(event.button);
};

When the btn element is clicked, the console will display the button property of the event object. If the primary mouse button is pressed (usually the left button), the console will display "0". If the right mouse button is pressed (or left for a left-handed mouse), the console will display "2". If the middle (scroll-wheel) button is pressed (assuming it exists), the result will be "1". The mouseup event has the same results.

Unfortunately, there are some significant browser differences that need to be noted:

Chrome and IE11 let you detect left and middle buttons using onclick, but Firefox and pre-WebKit Opera won't.
IE6-8 have a completely different system for the output numbers
Pre-WebKit Opera requires the user to hold CTRL in order to register a middle mouse button click, but not using the click event.
Chrome on Windows 7 recognizes right click on mouseup, but Chrome on OSX has trouble with it. A few fast right clicks is the only way to get it to register.

There are tons more things I could write about mouse events, and I might do something like that soon elsewhere. If you want to fiddle with these properties, here's a JS Bin demo.

Now on to this week's tools!

CSS and HTML Tools

CSS Filters Playground
A nice learning ground for the new CSS filters spec. Lets you use video, iframe, or even a custom image via URL.

What's the Closest Google Font?
A quick look-up tool that lists some fonts not available on Google Fonts, and gives you the closest match.

Flexbox Grid
"A grid system based on the flex display property." Responsive, but I couldn't find any info on browser support.

Transitionize
"Helps you to create CSS3 transitions dynamically to elements of your choice. This helps in cases where you need different transition properties or transition speed for the same element, but for different events."

Bootstrap Accessibility Plugin
From the developers at PayPal, an extension for Bootstrap 3 "that makes many of the components of this library accessible for keyboard and screen reader users."

CSS Stats
Enter a site URL, link to CSS file, or direct CSS input, and this will give you stats on your selectors, use of floats, font sizes, colors, and more.

RECESS
"Developed at Twitter to support our internal styleguide, RECESS is a simple, attractive code quality tool for CSS built on top of LESS."

Multimedia Tools

The Sprite Generator
Lets you build animated stripes, based on the jQuery Sprite Anim plugin.

webaudiox.js
A mini library of "helpers" for the Web Audio API.

SVG-Optimizer
An SVG optimization tool that minimizes the code needed for SVG graphics.

cropper
A free screen capture utility.

3dfile.io
"3D file sharing and online viewing have never been easier. Upload files and share the 3D view link. No signup or login required."

Charts by Brace
"Use our URL to inject charts into your website. The data is supplied via the URL, no Javascript required. Plus, if you need Lorem Ipsum charts, we've got you covered."

X-Icon Editor
An online favicon generator. Even lets you test the favicon in the window when you're done drawing/editing.

Testing and Debugging Tools

AccessLint
An accessibility testing tool. Just enter a URL and it will show you the code and explain what's wrong.

JSCritic
Based on JSHint, lets you quickly check how well 3rd-party scripts behave.

JS Manners
Similar to the previous link, tests your 3rd party scripts for security risks, performance issues, stability, flexibility, and more.

ESLint
"The pluggable linting utility for JavaScript... While JSHint and JSLint dominate JavaScript linting, neither one provides an API for plugging in your own rules."

Ghost Inspector
Automated Website Testing. Record yourself browsing, make assertions, replay in the cloud.

Codacy
"A platform of tailor-made code patterns designed to complement your unit tests. Select the most suitable patterns for your project and start getting results."

JSFault
A real-time JavaScript monitoring service, that lets you assign errors to specific developers and integrates with Trello.

peek
This looks really cool... "Get a peek into your site's usability. See and hear a 5-minute video of a real person using your site. It's super fast and totally free."

Productivity Tools

JellyReader
RSS Reader "that stores all your articles on Google Drive and Dropbox! The data is completely self-hosted on your personal cloud, so it can never go down or go away."

Unmark
"Designed to help you actually do something with your bookmarks, rather than just hoard them. A simple layout puts the focus on your task at hand and friendly reminders keep you in line."

Chapoo
"Provides teams with a single view on all project activity and improves collaboration and productivity, all in the cloud."

Voice Chat API
"A free, open-source, out-of-the-box audio conferencing app exposed via an API. Talk with your teammates, friends, and others at the push of a button."

A Tweet for Thought

Steve Souders kicks off a discussion on why script loaders are needed.

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...

Thomas Reggi has created a computer font that feels human. Interesting how it uses JavaScript to alter each letter.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly