How Do You Write a For Loop in CoffeeScript?

By far, the most common question people new to CoffeeSccript seem to have is, ‘How do I do a for loop?’

How Do You Write a For Loop in CoffeeScript?

In CoffeeScript, loops are expressed as comprehensions. This is a feature of the language, as you can express complicated loops in a single line of code, or in a very terse syntax.

The down side is, conventional for and while loops don’t really translate easily into CoffeeScript for people looking for a straight syntax port.

What’s really needed in these cases is a reverse compiler. One that can go from traditional JavaScript to CoffeeScript, if only to illustrate a way of expressing something that you already know how to write in JavaScript.

js2coffee.org To the Rescue

This very cool tool from js2coffee.org is just what the doctor ordered. It can take any traditional JavaScript code and transpile it into valid CoffeeScript code.

This is perfect when you don’t know exactly how to express something in CoffeeScript, but know how to do it in JavaScript. It’s fast, simple and can answer many questions, when all you need is an example based on JavaScript you already know.

7 Great CSS Tools

There are tons of free tools online for learning and experimenting with CSS. Some of them, like the W3C specs are intended more for people that build web browsers rather than people that build websites to be displayed in browsers. The following seven tools are intended for people that create websites and want to use expressive (and sometimes cutting edge) CSS to style them.

  1. WebPlatform.org – This site is maintained by Google, Microsoft, Adobe, Facbook and many other major companies that rely on the community of web developers and it provides a great starting point for anyone looking for additional information about the various web technologies (HTML, CSS, JavaScript).
  2. CanIUse.com – Whenever you find yourself asking if you should use a particular feature of CSS, you’ll want to know if that feature is widely supported by the major browsers. CanIUse.com gives you a full list of CSS features. You can click any one to see which browsers support that particular feature.
  3. Find Me By IP is a site that will tell you a bunch of information about your web browser and your IP address. If you want to see a list of which CSS features your own web browser supports, Find Me By IP will tell you. They have a bunch of developer tools that go far beyond IP related topics (including CSS).
  4. CSS Deck – This is an online playground similar to JS Fiddle. Where JS Fiddle is commonly used to illustrate and test pieces of JavaScript, CSS Deck does the same kind of thing for CSS experimentation. Unlike JS Fiddle (as of this writing) CSS Deck includes a number of preprocessor options like Jade, Stylus and CoffeeScript. So if you wanted to just play around with these languages, CSS deck is a great place to experiment, without needed to set up your own preprocessors. It’s a great place to test out various CSS features when you just need a quick place to test something out.
  5. Cubic-Bezier.com and Ceasar are two (almost) identical tools that can be used to create cubic-bezier easing parameters. When using animated CSS, sometimes simple ease-in/ease-out is not expressive enough. In which case, you can cubic-bezier easing is a great option. But coming up with the numeric parameters without a tool can be a challenge. Cubic bezier easing of a CSS transition looks like this:
    transition: all 500ms cubic-bezier(0.170, 0.610, 0.865, 0.290);

    With either of these tools, you can graphically create a bezier curve and the tool will give you the parameter list. You can also test the animation in the tools to be sure it creates the type of easing you desire.

  6. CDNJS – This site is a huge list of JavaScript libraries that you can load from the CloudFlare CDN, rather than needing a local copy of the library on your web server. These are particularly useful when using a tool like CSS Deck or JS Fiddle, where you don’t have the option to upload a JavaScript file to their server. You need a place where you can pull the library in from a content delivery network online. CDNJS has just about every JavaScript library for you to grab and load from their CDN.

Replace standard HTML with Jade – the Node Template Engine

When creating websites with Node.js, especially when using CoffeeScript and Stylus, it becomes obvious that there’s a piece missing.  Using the clean, Python-like, syntax of CoffeeScript and Stylus, it always feels awkward to write HTML in its standard form.  Especially when creating JavaScript based applications, it’s necessary to create page templates to be displayed in the web browser.

it becomes very attractive to have a templating engine that gets away from the tag-based nature of HTML

The two big options gaining traction in the community these days are Handlebars and Jade.

Handlebars, an extension of Mustache, is a great templating engine.  Used with other frameworks, like Meteor.js, being able to data-bind values in Handlebars makes it a very attractive option.  Handlebars syntax looks like standard HTML with markers and tokens that indicate where values should be inserted and where the meta language of Handlebars should execute basic flow control logic.

I like Handlebars.  But one of the things that make CoffeeScript and Stylus so compelling is that the language manages closures by giving meaning to simple indentation.  Of the three languages you normally come across as a web developer (e.g. HTML, CSS, and JavaScript), the one that is the most prone to having complicated closures is HTML.  So, it becomes very attractive to have a templating engine that gets away from the tag-based nature of HTML, and moves more toward managing closures with indentation.

That’s exactly where Jade comes in.

Jade (like Stylus and CoffeeScript) is best explained by side-by-side example:

Jade HTML

!!! 5
<!DOCTYPE html>

html
head
meta(http-equiv="Content-Type", content="text/html; charset=UTF-8")
body
#body-content This is a Jade template

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="body-content">This is a Jade template</div>
</body>
</html>

Jade eliminates the need for closing HTML tags.  Indentation matters, and with that meaning, closures become obvious and managed by the Jade compiler.

In addition to the simpler syntax, Jade also supports a similar dynamic meta language and token based variables as Handlebars does.  This enables data-binding in various frameworks, and Jade is the default templating engine in Express (the Node.js web server).

Get started with Jade @Jade-lang.com

Stylus: Because CSS Needs a Hero

Once you’ve gone to the trouble of setting up a build process (either via CodeKit, or direct compiles with Node.js, or infinite other options), using a pre-processor or trans-compiler (also sometimes called transpiler) to make more effective use of CSS is a natural place to start.

This is starting to sound like work. Why bother?

Okay, those sound like big words, and your eyes glaze over. But seriously, this is worth the voyage if you can make it through another paragraph or two.

By using a CSS pre-processor language, you get a few benefits right off the bat:

  • the transpiler can detect obvious errors in syntax and alert the developer at compile time
  • you can nest selectors, meaning you can write CSS selectors in a nested list (nested by indentation, Python style)
  • you can use variables, functions and mix-ins to be 100% DRY

Some CSS Pre-Processors

LESS

LESS is one of the first dynamic style sheet languages. Most other CSS pre-processors share some roots from LESS

SASS

SASS is an extension of LESS

Stylus

Stylus is one of the newer CSS language extensions, but it’s so easy to learn, understand and use, it wound up being my favorite (so far). If you understand basic CSS, then you can take a look at Stylus’ home page and instantly understand how to use the language.

Imagine normall CSS, but you can omit the curly braces and the colons. You can use nested selectors, variables, functions and mix-ins.

The fact is, nobody explains Stylus better than their home page. If you want to see what Stylus can do for you:

Checkout Stylus for yourself

CodeKit: It’s Like Steroids For Web Developers

In a previous post, we talked about Node.js and CoffeScript

If you happen to be developing on a Mac, there’s a very useful app called CodeKit that can automate your build process for you in a easy/graphical way. In addition to automatically compiling CoffeeScript files in to JavaScript files, it will similarly watch CSS transpiler languages like LESS, SASS, and Stylus and compile the final CSS files.

You can use CodeKit to link/include JavaScript and CSS files. So you can have numerous JavaScript or CSS files and link them up to all compile into a single minified version.



You can even have CodeKit pass your JavaScript files through JSLint or JSHint.

Best of all, as CodeKit watches you update your source files, it automatically compiles based on your build process, then refreshes your web browser. So, by just pressing ‘command-s’ to save your code file, CodeKit compiles it all and refreshes your browser to see the result.

It’s pretty sweet. It’s not free, but it’s not expensive. The developer charges on a sliding scale, based on how much your feel it’s worth. It’s definitely worth a trial look.

Definitely check out the demo videos on the developers home page. It not just demonstrates the power of CodeKit, the workflow it creates with your text editor and your browser. It shows how easy it can be when developing with trans compilers.

Installing Node.js and CoffeeScript

What is this CoffeeTalk thing all about?

Okay, we’ve set up our web server, and designed a simple WordPress theme.  So, what’s the CoffeeTalk thing all about?

In general, we’re going to be looking at HTML5 scripting technologies, primarily using CoffeeScript and Node.js.  But we will also look at other ECMAScript languages, like JavaScript and ActionScript.

As a part of ECMAScript being a web based technology, we’ll also be looking into HTML, CSS3 (including styling engines like SASS, LESS, Stylus, etc.), Databases in general including MySQL and NoSQL databases like Mongo.DB and Couch.DB.

