<!DOCTYPE html><html lang="id"><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 id="typography.js">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font:100%/1.45 'Helvetica Neue','Segoe UI','Helvetica','Arial',sans-serif;box-sizing:border-box;overflow-y:scroll;}*{box-sizing:inherit;}*:before{box-sizing:inherit;}*:after{box-sizing:inherit;}body{color:hsla(0,0%,0%,0.8);font-family:'Helvetica Neue','Segoe UI','Helvetica','Arial',sans-serif;font-weight:normal;word-wrap:break-word;font-kerning:normal;-moz-font-feature-settings:"kern", "liga", "clig", "calt";-ms-font-feature-settings:"kern", "liga", "clig", "calt";-webkit-font-feature-settings:"kern", "liga", "clig", "calt";font-feature-settings:"kern", "liga", "clig", "calt";}img{max-width:100%;margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}h1{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Segoe UI','Helvetica','Arial',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:2rem;line-height:1.1;}h2{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Segoe UI','Helvetica','Arial',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1.51572rem;line-height:1.1;}h3{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Segoe UI','Helvetica','Arial',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1.31951rem;line-height:1.1;}h4{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Segoe UI','Helvetica','Arial',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.1;}h5{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Segoe UI','Helvetica','Arial',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:0.87055rem;line-height:1.1;}h6{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Segoe UI','Helvetica','Arial',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:0.81225rem;line-height:1.1;}hgroup{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}ul{margin-left:1.45rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;list-style-position:outside;list-style-image:none;}ol{margin-left:1.45rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;list-style-position:outside;list-style-image:none;}dl{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}dd{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}p{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}figure{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}pre{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;font-size:0.85rem;line-height:1.45rem;}table{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;font-size:1rem;line-height:1.45rem;border-collapse:collapse;width:100%;}fieldset{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}blockquote{margin-left:1.45rem;margin-right:1.45rem;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}form{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}noscript{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}iframe{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}hr{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:calc(1.45rem - 1px);background:hsla(0,0%,0%,0.2);border:none;height:1px;}address{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}b{font-weight:bold;}strong{font-weight:bold;}dt{font-weight:bold;}th{font-weight:bold;}li{margin-bottom:calc(1.45rem / 2);}ol li{padding-left:0;}ul li{padding-left:0;}li > ol{margin-left:1.45rem;margin-bottom:calc(1.45rem / 2);margin-top:calc(1.45rem / 2);}li > ul{margin-left:1.45rem;margin-bottom:calc(1.45rem / 2);margin-top:calc(1.45rem / 2);}blockquote *:last-child{margin-bottom:0;}li *:last-child{margin-bottom:0;}p *:last-child{margin-bottom:0;}li > p{margin-bottom:calc(1.45rem / 2);}code{font-size:0.85rem;line-height:1.45rem;}kbd{font-size:0.85rem;line-height:1.45rem;}samp{font-size:0.85rem;line-height:1.45rem;}abbr{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}acronym{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}abbr[title]{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;text-decoration:none;}thead{text-align:left;}td,th{text-align:left;border-bottom:1px solid hsla(0,0%,0%,0.12);font-feature-settings:"tnum";-moz-font-feature-settings:"tnum";-ms-font-feature-settings:"tnum";-webkit-font-feature-settings:"tnum";padding-left:0.96667rem;padding-right:0.96667rem;padding-top:0.725rem;padding-bottom:calc(0.725rem - 1px);}th:first-child,td:first-child{padding-left:0;}th:last-child,td:last-child{padding-right:0;}</style><link rel="sitemap" type="application/xml" href="/sitemap.xml"/><title data-react-helmet="true">Gaptek.net – Web developer &amp; open source blog</title><link data-react-helmet="true" rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpMwidZAAAF8ElEQVRYCaVXS28bVRQ+8/A4ju2kEYimiUjaNCWEKryECOURilggdQPLSpFQd6zYICFVLGklFvwD2FQCdmxAIJUuukFEFWpK2BCEVGABgVSKGxK7Htvz4PvuzBlPbFOa9Erje33POd/5zrnn3rljnTt37u04jp8JgqA+Ojr68e7u7kIURa8WCoXG7a0teX7p5eqzi88dCYJOKGJbMrDFEgShxBIJFRzbjb0hz7q2stK4cvmrT2ZmTtSbzeabjuNsA9vGU7I876PPLl265sLh8sjIyGKr1ZLNzc23PM9zLMuSMIykEwTiFVwZP/yQtNptuO/3D1BZXb0uP66tSbValXq9Li+8+JIcm1mQoWJR/Gb7dc5Bz0aQgmA5Fr9eXz67vHzGtW17y/d9AasGhGUoRQiig/9WGIXSaNyR7e1tqw0CJLan4a9jO7L+07p8/eUX8uhjJ+WXn9dlamoazxTJRK7rFmEosPdha+Ox4MMvFotVZOWiC6ckQQJFOKBzC3NFEAXbxF2M5A5s6XS5PCwzsydkbGxMjh0/LgWvYCIFgkRxHBEImEMaAMZcBs41XQJjwOgIR4ZpS9BpT+UI2bCsnDjVIihT20IWO52O+H4LyxemNsTtYtJP2hiow7EhkE4O7GgTRyYSIIE1yowLkZJGhCZA5C1ZHna0QeTUwmMZ3UHgwLD2EFCG7GnKZsb8TxL0gUQZGX4oYwbo1EVhWVhKxyEk9VNiGRLR+lpCQJ1QzLFpBE//J1HqfCLWX+pzB21hy1awC2rotdq5fEm+umTVLu1jFmHPXPevSiJsyTAMEGlvDVAjlomJCVk8dUqGS8MyMTkpOE/MFmb62RSHvrQQjQA/e5ZAJ7WnOQsQh5LB0miMPME26E88+ZTwUQchbMzS4NwyAQ4IkvN8XCpywK2ok+xZyUOlkvx686b8cOOGlIZLpg644Dnf4JIAmVkIWCsWHHMZfoPtCLLBILQRO9/MEuQJ8JTC4WHI4LDA1mrLlW8uG4J5w75xDpjFGCGA0vCwjB46ZLBImodZHwEC5bPgo6D++P1PwenE2IxjzU6f0z0TdNGNjphRbcdkhEvi4XCaHH8w86WmpgZMBmBwe3tb4qAlry09ncoJmCY87dTwnnqYE9t1Hdndrct336+hYCdBxssyYQiQbQdvsxDH9fsffChSeVhqO3ekAENmIQssTyLH7T/lYMn3p9+J5OjhiixevyoXLlyUhYWFjL/LAiGBeqMp848clcoDU/Le1ZpI0MHhgrXMrW1mdY8Dciy7tnx725d3Hi/K6bmTUhAffLuFnG5D7k/4DHHahR1ZOuKJE2PPY98zA93AOSLs3VpXh9wZxPyoJZNVx7wrbBsuISAKg09rQJBuW7b+acqx8aqcn5+SZC/3Hjx3czxYxsBCLC/rYG3tlmzW6jKn5wNM0gwkxiwYLgcbbiVZ/SXSg/86LIS09W1DTugk1XTMte+ulJofoAdoCCxGii5r6mdvBjKxDnIWOrXfnhCZ5yRYdU6ojAAnzeGRHps8ivsOIC4LwfI9QEzmiKaOVE4ZxnoU0wcx8y0joJNUogGfPFOV77fvJaA1RhziZwTUGR0zes3Afh0O0icWG7FJgL7UnyGgf1QpywAnoHw/jQ65pUmCuL1X+74LickAFA3b+3SuxPlm1KD4pkTALBvTsiUAUxOqUUwN9qwX1NWKijpOYLq/KtOeEnXOrZ0WYXZBYAZAynwXeDwgVZkpSwjAFb3lEbPMqIBulBIVu40YxCReclE1co/zXHp+IPyFD4rTuIh8WnBx9cK5QQMKkwdj8z/te2V5PXNFV7uk14CAZTzjehfPzs6+gsvJecjKeFfY3s7OzhtwPM1rFJgGSBVkScV2YzngKI2UGcCHCw+BaGNj4wyyPocsNN3IsqZxQThr4yrG61i5XC5WKhW8jTvpEhzQcc6MzoErxEVzENy7/JDFdX7VLUTRyt+3boVBu93AFhnC/T7mJxaz0Xtq5TD/d2iqDFkkRgACjUZDarWawcUX+R04H0Pgn/8LxknWV8mJGyQAAAAASUVORK5CYII="/><meta data-react-helmet="true" name="description" content="Gaptek.net is web developer blog specializing in modern JavaScript who breaks down complex concepts in an accessible and intuitive way."/><meta data-react-helmet="true" name="image" content="https://gaptek.net/logos/gaptek.jpg"/><meta data-react-helmet="true" property="og:url" content="https://gaptek.net/"/><meta data-react-helmet="true" property="og:title" content="Gaptek.net"/><meta data-react-helmet="true" property="og:description" content="Gaptek.net is web developer blog specializing in modern JavaScript who breaks down complex concepts in an accessible and intuitive way."/><meta data-react-helmet="true" property="og:image" content="https://gaptek.net/logos/gaptek.jpg"/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:creator" content="tama0x1"/><meta data-react-helmet="true" name="twitter:title" content="Gaptek.net"/><meta data-react-helmet="true" name="twitter:description" content="Gaptek.net is web developer blog specializing in modern JavaScript who breaks down complex concepts in an accessible and intuitive way."/><meta data-react-helmet="true" name="twitter:image" content="https://gaptek.net/logos/gaptek.jpg"/><script data-react-helmet="true" type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","url":"https://gaptek.net/","name":"Gaptek.net","alternateName":"Gaptek.net"}]</script><style data-href="/styles.667be632d517a8223ae4.css">@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);@import url(https://rsms.me/inter/inter.css);
/*! Primitive
  by Tania Rascia */*,:after,:before,html{box-sizing:border-box}body,figure{margin:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:normal normal normal 1rem/1.6 -apple-system,BlinkMacSystemFont,Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:84%!important}body{color:#404040;font-size:1rem}@media (min-width:850px){body{font-size:1.2rem}}dl,ol,p,table,ul{margin:0 0 1.5rem;font-size:1.15rem}@media (min-width:850px){dl,ol,p,table,ul{margin:0 0 2rem;font-size:1.3rem}}ul li p{margin:0}ul li ul{margin-bottom:0}ul li ul li{margin-left:0}ol li ol{margin-bottom:0}h1,h2,h3,h4,h5{font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Inter,Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.3;color:#111}h1,h1:not(:first-child),h2,h2:not(:first-child),h3,h3:not(:first-child),h4,h4:not(:first-child),h5,h5:not(:first-child){margin:0 0 1rem}h1:not(:first-child),h2:not(:first-child),h3:not(:first-child){margin-top:3rem}@media (min-width:850px){h1,h2,h3,h4,h5{margin:0 0 2rem}h1:not(:first-child),h2:not(:first-child),h3:not(:first-child),h4:not(:first-child),h5:not(:first-child){margin:0 0 1.5rem}h1:not(:first-child),h2:not(:first-child),h3:not(:first-child){margin-top:3.5rem}h1{font-size:2.25rem}h2{font-size:2.2rem}h3{font-size:1.75rem}h4{font-size:1.6rem}h5{font-size:1.3rem}}ul{padding:0}ul li{position:relative;list-style-type:none;margin-bottom:.3rem;padding-left:1.5rem;margin-left:.5rem}ul li.task-list-item{padding-left:0;margin-left:0}ul li.task-list-item:before{content:""}ul li:before{content:"\2022   ";position:absolute;left:0;color:#8d8d8d;font-size:22px;line-height:1.1}@media (min-width:850px){ul li{padding-left:1.5rem;margin-left:1.5rem}}a{color:#f96854;font-weight:600}a:active,a:focus,a:hover{color:#f73c23}.page a:not(.button):not(.anchor):not(.gatsby-resp-image-link),.post a:not(.button):not(.anchor):not(.gatsby-resp-image-link){border-bottom:2px solid #feebe8}.page a:not(.button):not(.anchor):not(.gatsby-resp-image-link):hover,.post a:not(.button):not(.anchor):not(.gatsby-resp-image-link):hover{color:#f73c23;background:#fff8f7;border-bottom:2px solid #f73c23}.page a:not(.button):not(.anchor):not(.gatsby-resp-image-link):active,.page a:not(.button):not(.anchor):not(.gatsby-resp-image-link):focus,.post a:not(.button):not(.anchor):not(.gatsby-resp-image-link):active,.post a:not(.button):not(.anchor):not(.gatsby-resp-image-link):focus{color:#f73c23;background:#fff8f7;border-bottom:2px dashed #f73c23}.page img,.post img{max-width:100%;height:auto}mark{background:#ffeea8;padding:0 .2rem}b,strong{font-weight:600}kbd{border:1px solid #ccc;font-size:13px}hr{height:0;border:0;border-top:2px solid #ccc}dt{font-weight:600}dd{margin-bottom:.5rem}[type=checkbox]{margin-right:1rem}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.vertical-center{display:flex;align-items:center;justify-content:center}.flex{display:flex}.show{display:block!important}.hide{display:none!important}.invisible{visibility:hidden}.green{color:#1fc844}.pink{color:#ff5a5f}.blue{color:#f96854}.yellow{color:#fec623}.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}.button,[type=button],[type=submit],a.button,button{-webkit-appearance:none;display:inline-block;border:2px solid #f96854;border-radius:4px;background:#f96854;color:#fff;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1.1rem;text-transform:none;padding:.6rem .9rem;margin:0 0 .5rem;vertical-align:middle;text-align:center;cursor:pointer;text-decoration:none;line-height:1}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,a.button:active,a.button:focus,a.button:hover,button:active,button:focus,button:hover{border:2px solid #f6270a;color:#fff;background:#f6270a;text-decoration:none}.button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=submit]::-moz-focus-inner,a.button::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}.button:active,[type=button]:active,[type=submit]:active,a.button:active,button:active{transform:scale(.95)}.button.muted-button,a.button.muted-bottom{color:#404040;border:2px solid #e5e5e5;background:#e5e5e5}.button.muted-button:active,.button.muted-button:focus,.button.muted-button:hover,a.button.muted-bottom:active,a.button.muted-bottom:focus,a.button.muted-bottom:hover{color:#111;border:2px solid #d9d9d9;background:#d9d9d9}.donate-button,a.donate-button{display:inline-flex;align-items:center;border-radius:4px;border:none;background:#f96854;padding:.75rem 1rem;color:#fff}.donate-button:active,.donate-button:focus,.donate-button:hover,a.donate-button:active,a.donate-button:focus,a.donate-button:hover{background:#f73c23;border:none;color:#fff}.twitter-button,a.twitter-button{background:#00aced;border:2px solid #00aced}.twitter-button:active,.twitter-button:focus,.twitter-button:hover,a.twitter-button:active,a.twitter-button:focus,a.twitter-button:hover{background:#0099d4;border:2px solid #0099d4;color:#fff}.patreon-button,a.patreon-button{display:inline-flex;align-items:center;border-radius:4px;border:2px solid #f96854;background:#f96854;padding:0 1rem;color:#fff!important;margin:0 .5rem}.patreon-button img,a.patreon-button img{margin:0}.patreon-button:active,.patreon-button:focus,.patreon-button:hover,a.patreon-button:active,a.patreon-button:focus,a.patreon-button:hover{background:#f96854!important;border:2px solid #f73c23;color:#fff!important}@media (min-width:850px){.button,[type=button],[type=submit],a.button,button{padding:.75rem 1.25rem}}[type=color],[type=date],[type=email],[type=number],[type=search],[type=text],[type=url],select,textarea{display:block;border:2px solid #ccc;border-radius:4px;padding:.75rem;outline:none;margin-bottom:.5rem;font-size:1.1rem;font-weight:500;width:100%;max-width:100%;line-height:1}[type=color]:hover,[type=date]:hover,[type=email]:hover,[type=number]:hover,[type=search]:hover,[type=text]:hover,[type=url]:hover,select:hover,textarea:hover{background:#f7f7f7;border:2px solid #b3b3b3}[type=color]:active,[type=color]:focus,[type=date]:active,[type=date]:focus,[type=email]:active,[type=email]:focus,[type=number]:active,[type=number]:focus,[type=search]:active,[type=search]:focus,[type=text]:active,[type=text]:focus,[type=url]:active,[type=url]:focus,select:active,select:focus,textarea:active,textarea:focus{background:#fff8f7;border:2px solid #f96854}textarea{overflow:auto;height:auto;line-height:1.6}fieldset{border:1px solid #ccc;border-radius:4px;padding:60px;margin:2rem 0}legend{padding:0 .5rem;font-weight:600}select{color:#404040;-webkit-appearance:none;-moz-appearance:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==) 100% no-repeat;line-height:1}select::-ms-expand{display:none}[type=range]{width:100%}label{font-weight:700;font-size:1rem;max-width:100%;display:block;margin:1rem 0 .5rem}.newsletter-form{display:flex}.newsletter-form [type=email],.newsletter-form [type=text]{width:100%;max-width:400px;margin-right:.5rem}:-moz-placeholder,:-ms-input-placeholder,::-moz-placeholder,::-webkit-input-placeholder{color:#9a9a9a}table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;overflow-x:auto;display:block}th{border-bottom:2px solid #ccc}tfoot th{border-top:2px solid #ccc}td{border-bottom:1px solid #ccc}td,th{text-align:left;padding:.75rem!important;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word}caption{padding:60px 0;caption-side:bottom;color:#ababab}tbody tr:nth-child(2n){background-color:#f8f8f8}.nav{position:fixed;top:0;left:0;z-index:3;width:100%;background:#fff}.nav.scroll{box-shadow:1px 2px 18px rgba(0,0,0,.1)}.nav .cta,.nav .nav-container{display:flex;align-items:center}.nav .nav-container{padding:0 1.5rem;height:55px;max-width:800px;margin:auto;justify-content:space-between;transition:height .3s ease}.nav .brand a{display:flex;align-items:center;color:#333;margin-right:0;font-weight:600;font-size:1.1rem}.nav .brand a:focus,.nav .brand a:hover{color:#000}.nav .brand .text{display:none}.nav .links{display:flex;flex-direction:row;justify-content:flex-end;flex:1 1;margin:0}.nav .links a{display:flex;align-items:center;font-size:1.05rem;font-weight:500;padding:1rem .75rem;margin:0;color:#24292e;line-height:1.2;text-align:center}.nav .links a:active,.nav .links a:hover{color:#f96854}.favicon{height:23px;width:23px;margin-bottom:0}button.dark-switcher{-webkit-appearance:none;border:0;margin:0;background:transparent}button.dark-switcher:focus{outline:none}.theme-icon{height:18px;width:18px;margin-bottom:0}.kofi{margin:0;max-width:30px}@media (min-width:850px){.nav.scroll .nav-container{height:60px}.nav.scroll .links a.active,.nav.scroll .links a:hover{color:#092740;border-bottom:2px solid #f96854}.nav.scroll .links a:active{color:#092740;border-bottom:2px dashed #f96854}.nav .nav-container{height:90px;padding:0 2rem}.nav .nav-container .brand a{font-size:1.3rem}.nav .nav-container .brand .text{display:block}.nav .nav-container .links{display:flex;flex-direction:row;justify-content:space-between;flex:unset;height:100%}.nav .nav-container .links a{font-size:1.2rem;margin:0 1rem;padding:1rem .5rem;border-bottom:2px solid transparent}.nav .nav-container .links a.active{color:#092740}.nav .nav-container a.donate-button{padding:.5rem 1.25rem}.nav .nav-container a.donate-button .text{display:block}.nav .nav-container a.donate-button .emoji-in-button{margin:.25rem 0 0 .75rem}.patreon{margin:0;border-radius:4px}.kofi{margin:0;max-width:38px}.favicon{margin-right:1rem}button.dark-switcher{margin:0;font-size:1.4rem}.theme-icon{height:22px;width:22px;margin-bottom:0}}#main-content{margin-top:55px;padding:40px 0 0;min-height:calc(100vh - 162px)}@media (min-width:850px){#main-content{margin-top:92px;padding:60px 0 0;min-height:calc(100vh - 219px)}}.container{max-width:800px;padding:0 1.5rem;margin-left:auto;margin-right:auto}@media (min-width:850px){.container{padding:0 2rem}}.lead{margin:0 auto;font-size:1.1rem}.lead a{border-bottom:2px solid #feebe8}.lead a:hover{color:#f73c23;background:#fff8f7;border-bottom:2px solid #f73c23}.lead a:active,.lead a:focus{color:#f73c23;background:#fff8f7;border-bottom:2px dashed #f73c23}.lead h1{margin-top:0;font-weight:700;font-size:3.5rem;margin-bottom:1.5rem}.lead .button{margin-right:.5rem}@media (min-width:850px){.lead{font-size:1.2rem}.lead h1{font-size:5rem}.lead p{font-size:1.5rem;max-width:550px}.lead .button{margin-right:.5rem}}.callouts{display:none}@media (min-width:850px){.callouts{display:block}a.article-callout{display:flex;align-items:center;transition:all .3s ease;border-radius:4px;box-shadow:1px 2px 10px rgba(0,0,0,.1);color:#404040;font-weight:500;border:none!important;padding:1.5rem;margin:1.5rem 0;font-size:1.5rem}a.article-callout:active,a.article-callout:focus,a.article-callout:hover{color:#092740;background:#fff;box-shadow:3px 5px 20px rgba(0,0,0,.16)}a.article-callout img{height:50px;width:50px;max-width:50px;margin:0 1.5rem 0 0}}.social-buttons{display:flex;align-items:center}.social-buttons div:first-of-type{margin-right:.5rem}.front-page{margin-top:2rem}.front-page h2{border-bottom:0;padding-bottom:0}.section{margin:40px 0}.section:first-of-type{margin-bottom:0}@media (min-width:850px){.section{margin:4rem 0}}.single .gatsby-image-wrapper{height:50px!important;width:50px!important}@media (min-width:850px){.single .gatsby-image-wrapper{height:150px!important;width:150px!important}}.single-header{display:grid;margin-bottom:30px}.single-header.no-thumbnail{display:flex}.single-header .flex{display:flex;flex-direction:column}.single-header h1{margin:.5rem 0;font-weight:600}.single-header .post-meta{margin-bottom:1rem}@media (min-width:850px){.single-header{display:grid;grid-template-columns:180px 1fr;margin-bottom:80px}.single-header h1{margin:0 0 .5rem}}.post-container{display:flex}.posts a{display:block}.posts a .each{display:grid;align-items:center;grid-template-columns:60px 1fr 0;padding:1rem 0;margin:0;border:2px solid transparent;border-bottom-color:#f2f2f2}.posts a .each .date{margin:0;font-size:.9rem;color:rgba(0,0,0,.4);font-weight:400}.posts a:last-of-type .each{border-bottom-color:transparent}.posts h2{font-size:1.1rem;font-weight:600;line-height:1.3;border-bottom:none;margin:0;padding:0}.posts .gatsby-image-wrapper{margin-top:0;height:40px!important;width:40px!important}.posts .excerpt{display:none}.posts.simple a .each{grid-template-columns:50px 2fr auto;align-items:center;padding:.5rem 0;margin:0;border:2px solid transparent}.posts.simple a .each:hover{background:#fff}.posts.simple .gatsby-image-wrapper{margin-top:0;height:30px!important;width:30px!important}.posts.simple h2{font-weight:500;padding:0;margin:0;color:rgba(0,0,0,.6)}.posts.simple h2:hover{color:#092740}@media (min-width:850px){.posts{margin:3rem 0}.posts a .each{grid-template-columns:80px 1fr 90px;align-items:start;padding:1rem 2rem;margin:0 -2rem}.posts a .each:hover{border-radius:4px;background:#f2f2f2}.posts a .each:hoverlast-of-type:hover{border-bottom-color:#f96854}.posts a .each:hover h2{color:#092740}.posts a .each:active,.posts a .each:focus{border:2px dashed #f96854;background:#fff8f7}.posts a .each h2{font-size:1.3rem;line-height:1.3;margin:0 0 .25rem}.posts a .each .gatsby-image-wrapper{margin-top:0;height:50px!important;width:50px!important}.posts a .excerpt{font-size:1rem;display:block;color:rgba(0,0,0,.4);font-weight:500}.posts.simple a .each{padding:.5rem 1rem;margin:0 -1rem}.posts.simple a .each:hover{border:2px solid #f2f2f2;background:#f2f2f2}.posts.simple a .each:active,.posts.simple a .each:focus{border:2px dashed #f96854;background:#fff8f7}.posts.simple a .each h2{margin:0}.posts.simple a .each .gatsby-image-wrapper{height:30px!important;width:30px!important}}h2.publication-company{display:flex;align-items:center}h2.publication-company img{max-height:50px;margin:0 1rem 0 0}.alert{display:none;align-self:center;justify-self:flex-end}.alert .new{background:#fff5da;color:#f7b801}.alert .new,.alert .popular{display:inline-block;font-size:.9rem;border-radius:4px;padding:.5rem 1rem;text-align:center}.alert .popular{background:#eafcee;color:#1fc844}@media (min-width:850px){.alert{margin-left:1rem;display:block}}.simple-posts a .each{padding:.5rem 0;margin:0;border:2px solid transparent;border-radius:4px}.simple-posts a .each h2{font-size:1.1rem;font-weight:500;padding:0;margin:0;color:rgba(0,0,0,.6);border-bottom:none;display:flex;align-items:center}.simple-posts a .each img{margin-right:1rem;margin-bottom:0;max-height:30px;max-width:30px}.simple-posts a .each:hover{border:2px solid #f2f2f2;background:#f2f2f2}.simple-posts a .each:hover h2{color:#092740}@media (min-width:850px){.simple-posts a .each{padding:.5rem 1rem;margin:0 -1rem}.simple-posts a .each h2{font-size:1.3rem}}.projects .each{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0}.projects h2{font-size:1.2rem;border-bottom:none;margin:0 1rem 0 0;font-weight:600;color:#092740;padding:0;min-width:110px}.projects h2 a{display:flex;color:#092740;align-items:center}.projects h2 .project-icon{display:inline-block;font-size:2rem;margin-right:1rem}.projects h2 .project-title{display:inline-block}.projects p{display:none;color:rgba(0,0,0,.6);font-weight:400;margin:0}.projects .buttons{display:flex;align-items:center;width:210px;min-width:210px;max-width:210px}.projects .button{margin-right:.5rem;padding:.5rem;font-size:1rem}@media (min-width:850px){.projects .each{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:2px solid #f2f2f2}.projects .each:last-of-type{border-bottom:none}.projects h2{width:150px;min-width:150px;max-width:150px;font-size:1.4rem;margin-right:1rem}.projects p{display:block;flex:1 1;margin:0 1.5rem 0 0}.projects .button{padding:.45rem 1.25rem;font-size:.9rem}}.tag-container span{display:inline-block;padding:.3rem .5rem;background:#f2f2f2;border-radius:4px;color:#5a5a5a;font-size:.8rem;font-weight:400;margin:0 .5rem .5rem 0}.tag-container span .count{color:#ff5a5f;font-weight:700;margin-left:.25rem}.tag-container span:active,.tag-container span:focus,.tag-container span:hover{background:#e5e5e5;color:#404040}.tag-container.articles-page-tags{margin-bottom:1rem}@media (min-width:850px){.tag-container span{font-size:.9rem;font-weight:500;padding:.3rem .8rem}.tag-container span .count{margin-left:.5rem}.tag-container.articles-page-tags{margin-bottom:2rem;display:flex}.tag-container.articles-page-tags a{flex:1 1}.tag-container.articles-page-tags a span{display:flex;justify-content:center}}.post-meta{font-size:.8rem;color:rgba(0,0,0,.6);display:inline-block}.post-meta .date{margin-right:.5rem}.post-meta a{color:rgba(0,0,0,.6)}.post-meta a.comment-link,.post-meta a.github-link,.post-meta a.twitter-link{margin:0 .5rem}.post-meta a.comment-link{text-transform:lowercase}.post-meta a:hover{color:#f96854}@media (min-width:850px){.post-meta{font-size:.9rem}}blockquote{color:rgba(0,0,0,.7);border:2px solid #fed356;background:#fff8e4;border-radius:4px;font-weight:500;margin:1.5rem 0;padding:1.5rem;line-height:1.6;font-size:1rem}blockquote.success{border:2px solid #1fc844;background:#e1fae7}blockquote.error{border:2px solid #f2777a;background:#fce2e3}blockquote p{padding:0;font-size:1.15rem}blockquote p:last-of-type{margin-bottom:0}blockquote a{color:#092740;border-bottom:2px solid #fed356!important}blockquote a:active,blockquote a:focus,blockquote a:hover{color:#092740!important;background:#fff8e4!important}blockquote cite{display:block;margin-top:1rem;font-size:1.5rem;text-align:right;font-family:-apple-system,BlinkMacSystemFont,Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:rgba(0,0,0,.4)}blockquote code{margin:1rem 0 0}@media (min-width:850px){blockquote{padding:2rem}blockquote p{font-size:1.3rem}blockquote cite{font-size:2rem}}.quotations .quotation{border-color:#f96854;background:#f96854;color:#fff}@media (min-width:850px){.quotations{display:flex;flex-wrap:wrap}.quotations .quotation{margin:0 0 1rem;padding:2.5rem 2.5rem 4.5rem!important;border-radius:4px;flex-grow:1;flex-shrink:1;flex-basis:calc(50% - 2rem);box-shadow:0 3px 13px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.08);position:relative}.quotations .quotation:nth-of-type(2n){margin-left:1rem}.quotations .quotation cite{position:absolute;bottom:1rem;right:1.5rem}}.note{padding:2rem 0;margin:1.5rem 0}.note .note-container{background:#fff;border-radius:4px;box-shadow:3px 5px 20px rgba(0,0,0,.16);padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.note h2{border-bottom:0}.avatar{max-width:200px}@media (min-width:850px){.note{padding:2rem 0;margin:1.5rem 0}.note .note-container{flex-direction:row}.note .flex-author{display:flex}.avatar{margin-right:2rem}}.search{margin-bottom:0}.filter-count{width:80px;text-align:center;color:#f96854;font-size:1.4rem;font-weight:600}@media (min-width:850px){.note{padding:4rem 0;margin:3rem 0}.note .note-container{padding:3rem}}.view-all{margin-left:1.5rem;font-size:1.2rem}.emoji-in-button{line-height:0;font-size:1.5rem;margin-left:.75rem}.search-container{display:flex;align-items:center;margin-bottom:2rem}.category-container{display:flex;justify-content:flex-start;margin-bottom:1.5rem;flex-wrap:wrap}.category-container .category-filter{display:flex;align-items:center;font-size:.85rem;padding:.5rem .75rem;background:#fff3f2;border-radius:4px;margin-right:.5rem;margin-bottom:.5rem;font-weight:600;color:#f96854;cursor:pointer}.category-container .category-filter .count{display:flex;align-items:center;justify-content:center;font-size:.8rem;margin-left:1rem;color:#f96854;height:23px;width:23px;border-radius:50%;padding:5px}.category-container .category-filter.active{background:#f96854;color:#fff}.category-container .category-filter.active .count{background:#fff}.category-container .category-filter.active:active,.category-container .category-filter.active:focus,.category-container .category-filter.active:hover{color:#fff;background:#f73c23}.category-container .category-filter:last-of-type{margin-right:0}.category-container .category-filter:hover{background:#fee2de;color:#f8523b}@media (min-width:850px){.category-container{margin-bottom:1.5rem}.category-container .category-filter{padding:.5rem 1rem;font-size:1rem}}.coffee-icon{margin:0 .5rem 0 0;max-width:40px;height:auto}.newsletter-section{border:2px solid #ccc;border-radius:4px;padding:2.5rem;background:#f2f2f2}.newsletter-section form{margin-bottom:0}@media (min-width:850px){.newsletter-section{padding:3rem}}.new-moon-icon{display:none;float:right;max-width:150px;margin-top:3rem;margin-left:3.5rem;margin-bottom:0}@media (min-width:850px){.new-moon-icon{display:block}}.footer{display:flex;justify-content:flex-start;align-items:center;height:55px;color:rgba(0,0,0,.6)}.footer a,.footer strong{margin-right:1rem}.footer a{font-weight:400;color:#a6a6a6;display:block}.footer a:hover{color:#f96854}@media (min-width:850px){.footer{height:100px}}iframe{margin-bottom:0}.comments [type=text]{width:auto;min-width:300px}.comments .comment{padding:1.5rem 0}.comments .comment:last-of-type{border-bottom:0}.comments .comment header{display:flex;align-items:center;margin-bottom:.5rem}.comments .comment h2{color:#5a5a5a;margin:0 1rem 0 0;font-size:1.15rem;padding:0;border:0}.comments .comment p{font-size:1.05rem;white-space:pre-line}.comments .comment p:last-of-type{margin-bottom:0}.comments .comment-date{color:#737373;font-size:1rem}.comments:last-of-type{border-bottom:0}[type=submit]:disabled,[type=submit]:disabled:active,[type=submit]:disabled:focus,[type=submit]:disabled:hover,button[disabled],button[disabled]:active,button[disabled]:focus,button[disabled]:hover{opacity:.5}::-moz-selection{background:rgba(255,245,20,.8);color:#092740}::selection{background:rgba(255,245,20,.8);color:#092740}.containerhero{padding-top:var(--size-l);padding-bottom:var(--size-l);background:var(--bg);background-image:radial-gradient(#f96854 1px,transparent 0);background-size:16px 16px;transition:background .2s;will-change:background;margin-bottom:var(--size-m)}.containerhero h1{font-size:32px;font-weight:600}.containerhero h1,.containerhero h2{color:var(--fg-high);line-height:1.5}.containerhero h2{font-size:18px;font-weight:400}.containerhero h2 strong{font-weight:600;color:var(--fg-high)}.containerhero h2{border-bottom:0 solid!important;margin-top:-5px}.wrapper{max-width:var(--wrapper-width);margin:0 auto}.backdrop{background:var(--bg);width:80%;padding:var(--size-s) var(--size-s);transition:background .2s;will-change:background;margin:0 -1px}h1:after{opacity:0;content:"::";position:absolute;right:-20px;top:0;line-height:1.5;color:#000;font-size:20px;letter-spacing:.1em;animation-name:fade;animation-duration:.3s;animation-delay:.1s;animation-fill-mode:forwards}footer,footer a{font-size:15px}code{font-size:13px}pre.language-terminal code.language-terminal{position:relative;font-family:Menlo,Inter Mono,Courier New,monospace;border:1px solid #d8d9da;box-shadow:3px 5px 20px rgba(0,0,0,.16);border-radius:6px;padding:45px 1rem 1rem;margin:2rem 0;font-size:13px;background:#fff;color:#333}pre.language-terminal code.language-terminal:before{content:"\2022   \2022   \2022";position:absolute;top:0;left:0;height:25px;background:#e1e1e1;color:#c2c3c4;width:100%;font-size:2.5rem;margin:0;line-height:0;padding:14px 0;text-indent:4px;letter-spacing:-15px}code[class*=language-],pre[class*=language-],pre code{font-family:Menlo,Inter Mono,Courier New,monospace;font-size:13px;color:#b3b9c5;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.7;font-weight:400;margin:2rem 0;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:4px;-webkit-font-smoothing:antialiased}pre code{display:block;padding:1.5rem;overflow:auto;background-color:#333;border:0;box-shadow:2px 4px 25px rgba(0,0,0,.15)}kbd{background-color:#f7f7f7;border:1px solid rgba(0,0,0,.3);border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 0 0 2px #fff;color:#333;display:inline-block;font-family:Helvetica,Arial,sans-serif;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff;font-size:14px}:not(pre)>code,:not(pre)>code[class*=language-]{padding:3px 5px;color:#111}:not(pre)>code{border:none;font-family:Menlo,Inter Mono,Courier New,monospace;font-weight:400;border-radius:4px;background:rgba(0,0,0,.06)}code[class*=language-css],code[class*=language-less],code[class*=language-sass],code[class*=language-scss]{color:#c9c}.filename{background:#111;padding:.5rem 1rem .75rem;font-size:1rem;color:#fff;font-weight:700;border-top-left-radius:6px;border-top-right-radius:6px;margin-bottom:-2.2rem}@media (min-width:850px){code,code[class*=language-],pre.language-terminal code.language-terminal,pre[class*=language-],pre code{font-size:14px}}.token.doctype{background:#000;color:#fff}.token.cdata,.token.comment,.token.prolog{color:#777c85}.token.namespace{opacity:.7}.token.attr-value,.token.string{color:#92d192}.token.punctuation{color:#d5d8df}.token.operator{color:#ac8d58}.token.variable{color:#f2777a}.token.property{color:#abb2bf}.token.boolean,.token.constant,.token.entity,.token.inserted,.token.number,.token.regex,.token.symbol,.token.url{color:#fca369}.token.delimiter{background:#000;color:#fff;padding:1px 2px}.token.atrule{color:#62cfcf}.token.keyword{color:#ffeead}.language-autohotkey .token.selector{color:#fca369}.token.attr-name{color:#ffd479}.token.function{color:#62cfcf}.language-php .token.function{color:#fff}.token.class-name{color:#e1a6f2}.language-autohotkey .token.tag,.token.deleted{color:#f2777a}.token.tag{color:#6ab0f3}.language-autohotkey .token.keyword{color:#ffeead}.token.selector{color:#ffd479}.token.italic{font-style:italic}pre[data-line]{position:relative;padding:1rem 0}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1rem;background:hsla(0,0%,58.8%,.1);pointer-events:none;line-height:inherit;white-space:pre}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:transparent;color:transparent;font:700 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:after,.line-numbers .line-highlight:before{content:none}code::-moz-selection,pre::-moz-selection{text-shadow:none;color:inherit;background:hsla(0,0%,58.8%,.3)!important}code::selection,pre::selection{text-shadow:none;color:inherit;background:hsla(0,0%,58.8%,.3)!important}code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;color:inherit;background:hsla(0,0%,58.8%,.3)!important}code[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;color:inherit;background:hsla(0,0%,58.8%,.3)!important}.dark{background:#2d2d2d}.dark,.dark .lead h1{color:#b3b9c5}.dark a{color:#fb9485}.dark a:active,.dark a:focus,.dark a:hover{color:#f95f4a;background:transparent}.dark .lead a{border-bottom:2px solid transparent}.dark .lead a:hover{color:#f96854;background:transparent;border-bottom:2px solid #fb9485}.dark .lead a:active,.dark .lead a:focus{background:transparent;border-bottom:2px dashed #fb9485}.dark .page a:not(.button):not(.anchor):not(.gatsby-resp-image-link),.dark .post a:not(.button):not(.anchor):not(.gatsby-resp-image-link){border-bottom:2px solid transparent}.dark .page a:not(.button):not(.anchor):not(.gatsby-resp-image-link):hover,.dark .post a:not(.button):not(.anchor):not(.gatsby-resp-image-link):hover{color:#f96854;background:transparent;border-bottom:2px solid #fb9485}.dark .page a:not(.button):not(.anchor):not(.gatsby-resp-image-link):active,.dark .page a:not(.button):not(.anchor):not(.gatsby-resp-image-link):focus,.dark .post a:not(.button):not(.anchor):not(.gatsby-resp-image-link):active,.dark .post a:not(.button):not(.anchor):not(.gatsby-resp-image-link):focus{background:transparent;border-bottom:2px dashed #fb9485}.dark .page img,.dark .post img{max-width:100%;height:auto}.dark :not(pre)>code{background:hsla(0,0%,100%,.1);color:#b3b9c5}.dark .nav{background:#2d2d2d;border-color:#2d2d2d}.dark .nav.scroll{background:#202020;border-color:#202020}.dark .nav .brand a{color:#c1c6d0}.dark .nav .brand a:hover{color:#eee}.dark .nav .links a{color:#798499}.dark .nav .links a.active,.dark .nav .links a:hover{color:#b3b9c5}.dark .note{background:transparent;border-color:transparent}.dark .note .note-container{background:#202020}.dark li,.dark ol,.dark p,.dark ul{color:#b3b9c5}.dark h2{border-color:#252525}.dark h1,.dark h2,.dark h3,.dark h4,.dark h5{color:#cecece}.dark .posts.simple a .each{border-color:transparent}.dark .posts.simple a .each h2{color:#92969d}.dark .posts.simple a .each:hover{background:#343434;border-color:#343434}.dark .posts a .each{border:2px solid transparent;border-bottom-color:#343434}.dark .posts a .each h2{color:#ccc}.dark .posts a .each:hover{background:#343434!important;border-color:#343434;background:transparent}.dark .posts a .each:hover h2{color:#fff}.dark .posts a .excerpt{color:#777c85}.dark .simple-posts a .each h2{color:#92969d}.dark .simple-posts a .each:hover{border:2px solid #343434;background:#343434}.dark .simple-posts a .each:hover h2{color:#fff}.dark .tag-container span{color:#b3b9c5;background:#222;border:none}.dark .tag-container span .count{color:#ff5a5f}.dark .tag-container span:active,.dark .tag-container span:focus,.dark .tag-container span:hover{border:none;background:#111;color:#fff}.dark .projects h2,.dark .projects h2 a{color:#b3b9c5}.dark .projects p{color:#777c85}@media (min-width:850px){.dark .projects .each{border-bottom:2px solid #353535}.dark .projects .each:last-of-type{border-bottom:none}}.dark .post-meta{color:#777c85}.dark th{border-bottom:2px solid #202020}.dark tfoot th{border-top:2px solid #191919}.dark td{border-bottom:1px solid #191919}.dark tbody tr:nth-child(2n){background-color:#3a3a3a}.dark pre code{background:#3a3a3a}.dark blockquote{border:2px solid #393939;background:#222}.dark blockquote p{color:#fed356}.dark blockquote a{color:#fff4d5!important;border-bottom:#fed356!important}.dark blockquote a:hover{color:#febf0a!important;background:#111!important}.dark blockquote.quotation{border-color:#3a3a3a;background:#222;color:#fed356}.dark blockquote.quotation cite{color:hsla(0,0%,100%,.6)}.dark cite{color:hsla(0,0%,100%,.4)}.dark .footer,.dark .footer strong{color:#b3b9c5}.dark .footer a{color:#798499}.dark .footer a:hover{color:#d0d4db}.dark [type=color],.dark [type=date],.dark [type=email],.dark [type=number],.dark [type=search],.dark [type=text],.dark [type=url],.dark select,.dark textarea{color:#b3b9c5;border:2px solid #393939;background:#222!important}.dark [type=color]:hover,.dark [type=date]:hover,.dark [type=email]:hover,.dark [type=number]:hover,.dark [type=search]:hover,.dark [type=text]:hover,.dark [type=url]:hover,.dark select:hover,.dark textarea:hover{border:2px solid #444}.dark [type=color]:active,.dark [type=color]:focus,.dark [type=date]:active,.dark [type=date]:focus,.dark [type=email]:active,.dark [type=email]:focus,.dark [type=number]:active,.dark [type=number]:focus,.dark [type=search]:active,.dark [type=search]:focus,.dark [type=text]:active,.dark [type=text]:focus,.dark [type=url]:active,.dark [type=url]:focus,.dark select:active,.dark select:focus,.dark textarea:active,.dark textarea:focus{border:2px solid #f96854}.dark .button,.dark [type=button],.dark [type=submit],.dark a.button,.dark button{color:#f96854;border:2px solid #222;background:#222!important}.dark .button:active,.dark .button:focus,.dark .button:hover,.dark [type=button]:active,.dark [type=button]:focus,.dark [type=button]:hover,.dark [type=submit]:active,.dark [type=submit]:focus,.dark [type=submit]:hover,.dark a.button:active,.dark a.button:focus,.dark a.button:hover,.dark button:active,.dark button:focus,.dark button:hover{border:2px solid #000!important;background:#000!important;color:#f73c23}.dark .donate-button{background:transparent}.dark .new,.dark .popular{background:rgba(0,0,0,.2)}.dark .button.muted-button,.dark a.button.muted-bottom{color:#777c85;border:2px solid #777c85}.dark .button.muted-button:active,.dark .button.muted-button:focus,.dark .button.muted-button:hover,.dark a.button.muted-bottom:active,.dark a.button.muted-bottom:focus,.dark a.button.muted-bottom:hover{border:2px solid #b3b9c5;background:transparent;color:#b3b9c5}.dark button.dark-switcher{border:none!important}.dark pre.language-terminal code.language-terminal{border:1px solid #666;background:#111;color:#ccc}.dark pre.language-terminal code.language-terminal:before{background:#343434;color:#333}.dark .newsletter-section{border-color:#3a3a3a;background:#222}.dark .category-container .category-filter{padding:.5rem 1rem;background:#222;border-radius:4px;margin-right:.5rem;font-weight:600;color:#f96854;cursor:pointer}.dark .category-container .category-filter.active{background:#f96854!important;color:#fff!important}.dark .category-container .category-filter:last-of-type{margin-right:0}.dark .category-container .category-filter:hover{background:#111;color:#f73c23}.dark .filter-count{color:#f96854}.dark ::-moz-selection{background:#fb9485;color:#fff}.dark ::selection{background:#fb9485;color:#fff}.dark .containerhero{background:#2d2d2d;background-image:radial-gradient(#b3b9c5 1px,transparent 0);background-size:16px 16px;transition:background .2s;will-change:background}.dark .containerhero a{color:#fb9485}.dark .containerhero a:active,.dark .containerhero a:focus,.dark .containerhero a:hover{color:#f95f4a;background:transparent}.dark .backdrop{background:#2d2d2d!important;width:80%;transition:background .2s;will-change:background;margin:0 -1px}@font-face{font-family:PerfectDOS;src:url(/static/PerfectDos-51458c49387e34108ead6b220f699d54.ttf) format("truetype")}.not-found{background:#000084;color:#bbb;font-family:PerfectDOS,Courier New,monospace;font-weight:400;font-size:16px;height:100vh}.not-found #main-content{padding-top:80px;margin:0}.not-found button.dark-switcher,.not-found footer.footer{display:none}.not-found h1{color:#000;background:#bbb;box-shadow:10px 10px 0 #000;padding:10px 20px;display:inline-block;font-family:PerfectDOS,Courier New,monospace;font-weight:600;margin-bottom:40px}.not-found p{font-size:16px}.not-found .list p:not(:last-of-type){margin-bottom:5px}.not-found .bullet{margin-right:30px}.not-found .tania{color:#ff0}.not-found .nav{background:#bbb;border-bottom:2px solid #bbb;color:#000;height:30px}.not-found .nav .nav-container{padding:0;height:30px}.not-found .nav .nav-container .brand{display:flex;align-items:center}.not-found .nav .nav-container .brand,.not-found .nav .nav-container .brand a,.not-found .nav .nav-container .links{height:30px}.not-found .nav .nav-container .brand a,.not-found .nav .nav-container .links a{border-radius:0;color:#000;font-weight:600;padding:0 5px;margin:0;line-height:0;font-size:16px}.not-found .nav .nav-container .brand a:active,.not-found .nav .nav-container .brand a:focus,.not-found .nav .nav-container .brand a:hover,.not-found .nav .nav-container .links a:active,.not-found .nav .nav-container .links a:focus,.not-found .nav .nav-container .links a:hover{background:#000;color:#bbb}.not-found .nav .nav-container a.donate-button{display:none;background:#0aa;border:none;color:#eee;border-radius:0;height:30px}.not-found .nav .nav-container a.donate-button:active,.not-found .nav .nav-container a.donate-button:focus,.not-found .nav .nav-container a.donate-button:hover{background:#000;border:none;color:#fff}@media (min-width:900px){.not-found{font-size:24px}.not-found #main-content{padding-top:160px}.not-found .nav .nav-container .brand a,.not-found .nav .nav-container .links a{font-size:24px;padding:0 15px}.not-found .nav .nav-container a.donate-button{display:flex}.not-found p{font-size:24px}.not-found .emoji,.not-found img{display:none}}.blink{animation:blinkingText .8s infinite}@keyframes blinkingText{0%{opacity:0}49%{opacity:0}50%{opacity:1}}:root{--size-xxs:4px;--size-xs:8px;--size-s:16px;--size-m:32px;--size-l:64px;--size-xl:128px;--wrapper-width:740px;--black:#24292e;--white:#fff;--bg:#fff;--fg-high:#24292e;--fg-medium:#5a5a5a;--fg-low:#ebebeb;--primary:#f96854;--primary-dark:#2f3972;--font-stack:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.typography-module--h1--3nh_k{color:var(--fg-high);font-size:32px;font-weight:600;line-height:1.5}.typography-module--h2--t0StX{color:var(--fg-high);font-size:18px;font-weight:400;line-height:1.5;strong{font-weight:600;color:var(--fg-high)}}.typography-module--h3--Vwg3V{color:var(--fg-high);font-size:24px}.typography-module--h4--3EBaA{color:var(--fg-high);font-size:12px}.typography-module--link--XXaE4{color:var(--primary);text-decoration:none;text-transform:capitalize;font-weight:500;font-size:16px;line-height:1.5;transition:color .3s;&:hover{color:var(--primary-dark)}&.typography-module--secondary--18GSK{color:var(--fg-medium)}&.typography-module--secondary--18GSK:hover{color:var(--fg-high)}}.typography-module--inverted--ai6qQ{color:var(--bg)}.hero-module--containerhero--UhDxk{padding-top:var(--size-l);padding-bottom:var(--size-l);background:var(--bg);background-image:radial-gradient(var(--primary-dark) 1px,transparent 0);background-size:16px 16px;transition:background .2s;will-change:background;margin-bottom:var(--size-m)}a{text-decoration:none;color:var(--primary)}.hero-module--containerhero--UhDxk h2{border-bottom:0 solid!important}.hero-module--wrapper--9GBB_{max-width:var(--wrapper-width);margin:0 auto}.hero-module--backdrop--2N_sG{background:var(--bg);width:80%;padding:var(--size-s) var(--size-s);transition:background .2s;will-change:background;margin:0 -1px}.hero-module--cta--35tUt{display:inline-block;margin-top:var(--size-s);color:var(--fg-medium);text-decoration:none;font-weight:500;font-size:16px;line-height:1.5;transition:color .3s;&:hover{color:var(--fg-high)}}</style><style type="text/css">.gatsby-resp-image-image{width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;color:transparent;}</style><style type="text/css">
    .anchor {
      float: left;
      padding-right: 4px;
      margin-left: -20px;
    }
    h1 .anchor svg,
    h2 .anchor svg,
    h3 .anchor svg,
    h4 .anchor svg,
    h5 .anchor svg,
    h6 .anchor svg {
      visibility: hidden;
    }
    h1:hover .anchor svg,
    h2:hover .anchor svg,
    h3:hover .anchor svg,
    h4:hover .anchor svg,
    h5:hover .anchor svg,
    h6:hover .anchor svg,
    h1 .anchor:focus svg,
    h2 .anchor:focus svg,
    h3 .anchor:focus svg,
    h4 .anchor:focus svg,
    h5 .anchor:focus svg,
    h6 .anchor:focus svg {
      visibility: visible;
    }
  </style><script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var hash = window.decodeURI(location.hash.replace('#', ''))
      if (hash !== '') {
        var element = document.getElementById(hash)
        if (element) {
          var offset = element.offsetTop
          // Wait for the browser to finish rendering before scrolling.
          setTimeout((function() {
            window.scrollTo(0, offset - 100)
          }), 0)
        }
      }
    })
  </script><link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/><meta name="generator" content="Gatsby 2.13.13"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#3F80FF"/><link rel="apple-touch-icon" sizes="48x48" href="/logos/logo-48.png"/><link rel="apple-touch-icon" sizes="1024x1024" href="/logos/logo-1024.png"/><link rel="alternate" type="application/rss+xml" href="/rss.xml"/><link as="script" rel="preload" href="/component---src-pages-index-js-65c365a4e3dad7797426.js"/><link as="script" rel="preload" href="/app-97783c6483f0838d79ce.js"/><link as="script" rel="preload" href="/2-2db29a823bec74b30d25.js"/><link as="script" rel="preload" href="/1-254e07fed6e5c97339b6.js"/><link as="script" rel="preload" href="/styles-662643f5ec3f79a042a2.js"/><link as="script" rel="preload" href="/webpack-runtime-2d4445d8254cbafc6796.js"/><link as="fetch" rel="preload" href="/page-data/index/page-data.json" crossorigin="use-credentials"/></head><body class="theme "><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"><nav class="nav"><div class="nav-container"><div class="brand"><a aria-current="page" class="" href="/"><img src="/static/rabbit-2774bc13f636c8e97167b4797e5e4cfd.png" class="favicon" alt="gaptek"/><span class="text">Gaptek.net</span></a></div><div class="links"><a href="/me/">🤷 Tentang</a><a href="/blog/">📝 Catatan</a><a href="/contact/">🤙 Hubungi</a><div class="cta"><button class="dark-switcher"><span><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTI4IDEyODsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxwYXRoIGQ9Ik0xMDUuODcsMTQuOTljLTMuNzQtMy4zOS03LjkxLTYuMzgtMTIuNDItOC44OWMtMC44Ny0wLjQ5LTItMC4zNS0yLjcxLDAuMzMgYy0wLjcxLDAuNjgtMC44MywxLjczLTAuMjksMi41M2MxNS42MywyMi45MywxMi4yOSw1Mi41Mi04LjExLDcxLjk3Yy0xMS45LDExLjM1LTI3Ljg1LDE3LjYtNDQuOTEsMTcuNiBjLTExLjM5LDAtMjIuNTQtMi44Ni0zMi4yNC04LjI3Yy0wLjg3LTAuNDktMi0wLjM2LTIuNzEsMC4zM2MtMC43MSwwLjY4LTAuODMsMS43Mi0wLjI4LDIuNTNjMi44MSw0LjEyLDYuMTIsNy45Myw5Ljg2LDExLjMyIGMxMi42MSwxMS40NSwyOS4yNywxNy43Niw0Ni45LDE3Ljc2YzE4LjI3LDAsMzUuMzQtNi43LDQ4LjA5LTE4Ljg2YzEyLjUzLTExLjk0LDE5LjMxLTI3LjcxLDE5LjA5LTQ0LjQgQzEyNS45Miw0Mi4yNSwxMTguNzIsMjYuNjQsMTA1Ljg3LDE0Ljk5eiIgc3R5bGU9ImZpbGw6I0ZDQzIxQjsiLz4KPC9zdmc+" class="theme-icon" alt="Dark Mode"/></span></button></div></div></div></nav><main id="main-content"><div class="containerhero"><div class="wrapper"><div class="backdrop"><h1>Gaptek.net</h1><h2>Personal blog berbahasa Indonesia yang saya dedikasikan untuk mendokumentasikan segala hal yang <a href="https://et.mk">saya</a> pelajari.</h2><a href="/blog" class="cta">Lihat catatan -&gt;</a></div></div></div><div class="container front-page"><section class="section"><h4>Catatan Terbaru</h4><section class="posts simple"><a href="/graphql-mutation/"><div class="each"><div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden;display:inline-block;width:150px;height:150px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAACcUlEQVQ4y32Vz2sTQRTHs00iFLTFXwcToWBBL3oQkrbpP6E3UcRe9GSxJ6sSLNqKUpFW2pPR9KAomj2opVUpKrQHxehJBU+KSuZkjYdCoSKsn5d900w3IYFP52Xmfb/dmXn7EotFPpVMyY6ejntgVjDEkbVYw8dk1w1ixjEzWT+p8Z213ELwF4hvhxo/6ZpaHfNqWjMoeZWs75GQcJ52P5hq79PgN0gsc/V1P2FEE+o8+4Rek213wASU4TgswCuNy7rW0aCzXjxhmoRHjPcYh+A9jFsR4xm44PyzcTWW3LvwAFL1c8yUZv71vwxW+uZlW99gt4rbdDwHlzXXznVJrmhESzzjbrGwmnsR/Op5HCD4yfeDkSMYhkvutqzhcs+TYDX3XAwLrqAToyWT8ZeIj8AbuVHYpetnrSF5ncTX4QOcQrPI3KJ46Hb9hI6DkFeDTZCHz8wNMJ6HEW71EONHDG7ANtXl4bTGSfkT1y/DMKr1FFfj7XATqvAnfGq/S3M81Y2JVuN41HBsY3Iphck0LKtpwV4YOW2qG40aNtvyFrgCn5g7qrc8QnxYtgzXJMfZ8qB7fLXakoPVSxkgLsMU8Y7opTBuhUl4BydEE2qdQmfhlly9lADxd9irJdKqbPbBD1s2JlI2RVvYLHzle1rFzQrbXthO+LLS98wWdtF9U1Lw0Hn1ZDtXYbOKh5xXr13LaI78k3C/EmrTtmM0NActXjmnt3BMm8Nr5uVS5uCiGDfR2eagLQjMxvZ1QFqWtK5q76xsS46j21lP1DShztOW41v3lg12LWywxWiDFc16l7cNttVPAIJu4nnB6NPVu3WjwX91WVh34g6SGQAAAABJRU5ErkJggg==" alt="" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition-delay:500ms"/><noscript><picture><source srcset="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png 1x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/de03e/graphql.png 1.5x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/1e9e2/graphql.png 2x" /><img loading="lazy" width="150" height="150" srcset="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png 1x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/de03e/graphql.png 1.5x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/1e9e2/graphql.png 2x" src="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div><div><h2>Belajar GraphQL Node.js · Bagian 2 - Mutasi</h2></div><div class="alert"><div class="new">Baru!</div></div></div></a><a href="/graphql-query/"><div class="each"><div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden;display:inline-block;width:150px;height:150px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAACcUlEQVQ4y32Vz2sTQRTHs00iFLTFXwcToWBBL3oQkrbpP6E3UcRe9GSxJ6sSLNqKUpFW2pPR9KAomj2opVUpKrQHxehJBU+KSuZkjYdCoSKsn5d900w3IYFP52Xmfb/dmXn7EotFPpVMyY6ejntgVjDEkbVYw8dk1w1ixjEzWT+p8Z213ELwF4hvhxo/6ZpaHfNqWjMoeZWs75GQcJ52P5hq79PgN0gsc/V1P2FEE+o8+4Rek213wASU4TgswCuNy7rW0aCzXjxhmoRHjPcYh+A9jFsR4xm44PyzcTWW3LvwAFL1c8yUZv71vwxW+uZlW99gt4rbdDwHlzXXznVJrmhESzzjbrGwmnsR/Op5HCD4yfeDkSMYhkvutqzhcs+TYDX3XAwLrqAToyWT8ZeIj8AbuVHYpetnrSF5ncTX4QOcQrPI3KJ46Hb9hI6DkFeDTZCHz8wNMJ6HEW71EONHDG7ANtXl4bTGSfkT1y/DMKr1FFfj7XATqvAnfGq/S3M81Y2JVuN41HBsY3Iphck0LKtpwV4YOW2qG40aNtvyFrgCn5g7qrc8QnxYtgzXJMfZ8qB7fLXakoPVSxkgLsMU8Y7opTBuhUl4BydEE2qdQmfhlly9lADxd9irJdKqbPbBD1s2JlI2RVvYLHzle1rFzQrbXthO+LLS98wWdtF9U1Lw0Hn1ZDtXYbOKh5xXr13LaI78k3C/EmrTtmM0NActXjmnt3BMm8Nr5uVS5uCiGDfR2eagLQjMxvZ1QFqWtK5q76xsS46j21lP1DShztOW41v3lg12LWywxWiDFc16l7cNttVPAIJu4nnB6NPVu3WjwX91WVh34g6SGQAAAABJRU5ErkJggg==" alt="" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition-delay:500ms"/><noscript><picture><source srcset="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png 1x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/de03e/graphql.png 1.5x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/1e9e2/graphql.png 2x" /><img loading="lazy" width="150" height="150" srcset="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png 1x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/de03e/graphql.png 1.5x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/1e9e2/graphql.png 2x" src="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div><div><h2>Belajar GraphQL Node.js · Bagian 1 - Query sederhana</h2></div><div class="alert"><div class="new">Baru!</div></div></div></a><a href="/graphql-intro/"><div class="each"><div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden;display:inline-block;width:150px;height:150px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAACcUlEQVQ4y32Vz2sTQRTHs00iFLTFXwcToWBBL3oQkrbpP6E3UcRe9GSxJ6sSLNqKUpFW2pPR9KAomj2opVUpKrQHxehJBU+KSuZkjYdCoSKsn5d900w3IYFP52Xmfb/dmXn7EotFPpVMyY6ejntgVjDEkbVYw8dk1w1ixjEzWT+p8Z213ELwF4hvhxo/6ZpaHfNqWjMoeZWs75GQcJ52P5hq79PgN0gsc/V1P2FEE+o8+4Rek213wASU4TgswCuNy7rW0aCzXjxhmoRHjPcYh+A9jFsR4xm44PyzcTWW3LvwAFL1c8yUZv71vwxW+uZlW99gt4rbdDwHlzXXznVJrmhESzzjbrGwmnsR/Op5HCD4yfeDkSMYhkvutqzhcs+TYDX3XAwLrqAToyWT8ZeIj8AbuVHYpetnrSF5ncTX4QOcQrPI3KJ46Hb9hI6DkFeDTZCHz8wNMJ6HEW71EONHDG7ANtXl4bTGSfkT1y/DMKr1FFfj7XATqvAnfGq/S3M81Y2JVuN41HBsY3Iphck0LKtpwV4YOW2qG40aNtvyFrgCn5g7qrc8QnxYtgzXJMfZ8qB7fLXakoPVSxkgLsMU8Y7opTBuhUl4BydEE2qdQmfhlly9lADxd9irJdKqbPbBD1s2JlI2RVvYLHzle1rFzQrbXthO+LLS98wWdtF9U1Lw0Hn1ZDtXYbOKh5xXr13LaI78k3C/EmrTtmM0NActXjmnt3BMm8Nr5uVS5uCiGDfR2eagLQjMxvZ1QFqWtK5q76xsS46j21lP1DShztOW41v3lg12LWywxWiDFc16l7cNttVPAIJu4nnB6NPVu3WjwX91WVh34g6SGQAAAABJRU5ErkJggg==" alt="" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition-delay:500ms"/><noscript><picture><source srcset="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png 1x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/de03e/graphql.png 1.5x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/1e9e2/graphql.png 2x" /><img loading="lazy" width="150" height="150" srcset="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png 1x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/de03e/graphql.png 1.5x,
