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

Like this? Share it with your network

Share

Khan Academy Computer Science

on

  • 16,674 views

A talk on Khan Academy's Computer Science curriculum.

A talk on Khan Academy's Computer Science curriculum.

Statistics

Views

Total Views
16,674
Views on SlideShare
5,764
Embed Views
10,910

Actions

Likes
7
Downloads
46
Comments
0

89 Embeds 10,910

http://ejohn.org 8368
http://feeds.feedburner.com 1133
http://www.perfplanet.com 377
http://lanyrd.com 194
http://newsblur.com 90
http://www.newsblur.com 85
http://digg.com 78
http://devds.wordpress.com 73
http://cloud.feedly.com 60
http://www.feedspot.com 53
http://feedly.com 52
http://localhost 46
http://flavors.me 39
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://xianguo.com 8
http://feeds2.feedburner.com 8
http://127.0.0.1 6
http://my.organic.hu 5
http://www.ua168.com 5
http://dev.1kpl.us 5
http://silverreader.com 4
http://pt.flavors.me 4
http://mcherbie.flavors.me 4
http://andrewburgess.ca 4
http://phpgist.com 4
http://www.goread.io 3
http://jp.flavors.me 3
http://renatocarvalho.com 3
http://www.ofelio.com 3
http://rssminer.net 3
http://translate.googleusercontent.com 3
http://www.hivereader.com 2
http://go-read.me 2
http://webtasty.com 2
http://www.feedly.com 2
http://codedetails.com 2
http://www.inoreader.com 2
http://hivereader.com 2
http://htmljquery.io 2
http://www.regrit.com 1
http://ec2-54-200-37-28.us-west-2.compute.amazonaws.com 1
http://web.maxtv.mk 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Khan Academy Computer Science Presentation 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; };”