Resources

Software Engineering

• https://medium.freecodecamp.org/a-software-engineering-survival-guide-fe3eafb47166

Javascript

• JavaScript Handbbook: https://medium.freecodecamp.org/the-complete-javascript-handbook-f26b2c71719c
• Turning off eslint rule for a specific line: https://stackoverflow.com/a/29592334/1378920

HTML

• https://github.com/abraj/html-play
• async vs defer attributes of <script> element: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
• https://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work

CSS

• https://github.com/abraj/css-play
• CSS flexbox layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
• CSS grid layout: https://getbootstrap.com/docs/4.1/layout/grid/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• https://css-tricks.com/snippets/css/complete-guide-grid/
• Vertically-centered text: https://stackoverflow.com/a/22218694/1378920
• Responsive design with media queries: https://www.youtube.com/watch?v=fA1NW-T1QXc
• clear: both and Clearfix: https://stackoverflow.com/a/12871734/1378920, http://doctype.com/whats-difference-between-clear-both-clearfix
• Float and Clearfix: https://stackoverflow.com/a/8554054/1378920, https://css-tricks.com/all-about-floats/

Bootstrap

• https://github.com/abraj/bootstrap-play
• Responsive Website with Bootstrap 4, HTML5 & CSS3: https://www.youtube.com/watch?v=9cKsq14Kfsw
• Build Responsive Bootstrap Website: https://www.sitepoint.com/build-responsive-bootstrap-website/

React

• React Conf 2017: https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0
• Tips by Dan Abramov: https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375
• Component communication: https://www.javascriptstuff.com/component-communication/
• Multiple instances of same react component: https://stackoverflow.com/questions/27112274/multiple-instances-of-same-react-component?rq=1#
• Events (Bubbling and Capturing): https://stackoverflow.com/a/34523743 , https://reactjs.org/docs/events.html
• Form submission using Enter key: https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/
• HTML to JSX Compiler: https://magic.reactjs.net/htmltojsx.htm
• Dynamic routing (React-router): https://www.youtube.com/watch?v=sfvrjwVihFY, https://tylermcginnis.com/react-router-nested-routes/
• React Component Patterns: https://www.youtube.com/watch?v=YaZg8wg39QQ
• event.currentTarget vs event.target: facebook/react#5733, http://joequery.me/code/event-target-vs-event-currenttarget-30-seconds/
• Multiple classNames for One Element: http://techspotnewsx.blogspot.com/2016/07/using-multiple-classnames-for-one.html

React Native

• https://aboutreact.com/

CRA: create-react-app

• User Guide: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md
• Static Stack: https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319
• Static pre-renderering: https://github.com/geelen/react-snapshot
• React Helmet: https://github.com/nfl/react-helmet
• Using APIs with CRA: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

Backend

• API Backend: create-react-app Working with API: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/
• CORS on ExpressJS: https://enable-cors.org/server_expressjs.html

Firebase

• Serverless app with Firebase: https://www.youtube.com/watch?v=prlK_QL_qOA
• Firebase Hosting: https://www.youtube.com/watch?v=meofoNuK3vo
• Learnings from Firebase: https://medium.com/sketchdeck-developer-blog/what-weve-learned-from-four-years-of-using-firebase-d1f81b3395b5

Redux

• Video course by Dan Abramov: https://egghead.io/courses/getting-started-with-redux
• Video course by Dan Abramov: https://egghead.io/courses/building-react-applications-with-idiomatic-redux
• Using store at multiple root divs: reduxjs/react-redux#355
• Long tutorial (Book): https://medium.freecodecamp.org/understanding-redux-the-worlds-easiest-guide-to-beginning-redux-c695f45546f6

React-router

• Using React-router with Redux: remix-run/react-router#4671 (comment)
• Nested routing: https://stackoverflow.com/questions/49473727/how-to-handle-multiple-routers-in-react

Testing

• Jest: https://jestjs.io/docs/en/expect.html
• Travis: https://docs.travis-ci.com/user/getting-started/
• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#travis-ci
• Jest docs: https://jestjs.io/docs/en/getting-started
• Unit-testing guide: https://github.com/mawrkus/js-unit-testing-guide
• Testing React Apps: https://jestjs.io/docs/en/tutorial-react
• Error (EMFILE) too many open files: facebook/create-react-app#4540 (comment)

Flutter

• Flutter by Google: https://www.youtube.com/watch?v=fq4N0hgOWzU&list=PLOU2XLYxmsIJ7dsVN4iRuA7BT8XHzGtCr
• https://www.youtube.com/playlist?list=PLUbFnGajtZlX9ubiLzYz_cw92esraiIBi
• https://blog.geekyants.com/we-rebuilt-a-react-native-app-with-flutter-4160f0499a82
• https://www.brainmobi.com/blog/scope-of-flutter-sdk-in-the-future-of-mobile-application-development/
• https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf
• https://hackernoon.com/why-native-app-developers-should-take-a-serious-look-at-flutter-e97361a1c073
• https://proandroiddev.com/why-flutter-will-change-mobile-development-for-the-best-c249f71fa63c
• https://hackernoon.com/what-are-we-doing-with-googles-flutter-74ff29dd256a
• https://appinventiv.com/blog/revealed-real-google-strategy-behind-flutter

