Issue #145  (e.shiftKey, CSS/HTML, Frameworks, JS Utils)04/28/16

Support this week's primary sponsor:
Build Your Own Secure Chat App with AngularJS Build Your Own Secure Chat App with AngularJS
Learn to build your own secure chat app using AngularJS. Send real-time messages and more in no time. Join this free developer training webinar. (Limited seating)
Save Your Spot Now

If you want to find out what key the user has pressed on the keyboard, you can write a cross-browser function, like this:
function doWhichKey(e) {
  e = e || window.event;
  var charCode = e.keyCode || e.which;
  return String.fromCharCode(charCode);

This will return the name of the key that was pressed, when you call it while passing in the event object. In such a case, we'd be passing in a keyboard event, which has a bunch of different methods and properties. A few interesting ones are:
  • e.shiftKey
  • e.altKey (Option key on Mac)
  • e.ctrlKey
  • e.metaKey (Windows/Command key)
Each of these read-only properties will return a Boolean to indicate if the specified key was active when the keyboard event was generated. So theoretically you should be able to detect SHIFT-L, CTRL-W, ALT-5, etc.

Unfortunately, because the operating system already has responses to some of these key combos (e.g. CTRL-P will print), you can't detect all of them, so you'd be better off with another solution. The e.shiftKey property is probably the only one that works well in this regard, because it doesn't seem to be hooked into any OS-generated events.

So along with the function shown above, we could do something like this to display the combo pressed:
window.addEventListener('keypress', function (e) {
  if (e.shiftKey) {
    document.body.innerHTML += 'SHIFT-'+doWhichKey(e)+'<br>';
}, false);

Here is the JS Bin demo. Try changing e.shiftKey to e.altKey or e.ctrlKey to see how those work. As mentioned, e.shiftKey is probably the only useful one of the four.

Now on to this week's tools!


CSS and HTML Tools

"Gives you the power to take full control of your CSS keyframe animations via JavaScript."

"A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets."

"Adds support to object-fit to images on IE9, IE10, IE11, Edge and other old browsers."

CSS Gradient Generator
Just another gradient tool. Looks pretty easy to use, but the RGB/RGBA options don't seem to work yet.

Style Guide Auditing Tool
"Audit the CSS on a page to see what elements are using styles from the style guide and which styles are overriding them."

"A gulp module to minify CSS classes."

"An attempt at creating an open standard for both CSS and JavaScript UI libraries."

JavaScript utility to truncate HTML by text length.

Font Magician
"A PostCSS plugin that magically generates all of your @font-face rules. Never write a @font-face rule again."
384 Pages of CSS for $7 (PDF E-Book)

Front-end Frameworks

"A CSS grid framework using Flexbox."

"Beautiful, DRY, clean and reusable CSS. The CSS framework for your team."

"A collection of accessible, modern front-end components... modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment."

"A meaningful web typography starter kit."

"The most popular front-end framework, rebuilt for React."

"Modular and extensible CSS for the era of component-based Web application development."

Material Design for Angular 2
"This is the home for the Angular team's Material Design components built on top of Angular 2."

"57 Configurable React Stateless Functional UI Components."

Webpack Boilerplate
A webpack boilerplate that includes jQuery, Bootstrap, font-awesome, waypoints, jquery.scrollto, and animate.css – in order to quickly build up a production-ready marketing website.

"The featherweight responsive CSS Framework based on a 24-point system, rather than the traditional 12-point system that other frameworks use."

"A minimalist real-time framework for tomorrow's apps. With Feathers you can build prototypes in minutes and production ready real-time apps in days."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

JavaScript Utilities and Mini Libraries

"Easily create Enum-like objects."

"A React high level component that holds all its logic inside."

"An Angular2 directive that automatically adjusts textarea height to fit content."

"Simplest Instagram API library in JavaScript. Call any Instagram API method in just 10 lines of code."

"Replaces a node with an iframe version of itself."

"Timeline based parallax library. Make parallax effortless and enjoyable."

Smooth Scroll
"A lightweight script to animate scrolling to anchor links."

Dependency-free package to give HTML elements equal height.

A plugin for an embeddable rich text editor.

384 Pages of CSS for $7 (PDF E-Book)

A Tweet for Thought

Here's something I didn't know about customizing JS Bin links.


Suggestions / Corrections

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

Before I Go...

This is an old one, but you should check out GifLinks.

Thanks to all for subscribing and reading!

Keep tooling,
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp