{"id":23398,"date":"2015-03-06T18:01:34","date_gmt":"2015-03-06T10:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23398"},"modified":"2025-04-24T17:15:10","modified_gmt":"2025-04-24T09:15:10","slug":"keyboard-shortcuts-website","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/","title":{"rendered":"How to Add Keyboard Shortcuts to Your Website"},"content":{"rendered":"<p>Love <a href=\"https:\/\/www.hongkiat.com\/blog\/gplus-shortcuts-tips-tricks\/\" target=\"_blank\" rel=\"noopener\">keyboard shortcuts<\/a>? They can help you save a lot of time, right? Would you like to add keyboard shortcuts to your own website, for the benefit of your visitors? It would greatly improve your site\u2019s accessibility and navigation.<\/p>\n<p>In this post, I will give a quick guide on how to add shortcuts to your web page using a JavaScript library called <a href=\"https:\/\/craig.is\/killing\/mice\" target=\"_blank\" rel=\"noopener\">Mousetrap<\/a>. With Mousetrap you can <strong>designate keys<\/strong> like <kbd>Shift<\/kbd>, <kbd>Ctrl<\/kbd>, <kbd>Alt<\/kbd>, <kbd>Options<\/kbd>, and <kbd>Command<\/kbd> to <strong>perform particular functions in your website<\/strong>. It also works well across older browsers.<\/p>\n<p><strong>More on Hongkiat:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/\" target=\"_blank\" rel=\"noopener\">Creating animated tooltip easily with Hint.Css<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/introjs-step-by-step-guide-tutorial\/\" target=\"_blank\" rel=\"noopener\">Building a step-by-step guide using Intro.Js [Tutorial]<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/\" target=\"_blank\" rel=\"noopener\">How to style HTML5 range slider <\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/\" target=\"_blank\" rel=\"noopener\">How to use cookie & HTML5 localstorage<\/a><\/li>\n<\/ul>\n<h2>Getting Started<\/h2>\n<p>Begin by creating a new HTML document along with the content, and linking the Mousetrap library. I will use the Mousetrap library hosted in CDNjs so that the library will be served through the CloudFlare network, which should be faster than our own server.<\/p>\n<pre>\n&lt;script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/mousetrap\/1.4.6\/mousetrap.min.js\"&gt;&lt;\/script&gt;\n<\/pre>\n<p>Now we will use the Mousetrap <strong>\u2018bind\u2019<\/strong> method to attach keyboard keys to functions. You may assign <strong>a single key, a key combination, or sequence keys<\/strong>, for example:<\/p>\n<h3>Single Key<\/h3>\n<p>In this example, we bind the <kbd>s<\/kbd>.<\/p>\n<pre>\nMousetrap.bind('s', function(e) {\n  \/\/ your function here...\n});\n<\/pre>\n<h3>Combination Key<\/h3>\n<p>In this example, we bind the <kbd>Ctrl<\/kbd> and <kbd>s<\/kbd>. You will need to press the two keys together to perform the designated function.<\/p>\n<pre>\nMousetrap.bind('ctrl+s', function(e) {\n  \/\/ your function here...\n});\n<\/pre>\n<h3>Sequence Key<\/h3>\n<p>In this example, the user will need to press <kbd>g<\/kbd> and then <kbd>s<\/kbd> subsequently. If you are developing a web-based game, this might be useful for adding a secret hidden key combo.<\/p>\n<pre>\nMousetrap.bind('g s', function(e) {\n  \/\/ your function here...\n});\n<\/pre>\n<h2>Using Mousetrap<\/h2>\n<p>We will build a simple web page with a couple of keyboard shortcuts that enable users to access some functionality on the website. We will be using jQuery to make it easier to manipulate the HTML document and select HTML elements.<\/p>\n<pre>\n&lt;script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/mousetrap\/1.4.6\/mousetrap.min.js\"&gt;&lt;\/script&gt;\n<\/pre>\n<p>Let\u2019s begin with something easy.<\/p>\n<p>We are going to bind a key that will allow users to focus on the search input field quickly.<\/p>\n<p>1. The following is the HTML markup for the search along with the <code>id<\/code>.<\/p>\n<pre>\n&lt;input type=\"text\" id=\"search\" class=\"form-control\" placeholder=\"Search for...\"&gt;\n<\/pre>\n<p>2. Next, we create a function that will focus on the search input.<\/p>\n<pre>\nfunction search() {\n  var search = $('#search');\n  search.val('');\n  search.focus();\n}\n<\/pre>\n<p>3. Lastly, we bind a key to run the function.<\/p>\n<pre>\nMousetrap.bind('\/', search);\n<\/pre>\n<p>4. That\u2019s it. You should now be able to navigate to the search input by pressing the <kbd>\/<\/kbd> button.<\/p>\n<figure><img decoding=\"async\" alt=\"Search input focused via shortcut\" src=\"https:\/\/assets.hongkiat.com\/uploads\/keyboard-shortcuts-website\/keyshortcut-search.jpg\"><\/figure>\n<p>Alternately, you may also bind the key combination, <kbd>Ctrl\/Cmd<\/kbd> + <kbd>F<\/kbd>, which is a popular key shortcut used for search in many desktop apps:<\/p>\n<pre>\nMousetrap.bind(['command+f', 'ctrl+f'], search);\n<\/pre>\n<h2>Using Mousetrap with Bootstrap<\/h2>\n<p>It is easy to integrate Mousetrap with a framework, for example, Bootstrap. In this second example, we will show a help window that will display a list of the shortcuts available on the website. Here, I opt for the Bootstrap Modal to present the list, and designate the <kbd>?<\/kbd> key to show the modal.<\/p>\n<p>Although the <kbd>?<\/kbd> is only accessible with the <kbd>Shift<\/kbd> key, binding just the <kbd>?<\/kbd> key is sufficient.<\/p>\n<pre>\nMousetrap.bind('?', function() {\n  $('#help').modal('show');\n});\n<\/pre>\n<p>Now when you hit the <kbd>?<\/kbd> key, a popup will appear.<\/p>\n<figure><img decoding=\"async\" alt=\"Help modal opened with shortcut\" src=\"https:\/\/assets.hongkiat.com\/uploads\/keyboard-shortcuts-website\/keyshortcut-help.jpg\"><\/figure>\n<h2>Tip For Efficient Binding<\/h2>\n<p>Over time, your growing collection of keyboard shortcuts may start to mess up your code. If this happens, there is an extension you can add to make your \u2018key binding\u2019 code more efficient. It is named the \u2018bind dictionary\u2019. Add this extension after the primary Mousetrap library, <code>mousetrap.min.js<\/code>.<\/p>\n<p>Now, instead of separating each key binding, we can neatly group them in a single <code>bind()<\/code> method, like so:<\/p>\n<pre>\nMousetrap.bind({\n  '\/': search,\n  't': tweet,\n  '?': function modal() { $('#help').modal('show'); },\n  'j': function next() { highLight('j') },\n  'k': function prev() { highLight('k') }\n});\n<\/pre>\n<p>For more advanced implementation, you can see the demo that I\u2019ve made. In the demo, you can press the <kbd>J<\/kbd> or <kbd>K<\/kbd> key to highlight the post, and press <kbd>T<\/kbd> to tweet the current post that you highlighted.<\/p>\n<div class=\"button\">\n    <a href=\"https:\/\/hongkiat.github.io\/keyboard-shortcut\/\" rel=\"nofollow noopener\" target=\"_blank\">View Demo<\/a>\n    <a href=\"https:\/\/github.com\/hongkiat\/keyboard-shortcut\/\" rel=\"nofollow noopener\" target=\"_blank\">Download<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Love keyboard shortcuts? They can help you save a lot of time, right? Would you like to add keyboard shortcuts to your own website, for the benefit of your visitors? It would greatly improve your site\u2019s accessibility and navigation. In this post, I will give a quick guide on how to add shortcuts to your&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[2273],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Add Keyboard Shortcuts to Your Website - Hongkiat<\/title>\n<meta name=\"description\" content=\"Love keyboard shortcuts? They can help you save a lot of time, right? Would you like to add keyboard shortcuts to your own website, for the benefit of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Keyboard Shortcuts to Your Website\" \/>\n<meta property=\"og:description\" content=\"Love keyboard shortcuts? They can help you save a lot of time, right? Would you like to add keyboard shortcuts to your own website, for the benefit of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-06T10:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:15:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/keyboard-shortcuts-website\/keyshortcut-search.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"How to Add Keyboard Shortcuts to Your Website\",\"datePublished\":\"2015-03-06T10:01:34+00:00\",\"dateModified\":\"2025-04-24T09:15:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/\"},\"wordCount\":604,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/keyboard-shortcuts-website\\\/keyshortcut-search.jpg\",\"keywords\":[\"Keyboard Shortcuts\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/\",\"name\":\"How to Add Keyboard Shortcuts to Your Website - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/keyboard-shortcuts-website\\\/keyshortcut-search.jpg\",\"datePublished\":\"2015-03-06T10:01:34+00:00\",\"dateModified\":\"2025-04-24T09:15:10+00:00\",\"description\":\"Love keyboard shortcuts? They can help you save a lot of time, right? Would you like to add keyboard shortcuts to your own website, for the benefit of\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/keyboard-shortcuts-website\\\/keyshortcut-search.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/keyboard-shortcuts-website\\\/keyshortcut-search.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/keyboard-shortcuts-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Keyboard Shortcuts to Your Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Keyboard Shortcuts to Your Website - Hongkiat","description":"Love keyboard shortcuts? They can help you save a lot of time, right? Would you like to add keyboard shortcuts to your own website, for the benefit of","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Keyboard Shortcuts to Your Website","og_description":"Love keyboard shortcuts? They can help you save a lot of time, right? Would you like to add keyboard shortcuts to your own website, for the benefit of","og_url":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-03-06T10:01:34+00:00","article_modified_time":"2025-04-24T09:15:10+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/keyboard-shortcuts-website\/keyshortcut-search.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"How to Add Keyboard Shortcuts to Your Website","datePublished":"2015-03-06T10:01:34+00:00","dateModified":"2025-04-24T09:15:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/"},"wordCount":604,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/keyboard-shortcuts-website\/keyshortcut-search.jpg","keywords":["Keyboard Shortcuts"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/","url":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/","name":"How to Add Keyboard Shortcuts to Your Website - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/keyboard-shortcuts-website\/keyshortcut-search.jpg","datePublished":"2015-03-06T10:01:34+00:00","dateModified":"2025-04-24T09:15:10+00:00","description":"Love keyboard shortcuts? They can help you save a lot of time, right? Would you like to add keyboard shortcuts to your own website, for the benefit of","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/keyboard-shortcuts-website\/keyshortcut-search.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/keyboard-shortcuts-website\/keyshortcut-search.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/keyboard-shortcuts-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Keyboard Shortcuts to Your Website"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-65o","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23398"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23398\/revisions"}],"predecessor-version":[{"id":74111,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23398\/revisions\/74111"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23398"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}