Khan Academy Computer Science
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Khan Academy Computer Science

  • 16,808 views
Uploaded on

A talk on Khan Academy's Computer Science curriculum.

A talk on Khan Academy's Computer Science curriculum.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
16,808
On Slideshare
5,834
From Embeds
10,974
Number of Embeds
90

Actions

Shares
Downloads
46
Comments
0
Likes
7

Embeds 10,974

http://ejohn.org 8,414
http://feeds.feedburner.com 1,142
http://www.perfplanet.com 377
http://lanyrd.com 196
http://newsblur.com 91
http://www.newsblur.com 85
http://digg.com 78
http://devds.wordpress.com 75
http://cloud.feedly.com 60
http://feedly.com 53
http://www.feedspot.com 53
http://localhost 46
http://flavors.me 40
http://reader.aol.com 20
http://mattwidmann.net 20
http://1kpl.us 19
http://www.hanrss.com 19
http://feedreader.com 17
http://frontendstuff.collected.info 13
http://fever.lightcorp.net 11
https://reader.aol.com 9
http://feeds2.feedburner.com 9
http://xianguo.com 8
http://127.0.0.1 6
http://my.organic.hu 5
http://dev.1kpl.us 5
http://www.ua168.com 5
http://pt.flavors.me 4
http://mcherbie.flavors.me 4
http://phpgist.com 4
http://andrewburgess.ca 4
http://silverreader.com 4
http://rssminer.net 3
http://www.goread.io 3
http://jp.flavors.me 3
http://renatocarvalho.com 3
http://www.ofelio.com 3
http://translate.googleusercontent.com 3
http://codedetails.com 2
http://www.inoreader.com 2
http://webtasty.com 2
http://www.feedly.com 2
http://htmljquery.io 2
http://hivereader.com 2
http://go-read.me 2
http://www.hivereader.com 2
http://inoreader.com 1
http://q.feedspot.com 1
http://dev.newsace.net 1
http://www.redtreereader.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Khan AcademyComputer Science John Resig (ejohn.org) http://khanacademy.org/cs
  • 2. Inspiration• Bret Victor • http://vimeo.com/36579366
  • 3. Learning to Program• Learn through hands-on experimentation• Learn by looking at other people’s code• Learn by building on other people’s code
  • 4. CS Projects “Forked” New• “Forked”: 62930• New: 22225 26%• 1.86m Views 74%
  • 5. Github in Disguise• Forking (Hitting “Save as...”)• Versioning (Not yet user exposed)• Runtime Versioning • All runtime changes are versioned to protect against API changes
  • 6. Implementation• Graphics: Processing.js• Real-time Execution • Dynamic Injection • Error handling
  • 7. Graphics• Use Processing.js’ API• Works in all browsers with <canvas>• Import it wholesale, ignore the “Processing language” bits
  • 8. Real-Time Execution• Code is constantly checked for changes• If a change is detected, code is re-evaluated• Code is not run using a simple “eval”, code is dynamically injected into the current runtime.
  • 9. How Code is Injected• JSHint (run in worker thread) • Optionally run BabyHint • If Error, stop execution• Cache Images• Run Code in Worker Thread, Looking for long-running code • If error, stop execution• Execute Code • If first time running code, just eval • If later: • Eval code and extract current state • Inject extracted values into runtime • Maintain closures with functions!
  • 10. Error Messages• All code is run through JSHint• And through an extra layer of error handling (called “BabyHint”)
  • 11. JSHint• Validation!• Also: Gives us a list of all global variables used in the program• Compare against a master list of properties in Processing.js• Everything else is user-defined!
  • 12. BabyHint• Handles common mistakes: • Spelling and case: “strokeWeight” vs. “strokeweight” • Gives sane errors about missing semicolons • Provide hints about correct function arguments strokeWeight(); (gives an error asking for more args) • Check for function declaration mistakes and possible spacing mistakes (“vartest”)
  • 13. Worker Threads• Run JavaScript code asynchronously in the background of a page• Available in Chrome, Firefox, Safari, and IE 10 (Need to make sure it works in IE 9!)• Works by doing a string-only postMessage to the worker and waiting for a response
  • 14. With Statements• var obj = { name: “John”, city: “Boston” }; with (obj) { name += “ Resig”; city = “Brooklyn”; }• obj.name === “John Resig” obj.city === “Brooklyn”
  • 15. With Statements• var obj = { name: “John”, city: “Boston” }; with (obj) { var city = “Brooklyn”; var job = “Khan Academy”; }• obj.city === “Brooklyn” obj.job === undefined
  • 16. With Statements• var obj = { name: “John”, city: “Boston” }; obj.job = undefined; with (obj) { var city = “Brooklyn”; var job = “Khan Academy”; }• obj.city === “Brooklyn” obj.job === “Khan Academy”
  • 17. Example• var x = 5, y = 1; var draw = function() { x += y; };• JSHint: PASS• Long Run Detection: PASS• First Run: True • Code is evaluated • lastGrab = { x: “5”, y: “1”, draw: “function() { x += y; }” }
  • 18. Example (cont.)• var x = 50, y = 1; var draw = function() { x += y; };• JSHint: PASS• Long Run Detection: PASS• First Run: False • Code is evaluated • grabAll = { x: “50”, y: “1”, draw: “function() { x += y; }” } • Compare with lastGrab: grabAll.x !== lastGrab.x • Eval: “var x = 50;”
  • 19. Example (cont.)• var x = 50, y = 1; var draw = function() { x += y * 2; };• JSHint: PASS• Long Run Detection: PASS• First Run: False • Code is evaluated • grabAll = { x: “50”, y: “1”, draw: “function() { x += y * 2; }” } • Compare with lastGrab: grabAll.draw !== lastGrab.draw • Eval: “var draw = function() { x += y * 2; };”