Updates, 2017-11-19

basic-concepts.md

@@ -76,6 +76,10 @@
   https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70  
   Recaps the history of how JavaScript tools have evolved to what they are today in 2017, to provide historical context.  Includes examples of how different tools were used and and what problems they help solve.
 
+- **A Brief, Incomplete History of JavaScript**  
+  https://closebrace.com/articles/2017-09-11/a-brief-incomplete-history-of-javascript  
+  An excellent history lesson that recaps the four major eras of web development and JS usage: the Early Era, the jQuery Era, the Single Page App Era, and the Modern Era.
+
 
 #### Suggested Learning Approaches
 

es6-features.md

@@ -181,6 +181,10 @@
   http://goshakkk.name/javascript-generators-understanding-sample-use-cases/  
   A simple thinking pattern for easily understanding generators, plus 3 practical applications.
 
+- **ES6 Generators and asynchronous Javascript**  
+  http://web.archive.org/web/20160304215133/https://alexperry.io/javascript/2015/09/17/es6-generators-and-asynchronous-javascript.html  
+  A clear description of how generator functions can be paused and continued, and how that capability enables writing asynchronous code in a synchronous-looking way.
+
 
 
 #### Promises
@@ -233,6 +237,10 @@
   https://medium.com/datafire-io/es6-promises-patterns-and-anti-patterns-bbb21a5d0918  
   Several useful techniques for using Promises, such as "promisifying" callback-based functions and running promises in parallel or sequence, and some common mistakes to avoid like not actually returning anything in a promise callback.
 
+- **Gotchas about async/await and Promises**  
+  https://dev.to/maxart2501/gotchas-about-asyncawait-and-promises-9di  
+  Several valuable tips about how to safely use async/await and Promise behavior, especially around error-handling.
+
 
 #### Techniques
 

framework-comparisons.md

@@ -12,7 +12,20 @@
 
 - **Web Framework Comparisons**  
   https://www.sitepen.com/blog/2017/06/13/if-we-chose-our-javascript-framework-like-we-chose-our-music/  
-  A 9-part series that compares Angular 2+, React+Redux, Vue, Ember, Dojo 2, and Aurelia.  Covers topics like UI development, UX design, foundational technologies, common usage, testing, and soundness.  The series is written by a company that works on Dojo, but the comparisons and descriptions are fair.
+  https://www.sitepen.com/blog/2017/11/10/web-frameworks-conclusions/  
+  A 9-part series that compares Angular 2+, React+Redux, Vue, Ember, Dojo 2, and Aurelia.  Covers topics like UI development, UX design, foundational technologies, common usage, testing, and soundness.  The series is written by a company that works on Dojo, but the comparisons and descriptions are fair.  Links go to the first and last articles in the series.
+
+- **How I stopped loving Angular**  
+  https://codeburst.io/how-i-stopped-loving-angular-c2935f7378c4  
+  An extensive article detailing the author's critiques of Angular 2+, and why they ultimately chose to switch to Vue instead.
+
+- **React vs Angular: An In-depth Comparison**  
+  https://www.sitepoint.com/react-vs-angular/  
+  A well-written post that not only offers comparisons between React and Angular, but gives suggested approaches for comparing tools and ecosystems in general.
+
+- **React vs Angular 2+: Developer Ergonomics**  
+  https://medium.com/@stelly_ryan/react-vs-angular-2-developer-ergonomics-b6d5103e8699  
+  Specific opinion-based comparisons on the developer experience for React and Angular in areas like components, testing, and framework-specific syntax, based on writing equivalent example apps using both frameworks.
 
 
 #### React and Flux vs Backbone

functional-programming.md

@@ -5,7 +5,7 @@
    Describes the three basic principles of FP: "data in/data out", "code as data", and "function composition" all the way down, and demonstrates transforming some data.  Has some _very_ helpful graphics and illustrations.
 
 - **Understanding Programmatic Side Effects**  
-  https://web.archive.org/web/20160326014453/http://web24studios.com/2015/10/understanding-programmatic-side-effects/  
+  http://c2fo.io/c2fo/programming/2016/05/11/understanding-programmatic-side-effects/  
   A short article that explains the concept of "side effects"
 
 - **What Is Functional Programming?**  

git-resources.md

@@ -61,6 +61,10 @@
   https://crypto.stanford.edu/~blynn/gitmagic/  
   An extensive Git tutorial that teaches usage instructions first, and works its way up to advanced Git techniques and concepts.
 
+- **Git Beyond the Basics**  
+  http://blog.bloomca.me/2017/11/17/git-beyond-the-basics.html  
+  A good tutorial that explains intermediate concepts like merging, rebasing, cherry-picking, and cleaning pull requests
+
 
 #### Tips and Useful Info
 

