{"id":29571,"date":"2020-05-28T21:14:53","date_gmt":"2020-05-28T13:14:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29571"},"modified":"2023-04-06T19:13:39","modified_gmt":"2023-04-06T11:13:39","slug":"overhang-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/","title":{"rendered":"Overhang.js: jQuery Plugin for Dropdown Notification Messages"},"content":{"rendered":"<p>How annoying are the <strong>default JS alert boxes<\/strong>? They feel like a relic from a primitive bygone era of web development.<\/p>\n<p>Nowadays, we can <a href=\"https:\/\/www.hongkiat.com\/blog\/pnotify\/\">make <strong>unobtrusive notification messages<\/strong><\/a> that share the same information but <strong>don\u2019t interrupt the user experience<\/strong>. And that\u2019s exactly what you can do with <strong><a target=\"_blank\" href=\"https:\/\/paulkr.github.io\/overhang.js\/\" rel=\"noopener noreferrer\">overhang.js<\/a><\/strong>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/\" class=\"ref-block__link\" title=\"Read More: Web Design: Hide \/ Show Notification Bar With CSS3\" rel=\"bookmark\"><span class=\"screen-reader-text\">Web Design: Hide \/ Show Notification Bar With CSS3<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/show-n-hide-notification-bar.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17562 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/show-n-hide-notification-bar.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Web Design: Hide \/ Show Notification Bar With CSS3<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tInspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<figure><a target=\"_blank\" href=\"https:\/\/paulkr.github.io\/overhang.js\/\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/overhang-js\/01-overhang-js-plugin.jpg\" alt=\"overhang js\" width=\"800\" height=\"443\"><\/a><\/figure>\n<p>This free jQuery plugin can <strong>add custom notification bars<\/strong> that drop down from the top of the screen. They\u2019re <strong>positioned via CSS<\/strong> and <strong>animated with JavaScript<\/strong>, so they can drop down from a fixed point at the top <strong>regardless of page length<\/strong>.<\/p>\n<p>You can build messages that <strong>auto-close after a certain time<\/strong>, or others that <strong>require user input<\/strong>.<\/p>\n<p>Messages can <strong>relay success, failure, error, or simple notifications<\/strong> with information about the user or the page. Messages can also <strong>have their own yes\/no buttons<\/strong> to ask users questions like a JavaScript prompt alert.<\/p>\n<p>There\u2019s even an option to create prompts that <strong>drop down with an input field<\/strong>. This would be perfect for an email <a href=\"https:\/\/www.hongkiat.com\/blog\/newsletter-signup-forms-tools\/\">opt-in form<\/a>.<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/paulkr.github.io\/overhang.js\/\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/overhang-js\/02-overhang-promp-message.jpg\" alt=\"overhang plugin\" width=\"800\" height=\"300\"><\/a><\/figure>\n<p>Overhang.js <strong>supports all the major browsers supported by jQuery<\/strong> and it\u2019s also <strong>powered by jQuery UI<\/strong> for the animated features.<\/p>\n<p>Along with the jQuery & jQuery UI libraries, you\u2019ll also need to <strong>include a custom CSS file<\/strong> with the plugin. You can always <strong>merge this with the stylesheet of your website<\/strong> to reduce HTTP requests.<\/p>\n<p>Every call made to the <code>overhang()<\/code> method can <strong>take any number of parameters<\/strong>. These are <strong>called \u201coptions\u201d<\/strong> and they give you full control over each notification box.<\/p>\n<p>You can change the <strong>animation speed<\/strong>, <strong>duration<\/strong>, <strong>easing<\/strong>, and <strong>box size\/color<\/strong>, along with other design features.<\/p>\n<p>Here\u2019s a <strong>sample snippet<\/strong> demonstrating how to <strong>create a confirmation box<\/strong>:<\/p>\n<pre>\r\n\/\/ Some confirmation\r\n$(\"body\").overhang({\r\n   type: \"confirm\",\r\n   yesMessage: \"Yes please!\",\r\n   noMessage: \"No thanks.\"\r\n});\r\n<\/pre>\n<p>You can see this is <strong>pretty simple<\/strong> and it <strong>doesn\u2019t require much jQuery code<\/strong>.<\/p>\n<p>To <strong>download a copy<\/strong> of the plugin, you can <a target=\"_blank\" href=\"https:\/\/github.com\/paulkr\/overhang.js\" rel=\"noopener noreferrer\">visit the repo<\/a> on GitHub where you can also browse through the source files directly. Or, if you want to <strong>see more live examples<\/strong> head on over to the <a target=\"_blank\" href=\"https:\/\/paulkr.github.io\/overhang.js\/\" rel=\"noopener noreferrer\">Overhang.js website<\/a>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/headroom-js\/\" class=\"ref-block__link\" title=\"Read More: Create an Auto-Hiding Sticky Header with Headroom.js\" rel=\"bookmark\"><span class=\"screen-reader-text\">Create an Auto-Hiding Sticky Header with Headroom.js<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/headroom-js.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-29378 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/headroom-js.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Create an Auto-Hiding Sticky Header with Headroom.js<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAuto-hiding headers have been steadily popular in web design for quite a while. Many blogs and online magazines...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>How annoying are the default JS alert boxes? They feel like a relic from a primitive bygone era of web development. Nowadays, we can make unobtrusive notification messages that share the same information but don\u2019t interrupt the user experience. And that\u2019s exactly what you can do with overhang.js. This free jQuery plugin can add custom&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[3497,2543],"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>Overhang.js: jQuery Plugin for Dropdown Notification Messages - Hongkiat<\/title>\n<meta name=\"description\" content=\"How annoying are the default JS alert boxes? They feel like a relic from a primitive bygone era of web development. Nowadays, we can make unobtrusive\" \/>\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\/overhang-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Overhang.js: jQuery Plugin for Dropdown Notification Messages\" \/>\n<meta property=\"og:description\" content=\"How annoying are the default JS alert boxes? They feel like a relic from a primitive bygone era of web development. Nowadays, we can make unobtrusive\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/overhang-js\/\" \/>\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=\"2020-05-28T13:14:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:13:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/overhang-js\/01-overhang-js-plugin.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Overhang.js: jQuery Plugin for Dropdown Notification Messages\",\"datePublished\":\"2020-05-28T13:14:53+00:00\",\"dateModified\":\"2023-04-06T11:13:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/\"},\"wordCount\":348,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/overhang-js\\\/01-overhang-js-plugin.jpg\",\"keywords\":[\"Javascript Library\",\"notification bar\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/\",\"name\":\"Overhang.js: jQuery Plugin for Dropdown Notification Messages - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/overhang-js\\\/01-overhang-js-plugin.jpg\",\"datePublished\":\"2020-05-28T13:14:53+00:00\",\"dateModified\":\"2023-04-06T11:13:39+00:00\",\"description\":\"How annoying are the default JS alert boxes? They feel like a relic from a primitive bygone era of web development. Nowadays, we can make unobtrusive\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/overhang-js\\\/01-overhang-js-plugin.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/overhang-js\\\/01-overhang-js-plugin.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/overhang-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Overhang.js: jQuery Plugin for Dropdown Notification Messages\"}]},{\"@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\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Overhang.js: jQuery Plugin for Dropdown Notification Messages - Hongkiat","description":"How annoying are the default JS alert boxes? They feel like a relic from a primitive bygone era of web development. Nowadays, we can make unobtrusive","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\/overhang-js\/","og_locale":"en_US","og_type":"article","og_title":"Overhang.js: jQuery Plugin for Dropdown Notification Messages","og_description":"How annoying are the default JS alert boxes? They feel like a relic from a primitive bygone era of web development. Nowadays, we can make unobtrusive","og_url":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-05-28T13:14:53+00:00","article_modified_time":"2023-04-06T11:13:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/overhang-js\/01-overhang-js-plugin.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Overhang.js: jQuery Plugin for Dropdown Notification Messages","datePublished":"2020-05-28T13:14:53+00:00","dateModified":"2023-04-06T11:13:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/"},"wordCount":348,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/overhang-js\/01-overhang-js-plugin.jpg","keywords":["Javascript Library","notification bar"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/overhang-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/","url":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/","name":"Overhang.js: jQuery Plugin for Dropdown Notification Messages - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/overhang-js\/01-overhang-js-plugin.jpg","datePublished":"2020-05-28T13:14:53+00:00","dateModified":"2023-04-06T11:13:39+00:00","description":"How annoying are the default JS alert boxes? They feel like a relic from a primitive bygone era of web development. Nowadays, we can make unobtrusive","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/overhang-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/overhang-js\/01-overhang-js-plugin.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/overhang-js\/01-overhang-js-plugin.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/overhang-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Overhang.js: jQuery Plugin for Dropdown Notification Messages"}]},{"@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\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7GX","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29571","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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29571"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29571\/revisions"}],"predecessor-version":[{"id":65833,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29571\/revisions\/65833"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29571"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}