Updates, 2017-05-28

basic-concepts.md

@@ -138,4 +138,8 @@
 
 - **Javascript is a buffet, not the enemy**  
   https://scriptconf.org/blog/javascript-is-a-buffet-not-the-enemy-chris-heilmann/  
-  An excellent presentation from long-time browser developer Chris Heilmann, offering suggestions for dealing with the modern Javascript world using a buffet as a metaphor.
+  An excellent presentation from long-time browser developer Chris Heilmann, offering suggestions for dealing with the modern Javascript world using a buffet as a metaphor.
+
+- **Are we making the web too complicated?**  
+  http://seldo.com/weblog/2017/05/21/are_we_making_the_web_too_complicated  
+  Fantastic thoughts from Laurie Voss on why modern web development appears to be complicated: expectations for web usage have changed, and developers are trying to adapt.

es6-features.md

@@ -197,6 +197,10 @@
   http://lucybain.com/blog/2017/js-promises-errors-a-plus-vs-deferreds/  
   A comparison of the two most common Promise definitions, and how they differ in behavior
 
+- **Practical Promises**  
+  http://trycatchfail.com/blog/?tag=/promises  
+  An excellent series of articles describing the basics of promises, and listing a variety of useful techniques for using promises to solve problems.
+
 
 #### Techniques
 
@@ -259,4 +263,8 @@
 
 - **History of Javascript: Evolution of JS Modularity**  
   https://github.com/myshov/history_of_javascript/tree/master/4_evolution_of_js_modularity  
-  A well-researched article that recounts the history and development of Javascript module definition approaches
+  A well-researched article that recounts the history and development of Javascript module definition approaches
+
+- **The State of Javascript Modules**  
+  https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358  
+  An extended article summarizing the state of ES module implementations, how the transition to modules relates to the Node ecosystem, and what the changes will mean for Webpack users and module authors.

git-resources.md

@@ -91,6 +91,10 @@
   https://wiki.openstack.org/wiki/GitCommitMessages  
   A number of good practices to follow when making commits and writing commit messages
 
+- **Life-Saving Git Tips**  
+  https://www.cuttlesoft.com/life-saving-git-tips/  
+  A variety of useful tips, including use of cherry-picking, local pulling and testing, and use of aliases to simplify tasks
+
 ## Specific Techniques
 
 - **Git's Patch Mode All the Way**  

immutable-data.md

@@ -55,7 +55,9 @@
   https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702  
   An example of how `Object.assign` can be used to immutably update an array
 
-
+- **ReactCasts #9: Immutability in Javascript**  
+  https://www.youtube.com/watch?v=4LzcQyZ9JOU  
+  A screencast discussing why immutability is important and its benefits.  Compares Javascript's lack of built-in immutability with other languages, and shows how to do immutable operations in plain Javascript.
 
 #### Immutability and React
 
@@ -113,3 +115,7 @@
 - **How to Use Immutable.js in a React Redux Application**  
   https://codebrahma.com/how-to-use-immutable-js-in-a-react-redux-application/  
   Answers to six common questions about why and how to use Immutable.js in a React/Redux app, including whether to keep everything as Immutable.js objects, whether to use it inside of components, and potential benefits of using Immutable.js
+
+- **Immutable Deep State Updates in React with Ramda.js**  
+  https://vanslaars.io/post/setstate-lenses/  
+  Some excellent examples of how to use Ramda's "lens" functions to define immutable state update logic

project-structure.md

@@ -80,6 +80,10 @@
   https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app/  
   https://www.reddit.com/r/reactjs/comments/5widfg/how_okcupid_organizes_its_multipage_react_app/  
   The OkCupid team discusses their approach for a multi-page app, including bundles, use of the Ducks pattern, and folder structures.  Some good follow-up discussion in the Reddit comments.
+
+- **React Project Structure**  
+  https://daveceddia.com/react-project-structure/  
+  An excellent article that gives practical advice for structuring the source of a React app, especially if you're a beginner or using `create-react-app`.
 
 
 #### Project Setup

react-architecture.md

@@ -220,6 +220,10 @@
   http://www.benmvp.com/slides/2017/oscon/react-properly.html#/  
   A presentation by Ben Ilegbodu of Eventbrite, listing several useful best practices like use of ESLint, good structure for render functions, and more.
 