As you can see, the range of JavaScript based languages are becoming spread across the technology stack.  And that gives us a very nice unified language to use to demonstrate coding across the stack.  Here, I’m hoping to create a blog outlining how to create in this mix of JavaScript.  Generically, I’m calling it CoffeeTalk.  We plan to talk about more than CoffeeScript, but for today, that’s where we’re going to start.

To play along, you’ll need a JavaScript based environment that you can run from the terminal (mac/linux) or command line (win).  If you’ve run Ruby or Python from the command line of your computer, Node.js is the way to run a JavaScript based scripting engine on your client or server.

Install Node.js

Once you have Node.js installed, you should be able to open your terminal or command line and type “node” to run Node.js.  The command line works much like it does with Python.  You can issue commands like “2 + 2″ and it will output the result.

Installing CoffeScript

As a part of installing Node.js, it will have added npm (Node Package Manager) as a command line tool used to manage node packages (or plugins).

To install CoffeeScript, (be sure you’ve exited Node.js cmd+d) you’ll need to type:

npm install -g coffee-script

That’s all there is to installing CoffeeScript in Node.js.  You can double check that everything installed as planned by asking coffee for help from the command line:

coffee --help

If you got the CoffeeScript help screen to come up, you’re all set up with the tools you’ll need to get started and follow along.

Check out the websites for CoffeeScript and Node.js. We’ll be using both of these tools a lot.

Basic WordPress Theme using “_s”

After getting the basic WordPress install to use as our CMS, the next step is to create our first WP theme.

The group behind WordPress provide _s (pronounced “Underscores”).  This looked like a solid framework to extend.

With _s, jQuery (which came with WordPress) and around 100 lines of CSS code, we have our first basic WordPress theme for the site:

CoffeeTalk Theme:

(show me these 100 lines of CSS of which you speak!)


/* =CoffeeTalk styles -----*****/

body {
	background-image: url('images/Christmas Background.jpg');
	background-position: center center;
	background-attachment: fixed;
	text-align: center;
}
a {
	color: #432;
	text-decoration: none;
}
a:hover {
	color: #c27b09;
	text-decoration: underline;
}
a:visited {
	color: #543;
}
#page {
	width: 960px;
	text-align: left;
	position: relative;	
}
#primary {
	float:left;
	width: 650px;
}
#primary .post {
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background-image: url('images/cardboard-edge.png');
	box-shadow: 0 3px 5px rgba(34, 25, 25, 0.4);
	-moz-box-shadow: 0 3px 5px rgba(34,25,25,0.4);
	-webkit-box-shadow: 0 3px 5px rgba(34, 25, 25, 0.4);
	padding: 1em;
	margin: .5em;
}
#primary .post .entry-content {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #FFFFF1;
	border: 3px #BBAA99 dotted;
	padding: .25em;
	margin: .25em;
}
#secondary {
	width: 280px;
	float: right;
	background-image: url('images/cardboard-edge.png');
	box-shadow: 0 3px 5px rgba(34, 25, 25, 0.4);
	-moz-box-shadow: 0 3px 5px rgba(34,25,25,0.4);
	-webkit-box-shadow: 0 3px 5px rgba(34, 25, 25, 0.4);
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	padding: 10px;
}
#secondary h1 {
	font-size: 25pt;
	color: #554433;
}
#secondary ul {
	display: inline;
	list-style: none;
}
#secondary li {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #FFFFF1;
	border: 3px #BBAA99 dotted;
	padding: .25em;
	margin: .25em;
}
#searchform {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #FFFFF1;
	border: 3px #BBAA99 dotted;
}
#searchform input {
	background: none;
	border: none;
	color: #543;
}
#colophon {
	display: none;
}
#inner-shell {
	width: 960px;
}
.entry-title {
	color: #554433;
	font-size: 42pt;
	line-height: 30pt;
}
.entry-meta {
	text-align: right;
}
article footer {
	display: none;
}
article .entry-content h1 {
	color: #543;
	font-size: 30pt;
	line-height: 20pt;
}
#masthead {
	left: -20px;
	text-indent: -9999px;
	background-image: url('images/coffee-talk-simple-logo.png');
	width: 380px;
	height: 123px;
}
Copyright © 2012-2016 Preese Interactive Media