{"id":26582,"date":"2016-06-09T23:01:50","date_gmt":"2016-06-09T15:01:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26582"},"modified":"2017-11-23T19:24:33","modified_gmt":"2017-11-23T11:24:33","slug":"codepen-tips-beginners","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/","title":{"rendered":"10 Codepen Tips For Beginners"},"content":{"rendered":"

Codepen<\/a> is a super easy and popular site to pen<\/em> down a working front-end code combo<\/strong> right away. If you don\u2019t know what Codepen is or haven\u2019t heard of it before, it\u2019s basically an online source code playground<\/strong> (let\u2019s call it OSCP<\/em> to sound nerdier) for the three musketeers of front-end coding; HTML<\/strong>, CSS<\/strong> and JavaScript<\/strong>.<\/p>\n

There are other similar OSCPs out there like JSFiddle<\/a>, JS Bin<\/a>, CSSDeck<\/a> & Dabblet<\/a>. Codepen is definitely one of the most well-known among front-end developers. Without further ado, let\u2019s jump right into some basic and useful tips<\/strong> for using Codepen.<\/p>\n

1. Run Button<\/h2>\n

If you are not a fan of the way the output of your code in Codepen keeps refreshing while<\/em> you\u2019re typing, you can opt out of the \u201cAuto Update Preview\u201d option<\/strong>, and get a Run<\/span> button instead. When you click it, you will be able to see and update your code\u2019s output whenever you want to<\/strong>.<\/p>\n

This is also a great option if you\u2019re working with a code the output of which goes through a lot of layout changes<\/strong>, and repaints every time it\u2019s updated, resulting in slowness.<\/p>\n

\"Run<\/figure>\n

2. Number Increment\/Decrement<\/h2>\n

Increase or decrease the numbers in your code in Codepen without typing in the new numbers<\/strong>. All you have to do is use the key combination of Ctrl<\/span>\/Cmd<\/span> and<\/strong> Up<\/span> and Down<\/span> arrows.<\/p>\n

\"Number<\/figure>\n

3. Multiple Cursors<\/h2>\n

You can put cursors at multiple points in the source code<\/strong>, then type or edit at all those points at the same time<\/strong>. This only works if you\u2019re inputting the same info, and reduces the need for copy-pasting. Just hold down the Ctrl<\/span>\/Cmd<\/span> key while clicking at those multiple points.<\/p>\n

\"Multiple<\/figure>\n

4. Different Colored Console Messages<\/h2>\n

The Console<\/a><\/code> JavaScript object has a few more methods<\/strong> besides log()<\/a><\/code> to allow you to print things in the web console<\/strong>.<\/p>\n

You can use the info()<\/a><\/code>, warn()<\/a> <\/code> and error()<\/a><\/code> methods for information<\/strong>, warning<\/strong> and error<\/strong>. Typically, web consoles color these messages type-wise, or will display an appropriate icon beside them (like a warning sign for the warning message) for easier recognition<\/strong>.<\/p>\n

Codepen has its own console<\/strong> which you can open by clicking on the Console<\/span> button at the bottom left corner. It is ideal for a quick check of console messages without having to open the browser\u2019s console<\/strong>. This console distinguishes the different types of console messages with different background colors<\/strong>.<\/p>\n

\"Colored<\/figure>\n

5. Export<\/h2>\n

Once saved, a pen<\/strong> (a single Codepen entity) can be exported as a ZIP file<\/strong> with all of its in HTML, CSS and JS code in files. There\u2019s also an option to save the pen as a Github gist<\/strong> (a Git repository). You can find the Export<\/span> button at the right bottom corner of each pen.<\/p>\n

\"Export<\/figure>\n

6. Find & Replace<\/h2>\n

Find & Replace<\/strong> \u2013 an essential operation for folks who tend to rename their variable names every now and then. Ctrl<\/span>\/Cmd<\/span> + Shift<\/span> + F<\/span> is the key combo to open the \u201cFind & Replace\u201d dialog<\/strong>.<\/p>\n

\"Find<\/figure>\n

7. Emmet Tab Trigger<\/h2>\n

Do you know about tab triggers for Emmet coding<\/a><\/a>? Emmet<\/a> is a productivity tool for front-end developers that allows you to type skeleton code that later gets extended<\/strong>. To do this in Codepen, just quickly type the appropriate abbreviation<\/a> into the editor, press the Tab<\/span> key, and the complete code appears at once. Only available for HTML<\/strong> in Codepen.<\/p>\n

\"Tab<\/figure>\n

8. Get Individual Code Files<\/h2>\n

If you use the Export option like mentioned before, you will get all three files (HTML, CSS and JS) of your pen. But if you are interested in only one or two of those files<\/strong>, and want to download them individually, there\u2019s an option for that too in Codepen.<\/p>\n

Once logged into Codepen, go to your pen, and click on the Change View<\/span> button in the top right corner. At the bottom of the dropdown list, you will see the direct download links for the individual files<\/strong>.<\/p>\n

\"Download<\/figure>\n

9. Inspect JavaScript Variables<\/h2>\n

As Codepen\u2019s JavaScript console<\/a> connects to the JavaScript saved in your pen, you can also use it to quickly test your JavaScript. This feature comes especially handy in inspecting JS variables<\/strong>, as this way you don\u2019t have to insert extra console or alert messages<\/strong> into the original code solely for testing purposes.<\/p>\n

\"JS<\/figure>\n

10. Turn Pen to Template<\/h2>\n

If you tend to start most of your pens with the same set of code<\/strong>, you can use a template to save those repeating code<\/strong>. To turn a pen into template, tick the Template option<\/strong> under the Settings menu. When you later create a new pen, you can start with your saved template<\/strong> by clicking the down arrow in the right side of the New Pen<\/span> button. It will open a dropdown list with all your saved templates to choose from.<\/p>\n

\"Pen<\/figure>","protected":false},"excerpt":{"rendered":"

Codepen is a super easy and popular site to pen down a working front-end code combo right away. If you don\u2019t know what Codepen is or haven\u2019t heard of it before, it\u2019s basically an online source code playground (let\u2019s call it OSCP to sound nerdier) for the three musketeers of front-end coding; HTML, CSS and…<\/p>\n","protected":false},"author":145,"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":[511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 Codepen Tips For Beginners - Hongkiat<\/title>\n<meta name=\"description\" content=\"Codepen is a super easy and popular site to pen down a working front-end code combo right away. If you don't know what Codepen is or haven't heard of it\" \/>\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\/codepen-tips-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Codepen Tips For Beginners\" \/>\n<meta property=\"og:description\" content=\"Codepen is a super easy and popular site to pen down a working front-end code combo right away. If you don't know what Codepen is or haven't heard of it\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/\" \/>\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=\"2016-06-09T15:01:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-23T11:24:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/codepen-tips-beginners\/codepen-tip-show-run-btn.gif\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\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\\\/codepen-tips-beginners\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"10 Codepen Tips For Beginners\",\"datePublished\":\"2016-06-09T15:01:50+00:00\",\"dateModified\":\"2017-11-23T11:24:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/\"},\"wordCount\":793,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/codepen-tips-beginners\\\/codepen-tip-show-run-btn.gif\",\"keywords\":[\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/\",\"name\":\"10 Codepen Tips For Beginners - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/codepen-tips-beginners\\\/codepen-tip-show-run-btn.gif\",\"datePublished\":\"2016-06-09T15:01:50+00:00\",\"dateModified\":\"2017-11-23T11:24:33+00:00\",\"description\":\"Codepen is a super easy and popular site to pen down a working front-end code combo right away. If you don't know what Codepen is or haven't heard of it\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/codepen-tips-beginners\\\/codepen-tip-show-run-btn.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/codepen-tips-beginners\\\/codepen-tip-show-run-btn.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/codepen-tips-beginners\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Codepen Tips For Beginners\"}]},{\"@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\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Codepen Tips For Beginners - Hongkiat","description":"Codepen is a super easy and popular site to pen down a working front-end code combo right away. If you don't know what Codepen is or haven't heard of it","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\/codepen-tips-beginners\/","og_locale":"en_US","og_type":"article","og_title":"10 Codepen Tips For Beginners","og_description":"Codepen is a super easy and popular site to pen down a working front-end code combo right away. If you don't know what Codepen is or haven't heard of it","og_url":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-06-09T15:01:50+00:00","article_modified_time":"2017-11-23T11:24:33+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/codepen-tips-beginners\/codepen-tip-show-run-btn.gif","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"10 Codepen Tips For Beginners","datePublished":"2016-06-09T15:01:50+00:00","dateModified":"2017-11-23T11:24:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/"},"wordCount":793,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/codepen-tips-beginners\/codepen-tip-show-run-btn.gif","keywords":["Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/","url":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/","name":"10 Codepen Tips For Beginners - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/codepen-tips-beginners\/codepen-tip-show-run-btn.gif","datePublished":"2016-06-09T15:01:50+00:00","dateModified":"2017-11-23T11:24:33+00:00","description":"Codepen is a super easy and popular site to pen down a working front-end code combo right away. If you don't know what Codepen is or haven't heard of it","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/codepen-tips-beginners\/codepen-tip-show-run-btn.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/codepen-tips-beginners\/codepen-tip-show-run-btn.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/codepen-tips-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Codepen Tips For Beginners"}]},{"@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\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6UK","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26582","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\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26582"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26582\/revisions"}],"predecessor-version":[{"id":41925,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26582\/revisions\/41925"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26582"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}