1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.a5a3ff5231d44e44d984.css">html,html>body{overflow-x:hidden;margin:0;padding:0}html{font-size:100}body{margin:0;color:#222;line-height:1.625;font-size:1.125rem;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fbfbfb}body,h1,h2,h3,h4,h5,h6{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:600}h1{font-size:2.8125rem;line-height:3.25rem;margin-top:6.5rem;margin-bottom:1.625rem}h2{font-size:1.89844rem;line-height:2.4375rem}h2,h3{margin-top:3.25rem;margin-bottom:.8125rem}h3{font-size:1.54688rem;line-height:1.625rem}h4{font-size:1.35rem;margin-top:2.4375rem}h4,h5{line-height:1.625rem;margin-bottom:.8125rem}h5,h6{font-size:1.125rem;margin-top:4.0625rem}h6{line-height:1.625rem;margin-bottom:.8125rem}img{box-shadow:0 0 6px 0 rgba(0,0,0,.1);max-width:100%;margin:inherit auto;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}hr,img{border:0;display:block}hr{color:#222;height:1.625rem;margin:3.25rem auto;background-size:100% 26px;background-image:linear-gradient(180deg,transparent 1px,transparent 11px,#222 0,#222 15px,transparent 0,transparent 26px);width:6.25rem}a{color:#5d93ff;text-decoration:none}a:active,a:focus,a:hover{color:#f7a046}b,strong{font-weight:600}ul{list-style:square;margin-bottom:1.625rem}ul li{padding:0 .3125rem}p,ul li{margin-bottom:.65rem}p{line-height:1.625rem;margin-top:.65rem}div.img-group{display:flex;height:10rem}small{display:block;font-style:italic;text-align:center}blockquote{padding:.125rem 1em;color:#888;border-left:.25em solid #a49f9f;background-color:#ebebeb;margin-top:0;margin-bottom:1rem}blockquote p{font-size:.875rem}figure{display:block;width:100%;height:auto}figcaption{line-height:1.21875rem;margin-top:.40625rem;color:#222;font-size:.875rem;font-style:italic;margin-bottom:0;text-align:center}.anchor{margin-left:-1.875rem!important;padding-right:.875rem!important}@media screen and (min-width:960px){small{margin-top:-1.3rem}div.img-group{padding-bottom:.9375rem}div.gatsby-highlight{margin-bottom:1.82813rem}div.gatsby-highlight .token.comment{font-style:italic}}@media screen and (min-width:685px){figure.float-left,figure.float-right{max-width:19.375rem;padding:0 1.625rem}.float-right{float:right}.float-left{float:left}}table{width:100%}td,th{text-align:left}code[class*=language-],pre[class*=language-]{color:#f8f8f8;font-family:Consolas,Monaco,Andale Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;font-size:16px;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{color:inherit;background:rgba(33,66,131,.85)}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2b2b2b}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.prolog{color:grey}.token.atrule,.token.boolean,.token.delimiter,.token.important,.token.keyword,.token.selector{color:#cc7832}.token.attr-name,.token.operator,.token.punctuation{color:#a9b7c6}.token.builtin,.token.doctype,.token.tag,.token.tag .punctuation{color:#e8bf6a}.token.entity,.token.number,.token.symbol{color:#6897bb}.token.constant,.token.property,.token.variable{color:#9876aa}.token.char,.token.string{color:#6a8759}.token.attr-value,.token.attr-value .punctuation{color:#a5c261}.token.attr-value .punctuation:first-child{color:#a9b7c6}.token.url{color:#287bde;text-decoration:underline}.token.function{color:#ffc66d}.token.regex{background:#364135}.token.bold{font-weight:700}.token.italic{font-style:italic}.token.inserted{background:#294436}.token.deleted{background:#484a4a}code.language-css .token.property,code.language-css .token.property+.token.punctuation{color:#a9b7c6}code.language-css .token.id,code.language-css .token.selector>.token.attribute,code.language-css .token.selector>.token.class,code.language-css .token.selector>.token.pseudo-class,code.language-css .token.selector>.token.pseudo-element{color:#ffc66d}html.prevent-scroll{overflow:hidden}.post__image-lightbox:before{content:"Esc";position:absolute;top:10px;left:20px;color:#fff;font-size:1.2em}.post__image-lightbox:after{content:"\274C";position:absolute;top:10px;right:20px;color:#fff;font-size:1.2em;cursor:pointer}.post__image-lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.95);justify-content:center;align-items:center;display:none;cursor:zoom-out}.post__image-lightbox img{max-width:90%;max-height:90%}.post__image-lightbox.show{display:flex}.image-lightbox:hover{cursor:zoom-in}.Author-module--author__photo--36xCH{display:inline-block;margin-bottom:0;border-radius:50%;background-clip:padding-box}.Author-module--author__title--2CaTb{font-size:1.26563rem;font-weight:600;line-height:1.82813rem;margin:.8125rem 0}.Author-module--author__title-link--Yrism,.Author-module--author__title-link--Yrism:focus,.Author-module--author__title-link--Yrism:hover{color:#222}.Author-module--author__firm--TbqM7{color:green}.Author-module--author__subtitle--cAaEB{color:#888;line-height:1.625rem;margin-bottom:1.625rem}.Layout-module--layout--3Pyz6{max-width:66.875rem;margin-left:auto;margin-right:auto;margin-bottom:1.625rem}.Layout-module--layout--3Pyz6:before{content:"";display:table}.Layout-module--layout--3Pyz6:after{content:"";display:table;clear:both}.rn-comment-list{list-style:none;margin-left:0;padding:0}.rn-comment-item{display:flex;margin-top:10px}.rn-comment-item .rn-gravatar{flex:0 0 40px}.rn-main-section{padding-left:10px}.rn-author-name{font-weight:700;font-size:16px}.rn-comment-body{font-size:14px;font-weight:400}.rn-date{font-size:12px;font-weight:light;color:#888}.rn-error{color:red;font-size:14px}.rn-comment-form{width:100%}.rn-comment-form label{display:block;margin-top:5px}.rn-comment-form input{width:100%;display:block}.rn-comment-form textarea{width:100%}.rn-comment-form input[type=submit]{width:auto;padding:6px 22px;border-radius:8px;border-width:0;margin-top:10px;color:#fff;background-color:#1da1f2;font-size:16px;display:inline-block;cursor:pointer}.rn-comment-form input[type=submit]:hover{background-color:#157ec0}.rn-comment-form input[type=submit]:disabled{background-color:#7d7f8d;cursor:wait}.rn-author-email-box,.rn-author-name-box{width:48%;margin:0}.rn-author-box{display:flex;justify-content:space-between}.rn-success{color:green;padding-left:10px}
1.rn-pagination{display:flex;justify-content:space-between}.rn-pagination a{cursor:pointer;color:#1da1f2}@media (max-width:700px){.rn-author-email-box,.rn-author-name-box{width:100%}.rn-author-box{flex-direction:column}}.rn-promo-link{font-size:12px;color:#7d7f8d;text-align:right}.rn-promo-link a{color:#1da1f2}.Comments-module--comments__questions--3pld_ a{cursor:pointer}.Comments-module--comments__questions--3pld_ a:hover{border-bottom:1px solid #f7a046}.Comments-module--comments--2ltn8 form{margin-bottom:3.25rem}.Comments-module--comments--2ltn8 form div:first-child{margin-bottom:.8125rem}.Comments-module--comments--2ltn8 form div:last-child{text-align:left}.Comments-module--comments--2ltn8 form span{float:right;margin-top:.625rem;margin-right:.625rem;height:2.6875rem;line-height:2.6875rem}.Comments-module--comments--2ltn8 input[type=submit]{float:right;background-color:#28a745;border:1px solid transparent;padding:.625rem;font-size:1.125rem;border-radius:.125rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out}.Comments-module--comments--2ltn8 input[type=submit]:hover{background-color:#0069d9;border-color:#0062cc}.Comments-module--comments--2ltn8 input:not([type=submit]),.Comments-module--comments--2ltn8 textarea{display:block;box-sizing:border-box;color:#495057;font-size:1.125rem;background-color:#fff;border:1px solid #ced4da;border-radius:.125rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.Comments-module--comments--2ltn8 input:not([type=submit]):focus,.Comments-module--comments--2ltn8 textarea:focus{border-color:#5d93ff;outline:0}.Comments-module--comments--2ltn8 input:not([type=submit]){padding:0 .625rem;height:calc(1.5em + .875rem)}.Comments-module--comments--2ltn8 textarea{padding:.625rem;line-height:1.5;overflow:auto;resize:vertical;height:6.25rem;font-family:Arial,Helvetica,sans-serif}.Content-module--content--3p512{max-width:59.0625rem;padding:0 .9375rem;margin:0 auto}.Content-module--content__title--2BDW9{font-size:2.25rem;max-width:40rem;font-weight:600;line-height:2.68125rem;margin:1.625rem auto 0}.Content-module--content__body--2TrQ- figure{margin-bottom:1.625rem}.Content-module--content__body--2TrQ- *{max-width:40rem;margin-left:auto;margin-right:auto}.Content-module--content__body--2TrQ- img{max-width:100%}@media screen and (min-width:960px){.Content-module--content--3p512{padding:0}.Content-module--content__title--2BDW9{font-size:3.375rem;line-height:3.65625rem;margin-top:3.65625rem;margin-bottom:2.4375rem}.Content-module--content__body--2TrQ-,.Content-module--content__body--2TrQ- p{font-size:1.26563rem;line-height:1.82813rem;margin-bottom:1.82813rem}.Content-module--content__body--2TrQ- blockquote p{font-size:1.125rem;margin-bottom:.65rem}}.Meta-module--meta--1XDVh{max-width:40rem;margin:0 auto 3.25rem;padding:0 .9375rem}.Tags-module--tags--1L_ct{max-width:40rem;margin:0 auto;padding:0 .9375rem}.Tags-module--tags__list--91FqN{list-style:none;margin:0 -.625rem;padding:0}.Tags-module--tags__list-item--1M30P{display:inline-block;margin:0 .3125rem;font-weight:700}.Tags-module--tags__list-item-link--3SL_8{color:#f7a046;display:inline-block;height:2.1875rem;line-height:2.1875rem;text-decoration:none}.Tags-module--tags__list-item-link--3SL_8:focus,.Tags-module--tags__list-item-link--3SL_8:hover{color:#5d93ff}.Post-module--post--2ySQi a:not([class*=Tags]):not([class*=home-button]):hover{border-bottom:1px solid #f7a046}.Post-module--post__header-image--3-UCk{width:100vw;height:75vh;background-size:cover;background-position:50% 50%;background-repeat:no-repeat}.Post-module--post__title--3gr2d{font-size:2.25rem;max-width:40rem;font-weight:600;padding:0 .9375rem;line-height:2.68125rem;margin:1.21875rem auto}.Post-module--post__content--16hyR{margin-top:-6.25rem;background:#fbfbfb;padding-top:2.4375rem}.Post-module--post__comments--25y6I{max-width:40rem;margin:0 auto;padding:0 .9375rem}.Post-module--post__home-button--16Kl0{display:none;max-width:7.5rem;height:2.1875rem;padding:0 1.5rem;line-height:2.1875rem;text-align:center;color:#222;background-color:#fbfbfb;border:1px solid #e6e6e6;border-radius:1.25rem;font-size:1.125rem;font-weight:400;margin-left:auto;margin-right:auto;margin-top:1.625rem}.Post-module--post__home-button--16Kl0:focus,.Post-module--post__home-button--16Kl0:hover{color:#5d93ff}@media screen and (min-width:960px){.Post-module--post__comments--25y6I{padding:0}.Post-module--post__home-button--16Kl0{display:block;position:fixed;max-width:auto;margin:0;top:30px;left:30px}}@media screen and (min-width:1100px){.Post-module--post__header-image--3-UCk{margin-left:calc(-50vw - -33.4375rem)}}.Icon-module--icon--Gpyvw{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor;font-style:normal;font-weight:400;speak:none;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.Contacts-module--contacts--1rGd1{margin-bottom:1.625rem}.Contacts-module--contacts__list--3OgdW{display:flex;flex-flow:row wrap;flex-grow:0;flex-shrink:0;list-style:none;padding:0;margin:.625rem -.1875rem}.Contacts-module--contacts__list-item--16p9q{padding:0;margin:.25rem;display:flex;align-content:center;align-items:center;justify-content:center;height:2.1875rem;width:2.1875rem;line-height:2.1875rem;border-radius:50%;text-align:center;border:1px solid #ebebeb}.Contacts-module--contacts__list-item-link--2MIDn{border:0;display:flex;color:#222}.Contacts-module--contacts__list-item-link--2MIDn:focus,.Contacts-module--contacts__list-item-link--2MIDn:hover{color:#5d93ff}.Copyright-module--copyright--1ariN{color:#b6b6b6;font-size:.875rem}.Menu-module--menu--Efbin{margin-bottom:1.625rem}.Menu-module--menu__list--31Zeo{list-style:none;padding:0;margin:0}.Menu-module--menu__list-item--1lJ6B{padding:0;margin:.625rem 0}.Menu-module--menu__list-item-link--10Ush{font-size:1.125rem;color:#222;font-weight:400;border:0}.Menu-module--menu__list-item-link--10Ush:focus,.Menu-module--menu__list-item-link--10Ush:hover{color:#5d93ff;border-bottom:1px solid #5d93ff}.Menu-module--menu__list-item-link--active--2CbUO{color:#222;border-bottom:1px solid #222}.Sidebar-module--sidebar--X4z2p{width:100%}.Sidebar-module--sidebar__inner--Jdc5s{position:relative;padding:1.5625rem 1.25rem 0}@media screen and (min-width:685px){.Sidebar-module--sidebar--X4z2p{width:calc(41.625% - 1.09375rem)}.Sidebar-module--sidebar--X4z2p:nth-child(1n){float:left;margin-right:1.875rem;clear:none}.Sidebar-module--sidebar--X4z2p:last-child{margin-right:0}.Sidebar-module--sidebar--X4z2p:nth-child(12n){margin-right:0;float:right}.Sidebar-module--sidebar--X4z2p:nth-child(12n+1){clear:both}.Sidebar-module--sidebar__inner--Jdc5s{padding:1.875rem 1.25rem 0}.Sidebar-module--sidebar__inner--Jdc5s:after{background:#e6e6e6;background:linear-gradient(180deg,#e6e6e6 0,#e6e6e6 48%,#fff);position:absolute;content:"";width:.0625rem;height:33.75rem;top:30px;right:-10px;bottom:0}}@media screen and (min-width:960px){.Sidebar-module--sidebar--X4z2p{width:calc(33.3% - 1.25rem)}.Sidebar-module--sidebar--X4z2p:nth-child(1n){float:left;margin-right:1.875rem;clear:none}.Sidebar-module--sidebar--X4z2p:last-child{margin-right:0}.Sidebar-module--sidebar--X4z2p:nth-child(3n){margin-right:0;float:right}.Sidebar-module--sidebar--X4z2p:nth-child(3n+1){clear:both}.Sidebar-module--sidebar__inner--Jdc5s{padding:1.875rem}}.Feed-module--feed__item--2D5rE{margin-bottom:2.03125rem}.Feed-module--feed__item--2D5rE:last-child{margin-bottom:.8125rem}.Feed-module--feed__item-title--3nigr{font-size:1.89844rem;line-height:2.4375rem;margin-top:0;margin-bottom:.8125rem}.Feed-module--feed__item-title-link--iFMRs{color:#222}.Feed-module--feed__item-title-link--iFMRs:focus,.Feed-module--feed__item-title-link--iFMRs:hover{color:#222;border-bottom:1px solid #222}.Feed-module--feed__item-description--1uO8e{font-size:1.125rem;line-height:1.625rem;margin-bottom:1.21875rem}.Feed-module--feed__item-meta-time--3t1fg{font-size:.875rem;color:#222;font-weight:600;text-transform:uppercase}.Feed-module--feed__item-meta-divider--N-Q0A{margin:0 .3125rem}.Feed-module--feed__item-meta-category-link--23f8F{font-size:.875rem;color:#f7a046;font-weight:600;text-transform:uppercase}.Feed-module--feed__item-meta-category-link--23f8F:focus,.Feed-module--feed__item-meta-category-link--23f8F:hover{color:#5d93ff}.Feed-module--feed__item-readmore--1u6bI{font-size:1.125rem;color:#5d93ff}.Feed-module--feed__item-readmore--1u6bI:focus,.Feed-module--feed__item-readmore--1u6bI:hover{color:#5d93ff;border-bottom:1px solid #5d93ff}.Page-module--page--2nMky{margin-bottom:3.25rem}.Page-module--page__inner--2M_vz{padding:1.5625rem 1.25rem}.Page-module--page__title--GPD8L{font-size:2.8125rem;font-weight:600;line-height:3.25rem;margin-top:0;margin-bottom:2.35625rem}.Page-module--page__body--Ic6i6{font-size:1.125rem;line-height:1.625rem;margin:0 0 1.625rem}@media screen and (min-width:685px){.Page-module--page--2nMky{width:calc(58.275% - .78125rem)}.Page-module--page--2nMky:nth-child(1n){float:left;margin-right:1.875rem;clear:none}.Page-module--page--2nMky:last-child{margin-right:0}.Page-module--page--2nMky:nth-child(12n){margin-right:0;float:right}.Page-module--page--2nMky:nth-child(12n+1){clear:both}.Page-module--page__inner--2M_vz{padding:1.875rem 1.25rem}}@media screen and (min-width:960px){.Page-module--page--2nMky{width:calc(66.6% - .625rem)}.Page-module--page--2nMky:nth-child(1n){float:left;margin-right:1.875rem;clear:none}.Page-module--page--2nMky:last-child{margin-right:0}.Page-module--page--2nMky:nth-child(3n){margin-right:0;float:right}.Page-module--page--2nMky:nth-child(3n+1){clear:both}.Page-module--page__inner--2M_vz{padding:2.5rem 1.5625rem}}.Pagination-module--pagination--2H3nO{margin-top:3.25rem;display:flex}.Pagination-module--pagination__prev--bet5s{width:50%;text-align:left}.Pagination-module--pagination__prev-link--1Nzs6{color:#f7a046;font-size:1.625rem;font-weight:700}.Pagination-module--pagination__prev-link--1Nzs6:focus,.Pagination-module--pagination__prev-link--1Nzs6:hover{color:#5d93ff}.Pagination-module--pagination__prev-link--disable--Yklx9{pointer-events:none;color:#bbb}.Pagination-module--pagination__next--3hFiN{width:50%;text-align:right}.Pagination-module--pagination__next-link--3FUtA{color:#f7a046;font-size:1.625rem;font-weight:700}.Pagination-module--pagination__next-link--3FUtA:focus,.Pagination-module--pagination__next-link--3FUtA:hover{color:#5d93ff}.Pagination-module--pagination__next-link--disable--30UwZ{pointer-events:none;color:#bbb}.Footer-module--footer--VUGIP{padding:1.25rem 0 2.5rem;margin:0 auto;max-width:40rem;border-top:1px solid #e6e6e6}.Footer-module--footer--VUGIP .Footer-module--reachout--fgIHZ{text-align:center;color:#888}.Footer-module--footer--VUGIP ul{justify-content:center}.Footer-module--footer--VUGIP div:last-child{text-align:center}</style><meta name="generator" content="Gatsby 2.20.29"/><link rel="alternate" type="application/rss+xml" title="Leo's Blog - Leo's coding journey" href="/rss.xml"/><style type="text/css"> 2 .anchor.before { 3 position: absolute; 4 top: 0; 5 left: 0; 6 transform: translateX(-100%); 7 padding-right: 4px; 8 } 9 .anchor.after { 10 display: inline-block; 11 padding-left: 4px; 12 } 13 h1 .anchor svg, 14 h2 .anchor svg, 15 h3 .anchor svg, 16 h4 .anchor svg, 17 h5 .anchor svg, 18 h6 .anchor svg { 19 visibility: hidden; 20 } 21 h1:hover .anchor svg, 22 h2:hover .anchor svg, 23 h3:hover .anchor svg, 24 h4:hover .anchor svg, 25 h5:hover .anchor svg, 26 h6:hover .anchor svg, 27 h1 .anchor:focus svg, 28 h2 .anchor:focus svg, 29 h3 .anchor:focus svg, 30 h4 .anchor:focus svg, 31 h5 .anchor:focus svg, 32 h6 .anchor:focus svg { 33 visibility: visible; 34 } 35 </style>
35<script> 36 document.addEventListener("DOMContentLoaded", function(event) { 37 var hash = window.decodeURI(location.hash.replace('#', '')) 38 if (hash !== '') { 39 var element = document.getElementById(hash) 40 if (element) { 41 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop 42 var clientTop = document.documentElement.clientTop || document.body.clientTop || 0 43 var offset = element.getBoundingClientRect().top + scrollTop - clientTop 44 // Wait for the browser to finish rendering before scrolling. 45 setTimeout((function() { 46 window.scrollTo(0, offset - 0) 47 }), 0) 48 } 49 } 50 }) 51 </script>
51<link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/>
vendor: 66 bytes, line 51
51<script async="" src="https://www.googletagmanager.com/gtag/js?id=
51UA-164140501-1
vendor: 11 bytes, line 51
51"></script>
51<script> 52 53 54 if(true) { 55 window.dataLayer = window.dataLayer || []; 56 function gtag(){window.dataLayer && window.dataLayer.push(arguments);} 57 gtag('js', new Date()); 58 59 gtag('config', 'UA-164140501-1', {"send_page_view":false}); 60 } 61 </script>
61<link rel="sitemap" type="application/xml" href="/sitemap.xml"/><link rel="icon" href="/favicon-32x32-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#F7A046"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512-a0a181a8c9cec7bb8923d31cb6fbb58a.png"/><title data-react-helmet="true">Leo's Blog - Leo's coding journey</title><meta data-react-helmet="true" name="description" content="Coding and all other stuff related to a dev's life"/><meta data-react-helmet="true" property="og:description" content="Coding and all other stuff related to a dev's life"/><meta data-react-helmet="true" property="og:site_name" content="Leo's Blog - Leo's coding journey"/><meta data-react-helmet="true" property="og:title" content="Leo's Blog - Leo's coding journey"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" property="og:image" content="/logo.png"/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" name="twitter:title" content="Leo's Blog - Leo's coding journey"/><meta data-react-helmet="true" name="twitter:description" content="Coding and all other stuff related to a dev's life"/><meta data-react-helmet="true" name="twitter:image" content="/logo.png"/><link as="script" rel="preload" href="/webpack-runtime-a4b018c197b32c3c2152.js"/><link as="script" rel="preload" href="/framework-7656862d80676d58607a.js"/><link as="script" rel="preload" href="/532a2f07-49bf2a4eaadb39c9996c.js"/><link as="script" rel="preload" href="/app-39f6a54ffada36198f99.js"/><link as="script" rel="preload" href="/styles-0dd9b16d06f2e4f550cc.js"/><link as="script" rel="preload" href="/cd95ea5cbd2c605f26db819f07999610c9ff4310-aaf5433a2b442dfdbeba.js"/><link as="script" rel="preload" href="/f9ebebcc6744302e9aa5ca837c39d789357ff7c5-cb0d4dfae7828dad78f5.js"/><link as="script" rel="preload" href="/component---src-templates-index-template-js-50afadebb9bbe5c56d4f.js"/><link as="fetch" rel="preload" href="/page-data/index/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="Layout-module--layout--3Pyz6"><div class="Sidebar-module--sidebar--X4z2p"><div class="Sidebar-module--sidebar__inner--Jdc5s"><div><a aria-current="page" class="" href="/"><img src="/logo.png" class="Author-module--author__photo--36xCH" width="75" height="75" alt="Leo Blog"/></a><h1 class="Author-module--author__title--2CaTb"><a aria-current="page" class="Author-module--author__title-link--Yrism" href="/">Hi ð I'm Tuan Anh (Leo) </a></h1><p class="Author-module--author__subtitle--cAaEB">I like coding, I do stuff related to JS, I work mainly with React/Node and Vanilla JS.</p><p class="Author-module--author__subtitle--cAaEB">I'm an ex-coding-instructor at <!-- --> <a class="Author-module--author__title-link--Yrism" href="https://mindx.edu.vn/" rel="noopener noreferrer" target="_blank">MindX Technology & Startup School </a>(aka Techkids).<br/>Also ex-developer at <!-- --> <a class="Author-module--author__title-link--Yrism" href="https://apps.shopify.com/pagefly" target="_blank" rel="noopener noreferrer">PageFly</a> <!-- -->(Top 3 page builder app on Shopify app store).</p><p class="Author-module--author__subtitle--cAaEB">Currently a Software Engineer in an awesome team at<a class="Author-module--author__firm--TbqM7" href="https://coccoc.com/" target="_blank" rel="noopener noreferrer"> Coc Coc.</a></p></div><nav class="Menu-module--menu--Efbin"><ul class="Menu-module--menu__list--31Zeo"><li class="Menu-module--menu__list-item--1lJ6B"><a aria-current="page" class="Menu-module--menu__list-item-link--10Ush Menu-module--menu__list-item-link--active--2CbUO" href="/">Articles</a></li><li class="Menu-module--menu__list-item--1lJ6B"><a class="Menu-module--menu__list-item-link--10Ush" href="/pages/resume">My resume</a></li><li class="Menu-module--menu__list-item--1lJ6B"><a class="Menu-module--menu__list-item-link--10Ush" href="/pages/about-this-blog">About this blog</a></li></ul></nav><div class="Contacts-module--contacts--1rGd1"><ul class="Contacts-module--contacts__list--3OgdW"><li class="Contacts-module--contacts__list-item--16p9q"><a class="Contacts-module--contacts__list-item-link--2MIDn" href="https://github.com/hta218" rel="noopener noreferrer" target="_blank"><svg class="Icon-module--icon--Gpyvw" viewBox="0 0 26 28"><title>github</title><path d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.
61625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"></path></svg></a></li><li class="Contacts-module--contacts__list-item--16p9q"><a class="Contacts-module--contacts__list-item-link--2MIDn" href="https://www.twitter.com/hta218_" rel="noopener noreferrer" target="_blank"><svg class="Icon-module--icon--Gpyvw" viewBox="0 0 26 28"><title>twitter</title><path d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"></path></svg></a></li><li class="Contacts-module--contacts__list-item--16p9q"><a class="Contacts-module--contacts__list-item-link--2MIDn" href="https://www.linkedin.com/in/hta218" rel="noopener noreferrer" target="_blank"><svg class="Icon-module--icon--Gpyvw" viewBox="0 0 24 24"><title>linkedin</title><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"></path></svg></a></li><li class="Contacts-module--contacts__list-item--16p9q"><a class="Contacts-module--contacts__list-item-link--2MIDn" href="https://www.facebook.com/hta218" rel="noopener noreferrer" target="_blank"><svg class="Icon-module--icon--Gpyvw" viewBox="0 0 16 28"><title>facebook</title><path d="M14.984 0.187v4.125h-2.453c-1.922 0-2.281 0.922-2.281 2.25v2.953h4.578l-0.609 4.625h-3.969v11.859h-4.781v-11.859h-3.984v-4.625h3.984v-3.406c0-3.953 2.422-6.109 5.953-6.109 1.687 0 3.141 0.125 3.563 0.187z"></path></svg></a></li><li class="Contacts-module--contacts__list-item--16p9q"><a class="Contacts-module--contacts__list-item-link--2MIDn" href="https://t.me/hta218" rel="noopener noreferrer" target="_blank"><svg class="Icon-module--icon--Gpyvw" viewBox="0 0 28 28"><title>telegram</title><path d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"></path></svg></a></li></ul></div><div class="Copyright-module--copyright--1ariN">2020 © <!-- -->Leo's Blog<!-- --> - All rights reserved.</div></div></div><div class="Page-module--page--2nMky"><div class="Page-module--page__inner--2M_vz"><div class="Page-module--page__body--Ic6i6"><div><div class="Feed-module--feed__item--2D5rE"><div><time class="Feed-module--feed__item-meta-time--3t1fg" dateTime="September 21, 2020">September 2020</time><span class="Feed-module--feed__item-meta-divider--N-Q0A"></span><span><a class="Feed-module--feed__item-meta-category-link--23f8F" href="/category/javascript/">Javascript</a></span></div><h2 class="Feed-module--feed__item-title--3nigr"><a class="Feed-module--feed__item-title-link--iFMRs" href="/posts/tricky-use-case-of-array-map-in-js">Tricky use case of Array.prototype.map in JS</a></h2><p class="Feed-module--feed__item-description--1uO8e">If you are familiar with functional programming, Array.prototype.map must be a function that you work with every day. We encountered a tricky use case of it at Cá»c Cá»c recently, it took me a while to figure out, and here's the answer...</p><a class="Feed-module--feed__item-readmore--1u6bI" href="/posts/tricky-use-case-of-array-map-in-js">Read â</a></div><div class="Feed-module--feed__item--2D5rE"><div><time class="Feed-module--feed__item-meta-time--3t1fg" dateTime="September 16, 2020">September 2020</time><span class="Feed-module--feed__item-meta-divider--N-Q0A"></span><span><a class="Feed-module--feed__item-meta-category-link--23f8F" href="/category/javascript/">Javascript</a></span></div><h2 class="Feed-module--feed__item-title--3nigr"><a class="Feed-module--feed__item-title-link--iFMRs" href="/posts/function-declaration-vs-function-expression-in-js">Javascript - function declaration vs function expression</a></h2><p class="Feed-module--feed__item-description--1uO8e">Phân biá»t 2 khái niá»m cÆ¡ bản trong Javascript - Function Declaration vs Function Expression và các trưá»ng hợp sá» dụng</p><a class="Feed-module--feed__item-readmore--1u6bI" href="/posts/function-declaration-vs-function-expression-in-js">Read â</a></div><div class="Feed-module--feed__item--2D5rE"><div><time class="Feed-module--feed__item-meta-time--3t1fg" dateTime="September 12, 2020">September 2020</time><span class="Feed-module--feed__item-meta-divider--N-Q0A"></span><span><a class="Feed-module--feed__item-meta-category-link--23f8F" href="/category/knowledges/">Knowledges</a></span></div><h2 class="Feed-module--feed__item-title--3nigr"><a class="Feed-module--feed__item-title-link--iFMRs" href="/posts/render-blocking-css-and-chrome-performance-api">Tìm hiá»u vá» Render Blocking CSS và Äo page rendering time vá»i Chrome Performance API</a></h2><p class="Feed-module--feed__item-description--1uO8e">Má»i file CSS mà website cá»§a bạn tải sẽ tÄng thêm thá»i gian và o first-paint cá»§a page, có nghÄ©a là user sẽ phải Äợi lâu hÆ¡n Äá» nhìn thấy content nếu trang cá»§a bạn phải tải nhiá»u CSS. Váºy phải là m thế nà o Äá» hạn chế ÄÆ°á»£c render blocking css?</p><a class="Feed-module--feed__item-readmore--1u6bI" href="/posts/render-blocking-css-and-chrome-performance-api">Read â</a></div><div class="Feed-module--feed__item--2D5rE"><div><time class="Feed-module--feed__item-meta-time--3t1fg" dateTime="August 30, 2020">August 2020</time><span class="Feed-module--feed__item-meta-divider--N-Q0A"></span><span><a class="Feed-module--feed__item-meta-category-link--23f8F" href="/category/tutorial/">
61Tutorial</a></span></div><h2 class="Feed-module--feed__item-title--3nigr"><a class="Feed-module--feed__item-title-link--iFMRs" href="/posts/integrate-tailwind-css-with-react-application">TÃch hợp Tailwind CSS và o React application</a></h2><p class="Feed-module--feed__item-description--1uO8e">Tailwind CSS là 1 low-level CSS framework rất dá»
tùy biến, không như các framework khác khi táºp trung và o các pre-design components như buttons, cards, modals... có thá» giúp bạn phát triá»n nhanh ban Äầu nhưng sau Äó sẽ rất mất công Äá» custom các component có sẵn, Tailwind táºp trung và o low-level utility classes...</p><a class="Feed-module--feed__item-readmore--1u6bI" href="/posts/integrate-tailwind-css-with-react-application">Read â</a></div></div><div class="Pagination-module--pagination--2H3nO"><div class="Pagination-module--pagination__prev--bet5s"><a aria-current="page" rel="prev" class="Pagination-module--pagination__prev-link--1Nzs6 Pagination-module--pagination__prev-link--disable--Yklx9" href="/">â PREV</a></div><div class="Pagination-module--pagination__next--3hFiN"><a rel="next" class="Pagination-module--pagination__next-link--3FUtA" href="/page/1">NEXT â</a></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div>
61<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script>
61<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-39f6a54ffada36198f99.js"],"component---cache-caches-gatsby-plugin-offline-app-shell-js":["/component---cache-caches-gatsby-plugin-offline-app-shell-js-d0f78270892abd563f0a.js"],"component---src-templates-categories-list-template-js":["/component---src-templates-categories-list-template-js-ab9b0087b153dd9a29d9.js"],"component---src-templates-category-template-js":["/component---src-templates-category-template-js-b2dae80a69f78f09f029.js"],"component---src-templates-index-template-js":["/component---src-templates-index-template-js-50afadebb9bbe5c56d4f.js"],"component---src-templates-not-found-template-js":["/component---src-templates-not-found-template-js-424ddc375ac0060f70dc.js"],"component---src-templates-page-template-js":["/component---src-templates-page-template-js-0ec48369f974a4ae3577.js"],"component---src-templates-post-template-js":["/component---src-templates-post-template-js-d6036252a6b46bc2c0c3.js"],"component---src-templates-tag-template-js":["/component---src-templates-tag-template-js-da011bf5f19a4309e2c9.js"],"component---src-templates-tags-list-template-js":["/component---src-templates-tags-list-template-js-de1e394fd6a4bb7c3d22.js"]};/*]]>*/</script>
61<script src="/component---src-templates-index-template-js-50afadebb9bbe5c56d4f.js" async=""></script>
61<script src="/f9ebebcc6744302e9aa5ca837c39d789357ff7c5-cb0d4dfae7828dad78f5.js" async=""></script>
61<script src="/cd95ea5cbd2c605f26db819f07999610c9ff4310-aaf5433a2b442dfdbeba.js" async=""></script>
61<script src="/styles-0dd9b16d06f2e4f550cc.js" async=""></script>
61<script src="/app-39f6a54ffada36198f99.js" async=""></script>
61<script src="/532a2f07-49bf2a4eaadb39c9996c.js" async=""></script>
61<script src="/framework-7656862d80676d58607a.js" async=""></script>
61<script src="/webpack-runtime-a4b018c197b32c3c2152.js" async=""></script>
61</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.