javascript-resources.md

@@ -99,8 +99,8 @@ While this list is primarily focused on learning React and Redux, and generally
   A free course from Wes Bos that teaches how to build 30 different interesting projects, using only "vanilla" Javascript.
 
 - **Javascript; The Core**  
-  http://dmitrysoshnikov.com/ecmascript/javascript-the-core/  
-  A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`.
+  http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/  
+  A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`.  The second edition includes more of a focus on ES6 and newer features.
 
 - **The Modern Javascript Tutorial**  
   http://javascript.info/  
@@ -110,14 +110,15 @@ While this list is primarily focused on learning React and Redux, and generally
   https://github.com/bpesquet/thejsway  
   A modern introduction to the JavaScript language, intended to be beginner-friendly, comprehensive, standards-aligned with the latest syntax and good practices, and hands-on.
 
-
-#### Interactive Exercises
-
 
 
 
 #### Online Code Editors
 
+- **CodeSandbox**  
+  https://codesandbox.io  
+  A full-fledged online IDE that lets you build entire applications using React, Vue, and other toolkits.
+
 - **A Roundup of Online Code Playgrounds**  
   https://www.sitepoint.com/round-up-online-code-playgrounds/  
   An overview and comparison of various online Javascript live code editing tools.

mobx-tutorials.md

@@ -89,10 +89,6 @@
 
 #### MobX and Redux Comparisons
 
-- **Comparing MobX and Redux - Video**  
-  https://www.youtube.com/watch?v=83v8cdvGfeA  
-A great video to understand the differences between MobX and Redux.
-
 - **"Confused: Redux or MobX?**  
   https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/  
   An in-depth thread comparing the two libraries. Includes comments from both Dan Abramov of Redux and Michel Weststrate of MobX describing their libraries, as well a number of other good comparisons.
@@ -114,13 +110,13 @@ A great video to understand the differences between MobX and Redux.
   https://hashnode.com/post/how-does-mobx-compare-with-redux-and-which-one-is-better-for-react-app-development-cisrch8eh0030g5532qeds1ja/answer/citq8rptk010cus530wdzdg69  
   An excellent answer comparing the two libraries and their philosophies
 
+- **Comparing MobX and Redux - Video**  
+  https://www.youtube.com/watch?v=83v8cdvGfeA  
+A great video to understand the differences between MobX and Redux.
+
 - **Redux vs MobX**  
   https://medium.com/@himrc/redux-vs-mobx-a42c8950f3  
   Some quick pros and cons of each, links to other discussions, and thoughts on when to use them.
-
-- **ReactConf 2017: MobX vs Redux: Comparing the Opposing Paradigms**  
-  https://www.youtube.com/watch?v=76FRrbY18Bs&index=8&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0  
-  A fantastic presentation by Preethi Kasireddy.  She compares several aspects of Redux and MobX, the general principles behind each, and discusses the pros/cons/tradeoffs in using them.
 
 - **Redux or MobX: What I learned after refactoring a medium-sized React app**  
   https://dannyherran.com/2017/03/react-redux-mobx-takeaways/  
@@ -132,4 +128,6 @@ A great video to understand the differences between MobX and Redux.
 
 - **Introduction to Redux and MobX**  
   https://medium.com/@guptagaruda/introduction-to-redux-and-mobx-e6fa98b6479  
-  A very nice comparison of the core concepts and benefits for Redux and MobX, with some good diagrams, useful tips, and links to relevant resources.
+  A very nice comparison of the core concepts and benefits for Redux and MobX, with some good diagrams, useful tips, and links to relevant resources.
+
+

pros-cons-discussion.md

@@ -279,6 +279,10 @@ similar structures in ClojureScript.
   https://medium.cobeisfresh.com/how-redux-can-make-you-a-better-developer-30a094d5e3ec  
   https://www.reddit.com/r/javascript/comments/7buksy/how_redux_can_make_you_a_better_developer/  A blog post recapping aspects of functional programming and immutability in JS and Redux.  The Reddit thread has some excellent discussion on pros and cons of using Redux and how it has benefited people.
 
+- **"React is focused on making your code understandable, not on making simple examples as short as possible"**  
+  https://twitter.com/dan_abramov/status/930380316463726593  
+  Some great points from Dan Abramov about React focusing on code predictability, maintainability, and data flow, rather than terseness.
+
 
 
 #### React's PATENTS License

react-architecture.md

@@ -264,6 +264,10 @@
   https://dev.to/kayis/is-react-solid-630  
   Looks at the SOLID architectural principles, and discusses how those apply to React components. 
 