+- **You Can Spread Props in JSX, But Should You?**  
+  https://medium.com/@kylpo/you-can-spread-props-in-jsx-but-should-you-6cc3e766e281  
+  Some thoughts on the pros and cons of using JSX's object spread operator, including examples of how it is compiled via Babel
+
 
 
 #### React Architecture

react-component-patterns.md

@@ -327,6 +327,10 @@
   https://medium.com/@DjamelH/why-you-should-keep-your-react-components-pure-by-using-hocs-67e5c7f80c81  
   Walks through extracting stateful behavior into an HOC so that it's more reusable and the wrapped components are simpler.
 
+- **A gentle introduction to Higher Order Components**  
+  https://www.robinwieruch.de/gentle-introduction-higher-order-components/  
+  An excellent article demonstrating several ways to use HOCs to manage conditional rendering logic in a reusable way.
+
 
 #### Wrapping Non-React Code
 
@@ -390,6 +394,10 @@
   https://hackernoon.com/how-and-why-to-use-d3-with-react-d239eb1ea274  
   A good overview of some of the libraries and approaches you can make use of to use D3 in a React app
 
+- **Integrating React with an Existing jQuery Web Application**  
+  http://www.primaryobjects.com/2017/05/08/integrating-react-with-an-existing-jquery-web-application/  
+  Covers 3 methods for methods for integrating React and jQuery: referencing jQuery from within React, using a helper class passed to React, and using a pub-sub model passed to React.
+
 
 #### Modal Dialogs
 
@@ -438,6 +446,10 @@
   http://blog.jakoblind.no/2017/04/03/how-to-add-state-to-functional-components-using-recompose/  
   Some quick examples of using the Recompose library to wrap components with additional behavior.
 
+- **Top 5 Recompose HOCs**  
+  https://medium.com/@abhiaiyer/top-5-recompose-hocs-1a4c9cc4566  
+  A list of 5 useful HOCs provided by the Recompose library, including `branch` and `withHandlers`.
+
 
 #### Other Component Patterns
 

react-forms.md

@@ -57,6 +57,10 @@
 - **Collecting data from a wizard form**  
   https://goshakkk.name/wizard-form-collect-info/  
   Examples of how to handle data management for a multi-step form
+
+- **React Forms: Using Refs**  
+  https://css-tricks.com/react-forms-using-refs/  
+  A quick recap of what "controlled components" are, and some excellent examples of how to use refs to directly access values for different types of inputs in forms
 
 
 #### Form Tutorials and Usage
@@ -114,6 +118,10 @@
   https://medium.com/@robbiedelavictoria/better-form-management-37c994095b1c  
   A couple useful examples of approaches for simplifying React form handling logic. 
 
+- **Forms in React**  
+  http://presentations.survivejs.com/forms-in-react/#/  
+  Slides for a workshop on approaches for managing forms in React.  Includes summaries of the various major approaches for managing forms, and links to several useful form-related libraries.
+
 
 #### Form Validation
 

react-implementation.md

@@ -66,8 +66,14 @@
   https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5  
   https://engineering.hexacta.com/didact-element-creation-and-jsx-d05171c55c56  
   https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b  
+  https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0  
+  https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37  
   An ongoing series of articles showing how to build parts of React's API and implementation, like `createElement`.
 
+- **deact: React under the hood**  
+  https://github.com/lukebelliveau/deact  
+  A repository for learning about how React works internally.  Has a link to a slide set that explains the concepts, and has branches for the various lessons.
+
 
 
 #### Implementation and Internals

react-native.md

@@ -31,6 +31,9 @@
   https://medium.com/react-native-development/build-an-imgur-client-with-react-native-and-mobx-react-native-school-53146d648250  
   A tutorial that demonstrates build an RN app with MobX for state management, use of RESTful APIs, full-screen images in a ListView, and detection of device orientation
 
+- **Offline-First Apps with React Native and Redux**  
+  http://rationalappdev.com/offline-first-apps-with-react-native-and-redux/  
+  A tutorial that builds out a cat GIF app using React Native, Redux, Node, and Express, and includes offline support.
 
 
 #### Specific aspects

react-performance.md

@@ -139,6 +139,18 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3  
   Excellent advice and information from the Twitter Lite dev team on how they optimized their app, including code splitting, ways to avoid "jank", optimizing React rendering, optimizing Redux usage, and more.
 
