{"id":22272,"date":"2014-10-27T18:01:04","date_gmt":"2014-10-27T10:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22272"},"modified":"2018-10-27T18:31:41","modified_gmt":"2018-10-27T10:31:41","slug":"coding-playgrounds","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/","title":{"rendered":"6 Coding Playgrounds For Web Developers"},"content":{"rendered":"<p>Over the past couple of years several coding playgrounds have popped up, much to our delight. These are <strong>web applications that allow real-time editing and previews<\/strong> of client-side codes: HTML, CSS, and JavaScript. The best part of these coding playgrounds is that <strong>most of them are free<\/strong> and you can easily share a \u201cplayground\u201d with someone either <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/sites-to-learn-coding-online\/\">for teaching purposes<\/a> or for debugging.<\/p>\n<p>Personally, these web applications have been a great help to my work. Whenever I find myself stumped with JavaScript or CSS, I can easily create a playground and share it to my other developer friends for help. They are <strong>fun<\/strong>, <strong>interactive<\/strong>, and<strong> totally helpful especially for beginners<\/strong>. Here are <strong>6 coding playgrounds that you can try out for yourself.<\/strong><\/p>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tools-to-coding-online\/\">15 Websites To Test Your Codes Online<\/a><\/p>\n<h2>1. <a target=\"_blank\" href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">Codepen<\/a><\/h2>\n<p>Codepen is probably <strong>one of the most popular coding playgrounds<\/strong> out there. Chris Coyier of CSS Tricks is a co-founder\/co-creator of Codepen, which probably explains why this web app looks grand. Aside from its sleek visuals, Codepen <strong>displays live previews of the changes you make in its editor<\/strong>, making it easier to see cause and effect.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/codepen.jpg\" alt=\"codepen\" width=\"1200\" height=\"737\"><\/figure>\n<p>Codepen\u2019s available CSS pre-processors include SCSS, SASS, LESS, and Stylus. And for JS pre-processor it has CoffeeScript and LiveScript. For HTML it has Haml, Markdown, Slim, and Jade. There\u2019s also<strong> 8 built-in JS libraries<\/strong> ready to be used. Collaboration and private \u201cpens\u201d in Codepen are available, but you have to pay for them.<\/p>\n<h2>2. <a target=\"_blank\" href=\"https:\/\/jsfiddle.net\/\">JSFiddle<\/a><\/h2>\n<p>JSFiddle is probably <strong>responsible for the popularity of coding playgrounds<\/strong>, since it is one of the first and most famous playgrounds available. JSFiddle has <strong>over 30 JavaScript libraries<\/strong> ready for immediate usage, plus you <strong>can add external files<\/strong> easily. For pre-processing, it has SCSS for CSS, CoffeeScript for JS and simple vanilla HTML.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/JSFiddle.jpg\" alt=\"JSFiddle\" width=\"1200\" height=\"585\"><\/figure>\n<p>If you are collaborating with another developer, I highly recommend using JSFiddle to sort things out. Among the available coding playgrounds out there, JSFiddle\u2019s <strong>collaboration feature is probably the best<\/strong> of the bunch. Plus the feature is easy to use and free, unlike Codepen.<\/p>\n<p><strong>What is missing from JSFiddle is live previews<\/strong>. You have to basically refresh the page by clicking on the play button. And compared to other playgrounds, JSFiddle is<strong> probably the slowest<\/strong>. Another <strong>slightly frustrating quirk<\/strong> of JSFiddle is <strong>its run button<\/strong>, sometimes clicking on it doesn\u2019t work, so you\u2019ll have to click a couple more times before it actually runs the code (and yes, I tested this on multiple browsers).<\/p>\n<h2>3. <a target=\"_blank\" href=\"https:\/\/jsbin.com\/?html,output\" rel=\"nofollow\">JS Bin<\/a><\/h2>\n<p>JS Bin is  created by Remy Sharp, a master JavaScript developer who owns a web development company focused on, you guessed it, JavaScript (and HTML5). JS Bin\u2019s JS pre-processor includes CoffeeScript, TypeScript, Traceur, and JSX and has <strong>over 40 JS libraries<\/strong> at its disposal. You <strong>can add external files<\/strong>, but you\u2019ll <strong>have to do it manually<\/strong> on the editor. As for CSS pre-processor, it provides LESS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/JS-Bin.jpg\" alt=\"JS Bin\" width=\"1200\" height=\"321\"><\/figure>\n<p>What sets it apart from the previous playgrounds is that JS Bin<strong> allows you to download files to your computer<\/strong>, a nifty feature that may prove useful to developers, especially when fiddling around with code while offline. You can also<strong> create private \u201cbins\u201d<\/strong> on JS Bin but you will <strong>have to pay for this feature<\/strong>. Unfortunately, at this point, JS Bin doesn\u2019t have a collaboration feature.<\/p>\n<h2>4. <a target=\"_blank\" href=\"https:\/\/cssdeck.com\/\">CSSDeck<\/a><\/h2>\n<p>CSSDeck has <strong>been around for several years<\/strong> now but it hasn\u2019t made much of an impact. But it is still noteworthy because of <strong>its simplicity<\/strong>. If you want to avoid all the noise of other playgrounds with all of their features, CSSDeck is the app to use.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/cssdeck.jpg\" alt=\"CSSDeck\" width=\"1200\" height=\"764\"><\/figure>\n<p>CSSDeck\u2019s pre-processors include HAML, Markdown, Slim, and Jade for HTML, LESS, Stylus, SASS, and SCSS for CSS, and CoffeeScript for JS. It also <strong>has several CSS and JS libraries<\/strong> available and adding libraries that aren\u2019t in the list is done manually, which should be easy.<\/p>\n<p>One thing that surprised me about CSSDeck is its simple but useful feature that allows its users to <strong>increase text size<\/strong>. If you are looking for a playground with lots of fancy features then CSSDeck isn\u2019t for you. But this is also what makes it unique since <strong>its simplicity gives focus on the things that matter<\/strong>.<\/p>\n<h2>5. <a target=\"_blank\" href=\"https:\/\/dabblet.com\">Dabblet<\/a><\/h2>\n<p>Before anything else, Dabblet surprised me big time when I <strong>hovered on hex color codes<\/strong>. The colors actually popped out! Now, that\u2019s a first. Although I\u2019m not certain if that\u2019s actually a useful feature, it\u2019s still pretty neat.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/dabblet.jpg\" alt=\"Dabblet\" width=\"1200\" height=\"586\"><\/figure>\n<p>Now, the great thing about Dabblet is that <strong>it allows its users to preview it in 5 different views<\/strong>: CSS editor and the result, HTML editor and the result, CSS and HTML editors and result, JavaScript and its playable result, or everything at once. I hope that wasn\u2019t a mouthful, but it\u2019s crucial to understand that <strong>this bulk feature is not available on other playgrounds<\/strong>.<\/p>\n<p>One thing that I\u2019m confused about is <strong>its lack of pre-processor options for HTML and CSS<\/strong>. It doesn\u2019t have these along with built-in JavaScript libraries. But I guess you <strong>can insert those manually<\/strong>, so no sweat on that. With regards to each panels, they are fixed in size and you can\u2019t resize them, something that the previous playgrounds have. Also, it <strong>doesn\u2019t seem to have a gallery of demos from other users<\/strong>.<\/p>\n<h2>6. <a target=\"_blank\" href=\"https:\/\/liveweave.com\/\">Liveweave<\/a><\/h2>\n<p>Liveweave is <strong>a useful coding playground packed with quite a few features<\/strong> such as having the capability to <strong>turn off its live preview<\/strong>. You can also take better care of your eyesight with <strong>the night vision mode<\/strong>, where everything turns dark. Liveweave offers <strong>over 20 JavaScript libraries<\/strong>. It even supports SVG. It also <strong>comes with a built-in ruler<\/strong> which is great for getting precise measurements and aesthetics.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/liveweave.jpg\" alt=\"Liveweave\" width=\"1200\" height=\"793\"><\/figure>\n<p>One more thing that caught my attention is its <strong>easy collaboration feature<\/strong>. If you have used Teamviewer in the past, it works the same way. All you have to do is click on the Team Up link and you can share the link to your \u201cweave\u201d. I\u2019m not certain if it\u2019s my laptop or my Internet connection, but <strong>there seems to be a slight lag<\/strong>. Still, it\u2019s an essential feature and Liveweave did it beautifully.<\/p>\n<p>You can even <strong>download your weaves as a single HTML file<\/strong> (whoops, JS, CSS, and HTML in one file \u2013 minus points!) or as <strong>a zip file<\/strong> for separate HTML, CSS, and JS files (well, there you go). Before I forget, it has <strong>a built-in Lorem Ipsum generator<\/strong>.<\/p>\n<h2>Conclusion<\/h2>\n<p>Well, there you go, <strong>each playground has their own unique characteristics<\/strong> that may prove useful to you in one of your \u201cplaytimes\u201d. I hope this article has helped you in picking the right one for your needs. If you have other playgrounds in mind, please do share them with us in the comments below.<\/p>","protected":false},"excerpt":{"rendered":"<p>Over the past couple of years several coding playgrounds have popped up, much to our delight. These are web applications that allow real-time editing and previews of client-side codes: HTML, CSS, and JavaScript. The best part of these coding playgrounds is that most of them are free and you can easily share a \u201cplayground\u201d with&hellip;<\/p>\n","protected":false},"author":25,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[511],"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>6 Coding Playgrounds For Web Developers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Over the past couple of years several coding playgrounds have popped up, much to our delight. These are web applications that allow real-time editing and\" \/>\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\/coding-playgrounds\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 Coding Playgrounds For Web Developers\" \/>\n<meta property=\"og:description\" content=\"Over the past couple of years several coding playgrounds have popped up, much to our delight. These are web applications that allow real-time editing and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/\" \/>\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=\"2014-10-27T10:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-27T10:31:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/codepen.jpg\" \/>\n<meta name=\"author\" content=\"Rean\" \/>\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=\"Rean\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/\"},\"author\":{\"name\":\"Rean\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/9055cf045c2ed578773e8a4e184ba621\"},\"headline\":\"6 Coding Playgrounds For Web Developers\",\"datePublished\":\"2014-10-27T10:01:04+00:00\",\"dateModified\":\"2018-10-27T10:31:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/\"},\"wordCount\":1113,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/coding-playgrounds\\\/codepen.jpg\",\"keywords\":[\"Web Developers\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/\",\"name\":\"6 Coding Playgrounds For Web Developers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/coding-playgrounds\\\/codepen.jpg\",\"datePublished\":\"2014-10-27T10:01:04+00:00\",\"dateModified\":\"2018-10-27T10:31:41+00:00\",\"description\":\"Over the past couple of years several coding playgrounds have popped up, much to our delight. These are web applications that allow real-time editing and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/coding-playgrounds\\\/codepen.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/coding-playgrounds\\\/codepen.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coding-playgrounds\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"6 Coding Playgrounds For Web Developers\"}]},{\"@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\\\/9055cf045c2ed578773e8a4e184ba621\",\"name\":\"Rean\",\"description\":\"Rean is an operations specialist, growth hacker, and a consultant specializing in remote team setup and management.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/rean\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"6 Coding Playgrounds For Web Developers - Hongkiat","description":"Over the past couple of years several coding playgrounds have popped up, much to our delight. These are web applications that allow real-time editing and","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\/coding-playgrounds\/","og_locale":"en_US","og_type":"article","og_title":"6 Coding Playgrounds For Web Developers","og_description":"Over the past couple of years several coding playgrounds have popped up, much to our delight. These are web applications that allow real-time editing and","og_url":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-10-27T10:01:04+00:00","article_modified_time":"2018-10-27T10:31:41+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/codepen.jpg","type":"","width":"","height":""}],"author":"Rean","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Rean","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/"},"author":{"name":"Rean","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/9055cf045c2ed578773e8a4e184ba621"},"headline":"6 Coding Playgrounds For Web Developers","datePublished":"2014-10-27T10:01:04+00:00","dateModified":"2018-10-27T10:31:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/"},"wordCount":1113,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/codepen.jpg","keywords":["Web Developers"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/","url":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/","name":"6 Coding Playgrounds For Web Developers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/codepen.jpg","datePublished":"2014-10-27T10:01:04+00:00","dateModified":"2018-10-27T10:31:41+00:00","description":"Over the past couple of years several coding playgrounds have popped up, much to our delight. These are web applications that allow real-time editing and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/codepen.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/coding-playgrounds\/codepen.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/coding-playgrounds\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"6 Coding Playgrounds For Web Developers"}]},{"@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\/9055cf045c2ed578773e8a4e184ba621","name":"Rean","description":"Rean is an operations specialist, growth hacker, and a consultant specializing in remote team setup and management.","url":"https:\/\/www.hongkiat.com\/blog\/author\/rean\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5Ne","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22272","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=22272"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22272\/revisions"}],"predecessor-version":[{"id":45760,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22272\/revisions\/45760"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=22272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=22272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=22272"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=22272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}