+- **Clean Code vs Dirty Code: React Best Practices**  
+  http://americanexpress.io/clean-code-dirty-code/  
+  Some very opinionated thoughts on what qualifes as "clean" React code.  Your experience may vary, but some interesting food for thought.
+
 
 #### React Architecture
 
@@ -281,4 +285,12 @@
 
 - **Reusable Web Application Strategies: three patterns for running the same app in multiple spots**  
   https://medium.freecodecamp.org/reusable-web-application-strategies-d51517ea68c8  
-  Looks at how to run an app in reusable ways via iframes, reusable app components, and reusable UI components.
+  Looks at how to run an app in reusable ways via iframes, reusable app components, and reusable UI components.
+
+- **Integrating React in a 6+ Year Old Rails App**  
+  https://blog.codeship.com/integrating-react-in-a-6-year-old-rails-app/  
+  Discuss techniques for using React in an existing Rails app.  Focus is a bit more on the Rails side of things, but some useful info.
+
+- **Characteristics of an Ideal React Architecture**  
+  https://medium.com/@robftw/characteristics-of-an-ideal-react-architecture-883b9b92be0b  
+  Some opinionated thoughts on what constitutes good React architecture, including avoiding use of components as controllers, keeping prop passing to just a few levels, and ensuring that diff calculations are cheap.

react-component-composition.md

@@ -95,6 +95,10 @@
   https://www.sitepen.com/blog/2017/08/15/higher-order-components-in-react/  
   Shows an example of a React app that needs to authenticate routes, and how a HOC can help handle that in a reusable way.  Also includes example HOCs for A/B-testing features, collecting metrics, and injecting props.
 
+- **Save the "zombines": How to add state and lifecycle methods to stateless React components**  
+  https://codeburst.io/save-the-zombies-how-to-add-state-and-lifecycle-methods-to-stateless-react-components-1a996513866d  
+  A humorously-written look at how to extract state management logic into HOCs.
+
 
 
 
@@ -133,6 +137,13 @@
   https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf  
   Kent C Dodds describes how "prop getter" functions can be used with render props to provide more control over how rendering behavior is hooked together.
 
+- **Rendering a function with React**  
+  https://blog.kentcdodds.com/rendering-a-function-with-react-ca3eaf0751e2  
+  Kent C Dodds looks at some unusual use cases for reusing React components, and a possible solution that uses a somewhat hacky approach of marking a function as an iterable.
+
+
+
+
 
 #### Functional Composition
 
@@ -198,7 +209,7 @@
   Michael Jackson demonstrating that a component with render prop can do anything a HOC can do, and more.
 
  - **React Composition Patterns from the Ground Up**  
-   https://medium.com/alexkrolick/react-composition-patterns-from-the-ground-up-8401aaad93d7  
+   https://hackernoon.com/react-composition-patterns-from-the-ground-up-8401aaad93d7  
    Comparison of patterns such as Lifting State, Higher-Order Components, Render Callbacks, and "Renderless" State Providers, and how they relate to React's component model.
 
 - **Solving the problems of Higher Order Components without throwing the baby out with the bathwater**  
@@ -209,3 +220,6 @@
   https://medium.com/@joshuawcomeau/randomness-in-react-props-3929c1669f8b  
   Demonstrates several approaches to structuring logic for generating values and passing them to children, including initialization in a constructor, creating a wrapper component, and using a function-as-a-child.
 
+- **Simplifying life with React render callbacks**  
+  https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55  
+  Compares several approaches for passing data from a parent component directly to a child, including cloning children, using a HOC, and using render props.

react-component-patterns.md

@@ -466,3 +466,11 @@
   https://medium.com/@gajus/using-react-v16-to-create-self-destructing-components-de8e4eb61d0f  
   Demonstrates how a tiny component that simply returns its own children can simplify the process of returning arrays of components in React 16.
 
+- **3 React Gripes**  
+  https://gist.github.com/jlongster/febd2a397aff9501abec0c2d66075ec8  
+  https://twitter.com/jlongster/status/921016877408837632  
+  James Long describes three things about React that bother him: inability to easily have parents get refs to nested elements, PureComponents comparing both props and state, and a general tendency to do lots of processing in `componentWillReceiveProps`.  Some good discussion in both the gist comments and Twitter.
+
+- **React without `this`**  
+  https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160  
+  Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword

react-implementation.md

@@ -29,13 +29,8 @@
 - **React Elements vs React Components**  
   https://tylermcginnis.com/react-elements-vs-react-components/  
   An explanation of how elements represent DOM nodes, what `createElement` does, and how components and rendering relate to elements
-
-
-#### JSX and Events
 
 
-
-
 #### Miniature React Implementations
 
 - **Building React from Scratch**  
