DREAM IN CODE

We have a little turtle who holds a pen, on our display screen. The turtle can respond to some commands: FORWARD , BACK , RIGHT and LEFT . * FORWARD 100 : The turtle will move 100 step on the screen, in the direction it is facing. * RIGHT 100 : The turtle will turn its head 90° clockwise in place. Repeating the commands above 4 times will get us a square with side 100 units long. forward 100 right 90 forward 100 right 90 forward 100 right 90 forward 100 right 90 We can rewrite the commands use repeat loop, as repeat 4 [ forward 100 right 90 ] This will give us the same square as before. At the next step we’ll teach our little turtle some new command, here we add square to the its vocabulary. to square repeat 4 [forward 100 right 90 ] end then we can use this new square command to draw the same square. Here comes some thing interesting: repeat 4 [ square right 90 ] repeat 12 [ square right 30 ] OK, that is all for today. Happy

We can use d3.select() to select and change DOM elements, and we can create and remove elements based on data. const books = [ 'Eloquent JavaScript' , 'JavaScript: The Good Parts' , 'JavaScript: The Definitive Guide' , 'You Don’t Know JS' ] d3.select( 'body' ).selectAll( 'div.books' ) .data(books) .enter() .append( 'div' ) .attr( 'class' , 'books' ) .html( function (d) { return d }) The result is: d3.selectAll() We start a selection using d3.selectAll() with a CSS identifier. Often there’s no elements match this identifier, and we then use .enter() function to create new elements. .data() We associate the data array with the elements which we selected using d3.selectAll() . For example we can access the first item of the array using code like this: document.getElementsByClassName( "books" )[ 0 ].__data__ .enter() and .exit() When we have more data items t

There are several ways in Vue to manage global var and function in the component system: 1. Put all functions and vars in a js file like ‘helper.js’, and import this file in components where we need these functions and vars. It’s a very clear way because we can see directly where the functions and vars are from. 2. Add the function or var to Vue.prototype , like Vue.prototype.$myfunciotn = ... , and then we can use it in component by calling this.$myfunction() 3. Of course we can use Vue Plugins to inject these functions and vars. The official document is here . MyPlugin.install = function (Vue, options) { // 1. add global method or property Vue.myGlobalMethod = function () { // something logic ... } // 2. add a global asset Vue.directive( 'my-directive' , { bind (el, binding, vnode, oldVnode) { // something logic ... } ... }) // 3. inject some component options Vue.mixin({ created: function () { // someth

Function $$\lambda x.x$$ is a simple function. It has a head, which is a lambda ($\lambda$) followed by a variable name, and a body, and the head and body of the function is separated by a dot ($.$). When we applied this function to an argument, the x in the body will have the value of that given argument. Alpha equivalence $$\lambda x.x$$ $$\lambda y.y$$ $$\lambda z.z$$ all there three are the same thing. The letters here are not meaningful, just a way of expression. This equivalence is called alpha equivalence. Beta reduction Beta reduction is the process in which we apply a function to arguments, substitute the input expression for all bound variables in the body, and eliminate the head. If we apply $\lambda x.x$ to a number, for example 42, we can substitute 42 for each $x$ in the body, and eliminate the head: $$(\lambda x.x) 42$$ $$42$$ Another example: apply function $(\lambda x.x*4)$ to 8, we got $$(\lambda x.x*4) 8$$ $$8*4$$ $$32$$ We can apply function to another funct