|
|
|
|
Issue #107 (preventDefault(), Frameworks, Testing, Git/CLI)08/06/15
| Support this week's primary sponsor: |
 |
Code online or offline, directly in the browser! Supports many languages, 30+ editor themes, multiple cursors, code hinting & linting, preprocessors, database management and so much more. Try it free for 14 days! |
The preventDefault() method is used to keep elements on the page from firing the default event associated with a particular action. The two most common uses for preventDefault() are to prevent a URL from being visited when a link is clicked, or for preventing form submission. This was formerly done with return false, but that's now deprecated.
But preventDefault() can be used to intercept the default event on any action that has an associated default event. Three examples are shown in the code below:
|
var radio = document.querySelector('input'),
checkbox = document.querySelectorAll('input')[1],
textarea = document.querySelector('textarea');
radio.addEventListener('click', function (e) {
e.preventDefault();
}, false);
checkbox.addEventListener('click', function (e) {
e.preventDefault();
}, false);
textarea.addEventListener('keypress', function (e) {
e.preventDefault();
}, false);
|
(JS Bin demo)
As you can see in the code and the demo, the first example is a radio button. Even though it's not disabled with the HTML "disabled" attribute, it's not able to be selected because the default event (i.e. selecting it) is prevented from occurring.
The checkbox is the same, except it starts out checked, so you can't uncheck it unless you disable JavaScript. Finally, the textarea element is essentially disabled because the default action that occurs on "keypress" is to type whatever key is pressed. But that too is prevented.
In the case of user input, this is useful if you want to prevent only certain keys from being pressed. MDN gives an example script where a user cannot type any uppercase characters, so the preventDefault() method fires on keypress if an uppercase letter is typed.
Now on to this week's tools!
Front-end Frameworks
GridLayout
"Lightweight grid system for advanced horizontal and vertical web app layouts, with support for older browsers."
Material Design for Bootstrap
"This Bootstrap theme is an easy way to use the new Material Design guidelines by Google in your Bootstrap 3 based application."
modoJS
A component-based JavaScript user interface library that enables you to create the UI of your Backbone driven web application without writing a single line of HTML.
Electron
"Build cross platform desktop apps with web technologies. Formerly known as Atom Shell."
fastn.js
"Forget frameworks, grab a nailgun. A JavaScript tool for building user interfaces."
Material Design Lite
Lets you add a Material Design look and feel to your websites. It doesn't rely on any JavaScript frameworks and aims to optimize for cross-device use and gracefully degrade in older browsers.
Flexible Grid System
"This framework will let you create your web applications in a flexible way that you've never experienced before."
Testing and Debugging Tools
PatrolServer
"We scan your server real-time for outdated software and exploits. All delivered by mail and an easy to use dashboard."
JSXHint
JSHint for React-based JavaScript.
HTTP Security Report
"Get an instant report of how your website measures up to the best practices. Check connection encryption, content security, information disclosure and cookies."
The W3C Mobile Checker
"A tool for Web developers who want to make their Web page or Web app work better on mobile devices."
Email on Acid
"Tools that simplify email testing and analytics. Every email client is different. See exactly how your email looks in the most popular inboxes, so you can fix any problems before you hit send."
JSONLint
The JSON validator.
Site Validator
"Validate HTML, CSS and Accessibility on thousands of pages from your sites, with just one click."
Git, GitHub, and Command Line Tools
Git-Publish
"Use your git repository to publish your website to your ftp-hosting provider. Push your repo to Git-Publish and provide your ftp-credentials the first time."
ttystudio
"Record your terminal and compile it to a GIF or APNG without any external dependencies, bash scripts, gif concatenation, etc."
Push Stars
Get push notifications for your GitHub repo stars. When someone stars your repo, this tool will send a pushbullet notification.
Rewind
"Git history analysis scripts."
vcspull
"Mass update git, hg and svn repos simultaneously from a YAML / JSON file."
Whereisit
Chrome extension. "Makes code navigation on GitHub easier. Look up and jump around class/method definitions with a single click."
A Tweet for Thought
Peter-Paul Koch on what is holding back progressive enhancement.
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...
Like comic books? And user experience? You'll love UX Hero.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
