-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path404.html
122 lines (117 loc) · 36.1 KB
/
404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!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 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:112.5%/1.78 'Merriweather','Georgia',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.9);font-family:'Merriweather','Georgia',serif;font-weight:300;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.78rem;}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.78rem;color:inherit;font-family:'Open Sans',sans-serif;font-weight:700;text-rendering:optimizeLegibility;font-size:2.2974rem;line-height:2.67rem;letter-spacing:-2px;}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.78rem;color:inherit;font-family:'Open Sans',sans-serif;font-weight:700;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.78rem;color:inherit;font-family:'Open Sans',sans-serif;font-weight:700;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.78rem;color:inherit;font-family:'Open Sans',sans-serif;font-weight:700;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.78rem;color:inherit;font-family:'Open Sans',sans-serif;font-weight:700;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.78rem;color:inherit;font-family:'Open Sans',sans-serif;font-weight:700;text-rendering:optimizeLegibility;font-size:0.81225rem;line-height:1.1;font-style:italic;}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.78rem;}ul{margin-left:1.78rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.78rem;list-style-position:outside;list-style-image:none;list-style:disc;}ol{margin-left:1.78rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.78rem;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.78rem;}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.78rem;}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.78rem;}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.78rem;}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.78rem;font-size:0.85rem;line-height:1.78rem;}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.78rem;font-size:1rem;line-height:1.78rem;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.78rem;}blockquote{margin-left:0;margin-right:1.78rem;margin-top:0;padding-bottom:0;padding-left:1.44625rem;padding-right:0;padding-top:0;margin-bottom:1.78rem;font-size:1.1487rem;line-height:1.78rem;color:hsla(0,0%,0%,0.59);font-style:italic;border-left:0.33375rem solid hsla(0,0%,0%,0.2);}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.78rem;}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.78rem;}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.78rem;}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.78rem - 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.78rem;}b{font-weight:700;}strong{font-weight:700;}dt{font-weight:700;}th{font-weight:700;}li{margin-bottom:calc(1.78rem / 2);}ol li{padding-left:0;}ul li{padding-left:0;}li > ol{margin-left:1.78rem;margin-bottom:calc(1.78rem / 2);margin-top:calc(1.78rem / 2);}li > ul{margin-left:1.78rem;margin-bottom:calc(1.78rem / 2);margin-top:calc(1.78rem / 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.78rem / 2);}code{font-size:0.85rem;line-height:1.78rem;}kbd{font-size:0.85rem;line-height:1.78rem;}samp{font-size:0.85rem;line-height:1.78rem;}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:1.18667rem;padding-right:1.18667rem;padding-top:0.89rem;padding-bottom:calc(0.89rem - 1px);}th:first-child,td:first-child{padding-left:0;}th:last-child,td:last-child{padding-right:0;}a{color:#f92300;text-decoration:none;}a:hover,a:active{text-decoration:underline;}blockquote > :last-child{margin-bottom:0;}blockquote cite{font-size:1rem;line-height:1.78rem;color:hsla(0,0%,0%,0.9);font-weight:300;}blockquote cite:before{content:"— ";}ul,ol{margin-left:0;}@media only screen and (max-width:480px){ul,ol{margin-left:1.78rem;}blockquote{margin-left:-1.335rem;margin-right:0;padding-left:1.00125rem;}}@media only screen and (max-width:768px){h1{font-size:2rem;line-height:2.67rem;}}h1,h2,h3,h4,h5,h6{margin-top:3.56rem;}</style><style data-href="/styles.4fc0c6a7bac73402cc88.css">code[class*=language-],pre[class*=language-]{font-family:Fira Code,Consolas,Menlo,Monaco,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Courier New,Courier,monospace!important;font-size:14px;line-height:1.375;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;background:#282c34;color:#c0c5ce;margin:30px 0!important;border-radius:5px}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#a7adba}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#65737e}.token.namespace{opacity:.7}.token.boolean,.token.number,.token.operator{color:#f99157}.token.property{color:#fac863}.token.tag{color:#69c}.token.string,.token.symbol{color:#99c794}.token.selector{color:#c594c5}.token.attr-name{color:#f99157}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#5fb3b3}.token.attr-value,.token.control,.token.directive,.token.keyword,.token.unit{color:#b294bb}.token.atrule,.token.regex,.token.statement{color:#5fb3b3}.token.placeholder,.token.variable{color:#69c}.token.operator,.token.punctuation{color:#5fb3b3}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #fff;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.class-name,.token.constant{color:#f99157}.token.important{color:#c66}.token.entity{cursor:help}.token.function{color:#69c}pre>code.highlight{outline:.4em solid #c66;outline-offset:.4em}.gatsby-highlight-code-line{display:block;background-color:#33424c}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}</style><meta name="generator" content="Gatsby 2.18.7"/><title data-react-helmet="true">ReactJunkie - Yusinto Ngadiman's blog</title><meta data-react-helmet="true" name="description" content="Yusinto Ngadiman's blog. Read writing from Yusinto Ngadiman on reactjunkie.com. Frontend Engineer @ LaunchDarkly. Book addict and tea lover. Passionate about react graphql and making things simple and fast."/><meta data-react-helmet="true" name="keywords" content="yusinto,ngadiman,blog,yus,react,junkie,reactjunkie,graphql,react-site-nav,ld-redux,universal-hot-reload,relay-compiler-plus"/><style data-styled="ezsAMr ghdcXA erhChb cfwSqP hkNmni dbPSGq hyqSOV jGrPJo capmkH brEogU cuBgSI bowALp rJxOh eYwYMg gzBmlV gONhaT egdjRx bgkgSr gDiFQm fJaiXJ jeLeWc eofctu bAFeAv exlyhV fmZARX hWzeXS fyTJKz diEaRN dQtlOb fcCjjw" data-styled-version="4.4.1">
/* sc-component-id: svg__StyledSvg-lxgmgr-0 */
.dbPSGq{padding-top:0px;}
/* sc-component-id: dateReadTime__DateReadMinutes-sc-1xy9u8l-0 */
.gzBmlV{font-size:12px;opacity:0.75;} @media(min-width:690px){.gzBmlV{font-size:11px;}}
/* sc-component-id: dateReadTime__MidDot-sc-1xy9u8l-1 */
.gONhaT{padding:0 7px;vertical-align:middle;}
/* sc-component-id: blog__RootDiv-aef39i-0 */
.hyqSOV{height:100%;width:100%;} .hyqSOV img{margin-bottom:0;}
/* sc-component-id: blog__ListContainer-aef39i-1 */
.egdjRx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
/* sc-component-id: blog__List-aef39i-2 */
.bgkgSr{color:lightslategray;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;list-style-type:none;margin:0;padding:10px 8px 0 15px;}
/* sc-component-id: blog__ListItemContent-aef39i-3 */
.gDiFQm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;} .gDiFQm:hover{opacity:0.7;}
/* sc-component-id: blog__LisItemHeadingText-aef39i-4 */
.fJaiXJ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;font-size:10px;margin-left:5px;color:#6772e5;}
/* sc-component-id: blog__ListItemHeading-aef39i-5 */
.jeLeWc{margin:0;font-size:13px;font-weight:600;}
/* sc-component-id: blog__Latest-aef39i-6 */
.capmkH{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding:20px 20px;background:white;} .capmkH:hover{opacity:0.7;}
/* sc-component-id: blog__StyledLatestImage-aef39i-7 */
.brEogU{margin-top:2px;width:24px;}
/* sc-component-id: blog__LatestText-aef39i-8 */
.cuBgSI{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin-left:6px;}
/* sc-component-id: blog__LatestHeading-aef39i-9 */
.bowALp{font-size:16px;font-weight:600;color:#6772e5;}
/* sc-component-id: blog__BlogTitle-aef39i-10 */
.rJxOh{font-weight:bold;opacity:0.7;font-size:13px;}
/* sc-component-id: blog__BlogExcerpt-aef39i-11 */
.eYwYMg{font-size:12px;opacity:0.8;}
/* sc-component-id: blog__StyledLink-aef39i-12 */
.jGrPJo{color:black;}
/* sc-component-id: openSource__List-sc-41mxv7-0 */
.eofctu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:10px;margin-left:30px;} .eofctu a{color:black;}
/* sc-component-id: openSource__ListItem-sc-41mxv7-1 */
.bAFeAv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin:5px 5px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
/* sc-component-id: openSource__StyledLink-sc-41mxv7-2 */
.exlyhV{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;} .exlyhV:hover{opacity:0.7;}
/* sc-component-id: openSource__RepoContainer-sc-41mxv7-3 */
.fmZARX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
/* sc-component-id: openSource__Repo-sc-41mxv7-4 */
.fyTJKz{margin:0;margin-right:10px;color:#6772e5;font-size:14px;line-height:22px;font-weight:600;-webkit-letter-spacing:.025em;-moz-letter-spacing:.025em;-ms-letter-spacing:.025em;letter-spacing:.025em;}
/* sc-component-id: openSource__Description-sc-41mxv7-5 */
.dQtlOb{font-size:13px;opacity:0.7;}
/* sc-component-id: openSource__StarContainer-sc-41mxv7-6 */
.hWzeXS{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
/* sc-component-id: openSource__Count-sc-41mxv7-7 */
.diEaRN{color:black;font-style:italic;font-size:14px;opacity:0.6;margin:0;margin-left:4px;padding:0;vertical-align:top;}
/* sc-component-id: header__RootDiv-sc-31ozxh-0 */
.ezsAMr{position:fixed;top:0;width:100%;background:#f6f9fc;z-index:2;}
/* sc-component-id: header__Header-sc-31ozxh-1 */
.ghdcXA{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:50px;}
/* sc-component-id: header__Logo-sc-31ozxh-2 */
.erhChb{margin:0;margin-left:10px;font-size:25px;font-weight:bold;} @media(min-width:375px){.erhChb{font-size:32px;}}
/* sc-component-id: header__SocialLinks-sc-31ozxh-3 */
.cfwSqP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:5px;} @media(min-width:480px){.cfwSqP{margin-right:10px;}}
/* sc-component-id: header__SocialLink-sc-31ozxh-4 */
.hkNmni{width:18px;margin:8px 10px;} @media(min-width:375px){.hkNmni{width:20px;margin:10px;}} @media(min-width:480px){.hkNmni{margin:10px 13px;}}
/* sc-component-id: sc-global-4206527342 */
html{font-family:sans-serif;} h1{margin-top:50px;} h2,h3,h4,h5{margin-top:30px;margin-bottom:12px;} body{margin:0;} a:hover{-webkit-text-decoration:none !important;text-decoration:none !important;opacity:0.7;} ul,ol{margin-left:1.78rem;} .gatsby-highlight-code-line{background-color:#14161a;display:block;margin-left:-0.45em;padding-left:0.2em;border-left:0.2em solid yellowgreen;} .gatsby-highlight pre span.line-numbers-rows{width:5% !important;} .gatsby-highlight pre span.line-numbers-rows span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} .gatsby-highlight{border-radius:0.3em;overflow:auto;margin-bottom:20px;} .gatsby-highlight pre[class*="language-"]{margin:0 !important;padding:0;overflow:initial;float:left;min-width:100%;} .gatsby-highlight pre[class*="language-"].line-numbers{padding-left:2.8em;} .embedVideoIframe{margin-bottom:0;} #markdownImage{border:1px solid #2d2d2d;box-shadow:6px 7px 5px -1px rgba(0,0,0,0.11);border-radius:7px;}
/* sc-component-id: layout__RootDiv-ii2kc2-0 */
.fcCjjw{margin:0 auto;width:100%;padding:60px 0;} @media(min-width:768px){.fcCjjw{padding:95px 0;}}</style><link rel="icon" href="/icons/icon-48x48.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#663399"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=b09295dcce5c65c5a6f21bd5ff23a2a2"/><link href="//fonts.googleapis.com/css?family=Open+Sans:700|Merriweather:300,300i,700,700i" rel="stylesheet" type="text/css"/><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 - 200)
}), 0)
}
}
})
</script><link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/><link as="script" rel="preload" href="/webpack-runtime-8529ed5fa36170e46c51.js"/><link as="script" rel="preload" href="/styles-ac1b1809c08a4e0d1f6b.js"/><link as="script" rel="preload" href="/app-f40e687bf000ee01ed1a.js"/><link as="script" rel="preload" href="/commons-53c1136d0d3aec27babc.js"/><link as="script" rel="preload" href="/component---src-pages-404-js-b136bc5af85b91b250c6.js"/><link as="fetch" rel="preload" href="/page-data/404.html/page-data.json" crossorigin="anonymous"/></head><body><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"><div class="header__RootDiv-sc-31ozxh-0 ezsAMr"><div class="header__Header-sc-31ozxh-1 ghdcXA"><h1 class="header__Logo-sc-31ozxh-2 erhChb"><a href="/">ReactJunkie</a></h1><div class="header__SocialLinks-sc-31ozxh-3 cfwSqP"><span class="header__SocialLink-sc-31ozxh-4 hkNmni"><a href="https://twitter.com/yusinto" target="_blank" rel="noopener noreferrer"><span class="svg__StyledSvg-lxgmgr-0 dbPSGq"><svg viewBox="0 0 1024 1024"><title>twitter</title><path class="path1" d="M886.579 319.795c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.080 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z"></path></svg></span></a></span><span class="header__SocialLink-sc-31ozxh-4 hkNmni"><a href="https://github.com/yusinto" target="_blank" rel="noopener noreferrer"><span class="svg__StyledSvg-lxgmgr-0 dbPSGq"><svg viewBox="0 0 1024 1024"><title>github</title><path class="path1" d="M674.816 579.021c-36.762 0-66.56 41.318-66.56 92.109 0 50.893 29.798 92.211 66.56 92.211s66.56-41.318 66.56-92.211c-0.051-50.79-29.798-92.109-66.56-92.109zM906.547 339.251c7.629-18.688 7.936-124.877-32.512-226.611 0 0-92.723 10.189-233.011 106.496-29.44-8.192-79.258-12.186-128.973-12.186-49.818 0-99.584 3.994-129.024 12.186-140.339-96.307-233.062-106.496-233.062-106.496-40.397 101.734-39.987 207.923-32.461 226.611-47.514 51.61-76.544 113.613-76.544 198.195 0 367.923 305.306 373.811 382.31 373.811 17.51 0 52.122 0.102 88.781 0.102 36.608 0 71.27-0.102 88.678-0.102 77.107 0 382.31-5.888 382.31-373.811 0-84.582-28.979-146.586-76.493-198.195zM513.434 866.048h-2.867c-193.075 0-343.501-22.989-343.501-210.688 0-45.005 15.872-86.682 53.606-121.293 62.822-57.702 169.216-27.187 289.894-27.187 0.512 0 1.024 0 1.485 0 0.512 0 0.922 0 1.382 0 120.678 0 227.123-30.515 289.997 27.187 37.632 34.611 53.504 76.288 53.504 121.293 0 187.699-150.374 210.688-343.501 210.688zM349.235 579.021c-36.762 0-66.56 41.318-66.56 92.109 0 50.893 29.798 92.211 66.56 92.211 36.813 0 66.611-41.318 66.611-92.211 0-50.79-29.798-92.109-66.611-92.109z"></path></svg></span></a></span><span class="header__SocialLink-sc-31ozxh-4 hkNmni"><a href="mailto:[email protected]"><span class="svg__StyledSvg-lxgmgr-0 dbPSGq"><svg viewBox="0 0 1024 1024"><title>mail</title><path class="path1" d="M80.589 270.643c24.986 13.414 371.098 199.373 384 206.285s29.594 10.189 46.387 10.189c16.794 0 33.485-3.277 46.387-10.189s359.014-192.87 384-206.285c25.037-13.466 48.691-65.843 2.765-65.843h-866.253c-45.926 0-22.272 52.378 2.714 65.843zM952.986 383.437c-28.416 14.797-378.214 197.069-395.622 206.182s-29.594 10.189-46.387 10.189-28.979-1.075-46.387-10.189-365.21-191.437-393.626-206.234c-19.968-10.445-19.763 1.792-19.763 11.213s0 373.402 0 373.402c0 21.504 28.979 51.2 51.2 51.2h819.2c22.221 0 51.2-29.696 51.2-51.2 0 0 0-363.93 0-373.35s0.205-21.658-19.814-11.213z"></path></svg></span></a></span><span class="header__SocialLink-sc-31ozxh-4 hkNmni"><a href="https://www.linkedin.com/in/yusinto" target="_blank" rel="noopener noreferrer"><span class="svg__StyledSvg-lxgmgr-0 dbPSGq"><svg viewBox="0 0 1024 1024"><title>linkedin</title><path class="path1" d="M256 153.6c0 54.374-36.352 101.171-102.451 101.171-62.208 0-102.349-44.134-102.349-98.509 0-55.808 38.912-105.062 102.4-105.062s101.171 46.592 102.4 102.4zM51.2 972.8v-665.6h204.8v665.6h-204.8z"></path><path class="path2" d="M358.4 534.733c0-79.104-2.611-145.203-5.222-202.291h184.013l9.114 88.218h3.891c25.907-41.523 89.395-102.4 195.686-102.4 129.638 0 226.918 86.784 226.918 273.51v381.030h-204.8v-351.283c0-81.613-31.078-143.872-102.4-143.872-54.374 0-81.613 44.032-95.898 80.333-5.222 13.005-6.502 31.13-6.502 49.306v365.517h-204.8v-438.067z"></path></svg></span></a></span></div></div><nav><div class="src__GridContainer-sc-178mgjs-0 gALdtd" font-size="14" color="#fff"><div class="src__GridItem-sc-178mgjs-2 dStQwZ" color="#fff">Blog</div><div class="src__GridItem-sc-178mgjs-2 jIxMuz" color="#fff">Open Source</div><a class="src__GridItemLink-sc-178mgjs-1 pgDrI" href="/about" color="#fff">About</a><div class="src__ContentRow-sc-178mgjs-3 cSvRjr"><div class="src__Arrow-sc-178mgjs-5 lbXvOc" display="none"></div><div class="src__MovingDiv-sc-178mgjs-4 bmjBmW" display="none" color="#323232"><div class="src__ContentGroupContainer-sc-178mgjs-6 gYajhe"><div class="blog__RootDiv-aef39i-0 hyqSOV"><a class="blog__StyledLink-aef39i-12 jGrPJo" href="/covid-and-i"><div class="blog__Latest-aef39i-6 capmkH"><img src="/static/blog-icon-b2517c3b1f98d8bf487ee4d15e740df8.png" alt="latest" class="blog__StyledLatestImage-aef39i-7 brEogU"/><div class="blog__LatestText-aef39i-8 cuBgSI"><div class="blog__LatestHeading-aef39i-9 bowALp">Latest</div><div class="blog__BlogTitle-aef39i-10 rJxOh">Covid and I</div><div class="blog__BlogExcerpt-aef39i-11 eYwYMg">No I didn't get infected but my mother in law did. My wife's mum (Mrs Lim), in Indonesia started coughing
and then three days later, Mr Lim…</div><div class="dateReadTime__DateReadMinutes-sc-1xy9u8l-0 gzBmlV">March 20, 2021<span class="dateReadTime__MidDot-sc-1xy9u8l-1 gONhaT">·</span>2<!-- --> min read</div></div></div></a><div class="blog__ListContainer-aef39i-1 egdjRx"><ul class="blog__List-aef39i-2 bgkgSr"><li><a href="/js-debugging-tips"><div class="blog__ListItemContent-aef39i-3 gDiFQm"><div class="blog__LisItemHeadingText-aef39i-4 fJaiXJ"><div class="blog__ListItemHeading-aef39i-5 jeLeWc">Javascript debugging tips</div><div class="dateReadTime__DateReadMinutes-sc-1xy9u8l-0 gzBmlV">September 11, 2020<span class="dateReadTime__MidDot-sc-1xy9u8l-1 gONhaT">·</span>1<!-- --> min read</div></div></div></a></li><li><a href="/automatically-import-react"><div class="blog__ListItemContent-aef39i-3 gDiFQm"><div class="blog__LisItemHeadingText-aef39i-4 fJaiXJ"><div class="blog__ListItemHeading-aef39i-5 jeLeWc">Automatically import react</div><div class="dateReadTime__DateReadMinutes-sc-1xy9u8l-0 gzBmlV">August 20, 2020<span class="dateReadTime__MidDot-sc-1xy9u8l-1 gONhaT">·</span>1<!-- --> min read</div></div></div></a></li><li><a href="/css-in-js-storybook-mdx"><div class="blog__ListItemContent-aef39i-3 gDiFQm"><div class="blog__LisItemHeadingText-aef39i-4 fJaiXJ"><div class="blog__ListItemHeading-aef39i-5 jeLeWc">Using css in js with storybook and mdx</div><div class="dateReadTime__DateReadMinutes-sc-1xy9u8l-0 gzBmlV">May 20, 2020<span class="dateReadTime__MidDot-sc-1xy9u8l-1 gONhaT">·</span>1<!-- --> min read</div></div></div></a></li><li><a href="/"><div class="blog__ListItemContent-aef39i-3 gDiFQm"><div class="blog__LisItemHeadingText-aef39i-4 fJaiXJ"><div class="blog__ListItemHeading-aef39i-5 jeLeWc">All Posts</div></div></div></a></li></ul></div></div></div><div class="src__ContentGroupContainer-sc-178mgjs-6 gYajhe"><ul class="openSource__List-sc-41mxv7-0 eofctu"><li class="openSource__ListItem-sc-41mxv7-1 bAFeAv"><a href="https://github.com/yusinto/react-site-nav" target="_blank" rel="noopener noreferrer" class="openSource__StyledLink-sc-41mxv7-2 exlyhV"><div class="openSource__RepoContainer-sc-41mxv7-3 fmZARX"><div class="openSource__StarContainer-sc-41mxv7-6 hWzeXS"><h2 class="openSource__Repo-sc-41mxv7-4 fyTJKz">react-site-nav</h2><span class="svg__StyledSvg-lxgmgr-0 dbPSGq"><svg viewBox="0 0 576 512" fill="grey" width="12"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg></span><span class="openSource__Count-sc-41mxv7-7 diEaRN">117</span></div><div class="openSource__Description-sc-41mxv7-5 dQtlOb">A kick ass site menu powered by styled components inspired by Stripe</div></div></a></li><li class="openSource__ListItem-sc-41mxv7-1 bAFeAv"><a href="https://github.com/yusinto/relay-compiler-plus" target="_blank" rel="noopener noreferrer" class="openSource__StyledLink-sc-41mxv7-2 exlyhV"><div class="openSource__RepoContainer-sc-41mxv7-3 fmZARX"><div class="openSource__StarContainer-sc-41mxv7-6 hWzeXS"><h2 class="openSource__Repo-sc-41mxv7-4 fyTJKz">relay-compiler-plus</h2><span class="svg__StyledSvg-lxgmgr-0 dbPSGq"><svg viewBox="0 0 576 512" fill="grey" width="12"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg></span><span class="openSource__Count-sc-41mxv7-7 diEaRN">59</span></div><div class="openSource__Description-sc-41mxv7-5 dQtlOb">Custom relay compiler which supports persisted queries</div></div></a></li><li class="openSource__ListItem-sc-41mxv7-1 bAFeAv"><a href="https://github.com/yusinto/universal-hot-reload" target="_blank" rel="noopener noreferrer" class="openSource__StyledLink-sc-41mxv7-2 exlyhV"><div class="openSource__RepoContainer-sc-41mxv7-3 fmZARX"><div class="openSource__StarContainer-sc-41mxv7-6 hWzeXS"><h2 class="openSource__Repo-sc-41mxv7-4 fyTJKz">universal-hot-reload</h2><span class="svg__StyledSvg-lxgmgr-0 dbPSGq"><svg viewBox="0 0 576 512" fill="grey" width="12"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg></span><span class="openSource__Count-sc-41mxv7-7 diEaRN">52</span></div><div class="openSource__Description-sc-41mxv7-5 dQtlOb">Hot reload client and server webpack bundles for the ultimate development experience</div></div></a></li><li class="openSource__ListItem-sc-41mxv7-1 bAFeAv"><a href="https://github.com/yusinto/ld-react" target="_blank" rel="noopener noreferrer" class="openSource__StyledLink-sc-41mxv7-2 exlyhV"><div class="openSource__RepoContainer-sc-41mxv7-3 fmZARX"><div class="openSource__StarContainer-sc-41mxv7-6 hWzeXS"><h2 class="openSource__Repo-sc-41mxv7-4 fyTJKz">ld-react</h2><span class="svg__StyledSvg-lxgmgr-0 dbPSGq"><svg viewBox="0 0 576 512" fill="grey" width="12"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg></span><span class="openSource__Count-sc-41mxv7-7 diEaRN">20</span></div><div class="openSource__Description-sc-41mxv7-5 dQtlOb">A library to integrate launch darkly with react</div></div></a></li><li class="openSource__ListItem-sc-41mxv7-1 bAFeAv"><a href="https://github.com/yusinto/" target="_blank" rel="noopener noreferrer" class="openSource__StyledLink-sc-41mxv7-2 exlyhV"><div class="openSource__RepoContainer-sc-41mxv7-3 fmZARX"><div class="openSource__StarContainer-sc-41mxv7-6 hWzeXS"><h2 class="openSource__Repo-sc-41mxv7-4 fyTJKz">All Repos</h2></div></div></a></li></ul></div><div class="src__ContentGroupContainer-sc-178mgjs-6 gYajhe"></div></div></div></div></nav></div><div class="layout__RootDiv-ii2kc2-0 fcCjjw"><h1>NOT FOUND</h1><p>You just hit a route that doesn't exist... the sadness.</p></div></div></div><script>
function gaOptout(){document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/',window[disableStr]=!0}var gaProperty='UA-75763786-1',disableStr='ga-disable-'+gaProperty;document.cookie.indexOf(disableStr+'=true')>-1&&(window[disableStr]=!0);
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-75763786-1', 'auto', {});
ga('set', 'anonymizeIp', true);
}</script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/404.html";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-f40e687bf000ee01ed1a.js"],"component---node-modules-gatsby-plugin-offline-app-shell-js":["/component---node-modules-gatsby-plugin-offline-app-shell-js-25248a3ece515bddc791.js"],"component---src-pages-post-template-js":["/component---src-pages-post-template-js-b087d01989cd51ebb5a6.js"],"component---src-pages-tag-template-js":["/component---src-pages-tag-template-js-7c82b79c45bd9ab40554.js"],"component---src-pages-404-js":["/component---src-pages-404-js-b136bc5af85b91b250c6.js"],"component---src-pages-about-js":["/component---src-pages-about-js-cb59b4d52af4bdc8cbb6.js"],"component---src-pages-index-js":["/component---src-pages-index-js-0422b1e2bc6d1bf8f8e1.js"],"component---src-pages-tags-js":["/component---src-pages-tags-js-6496a1ef782273a64ddb.js"]};/*]]>*/</script><script src="/component---src-pages-404-js-b136bc5af85b91b250c6.js" async=""></script><script src="/commons-53c1136d0d3aec27babc.js" async=""></script><script src="/app-f40e687bf000ee01ed1a.js" async=""></script><script src="/styles-ac1b1809c08a4e0d1f6b.js" async=""></script><script src="/webpack-runtime-8529ed5fa36170e46c51.js" async=""></script></body></html>