Thomas Sileghem mastilver

Advanced JavaScript Learning Resources

This is a list of advanced JavaScript learning resources from people who responded to this [Tweet][13] and this [Tweet][20].

[You Don't Know JS][3]
[Frontend Masters courses by Kyle Simpson][12]
[@mpjme][6]'s [YouTube videos][5]

`async/await` with ES6 Generators & Promises

This vanilla ES6 function async allows code to yield (i.e. await) the asynchronous result of any Promise within. The usage is almost identical to ES7's async/await keywords.

async/await control flow is promising because it allows the programmer to reason linearly about complex asynchronous code. It also has the benefit of unifying traditionally disparate synchronous and asynchronous error handling code into one try/catch block.

This is expository code for the purpose of learning ES6. It is not 100% robust. If you want to use this style of code in the real world you might want to explore a well-tested library like co, task.js or use async/await with Babel. Also take a look at the official async/await draft section on desugaring.

Compatibility

node.js - 4.3.2+ (maybe earlier with

Some links to point people to when they misinterpret PATENTS clause or spread false claims.

https://code.facebook.com/license-faq

https://wptavern.com/automattic-will-continue-to-use-react-js-in-calypso-despite-patent-clause

https://twitter.com/paul_irish/status/754864479460929536

https://twitter.com/dan_abramov/status/766210972776337408

###Redux Egghead Video Notes###

####Introduction:#### Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.

Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language.

####1st principle of Redux:#### Everything that changes in your application including the data and ui options is contained in a single object called the state tree

	const puppeteer = require('puppeteer');

	class Webpage {
	static async generatePDF(url) {
	const browser = await puppeteer.launch({ headless: true }); // Puppeteer can only generate pdf in headless mode.
	const page = await browser.newPage();
	await page.goto(url, { waitUntil: 'networkidle', networkIdleTimeout: 5000 }); // Adjust network idle as required.
	const pdfConfig = {
	path: 'url.pdf', // Saves pdf to disk.
	format: 'A4',

	// getComponent is a function that returns a promise for a component
	// It will not be called until the first mount
	function asyncComponent(getComponent) {
	return class AsyncComponent extends React.Component {
	static Component = null;
	state = { Component: AsyncComponent.Component };

	componentWillMount() {
	if (!this.state.Component) {
	getComponent().then(Component => {

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	<html>
	<body>
	<div id="react-root"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
	<script id="react-app" type="text/template">
	const App = ({name}) => {

	35 left-pad
	30 relative-date
	27 expand-home-dir
	25 dom-event
	22 read-json
	21 is-node
	20 play-audio
	17 shuffle-array
	17 concat
	16 style-format

Thomas Sileghem mastilver

Advanced JavaScript Learning Resources

async/await with ES6 Generators & Promises

Compatibility

`async/await` with ES6 Generators & Promises