• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Khan Academy Computer Science
 

Khan Academy Computer Science

on

  • 16,245 views

A talk on Khan Academy's Computer Science curriculum.

A talk on Khan Academy's Computer Science curriculum.

Statistics

Views

Total Views
16,245
Views on SlideShare
5,509
Embed Views
10,736

Actions

Likes
6
Downloads
37
Comments
0

89 Embeds 10,736

http://ejohn.org 8287
http://feeds.feedburner.com 1100
http://www.perfplanet.com 377
http://lanyrd.com 166
http://newsblur.com 88
http://www.newsblur.com 84
http://digg.com 77
http://devds.wordpress.com 68
http://cloud.feedly.com 60
http://www.feedspot.com 53
http://localhost 46
http://feedly.com 42
http://flavors.me 38
http://mattwidmann.net 20
http://www.hanrss.com 19
http://1kpl.us 19
http://reader.aol.com 16
http://feedreader.com 14
http://frontendstuff.collected.info 13
http://fever.lightcorp.net 11
http://xianguo.com 8
http://feeds2.feedburner.com 8
https://reader.aol.com 8
http://127.0.0.1 6
http://my.organic.hu 5
http://dev.1kpl.us 5
http://www.ua168.com 5
http://andrewburgess.ca 4
http://pt.flavors.me 4
http://silverreader.com 4
http://jp.flavors.me 3
http://www.goread.io 3
http://renatocarvalho.com 3
http://translate.googleusercontent.com 3
http://www.ofelio.com 3
http://rssminer.net 3
http://www.inoreader.com 2
http://mcherbie.flavors.me 2
http://htmljquery.io 2
http://www.feedly.com 2
http://www.hivereader.com 2
http://go-read.me 2
http://hivereader.com 2
http://phpgist.com 2
http://codedetails.com 2
http://webtasty.com 2
http://web.maxtv.mk 1
http://www.regrit.com 1
http://ec2-54-200-37-28.us-west-2.compute.amazonaws.com 1
http://reader.dev 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 Khan Academy Computer Science Presentation Transcript

    • Khan AcademyComputer Science John Resig (ejohn.org) http://khanacademy.org/cs
    • Inspiration• Bret Victor • http://vimeo.com/36579366
    • Learning to Program• Learn through hands-on experimentation• Learn by looking at other people’s code• Learn by building on other people’s code
    • CS Projects “Forked” New• “Forked”: 62930• New: 22225 26%• 1.86m Views 74%
    • Github in Disguise• Forking (Hitting “Save as...”)• Versioning (Not yet user exposed)• Runtime Versioning • All runtime changes are versioned to protect against API changes
    • Implementation• Graphics: Processing.js• Real-time Execution • Dynamic Injection • Error handling
    • Graphics• Use Processing.js’ API• Works in all browsers with <canvas>• Import it wholesale, ignore the “Processing language” bits
    • 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.
    • 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!
    • Error Messages• All code is run through JSHint• And through an extra layer of error handling (called “BabyHint”)
    • 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!
    • 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”)
    • 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
    • With Statements• var obj = { name: “John”, city: “Boston” }; with (obj) { name += “ Resig”; city = “Brooklyn”; }• obj.name === “John Resig” obj.city === “Brooklyn”
    • With Statements• var obj = { name: “John”, city: “Boston” }; with (obj) { var city = “Brooklyn”; var job = “Khan Academy”; }• obj.city === “Brooklyn” obj.job === undefined
    • 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”
    • 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; }” }
    • 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;”
    • 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; };”