Using online tools to process CoffeeScript - CoffeeScript Tutorial

Since CoffeeScript is a language that compiles to JavaScript, you're going to need some sort of tool or a workflow to process your files. In this video, I'm going to show you a few online tools like JS Bin and Code Kit to take care of that. Now, if you just want to play around with CoffeeScript to see if it's right for you, you can skip the rest of the chapter, where I'll be creating a more realistic workflow for dealing with processing files. So, let's take a look at some of the online options for exploring CoffeeScript. First, of course, is the CoffeeScript website itself. If you go to coffeescript.org, you can click on this Try CoffeeScript section right here. And what this will do is on the left, it will show you a CoffeeScript command. And you can type in your own right here. And you can see how CoffeeScript will convert your script to JavaScript on the right hand side. Now, this is not very practical because it doesn't give you a realistic way of combining this with, say, HTML. So another service you can try is something like JS Bin at jsbin.com. Now in here, you can open up a JavaScript tab, and from this pop-up menu, switch to CoffeeScript. If you want to load an additional library, you want to click right here and load up a library like, say, jQuery. 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.