{"id":74170,"date":"2025-10-01T21:01:21","date_gmt":"2025-10-01T13:01:21","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=74170"},"modified":"2025-10-01T16:01:43","modified_gmt":"2025-10-01T08:01:43","slug":"advanced-search-replace-vscode-regex-guide","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/","title":{"rendered":"Advanced Search Replace in Visual Studio Code with RegEx"},"content":{"rendered":"<p>One of the most useful features in Visual Studio Code (VS Code) is its search and replace tool. It allows you to quickly find and update text in your files. For even more control, the search tool also supports <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-with-regex\/\">Regular Expressions (RegEx)<\/a> to search using patterns instead of plain words. This can help you make big changes faster and more accurately.<\/p>\n<p>Let\u2019s see how it works.<\/p>\n<hr>\n<h2>Enabling RegEx<\/h2>\n<p>To begin, open the \u201cSearch\u201d view in VS Code by pressing <kbd>Ctrl<\/kbd>+<kbd>Shift<\/kbd>+<kbd>F<\/kbd> (Windows\/Linux) or <kbd>Cmd<\/kbd>+<kbd>Shift<\/kbd>+<kbd>F<\/kbd> (macOS). Alternatively, you can access it via the left sidebar.<\/p>\n<p>Within the \u201cSearch\u201d view, you\u2019ll see a search input field and a replace input field. To enable RegEx, click the <code>.*<\/code> icon (the \u201cUse Regular Expression\u201d button) to the right of the search input field. This icon will highlight, indicating that RegEx is now active.<\/p>\n<figure>\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/enable-regex.jpg\" alt=\"Enable RegEx in VSCode Search\" width=\"1000\" height=\"600\">\n    <\/figure>\n<p>Now you\u2019re ready to start using RegEx. Let\u2019s see some examples.<\/p>\n<hr>\n<h2>Uppercase to Lowercase<\/h2>\n<p>One common scenario is needing to change the case of characters.<\/p>\n<p>Let\u2019s say you have quite a number of JSON files where one of the property values is in uppercase letters, for example: <code>\"trip_flight_airline\": \"SQ\"<\/code>. Since you have multiple files, changing them one by one wouldn\u2019t be practical. This is where search and replace with RegEx comes in handy.<\/p>\n<p>However, if the requirement changes and the value needs to be in lowercase, for example: <code>\"trip_flight_airline\": \"sq\"<\/code>, you could do:<\/p>\n<p><strong>Search:<\/strong> <code>([A-Z]+)<\/code><\/p>\n<p>This will match any sequence of uppercase letters from A to Z.<\/p>\n<p><strong>Replace:<\/strong> <code>\\L$1<\/code><\/p>\n<p>This will replace the entire matched string, and using the special pattern <code>\\L<\/code>, it will replace the matched string with its corresponding lowercase characters.<\/p>\n<figure>\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/uppercase-to-lowercase.jpg\" alt=\"Converting Text to Lowercase VSCode\" width=\"1000\" height=\"600\">\n    <\/figure>\n<hr>\n<h2>Lowercase to Uppercase<\/h2>\n<p>Similarly, if you need to change the case from lowercase to uppercase, you can do the following:<\/p>\n<p><strong>Search:<\/strong> <code>([a-z]+)<\/code><\/p>\n<p>This will match any single lowercase letter from a to z.<\/p>\n<p><strong>Replace:<\/strong> <code>\\U$1<\/code><\/p>\n<p>This will replace the entire matched string and replace it with its corresponding uppercase characters.<\/p>\n<p>Changing the character case can be useful in many scenarios, such as when you need to standardize the case of property names or values in your code.<\/p>\n<hr>\n<h2>Capturing Groups and Reordering Text<\/h2>\n<p>RegEx can become really powerful when you use capturing groups which allow you to grab parts of the matched text and then rearrange them however you like.<\/p>\n<p>For example, let\u2019s say you have dates written like this: <strong>07-15-2025<\/strong> (month-day-year), and you want to change them to this format: <strong>2025\/07\/15<\/strong> (year\/month\/day).<\/p>\n<p>You can do this in VS Code\u2019s search and replace using the following pattern:<\/p>\n<p><strong>Search:<\/strong> <code>(\\d{2})-(\\d{2})-(\\d{4})<\/code><\/p>\n<p>This will match any date in the format of two digits for the month, two digits for the day, and four digits for the year, separated by hyphens.<\/p>\n<p><strong>Replace:<\/strong> <code>$3\/$1\/$2<\/code><\/p>\n<p>This will rearrange the matched groups so that the year comes first, followed by the month and day, separated by slashes.<\/p>\n<figure>\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/date-reordering.jpg\" alt=\"Date Format Conversion Using RegEx\" width=\"1000\" height=\"600\">\n    <\/figure>\n<hr>\n<h2>Transforming <code>snake_case<\/code> to <code>camelCase<\/code><\/h2>\n<p>Converting from snake_case, like <code>my_variable_name<\/code>, to camelCase, like <code>myVariableName<\/code>, is a common task when cleaning up or refactoring code.<\/p>\n<p>If your variable names start with a dollar sign (<code>$<\/code>), you can use RegEx in VS Code to do the search replace more efficiently.<\/p>\n<p><strong>Search:<\/strong> <code>(\\$[^_\\s\\$\\-\\[]*?)_([a-z])<\/code><\/p>\n<p>This will match any variable that starts with a dollar sign, followed by any characters except underscores, spaces, dollar signs, or square brackets, and then an underscore followed by a lowercase letter.<\/p>\n<p><strong>Replace:<\/strong> <code>$1\\U$2<\/code><\/p>\n<p>Here we combine the matched variable name with the second part of the match, which is the lowercase letter after the underscore, and convert it to uppercase using <code>\\U<\/code>.<\/p>\n<figure>\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/snakecase-to-camelcase.jpg\" alt=\"Snake Case to Camel Case\" width=\"1000\" height=\"600\">\n    <\/figure>\n<p>This will effectively transform <code>$my_variable<\/code> into <code>$myVariable<\/code>. However, since VS Code doesn\u2019t support variable-length lookbehind, it won\u2019t match variables that have more than one underscore, like <code>$my_variable_name<\/code>. In such cases, you\u2019ll need to run the search and replace multiple times to handle each underscore separately.<\/p>\n<hr>\n<h2>Wrapping up<\/h2>\n<p>In this article, we\u2019ve explored how to use RegEx in Visual Studio Code\u2019s search and replace feature to perform advanced text transformations, from changing character cases to reordering text and converting variable naming conventions.<\/p>\n<p>Using RegEx in Visual Studio Code\u2019s search and replace feature can significantly speed up your workflow, especially when dealing with large codebases or repetitive tasks.<\/p>\n<p>By mastering RegEx, you can quickly make complex changes across multiple files without the need for manual edits.<\/p>","protected":false},"excerpt":{"rendered":"<p>One of the most useful features in Visual Studio Code (VS Code) is its search and replace tool. It allows you to quickly find and update text in your files. For even more control, the search tool also supports Regular Expressions (RegEx) to search using patterns instead of plain words. This can help you make&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":[1645,3772],"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>Advanced Search Replace in Visual Studio Code with RegEx - Hongkiat<\/title>\n<meta name=\"description\" content=\"One of the most useful features in Visual Studio Code (VS Code) is its search and replace tool. It allows you to quickly find and update text in your\" \/>\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\/advanced-search-replace-vscode-regex-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced Search Replace in Visual Studio Code with RegEx\" \/>\n<meta property=\"og:description\" content=\"One of the most useful features in Visual Studio Code (VS Code) is its search and replace tool. It allows you to quickly find and update text in your\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/\" \/>\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=\"2025-10-01T13:01:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/enable-regex.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\\\/advanced-search-replace-vscode-regex-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Advanced Search Replace in Visual Studio Code with RegEx\",\"datePublished\":\"2025-10-01T13:01:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/\"},\"wordCount\":714,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-search-replace-vscode-regex-guide\\\/enable-regex.jpg\",\"keywords\":[\"regex\",\"visual studio code\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/\",\"name\":\"Advanced Search Replace in Visual Studio Code with RegEx - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-search-replace-vscode-regex-guide\\\/enable-regex.jpg\",\"datePublished\":\"2025-10-01T13:01:21+00:00\",\"description\":\"One of the most useful features in Visual Studio Code (VS Code) is its search and replace tool. It allows you to quickly find and update text in your\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-search-replace-vscode-regex-guide\\\/enable-regex.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-search-replace-vscode-regex-guide\\\/enable-regex.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-search-replace-vscode-regex-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Search Replace in Visual Studio Code with RegEx\"}]},{\"@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":"Advanced Search Replace in Visual Studio Code with RegEx - Hongkiat","description":"One of the most useful features in Visual Studio Code (VS Code) is its search and replace tool. It allows you to quickly find and update text in your","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\/advanced-search-replace-vscode-regex-guide\/","og_locale":"en_US","og_type":"article","og_title":"Advanced Search Replace in Visual Studio Code with RegEx","og_description":"One of the most useful features in Visual Studio Code (VS Code) is its search and replace tool. It allows you to quickly find and update text in your","og_url":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2025-10-01T13:01:21+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/enable-regex.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\/advanced-search-replace-vscode-regex-guide\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Advanced Search Replace in Visual Studio Code with RegEx","datePublished":"2025-10-01T13:01:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/"},"wordCount":714,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/enable-regex.jpg","keywords":["regex","visual studio code"],"articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/","url":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/","name":"Advanced Search Replace in Visual Studio Code with RegEx - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/enable-regex.jpg","datePublished":"2025-10-01T13:01:21+00:00","description":"One of the most useful features in Visual Studio Code (VS Code) is its search and replace tool. It allows you to quickly find and update text in your","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/enable-regex.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-search-replace-vscode-regex-guide\/enable-regex.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-search-replace-vscode-regex-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Advanced Search Replace in Visual Studio Code with RegEx"}]},{"@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-jii","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74170","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=74170"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74170\/revisions"}],"predecessor-version":[{"id":74171,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74170\/revisions\/74171"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=74170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=74170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=74170"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=74170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}