{"id":9976,"date":"2017-04-10T22:48:32","date_gmt":"2017-04-10T17:18:32","guid":{"rendered":"https:\/\/superdevresources.com\/?p=9976"},"modified":"2017-04-10T22:49:10","modified_gmt":"2017-04-10T17:19:10","slug":"open-source-codepen-alternative","status":"publish","type":"post","link":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/","title":{"rendered":"Web Maker &#8211; An Open Source CodePen Alternative which Works Offline"},"content":{"rendered":"<p>There are many <a href=\"https:\/\/superdevresources.com\/online-code-editors\/\" target=\"_blank\">online code editors<\/a>\u00a0such as <a href=\"https:\/\/codepen.io\/\" target=\"_blank\">CodePen<\/a> and <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\">JSFiddle<\/a>\u00a0which are great for playing with front-end code and for sharing code and web demos with co-workers\u00a0and clients. Recently I came across an open source\u00a0CodePen alternative which works offline as a Chrome plugin and offers many features similar to the CodePen editor.<\/p>\n<p>This Chrome plugin is called\u00a0<a href=\"https:\/\/webmakerapp.com\/\" target=\"_blank\">Web Maker<\/a>\u00a0and once installed, it can open a code editor inside\u00a0a new tab in browser. Since Web Maker doesn&#8217;t require internet connection, it is quite fast and loads instantly. The editor interface is similar to the one provided by CodePen as seen in screenshot below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9980 size-large\" src=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative-1024x670.png\" alt=\"webmaker codepen alternative\" width=\"1024\" height=\"670\" srcset=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative-1024x670.png 1024w, https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative-300x196.png 300w, https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative-768x502.png 768w, https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative-500x327.png 500w, https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative-800x523.png 800w, https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative-600x392.png 600w, https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative.png 1228w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Similar to CodePen, Web Maker supports pre-processors for\u00a0HTML (Jade &amp; Markdown), CSS (SCSS, LESS &amp; Stylus) &amp; JavaScript (ES6, TypeScript &amp; CoffeeScript). The pre-processing also\u00a0works offline.<\/p>\n<p>Web Maker has code auto-completion and it even allows you to easily add\u00a0popular JS &amp; CSS libraries such as Bootstrap, jQuery, Vue.js etc. Do note that if you are adding and working with externally hosted libraries an internet connection will be required.<\/p>\n<p>With this Chrome plugin, you\u00a0can easily save your work locally and then open it\u00a0later. Moreover, it has an option to export your work to CodePen. This is quite useful feature and allows me to brainstorm and play with code locally first\u00a0before making it live on CodePen.<\/p>\n<p>Another feature that I like in Web Maker is that you can easily <strong>capture screenshot<\/strong> of your work (the rendered page).<\/p>\n<p>Here is a full list of features offered by\u00a0Web Maker:<\/p>\n<ul>\n<li>Preprocessors Support: HTML (Jade &amp; Markdown), CSS (SCSS, LESS &amp; Stylus) &amp; JavaScript (ES6, TypeScript &amp; CoffeeScript)<\/li>\n<li>Works offline without Internet<\/li>\n<li>Save and load your work<\/li>\n<li>Code auto-completion<\/li>\n<li>Easily add popular JS &amp; CSS libraries<\/li>\n<li>Import &amp; Export work<\/li>\n<li>Multiple editor themes &amp; configurable settings<\/li>\n<li>Works inside\u00a0new tab in Chrome<\/li>\n<li>Multiple editor layouts<\/li>\n<li>Capture preview screenshot<\/li>\n<li>Save as HTML file<\/li>\n<li>Edit in CodePen<\/li>\n<\/ul>\n<p>Web Maker is licensed under the <strong>MIT license<\/strong> and is actively being developed by <a href=\"http:\/\/kushagragour.in\/\" target=\"_blank\">Kushagra Gour<\/a>. Find below link to the Web Maker chrome plugin as well as its GitHub repo:<\/p>\n<p style=\"text-align: center;\"><a class=\"button button-primary\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-maker\/lkfkkhfhhdkiemehlpkgjeojomhpccnh\" target=\"_blank\">Install Web Maker<\/a>\u00a0<a class=\"button\" href=\"https:\/\/github.com\/chinchang\/web-maker\/\" target=\"_blank\">Web Maker on GitHub<\/a><\/p>\n<p>It is good to have multiple options, when it comes to browser based code editors and Web Maker certainly is interesting given its offline capabilities. Of-course, you can instead use a full fledged code editor like <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\">VSCode<\/a> or <a href=\"https:\/\/atom.io\/\" target=\"_blank\">Atom<\/a>\u00a0when you want to work offline, however\u00a0when you want a CodePen like experience which works offline inside your browser, then Web Maker is certainly a great fit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are many online code editors\u00a0such as CodePen and JSFiddle\u00a0which are great for playing with front-end code and &#8230; <a title=\"Web Maker &#8211; An Open Source CodePen Alternative which Works Offline\" class=\"read-more\" href=\"https:\/\/superdevresources.com\/open-source-codepen-alternative\/\" aria-label=\"Read more about Web Maker &#8211; An Open Source CodePen Alternative which Works Offline\"><span><\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":9980,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[160,58],"class_list":["post-9976","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-developer-tools","tag-free-tools","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding","resize-featured-image"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web Maker - An Open Source CodePen Alternative which Works Offline - Super Dev Resources<\/title>\n<meta name=\"description\" content=\"Learn about Web-Maker, which is an open source CodePen alternative and works offline without internet as a chrome plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/superdevresources.com\/open-source-codepen-alternative\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Maker - An Open Source CodePen Alternative which Works Offline - Super Dev Resources\" \/>\n<meta property=\"og:description\" content=\"Learn about Web-Maker, which is an open source CodePen alternative and works offline without internet as a chrome plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/superdevresources.com\/open-source-codepen-alternative\/\" \/>\n<meta property=\"og:site_name\" content=\"Super Dev Resources\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/superdevresources\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kanishkkunal\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-10T17:18:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-04-10T17:19:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1228\" \/>\n\t<meta property=\"og:image:height\" content=\"803\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kanishk Kunal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kanishkkunal\" \/>\n<meta name=\"twitter:site\" content=\"@superdevres42\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kanishk Kunal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/\"},\"author\":{\"name\":\"Kanishk Kunal\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/f9643723f546eebd0f61d356d1b71a6d\"},\"headline\":\"Web Maker &#8211; An Open Source CodePen Alternative which Works Offline\",\"datePublished\":\"2017-04-10T17:18:32+00:00\",\"dateModified\":\"2017-04-10T17:19:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/\"},\"wordCount\":441,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/webmaker-codepen-alternative.png\",\"keywords\":[\"Developer Tools\",\"Free Tools\"],\"articleSection\":[\"Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/\",\"name\":\"Web Maker - An Open Source CodePen Alternative which Works Offline - Super Dev Resources\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/webmaker-codepen-alternative.png\",\"datePublished\":\"2017-04-10T17:18:32+00:00\",\"dateModified\":\"2017-04-10T17:19:10+00:00\",\"description\":\"Learn about Web-Maker, which is an open source CodePen alternative and works offline without internet as a chrome plugin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/#primaryimage\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/webmaker-codepen-alternative.png\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/webmaker-codepen-alternative.png\",\"width\":1228,\"height\":803},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/open-source-codepen-alternative\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Development\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/category\\\/development\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Maker &#8211; An Open Source CodePen Alternative which Works Offline\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"name\":\"Super Dev Resources\",\"description\":\"Design, Development, Business &amp; Marketing Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/45.32.231.40\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\",\"name\":\"Super Dev Resources\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"width\":512,\"height\":512,\"caption\":\"Super Dev Resources\"},\"image\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/superdevresources\",\"https:\\\/\\\/x.com\\\/superdevres42\",\"https:\\\/\\\/www.pinterest.com\\\/superdevres42\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/f9643723f546eebd0f61d356d1b71a6d\",\"name\":\"Kanishk Kunal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"caption\":\"Kanishk Kunal\"},\"description\":\"Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal\",\"sameAs\":[\"https:\\\/\\\/kanishkkunal.com\",\"https:\\\/\\\/www.facebook.com\\\/kanishkkunal\",\"https:\\\/\\\/www.instagram.com\\\/kanishkkunal\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kanishkkunal\",\"https:\\\/\\\/in.pinterest.com\\\/kanishkkunal\\\/\",\"https:\\\/\\\/x.com\\\/kanishkkunal\",\"kanishkkunal\"],\"url\":\"https:\\\/\\\/superdevresources.com\\\/author\\\/kanishk\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Maker - An Open Source CodePen Alternative which Works Offline - Super Dev Resources","description":"Learn about Web-Maker, which is an open source CodePen alternative and works offline without internet as a chrome plugin.","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:\/\/superdevresources.com\/open-source-codepen-alternative\/","og_locale":"en_US","og_type":"article","og_title":"Web Maker - An Open Source CodePen Alternative which Works Offline - Super Dev Resources","og_description":"Learn about Web-Maker, which is an open source CodePen alternative and works offline without internet as a chrome plugin.","og_url":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/","og_site_name":"Super Dev Resources","article_publisher":"https:\/\/www.facebook.com\/superdevresources","article_author":"https:\/\/www.facebook.com\/kanishkkunal","article_published_time":"2017-04-10T17:18:32+00:00","article_modified_time":"2017-04-10T17:19:10+00:00","og_image":[{"width":1228,"height":803,"url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative.png","type":"image\/png"}],"author":"Kanishk Kunal","twitter_card":"summary_large_image","twitter_creator":"@kanishkkunal","twitter_site":"@superdevres42","twitter_misc":{"Written by":"Kanishk Kunal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/#article","isPartOf":{"@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/"},"author":{"name":"Kanishk Kunal","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/f9643723f546eebd0f61d356d1b71a6d"},"headline":"Web Maker &#8211; An Open Source CodePen Alternative which Works Offline","datePublished":"2017-04-10T17:18:32+00:00","dateModified":"2017-04-10T17:19:10+00:00","mainEntityOfPage":{"@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/"},"wordCount":441,"commentCount":0,"publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"image":{"@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative.png","keywords":["Developer Tools","Free Tools"],"articleSection":["Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/superdevresources.com\/open-source-codepen-alternative\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/","url":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/","name":"Web Maker - An Open Source CodePen Alternative which Works Offline - Super Dev Resources","isPartOf":{"@id":"https:\/\/45.32.231.40\/#website"},"primaryImageOfPage":{"@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/#primaryimage"},"image":{"@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative.png","datePublished":"2017-04-10T17:18:32+00:00","dateModified":"2017-04-10T17:19:10+00:00","description":"Learn about Web-Maker, which is an open source CodePen alternative and works offline without internet as a chrome plugin.","breadcrumb":{"@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/superdevresources.com\/open-source-codepen-alternative\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/#primaryimage","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative.png","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative.png","width":1228,"height":803},{"@type":"BreadcrumbList","@id":"https:\/\/superdevresources.com\/open-source-codepen-alternative\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/superdevresources.com\/"},{"@type":"ListItem","position":2,"name":"Development","item":"https:\/\/superdevresources.com\/category\/development\/"},{"@type":"ListItem","position":3,"name":"Web Maker &#8211; An Open Source CodePen Alternative which Works Offline"}]},{"@type":"WebSite","@id":"https:\/\/45.32.231.40\/#website","url":"https:\/\/45.32.231.40\/","name":"Super Dev Resources","description":"Design, Development, Business &amp; Marketing Resources","publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/45.32.231.40\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/45.32.231.40\/#organization","name":"Super Dev Resources","url":"https:\/\/45.32.231.40\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","width":512,"height":512,"caption":"Super Dev Resources"},"image":{"@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/superdevresources","https:\/\/x.com\/superdevres42","https:\/\/www.pinterest.com\/superdevres42\/"]},{"@type":"Person","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/f9643723f546eebd0f61d356d1b71a6d","name":"Kanishk Kunal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","caption":"Kanishk Kunal"},"description":"Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal","sameAs":["https:\/\/kanishkkunal.com","https:\/\/www.facebook.com\/kanishkkunal","https:\/\/www.instagram.com\/kanishkkunal\/","https:\/\/www.linkedin.com\/in\/kanishkkunal","https:\/\/in.pinterest.com\/kanishkkunal\/","https:\/\/x.com\/kanishkkunal","kanishkkunal"],"url":"https:\/\/superdevresources.com\/author\/kanishk\/"}]}},"jetpack_featured_media_url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2017\/04\/webmaker-codepen-alternative.png","jetpack-related-posts":[{"id":7329,"url":"https:\/\/superdevresources.com\/online-code-editors\/","url_meta":{"origin":9976,"position":0},"title":"6 Free Online Code Editors for Front-End Web Development","author":"Kanishk Kunal","date":"July 1, 2015","format":false,"excerpt":"Online code editors are great when it comes to writing and accessing your code from anywhere. These web-based code editors are also helpful for sharing your code with others or for demoing your project, and for doing collaborative editing with other developers. In this article, we have brought together some\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/07\/codepen-live-editor.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/07\/codepen-live-editor.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/07\/codepen-live-editor.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/07\/codepen-live-editor.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/07\/codepen-live-editor.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":8354,"url":"https:\/\/superdevresources.com\/full-background-image-css\/","url_meta":{"origin":9976,"position":1},"title":"Full Screen Background Image with CSS","author":"Kanishk Kunal","date":"January 2, 2015","format":false,"excerpt":"Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is placed on top of this full-screen background image. The background image remains fixed at its position as user scrolls and is also responsive, therefore\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1648,"url":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/","url_meta":{"origin":9976,"position":2},"title":"Super simple Ghost Button CSS","author":"Kanishk Kunal","date":"November 9, 2014","format":false,"excerpt":"In this tutorial, I will show you how to create a very simple & minimal\u00a0Ghost Button with CSS. Ghost Buttons are quite popular these days and are trending design element\u00a0while doing minimal\u00a0& Flat Web design. While there are multiple ways one can approach making the Ghost button, however, I will\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"simple ghost button css","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":8349,"url":"https:\/\/superdevresources.com\/css-hamburger-menu\/","url_meta":{"origin":9976,"position":3},"title":"Creating a CSS only Hamburger Menu Icon (no Images or Icon Fonts)","author":"Kanishk Kunal","date":"January 16, 2015","format":false,"excerpt":"In this post, I will be sharing CSS code snippet for creating a hamburger menu without any Images or Icon Fonts. Hamburger menu are often used in responsive web design to depict an expandable list of menu. It is possible to create this three line menu icon with only CSS,\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/css-hamburger-menu-icon.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/css-hamburger-menu-icon.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/css-hamburger-menu-icon.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/css-hamburger-menu-icon.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":154,"url":"https:\/\/superdevresources.com\/responsive-table\/","url_meta":{"origin":9976,"position":4},"title":"Responsive Table with alternate color rows","author":"Kanishk Kunal","date":"November 30, 2014","format":false,"excerpt":"In this post I will be sharing CSS code snippet for making a simple responsive table with alternate color rows (zebra stripes). I made use of these when making leader-board tables for our HTML5 games. CSS for Responsive Table Please note that we are making a very simple responsive table\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"responsive table with zebra stripes","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/responsive-table-zebra-stripe.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/responsive-table-zebra-stripe.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/responsive-table-zebra-stripe.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/responsive-table-zebra-stripe.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":95,"url":"https:\/\/superdevresources.com\/color-inline-svg-css\/","url_meta":{"origin":9976,"position":5},"title":"Change Color of Inline SVG With CSS","author":"Kanishk Kunal","date":"November 24, 2014","format":false,"excerpt":"While working on optimizing some of my websites for speed, I decided to make use of inline SVG images instead of font icons such as Font Awesome. However, this lead to finding an option to change the color of the inline SVG. Here I am documenting how to achieve this\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"inline svg color","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/inline-svg-color.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/inline-svg-color.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/inline-svg-color.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/inline-svg-color.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/9976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/comments?post=9976"}],"version-history":[{"count":0,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/9976\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media\/9980"}],"wp:attachment":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media?parent=9976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/categories?post=9976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/tags?post=9976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}