[{"data":1,"prerenderedAt":5672},["ShallowReactive",2],{"article_list_rbrubaker_":3},[4,112,2114,2192,2319,3891],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"publishDate":11,"tags":12,"excerpt":10,"body":14,"_type":103,"_id":104,"_source":105,"_file":106,"_stem":107,"_extension":108,"author":109},"/rbrubaker/2012-07/whither-pm","2012-07",false,"","Whither Project Management?","When I was first asked to manage a project at Art & Logic, I had my reservations. Did I really want to start down a career path that led to less development? Would my skills as a developer go stale? My first few projects as a manager were solo projects so I still had plenty of development work and fortunately, I found myself to be a pretty easy person to manage. As time went on I started managing larger projects and with them came the responsibility to manage other developers. To my surprise I found project management to be rewarding and dare I say, even fun. It's very satisfying to work with clients, helping them define their visions and seeing those visions come to life.","2012-07-25",[13],"project-management",{"type":15,"children":16,"toc":100},"root",[17,24,49,54,77],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":10},"text",{"type":18,"tag":19,"props":25,"children":26},{},[27,29,38,40,47],{"type":23,"value":28},"It's in this context that I was very interested to read the article ",{"type":18,"tag":30,"props":31,"children":35},"a",{"href":32,"rel":33},"http://deathrayresearch.tumblr.com/post/26759934886/engineering-management-is-dying",[34],"nofollow",[36],{"type":23,"value":37},"Engineering Management is Dying",{"type":23,"value":39}," and the subsequent discussion on ",{"type":18,"tag":30,"props":41,"children":44},{"href":42,"rel":43},"http://news.ycombinator.com/item?id=4214521",[34],[45],{"type":23,"value":46},"Hacker News",{"type":23,"value":48},". The author seems to define Engineering Management at a step above project management, those managers responsible for teams at a human resources level. However, some of his thoughts still ring true at the project manager level, especially that \"...the hackers themselves tend to the business of building things.\"",{"type":18,"tag":19,"props":50,"children":51},{},[52],{"type":23,"value":53},"When I first started out as a project manager, I struggled with how best to provide value to the team. Yes, keeping track of task lists and budgets are important tasks that need to be done. But they don't require any special skill. Like the author, I find that staying \"hands-on\" is critical, both for understanding the problems your teams face and feeling like you're an active part of the building process. I try to work on smaller items around the edges of the project, avoiding critical paths in case my management duties need to take priority. I also find that bug fixing is a good way to stay active in the building process as it gives me a chance to review code and perform some ad-hoc testing in the project.",{"type":18,"tag":19,"props":55,"children":56},{},[57,59,66,68,75],{"type":23,"value":58},"But while it is important to remain \"hands-on,\" I think there is a function of project management that provides essential value to a project and will never become irrelevant, especially in the context of consulting. That function is communication with the client and maintaining a positive client relationship. More often than not, problems that come up in projects are due to lack of communication and have little to do with technical limitations. You thought the client's main priority was feature X, but they really think feature Y is critical to their application's success. The client heard you say feature Z was possible in a short amount of time, but didn't understand the caveats you laid down. The \"boss-less\" companies such as ",{"type":18,"tag":30,"props":60,"children":63},{"href":61,"rel":62},"http://tomayko.com/writings/management-style",[34],[64],{"type":23,"value":65},"GitHub",{"type":23,"value":67}," and ",{"type":18,"tag":30,"props":69,"children":72},{"href":70,"rel":71},"http://loadedtrolley.com.au/Valve-Handbook-LowRes/",[34],[73],{"type":23,"value":74},"Valve",{"type":23,"value":76}," have the luxury of defining their own visions, but good communication is still essential to a successful project and a great personal asset to have no matter what role you fill.",{"type":18,"tag":19,"props":78,"children":79},{},[80,82,89,91,98],{"type":23,"value":81},"Whether you seek to stay down in the trenches of code or work your way up to pointy-haired status, you can only benefit from learning to be a better communicator. Two resources I find valuable that discuss these topics are the ",{"type":18,"tag":30,"props":83,"children":86},{"href":84,"rel":85},"http://randsinrepose.com/",[34],[87],{"type":23,"value":88},"randsinrepose blog",{"type":23,"value":90}," and the ",{"type":18,"tag":30,"props":92,"children":95},{"href":93,"rel":94},"http://www.manager-tools.com/podcasts/manager-tools",[34],[96],{"type":23,"value":97},"Manager Tools podcasts",{"type":23,"value":99},".",{"title":8,"searchDepth":101,"depth":101,"links":102},3,[],"markdown","content:rbrubaker:2012-07:whither-pm.md","content","rbrubaker/2012-07/whither-pm.md","rbrubaker/2012-07/whither-pm","md",{"user":110,"name":111},"rbrubaker","Ryan Brubaker",{"_path":113,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":114,"description":115,"publishDate":116,"tags":117,"excerpt":115,"body":120,"_type":103,"_id":2110,"_source":105,"_file":2111,"_stem":2112,"_extension":108,"author":2113},"/rbrubaker/2012-07/prototypal-js","Prototypal vs. Functional Inheritance in JavaScript","If you ever found JavaScript's prototypal inheritance confusing, do yourself a favor and open this article, open a JavaScript console and code each example in the article. You will definitely come away with a better understanding of how prototypal inheritance works in JavaScript.","2012-07-11",[118,119],"coffeescript","js",{"type":15,"children":121,"toc":2104},[122,136,149,156,170,411,416,422,439,734,739,1270,1284,1290,1302,2055,2060,2066,2080,2085,2098],{"type":18,"tag":19,"props":123,"children":124},{},[125,127,134],{"type":23,"value":126},"If you ever found JavaScript's prototypal inheritance confusing, do yourself a favor and open this ",{"type":18,"tag":30,"props":128,"children":131},{"href":129,"rel":130},"http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/",[34],[132],{"type":23,"value":133},"article",{"type":23,"value":135},", open a JavaScript console and code each example in the article. You will definitely come away with a better understanding of how prototypal inheritance works in JavaScript.",{"type":18,"tag":19,"props":137,"children":138},{},[139,141,148],{"type":23,"value":140},"After reading the article, I thought a good exercise would be to compare CoffeeScript class definitions vs. the prototypal inheritance style those definitions generate vs. Douglas Crockford's functional inheritance style outlined in his book ",{"type":18,"tag":30,"props":142,"children":145},{"href":143,"rel":144},"http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?ie=UTF8&qid=1341945198&sr=8-1",[34],[146],{"type":23,"value":147},"JavaScript: The Good Parts",{"type":23,"value":99},{"type":18,"tag":150,"props":151,"children":153},"h3",{"id":152},"coffeescript-class-definitions",[154],{"type":23,"value":155},"CoffeeScript Class Definitions",{"type":18,"tag":19,"props":157,"children":158},{},[159,161,168],{"type":23,"value":160},"The ",{"type":18,"tag":30,"props":162,"children":165},{"href":163,"rel":164},"http://coffeescript.org/",[34],[166],{"type":23,"value":167},"CoffeeScript homepage",{"type":23,"value":169}," gives the following example to demonstrate CoffeeScript's class syntax:",{"type":18,"tag":171,"props":172,"children":176},"pre",{"className":173,"code":174,"language":175,"meta":8,"style":8},"language-coffee shiki shiki-themes github-light github-dark","class Animal\n constructor: (@name) ->\n\n move: (meters) ->\n alert @name + \" moved #{meters}m.\"\n\nclass Snake extends Animal\n move: ->\n alert \"Slithering...\"\n super 5\n\nsam = new Snake \"Sammy the Python\"\nsam.move()\n","coffee",[177],{"type":18,"tag":178,"props":179,"children":180},"code",{"__ignoreMap":8},[181,199,224,233,255,280,288,310,327,340,355,363,392],{"type":18,"tag":182,"props":183,"children":186},"span",{"class":184,"line":185},"line",1,[187,193],{"type":18,"tag":182,"props":188,"children":190},{"style":189},"--shiki-default:#D73A49;--shiki-dark:#F97583",[191],{"type":23,"value":192},"class",{"type":18,"tag":182,"props":194,"children":196},{"style":195},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[197],{"type":23,"value":198}," Animal\n",{"type":18,"tag":182,"props":200,"children":202},{"class":184,"line":201},2,[203,208,213,219],{"type":18,"tag":182,"props":204,"children":205},{"style":195},[206],{"type":23,"value":207}," constructor",{"type":18,"tag":182,"props":209,"children":210},{"style":189},[211],{"type":23,"value":212},":",{"type":18,"tag":182,"props":214,"children":216},{"style":215},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[217],{"type":23,"value":218}," (@name) ",{"type":18,"tag":182,"props":220,"children":221},{"style":189},[222],{"type":23,"value":223},"->\n",{"type":18,"tag":182,"props":225,"children":226},{"class":184,"line":101},[227],{"type":18,"tag":182,"props":228,"children":230},{"emptyLinePlaceholder":229},true,[231],{"type":23,"value":232},"\n",{"type":18,"tag":182,"props":234,"children":236},{"class":184,"line":235},4,[237,242,246,251],{"type":18,"tag":182,"props":238,"children":239},{"style":195},[240],{"type":23,"value":241}," move",{"type":18,"tag":182,"props":243,"children":244},{"style":189},[245],{"type":23,"value":212},{"type":18,"tag":182,"props":247,"children":248},{"style":215},[249],{"type":23,"value":250}," (meters) ",{"type":18,"tag":182,"props":252,"children":253},{"style":189},[254],{"type":23,"value":223},{"type":18,"tag":182,"props":256,"children":258},{"class":184,"line":257},5,[259,264,269,274],{"type":18,"tag":182,"props":260,"children":261},{"style":195},[262],{"type":23,"value":263}," alert",{"type":18,"tag":182,"props":265,"children":266},{"style":215},[267],{"type":23,"value":268}," @name ",{"type":18,"tag":182,"props":270,"children":271},{"style":189},[272],{"type":23,"value":273},"+",{"type":18,"tag":182,"props":275,"children":277},{"style":276},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[278],{"type":23,"value":279}," \" moved #{meters}m.\"\n",{"type":18,"tag":182,"props":281,"children":283},{"class":184,"line":282},6,[284],{"type":18,"tag":182,"props":285,"children":286},{"emptyLinePlaceholder":229},[287],{"type":23,"value":232},{"type":18,"tag":182,"props":289,"children":291},{"class":184,"line":290},7,[292,296,301,306],{"type":18,"tag":182,"props":293,"children":294},{"style":189},[295],{"type":23,"value":192},{"type":18,"tag":182,"props":297,"children":298},{"style":195},[299],{"type":23,"value":300}," Snake",{"type":18,"tag":182,"props":302,"children":303},{"style":189},[304],{"type":23,"value":305}," extends",{"type":18,"tag":182,"props":307,"children":308},{"style":195},[309],{"type":23,"value":198},{"type":18,"tag":182,"props":311,"children":313},{"class":184,"line":312},8,[314,318,322],{"type":18,"tag":182,"props":315,"children":316},{"style":195},[317],{"type":23,"value":241},{"type":18,"tag":182,"props":319,"children":320},{"style":189},[321],{"type":23,"value":212},{"type":18,"tag":182,"props":323,"children":324},{"style":189},[325],{"type":23,"value":326}," ->\n",{"type":18,"tag":182,"props":328,"children":330},{"class":184,"line":329},9,[331,335],{"type":18,"tag":182,"props":332,"children":333},{"style":195},[334],{"type":23,"value":263},{"type":18,"tag":182,"props":336,"children":337},{"style":276},[338],{"type":23,"value":339}," \"Slithering...\"\n",{"type":18,"tag":182,"props":341,"children":343},{"class":184,"line":342},10,[344,350],{"type":18,"tag":182,"props":345,"children":347},{"style":346},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[348],{"type":23,"value":349}," super",{"type":18,"tag":182,"props":351,"children":352},{"style":346},[353],{"type":23,"value":354}," 5\n",{"type":18,"tag":182,"props":356,"children":358},{"class":184,"line":357},11,[359],{"type":18,"tag":182,"props":360,"children":361},{"emptyLinePlaceholder":229},[362],{"type":23,"value":232},{"type":18,"tag":182,"props":364,"children":366},{"class":184,"line":365},12,[367,373,378,383,387],{"type":18,"tag":182,"props":368,"children":370},{"style":369},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[371],{"type":23,"value":372},"sam",{"type":18,"tag":182,"props":374,"children":375},{"style":189},[376],{"type":23,"value":377}," =",{"type":18,"tag":182,"props":379,"children":380},{"style":189},[381],{"type":23,"value":382}," new",{"type":18,"tag":182,"props":384,"children":385},{"style":195},[386],{"type":23,"value":300},{"type":18,"tag":182,"props":388,"children":389},{"style":276},[390],{"type":23,"value":391}," \"Sammy the Python\"\n",{"type":18,"tag":182,"props":393,"children":395},{"class":184,"line":394},13,[396,401,406],{"type":18,"tag":182,"props":397,"children":398},{"style":215},[399],{"type":23,"value":400},"sam.",{"type":18,"tag":182,"props":402,"children":403},{"style":346},[404],{"type":23,"value":405},"move",{"type":18,"tag":182,"props":407,"children":408},{"style":215},[409],{"type":23,"value":410},"()\n",{"type":18,"tag":19,"props":412,"children":413},{},[414],{"type":23,"value":415},"Anyone experienced with class-based inheritance should have little trouble understanding this code.",{"type":18,"tag":150,"props":417,"children":419},{"id":418},"prototypal-inheritance",[420],{"type":23,"value":421},"Prototypal Inheritance",{"type":18,"tag":19,"props":423,"children":424},{},[425,427,437],{"type":23,"value":426},"The JavaScript generated by the CoffeeScript compiler uses prototypal inheritance. The compiler first generates a utility function that sets the properties on the child constructor and then sets up the prototype chain. It also creates a convenient ",{"type":18,"tag":428,"props":429,"children":430},"em",{},[431],{"type":18,"tag":432,"props":433,"children":434},"strong",{},[435],{"type":23,"value":436},"super",{"type":23,"value":438}," property that allows an object to call methods on its prototype.",{"type":18,"tag":171,"props":440,"children":442},{"className":173,"code":441,"language":175,"meta":8,"style":8},"__hasProp = {}.hasOwnProperty,\n__extends = function(child, parent) \n{ \n for (var key in parent) \n { \n if (__hasProp.call(parent, key)) \n child[key] = parent[key]; \n } \n\n function ctor() \n { \n this.constructor = child; \n } \n ctor.prototype = parent.prototype; \n child.prototype = new ctor(); \n child.__super__ = parent.prototype; \n return child; \n };\n",[443],{"type":18,"tag":178,"props":444,"children":445},{"__ignoreMap":8},[446,463,485,493,526,534,564,582,590,597,615,622,644,651,669,695,712,725],{"type":18,"tag":182,"props":447,"children":448},{"class":184,"line":185},[449,454,458],{"type":18,"tag":182,"props":450,"children":451},{"style":189},[452],{"type":23,"value":453},"__hasProp",{"type":18,"tag":182,"props":455,"children":456},{"style":189},[457],{"type":23,"value":377},{"type":18,"tag":182,"props":459,"children":460},{"style":215},[461],{"type":23,"value":462}," {}.hasOwnProperty,\n",{"type":18,"tag":182,"props":464,"children":465},{"class":184,"line":201},[466,471,475,480],{"type":18,"tag":182,"props":467,"children":468},{"style":189},[469],{"type":23,"value":470},"__extends",{"type":18,"tag":182,"props":472,"children":473},{"style":189},[474],{"type":23,"value":377},{"type":18,"tag":182,"props":476,"children":477},{"style":189},[478],{"type":23,"value":479}," function",{"type":18,"tag":182,"props":481,"children":482},{"style":215},[483],{"type":23,"value":484},"(child, parent) \n",{"type":18,"tag":182,"props":486,"children":487},{"class":184,"line":101},[488],{"type":18,"tag":182,"props":489,"children":490},{"style":215},[491],{"type":23,"value":492},"{ \n",{"type":18,"tag":182,"props":494,"children":495},{"class":184,"line":235},[496,501,506,511,516,521],{"type":18,"tag":182,"props":497,"children":498},{"style":189},[499],{"type":23,"value":500}," for",{"type":18,"tag":182,"props":502,"children":503},{"style":215},[504],{"type":23,"value":505}," (",{"type":18,"tag":182,"props":507,"children":508},{"style":189},[509],{"type":23,"value":510},"var",{"type":18,"tag":182,"props":512,"children":513},{"style":215},[514],{"type":23,"value":515}," key ",{"type":18,"tag":182,"props":517,"children":518},{"style":189},[519],{"type":23,"value":520},"in",{"type":18,"tag":182,"props":522,"children":523},{"style":215},[524],{"type":23,"value":525}," parent) \n",{"type":18,"tag":182,"props":527,"children":528},{"class":184,"line":257},[529],{"type":18,"tag":182,"props":530,"children":531},{"style":215},[532],{"type":23,"value":533}," { \n",{"type":18,"tag":182,"props":535,"children":536},{"class":184,"line":282},[537,542,546,550,554,559],{"type":18,"tag":182,"props":538,"children":539},{"style":189},[540],{"type":23,"value":541}," if",{"type":18,"tag":182,"props":543,"children":544},{"style":215},[545],{"type":23,"value":505},{"type":18,"tag":182,"props":547,"children":548},{"style":189},[549],{"type":23,"value":453},{"type":18,"tag":182,"props":551,"children":552},{"style":215},[553],{"type":23,"value":99},{"type":18,"tag":182,"props":555,"children":556},{"style":346},[557],{"type":23,"value":558},"call",{"type":18,"tag":182,"props":560,"children":561},{"style":215},[562],{"type":23,"value":563},"(parent, key)) \n",{"type":18,"tag":182,"props":565,"children":566},{"class":184,"line":290},[567,572,577],{"type":18,"tag":182,"props":568,"children":569},{"style":215},[570],{"type":23,"value":571}," child[key] ",{"type":18,"tag":182,"props":573,"children":574},{"style":189},[575],{"type":23,"value":576},"=",{"type":18,"tag":182,"props":578,"children":579},{"style":215},[580],{"type":23,"value":581}," parent[key]; \n",{"type":18,"tag":182,"props":583,"children":584},{"class":184,"line":312},[585],{"type":18,"tag":182,"props":586,"children":587},{"style":215},[588],{"type":23,"value":589}," } \n",{"type":18,"tag":182,"props":591,"children":592},{"class":184,"line":329},[593],{"type":18,"tag":182,"props":594,"children":595},{"emptyLinePlaceholder":229},[596],{"type":23,"value":232},{"type":18,"tag":182,"props":598,"children":599},{"class":184,"line":342},[600,605,610],{"type":18,"tag":182,"props":601,"children":602},{"style":189},[603],{"type":23,"value":604}," function",{"type":18,"tag":182,"props":606,"children":607},{"style":195},[608],{"type":23,"value":609}," ctor",{"type":18,"tag":182,"props":611,"children":612},{"style":215},[613],{"type":23,"value":614},"() \n",{"type":18,"tag":182,"props":616,"children":617},{"class":184,"line":357},[618],{"type":18,"tag":182,"props":619,"children":620},{"style":215},[621],{"type":23,"value":533},{"type":18,"tag":182,"props":623,"children":624},{"class":184,"line":365},[625,630,635,639],{"type":18,"tag":182,"props":626,"children":627},{"style":346},[628],{"type":23,"value":629}," this",{"type":18,"tag":182,"props":631,"children":632},{"style":215},[633],{"type":23,"value":634},".constructor ",{"type":18,"tag":182,"props":636,"children":637},{"style":189},[638],{"type":23,"value":576},{"type":18,"tag":182,"props":640,"children":641},{"style":215},[642],{"type":23,"value":643}," child; \n",{"type":18,"tag":182,"props":645,"children":646},{"class":184,"line":394},[647],{"type":18,"tag":182,"props":648,"children":649},{"style":215},[650],{"type":23,"value":589},{"type":18,"tag":182,"props":652,"children":654},{"class":184,"line":653},14,[655,660,664],{"type":18,"tag":182,"props":656,"children":657},{"style":215},[658],{"type":23,"value":659}," ctor.prototype ",{"type":18,"tag":182,"props":661,"children":662},{"style":189},[663],{"type":23,"value":576},{"type":18,"tag":182,"props":665,"children":666},{"style":215},[667],{"type":23,"value":668}," parent.prototype; \n",{"type":18,"tag":182,"props":670,"children":672},{"class":184,"line":671},15,[673,678,682,686,690],{"type":18,"tag":182,"props":674,"children":675},{"style":215},[676],{"type":23,"value":677}," child.prototype ",{"type":18,"tag":182,"props":679,"children":680},{"style":189},[681],{"type":23,"value":576},{"type":18,"tag":182,"props":683,"children":684},{"style":189},[685],{"type":23,"value":382},{"type":18,"tag":182,"props":687,"children":688},{"style":195},[689],{"type":23,"value":609},{"type":18,"tag":182,"props":691,"children":692},{"style":215},[693],{"type":23,"value":694},"(); \n",{"type":18,"tag":182,"props":696,"children":698},{"class":184,"line":697},16,[699,704,708],{"type":18,"tag":182,"props":700,"children":701},{"style":215},[702],{"type":23,"value":703}," child.__super__ ",{"type":18,"tag":182,"props":705,"children":706},{"style":189},[707],{"type":23,"value":576},{"type":18,"tag":182,"props":709,"children":710},{"style":215},[711],{"type":23,"value":668},{"type":18,"tag":182,"props":713,"children":715},{"class":184,"line":714},17,[716,721],{"type":18,"tag":182,"props":717,"children":718},{"style":189},[719],{"type":23,"value":720}," return",{"type":18,"tag":182,"props":722,"children":723},{"style":215},[724],{"type":23,"value":643},{"type":18,"tag":182,"props":726,"children":728},{"class":184,"line":727},18,[729],{"type":18,"tag":182,"props":730,"children":731},{"style":215},[732],{"type":23,"value":733}," };\n",{"type":18,"tag":19,"props":735,"children":736},{},[737],{"type":23,"value":738},"The constructor functions are then generated as follows:",{"type":18,"tag":171,"props":740,"children":742},{"className":173,"code":741,"language":175,"meta":8,"style":8},"Animal = (function() \n{\n function Animal(name) \n {\n this.name = name;\n }\n\n Animal.prototype.move = function(meters) \n {\n return alert(this.name + (\" moved \" + meters + \"m.\"));\n };\n return Animal;\n})();\n\nSnake = (function(_super) \n{\n __extends(Snake, _super);\n function Snake() \n {\n return Snake.__super__.constructor.apply(this, arguments);\n }\n\n Snake.prototype.move = function() \n {\n alert(\"Slithering...\");\n return Snake.__super__.move.call(this, 5);\n };\n return Snake;\n})(Animal);\n\nsam = new Snake(\"Sammy the Python\");\nsam.move();\n",[743],{"type":18,"tag":178,"props":744,"children":745},{"__ignoreMap":8},[746,771,779,796,804,826,834,841,862,869,933,941,953,961,968,993,1000,1013,1028,1036,1077,1085,1093,1114,1122,1144,1182,1190,1203,1212,1220,1253],{"type":18,"tag":182,"props":747,"children":748},{"class":184,"line":185},[749,754,758,762,767],{"type":18,"tag":182,"props":750,"children":751},{"style":369},[752],{"type":23,"value":753},"Animal",{"type":18,"tag":182,"props":755,"children":756},{"style":189},[757],{"type":23,"value":377},{"type":18,"tag":182,"props":759,"children":760},{"style":215},[761],{"type":23,"value":505},{"type":18,"tag":182,"props":763,"children":764},{"style":189},[765],{"type":23,"value":766},"function",{"type":18,"tag":182,"props":768,"children":769},{"style":215},[770],{"type":23,"value":614},{"type":18,"tag":182,"props":772,"children":773},{"class":184,"line":201},[774],{"type":18,"tag":182,"props":775,"children":776},{"style":215},[777],{"type":23,"value":778},"{\n",{"type":18,"tag":182,"props":780,"children":781},{"class":184,"line":101},[782,786,791],{"type":18,"tag":182,"props":783,"children":784},{"style":189},[785],{"type":23,"value":604},{"type":18,"tag":182,"props":787,"children":788},{"style":195},[789],{"type":23,"value":790}," Animal",{"type":18,"tag":182,"props":792,"children":793},{"style":215},[794],{"type":23,"value":795},"(name) \n",{"type":18,"tag":182,"props":797,"children":798},{"class":184,"line":235},[799],{"type":18,"tag":182,"props":800,"children":801},{"style":215},[802],{"type":23,"value":803}," {\n",{"type":18,"tag":182,"props":805,"children":806},{"class":184,"line":257},[807,812,817,821],{"type":18,"tag":182,"props":808,"children":809},{"style":346},[810],{"type":23,"value":811}," this",{"type":18,"tag":182,"props":813,"children":814},{"style":215},[815],{"type":23,"value":816},".name ",{"type":18,"tag":182,"props":818,"children":819},{"style":189},[820],{"type":23,"value":576},{"type":18,"tag":182,"props":822,"children":823},{"style":215},[824],{"type":23,"value":825}," name;\n",{"type":18,"tag":182,"props":827,"children":828},{"class":184,"line":282},[829],{"type":18,"tag":182,"props":830,"children":831},{"style":215},[832],{"type":23,"value":833}," }\n",{"type":18,"tag":182,"props":835,"children":836},{"class":184,"line":290},[837],{"type":18,"tag":182,"props":838,"children":839},{"emptyLinePlaceholder":229},[840],{"type":23,"value":232},{"type":18,"tag":182,"props":842,"children":843},{"class":184,"line":312},[844,849,853,857],{"type":18,"tag":182,"props":845,"children":846},{"style":215},[847],{"type":23,"value":848}," Animal.prototype.move ",{"type":18,"tag":182,"props":850,"children":851},{"style":189},[852],{"type":23,"value":576},{"type":18,"tag":182,"props":854,"children":855},{"style":189},[856],{"type":23,"value":479},{"type":18,"tag":182,"props":858,"children":859},{"style":215},[860],{"type":23,"value":861},"(meters) \n",{"type":18,"tag":182,"props":863,"children":864},{"class":184,"line":329},[865],{"type":18,"tag":182,"props":866,"children":867},{"style":215},[868],{"type":23,"value":803},{"type":18,"tag":182,"props":870,"children":871},{"class":184,"line":342},[872,877,882,887,892,896,900,904,909,914,919,923,928],{"type":18,"tag":182,"props":873,"children":874},{"style":189},[875],{"type":23,"value":876}," return",{"type":18,"tag":182,"props":878,"children":879},{"style":195},[880],{"type":23,"value":881}," alert",{"type":18,"tag":182,"props":883,"children":884},{"style":215},[885],{"type":23,"value":886},"(",{"type":18,"tag":182,"props":888,"children":889},{"style":346},[890],{"type":23,"value":891},"this",{"type":18,"tag":182,"props":893,"children":894},{"style":215},[895],{"type":23,"value":816},{"type":18,"tag":182,"props":897,"children":898},{"style":189},[899],{"type":23,"value":273},{"type":18,"tag":182,"props":901,"children":902},{"style":215},[903],{"type":23,"value":505},{"type":18,"tag":182,"props":905,"children":906},{"style":276},[907],{"type":23,"value":908},"\" moved \"",{"type":18,"tag":182,"props":910,"children":911},{"style":189},[912],{"type":23,"value":913}," +",{"type":18,"tag":182,"props":915,"children":916},{"style":215},[917],{"type":23,"value":918}," meters ",{"type":18,"tag":182,"props":920,"children":921},{"style":189},[922],{"type":23,"value":273},{"type":18,"tag":182,"props":924,"children":925},{"style":276},[926],{"type":23,"value":927}," \"m.\"",{"type":18,"tag":182,"props":929,"children":930},{"style":215},[931],{"type":23,"value":932},"));\n",{"type":18,"tag":182,"props":934,"children":935},{"class":184,"line":357},[936],{"type":18,"tag":182,"props":937,"children":938},{"style":215},[939],{"type":23,"value":940}," };\n",{"type":18,"tag":182,"props":942,"children":943},{"class":184,"line":365},[944,948],{"type":18,"tag":182,"props":945,"children":946},{"style":189},[947],{"type":23,"value":720},{"type":18,"tag":182,"props":949,"children":950},{"style":215},[951],{"type":23,"value":952}," Animal;\n",{"type":18,"tag":182,"props":954,"children":955},{"class":184,"line":394},[956],{"type":18,"tag":182,"props":957,"children":958},{"style":215},[959],{"type":23,"value":960},"})();\n",{"type":18,"tag":182,"props":962,"children":963},{"class":184,"line":653},[964],{"type":18,"tag":182,"props":965,"children":966},{"emptyLinePlaceholder":229},[967],{"type":23,"value":232},{"type":18,"tag":182,"props":969,"children":970},{"class":184,"line":671},[971,976,980,984,988],{"type":18,"tag":182,"props":972,"children":973},{"style":369},[974],{"type":23,"value":975},"Snake",{"type":18,"tag":182,"props":977,"children":978},{"style":189},[979],{"type":23,"value":377},{"type":18,"tag":182,"props":981,"children":982},{"style":215},[983],{"type":23,"value":505},{"type":18,"tag":182,"props":985,"children":986},{"style":189},[987],{"type":23,"value":766},{"type":18,"tag":182,"props":989,"children":990},{"style":215},[991],{"type":23,"value":992},"(_super) \n",{"type":18,"tag":182,"props":994,"children":995},{"class":184,"line":697},[996],{"type":18,"tag":182,"props":997,"children":998},{"style":215},[999],{"type":23,"value":778},{"type":18,"tag":182,"props":1001,"children":1002},{"class":184,"line":714},[1003,1008],{"type":18,"tag":182,"props":1004,"children":1005},{"style":189},[1006],{"type":23,"value":1007}," __extends",{"type":18,"tag":182,"props":1009,"children":1010},{"style":215},[1011],{"type":23,"value":1012},"(Snake, _super);\n",{"type":18,"tag":182,"props":1014,"children":1015},{"class":184,"line":727},[1016,1020,1024],{"type":18,"tag":182,"props":1017,"children":1018},{"style":189},[1019],{"type":23,"value":604},{"type":18,"tag":182,"props":1021,"children":1022},{"style":195},[1023],{"type":23,"value":300},{"type":18,"tag":182,"props":1025,"children":1026},{"style":215},[1027],{"type":23,"value":614},{"type":18,"tag":182,"props":1029,"children":1031},{"class":184,"line":1030},19,[1032],{"type":18,"tag":182,"props":1033,"children":1034},{"style":215},[1035],{"type":23,"value":803},{"type":18,"tag":182,"props":1037,"children":1039},{"class":184,"line":1038},20,[1040,1044,1049,1054,1058,1062,1067,1072],{"type":18,"tag":182,"props":1041,"children":1042},{"style":189},[1043],{"type":23,"value":876},{"type":18,"tag":182,"props":1045,"children":1046},{"style":215},[1047],{"type":23,"value":1048}," Snake.__super__.constructor.",{"type":18,"tag":182,"props":1050,"children":1051},{"style":346},[1052],{"type":23,"value":1053},"apply",{"type":18,"tag":182,"props":1055,"children":1056},{"style":215},[1057],{"type":23,"value":886},{"type":18,"tag":182,"props":1059,"children":1060},{"style":346},[1061],{"type":23,"value":891},{"type":18,"tag":182,"props":1063,"children":1064},{"style":215},[1065],{"type":23,"value":1066},", ",{"type":18,"tag":182,"props":1068,"children":1069},{"style":346},[1070],{"type":23,"value":1071},"arguments",{"type":18,"tag":182,"props":1073,"children":1074},{"style":215},[1075],{"type":23,"value":1076},");\n",{"type":18,"tag":182,"props":1078,"children":1080},{"class":184,"line":1079},21,[1081],{"type":18,"tag":182,"props":1082,"children":1083},{"style":215},[1084],{"type":23,"value":833},{"type":18,"tag":182,"props":1086,"children":1088},{"class":184,"line":1087},22,[1089],{"type":18,"tag":182,"props":1090,"children":1091},{"emptyLinePlaceholder":229},[1092],{"type":23,"value":232},{"type":18,"tag":182,"props":1094,"children":1096},{"class":184,"line":1095},23,[1097,1102,1106,1110],{"type":18,"tag":182,"props":1098,"children":1099},{"style":215},[1100],{"type":23,"value":1101}," Snake.prototype.move ",{"type":18,"tag":182,"props":1103,"children":1104},{"style":189},[1105],{"type":23,"value":576},{"type":18,"tag":182,"props":1107,"children":1108},{"style":189},[1109],{"type":23,"value":479},{"type":18,"tag":182,"props":1111,"children":1112},{"style":215},[1113],{"type":23,"value":614},{"type":18,"tag":182,"props":1115,"children":1117},{"class":184,"line":1116},24,[1118],{"type":18,"tag":182,"props":1119,"children":1120},{"style":215},[1121],{"type":23,"value":803},{"type":18,"tag":182,"props":1123,"children":1125},{"class":184,"line":1124},25,[1126,1131,1135,1140],{"type":18,"tag":182,"props":1127,"children":1128},{"style":195},[1129],{"type":23,"value":1130}," alert",{"type":18,"tag":182,"props":1132,"children":1133},{"style":215},[1134],{"type":23,"value":886},{"type":18,"tag":182,"props":1136,"children":1137},{"style":276},[1138],{"type":23,"value":1139},"\"Slithering...\"",{"type":18,"tag":182,"props":1141,"children":1142},{"style":215},[1143],{"type":23,"value":1076},{"type":18,"tag":182,"props":1145,"children":1147},{"class":184,"line":1146},26,[1148,1152,1157,1161,1165,1169,1173,1178],{"type":18,"tag":182,"props":1149,"children":1150},{"style":189},[1151],{"type":23,"value":876},{"type":18,"tag":182,"props":1153,"children":1154},{"style":215},[1155],{"type":23,"value":1156}," Snake.__super__.move.",{"type":18,"tag":182,"props":1158,"children":1159},{"style":346},[1160],{"type":23,"value":558},{"type":18,"tag":182,"props":1162,"children":1163},{"style":215},[1164],{"type":23,"value":886},{"type":18,"tag":182,"props":1166,"children":1167},{"style":346},[1168],{"type":23,"value":891},{"type":18,"tag":182,"props":1170,"children":1171},{"style":215},[1172],{"type":23,"value":1066},{"type":18,"tag":182,"props":1174,"children":1175},{"style":346},[1176],{"type":23,"value":1177},"5",{"type":18,"tag":182,"props":1179,"children":1180},{"style":215},[1181],{"type":23,"value":1076},{"type":18,"tag":182,"props":1183,"children":1185},{"class":184,"line":1184},27,[1186],{"type":18,"tag":182,"props":1187,"children":1188},{"style":215},[1189],{"type":23,"value":940},{"type":18,"tag":182,"props":1191,"children":1193},{"class":184,"line":1192},28,[1194,1198],{"type":18,"tag":182,"props":1195,"children":1196},{"style":189},[1197],{"type":23,"value":720},{"type":18,"tag":182,"props":1199,"children":1200},{"style":215},[1201],{"type":23,"value":1202}," Snake;\n",{"type":18,"tag":182,"props":1204,"children":1206},{"class":184,"line":1205},29,[1207],{"type":18,"tag":182,"props":1208,"children":1209},{"style":215},[1210],{"type":23,"value":1211},"})(Animal);\n",{"type":18,"tag":182,"props":1213,"children":1215},{"class":184,"line":1214},30,[1216],{"type":18,"tag":182,"props":1217,"children":1218},{"emptyLinePlaceholder":229},[1219],{"type":23,"value":232},{"type":18,"tag":182,"props":1221,"children":1223},{"class":184,"line":1222},31,[1224,1228,1232,1236,1240,1244,1249],{"type":18,"tag":182,"props":1225,"children":1226},{"style":369},[1227],{"type":23,"value":372},{"type":18,"tag":182,"props":1229,"children":1230},{"style":189},[1231],{"type":23,"value":377},{"type":18,"tag":182,"props":1233,"children":1234},{"style":189},[1235],{"type":23,"value":382},{"type":18,"tag":182,"props":1237,"children":1238},{"style":195},[1239],{"type":23,"value":300},{"type":18,"tag":182,"props":1241,"children":1242},{"style":215},[1243],{"type":23,"value":886},{"type":18,"tag":182,"props":1245,"children":1246},{"style":276},[1247],{"type":23,"value":1248},"\"Sammy the Python\"",{"type":18,"tag":182,"props":1250,"children":1251},{"style":215},[1252],{"type":23,"value":1076},{"type":18,"tag":182,"props":1254,"children":1256},{"class":184,"line":1255},32,[1257,1261,1265],{"type":18,"tag":182,"props":1258,"children":1259},{"style":215},[1260],{"type":23,"value":400},{"type":18,"tag":182,"props":1262,"children":1263},{"style":346},[1264],{"type":23,"value":405},{"type":18,"tag":182,"props":1266,"children":1267},{"style":215},[1268],{"type":23,"value":1269},"();\n",{"type":18,"tag":19,"props":1271,"children":1272},{},[1273,1275,1282],{"type":23,"value":1274},"Notice how easily the Snake constructor can access its Animal prototype using the ",{"type":18,"tag":428,"props":1276,"children":1277},{},[1278],{"type":18,"tag":432,"props":1279,"children":1280},{},[1281],{"type":23,"value":436},{"type":23,"value":1283}," property.",{"type":18,"tag":150,"props":1285,"children":1287},{"id":1286},"functional-inheritance",[1288],{"type":23,"value":1289},"Functional Inheritance",{"type":18,"tag":19,"props":1291,"children":1292},{},[1293,1295,1300],{"type":23,"value":1294},"In ",{"type":18,"tag":30,"props":1296,"children":1298},{"href":143,"rel":1297},[34],[1299],{"type":23,"value":147},{"type":23,"value":1301},", Crockford advocates a functional inheritance style. Converting the original CoffeeScript code to this style results in the following:",{"type":18,"tag":171,"props":1303,"children":1305},{"className":173,"code":1304,"language":175,"meta":8,"style":8},"Function.prototype.method = function(name, func)\n{\n if (!this.prototype[name])\n {\n this.prototype[name] = func;\n return this;\n }\n};\n\nObject.method('superior', function(name)\n{\n var that = this;\n var method = that[name];\n return function()\n {\n return method.apply(that, arguments);\n };\n});\n\nvar Animal = function(spec)\n{\n var that = {};\n that.name = spec.name;\n\n that.move = function(meters)\n {\n alert(this.name + ' moved ' + meters + 'm.');\n }\n return that;\n}\n\nvar Snake = function(spec)\n{\n var that = Animal(spec);\n var super_move = that.superior('move');\n\n that.move = function()\n {\n alert('Slithering...');\n super_move(5);\n }\n return that;\n}\n\nsam = new Snake({name:'Sammy the Python'});\nsam.move()\n",[1306],{"type":18,"tag":178,"props":1307,"children":1308},{"__ignoreMap":8},[1309,1335,1342,1368,1375,1396,1413,1420,1428,1435,1474,1481,1506,1527,1542,1549,1578,1585,1593,1600,1624,1631,1651,1668,1675,1696,1703,1752,1759,1771,1779,1786,1809,1817,1842,1882,1890,1910,1918,1939,1960,1968,1980,1988,1996,2039],{"type":18,"tag":182,"props":1310,"children":1311},{"class":184,"line":185},[1312,1317,1322,1326,1330],{"type":18,"tag":182,"props":1313,"children":1314},{"style":346},[1315],{"type":23,"value":1316},"Function",{"type":18,"tag":182,"props":1318,"children":1319},{"style":215},[1320],{"type":23,"value":1321},".prototype.method ",{"type":18,"tag":182,"props":1323,"children":1324},{"style":189},[1325],{"type":23,"value":576},{"type":18,"tag":182,"props":1327,"children":1328},{"style":189},[1329],{"type":23,"value":479},{"type":18,"tag":182,"props":1331,"children":1332},{"style":215},[1333],{"type":23,"value":1334},"(name, func)\n",{"type":18,"tag":182,"props":1336,"children":1337},{"class":184,"line":201},[1338],{"type":18,"tag":182,"props":1339,"children":1340},{"style":215},[1341],{"type":23,"value":778},{"type":18,"tag":182,"props":1343,"children":1344},{"class":184,"line":101},[1345,1350,1354,1359,1363],{"type":18,"tag":182,"props":1346,"children":1347},{"style":189},[1348],{"type":23,"value":1349}," if",{"type":18,"tag":182,"props":1351,"children":1352},{"style":215},[1353],{"type":23,"value":505},{"type":18,"tag":182,"props":1355,"children":1356},{"style":189},[1357],{"type":23,"value":1358},"!",{"type":18,"tag":182,"props":1360,"children":1361},{"style":346},[1362],{"type":23,"value":891},{"type":18,"tag":182,"props":1364,"children":1365},{"style":215},[1366],{"type":23,"value":1367},".prototype[name])\n",{"type":18,"tag":182,"props":1369,"children":1370},{"class":184,"line":235},[1371],{"type":18,"tag":182,"props":1372,"children":1373},{"style":215},[1374],{"type":23,"value":803},{"type":18,"tag":182,"props":1376,"children":1377},{"class":184,"line":257},[1378,1382,1387,1391],{"type":18,"tag":182,"props":1379,"children":1380},{"style":346},[1381],{"type":23,"value":629},{"type":18,"tag":182,"props":1383,"children":1384},{"style":215},[1385],{"type":23,"value":1386},".prototype[name] ",{"type":18,"tag":182,"props":1388,"children":1389},{"style":189},[1390],{"type":23,"value":576},{"type":18,"tag":182,"props":1392,"children":1393},{"style":215},[1394],{"type":23,"value":1395}," func;\n",{"type":18,"tag":182,"props":1397,"children":1398},{"class":184,"line":282},[1399,1403,1408],{"type":18,"tag":182,"props":1400,"children":1401},{"style":189},[1402],{"type":23,"value":876},{"type":18,"tag":182,"props":1404,"children":1405},{"style":346},[1406],{"type":23,"value":1407}," this",{"type":18,"tag":182,"props":1409,"children":1410},{"style":215},[1411],{"type":23,"value":1412},";\n",{"type":18,"tag":182,"props":1414,"children":1415},{"class":184,"line":290},[1416],{"type":18,"tag":182,"props":1417,"children":1418},{"style":215},[1419],{"type":23,"value":833},{"type":18,"tag":182,"props":1421,"children":1422},{"class":184,"line":312},[1423],{"type":18,"tag":182,"props":1424,"children":1425},{"style":215},[1426],{"type":23,"value":1427},"};\n",{"type":18,"tag":182,"props":1429,"children":1430},{"class":184,"line":329},[1431],{"type":18,"tag":182,"props":1432,"children":1433},{"emptyLinePlaceholder":229},[1434],{"type":23,"value":232},{"type":18,"tag":182,"props":1436,"children":1437},{"class":184,"line":342},[1438,1443,1447,1452,1456,1461,1465,1469],{"type":18,"tag":182,"props":1439,"children":1440},{"style":346},[1441],{"type":23,"value":1442},"Object",{"type":18,"tag":182,"props":1444,"children":1445},{"style":215},[1446],{"type":23,"value":99},{"type":18,"tag":182,"props":1448,"children":1449},{"style":195},[1450],{"type":23,"value":1451},"method",{"type":18,"tag":182,"props":1453,"children":1454},{"style":215},[1455],{"type":23,"value":886},{"type":18,"tag":182,"props":1457,"children":1458},{"style":276},[1459],{"type":23,"value":1460},"'superior'",{"type":18,"tag":182,"props":1462,"children":1463},{"style":215},[1464],{"type":23,"value":1066},{"type":18,"tag":182,"props":1466,"children":1467},{"style":189},[1468],{"type":23,"value":766},{"type":18,"tag":182,"props":1470,"children":1471},{"style":215},[1472],{"type":23,"value":1473},"(name)\n",{"type":18,"tag":182,"props":1475,"children":1476},{"class":184,"line":357},[1477],{"type":18,"tag":182,"props":1478,"children":1479},{"style":215},[1480],{"type":23,"value":778},{"type":18,"tag":182,"props":1482,"children":1483},{"class":184,"line":365},[1484,1489,1494,1498,1502],{"type":18,"tag":182,"props":1485,"children":1486},{"style":189},[1487],{"type":23,"value":1488}," var",{"type":18,"tag":182,"props":1490,"children":1491},{"style":369},[1492],{"type":23,"value":1493}," that",{"type":18,"tag":182,"props":1495,"children":1496},{"style":189},[1497],{"type":23,"value":377},{"type":18,"tag":182,"props":1499,"children":1500},{"style":346},[1501],{"type":23,"value":1407},{"type":18,"tag":182,"props":1503,"children":1504},{"style":215},[1505],{"type":23,"value":1412},{"type":18,"tag":182,"props":1507,"children":1508},{"class":184,"line":394},[1509,1513,1518,1522],{"type":18,"tag":182,"props":1510,"children":1511},{"style":189},[1512],{"type":23,"value":1488},{"type":18,"tag":182,"props":1514,"children":1515},{"style":369},[1516],{"type":23,"value":1517}," method",{"type":18,"tag":182,"props":1519,"children":1520},{"style":189},[1521],{"type":23,"value":377},{"type":18,"tag":182,"props":1523,"children":1524},{"style":215},[1525],{"type":23,"value":1526}," that[name];\n",{"type":18,"tag":182,"props":1528,"children":1529},{"class":184,"line":653},[1530,1534,1538],{"type":18,"tag":182,"props":1531,"children":1532},{"style":189},[1533],{"type":23,"value":720},{"type":18,"tag":182,"props":1535,"children":1536},{"style":189},[1537],{"type":23,"value":479},{"type":18,"tag":182,"props":1539,"children":1540},{"style":215},[1541],{"type":23,"value":410},{"type":18,"tag":182,"props":1543,"children":1544},{"class":184,"line":671},[1545],{"type":18,"tag":182,"props":1546,"children":1547},{"style":215},[1548],{"type":23,"value":803},{"type":18,"tag":182,"props":1550,"children":1551},{"class":184,"line":697},[1552,1556,1561,1565,1570,1574],{"type":18,"tag":182,"props":1553,"children":1554},{"style":189},[1555],{"type":23,"value":876},{"type":18,"tag":182,"props":1557,"children":1558},{"style":215},[1559],{"type":23,"value":1560}," method.",{"type":18,"tag":182,"props":1562,"children":1563},{"style":346},[1564],{"type":23,"value":1053},{"type":18,"tag":182,"props":1566,"children":1567},{"style":215},[1568],{"type":23,"value":1569},"(that, ",{"type":18,"tag":182,"props":1571,"children":1572},{"style":346},[1573],{"type":23,"value":1071},{"type":18,"tag":182,"props":1575,"children":1576},{"style":215},[1577],{"type":23,"value":1076},{"type":18,"tag":182,"props":1579,"children":1580},{"class":184,"line":714},[1581],{"type":18,"tag":182,"props":1582,"children":1583},{"style":215},[1584],{"type":23,"value":940},{"type":18,"tag":182,"props":1586,"children":1587},{"class":184,"line":727},[1588],{"type":18,"tag":182,"props":1589,"children":1590},{"style":215},[1591],{"type":23,"value":1592},"});\n",{"type":18,"tag":182,"props":1594,"children":1595},{"class":184,"line":1030},[1596],{"type":18,"tag":182,"props":1597,"children":1598},{"emptyLinePlaceholder":229},[1599],{"type":23,"value":232},{"type":18,"tag":182,"props":1601,"children":1602},{"class":184,"line":1038},[1603,1607,1611,1615,1619],{"type":18,"tag":182,"props":1604,"children":1605},{"style":189},[1606],{"type":23,"value":510},{"type":18,"tag":182,"props":1608,"children":1609},{"style":369},[1610],{"type":23,"value":790},{"type":18,"tag":182,"props":1612,"children":1613},{"style":189},[1614],{"type":23,"value":377},{"type":18,"tag":182,"props":1616,"children":1617},{"style":189},[1618],{"type":23,"value":479},{"type":18,"tag":182,"props":1620,"children":1621},{"style":215},[1622],{"type":23,"value":1623},"(spec)\n",{"type":18,"tag":182,"props":1625,"children":1626},{"class":184,"line":1079},[1627],{"type":18,"tag":182,"props":1628,"children":1629},{"style":215},[1630],{"type":23,"value":778},{"type":18,"tag":182,"props":1632,"children":1633},{"class":184,"line":1087},[1634,1638,1642,1646],{"type":18,"tag":182,"props":1635,"children":1636},{"style":189},[1637],{"type":23,"value":1488},{"type":18,"tag":182,"props":1639,"children":1640},{"style":369},[1641],{"type":23,"value":1493},{"type":18,"tag":182,"props":1643,"children":1644},{"style":189},[1645],{"type":23,"value":377},{"type":18,"tag":182,"props":1647,"children":1648},{"style":215},[1649],{"type":23,"value":1650}," {};\n",{"type":18,"tag":182,"props":1652,"children":1653},{"class":184,"line":1095},[1654,1659,1663],{"type":18,"tag":182,"props":1655,"children":1656},{"style":215},[1657],{"type":23,"value":1658}," that.name ",{"type":18,"tag":182,"props":1660,"children":1661},{"style":189},[1662],{"type":23,"value":576},{"type":18,"tag":182,"props":1664,"children":1665},{"style":215},[1666],{"type":23,"value":1667}," spec.name;\n",{"type":18,"tag":182,"props":1669,"children":1670},{"class":184,"line":1116},[1671],{"type":18,"tag":182,"props":1672,"children":1673},{"emptyLinePlaceholder":229},[1674],{"type":23,"value":232},{"type":18,"tag":182,"props":1676,"children":1677},{"class":184,"line":1124},[1678,1683,1687,1691],{"type":18,"tag":182,"props":1679,"children":1680},{"style":215},[1681],{"type":23,"value":1682}," that.move ",{"type":18,"tag":182,"props":1684,"children":1685},{"style":189},[1686],{"type":23,"value":576},{"type":18,"tag":182,"props":1688,"children":1689},{"style":189},[1690],{"type":23,"value":479},{"type":18,"tag":182,"props":1692,"children":1693},{"style":215},[1694],{"type":23,"value":1695},"(meters)\n",{"type":18,"tag":182,"props":1697,"children":1698},{"class":184,"line":1146},[1699],{"type":18,"tag":182,"props":1700,"children":1701},{"style":215},[1702],{"type":23,"value":803},{"type":18,"tag":182,"props":1704,"children":1705},{"class":184,"line":1184},[1706,1710,1714,1718,1722,1726,1731,1735,1739,1743,1748],{"type":18,"tag":182,"props":1707,"children":1708},{"style":195},[1709],{"type":23,"value":1130},{"type":18,"tag":182,"props":1711,"children":1712},{"style":215},[1713],{"type":23,"value":886},{"type":18,"tag":182,"props":1715,"children":1716},{"style":346},[1717],{"type":23,"value":891},{"type":18,"tag":182,"props":1719,"children":1720},{"style":215},[1721],{"type":23,"value":816},{"type":18,"tag":182,"props":1723,"children":1724},{"style":189},[1725],{"type":23,"value":273},{"type":18,"tag":182,"props":1727,"children":1728},{"style":276},[1729],{"type":23,"value":1730}," ' moved '",{"type":18,"tag":182,"props":1732,"children":1733},{"style":189},[1734],{"type":23,"value":913},{"type":18,"tag":182,"props":1736,"children":1737},{"style":215},[1738],{"type":23,"value":918},{"type":18,"tag":182,"props":1740,"children":1741},{"style":189},[1742],{"type":23,"value":273},{"type":18,"tag":182,"props":1744,"children":1745},{"style":276},[1746],{"type":23,"value":1747}," 'm.'",{"type":18,"tag":182,"props":1749,"children":1750},{"style":215},[1751],{"type":23,"value":1076},{"type":18,"tag":182,"props":1753,"children":1754},{"class":184,"line":1192},[1755],{"type":18,"tag":182,"props":1756,"children":1757},{"style":215},[1758],{"type":23,"value":833},{"type":18,"tag":182,"props":1760,"children":1761},{"class":184,"line":1205},[1762,1766],{"type":18,"tag":182,"props":1763,"children":1764},{"style":189},[1765],{"type":23,"value":720},{"type":18,"tag":182,"props":1767,"children":1768},{"style":215},[1769],{"type":23,"value":1770}," that;\n",{"type":18,"tag":182,"props":1772,"children":1773},{"class":184,"line":1214},[1774],{"type":18,"tag":182,"props":1775,"children":1776},{"style":215},[1777],{"type":23,"value":1778},"}\n",{"type":18,"tag":182,"props":1780,"children":1781},{"class":184,"line":1222},[1782],{"type":18,"tag":182,"props":1783,"children":1784},{"emptyLinePlaceholder":229},[1785],{"type":23,"value":232},{"type":18,"tag":182,"props":1787,"children":1788},{"class":184,"line":1255},[1789,1793,1797,1801,1805],{"type":18,"tag":182,"props":1790,"children":1791},{"style":189},[1792],{"type":23,"value":510},{"type":18,"tag":182,"props":1794,"children":1795},{"style":369},[1796],{"type":23,"value":300},{"type":18,"tag":182,"props":1798,"children":1799},{"style":189},[1800],{"type":23,"value":377},{"type":18,"tag":182,"props":1802,"children":1803},{"style":189},[1804],{"type":23,"value":479},{"type":18,"tag":182,"props":1806,"children":1807},{"style":215},[1808],{"type":23,"value":1623},{"type":18,"tag":182,"props":1810,"children":1812},{"class":184,"line":1811},33,[1813],{"type":18,"tag":182,"props":1814,"children":1815},{"style":215},[1816],{"type":23,"value":778},{"type":18,"tag":182,"props":1818,"children":1820},{"class":184,"line":1819},34,[1821,1825,1829,1833,1837],{"type":18,"tag":182,"props":1822,"children":1823},{"style":189},[1824],{"type":23,"value":1488},{"type":18,"tag":182,"props":1826,"children":1827},{"style":369},[1828],{"type":23,"value":1493},{"type":18,"tag":182,"props":1830,"children":1831},{"style":189},[1832],{"type":23,"value":377},{"type":18,"tag":182,"props":1834,"children":1835},{"style":195},[1836],{"type":23,"value":790},{"type":18,"tag":182,"props":1838,"children":1839},{"style":215},[1840],{"type":23,"value":1841},"(spec);\n",{"type":18,"tag":182,"props":1843,"children":1845},{"class":184,"line":1844},35,[1846,1850,1855,1859,1864,1869,1873,1878],{"type":18,"tag":182,"props":1847,"children":1848},{"style":189},[1849],{"type":23,"value":1488},{"type":18,"tag":182,"props":1851,"children":1852},{"style":369},[1853],{"type":23,"value":1854}," super_move",{"type":18,"tag":182,"props":1856,"children":1857},{"style":189},[1858],{"type":23,"value":377},{"type":18,"tag":182,"props":1860,"children":1861},{"style":215},[1862],{"type":23,"value":1863}," that.",{"type":18,"tag":182,"props":1865,"children":1866},{"style":195},[1867],{"type":23,"value":1868},"superior",{"type":18,"tag":182,"props":1870,"children":1871},{"style":215},[1872],{"type":23,"value":886},{"type":18,"tag":182,"props":1874,"children":1875},{"style":276},[1876],{"type":23,"value":1877},"'move'",{"type":18,"tag":182,"props":1879,"children":1880},{"style":215},[1881],{"type":23,"value":1076},{"type":18,"tag":182,"props":1883,"children":1885},{"class":184,"line":1884},36,[1886],{"type":18,"tag":182,"props":1887,"children":1888},{"emptyLinePlaceholder":229},[1889],{"type":23,"value":232},{"type":18,"tag":182,"props":1891,"children":1893},{"class":184,"line":1892},37,[1894,1898,1902,1906],{"type":18,"tag":182,"props":1895,"children":1896},{"style":215},[1897],{"type":23,"value":1682},{"type":18,"tag":182,"props":1899,"children":1900},{"style":189},[1901],{"type":23,"value":576},{"type":18,"tag":182,"props":1903,"children":1904},{"style":189},[1905],{"type":23,"value":479},{"type":18,"tag":182,"props":1907,"children":1908},{"style":215},[1909],{"type":23,"value":410},{"type":18,"tag":182,"props":1911,"children":1913},{"class":184,"line":1912},38,[1914],{"type":18,"tag":182,"props":1915,"children":1916},{"style":215},[1917],{"type":23,"value":803},{"type":18,"tag":182,"props":1919,"children":1921},{"class":184,"line":1920},39,[1922,1926,1930,1935],{"type":18,"tag":182,"props":1923,"children":1924},{"style":195},[1925],{"type":23,"value":1130},{"type":18,"tag":182,"props":1927,"children":1928},{"style":215},[1929],{"type":23,"value":886},{"type":18,"tag":182,"props":1931,"children":1932},{"style":276},[1933],{"type":23,"value":1934},"'Slithering...'",{"type":18,"tag":182,"props":1936,"children":1937},{"style":215},[1938],{"type":23,"value":1076},{"type":18,"tag":182,"props":1940,"children":1942},{"class":184,"line":1941},40,[1943,1948,1952,1956],{"type":18,"tag":182,"props":1944,"children":1945},{"style":195},[1946],{"type":23,"value":1947}," super_move",{"type":18,"tag":182,"props":1949,"children":1950},{"style":215},[1951],{"type":23,"value":886},{"type":18,"tag":182,"props":1953,"children":1954},{"style":346},[1955],{"type":23,"value":1177},{"type":18,"tag":182,"props":1957,"children":1958},{"style":215},[1959],{"type":23,"value":1076},{"type":18,"tag":182,"props":1961,"children":1963},{"class":184,"line":1962},41,[1964],{"type":18,"tag":182,"props":1965,"children":1966},{"style":215},[1967],{"type":23,"value":833},{"type":18,"tag":182,"props":1969,"children":1971},{"class":184,"line":1970},42,[1972,1976],{"type":18,"tag":182,"props":1973,"children":1974},{"style":189},[1975],{"type":23,"value":720},{"type":18,"tag":182,"props":1977,"children":1978},{"style":215},[1979],{"type":23,"value":1770},{"type":18,"tag":182,"props":1981,"children":1983},{"class":184,"line":1982},43,[1984],{"type":18,"tag":182,"props":1985,"children":1986},{"style":215},[1987],{"type":23,"value":1778},{"type":18,"tag":182,"props":1989,"children":1991},{"class":184,"line":1990},44,[1992],{"type":18,"tag":182,"props":1993,"children":1994},{"emptyLinePlaceholder":229},[1995],{"type":23,"value":232},{"type":18,"tag":182,"props":1997,"children":1999},{"class":184,"line":1998},45,[2000,2004,2008,2012,2016,2021,2026,2030,2035],{"type":18,"tag":182,"props":2001,"children":2002},{"style":369},[2003],{"type":23,"value":372},{"type":18,"tag":182,"props":2005,"children":2006},{"style":189},[2007],{"type":23,"value":377},{"type":18,"tag":182,"props":2009,"children":2010},{"style":189},[2011],{"type":23,"value":382},{"type":18,"tag":182,"props":2013,"children":2014},{"style":195},[2015],{"type":23,"value":300},{"type":18,"tag":182,"props":2017,"children":2018},{"style":215},[2019],{"type":23,"value":2020},"({",{"type":18,"tag":182,"props":2022,"children":2023},{"style":369},[2024],{"type":23,"value":2025},"name",{"type":18,"tag":182,"props":2027,"children":2028},{"style":189},[2029],{"type":23,"value":212},{"type":18,"tag":182,"props":2031,"children":2032},{"style":276},[2033],{"type":23,"value":2034},"'Sammy the Python'",{"type":18,"tag":182,"props":2036,"children":2037},{"style":215},[2038],{"type":23,"value":1592},{"type":18,"tag":182,"props":2040,"children":2042},{"class":184,"line":2041},46,[2043,2047,2051],{"type":18,"tag":182,"props":2044,"children":2045},{"style":215},[2046],{"type":23,"value":400},{"type":18,"tag":182,"props":2048,"children":2049},{"style":346},[2050],{"type":23,"value":405},{"type":18,"tag":182,"props":2052,"children":2053},{"style":215},[2054],{"type":23,"value":410},{"type":18,"tag":19,"props":2056,"children":2057},{},[2058],{"type":23,"value":2059},"The functional style does nothing with prototypes. Inheritance is implemented by creating an object from a base function, similar to a constructor, but without the need for the new operator. Access to super methods is accomplished by extending the built-in Object and Function objects. Notice that any child object wanting access to a super method must create a new function pointing to the super method.",{"type":18,"tag":150,"props":2061,"children":2063},{"id":2062},"which-one",[2064],{"type":23,"value":2065},"Which One?",{"type":18,"tag":19,"props":2067,"children":2068},{},[2069,2071,2078],{"type":23,"value":2070},"So which method is better? Because I'm more familiar with class-based inheritance, I'd rather just use CoffeeScript and ignore the underlying JavaScript implementation altogether. I like the fact that I can look at a CoffeeScript class definition and see on a single line both the name of the \"class\" and the name of the \"class\" it extends. In both JavaScript implementations, I have to search other lines to find the object that my object is extending. I find the use of the ",{"type":18,"tag":428,"props":2072,"children":2073},{},[2074],{"type":18,"tag":432,"props":2075,"children":2076},{},[2077],{"type":23,"value":436},{"type":23,"value":2079}," property a much more elegant solution when it comes to super methods. The functional method for accessing super methods would not scale well if there are a large number of super methods you want to access.",{"type":18,"tag":19,"props":2081,"children":2082},{},[2083],{"type":23,"value":2084},"Even if you decide to work at the CoffeeScript level, it's imperative that you understand the JavaScript it compiles into. Again, read the article referenced above and the generated JavaScript becomes trivial to understand.",{"type":18,"tag":19,"props":2086,"children":2087},{},[2088,2090,2096],{"type":23,"value":2089},"Finally, if you want a much more thorough comparison and richer examples of prototypal vs. functional inheritance styles, this ",{"type":18,"tag":30,"props":2091,"children":2094},{"href":2092,"rel":2093},"http://bolinfest.com/javascript/inheritance.php",[34],[2095],{"type":23,"value":133},{"type":23,"value":2097}," provides both and makes a very strong case for the use of prototypal inheritance.",{"type":18,"tag":2099,"props":2100,"children":2101},"style",{},[2102],{"type":23,"value":2103},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":8,"searchDepth":101,"depth":101,"links":2105},[2106,2107,2108,2109],{"id":152,"depth":101,"text":155},{"id":418,"depth":101,"text":421},{"id":1286,"depth":101,"text":1289},{"id":2062,"depth":101,"text":2065},"content:rbrubaker:2012-07:prototypal-js.md","rbrubaker/2012-07/prototypal-js.md","rbrubaker/2012-07/prototypal-js",{"user":110,"name":111},{"_path":2115,"_dir":2116,"_draft":7,"_partial":7,"_locale":8,"title":2117,"description":2118,"publishDate":2119,"tags":2120,"image":2123,"excerpt":2118,"body":2124,"_type":103,"_id":2188,"_source":105,"_file":2189,"_stem":2190,"_extension":108,"author":2191},"/rbrubaker/2012-06/arduino-thermometer","2012-06","Turn Your Mac into a Thermometer with Arduino","The topic of the Arduino came up around A&L's \"virtual water cooler\" last week. About a year and a half ago, I purchased a SparkFun Inventor's Kit for Arduino. The kit is a fun way for a hardware novice like me to get started and learn some basics. It comes with more than a dozen sample projects such as lighting LEDs, spinning a motor and generating audio.","2012-06-28",[2121,2122],"arduino","java","/rbrubaker/2012-06/img/arduino1.jpg",{"type":15,"children":2125,"toc":2186},[2126,2149,2154,2167,2172],{"type":18,"tag":19,"props":2127,"children":2128},{},[2129,2131,2138,2140,2147],{"type":23,"value":2130},"The topic of the ",{"type":18,"tag":30,"props":2132,"children":2135},{"href":2133,"rel":2134},"http://www.arduino.cc/",[34],[2136],{"type":23,"value":2137},"Arduino",{"type":23,"value":2139}," came up around A&L's \"virtual water cooler\" last week. About a year and a half ago, I purchased a ",{"type":18,"tag":30,"props":2141,"children":2144},{"href":2142,"rel":2143},"http://www.sparkfun.com/products/10173",[34],[2145],{"type":23,"value":2146},"SparkFun Inventor's Kit for Arduino",{"type":23,"value":2148},". The kit is a fun way for a hardware novice like me to get started and learn some basics. It comes with more than a dozen sample projects such as lighting LEDs, spinning a motor and generating audio.",{"type":18,"tag":19,"props":2150,"children":2151},{},[2152],{"type":23,"value":2153},"Inspired by the discussion at A&L, I pulled my kit out this past weekend and put together the sample circuit that reads temperature. In addition to learning hardware, another ulterior motive in my Arduino purchase was to get my son interested in electronics. He's still a little young to really understand everything and instead likes to pretend the breadboard is a train. It makes it a little hard to put the circuit together as the \"circuit train\" travels around the tracks. But he does enjoy seeing the end result and playing with the circuits we make.",{"type":18,"tag":19,"props":2155,"children":2156},{},[2157,2159,2166],{"type":23,"value":2158},"Integrating the Java code and writing a little thermometer widget. All of the resources needed for this project can be found ",{"type":18,"tag":30,"props":2160,"children":2163},{"href":2161,"rel":2162},"https://github.com/rmb177/ArduinoThermometer",[34],[2164],{"type":23,"value":2165},"here",{"type":23,"value":99},{"type":18,"tag":19,"props":2168,"children":2169},{},[2170],{"type":23,"value":2171},"I finished everything up late last evening so my son has yet to see the end result. Something tells me he would be more impressed if I animated steam coming out of a train engine to represent the temperature.",{"type":18,"tag":19,"props":2173,"children":2174},{},[2175,2177,2184],{"type":23,"value":2176},"There was a recent ",{"type":18,"tag":30,"props":2178,"children":2181},{"href":2179,"rel":2180},"http://www.ted.com/talks/massimo_banzi_how_arduino_is_open_sourcing_imagination.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+TEDTalks_video+%28TEDTalks+Main+%28SD%29+-+Site%29",[34],[2182],{"type":23,"value":2183},"TED talk",{"type":23,"value":2185}," by one of the creators of Arduino. It's fascinating to see the types of projects people are completing with the Arduino. I think we're in for a fascinating future.",{"title":8,"searchDepth":101,"depth":101,"links":2187},[],"content:rbrubaker:2012-06:arduino-thermometer.md","rbrubaker/2012-06/arduino-thermometer.md","rbrubaker/2012-06/arduino-thermometer",{"user":110,"name":111},{"_path":2193,"_dir":2116,"_draft":7,"_partial":7,"_locale":8,"title":2194,"description":2195,"publishDate":2196,"tags":2197,"excerpt":2195,"body":2201,"_type":103,"_id":2315,"_source":105,"_file":2316,"_stem":2317,"_extension":108,"author":2318},"/rbrubaker/2012-06/coffee-backbone-3","Fun with CoffeeScript and Backbone.js : Part 3","In this post I’ll discuss my thoughts on CoffeeScript and Backbone.js.","2012-06-08",[2198,118,2199,2200],"backbone-js","html5","series",{"type":15,"children":2202,"toc":2313},[2203,2224,2244,2256,2277,2294,2303,2308],{"type":18,"tag":19,"props":2204,"children":2205},{},[2206,2208,2214,2216,2223],{"type":23,"value":2207},"In this post I’ll discuss my thoughts on ",{"type":18,"tag":30,"props":2209,"children":2211},{"href":163,"rel":2210},[34],[2212],{"type":23,"value":2213},"CoffeeScript",{"type":23,"value":2215}," and ",{"type":18,"tag":30,"props":2217,"children":2220},{"href":2218,"rel":2219},"http://backbonejs.org/",[34],[2221],{"type":23,"value":2222},"Backbone.js",{"type":23,"value":99},{"type":18,"tag":19,"props":2225,"children":2226},{},[2227,2229,2235,2237,2243],{"type":23,"value":2228},"The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available ",{"type":18,"tag":30,"props":2230,"children":2233},{"href":2231,"rel":2232},"https://github.com/rmb177/MorseCode",[34],[2234],{"type":23,"value":2165},{"type":23,"value":2236}," and the running code can be seen ",{"type":18,"tag":30,"props":2238,"children":2241},{"href":2239,"rel":2240},"http://www.ryan-brubaker.com/code/MorseCode",[34],[2242],{"type":23,"value":2165},{"type":23,"value":99},{"type":18,"tag":19,"props":2245,"children":2246},{},[2247,2249,2255],{"type":23,"value":2248},"See the ",{"type":18,"tag":30,"props":2250,"children":2252},{"href":2251},"/search/fun/coffeescript/user:rmb",[2253],{"type":23,"value":2254},"rest of this series",{"type":23,"value":99},{"type":18,"tag":19,"props":2257,"children":2258},{},[2259,2261,2268,2270,2275],{"type":23,"value":2260},"JavaScript has slowly become my favorite programming language as I've done more web development. As you learn its ",{"type":18,"tag":30,"props":2262,"children":2265},{"href":2263,"rel":2264},"http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?ie=UTF8&qid=1339122559&sr=8-1",[34],[2266],{"type":23,"value":2267},"Good Parts",{"type":23,"value":2269},", you start to realize how powerful of a language it is. I'll never forget the ",{"type":18,"tag":428,"props":2271,"children":2272},{},[2273],{"type":23,"value":2274},"Aha",{"type":23,"value":2276},"! moment I had when I wrote my first closure.",{"type":18,"tag":19,"props":2278,"children":2279},{},[2280,2292],{"type":18,"tag":30,"props":2281,"children":2284},{"href":2282,"rel":2283},"https://artandlogic.com/wp-content/uploads/2012/06/coffeescript-logo1.png",[34],[2285],{"type":18,"tag":2286,"props":2287,"children":2291},"img",{"alt":2288,"src":2289,"title":2290},"Coffeescript logo","assets/images/coffeescript-logo1.png","CoffeeScript-logo",[],{"type":23,"value":2293},"CoffeeScript takes a great language and makes it even better. It hides the bad parts of JavaScript and adds the expressiveness of Ruby and Python. The addition of classes shields the developer from JavaScript's prototypal inheritance and is much easier to understand for developers used to class-based inheritance. Admittedly, this was a small demo, but tracking runtime errors in the JavaScript code back to the CoffeeScript code was trivial. I definitely plan to use CoffeeScript as much as possible in future projects.",{"type":18,"tag":19,"props":2295,"children":2296},{},[2297],{"type":18,"tag":2286,"props":2298,"children":2302},{"alt":2299,"src":2300,"title":2301},"Backbone js","assets/images/backbone.png","backbone",[],{"type":18,"tag":19,"props":2304,"children":2305},{},[2306],{"type":23,"value":2307},"This demo only scratched the surface of Backbone.js. Views can be initialized with templates, making complex models easier to render. Backbone.js also provides functionality to automatically synch your objects to/from a server, provides support for collections and also provides routing functionality to ensure the back button works in single-page applications. I'm very interested in learning more about Backbone.js and using it to reduce the amount of front-end code I need to write.",{"type":18,"tag":19,"props":2309,"children":2310},{},[2311],{"type":23,"value":2312},"In general, I think the combination of CoffeeScript and Backbone.js results in a much cleaner application. View code is segregated from the model code and developers are forced into keeping things more modular. This style would also make unit testing easier. I'm anxious to continue experimenting with both of these technologies to see how they boost my productivity and allow me to develop larger web-apps in a more controlled manner.",{"title":8,"searchDepth":101,"depth":101,"links":2314},[],"content:rbrubaker:2012-06:coffee-backbone-3.md","rbrubaker/2012-06/coffee-backbone-3.md","rbrubaker/2012-06/coffee-backbone-3",{"user":110,"name":111},{"_path":2320,"_dir":2116,"_draft":7,"_partial":7,"_locale":8,"title":2321,"description":2322,"publishDate":2323,"tags":2324,"excerpt":2322,"body":2325,"_type":103,"_id":3887,"_source":105,"_file":3888,"_stem":3889,"_extension":108,"author":3890},"/rbrubaker/2012-06/coffee-backbone-2","Fun with CoffeeScript and Backbone.js : Part 2","In this post I’ll discuss the code that handles updating the UI.","2012-06-07",[2198,118,2199,2200],{"type":15,"children":2326,"toc":3885},[2327,2331,2340,2356,2367,2534,2555,2566,3114,3133,3144,3870,3881],{"type":18,"tag":19,"props":2328,"children":2329},{},[2330],{"type":23,"value":2322},{"type":18,"tag":19,"props":2332,"children":2333},{},[2334,2335,2339],{"type":23,"value":2248},{"type":18,"tag":30,"props":2336,"children":2337},{"href":2251},[2338],{"type":23,"value":2254},{"type":23,"value":99},{"type":18,"tag":19,"props":2341,"children":2342},{},[2343,2344,2349,2350,2355],{"type":23,"value":2228},{"type":18,"tag":30,"props":2345,"children":2347},{"href":2231,"rel":2346},[34],[2348],{"type":23,"value":2165},{"type":23,"value":2236},{"type":18,"tag":30,"props":2351,"children":2353},{"href":2239,"rel":2352},[34],[2354],{"type":23,"value":2165},{"type":23,"value":99},{"type":18,"tag":19,"props":2357,"children":2358},{},[2359],{"type":18,"tag":432,"props":2360,"children":2361},{},[2362],{"type":18,"tag":428,"props":2363,"children":2364},{},[2365],{"type":23,"value":2366},"Communication Line View",{"type":18,"tag":171,"props":2368,"children":2370},{"className":173,"code":2369,"language":175,"meta":8,"style":8},"class DecoderView extends Backbone.View\n initialize: ->\n @model.bind('parsedCharacter', @render)\n\n render: (token) =>\n messageBox = $('#messageBox')\n messageBox.val(messageBox.val() + token)\n",[2371],{"type":18,"tag":178,"props":2372,"children":2373},{"__ignoreMap":8},[2374,2395,2411,2438,2445,2467,2498],{"type":18,"tag":182,"props":2375,"children":2376},{"class":184,"line":185},[2377,2381,2386,2390],{"type":18,"tag":182,"props":2378,"children":2379},{"style":189},[2380],{"type":23,"value":192},{"type":18,"tag":182,"props":2382,"children":2383},{"style":195},[2384],{"type":23,"value":2385}," DecoderView",{"type":18,"tag":182,"props":2387,"children":2388},{"style":189},[2389],{"type":23,"value":305},{"type":18,"tag":182,"props":2391,"children":2392},{"style":195},[2393],{"type":23,"value":2394}," Backbone.View\n",{"type":18,"tag":182,"props":2396,"children":2397},{"class":184,"line":201},[2398,2403,2407],{"type":18,"tag":182,"props":2399,"children":2400},{"style":195},[2401],{"type":23,"value":2402}," initialize",{"type":18,"tag":182,"props":2404,"children":2405},{"style":189},[2406],{"type":23,"value":212},{"type":18,"tag":182,"props":2408,"children":2409},{"style":189},[2410],{"type":23,"value":326},{"type":18,"tag":182,"props":2412,"children":2413},{"class":184,"line":101},[2414,2419,2424,2428,2433],{"type":18,"tag":182,"props":2415,"children":2416},{"style":215},[2417],{"type":23,"value":2418}," @model.",{"type":18,"tag":182,"props":2420,"children":2421},{"style":195},[2422],{"type":23,"value":2423},"bind",{"type":18,"tag":182,"props":2425,"children":2426},{"style":215},[2427],{"type":23,"value":886},{"type":18,"tag":182,"props":2429,"children":2430},{"style":276},[2431],{"type":23,"value":2432},"'parsedCharacter'",{"type":18,"tag":182,"props":2434,"children":2435},{"style":215},[2436],{"type":23,"value":2437},", @render)\n",{"type":18,"tag":182,"props":2439,"children":2440},{"class":184,"line":235},[2441],{"type":18,"tag":182,"props":2442,"children":2443},{"emptyLinePlaceholder":229},[2444],{"type":23,"value":232},{"type":18,"tag":182,"props":2446,"children":2447},{"class":184,"line":257},[2448,2453,2457,2462],{"type":18,"tag":182,"props":2449,"children":2450},{"style":195},[2451],{"type":23,"value":2452}," render",{"type":18,"tag":182,"props":2454,"children":2455},{"style":189},[2456],{"type":23,"value":212},{"type":18,"tag":182,"props":2458,"children":2459},{"style":215},[2460],{"type":23,"value":2461}," (token) ",{"type":18,"tag":182,"props":2463,"children":2464},{"style":189},[2465],{"type":23,"value":2466},"=>\n",{"type":18,"tag":182,"props":2468,"children":2469},{"class":184,"line":282},[2470,2475,2479,2484,2488,2493],{"type":18,"tag":182,"props":2471,"children":2472},{"style":369},[2473],{"type":23,"value":2474}," messageBox",{"type":18,"tag":182,"props":2476,"children":2477},{"style":189},[2478],{"type":23,"value":377},{"type":18,"tag":182,"props":2480,"children":2481},{"style":195},[2482],{"type":23,"value":2483}," $",{"type":18,"tag":182,"props":2485,"children":2486},{"style":215},[2487],{"type":23,"value":886},{"type":18,"tag":182,"props":2489,"children":2490},{"style":276},[2491],{"type":23,"value":2492},"'#messageBox'",{"type":18,"tag":182,"props":2494,"children":2495},{"style":215},[2496],{"type":23,"value":2497},")\n",{"type":18,"tag":182,"props":2499,"children":2500},{"class":184,"line":290},[2501,2506,2511,2516,2520,2525,2529],{"type":18,"tag":182,"props":2502,"children":2503},{"style":215},[2504],{"type":23,"value":2505}," messageBox.",{"type":18,"tag":182,"props":2507,"children":2508},{"style":195},[2509],{"type":23,"value":2510},"val",{"type":18,"tag":182,"props":2512,"children":2513},{"style":215},[2514],{"type":23,"value":2515},"(messageBox.",{"type":18,"tag":182,"props":2517,"children":2518},{"style":195},[2519],{"type":23,"value":2510},{"type":18,"tag":182,"props":2521,"children":2522},{"style":215},[2523],{"type":23,"value":2524},"() ",{"type":18,"tag":182,"props":2526,"children":2527},{"style":189},[2528],{"type":23,"value":273},{"type":18,"tag":182,"props":2530,"children":2531},{"style":215},[2532],{"type":23,"value":2533}," token)\n",{"type":18,"tag":19,"props":2535,"children":2536},{},[2537,2539,2546,2548,2553],{"type":23,"value":2538},"The CommunicationLineView class is a Backbone.js view class that handles the animation of signals sent across the communication line. In ",{"type":18,"tag":30,"props":2540,"children":2543},{"href":2541,"rel":2542},"http://blog.artlogic.com/2012/06/06/fun-with-coffeescript-and-backbone-js-part-1/",[34],[2544],{"type":23,"value":2545},"Part 1",{"type":23,"value":2547},", I mentioned that the model representing the communication line fires a ",{"type":18,"tag":428,"props":2549,"children":2550},{},[2551],{"type":23,"value":2552},"hasNewData",{"type":23,"value":2554}," event each time the tokens progress one step through the line. As you can see above, this view is bound to that event and rerenders itself every time it receives the event. The render method iterates over the current tokens and draws the appropriate token shape for each line position.",{"type":18,"tag":19,"props":2556,"children":2557},{},[2558],{"type":18,"tag":428,"props":2559,"children":2560},{},[2561],{"type":18,"tag":432,"props":2562,"children":2563},{},[2564],{"type":23,"value":2565},"Decoder Model",{"type":18,"tag":171,"props":2567,"children":2569},{"className":173,"code":2568,"language":175,"meta":8,"style":8},"class MorseDecoder extends Backbone.Model\n\n initializeKey: =>\n \"\"\"\n Omitting code that initializes the morse code key \n dictionary.\n \"\"\"\n\n initialize: =>\n @inputTokens = []\n @numEmptyTokensInARow = 0\n @initializeKey()\n\n processToken: (token) =>\n if token == ''\n @parseTokens() if \n ++@numEmptyTokensInARow >= 10\n else if token == kWordStopToken\n @parseTokens() if @inputTokens.length > 0\n @trigger('parsedCharacter', ' ')\n else\n @inputTokens.push(token)\n @numEmptyTokensInARow = 0\n\n parseTokens: =>\n if @inputTokens.length > 0\n token = @key[@inputTokens.join('')]\n @trigger('parsedCharacter', token) if \n token != undefined\n @numEmptyTokensInARow = 0\n @inputTokens.length = 0\n",[2570],{"type":18,"tag":178,"props":2571,"children":2572},{"__ignoreMap":8},[2573,2594,2601,2618,2626,2634,2642,2649,2656,2671,2688,2705,2722,2729,2749,2771,2798,2821,2847,2880,2913,2921,2939,2955,2962,2978,2997,3033,3065,3083,3098],{"type":18,"tag":182,"props":2574,"children":2575},{"class":184,"line":185},[2576,2580,2585,2589],{"type":18,"tag":182,"props":2577,"children":2578},{"style":189},[2579],{"type":23,"value":192},{"type":18,"tag":182,"props":2581,"children":2582},{"style":195},[2583],{"type":23,"value":2584}," MorseDecoder",{"type":18,"tag":182,"props":2586,"children":2587},{"style":189},[2588],{"type":23,"value":305},{"type":18,"tag":182,"props":2590,"children":2591},{"style":195},[2592],{"type":23,"value":2593}," Backbone.Model\n",{"type":18,"tag":182,"props":2595,"children":2596},{"class":184,"line":201},[2597],{"type":18,"tag":182,"props":2598,"children":2599},{"emptyLinePlaceholder":229},[2600],{"type":23,"value":232},{"type":18,"tag":182,"props":2602,"children":2603},{"class":184,"line":101},[2604,2609,2613],{"type":18,"tag":182,"props":2605,"children":2606},{"style":195},[2607],{"type":23,"value":2608}," initializeKey",{"type":18,"tag":182,"props":2610,"children":2611},{"style":189},[2612],{"type":23,"value":212},{"type":18,"tag":182,"props":2614,"children":2615},{"style":189},[2616],{"type":23,"value":2617}," =>\n",{"type":18,"tag":182,"props":2619,"children":2620},{"class":184,"line":235},[2621],{"type":18,"tag":182,"props":2622,"children":2623},{"style":276},[2624],{"type":23,"value":2625}," \"\"\"\n",{"type":18,"tag":182,"props":2627,"children":2628},{"class":184,"line":257},[2629],{"type":18,"tag":182,"props":2630,"children":2631},{"style":276},[2632],{"type":23,"value":2633}," Omitting code that initializes the morse code key \n",{"type":18,"tag":182,"props":2635,"children":2636},{"class":184,"line":282},[2637],{"type":18,"tag":182,"props":2638,"children":2639},{"style":276},[2640],{"type":23,"value":2641}," dictionary.\n",{"type":18,"tag":182,"props":2643,"children":2644},{"class":184,"line":290},[2645],{"type":18,"tag":182,"props":2646,"children":2647},{"style":276},[2648],{"type":23,"value":2625},{"type":18,"tag":182,"props":2650,"children":2651},{"class":184,"line":312},[2652],{"type":18,"tag":182,"props":2653,"children":2654},{"emptyLinePlaceholder":229},[2655],{"type":23,"value":232},{"type":18,"tag":182,"props":2657,"children":2658},{"class":184,"line":329},[2659,2663,2667],{"type":18,"tag":182,"props":2660,"children":2661},{"style":195},[2662],{"type":23,"value":2402},{"type":18,"tag":182,"props":2664,"children":2665},{"style":189},[2666],{"type":23,"value":212},{"type":18,"tag":182,"props":2668,"children":2669},{"style":189},[2670],{"type":23,"value":2617},{"type":18,"tag":182,"props":2672,"children":2673},{"class":184,"line":342},[2674,2679,2683],{"type":18,"tag":182,"props":2675,"children":2676},{"style":215},[2677],{"type":23,"value":2678}," @inputTokens ",{"type":18,"tag":182,"props":2680,"children":2681},{"style":189},[2682],{"type":23,"value":576},{"type":18,"tag":182,"props":2684,"children":2685},{"style":215},[2686],{"type":23,"value":2687}," []\n",{"type":18,"tag":182,"props":2689,"children":2690},{"class":184,"line":357},[2691,2696,2700],{"type":18,"tag":182,"props":2692,"children":2693},{"style":215},[2694],{"type":23,"value":2695}," @numEmptyTokensInARow ",{"type":18,"tag":182,"props":2697,"children":2698},{"style":189},[2699],{"type":23,"value":576},{"type":18,"tag":182,"props":2701,"children":2702},{"style":346},[2703],{"type":23,"value":2704}," 0\n",{"type":18,"tag":182,"props":2706,"children":2707},{"class":184,"line":365},[2708,2713,2718],{"type":18,"tag":182,"props":2709,"children":2710},{"style":215},[2711],{"type":23,"value":2712}," @",{"type":18,"tag":182,"props":2714,"children":2715},{"style":195},[2716],{"type":23,"value":2717},"initializeKey",{"type":18,"tag":182,"props":2719,"children":2720},{"style":215},[2721],{"type":23,"value":410},{"type":18,"tag":182,"props":2723,"children":2724},{"class":184,"line":394},[2725],{"type":18,"tag":182,"props":2726,"children":2727},{"emptyLinePlaceholder":229},[2728],{"type":23,"value":232},{"type":18,"tag":182,"props":2730,"children":2731},{"class":184,"line":653},[2732,2737,2741,2745],{"type":18,"tag":182,"props":2733,"children":2734},{"style":195},[2735],{"type":23,"value":2736}," processToken",{"type":18,"tag":182,"props":2738,"children":2739},{"style":189},[2740],{"type":23,"value":212},{"type":18,"tag":182,"props":2742,"children":2743},{"style":215},[2744],{"type":23,"value":2461},{"type":18,"tag":182,"props":2746,"children":2747},{"style":189},[2748],{"type":23,"value":2466},{"type":18,"tag":182,"props":2750,"children":2751},{"class":184,"line":671},[2752,2756,2761,2766],{"type":18,"tag":182,"props":2753,"children":2754},{"style":189},[2755],{"type":23,"value":541},{"type":18,"tag":182,"props":2757,"children":2758},{"style":215},[2759],{"type":23,"value":2760}," token ",{"type":18,"tag":182,"props":2762,"children":2763},{"style":189},[2764],{"type":23,"value":2765},"==",{"type":18,"tag":182,"props":2767,"children":2768},{"style":276},[2769],{"type":23,"value":2770}," ''\n",{"type":18,"tag":182,"props":2772,"children":2773},{"class":184,"line":697},[2774,2779,2784,2788,2793],{"type":18,"tag":182,"props":2775,"children":2776},{"style":215},[2777],{"type":23,"value":2778}," @",{"type":18,"tag":182,"props":2780,"children":2781},{"style":195},[2782],{"type":23,"value":2783},"parseTokens",{"type":18,"tag":182,"props":2785,"children":2786},{"style":215},[2787],{"type":23,"value":2524},{"type":18,"tag":182,"props":2789,"children":2790},{"style":189},[2791],{"type":23,"value":2792},"if",{"type":18,"tag":182,"props":2794,"children":2795},{"style":215},[2796],{"type":23,"value":2797}," \n",{"type":18,"tag":182,"props":2799,"children":2800},{"class":184,"line":714},[2801,2806,2811,2816],{"type":18,"tag":182,"props":2802,"children":2803},{"style":189},[2804],{"type":23,"value":2805}," ++",{"type":18,"tag":182,"props":2807,"children":2808},{"style":215},[2809],{"type":23,"value":2810},"@numEmptyTokensInARow ",{"type":18,"tag":182,"props":2812,"children":2813},{"style":189},[2814],{"type":23,"value":2815},">=",{"type":18,"tag":182,"props":2817,"children":2818},{"style":346},[2819],{"type":23,"value":2820}," 10\n",{"type":18,"tag":182,"props":2822,"children":2823},{"class":184,"line":727},[2824,2829,2834,2838,2842],{"type":18,"tag":182,"props":2825,"children":2826},{"style":189},[2827],{"type":23,"value":2828}," else",{"type":18,"tag":182,"props":2830,"children":2831},{"style":189},[2832],{"type":23,"value":2833}," if",{"type":18,"tag":182,"props":2835,"children":2836},{"style":215},[2837],{"type":23,"value":2760},{"type":18,"tag":182,"props":2839,"children":2840},{"style":189},[2841],{"type":23,"value":2765},{"type":18,"tag":182,"props":2843,"children":2844},{"style":215},[2845],{"type":23,"value":2846}," kWordStopToken\n",{"type":18,"tag":182,"props":2848,"children":2849},{"class":184,"line":1030},[2850,2854,2858,2862,2866,2871,2876],{"type":18,"tag":182,"props":2851,"children":2852},{"style":215},[2853],{"type":23,"value":2778},{"type":18,"tag":182,"props":2855,"children":2856},{"style":195},[2857],{"type":23,"value":2783},{"type":18,"tag":182,"props":2859,"children":2860},{"style":215},[2861],{"type":23,"value":2524},{"type":18,"tag":182,"props":2863,"children":2864},{"style":189},[2865],{"type":23,"value":2792},{"type":18,"tag":182,"props":2867,"children":2868},{"style":215},[2869],{"type":23,"value":2870}," @inputTokens.length ",{"type":18,"tag":182,"props":2872,"children":2873},{"style":189},[2874],{"type":23,"value":2875},">",{"type":18,"tag":182,"props":2877,"children":2878},{"style":346},[2879],{"type":23,"value":2704},{"type":18,"tag":182,"props":2881,"children":2882},{"class":184,"line":1038},[2883,2887,2892,2896,2900,2904,2909],{"type":18,"tag":182,"props":2884,"children":2885},{"style":215},[2886],{"type":23,"value":2778},{"type":18,"tag":182,"props":2888,"children":2889},{"style":195},[2890],{"type":23,"value":2891},"trigger",{"type":18,"tag":182,"props":2893,"children":2894},{"style":215},[2895],{"type":23,"value":886},{"type":18,"tag":182,"props":2897,"children":2898},{"style":276},[2899],{"type":23,"value":2432},{"type":18,"tag":182,"props":2901,"children":2902},{"style":215},[2903],{"type":23,"value":1066},{"type":18,"tag":182,"props":2905,"children":2906},{"style":276},[2907],{"type":23,"value":2908},"' '",{"type":18,"tag":182,"props":2910,"children":2911},{"style":215},[2912],{"type":23,"value":2497},{"type":18,"tag":182,"props":2914,"children":2915},{"class":184,"line":1079},[2916],{"type":18,"tag":182,"props":2917,"children":2918},{"style":189},[2919],{"type":23,"value":2920}," else\n",{"type":18,"tag":182,"props":2922,"children":2923},{"class":184,"line":1087},[2924,2929,2934],{"type":18,"tag":182,"props":2925,"children":2926},{"style":215},[2927],{"type":23,"value":2928}," @inputTokens.",{"type":18,"tag":182,"props":2930,"children":2931},{"style":346},[2932],{"type":23,"value":2933},"push",{"type":18,"tag":182,"props":2935,"children":2936},{"style":215},[2937],{"type":23,"value":2938},"(token)\n",{"type":18,"tag":182,"props":2940,"children":2941},{"class":184,"line":1095},[2942,2947,2951],{"type":18,"tag":182,"props":2943,"children":2944},{"style":215},[2945],{"type":23,"value":2946}," @numEmptyTokensInARow ",{"type":18,"tag":182,"props":2948,"children":2949},{"style":189},[2950],{"type":23,"value":576},{"type":18,"tag":182,"props":2952,"children":2953},{"style":346},[2954],{"type":23,"value":2704},{"type":18,"tag":182,"props":2956,"children":2957},{"class":184,"line":1116},[2958],{"type":18,"tag":182,"props":2959,"children":2960},{"emptyLinePlaceholder":229},[2961],{"type":23,"value":232},{"type":18,"tag":182,"props":2963,"children":2964},{"class":184,"line":1124},[2965,2970,2974],{"type":18,"tag":182,"props":2966,"children":2967},{"style":195},[2968],{"type":23,"value":2969}," parseTokens",{"type":18,"tag":182,"props":2971,"children":2972},{"style":189},[2973],{"type":23,"value":212},{"type":18,"tag":182,"props":2975,"children":2976},{"style":189},[2977],{"type":23,"value":2617},{"type":18,"tag":182,"props":2979,"children":2980},{"class":184,"line":1146},[2981,2985,2989,2993],{"type":18,"tag":182,"props":2982,"children":2983},{"style":189},[2984],{"type":23,"value":541},{"type":18,"tag":182,"props":2986,"children":2987},{"style":215},[2988],{"type":23,"value":2870},{"type":18,"tag":182,"props":2990,"children":2991},{"style":189},[2992],{"type":23,"value":2875},{"type":18,"tag":182,"props":2994,"children":2995},{"style":346},[2996],{"type":23,"value":2704},{"type":18,"tag":182,"props":2998,"children":2999},{"class":184,"line":1184},[3000,3005,3009,3014,3019,3023,3028],{"type":18,"tag":182,"props":3001,"children":3002},{"style":369},[3003],{"type":23,"value":3004}," token",{"type":18,"tag":182,"props":3006,"children":3007},{"style":189},[3008],{"type":23,"value":377},{"type":18,"tag":182,"props":3010,"children":3011},{"style":215},[3012],{"type":23,"value":3013}," @key[@inputTokens.",{"type":18,"tag":182,"props":3015,"children":3016},{"style":346},[3017],{"type":23,"value":3018},"join",{"type":18,"tag":182,"props":3020,"children":3021},{"style":215},[3022],{"type":23,"value":886},{"type":18,"tag":182,"props":3024,"children":3025},{"style":276},[3026],{"type":23,"value":3027},"''",{"type":18,"tag":182,"props":3029,"children":3030},{"style":215},[3031],{"type":23,"value":3032},")]\n",{"type":18,"tag":182,"props":3034,"children":3035},{"class":184,"line":1192},[3036,3040,3044,3048,3052,3057,3061],{"type":18,"tag":182,"props":3037,"children":3038},{"style":215},[3039],{"type":23,"value":2778},{"type":18,"tag":182,"props":3041,"children":3042},{"style":195},[3043],{"type":23,"value":2891},{"type":18,"tag":182,"props":3045,"children":3046},{"style":215},[3047],{"type":23,"value":886},{"type":18,"tag":182,"props":3049,"children":3050},{"style":276},[3051],{"type":23,"value":2432},{"type":18,"tag":182,"props":3053,"children":3054},{"style":215},[3055],{"type":23,"value":3056},", token) ",{"type":18,"tag":182,"props":3058,"children":3059},{"style":189},[3060],{"type":23,"value":2792},{"type":18,"tag":182,"props":3062,"children":3063},{"style":215},[3064],{"type":23,"value":2797},{"type":18,"tag":182,"props":3066,"children":3067},{"class":184,"line":1205},[3068,3073,3078],{"type":18,"tag":182,"props":3069,"children":3070},{"style":215},[3071],{"type":23,"value":3072}," token ",{"type":18,"tag":182,"props":3074,"children":3075},{"style":189},[3076],{"type":23,"value":3077},"!=",{"type":18,"tag":182,"props":3079,"children":3080},{"style":346},[3081],{"type":23,"value":3082}," undefined\n",{"type":18,"tag":182,"props":3084,"children":3085},{"class":184,"line":1214},[3086,3090,3094],{"type":18,"tag":182,"props":3087,"children":3088},{"style":215},[3089],{"type":23,"value":2695},{"type":18,"tag":182,"props":3091,"children":3092},{"style":189},[3093],{"type":23,"value":576},{"type":18,"tag":182,"props":3095,"children":3096},{"style":346},[3097],{"type":23,"value":2704},{"type":18,"tag":182,"props":3099,"children":3100},{"class":184,"line":1222},[3101,3106,3110],{"type":18,"tag":182,"props":3102,"children":3103},{"style":215},[3104],{"type":23,"value":3105}," @inputTokens.length ",{"type":18,"tag":182,"props":3107,"children":3108},{"style":189},[3109],{"type":23,"value":576},{"type":18,"tag":182,"props":3111,"children":3112},{"style":346},[3113],{"type":23,"value":2704},{"type":18,"tag":19,"props":3115,"children":3116},{},[3117,3119,3124,3126,3131],{"type":23,"value":3118},"The Decoder model is responsible for determining what characters the user has sent across the line. The ",{"type":18,"tag":428,"props":3120,"children":3121},{},[3122],{"type":23,"value":3123},"processToken",{"type":23,"value":3125}," function is called each time the tokens on the communication line progress one step through the line. The decoder processes the current tokens sent by the user anytime it sees 10 or more empty tokens in a row or receives a word-break token. If the decoder parses a known morse code sequence it fires a ",{"type":18,"tag":428,"props":3127,"children":3128},{},[3129],{"type":23,"value":3130},"parsedCharacter",{"type":23,"value":3132}," event letting the message field know it needs to rerender itself.",{"type":18,"tag":19,"props":3134,"children":3135},{},[3136],{"type":18,"tag":428,"props":3137,"children":3138},{},[3139],{"type":18,"tag":432,"props":3140,"children":3141},{},[3142],{"type":23,"value":3143},"Decoder View",{"type":18,"tag":171,"props":3145,"children":3147},{"className":173,"code":3146,"language":175,"meta":8,"style":8},"class CommunicationLineView extends Backbone.View\n initialize: ->\n @model.bind('hasNewData', @render)\n\n render: (tokens) =>\n context = document.getElementById(\n \"communicationLineCanvas\").getContext('2d')\n\n context.clearRect(0, 0, context.canvas.width, 29)\n tokenNum = 0\n for token in tokens\n do (token) ->\n if kDotToken == token\n context.beginPath()\n context.moveTo((50 * tokenNum) + 15, 15)\n\n context.arc((50 * tokenNum) + 15, 15, 10, \n 0, Math.PI*2, false)\n\n context.closePath()\n context.fill()\n context.stroke()\n else if kDashToken == token\n context.fillRect((50 * tokenNum) + 15, \n 15, 25, 10)\n else if kWordStopToken == token\n context.fillRect((50 * tokenNum) + 30, \n 5, 10, 20)\n tokenNum += 1\n",[3148],{"type":18,"tag":178,"props":3149,"children":3150},{"__ignoreMap":8},[3151,3171,3186,3210,3217,3237,3268,3299,3306,3350,3366,3387,3403,3425,3442,3496,3503,3561,3610,3617,3633,3649,3665,3690,3730,3759,3783,3823,3852],{"type":18,"tag":182,"props":3152,"children":3153},{"class":184,"line":185},[3154,3158,3163,3167],{"type":18,"tag":182,"props":3155,"children":3156},{"style":189},[3157],{"type":23,"value":192},{"type":18,"tag":182,"props":3159,"children":3160},{"style":195},[3161],{"type":23,"value":3162}," CommunicationLineView",{"type":18,"tag":182,"props":3164,"children":3165},{"style":189},[3166],{"type":23,"value":305},{"type":18,"tag":182,"props":3168,"children":3169},{"style":195},[3170],{"type":23,"value":2394},{"type":18,"tag":182,"props":3172,"children":3173},{"class":184,"line":201},[3174,3178,3182],{"type":18,"tag":182,"props":3175,"children":3176},{"style":195},[3177],{"type":23,"value":2402},{"type":18,"tag":182,"props":3179,"children":3180},{"style":189},[3181],{"type":23,"value":212},{"type":18,"tag":182,"props":3183,"children":3184},{"style":189},[3185],{"type":23,"value":326},{"type":18,"tag":182,"props":3187,"children":3188},{"class":184,"line":101},[3189,3193,3197,3201,3206],{"type":18,"tag":182,"props":3190,"children":3191},{"style":215},[3192],{"type":23,"value":2418},{"type":18,"tag":182,"props":3194,"children":3195},{"style":195},[3196],{"type":23,"value":2423},{"type":18,"tag":182,"props":3198,"children":3199},{"style":215},[3200],{"type":23,"value":886},{"type":18,"tag":182,"props":3202,"children":3203},{"style":276},[3204],{"type":23,"value":3205},"'hasNewData'",{"type":18,"tag":182,"props":3207,"children":3208},{"style":215},[3209],{"type":23,"value":2437},{"type":18,"tag":182,"props":3211,"children":3212},{"class":184,"line":235},[3213],{"type":18,"tag":182,"props":3214,"children":3215},{"emptyLinePlaceholder":229},[3216],{"type":23,"value":232},{"type":18,"tag":182,"props":3218,"children":3219},{"class":184,"line":257},[3220,3224,3228,3233],{"type":18,"tag":182,"props":3221,"children":3222},{"style":195},[3223],{"type":23,"value":2452},{"type":18,"tag":182,"props":3225,"children":3226},{"style":189},[3227],{"type":23,"value":212},{"type":18,"tag":182,"props":3229,"children":3230},{"style":215},[3231],{"type":23,"value":3232}," (tokens) ",{"type":18,"tag":182,"props":3234,"children":3235},{"style":189},[3236],{"type":23,"value":2466},{"type":18,"tag":182,"props":3238,"children":3239},{"class":184,"line":282},[3240,3245,3249,3254,3258,3263],{"type":18,"tag":182,"props":3241,"children":3242},{"style":369},[3243],{"type":23,"value":3244}," context",{"type":18,"tag":182,"props":3246,"children":3247},{"style":189},[3248],{"type":23,"value":377},{"type":18,"tag":182,"props":3250,"children":3251},{"style":346},[3252],{"type":23,"value":3253}," document",{"type":18,"tag":182,"props":3255,"children":3256},{"style":215},[3257],{"type":23,"value":99},{"type":18,"tag":182,"props":3259,"children":3260},{"style":346},[3261],{"type":23,"value":3262},"getElementById",{"type":18,"tag":182,"props":3264,"children":3265},{"style":215},[3266],{"type":23,"value":3267},"(\n",{"type":18,"tag":182,"props":3269,"children":3270},{"class":184,"line":290},[3271,3276,3281,3286,3290,3295],{"type":18,"tag":182,"props":3272,"children":3273},{"style":276},[3274],{"type":23,"value":3275}," \"communicationLineCanvas\"",{"type":18,"tag":182,"props":3277,"children":3278},{"style":215},[3279],{"type":23,"value":3280},").",{"type":18,"tag":182,"props":3282,"children":3283},{"style":346},[3284],{"type":23,"value":3285},"getContext",{"type":18,"tag":182,"props":3287,"children":3288},{"style":215},[3289],{"type":23,"value":886},{"type":18,"tag":182,"props":3291,"children":3292},{"style":276},[3293],{"type":23,"value":3294},"'2d'",{"type":18,"tag":182,"props":3296,"children":3297},{"style":215},[3298],{"type":23,"value":2497},{"type":18,"tag":182,"props":3300,"children":3301},{"class":184,"line":312},[3302],{"type":18,"tag":182,"props":3303,"children":3304},{"emptyLinePlaceholder":229},[3305],{"type":23,"value":232},{"type":18,"tag":182,"props":3307,"children":3308},{"class":184,"line":329},[3309,3314,3319,3323,3328,3332,3336,3341,3346],{"type":18,"tag":182,"props":3310,"children":3311},{"style":215},[3312],{"type":23,"value":3313}," context.",{"type":18,"tag":182,"props":3315,"children":3316},{"style":195},[3317],{"type":23,"value":3318},"clearRect",{"type":18,"tag":182,"props":3320,"children":3321},{"style":215},[3322],{"type":23,"value":886},{"type":18,"tag":182,"props":3324,"children":3325},{"style":346},[3326],{"type":23,"value":3327},"0",{"type":18,"tag":182,"props":3329,"children":3330},{"style":215},[3331],{"type":23,"value":1066},{"type":18,"tag":182,"props":3333,"children":3334},{"style":346},[3335],{"type":23,"value":3327},{"type":18,"tag":182,"props":3337,"children":3338},{"style":215},[3339],{"type":23,"value":3340},", context.canvas.width, ",{"type":18,"tag":182,"props":3342,"children":3343},{"style":346},[3344],{"type":23,"value":3345},"29",{"type":18,"tag":182,"props":3347,"children":3348},{"style":215},[3349],{"type":23,"value":2497},{"type":18,"tag":182,"props":3351,"children":3352},{"class":184,"line":342},[3353,3358,3362],{"type":18,"tag":182,"props":3354,"children":3355},{"style":369},[3356],{"type":23,"value":3357}," tokenNum",{"type":18,"tag":182,"props":3359,"children":3360},{"style":189},[3361],{"type":23,"value":377},{"type":18,"tag":182,"props":3363,"children":3364},{"style":346},[3365],{"type":23,"value":2704},{"type":18,"tag":182,"props":3367,"children":3368},{"class":184,"line":357},[3369,3374,3378,3382],{"type":18,"tag":182,"props":3370,"children":3371},{"style":189},[3372],{"type":23,"value":3373}," for",{"type":18,"tag":182,"props":3375,"children":3376},{"style":215},[3377],{"type":23,"value":2760},{"type":18,"tag":182,"props":3379,"children":3380},{"style":189},[3381],{"type":23,"value":520},{"type":18,"tag":182,"props":3383,"children":3384},{"style":215},[3385],{"type":23,"value":3386}," tokens\n",{"type":18,"tag":182,"props":3388,"children":3389},{"class":184,"line":365},[3390,3395,3399],{"type":18,"tag":182,"props":3391,"children":3392},{"style":189},[3393],{"type":23,"value":3394}," do",{"type":18,"tag":182,"props":3396,"children":3397},{"style":215},[3398],{"type":23,"value":2461},{"type":18,"tag":182,"props":3400,"children":3401},{"style":189},[3402],{"type":23,"value":223},{"type":18,"tag":182,"props":3404,"children":3405},{"class":184,"line":394},[3406,3411,3416,3420],{"type":18,"tag":182,"props":3407,"children":3408},{"style":189},[3409],{"type":23,"value":3410}," if",{"type":18,"tag":182,"props":3412,"children":3413},{"style":215},[3414],{"type":23,"value":3415}," kDotToken ",{"type":18,"tag":182,"props":3417,"children":3418},{"style":189},[3419],{"type":23,"value":2765},{"type":18,"tag":182,"props":3421,"children":3422},{"style":215},[3423],{"type":23,"value":3424}," token\n",{"type":18,"tag":182,"props":3426,"children":3427},{"class":184,"line":653},[3428,3433,3438],{"type":18,"tag":182,"props":3429,"children":3430},{"style":215},[3431],{"type":23,"value":3432}," context.",{"type":18,"tag":182,"props":3434,"children":3435},{"style":195},[3436],{"type":23,"value":3437},"beginPath",{"type":18,"tag":182,"props":3439,"children":3440},{"style":215},[3441],{"type":23,"value":410},{"type":18,"tag":182,"props":3443,"children":3444},{"class":184,"line":671},[3445,3449,3454,3459,3464,3469,3474,3478,3483,3487,3492],{"type":18,"tag":182,"props":3446,"children":3447},{"style":215},[3448],{"type":23,"value":3432},{"type":18,"tag":182,"props":3450,"children":3451},{"style":346},[3452],{"type":23,"value":3453},"moveTo",{"type":18,"tag":182,"props":3455,"children":3456},{"style":215},[3457],{"type":23,"value":3458},"((",{"type":18,"tag":182,"props":3460,"children":3461},{"style":346},[3462],{"type":23,"value":3463},"50",{"type":18,"tag":182,"props":3465,"children":3466},{"style":189},[3467],{"type":23,"value":3468}," *",{"type":18,"tag":182,"props":3470,"children":3471},{"style":215},[3472],{"type":23,"value":3473}," tokenNum) ",{"type":18,"tag":182,"props":3475,"children":3476},{"style":189},[3477],{"type":23,"value":273},{"type":18,"tag":182,"props":3479,"children":3480},{"style":346},[3481],{"type":23,"value":3482}," 15",{"type":18,"tag":182,"props":3484,"children":3485},{"style":215},[3486],{"type":23,"value":1066},{"type":18,"tag":182,"props":3488,"children":3489},{"style":346},[3490],{"type":23,"value":3491},"15",{"type":18,"tag":182,"props":3493,"children":3494},{"style":215},[3495],{"type":23,"value":2497},{"type":18,"tag":182,"props":3497,"children":3498},{"class":184,"line":697},[3499],{"type":18,"tag":182,"props":3500,"children":3501},{"emptyLinePlaceholder":229},[3502],{"type":23,"value":232},{"type":18,"tag":182,"props":3504,"children":3505},{"class":184,"line":714},[3506,3510,3515,3519,3523,3527,3531,3535,3539,3543,3547,3551,3556],{"type":18,"tag":182,"props":3507,"children":3508},{"style":215},[3509],{"type":23,"value":3432},{"type":18,"tag":182,"props":3511,"children":3512},{"style":195},[3513],{"type":23,"value":3514},"arc",{"type":18,"tag":182,"props":3516,"children":3517},{"style":215},[3518],{"type":23,"value":3458},{"type":18,"tag":182,"props":3520,"children":3521},{"style":346},[3522],{"type":23,"value":3463},{"type":18,"tag":182,"props":3524,"children":3525},{"style":189},[3526],{"type":23,"value":3468},{"type":18,"tag":182,"props":3528,"children":3529},{"style":215},[3530],{"type":23,"value":3473},{"type":18,"tag":182,"props":3532,"children":3533},{"style":189},[3534],{"type":23,"value":273},{"type":18,"tag":182,"props":3536,"children":3537},{"style":346},[3538],{"type":23,"value":3482},{"type":18,"tag":182,"props":3540,"children":3541},{"style":215},[3542],{"type":23,"value":1066},{"type":18,"tag":182,"props":3544,"children":3545},{"style":346},[3546],{"type":23,"value":3491},{"type":18,"tag":182,"props":3548,"children":3549},{"style":215},[3550],{"type":23,"value":1066},{"type":18,"tag":182,"props":3552,"children":3553},{"style":346},[3554],{"type":23,"value":3555},"10",{"type":18,"tag":182,"props":3557,"children":3558},{"style":215},[3559],{"type":23,"value":3560},", \n",{"type":18,"tag":182,"props":3562,"children":3563},{"class":184,"line":727},[3564,3569,3573,3578,3582,3587,3592,3597,3601,3606],{"type":18,"tag":182,"props":3565,"children":3566},{"style":346},[3567],{"type":23,"value":3568}," 0",{"type":18,"tag":182,"props":3570,"children":3571},{"style":215},[3572],{"type":23,"value":1066},{"type":18,"tag":182,"props":3574,"children":3575},{"style":346},[3576],{"type":23,"value":3577},"Math",{"type":18,"tag":182,"props":3579,"children":3580},{"style":215},[3581],{"type":23,"value":99},{"type":18,"tag":182,"props":3583,"children":3584},{"style":346},[3585],{"type":23,"value":3586},"PI",{"type":18,"tag":182,"props":3588,"children":3589},{"style":189},[3590],{"type":23,"value":3591},"*",{"type":18,"tag":182,"props":3593,"children":3594},{"style":346},[3595],{"type":23,"value":3596},"2",{"type":18,"tag":182,"props":3598,"children":3599},{"style":215},[3600],{"type":23,"value":1066},{"type":18,"tag":182,"props":3602,"children":3603},{"style":346},[3604],{"type":23,"value":3605},"false",{"type":18,"tag":182,"props":3607,"children":3608},{"style":215},[3609],{"type":23,"value":2497},{"type":18,"tag":182,"props":3611,"children":3612},{"class":184,"line":1030},[3613],{"type":18,"tag":182,"props":3614,"children":3615},{"emptyLinePlaceholder":229},[3616],{"type":23,"value":232},{"type":18,"tag":182,"props":3618,"children":3619},{"class":184,"line":1038},[3620,3624,3629],{"type":18,"tag":182,"props":3621,"children":3622},{"style":215},[3623],{"type":23,"value":3432},{"type":18,"tag":182,"props":3625,"children":3626},{"style":195},[3627],{"type":23,"value":3628},"closePath",{"type":18,"tag":182,"props":3630,"children":3631},{"style":215},[3632],{"type":23,"value":410},{"type":18,"tag":182,"props":3634,"children":3635},{"class":184,"line":1079},[3636,3640,3645],{"type":18,"tag":182,"props":3637,"children":3638},{"style":215},[3639],{"type":23,"value":3432},{"type":18,"tag":182,"props":3641,"children":3642},{"style":195},[3643],{"type":23,"value":3644},"fill",{"type":18,"tag":182,"props":3646,"children":3647},{"style":215},[3648],{"type":23,"value":410},{"type":18,"tag":182,"props":3650,"children":3651},{"class":184,"line":1087},[3652,3656,3661],{"type":18,"tag":182,"props":3653,"children":3654},{"style":215},[3655],{"type":23,"value":3432},{"type":18,"tag":182,"props":3657,"children":3658},{"style":195},[3659],{"type":23,"value":3660},"stroke",{"type":18,"tag":182,"props":3662,"children":3663},{"style":215},[3664],{"type":23,"value":410},{"type":18,"tag":182,"props":3666,"children":3667},{"class":184,"line":1095},[3668,3673,3677,3682,3686],{"type":18,"tag":182,"props":3669,"children":3670},{"style":189},[3671],{"type":23,"value":3672}," else",{"type":18,"tag":182,"props":3674,"children":3675},{"style":189},[3676],{"type":23,"value":2833},{"type":18,"tag":182,"props":3678,"children":3679},{"style":215},[3680],{"type":23,"value":3681}," kDashToken ",{"type":18,"tag":182,"props":3683,"children":3684},{"style":189},[3685],{"type":23,"value":2765},{"type":18,"tag":182,"props":3687,"children":3688},{"style":215},[3689],{"type":23,"value":3424},{"type":18,"tag":182,"props":3691,"children":3692},{"class":184,"line":1116},[3693,3697,3702,3706,3710,3714,3718,3722,3726],{"type":18,"tag":182,"props":3694,"children":3695},{"style":215},[3696],{"type":23,"value":3432},{"type":18,"tag":182,"props":3698,"children":3699},{"style":195},[3700],{"type":23,"value":3701},"fillRect",{"type":18,"tag":182,"props":3703,"children":3704},{"style":215},[3705],{"type":23,"value":3458},{"type":18,"tag":182,"props":3707,"children":3708},{"style":346},[3709],{"type":23,"value":3463},{"type":18,"tag":182,"props":3711,"children":3712},{"style":189},[3713],{"type":23,"value":3468},{"type":18,"tag":182,"props":3715,"children":3716},{"style":215},[3717],{"type":23,"value":3473},{"type":18,"tag":182,"props":3719,"children":3720},{"style":189},[3721],{"type":23,"value":273},{"type":18,"tag":182,"props":3723,"children":3724},{"style":346},[3725],{"type":23,"value":3482},{"type":18,"tag":182,"props":3727,"children":3728},{"style":215},[3729],{"type":23,"value":3560},{"type":18,"tag":182,"props":3731,"children":3732},{"class":184,"line":1124},[3733,3738,3742,3747,3751,3755],{"type":18,"tag":182,"props":3734,"children":3735},{"style":346},[3736],{"type":23,"value":3737}," 15",{"type":18,"tag":182,"props":3739,"children":3740},{"style":215},[3741],{"type":23,"value":1066},{"type":18,"tag":182,"props":3743,"children":3744},{"style":346},[3745],{"type":23,"value":3746},"25",{"type":18,"tag":182,"props":3748,"children":3749},{"style":215},[3750],{"type":23,"value":1066},{"type":18,"tag":182,"props":3752,"children":3753},{"style":346},[3754],{"type":23,"value":3555},{"type":18,"tag":182,"props":3756,"children":3757},{"style":215},[3758],{"type":23,"value":2497},{"type":18,"tag":182,"props":3760,"children":3761},{"class":184,"line":1146},[3762,3766,3770,3775,3779],{"type":18,"tag":182,"props":3763,"children":3764},{"style":189},[3765],{"type":23,"value":3672},{"type":18,"tag":182,"props":3767,"children":3768},{"style":189},[3769],{"type":23,"value":2833},{"type":18,"tag":182,"props":3771,"children":3772},{"style":215},[3773],{"type":23,"value":3774}," kWordStopToken ",{"type":18,"tag":182,"props":3776,"children":3777},{"style":189},[3778],{"type":23,"value":2765},{"type":18,"tag":182,"props":3780,"children":3781},{"style":215},[3782],{"type":23,"value":3424},{"type":18,"tag":182,"props":3784,"children":3785},{"class":184,"line":1184},[3786,3790,3794,3798,3802,3806,3810,3814,3819],{"type":18,"tag":182,"props":3787,"children":3788},{"style":215},[3789],{"type":23,"value":3432},{"type":18,"tag":182,"props":3791,"children":3792},{"style":195},[3793],{"type":23,"value":3701},{"type":18,"tag":182,"props":3795,"children":3796},{"style":215},[3797],{"type":23,"value":3458},{"type":18,"tag":182,"props":3799,"children":3800},{"style":346},[3801],{"type":23,"value":3463},{"type":18,"tag":182,"props":3803,"children":3804},{"style":189},[3805],{"type":23,"value":3468},{"type":18,"tag":182,"props":3807,"children":3808},{"style":215},[3809],{"type":23,"value":3473},{"type":18,"tag":182,"props":3811,"children":3812},{"style":189},[3813],{"type":23,"value":273},{"type":18,"tag":182,"props":3815,"children":3816},{"style":346},[3817],{"type":23,"value":3818}," 30",{"type":18,"tag":182,"props":3820,"children":3821},{"style":215},[3822],{"type":23,"value":3560},{"type":18,"tag":182,"props":3824,"children":3825},{"class":184,"line":1192},[3826,3831,3835,3839,3843,3848],{"type":18,"tag":182,"props":3827,"children":3828},{"style":346},[3829],{"type":23,"value":3830}," 5",{"type":18,"tag":182,"props":3832,"children":3833},{"style":215},[3834],{"type":23,"value":1066},{"type":18,"tag":182,"props":3836,"children":3837},{"style":346},[3838],{"type":23,"value":3555},{"type":18,"tag":182,"props":3840,"children":3841},{"style":215},[3842],{"type":23,"value":1066},{"type":18,"tag":182,"props":3844,"children":3845},{"style":346},[3846],{"type":23,"value":3847},"20",{"type":18,"tag":182,"props":3849,"children":3850},{"style":215},[3851],{"type":23,"value":2497},{"type":18,"tag":182,"props":3853,"children":3854},{"class":184,"line":1205},[3855,3860,3865],{"type":18,"tag":182,"props":3856,"children":3857},{"style":369},[3858],{"type":23,"value":3859}," tokenNum",{"type":18,"tag":182,"props":3861,"children":3862},{"style":189},[3863],{"type":23,"value":3864}," +=",{"type":18,"tag":182,"props":3866,"children":3867},{"style":346},[3868],{"type":23,"value":3869}," 1\n",{"type":18,"tag":19,"props":3871,"children":3872},{},[3873,3875,3879],{"type":23,"value":3874},"The Decoder view is a Backbone.js view class that represents a simple text box to display the characters the user has sent across the line. Anytime the Decoder model emits a ",{"type":18,"tag":428,"props":3876,"children":3877},{},[3878],{"type":23,"value":3130},{"type":23,"value":3880}," event, the Decoder view appends the parsed character to the end of its text box.",{"type":18,"tag":2099,"props":3882,"children":3883},{},[3884],{"type":23,"value":2103},{"title":8,"searchDepth":101,"depth":101,"links":3886},[],"content:rbrubaker:2012-06:coffee-backbone-2.md","rbrubaker/2012-06/coffee-backbone-2.md","rbrubaker/2012-06/coffee-backbone-2",{"user":110,"name":111},{"_path":3892,"_dir":2116,"_draft":7,"_partial":7,"_locale":8,"title":3893,"description":3894,"publishDate":3895,"tags":3896,"excerpt":3894,"body":3897,"_type":103,"_id":5668,"_source":105,"_file":5669,"_stem":5670,"_extension":108,"author":5671},"/rbrubaker/2012-06/coffe-backbone-1","Fun with CoffeeScript and Backbone.js : Part 1","CoffeeScript has been all the rage lately and I've been wanting to hop on board the bandwagon. I've also seen Backbone.js mentioned quite a bit and was even more intrigued after listening to this .NET Rocks podcast. I decided to convert some plain JavaScript code I had in a side project to use both CoffeeScript and Backbone.js and see how things went.","2012-06-06",[2198,118,2199,2200],{"type":15,"children":3898,"toc":5666},[3899,3926,3935,3953,3958,3969,4346,4356,4367,4612,4623,4628,5199,5204,5215,5652,5657,5662],{"type":18,"tag":19,"props":3900,"children":3901},{},[3902,3907,3909,3915,3917,3924],{"type":18,"tag":30,"props":3903,"children":3905},{"href":163,"rel":3904},[34],[3906],{"type":23,"value":2213},{"type":23,"value":3908}," has been all the rage lately and I've been wanting to hop on board the bandwagon. I've also seen ",{"type":18,"tag":30,"props":3910,"children":3913},{"href":3911,"rel":3912},"http://backbonejs.org",[34],[3914],{"type":23,"value":2222},{"type":23,"value":3916}," mentioned quite a bit and was even more intrigued after listening to this ",{"type":18,"tag":30,"props":3918,"children":3921},{"href":3919,"rel":3920},"http://www.dotnetrocks.com/default.aspx?showNum=743",[34],[3922],{"type":23,"value":3923},".NET Rocks podcast",{"type":23,"value":3925},". I decided to convert some plain JavaScript code I had in a side project to use both CoffeeScript and Backbone.js and see how things went.",{"type":18,"tag":19,"props":3927,"children":3928},{},[3929,3930,3934],{"type":23,"value":2248},{"type":18,"tag":30,"props":3931,"children":3932},{"href":2251},[3933],{"type":23,"value":2254},{"type":23,"value":99},{"type":18,"tag":19,"props":3936,"children":3937},{},[3938,3940,3945,3947,3952],{"type":23,"value":3939},"The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available ",{"type":18,"tag":30,"props":3941,"children":3943},{"href":2231,"rel":3942},[34],[3944],{"type":23,"value":2165},{"type":23,"value":3946}," and the running code can be seen ",{"type":18,"tag":30,"props":3948,"children":3950},{"href":2239,"rel":3949},[34],[3951],{"type":23,"value":2165},{"type":23,"value":99},{"type":18,"tag":19,"props":3954,"children":3955},{},[3956],{"type":23,"value":3957},"In this post I'll discuss the code that handles the user input.",{"type":18,"tag":19,"props":3959,"children":3960},{},[3961],{"type":18,"tag":428,"props":3962,"children":3963},{},[3964],{"type":18,"tag":432,"props":3965,"children":3966},{},[3967],{"type":23,"value":3968},"Initialization",{"type":18,"tag":171,"props":3970,"children":3972},{"className":173,"code":3971,"language":175,"meta":8,"style":8},"init = ->\n decoder = new MorseDecoder\n\n communicationLine = new CommunicationLine(\n 'decoder': decoder)\n\n straightKey = new StraightKeyInput(\n 'el': $('#straight-key-div'), \n 'model': communicationLine)\n\n communicationLineView = new CommunicationLineView(\n 'el': $('#communication-line-div'), \n 'model': communicationLine)\n\n decoderView = new DecoderView(\n 'el': $('messageBoxDiv'), \n 'model': decoder)\n\n drawSignalLine()\n\n$(document).ready init\n",[3973],{"type":18,"tag":178,"props":3974,"children":3975},{"__ignoreMap":8},[3976,3992,4013,4020,4045,4062,4069,4094,4124,4141,4148,4172,4200,4215,4222,4246,4274,4289,4296,4308,4315],{"type":18,"tag":182,"props":3977,"children":3978},{"class":184,"line":185},[3979,3984,3988],{"type":18,"tag":182,"props":3980,"children":3981},{"style":195},[3982],{"type":23,"value":3983},"init",{"type":18,"tag":182,"props":3985,"children":3986},{"style":189},[3987],{"type":23,"value":377},{"type":18,"tag":182,"props":3989,"children":3990},{"style":189},[3991],{"type":23,"value":326},{"type":18,"tag":182,"props":3993,"children":3994},{"class":184,"line":201},[3995,4000,4004,4008],{"type":18,"tag":182,"props":3996,"children":3997},{"style":369},[3998],{"type":23,"value":3999}," decoder",{"type":18,"tag":182,"props":4001,"children":4002},{"style":189},[4003],{"type":23,"value":377},{"type":18,"tag":182,"props":4005,"children":4006},{"style":189},[4007],{"type":23,"value":382},{"type":18,"tag":182,"props":4009,"children":4010},{"style":195},[4011],{"type":23,"value":4012}," MorseDecoder\n",{"type":18,"tag":182,"props":4014,"children":4015},{"class":184,"line":101},[4016],{"type":18,"tag":182,"props":4017,"children":4018},{"emptyLinePlaceholder":229},[4019],{"type":23,"value":232},{"type":18,"tag":182,"props":4021,"children":4022},{"class":184,"line":235},[4023,4028,4032,4036,4041],{"type":18,"tag":182,"props":4024,"children":4025},{"style":369},[4026],{"type":23,"value":4027}," communicationLine",{"type":18,"tag":182,"props":4029,"children":4030},{"style":189},[4031],{"type":23,"value":377},{"type":18,"tag":182,"props":4033,"children":4034},{"style":189},[4035],{"type":23,"value":382},{"type":18,"tag":182,"props":4037,"children":4038},{"style":195},[4039],{"type":23,"value":4040}," CommunicationLine",{"type":18,"tag":182,"props":4042,"children":4043},{"style":215},[4044],{"type":23,"value":3267},{"type":18,"tag":182,"props":4046,"children":4047},{"class":184,"line":257},[4048,4053,4057],{"type":18,"tag":182,"props":4049,"children":4050},{"style":276},[4051],{"type":23,"value":4052}," 'decoder'",{"type":18,"tag":182,"props":4054,"children":4055},{"style":189},[4056],{"type":23,"value":212},{"type":18,"tag":182,"props":4058,"children":4059},{"style":215},[4060],{"type":23,"value":4061}," decoder)\n",{"type":18,"tag":182,"props":4063,"children":4064},{"class":184,"line":282},[4065],{"type":18,"tag":182,"props":4066,"children":4067},{"emptyLinePlaceholder":229},[4068],{"type":23,"value":232},{"type":18,"tag":182,"props":4070,"children":4071},{"class":184,"line":290},[4072,4077,4081,4085,4090],{"type":18,"tag":182,"props":4073,"children":4074},{"style":369},[4075],{"type":23,"value":4076}," straightKey",{"type":18,"tag":182,"props":4078,"children":4079},{"style":189},[4080],{"type":23,"value":377},{"type":18,"tag":182,"props":4082,"children":4083},{"style":189},[4084],{"type":23,"value":382},{"type":18,"tag":182,"props":4086,"children":4087},{"style":195},[4088],{"type":23,"value":4089}," StraightKeyInput",{"type":18,"tag":182,"props":4091,"children":4092},{"style":215},[4093],{"type":23,"value":3267},{"type":18,"tag":182,"props":4095,"children":4096},{"class":184,"line":312},[4097,4102,4106,4110,4114,4119],{"type":18,"tag":182,"props":4098,"children":4099},{"style":276},[4100],{"type":23,"value":4101}," 'el'",{"type":18,"tag":182,"props":4103,"children":4104},{"style":189},[4105],{"type":23,"value":212},{"type":18,"tag":182,"props":4107,"children":4108},{"style":195},[4109],{"type":23,"value":2483},{"type":18,"tag":182,"props":4111,"children":4112},{"style":215},[4113],{"type":23,"value":886},{"type":18,"tag":182,"props":4115,"children":4116},{"style":276},[4117],{"type":23,"value":4118},"'#straight-key-div'",{"type":18,"tag":182,"props":4120,"children":4121},{"style":215},[4122],{"type":23,"value":4123},"), \n",{"type":18,"tag":182,"props":4125,"children":4126},{"class":184,"line":329},[4127,4132,4136],{"type":18,"tag":182,"props":4128,"children":4129},{"style":276},[4130],{"type":23,"value":4131}," 'model'",{"type":18,"tag":182,"props":4133,"children":4134},{"style":189},[4135],{"type":23,"value":212},{"type":18,"tag":182,"props":4137,"children":4138},{"style":215},[4139],{"type":23,"value":4140}," communicationLine)\n",{"type":18,"tag":182,"props":4142,"children":4143},{"class":184,"line":342},[4144],{"type":18,"tag":182,"props":4145,"children":4146},{"emptyLinePlaceholder":229},[4147],{"type":23,"value":232},{"type":18,"tag":182,"props":4149,"children":4150},{"class":184,"line":357},[4151,4156,4160,4164,4168],{"type":18,"tag":182,"props":4152,"children":4153},{"style":369},[4154],{"type":23,"value":4155}," communicationLineView",{"type":18,"tag":182,"props":4157,"children":4158},{"style":189},[4159],{"type":23,"value":377},{"type":18,"tag":182,"props":4161,"children":4162},{"style":189},[4163],{"type":23,"value":382},{"type":18,"tag":182,"props":4165,"children":4166},{"style":195},[4167],{"type":23,"value":3162},{"type":18,"tag":182,"props":4169,"children":4170},{"style":215},[4171],{"type":23,"value":3267},{"type":18,"tag":182,"props":4173,"children":4174},{"class":184,"line":365},[4175,4179,4183,4187,4191,4196],{"type":18,"tag":182,"props":4176,"children":4177},{"style":276},[4178],{"type":23,"value":4101},{"type":18,"tag":182,"props":4180,"children":4181},{"style":189},[4182],{"type":23,"value":212},{"type":18,"tag":182,"props":4184,"children":4185},{"style":195},[4186],{"type":23,"value":2483},{"type":18,"tag":182,"props":4188,"children":4189},{"style":215},[4190],{"type":23,"value":886},{"type":18,"tag":182,"props":4192,"children":4193},{"style":276},[4194],{"type":23,"value":4195},"'#communication-line-div'",{"type":18,"tag":182,"props":4197,"children":4198},{"style":215},[4199],{"type":23,"value":4123},{"type":18,"tag":182,"props":4201,"children":4202},{"class":184,"line":394},[4203,4207,4211],{"type":18,"tag":182,"props":4204,"children":4205},{"style":276},[4206],{"type":23,"value":4131},{"type":18,"tag":182,"props":4208,"children":4209},{"style":189},[4210],{"type":23,"value":212},{"type":18,"tag":182,"props":4212,"children":4213},{"style":215},[4214],{"type":23,"value":4140},{"type":18,"tag":182,"props":4216,"children":4217},{"class":184,"line":653},[4218],{"type":18,"tag":182,"props":4219,"children":4220},{"emptyLinePlaceholder":229},[4221],{"type":23,"value":232},{"type":18,"tag":182,"props":4223,"children":4224},{"class":184,"line":671},[4225,4230,4234,4238,4242],{"type":18,"tag":182,"props":4226,"children":4227},{"style":369},[4228],{"type":23,"value":4229}," decoderView",{"type":18,"tag":182,"props":4231,"children":4232},{"style":189},[4233],{"type":23,"value":377},{"type":18,"tag":182,"props":4235,"children":4236},{"style":189},[4237],{"type":23,"value":382},{"type":18,"tag":182,"props":4239,"children":4240},{"style":195},[4241],{"type":23,"value":2385},{"type":18,"tag":182,"props":4243,"children":4244},{"style":215},[4245],{"type":23,"value":3267},{"type":18,"tag":182,"props":4247,"children":4248},{"class":184,"line":697},[4249,4253,4257,4261,4265,4270],{"type":18,"tag":182,"props":4250,"children":4251},{"style":276},[4252],{"type":23,"value":4101},{"type":18,"tag":182,"props":4254,"children":4255},{"style":189},[4256],{"type":23,"value":212},{"type":18,"tag":182,"props":4258,"children":4259},{"style":195},[4260],{"type":23,"value":2483},{"type":18,"tag":182,"props":4262,"children":4263},{"style":215},[4264],{"type":23,"value":886},{"type":18,"tag":182,"props":4266,"children":4267},{"style":276},[4268],{"type":23,"value":4269},"'messageBoxDiv'",{"type":18,"tag":182,"props":4271,"children":4272},{"style":215},[4273],{"type":23,"value":4123},{"type":18,"tag":182,"props":4275,"children":4276},{"class":184,"line":714},[4277,4281,4285],{"type":18,"tag":182,"props":4278,"children":4279},{"style":276},[4280],{"type":23,"value":4131},{"type":18,"tag":182,"props":4282,"children":4283},{"style":189},[4284],{"type":23,"value":212},{"type":18,"tag":182,"props":4286,"children":4287},{"style":215},[4288],{"type":23,"value":4061},{"type":18,"tag":182,"props":4290,"children":4291},{"class":184,"line":727},[4292],{"type":18,"tag":182,"props":4293,"children":4294},{"emptyLinePlaceholder":229},[4295],{"type":23,"value":232},{"type":18,"tag":182,"props":4297,"children":4298},{"class":184,"line":1030},[4299,4304],{"type":18,"tag":182,"props":4300,"children":4301},{"style":195},[4302],{"type":23,"value":4303}," drawSignalLine",{"type":18,"tag":182,"props":4305,"children":4306},{"style":215},[4307],{"type":23,"value":410},{"type":18,"tag":182,"props":4309,"children":4310},{"class":184,"line":1038},[4311],{"type":18,"tag":182,"props":4312,"children":4313},{"emptyLinePlaceholder":229},[4314],{"type":23,"value":232},{"type":18,"tag":182,"props":4316,"children":4317},{"class":184,"line":1079},[4318,4323,4327,4332,4336,4341],{"type":18,"tag":182,"props":4319,"children":4320},{"style":195},[4321],{"type":23,"value":4322},"$",{"type":18,"tag":182,"props":4324,"children":4325},{"style":215},[4326],{"type":23,"value":886},{"type":18,"tag":182,"props":4328,"children":4329},{"style":346},[4330],{"type":23,"value":4331},"document",{"type":18,"tag":182,"props":4333,"children":4334},{"style":215},[4335],{"type":23,"value":3280},{"type":18,"tag":182,"props":4337,"children":4338},{"style":195},[4339],{"type":23,"value":4340},"ready",{"type":18,"tag":182,"props":4342,"children":4343},{"style":215},[4344],{"type":23,"value":4345}," init\n",{"type":18,"tag":19,"props":4347,"children":4348},{},[4349,4350,4354],{"type":23,"value":160},{"type":18,"tag":428,"props":4351,"children":4352},{},[4353],{"type":23,"value":3983},{"type":23,"value":4355}," function sets up all of the Backbone.js model/view classes. Note that each Backbone view is initialized with both its corresponding HTML element and corresponding model object.",{"type":18,"tag":19,"props":4357,"children":4358},{},[4359,4361,4365],{"type":23,"value":4360},"The ",{"type":18,"tag":428,"props":4362,"children":4363},{},[4364],{"type":23,"value":3983},{"type":23,"value":4366}," function also draws the \"communication line\" in a canvas element.",{"type":18,"tag":171,"props":4368,"children":4370},{"className":173,"code":4369,"language":175,"meta":8,"style":8},"drawSignalLine = ->\n context = document.getElementById(\n \"communicationLineCanvas\").getContext('2d')\n\n context.clearRect(0, 0, \n context.canvas.width, context.canvas.height)\n\n context.moveTo(0, 30)\n context.lineTo(500, 30)\n context.strokeStyle = \"#000\"\n context.closePath()\n context.stroke()\n",[4371],{"type":18,"tag":178,"props":4372,"children":4373},{"__ignoreMap":8},[4374,4390,4418,4446,4453,4485,4493,4500,4532,4565,4582,4597],{"type":18,"tag":182,"props":4375,"children":4376},{"class":184,"line":185},[4377,4382,4386],{"type":18,"tag":182,"props":4378,"children":4379},{"style":195},[4380],{"type":23,"value":4381},"drawSignalLine",{"type":18,"tag":182,"props":4383,"children":4384},{"style":189},[4385],{"type":23,"value":377},{"type":18,"tag":182,"props":4387,"children":4388},{"style":189},[4389],{"type":23,"value":326},{"type":18,"tag":182,"props":4391,"children":4392},{"class":184,"line":201},[4393,4398,4402,4406,4410,4414],{"type":18,"tag":182,"props":4394,"children":4395},{"style":369},[4396],{"type":23,"value":4397}," context",{"type":18,"tag":182,"props":4399,"children":4400},{"style":189},[4401],{"type":23,"value":377},{"type":18,"tag":182,"props":4403,"children":4404},{"style":346},[4405],{"type":23,"value":3253},{"type":18,"tag":182,"props":4407,"children":4408},{"style":215},[4409],{"type":23,"value":99},{"type":18,"tag":182,"props":4411,"children":4412},{"style":346},[4413],{"type":23,"value":3262},{"type":18,"tag":182,"props":4415,"children":4416},{"style":215},[4417],{"type":23,"value":3267},{"type":18,"tag":182,"props":4419,"children":4420},{"class":184,"line":101},[4421,4426,4430,4434,4438,4442],{"type":18,"tag":182,"props":4422,"children":4423},{"style":276},[4424],{"type":23,"value":4425}," \"communicationLineCanvas\"",{"type":18,"tag":182,"props":4427,"children":4428},{"style":215},[4429],{"type":23,"value":3280},{"type":18,"tag":182,"props":4431,"children":4432},{"style":346},[4433],{"type":23,"value":3285},{"type":18,"tag":182,"props":4435,"children":4436},{"style":215},[4437],{"type":23,"value":886},{"type":18,"tag":182,"props":4439,"children":4440},{"style":276},[4441],{"type":23,"value":3294},{"type":18,"tag":182,"props":4443,"children":4444},{"style":215},[4445],{"type":23,"value":2497},{"type":18,"tag":182,"props":4447,"children":4448},{"class":184,"line":235},[4449],{"type":18,"tag":182,"props":4450,"children":4451},{"emptyLinePlaceholder":229},[4452],{"type":23,"value":232},{"type":18,"tag":182,"props":4454,"children":4455},{"class":184,"line":257},[4456,4461,4465,4469,4473,4477,4481],{"type":18,"tag":182,"props":4457,"children":4458},{"style":215},[4459],{"type":23,"value":4460}," context.",{"type":18,"tag":182,"props":4462,"children":4463},{"style":195},[4464],{"type":23,"value":3318},{"type":18,"tag":182,"props":4466,"children":4467},{"style":215},[4468],{"type":23,"value":886},{"type":18,"tag":182,"props":4470,"children":4471},{"style":346},[4472],{"type":23,"value":3327},{"type":18,"tag":182,"props":4474,"children":4475},{"style":215},[4476],{"type":23,"value":1066},{"type":18,"tag":182,"props":4478,"children":4479},{"style":346},[4480],{"type":23,"value":3327},{"type":18,"tag":182,"props":4482,"children":4483},{"style":215},[4484],{"type":23,"value":3560},{"type":18,"tag":182,"props":4486,"children":4487},{"class":184,"line":282},[4488],{"type":18,"tag":182,"props":4489,"children":4490},{"style":215},[4491],{"type":23,"value":4492}," context.canvas.width, context.canvas.height)\n",{"type":18,"tag":182,"props":4494,"children":4495},{"class":184,"line":290},[4496],{"type":18,"tag":182,"props":4497,"children":4498},{"emptyLinePlaceholder":229},[4499],{"type":23,"value":232},{"type":18,"tag":182,"props":4501,"children":4502},{"class":184,"line":312},[4503,4507,4511,4515,4519,4523,4528],{"type":18,"tag":182,"props":4504,"children":4505},{"style":215},[4506],{"type":23,"value":4460},{"type":18,"tag":182,"props":4508,"children":4509},{"style":346},[4510],{"type":23,"value":3453},{"type":18,"tag":182,"props":4512,"children":4513},{"style":215},[4514],{"type":23,"value":886},{"type":18,"tag":182,"props":4516,"children":4517},{"style":346},[4518],{"type":23,"value":3327},{"type":18,"tag":182,"props":4520,"children":4521},{"style":215},[4522],{"type":23,"value":1066},{"type":18,"tag":182,"props":4524,"children":4525},{"style":346},[4526],{"type":23,"value":4527},"30",{"type":18,"tag":182,"props":4529,"children":4530},{"style":215},[4531],{"type":23,"value":2497},{"type":18,"tag":182,"props":4533,"children":4534},{"class":184,"line":329},[4535,4539,4544,4548,4553,4557,4561],{"type":18,"tag":182,"props":4536,"children":4537},{"style":215},[4538],{"type":23,"value":4460},{"type":18,"tag":182,"props":4540,"children":4541},{"style":195},[4542],{"type":23,"value":4543},"lineTo",{"type":18,"tag":182,"props":4545,"children":4546},{"style":215},[4547],{"type":23,"value":886},{"type":18,"tag":182,"props":4549,"children":4550},{"style":346},[4551],{"type":23,"value":4552},"500",{"type":18,"tag":182,"props":4554,"children":4555},{"style":215},[4556],{"type":23,"value":1066},{"type":18,"tag":182,"props":4558,"children":4559},{"style":346},[4560],{"type":23,"value":4527},{"type":18,"tag":182,"props":4562,"children":4563},{"style":215},[4564],{"type":23,"value":2497},{"type":18,"tag":182,"props":4566,"children":4567},{"class":184,"line":342},[4568,4573,4577],{"type":18,"tag":182,"props":4569,"children":4570},{"style":215},[4571],{"type":23,"value":4572}," context.strokeStyle ",{"type":18,"tag":182,"props":4574,"children":4575},{"style":189},[4576],{"type":23,"value":576},{"type":18,"tag":182,"props":4578,"children":4579},{"style":276},[4580],{"type":23,"value":4581}," \"#000\"\n",{"type":18,"tag":182,"props":4583,"children":4584},{"class":184,"line":357},[4585,4589,4593],{"type":18,"tag":182,"props":4586,"children":4587},{"style":215},[4588],{"type":23,"value":4460},{"type":18,"tag":182,"props":4590,"children":4591},{"style":195},[4592],{"type":23,"value":3628},{"type":18,"tag":182,"props":4594,"children":4595},{"style":215},[4596],{"type":23,"value":410},{"type":18,"tag":182,"props":4598,"children":4599},{"class":184,"line":365},[4600,4604,4608],{"type":18,"tag":182,"props":4601,"children":4602},{"style":215},[4603],{"type":23,"value":4460},{"type":18,"tag":182,"props":4605,"children":4606},{"style":195},[4607],{"type":23,"value":3660},{"type":18,"tag":182,"props":4609,"children":4610},{"style":215},[4611],{"type":23,"value":410},{"type":18,"tag":19,"props":4613,"children":4614},{},[4615],{"type":18,"tag":428,"props":4616,"children":4617},{},[4618],{"type":18,"tag":432,"props":4619,"children":4620},{},[4621],{"type":23,"value":4622},"Input View",{"type":18,"tag":19,"props":4624,"children":4625},{},[4626],{"type":23,"value":4627},"The application processes user input using the StraighKeyInput class, a Backbone view class associated with an input button:",{"type":18,"tag":171,"props":4629,"children":4633},{"className":4630,"code":4631,"language":4632,"meta":8,"style":8},"language-javascript shiki shiki-themes github-light github-dark","class StraightKeyInput extends Backbone.View\n\n initialize: ->\n @dashTimer = null\n @dashFlag = false\n @wordStopTimer = null\n @wordStopFlag = false\n\n events:\n 'mousedown #straight-key': 'startTimers',\n 'mouseup #straight-key': 'sendUserInput'\n\n startTimers: =>\n @dashTimer = setTimeout(@dashTimerExpired, 250)\n @wordStopTimer = setTimeout(\n @wordStopTimerExpired, 1000)\n\n dashTimerExpired: =>\n @dashFlag = true\n\n wordStopTimerExpired: =>\n @wordStopFlag = true\n\n sendUserInput: =>\n if @wordStopFlag\n @model.addToken(kWordStopToken)\n else if @dashFlag\n @model.addToken(kDashToken)\n else\n @model.addToken(kDotToken)\n\n clearTimeout(@dashTimer)\n clearTimeout(@wordStopTimer)\n @dashFlag = false\n @wordStopFlag = false\n","javascript",[4634],{"type":18,"tag":178,"props":4635,"children":4636},{"__ignoreMap":8},[4637,4666,4673,4689,4710,4731,4751,4771,4778,4791,4813,4830,4837,4853,4887,4910,4927,4934,4950,4970,4977,4993,5012,5019,5035,5052,5070,5090,5106,5113,5129,5136,5149,5161,5180],{"type":18,"tag":182,"props":4638,"children":4639},{"class":184,"line":185},[4640,4644,4648,4652,4657,4661],{"type":18,"tag":182,"props":4641,"children":4642},{"style":189},[4643],{"type":23,"value":192},{"type":18,"tag":182,"props":4645,"children":4646},{"style":195},[4647],{"type":23,"value":4089},{"type":18,"tag":182,"props":4649,"children":4650},{"style":189},[4651],{"type":23,"value":305},{"type":18,"tag":182,"props":4653,"children":4654},{"style":195},[4655],{"type":23,"value":4656}," Backbone",{"type":18,"tag":182,"props":4658,"children":4659},{"style":215},[4660],{"type":23,"value":99},{"type":18,"tag":182,"props":4662,"children":4663},{"style":195},[4664],{"type":23,"value":4665},"View\n",{"type":18,"tag":182,"props":4667,"children":4668},{"class":184,"line":201},[4669],{"type":18,"tag":182,"props":4670,"children":4671},{"emptyLinePlaceholder":229},[4672],{"type":23,"value":232},{"type":18,"tag":182,"props":4674,"children":4675},{"class":184,"line":101},[4676,4680,4685],{"type":18,"tag":182,"props":4677,"children":4678},{"style":195},[4679],{"type":23,"value":2402},{"type":18,"tag":182,"props":4681,"children":4682},{"style":215},[4683],{"type":23,"value":4684},": ",{"type":18,"tag":182,"props":4686,"children":4687},{"style":189},[4688],{"type":23,"value":223},{"type":18,"tag":182,"props":4690,"children":4691},{"class":184,"line":235},[4692,4696,4701,4705],{"type":18,"tag":182,"props":4693,"children":4694},{"style":215},[4695],{"type":23,"value":2712},{"type":18,"tag":182,"props":4697,"children":4698},{"style":195},[4699],{"type":23,"value":4700},"dashTimer",{"type":18,"tag":182,"props":4702,"children":4703},{"style":189},[4704],{"type":23,"value":377},{"type":18,"tag":182,"props":4706,"children":4707},{"style":346},[4708],{"type":23,"value":4709}," null\n",{"type":18,"tag":182,"props":4711,"children":4712},{"class":184,"line":257},[4713,4717,4722,4726],{"type":18,"tag":182,"props":4714,"children":4715},{"style":215},[4716],{"type":23,"value":2712},{"type":18,"tag":182,"props":4718,"children":4719},{"style":195},[4720],{"type":23,"value":4721},"dashFlag",{"type":18,"tag":182,"props":4723,"children":4724},{"style":189},[4725],{"type":23,"value":377},{"type":18,"tag":182,"props":4727,"children":4728},{"style":346},[4729],{"type":23,"value":4730}," false\n",{"type":18,"tag":182,"props":4732,"children":4733},{"class":184,"line":282},[4734,4738,4743,4747],{"type":18,"tag":182,"props":4735,"children":4736},{"style":215},[4737],{"type":23,"value":2712},{"type":18,"tag":182,"props":4739,"children":4740},{"style":195},[4741],{"type":23,"value":4742},"wordStopTimer",{"type":18,"tag":182,"props":4744,"children":4745},{"style":189},[4746],{"type":23,"value":377},{"type":18,"tag":182,"props":4748,"children":4749},{"style":346},[4750],{"type":23,"value":4709},{"type":18,"tag":182,"props":4752,"children":4753},{"class":184,"line":290},[4754,4758,4763,4767],{"type":18,"tag":182,"props":4755,"children":4756},{"style":215},[4757],{"type":23,"value":2712},{"type":18,"tag":182,"props":4759,"children":4760},{"style":195},[4761],{"type":23,"value":4762},"wordStopFlag",{"type":18,"tag":182,"props":4764,"children":4765},{"style":189},[4766],{"type":23,"value":377},{"type":18,"tag":182,"props":4768,"children":4769},{"style":346},[4770],{"type":23,"value":4730},{"type":18,"tag":182,"props":4772,"children":4773},{"class":184,"line":312},[4774],{"type":18,"tag":182,"props":4775,"children":4776},{"emptyLinePlaceholder":229},[4777],{"type":23,"value":232},{"type":18,"tag":182,"props":4779,"children":4780},{"class":184,"line":329},[4781,4786],{"type":18,"tag":182,"props":4782,"children":4783},{"style":195},[4784],{"type":23,"value":4785}," events",{"type":18,"tag":182,"props":4787,"children":4788},{"style":215},[4789],{"type":23,"value":4790},":\n",{"type":18,"tag":182,"props":4792,"children":4793},{"class":184,"line":342},[4794,4799,4803,4808],{"type":18,"tag":182,"props":4795,"children":4796},{"style":276},[4797],{"type":23,"value":4798}," 'mousedown #straight-key'",{"type":18,"tag":182,"props":4800,"children":4801},{"style":215},[4802],{"type":23,"value":4684},{"type":18,"tag":182,"props":4804,"children":4805},{"style":276},[4806],{"type":23,"value":4807},"'startTimers'",{"type":18,"tag":182,"props":4809,"children":4810},{"style":215},[4811],{"type":23,"value":4812},",\n",{"type":18,"tag":182,"props":4814,"children":4815},{"class":184,"line":357},[4816,4821,4825],{"type":18,"tag":182,"props":4817,"children":4818},{"style":276},[4819],{"type":23,"value":4820}," 'mouseup #straight-key'",{"type":18,"tag":182,"props":4822,"children":4823},{"style":215},[4824],{"type":23,"value":4684},{"type":18,"tag":182,"props":4826,"children":4827},{"style":276},[4828],{"type":23,"value":4829},"'sendUserInput'\n",{"type":18,"tag":182,"props":4831,"children":4832},{"class":184,"line":365},[4833],{"type":18,"tag":182,"props":4834,"children":4835},{"emptyLinePlaceholder":229},[4836],{"type":23,"value":232},{"type":18,"tag":182,"props":4838,"children":4839},{"class":184,"line":394},[4840,4845,4849],{"type":18,"tag":182,"props":4841,"children":4842},{"style":195},[4843],{"type":23,"value":4844}," startTimers",{"type":18,"tag":182,"props":4846,"children":4847},{"style":215},[4848],{"type":23,"value":4684},{"type":18,"tag":182,"props":4850,"children":4851},{"style":189},[4852],{"type":23,"value":2466},{"type":18,"tag":182,"props":4854,"children":4855},{"class":184,"line":653},[4856,4860,4864,4868,4873,4878,4883],{"type":18,"tag":182,"props":4857,"children":4858},{"style":215},[4859],{"type":23,"value":2712},{"type":18,"tag":182,"props":4861,"children":4862},{"style":195},[4863],{"type":23,"value":4700},{"type":18,"tag":182,"props":4865,"children":4866},{"style":189},[4867],{"type":23,"value":377},{"type":18,"tag":182,"props":4869,"children":4870},{"style":195},[4871],{"type":23,"value":4872}," setTimeout",{"type":18,"tag":182,"props":4874,"children":4875},{"style":215},[4876],{"type":23,"value":4877},"(@dashTimerExpired, ",{"type":18,"tag":182,"props":4879,"children":4880},{"style":346},[4881],{"type":23,"value":4882},"250",{"type":18,"tag":182,"props":4884,"children":4885},{"style":215},[4886],{"type":23,"value":2497},{"type":18,"tag":182,"props":4888,"children":4889},{"class":184,"line":671},[4890,4894,4898,4902,4906],{"type":18,"tag":182,"props":4891,"children":4892},{"style":215},[4893],{"type":23,"value":2712},{"type":18,"tag":182,"props":4895,"children":4896},{"style":195},[4897],{"type":23,"value":4742},{"type":18,"tag":182,"props":4899,"children":4900},{"style":189},[4901],{"type":23,"value":377},{"type":18,"tag":182,"props":4903,"children":4904},{"style":195},[4905],{"type":23,"value":4872},{"type":18,"tag":182,"props":4907,"children":4908},{"style":215},[4909],{"type":23,"value":3267},{"type":18,"tag":182,"props":4911,"children":4912},{"class":184,"line":697},[4913,4918,4923],{"type":18,"tag":182,"props":4914,"children":4915},{"style":215},[4916],{"type":23,"value":4917}," @wordStopTimerExpired, ",{"type":18,"tag":182,"props":4919,"children":4920},{"style":346},[4921],{"type":23,"value":4922},"1000",{"type":18,"tag":182,"props":4924,"children":4925},{"style":215},[4926],{"type":23,"value":2497},{"type":18,"tag":182,"props":4928,"children":4929},{"class":184,"line":714},[4930],{"type":18,"tag":182,"props":4931,"children":4932},{"emptyLinePlaceholder":229},[4933],{"type":23,"value":232},{"type":18,"tag":182,"props":4935,"children":4936},{"class":184,"line":727},[4937,4942,4946],{"type":18,"tag":182,"props":4938,"children":4939},{"style":195},[4940],{"type":23,"value":4941}," dashTimerExpired",{"type":18,"tag":182,"props":4943,"children":4944},{"style":215},[4945],{"type":23,"value":4684},{"type":18,"tag":182,"props":4947,"children":4948},{"style":189},[4949],{"type":23,"value":2466},{"type":18,"tag":182,"props":4951,"children":4952},{"class":184,"line":1030},[4953,4957,4961,4965],{"type":18,"tag":182,"props":4954,"children":4955},{"style":215},[4956],{"type":23,"value":2712},{"type":18,"tag":182,"props":4958,"children":4959},{"style":195},[4960],{"type":23,"value":4721},{"type":18,"tag":182,"props":4962,"children":4963},{"style":189},[4964],{"type":23,"value":377},{"type":18,"tag":182,"props":4966,"children":4967},{"style":346},[4968],{"type":23,"value":4969}," true\n",{"type":18,"tag":182,"props":4971,"children":4972},{"class":184,"line":1038},[4973],{"type":18,"tag":182,"props":4974,"children":4975},{"emptyLinePlaceholder":229},[4976],{"type":23,"value":232},{"type":18,"tag":182,"props":4978,"children":4979},{"class":184,"line":1079},[4980,4985,4989],{"type":18,"tag":182,"props":4981,"children":4982},{"style":195},[4983],{"type":23,"value":4984}," wordStopTimerExpired",{"type":18,"tag":182,"props":4986,"children":4987},{"style":215},[4988],{"type":23,"value":4684},{"type":18,"tag":182,"props":4990,"children":4991},{"style":189},[4992],{"type":23,"value":2466},{"type":18,"tag":182,"props":4994,"children":4995},{"class":184,"line":1087},[4996,5000,5004,5008],{"type":18,"tag":182,"props":4997,"children":4998},{"style":215},[4999],{"type":23,"value":2712},{"type":18,"tag":182,"props":5001,"children":5002},{"style":195},[5003],{"type":23,"value":4762},{"type":18,"tag":182,"props":5005,"children":5006},{"style":189},[5007],{"type":23,"value":377},{"type":18,"tag":182,"props":5009,"children":5010},{"style":346},[5011],{"type":23,"value":4969},{"type":18,"tag":182,"props":5013,"children":5014},{"class":184,"line":1095},[5015],{"type":18,"tag":182,"props":5016,"children":5017},{"emptyLinePlaceholder":229},[5018],{"type":23,"value":232},{"type":18,"tag":182,"props":5020,"children":5021},{"class":184,"line":1116},[5022,5027,5031],{"type":18,"tag":182,"props":5023,"children":5024},{"style":195},[5025],{"type":23,"value":5026}," sendUserInput",{"type":18,"tag":182,"props":5028,"children":5029},{"style":215},[5030],{"type":23,"value":4684},{"type":18,"tag":182,"props":5032,"children":5033},{"style":189},[5034],{"type":23,"value":2466},{"type":18,"tag":182,"props":5036,"children":5037},{"class":184,"line":1124},[5038,5042,5047],{"type":18,"tag":182,"props":5039,"children":5040},{"style":195},[5041],{"type":23,"value":541},{"type":18,"tag":182,"props":5043,"children":5044},{"style":215},[5045],{"type":23,"value":5046}," @",{"type":18,"tag":182,"props":5048,"children":5049},{"style":195},[5050],{"type":23,"value":5051},"wordStopFlag\n",{"type":18,"tag":182,"props":5053,"children":5054},{"class":184,"line":1146},[5055,5060,5065],{"type":18,"tag":182,"props":5056,"children":5057},{"style":215},[5058],{"type":23,"value":5059}," @model.",{"type":18,"tag":182,"props":5061,"children":5062},{"style":195},[5063],{"type":23,"value":5064},"addToken",{"type":18,"tag":182,"props":5066,"children":5067},{"style":215},[5068],{"type":23,"value":5069},"(kWordStopToken)\n",{"type":18,"tag":182,"props":5071,"children":5072},{"class":184,"line":1184},[5073,5077,5081,5085],{"type":18,"tag":182,"props":5074,"children":5075},{"style":195},[5076],{"type":23,"value":2828},{"type":18,"tag":182,"props":5078,"children":5079},{"style":195},[5080],{"type":23,"value":2833},{"type":18,"tag":182,"props":5082,"children":5083},{"style":215},[5084],{"type":23,"value":5046},{"type":18,"tag":182,"props":5086,"children":5087},{"style":195},[5088],{"type":23,"value":5089},"dashFlag\n",{"type":18,"tag":182,"props":5091,"children":5092},{"class":184,"line":1192},[5093,5097,5101],{"type":18,"tag":182,"props":5094,"children":5095},{"style":215},[5096],{"type":23,"value":5059},{"type":18,"tag":182,"props":5098,"children":5099},{"style":195},[5100],{"type":23,"value":5064},{"type":18,"tag":182,"props":5102,"children":5103},{"style":215},[5104],{"type":23,"value":5105},"(kDashToken)\n",{"type":18,"tag":182,"props":5107,"children":5108},{"class":184,"line":1205},[5109],{"type":18,"tag":182,"props":5110,"children":5111},{"style":195},[5112],{"type":23,"value":2920},{"type":18,"tag":182,"props":5114,"children":5115},{"class":184,"line":1214},[5116,5120,5124],{"type":18,"tag":182,"props":5117,"children":5118},{"style":215},[5119],{"type":23,"value":5059},{"type":18,"tag":182,"props":5121,"children":5122},{"style":195},[5123],{"type":23,"value":5064},{"type":18,"tag":182,"props":5125,"children":5126},{"style":215},[5127],{"type":23,"value":5128},"(kDotToken)\n",{"type":18,"tag":182,"props":5130,"children":5131},{"class":184,"line":1222},[5132],{"type":18,"tag":182,"props":5133,"children":5134},{"emptyLinePlaceholder":229},[5135],{"type":23,"value":232},{"type":18,"tag":182,"props":5137,"children":5138},{"class":184,"line":1255},[5139,5144],{"type":18,"tag":182,"props":5140,"children":5141},{"style":195},[5142],{"type":23,"value":5143}," clearTimeout",{"type":18,"tag":182,"props":5145,"children":5146},{"style":215},[5147],{"type":23,"value":5148},"(@dashTimer)\n",{"type":18,"tag":182,"props":5150,"children":5151},{"class":184,"line":1811},[5152,5156],{"type":18,"tag":182,"props":5153,"children":5154},{"style":195},[5155],{"type":23,"value":5143},{"type":18,"tag":182,"props":5157,"children":5158},{"style":215},[5159],{"type":23,"value":5160},"(@wordStopTimer)\n",{"type":18,"tag":182,"props":5162,"children":5163},{"class":184,"line":1819},[5164,5168,5172,5176],{"type":18,"tag":182,"props":5165,"children":5166},{"style":215},[5167],{"type":23,"value":2712},{"type":18,"tag":182,"props":5169,"children":5170},{"style":195},[5171],{"type":23,"value":4721},{"type":18,"tag":182,"props":5173,"children":5174},{"style":189},[5175],{"type":23,"value":377},{"type":18,"tag":182,"props":5177,"children":5178},{"style":346},[5179],{"type":23,"value":4730},{"type":18,"tag":182,"props":5181,"children":5182},{"class":184,"line":1844},[5183,5187,5191,5195],{"type":18,"tag":182,"props":5184,"children":5185},{"style":215},[5186],{"type":23,"value":2712},{"type":18,"tag":182,"props":5188,"children":5189},{"style":195},[5190],{"type":23,"value":4762},{"type":18,"tag":182,"props":5192,"children":5193},{"style":189},[5194],{"type":23,"value":377},{"type":18,"tag":182,"props":5196,"children":5197},{"style":346},[5198],{"type":23,"value":4730},{"type":18,"tag":19,"props":5200,"children":5201},{},[5202],{"type":23,"value":5203},"The class uses two timers to determine which \"token\" a user intends to send across the line. Using Backbone's declarative style for event binding, I bind the mousedown event to a function that starts both timers. The mouseup event is bound to a function that pushes the appropriate token to the model based on how long the user held down the input button.",{"type":18,"tag":19,"props":5205,"children":5206},{},[5207],{"type":18,"tag":428,"props":5208,"children":5209},{},[5210],{"type":18,"tag":432,"props":5211,"children":5212},{},[5213],{"type":23,"value":5214},"Input Model",{"type":18,"tag":171,"props":5216,"children":5218},{"className":173,"code":5217,"language":175,"meta":8,"style":8},"class CommunicationLine extends Backbone.Model\n initialize: (options) =>\n @inputQueue = []\n\n @communicationLine = \n ['', '', '', '', '', '', '', '', '', '']\n\n @decoder = options.decoder\n setInterval(@moveDataOneStep, 100)\n\n addToken: (token) =>\n @inputQueue.push(token)\n\n moveDataOneStep: =>\n @decoder.processToken(@communicationLine.pop())\n nextToken = @inputQueue.shift()\n\n @communicationLine.unshift(\n if undefined == nextToken then '' else nextToken)\n\n @trigger('hasNewData', @communicationLine)\n",[5219],{"type":18,"tag":178,"props":5220,"children":5221},{"__ignoreMap":8},[5222,5241,5261,5277,5284,5300,5389,5396,5413,5435,5442,5462,5478,5485,5501,5528,5554,5561,5578,5621,5628],{"type":18,"tag":182,"props":5223,"children":5224},{"class":184,"line":185},[5225,5229,5233,5237],{"type":18,"tag":182,"props":5226,"children":5227},{"style":189},[5228],{"type":23,"value":192},{"type":18,"tag":182,"props":5230,"children":5231},{"style":195},[5232],{"type":23,"value":4040},{"type":18,"tag":182,"props":5234,"children":5235},{"style":189},[5236],{"type":23,"value":305},{"type":18,"tag":182,"props":5238,"children":5239},{"style":195},[5240],{"type":23,"value":2593},{"type":18,"tag":182,"props":5242,"children":5243},{"class":184,"line":201},[5244,5248,5252,5257],{"type":18,"tag":182,"props":5245,"children":5246},{"style":195},[5247],{"type":23,"value":2402},{"type":18,"tag":182,"props":5249,"children":5250},{"style":189},[5251],{"type":23,"value":212},{"type":18,"tag":182,"props":5253,"children":5254},{"style":215},[5255],{"type":23,"value":5256}," (options) ",{"type":18,"tag":182,"props":5258,"children":5259},{"style":189},[5260],{"type":23,"value":2466},{"type":18,"tag":182,"props":5262,"children":5263},{"class":184,"line":101},[5264,5269,5273],{"type":18,"tag":182,"props":5265,"children":5266},{"style":215},[5267],{"type":23,"value":5268}," @inputQueue ",{"type":18,"tag":182,"props":5270,"children":5271},{"style":189},[5272],{"type":23,"value":576},{"type":18,"tag":182,"props":5274,"children":5275},{"style":215},[5276],{"type":23,"value":2687},{"type":18,"tag":182,"props":5278,"children":5279},{"class":184,"line":235},[5280],{"type":18,"tag":182,"props":5281,"children":5282},{"emptyLinePlaceholder":229},[5283],{"type":23,"value":232},{"type":18,"tag":182,"props":5285,"children":5286},{"class":184,"line":257},[5287,5292,5296],{"type":18,"tag":182,"props":5288,"children":5289},{"style":215},[5290],{"type":23,"value":5291}," @communicationLine ",{"type":18,"tag":182,"props":5293,"children":5294},{"style":189},[5295],{"type":23,"value":576},{"type":18,"tag":182,"props":5297,"children":5298},{"style":215},[5299],{"type":23,"value":2797},{"type":18,"tag":182,"props":5301,"children":5302},{"class":184,"line":282},[5303,5308,5312,5316,5320,5324,5328,5332,5336,5340,5344,5348,5352,5356,5360,5364,5368,5372,5376,5380,5384],{"type":18,"tag":182,"props":5304,"children":5305},{"style":215},[5306],{"type":23,"value":5307}," [",{"type":18,"tag":182,"props":5309,"children":5310},{"style":276},[5311],{"type":23,"value":3027},{"type":18,"tag":182,"props":5313,"children":5314},{"style":215},[5315],{"type":23,"value":1066},{"type":18,"tag":182,"props":5317,"children":5318},{"style":276},[5319],{"type":23,"value":3027},{"type":18,"tag":182,"props":5321,"children":5322},{"style":215},[5323],{"type":23,"value":1066},{"type":18,"tag":182,"props":5325,"children":5326},{"style":276},[5327],{"type":23,"value":3027},{"type":18,"tag":182,"props":5329,"children":5330},{"style":215},[5331],{"type":23,"value":1066},{"type":18,"tag":182,"props":5333,"children":5334},{"style":276},[5335],{"type":23,"value":3027},{"type":18,"tag":182,"props":5337,"children":5338},{"style":215},[5339],{"type":23,"value":1066},{"type":18,"tag":182,"props":5341,"children":5342},{"style":276},[5343],{"type":23,"value":3027},{"type":18,"tag":182,"props":5345,"children":5346},{"style":215},[5347],{"type":23,"value":1066},{"type":18,"tag":182,"props":5349,"children":5350},{"style":276},[5351],{"type":23,"value":3027},{"type":18,"tag":182,"props":5353,"children":5354},{"style":215},[5355],{"type":23,"value":1066},{"type":18,"tag":182,"props":5357,"children":5358},{"style":276},[5359],{"type":23,"value":3027},{"type":18,"tag":182,"props":5361,"children":5362},{"style":215},[5363],{"type":23,"value":1066},{"type":18,"tag":182,"props":5365,"children":5366},{"style":276},[5367],{"type":23,"value":3027},{"type":18,"tag":182,"props":5369,"children":5370},{"style":215},[5371],{"type":23,"value":1066},{"type":18,"tag":182,"props":5373,"children":5374},{"style":276},[5375],{"type":23,"value":3027},{"type":18,"tag":182,"props":5377,"children":5378},{"style":215},[5379],{"type":23,"value":1066},{"type":18,"tag":182,"props":5381,"children":5382},{"style":276},[5383],{"type":23,"value":3027},{"type":18,"tag":182,"props":5385,"children":5386},{"style":215},[5387],{"type":23,"value":5388},"]\n",{"type":18,"tag":182,"props":5390,"children":5391},{"class":184,"line":290},[5392],{"type":18,"tag":182,"props":5393,"children":5394},{"emptyLinePlaceholder":229},[5395],{"type":23,"value":232},{"type":18,"tag":182,"props":5397,"children":5398},{"class":184,"line":312},[5399,5404,5408],{"type":18,"tag":182,"props":5400,"children":5401},{"style":215},[5402],{"type":23,"value":5403}," @decoder ",{"type":18,"tag":182,"props":5405,"children":5406},{"style":189},[5407],{"type":23,"value":576},{"type":18,"tag":182,"props":5409,"children":5410},{"style":215},[5411],{"type":23,"value":5412}," options.decoder\n",{"type":18,"tag":182,"props":5414,"children":5415},{"class":184,"line":329},[5416,5421,5426,5431],{"type":18,"tag":182,"props":5417,"children":5418},{"style":346},[5419],{"type":23,"value":5420}," setInterval",{"type":18,"tag":182,"props":5422,"children":5423},{"style":215},[5424],{"type":23,"value":5425},"(@moveDataOneStep, ",{"type":18,"tag":182,"props":5427,"children":5428},{"style":346},[5429],{"type":23,"value":5430},"100",{"type":18,"tag":182,"props":5432,"children":5433},{"style":215},[5434],{"type":23,"value":2497},{"type":18,"tag":182,"props":5436,"children":5437},{"class":184,"line":342},[5438],{"type":18,"tag":182,"props":5439,"children":5440},{"emptyLinePlaceholder":229},[5441],{"type":23,"value":232},{"type":18,"tag":182,"props":5443,"children":5444},{"class":184,"line":357},[5445,5450,5454,5458],{"type":18,"tag":182,"props":5446,"children":5447},{"style":195},[5448],{"type":23,"value":5449}," addToken",{"type":18,"tag":182,"props":5451,"children":5452},{"style":189},[5453],{"type":23,"value":212},{"type":18,"tag":182,"props":5455,"children":5456},{"style":215},[5457],{"type":23,"value":2461},{"type":18,"tag":182,"props":5459,"children":5460},{"style":189},[5461],{"type":23,"value":2466},{"type":18,"tag":182,"props":5463,"children":5464},{"class":184,"line":365},[5465,5470,5474],{"type":18,"tag":182,"props":5466,"children":5467},{"style":215},[5468],{"type":23,"value":5469}," @inputQueue.",{"type":18,"tag":182,"props":5471,"children":5472},{"style":346},[5473],{"type":23,"value":2933},{"type":18,"tag":182,"props":5475,"children":5476},{"style":215},[5477],{"type":23,"value":2938},{"type":18,"tag":182,"props":5479,"children":5480},{"class":184,"line":394},[5481],{"type":18,"tag":182,"props":5482,"children":5483},{"emptyLinePlaceholder":229},[5484],{"type":23,"value":232},{"type":18,"tag":182,"props":5486,"children":5487},{"class":184,"line":653},[5488,5493,5497],{"type":18,"tag":182,"props":5489,"children":5490},{"style":195},[5491],{"type":23,"value":5492}," moveDataOneStep",{"type":18,"tag":182,"props":5494,"children":5495},{"style":189},[5496],{"type":23,"value":212},{"type":18,"tag":182,"props":5498,"children":5499},{"style":189},[5500],{"type":23,"value":2617},{"type":18,"tag":182,"props":5502,"children":5503},{"class":184,"line":671},[5504,5509,5513,5518,5523],{"type":18,"tag":182,"props":5505,"children":5506},{"style":215},[5507],{"type":23,"value":5508}," @decoder.",{"type":18,"tag":182,"props":5510,"children":5511},{"style":195},[5512],{"type":23,"value":3123},{"type":18,"tag":182,"props":5514,"children":5515},{"style":215},[5516],{"type":23,"value":5517},"(@communicationLine.",{"type":18,"tag":182,"props":5519,"children":5520},{"style":346},[5521],{"type":23,"value":5522},"pop",{"type":18,"tag":182,"props":5524,"children":5525},{"style":215},[5526],{"type":23,"value":5527},"())\n",{"type":18,"tag":182,"props":5529,"children":5530},{"class":184,"line":697},[5531,5536,5540,5545,5550],{"type":18,"tag":182,"props":5532,"children":5533},{"style":369},[5534],{"type":23,"value":5535}," nextToken",{"type":18,"tag":182,"props":5537,"children":5538},{"style":189},[5539],{"type":23,"value":377},{"type":18,"tag":182,"props":5541,"children":5542},{"style":215},[5543],{"type":23,"value":5544}," @inputQueue.",{"type":18,"tag":182,"props":5546,"children":5547},{"style":346},[5548],{"type":23,"value":5549},"shift",{"type":18,"tag":182,"props":5551,"children":5552},{"style":215},[5553],{"type":23,"value":410},{"type":18,"tag":182,"props":5555,"children":5556},{"class":184,"line":714},[5557],{"type":18,"tag":182,"props":5558,"children":5559},{"emptyLinePlaceholder":229},[5560],{"type":23,"value":232},{"type":18,"tag":182,"props":5562,"children":5563},{"class":184,"line":727},[5564,5569,5574],{"type":18,"tag":182,"props":5565,"children":5566},{"style":215},[5567],{"type":23,"value":5568}," @communicationLine.",{"type":18,"tag":182,"props":5570,"children":5571},{"style":346},[5572],{"type":23,"value":5573},"unshift",{"type":18,"tag":182,"props":5575,"children":5576},{"style":215},[5577],{"type":23,"value":3267},{"type":18,"tag":182,"props":5579,"children":5580},{"class":184,"line":1030},[5581,5586,5591,5596,5601,5606,5611,5616],{"type":18,"tag":182,"props":5582,"children":5583},{"style":189},[5584],{"type":23,"value":5585}," if",{"type":18,"tag":182,"props":5587,"children":5588},{"style":346},[5589],{"type":23,"value":5590}," undefined",{"type":18,"tag":182,"props":5592,"children":5593},{"style":189},[5594],{"type":23,"value":5595}," ==",{"type":18,"tag":182,"props":5597,"children":5598},{"style":215},[5599],{"type":23,"value":5600}," nextToken ",{"type":18,"tag":182,"props":5602,"children":5603},{"style":189},[5604],{"type":23,"value":5605},"then",{"type":18,"tag":182,"props":5607,"children":5608},{"style":276},[5609],{"type":23,"value":5610}," ''",{"type":18,"tag":182,"props":5612,"children":5613},{"style":189},[5614],{"type":23,"value":5615}," else",{"type":18,"tag":182,"props":5617,"children":5618},{"style":215},[5619],{"type":23,"value":5620}," nextToken)\n",{"type":18,"tag":182,"props":5622,"children":5623},{"class":184,"line":1038},[5624],{"type":18,"tag":182,"props":5625,"children":5626},{"emptyLinePlaceholder":229},[5627],{"type":23,"value":232},{"type":18,"tag":182,"props":5629,"children":5630},{"class":184,"line":1079},[5631,5635,5639,5643,5647],{"type":18,"tag":182,"props":5632,"children":5633},{"style":215},[5634],{"type":23,"value":2712},{"type":18,"tag":182,"props":5636,"children":5637},{"style":195},[5638],{"type":23,"value":2891},{"type":18,"tag":182,"props":5640,"children":5641},{"style":215},[5642],{"type":23,"value":886},{"type":18,"tag":182,"props":5644,"children":5645},{"style":276},[5646],{"type":23,"value":3205},{"type":18,"tag":182,"props":5648,"children":5649},{"style":215},[5650],{"type":23,"value":5651},", @communicationLine)\n",{"type":18,"tag":19,"props":5653,"children":5654},{},[5655],{"type":23,"value":5656},"The CommunicationLine class is a Backbone model class that represents the tokens currently moving across the telegraph line. It also contains a queue that holds the input tokens generated by the user. The class also holds a reference to the object responsible for decoding the user input (more on that tomorrow).",{"type":18,"tag":19,"props":5658,"children":5659},{},[5660],{"type":23,"value":5661},"Every 100 milliseconds, the communication line shifts its tokens over one spot. The token popped off the line is passed to the decoder. The model then checks the input queue to determine if a user-generated token is available to be pushed onto the line. If not, the model pushes a default token (an empty string). The model then triggers an event to indicate the communication line state has changed and that the object representing the communication line view needs to be re-rendered (more on that tomorrow).",{"type":18,"tag":2099,"props":5663,"children":5664},{},[5665],{"type":23,"value":2103},{"title":8,"searchDepth":101,"depth":101,"links":5667},[],"content:rbrubaker:2012-06:coffe-backbone-1.md","rbrubaker/2012-06/coffe-backbone-1.md","rbrubaker/2012-06/coffe-backbone-1",{"user":110,"name":111},1780330274295]