{"id":18547,"date":"2013-11-05T18:01:39","date_gmt":"2013-11-05T10:01:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18547"},"modified":"2024-05-14T22:17:22","modified_gmt":"2024-05-14T14:17:22","slug":"editing-css-preprocessor-chrome","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/","title":{"rendered":"Editing CSS Preprocessors in Google Chrome"},"content":{"rendered":"<p>As we have discussed in our <a href=\"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/\">previous post series<\/a>, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes them a preferred choice for many developers over traditional CSS.<\/p>\n<p>Google introduced an experimental feature, starting from Google Chrome 29, to streamline workflow when <a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-devtools-app-remote-debugging\/\">debugging<\/a> and editing CSS preprocessors. Let\u2019s see how this feature works.<\/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\/sass-vs-less\/\" class=\"ref-block__link\" title=\"Read More: CSS Preprocessors Compared: Sass vs. LESS\" rel=\"bookmark\"><span class=\"screen-reader-text\">CSS Preprocessors Compared: Sass vs. LESS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/sass-vs-less.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15419 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/sass-vs-less.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">CSS Preprocessors Compared: Sass vs. LESS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThere are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic,...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Before Proceeding<\/h2>\n<p>First of all, we need to install Sass 3.3, which supports this feature in Chrome.<\/p>\n<p>To see the Sass version installed on your computer, run the following command line in Terminal:<\/p>\n<p><code>sass -v<\/code><\/p>\n<p>As shown below, I have Sass 3.2.7 installed.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/sass-version.jpg\" alt=\"Current Sass version is 3.2.7\" width=\"500\" height=\"150\"><\/figure>\n<p>To install Sass 3.3, run the following command:<\/p>\n<p><code>gem install sass -v '&gt;=3.3.0alpha' --pre<\/code><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/sass-3.3.jpg\" alt=\"Sass 3.3 installation completed\" width=\"500\" height=\"150\"><\/figure>\n<p>Next, navigate to your project directory and run:<\/p>\n<p><code>sass --watch --sourcemap scss\/styles.scss:styles.css<\/code><\/p>\n<p>This command monitors changes within your files and creates a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/learn\/\">source map<\/a>, which Chrome uses to link to the Sass file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/comman-monitor.jpg\" alt=\"Command monitoring file changes\" width=\"500\" height=\"150\"><\/figure>\n<p>Don\u2019t forget to replace the directory and filename with your own.<\/p>\n<h2>Enable CSS Source Map<\/h2>\n<p>In Chrome, navigate to <code>chrome:\/\/flags<\/code> and set the <strong>Enable Developer Tools experiments<\/strong> option to \u201cenabled\u201d. Restart Chrome.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/devtool-experiment.jpg\" alt=\"Enabling Developer Tools experiments\" width=\"500\" height=\"150\"><\/figure>\n<p>Then, go to DevTool Settings. Under the <strong>General<\/strong> tab, check <strong>Enable CSS Source Map<\/strong> and <strong>Auto-reload Generated CSS<\/strong>, as shown below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/devtool-sass-setting.jpg\" alt=\"Sass settings in DevTool\" width=\"500\" height=\"150\"><\/figure>\n<h2>Adding a Workspace<\/h2>\n<p>We need to add our project directory into the Chrome Workspace. This way, Chrome will listen for and update the file whenever we make changes and save code through the <strong>DevTool Settings<\/strong>, as follows:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/linked-scss.jpg\" alt=\"Linked SCSS file\" width=\"500\" height=\"150\"><\/figure>\n<p>Open your project in Chrome. At this stage, you\u2019ll notice that the stylesheet linked in DevTools is now a <code>.scss<\/code> file instead of <code>.css<\/code>, and clicking on it brings you to the Source panel.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/add-workspace.jpg\" alt=\"Add Workspace in Chrome\" width=\"500\" height=\"180\"><\/figure>\n<p>To link the source with what we\u2019ve added in the Workspace, right-click and select <strong>Map to File System Resource\u2026<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/map-to-system.jpg\" alt=\"Mapping to file system resource\" width=\"500\" height=\"180\"><\/figure>\n<p>Then, choose the Sass source file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/source-file.jpg\" alt=\"Choosing Sass source file\" width=\"500\" height=\"180\"><\/figure>\n<p>You should now be able to debug and edit Sass through Google Chrome. Save your changes, and the result will be immediate, as demonstrated in the following animated GIF. Changes also apply to both the Sass\/SCSS and CSS files.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/gif-action.gif\" alt=\"Editing Sass in Chrome GIF\" width=\"526\" height=\"180\"><\/figure>\n<h2>Final Thought<\/h2>\n<p>With this new feature, we can now debug and edit Sass directly in the browser. However, there are two important things to note:<\/p>\n<ul>\n<li>Currently, this feature only works for Sass. Support for Compass, LESS, and Stylus is planned for the future.<\/li>\n<li>This feature is functional only when the page is accessed via the <code>http:\/\/<\/code> protocol.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>As we have discussed in our previous post series, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes them a preferred choice for many developers over traditional CSS. Google introduced an experimental feature, starting from Google Chrome 29, to streamline workflow when debugging and editing CSS preprocessors. Let\u2019s see how&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":[3392,352],"tags":[1258,2856,1980,2190],"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>Editing CSS Preprocessors in Google Chrome - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we have discussed in our previous post series, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes\" \/>\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\/editing-css-preprocessor-chrome\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Editing CSS Preprocessors in Google Chrome\" \/>\n<meta property=\"og:description\" content=\"As we have discussed in our previous post series, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/\" \/>\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-11-05T10:01:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-14T14:17:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/sass-version.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=\"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\\\/editing-css-preprocessor-chrome\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Editing CSS Preprocessors in Google Chrome\",\"datePublished\":\"2013-11-05T10:01:39+00:00\",\"dateModified\":\"2024-05-14T14:17:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/\"},\"wordCount\":385,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/editing-css-preprocessor-chrome\\\/sass-version.jpg\",\"keywords\":[\"Chrome\",\"Dev Tools\",\"Less\",\"sass\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/\",\"name\":\"Editing CSS Preprocessors in Google Chrome - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/editing-css-preprocessor-chrome\\\/sass-version.jpg\",\"datePublished\":\"2013-11-05T10:01:39+00:00\",\"dateModified\":\"2024-05-14T14:17:22+00:00\",\"description\":\"As we have discussed in our previous post series, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/editing-css-preprocessor-chrome\\\/sass-version.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/editing-css-preprocessor-chrome\\\/sass-version.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/editing-css-preprocessor-chrome\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Editing CSS Preprocessors in Google Chrome\"}]},{\"@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":"Editing CSS Preprocessors in Google Chrome - Hongkiat","description":"As we have discussed in our previous post series, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes","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\/editing-css-preprocessor-chrome\/","og_locale":"en_US","og_type":"article","og_title":"Editing CSS Preprocessors in Google Chrome","og_description":"As we have discussed in our previous post series, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes","og_url":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-11-05T10:01:39+00:00","article_modified_time":"2024-05-14T14:17:22+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/sass-version.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Editing CSS Preprocessors in Google Chrome","datePublished":"2013-11-05T10:01:39+00:00","dateModified":"2024-05-14T14:17:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/"},"wordCount":385,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/sass-version.jpg","keywords":["Chrome","Dev Tools","Less","sass"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/","url":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/","name":"Editing CSS Preprocessors in Google Chrome - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/sass-version.jpg","datePublished":"2013-11-05T10:01:39+00:00","dateModified":"2024-05-14T14:17:22+00:00","description":"As we have discussed in our previous post series, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/sass-version.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/editing-css-preprocessor-chrome\/sass-version.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/editing-css-preprocessor-chrome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Editing CSS Preprocessors in Google Chrome"}]},{"@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-4P9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18547","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=18547"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18547\/revisions"}],"predecessor-version":[{"id":71862,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18547\/revisions\/71862"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18547"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}