diff --git a/basic-concepts.md b/basic-concepts.md index a88b902..cd65ba9 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -81,7 +81,12 @@ https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3 Advice from Addy Osmani on how to cope with learning new JS technologies - - **"Ask HN: Overwhelmed with learning front-end, how do I proceed?"** https://news.ycombinator.com/item?id=12882816 - A discussion thread with numerous suggestions for ways to learn front-end technologies. \ No newline at end of file + A discussion thread with numerous suggestions for ways to learn front-end technologies. + +- **Deciding What to Learn / When the Latest Tech Makes You Feel Dumb** + http://gedd.ski/post/what-not-to-learn/ + http://gedd.ski/post/when-tech-makes-you-feel-dumb/ + A pair of short but excellent posts giving advice on how to deal with tech and information overload. + \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 1cfb0a1..6a493d7 100644 --- a/git-resources.md +++ b/git-resources.md @@ -45,6 +45,9 @@ http://rypress.com/tutorials/git/index An excellent introduction to Git's key concepts and command. Very well written and explained. +- **Git for Humans** + https://speakerdeck.com/alicebartlett/git-for-humans + A slideshow introducing Git concepts without complex terminology #### Tips and Useful Info @@ -76,10 +79,22 @@ https://medium.com/@zlobin/advanced-git-advice-27087a7fbb29 A variety of useful tips and commands. + +## Specific Techniques + - **Git's Patch Mode All the Way** https://blog.petrzemek.net/2016/07/10/git-patch-mode-all-the-way/ Shows how to use Git's ability to selectively pick and choose chunks of code as part of various actions +- **Git: Undoing changes and rewriting history** + http://slides.com/lilianakastilio/github-4#/ + A slideshow discussing various ways to change commit history + +- **Beginner's guide to git rebasing and squashing** + https://shinglyu.github.io/web/2016/11/08/servo-rebase-and-squash-guide.html + A tutorial on rebasing and squashing commits to change past history. + + #### E-Books - **Pro Git** @@ -94,6 +109,7 @@ https://github.com/pluralsight/git-internals-pdf A free PDF that digs deep into Git's data structures and behavior + #### Workflows - **Git Workflows** diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 4fd6282..6c6a14e 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -5,7 +5,7 @@ - **MobX Docs** https://github.com/mobxjs/mobx https://mobxjs.github.io/mobx/ - https://mobxjs.github.io/mobx/getting-started.html + https://mobxjs.github.io/mobx/getting-started.html The official MobX site, with documentation including a getting started introduction and API reference. - **Getting Started with MobX - Video Series** @@ -20,7 +20,7 @@ https://www.youtube.com/watch?v=XGwuM_u7UeQ In depth introduction to MobX with React including 'Why mobx' (all coded with ES5). -- **React Native with MobX — Getting Started** +- **React Native with MobX — Getting Started** https://medium.com/@dabit3/react-native-with-mobx-getting-started-ba7e18d8ff44 An introduction article about combining MobX and React Native to create a simple list app. diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 6e9f1e6..2e49a50 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -149,7 +149,7 @@ similar structures in ClojureScript. - **"Youtube is being rebuilt on Web Components"** https://www.reddit.com/r/javascript/comments/59ax4f/youtube_is_being_rebuilt_on_web_components_and/d97rsdd/ - SOme interesting thoughts on how various frameworks have approached composition, and how React helps make it more approachable. + Some interesting thoughts on how various frameworks have approached composition, and how React helps make it more approachable. #### React's PATENTS License @@ -179,6 +179,6 @@ similar structures in ClojureScript. https://news.ycombinator.com/item?id=12108526 https://vimeo.com/170598656#comment_14699807 https://github.com/facebook/react/issues/7293 - https://news.ycombinator.com/item?id=12597488 + https://news.ycombinator.com/item?id=12597488 More discussion threads regarding the PATENTS license \ No newline at end of file diff --git a/react-architecture.md b/react-architecture.md index 9910789..4355c88 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -66,8 +66,15 @@ - **Functional Javascript: Reverse-Engineering the Hype** http://banderson.github.io/functional-js-reverse-engineering-the-hype/#/ A slideshow that talks about why functional-type programming matters, and how it relates to React-type apps. - - + +- **Principles of Strong Components** + http://gedd.ski/post/strong-components/ + Generic advice on designing good components. Not React-specific, but highly applicable to React. + +- **Some Thoughts on Function Components in React** + https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7 + Suggestions for ways to approach writing components, particularly using React's functional component syntax + #### React Best Practices diff --git a/react-component-patterns.md b/react-component-patterns.md index a5969e8..ec9c372 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -34,6 +34,10 @@ http://ctheu.com/2015/02/10/ownership-and-children-in-reactjs/ Discusses the difference between "parent" and "owner" relationships, and what the "children" prop can look like. +- **ReactCasts #3: React's Children API** + https://www.youtube.com/watch?v=DJ53-G8EbxE + A screencast demonstrating how the "children" prop to compose components together + #### React Component Lifecycle @@ -80,6 +84,10 @@ https://www.youtube.com/watch?v=k9AhBMwj1w4 A talk on what `context` is, and how to use it safely +- **ReactCasts #4: Context (Part 1)** + https://www.youtube.com/watch?v=lxq938kqIss + A two-part series explaining what React's `context` feature can be used for, and some potential concerns to be aware of when using it + #### Component Categories @@ -200,4 +208,4 @@ - **"What is the ideal way to pass data to a callback prop?** https://gist.github.com/jazlalli/fdee443405680f96d19211daa15d1d38 - Discussion and examples of various ways to pass data to callbacks between children and parents \ No newline at end of file + Discussion and examples of various ways to pass data to callbacks between children and parents diff --git a/react-performance.md b/react-performance.md index cbca0b1..a0e72f2 100644 --- a/react-performance.md +++ b/react-performance.md @@ -92,6 +92,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209 Discussion and examples of using the "virtualization" technique to only render list components that are currently in view. +- **Creating more efficient React views with windowing** + https://bvaughn.github.io/connect-tech-2016/#/ + An excellent slideshow on performance topics from the author of the React-Virtualized library. Covers sources of slowness, ways to avoid re-renders, and a deep look at "windowing/virtualization" for high-performance lists. + #### Code Splitting and Progressive Apps diff --git a/react-redux-testing.md b/react-redux-testing.md index f795b31..7f7bc76 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -138,6 +138,11 @@ https://daveceddia.com/testing-for-proptypes-errors/ Some quick examples that use Sinon to check for error logging to help verify correct prop usage during testing. +- **What to Test in a React App** + https://daveceddia.com/what-to-test-in-react-app/ + General guidance on what types of tests you might want to write and what to test for. + + #### General Testing, Tools, and Setup - **Javascript Testing: Unit vs Functional vs Integration** @@ -164,4 +169,7 @@ http://www.theodo.fr/blog/2016/04/keep-calm-and-love-javascript-unit-tests-part-1/ http://www.theodo.fr/blog/2016/06/keep-calm-and-love-javascript-unit-tests-part-2-asynchronism/ An introduction to using Mocha, Chai, and Sinon to write unit tests for various scenarios. - \ No newline at end of file + +- **UI Testing at Urban Airship** + https://github.com/urbanairship/technical-blog/blob/master/AirshipUITesting.md + In-depth discussion of complexities and approaches for testing real-world UI code, including test runners, mocking, and more. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 56c3168..a43f085 100644 --- a/react-styling.md +++ b/react-styling.md @@ -58,4 +58,12 @@ - **Components: A Styling Odyssey** https://speakerdeck.com/alexlande/components-a-styling-odyssey - Slideshow discussing pros and cons of various approaches to managing styles for components \ No newline at end of file + Slideshow discussing pros and cons of various approaches to managing styles for components + +- **Styling ReactJS Applications** + https://www.youtube.com/watch?v=19gqsBc_Cx0 + Max Stoiber's talk at ReactNL 2016, comparing various options for styling React applications and introducing his new library, Styled-Components. + +- **Scalable Styles in Production JS** + https://medium.com/front-end-hacking/scalable-styles-in-production-js-cde88016f357 + Some comparisons between various approaches to managing styles (plain CSS, inline styles, CSS-in-JS), and why Aphrodite can help solve some of the issues that come up. \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index a06fbf2..628f868 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -100,6 +100,10 @@ http://www.globalnerdy.com/2016/07/22/a-walk-through-my-just-enough-react-to-get-you-into-trouble-presentation-at-tampa-code-camp-2016/ A blog post version of a talk introducing React's core concepts, and demoing them in JSFiddle +- **React Intro** + https://docs.google.com/presentation/d/19DaabQG8CB4INKGpaHao0hIXcB7zmETg4IHOZkF7MPM + A slideshow from Lee Byron, one of React's early team members, giving an overview of what React is, how it works, and how it can fit into applications. + #### Project-Based Tutorials diff --git a/redux-architecture.md b/redux-architecture.md index 0c70384..255fb64 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -115,6 +115,10 @@ https://dzone.com/articles/real-world-reactjs-and-redux-part-2 A series of articles covering practical architecture lessons learned from building Redux apps, especially regarding use of custom middleware +- **Idiomatic Redux: Why Use Action Creators?** + http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/ + Thoughts on why consistent use of action creators is a good practice, as opposed to putting logic inline into components. + #### Encapsulation and Reusability @@ -164,6 +168,9 @@ http://slides.com/omnidan/hor#/ A set of slides discussing how reducers can be layered together to add capabilities +- **Redux Issue #822: "How to create a generic list as a reducer?"** + https://github.com/reactjs/redux/issues/822 + Discussion of various approaches to the "generic list of reusable components" problem #### Variations on Redux Architectures diff --git a/redux-side-effects.md b/redux-side-effects.md index 8f2f1ed..c9c88cd 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -22,6 +22,11 @@ - **Why doesn't Redux support AJAX out of the box?** http://goshakkk.name/redux-no-ajax-by-default/ Looks at how AJAX calls fit into a Redux application + +- **Adding Customized Asynchrony to Redux** + https://anyperk.engineering/im-lauren-and-i-m-a-frontend-apprentice-here-at-anyperk-a1a40106d231 + A quick introduction to some of the libraries that can be used to manage asynchronous behavior in Redux. + #### Sagas @@ -75,4 +80,8 @@ - **Lazy registration with Redux and Sagas** http://goshakkk.name/lazy-auth-redux-saga-flow/ - Examples of using Redux-Saga to implement an async series of user interactions. \ No newline at end of file + Examples of using Redux-Saga to implement an async series of user interactions. + +- **A Saga that led Xero to Redux** + https://devblog.xero.com/a-saga-that-led-xero-to-redux-aa1361b9a800 + Examples of how Xero's async logic for their dashboard evolved over team, from nested callbacks to promises to Redux with sagas \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index c800222..096fa85 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -26,6 +26,10 @@ - **A Quick Look at the React and Redux DevTools** http://mediatemple.net/blog/tips/a-quick-look-at-the-react-and-redux-devtools/ An intro to using the React DevTools and Redux DevTools extensions for debugging + +- **Improve your development workflow with the Redux DevTools Extension** + https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83 + The author of the Redux DevTools extension describes new features, including "pause/locking" for iteration on behavior, and some changes needed to add it to the store. #### Reducers @@ -62,6 +66,10 @@ http://www.mattzeunert.com/2016/06/01/redux-mistakes.html Some suggestions on how to handle denormalizing data and defining actions. +- **Practical Redux: Using Redux-ORM** + http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/ + http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/ + A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques. #### UI and Widget Implementations @@ -82,6 +90,10 @@ https://medium.com/@yaoxiao1222/implementing-search-filter-a-list-on-redux-react-bb5de8d0a3ad Some quick examples of using Redux to supply a list of items as a prop, and using React local component state to store a filtered version based on inputs. +- **Creating Reusable Generic Modal Dialogs with React and Redux** + https://www.packtpub.com/books/content/creating-reusable-generic-modals-react-and-redux + A quick look at how to get results from generic dialogs like a ColorPicker, while keeping your Redux state serializable and component structure decoupled. + #### Redux and Forms @@ -119,6 +131,10 @@ http://codepen.io/vnovick/pen/pEgKww/?editors=0010#0 Discussion and demonstration of some ways to load reducers and components at runtime. +- **Secure file uploads with redux-plupload** + http://engineering.tes.com/post/secure-file-uploads/ + Some examples of how to use Redux-Plupload to manage file uploads + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index a5ff75a..879b74a 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -175,6 +175,11 @@ - **Build a Media Library With React, Redux, and Redux-Saga** https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-1 A two-part tutorial that builds an image and video display and preview app + +- **Practical Redux** + http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/ + http://blog.isquaredsoftware.com/2016/11/practical-redux-part-3-project-planning-and-setup/ + An ongoing series of posts intended to demonstrate a number of specific Redux techniques by building a sample sample application, based on the MekHQ application for managing Battletech campaigns. #### Redux Implementation Walkthroughs @@ -200,7 +205,8 @@ - **AMA with the Redux Creators** https://hashnode.com/ama/with-redux-cisteui6p005gzx53fstg8t6l - Dan Abramov and Andrew Clark answer questions about Redux, and describe the history of its original development. + https://blog.hashnode.com/the-story-of-redux-and-more/ + Dan Abramov and Andrew Clark answer questions about Redux, and describe the history of its original development. Second link is a summary of answers in the AMA. #### Paid Courses and Books diff --git a/static-typing.md b/static-typing.md index fe4cfaa..105a196 100644 --- a/static-typing.md +++ b/static-typing.md @@ -78,6 +78,14 @@ - **Redux Flow Tutorial** http://dchambers.github.io/articles/redux-flow-tutorial/ Covers how to set up Flow for type-checking a Redux application + +- **Exhaustive switch in Flow** + https://ouicar.github.io/2016/08/08/exhaustive-switch.html + A trick to help catch missing case errors in switch statements. + +- **Typed Redux** + https://blog.callstack.io/typed-redux-2aa8bff926ff + Examples of how to use Flow to add typing to Redux apps #### Comparisons @@ -88,4 +96,8 @@ - **Flow vs TypeScript** http://djcordhose.github.io/flow-vs-typescript/flow-typescript-2.html#/ - A comparison of the features, goals, and usage of both type systems \ No newline at end of file + A comparison of the features, goals, and usage of both type systems + +- **Typescript vs Flow** + https://gist.github.com/voltrevo/ecb5b7292707d29b13ae453ae0b529d9 + A comparison of common features, advantages in either system, missing features, and other aspects. \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 29483a0..f8e58b9 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -84,6 +84,10 @@ https://github.com/lcxfs1991/blog/issues/15 An in-depth look at the parts that go into a Webpack build, and how each piece can be optimized for a faster build. +- **Webpack Config: Commons Chunk Plugin part 1** + https://www.youtube.com/watch?v=-xzWMKuiS2o + An intro to what the Webpack Commons Chunk Plugin does and how it works + #### Hot Module Replacement - **Webpack and Hot Module Replacement** @@ -149,7 +153,8 @@ Instructions on how to configure multiple entry points properly - **Long-term caching of static assets with Webpack** - https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95 Gathers documentation on proper use of asset caching into one article to act as a complete guide. + https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95 + Gathers documentation on proper use of asset caching into one article to act as a complete guide. - **Goodbye "../../../"** http://davidboyne.co.uk/2016/04/29/react-webpack-gem.html diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 825f92d..46c1ee1 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -28,6 +28,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack 101: An Introduction to Webpack** http://code.hootsuite.com/webpack-101/ A useful intro to Webpack's concepts and capabilities, with some examples. + +- **Webpack: The Missing Guide** + http://www.eloquentwebapp.com/webpack-missing-guide/ + An intro to what Webpack is, what it can do, and how to use it. #### Basic Tutorials