A lot of devs are now using CodePen for a variety of front end web development tasks and tricks. CodePen can be used to create Pens which are made up of JavaScript, CSS and HTML. A great thing about CodePen is that you can see your results immediately, effectively making this tool indispensable for any front end dev. But what can we do if we combine JavaScript and CodePen?
1. Add any library you need in one place
You can add custom settings to any Pen you create: you can set the External JavaScript you need or want to use. Just go to the Quick Add dropdown to do it or simply start typing the required library and a variety of choices will appear. This way you’ll be able to find thousands of CDN hosted libraries.
2. Write in ES2015
Practice your ES2015 skills with CodePen by simply enabling the Babel JavaScript pre-processor. Now you’re able to use ES2015’s features and Babel will process them into an older version of JavaScript, enabling it to work everywhere. You can also do it without using Babel whatsoever but it may lead to browser support issues.
3. You can use the console for debugging and output
With CodePen, you can also use your browser’s DevTools if you set its context to demo. CodePen also features a built-in console which you can use. Keep in mind that your URL might change when you close or open different code panels. There are four numbers which stand for HTML, CSS, JS and Console respectively so the URL parameter ?editors=0001 stands for Console open while the others are closed. Replacing the last number with a 2 maximizes the console. This way you can share a Pen when the output is intentionally set only for the console.
4. Use JSX and React
Babel also supports JXSX so if you add ReactDOM and React you’ll be able to build in react as well. Apart from Babel, CodePen also offers LiveScript, TypeScript and CoffeeScript. TypeScript is able to process the JSX as well.
5. You can also include other pens as resources
Using JavaScript for another Pen is also possible by simply dropping the URL of your other Pen in the External JavaScript function and that’s all there is to it. You’ll be able to create multiple Pens that use the same JavaScript – this way it will be easier to update it when necessary.
This little trick also works for CSS in the same way. When it comes to HTML you can include the Pen URL in triple brackets within the HTML itself.
6. Get Ajax from other Pens
With CodePen you can use other Pens as resources and you can access the code from Pens located at certain URLs. If you want to access just JavaScript from another pen, you can add .js to the end of the URL you’re targeting.
This technique can be especially useful when storing data in another Pen so you won’t have to meddle with the JavaScript code in the Pen you’re currently working on.
7. Learn new stuff with CodePen
Devs can use CodePen as a learning tool as well – it’s real code which you can write, edit but also see the results of. You can create Pens for learning purposes specifically but our favourite is the Professor Mode which allows other devs to watch you code in real time and give pointers through the built in chat system.
Collab Mode is another useful tool which can be used for teaching purposes – this mode allows multiple people to work on a Pen concurrently for hands-on teaching.
8. You can see coding errors in real time
Another feature we love about CodePen is that you can see any errors in your code right in the editor itself. This feature also works for JavaScript – the lines with errors will be highlighted and a special icon will be revealed. Clicking the icon will reveal the error message which is a huge help in understanding the problem and fixing it.
CodePen also tries to prevent executing infinite loops which can lock your browser and prevent you from saving your Pen.
9. Lint your JavaScript
CodePen can check your JavaScript code with JS Hint as well. This is a tool which detects potential problems or errors in your code. Use this tool to uncover non execution stopping errors most devs tend to miss. If the error message doesn’t provide enough help for you to fix it, there are built-in “Google it” links to find more information.
CodePen also lints your JavaScript which is great because if you’re using a pre-processor, it will lint the code for linting warnings. If JS Hint finds any issues it will show you the problems directly in the code.
10. Clean code – easier work
CodePen also has a feature which can help to clean up your code. This feature works with JSX as well.
