Skip to content

Editing keyboardist release post #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
methodofaction wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Editing keyboardist release post #1

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d416e8
Update index.md
methodofaction Jun 9, 2018
478e765
Merge branch 'develop' into patch-1
soska Jun 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/posts/2018/6/4/keyboardist/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ tags: [Open Source, Keyboardist, React, JavaScript]

![](keyboardist.png)

I really like my keyboard shortcuts. Nothing says Power User™ than expertly using an application without even without touching the mouse. So, whenever I am building a web app I always try to add some keyboard capabilites to navigate the UI.
I really enjoy my keyboard shortcuts. Nothing says Power User™ more than breezing through the UI without reaching for the mouse. So, whenever I am building a web app I always try to add some keyboard capabilites to navigate the interface.

Recently, while making our React Dashboard I wanted to add some keyboard shortcuts, for example, having the global search input gain focus when the slash (`/`) key is pressed. That's a pretty common and useful shortcut right?. I couldn't find an easy and declarative way to do this in React so I built a component that works like this.
Recently I wanted to add some keyboard shortcuts to our React Dashboard. Simple example: focus the search input when the slash (`/`) key is pressed. That's a pretty common and useful shortcut, right?. I couldn't find an easy and declarative way to do this in React, so I built a component that works like this:

```javascript
class Dashboard extends React.Component {
Expand All @@ -37,11 +37,11 @@ class Dashboard extends React.Component {
}
```

I really liked this approach because it is declarative and since it's a component, it takes care of suscribing/unsuscribing to events using the component's lifecycle. We've been using this in production for a couple years now and despite some tweaking I'm very happy with it.
I liked this approach because it is declarative, and since it's a component, it takes care of suscribing/unsuscribing to events using the component's lifecycle. We've been using this in production for a couple years now and despite some tweaking I'm very happy with it.

Just recently I realized that most of what this component is doing is not tied to React itself, so I extracted the code into a dependency-free, library-agnostic JavaScript library called [Keyboardist](https://github.com/soska/keyboardist) and I'm releasing it along with [React-Keyboardist](https://github.com/soska/react-keyboardist) which is the React wrapper.
But I recently realized that most of what this component is doing is not tied to React itself, so I extracted the code into a dependency-free, library-agnostic JavaScript library called [Keyboardist](https://github.com/soska/keyboardist.js) and I'm releasing it along with [React-Keyboardist](https://github.com/soska/react-keyboardist) which is the React wrapper.

This is what pure-javascript Keyboardist looks like.
This is what pure-javascript Keyboardist looks like:

```javascript
// import the library
Expand All @@ -57,17 +57,17 @@ const subscription = listener.subscribe('Slash', focusSearch);
subscription.unsuscribe();
```

It has a [really simple API](https://github.com/soska/keyboardist) and I hope to make wrappers for other frameworks other than React.
It has a [really simple API](https://github.com/soska/keyboardist.js) and I hope to make wrappers for some frameworks besides React.

You can install them via `npm` or `yarn`.

## Demos

I built two simple demos for both Keyboardist and React-Keyboardist. Their require, you know, a keyboard.
I built two simple demos for both Keyboardist and React-Keyboardist. They require, you know, a keyboard.

* [Keyboardist Demo](https://soska.github.io/keyboardist/docs/index.html)
* [React-Keyboardist Demo](https://soska.github.io/react-keyboardist/docs/index.html)

## Meta

This is my first ever Open Source package and I'm kinda freaked out about the reception (or lack thereof) that this is going to receive. Regardless, I would be very happy to hear any feedback. If you have any, you can [find me on Twitter](https://twitter.com/soska) or via email at **arm.sosa[at]gmail.com**.
This is my first ever Open Source package and I'm kinda freaked out about the reception (or lack thereof) that this is going to receive. Regardless, I would be very happy to hear your feedback. If you have any, you can [find me on Twitter](https://twitter.com/soska) or via email at **arm.sosa[at]gmail.com**.