Issue #382  (focus() mouse, Frameworks, JSON/DB, Vue)11/12/20

There's an obscure tidbit in MDN's article on the focus() method that I just stumbled across. As you might know, any HTML element that's focusable (e.g. an input or any element with a tabindex value) can receive focus programmatically via JavaScript.

You simply get a reference to the element and use element.focus() to make it behave as if it was tabbed into or selected with the mouse.

But notice what MDN says:

"If you call HTMLElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the HTMLElement."

It's probably rare that you would have to do this, but I'm always a sucker for these obscure little factoids when it comes to DOM/JavaScript. So I've set up a quick-and-dirty CodePen demo where you can try this out.

The first two buttons use click and mouseup, and they work fine. But the third button uses mousedown and although the code is the same, the focus doesn't take effect on the targeted input element. When preventDefault() is added, then the focus is successful:

I don't know for certain why this is needed, but my best guess is that when you do a 'mouse down' action, the 'default' action that naturally follows a 'mouse down' is that the element being 'moused down' then receives focus due to the 'mouse up' action that follows.

But if that were true, that would mean holding the mouse down without mousing up should work too. But it doesn't (you can try it on the third button). So I'm really not sure. If you think you know the answer as to why this happens, feel free to let me know. Otherwise, file this one under the "rare but interesting to know" category.

Now on to this week's tools!

Front-end Frameworks

Hyvor Talk
Hyvor Talk is a commenting platform for websites. While systems like Disqus and Facebook Comments are built to show ads and track users, Hyvor Talk focuses on privacy, customizability, and speed. It also supports Single Sign-on to connect with external userbases. sponsored 

Meraki UI
Beautiful Tailwind CSS components that support RTL languages and fully responsive based on Flexbox and CSS Grid.

vue3-typescript-app-starter
A starter setup for your next Vue 3 / TypeScript app. It uses Vue 3, TypeScript, and webpack, and includes a router, code splitting and tree shaking, and lots more.

Clarity Design System
Now at version 4+. A toolset that includes UX guidelines, HTML/CSS framework, and Angular components.

Oruga
A lightweight library of UI components for Vue without CSS framework dependency.

Wicked Templates
Tailwind CSS templates ready to customize out of the box. Helps you jumpstart your startup's landing page by providing you with easy to customize templates.

React Redux Boilerplate
Opinionated React starter boilerplate + authentication, with using Redux, React Router Dom, Redux Thunk, Axios, and more.

starter-express
A starter project for using Remix  (the serverless toolkit) with Express.

Resium
A library of React components for Cesium, the JavaScript library for creating world-class 3D globes and maps.

Layr
A set of JavaScript/TypeScript libraries to dramatically simplify the development of full-stack applications.

visx
A collection of expressive, low-level visualization primitives that brings together the power of D3.js with the joy of React.

Semantic UI React
Now at version 2+.  The official Semantic UI-React integration.
 

JSON Tools, Databases, etc.

Learn Gatsby, React.js, and friends - $97
A brand new course from Wes Bos that includes 52 HD videos to learn to build and style websites with Gatsby, the popular React-based framework and toolset.   promoted

sql.js
A JavaScript SQL database that allows you to create a relational database and query it entirely in the browser.

Sir.DB
A simple database on the file system. JSON files organized into sub-directories for each table.

NoisePage
A relational database management system (DBMS) designed from the ground up for autonomous deployment.

Sqlectron
A simple and lightweight SQL client desktop/terminal with cross database and platform support.

NestedText
A human-friendly data format for holding data to be entered, edited, or viewed by people. Allows data to be organized similar to JSON, YAML and TOML, but without the complexity and clutter.

TS-SQL
A SQL database implemented purely in TypeScript type annotations, which means that it operates solely on types –  you define a "database" (just a type annotation) and then query it using more type annotations.

Hasura
Now at version 1+. Instant GraphQL APIs with built-in authorization for your data.

DuckDB
An embeddable SQL OLAP database management system.

Object Visualizer
A configurable JSON inspector.

graphqurl
curl for GraphQL with autocomplete, subscriptions, and GraphiQL. Also a dead-simple universal GraphQL client.

Castodia
Connect Google Sheets to databases and automate reports.

Vue Tools

direct-vuex
Use and implement your Vuex store with TypeScript types. Compatible with the Vue 3 Composition API.

reactivue
Use the Vue Composition API in React components.

v-dollar
jQuery-like Vue Reactivity API , that's well-typed.

VueUse
A collection of essential Vue Composition API utilities (inspired by react-use) for Vue 2 and 3.

when
Promised one-time watch for @vue/reactivity.

vue-concurrency
A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.

Vue 3 Playground
A learning project/playground packed with all the new features in the latest version of Vue.
 
vue-disqus
Vue component to integrate Disqus comments in your application, with support for SPA and Vue 2.

vue-social-chat
A component for your visitors and customers to send messages directly to you through social chats or a customized form.

Vue Class Store
Universal Vue stores you write once and use anywhere.

vue-calc
Calculator-like functionality for Vue. Seems to be more of a demo than a code snippet you can use, but you should be able to easily grab the code.

vue-lit
Proof of concept mini custom elements framework powered by @vue/reactivity and lit-html.
 

A Tweet for Thought

Grace Marsh explains how she uses BrailleNote, a tablet/notetaker for blind users.

 

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...

libyear is a project attempting to get people in software development to measure software dependency freshness by means of a single number telling you how up-to-date your dependencies are – thus, "my project is 55 libyears behind."

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris