Issue #272 (focusin/focusout, Productivity, Git/CLI, JS Utils)10/04/18
As you might be aware, when an element on a web page receives focus, the focus event fires on that element. But the focus event doesn't bubble. That is, it isn't detected up the DOM tree like a click event.
But there is a useful pair of events you'll want to make a mental note of should you want a focus event that bubbles: The focusin and focusout events, both of which have excellent browser support.
The spec describes focusin:
"A user agent MUST dispatch this event when an event target is about to receive focus."
Or in the case of focusout, "is about to lose focus." This is accomplished via event bubbling, which doesn't happen with the focus event.
When any element is focused, the focusin event will bubble up as high as it can go in the DOM tree. It thus becomes useful when you listen for it on an element that contains multiple focusable elements.
Let's consider the following HTML:
|
<div class="one" tabindex="0">
<button>Button 1</button>
<button>Button 2</button>
</div>
<div class="two" tabindex="0">
<button>Button 3</button>
<button>Button 4</button>
</div>
|
Notice I have two buttons inside each div element. I've also added a tabindex value to each div to make each div focusable too. I don't need to do this, but it's an option.
I want to detect focus on any element inside div "one" and I also want to detect when an element inside div "one" loses focus. Assuming "one" is a reference to that div, I can use these as with any events:
|
one.addEventListener( 'focusin', function (e) {
// do something here...
}, false );
one.addEventListener( 'focusout', function (e) {
// do something here...
}, false );
|
With that in place, if either button inside the first div receives focus, or even if the div itself receives focus, the focusin event will fire. And if an element inside div "one" loses focus, the focusout event fires. As with focusin, focusout bubbles, which again is what allows this to work.
View a full demo here
Try clicking any of the buttons or using the keyboard to move from one element to the next on the page and you'll see the output describing what's happening with each tab movement or click.
While the focus event is specific only to the element that receives focus, focusin and focusout can come in handy if you want to detect focus on a group of elements.
Now on to this week's tools!
|
Productivity Tools
The Fast and Visual Way to Understand Your Users
Hotjar is everything your team needs to get ‘in-the-moment’ visual feedback, see how people are really using your site, and uncover insights to make the right changes. sponsored via Syndicate
Pastel
A faster way to manage client feedback on websites. Now upgraded to include new team-related features, including mentions and "pauses" (i.e. read-only mode).
re:consent
Chrome or Firefox extension that allows you to what data collection you have unwittingly agreed to on websites like Google and Facebook, with a quick and easy way to change those settings.
Perkeep
A set of open source formats, protocols, and software for modeling, storing, searching, sharing, and synchronizing data in the post-PC era.
Proficonf
Online platform for one-click conferencing plus features for doing live webinars.
Aha!
Roadmap software for project managers to help with product planning, development, launch, etc.
Helpy
Hosted, on-premise and open source customer support helpdesk software.
TripMode
PC and Mac app that helps save mobile data when on the go. It stops online backups, updates, photos syncs, etc. from using data in the background.
Async
A one-of-a-kind communication and project management tool for small teams of software engineers.
Clippi
Clip, collect and collaborate, all in one place. Clip any moment from any video online, save to your collections, and invite friends to view or collaborate.
Grayscale the Web
Chrome extension. Removes all color from websites, turning them gray (to make websites less distracting). Can be set for specific sites and tabs, or for all sites.
|
|
Recommended Reading for Developers
|
Git, GitHub, and Command Line Tools
Project Explorer
Create a tree visualization of any project with this CLI tool.
Korkut
Quick and simple image processing at the command line.
Git Tutor
Generate step-by-step markdown tutorials from your Git history. With good commit/message planning, I can see this working pretty well.
Sourcetree
A free Git client for Windows and Mac. Simplifies how you interact with your Git repositories so you can focus on coding. Visualize and manage your repositories through Sourcetree's simple Git GUI.
ora
Elegant loading spinner for the terminal.
Posthook
Simple job scheduling for your application. API service that enables web applications to schedule tasks for specific times in the future.
transfer.sh
Easy file sharing from the command line.
GitLab Web IDE
The Web IDE editor for GitLab makes it faster and easier to contribute changes to your projects by providing an advanced editor with commit staging.
isomorphic-git
A pure JavaScript implementation of Git for node and browsers.
Tugboat
Preview your working website for every pull request. Enables anyone to visually see what the site will look like for any snapshot of code before it's merged into production.
Gitea
A painless self-hosted Git service.
|
JavaScript Utilities
nano-s3
Small utility to upload a file to Amazon S3.
fulfill
Safer, more cosmopolitan string interpolation.
Shimport
Experimental shim for `import` and `export`. Allows you to use JavaScript modules in all browsers, including dynamic `import()`.
Popbox.js
A tiny customizable, dependency-free JavaScript plugin for creating stackable modals.
grob
grep, but in JavaScript.
worker-threads-pool
Easily manage a pool of Node.js Worker Threads.
fnMatch
Simple implementation of pattern matching using no syntax extensions so you can use it without a transpiler; just include it on your project/website.
Glide.js
Now at version 3+ (details). A dependency-free ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more.
scroll-into-view-if-needed
Ponyfill for upcoming `Element.scrollIntoView()` APIs like `scrollMode: if-needed`, `behavior: smooth` and `block: center`.
websocket-as-promised
A WebSocket client library providing Promise-based API for connecting, disconnecting and messaging with server.
fasy
A utility library of functional programming array iteration helpers (like map(), filter(), etc), as well as composition and transducing.
|
|