/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/1e9e2/graphql.png 2x" src="/static/9cfd82e7418ae3ffa5cbf47f9aade3b9/4148e/graphql.png" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div><div><h2>Belajar GraphQL Node.js · Bagian 0 - Apa dan mengapa?</h2></div><div class="alert"><div class="new">Baru!</div></div></div></a><a href="/gatsby-wordpress/"><div class="each"><div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden;display:inline-block;width:150px;height:150px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAC9UlEQVQ4y12U20tUURTGTxJkBQldXro5Z84oPWQRBCWFYBcKzLTGocjRKOyGUJieGWdMHZlqoifFh2COl0zTzAxByYcgeqp/IJDo8hbRi1RgdoFO39rzHWdPAz/2mrX3Xmettddahq8lbcjPtB0Dch7lPMgHwCXQAmIgDmzQCCpBgZzFusyz4a2GCUE2qCwFUVBB+Rg4C86BE2C/r8WRj10HVQZ/3n0Yc3Rj9eAiKAHd4LM/NuT6bzzMEB92ofsOxvmxUyCSY9QLE2sdOAnKwVerfcz12X1i4Bf4mcWh8SHZO0TDbcoG0uZZ3svc1AS6JtQFyL/N6IDrbxvRGFYfMVsHZX8ArOb9EKhVxvy2I0ntAKuYq6vgPEMb4eFr1NeCCSvxWAwGaWwFV3m4TSKULVnP5uIl+EujtzW9GP3hjz8Qg5Oafis4AsLypwEcBUntwJSEJyFL6KCQ+uN8mD9m7L6sFdRfAafBBYPPXw0WwXoeCNKLRZU3XKB+JXhvRvpd6p9RL/lMyRt4sYcDyaeuFzrWDeCLPICUDeQXmve9mvdvGg42iu4D6JM6NdgB9YHkpByY1i6OiJf0dFDTl5vRfk8/C7ZbnY9E7lUPxXaqlrLAugCKMxedoPLOdly2YI3SN6fzIc8Fup64TFdTUWrapWMhg/WHdkrPW+2jsmHTk7XgGwzPSbLBx0I7vZx73VbHmJzdB15ZneMu30E9SiUHwagUNdbXVsTxWnGWCe9h7ZVRL3feqvAzOX4HdkvbymYBXS81o4OumWm3PVoHSLhz9OIe9Vs4LG4WpWZcFrw0xU4v0TJFquRy8R114K72CHUqlxH1oU9gTWbEqVwucFDskm7KGTsyNcQzltE8creO+nGWzoLZqoo5RP0ZaUNgSVP4mp383KGY7cfD0hFgs9SjDAIpC6m9wK0pMficZzeybRNaQ+TlDseMHOYw2AF8HLY9rLMEB+42cJm9nf+/sSWjZmRJ9pLexCEaJCEOYOndEs0Jb6Ya/wBRBTDXWMkPSwAAAABJRU5ErkJggg==" alt="" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition-delay:500ms"/><noscript><picture><source srcset="/static/6fbbc005662821ae7cc14e2ccb765c40/4148e/wp.png 1x" /><img loading="lazy" width="150" height="150" srcset="/static/6fbbc005662821ae7cc14e2ccb765c40/4148e/wp.png 1x" src="/static/6fbbc005662821ae7cc14e2ccb765c40/4148e/wp.png" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div><div><h2>Membangun blog dengan React, Wordpress + Gatsby.js</h2></div><div class="alert"><div class="new">Baru!</div></div></div></a><a href="/migrasi/"><div class="each"><div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden;display:inline-block;width:150px;height:150px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADFUlEQVQ4y3VUa0tUURQ9IwlZWBT1F/oQ1JfoB0QR2Yzz8FEiSA8tkyihcR7OOBNmUBAUZg9r7M5oU01qYf6TKKLUUKSIiF4fQppRb2uds+90tbywOOfus/c6+3W2itTmFL+Yf0SFvUMV3PeEnlZGfNmGLp+VB2aAErAIzAIFnDV3Bx5VUffC4UxFtHZYczhcioK2fVeN0Jfzw+hVMlSwLzW+sNN1YzbOgZydqhvVMlxoQ+cdiJuUKnN4jGe1I6pVyLp82b54IG+n68dp8A24BVkNbt4N7ML+IGTXgc/punE7EXgMvWy/i1SVwyQZb477H1IpF/fnN0gYO0BAr4PwfidlIFsHnTtIk01i7Ad0+N6MR8LM+kHgkKVE5gPJG8qSwYIGvYdsGmdHxYkO/Bd5BlmLJksEn1QyZxJmThRTzCHJwt4HS0AJWOQ+BllPaJQXXzG61mtw0HYOHlfTkwbeAMEPKG/EvzcJBRgvS3W52oJlqTYJ+T+LlFC3aEizp3hDnpXDek1unO42oRVdJH9XryGlx6w+vaZuIsgCWZMkmOkJFVzhWq0xnUtNsvQ/UnqlAS+jsrJAOJsigc6P5PCe5PBEfG1ShvyTKZL1K/Bdzn4rUVwAyZg0bEZIj68iXZL/lwh1G843AVsIeHhAeIoknCURhPuBk31HJml0X0iPuUhLzBnWeeAscBo4B9l62O0VZ3TIhV5TlJtCEuttmFiLdJG5Y0VNQ1vFi/XP2OQpKewk26ZZ2D8hwdulqaNu0shK0iJyvpDUhUSbmEK+55tnoysoVvGhi+C28y5BElntKavPaqZMYzu5vsyhAb2PCH+rY9zEh84cYd/pIo33NeqcDjktBXwByRnHc7YMvcXaruRBO8OhnzeZxGdvYAptFqN28WBQuT56RrKUiUwPxM6aQY9yhqMoDTDhRsma43tFEfbA0ELydfiQhdkZvETyOPzPTCxvjEctxmDM7m2ckEFg/WLz80VRJhX+UA5Tc+Q8K8Y2PcU410IUqhrKbTB6DryVIcG3PcXWwFkHiqMLcP7QXY/jELn+AGQ/wYBDhZB/AAAAAElFTkSuQmCC" alt="" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition-delay:500ms"/><noscript><picture><source srcset="/static/b7637c262ad964cf2f70abbbfc9e1f93/4148e/gatsby.png 1x,
/static/b7637c262ad964cf2f70abbbfc9e1f93/de03e/gatsby.png 1.5x,
/static/b7637c262ad964cf2f70abbbfc9e1f93/1e9e2/gatsby.png 2x" /><img loading="lazy" width="150" height="150" srcset="/static/b7637c262ad964cf2f70abbbfc9e1f93/4148e/gatsby.png 1x,
/static/b7637c262ad964cf2f70abbbfc9e1f93/de03e/gatsby.png 1.5x,
/static/b7637c262ad964cf2f70abbbfc9e1f93/1e9e2/gatsby.png 2x" src="/static/b7637c262ad964cf2f70abbbfc9e1f93/4148e/gatsby.png" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div><div><h2>Migrasi dari Blogger ke Gatsby.js</h2></div><div class="alert"><div class="new">Baru!</div></div></div></a><a href="/lock-file/"><div class="each"><div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden;display:inline-block;width:150px;height:150px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAACbElEQVQ4y+2V30tTYRjH90cECVpZRhdunf208sfWZjnn3NnOjOgiugkCqYusbqIuI+hGKiSQMiQQIjChbnMXQj+uEmphntTSSmc4z9kqzUz37Xmfs01HaiO87OLh7Ox9n8/7fL/P83JM+kgE2up4F/6n0LNPk5592awwaf+Bhsly/reu5tbkggbouX25dXUTKtTUwgP0Yrs8OyxzaOrqd6Oq5NuV/4sGLnyMcDCMkhcmIhxfR8NY/Kzg+/tIHmraSE5qJIyZIRkX22rQdroaibhMYAVPev04eWI/omEXLl+ohfqiGd/GDOi6HmqqjDQBp9+E4HbbYXdYkSSpg7EA9koSJKuEpkYntpRU4sypA5j7EOHqNwSmGChTogN1dTZOunPDi62lleju8AF6Cx501SM+0MTytb9JTmeBjX4HamtsnPS45zC2lZtxtKUKsb4G/JpUsEQhGqUXA/xCwIDfybKFh6Lqs63VKCPozt0WBg888uPHRFby2mNiPFMUiXiIKnTC47Fj8lWIOyqk93YfwvFj+xjqdFkx2B/A3HjkT+AseSdGQszXPG1Ik8wAeegmD4V8IVt9HgSSUWAmiutXPSgpM6Pj2kEsJ6IGUDQgN7DilP6HDexbT6ePfZJsEsl2MOwcjY+rysrNGH4WxKXzNdykrpteLE0phRUK4HwWaLNLbP6OXRZU7LFwQiah4N4tX36tvMKC0u1mHFFcGH/ZjPTYGpI18u8n3Qpxeme7lyXF+vzsnbhqi58UDD0N4i4d0H7Fg/u36zH12vB2/abQgtiwTBVlyBdxO1buMa1RU4S8zHSUxyY9asDE5+Q3DE1/m6OVCiYAAAAASUVORK5CYII=" alt="" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition-delay:500ms"/><noscript><picture><source srcset="/static/958cb5fcf40d0196ffc68166b4dc1522/4148e/js.png 1x" /><img loading="lazy" width="150" height="150" srcset="/static/958cb5fcf40d0196ffc68166b4dc1522/4148e/js.png 1x" src="/static/958cb5fcf40d0196ffc68166b4dc1522/4148e/js.png" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div><div><h2>Kegunaan dan Pentingnya .lock File di Dalam Project Kita</h2></div></div></a></section></section></div></main><footer class="footer container"><a href="/sanggahan" target="_blank" rel="noopener noreferrer">Sanggahan</a><a href="/kebijakan" target="_blank" rel="noopener noreferrer">Kebijakan</a><a href="/ketentuan" target="_blank" rel="noopener noreferrer">Ketentuan</a><a href="/rss.xml" target="_blank" rel="noopener noreferrer">RSS</a></footer></div></div><script>
  
  
  if(true) {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  }
  if (typeof ga === "function") {
    ga('create', 'UA-109324370-3', 'auto', {});
      
      
      
      }
      </script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";window.webpackCompilationHash="a11a02f61ad702c7301a";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-97783c6483f0838d79ce.js"],"component---src-templates-page-js":["/component---src-templates-page-js-f81cf525bb2dc0aebadf.js"],"component---src-templates-post-js":["/component---src-templates-post-js-da12366fb4882aeabfbb.js"],"component---src-templates-tag-js":["/component---src-templates-tag-js-bb8111d59bcaa25b0f51.js"],"component---src-templates-category-js":["/component---src-templates-category-js-283143cfa3425aa3f4f4.js"],"component---src-pages-404-js":["/component---src-pages-404-js-d37d20a5a05bd2a2c14d.js"],"component---src-pages-blog-js":["/component---src-pages-blog-js-d0bda114f265a345b5f9.js"],"component---src-pages-categories-js":["/component---src-pages-categories-js-b5fa235bee93722ef9c4.js"],"component---src-pages-contact-js":["/component---src-pages-contact-js-b1894a0cf2297079573d.js"],"component---src-pages-index-js":["/component---src-pages-index-js-65c365a4e3dad7797426.js"],"component---src-pages-newsletter-js":["/component---src-pages-newsletter-js-beadb68264dfa75983a3.js"],"component---src-pages-tags-js":["/component---src-pages-tags-js-645861d2dc517275afe3.js"]};/*]]>*/</script><script src="/webpack-runtime-2d4445d8254cbafc6796.js" async=""></script><script src="/styles-662643f5ec3f79a042a2.js" async=""></script><script src="/1-254e07fed6e5c97339b6.js" async=""></script><script src="/2-2db29a823bec74b30d25.js" async=""></script><script src="/app-97783c6483f0838d79ce.js" async=""></script><script src="/component---src-pages-index-js-65c365a4e3dad7797426.js" async=""></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Netlify-Test -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-3673321200128656"
     data-ad-slot="4217400272"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></body></html>