PageSourceSearch

https://leo-blog-legacy.vercel.app/

html leo-blog-legacy.vercel.app collected 2026-10-03 07:13:41 UTC 36,245 bytes, 61 lines download raw bytes

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&#x27;s Blog - Leo&#x27;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&#x27;s Blog - Leo&#x27;s coding journey</title><meta data-react-helmet="true" name="description" content="Coding and all other stuff related to a dev&#x27;s life"/><meta data-react-helmet="true" property="og:description" content="Coding and all other stuff related to a dev&#x27;s life"/><meta data-react-helmet="true" property="og:site_name" content="Leo&#x27;s Blog - Leo&#x27;s coding journey"/><meta data-react-helmet="true" property="og:title" content="Leo&#x27;s Blog - Leo&#x27;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&#x27;s Blog - Leo&#x27;s coding journey"/><meta data-react-helmet="true" name="twitter:description" content="Coding and all other stuff related to a dev&#x27;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&#x27;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&#x27;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 &amp; 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&#x27;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&#x27;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.