+- **Optimizing React Rendering**  
+  https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02  
+  Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`.  Has a link to further discussion on HN.
+
+- **Introducing react-wastage-monitor**  
+  https://blog.listium.com/introducing-react-wastage-monitor-404565d679b2  
+  Describes a number of common perf issues in React apps, and how the react-wastage-monitor library can be used to detect them
+
+- **Infinite List and React**  
+  http://itsze.ro/blog/2017/04/09/infinite-list-and-react.html  
+  A Twitter developer describes some of the challenges they faced in building a performant infinite scrolling list component
+
 
 #### Code Splitting and Progressive Apps
 

react-redux-testing.md

@@ -194,6 +194,14 @@
 - **Unit Testing Redux Container Components, Part 1**  
   http://www.wsbrunson.com/react/redux/test/2016/05/08/testing-redux-containers.html  
   Some useful tips for setting up tests for Redux-connected components
+
+- **Code Review: SPA testing with React and Redux**  
+  https://b3ntly.github.io/blog/code-review-spa-testing-with-react-and-redux-long/  
+  A variety of useful observations and suggestions for testing React+Redux code, including good practices for structuring test setup
+
+- **Test Your Redux Container with Enzyme**  
+  https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec  
+  Examples for using Enzyme to test Redux-connected components, including passing in a mock store, use of shallow rendering, and testing `mapDispatch`.
 
 
 
@@ -266,4 +274,6 @@
   https://spin.atomicobject.com/2017/05/02/react-testing-jest-vs-mocha/  
   A comparison of the strengths and weaknesses of the Jest and Mocha testing frameworks
 
-
+- **Javascript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape, and Jest**  
+  https://raygun.com/blog/javascript-unit-testing-frameworks/  
+  A useful comparison and summary of the major unit testing frameworks available

react-styling.md

@@ -18,6 +18,10 @@
   https://speakerdeck.com/alexlande/components-a-styling-odyssey  
   Slideshow discussing pros and cons of various approaches to managing styles for components
 
+- **A Unified Styling Language**  
+  https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660  
+  A fantastic article that reviews why people might want to write their styles in Javascript, explores possible benefits of doing so, and looks at how the "CSS" and "JS" communites can work together going forward.
+
 
 #### Components and Styling
 
@@ -41,6 +45,10 @@
   https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/  
   Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling).
 
+- **James Kyle's thoughts on styling and components**  
+  https://twitter.com/i/moments/861549552901468160  
+  A Twitter thread from James Kyle, discussing how many of the arguments about styling and components are a result of people building different kinds of applications
+
 
 #### CSS-Based Approaches
 

redux-architecture.md

@@ -196,6 +196,22 @@
 - **Some tips for getting started with Redux**  
   https://medium.com/@dave.draper20/some-tips-for-getting-started-with-redux-187fa949c0e8  
   Some excellent suggestions for getting into Redux, including not using it until you need it, use of `connect`, and making sure to call functions that were passed down as props.
+
+- **Quick Redux tips for connecting your React components**  
+  https://medium.com/dailyjs/quick-redux-tips-for-connecting-your-react-components-e08da72f5b3  
+  A couple quick suggestions for use of `connect`, including connecting lower in the tree and using the `renderCountProp` option
+
+- **Dispatch Redux actions as events, not commands!**  
+  https://hackernoon.com/dispatch-redux-actions-as-events-not-commands-4de8a92b1ea5  
+  Some opinionated thoughts on naming and intent for Redux actions, and why actions should be treated similar to event sourcing
+
+- **Don't Overcomplicate Javascript, #0: Redux Action Constants**  
+  https://bits.ristic.io/dont-overcomplicate-javascript-0  
+  Some thoughts on the pros and cons of defining action constants for reuse in Redux apps, and whether it's a good idea to use libraries to help define those constants.
+
+- **Is using a mix of Redux state and React local component state ok?**  
+  http://blog.jakoblind.no/2017/02/08/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/  
+  A short article expanding on the rules of thumb for when to use Redux state given in the Redux FAQ, with some examples for each rule of thumb.
 
 
 #### Encapsulation and Reusability

redux-side-effects.md

@@ -43,6 +43,10 @@
   http://blog.jakoblind.no/2017/04/25/async-actions-with-redux-thunk-demystified/  
   A quick look at the source code for redux-thunk, how it works, and how to use it.
 
+- **Sense-ible Redux Thunk**  
+  https://medium.com/sensehq/sense-ible-redux-thunk-30b866ca5914  
+  Examples of how to define reusable caching and authorization handling for thunks using decorators
+
 
 #### Side Effect Approach Comparisons
 

redux-techniques.md

@@ -34,6 +34,11 @@
 - **Time Travel in React Redux apps using the Redux DevTools**  
   https://onsen.io/blog/react-redux-devtools-with-time-travel/  
   Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging.
+
+- **Redux Logging in Production / Maximizing Debuggability in Redux**  
+  https://blog.logrocket.com/redux-logging-in-production-3b2a4816b713  
+  https://blog.logrocket.com/maximizing-debuggability-with-redux-79b2ad07b64c  
+  A pair of articles discussing a variety of aspects and approaches for debugging Redux apps.  Includes several mentions of the LogRocket service, but also covers other tools and approaches, including building your own analytics pipeline.
 
 
 #### Reducers
@@ -159,6 +164,10 @@
 - **How I Stumbled Upon Normalizing Redux State**  
   http://kyleshevlin.com/how-i-stumbled-upon-normalizing-redux-state/  
   A short summary of the benefits and concept behind normalizing state
+
+- **React, Reselect, and Redux**  
+  https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c  
+  An explanation of how Reselect's memoized selector functions are useful in Redux apps, and how to create unique selector instances for each component instance.
 
 
 #### UI and Widget Implementations

redux-tutorials.md

@@ -227,6 +227,7 @@
 
 - **Nathan's Guide to Building a React/Redux Application**  
   https://www.nathanl.in/posts/nathans-guide-to-building-kick-ass-react-applications-part-i  
+  https://www.nathanl.in/posts/building-kickass-react-applications-with-nathan-part-ii-adding-redux  
   A tutorial intended to bridge the gap between "hello world" tutorials and "real-world" boilerplates.  Covers building a server-rendered React application using Webpack 2, React Router 4, Redux, and ES6.
 
 

static-typing.md

@@ -148,6 +148,10 @@
 - **Type-safe Flux Standard Actions in React**  
   https://www.triplet.fi/blog/type-safe-flux-standard-actions-fsa-in-react-using-typescript-fsa/  
   Describes the "Flux Standard Action" concept, and how the TypeScript FSA library can be used to help generate FSAs in a type-safe way.
+
+- **Type-Safe Asynchronous Actions (Redux-Thunk) Using TypeScript FSA**  
+  https://www.triplet.fi/blog/type-safe-asynchronous-actions-redux-thunk-using-typescript-fsa/  
+  Examples of how to generate and use type-safe async actions in TypeScript
 
 - **React & Redux in TypeScript - Static Typing Guide**  
   https://github.com/piotrwitek/react-redux-typescript-guide  

webpack-advanced-techniques.md

@@ -184,6 +184,10 @@
   https://blog.craftlab.hu/how-to-do-proper-tree-shaking-in-webpack-2-e27852af8b21  
   Explains several important concepts related to tree shaking, and how to configure Webpack and other tools to ensure it happens correctly.
 
+- **3 ways to reduce Webpack bundle size**  
+  http://blog.jakoblind.no/2017/05/18/3-ways-to-reduce-webpack-bundle-size/  
+  A quick summary of some possible approaches to optimize bundle sizes, with links to more information
+
 
 #### Hot Module Replacement
 
@@ -317,6 +321,10 @@
   https://kostasbariotis.com/environment-based-application-configuration-using-webpack/  
   An explanation of how environment-based configuration is useful, and a couple examples of ways to handle config files for varying environments.
 
+- **From Grunt and Bower to Webpack, Babel, and Yarn - Migrating a legacy front-end build system**  
+  https://medium.com/appifycanada/migrate-to-webpack-from-grunt-bower-legacy-build-system-344526f47873  
+  A recap of the steps needed to migrate an Angular app's build system to Webpack, including managing imports, handling global variables, and code splitting.
+
 
 
 #### Webpack Tools

webpack-tutorials.md

@@ -222,6 +222,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
   http://andrewhfarmer.com/webpack-2-loader-variations/  
   A clear and informative overview of the various equivalent ways to write the loader-related parts of a Webpack 2 config file.
 
+- **Stages of Learning Webpack, Part 2 - The Config**  
+  https://dev.to/nitishdayal/stages-of-learning-webpack-pt-2---the-config  
+  Explains what Webpack is by explaining some of the problems it attempts to solve, and looks at the basics of a Webpack configuration.
+
 
 #### Webpack Configuration Utilities