|
|
|
|
Issue #145 (e.shiftKey, CSS/HTML, Frameworks, JS Utils)04/28/16
| Support this week's primary sponsor: |
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
jogwheel
"Gives you the power to take full control of your CSS keyframe animations via JavaScript."
stylelint
"A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets."
object-fit-images
"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."
Gulp-css-gsub
"A gulp module to minify CSS classes."
css-chassis
"An attempt at creating an open standard for both CSS and JavaScript UI libraries."
trunc-html
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."
Front-end Frameworks
Grd
"A CSS grid framework using Flexbox."
RichCSS
"Beautiful, DRY, clean and reusable CSS. The CSS framework for your team."
Frend
"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."
Gutenberg
"A meaningful web typography starter kit."
React-Bootstrap
"The most popular front-end framework, rebuilt for React."
VCL
"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."
Rebass
"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.
StringBean
"The featherweight responsive CSS Framework based on a 24-point system, rather than the traditional 12-point system that other frameworks use."
Feathers
"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."
JavaScript Utilities and Mini Libraries
Enumish
"Easily create Enum-like objects."
React-Indie
"A React high level component that holds all its logic inside."
angular2-autosize
"An Angular2 directive that automatically adjusts textarea height to fit content."
Nodegram
"Simplest Instagram API library in JavaScript. Call any Instagram API method in just 10 lines of code."
Iframify
"Replaces a node with an iframe version of itself."
Rotoscope
"Timeline based parallax library. Make parallax effortless and enjoyable."
Smooth Scroll
"A lightweight script to animate scrolling to anchor links."
Equalizer
Dependency-free package to give HTML elements equal height.
Trix
A plugin for an embeddable rich text editor.
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,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
