Issue #293 (addEventListener(), React, Git/CLI, Build Tools)02/28/19
When you see the addEventListener() method, you'll often find it with a final Boolean parameter set to false, like this:
|
btn.addEventListener('click', function () {
// do something
}, false);
|
This parameter defines whether you want to use event bubbling or event capturing, which I discussed way back in Issue #122.
In recent years, however, the third parameter has been morphed in the spec into an options object that accepts up to three property/value pairs, including capture, once, and passive.
Therefore an addEventListener() call can now look something like this:
|
btn.addEventListener('click', function () {
// do something
}, {
capture: false,
once: true,
passive: false
});
|
Here's what each property means:
- capture - Same as before; Boolean to indicate whether to use bubbling or capturing.
- once - Boolean to indicate whether you want the event listener to invoke only once and then be removed.
- passive - Boolean to indicate that the function will never call preventDefault(), even if it's included.
Here's a CodePen demo that uses the once property on the button click. Notice the button is supposed to append some text to an element on the page. This happens only once then the event listener is removed and subsequent clicks do nothing. If you change the once value to false, the text will re-append each time the button is clicked.
The main problem with this, even though browser support is excellent, is the fact that this doesn't degrade well in a non-supporting browser. MDN's article discusses some techniques for feature detecting and code forking and there's a polyfill here. But if you only need to support modern browsers then you should be good to go.
Now on to this week's tools!
|
React Tools
DeepScan: How to Ensure JavaScript Code Quality
Make your JavaScript better with advanced static analysis. DeepScan targets the detection of possible runtime errors and quality issues for your JavaScript, TypeScript, React and Vue.js code. sponsored via Paved
react-top-loading-bar
A simple, highly customizable YouTube-like React loading indicator component.
React Animation
Components and animations to easily add movement to your React projects.
react-console-emulator
A simple, powerful and highly customizable Unix terminal emulator for React.
React SimpleMDE Editor
React component wrapper for EasyMDE (An embeddable JavaScript Markdown editor).
use-immer
A hook to use Immer (a popular state utility) as a React hook to manipulate state.
Material AutoRotatingCarousel
Introduce users to your app with this Material-style carousel.
React Simple Animate
React UI animation made easy, using CSS keyframes with chainable animation sequences.
useFetch
A React hook to use the Fetch API, compatible with React 16.6's Suspense component.
Retoggle
A collection of React hooks that provides UI toggles to manipulate your component state from outside.
Easy Peasy
Easy global state for React with support for TypeScript and React Native.
React Local Currency
Shows the price of your services in the customer's currency
|
Git, GitHub, and CLI Tools
Meteorite
Smarter GitHub notifications. Organize and score notifications based on importance and relevance.
Create GitHub Action
Preview what a GitHub Action will look like in a workflow, and generate the Dockerfile to do so.
Rels
GitHub release analytics for the console.
copyfiles
Utility to easily copy files via the command line.
GitPunch
Lets you watch for releases of projects on GitHub. Make a list of repos or watch starred ones, filter out pre-releases, and get emails in real time or daily.
Bump
Opinionated but configurable utility that updates a project's version, updates/creates the changelog, makes the bump commit, tags the bump commit and makes the release to GitHub.
Smart Commit
Create a commit prefixed with the current branch name.
CODELF
Search GitHub, Bitbucket, and GitLab to find real-world usage variable names.
Gist List
Online app to tag, backup, and organize your GitHub Gists.
Module Linker
Chrome extension that adds direct links to any imported modules or files in the GitHub source code viewer.
|
|
Recommended Reading for Developers
|
Bundlers, Build Tools, etc.
suppress-eslint-errors
A codemod for jscodeshift that runs ESlint against your existing code and adds a "todo" comment to each violation while you work on more pressing stuff.
Tattica
Tactical and adaptive asset loading library.
create-yo
Use any Yeoman generator with `npm init`.
Bundle Optimize Helper
Tool to analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.
JavaScript Obfuscator Tool
A powerful obfuscator for JavaScript and Node.js (no longer under development but looking for contributors).
Pika
Find modern packages on npm. Get faster, smaller JavaScript bundles.
cost-of-modules
Find out which of your dependencies is slowing you down.
Now
Version 2+ (details). Makes serverless application deployment easy. Don’t spend time configuring the cloud. Just push your code.
Sounds Webpack Plugin
Webpack plugin to notify of errors, warnings, etc with sounds.
|
A Tweet for Thought
Safia Abdalla on what makes a good engineer. I'm most definitely not an engineer.
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...
While we're on the subject of React, you might want to check out Overreacted, Dan Abramov's React blog and also React.js Videos, an online search tool for React conference videos.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
