CoffeeScript Basics – A Teach Me To Code Tutorial

by woody2shoes on April 15, 2011

 

CoffeeScript is now going to be a default installation with Ruby on Rails. So, I installed CoffeeScript and NodeJS and have been playing with it for the last hour or so.

Here are the basics you need to know to use CoffeeScript including functions, arrays, hashes (objects), control functions (if, else, unless) and loops.

In my opinion it is friendlier than JavaScript and more terse, but I don’t feel like it’s a huge win over JavaScript. That being said, it is something I’m likely to use in the future.

Download 168 MB
Download (iPhone & iPod) 87.3 MB

Tagged as: bundle, coffeescript, javascript, nodejs, programming, rails, ruby, Ruby on Rails, textmate, tutorial, web

  • http://twitter.com/royvandermeij Roy van der Meij

    Charles, great screencast.
    Unfortunately there is no sound in the screencast (except for the intro and outro)

    • http://teachmetocode.com Charles Max Wood

      I’m not seeing that problem. Are you having that problem in the youtube version? downloaded version?

      • Ken

        The problem, I think, is the with the right/left balance. I have professional studio monitors and there’s a lot more sound coming out of the left speaker for me.

  • http://twitter.com/royvandermeij Roy van der Meij

    Charles, great screencast.
    Unfortunately there is no sound in the screencast (except for the intro and outro)

    • http://teachmetocode.com Charles Max Wood

      I’m not seeing that problem. Are you having that problem in the youtube version? downloaded version?

  • Pingback: CoffeeScript Basics – A Teach Me To Code Tutorial — Teach Me To Code

  • Anonymous

    stop being lazy and type the damn blog out

    • http://teachmetocode.com Charles Max Wood

      I’m actually planning on getting this transcribed and add the code snippets in sometime early next week. Just wanted this out there for the folks who are curious about the buzz on CoffeeScript

  • Anonymous

    stop being lazy and type the damn blog out

    • http://teachmetocode.com Charles Max Wood

      I’m actually planning on getting this transcribed and add the code snippets in sometime early next week. Just wanted this out there for the folks who are curious about the buzz on CoffeeScript

  • http://twitter.com/amikishiyev Zaur Amikishiyev

    168Mb, 25 minutes screencast to present a material that would fit on one printed page… Waste of time and internet traffic

    • http://twitter.com/Beo Beo

      Did you see the word “BASICS” on the title?
      This is the CMW’s style and I like it
      I think he read about the buzz on twitter coffeescript so she decided to do a fast screencast on the subject.
      Charles, go forward with this topic please!

      • http://teachmetocode.com Charles Max Wood

        I intend to. I’m not advocating people use CoffeeScript if they like or want to stay with JavaScript. I just want people to know what’s available (and eventually included by default) so they can make an informed decision.

    • http://teachmetocode.com Charles Max Wood

      As I said, I’m planning on having it transcribed.

      If you want a printed page right now, go check out http://jashkenas.github.com/coffee-script/

  • http://twitter.com/amikishiyev Zaur Amikishiyev

    168Mb, 25 minutes screencast to present a material that would fit on one printed page… Waste of time and internet traffic

    • http://twitter.com/Beo Beo

      Did you see the word “BASICS” on the title?
      This is the CMW’s style and I like it
      I think he read about the buzz on twitter coffeescript so she decided to do a fast screencast on the subject.
      Charles, go forward with this topic please!

      • http://teachmetocode.com Charles Max Wood

        I intend to. I’m not advocating people use CoffeeScript if they like or want to stay with JavaScript. I just want people to know what’s available (and eventually included by default) so they can make an informed decision.

    • http://teachmetocode.com Charles Max Wood

      As I said, I’m planning on having it transcribed.

      If you want a printed page right now, go check out http://jashkenas.github.com/coffee-script/

  • http://rosenfeld.heroku.com/ Rodrigo Rosenfeld Rosas

    The problem with equal (=) is that it means assignment, I guess. You probably should use the equals comparison (==)…

    • http://teachmetocode.com Charles Max Wood

      Did I mix them up? If I did, that’s a good catch. Thanks for pointing it out.

      • http://rosenfeld.heroku.com/ Rodrigo Rosenfeld Rosas

        This is about 23:20:

        i=10
        until i=0 … instead of “until i==0″ :)

        • http://teachmetocode.com Charles Max Wood

          Ah, that’s why my ‘until’ wasn’t working like I wanted it to. Thank you!

  • http://rosenfeld.heroku.com/ Rodrigo Rosenfeld Rosas

    The problem with equal (=) is that it means assignment, I guess. You probably should use the equals comparison (==)…

    • http://teachmetocode.com Charles Max Wood

      Did I mix them up? If I did, that’s a good catch. Thanks for pointing it out.

      • http://rosenfeld.heroku.com/ Rodrigo Rosenfeld Rosas

        This is about 23:20:

        i=10
        until i=0 … instead of “until i==0″ :)

        • http://teachmetocode.com Charles Max Wood

          Ah, that’s why my ‘until’ wasn’t working like I wanted it to. Thank you!

  • Clinton

    Good lord, there are a lot of haters on here. I like these slow-moving videos because I can type the same things out in real time.

    Tip right at the beginning: Coffeescript includes string interpolation, much like Ruby. So instead of (“Hi my name is” + name “.”), you can type (“Hi, my name is #{name}.”) Much nicer.

    • http://teachmetocode.com Charles Max Wood

      That is definitely a good one to know. I’m going to like your comment to put it near the top. Thanks for helping us learn!

  • Clinton

    Good lord, there are a lot of haters on here. I like these slow-moving videos because I can type the same things out in real time.

    Tip right at the beginning: Coffeescript includes string interpolation, much like Ruby. So instead of (“Hi my name is” + name “.”), you can type (“Hi, my name is #{name}.”) Much nicer.

    • http://teachmetocode.com Charles Max Wood

      That is definitely a good one to know. I’m going to like your comment to put it near the top. Thanks for helping us learn!

  • Jon Atack

    A timely topic. Downloaded the cast and looking forward to checking it out. Thanks Charles.

    • http://teachmetocode.com Charles Max Wood

      You’re welcome. Make sure you come back and let me know what you thought. I always appreciate constructive feedback.

  • Jon Atack

    A timely topic. Downloaded the cast and looking forward to checking it out. Thanks Charles.

    • http://teachmetocode.com Charles Max Wood

      You’re welcome. Make sure you come back and let me know what you thought. I always appreciate constructive feedback.

  • http://twitter.com/stevemgentile Steve Gentile

    Thanks – and ignore the haters – if they don’t want a video then don’t watch it – geez.

    • http://teachmetocode.com Charles Max Wood

      Steve – Thanks for the feedback. There are enough people out there like you that give positive feedback that I feel like I’m getting it mostly right. I may tweak things, but the people who want it in text can either read it someplace else, or wait for me to figure out transcription.

      I really want to provide it and insert the code snippets in the middle of it, but enough people like the videos that I’ll do it when I can get around to it.

    • Tomascot

      It would be the coolest feature ever if something could tell us if we are gonna like a video or not without watch it

  • http://twitter.com/stevemgentile Steve Gentile

    Thanks – and ignore the haters – if they don’t want a video then don’t watch it – geez.

    • http://teachmetocode.com Charles Max Wood

      Steve – Thanks for the feedback. There are enough people out there like you that give positive feedback that I feel like I’m getting it mostly right. I may tweak things, but the people who want it in text can either read it someplace else, or wait for me to figure out transcription.

      I really want to provide it and insert the code snippets in the middle of it, but enough people like the videos that I’ll do it when I can get around to it.

    • Tomascot

      It would be the coolest feature ever if something could tell us if we are gonna like a video or not without watch it

  • http://twitter.com/Beo Beo

    —– VERY Off Topic ——–
    hello in italian is “salve”(formal) or “ciao”(informal)
    Buongiorno is like “good morning”
    This can be very handy when you will come in Italy :D

    • http://teachmetocode.com Charles Max Wood

      —– Still off topic —–

      I usually used “Buongiorno” and “Buonasera” rather than “salve” or “ciao” unless I wanted to be especially formal or casual. But I was a missionary at the time and felt like I had to represent myself a little differently.

      Are you Italian? (I’m assuming so since an American would have said “come to Italy” rather than the more direct Italian translation “come in Italy” from “vieni in italia”.)

      • http://twitter.com/Beo Beo

        —- off topic again and again —
        Yes I’m italian, I live 100Km away from Rome.
        I’m really impressed by your knowledge of Italian, my English is quite low but your screencasts an podcasts are very clear and understandable thanks both the language and for the pleasant “slowness”of the lessons.

        • http://teachmetocode.com Charles Max Wood

          I lived in Italy for two years as a missionary for my church. I lived in Arezzo, Ancona, Verona, and Pordenone. I would love to go back to Italy someday.

          • http://twitter.com/Beo Beo

            Wow a missionary! You are a wonderful person!!

          • http://teachmetocode.com Charles Max Wood

            I try. I have to say that it was an incredible experience. I love Italy and Italians.

  • http://twitter.com/Beo Beo

    —– VERY Off Topic ——–
    hello in italian is “salve”(formal) or “ciao”(informal)
    Buongiorno is like “good morning”
    This can be very handy when you will come in Italy :D

    • http://teachmetocode.com Charles Max Wood

      —– Still off topic —–

      I usually used “Buongiorno” and “Buonasera” rather than “salve” or “ciao” unless I wanted to be especially formal or casual. But I was a missionary at the time and felt like I had to represent myself a little differently.

      Are you Italian? (I’m assuming so since an American would have said “come to Italy” rather than the more direct Italian translation “come in Italy” from “vieni in italia”.)

      • http://twitter.com/Beo Beo

        —- off topic again and again —
        Yes I’m italian, I live 100Km away from Rome.
        I’m really impressed by your knowledge of Italian, my English is quite low but your screencasts an podcasts are very clear and understandable thanks both the language and for the pleasant “slowness”of the lessons.

        • http://teachmetocode.com Charles Max Wood

          I lived in Italy for two years as a missionary for my church. I lived in Arezzo, Ancona, Verona, and Pordenone. I would love to go back to Italy someday.

          • http://twitter.com/Beo Beo

            Wow a missionary! You are a wonderful person!!

          • http://teachmetocode.com Charles Max Wood

            I try. I have to say that it was an incredible experience. I love Italy and Italians.

  • Thomas Chik

    To iterate a hash using comprehension, use of instead of in; it would be ‘for person, age of ages’ in the example.

    • http://teachmetocode.com Charles Max Wood

      I did eventually get there, but thanks for the clarification. I did go through it rather quickly.

  • Thomas Chik

    To iterate a hash using comprehension, use of instead of in; it would be ‘for person, age of ages’ in the example.

    • http://teachmetocode.com Charles Max Wood

      I did eventually get there, but thanks for the clarification. I did go through it rather quickly.

  • http://rsludge.myopenid.com/ rsludge

    Nice screencast, thanks Charles.
    But I don’t understand why I should use something with ruby/python syntax instead of Javascript

    • http://teachmetocode.com Charles Max Wood

      I think it’s a matter of preference. If you’re happy with JavaScript, then there may not be any compelling reason to switch.

      For me, the syntax matches more closely to Ruby, which lowers the barrier when I need to switch. That being said, I’m very comfortable with JavaScript and so haven’t decided if I’m going to switch myself. I just thought that people may want to see what it was all about considering the recent news in the Rails world.

  • http://rsludge.myopenid.com/ rsludge

    Nice screencast, thanks Charles.
    But I don’t understand why I should use something with ruby/python syntax instead of Javascript

    • http://teachmetocode.com Charles Max Wood

      I think it’s a matter of preference. If you’re happy with JavaScript, then there may not be any compelling reason to switch.

      For me, the syntax matches more closely to Ruby, which lowers the barrier when I need to switch. That being said, I’m very comfortable with JavaScript and so haven’t decided if I’m going to switch myself. I just thought that people may want to see what it was all about considering the recent news in the Rails world.

  • http://tadthorley.com Tad Thorley

    I think a lot of people are missing some of the key features of coffescript that make it so compelling. If you’ve listened to Doug Crockford talk about the “good parts” of javascript and take a look back at coffeescript, you’ll see that coffeescript encourages the good parts and cleans up all of the warts.

    I’m disappointed that you didn’t cover some of my favorites: the “fat arrow”, the “is” and sane classes/inheritance. Hopefully we’ll see them in the next episode?

    • http://teachmetocode.com Charles Max Wood

      I want to get into more of that. Next, I’m going to add it to a project, install jQuery, and figure out how to make that work. Then I’ll probably post a follow up with more features of CoffeeScript.

      I only wanted to make it 15 minutes, so I cut it off at 25. There are definitely a lot more features to cover. Thanks for the feedback, Tad.

  • http://tadthorley.com Tad Thorley

    I think a lot of people are missing some of the key features of coffescript that make it so compelling. If you’ve listened to Doug Crockford talk about the “good parts” of javascript and take a look back at coffeescript, you’ll see that coffeescript encourages the good parts and cleans up all of the warts.

    I’m disappointed that you didn’t cover some of my favorites: the “fat arrow”, the “is” and sane classes/inheritance. Hopefully we’ll see them in the next episode?

    • http://teachmetocode.com Charles Max Wood

      I want to get into more of that. Next, I’m going to add it to a project, install jQuery, and figure out how to make that work. Then I’ll probably post a follow up with more features of CoffeeScript.

      I only wanted to make it 15 minutes, so I cut it off at 25. There are definitely a lot more features to cover. Thanks for the feedback, Tad.

  • http://www.teachmetocode.com Eric Berry

    I love your screencasts, Chuck! Keep up the great work!!!

    By the way, since I found out the lesscss.org was now working with javascript, I’m a true believer in that. I am doing ALL css with all new projects using less from here on out. Great screencast on that as well :D

    • http://teachmetocode.com Charles Max Wood

      Thanks Eric. Glad you’re enjoying them.

      I’ll have to look at lesscss.org.

  • http://www.solidcoresolutions.com Eric Berry

    I love your screencasts, Chuck! Keep up the great work!!!

    By the way, since I found out the lesscss.org was now working with javascript, I’m a true believer in that. I am doing ALL css with all new projects using less from here on out. Great screencast on that as well :D

    • http://teachmetocode.com Charles Max Wood

      Thanks Eric. Glad you’re enjoying them.

      I’ll have to look at lesscss.org.

  • http://www.solidcoresolutions.com Eric Berry
    • Antonychristopher

      Hi Eric i want a website to be developed with complete crm solutions please do reply my email address is antonychristopher01@gmail.com

  • http://www.solidcoresolutions.com Eric Berry
    • Antonychristopher

      Hi Eric i want a website to be developed with complete crm solutions please do reply my email address is antonychristopher01@gmail.com

  • Pingback: CoffeeScript Basics | ChurchCode

  • Pingback: CoffeeScript: The Cool Parts — Teach Me To Code

  • Pingback: CoffeeScript Basics | Church Mag

  • Pingback: Rails Coach » Rails 3.1 Asset Pipeline

  • Pingback: ruby by edvanlacerda - Pearltrees

  • Pingback: Rails Coach » 032 RC CoffeeScript

  • Pingback: Introduction to CoffeeScript [+Useful Tutorials] | Template Monster Blog

  • Pingback: ICTEA – Web Design » Blog Archive » Introduction to CoffeeScript [+Useful Tutorials]

  • Pingback: Introduction to CoffeeScript [+Useful Tutorials] | Web Design

Previous post:

Next post: