{"id":49451,"date":"2020-03-04T23:32:35","date_gmt":"2020-03-04T15:32:35","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=49451"},"modified":"2020-03-02T20:33:33","modified_gmt":"2020-03-02T12:33:33","slug":"utility-first-css-for-developers","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/","title":{"rendered":"Introduction to Utility-first CSS for Web Developer"},"content":{"rendered":"<p>CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it\u2019s not that simple. For large scale websites and applications, CSS becomes really hard to write in.<\/p>\n<p>CSS specificity is crippling up, and so, using <code>!important<\/code> is often inevitable and eventually adds up to the CSS file size.<\/p>\n<p>Well, the good news is that web developers have come up with several methodologies to help write and organize CSS better, such as BEM, OOCSS, SMACSS, and ITCSS. We\u2019ve covered some of these methodologies in our previous posts,\u00a0<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/\" rel=\"noopener noreferrer\">Understanding CSS Writing Methodologies<\/a>\u00a0and\u00a0<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/inverted-triangle-css-web-development\/\" rel=\"noopener noreferrer\">Intro to ITCSS for Web Developers<\/a>.<\/p>\n<p>In this post, we are going to look at another methodology called <strong>Utility-first CSS<\/strong>, which, at the moment of this writing, is rapidly gaining traction from the web developer community.<\/p>\n<p>Let\u2019s see how it works.<\/p>\n<h2>Utility-first CSS: How it works<\/h2>\n<p>Traditionally, we will write a CSS class which may contain the styles for the <em>colors<\/em>, <em>size<\/em>, <em>borders<\/em>, <em>margins<\/em>, and <em>shadows<\/em> like below:<\/p>\n<pre>\r\n.foo {\r\n    margin: 0 auto;\r\n    padding: 10px;\r\n    border-radius: 4px;\r\n    box-shadow: 0 10px 30px -2px rgba(0, 0, 0, 0.1);\r\n    background-color: blue;\r\n}\r\n<\/pre>\n<p>With Utility-first CSS, each class is a low-level CSS composition. Instead of creating a class that applies a bunch of different CSS rules, it will only contain very specific rules. If I\u2019d like to add a rounded corner, let\u2019s call it <code>.rounded-sm<\/code>:<\/p>\n<pre>\r\n.bg-white {\r\n    background-color: white;\r\n}\r\n.rounded-sm {\r\n    border-radius: 4px;\r\n}\r\n.shadow-md {\r\n    box-shadow: 0 10px 30px -2px rgba(0, 0, 0, 0.1);\r\n}\r\n<\/pre>\n<p>If you\u2019d like to apply a background color of white, a small border radius, and a shadow, you will need to add these three classes.<\/p>\n<pre>\r\n&lt;div class=\"bg-white round-sm shadown-md\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>At first, this may look like a mess. As you need to add more styles, you will need to add more classes to the div element. But once you\u2019ve built something this way, you\u2019ll notice some of the benefits as it allows you:<\/p>\n<ul>\n<li><strong>To create a custom style without actually writing a custom CSS<\/strong> as well as without having to create custom class names. As naming a class is hard, especially on a large scale website or application and we often end up giving our classes ambiguous names like <code>.box<\/code>, <code>.card<\/code>, <code>.container<\/code>, etc.<\/li>\n<li><strong>To make a change without worrying about breaking something<\/strong> of the other pages or components, which makes website CSS more maintainable.<\/li>\n<\/ul>\n<p>Utility-first CSS is not an entirely new paradigm. It has another name called <strong>Atomic CSS<\/strong>. However, the web community did not quite buy the idea, so it did not get enough traction to make it a popular paradigm to write CSS.<\/p>\n<p>A new framework called <strong>Tailwind CSS<\/strong> emerged that brought this idea of Utility-first CSS, and it does suddenly make sense. So what makes Tailwind CSS different?<\/p>\n<h2>Tailwind CSS<\/h2>\n<p>Tailwind CSS is created by\u00a0<a target=\"_blank\" href=\"https:\/\/github.com\/adamwathan\" rel=\"noopener noreferrer\">Adam Wathan<\/a>. It\u2019s shipped as an NPM module. We can easily install it by typing this command below:<\/p>\n<pre>\r\nnpm install tailwindcss\r\n<\/pre>\n<p>On top of the Utility classes, Tailwind comes with handy features such as its <strong>directive <code>@tailwind<\/code><\/strong> and <strong><code>@apply<\/code><\/strong>.<\/p>\n<p>The following codes will import the Tailwind built-in styles \u2013 the base styles which address browser default style consistency similar to <strong>Normalize.css<\/strong>, the components, and the utilities.<\/p>\n<pre>\r\n@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n<\/pre>\n<p>The <code>@apply<\/code> directive allows you to <strong>compose different styles<\/strong>. This directive will be useful when you have components with repeating utility classes.<\/p>\n<p>A common example of this is for a button. It\u2019s practically more convenient to add a class <code>.btn<\/code> like below rather than adding a bunch of different classes.<\/p>\n<pre>&lt;button class=\"btn\"&gt;Button&lt;\/button&gt;<\/pre>\n<p>In this case, the <code>@apply<\/code> comes in handy to put together these styles on a single .btn class.<\/p>\n<pre>\r\n.btn {\r\n    @apply bg-blue-400 text-white font-bold py-2 px-4 rounded;\r\n}\r\n<\/pre>\n<h2>Optimising File size<\/h2>\n<p>Another good thing about TailwindCSS is that it works very well with\u00a0<a target=\"_blank\" href=\"https:\/\/purgecss.com\/\" rel=\"noopener noreferrer\">PurgeCSS<\/a>\u00a0to <strong>remove unused styles on your website<\/strong>. And since you\u2019ll rarely create your custom CSS and classes, the result of your stylesheet can be significantly small.<\/p>\n<p><a target=\"_blank\" href=\"https:\/\/send.firefox.com\/\" rel=\"noopener noreferrer\">Firefox Send<\/a>\u00a0is able to ship their stylesheet at just 4.7kb (gzipped)!.<\/p>\n<h2>Code editor integration<\/h2>\n<p>If you\u2019re using Visual Studio Code, you can boost productivity further with the extension:\u00a0<a target=\"_blank\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=bradlc.vscode-tailwindcss\" rel=\"noopener noreferrer\">TailwindCSS Intellisense<\/a>. This extension enables\u00a0<em>autocompletion<\/em>\u00a0for TailwindCSS classes as you type.<\/p>\n<p>It supports various file types, including HTML, Vue, and PHP.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-first-css-for-developers\/vs-code-intellisense.jpg\" alt=\"List of class name suggestion in Visual Studio Code\" width=\"750\" height=\"461\"><\/figure>\n<p>So these are some of the key advantages of using TailwindCSS compared to other CSS frameworks. Rather than loading a bunch of stylesheets, Tailwind CSS comes as an NPM module.<\/p>\n<p>It provides configurations that\u2019ll allow us to produce CSS that meets our needs and could result in a smaller stylesheet.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>Changing the way we write CSS is not always easy. It means that we have to unlearn what we are already used to. At first, Utility-first CSS might look weird to you, but as mentioned, once you\u2019re used to this way when writing CSS, you will find your productivity to be increased manifolds.<\/p>\n<p>Have you tried using Utility-first CSS on your project? Do let us know about your experience in the comments section below.<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it\u2019s not that simple. For large scale websites and applications, CSS becomes really hard to write in. CSS specificity is crippling up, and so, using !important is often inevitable and eventually&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[511],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Introduction to Utility-first CSS for Web Developer - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it&#039;s not that\" \/>\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\/utility-first-css-for-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to Utility-first CSS for Web Developer\" \/>\n<meta property=\"og:description\" content=\"CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it&#039;s not that\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/\" \/>\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-03-04T15:32:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/utility-first-css-for-developers\/vs-code-intellisense.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\\\/utility-first-css-for-developers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Introduction to Utility-first CSS for Web Developer\",\"datePublished\":\"2020-03-04T15:32:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/\"},\"wordCount\":800,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/utility-first-css-for-developers\\\/vs-code-intellisense.jpg\",\"keywords\":[\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/\",\"name\":\"Introduction to Utility-first CSS for Web Developer - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/utility-first-css-for-developers\\\/vs-code-intellisense.jpg\",\"datePublished\":\"2020-03-04T15:32:35+00:00\",\"description\":\"CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it's not that\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/utility-first-css-for-developers\\\/vs-code-intellisense.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/utility-first-css-for-developers\\\/vs-code-intellisense.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-first-css-for-developers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to Utility-first CSS for Web Developer\"}]},{\"@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":"Introduction to Utility-first CSS for Web Developer - Hongkiat","description":"CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it's not that","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\/utility-first-css-for-developers\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to Utility-first CSS for Web Developer","og_description":"CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it's not that","og_url":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-03-04T15:32:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/utility-first-css-for-developers\/vs-code-intellisense.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\/utility-first-css-for-developers\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Introduction to Utility-first CSS for Web Developer","datePublished":"2020-03-04T15:32:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/"},"wordCount":800,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/utility-first-css-for-developers\/vs-code-intellisense.jpg","keywords":["Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/","url":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/","name":"Introduction to Utility-first CSS for Web Developer - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/utility-first-css-for-developers\/vs-code-intellisense.jpg","datePublished":"2020-03-04T15:32:35+00:00","description":"CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it's not that","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/utility-first-css-for-developers\/vs-code-intellisense.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/utility-first-css-for-developers\/vs-code-intellisense.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/utility-first-css-for-developers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introduction to Utility-first CSS for Web Developer"}]},{"@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-cRB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/49451","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=49451"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/49451\/revisions"}],"predecessor-version":[{"id":49452,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/49451\/revisions\/49452"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=49451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=49451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=49451"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=49451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}