Articles

• Design Inspiration

  • https://reelgood.com/

• Session and Local Storage

  • https://www.robinwieruch.de/local-storage-react

• React onClick Event Handling

  • https://upmostly.com/tutorials/react-onclick-event-handling-with-examples

• Custom Middleware

  • https://github.com/ohansemmanuel/fake-medium/blob/master/src/middleware/api.js

• Fetching data in redux

  • https://blog.logrocket.com/data-fetching-in-redux-apps-a-100-correct-approach-4d26e21750fc/

• Dan Abramov's error handling code

  • https://github.com/gaearon/todos/tree/24-handling-network-errors/src

• Error handling in React Redux

  • https://stackoverflow.com/questions/34403269/what-is-the-best-way-to-deal-with-a-fetch-error-in-react-redux

• Reduce reducers

  • https://stackoverflow.com/questions/38652789/correct-usage-of-reduce-reducers/44371190#44371190
  • https://github.com/redux-utilities/reduce-reducers

• Jason Watmore React Redux sign up

  • https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example

• Double bangs Javascript

  • https://medium.com/better-programming/javascript-bang-bang-i-shot-you-down-use-of-double-bangs-in-javascript-7c9d94446054

• Why suspense matters - Dan Abramov on Twitter

  • https://threader.app/thread/1193903570078306308

• On Change and Key Press Events on React

  • https://stackoverflow.com/questions/31272207/to-call-onchange-event-after-pressing-enter-key
  • https://stackoverflow.com/questions/27827234/how-to-handle-the-onkeypress-event-in-reactjs
  • stackoverflow.com/questions/905222/enter-key-press-event-in-javascript

• Styled

  • https://www.styled-components.com/docs/api#as-polymorphic-prop
  • https://www.styled-components.com/docs/basics#adapting-based-on-props
  • https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee
  • https://styled-system.com/theme-specification
  • https://styled-system.com/custom-props/
  • https://github.com/styled-system/styled-system#docs
  • https://styled-system.com/theme-specification/

  https://styled-system.com/table

• Autocomplete

  • https://github.com/teleport/autocomplete/blob/master/js/autocomplete.js

• Accessibility

  • http://afb.org/

  1. Use more than 1 screen reader

  2. Tab through page or form
  3. Enter Screen Reader's "forms mode"

  1. Logical Layout: Place label consistently on same side of input and explicitly tell user what information should be included.

  2. Label for tag should be descriptive (not just edit or checkbox)
  3. Add required attribute to critical input fields.
  4. Optional: Put required as visible text.
  5. Select Menu (drop down) should clearly define the purpose of the menu
  6. Must be keyboard accessible
  7. Use Field Set Tag to eliminate checkbox's being read as only "yes" or "no"

  1. Meaningful alt text

  2. Alternative for all multimedia: videos are described and captioned
  3. Transcripts for audio and video files
  4. Videos are easy to control with the keyboard
  5. Ability to change and increase text size
  6. Use style sheets so visitors can change colors of the site using system preferences
  7. accessible CAPTCHA
  8. Optimized for mobile devices
  • https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/

  11/18/19

  • Semantic HTML

    • https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i
    • https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  • Checkboxes as buttons

    • https://blog.bitsrc.io/customise-radio-buttons-without-compromising-accessibility-b03061b5ba93
    • http://jsfiddle.net/zAFND/2/
    • https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
    • https://www.sitepoint.com/community/t/checkbox-styling-like-button/289279
    • https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3
    • https://codepen.io/paulobrien/pen/qxpmgR

  11/19/19

  • https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles
  • A resource for designing accessible components (e.g. menus, tabs)
  • Progressive Image Loading Libraries
  • A comparison between Jest, React Testing Library, Enzyme, and Cypress
  • Type System Why and how we built Flow for JavaScript
  • Regex Tester

  11/20/19

  • Organizing tests in jest
  • https://redux.js.org/recipes/writing-tests
  • https://reactjs.org/docs/test-utils.html
  • https://www.robinwieruch.de/react-connected-component-test
  • https://hackernoon.com/unit-testing-redux-connected-components-692fa3c4441c
  • https://kentcdodds.com/blog/why-i-never-use-shallow-rendering
  • https://github.com/reduxjs/react-redux/issues/1161
  • https://medium.com/asos-techblog/how-to-test-your-react-redux-application-48d90481a253
  • https://medium.com/flatiron-labs/refactoring-an-enzyme-component-test-to-use-react-testing-library-f5c36da6716f
  • https://reactjs.org/docs/test-renderer.html

  11/21/19

  Research of testing with React components

  • https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md
  • https://spectrum.chat/testing-library/general/test-connected-components-wrapped-in-withrouter~de14d0c7-1342-4af8-a3b6-0567450f3fe4
  • https://spectrum.chat/testing-library/help-react/how-do-i-test-redux-with-async-actions-using-react-testing-library~95f83d11-8e16-4f23-9a4f-29dc10618428
  • https://testing-library.com/docs/example-react-router
  • https://github.com/codedailyio/teach/blob/testReactRouterRouteTransition/src/App.spec.js
  • https://github.com/codedailyio/teach/blob/testReactRouterRouteTransition/src/App.spec.js
  • http://valentinog.com/blog/testing-react/
  • https://medium.com/javascript-scene/unit-testing-react-components-aeda9a44aae2
  • https://jestjs.io/docs/en/tutorial-react
  • https://redux.js.org/style-guide/style-guide