-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathpath---2018-6-4-keyboardist-a2bcbd3bf9d6cbd2b53e.js
More file actions
2 lines (2 loc) · 9.7 KB
/
path---2018-6-4-keyboardist-a2bcbd3bf9d6cbd2b53e.js
File metadata and controls
2 lines (2 loc) · 9.7 KB
1
2
webpackJsonp([0xce75ea366f85],{421:function(a,s){a.exports={data:{site:{siteMetadata:{title:"Armando Sosa",author:"Armando Sosa"}},markdownRemark:{id:"/Users/soska/dev/personal/soska.github.com/src/posts/2018/6/4/keyboardist/index.md absPath of file >>> MarkdownRemark",html:'<p>\n <a\n class="gatsby-resp-image-link"\n href="/static/keyboardist-afe22172fb5a3fc5453cca6d9275b4e1-9f6e6.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n \n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; ; max-width: 590px; margin-left: auto; margin-right: auto;"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAACv0lEQVQoz33S3UtTcRwG8FMUURruRZ0vm2VLEal5EWjLokypm/4CCaSbooiiIoxEbBaCWoHVxcQpQkQEsyBIFwSSsRm+sLPt7Jwz3dzLefudnXPmnBvzbLZfszLIi567D9/n6uGL8DyzB8LELuRPBI7ZC+H6Did3OLXDaeRvKDqmcJGsWia4RohzZSQQC9xeqlgm2CaIsRqSFQs8+Ja5k3mX+lih0I1T+T5rhB66dIlfLXQRjCpDcMacjytDYNZbji9EtMJyVC9RrBZCTBXyAa0UEI7GOU4HYVCJo0DL40xtIgry94iSWKSq1iKSPp7OlEPoKfbOR7Sin6+R6GgpktlYqeclugzl7G0SFIty8kr99Gf3oQXG3oLB9L4sPdfABr2VGMSaHFJsvwzsBiabUM75Zy5SlifqzZS/jpEiFS7e0QZWCQWy5GEvCOxySQBC5er4/fbgaLeZGLjWJZk7emw3TZalwd7O+NCt687+nkfvLz8YDI6ZnkdHrj5+dcXcy1tu9wRdgUtATitDorsSZrFqJIADrWveq4JxWM8P9bVP3RvsRZ8+MyXfDQ/MmIanfaauu4mRhyOuF+ZJoq9zNPb2Tjdv7bOM33jTT9lednAsU+VA+YNZAhhzJNAg+Q1KifmwDqwI1alFrGbjg/WEc+jTWcH61ShNfGnKWsca2dcfmxM27Hgmk9LA9YkKNyZrlxfC1SIlaCBEVVsbCn7we0M5vXKMl5hyFDjaqBxWlIOCPgV/FDvjc+ckGCrchGtHaCiXOMXZ8yCBKjIZrpYTgxVuYbZVSrkUmXSojhHDlSjvaAVxXIH4XGwLWBWUjETqkgJh8DmZMyxNFzM8VrXO4w0+J30acNQvJwXS4EPZZk4EalrAdUmRNJAodwrEomo6Sh6GslePYPZwwfZPzk7Gdnu+hQ5s+/uU+K9t//dWfgIHjOca1bkxXQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n >\n <img\n class="gatsby-resp-image-image"\n style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n alt="keyboardist"\n title=""\n src="/static/keyboardist-afe22172fb5a3fc5453cca6d9275b4e1-fb8a0.png"\n srcset="/static/keyboardist-afe22172fb5a3fc5453cca6d9275b4e1-1a291.png 148w,\n/static/keyboardist-afe22172fb5a3fc5453cca6d9275b4e1-2bc4a.png 295w,\n/static/keyboardist-afe22172fb5a3fc5453cca6d9275b4e1-fb8a0.png 590w,\n/static/keyboardist-afe22172fb5a3fc5453cca6d9275b4e1-526de.png 885w,\n/static/keyboardist-afe22172fb5a3fc5453cca6d9275b4e1-fa2eb.png 1180w,\n/static/keyboardist-afe22172fb5a3fc5453cca6d9275b4e1-9f6e6.png 1200w"\n sizes="(max-width: 590px) 100vw, 590px"\n />\n </span>\n </span>\n \n </a>\n </p>\n<p>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.</p>\n<p>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 (<code class="language-text">/</code>) 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.</p>\n<div class="gatsby-highlight">\n <pre class="language-javascript"><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">Dashboard</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n <span class="token function">focusSearch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// do some vodoo here to get the search focused</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">doSomethingElseWhenPressingSpace</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'Space was pressed\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"dashboard"</span><span class="token operator">></span>\n <span class="token operator"><</span>Keyboardist\n bindings<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n Slash<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>focusSearch<span class="token punctuation">,</span>\n Space<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>doSomethingElseWhenPressingSpace<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span>\n <span class="token operator">/</span><span class="token operator">></span>\n <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre>\n </div>\n<p>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.</p>\n<p>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 <a href="https://soska.github.io/keyboardist.js">Keyboardist</a> and I’m releasing it along with <a href="https://soska.github.io/react-keyboardist">React-Keyboardist</a> which is the React wrapper.</p>\n<p>This is what pure-javascript Keyboardist looks like.</p>\n<div class="gatsby-highlight">\n <pre class="language-javascript"><code class="language-javascript"><span class="token comment">// import the library</span>\n<span class="token keyword">import</span> createListener <span class="token keyword">from</span> <span class="token string">\'keyboardist\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// creates a listener, by default it listens to \'keydown\' events.</span>\n<span class="token keyword">const</span> listener <span class="token operator">=</span> <span class="token function">createListener</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">//the listener has a suscribe function</span>\n<span class="token keyword">const</span> subscription <span class="token operator">=</span> listener<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token string">\'Slash\'</span><span class="token punctuation">,</span> focusSearch<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// And later you want to cancel the subscription for some reason</span>\nsubscription<span class="token punctuation">.</span><span class="token function">unsuscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n </div>\n<p>It has a <a href="https://soska.github.io/keyboardist.js">really simple API</a> and I hope to make wrappers for other frameworks other than React.</p>\n<p>You can install them via <code class="language-text">npm</code> or <code class="language-text">yarn</code>.</p>\n<h2>Demos</h2>\n<p>I built two simple demos for both Keyboardist and React-Keyboardist. Their require, you know, a keyboard.</p>\n<ul>\n<li><a href="https://soska.github.io/keyboardist.js/docs/index.html">Keyboardist Demo</a></li>\n<li><a href="https://soska.github.io/react-keyboardist/docs/index.html">React-Keyboardist Demo</a></li>\n</ul>\n<h2>Meta</h2>\n<p>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 <a href="https://twitter.com/soska">find me on Twitter</a> or via email at <strong>arm.sosa[at]gmail.com</strong>.</p>',frontmatter:{title:"Presenting Keyboardist",subtitle:"This is me, showing my first open source package.",blurb:null,date:"June 04, 2018"}}},pathContext:{slug:"/2018/6/4/keyboardist/",previous:{fields:{slug:"/2018/5/29/git-hub-pages-three-ways/"},frontmatter:{title:"GitHub Pages Three Ways",subtitle:"Why you may not need a hosting company",blurb:"Is it weird that GitHub is quickly becoming my favorite hosting platform?"}},next:null}}}});
//# sourceMappingURL=path---2018-6-4-keyboardist-a2bcbd3bf9d6cbd2b53e.js.map