Join Ray Villalobos for an in-depth discussion in this video Using online tools to process CoffeeScript, part of Learning CoffeeScript.
And the nice thing about this is that it's giving you a full HTML page here on the left. So your CoffeeScript can interact with elements on your HTML. As soon as you type in your CoffeeScript, you can see the results on the right hand side. Occasionally, you'll need to click on this Run with JS button, but you can see that the result of my CoffeeScript command, appending hello world to my h1 tag, were immediately executed by JS bin. One more tool that you can use is codepen.io. Now in here, you click on New Pen, and then you have these three different panes, similar to what you saw in JS Bin.
I'm going to hide the CSS version right here. And then, from this menu, click on the CoffeeScript option. And you can also add a library right here by saying latest version of jQuery. Now in CodePen, you're not going to type in the structure of a whole page. As a matter of fact, it will give you a warning if you do. So you just need to put in what goes in the body tag. With both of these tools, you can use MS shortcuts if you want to. Much like JS bin, the script will execute automatically on this output window.
If you just want to play around with CoffeeScript, some of these online tools are a great way to test the waters and experience what the language can do. If you're more serious about creating a professional workflow, not just for CoffeeScript, but for any project, then I'll see you in the next video.
- What is CoffeeScript?
- Setting up a project with Gulp.js
- Adding CoffeeScript to your workflow
- Dealing with array ranges
- Working with conditional statements
- Using loops
- Working with splats