@@ -172,6 +167,10 @@
 - **An Interview with the React Team About Wordpress and Project Gutenberg**  
   https://wpcouple.com/interview-react-team-facebook-wordpress-gutenberg/  
   A Wordpress community site interviews Dan Abramov, Andrew Clark, and Sophie Alpert about a variety of topics, including how they prioritize features, how React is tested, dealing with breaking changes, downsides of React, and aspects of Wordpress using React for its "Project Gutenberg" tool.
+
+- **The React Story: How Facebook's Instagram Acquisition Led to the Open Sourcing of React**  
+  https://stackshare.io/posts/the-react-story  
+  An extensive podcast interview with Pete Hunt, former React team member, recounting his early work at Facebook, how he began using React at Instagram, how that led to the growth of React inside Facebook, and how the decision to open-source React happened.  Page includes a complete transcript of the discussion.
 
 
 #### React Fiber

react-performance.md

@@ -174,6 +174,9 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81  
   Good advice on the potential benefits of using `PureComponent`, as well as several potential downsides or gotchas (such as binding functions in `render()`).
 
+- **The Virtual DOM and its Anti-Patterns**  
+  https://medium.com/riipen-engineering/the-virtual-dom-and-its-anti-patterns-aa4c523d00ed  
+  First in a 3-part series discussing causes of slow components and wasteful rendering.  Later posts will cover ways to optimize Redux usage, and tools to find bottlenecks that can be optimized.
 
 
 #### Code Splitting and Progressive Apps
@@ -221,6 +224,14 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
   https://medium.com/@joshuawcomeau/performance-tuning-a-react-application-f480f46dc1a2  
   An excellent case study on improving load time for a small React+Redux app.  Describes use of gzipping, image cropping, lazy loading, and more.
 
+- **A React and Preact Progressive Web App Performance Case Study: Treebo**  
+  https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299  
+  An extensive technical deep dive into how Treebo optimized their React application for good performance on mobile devices.
+
+- **Firebase + React: Optimizing for the Real World**  
+  https://codeburst.io/firebase-react-optimizing-for-the-real-world-4d9edbbd54c5  
+  Describes shrinking a React + Firebase app bundle from 1.7MB to 230KB by switching to smaller alternative packages and analyzing bundle size.
+
 
 #### Immutable Data
 

react-redux-testing.md

@@ -141,6 +141,10 @@
   http://www.alayor.com/2017/Creating-a-React-Component-using-TDD  
   Demonstrates writing a simple React component using the TDD "red-green" testing approach.
 
+- **Unit Testing with Semantic-UI-React and Enzyme**  
+  https://medium.com/bluepick-dev/testing-with-semantic-ui-react-and-enzyme-7cb39228a5ea  
+  Specific tips and advice for testing components that use the Semantic-UI-React library, including advice on focusing your tests on your own components' behavior.  The tips are also applicable to React component testing in general.
+
 #### Redux
 
 - **Simple React/Redux Testing**  
@@ -265,6 +269,14 @@
 - **Unit Testing React, Redux, Selectors, and Epics**  
   https://codeburst.io/unit-testing-react-redux-selectors-and-epics-664e7b4798a8  
   Quick examples of ways to different parts of a React+Redux app.
+
+- **Jest Testing Patterns for React-Redux Applications**  
+  https://ranjithnair.github.io/2017/11/17/Jest-Testing-basics.html  
+  Includes info on basic Jest test setup, as well as examples of using Jest to test React components, Redux-connected components, actions and reducers, API calls, and React event behavior.
+
+- **Recipes for Testing Redux Actions and Reducers**  
+  https://densitylabs.io/blog/recipes-for-testing-redux-actions-and-reducers  
+  Useful examples of testing Redux code, using redux-thunk, chai, axios, redux-mock-store, and axios-mock-adapter.
 
 
 
@@ -356,4 +368,8 @@
 
 - **Stubbing HTTP Reqeusts with Sinon**  
   http://mherman.org/blog/2017/11/06/stubbing-http-requests-with-sinon/  
-  An extensive tutorial that discusses the benefits of stubbing behavior in tests, setting up Mocha+Chai+Sinon, and using Sinon's stub functions in integration and unit tests.
+  An extensive tutorial that discusses the benefits of stubbing behavior in tests, setting up Mocha+Chai+Sinon, and using Sinon's stub functions in integration and unit tests.
+
+- **What makes a good test?**  
+  https://medium.com/@alexkrolick/what-makes-a-good-test-dff3df6058a2  
+  A variety of short thoughts on why we write unit tests, how to write good tests, and some specific suggestions for working with snapshot tests and tests for async behavior.