{
    "componentChunkName": "component---src-templates-project-layout-jsx",
    "path": "/portfolio/todo",
    "result": {"data":{"mdx":{"id":"16512bdd-6a32-5a2e-a045-926a4d0b59c7","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || 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); }\n\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; }\n\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\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Todo\",\n  \"summary\": \"A dark/light themed React web app built together with Styled Components and Recoil that allows users to add, mark, and delete to-do items. The users can drag and drop to reorder the to-do items.\",\n  \"tags\": [\"React\", \"Styled Components\", \"Recoil\", \"React Beautiful DnD\"],\n  \"hero\": \"../../images/hero-todo.jpg\",\n  \"liveDemo\": \"https://hy-todo.netlify.app/\",\n  \"githubLink\": \"https://github.com/hooiyan/fem-todo-app\",\n  \"prev\": \"entertainment\",\n  \"next\": \"advice\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h3\", null, \"Project purpose and goal\"), mdx(\"p\", null, \"One of my goals in becoming a front-end developer is to build at least one to-do app in my lifetime. This might be an overused project but I think it is a nice project for us to get hold of the basics of front-end development.\"), mdx(\"h3\", null, \"Web stack and explanation\"), mdx(\"p\", null, \"At first, I planned to build this app with everything that I can do with just React (such as React state and CSS Modules) without installing external packages. However, I decided to integrate Recoil and Styled Components into the app. \"), mdx(\"p\", null, \"React has always been my go-to framework for building web apps. I have heard of Recoil before and thought of giving it a try this time. I am glad that I chose it as the state management for this app. It is easy to get started with and I think it pairs with React very well.\"), mdx(\"h3\", null, \"Problem and thought process\"), mdx(\"p\", null, \"CSS Modules is working well for me until I want to add theme switching capability. I think it is possible to realize that with CSS Modules. But I find it would be easier to use Styled Components in this case.\"), mdx(\"p\", null, \"Most importantly, there's this one bug that had been bothering me for a day or two. I was not able to find the cause and I was frustrated. Luckily, I did find the cause when I was reviewing the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"map\"), \" function that is used to loop over the todo items. \"), mdx(\"p\", null, \"The \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"problem\"), \" is that whenever I delete a todo that is previously being checked off, which has a different styling from the one that has not been checking off yet, the styles will be applied to the next todo item. This is not what we want because the next item is supposed to have its original styling applied to it. \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"So why does this happen?\"), \" Well, it's because I did not give a unique value for the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"key\"), \" props.\"), mdx(\"h3\", null, \"Lesson learned\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Previously, I have always been working on the main branch only. In this project, I tried to make use of \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"git branching\"), \" into my workflow. And it has helped me to not mess up with the main code. When I have to add something new to the project that might break the app, I create a new branch and continue working on that new feature.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"In React, we are required to provide a special props called \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"key\"), \" in each list item and it needs to be \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"UNIQUE\"), \". I chose to provide \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"index\"), \" that we got from the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"map\"), \" function. \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"index\"), \" does work in some cases, but we shouldn't rely on it because it does not guarantee the uniqueness.\")), mdx(\"h3\", null, \"Future improvements\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Add animations when tasks are deleted\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The ability to favorite a task and have it appear at the top of the list\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The ability to create groups or categories of tasks\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The ability to create a new user account\")), mdx(\"h3\", null, \"Useful resources\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox\"\n  }, \"Create custom checkboxes\"), \" - This has helped me in creating custom checkboxed that are used in the project.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://css-tricks.com/gradient-borders-in-css/\"\n  }, \"Gradient borders in CSS\"), \" - This has helped me in creating a special gradient border when hovering the checkbox. The trick is to wrap the custom checkbox with an additional \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"div\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://medium.com/bigpanda-engineering/dark-theme-with-styled-components-a573dd898e2a\"\n  }, \"Dark Theme with Styled Components\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/\"\n  }, \"How to Add Drag and Drop in React with React Beautiful DnD\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"githubLink":"https://github.com/hooiyan/fem-todo-app","liveDemo":"https://hy-todo.netlify.app/","prev":"entertainment","next":"advice","summary":"A dark/light themed React web app built together with Styled Components and Recoil that allows users to add, mark, and delete to-do items. The users can drag and drop to reorder the to-do items.","tags":["React","Styled Components","Recoil","React Beautiful DnD"],"title":"Todo","hero":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4400'%20height='2000'%20viewBox='0%200%204400%202000'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%201000v1000h675a85621%2085621%200%2000674-2l-1-2-1-2-1-3%201-3%201-2%202-4%204-2%202-1%203-1%203%201%202%201%202%201-7%201-6%201-1%202c-2%202-3%2011-1%2011l2%202c0%202%201%202%2010%202l9-1-1-1-1-2%201-2%201-2%202-2%202%201-1%201-1%204c0%204%200%204%204%204%205%200%208-4%204-7l-1-2-2-1-3-1%203-1%202%201%201%201c2%200%204%203%204%206s0%204%202%204%203-5%202-10l2-1h1l2%201%201%201-1%201-1%204v4h4c4%200%204%200%204-2%200-3-2-8-4-8l-1-1h6l3%201%201%201-1%201-2%204c0%204%200%204%204%204s4%200%204-4l-2-5-2-2%202-1%202%202%201%201c1-1%201%201%201%204%200%205%200%205%203%205h3v-6l1-6%201%201%202%201%202%201-2%202-2%203c0%204%208%206%2011%203%203-4%200-9-5-9l-2-1c0-2%205-1%208%201l2%206c0%203%200%204%202%204s2-1%202-12%200-12%202-12%202%201%202%2012v12h3c3%200%203%200%202-1v-5l1-2%202-2c2%200%203%201%201%203-3%202-2%203%201%203l2%201-2%201-2%201%209%201h9v-5c0-4%200-5-2-5l-2-1%202-1c2%200%202-1%202-3l1-3%201%203c0%202%200%203%202%203l2%201-2%201c-2%200-2%201-2%205v5h4c4%200%204%200%204-3l1-5c0-2%203-3%203-1l-1%201-1%202c0%202%201%202%202%202l2%201-2%201v1l16%201h16v-9c0-9-1-12-6-11-1%201-2%200-2-1l8-1%208%201c0%201-1%202-3%202l-3-1v20h4l4-1-1-1-1-2%201-2%201-2%202-2%202%201-1%201-1%204c0%204%200%204%204%204%203%200%206-2%206-4s-5-6-6-6l-2-1c0-2%206%200%209%203l1%204c0%203%200%204%202%204s2-1%202-4%202-6%204-6l1-1%203-1%202%201-2%201c-1%200-6%204-6%206%200%204%208%205%2011%203%202-2%201-4-1-6-3-2-3-3%200-3%202%200%202-1%202-7l1-7%201%2012v12h3l3-1-1-1-1-2%201-2%201-2%202-2%202%201-1%201-1%204c0%204%200%204%204%204%203%200%206-2%206-4s-5-6-6-6l-2-1c0-2%206%200%209%203l1%204v4h8l8-1%201-2%201-2%201-3%201-2%201-3%201-2%201-3%201-2%201-2%201%202%201%202%201%203%201%202%201%202%201%203%201%202%201%202%201%202c0%202%201%202%203%202%203%200%203%200%203-5v-6l3%201c3%200%204%202%202%202l-1%204v4h10v-4l-1-4-1-1c2-2%204%200%204%205%200%204%200%204%203%204h3v-6c0-6%200-7%203-4v2l-1%204v4h10v-4c0-3-2-6-4-6l-2-1%203-1%202%201%202%201%201%203%201%202c1-1%201%200%201%201l-1%202h-1c0%202%201%202%208%202h8v-4c0-3%202-6%204-6l1-1%202-1c3%200%207%202%207%204l1%201v6c-1%201%200%201%202%201h3v-6l1-6%201%202%202%201h2l-1%201-1%202-1%201-1%203c0%202%200%202%205%202s5%200%205-3l-1-3-1-2-2-2-2-1c0-2%203-1%206%201l2%206v4h18v-22h7l7%201c0%201-1%202-4%201-6%200-8%201-8%205%200%203%200%203%205%203l5%201-4%201-5%201-1%205v4h16v-6l1-6%201%202%201%202%201-1%202-1%202%201-2%201-3%203c-2%204-1%205%204%205h5v-4c0-4%204-8%207-8s4%202%201%202-6%204-6%206c0%203%202%204%207%204%203%200%203%200%203-4l-1-4-1-1%202-1%202%201v5c0%204%200%204%203%204h3v-6l1-6%201%201%202%201c3%200%203%201%200%203l-2%204c0%203%200%203%204%203h4v-5c0-4-1-5-2-5l-1-1c3-2%205%201%205%206v6l1-5%201-4v4c0%204%200%204%203%204s3%200%203-5l-1-5v-2l1-3c0-2%200-3%202-3s2%201%202%203l2%204h3l-3%201c-2%200-2%201-2%205v5h4l4-1-1-1-1-2c0-1%200-2%201-1l1-2c0-2%203-4%204-2l-1%201c-2%200-1%204%201%204l2%201-1%201-3%201%208%201h8v-6l1-6%201%201%203%202c2%200%202%200%201%201l-2%202-1%201-1%203c0%202%200%202%205%202s5%200%205-2l-1-3-1-3-1-2-2-1c0-2%204-1%205%200l1%201%201%205c0%204%200%205%202%205s2-1%202-4l3-6c3-2%207-3%207-1l-2%201c-1%200-6%204-6%206%200%204%208%205%2011%203v-6l-2-2%202-1%201-7%201-7%201%2012v12h18v-21l3%203%203%204%202%203%202%203c0%203%203%202%205%200s3-3%203%200l-1%201-1%202-1%201-1%202c0%202%201%202%204%202h4v-7c0-6%200-6-1-5-2%202-3%202-3%200l2-3%202-3%201-2%202-1h1l-1%202v1l1%209v9h3c3%200%203%200%203-4l1-4%201%202%202%202%202%201-2%201-2%201%208%201h8v-6l1-6%201%201%202%201%202%201-1%201-1%202-1%201-1%203c0%202%200%202%205%202s5%200%205-3l-1-3-1-2-1-2-2-1%203-1%202%202%201%201c1-1%201%201%201%204v5h4c4%200%204%200%204-3%200-5-1-7-3-7l-1-1%202-1c2%200%202-1%202-3l1-3%201%203c0%202%200%203%202%203l2%201-2%201c-2%200-2%201-2%205v5h4c4%200%204%200%204-3%200-5%201-7%203-7l1-1c0-2%205-1%207%200v3l-2-1-3-1c-1%200-2%200-1%201l-1%201c-2%200-2%201-2%204v4h10v-4l1-4%201%204c0%204%200%204%203%204h3v-6l1-6%201%202%201%202%201%201-1%201c-1-1-1%200-1%202v4h2421V0h-303v4l-1%205V0H0v1000M2123%2048l1%206v4h12v19a164%20164%200%20010%2025c1%202%201%202%208%202h6V58h14V46h-21c-18%200-20%200-20%202m97-1l-2%201-2%201-2%201-5%204-4%203-1%202-1%201-1%202-1%202-1%204-1%204-1%204c0%203%200%204%201%203s1-1%201%202c0%204%201%207%204%2010l2%204%202%201%201%201v1l4%202%205%202%202%201%209%201%209-1%203-1%202-1%202-1%202-1%202-2%204-4%202-3%201-2c0-2%200-2%201-1s1%201%201-2l1-4%201-6-1-5-1-3-1-3-1-2-1-2-1-2-1-1c0%201-7-5-6-6l-2-1-2-1-3-1-3-1-8-1-9%201m80%2028v29h15l15-1%203-1%204-2%203-2c2%200%206-5%206-6l1-2%202-3V64l-1-2-1-2-1-2h-1l-1-3-3-2-3-2-1-1-2-1-3-1-3-1-15-1h-14v29m110-28l-2%201-2%201h-1l-2%201-5%203-2%203-1%201-1%202-1%201-2%203-2%205v13l1%204%201%203%202%202c1%204%203%206%205%206l4%203%206%203%202%201%209%201%208-1%203-1%202-1%202-1c2%200%2010-9%2010-11h1l1-2%201-2V64l-2-3-1-1c0-2-9-10-10-10l-2-1-2-1-3-1-8-1-9%201m-188%2012l-2%201c-1%200-6%204-6%206l-1%201-1%208%201%207%201%202c0%202%204%206%206%206l2%201%208%201%207-1%201-1%207-7V68l-1-1c0-2-5-7-7-7l-1-1-7-1-7%201m90%2016v17h8l8-1%201-1c2%200%207-4%207-6l1-1%201-8-1-8-1-1-3-5c-4-3-4-3-12-3h-9v17m99-16l-1%201c-2%200-8%207-8%2010l-1%202-1%203%201%203%201%203c0%202%206%209%208%209l1%201%208%201%207-1%202-1c2%200%206-4%206-6l1-2%201-6-1-7-1-3c0-2-4-6-6-6l-2-1-7-1-8%201m754%200l-2%201c-2%200-3%200-2%201l-1%201c-1-1-10%208-10%2011l-1%201-1%2010%201%209%201%202c0%204%209%2013%2013%2013l2%201c-1%201%202%201%209%201l10-1%203-1%202-1c-1-1%200-1%201-1s2%200%201-1v-1l2-1%201-1c0-1%200-2%201-1l1-1%201-2c1%200%202-3%201-4h-2l-3%202-1%201-4%201c-3%200-4%200-3%201s1%201-1%201l-3-1-3-1c-4%200-8-2-9-5l-2-2-1-1-1-2-1-3-1-3-1-3%201-3%201-3%201-3%202-3c1-3%207-7%2010-7l2-1-8-1c-4%200-7%200-6%201m903%2018l-5%203c-2%200-2%201-2%204%200%204%200%204%203%204l5%203%206%202c4%200%205%200%205%202l-1%201-1%208%201%2010%201-1%204-1%204%201%204%201%204-1-3-1c-4%200-5-2-5-9%200-6%200-7-2-7l-1-1c1-2%2012-3%2012-2%201%201%201-1%201-5%200-6%200-6-1-4l-2%202-3-3-4-5c0-2-1-2-4-2l-4%201-4%201c-3%200-4%200-4-2s-1-2-4%201m29%2039c0%207%200%2012-1%2011h-8l2%201%201%204v4h-5c-5%200-6%200-6-2s-1-2-8-2-8%200-8%202l2%202%202%202%203%203c2%200%204%202%205%204%202%204%204%204%2013%202l8-1c1%201%201-5%201-20a237%20237%200%2000-1-10m0%20108a209%20209%200%2001-2%2036c0%205%200%205-3%206l-4%201-2%201c-2%200-2%202-1%205s3%204%203%201l2-2%201%204v4h-4c-5%200-6%201-3%203%202%201%203%205%201%205-1%201-1%201%201%201l5-2%205-1c2%200%202-1%202-3l-1-3-1-2%201-3%201-6v-5l1%204%201-8-1-8-1-28-1-32v32m-1971%203l-2%201c-2%200-4%203-3%203v1l-1%2057c0%2060%200%2063%204%2063l2%201%20535%201a53752%2053752%200%2000537-3l1-2%201-59v-59l-2-3-3-2h-534l-535%201m1950%2063l3%203c3%201%204%203%202%203l-2%204c-2%204-2%2020%200%2020l1%202c0%202%200%202%204%201h14v-16c0-11%200-16-1-15l-1%202-1%202v4c-1-1-2%200-4%201l-5%203h-2l2-1c3-1%203-5%200-6l-3-3-1-3-2-2-3-1c-2%200-2%200-1%202m-26%2032c-3%203-3%207%201%208l2%202c0%202-4%207-5%207-6-1-9%203-9%2010l-1%203c-2%200-5%203-7%205v3c1%202%202%202%205-1%205-4%206-2%202%206-2%205-3%206-1%206l1-2%201-1%201%202c0%203%202%200%203-5%200-5%204-11%207-11%202%200%206-3%206-5s1-2%203-2c3%200%204-1%205-2s1-1%202%201c0%202%201%202%203%201%202%200%202-1%201-2v-1l2-1-2-1c-3%200-3%200-3-5l1-6%203-2%204-5c3-4%203-4-6-4-6%200-7%200-6%201l1%204c0%202%201%203%202%203l1%201c0%202-4%202-6%200l-4-5c-1-4-4-5-7-2m32%2021l-2%202-3%204-2%204c0%201-6%205-7%203%200-2-2-1-2%201s1%203%202%203l1%202-1%202c-2%201-2%202-2%205%200%206%201%207%205%207%203%201%204-3%202-5-1-1-1-1-1%201l-2-2v-4l1-2v-2l1%201c0%202%201%202%204%202s4%200%204%202l1%201v-4l-5-2-4-1c0-1%201-2%203-2l4-1%202-3%201-3v-6c-1-2-1-2%201-2l3-2c0-1-1-1-4%201m0%2030l1%207v4c0%203-2%204-2%201h-1c0%201-1%202-4%202-4%201-4%201-4%205l-1%204-1-2-2-2c-3%200-3-2%200-3%202%200%203-6%200-7l-1%202c1%202-2%206-4%206l-3%201%202%201c2-1%202%200%202%201%200%202%201%203%203%203l3%203c1%203%201%203-4%204-5%200-6%202-2%203%203%200%205%202%203%202l-2%202-3%201-2%201-1%202c0%202%200%202%202%202%205-1%207%200%205%201l-3%204-4%203-3%202h-6c0-2-2-2-2%200-1%202-1%202%201%202l2%202c0%202%202%203%203%201l1-1c2%201%207-3%207-4%200-2%203-4%205-4s4-3%204-4c-1-2%200-2%202%200%201%201%206%202%206%200l-3-1c-3-1-3-1-2-4s3-2%204%200l1%203%204-3a310%20310%200%20003-4l-2-3c0-2-1-3-2-3l-2-1%201-2c2%200%204-7%203-8s-1-1%201-6c2-2%202-3%200-5-2-4%200-10%203-11l3-2h-9v5m-102%2022l-4%201c-3%200-3%200-3%202v2l-1%202-2-1-2-2-2%202v7c0%204%202%206%202%202l2-2%203-2%203-3c4%200%206-3%203-3l1-2%201-3h-1m-1854%208l-2%201c-2%200-4%203-3%203v1l-1%2055v55h-900v278h1960v648h920V518h-12c-7%200-11%200-10-1l-1-1-2%201-78%201a1514%201514%200%2001-82-2h-9l6%201a796%20796%200%2001-112-1c-4%200-4%200-2%201l-298%201h-300v-55a354%20354%200%2000-1-56c1%200%200-2-4-4-3-1-1069-2-1069%200m1908%201v2l-1%203-3%203-2%202-3%202c-1%201-1%201%203%201l7-1c3%200%203%200%202-2-3-3-2-6%201-6%204%200%205%203%204%207%200%203%202%204%205%202%201-1%201-1-1-1l-2-1c0-2%201-2%203-1l2-3c1-3%201-3-1-3-4%200-12-2-12-4h-2m52%2027l-3%201c-2-1-3%200-3%202-1%203%200%206%202%206s2%201%200%203%200%205%203%205%203%200%203-2c-1-3-1-3%202-3%204%200%204%200%204%203l2%202c2%200%202-1%202-5%200-3%200-5-1-4%200%202-2%201-4-1s-3-6-1-6%200-2-3-2c-1-1-2%200-3%201m-210%2010l-2%202-3%203c-2%201-2%202-2%204s-1%203-3%203c-3%200-3%203%201%203%203%200%205-2%205-5%200-2%201-3%202-3l1-1h5l3-2c3%200-1-4-4-5-1-1-2%200-3%201m181%205l1%201%201%205-1%204c-2%200-2%201-2%204%200%204%200%204-1%203-1-2-3-3-3%200l1%201%202%201h4c2%200%202%200%200-1-2%200-2-1-1-3%201-3%204-2%205%201v-15c-1-2-6-3-6-1m-908%203l-1%201-5%205-1%201a82%2082%200%2000-16%2016l-7%207-1%201-2%201c0%203%204%200%2010-6l8-7%202-2%207-8c6-6%209-10%206-10v1m-978%2011l-1%202c-2%200-3%204-1%205l1%204%201%203%201%202%201%201%201%201c0%202%205%206%207%206l1%201c-1%201%200%201%202%201l4%201%204%201%205-1%203-1%202-1%202-1c1%200%206-4%206-6l1-1%201-1%201-2%201-3%201-4c2-1%201-5%200-5l-2-3-2%201-3%201-1-1h-4v1l2%202h-5v2l-2%201-4%203-5%203c-4-1-9-8-6-8l1-2c1-3%200-3-4-3-3%200-4%200-4%202l-2-1c-2-2-3-3-3%200m1759%2033l-1%203c2%200%202%203%201%205l-4%201c-2-1-3%203%200%203l2%203c0%201%202%201%203-1l-1-1-2-1%203-1%202-2c0-2%202-4%205-4l2-1%202-1%202-2c0-2-2-3-4%200-3%202-4%201-6-1-2-4-2-4-4%200m-1496%2091l-1%208-1-1c0-2-7-1-10%201-5%206-1%2014%206%2014l4-1h2c0%202%203%201%203-1v-3l-1-12-1-13-1%208m33-6v28l1-4%201-5%201-1c0-1%201-2%203-2h3v6c0%205%200%206%202%206s2-1%202-7l-1-8h-7c-2%203-4%201-4-7l-1-6m101%2014c0%2013%200%2014%202%2014s2-1%202-3%200-3%202-3l2%202c0%202%202%204%204%204%203%200%202-1%200-3l-2-3-1-2c-1-1-1-1%201-3l2-4c-1-1-1-1-4%202l-3%203-1-9c0-8%200-9-2-9s-2%201-2%2014m576-9l-4%205-1%201c-1-1-5%204-4%204l-1%201c-2%200-4%202-4%204l-1%201-5%205-1%201-7%206c0%203%204%200%2010-6l8-7%202-2%207-8%207-8c0-3-1-2-6%203m-874%2010l-1%2012-1%202-2%201-2%202c0%203%203%203%205%200%205-5%205-7%205-18s0-12-2-12-2%201-2%2013m328-9c0%202%201%202%203%202%203%200%204%201%201%203-2%202-3%203%200%203%202%200%204%203%204%206v4h-5c-5%200-6%200-4%203%203%202%208%201%2011-1%203-4%202-14-2-14-1%200%200-3%202-5s0-3-5-3c-4%200-5%200-5%202m-317%207l-1%203-1%201c-2%200-1%206%201%209%205%205%2014%201%2014-6%200-6-9-11-13-7m19%202c-3%203-3%207%201%2011%202%202%205%202%209%201%202-1%202-1%202%201l-1%202h-1c0%202-1%202-4%202l-4-1-1-1v5c2%201%209%202%209%200l2-1c2-1%202-2%202-12l-1-10-1%201-1%201-2-1c0-2-6-1-9%202m33-2l-1%201c-3%200-3%2011-1%2013h11l2%201c2%200%202-1%202-8s0-8-2-8l-2%201h-9m31%202c-3%203-3%207%200%2011%206%205%2014%201%2014-7%200-3%200-4-2-4l-2-2c0-2-7-1-10%202m19-1v10l1%202c0%202%201%202%203%202l3-1%202-1%202%201%201%201%201-8-1-8-1%205c0%204-2%207-4%207l-1%201h-1l-2-7c0-6-2-8-3-4m19%206c0%207%200%208%202%208s2-1%202-3c-1-7%200-9%203-9l3-1v7c0%205%200%206%202%206s2-1%202-7l-1-8h-11l-1-1-1%208m84-5c-5%205-1%2013%206%2013%203%200%204%200%204-2s-1-2-4-2l-4-1%202-1%202-1%203-1c3%200%203%200%203-3%200-5-7-7-12-2m28%209c0%2011%200%2012%202%2012s2-1%202-5%201-7%202-4c0%202%205%201%208-1s3-12%200-12v-1l-4-1-4%201%202%201c1%200%206%204%206%206s-5%205-6%206c-3%200-4-3-4-6l1-4%201-1-2-1-2-1-1-1-1%2012m22-9c-2%202-3%2011-1%2010%201-1%201%200%201%201l1%201h9l2%201c2%200%202-1%202-8l-1-8-1%201-2%201-2-1c0-2-6-1-8%202m78-1l2%203c2%201%203%205%201%205l-1%202-1%201-1%202%201%201%201-1h1l1-1c0-3%203-2%205%200%201%202%205%203%205%201l-2-2-2-3-1-2c-1-1-1-1%201-3s3-5%201-5l-2%202-3%202-2-2-2-2-2%202m-111%20116l-1%207-1%207-1-1h-7c-3%201-3%202-3%207s0%206%202%206l1%201c-1%201%200%201%203%201l4-1h2l2%201c2%200%202-1%202-14l-1-15-2%201m645%201a6848%206848%200%2001-32%2033c0%202%204-1%2010-7l8-7%202-2%207-8%207-9h-2m-864%202l-2%201c-2%200-4%203-4%205l-1%203-1%203%201%203%201%203c0%203%204%207%208%207l4-1%202-1%202-2%201-2%201-7c0-6-3-11-6-11l-1-1-2-1-3%201m-18%203l1%202%201%2010c0%209%200%2010%202%2010s2-1%202-12v-12h-3c-2%200-3%200-3%202m17%201l-1%204-1%201c-1-1-1%201-1%203l1%205%201%202%204%202c5%200%206-2%206-9s-1-9-5-9l-4%201m271%202l-1%203v2l1%207c0%206%200%207%202%207s2-1%202-7c0-7%200-7%202-7%201%201%202%200%202-1l-2-1c-2%200-2-1-2-3s0-3-2-3-2%201-2%203m-244%2011c0%207%200%208%202%208s2-1%202-5c0-5%202-7%206-7%202%200%202%200%201%201v1l1%205%201%205%201-5c0-3%200-5%201-4l1-2%203-1c2%200%203%201%203%206%200%208%202%207%202-1%200-7-1-9-5-9-3%200-3%200-2%201s1%201-2%201l-3-1h-8l-2-1c-2%200-2%201-2%208m38%200c0%207%200%208%202%208s2-1%202-5%201-7%204-7c4-1%204%200%204%206%200%205%200%206%202%206s2-1%202-5l-1-6-1-2c0-3-7-4-8-2h-2l-2-1c-2%200-2%201-2%208m20-1l1%208c2%201%207%202%207%200l2-1%202%201%201%201%201-8c0-7%200-8-2-8s-2%201-2%206v6h-6v-6c0-5%200-6-2-6s-2%201-2%207m33-5l-1%202-1%202c-2%200%200%205%203%208%201%202%207%202%208%201%203-3%202-3-2-3l-4-1%202-1%202-1c-1-1%200-1%202-1s3%200%202-1l1-1c2%202%201-3-2-4-2-2-8-2-10%200m41%206c0%207%200%208%202%208s2-1%202-5c0-5%202-7%205-7%202%200%203%201%203%206%200%207%202%208%202%201%200-4%201-7%204-7%204-1%204%200%204%206l1%206%201-8v-8h-4l-4%201h-15l-1%207m33-6l-2%201-1%205c0%205%200%206%202%206l2%201%204%201c3%200%204-1%204-2%200-2-1-2-4-2l-4-1%202-1%202-1%203-1c2%200%203%200%203-2%200-5-8-8-11-4m61-1l-1%201c-3-1-3%200-3%206l1%207h11l2%201c2%200%202-1%202-8s0-8-2-8l-2%201h-8m41%200l-1%201-2%202-1%202-1%202%201%202%201%202%202%202%201%201c-1%201%201%201%204%201l4-1%201-1c3-1%203-11%200-12l-2-1-4-1c-3%200-4%200-3%201m17%207l1%208%201-4%201-5%201-1c0-1%201-2%203-2h3v6c0%205%200%206%202%206s2-1%202-7l-1-8c-2-1-7-2-7%200l-2%201-2-1-1-1-1%208M1204%20930v6h14v46h11l-1-23%201-23%202-1h10c1%202%203-2%203-6v-5h-40v6m98-5l-3%201-3%201-2%201c-1%200-10%208-10%2010l-1%201-1%202-1%202-1%2011%201%2010%201%202%201%202h1c0%202%209%2010%2010%2010l2%201%203%201%202%201%208%201%208-1c-1-1%200-1%202-1l3-1%202-1c2%200%2012-11%2012-13l1-2%201-5c0-3%200-4%201-3s1%201%201-1%200-3-1-2l-1-4c0-4-2-9-3-9l-1-1c0-2-9-10-10-10l-2-1-2-1-3-1-8-1-7%201m78%2028v29h15c10%200%2015%200%2014-1s-1-1%202-1l4-1c-1-1%200-1%201-1l2-1%202-1c1%200%204-2%204-4l1-1%201-1%201-2%201-2%201-2%201-10-1-10-1-2-1-3-1-1c0-2-9-10-10-10l-2-1-3-1-3-1-14-1h-14v29m111-28l-2%201-3%201-2%201c-2%200-12%2010-12%2012l-1%202-1%204-1%203c-1-1-1%201-1%203l1%206%201%203%201%203%201%202%201%202%202%203%203%203%203%202%203%202%202%201%203%201%202%201%208%201%207-1%203-1%203-1%202-1c2%200%2010-8%2010-10l1-2%201-2%201-2%201-9-1-9-1-2-1-2-1-2c0-2-6-8-8-8l-2-1-2-1v-1l-3-1-3-1-7-1-8%201m-98%2010c-2%201-1%2035%201%2035v1c-2%201-2%201%202%201l4-1%204-1c4%200%206-1%2011-6%203-3%203-4%203-11v-8l-4-5-8-4-3-1h-10m-97%206c-3%203-4%205-4%207l-1%204v1l1%205%201%204h1l6%206%201%201%208%201h8l4-4%205-5v-16l-4-5-5-4h-16l-5%205m193-3l-3%203-2%202-1%201-1%203-1%202-1%204%201%205%201%202%201%202%201%202%201%201%203%203c3%202%204%202%2011%202l8-1%201-1c2%200%206-5%206-6l1-2%201-7-1-7-1-2c0-2-7-8-7-7h-1c0-2-15-1-17%201m761%2015l-2%201-2%202-1%202-1%204%201%204%201%202c0%201%201%202%203%202l2%201c-2%203%206%201%2010-2%203-4%205-11%202-11l-1-2-2-2-2-1-4-1-4%201m-980%20366l-4%201-4%201-2%201c-2%201-8%207-8%209l-1%202v5l1%204%201-5%201-2c0%202%202%204%202%202h1l9%201c7%200%209%200%206%201-3%200-3%201-2%201%203%200%203%202-1%202l-3-1c0-3-1-2-3%200-2%203-2%203%200%205l3%202%202%202%201%201%201-1%206-4c6-7%208-9%209-8l2-1h2l3%202c1%202%201%202%201-2v-4l-1-2c-1-3-6-8-8-9l-2-1-4-1c-3%200-4%200-3-1l-3-1c-2%200-3%200-2%201m378%20151c0%2013%200%2014%202%2014s2-1%202-3v-4c2%200%204%202%204%203l1%202h1l1%202%201-2-1-2-2-3c-1-2-1-2%201-4s3-3%200-3l-3%202c-2%203-3%202-3-7%200-8%200-9-2-9s-2%200-2%2014m-284-1l2%201c1%200%206%204%206%206l-6%206c-2%200-4-3-4-6l1-4%201-1-2-1-2%202-1%202-1%202%201%202%201%202c0%204%207%205%2011%202%205-5%202-14-5-14l-2%201m-4%20123l-1%201v16l3%203%202%201c0%202%205%201%207-1h2l1-2%201-2%201-7c0-4%200-6-1-5l-1-2c0-4-13-6-14-2m2%202l-1%202v12c2%202%204%202%208%202l3-2%201-2c2%201%201-7-1-10-2-4-10-5-10-2m-93%20115l-3%201-4%201-1%201-2%201-2%202-3%203-2%204-2%204c0%202%200%202%201%201l1-1c0%202%203%203%203%201l2-1%201%201c0%202%205%201%206%200h2l4%201c4%200%206%202%202%202v1l-1%201v1l-2%201-1-1-1-3-2-2-2%203c-2%203-1%204%203%208l3%203%206-5c9-9%209-9%2010-8h2c1-2%201-2%203-1s2%201%202-1%200-2%201%200c1%201%201%201%201-1l-1-4c-1%200-2-2-1-3h-1c-1%201-1%201-1-1l-2-3-3-2-1-1-2-1-3-1-4-1-3-1-3%201m124%20138c-2%201-1%2015%200%2015v1l-1%206c0%204%200%205%201%204h1l1%201%201-4%201-4%203%204c0%202%203%204%205%204%201%200%201-1-1-3l-2-3-1-1c-2%201-1-3%201-4l2-3-6%203-1%201-1-9c0-9-1-11-3-8m-45%2014l1%2013%201-5v-5h4l4-1%202-1%202-3c0-1%200-2%201-1l1-2c0-1%200-2-1-1l-1-4-2-1-2-1-5-1h-5v13'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"images":{"fallback":{"src":"/static/aecc9aebf744707bf2d775b3a75bb332/5241f/hero-todo.jpg","srcSet":"/static/aecc9aebf744707bf2d775b3a75bb332/41e20/hero-todo.jpg 1100w,\n/static/aecc9aebf744707bf2d775b3a75bb332/61c70/hero-todo.jpg 2200w,\n/static/aecc9aebf744707bf2d775b3a75bb332/5241f/hero-todo.jpg 4400w","sizes":"(min-width: 4400px) 4400px, 100vw"},"sources":[{"srcSet":"/static/aecc9aebf744707bf2d775b3a75bb332/b4a9b/hero-todo.webp 1100w,\n/static/aecc9aebf744707bf2d775b3a75bb332/b1c00/hero-todo.webp 2200w,\n/static/aecc9aebf744707bf2d775b3a75bb332/25a29/hero-todo.webp 4400w","type":"image/webp","sizes":"(min-width: 4400px) 4400px, 100vw"}]},"width":4400,"height":1999.9999999999998}}}}}},"pageContext":{"id":"16512bdd-6a32-5a2e-a045-926a4d0b59c7"}},
    "staticQueryHashes": ["3471991391"]}