|
|
|
|
Issue #136 (radio.change, Testing, jQuery Plugins, Data)02/25/16
If a user clicks to toggle a checkbox on a web page, as you probably know, this will fire both a click event and a change event. The change event will only fire if the value is changed. For example, if part of your script prevents the change (like a preventDefault() call), then that will prevent the change event from firing. The change event, of course, will fire whether the checkbox is being checked or unchecked. As long as it's changing, the event will fire.
Radio buttons are similar, but you might say they respond in a somewhat unintuitive manner. As you know, a set of related radio buttons can only have one of the buttons "checked". So logic would tell us that if radio button #1 is checked and I click to check radio button #2, that should fire a change event on both radio buttons – because they both technically changed.
But this is not the case. Only the radio button that gets the checked state will fire a change event. You can test it out in this JS Bin. Notice there are two sets of form elements, a set of checkboxes and a set of radio buttons. Each time you click a checkbox, you'll see the log output for each "change" that occurs.
The radio buttons behave basically the same way but the change event does not fire on the radio button that loses its selection when another one is selected. I don't think this is necessarily a problem, but it seems like it would be more logical if the change event fired on two radio buttons, rather than just one, because, as mentioned, technically they're both changing.
Now on to this week's tools!
Testing and Debugging Tools
AWRStudyr
"A free Chrome extension that gives you instant tech and SEO info on the current webpage: page speed, mobile-friendly test, HTML5 validation, mixed content and more." sponsored
ESLint
Now at version 2.x. "The pluggable linting utility for JavaScript and JSX."
textlint
Text and markdown linter written in JavaScript.
Autotrack
"Automatic + enhanced analytics.js tracking for common user interactions."
Big Rig
"A proof-of-concept Performance Dashboard, CLI and Node module."
HTML Tidy
"A console application for Mac OS X, Linux, Windows, UNIX, and more. It corrects and cleans up HTML and XML documents by fixing markup errors and upgrading legacy code to modern standards."
Instabug
"The top apps in the world rely on Instabug for beta testing, user engagement and crash reporting. Gather feedback from your beta testers and have live conversations with your users."
HEADMasterSEO
"For bulk checking the response headers of large lists of URLs for status code, redirects (chains, loops), X-Robots-Tag, Vary, Link headers, slow response time."
Atomize
"Atomize your website to check how much you can benefit by adopting Atomic CSS."
Hookbin
"A free service that enables you to collect, parse and view HTTP requests. Create your unique endpoints to inspect headers, body, query strings, uploaded files and much more."
jQuery Plugins
jQuery Cards
"A repository of over 1000 quality jQuery plugins."
Wookmark
"For laying out a dynamic grid of elements."
WickedGrid
Also called jQuery.sheet. "Easy & Wicked Fast spreadsheets for the web."
jquery-migrate
"Can be used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9."
Rollerblade.js
"Easily give your webpage visitors a great 360° viewing experience with your products, images, or anything else you can think of."
jQuery.monthpicker
A date picker for month/year selection.
daterangepicker
A multi-featured date picker. Interesting that it includes "quarter" along with day, week, month, etc.
gridster.js
"Allows building intuitive draggable layouts from elements spanning multiple columns."
Magnific Popup
A responsive lightbox and dialog script with a focus on performance and providing the best experience for any device.
Tabulous.js
A tab switcher plugin that's easy to use and allows just about any kind of content in the tabs.
Data, Content, Files, etc.
Dream.js
"This library can output random data from a JSON Schema using standard types like String, Number, Date, Boolean, Array, or with the 60+ built-in custom types."
Kinto
"A lightweight JSON storage service with synchronisation and sharing abilities."
brotli
By Google. "A generic-purpose lossless compression algorithm."
ybin
"A private pastebin. We do not know what you paste. All data is encrypted on our servers and we never store your key or info."
Lovefield
Also by Google. "A relational database for web apps. Written in JavaScript, works cross-browser. Provides SQL-like APIs that are fast, safe, and easy to use."
A Tweet for Thought
The wrong way to develop JS apps...?
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...
The folks at KeyCDN have compiled advice on performance from 20+ experts in the industry.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
