DEV Community: Omri

Creating a React icon library

Omri — Fri, 12 Aug 2022 19:06:44 +0000

A new library that helps creating A React/Vue/Angular Icon component library easily.
features:

Auto download Icons as SVG directly from figma
Optimized using SVGO
Supports:
- React
- Vue
- React MUI

Start using it right now using npx:

npx @figus/cli ini

Documentation site:
https://www.figus.dev/
Source code:
https://github.com/figus-cli/figus

How to manage keyboard shortcuts in Angular application (The easy way)

Omri — Sun, 15 May 2022 20:00:55 +0000

I have always liked the way Visual Studio Code enabled you to modify/add key binding in a JSON object, which is a pretty nice interface in my opinion.
Taken as an inspiration, I wanted to create a similar and scalable solution for Angular application.
To achieve a pretty scale-able solution keeping mind memory leakage and garbage collection of registered shortcut in a large app. Thus a component based architecture was chosen.

The library supports both Windows and Mac, has a nice built in help screen to show all registered shortcuts and service to create a customize help screen in need.

You can find the library here:
And play with a working example here

How it works

To optimize for performance, only one event listener is registered to the document body.
Each shortcut is then checked when keydown is pressed (this part can still be optimized and will be in the future, but the filtering is pretty quick at the moment so even with 100 registered shortcuts no slowdown are noticeable)
You can use a directive to target a shortcut to work only when a specific element is in focus
Or use a component that will add a global shortcut to your application, and will be cleaned out automatically when the component is destroyed.

Feedback

This is the first library I publish to NPM, any feedback, code related, documentation or anything at all will be greatly appreciated.

Dead Simple Keyboard shortcut management library for Angular

Omri — Thu, 18 Apr 2019 23:02:07 +0000

I have always liked the way Visual Studio Code enabled you to modify/add key binding in a JSON object, which is a pretty nice interface in my opinion.
Taken as an insperation, I wanted to create a similar and scalable solution for Angular application.
To achieve a pretty scale-able solution keeping mind memory leakage and garbage collection of registered shortcut in a large app. Thus a component based architecture was chosen.

The library supports both Windows and Mac, has a nice built in help screen to show all registered shortcuts and service to create a customize help screen in need.

You can find the library here:
And play with a working example here

How it works

To optimize for performance, only one event listener is registered to the document body.
Each shortcut is then checked when keydown is pressed (this part can still be optimized and will be in the future, but the filtering is pretty quick at the moment so even with 100 registered shortcuts no slowdown are noticeable)
You can use a directive to target a shortcut to work only when a specific element is in focus
Or use a component that will add a global shortcut to your application, and will be cleaned out automatically when the component is destroyed.

Feedback

This is the first library I publish to NPM, any feedback, code related, documentation or anything at all will be greatly appreciated.