From 9e815c9fd58d279317bf41e9ebc09775a94d0d0e Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 6 Nov 2016 14:48:18 -0500 Subject: [PATCH] Updates, 2016-11-06 --- basic-concepts.md | 18 ++++++++++++------ boilerplates-and-starter-kits.md | 3 +++ git-resources.md | 4 ++++ javascript-resources.md | 13 ++++++++++++- pros-cons-discussion.md | 4 ---- react-ajax.md | 6 +++++- react-performance.md | 6 ++++-- react-state-management.md | 4 +--- react-tutorials.md | 5 +++++ redux-tutorials.md | 4 ++++ static-typing.md | 20 ++++++++++++++++++++ webpack-tutorials.md | 4 ++++ 12 files changed, 74 insertions(+), 17 deletions(-) diff --git a/basic-concepts.md b/basic-concepts.md index 714770c..a88b902 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -43,15 +43,16 @@ https://youtu.be/5NIL3Epadj0 A talk by Jack Franklin, summarizing the state of modern web development. -- **JavaScript Stack from Scratch** - https://github.com/verekia/js-stack-from-scratch - This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch. - - **Javascript Package Managers 101** https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a An overview of what packages and package managers are, some related terms, and how these tools work. -#### React Learning Guidelines + +#### Suggested Learning Approaches + +- **A Study Plan to Cure Javascript Fatigue** + https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1 + The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem. - **React How-To** https://github.com/petehunt/react-howto @@ -78,4 +79,9 @@ - **How to keep up: "First do it, then do it right, then do it better"** https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3 - Advice from Addy Osmani on how to cope with learning new JS technologies \ No newline at end of file + 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 diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index dcb43d7..3f9af83 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -25,6 +25,9 @@ https://github.com/Jordaanm/hipster-boilerplate A learning-oriented repo that builds up a small project config step-by-step. Each commit adds one new feature or capability (Babel+ES6, Webpack bundling, a small Redux app, LESS styling, routing, and hot-reloading). +- **JavaScript Stack from Scratch** + https://github.com/verekia/js-stack-from-scratch + This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch. #### Full-Featured Starter Kits diff --git a/git-resources.md b/git-resources.md index f2b4bdd..1cfb0a1 100644 --- a/git-resources.md +++ b/git-resources.md @@ -130,6 +130,10 @@ - **giteveryday** https://www.kernel.org/pub/software/scm/git/docs/giteveryday.html A useful minimum set of commands for Everyday Git. Commands grouped by usefulness to different categories of users. + +- **Git Getting Started Cheat Sheet** + https://gist.github.com/akras14/3d242d80af8388ebca60 + Another useful list of commands with explanations #### Desktop GUI Clients diff --git a/javascript-resources.md b/javascript-resources.md index 58e580a..d0cfb0c 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -37,7 +37,13 @@ While this list is primarily focused on learning React and Redux, and generally https://github.com/adam-s/js-interview-review Collected resources for studying Javascript and preparing for an interview - +- **Zero to One: How I Mastered Javascript and You Can Too** + https://hashnode.com/post/zero-to-one-how-i-mastered-javascript-and-how-you-can-too-ciuwmrw9j00r50q539clhhdj7 + An article describing how one person approached learning Javascript, with suggestions and advice to follow. + +- **Want to Learn Javascript in 2016?** + https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225 + Extensive suggestions for resources to use when learning Javascript @@ -114,6 +120,11 @@ While this list is primarily focused on learning React and Redux, and generally - **Grokking Scope in Javascript** https://code.tutsplus.com/tutorials/grokking-scope-in-javascript--cms-26259 Advice for understanding how Javascript variable coping works + +- **Let It Be - How to declare JavaScript variables** + http://madhatted.com/2016/1/25/let-it-be + https://www.reddit.com/r/javascript/comments/44yjzo/let_it_be_how_to_declare_javascript_variables/ + A look at how `var`, `let`, and `const` behave, and how using them communicates intent. Further discussion in the Reddit comments. #### Paid Courses and Books diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 985cff0..6e9f1e6 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -29,10 +29,6 @@ #### Redux/Flux Comparisons - -- **The Case for Flux** - https://medium.com/swlh/the-case-for-flux-379b7d1982c6#.tgrsz3zhc - The author of Redux lays out reasons you might want to use a Flux-style architecture - **Redux: Concept Over Implementation** http://www.schibsted.pl/2015/09/redux-concept-over-implementation/ diff --git a/react-ajax.md b/react-ajax.md index e27dd54..efc1a17 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -26,4 +26,8 @@ - **AJAX Requests in React: How and Where to Fetch Data** https://daveceddia.com/ajax-requests-in-react/ - An overview of where AJAX requests fit into React usage. \ No newline at end of file + An overview of where AJAX requests fit into React usage. + +- **Slaying a UI Antipattern in Fantasyland** + https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a + Examples of how to handle the common "loading/no data/data" issue with some static typing and FP principles. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index b23f666..cbca0b1 100644 --- a/react-performance.md +++ b/react-performance.md @@ -83,13 +83,15 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://www.reddit.com/r/reactjs/comments/4ri9x8/dont_use_bind_when_passing_props/ Advice on approaches to function binding, with further discussion. - - - **React Perf Debugging: Animation and FLIPping** https://engineering.siftscience.com/browser-dgaf-that-you-use-react/ https://engineering.siftscience.com/browser-dgaf-use-react-pt-2-flipping-react/ A deep dive into some tricky issues that come up with running animations, and some ways to work around those. +- **Virtualizing the Virtual DOM** + 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. + #### Code Splitting and Progressive Apps diff --git a/react-state-management.md b/react-state-management.md index e323236..0e8088a 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -27,9 +27,7 @@ https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e Discussion of why using props to initialize a component's state may or may not be a bad idea. -- **How to safely use React context** - https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076 - Guidelines for when and how to actually use React's `context` feature + - **Best Practices for Component State in React** http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html diff --git a/react-tutorials.md b/react-tutorials.md index 032a729..eaf6682 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -317,6 +317,11 @@ Also see the course sites listed in the [Community Resources](community-resource http://www.pro-react.com/ The book teaches you how to successfully structure increasingly complex front-end applications and interfaces. You will learn how to use React completely, and learn best practices for creating interfaces in a composable way. You will also cover additional tools and libraries in the React ecosystem (such as React Router and Flux architecture). +- **React: Up & Running** + http://shop.oreilly.com/product/0636920042266.do + http://www.phpied.com/react-up-and-running/ + A book that starts with 0 setup and no tools, just React, then moves on to introduce additional syntax while building a CRUD app. Also covers linting, testing, build processes, and data management. + **appendTo Instructor-led React Courses** https://appendto.com/courses/react-training/ appendTo offers instructor-led, hands-on React training courses on React, Redux, React Native, ES6, and Webpack. diff --git a/redux-tutorials.md b/redux-tutorials.md index 81314f3..65a55ac 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -172,6 +172,10 @@ https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ A tutorial teaching Redux usage with a plain JS UI layer on top +- **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 + #### Redux Implementation Walkthroughs - **Read the Source ep17 - React Redux with Dan Abramov** diff --git a/static-typing.md b/static-typing.md index d406feb..fe4cfaa 100644 --- a/static-typing.md +++ b/static-typing.md @@ -50,6 +50,10 @@ - **Why Use Flow?** https://blog.aria.ai/post/why-use-flow/ A look at the concepts of static typing and type inference, examples of using Flow to add type declarations to code, and pointers to further information on Flow. + +- **Why You Need Types** + http://jaysoo.ca/2016/08/23/why-you-need-types/ + Some thoughts on how static typing can help development, with examples using Flow. - **Runtime Introspection of Flow Types** https://medium.com/@joe_stant/runtime-introspection-of-flow-types-ddb7e5b042a5 @@ -58,6 +62,22 @@ - **Phantom Types with Flow** https://medium.com/@gcanti/phantom-types-with-flow-828aff73232b Description of an advanced technique for tracking data flow using types + +- **Checking React and Redux Code with Flow** + http://djcordhose.github.io/react-intro-live-coding/2016_jsunconf.html#/ + A slideshow that shows the basics of adding type information to Redux-based code + +- **Using Redux with Flow** + http://frantic.im/using-redux-with-flow + Covers how to use Flow typing with Redux + +- **Type Checking with Flow in React + Redux** + http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-flow/ + Demonstrates setting up static typing with an existing project + +- **Redux Flow Tutorial** + http://dchambers.github.io/articles/redux-flow-tutorial/ + Covers how to set up Flow for type-checking a Redux application #### Comparisons diff --git a/webpack-tutorials.md b/webpack-tutorials.md index d33942b..bb6dc6c 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -105,6 +105,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Getting Started with Webpack 2** https://medium.com/written-with-envy/getting-started-with-webpack-2-ed2b86c68783 An introduction to Webpack's concepts and configuration, and how to use the latest version to handle various build goals. + +- **Migrating to Webpack 2** + http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/ + Tips for migration an existing Webpack config to work properly with Webpack 2 #### Configuration Terms and Concepts