Issue #290 (change vs. input, Media, Git/CLI, Jamstack)02/07/19
Most likely you're aware that the change event is different from the input event. For one thing, the change event has been around much longer, at least since the DOM 2 spec, while input was a later addition in the HTML5 DOM spec.
One major difference in the way they function is the fact that the change event will generally only trigger on form elements, while input works on form elements and on elements with the contenteditable attribute set to true. The input event will also fire on elements that are editable using document.designMode = 'on'.
I've set up a CodePen demo with various elements on the page, that prints a message in the console every time an element is changed and the input event fires. Try typing some text in the various form fields or adjusting the checkbox or radio button. You can also edit a div on the page and an iframe (which doesn't have a source in it, but it doesn't matter, you can still edit its child document).
And here's another CodePen demo that has the same elements but this time looks for change events.
Notice two key differences:
- As mentioned, the contenteditable and designMode elements do not trigger the change event but both will trigger input
- The change event fires only after an element's content has been committed. In the case of the checkbox and radio button, it's the same as the input event, but the text field elements don't trigger the change event until you move focus away from the field.
If you want to test the iframe example with a real page embedded, here's a simple example (open the console to see the event message).
Just a couple of subtle differences to keep in mind if you were considering using either of these events. Now on to this week's tools!
|
Buy my brand new JS/DOM e-book in EPUB, PDF, MOBI format!
JS & DOM Tips Volume 3 >
Includes 54 tips + 3 long-form articles
|
|
Media Tools
Percy: Automated Visual UI Testing
Replace time-consuming manual QA to catch visual UI bugs automatically. Percy’s all-in-one visual testing platform makes it easy to review visual UI changes across browsers and responsive widths. sponsored via Syndicate
IVID
An interactive video player for modern browsers.
Iconfu
Online icon platform for customizable and professional vector and bitmap icons.
React Image Crop
A responsive image cropping component for React.
canvas-sketch
In early development. A loose collection of tools, modules and resources for creating generative art in JavaScript and the browser.
amCharts
Now at version 4+ (details). Advanced JavaScript data viz and charting library.
virtual-audio-graph
Small and dependency-free library for declaratively manipulating the Web Audio API.
Jam Icons
800+ handcrafted icons in SVG format, usable via download or CDN.
react-no-content
An SVG React component to display when there's no content.
P5.sketchplugin
A plugin for using p5.js in Sketch. Create rich and editable graphics inside Sketch using a few lines of JavaScript.
|
Git, GitHub, and Command Line Tools
GitHub Actions
A directory and search tool to help developers find GitHub Actions.
Git Admin
An npm package that makes it easier to manage GitHub repositories via the command line.
Scoop
A command-line installer for Windows.
Release It!
CLI release tool for Git repos and npm packages. Automates the tedious tasks of software releases.
Husky
Now at version 1+. Git hooks made easy. Can prevent bad git commit, git push, and more.
Potential Changes for GitHub
Chrome and Firefox extension that shows which pull requests contain changes related to a file.
Floki
A JSON/EDN browser for the terminal.
Screenshoteer
Make website screenshots and mobile emulations from the command line.
jiractl
A command-line tool for managing Jira.
globby-cli
User-friendly glob matching CLI.
|
|
Recommended Reading for Developers
|
CMS's, Static Sites, Site Builders, etc.
create-react-blog
Start and deploy your own statically rendered blog with create-react-app.
Saait
A boring HTML page generator.
Next.js MDX Blog Kit
Starter code for creating a static blog system using Next.js and MDX. Uses a service worker for offline reading and has perfect Lighthouse scores.
Eleventy
A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.
Anymod
The online editor for adding features to any website.
Micro.blog
A blog hosting platform with a safe community for microblogs.
Craft CMS
A flexible, user-friendly CMS for creating custom digital experiences on the web and beyond.
Scriptgun
Build MEAN stack apps faster with tools to design your data models, configure your project, define endpoints, and more.
CMS.js
Now at version 2+ (details). Fully client-side JavaScript site generator in the spirit of Jekyll that uses plain HTML, CSS, and JavaScript to generate your website.
DropInBlog
Embed a blog into your site in only 3 minutes. No WordPress needed. Quick integration with JavaScript/HTML or JSON API that inherits your CSS without conflicts.
Visual Composer
A simple WordPress drag and drop plugin to create custom website layouts.
|
A Tweet for Thought
Interesting thread from Sarah Mei on communication in your code base.
Send Me Your Tools!
Made something? Send links via Direct Message on 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...
I'm launching a brand new newsletter: Tech Productivity. It will be a short newsletter with about 5-10 links per week, featuring tools, tips, articles, and other resources to help tech workers be more productive.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
