├── LICENSE
└── README.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Arfian Adam
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Javascript personal notes
 2 | My personal note about javascript learning resources you can find on the internet. This note is expanding and soon or later gonna need better organizing. I might want to host it somewhere and add some interactive to it, but the latter is somewhat off the original purpose. Just wanted to make it simple.
 3 | 
 4 | |Title|Link|Type|
 5 | |---|---|---|
 6 | |React Component Lifecycle|<ul><li>https://medium.com/react-ecosystem/react-components-lifecycle-ce09239010df</li></ul>|Article|
 7 | |React's Component Documentation|<ul><li>https://facebook.github.io/react/docs/react-component.html</li><li>https://facebook.github.io/react/docs/state-and-lifecycle.html</li></ul>|Articles|
 8 | |Getting Started with Redux|<ul><li>https://egghead.io/courses/getting-started-with-redux</li></ul>|Videos|
 9 | |Progressive Web Apps with React.js|<ul><li>https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12</li><li>https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2</li><li>https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience-c84db889162c</li></ul>|Articles|
10 | |Progressive loading for modern web applications via code splitting|<ul><li>https://medium.com/@lavrton/progressive-loading-for-modern-web-applications-via-code-splitting-fb43999735c6</li></ul>|Article|
11 | |Two Quick Ways To Reduce React App’s Size In Production|<ul><li>https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a</li></ul>|Article|
12 | |Functional Programming In JavaScript — With Practical Examples|<ul><li>https://medium.freecodecamp.com/functional-programming-in-js-with-practical-examples-part-1-87c2b0dbc276</li><li>https://medium.freecodecamp.com/functional-programming-in-js-with-practical-examples-part-2-429d2e8ccc9e</li></ul>|Articles|
13 | |Why Redux need reducers to be “pure functions”|<ul><li>https://medium.freecodecamp.com/why-redux-needs-reducers-to-be-pure-functions-d438c58ae468</li></ul>|Article|
14 | |A Guide For Building A React Redux CRUD App|<ul><li>https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f</li></ul>|Article|
15 | |Understanding Higher Order Components|<ul><li>https://medium.freecodecamp.org/understanding-higher-order-components-6ce359d761b</li></ul>|Article|
16 | |React Binding Patterns: 5 Approaches for Handling `this`|<ul><li>https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56</li></ul>|Article|
17 | |React.js pure render performance anti-pattern|<ul><li>https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f</li></ul>|Article|
18 | |Leveling Up With React|<ul><li>https://css-tricks.com/learning-react-router/</li><li>https://css-tricks.com/learning-react-container-components/</li><li>https://css-tricks.com/learning-react-redux/</li></ul>|Articles|
19 | |Overview of ECMAScript 6 features|<ul><li>https://github.com/lukehoban/es6features</li></ul>|Repository|
20 | |Master the JavaScript Interview: What is Functional Programming?|<ul><li>https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0</li></ul>|Article|
21 | |Presentational and Container Components|<ul><li>https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0</li></ul>|Article|
22 | |Understanding redux-thunk and why we need it|<ul><li>https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559</li></ul>|Stackoverflow|
23 | |Rearchitecting Airbnb’s Frontend|<ul><li>https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2</li></ul>|Article|
24 | |How to resize then crop an image with canvas|<ul><li>https://stackoverflow.com/questions/26015497/how-to-resize-then-crop-an-image-with-canvas</li></ul>|Stackoverflow|
25 | |How to drag elements using pure javascript|<ul><li>https://stackoverflow.com/questions/17992543/how-do-i-drag-an-image-smoothly-around-the-screen-using-pure-javascript</li></ul>|Stackoverflow|
26 | |How to convert image into base64 string using javascript|<ul><li>https://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript</li></ul>|Stackoverflow|
27 | |Redux 4 Ways|<ul><li>https://medium.com/react-native-training/redux-4-ways-95a130da0cdc</li></ul>|Article|
28 | |Top Resources to Explore React Fiber|<ul><li>https://hackernoon.com/top-resources-to-explore-react-fiber-9a2b19114520</li></ul>|Article|
29 | |Front-End Developer Handbook 2017|<ul><li>https://github.com/FrontendMasters/front-end-handbook-2017</li></ul>|Book|
30 | |React Router V4 Fundamentals|<ul><li>https://www.youtube.com/watch?v=_Fzl0Cim6F8</li></ul>|Youtube|
31 | |A Simple React Router v4 Tutorial|<ul><li>https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf</li></ul>|Article|
32 | |Getting Started with React Router v4 in Meteor|<ul><li>https://themeteorchef.com/tutorials/getting-started-with-react-router-v4</li></ul>|Article|
33 | |JS: The right way|<ul><li>http://jstherightway.org/</li></ul>|Website|
34 | |Improve Your UX by Dynamically Rendering Images via React.js|<ul><li>https://www.codementor.io/andrewwong/improve-your-ux-by-dynamically-rendering-images-via-react-js-68mx3e1dg</li></ul>|Article|
35 | |JS Books (free books!)|<ul><li>http://jsbooks.revolunet.com/</li></ul>|Books|
36 | |Functional setState is the future of React|<ul><li>https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b</li></ul>|Article|
37 | |Functional Components with React stateless functions and Ramda|<ul><li>https://medium.com/@mirkomariani/functional-components-with-react-stateless-functions-and-ramda-e83e54fcd86b</li></ul>|Article|
38 | |All About React Router 4|<ul><li>https://css-tricks.com/react-router-4/</li></ul>|Article|
39 | |Code Splitting for React Router with Webpack and HMR|<ul><li>https://hackernoon.com/code-splitting-for-react-router-with-webpack-and-hmr-bb509968e86f</li></ul>|Article|
40 | |Build Virtual Reality Experiences Using React VR|<ul><li>https://egghead.io/courses/build-virtual-reality-experiences-using-react-vr</li></ul>|Videos|
41 | |Functional-Light-JS|<ul><li>https://github.com/getify/Functional-Light-JS</li></ul>|Book|
42 | |spellbook-of-modern-webdev (this is **huge**!)|<ul><li>https://github.com/dexteryy/spellbook-of-modern-webdev</li></ul>|Repository|
43 | |Async/Await Will Make Your Code Simpler|<ul><li>http://blog.patricktriest.com/what-is-async-await-why-should-you-care/</li></ul>|Article|
44 | |10 Tips for Better Redux Architecture|<ul><li>https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44/</li></ul>|Article|
45 | |10 JavaScript concepts you need to know for interviews|<ul><li>https://codeburst.io/10-javascript-concepts-you-need-to-know-for-interviews-136df65ecce</li></ul>|Article|
46 | |Why you need to separate vendor libraries from application code|<ul><li>https://blog.arfianadam.com/2017/08/20/splitting-vendor-libraries/</li></ul>|Article|
47 | |Separating vendor libraries using webpack|<ul><li>https://blog.arfianadam.com/2017/08/21/separating-vendor-libraries-using-webpack/</li></ul>|Article|
48 | |DESTROY ALL CLASSES: Turn React Components Inside Out with Functional Programming|<ul><li>https://www.bignerdranch.com/blog/destroy-all-classes-turn-react-components-inside-out-with-functional-programming/</li></ul>|Article|
49 | |Javascript ES6 — Exploring the New Built-In Methods|<ul><li>https://hackernoon.com/javascript-es6-exploring-the-new-built-in-methods-b62583b0a8e6</li></ul>|Article|
50 | |You-Dont-Know-JS|<ul><li>https://github.com/getify/You-Dont-Know-JS</li></ul>|Book|
51 | |Eloquent JavaScript|<ul><li>http://eloquentjavascript.net/</li></ul>|Book|
52 | 
53 | 
54 | ### Paid Resources
55 | |Title|Link|Type|
56 | |---|---|---|
57 | |JavaScript: Understanding the Weird Parts|<ul><li>https://www.udemy.com/understand-javascript/</li></ul>|Videos|
58 | 
59 | ### Maybe a bit of CSS won't hurt?
60 | |Title|Link|Type|
61 | |---|---|---|
62 | |Understanding Flexbox: Everything you need to know|<ul><li>https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af</li></ul>|Article|
63 | |CSS-Tricks|<ul><li>https://css-tricks.com/</li></ul>|Website|
64 | |Animista - CSS animations on demand|<ul><li>http://animista.net/</li></ul>|Website|


--------------------------------------------------------------------------------