Codepen impressive features you might don't know

Codepen beside a front end editor gives much more to increase the productivity of your code and make it applicable; as they say "demo or it didn't happen.". So after reading the documentation and API of Codepen I found a few features of it that I never seen in any editor.

RSS feeds

Basically, Codepen gives two types of RSS feed, first one community based and second one is user based. Each of them is accessible by any user, let say I want to access my popular or public feed then feed URL would be:

http://codepen.io/hamzadhamiya/popular/feed/

http://codepen.io/hamzadhamiya/public/feed/ 

List of community based URLs are listed here. The center of concern is that if you want to display your public or popular pens on any site, you can do it quite easily. One more feature that Codepen announced was blogging in Codepen, you can also opt-out your blog posts using the feeds.

Well, I'm not a Codepen addictive, but those who extremely use them and love to get pens featured; I think they should try this one.

URL extensions

After coding a pen, have you ever used its HTML, CSS or Javascript as external script. Well, on every saved pen, click share button and you will find three links of those external files attached. Well, according to docs you can access a pen codes using the URL extensions directly.

Let say my pen URL is:

http://codepen.io/hamzadhamiya/pen/ciJDw

To access its HTML, my URL would be:

http://codepen.io/hamzadhamiya/pen/ciJDw.html 

However, we know that scss is not a URL extension but if you have used SCSS or LESS instead of CSS you would add extension .scss or .less as per docs. All the extensions for full access read this page.

Keyboard shortcuts & Tab Triggers

Codepen gives access to whole editor with your keyboard, while coding a pen have a look on your left bottom side where you will find keyboard button through which you can have all the default keyboard shortcuts, that almost have full access to your editor.

Screenshot of keyboard button

One of the feature that gives you a quick boost to your coding speed is Tab triggers, writing just a single line in HTML will be converted into a complete tag. Well, a bit complex. Emmit.io a toolkit for for web-developer that let you code easily.

Let say I want to create a div with id foo. So what I need to code is:

div#foo

and press tab so it will be converted into:

<div id='foo'></div>

To read a full docs on Emmit, read here.

Prefill Editors

This is the feature I might include in my blog's CSS generators, that will let you access the CSS code live on Codepen editor in just one click.

This works quite simply, user clicks a button which will open-up the Codepen editor and the codes will be prefilled. Well, this helps people to demonstrate the codes in live environment. A coder can set each and everything of the pen right from its site, and one click magic will be done.

Clippy is currently the live example of its working. You can have it in your blog or site, read its full docs for more.

Last Words: In what sense do you like Codepen, let me know in comments.