{"id":17540,"date":"2023-10-27T15:01:07","date_gmt":"2023-10-27T07:01:07","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17540"},"modified":"2023-10-25T19:22:35","modified_gmt":"2023-10-25T11:22:35","slug":"jquery-remove-modules","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/","title":{"rendered":"How to Remove Unnecessary jQuery Modules"},"content":{"rendered":"<p>jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes functionalities to cover every possible scenario.<\/p>\n<p>However, when working on a simple website, we might only use <strong>a few<\/strong> of these functions. It would be more efficient to run only the necessary functions and exclude the unused ones. We can exclude certain jQuery modules that aren\u2019t needed for our project. Let\u2019s explore how to do this.<\/p>\n<h2>Getting Started<\/h2>\n<p>First, we need to install essential tools for the task. These tools include <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/git-scm.com\/\">Git<\/a>, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/gruntjs.com\/\">Grunt<\/a>, and <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a>. If you\u2019re using macOS, the most straightforward method to install these tools is through the macOS package manager, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/brew.sh\/\">Homebrew<\/a>.<\/p>\n<h3>Installing Homebrew<\/h3>\n<p>Open your Terminal and execute the following command to install Homebrew. With Homebrew, installing the other tools becomes simpler.<\/p>\n<pre>\r\nruby -e \"$(curl -fsSL https:\/\/raw.github.com\/mxcl\/homebrew\/go)\"\r\n<\/pre>\n<h3>Installing Git<\/h3>\n<p>Once Homebrew is installed, execute the command below to install Git.<\/p>\n<pre>\r\nbrew install git\r\n<\/pre>\n<h3>Installing Node.js<\/h3>\n<p>Use the following command to install Node.js:<\/p>\n<pre>\r\nbrew install node\r\n<\/pre>\n<h3>Installing Grunt<\/h3>\n<p>Finally, install Grunt by running the command below:<\/p>\n<pre>\r\nnpm install -g grunt-cli\r\n<\/pre>\n<p>For Windows users, there\u2019s a comparable package manager named <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/chocolatey.org\/\">Chocolatey<\/a>. You can use it to install the aforementioned packages in a similar manner.<\/p>\n<h2>Building jQuery<\/h2>\n<p>At present, jQuery allows the exclusion of the following modules:<\/p>\n<table>\n<thead>\n<tr>\n<td width=\"20%\">Module<\/td>\n<td width=\"30%\">Command<\/td>\n<td width=\"50%\">Description<\/td>\n<\/tr>\n<\/thead>\n<tr>\n<td>Ajax<\/td>\n<td><code>-ajax<\/code><\/td>\n<td>This refers to the <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/category\/ajax\/\">jQuery AJAX API<\/a>, which includes <code>jQuery.ajax()<\/code>, <code>jQuery.get()<\/code>, and the <code>.load()<\/code> function.<\/td>\n<\/tr>\n<tr>\n<td>CSS<\/td>\n<td><code>-css<\/code><\/td>\n<td>This pertains to functions from the jQuery <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/category\/css\/\">CSS Category<\/a>, including <code>.addClass()<\/code>, <code>.css()<\/code>, and <code>.hasClass()<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Deprecated<\/td>\n<td><code>-deprecated<\/code><\/td>\n<td>This refers to the deprecated modules or functions.<\/td>\n<\/tr>\n<tr>\n<td>Event Alias<\/td>\n<td><code>-event-alias<\/code><\/td>\n<td>This pertains to <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/category\/events\/\">event functions<\/a> such as <code>.click()<\/code>, <code>.focus()<\/code>, and <code>.hover()<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Dimensions<\/td>\n<td><code>-dimensions<\/code><\/td>\n<td>This relates to the <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/category\/dimensions\/\">functions for setting CSS dimensions<\/a>, including <code>.height()<\/code>, <code>.innerHeight()<\/code>, and <code>.innerWidth()<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Effects<\/td>\n<td><code>-effects<\/code><\/td>\n<td>This refers to functions that apply animation effects, such as <code>.slideToggle()<\/code>, <code>.animate()<\/code>, and <code>.fadeIn()<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Offset<\/td>\n<td><code>-offset<\/code><\/td>\n<td>This pertains to functions that retrieve coordinates and position, including <code>.offset()<\/code> and <code>.position()<\/code>.<\/td>\n<\/tr>\n<\/table>\n<p>Before customizing jQuery, we need to clone it from the GitHub repository. Execute the following command in the Terminal:<\/p>\n<pre>\r\ngit clone git:\/\/github.com\/jquery\/jquery.git\r\n<\/pre>\n<p>A new folder named <strong>jquery<\/strong> will be created in your user directory. Navigate to this directory with the command:<\/p>\n<pre>\r\ncd jquery\r\n<\/pre>\n<p>Next, install the Node dependency modules required for our project:<\/p>\n<pre>\r\nnpm install\r\n<\/pre>\n<p>Then, build jQuery by simply executing the Grunt command:<\/p>\n<pre>\r\ngrunt\r\n<\/pre>\n<p>If successful, the following report will be displayed:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/grunt-report.jpg\" alt=\"grunt report\" width=\"750\" height=\"480\"><\/figure>\n<p>As indicated in the report, our jQuery is stored in the <code>dist\/<\/code> folder. At this stage, our jQuery includes all functionalities, resulting in a size of <strong>265kb<\/strong>. The minified version is 83kb.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/jquery-build.jpg\" alt=\"jquery report\" width=\"750\" height=\"480\"><\/figure>\n<h2>Module Removal<\/h2>\n<p>If you wish to remove the Effects module from jQuery, execute the following command:<\/p>\n<pre>\r\ngrunt custom:-effects\r\n<\/pre>\n<p>Upon checking the file size again, you\u2019ll notice it has reduced to <strong>246kb<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/jquery-custom-build.jpg\" alt=\"jQuery custom build\" width=\"750\" height=\"480\"><\/figure>\n<p>To exclude multiple modules, list each module separated by a comma, like so:<\/p>\n<pre>\r\ngrunt custom:-effects,-ajax,-deprecated\r\n<\/pre>\n<p>Excluding multiple modules will further reduce the jQuery file size. In this instance, it\u2019s been reduced to just <strong>207kb<\/strong>.<\/p>\n<h2>Concluding Thoughts<\/h2>\n<p>jQuery facilitates easy DOM manipulation, but its size, exceeding 200kb, might impact your website\u2019s performance. By removing unnecessary jQuery modules, your script will undoubtedly run more efficiently and faster. We hope this tip proves beneficial for your upcoming projects.<\/p>","protected":false},"excerpt":{"rendered":"<p>jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes functionalities to cover every possible scenario. However, when working on a simple website, we might only use a few of these functions. It would be more efficient to run only the necessary&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],"tags":[4117,911],"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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Remove Unnecessary jQuery Modules - Hongkiat<\/title>\n<meta name=\"description\" content=\"jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes\" \/>\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\/jquery-remove-modules\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Remove Unnecessary jQuery Modules\" \/>\n<meta property=\"og:description\" content=\"jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/\" \/>\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=\"2023-10-27T07:01:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/grunt-report.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\\\/jquery-remove-modules\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Remove Unnecessary jQuery Modules\",\"datePublished\":\"2023-10-27T07:01:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/\"},\"wordCount\":495,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-remove-modules\\\/grunt-report.jpg\",\"keywords\":[\"Javascripts\",\"jQuery\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/\",\"name\":\"How to Remove Unnecessary jQuery Modules - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-remove-modules\\\/grunt-report.jpg\",\"datePublished\":\"2023-10-27T07:01:07+00:00\",\"description\":\"jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-remove-modules\\\/grunt-report.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-remove-modules\\\/grunt-report.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-remove-modules\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Remove Unnecessary jQuery Modules\"}]},{\"@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 Remove Unnecessary jQuery Modules - Hongkiat","description":"jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes","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\/jquery-remove-modules\/","og_locale":"en_US","og_type":"article","og_title":"How to Remove Unnecessary jQuery Modules","og_description":"jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-10-27T07:01:07+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/grunt-report.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\/jquery-remove-modules\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Remove Unnecessary jQuery Modules","datePublished":"2023-10-27T07:01:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/"},"wordCount":495,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/grunt-report.jpg","keywords":["Javascripts","jQuery"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/","name":"How to Remove Unnecessary jQuery Modules - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/grunt-report.jpg","datePublished":"2023-10-27T07:01:07+00:00","description":"jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/grunt-report.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-remove-modules\/grunt-report.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Remove Unnecessary jQuery Modules"}]},{"@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-4yU","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17540","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=17540"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17540\/revisions"}],"predecessor-version":[{"id":70031,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17540\/revisions\/70031"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17540"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}