Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Making JS More Learnable

Pamela Fox
December 02, 2013

Making JS More Learnable

Pamela Fox

December 02, 2013
Tweet

More Decks by Pamela Fox

Other Decks in Technology

Transcript

  1. The Path of Learning JS variables loops arrays objects prototype

    mix-ins libraries DOM futures generators closures Beginner Expert with Monday, December 2, 13
  2. Teaching JS Online ACE editor + processingJS Talk-throughs Coding Challenges

    http://khanacademy.org/cs Monday, December 2, 13
  3. I’m surrounded by JS learners! 162,858 challenges completed 300,000 unique

    programs created 2,600 Members 105 workshops in 2 years Monday, December 2, 13
  4. Let’s Make JS Easier to Learn! Language Design → Debugging

    → Documentation Monday, December 2, 13
  5. Language Usability Research http://www.cs.cmu.edu/~pane/cmu-cs-96-132.html (A sampling!) •Variables in math very

    different from programming variables •Booleans different from natural language (e.g. inclusive-or vs. exclusive-or) •Arrays start at 0, people usually count from 1 •Variable names and keywords are case sensitive •= is often confused with == •123 is confused with “123” •Some variables are passed by reference, other by value •Having to put “break” in every switch statement causes errors •Unnecessary syntax: a++ and a+=1 http://www.cs.cmu.edu/~NatProg/OldMarch162007/langeval.html https://docs.google.com/document/d/1X_V5b0E4qKeSViZcTvpurLb67NfR5GzTUvnh2zZiaWg/edit?usp=sharing Usability issues for novice programmers: Monday, December 2, 13
  6. JS Language Usability? • All of those issues were inherited

    from other languages • JS usability itself is not well researched :-( http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.133.4831&rep=rep1&type=pdf Monday, December 2, 13
  7. (How you can) Improve the language http://www.ecmascript.org/dev.php “Development of ECMAScript

    standards is an open process, and we encourage public participation.” Monday, December 2, 13
  8. JSHint on Khan Academy if (i == 0) { }

    var i = 2; if (i == 0) { } errors warnings best practices var myName = “spaghetti Monday, December 2, 13
  9. Improving JSHint messages rect(193,139,,30); Expected an identifier and instead saw

    ','. I thought you were going to type an identifier but you typed ‘,’! I think you meant to type a value or variable name before that comma? Original Conversational Specific + Actionable Monday, December 2, 13
  10. rect(80, 70, 60, 240,); I thought you were going to

    type an identifier but you typed )! → I think you either have an extra comma or a missing argument? var x = 5; x+x=1; Bad assignment! → The left side of an assignment must be a single variable name, not an expression. 140= 141 + 142; Bad assignment! text;() I thought you were going to type an assignment or function call but you typed an expression instead! More Newbie Syntax Errros Monday, December 2, 13
  11. More linting: “BabyHint” elipse(10, 10, 20, 30); spelling wrong arguments

    ellipse(1, 1, 20, 30, 5); https://gist.github.com/pamelafox/7745401 Monday, December 2, 13
  12. The Browser “IDE” Why is hplogo a global var?? What

    does undefined mean?? But I used the right method?! Monday, December 2, 13
  13. (How you can) Improve Browsers http://www.chromium.org/developers http://codefirefox.org/ Patch the browser

    itself Make a dev tool plugin http://developer.chrome.com/extensions/devtools.html http://blog.mozilla.org/addons/2009/01/28/how-to-develop-a-firefox-extension/ Write a blog post Monday, December 2, 13
  14. (How you can) Improve the docs Mozilla Developer Network Just

    click “Edit” W3schools Click “Report Error” Monday, December 2, 13
  15. Let’s Make JS Easier to Learn! Language Design → Debugging

    → Documentation Monday, December 2, 13