{"id":17502,"date":"2013-06-28T13:01:54","date_gmt":"2013-06-28T05:01:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17502"},"modified":"2025-04-04T01:34:36","modified_gmt":"2025-04-03T17:34:36","slug":"sublime-text-refresh-browser","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/","title":{"rendered":"How to Refresh Changes on Browser with Sublime Text"},"content":{"rendered":"<p>As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We often do this back and forth in the middle of code editing, multiple times.<\/p>\n<p>If you are using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sublimetext.com\/\">Sublime Text<\/a>, you can skip all this and immediately see the result as you go to the browsers. In this post, we will show you how to do this with a Sublime Text package named <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/gcollazo\/BrowserRefresh-Sublime\">BrowserRefresh-sublime<\/a>.<\/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\/sublime-code-snippets\/\" class=\"ref-block__link\" title=\"Read More: Streamlining Your Workflow with Code Snippets in Sublime Text\" rel=\"bookmark\"><span class=\"screen-reader-text\">Streamlining Your Workflow with Code Snippets in Sublime Text<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/sublime-code-snippets.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17378 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/sublime-code-snippets.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Streamlining Your Workflow with Code Snippets in Sublime Text<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs developers, we often find ourselves reusing the same pieces of code multiple times. One efficient way to...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Browser Refresh for Sublime Text<\/h2>\n<p>First of all, we need to install it to our Sublime Text, and the easiest way to do so is through the Package Control.<\/p>\n<h3>Package Installation<\/h3>\n<p>Assuming that you have installed Package Control, you can press <span class=\"key\">Command<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">P<\/span> (Mac) or <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">P<\/span> to display the Command Palette, and search for the <strong>Install Package<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-refresh-browser\/install-package.jpg\" width=\"500\" height=\"150\"><\/figure>\n<p>This will load all available Sublime Text package in the repository. Then, search for <strong>Browser Refresh<\/strong>, and simply hit <span class=\"key\">Enter<\/span> to install it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-refresh-browser\/browser-refresh.jpg\" width=\"500\" height=\"180\"><\/figure>\n<h3>Configuration<\/h3>\n<p>Once the package has been installed, go to <strong>Preferences &gt; Package Settings &gt; Browser Refresh &gt; Key Bindings \u2013 Users<\/strong>. This will bring you to a <code>.sublime-keymap<\/code> file in a new tab.<\/p>\n<p>By default, this file is empty, so let\u2019s add the following syntax between the square brackets <code>[ ... ]<\/code>.<\/p>\n<pre>\r\n[\r\n  {\r\n    \"keys\": [\"command+shift+r\"],\r\n    \"command\": \"browser_refresh\",\r\n    \"args\": {\r\n      \"auto_save\": true,\r\n      \"delay\": 0.0,\r\n      \"activate_browser\": true,\r\n      \"browser_name\": \"all\"\r\n    }\r\n  }\r\n]\r\n\r\n <\/pre>\n<p>For those who are not yet familiar with Sublime Text, all the settings are specified with JavaScript objects, including the keys combination.<\/p>\n<p>As we can see from the above syntax, the <strong>Browser Refresh<\/strong> is performed with the key combination of <span class=\"key\">Command<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">R<\/span>. If you are not comfortable with the default key combination, you can always change the value within the <code>\"keys\": [\"command+shift+r\"]<\/code>.<\/p>\n<p>Furthermore, we can also change the following arguments to specify the action upon hitting the keys:<\/p>\n<table>\n<thead>\n<tr>\n<td>Arguments<\/td>\n<td>Description<\/td>\n<\/tr>\n<\/thead>\n<tr>\n<td><code>auto_save<\/code>:<\/td>\n<td>It specifies whether the document should be saved first before refreshing it in the browser. You can set the value to <code>false<\/code> to disable this action.<\/td>\n<\/tr>\n<tr>\n<td><code>delay<\/code><\/td>\n<td>It specifies the delay before the page is refreshed. The time is specified in seconds, so <code>1.0<\/code> will be equal to a second.<\/td>\n<\/tr>\n<tr>\n<td><code>activate_browser<\/code><\/td>\n<td>It specifies whether the browser window should be active. If the browser is not yet open, hitting the keys will open it. If the browser is running, we will be redirected to the browser. I suggest to always set it to <code>true<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><code>browser_name<\/code><\/td>\n<td>It specifies which browser to use to refresh the document. By default, it is set to Google Chrome. So, if Google Chrome is not your preference, you can change to one of the following <code>Safari<\/code>, <code>Firefox<\/code>, <code>Opera<\/code>, <code>IE<\/code>, <code>Iron<\/code>, and <code>Google Chrome Canary<\/code>.<\/td>\n<\/tr>\n<\/table>\n<p>This time, we will just leaving the configuration as the default. So, when we hit <span class=\"key\">Command<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">R<\/span>, the document is saved, then we are redirected to the browser, and the browser is refreshed.<\/p>\n<h3>A few things to take note<\/h3>\n<ul>\n<li>Open the document on the browser first. Otherwise, the document will not be opened and eventually not be refreshed.<\/li>\n<li>The browser tab that will be refreshed is the active one. So, make sure that you are in the tab where the document is being displayed.<\/li>\n<li>At the time of the writing, it seems that there is a bug in which the document is not refreshed in Firefox 19.<\/li>\n<\/ul>\n<h2>Final Thought<\/h2>\n<p>We can now perform three tasks at once \u2013 Save document, Go to Browser, and Refresh \u2013 just by hitting a key combination. We hope that this tip can help <a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-code-snippets\/\">streamline your workflow<\/a> a little.<\/p>\n<p>For more, visit the project at Github: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/gcollazo\/BrowserRefresh-Sublime\">BrowserRefresh-Sublime<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We often do this back and forth in the middle of code editing, multiple times. If you are using Sublime Text, you can skip all this&hellip;<\/p>\n","protected":false},"author":113,"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":[2499,316],"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 Refresh Changes on Browser with Sublime Text - Hongkiat<\/title>\n<meta name=\"description\" content=\"As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We\" \/>\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\/sublime-text-refresh-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Refresh Changes on Browser with Sublime Text\" \/>\n<meta property=\"og:description\" content=\"As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/\" \/>\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=\"2013-06-28T05:01:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:34:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-refresh-browser\/install-package.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Refresh Changes on Browser with Sublime Text\",\"datePublished\":\"2013-06-28T05:01:54+00:00\",\"dateModified\":\"2025-04-03T17:34:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/\"},\"wordCount\":583,\"commentCount\":45,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sublime-text-refresh-browser\\\/install-package.jpg\",\"keywords\":[\"sublime text\",\"Web Browsers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/\",\"name\":\"How to Refresh Changes on Browser with Sublime Text - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sublime-text-refresh-browser\\\/install-package.jpg\",\"datePublished\":\"2013-06-28T05:01:54+00:00\",\"dateModified\":\"2025-04-03T17:34:36+00:00\",\"description\":\"As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sublime-text-refresh-browser\\\/install-package.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sublime-text-refresh-browser\\\/install-package.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-refresh-browser\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Refresh Changes on Browser with Sublime Text\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Refresh Changes on Browser with Sublime Text - Hongkiat","description":"As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We","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\/sublime-text-refresh-browser\/","og_locale":"en_US","og_type":"article","og_title":"How to Refresh Changes on Browser with Sublime Text","og_description":"As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We","og_url":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-06-28T05:01:54+00:00","article_modified_time":"2025-04-03T17:34:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-refresh-browser\/install-package.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Refresh Changes on Browser with Sublime Text","datePublished":"2013-06-28T05:01:54+00:00","dateModified":"2025-04-03T17:34:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/"},"wordCount":583,"commentCount":45,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-refresh-browser\/install-package.jpg","keywords":["sublime text","Web Browsers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/","url":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/","name":"How to Refresh Changes on Browser with Sublime Text - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-refresh-browser\/install-package.jpg","datePublished":"2013-06-28T05:01:54+00:00","dateModified":"2025-04-03T17:34:36+00:00","description":"As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-refresh-browser\/install-package.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-refresh-browser\/install-package.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Refresh Changes on Browser with Sublime Text"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4yi","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17502","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17502"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17502\/revisions"}],"predecessor-version":[{"id":73610,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17502\/revisions\/73610"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17502"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}