15+ Front-End Tools You Should Know About: My Favorite Finds for 2020

15+ Front-End Tools You Should Know About: My Favorite Finds for 2020

Another year has passed and if you’re like many web developers in the industry, you’ve probably discovered a whole slew of new front-end tools that you’ve considered incorporating into your workflow. I’m in the same boat, especially since I’m deeply involved in regularly researching what’s new in the tools landscape.

In this post, I’m going to round up (with some screenshots and demos) some of the most interesting front-end tools I’ve found that I think you’ll find useful in 2020. These aren’t necessarily the most popular tools or the hottest tools, but I think each of them is unique in their use case and deserve a little more attention. These are essentially my favorite finds of the year in front-end tools.

Front-End Tools: Hotkey

Detecting keystrokes with JavaScript isn’t an overly complex task, but this little utility from the team at GitHub makes it super simple.

With it you can trigger an action on an element with a keyboard shortcut.

The types of shortcuts include a key, key combo, or even key sequence. You can also have multiple shortcuts for a single action.

The JavaScript is just one declaration along with an import:

import {install} from './hotkey.js';

for (const el of document.querySelectorAll('[data-hotkey]')) {
  install(el)
}

Once that code is in place, the main work is done in the HTML. Here’s a list of links that I created to display some content depending on the shortcut used:

<ul>
  <li><a href="https://www.codeinwp.com/#a" data-hotkey="a">Example</a></li>
  <li><a href="#b" data-hotkey="Control+b">Example</a></li>
  <li><a href="#f" data-hotkey="f,p">Example</a></li>
  <li><a href="#and" data-hotkey="&amp; *">Example</a></li>
  <li><a href="#enter" data-hotkey="Enter">Example</a></li>
</ul>

Notice the data-hotkey attributes added to each of the links. These are what enable the hotkeys for the targeted actions (in this case, triggering a :target selector via CSS). Multiple hotkeys are separated by a comma; key combinations are separated by a plus symbol; and key sequences are separated by a space.

Here’s a live demo:

See the Pen Hotkey Demo Page by Louis Lazaris
(@impressivewebs) on CodePen.

Try out each of the shortcuts and notice that the code in the JavaScript panel is minimal. Very simple to set up, once the module is imported. And as a side point

[…]

 



This article was written by Louis Lazaris and originally published on CodeinWP.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top