React Native vs Flutter

• https://www.youtube.com/watch?v=bnYJRYFsrSw
• https://www.youtube.com/watch?v=tSyXb0sHBoE

Git

• Simplest guide to Git: http://rogerdudler.github.io/git-guide/
• Merging vs. Rebasing: https://www.atlassian.com/git/tutorials/merging-vs-rebasing
• Remote-tracking branches: http://gitready.com/beginner/2009/03/09/remote-tracking-branches.html
• Working with Teams: https://medium.com/@igor_marques/git-workflow-basics-d405746f6205
• Contribute to open-source: fork, clone, branch, commit, push, pull request.
• Difference between HEAD^ and HEAD~ in Git: https://stackoverflow.com/a/2222920/7416001
• https://softwareengineering.stackexchange.com/questions/312022/the-trend-of-the-develop-branch-going-away
• https://spin.atomicobject.com/2017/04/23/maintain-clean-git-history/
• https://github.com/edx/edx-platform/wiki/How-to-Rebase-a-Pull-Request
• https://stackoverflow.com/a/9147389/7416001
• https://www.digitalocean.com/community/tutorials/how-to-rebase-and-update-a-pull-request

GitHub

• GitHub flow: https://guides.github.com/introduction/flow/
• Working with upstream (original repo): https://stackoverflow.com/a/9257901/7416001
• Merge methods on GitHub: https://help.github.com/articles/about-merge-methods-on-github/
• Enable SPA for GitHub Pages: https://github.com/rafrex/spa-github-pages

Atom

• Atom Flight Manual: https://flight-manual.atom.io/getting-started/sections/atom-basics/

Flow (!TypeScript)

• Why Type Systems? https://www.youtube.com/watch?v=V1po0BT7kac
• Flow vs TypeScript: https://medium.com/the-web-tub/comparing-flow-with-typescript-6a8ff7fd4cbb
• Flow vs TypeScript: https://levelup.gitconnected.com/flow-vs-typescript-in-react-my-two-cents-d4d0c657d236
• JSDoc support in JavaScript: https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript
• TypeScript benefits with pure JavaScript: http://jonathancreamer.com/why-would-you-not-use-typescript/

!Lodash

• Lodash/Underscore using Vanilla JS: https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

Styling React

• Basic components: Material-UI
• Basic layout/structuring: React-Bootstrap
• React Bootstrap 4 components: reactstrap (https://reactstrap.github.io/)
• High-level components/sections: Material Kit Pro
• Why not just use Bootstrap?
• Ways to style react components: https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
• React Bootstrap Components: https://github.com/Hermanya/awesome-react-bootstrap-components

Material-UI

• https://medium.freecodecamp.org/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c
• React / Material-UI: https://www.youtube.com/watch?v=xm4LX5fJKZ8&feature=youtu.be&list=PLcCp4mjO-z98WAu4sd0eVha1g-NMfzHZk
• Server-Side Rendering with Material-UI: https://www.youtube.com/watch?v=gpGoxdVspx4&list=PLcCp4mjO-z98WAu4sd0eVha1g-NMfzHZk&index=17
• https://www.youtube.com/watch?v=PWadEeOuv5o

Ant Design

• https://ant.design/docs/react/introduce
• https://ant.design/docs/react/recommendation

CSS-in-JS

• https://www.youtube.com/watch?v=X_uTCnaRe94
• https://www.youtube.com/watch?v=2j9rSur_mnk
• https://www.youtube.com/watch?v=zR1lOuyQEt8
• https://www.youtube.com/watch?v=qu4U7lwZTRI
• https://www.youtube.com/watch?v=X_uTCnaRe94, https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
• https://egghead.io/courses/convert-scss-sass-to-css-in-js

Progressive Web Apps

• https://whatwebcando.today/

Drupal

• https://www.mediacurrent.com/blog/15-cool-things-you-can-do-drupal/
• https://www.drupal.org/node/1588984

Machine Learning

• http://www.holehouse.org/mlclass/
• http://www.cs.cmu.edu/~ninamf/courses/601sp15/lectures.shtml
• https://www.quora.com/I-want-to-learn-machine-learning-with-Python-tell-me-where-to-start-I-dont-have-a-CS-degree-or-prior-coding-experience

NPM libraries

• JS Utils: lodash
• Redux middlewares: redux-thunk
• Charts/Graphs: react-sparklines

Other libraries

• Automatic page load progress bar: pace.js (https://github.com/HubSpot/pace)

Punchlines

• This is a living document.
• Full-stack cloud infrastructure for modern teams.
• The modern way to build your website (https://www.contentful.com/)
• https://thenewstack.io/dont-call-contentfuls-content-infrastructure-cms/