made with esnextbin
Last active
May 25, 2016 23:07
-
-
Save jameswomack/49eda7072ce28f84b1e8c09037d787d3 to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ESNext: "New School" JavaScript Made Easy</title> | |
| <style type="text/css"> | |
| main { | |
| font-family : Helvetica, sans-serif; | |
| } | |
| #masthead header { | |
| text-align : center; | |
| color : white; | |
| padding : 1em; | |
| background : black; | |
| } | |
| #masthead h1 { | |
| font-weight : 100; | |
| margin : 0 auto .5em; | |
| } | |
| #masthead h2 { | |
| font-weight : 300; | |
| font-style : italic; | |
| text-decoration : underline; | |
| } | |
| #masthead header img { | |
| margin : 0px auto; | |
| display : block; | |
| } | |
| #console { | |
| margin : 1em auto; | |
| padding : 2em 2em 4em; | |
| text-align : center; | |
| font-size : '1em'; | |
| background : black; | |
| color : white; | |
| display : block; | |
| border : 3px dashed green; | |
| } | |
| #console h3 { | |
| padding : .4em; | |
| border-bottom : 1px solid white; | |
| width : 100%; | |
| } | |
| #console .console-target { | |
| font-family : monospace; | |
| font-style : italic; | |
| background : lightblue; | |
| border : 1px solid lightblue; | |
| margin : 1em auto; | |
| padding : .4em; | |
| width : 50%; | |
| border-radius : 1em; | |
| color : black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main id="masthead"> | |
| <header> | |
| <h1>ESNext: "New School" JavaScript Made Easy</h1> | |
| <h2>Course Syntax (taught via GoT references)</h2> | |
| <img src="http://cdn.collider.com/wp-content/uploads/gameofthrones-title.jpg" /> | |
| </header> | |
| </main> | |
| <main id="app"></main> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| ESNext: "New School" JavaScript Made Easy | Codementor Live Classes | |
| http://bit.ly/es6-cm-course-description | |
| === Guidelines for this course | |
| http://bit.ly/es6-cm-course-guidelines | |
| === Our Tools | |
| http://bit.ly/es6-cm-course-tools | |
| Make sure to turn on Autorun using the Action menu | |
| == Continuing Learning Between Now and the Next Course | |
| http://bit.ly/essential-es6-links | |
| */ | |
| /* | |
| The *real* first piece of this lesson is the regarding the essential building | |
| blocks of ESNext—`const` and `let`. | |
| - https://gist.github.com/jameswomack/9345ac4f6c2bd893e323264d9b4fac71 | |
| === const === | |
| - http://bit.ly/babel-const | |
| === let === | |
| - http://bit.ly/babel-let | |
| */ | |
| /* | |
| Spread Operator | |
| - http://bit.ly/babel-spread-operator | |
| */ | |
| /* | |
| for...of | |
| - http://bit.ly/babel-console-pro | |
| - https://goo.gl/jwgrhR (looping over quotes) | |
| - http://bit.ly/babel-custom-iterators | |
| */ | |
| /* | |
| Destructuring | |
| - can be done both with and without `const` & `let. | |
| - with `let` is called "destructuring declaration" | |
| - without is called "destructuring assignment" | |
| - the difference between the two is important to people implementing the ECMAScript standard, | |
| to most programmers it's not | |
| - can be done with both Object syntax and Array syntax | |
| - object destructuring | |
| - array destructuring | |
| To best illustrate how destructuring works, let's take a stroll over to | |
| our friend the Babel REPL: | |
| - http://bit.ly/babel-destructuring | |
| */ | |
| /* | |
| Object Literal Extensions | |
| - http://bit.ly/babel-object-shorthand | |
| */ | |
| /* | |
| Being able to use syntax is like being able to form a sentence in English | |
| - http://bit.ly/es6-cm-course-hodor | |
| */ | |
| // http://bit.ly/essential-es6-links |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "react": "15.1.0", | |
| "react-dom": "15.1.0", | |
| "babel-runtime": "6.9.0" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| ESNext: "New School" JavaScript Made Easy | Codementor Live Classes | |
| http://bit.ly/es6-cm-course-description | |
| === Guidelines for this course | |
| http://bit.ly/es6-cm-course-guidelines | |
| === Our Tools | |
| http://bit.ly/es6-cm-course-tools | |
| Make sure to turn on Autorun using the Action menu | |
| == Continuing Learning Between Now and the Next Course | |
| http://bit.ly/essential-es6-links | |
| */ | |
| /* | |
| The *real* first piece of this lesson is the regarding the essential building | |
| blocks of ESNext—`const` and `let`. | |
| - https://gist.github.com/jameswomack/9345ac4f6c2bd893e323264d9b4fac71 | |
| === const === | |
| - http://bit.ly/babel-const | |
| === let === | |
| - http://bit.ly/babel-let | |
| */ | |
| /* | |
| Spread Operator | |
| - http://bit.ly/babel-spread-operator | |
| */ | |
| /* | |
| for...of | |
| - http://bit.ly/babel-console-pro | |
| - https://goo.gl/jwgrhR (looping over quotes) | |
| - http://bit.ly/babel-custom-iterators | |
| */ | |
| /* | |
| Destructuring | |
| - can be done both with and without `const` & `let. | |
| - with `let` is called "destructuring declaration" | |
| - without is called "destructuring assignment" | |
| - the difference between the two is important to people implementing the ECMAScript standard, | |
| to most programmers it's not | |
| - can be done with both Object syntax and Array syntax | |
| - object destructuring | |
| - array destructuring | |
| To best illustrate how destructuring works, let's take a stroll over to | |
| our friend the Babel REPL: | |
| - http://bit.ly/babel-destructuring | |
| */ | |
| /* | |
| Object Literal Extensions | |
| - http://bit.ly/babel-object-shorthand | |
| */ | |
| /* | |
| Being able to use syntax is like being able to form a sentence in English | |
| - http://bit.ly/es6-cm-course-hodor | |
| */ | |
| // http://bit.ly/essential-es6-links | |
| "use strict"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment