Web Tools Weekly Issue #38 (keypress/keydown, Mobile, Sass, Frameworks)

Issue #38 (keypress/keydown, Mobile, Sass, Frameworks)04/10/14

The difference between the keydown and keyup events is pretty clear: One is fired when a key on the keyboard is pressed down, and the other is fired when the key is released. But what about the keypress event? How is it different from keydown?

You can see the difference by testing various keys using the following code:

document.addEventListener('keydown', function () {
  console.log('KEYDOWN');
}, false);

document.addEventListener('keypress', function () {
  console.log('KEYPRESS');
}, false);

And here's a modified JS Bin that displays the results right on the page, along with some console.logs to read the actual key code.

So what exactly is the difference?

Well, you'll notice that for most keys, both events get fired, so both messages will display on the page. But for the rest of the keys (like ESC, F2, SHIFT, ALT, etc.) only the keydown event is fired.

So the difference is whether or not the key has the ability to produce an output of some sort (i.e. the "H" key can produce the letter "h" whereas the ESC key can't produce anything visible). Another difference is the character code number that's read by the keyCode property when the event fires. keypress will display a different character code for uppercase "H" vs. lowercase "h", whereas keydown will display the same for both.

So, knowing this, keypress is always the better choice when you want to read exactly what character was entered whereas keydown can be used as a generic event to read whether something on the keyboard was pushed, be it an actual character or even just the SHIFT key.

When expecting visible keyboard output, MDN's reference suggests the use of the input event instead of keypress (used on inputs, textareas, etc. and supported in IE9+), but if you want oldIE support, you'll have to use keypress. Also, keypress exposes many properties that input doesn't.

Now on to this week's tools!

RWD and Mobile Tools

Fluidity
"HTML is almost 100% responsive out of the box. These 247 bytes of css fix the 'almost' part."

Klipper
"Reduces your webpage and content load time on all mobile phones. It is an intelligent layer on top of the existing web services and CDN, where we do our magic to accelerate the entire experience for the end-user."

Data Img
"Tiny jQuery plugin to deal with responsive image delivery. Think responsive.io minus the cdn."

Fixed Responsive Nav
"Responsive, fixed and touch friendly one page navigation with animated scrolling."

Ridiculously Responsive Social Sharing Buttons
"It seemed like we were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container." Built with Sass.

FTP On The Go™
"FTP On The Go lets you securely log into your server* from anywhere using your iPhone or iPod touch."

Responsive tables
"An awesome solution for responsive tables with complex data." Designed for Bootstrap, Mobile first, graceful JS fallback.

Proto.io
"Create fully-interactive high-fidelity prototypes in minutes that look and work exactly like your app should."

srcN Polyfill
"A Responsive Images approach that you can use today that mimics the proposed srcN syntax."

Framework7
"Full featured HTML framework for building iOS 7 apps."

Sass (Preprocessor) Tools

GUFF
A simple library of useful Sass mixins.

Refills
Prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat.

Pantone Sass
"A list of Pantone© colors as Sass variables."

Toolkit
From Team Sass, "your swiss army knife for Progressive Enhancement and Responsive Web Design."

Modernizr Helper Mixin
"Simple and comprehensive mixin for Modernizr tests in Sass."

Frontend Frameworks

Webplate
"Everything from a robust responsive layout engine, to global button elements, customizable forms and support for IcoMoon icon fonts. Webplate includes jQuery, Modernizr and Typeplate."

Sproute
"A hosted framework for building dynamic webapps in minutes."

Brick
"Brick makes it easy to create rich yet maintainable web interfaces by providing a set of composable and extensible components. It uses declarative bindings and observers to sync and update your UI with an underlying data model."

Grid Style Sheets
"Reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout."

Plenty of Frameworks
A simple tool to quickly find a framework to match your project specs and your experience. E.g. Responsive? Sass? Developer or designer?

GizmoJS
"A simple, but extendable platform for building reusable front-end components. It is similar to jQuery UI's Widget factory — but without the reliance on jQuery and with an emphasis on creating components."

Startup Design Framework
"We have created a new product that will help designers, developers and companies create websites for their startups quickly and easily."

Documents, Files, Content, etc.

GitBook
"Build beautiful programming books and exercises using GitHub/Git and Markdown."

ShareDrop
"Lets you share files with others in the same local network."

BurnBox
"Upload a file (up to 10 MB) or write a message. Send the link to a friend. As soon as they view the link, it will be completely destroyed."

Gingko App
"Write better, faster with a new kind of word processor."

WebODF
"A JavaScript library that makes it easy to add Open Document Format (ODF) support to your website and to your mobile or desktop application. It uses HTML and CSS to display ODF documents."

import.io
"Transform any website into a table of data or an API in minutes without even writing any code."

Typewrite
"A simple, real-time collaborative writing environment."

A Tweet for Thought

Thomas Fuchs has an interesting comment on cross-device development. He may be right.

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

I just came across Workshop, "a daily newsletter and community delivering the best freelance opportunities to your inbox."

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly