CoffeeScript: The Good Parts

It’s not a secret that the topic of CoffeeScript is controversial to say the least. Many reputable JavaScript and Node.js developers just hate CoffeeScript, but there are lessons we can all learn from its good parts! However, many developers just won’t go back to plain JavaScript after building something relatively serious with CoffeeScript.

Continue reading “CoffeeScript: The Good Parts”

JavaScript and Node FUNdamentals is Finished

JavaScript and Node FUNdamentals: A Collection of Essential Basics is a short read to brush up and refresh JavaScript and Node.js topics including frameworks like CoffeeScript, Backbone.js and Express.js. The motto of the book is “If it’s not fun, it’s not JavaScript.

JavaScript and Node FUNdamentals: A Collection of Essential Basics
JavaScript and Node FUNdamentals: A Collection of Essential Basics

JavaScript and Node FUNdamentals has these chapters:

  1. JavaScript FUNdamentals: The Powerful and Misunderstood Language of The Web
  2. CoffeeScript FUNdamentals: The Better JavaScript
  3. Backbone.js FUNdamentals: The Cornerstone of JavaScript MV* Frameworks
  4. Node.js FUNdamentals: JavaScript on The Server
  5. Express.js FUNdamentals: The Most Popular Node.js Framework

The book is available on Amazon.com (Kindle) and LeanPub (MOBI, PDF, EPUB).

Continue reading “JavaScript and Node FUNdamentals is Finished”

CoffeeScript FUNdamentals: The Better JavaScript

Disclaimer: This text is a part of the JavaScript and Node FUNdamentals: A Collection of Essential Basics ebook which is available now for free. However, upon the book’s completion it’ll be priced at $2.99. The book is 80% done as of this writing. The formats available: PDF, EPUB and Kindle. If you would like to participate in the writing process by providing your feedback and future topics, fill this short Future Topics and Feedback form.

Continue reading “CoffeeScript FUNdamentals: The Better JavaScript”

CoffeeScript Quirks

CoffeeScript is a solution without the problem.

— Unknown ironic source.

CoffeeScript is awesome, until it’s totally confusing, and it’s illogical, which can lead to unexpected and subtle bugs. If you’re one of the CoffeeScript haters please skip this post; for others, I’ll share a few notes on the CS quirks that I’ve observed.

For example, let’s say we have a counter and need to assign a value of index subtracted by one to it:

numberOfRadios = index -1

But the line above is not the same as:

numberOfRadios = index - 1

Did you notice that there’s a space after the minus sign in the second example? It took me awhile to track down this type of bug. The reason for this behavior is that the first line will be converted by the compiler to the function invocation and that is probably not what you wanted.

Try the minus one snippet on CoffeeScript.org. It outputs the following JavaScript code:

var numberOfRadios;

numberOfRadios = index(-1);

numberOfRadios = index - 1;

Another pitfall, that leads to writing despondently inconsistent code (by us developers), is caused by the fact that parentheses are optional for function calls.

This example involves if conditions in which we want to compare the value of the expression model.get() or the operand typeof to some strings:

a() if @model.get 'groupType' is 'radioGroupTabs'
a() if typeof @model.get 'condition' is 'function'

CoffeeScript is treating the entire thing as an argument and the results are pathetic. Duh. ;-( Here is the native JavaScript code:

if (this.model.get('groupType' === 'radioGroupTabs')) {
  a();
}

if (typeof this.model.get('condition' === 'function')) {
  a();
}

Placing parens over the function still does us no good. Look at this CoffeeScript code:

a() if @model.get ('groupType') is 'radioGroupTabs'

And its JavaScript output:

if (this.model.get('groupType' === 'radioGroupTabs')) {
  a();
}

The workaround involves using () around function calls, or flipping the order in the if statement so that the function invocation is the last bit of code in the if statement:

a() if (typeof @model.get 'condition') is 'function'
a() if 'function' is typeof @model.get 'condition'
a() if (@model.get 'groupType') is 'radioGroupTabs'
a() if 'radioGroupTabs' is  @model.get ('groupType')

The code above compiles to what we wanted originally:

if ((typeof this.model.get('condition')) === 'function') {
  a();
}

if ('function' === typeof this.model.get('condition')) {
  a();
}

if ((this.model.get('groupType')) === 'radioGroupTabs') {
  a();
}

if ('radioGroupTabs' === this.model.get('groupType')) {
  a();

Is it all good now? Not really, because I personally think this approach leads to inconsistencies: parts of CoffeeScript code that must have parentheses, while in other places they are optional.

Try these if conditon snippets yourself on CoffeeScript.org.

The next note explains the most common beginner’s mistake in CoffeeScript; that is to use an a instead of an a() for function calls. However, super inside of a class, must be called without parentheses in order to pass the arguments to it.

Moving on to the single hash (#) comments which are just skipped over by CoffeeScript. Again, this can lead to unexpected consequences.

For example, a straightforward if statement has a few lines of code:

unless A 
  b()
  blah blah

But if we comment out all of the lines inside of if, the whole thing will fail miserably at the compilation step (at least thank you for that, CoffeeScript!):

unless A 
  # b()
  # blah blah

Just by adding an empty else we can mitigate the failure:

unless A 
  # b()
  # blah blah
else


c() # the code continues here

Try this snippet yourself on CoffeeScript.org

Last but not least, there is another CoffeeScript pitfall related to jQuery events that don’t propagate when the event handler returns false. Of course, CoffeeScript philosophy makes every function an expression (the last statement is evaluated if there is no return statement present).

b = ()->
  false # usually this result is less obvious and buried deep down in code
$a = $ 'input'
$a.click ()->
  console.log 'this happens all right'
  b()

$a.parent().click ()->
  console.log('this never happened')

Of course, in real life the b() function is not so obvious and it’s buried somewhere deep within Backbone and Angular model methods. And the event isn’t propagating up the DOM tree (return false). Therefore, we’ve lost the second event handler without even realizing t. Buyers beware of this elusiveness! :-)

Try the event propagation bug yourself on CoffeeScript.org

This is the end of my list. If you know of any additional CoffeeScript idiosyncrasies, please send them my way. :-)

Further CoffeeScript reading:

Understanding Fat Arrows (=>) in CoffeeScript

The fat arrows (=>) are special function expressions that confuse even the smartest of developers. Most JavaScript professionals know that closure changes the meaning of this (@ in CoffeeScript).

There’s no reason to be afraid of fat arrows in CoffeeScript. They are time savers (and clarity achievers) when it comes to the nested functions and jQuery event handlers. When they are applied to class methods, the good rule of thumb is: use => when we need @ to be the object in which method is written; use-> when we need @ to be the object in which method is executed.

The fat arrows (=>) are special function expressions that confuse even the smartest of developers. Most JavaScript professionals know that closure changes the meaning of this (@ in CoffeeScript).

Continue reading “Understanding Fat Arrows (=>) in CoffeeScript”

Cheat Sheets for Web Development

Web development usually involves a large number of languages each with its own syntax, keywords, special sauce and magic tricks. Here is a collection of web development cheat sheets, in no particular order, which I’ve amassed by browsing the Internet over many years of web development

Cheat sheets are great ways to organize frequently used information and keep it handy. I used cheat sheets for learning and memorizing during my crams at school, and use them now for reference.

Cheat sheet for Web Development
Cheat sheet for Web Development

Web development usually involves a large number of languages each with its own syntax, keywords, special sauce and magic tricks.
Here is a collection of web development cheat sheets, in no particular order, which I’ve amassed by browsing the Internet over many years of web development. They cover the following topics:

  • jQuery
  • CSS3
  • Git
  • Heroku
  • HTML5
  • Linux Command Line
  • Mod reWrite
  • CoffeeScript
  • JavaScript
  • CSS2
  • JavaScript DOM
  • Mac Glyphs
  • Node.js
  • PHP
  • RGB Hex
  • Sublime Text 2
  • SEO
  • WordPress

Get zip archive at http://www.webapplog.com/wp-content/uploads/web-dev-cheat-sheets.zip.

Full list of the files:


jquery12_colorcharge.png
cdiehl_firefox.pdf
CSS Help Sheet outlined.pdf
css-cheat-sheet-v2.pdf
css-cheat-sheet.pdf
CSS3 Help Sheet outlined.pdf
css3-cheat-sheet.pdf
dan-schmidt_jquery-utility-functions-type-testing.pdf
danielschmitz_jquery-mobile.pdf
davechild_css2.pdf
davechild_html-character-entities.pdf
davechild_javascript.pdf
davechild_linux-command-line.pdf
davechild_mod-rewrite.pdf
davechild_regular-expressions.pdf
dimitrios_coffeescript-cheat-sheet.pdf
gelicia_sublime-text-2-shortcuts-verbose-mac.pdf
Git_Cheat_Sheet_grey.pdf
heroku_cheatsheet.pdf
HTML Help Sheet 02.pdf
html5-cheat-sheet.pdf
i3quest_jquery.pdf
javascript_refererence.pdf
javascript-cheat-sheet-v1.pdf
JavaScript-DOM-Cheatsheet.pdf
javascriptcheatsheet.pdf
jQuery-1_3-Visual-Cheat-Sheet.pdf
Mac_Glyphs_All.pdf
Node Help Sheet.pdf
PHP Help Sheet 01.pdf
pyro19d_javascript.pdf
rgb-hex-cheat-sheet-v1.pdf
salesforce_git_developer_cheatsheet.pdf
samcollett_git.pdf
sanoj_web-programming.pdf
SEO_Web_Developer_Cheat_Sheet.pdf
skrobul_sublime-text-2-linux.pdf
WordPress-Help-Sheet.pdf
Help Sheets.zip