Issue #187 (Overwriting events, JS Libs, JS Utils, Bundlers)02/16/17
While fiddling around with some JavaScript this week, I came across something that had me stumped. If you're relatively new to JavaScript, see if you can figure out what the problem is. Take a look at this JS Bin demo.
If you're experienced with JavaScript and the DOM, there's a good chance you'll understand immediately what's happening. Why doesn't the second button allow you to append the message multiple times? Before reading further, try and figure it out, then come back.
I posed the problem on Twitter and Phil Walton was kind enough to explain. This was definitely something that I felt like I should have been able to understand because I'm sure I've read something about this in the past. Anyhow, here's a quick summary of the problem and the explanation:
- When using an inline onclick handler on a button, I'm able to append a message to document.body multiple times using innerHTML.
- When using addEventListener or btn.onclick to attach the event, the button would only add the message once (subsequent clicks did nothing).
The explanation:
- The line that uses innerHTML+= overwrites the event handlers because it destroys and recreates the DOM nodes.
- Declaring the event handler inline apparently avoids this problem (I'm still not clear on the logic of it in this case, because to me it appears to be doing the same thing).
The same basic problem is discussed in this Stack Overflow thread where it's suggested to use appendChild() instead. If you do a search on this subject, you'll notice some really old articles that discuss the problem, as well as some similar Q&A threads.
In summary, if you use innerHTML to add content to an element, remember that the events attached to those elements will not be reattached, even when you're appending to existing content.
Now on to this week's tools!
|
JavaScript Libraries and Frameworks
React Router
Now at version 3.x. Complete routing library with a simple API and powerful features like lazy code loading, dynamic route matching, and more.
RAX
A universal JavaScript library with a largely React-compatible API. If you use React, you already know how to use Rax.
Construct 2
A powerful ground breaking HTML5 game creator designed specifically for 2D games. It allows anyone to build games — no coding required.
Recycle
Create modular applications using observable streams. Manage async behavior, greater separation of concerns, better component decoupling, etc.
KUTE.js
Animation engine with top performance, memory efficiency, and modular code to help you create great custom animations.
Next.js
A minimalistic framework for server-rendered React applications.
Svelte
Framework that lets you write your components using HTML, CSS and JavaScript, and during your build process Svelte compiles them into tiny standalone JavaScript modules.
PLYND
Empowers HTML5 developers to make great multiplayer games. Provides the skeleton of your multiplayer game available online, testable with your friends, and connected in realtime after just minutes of configuration.
|
JavaScript Utilities
ReactSiema
A carousel plugin for React, based on the Siema carousel.
Progressively
A small, dependency-free library for loading images progressively.
iTyped
Dead simple JavaScript animated typing, with no dependencies.
qart.js
Merges pictures and QR codes for artistic QR codes. Yes, you read that correctly.
Mitt
Tiny 200-byte functional event emitter / pubsub, that works in IE9+.
A11y Dialog
Now at version 3.x. A lightweight (1.2Kb), dependency-free flexible script to create accessible dialog windows.
MonetizeJS
A modern payment platform for in-app payments, based on Stripe, with a simple API.
date-fns
Modern JavaScript date utility library that provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates.
|
Bundlers, Module Loaders, etc.
preload-webpack-plugin
A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using `link rel=preload`, which helps with lazy-loading.
Prettier
Opinionated JavaScript formatter with advanced support for language features from ES2017, JSX, and Flow. Removes original styling and ensures all outputted JavaScript conforms to a consistent style.
webpack
The popular module bundler is now at version 2.x.
modules-webmake
Bundle CommonJS/Node.js modules for web browsers. Webmake allows you to organize JavaScript code for the browser the same way as you do for Node.js.
eslint-plugin-compat
An ESLint plugin to check for browser support for APIs used, based on caniuse and kangax compat table data.
closure-compiler-js
Package for the JavaScript version of closure-compiler for use via npm.
Fusebox
A bundler/module loader that combines the power of webpack, JSPM and SystemJS.
|
A Tweet for Thought
Does lack of experience with large projects give you less authority with specific types of coding advice? According to Thierry Koblentz, yes.
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...
You might enjoy Libraries.io, "The Open Source Discovery Service".
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
