{"id":18463,"date":"2013-10-28T18:01:33","date_gmt":"2013-10-28T10:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18463"},"modified":"2024-08-07T17:22:49","modified_gmt":"2024-08-07T09:22:49","slug":"sublime-text-task-management","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/","title":{"rendered":"Effortlessly Manage Notes and Lists with Sublime Text"},"content":{"rendered":"<p>There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text beyond just a code editor. In this post, I would like to share a tip that I found really useful.<\/p>\n<p>When <a href=\"https:\/\/www.hongkiat.com\/blog\/building-great-website-with-less\/\">building a website<\/a>, things may not always work as expected. Bugs and errors will pop up, and I make a note to address these issues later. This helps minimize interruptions and keeps me focused on the task at hand.<\/p>\n<p>Like any coder, I don\u2019t want to open another app just to jot down these errors. Fortunately, there\u2019s a plugin that allows us to do this within Sublime Text, called <strong>Plain Task<\/strong>.<\/p>\n<h2>Plain Task<\/h2>\n<p>After installing the plugin, you can create a new file and save it in the <code>.todo<\/code> format (or <code>.todolist<\/code>, <code>.tasks<\/code>, or <code>.taskpaper<\/code>). This will highlight the new file in yellow, allowing you to start taking notes and managing tasks directly in the file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/newtodo.jpg\" width=\"500\" height=\"150\" alt=\"Highlighted TODO file in Sublime Text\"><\/figure>\n<p>To add <strong>Headings<\/strong> or <strong>Titles<\/strong>, simply end the line with a colon, as shown below. The colon marks the line as the title or note heading.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/theheadings.jpg\" width=\"500\" height=\"150\" alt=\"Example of headings and titles in Sublime Text\"><\/figure>\n<p>To add a new todo list item, press <span class=\"key\">Command<\/span> + <span class=\"key\">Enter<\/span> on a Mac or <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Enter<\/span> on Windows. These key combinations will add a checkbox, common in todo lists. Press the keys again to create a new task.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/listcheckbox.jpg\" width=\"500\" height=\"150\" alt=\"Checkbox added in a TODO list in Sublime Text\"><\/figure>\n<p>To mark an item as done, press <span class=\"key\">Command<\/span> + <span class=\"key\">D<\/span> on a Mac or <span class=\"key\">Ctrl<\/span> + <span class=\"key\">D<\/span> on Windows. You can also press <span class=\"key\">Alt<\/span> + <span class=\"key\">C<\/span> to mark it as <strong>Cancelled<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/listdone.jpg\" width=\"500\" height=\"150\" alt=\"List item marked as done in Sublime Text\"><\/figure>\n<p>Adding a note is as simple as writing plain text. Just jot down what you need to remember.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/note.jpg\" width=\"500\" height=\"320\" alt=\"Note added in a TODO list in Sublime Text\"><\/figure>\n<h2>Adding Todo Icons<\/h2>\n<p>Currently, our <code>.todo<\/code> file is displayed with a plain, unknown-type blank paper icon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/unknownicon.jpg\" width=\"500\" height=\"200\" alt=\"Unknown file type icon for TODO file\"><\/figure>\n<p>We can change this to the icon provided by PlainTask for a more unique identity. First, copy the icon stored in the <em>icons<\/em> folder of the PlainTasks package into the Sublime Text application using the following command:<\/p>\n<pre>\r\ncp ~\/Library\/Application\\ Support\/Sublime\\ Text\\ 2\/Packages\/PlainTasks\/icons\/TODO.icns \/Applications\/Sublime\\ Text\\ 2.app\/Contents\/Resources\/\r\n<\/pre>\n<p>Next, run the following command to open the <strong>Info.plist<\/strong> file in Sublime Text:<\/p>\n<pre>\r\nopen -a Sublime\\ Text\\ 2 \/Applications\/Sublime\\ Text\\ 2.app\/Contents\/Info.plist\r\n<\/pre>\n<p>Add the following lines within the array to register the icon:<\/p>\n<pre>\r\n&lt;dict&gt;\r\n    &lt;key&gt;CFBundleTypeRole&lt;\/key&gt;\r\n    &lt;string&gt;Editor&lt;\/string&gt;\r\n    &lt;key&gt;CFBundleTypeName&lt;\/key&gt;\r\n    &lt;string&gt;TODO&lt;\/string&gt;\r\n    &lt;key&gt;CFBundleTypeExtensions&lt;\/key&gt;\r\n    &lt;array&gt;\r\n        &lt;string&gt;todo&lt;\/string&gt;\r\n        &lt;string&gt;todolist&lt;\/string&gt;\r\n        &lt;string&gt;tasks&lt;\/string&gt;\r\n        &lt;string&gt;taskpaper&lt;\/string&gt;\r\n    &lt;\/array&gt;\r\n    &lt;key&gt;CFBundleTypeIconFile&lt;\/key&gt;\r\n    &lt;string&gt;TODO&lt;\/string&gt;\r\n&lt;\/dict&gt;\r\n<\/pre>\n<p>Rebuild the <strong>Info.plist<\/strong> with the following command:<\/p>\n<pre>\r\n\/System\/Library\/Frameworks\/CoreServices.framework\/Versions\/A\/Frameworks\/LaunchServices.framework\/Versions\/A\/Support\/lsregister -f -r \/Applications\/Sublime\\ Text\\ 2.app\/\r\n<\/pre>\n<p>And there you have it! Your <code>.todo<\/code> file now has a new icon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/newicon.jpg\" width=\"500\" height=\"200\" alt=\"New icon for TODO file in Sublime Text\"><\/figure>\n<h2>Conclusion<\/h2>\n<p>That\u2019s it! Now you can take notes and add todo lists without having to install or open additional applications within Sublime Text. We hope you find this tip useful. For further reference, visit <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/aziz\/PlainTasks\">the official PlainTasks repository on GitHub<\/a>.<\/p>\n<h2> More with Sublime Text <\/h2>\n<p>For more things you can do with Sublime Text, check out:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-text-refresh-browser\/\">How to Refresh Changes on Browser with Sublime Text<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/\">Adding CSS Vendor Prefix Automatically with Sublime Text<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-code-snippets\/\">Working with Code Snippets in Sublime Text<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text beyond just a code editor. In this post, I would like to share a tip that I found really useful. When building a website, things may not always work as expected. Bugs and errors will pop&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":[3064,2499],"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>Effortlessly Manage Notes and Lists with Sublime Text - Hongkiat<\/title>\n<meta name=\"description\" content=\"There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text beyond just a code editor. In this post, I\" \/>\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-task-management\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Effortlessly Manage Notes and Lists with Sublime Text\" \/>\n<meta property=\"og:description\" content=\"There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text beyond just a code editor. In this post, I\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/\" \/>\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-10-28T10:01:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-07T09:22:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/newtodo.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\\\/sublime-text-task-management\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Effortlessly Manage Notes and Lists with Sublime Text\",\"datePublished\":\"2013-10-28T10:01:33+00:00\",\"dateModified\":\"2024-08-07T09:22:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/\"},\"wordCount\":446,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sublime-text-task-management\\\/newtodo.jpg\",\"keywords\":[\"Design Tools\",\"sublime text\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/\",\"name\":\"Effortlessly Manage Notes and Lists with Sublime Text - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sublime-text-task-management\\\/newtodo.jpg\",\"datePublished\":\"2013-10-28T10:01:33+00:00\",\"dateModified\":\"2024-08-07T09:22:49+00:00\",\"description\":\"There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text beyond just a code editor. In this post, I\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sublime-text-task-management\\\/newtodo.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sublime-text-task-management\\\/newtodo.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sublime-text-task-management\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Effortlessly Manage Notes and Lists 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":"Effortlessly Manage Notes and Lists with Sublime Text - Hongkiat","description":"There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text beyond just a code editor. In this post, I","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-task-management\/","og_locale":"en_US","og_type":"article","og_title":"Effortlessly Manage Notes and Lists with Sublime Text","og_description":"There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text beyond just a code editor. In this post, I","og_url":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-10-28T10:01:33+00:00","article_modified_time":"2024-08-07T09:22:49+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/newtodo.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\/sublime-text-task-management\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Effortlessly Manage Notes and Lists with Sublime Text","datePublished":"2013-10-28T10:01:33+00:00","dateModified":"2024-08-07T09:22:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/"},"wordCount":446,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/newtodo.jpg","keywords":["Design Tools","sublime text"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/","url":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/","name":"Effortlessly Manage Notes and Lists with Sublime Text - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/newtodo.jpg","datePublished":"2013-10-28T10:01:33+00:00","dateModified":"2024-08-07T09:22:49+00:00","description":"There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text beyond just a code editor. In this post, I","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/newtodo.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/sublime-text-task-management\/newtodo.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Effortlessly Manage Notes and Lists 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-4NN","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18463","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=18463"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18463\/revisions"}],"predecessor-version":[{"id":72498,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18463\/revisions\/72498"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18463"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}