https://javascriptbit.com/component---src-templates-blog-post-js-c…avascript-index-mdx-b31a9ee1242290b3f70b.js

1"use strict";(self.webpackChunkjavascript_bit=self.webpackChunkjavascript_bit||[]).push([[2256],{259:function(e,t,n){n.d(t,{Zo:function(){return u},ah:function(){return i}});var a=n(9142);function r(e,t,n){return(t=(0,a.Z)(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var s=n(7294);function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var c=s.createContext({});function i(e){var t=s.useContext(c);return s.useMemo((function(){return"function"==typeof e?e(t):o(o({},t),e)}),[t,e])}var p={};function u(e){var t,n=e.components,a=e.children;return t=e.disableParentContext?"function"==typeof n?n({}):n||p:i(n),s.createElement(c.Provider,{value:t},a)}},6303:function(e,t,n){n.r(t),n.d(t,{Head:function(){return m},default:function(){return d}});var a=n(259),r=n(7294);function s(e){var t=Object.assign({p:"p",span:"span",h2:"h2",h3:"h3",a:"a",iframe:"iframe"},(0,a.ah)(),e.components),n=t.FullscreenContainer;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("FullscreenContainer",!0),r.createElement(r.Fragment,null,r.createElement(t.p,null,r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 630px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/6f4e8ce00884e92c2df4c7b25cf3b2cc/47d47/sergi-kabrera-2xU7rYxsTiM-unsplash.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 67.08860759493672%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAgABBP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAes4gyj/xAAXEAADAQAAAAAAAAAAAAAAAAAAEBEB/9oACAEBAAEFAq6av//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EAB0QAAMAAAcAAAAAAAAAAAAAAAABERAhMUFhkeH/2gAIAQEAAT8hbvCrgjJzUaP0l3fZ/9oADAMBAAIAAwAAABBAz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB0QAQADAAEFAAAAAAAAAAAAAAEAESFRMUFhkaH/2gAIAQEAAT8Q2rs5rIu767sbt15YJYdJV/YBCKLXVjzLpo6j/9k=\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="A simple keyboard"\n        title="A simple keyboard"\n        src="/static/6f4e8ce00884e92c2df4c7b25cf3b2cc/828fb/sergi-kabrera-2xU7rYxsTiM-unsplash.jpg"\n        srcset="/static/6f4e8ce00884e92c2df4c7b25cf3b2cc/ff44c/sergi-kabrera-2xU7rYxsTiM-unsplash.jpg 158w,\n/static/6f4e8ce00884e92c2df4c7b25cf3b2cc/a6688/sergi-kabrera-2xU7rYxsTiM-unsplash.jpg 315w,\n/static/6f4e8ce00884e92c2df4c7b25cf3b2cc/828fb/sergi-kabrera-2xU7rYxsTiM-unsplash.jpg 630w,\n/static/6f4e8ce00884e92c2df4c7b25cf3b2cc/0ede0/sergi-kabrera-2xU7rYxsTiM-unsplash.jpg 945w,\n/static/6f4e8ce00884e92c2df4c7b25cf3b2cc/3ac88/sergi-kabrera-2xU7rYxsTiM-unsplash.jpg 1260w,\n/static/6f4e8ce00884e92c2df4c7b25cf3b2cc/47d47/sergi-kabrera-2xU7rYxsTiM-unsplash.jpg 3872w"\n        sizes="(max-width: 630px) 100vw, 630px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n  </a>\n    </span>'}}),"\n",r.createElement("span",null,"Photo by ",r.createElement("a",{href:"https://unsplash.com/@skabrera?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"},"Sergi Kabrera")," on ",r.createElement("a",{href:"https://unsplash.com/photos/2xU7rYxsTiM?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"},"Unsplash"))),"\n",r.createElement(t.h2,null,"Listening for keyboard shortcuts"),"\n",r.createElement(t.p,null,"Handling keyboard shortcuts is really easy thanks to newer APIs. A keyboard shortcut usually follows the following pattern:"),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">Modifier Key 1 + Modifier Key 2 (optional) + Alphanumeric/Arrow keys</code></pre></div>'}}),"\n",r.createElement(t.p,null,'Let\'s take an example - suppose you want to detect whenever a user presses something like "Alt + Arrow Left/Right".'),"\n",r.createElement(t.h3,null,"Code"),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">\'keydown\'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>altKey<span class="token punctuation">)</span> <span class="token punctuation">{</span>

1\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">\'ArrowRight\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">\'Alt + Arrow Left were pressed\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">\'ArrowLeft\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">\'Alt + Arrow Right were pressed\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span>\n    <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre></div>'}}),"\n",r.createElement(t.p,null,"The great thing about keyboard events is, you have these 4 properties on keypress/keyup/keydown ",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">event</code>'}}),":"),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">"altKey": false|true,\n"ctrlKey": false|true,\n"metaKey": false|true,\n"shiftKey": false|true,</code></pre></div>'}}),"\n",r.createElement(t.h3,null,"Key Codes Demo:"),"\n",r.createElement(t.p,null,"Check ",r.createElement(t.a,{href:"https://www.toptal.com/developers/keycode"},"here")," for the demo around keycodes."),"\n",r.createElement(n,{child:r.createElement(t.iframe,Object.assign({src:"https://www.toptal.com/developers/keycode"},e,{title:"random-iframe-name"}))}))}var l=function(e){void 0===e&&(e={});var t=Object.assign({},(0,a.ah)(),e.components).wrapper;return t?r.createElement(t,e,r.createElement(s,e)):s(e)};var o=n(3688),c=n(2198),i=n(9357),p=n(4992),u=n(6376),A=function(e){var t,n=e.data,a=n.previous,s=n.next,l=n.site,i=n.mdx,A=e.location,m=e.pageContext,d=e.children,g=(null===(t=l.siteMetadata)||void 0===t?void 0:t.title)||"Title",f=(m||{}).seriesPosts,y=i.fields;return r.createElement(c.Z,{location:A,title:g},r.createElement("article",{className:"blog-post",itemScope:!0,itemType:"http://schema.org/Article"},r.createElement("header",null,r.createElement("h1",{itemProp:"headline"},i.frontmatter.title),r.createElement("p",null,i.frontmatter.category&&r.createElement("span",{className:"category-pill"},i.frontmatter.category),i.frontmatter.date,(null==y?void 0:y.wordCount)>0&&r.createElement("span",{style:{marginLeft:"0.75rem",color:"inherit",opacity:.6}},"· ",Math.max(1,Math.round(y.wordCount/200))," min read"))),i.frontmatter.series&&f&&f.length>0&&r.createElement(u.Z,{seriesSlug:i.frontmatter.series,currentSlug:i.fields.slug,seriesPosts:f}),r.createElement("section",{itemProp:"articleBody"},d),r.createElement(p.Z),r.createElement("hr"),r.createElement("footer")),r.createElement("nav",{className:"blog-post-nav"},r.createElement("ul",{style:{display:"flex",flexWrap:"wrap",justifyContent:"space-between",listStyle:"none",padding:0}},r.createElement("li",null,a&&r.createElement(o.Link,{to:a.fields.slug,rel:"prev"},"← ",a.frontmatter.title)),r.createElement("li",null,s&&r.createElement(o.Link,{to:s.fields.slug,rel:"next"},s.frontmatter.title," →")))))},m=function(e){var t=e.data.mdx;return r.createElement(i.Z,{title:t.frontmatter.title,description:t.frontmatter.description||t.excerpt})};function d(e){return r.createElement(A,e,r.createElement(l,e))}},6376:function(e,t,n){var a=n(2982),r=n(7294),s=n(3688),l={"browser-concurrency":{title:"Browser Concurrency",de

1scription:"A practical guide to sharing data and coordinating work across browser threads — tabs, workers, and shared memory."},"frontend-system-design":{title:"Frontend System Design Interview Prep",description:"A complete guide to acing frontend system design interviews — from the RADIO framework to real-world component designs asked at FAANG."}};t.Z=function(e){var t=e.seriesSlug,n=e.currentSlug,o=e.seriesPosts;if(!t||!o||0===o.length)return null;var c=l[t]||{title:t,description:""},i=(0,a.Z)(o).sort((function(e,t){return e.seriesOrder-t.seriesOrder})),p=i.findIndex((function(e){return e.slug===n})),u=p>=0?"Part "+(p+1)+" of "+i.length:i.length+" articles";return r.createElement("nav",{"aria-label":c.title+" series navigation",style:{borderLeft:"4px solid #4f46e5",background:"#f0f4ff",borderRadius:"0 6px 6px 0",padding:"1rem 1.25rem",marginBottom:"2rem",fontFamily:"var(--fontFamily-sans, system-ui, sans-serif)"}},r.createElement("p",{style:{margin:"0 0 0.75rem 0",fontSize:"0.95rem",fontWeight:700,color:"#1e1b4b",letterSpacing:"-0.01em"}},"📚 ",c.title," — ",u),r.createElement("ol",{style:{listStyle:"none",padding:0,margin:"0 0 0.75rem 0"}},i.map((function(e,t){var a=e.slug===n,l=t<p,o={marginBottom:"0.35rem",fontSize:"0.9rem",display:"flex",alignItems:"baseline",gap:"0.4rem"},c=a?"→":l?"✓":"  ",i={flexShrink:0,width:"1.2em",color:a?"#4f46e5":l?"#6b7280":"#9ca3af",fontWeight:a?700:400};return a?r.createElement("li",{key:e.slug,style:o,"aria-current":"page"},r.createElement("span",{style:i},c),r.createElement("strong",{style:{color:"#1e1b4b"}},t+1,". ",e.title)):r.createElement("li",{key:e.slug,style:o},r.createElement("span",{style:i},c),r.createElement(s.Link,{to:e.slug,style:{color:l?"#6b7280":"#4f46e5",textDecoration:"none"}},t+1,". ",e.title))}))),r.createElement(s.Link,{to:"/series/"+t+"/",style:{fontSize:"0.85rem",color:"#4f46e5",textDecoration:"none",fontWeight:600}},"View all articles in this series →"))}},4992:function(e,t,n){var a=n(7294);t.Z=function(){var e=(0,a.useState)(!1),t=e[0],n=e[1];(0,a.useEffect)((function(){sessionStorage.getItem("hideKofi")&&n(!0)}),[]);return t?null:a.createElement(a.Fragment,null,a.createElement("a",{target:"_blank",rel:"noreferrer",href:"https://ko-fi.com/javascriptbit"},"Donate"),a.createElement("button",{style:{marginLeft:"1em"},onClick:function(e){e.preventDefault(),n(!0),sessionStorage.setItem("hideKofi","true")}},"Hide for now"))}},2198:function(e,t,n){n.d(t,{Z:function(){return c}});var a=n(7294),r=n(3688),s=n(259);var l=function(){var e=a.useState(null),t=e[0],n=e[1];a.useEffect((function(){var e=document.documentElement.getAttribute("data-theme")||"light";n(e)}),[]);return null===t?a.createElement("span",{style:{width:32,display:"inline-block"}}):a.createElement("button",{onClick:function(){var e="dark"===t?"light":"dark";n(e),document.documentElement.setAttribute("data-theme",e);try{localStorage.setItem("jsbit-theme",e)}catch(a){}},"aria-label":"dark"===t?"Switch to light mode":"Switch to dark mode",title:"dark"===t?"Light mode":"Dark mode",style:{background:"none",border:"none",cursor:"pointer",fontSize:"1.2rem",padding:"4px 8px",borderRadius:"6px",lineHeight:1,color:"inherit",opacity:.75,transition:"opacity 0.15s ease"},onMouseEnter:function(e){return e.currentTarget.style.opacity="1"},onMouseLeave:function(e){return e.currentTarget.style.opacity="0.75"}},"dark"===t?"☀️":"🌙")},o={FullscreenContainer:function(e){var t=e.child,n=(0,a.useState)(!1),r=n[0],s=n[1],l=(0,a.useCallback)((function(e){"Enter"===e.key?s(!r):"Escape"===e.key&&s(!1)}),[r]);return a.createElement("div",{className:"fullscreen "+(r?"active":"")},a.createElement("div",{className:"buttons-container"},a.createElement("span",{tabIndex:-1,role:"button",onClick:function(){return s(!r)},onKeyUp:l},a.createElement("img",{src:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAw

1MDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTUuMDAwMDAwLCAtMjU3LjAwMDAwMCkiPjxnIGlkPSJmdWxsc2NyZWVuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTUuMDAwMDAwLCAyNTcuMDAwMDAwKSI+PHBhdGggZD0iTTIsOSBMMCw5IEwwLDE0IEw1LDE0IEw1LDEyIEwyLDEyIEwyLDkgTDIsOSBaIE0wLDUgTDIsNSBMMiwyIEw1LDIgTDUsMCBMMCwwIEwwLDUgTDAsNSBaIE0xMiwxMiBMOSwxMiBMOSwxNCBMMTQsMTQgTDE0LDkgTDEyLDkgTDEyLDEyIEwxMiwxMiBaIE05LDAgTDksMiBMMTIsMiBMMTIsNSBMMTQsNSBMMTQsMCBMOSwwIEw5LDAgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+",alt:"Toggle Full Screen",color:"currentColor"}))),t)}},c=function(e){var t,n=e.location,c=e.title,i=e.children,p="/"===n.pathname,u=a.useState(2024),A=u[0],m=u[1];return a.useEffect((function(){m((new Date).getFullYear())}),[]),t=p?a.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},a.createElement("h1",{className:"main-heading"},a.createElement(r.Link,{to:"/"},c)),a.createElement(l,null)):a.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},a.createElement(r.Link,{className:"header-link-home",to:"/"},c),a.createElement(l,null)),a.createElement(s.Zo,{components:o},a.createElement("div",{className:"global-wrapper","data-is-root-path":p},a.createElement("header",{className:"global-header"},t),a.createElement("main",null,i),a.createElement("footer",null,"© ",A,", Built with"," ",a.createElement("a",{href:"https://www.gatsbyjs.com"},"Gatsby"))))}},9357:function(e,t,n){var a=n(7294),r=n(3688);t.Z=function(e){var t,n,s,l=e.description,o=e.title,c=e.children,i=(0,r.useStaticQuery)("2841359383").site,p=l||i.siteMetadata.description,u=null===(t=i.siteMetadata)||void 0===t?void 0:t.title;return a.createElement(a.Fragment,null,a.createElement("title",null,u?o+" | "+u:o),a.createElement("meta",{name:"description",content:p}),a.createElement("meta",{property:"og:title",content:o}),a.createElement("meta",{property:"og:description",content:p}),a.createElement("meta",{property:"og:type",content:"website"}),a.createElement("meta",{name:"twitter:card",content:"summary"}),a.createElement("meta",{name:"twitter:creator",content:(null===(n=i.siteMetadata)||void 0===n||null===(s=n.social)||void 0===s?void 0:s.twitter)||""}),a.createElement("meta",{name:"twitter:title",content:o}),a.createElement("meta",{name:"twitter:description",content:p}),c)}}}]);
2//# sourceMappingURL=component---src-templates-blog-post-js-content-file-path-opt-build-repo-content-blog-handle-keyboard-shortcuts-javascript-index-mdx-b31a9ee1242290b3f70b.js.map