|
|
|
|
Issue #122 (useCapture, CSS/HTML, JS Utils, Productivity)11/19/15
The addEventListener() method takes a third argument that is a Boolean that's almost always set to false. I usually write it without thinking about it, always setting it to false. So what is this third argument?
It's an optional argument (but required for legacy reasons) and it's called useCapture. In brief, this argument lets you define whether to use event bubbling or event capturing. So if a parent and a child element have an event handler with the same event, which one will fire first? There's a great StackOverflow answer that explains it nicely:
- With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.
- With capturing, the event is first captured by the outermost element and propagated to the inner elements.
To use capturing with addEventListener(), your code would look like this:
|
el.addEventListener('click', doSomething, true);
|
Notice the third argument set to true rather than the usual false.
You can see the difference if you view this JS Bin demo. Notice there are two parent/child combos. Click the parent, then the child for each one. The output will display which event gets fired first. In the 2nd nested set, you can see in the code that the listener has the third argument set to true, thus causing the output message to be reversed when the inner element is clicked.
That's basically it in a nutshell. I haven't seen too many practical use cases for implementing useCapture, but here are two articles that explain the whole concept a little more deeply:
Now on to this week's tools!
CSS and HTML Tools
DocumentCSS
"Create live style guides with interactive examples, that change as your design does."
PatternPack
"Makes it easy to build a living design system. It is not a replacement for Bootstrap – it’s a set of tools for you to 'build your own Bootstrap'."
Nudge
"An opinionated, ITCSS-compatible library that detects misuse of certain CSS selectors, and gives developers a subtle nudge to fix them. Mistakes and incorrect usage get highlighted in the UI."
Floatl
"A library agnostic, pragmatic implementation of the Float Label Pattern."
print.css
"An open source print stylesheet for the environmentally-conscious web developer."
Bootstrap Themes
An official Bootstrap themes repository from the creators of Bootstrap.
Time Machine
A PostCSS plugin that fixes mistakes in CSS. It's based on a document by the CSSWG that describes the so-called "mistakes".
rscss
"Reasonable System for CSS Stylesheet Structure. A set of simple ideas to guide your process of building maintainable CSS."
React CSS Modules
"Seamless mapping of class names to CSS modules inside of React components."
CSSketch
"Plugin that adds CSS support to Sketch 3 for a faster design workflow."
Blend
"Generate simple and beautiful CSS3 gradients."
JavaScript Utilities and Mini Libraries
Tabby
A lightweight toggle-tab module script with no styling.
Babel
The popular ES2015 transpiler is now at version 6.x.
simpleCookie
"A small utility to make handling cookies simple. 307 bytes minified + gzip."
React Transform Boilerplate
"A new Webpack boilerplate with hot reloading React components, and error handling on module and component level."
swivel
"Message passing between ServiceWorker and pages made simple."
randexp.js
Generates a random string that matches a given regular expression.
react-theme
"Simple inline style manager for the organized and customizable CSS styles in React. If you know material-ui it's similar to the ThemeManager but more general."
Polyfills as a service
"Detects the current browser using the User-Agent header and bundles all the necessary polyfills into a single JS file, effectively polyfilling the browser itself."
react-gsap-enhancer
"A React component enhancer for applying GSAP animations on components without side effects."
woofmark
An embeddable WYSIWYG HTML and Markdown editor for IE9+.
store
"A better way to use localStorage and sessionStorage."
Productivity Tools
ProjectPulse
"Spend less time on project status reports. Sending project status updates just got a whole lot easier."
Metabase
"The easy, open source way for everyone in your company to ask questions and learn from data."
Paster
A Pastebin clone with random short URLs.
Elegantt for Trello
Chrome extension. "Automatically generates progress bars for your project elements based on the information in Trello."
SnipSquirrel
"Combining all the best features of code snippet storage in one elegantly crafted app."
PrintWhatYouLike.com
Bookmarklet to let you customize how a page will print.
Guru
"A Chrome extension that connects your team's knowledge to the web apps you already use in one easy to find place, your browser."
A Tweet for Thought
Todd Motto's take on writing Flexbox code.
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...
Well, I don't know about you but my whole weekend's a write-off thanks to discovering My 90's TV.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
