{
    "componentChunkName": "component---src-templates-note-note-js",
    "path": "/notes/Learning-path-for-Frontend",
    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Rough List\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand browser better.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand HTML5, CSS3 and Javascript. \"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understanding DOM, rendering, performance and timeline.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The challenges of creating \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/user-interfaces\",\n    \"title\": \"user interfaces\"\n  }, \"user interfaces\"), \"\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand Virtual DOM concept popularised by React. \"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand \\\"Display is a function of state\\\" and how that will affect design thinking.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand pure functions, testing and how they are related.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Check how UI can be tested. Unit testing, visual regression testing etc.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand state very well. Read about state management tools Redux. \"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Get to know about how we can debug \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/React\",\n    \"title\": \"React\"\n  }, \"React\"), \" and Redux in browser. \"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Read up about what is time debugging.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand the difference between \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/tailwind-framework\",\n    \"title\": \"tailwind framework\"\n  }, \"tailwind framework\"), \" and \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/bootstrap-framework\",\n    \"title\": \"bootstrap framework\"\n  }, \"bootstrap framework\"), \"\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand the difference between \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/Imperative-versus-Declarative\",\n    \"title\": \"Imperative versus Declarative\"\n  }, \"Imperative versus Declarative\"), \"\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Understand the dfifference between Class based and hook based approach in React but please use hooks :P \")), mdx(\"h2\", null, \"Debugging\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.chrome.com/docs/devtools/\"\n  }, \"https://developer.chrome.com/docs/devtools/\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Learn about Debugging tools\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Start with step debugging\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Debugging React\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Debugging Redux\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Event, Event bubbling\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Googling of errors, most popular errors\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Javascript event lifecycle\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"V8 Engine\")), mdx(\"h2\", null, \"Books to read\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Design of Everyday Things - \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://amzn.to/3kE5mjM\"\n  }, \"https://amzn.to/3kE5mjM\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/affiliate-links\",\n    \"title\": \"affiliate links\"\n  }, \"affiliate links\"), \"\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Mobile at Scale - \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.mobileatscale.com/\"\n  }, \"https://www.mobileatscale.com/\"), \" - (Recommeded by Friend, yet to read)\")), mdx(\"h2\", null, \"Other relevant ones\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/Learning-path-for-App-Development\",\n    \"title\": \"Learning path for App Development\"\n  }, \"Learning path for App Development\"), \"\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/Learning-Paths-Collection\",\n    \"title\": \"Learning Paths Collection\"\n  }, \"Learning Paths Collection\"), \"\")));\n}\n;\nMDXContent.isMDXComponent = true;","inboundReferences":[{"id":"77ed3fbf-d03f-590a-8aad-63ee54df0417","slug":"Learning-path-for-App-Development"},{"id":"9ce38787-298d-55dc-839e-78123ec84489","slug":"Write-first"},{"id":"cc0aa6e3-47dc-5d0a-af79-dfe061c7bd3f","slug":"Learning-Paths-Collection"}]}},"pageContext":{"slug":"Learning-path-for-Frontend","node":{"childMdx":{"slug":"Learning-path-for-Frontend"}}}},
    "staticQueryHashes": []}