Web Tools Weekly
What a Tool!

Issue #290  (change vs. input, Media, Git/CLI, Jamstack)02/07/19

Advertisement via Syndicate
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.
Sign up for free

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
JavaScript E-Books

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 

An interactive video player for modern browsers.

Online icon platform for customizable and professional vector and bitmap icons.

React Image Crop
A responsive image cropping component for React.

In early development. A loose collection of tools, modules and resources for creating generative art in JavaScript and the browser.

Now at version 4+ (details). Advanced JavaScript data viz and charting library.

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.

An SVG React component to display when there's no content.

A plugin for using p5.js in Sketch. Create rich and editable graphics inside Sketch using a few lines of JavaScript.

Recommended Courses by Wes Bos:

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.

A command-line installer for Windows.

Release It!
CLI release tool for Git repos and npm packages. Automates the tedious tasks of software releases.

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.

A JSON/EDN browser for the terminal.

Make website screenshots and mobile emulations from the command line.

A command-line tool for managing Jira.

User-friendly glob matching CLI.

Recommended Reading for Developers
Vue.js in Action   Get Programming with JavaScript Next   Progressive Web Apps
Have you written a book for developers that's available on Amazon? Reply to this email and let me know. I'll consider including it here. No charge.

CMS's, Static Sites, Site Builders, etc.

Start and deploy your own statically rendered blog with create-react-app.

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.

A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.

The online editor for adding features to any website.

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.

Build MEAN stack apps faster with tools to design your data models, configure your project, define endpoints, and more.

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.

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,