“Grasshopper: Learn to Code in JavaScript” by Google’s Area 120


UPDATE 5/6/2018: After working on Grasshopper for 16 days in a row…..I GRADUATED!  Yippeee!


Tired of your kids, or grand-kids, having all the fun learning how to code?  Well…..here is an app for us “old” folks.  😉

Adult learners, using the Grasshopper app on your Android or IoS phones can now learn how to code in JavaScript…..for FREE……and have FUN doing it.

As soon as I saw that Grasshopper (an homage to Grace Hopper) was public, I went to the Google Play Store searched for, and downloaded,  “Grasshopper” on my Pixel XL. Lori went to the iPhone App Store and searched for “Grasshopper”, but, she does not care to learn JavaScript and chose not to download it. NOT-NERD.  😉

After a quick look at the app, I was totally impressed and ready to get started.

Unlike the “Learn to Draw” Course I recently gave up on (if you saw my drawings you’d know why), THIS course is one that I can definitely get more out of.  After all, I played with Perl in years past and did some really cool web-based registration pages for videoconferencing at ESnet when videoconferencing in the cloud was unknown and we were pushing the state-of-the-art.  Brag, brag.  🙂

That aside…let’s get started learning JavaScript.

Grasshopper Introduction

Before I start my journey, here are some words I grabbed from Google’s Grasshopper FAQ Web site. They say it so much better than I ever could, I hope they don’t mind:

What is Grasshopper?

Grasshopper is the coding app for beginners. With fun, quick lessons on your phone, the app teaches adult learners to write real JavaScript. It’s currently available for free on Android and iOS. Grasshopper is built by a team within Area 120, a workshop for experimental projects.

What can I expect to learn using Grasshopper?

Right now, Grasshopper covers the basics of JavaScript and some of the building blocks of programming. Here’s what each course covers:

  • The Fundamentals – How code works, calling functions, variables, strings, for loops, arrays, conditionals, operators, objects, and how all these things work together.
  • Animations I – Drawing shapes using the popular D3 library, defining functions, callback functions, and animations.
  • Animations II – Creating more complex functions using D3 and the topics from The Fundamentals course.

By the end of using Grasshopper’s current curriculum, you should be familiar with core programming concepts and feel confident playing around within this playground to build interactive animations.

What should I do after I use Grasshopper?

The world is your oyster! Grasshopper should give you the foundational skills you need to continue your journey in learning to code, which can take many different routes. That said, if you’re looking for a recommendation, we’ve put together some suggested next steps here.”

OK….lets go.  🙂

TechyMike tries Learning JavaScript with Grasshopper

After downloading the app, I fired it up and flipped thru the introductory screens shown below on my Pixel XL.  So far, I am nailing this course. 🙂

      

On the last screen, I selected “Yes, I’m new to coding” just to see what happens, and besides, 10 years after writing my last Perl code…..I AM new.  🙂

With that option selected, these screens explained to me what coding is and what I hope to learn. Still nailing this course, I am ready.

       

On the last screen, I clicked “Get Started” and held my breath in anticipation.

This is what came up:  A Quiz, arrrrgh, so soon????  Geez, teacher, give me a break.  (NOTE to Google: This should say “Starter Quiz #1”.

      

I answered “A city in Kansas” since I went to the University of Kansas for my Masters.  I was WRONG!  Yikes.  So I went back and answered “How we communicate with computers”

Yeah!!!  I got it right.  I thought to myself: “Probably the last time, but……”

I hit continue, and this is what popped up.

      

More Quizzes! A nightmare.

Nevertheless, I clicked on the Quiz that was moving in and out on my screen and selected “Create a Website” hoping I got it right.  I did!  Then I hit “Continue”.

Yipppeeee.  I completed my first Grasshopper course.  “What is code?”

Onward and upward!  This is fun. 😉

I will skip a few lessons (which I aced, by the way) and show you how I built the Gabonese Flag.

      

The above screenshots show you step-by-step how to program your boxes to resemble the Gabonese Flag.  The first screen shows the flag, then Grasshopper shows you a partial solution, with partial code, that you can look at to see how the second and third screens relate to the code.  Looking at the code in the last two screens, the Gabonese flag consists of: Three green blocks (drawBox(green);), a new line command (newLine();), then one yellow box (drawBox(yellow);), then I am supposed to finish the code from there by adding more yellow boxes, a newline, and adding three blue boxes.

Oh, the pressure.

But, despite the intense pressure, I scrolled down so I could write MY code.

  

Luckily, in the first screen, Grasshopper leads you pretty much thru the coding process, but, you still have to think (Think? What’s that?) to finish the coding in the second screen. Anyway, the second screen shows the rest of MY code where I finished the yellow row with two yellow boxes, added a new line, then added the three blue boxes.

Then…..(with a dramatic pause)

…..I hit the green arrow to run my program, and I got this.

Wow!  I did it!  I programmed the Gabonese Flag in JavaScript!

“I’m so excited, I just can’t hide it…..”

Summary

I have since moved on at lightning speed to “Variables” and “Arrays”.  I know these were my weaknesses in Perl, but, after messing up a few quizzes in “Variables” I aced the “Arrays” and learned a bit about why I was messing up “Variables”.

Overall, I am enjoying this a whole lot more than “Learning How to Draw”, and I will finish this class, apply for a job at Google, and see if they will hire a 66 year old programmer. HaHa……THAT ain’t gonna happen, but I can always dream the dream about meeting a couple of other old guys who work there: Vince and Owen.  😉

Seriously, as an adult learner (I’m adult ++) Grasshopper has the promise to do what they set out to do:

To teach you, an adult learner, how to code in JavaScript while making it challenging and FUN.

Who knows, maybe YOU can get out of your dead-end job and start a new career.

Go for it.  Let me know what happens in the comments below.

Oh, yeah.  I learned while working with Perl, that at the end of the line ; is absolutely needed and really hard to find when your program does not work.  😉

Geek on…..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.