{"componentChunkName":"component---node-modules-narative-gatsby-theme-novela-src-templates-article-template-tsx","path":"/my-portfolio-and-projects","webpackCompilationHash":"3540a93c79ed41fc9508","result":{"data":{"allSite":{"edges":[{"node":{"siteMetadata":{"name":"Haja Andriamaro"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"article":{"id":"b7b1082c-74d5-50c5-9c03-a563755dc379","slug":"/my-portfolio-and-projects","secret":false,"title":"My portfolio and projects.","author":"Haja Andriamaro","date":"October 13th, 2019","dateForSEO":"2019-10-13T00:00:00.000Z","timeToRead":2,"excerpt":"A list of my current porfolio and sides project.","subscription":true,"body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"My portfolio and projects.\",\n  \"author\": \"Haja Andriamaro\",\n  \"date\": \"2019-10-13T00:00:00.000Z\",\n  \"hero\": \"./images/portfolio.jpg\",\n  \"excerpt\": \"A list of my current porfolio and sides project.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"passion-for-building\"\n  }, \"Passion for Building\"), mdx(\"p\", null, \"I have a real passion for building things. Sometime, I wish we could have more than 24 hours in a day,\\nor that I could sleep less than 5 hours per night. Unfortnatetly, none of them are possible \\uD83D\\uDE06.\\nSo this is what I am building on my spare times. They all have the following in common :\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"I am not a designer, but I always try to put specific attention/effort in my work estetics.\\nThe bar is ever increasing to give users the best experience possible. And I believe that estetics play a great role in that regard.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Every project that I start must be driven by a real need. Oftenly, something\\nthat i would want and/or use myself.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"I like working as a team. It creates accountability and optimize opportunities for learnings. For most projects listed here, I have convinced a small and lean team to join me along \\uD83D\\uDC68\\u200D\\uD83D\\uDCBB.\"))), mdx(\"h1\", {\n    \"id\": \"clezer\"\n  }, \"Clezer\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://clezer.app\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Clezer\"), \" was specialized in innovative payment. We introduced the first shared debit card for groups, able to debit multiple accounts in real time.\\nAnd a chat bot to help groups to split any payments in real time.\"), mdx(\"div\", {\n    \"className\": \"Image__Medium\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.583333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACKElEQVQoz42RzUtUURiH70IhxEWQ1Mw4aiEh07JVtKhGJCgKcXTmzpdzh2Js2Rfi9LEpEiXUyqQoo1Uzm3K8d7RsyI8sqlWL/ghNRSEnxRZyn957b4pZQefy8HvPee/5vec9Rzn6KsrJ11EOjsbYb8RxD7dSqTt4huOb8ca82tDYaySp1hPUSFybP4NvtI0Dgm80hVKjx6g1YuwTqnTLMP5XI49dKI5LdI/MbSTnMhJ48pqQtFWp0jW8grXBwjpBlVR35aLsFjbMrWI7c62kxlSmJyKMGWEKmWYKg82M9Qd4291M3x0V5VDhItqnHpre3aRx+gaRD93EP97myHg7vpfnpK2kbVojpmVi2FdQ4f1ZkKI8aYLeANwKQrvK52tBlLqRFCcmr3N84qqthwuXaBhP23HD+BXq8incuZjcWSvl0kHnSAjyAVayYdYehljramK1OwlpjamOAErl8yjuZyEbVyaEJ6PiFnVZa6LV2SjenDyGtFwmhnd1MZSTMhiGrtNidArON0JbmC8XVOsOE/KztoXf51bea68lqBBahiI8zqr0Pw0y8KCFgXtB7veEeNQZ4XJvBGXXkMr/UiGUv1ApES3NhSkdFnSHEkNlh6BYl/8Hk+l/ckyon0rjF/VPdOB/025T/0sV0zTZxPrW1zGXv2GuroouY66sCN8distOrlh0+LHm7NniobB9mMLSEszPCwuwuAhzcw5fhQVZm5mB2VkQ0+3jJ0C8P65U8ZtVAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1be429a26969d3168ed253cd99001773/b3c81/clezer-2.webp 1200w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1be429a26969d3168ed253cd99001773/a1b30/clezer-2.png 1200w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/1be429a26969d3168ed253cd99001773/a1b30/clezer-2.png\",\n    \"alt\": \"Clezer landing page, payment card\",\n    \"title\": \"Clezer landing page, payment card\",\n    \"loading\": \"lazy\"\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h1\", {\n    \"id\": \"flyaway\"\n  }, \"Flyaway\"), mdx(\"p\", null, \"Have you ever been in this situation where you feel the need to go for a short break,\\nyou have saved a little budget to travel \\u2026 But then where to go?\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Well, this is where \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://flyaway.app\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"flyaway.app\"), \" flights Inspiration search can come really handy \\uD83D\\uDE00.\\nIt provides a list of possible destinations from your chosen origin, with a single search.\"), mdx(\"div\", {\n    \"className\": \"Image__Medium\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.166666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACAUlEQVQoz12TiW7bMBBE9f+/1yZO6yaNY1sHdfI+dEyHNFoYhbAgBQrDN7OrSioFpTXWbcN+HI/adwAHdIjopgWjVGilxecSSn2xhnmCMRrCRCxKQlIjbiuqWRtoYxDXFXkfUgKcBWLA6BLehMGvweJHb3HqPU5DwHl0mGQGUbhMDpd+gZgXeGpUMUYcpHrUXuj2A4WwtwkvFHkbPF4p9DlZvAuJb53Db+6FNDjz7KNuMM0jUiacVLa78mWD9r5YL4RrxEDCF+GK4BsJf7cC568rXkWmmtDMCvdxQd1c0Q8CYU2oAgkzZRbyISARu2RI2kL4JPg+aHTS4bNp0LR3CNFgHAUj05DM0aeIamF+uREbRQybkNcHYXoidP9s32aDsb5CLRPq7o5bfSl2W9HCBo/K0qZzDpk0E5ZuZ9v/EZ5IeO4N2sVglhId7V+YXTcOaNsrLsMMlTZU/TRh4Qd5fGx4WD94AZjrc4avnULd1uj6jh03eOnYkHbBFzP8uN8wjA0nJKDyMSGmbPVApk0cm51rbkr/ZPlE0Vr6QtgsDvWsmavH99biJ896qeFyhpoD+XdscpblyZa5DjYWkkdTHG6ih8rhM+OZud1GiXfSXidNQQNLmEpaB0eiPNgTxXOWYNcO3hYorBiDjitMWuGj52jE8kc4Dr6lsGFZn8sh7Rv+ANA7SiQEwoBnAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/beedde3e8403e4b6764a9493e64008a2/b3c81/map-2.webp 1200w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/beedde3e8403e4b6764a9493e64008a2/a1b30/map-2.png 1200w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/beedde3e8403e4b6764a9493e64008a2/a1b30/map-2.png\",\n    \"alt\": \"flyaway.com destinations map view\",\n    \"title\": \"flyaway.com destinations map view\",\n    \"loading\": \"lazy\"\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h1\", {\n    \"id\": \"codelify\"\n  }, \"Codelify\"), mdx(\"p\", null, \"Code Snippets are everywhere in developers info stream: Twitter, stack overflow, tutorials, medium/blog articles \\u2026 However, there is no way to easily and efficiently store, organise, index and search them for futur use.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://bit.ly/codelify\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Codelify\"), \" is the tool to go to, to resolve this challenge.\"), mdx(\"div\", {\n    \"className\": \"Image__Medium\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"2855px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"63.29246935201402%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACRElEQVQ4y5VTy2oUQRQtcSGiCCoSTARRcBVciG504cJ/UPEDVFxF8TtcKSJkslDiAxM3Lt0kCx/JQhDNJKPj2D3T06/p6Znqx2T6fbzV3TNJQINWc7hVXXVP3XvPLdb3fbjDIcTIsuyP+J/BdtsckTkOx8b6Omq1GqpkBWRJQlOWc7RbLTSlXzAMA0w4JUmKlOwISZIgTdMxIfc9qF0Lhm5AUTQoqo75N28xO/8aT56+wsPKMzx4XEFDboIJR90wYbguNILuedDEWjfHkYZxjJDOqbwPh8ojKyr2TE6DHZgC2z8JtvdojqUPq0XK3HFhmBY6dg8SkdU1DTZ3xmnHRIhttbT7HDfu3Me1WzO4fvsu4R6u3pxBtVYvCMMohmn10eUeFta+4dHKJ0i9Xu6clKnHUQSTUvVcj852UXm+gLkXi5h7uZjPZwltrazhbkPUNCPSIRH+UFXwgY+Vz1/ADp8CO3Ia7OAJSvs42L4JvFt+X0S4o0VKjC7a3jpReckapXbywhVMnbuMibOXcGz6Ig6dOY/lj6tFhH8FfUI0zjls20avhNXtQtV1tJQ2GpKM7/Wf+FrdQIdKwf6lWQWpECZO4twmpUji0jRNClCrRVQWFmcpGi5Hn6KIwghhGCIIAqQklDIcoGlZ8EkIQRTQnhDHiyPUeQ8OqR1GhY+A6F8mVFR9t+hFswOTIOaCxAw20erQP1qLdESqgsQNhmhST4pGFz5Gvm/lpAzZ1jMbvY4db5jspudj4A/yCIt/2CFYmm75/AbxEbL+8HvHMQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/cc4210c928fcce9d4a947c30a26dbc52/03b85/codelify-landing.webp 2500w\", \"/static/cc4210c928fcce9d4a947c30a26dbc52/8e9c6/codelify-landing.webp 2855w\"],\n    \"sizes\": \"(max-width: 2855px) 100vw, 2855px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/cc4210c928fcce9d4a947c30a26dbc52/85b43/codelify-landing.png 2500w\", \"/static/cc4210c928fcce9d4a947c30a26dbc52/e264d/codelify-landing.png 2855w\"],\n    \"sizes\": \"(max-width: 2855px) 100vw, 2855px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/cc4210c928fcce9d4a947c30a26dbc52/e264d/codelify-landing.png\",\n    \"alt\": \"Codelify.dev landing page image\",\n    \"title\": \"Codelify.dev landing page image\",\n    \"loading\": \"lazy\"\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h1\", {\n    \"id\": \"dotpay\"\n  }, \"Dotpay\"), mdx(\"p\", null, \"Getting paid for businesses that provide services or sale goods offline can be cumbursome. They mostly have to deal with cheques, bank transfert, or worse cash.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://bit.ly/dotpayio\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Dotpay\"), \" provide a simple yet efficient solution for them to easily collect payment online through sharable unique link.\"), mdx(\"div\", {\n    \"className\": \"Image__Medium\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1600px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.625%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB+ElEQVQ4y52Ty2/TQBDG/Vdz5Y44ceNK1QsHQEg9INHCDUigeVlJKZCKgGM7JbZ3vd6195GP8ToptA09sNLn585PM9/MBoxxWGthjPmHun92d7e79/37g7th+9XGyFpBqAqujSfZrQL7H7D2LpUEF4LANeqmRtM0XYbtRWt9S38H3yxfSQU4QHEJtc7QLkHwNi7YYIN9yzoLbfQtaOtlKRhiGWHBv2NRzkEpoORbYPQjwflsjln4FWfhN0zHX/yzLKUH38zU2Q0ytsK75C36vIePsg/hSlRl1QF7iwkOh0d4PjrG08krHA6O8DJ8gxfnJ+ilIQHcNf+0NpRhiXpTgWmJs5QhYQY5L3xFAecl1r8ycM6R5wUKxpBml/i5irFIImT07Rqw0QRIMCqGGOUjhGUIaRUBczSmQTBdzfH64gNO0xnexxP0kymM7ryy24ZdlWxJjcFKpBjyAQbFKSZyTCULCPLQd/nZxQnu9R7h4fgJ7n96jAejg6uZ8iD7pxnOOdQ0Ju3IkBHIZI3PcYYVV9SUsgPua/IOUJsazDAIIzxc0bxlLIciqF8U69zGi5FVHtga2ZD0Vs12VGoa1FwVyC35a7vNrOJI80uss7zrOGXcLu2MB/qTctdpaMg/RYa3ZnfHTaIQnIAZkjhGTIqiCMvlElVV+T2/Abx45xgL327XAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/8e1389d9f05b978c7db5ead4fdea0c5f/cc386/dotpay.webp 1600w\"],\n    \"sizes\": \"(max-width: 1600px) 100vw, 1600px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/8e1389d9f05b978c7db5ead4fdea0c5f/2c525/dotpay.png 1600w\"],\n    \"sizes\": \"(max-width: 1600px) 100vw, 1600px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/8e1389d9f05b978c7db5ead4fdea0c5f/2c525/dotpay.png\",\n    \"alt\": \"Dotpay.io landing page image\",\n    \"title\": \"Dotpay.io landing page image\",\n    \"loading\": \"lazy\"\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h1\", {\n    \"id\": \"station-wip\"\n  }, \"Station (wip)\"), mdx(\"p\", null, \"Most, real estate agencies and coworking space businesses, are still managing their leasing contract and related payments, like in the late nineties \\uD83D\\uDE05. They process paper based contract signature (print => sign => scan => email). Then, rollout paper based bank debit autorisation for rent collection, forced to deal with there banks ugly, non UX-driven interface on monthly basis.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://bit.ly/getonstation\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Station\"), \" bring them back to the future with electronic contract management and signature, blended with automated invoicing and payment collections. Just like simple online subscription.\"), mdx(\"div\", {\n    \"className\": \"Image__Medium\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1600px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"75.375%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAACCUlEQVQ4y21Ta3PaMBDk//+t9kubTpsQmunQQBIKGGM7fluyHt6uZAw24Jmdk2+kvb3VaWZlhCrdIo3eYdsInYov8YxoFPv1eN8YM5ccoxvIWAjNEXCR/2hHYN6K413S2XUFT+wIRIR8tUQwf8KWCBbP2C/m2D0/Ifv7B115gNV3CG8UDlW5WTPm6T+8vf7G++oF6+UC8WENLY+3+y+E8bnVfh2fPSpJltHbLPpAemSMP5AXO5TVHkDmi95peVppgKZ3DduqiwBtFULRgjrcIPzyHeHXByTffkLXhzPpwOEVnmU7w1Xi4dZGsm0SuWiZk8kW2cMjsh+PyH/N+4vRU/9HLfOwahAVBZEjKXOkVQEhK19A1SEt2EFQVVUFqOoAdb5jsaPHRKH3jIlWS6RKITshaVtUjEY4Bb3PebLxfnrQ26bYQ1YHqCacEoKbhW6QG4PSaBQnVISRCTQPlGzZcga16FUNrUInVy2fFDrC2lo01kB0Fi06tCyg5Sc3k4htu7EJNkuEu1eIco+WFkhacKPQj40WUMpAaY2ulhxuUtqOhKknNO6FOMjp7N7csn+nPGCpUJNQa4POkRU1rHGEGUmOfnwyehftV4iDtcdn+OZV6tNTHI0NE0Zg+DqHumHOwrQFO+gPuDbd7brLcFGUwfUtj58PvVI511Sk2KY+xfYyvND9JVwwncP/6TSCrU964d0AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/63f036ee5b796555c6d7f9f8c85e5711/cc386/station.webp 1600w\"],\n    \"sizes\": \"(max-width: 1600px) 100vw, 1600px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/63f036ee5b796555c6d7f9f8c85e5711/2c525/station.png 1600w\"],\n    \"sizes\": \"(max-width: 1600px) 100vw, 1600px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/63f036ee5b796555c6d7f9f8c85e5711/2c525/station.png\",\n    \"alt\": \"Station landing page image\",\n    \"title\": \"Station landing page image\",\n    \"loading\": \"lazy\"\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h1\", {\n    \"id\": \"simple\"\n  }, \"Simple\"), mdx(\"p\", null, \"No one can or want to remember their credit card number, but everyone knows their phone number and email address. So why not securely checkout online with the thing that you already know by heart, without looking for your wallet?\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://bit.ly/usesimple\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Simple\"), \" allow just that, its faster \\uD83D\\uDE80, simpler \\uD83D\\uDC4C, and yet safer \\uD83D\\uDD10.\"), mdx(\"div\", {\n    \"className\": \"Image__Medium\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1600px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"67.375%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAABYklEQVQ4y51S7U6DMBTlTTU+ovpDfQmTzaBGs0S3EWDjo0ALpbDjuUsgSHRm3uSkvbft6bkfHmiHw+GIYd/3/RHD3nXd6J+CmDclHIL/NXnvTYlsY+H7b1guX/FErD8DLBbP2GxCpKVGsM8QJjmiVCHKFApdo7UtLNExi1Gh63qsdim2vOSvQ/gfAd6DCC+bCI+rNR8XKCuNvKhQkkTJWhk0JGpbR8wIeyqs5YBBJzWj3/CSoWKJW0JMkzSOYxitT6c8N2nCPk6gywq1qVFxFbu/e8DlxRVurm+Pvqj6synDgZQhY90ypiZIBfTjvIBz3ahobt5c8nBJfq+ortQG23CHXZLB1A1qlmGo10+T8SuhzJ1tmhFlWcK10oQzCKdpCKFi7RSJanZTU51lqo39Tngy5Tlhwa5mueKIVCSsSWzPI/zWFMdx4WNjDJIkgVIKjaTPmHx2tsJ512UVZfLRNDa3L+eF+hXIkXKLAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/b54864e3264f3c9309d6de9f96a25c62/cc386/simple.webp 1600w\"],\n    \"sizes\": \"(max-width: 1600px) 100vw, 1600px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/b54864e3264f3c9309d6de9f96a25c62/2c525/simple.png 1600w\"],\n    \"sizes\": \"(max-width: 1600px) 100vw, 1600px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/b54864e3264f3c9309d6de9f96a25c62/2c525/simple.png\",\n    \"alt\": \"Simple landing page image\",\n    \"title\": \"Simple landing page image\",\n    \"loading\": \"lazy\"\n  })), \"\\n      \"), \"\\n    \")));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHj1mJSC//EABsQAAIBBQAAAAAAAAAAAAAAAAECAAMQERIT/9oACAEBAAEFAlpFpwMZdTMm3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAMBAQAAAAAAAAAAAAAAAAAQMRFB/9oACAEBAAY/AuFMVX//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEQITFBYf/aAAgBAQABPyGvp2gpdOaiKoKdz2Y//9oADAMBAAIAAwAAABBcz//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/EKf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQIf/aAAgBAgEBPxCH/8QAHBABAAIBBQAAAAAAAAAAAAAAAQARUSExYXHx/9oACAEBAAE/ECEKqluIBFKhrxcQAUxNmR0z0IqtrbP/2Q==","aspectRatio":1.5,"src":"/static/f14940055760e858d4bbae9fbe4a1310/3db47/portfolio.jpg","srcSet":"/static/f14940055760e858d4bbae9fbe4a1310/751b5/portfolio.jpg 236w,\n/static/f14940055760e858d4bbae9fbe4a1310/b976c/portfolio.jpg 472w,\n/static/f14940055760e858d4bbae9fbe4a1310/3db47/portfolio.jpg 944w,\n/static/f14940055760e858d4bbae9fbe4a1310/86173/portfolio.jpg 1200w","srcWebp":"/static/f14940055760e858d4bbae9fbe4a1310/cb939/portfolio.webp","srcSetWebp":"/static/f14940055760e858d4bbae9fbe4a1310/75d10/portfolio.webp 236w,\n/static/f14940055760e858d4bbae9fbe4a1310/2a00c/portfolio.webp 472w,\n/static/f14940055760e858d4bbae9fbe4a1310/cb939/portfolio.webp 944w,\n/static/f14940055760e858d4bbae9fbe4a1310/45222/portfolio.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHj1mJSC//EABsQAAIBBQAAAAAAAAAAAAAAAAECAAMQERIT/9oACAEBAAEFAlpFpwMZdTMm3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAMBAQAAAAAAAAAAAAAAAAAQMRFB/9oACAEBAAY/AuFMVX//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEQITFBYf/aAAgBAQABPyGvp2gpdOaiKoKdz2Y//9oADAMBAAIAAwAAABBcz//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/EKf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQIf/aAAgBAgEBPxCH/8QAHBABAAIBBQAAAAAAAAAAAAAAAQARUSExYXHx/9oACAEBAAE/ECEKqluIBFKhrxcQAUxNmR0z0IqtrbP/2Q==","aspectRatio":1.5,"src":"/static/f14940055760e858d4bbae9fbe4a1310/d5b37/portfolio.jpg","srcSet":"/static/f14940055760e858d4bbae9fbe4a1310/6a7e4/portfolio.jpg 163w,\n/static/f14940055760e858d4bbae9fbe4a1310/7e2e7/portfolio.jpg 327w,\n/static/f14940055760e858d4bbae9fbe4a1310/d5b37/portfolio.jpg 653w,\n/static/f14940055760e858d4bbae9fbe4a1310/6aea0/portfolio.jpg 980w,\n/static/f14940055760e858d4bbae9fbe4a1310/86173/portfolio.jpg 1200w","srcWebp":"/static/f14940055760e858d4bbae9fbe4a1310/0f54f/portfolio.webp","srcSetWebp":"/static/f14940055760e858d4bbae9fbe4a1310/e2fca/portfolio.webp 163w,\n/static/f14940055760e858d4bbae9fbe4a1310/bb40c/portfolio.webp 327w,\n/static/f14940055760e858d4bbae9fbe4a1310/0f54f/portfolio.webp 653w,\n/static/f14940055760e858d4bbae9fbe4a1310/cd024/portfolio.webp 980w,\n/static/f14940055760e858d4bbae9fbe4a1310/45222/portfolio.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px"},"narrow":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHj1mJSC//EABsQAAIBBQAAAAAAAAAAAAAAAAECAAMQERIT/9oACAEBAAEFAlpFpwMZdTMm3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAMBAQAAAAAAAAAAAAAAAAAQMRFB/9oACAEBAAY/AuFMVX//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEQITFBYf/aAAgBAQABPyGvp2gpdOaiKoKdz2Y//9oADAMBAAIAAwAAABBcz//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/EKf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQIf/aAAgBAgEBPxCH/8QAHBABAAIBBQAAAAAAAAAAAAAAAQARUSExYXHx/9oACAEBAAE/ECEKqluIBFKhrxcQAUxNmR0z0IqtrbP/2Q==","aspectRatio":1.5,"src":"/static/f14940055760e858d4bbae9fbe4a1310/2924d/portfolio.jpg","srcSet":"/static/f14940055760e858d4bbae9fbe4a1310/504cd/portfolio.jpg 114w,\n/static/f14940055760e858d4bbae9fbe4a1310/beab7/portfolio.jpg 229w,\n/static/f14940055760e858d4bbae9fbe4a1310/2924d/portfolio.jpg 457w,\n/static/f14940055760e858d4bbae9fbe4a1310/85d2d/portfolio.jpg 686w,\n/static/f14940055760e858d4bbae9fbe4a1310/5e5f8/portfolio.jpg 914w,\n/static/f14940055760e858d4bbae9fbe4a1310/86173/portfolio.jpg 1200w","srcWebp":"/static/f14940055760e858d4bbae9fbe4a1310/d4e70/portfolio.webp","srcSetWebp":"/static/f14940055760e858d4bbae9fbe4a1310/50468/portfolio.webp 114w,\n/static/f14940055760e858d4bbae9fbe4a1310/3bfb7/portfolio.webp 229w,\n/static/f14940055760e858d4bbae9fbe4a1310/d4e70/portfolio.webp 457w,\n/static/f14940055760e858d4bbae9fbe4a1310/45a20/portfolio.webp 686w,\n/static/f14940055760e858d4bbae9fbe4a1310/0af0b/portfolio.webp 914w,\n/static/f14940055760e858d4bbae9fbe4a1310/45222/portfolio.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px"},"seo":{"src":"/static/f14940055760e858d4bbae9fbe4a1310/86173/portfolio.jpg"}}},"authors":[{"authorsPage":true,"bio":"I’m Haja, Front-end developper. Ex-Dreamer 🤔 turned Builder 🛠. I code for fun 🥳, living 😎, and sharing. I write as I learn 🤓. I learn as I write ✍🏼.","id":"187d0db3-c57c-5455-ad24-678a9da5b361","name":"Haja Andriamaro","featured":true,"social":[{"url":"https://github.com/Haja-andri"},{"url":"https://twitter.com/haja_andriam"},{"url":"https://www.linkedin.com/in/haja-andriamaro/"}],"slug":"/authors/haja-andriamaro","avatar":{"small":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABcBAAMBAAAAAAAAAAAAAAAAAAACAwT/2gAMAwEAAhADEAAAAdqFDOmgGTHWKt8s6kD/xAAgEAABAwIHAAAAAAAAAAAAAAACAAEDERIEEBQyM0FC/9oACAEBAAEFAiK0QI8sRxw0dlNfIgKjal2Xfk93/8QAGREAAgMBAAAAAAAAAAAAAAAAAAECEBIh/9oACAEDAQE/AUuVuSRuR//EABgRAQADAQAAAAAAAAAAAAAAAAEAEBIx/9oACAECAQE/AXtZGZJ//8QAHhAAAQMEAwAAAAAAAAAAAAAAAAECERAhcYEiMVH/2gAIAQEABj8Ck5xqmxt1pE2E8Q6GjMi5P//EACAQAQACAQMFAQAAAAAAAAAAAAEAETEQIZFBUWGBseH/2gAIAQEAAT8hJlL+UezGgN7dAWBSx86ZG3WEVhe5u5fyYjdh9InvF8wc77P/2gAMAwEAAgADAAAAENAOc//EABgRAAMBAQAAAAAAAAAAAAAAAAABETEQ/9oACAEDAQE/EEO+WldFDT//xAAaEQACAgMAAAAAAAAAAAAAAAAAARARITFh/9oACAECAQE/EGeEXk60cT//xAAeEAEAAQQDAQEAAAAAAAAAAAABEQAhMUEQUWFxof/aAAgBAQABPxA2pcB20iYSAWLu5b8MmhwNHtOV0k73yecJpWgwffYpxBY5jGNSn1im14bmKul2F+UTLrerqDFgP1X/2Q==","aspectRatio":0.7348438456827924,"src":"/static/84813d5f58f168676e3203c5cbfd42b9/0a005/haja-1.jpg","srcSet":"/static/84813d5f58f168676e3203c5cbfd42b9/431b7/haja-1.jpg 13w,\n/static/84813d5f58f168676e3203c5cbfd42b9/4d5af/haja-1.jpg 25w,\n/static/84813d5f58f168676e3203c5cbfd42b9/0a005/haja-1.jpg 50w,\n/static/84813d5f58f168676e3203c5cbfd42b9/05f9f/haja-1.jpg 75w,\n/static/84813d5f58f168676e3203c5cbfd42b9/1cf29/haja-1.jpg 100w,\n/static/84813d5f58f168676e3203c5cbfd42b9/86173/haja-1.jpg 1200w","srcWebp":"/static/84813d5f58f168676e3203c5cbfd42b9/7536e/haja-1.webp","srcSetWebp":"/static/84813d5f58f168676e3203c5cbfd42b9/5c556/haja-1.webp 13w,\n/static/84813d5f58f168676e3203c5cbfd42b9/3eaea/haja-1.webp 25w,\n/static/84813d5f58f168676e3203c5cbfd42b9/7536e/haja-1.webp 50w,\n/static/84813d5f58f168676e3203c5cbfd42b9/251f8/haja-1.webp 75w,\n/static/84813d5f58f168676e3203c5cbfd42b9/7e254/haja-1.webp 100w,\n/static/84813d5f58f168676e3203c5cbfd42b9/45222/haja-1.webp 1200w","sizes":"(max-width: 50px) 100vw, 50px"},"medium":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABcBAAMBAAAAAAAAAAAAAAAAAAACAwT/2gAMAwEAAhADEAAAAdqFDOmgGTHWKt8s6kD/xAAgEAABAwIHAAAAAAAAAAAAAAACAAEDERIEEBQyM0FC/9oACAEBAAEFAiK0QI8sRxw0dlNfIgKjal2Xfk93/8QAGREAAgMBAAAAAAAAAAAAAAAAAAECEBIh/9oACAEDAQE/AUuVuSRuR//EABgRAQADAQAAAAAAAAAAAAAAAAEAEBIx/9oACAECAQE/AXtZGZJ//8QAHhAAAQMEAwAAAAAAAAAAAAAAAAECERAhcYEiMVH/2gAIAQEABj8Ck5xqmxt1pE2E8Q6GjMi5P//EACAQAQACAQMFAQAAAAAAAAAAAAEAETEQIZFBUWGBseH/2gAIAQEAAT8hJlL+UezGgN7dAWBSx86ZG3WEVhe5u5fyYjdh9InvF8wc77P/2gAMAwEAAgADAAAAENAOc//EABgRAAMBAQAAAAAAAAAAAAAAAAABETEQ/9oACAEDAQE/EEO+WldFDT//xAAaEQACAgMAAAAAAAAAAAAAAAAAARARITFh/9oACAECAQE/EGeEXk60cT//xAAeEAEAAQQDAQEAAAAAAAAAAAABEQAhMUEQUWFxof/aAAgBAQABPxA2pcB20iYSAWLu5b8MmhwNHtOV0k73yecJpWgwffYpxBY5jGNSn1im14bmKul2F+UTLrerqDFgP1X/2Q==","aspectRatio":0.7348438456827924,"src":"/static/84813d5f58f168676e3203c5cbfd42b9/1cf29/haja-1.jpg","srcSet":"/static/84813d5f58f168676e3203c5cbfd42b9/4d5af/haja-1.jpg 25w,\n/static/84813d5f58f168676e3203c5cbfd42b9/0a005/haja-1.jpg 50w,\n/static/84813d5f58f168676e3203c5cbfd42b9/1cf29/haja-1.jpg 100w,\n/static/84813d5f58f168676e3203c5cbfd42b9/a6913/haja-1.jpg 150w,\n/static/84813d5f58f168676e3203c5cbfd42b9/b5b92/haja-1.jpg 200w,\n/static/84813d5f58f168676e3203c5cbfd42b9/86173/haja-1.jpg 1200w","srcWebp":"/static/84813d5f58f168676e3203c5cbfd42b9/7e254/haja-1.webp","srcSetWebp":"/static/84813d5f58f168676e3203c5cbfd42b9/3eaea/haja-1.webp 25w,\n/static/84813d5f58f168676e3203c5cbfd42b9/7536e/haja-1.webp 50w,\n/static/84813d5f58f168676e3203c5cbfd42b9/7e254/haja-1.webp 100w,\n/static/84813d5f58f168676e3203c5cbfd42b9/3b818/haja-1.webp 150w,\n/static/84813d5f58f168676e3203c5cbfd42b9/0e93d/haja-1.webp 200w,\n/static/84813d5f58f168676e3203c5cbfd42b9/45222/haja-1.webp 1200w","sizes":"(max-width: 100px) 100vw, 100px"},"large":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABcBAAMBAAAAAAAAAAAAAAAAAAACAwT/2gAMAwEAAhADEAAAAdqFDOmgGTHWKt8s6kD/xAAgEAABAwIHAAAAAAAAAAAAAAACAAEDERIEEBQyM0FC/9oACAEBAAEFAiK0QI8sRxw0dlNfIgKjal2Xfk93/8QAGREAAgMBAAAAAAAAAAAAAAAAAAECEBIh/9oACAEDAQE/AUuVuSRuR//EABgRAQADAQAAAAAAAAAAAAAAAAEAEBIx/9oACAECAQE/AXtZGZJ//8QAHhAAAQMEAwAAAAAAAAAAAAAAAAECERAhcYEiMVH/2gAIAQEABj8Ck5xqmxt1pE2E8Q6GjMi5P//EACAQAQACAQMFAQAAAAAAAAAAAAEAETEQIZFBUWGBseH/2gAIAQEAAT8hJlL+UezGgN7dAWBSx86ZG3WEVhe5u5fyYjdh9InvF8wc77P/2gAMAwEAAgADAAAAENAOc//EABgRAAMBAQAAAAAAAAAAAAAAAAABETEQ/9oACAEDAQE/EEO+WldFDT//xAAaEQACAgMAAAAAAAAAAAAAAAAAARARITFh/9oACAECAQE/EGeEXk60cT//xAAeEAEAAQQDAQEAAAAAAAAAAAABEQAhMUEQUWFxof/aAAgBAQABPxA2pcB20iYSAWLu5b8MmhwNHtOV0k73yecJpWgwffYpxBY5jGNSn1im14bmKul2F+UTLrerqDFgP1X/2Q==","aspectRatio":0.7348438456827924,"src":"/static/84813d5f58f168676e3203c5cbfd42b9/447fe/haja-1.jpg","srcSet":"/static/84813d5f58f168676e3203c5cbfd42b9/00dd0/haja-1.jpg 82w,\n/static/84813d5f58f168676e3203c5cbfd42b9/703de/haja-1.jpg 164w,\n/static/84813d5f58f168676e3203c5cbfd42b9/447fe/haja-1.jpg 328w,\n/static/84813d5f58f168676e3203c5cbfd42b9/4e00a/haja-1.jpg 492w,\n/static/84813d5f58f168676e3203c5cbfd42b9/55d06/haja-1.jpg 656w,\n/static/84813d5f58f168676e3203c5cbfd42b9/86173/haja-1.jpg 1200w","srcWebp":"/static/84813d5f58f168676e3203c5cbfd42b9/c4073/haja-1.webp","srcSetWebp":"/static/84813d5f58f168676e3203c5cbfd42b9/e71fc/haja-1.webp 82w,\n/static/84813d5f58f168676e3203c5cbfd42b9/ab92a/haja-1.webp 164w,\n/static/84813d5f58f168676e3203c5cbfd42b9/c4073/haja-1.webp 328w,\n/static/84813d5f58f168676e3203c5cbfd42b9/cb0b6/haja-1.webp 492w,\n/static/84813d5f58f168676e3203c5cbfd42b9/9278f/haja-1.webp 656w,\n/static/84813d5f58f168676e3203c5cbfd42b9/45222/haja-1.webp 1200w","sizes":"(max-width: 328px) 100vw, 328px"}}}],"basePath":"/","slug":"/my-portfolio-and-projects","id":"b7b1082c-74d5-50c5-9c03-a563755dc379","title":"My portfolio and projects.","mailchimp":"","next":[{"id":"0b5998ce-ff98-5a7c-b707-b595412c806b","slug":"/discovering-python-from-a-javascript-reference","secret":false,"title":"Discovering Python, from a Javascript reference.","author":"Haja Andriamaro","date":"October 6th, 2019","dateForSEO":"2019-10-06T00:00:00.000Z","timeToRead":3,"excerpt":"I have learned Javascript as my first langage. This article is about my first week in discovering Python few months dow the line.","subscription":true,"body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Discovering Python, from a Javascript reference.\",\n  \"author\": \"Haja Andriamaro\",\n  \"date\": \"2019-10-06T00:00:00.000Z\",\n  \"hero\": \"./images/python.jpg\",\n  \"excerpt\": \"I have learned Javascript as my first langage. This article is about my first week in discovering Python few months dow the line.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"first-feeling\"\n  }, \"First feeling\"), mdx(\"p\", null, \"Learning a new langage feels ecxiting and scary at the same time. You are excited because you are going to learn something new, that\\u2019s by\\nit self is very ecxiting regardless of what you are going to learn. And at the same time, it is scary because you have to get out of\\nyour confort zone. However, this time, i felt more excited than when i initially decided to learn javascript. I guess my level\\nof confidence went up since the beggining of my coder journey.  \"), mdx(\"p\", null, \"Following are my intial notes after a week of diving into Python @LambdaSchool. I will be using Javascript as point of comparaison where relevant.\"), mdx(\"h2\", {\n    \"id\": \"structuring-the-code\"\n  }, \"Structuring the code\"), mdx(\"h3\", {\n    \"id\": \"variables\"\n  }, \"Variables\"), mdx(\"p\", null, \"The first thing i have noticed, is the absence of varariables label in Python. There is no need to label your variables\\nwith \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \". You just give a variable name, and its initial value.\\nThe type of the intial value assigned will define how the variable can be used later, mostly if it is mutable or not.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# Mutable varialble (string)\\nmy_variable = \\\"initial value\\\" # let my_variable = \\\"initial value\\\" in js\\n\\n# Non Mytable variable (tuple)\\ntuple_variable = (\\\"some data\\\") # const tuple_variable = [\\\"some data\\\"]\\n\")), mdx(\"h3\", {\n    \"id\": \"comments\"\n  }, \"Comments\"), mdx(\"p\", null, \"Single line comment in Python start with the character \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"#\"), \". \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# this is a single line comment\\n# Equivalent to `//` in js\\n\")), mdx(\"h3\", {\n    \"id\": \"consolelog\"\n  }, \"Console.log\"), mdx(\"p\", null, \"This is straight forward\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"print(\\\"something\\\") # console.log(\\\"something\\\")\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Print()\"), \" can also take several formating parameters such as the one below\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"print(f\\\"Received variable {variable}\\\") # console.log(`Received variable ${variable}`)\\n\")), mdx(\"h3\", {\n    \"id\": \"operators\"\n  }, \"Operators\"), mdx(\"p\", null, \"As an overall appraoch, Python seems to be designed to be as close as possible to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"english words\"), \".\\nTherefore in many cases, symbols will be replaced by plain english words. \"), mdx(\"p\", null, \"Also worth noting that conditional test \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"else if\"), \" is shortened to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"elif\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# Logical operators in python\\nif A and B: # if (A && B) {} \\nelif A or B: # else if ( A || B) {}\\nelif A not B: # else if ( A != B) {}\\nelse: # else {}\\n\")), mdx(\"p\", null, \"Python\\u2019s membership operators test the presence of a given data inside a sequence (strings, lists, \\u2026)\\nFollowing are the two main onces\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"a = 10\\nb = 20\\nlist = [1, 4, 5, 10 ]\\n\\nif a in list: # so easy to read and remember :)\\n    print(\\\"A is present in the list\\\") # Console.log(\\\"A is present in the list\\\")\\nif b not in list:\\n    print(\\\"B is not present in the list\\\") # Console.log(\\\"B is not present in the list\\\")\\n\")), mdx(\"h3\", {\n    \"id\": \"stronger-types-int-string-float-\"\n  }, \"Stronger types (int, string, float, )\"), mdx(\"p\", null, \"Python is a typed langage, it requires that your data types are in synch before executing it.\\nFor example, a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"string\"), \" and an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"integer\"), \" cannot be concanated unless the integer is explicitly converted into a string.\\nWhich is not required in Javascript.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"integer = 4 # const loop = 4\\nstring = \\\"Number of wheels\\\" # const string = \\\"Number of wheels\\\"\\n\\n# the integer is converted first with str(). in JS const phrase =  string + integer;\\nphrase = string + str(integer) \\n\")), mdx(\"h3\", {\n    \"id\": \"list-array\"\n  }, \"List (array?)\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"List\"), \" in Python are similar to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"array\"), \" in JavaScript.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# Python list\\nmy_fruits = [\\\"orange\\\", \\\"apple\\\", \\\"pear\\\"] # const my_fruits = [\\\"orange\\\", \\\"apple\\\", \\\"pear\\\"]\\n\")), mdx(\"h3\", {\n    \"id\": \"dictionnary-object\"\n  }, \"Dictionnary (Object?)\"), mdx(\"p\", null, \"As for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Dictionary\"), \", the closest thing in JavaScript are objects\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# Python dictionary\\nmy_fruits = {\\n    \\\"name\\\": \\\"apple\\\",\\n    \\\"color\\\" \\\"red\\\",\\n    \\\"prce\\\": \\\"10\\n    } # same in js but with a lable (const, var, let) before the variable name\\n\")), mdx(\"h3\", {\n    \"id\": \"tuple-imutable-list\"\n  }, \"Tuple (Imutable list)\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Tuple\"), \" are like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"List\"), \", but with the following specificities.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The data intialisation is wrapped between two parentheses \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"()\"), \", not square brackets \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"[]\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tuples\"), \" are not mutable. It can not be changed once initialised\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# Python typle\\nmy_fruits = (\\\"orange\\\", \\\"apple\\\", \\\"pear\\\") \\n\")), mdx(\"h2\", {\n    \"id\": \"functions\"\n  }, \"Functions\"), mdx(\"h3\", {\n    \"id\": \"column-semi-column-indentation\"\n  }, \"Column, Semi-column, Indentation\"), mdx(\"p\", null, \"Functions bloc in Python, are NOT wrapped inside curly brackets \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{}\"), \". It uses a combinaison of column \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \":\"), \"\\nand indentation after the column, to define the start/end of a bloc of code. Its advised to use 4 spaces.\\nTabs can be used as well but the entire script must be consistent (not mixin spaces and Tabs).\\nThe key word \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"function\"), \" in js is also replace by key word \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"def\"), \" in Python.\\nFinally, there is no need to finish each line of code with a semi-colun \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \";\"), \" as we would do in Javascript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# Python function\\ndef my_function (a, b): # the column define the beggining of the bloc\\n    return a + b # each line of code inside the function must have the same indentation\\n# }\\n\")), mdx(\"h3\", {\n    \"id\": \"passing-as-reference-vs-value\"\n  }, \"Passing as reference vs Value\"), mdx(\"p\", null, \"Argument in Python can be passed as reference, or as value. Passing a value will make a copy of the\\noriginal data, and that copy will eventually be mutated by the function.\\nOn the other hand, passing as reference send a reference of the original data (memory location) to the function.\\nTherefore, if you try to mutate the received variable, the original data that will mutate (change).\"), mdx(\"p\", null, \"If you are like me, being a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"visual\"), \" person, this illustration is quite helpfull to understand the difference.\"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"div\"\n  }, {\n    \"src\": \"/0ebcf92f08765ad2dc65daf15e0ec94d/pass-by-ref-vs-value.gif\",\n    \"alt\": \"Passing as Reference vs Value\"\n  }))), mdx(\"p\", null, \"Having said that, from a pure syntaxe point of view, I could not find a way to differentiate the two approaches.\\nMy understanding is that the type of argument (mutable or not) the function receives, will\\ndefine the behaviour (by reference or value). Probably more on that further down the line.\"), mdx(\"h3\", {\n    \"id\": \"undefined-number-of-arguments\"\n  }, \"Undefined number of arguments\"), mdx(\"p\", null, \"A cool feature in Python is to be able to write a function that accepts an arbitrary number of keyword arguments.\\nI am not sure yet practically how it can be used/usefull, but its good to keep in mind. \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"def with_arbitrary_num_of_arg(**keywords):\\n    for key in keywords:\\n        print(f\\\"key: {key}, value: {keywords[key]}\\\")\\n\\n# Should print\\n# key: a, value: 12\\n# key: b, value: 30\\nwith_arbitrary_num_of_arg(a=12, b=30)\\n\")), mdx(\"h2\", {\n    \"id\": \"class\"\n  }, \"Class\"), mdx(\"h3\", {\n    \"id\": \"self\"\n  }, \"Self\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"self\"), \" keyword in python class is the equivalent of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"this\"), \" in JavaScript class.  \"), mdx(\"h3\", {\n    \"id\": \"inheritence-is-a\"\n  }, \"Inheritence (is a)\"), mdx(\"p\", null, \"A class can inherit from a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"parent\"), \" classe properties and methodes by :\\n1. Passing the parent as argument of the child class\\n2. Refering to the parent in the child class constructor with the keyword \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"super\"), \"   \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# Parent class\\nclass LatLon:\\n    def __init__(self, lat, lon):\\n        self.lat = lat\\n        self.lon = lon\\n\\n# Child class --> Waupoint (is a) LatLon\\nclass Waypoint(LatLon): # Receiving parent class as argument\\n    def __init__(lat, lon, name):\\n        # Child class constructor with reference to its parent using `super` keyword\\n        super().__init__(self, lat, lon) \\n        self.name = name # Child class specific property\\n\")), mdx(\"h3\", {\n    \"id\": \"composition-has-a\"\n  }, \"Composition (has a)\"), mdx(\"p\", null, \"Composition is a technique to define a class that can be composed with other classes properties and methodes.\\nA way to identify this type of relationship to use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"has a\"), \" between them. For example, in below code, a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Car\"), \" has a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Motor\"), \".\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-python\"\n  }), \"# Class Motor\\nclass Motor:\\n    def __init__(self, make, cc):\\n        self.make = make\\n        self.cc = cc\\n\\n# Class Car\\nclass Car:\\n    def __init__(self, make, model, engine):\\n        self.make = make\\n        self.model = model\\n        self.engine = engine\\n\\n# Instance of a Motor\\nhonda_petrol_motor = Motor(\\\"Honda\\\", 1799) \\n# Instance of Car that has a Honda motor\\ncar = Car(\\\"Honda\\\", \\\"Civic\\\", honda_petrol_motor) \\n\")), mdx(\"h2\", {\n    \"id\": \"conclusion\"\n  }, \"Conclusion\"), mdx(\"p\", null, \"Python feels fairly accessible when you already have some notions of coding from another langage.\\nI like its closeness to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"english word\"), \" compared to JavaScript. It makes the code more readable,\\nand building memory muscle faster. Additionaly, its seems to be a good choice for lower level process, such\\nas reading and manipulating files from the system, or accessing operating system info.\\nAt the time of writing this article, I mostly used Python to practice writing algorithms.\\nThat will be the subject of my next article.\"));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAf/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAY6YXlaJM1//xAAbEAACAwADAAAAAAAAAAAAAAABAgADEhEhMf/aAAgBAQABBQKsHPeS6iJcY1o4Pv8A/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BR//EABYRAQEBAAAAAAAAAAAAAAAAAAAREv/aAAgBAgEBPwHKP//EAB0QAAIBBAMAAAAAAAAAAAAAAAABEQIQISISMXH/2gAIAQEABj8C1hmKvTbsykyeCt//xAAaEAADAQEBAQAAAAAAAAAAAAAAAREhQVFx/9oACAEBAAE/IcKm9cgqSHwMol7iHHEAoqWb9w3iI//aAAwDAQACAAMAAAAQAz//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QUtX/xAAWEQADAAAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8QVIk//8QAHRABAAICAgMAAAAAAAAAAAAAAQARIUExkVGBsf/aAAgBAQABPxBrZAyir1yMAhqSmjw07p7lhfgVD6gyucCVVQOjILWxs4WOxAOgT4k//9k=","aspectRatio":1.5,"src":"/static/16aa457e2da74295e5a4f50704ea5d80/3db47/python.jpg","srcSet":"/static/16aa457e2da74295e5a4f50704ea5d80/751b5/python.jpg 236w,\n/static/16aa457e2da74295e5a4f50704ea5d80/b976c/python.jpg 472w,\n/static/16aa457e2da74295e5a4f50704ea5d80/3db47/python.jpg 944w,\n/static/16aa457e2da74295e5a4f50704ea5d80/86173/python.jpg 1200w","srcWebp":"/static/16aa457e2da74295e5a4f50704ea5d80/cb939/python.webp","srcSetWebp":"/static/16aa457e2da74295e5a4f50704ea5d80/75d10/python.webp 236w,\n/static/16aa457e2da74295e5a4f50704ea5d80/2a00c/python.webp 472w,\n/static/16aa457e2da74295e5a4f50704ea5d80/cb939/python.webp 944w,\n/static/16aa457e2da74295e5a4f50704ea5d80/45222/python.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAf/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAY6YXlaJM1//xAAbEAACAwADAAAAAAAAAAAAAAABAgADEhEhMf/aAAgBAQABBQKsHPeS6iJcY1o4Pv8A/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BR//EABYRAQEBAAAAAAAAAAAAAAAAAAAREv/aAAgBAgEBPwHKP//EAB0QAAIBBAMAAAAAAAAAAAAAAAABEQIQISISMXH/2gAIAQEABj8C1hmKvTbsykyeCt//xAAaEAADAQEBAQAAAAAAAAAAAAAAAREhQVFx/9oACAEBAAE/IcKm9cgqSHwMol7iHHEAoqWb9w3iI//aAAwDAQACAAMAAAAQAz//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QUtX/xAAWEQADAAAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8QVIk//8QAHRABAAICAgMAAAAAAAAAAAAAAQARIUExkVGBsf/aAAgBAQABPxBrZAyir1yMAhqSmjw07p7lhfgVD6gyucCVVQOjILWxs4WOxAOgT4k//9k=","aspectRatio":1.5,"src":"/static/16aa457e2da74295e5a4f50704ea5d80/d5b37/python.jpg","srcSet":"/static/16aa457e2da74295e5a4f50704ea5d80/6a7e4/python.jpg 163w,\n/static/16aa457e2da74295e5a4f50704ea5d80/7e2e7/python.jpg 327w,\n/static/16aa457e2da74295e5a4f50704ea5d80/d5b37/python.jpg 653w,\n/static/16aa457e2da74295e5a4f50704ea5d80/6aea0/python.jpg 980w,\n/static/16aa457e2da74295e5a4f50704ea5d80/86173/python.jpg 1200w","srcWebp":"/static/16aa457e2da74295e5a4f50704ea5d80/0f54f/python.webp","srcSetWebp":"/static/16aa457e2da74295e5a4f50704ea5d80/e2fca/python.webp 163w,\n/static/16aa457e2da74295e5a4f50704ea5d80/bb40c/python.webp 327w,\n/static/16aa457e2da74295e5a4f50704ea5d80/0f54f/python.webp 653w,\n/static/16aa457e2da74295e5a4f50704ea5d80/cd024/python.webp 980w,\n/static/16aa457e2da74295e5a4f50704ea5d80/45222/python.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px"},"narrow":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAf/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAY6YXlaJM1//xAAbEAACAwADAAAAAAAAAAAAAAABAgADEhEhMf/aAAgBAQABBQKsHPeS6iJcY1o4Pv8A/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BR//EABYRAQEBAAAAAAAAAAAAAAAAAAAREv/aAAgBAgEBPwHKP//EAB0QAAIBBAMAAAAAAAAAAAAAAAABEQIQISISMXH/2gAIAQEABj8C1hmKvTbsykyeCt//xAAaEAADAQEBAQAAAAAAAAAAAAAAAREhQVFx/9oACAEBAAE/IcKm9cgqSHwMol7iHHEAoqWb9w3iI//aAAwDAQACAAMAAAAQAz//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QUtX/xAAWEQADAAAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8QVIk//8QAHRABAAICAgMAAAAAAAAAAAAAAQARIUExkVGBsf/aAAgBAQABPxBrZAyir1yMAhqSmjw07p7lhfgVD6gyucCVVQOjILWxs4WOxAOgT4k//9k=","aspectRatio":1.5,"src":"/static/16aa457e2da74295e5a4f50704ea5d80/2924d/python.jpg","srcSet":"/static/16aa457e2da74295e5a4f50704ea5d80/504cd/python.jpg 114w,\n/static/16aa457e2da74295e5a4f50704ea5d80/beab7/python.jpg 229w,\n/static/16aa457e2da74295e5a4f50704ea5d80/2924d/python.jpg 457w,\n/static/16aa457e2da74295e5a4f50704ea5d80/85d2d/python.jpg 686w,\n/static/16aa457e2da74295e5a4f50704ea5d80/5e5f8/python.jpg 914w,\n/static/16aa457e2da74295e5a4f50704ea5d80/86173/python.jpg 1200w","srcWebp":"/static/16aa457e2da74295e5a4f50704ea5d80/d4e70/python.webp","srcSetWebp":"/static/16aa457e2da74295e5a4f50704ea5d80/50468/python.webp 114w,\n/static/16aa457e2da74295e5a4f50704ea5d80/3bfb7/python.webp 229w,\n/static/16aa457e2da74295e5a4f50704ea5d80/d4e70/python.webp 457w,\n/static/16aa457e2da74295e5a4f50704ea5d80/45a20/python.webp 686w,\n/static/16aa457e2da74295e5a4f50704ea5d80/0af0b/python.webp 914w,\n/static/16aa457e2da74295e5a4f50704ea5d80/45222/python.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px"},"seo":{"src":"/static/16aa457e2da74295e5a4f50704ea5d80/86173/python.jpg"}}},{"id":"0c9d16d3-ea89-5379-83d1-391d4f335624","slug":"/closure-for-beginner-part-2-nested-function","secret":false,"title":"Closure for beginner part 2; Nested function.","author":"Haja Andriamaro","date":"October 1st, 2019","dateForSEO":"2019-10-01T00:00:00.000Z","timeToRead":2,"excerpt":"In this article, we will talk about nested function and reference, the other building bloc to understand closure.","subscription":true,"body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Closure for beginner part 2; Nested function.\",\n  \"author\": \"Haja Andriamaro\",\n  \"date\": \"2019-10-01T00:00:00.000Z\",\n  \"hero\": \"./images/nesting.jpg\",\n  \"excerpt\": \"In this article, we will talk about nested function and reference, the other building bloc to understand closure.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"follow-along-from-part-i\"\n  }, \"Follow along from Part I\"), mdx(\"p\", null, \"In my \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"../closure-for-beginner-part-1-lexical-scope\"\n  }), \"previous article\"), \", we have covered the concept of Lexical Scope, a building bloc to understand closure.\\nWe have seen that we can use a variable to keep track of the digits that make up the phone number. We also worned that\\nat this stage, there is a serious flaw in our code.\\nIn this article, we will talk about the existing flaw, and how to fix it with nested function, the other building bloc to understand and use closure.\"), mdx(\"h3\", {\n    \"id\": \"whats-the-flaw\"\n  }, \"What\\u2019s the flaw?\"), mdx(\"p\", null, \"At this stage we have the following code \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"// intialise the number to an empty string\\nlet dialledNumber = '';\\n\\nfunction phonePad (digit) {\\n  // concatanate each new digit to build the dialled number\\n  dialledNumber = dialledNumber.concat(digit);\\n  console.log('The phone number to call is: ' + dialledNumber);\\n}\\n\\nphonePad('0'); // The phone number to call is: 0\\nphonePad('6'); // The phone number to call is: 06\\nphonePad('5'); // The phone number to call is: 065\\n\")), mdx(\"p\", null, \"It does the job, we are able to store each new digit in the \\u201CdialledNumber\\u201D variable. And because \\u201CdialledNumber\\u201D is in the Lexical scope\\nof phonePad() we are all good \\u2026\"), mdx(\"p\", null, \"However, \\u201CdialledNumber\\u201D is acting as a global variable here (accessible/mutable by any intermediat scripts). It is therefore \\u201Cunprotected\\u201D.\\nIt means that \\u201CdialledNumber\\u201D can be accidently (or not) used by intermediat script for other puroposes. If that happen, our phone pad logic would be broken.\\nThe line 13 below will break the app\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"// intialise the number to an empty string\\nlet dialledNumber = '';\\n\\nfunction phonePad (digit) {\\n  dialledNumber = dialledNumber.concat(digit);\\n  console.log('The phone number to call is: ' + dialledNumber);\\n}\\n\\nphonePad('0'); // The phone number to call is: 0\\nphonePad('6'); // The phone number to call is: 06\\n// next line will mess up our phone pad memory\\ndialledNumber = \\\"Random assigment\\\"\\nphonePad('5'); // The phone number to call is: Random assigment5\\n\")), mdx(\"h3\", {\n    \"id\": \"protecting-the-pad-memory\"\n  }, \"Protecting the pad memory\"), mdx(\"p\", null, \"Therefore, we need to find a way to protected \\u201CdialledNumber\\u201D variable. We can do just that moving it inside phonePad().\\nThis will make it accessible only from inside phonePad(), and take it off the global scope now.\\nIn other words, \\u201CdialledNumber\\u201D become a private variable to phonePad()\"), mdx(\"p\", null, \"So lets try that here\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"function phonePad (digit) {\\n  // intialise the number inside phonePad\\n  let dialledNumber = '';\\n\\n  dialledNumber = dialledNumber.concat(digit);\\n  console.log('The phone number to call is: ' + dialledNumber);\\n}\\nphonePad('0'); // The phone number to call is: 0\\nphonePad('6'); // The phone number to call is: 6\\nphonePad('5'); // The phone number to call is: 7\\n\")), mdx(\"p\", null, \"But wait! what happened? the phonePad memory is gone !\"), mdx(\"p\", null, \"Here is what is happening. Each time we call phonePad(), javascript creates a brand new instance of that function.\\nThe previous instance just went to what is called \\u201Cgarbage collector\\u201D, or just garbage if you want.\\nThen, how do we get back that memory while still keeping \\u201CdialledNumber\\u201D private?\"), mdx(\"p\", null, \"We can do that in two folds. \"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Create a nested function \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Create a reference to the nested function.\")), mdx(\"h3\", {\n    \"id\": \"nested-function--reference\"\n  }, \"Nested function & Reference\"), mdx(\"p\", null, \"It name says it all. A nested function, is a function inside (nested) another function.\\nSo we will nest another function inside phonePad().\\nBut that\\u2019s not enough, we also have to follow extra steps to make the phone pad working.\\nFollowing are all the steps that we will follow :\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Nest an anonymous function inside phonePad().\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Remove \\u201Cdigit\\u201D as phonePad(\", mdx(\"del\", {\n    parentName: \"li\"\n  }, \"digit\"), \") argument, and set it as the anonymous function(digit) argument instead.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Return the anonymous function.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Return the dialledNumber variable from the anonymous function scope\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Assign phonePad() function to a \\u201Cpad\\u201D variable\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Use the variable \\u201Cpad\\u201D to serve as reference and to pass the selected digits\")), mdx(\"p\", null, \"The code should look like this\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"function phonePad () {\\n  // intialise the number string\\n  let dialledNumber = \\\"Phone number is: \\\";\\n  // declare the nested function receiving digits as argument\\n  // And return it\\n  return function (digit){\\n    // concatanate each new digit to build the phone number\\n    dialledNumber = dialledNumber.concat(digit);\\n    // return the concatanated digits\\n    return dialledNumber\\n  }\\n}\\n// assign phonePad() to a variable that \\n// will serve as reference/link\\nconst pad = phonePad()\\n// send each new nmuber to pad()\\n// and display the phone number\\nconsole.log(pad(0))\\nconsole.log(pad(6))\\nconsole.log(pad(5))\\nconsole.log(pad(7))\\n\")), mdx(\"p\", null, \"And the output\"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"48.50000000000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABUUlEQVQoz4WS226DMBBE+YM+tGqrEK62AQMmQEp6kRq1//9R051VSNVIaR5Gso33eHaWqHA1Kt/h+PWNj88j+t2EdhixSXM8PMcoXYOq7RGnBUzd4nmb4e7+EXFWwMq+lHpTeWSlRVo6REVVy8KiEwhlm1YKvRY8xQmSwiC3lT6QFFaAqTy0UTC/bbNSxQdZE2XGYZvLgSiVde5qfYkQqqwaFde8RwgNKEz2q7inovXA+RbjfkHTB3W6P7zpWS3t1l2vwKT4LbymM9DUjebHPJsuYJj3kpGHkwicnOXW/XHyL5ALgqaXBb4fFLy8vsswOnUYxhk+DApMNfzrOgON5MRWCSB0Jw45HNt4bZla87sJ5HSYFx2uGapDcU2XdMx8ee9yGJc6O2RWbE0zFCgd2lN+3M/L4TQYc9shxR88jJMOpA07cXvQoRDKdsM033RH/QCOeh0Ek5CB7gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/6cc16ff0e41893fb3228b564fec614bd/3e149/console-4.webp 400w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/6cc16ff0e41893fb3228b564fec614bd/ef30a/console-4.png 400w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/6cc16ff0e41893fb3228b564fec614bd/ef30a/console-4.png\",\n    \"alt\": \"Console closure error 2\",\n    \"title\": \"Console closure error 2\",\n    \"loading\": \"lazy\"\n  })), \"\\n      \"), \"\\n    \")), mdx(\"p\", null, \"Voila! Remember, by default functions in javascripts can not hold sate (information) beyond\\nits instance life cycle. What we did here is to enable just that by:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Protecting \\u201CdialledNumber\\u201D, making it a \\u201Cprivate\\u201D variable that can hold state.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Nesting a function that take care of updating of the state (protected variable \\u201CdialledNumber\\u201D)\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Keeping phonePad() instance \\u201Calive\\u201D by using a reference to its nested function.\")), mdx(\"p\", null, \"The 3 above steps allow us to create a function that is able to hold a private\\nstate (the phone number). Which would not be possible whithout closure.\\nThis is what Closure is all about :)\"), mdx(\"p\", null, \"You probably still wonder how Closures are being used concretly to make things happen in \\u201Creal\\u201D app \\u2026\"), mdx(\"p\", null, \"That will be the subject of the last article for this serie for a perfect Closure ;)\"));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAABz2hhpAb/xAAXEAEBAQEAAAAAAAAAAAAAAAABABEQ/9oACAEBAAEFAgJyyN7/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAQACAwEBAAAAAAAAAAAAAAEAEUGh4TGR/9oACAEBAAE/Ic5NQUxqIv0+kdOxWuxu+z//2gAMAwEAAgADAAAAEK/P/8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAIAQMBAT8QiP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQACAgMAAAAAAAAAAAAAAAEAESGRMVFh/9oACAEBAAE/EEg8DuLQHrzAVABS3fyBtnf2NvLtP//Z","aspectRatio":1.4592933947772657,"src":"/static/db98e0932f594a5939c9666e991e1235/3db47/nesting.jpg","srcSet":"/static/db98e0932f594a5939c9666e991e1235/751b5/nesting.jpg 236w,\n/static/db98e0932f594a5939c9666e991e1235/b976c/nesting.jpg 472w,\n/static/db98e0932f594a5939c9666e991e1235/3db47/nesting.jpg 944w,\n/static/db98e0932f594a5939c9666e991e1235/e87ba/nesting.jpg 1416w,\n/static/db98e0932f594a5939c9666e991e1235/53e75/nesting.jpg 1888w,\n/static/db98e0932f594a5939c9666e991e1235/040a7/nesting.jpg 1900w","srcWebp":"/static/db98e0932f594a5939c9666e991e1235/cb939/nesting.webp","srcSetWebp":"/static/db98e0932f594a5939c9666e991e1235/75d10/nesting.webp 236w,\n/static/db98e0932f594a5939c9666e991e1235/2a00c/nesting.webp 472w,\n/static/db98e0932f594a5939c9666e991e1235/cb939/nesting.webp 944w,\n/static/db98e0932f594a5939c9666e991e1235/ae4d0/nesting.webp 1416w,\n/static/db98e0932f594a5939c9666e991e1235/0e010/nesting.webp 1888w,\n/static/db98e0932f594a5939c9666e991e1235/7814f/nesting.webp 1900w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAABz2hhpAb/xAAXEAEBAQEAAAAAAAAAAAAAAAABABEQ/9oACAEBAAEFAgJyyN7/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAQACAwEBAAAAAAAAAAAAAAEAEUGh4TGR/9oACAEBAAE/Ic5NQUxqIv0+kdOxWuxu+z//2gAMAwEAAgADAAAAEK/P/8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAIAQMBAT8QiP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQACAgMAAAAAAAAAAAAAAAEAESGRMVFh/9oACAEBAAE/EEg8DuLQHrzAVABS3fyBtnf2NvLtP//Z","aspectRatio":1.4592933947772657,"src":"/static/db98e0932f594a5939c9666e991e1235/d5b37/nesting.jpg","srcSet":"/static/db98e0932f594a5939c9666e991e1235/6a7e4/nesting.jpg 163w,\n/static/db98e0932f594a5939c9666e991e1235/7e2e7/nesting.jpg 327w,\n/static/db98e0932f594a5939c9666e991e1235/d5b37/nesting.jpg 653w,\n/static/db98e0932f594a5939c9666e991e1235/6aea0/nesting.jpg 980w,\n/static/db98e0932f594a5939c9666e991e1235/52be0/nesting.jpg 1306w,\n/static/db98e0932f594a5939c9666e991e1235/040a7/nesting.jpg 1900w","srcWebp":"/static/db98e0932f594a5939c9666e991e1235/0f54f/nesting.webp","srcSetWebp":"/static/db98e0932f594a5939c9666e991e1235/e2fca/nesting.webp 163w,\n/static/db98e0932f594a5939c9666e991e1235/bb40c/nesting.webp 327w,\n/static/db98e0932f594a5939c9666e991e1235/0f54f/nesting.webp 653w,\n/static/db98e0932f594a5939c9666e991e1235/cd024/nesting.webp 980w,\n/static/db98e0932f594a5939c9666e991e1235/4508c/nesting.webp 1306w,\n/static/db98e0932f594a5939c9666e991e1235/7814f/nesting.webp 1900w","sizes":"(max-width: 653px) 100vw, 653px"},"narrow":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAABz2hhpAb/xAAXEAEBAQEAAAAAAAAAAAAAAAABABEQ/9oACAEBAAEFAgJyyN7/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAQACAwEBAAAAAAAAAAAAAAEAEUGh4TGR/9oACAEBAAE/Ic5NQUxqIv0+kdOxWuxu+z//2gAMAwEAAgADAAAAEK/P/8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAIAQMBAT8QiP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQACAgMAAAAAAAAAAAAAAAEAESGRMVFh/9oACAEBAAE/EEg8DuLQHrzAVABS3fyBtnf2NvLtP//Z","aspectRatio":1.4592933947772657,"src":"/static/db98e0932f594a5939c9666e991e1235/2924d/nesting.jpg","srcSet":"/static/db98e0932f594a5939c9666e991e1235/504cd/nesting.jpg 114w,\n/static/db98e0932f594a5939c9666e991e1235/beab7/nesting.jpg 229w,\n/static/db98e0932f594a5939c9666e991e1235/2924d/nesting.jpg 457w,\n/static/db98e0932f594a5939c9666e991e1235/85d2d/nesting.jpg 686w,\n/static/db98e0932f594a5939c9666e991e1235/5e5f8/nesting.jpg 914w,\n/static/db98e0932f594a5939c9666e991e1235/040a7/nesting.jpg 1900w","srcWebp":"/static/db98e0932f594a5939c9666e991e1235/d4e70/nesting.webp","srcSetWebp":"/static/db98e0932f594a5939c9666e991e1235/50468/nesting.webp 114w,\n/static/db98e0932f594a5939c9666e991e1235/3bfb7/nesting.webp 229w,\n/static/db98e0932f594a5939c9666e991e1235/d4e70/nesting.webp 457w,\n/static/db98e0932f594a5939c9666e991e1235/45a20/nesting.webp 686w,\n/static/db98e0932f594a5939c9666e991e1235/0af0b/nesting.webp 914w,\n/static/db98e0932f594a5939c9666e991e1235/7814f/nesting.webp 1900w","sizes":"(max-width: 457px) 100vw, 457px"},"seo":{"src":"/static/db98e0932f594a5939c9666e991e1235/86173/nesting.jpg"}}}]}}}