CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">The most insightful stories about Vanillajs - Medium</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" name="title" content="The most insightful stories about Vanillajs - Medium"/><meta data-rh="true" name="description" content="Read stories about Vanillajs on Medium. Discover smart, unique perspectives on Vanillajs and the topics that matter most to you like JavaScript, Web Development, React, Front End Development, Vanilla Javascript, Javascript Tips, Programming, Js, and HTML."/><meta data-rh="true" name="robots" content="index,follow"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:site" content="@Medium"/><meta data-rh="true" name="twitter:description" content="Read stories about Vanillajs on Medium. Discover smart, unique perspectives on Vanillajs and the topics that matter most to you like JavaScript, Web Development, React, Front End Development, Vanilla Javascript, Javascript Tips, Programming, Js, and HTML."/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/1*0L5w2b6T1yEVI3_ZYUWONw.png"/><meta data-rh="true" property="og:title" content="The most insightful stories about Vanillajs - Medium"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" property="og:description" content="Read stories about Vanillajs on Medium. Discover smart, unique perspectives on Vanillajs and the topics that matter most to you like JavaScript, Web Development, React, Front End Development, Vanilla Javascript, Javascript Tips, Programming, Js, and HTML."/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/1*0L5w2b6T1yEVI3_ZYUWONw.png"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" rel="preconnect" href="https://glyph.medium.com" crossOrigin=""/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="canonical" href="https://medium.com/tag/vanillajs"/><style type="text/css" data-fela-rehydration="511" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="511" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{animation:k1 1.2s ease-in-out infinite}.cc{justify-content:center}.ci{max-width:1192px}.cj{min-width:0}.ck{margin-bottom:48px}.cl{margin-top:24px}.cm{overflow:hidden}.cq{border-radius:100px}.cr{margin-right:8px}.cs{height:38px}.ct{width:120px}.cu{flex:0 0 auto}.cv{background-color:#F2F2F2}.db{flex-direction:column}.dc{margin-bottom:16px}.dn{margin-bottom:24px}.do{height:16px}.du{width:80px}.eb{height:1px}.ec{align-items:stretch}.ed{flex-direction:row}.ee{flex-wrap:wrap}.fp{flex-grow:0}.fq{margin-bottom:32px}.fr{height:200px}.fs{width:158px}.ft{margin-bottom:8px}.fu{width:288px}.fv{width:296px}.fw{margin-bottom:56px}.fx{width:224px}.fy{margin-left:8px}.fz{color:#6B6B6B}.ga{font-size:13px}.gb{height:100%}.gt{color:#FFFFFF}.gu{fill:#FFFFFF}.gv{background:#1A8917}.gw{border-color:#1A8917}.ha:disabled{cursor:inherit !important}.hb:disabled{opacity:0.3}.hc:disabled:hover{background:#1A8917}.hd:disabled:hover{border-color:#1A8917}.he{border-radius:99em}.hf{border-width:1px}.hg{border-style:solid}.hh{box-sizing:border-box}.hi{text-decoration:none}.hj{text-align:center}.hm{margin-right:32px}.hn{position:relative}.ho{fill:#6B6B6B}.hr{background:transparent}.hs svg{margin-left:4px}.ht svg{fill:#6B6B6B}.hv{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.hw{position:absolute}.ig{margin-top:22px}.ih{overflow-x:scroll}.ii{overflow-y:hidden}.ij::-webkit-scrollbar{height:0}.ik::-webkit-scrollbar{width:0}.il::-webkit-scrollbar{background:transparent}.im{scrollbar-width:none}.in{-ms-overflow-style:none}.io::-webkit-scrollbar:horizontal{height:0}.ip{width:24px}.iq{border:1px solid #F2F2F2}.ir{padding:6px}.iz{white-space:nowrap}.ja{transition:background 300ms ease}.jc{padding:8px 16px}.jd{border:1px solid #242424}.je{right:0}.jf{bottom:12px}.jg{padding-left:42px}.jh{pointer-events:none}.ji{opacity:0}.jj{background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 1) 75%)}.jk{height:42px}.jl{margin:2px}.jm svg path{fill:#6B6B6B}.jo{left:0}.jp{padding-right:42px}.jq{background:linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 1) 75%)}.kj{font-weight:500}.kz{margin:0 8px}.la{color:rgba(255, 255, 255, 1)}.lb{fill:rgba(255, 255, 255, 1)}.lc{background:rgba(25, 25, 25, 1)}.ld{border-color:rgba(25, 25, 25, 1)}.lg:disabled{opacity:0.1}.lh:disabled:hover{background:rgba(25, 25, 25, 1)}.li:disabled:hover{border-color:rgba(25, 25, 25, 1)}.lj{height:0px}.lo{margin:40px 0}.me{margin-top:0px}.mf{box-sizing:content-box}.mg{display:grid}.mh{grid-template-columns:repeat(12, 1fr)}.mi{grid-template-rows:auto 1fr}.mt{grid-area:image}.mu{grid-area:content}.na{border-radius:2px}.nb{aspect-ratio:2}.nc{object-fit:cover}.nd{object-position:50% 50%}.ne{flex-grow:1}.nf a{position:relative}.ng a{z-index:2}.nh button{position:relative}.ni button{z-index:2}.no{height:20px}.np{width:20px}.nr{max-height:20px}.ns{text-overflow:ellipsis}.nt{display:-webkit-box}.nu{-webkit-line-clamp:1}.nv{-webkit-box-orient:vertical}.nw{word-break:break-all}.ny{padding-bottom:12px}.oe{word-break:break-word}.of a{position:static}.og a::before{content:""}.oh a::before{position:absolute}.oi a::before{z-index:1}.oj a::before{top:0}.ok a::before{left:0}.ol a::before{bottom:0}.om a::before{right:0}.on{font-weight:700}.pe{padding-top:8px}.pf{font-size:16px}.pg{max-height:40px}.ph{-webkit-line-clamp:2}.pi{height:48px}.pj{justify-content:space-between}.pk{max-width:200px}.pl{opacity:1}.pm{transition:opacity 300ms ease-out}.pn{gap:16px}.po{justify-content:flex-end}.pp{flex:0 0 0}.pr{padding:12px}.ps{margin-top:32px}.pt{flex:1 1 auto}.pu a{display:flex}.pv a{flex-direction:column}.qv{padding-top:12px}.rb{gap:4px}.ri{gap:80px 48px}.rj{grid-area:post0}.rk{grid-area:post1}.rl{grid-area:post2}.rm{grid-area:post3}.rn{grid-area:post4}.ro{grid-area:post5}.rp{grid-area:post6}.rq{grid-area:post7}.sh{fill:#242424}.si{background:0}.sj{border-color:#242424}.sl:disabled:hover{color:#242424}.sm:disabled:hover{fill:#242424}.sn:disabled:hover{border-color:#242424}.so{width:min-width}.sp{bottom:0}.sq{z-index:800}.sr{background:rgba(255,255,255,0.7)}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.gx:hover{background:#156D12}.gy:hover{border-color:#156D12}.gz:hover{cursor:pointer}.hp:hover{color:#242424}.hq:hover{fill:#242424}.hu:hover svg{fill:#242424}.hx:hover{background-color:rgba(0, 0, 0, 0.1)}.jb:hover{background-color:#F2F2F2}.jn:hover svg path{fill:#000000}.le:hover{background:#000000}.lf:hover{border-color:#242424}.nq:hover{text-decoration:underline}.pq:hover{color:#000000}.sk:hover{fill:#000000}.bd:focus-within path{fill:#242424}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.ch{margin:0 24px}.cp{justify-content:center}.da{margin:0 64px}.dl{height:48px}.dm{width:280px}.dt{margin-bottom:76px}.ea{margin-bottom:40px}.es{width:calc(100% + 48px)}.et{margin-left:-24px}.eu{margin-right:-24px}.fl{padding-left:24px}.fm{padding-right:24px}.fn{flex-basis:50%}.fo{max-width:50%}.gk{font-size:14px}.gl{line-height:20px}.gr{font-size:13px}.gs{padding:5px 12px}.hl{display:flex}.if{margin-bottom:46px}.ix{padding-right:16px}.iy{margin-right:24px}.kb{margin-top:16px}.kc{font-size:16px}.kd{line-height:24px}.ki{margin:0 24px 56px}.kw{font-size:42px}.kx{line-height:52px}.ky{letter-spacing:-0.011em}.ln{margin:0 24px 80px}.mb{font-size:24px}.mc{line-height:30px}.md{letter-spacing:-0.016em}.mr{gap:24px 0}.ms{grid-template-areas:"image image image image image image image image image image image image" "content content content content content content content content content content content content"}.mz{display:block}.nn{margin-bottom:16px}.od{flex:1 0 auto}.pa{font-size:20px}.pb{max-height:48px}.pc{-webkit-line-clamp:2}.pd{letter-spacing:0}.qe{max-height:96px}.qf{-webkit-line-clamp:4}.qo{padding-top:2px}.qp{width:100%}.qu{margin-left:24px}.ra{margin-top:20px}.rg{grid-template-columns:repeat(6, 1fr)}.rh{grid-template-areas: "post0 post0 post0 post1 post1 post1" "post2 post2 post3 post3 post4 post4" "post5 post5 post6 post6 post7 post7" }.rs{gap:32px 0}.rx{aspect-ratio:1.5}.rz{max-height:60px}.sb{aspect-ratio:2}.sg{margin-top:80px}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cd{margin:0 0 0 24px}.cw{margin:0 24px}.dd{height:32px}.de{width:200px}.dp{margin-bottom:48px}.dv{margin:0}.ef{width:calc(100% + 24px)}.eg{margin-left:-12px}.eh{margin-right:-12px}.ev{padding-left:12px}.ew{padding-right:12px}.ex{flex-basis:100%}.ey{max-width:100%}.gc{font-size:13px}.gd{line-height:20px}.gm{padding:0px 8px 1px}.hy{margin:0px}.ib{margin-bottom:38px}.is{margin-right:16px}.jr{margin-top:12px}.js{font-size:14px}.ke{margin:0 24px 48px}.kk{font-size:24px}.kl{line-height:30px}.km{letter-spacing:-0.016em}.lk{margin:0 24px 56px}.lp{font-size:20px}.lq{line-height:24px}.lr{letter-spacing:0}.mj{gap:24px 0}.mk{grid-template-areas:"image image image image image image image image image image image image" "content content content content content content content content content content content content"}.mv{display:block}.nj{margin-bottom:16px}.nz{flex:1 0 auto}.oo{max-height:48px}.op{-webkit-line-clamp:2}.pw{max-height:96px}.px{-webkit-line-clamp:4}.qg{padding-top:2px}.qh{width:100%}.qq{margin-left:24px}.qw{margin-top:20px}.rt{aspect-ratio:2}.sc{margin-top:32px}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cg{margin:0 24px}.co{justify-content:center}.cz{margin:0 64px}.dj{height:48px}.dk{width:280px}.ds{margin-bottom:76px}.dz{margin-bottom:40px}.ep{width:calc(100% + 32px)}.eq{margin-left:-16px}.er{margin-right:-16px}.fh{padding-left:16px}.fi{padding-right:16px}.fj{flex-basis:50%}.fk{max-width:50%}.gi{font-size:14px}.gj{line-height:20px}.gp{font-size:13px}.gq{padding:5px 12px}.hk{display:flex}.ie{margin-bottom:46px}.iw{margin-right:24px}.jy{margin-top:16px}.jz{font-size:16px}.ka{line-height:24px}.kh{margin:0 24px 56px}.kt{font-size:42px}.ku{line-height:52px}.kv{letter-spacing:-0.011em}.lm{margin:0 24px 80px}.ly{font-size:24px}.lz{line-height:30px}.ma{letter-spacing:-0.016em}.mp{gap:24px 0}.mq{grid-template-areas:"image image image image image image image image image image image image" "content content content content content content content content content content content content"}.my{display:block}.nm{margin-bottom:16px}.oc{flex:1 0 auto}.ow{font-size:20px}.ox{max-height:48px}.oy{-webkit-line-clamp:2}.oz{letter-spacing:0}.qc{max-height:96px}.qd{-webkit-line-clamp:4}.qm{padding-top:2px}.qn{width:100%}.qt{margin-left:24px}.qz{margin-top:20px}.re{grid-template-columns:repeat(6, 1fr)}.rf{grid-template-areas: "post0 post0 post0 post1 post1 post1" "post2 post2 post3 post3 post4 post4" "post5 post5 post6 post6 post7 post7" }.rr{gap:32px 0}.rw{aspect-ratio:1.5}.ry{max-height:60px}.sa{aspect-ratio:2}.sf{margin-top:80px}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.cf{margin:0 24px}.cn{justify-content:center}.cy{margin:0 48px}.dh{height:48px}.di{width:280px}.dr{margin-bottom:76px}.dx{margin:0}.dy{margin-bottom:40px}.el{width:calc(100% + 28px)}.em{margin-left:-14px}.eo{margin-right:-14px}.fd{padding-left:14px}.fe{padding-right:14px}.ff{flex-basis:50%}.fg{max-width:50%}.gg{font-size:13px}.gh{line-height:20px}.go{padding:0px 8px 1px}.ia{margin:0px}.id{margin-bottom:46px}.iu{padding-right:16px}.iv{margin-right:24px}.jv{margin-top:16px}.jw{font-size:16px}.jx{line-height:24px}.kg{margin:0 24px 56px}.kq{font-size:42px}.kr{line-height:52px}.ks{letter-spacing:-0.011em}.lv{font-size:24px}.lw{line-height:30px}.lx{letter-spacing:-0.016em}.mn{gap:24px 0}.mo{grid-template-areas:"image image image image image image image image image image image image" "content content content content content content content content content content content content"}.mx{display:block}.nl{margin-bottom:16px}.ob{flex:1 0 auto}.os{font-size:20px}.ot{max-height:48px}.ou{-webkit-line-clamp:2}.ov{letter-spacing:0}.qa{max-height:96px}.qb{-webkit-line-clamp:4}.qk{padding-top:2px}.ql{width:100%}.qs{margin-left:24px}.qy{margin-top:20px}.rc{grid-template-columns:repeat(2, 1fr)}.rd{grid-template-areas: "post0 post1" "post2 post3" "post4 post5" "post6 post7" }.rv{aspect-ratio:2}.se{margin-top:80px}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.ce{margin:0 0 0 24px}.cx{margin:0 24px}.df{height:32px}.dg{width:200px}.dq{margin-bottom:48px}.dw{margin:0}.ei{width:calc(100% + 24px)}.ej{margin-left:-12px}.ek{margin-right:-12px}.ez{padding-left:12px}.fa{padding-right:12px}.fb{flex-basis:100%}.fc{max-width:100%}.ge{font-size:13px}.gf{line-height:20px}.gn{padding:0px 8px 1px}.hz{margin:0px}.ic{margin-bottom:38px}.it{margin-right:16px}.jt{margin-top:12px}.ju{font-size:14px}.kf{margin:0 24px 48px}.kn{font-size:24px}.ko{line-height:30px}.kp{letter-spacing:-0.016em}.ll{margin:0 24px 56px}.ls{font-size:20px}.lt{line-height:24px}.lu{letter-spacing:0}.ml{gap:24px 0}.mm{grid-template-areas:"image image image image image image image image image image image image" "content content content content content content content content content content content content"}.mw{display:block}.nk{margin-bottom:16px}.oa{flex:1 0 auto}.oq{max-height:48px}.or{-webkit-line-clamp:2}.py{max-height:96px}.pz{-webkit-line-clamp:4}.qi{padding-top:2px}.qj{width:100%}.qr{margin-left:24px}.qx{margin-top:20px}.ru{aspect-ratio:2}.sd{margin-top:32px}</style><style type="text/css" data-fela-rehydration="511" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.nx{max-height:none}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="fz ag ga bf ak b am an ao ap aq ar as at s u w i d q gb z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Ftag%2Fvanillajs&%7Efeature=LoOpenInAppButton&%7Echannel=ShowTagPosts&source=---top_nav_layout_nav----------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="fy"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b gc gd ge gf gg gh gi gj gk gl fz"><span><button class="bf b gc gd gm ge gf gn gg gh go gp gj gq gr gl gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh bm hi hj" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b gc gd ge gf gg gh gi gj gk gl fz"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Ftag%2Fvanillajs&source=login---top_nav_layout_nav-----------------------global_nav-----------">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" rel="noopener follow" href="/?source=---top_nav_layout_nav----------------------------------"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w hk hl"><div class="hm ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" rel="noopener follow" href="/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav-----------"><div class="bf b bg z fz hn ho ab q hp hq"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="fy l">Write</div></div></a></span></div></div><div class="k j i d"><div class="hm ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" rel="noopener follow" href="/search?source=---top_nav_layout_nav----------------------------------"><div class="bf b bg z fz hn ho ab q hp hq"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="hm h k j"><div class="ab q"><p class="bf b gc gd ge gf gg gh gi gj gk gl fz"><span><button class="bf b gc gd gm ge gf gn gg gh go gp gj gq gr gl gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh bm hi hj" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b gc gd ge gf gg gh gi gj gk gl fz"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Ftag%2Fvanillajs&source=login---top_nav_layout_nav-----------------------global_nav-----------">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay hr am ab q ao hs ht hu" aria-label="user options menu" data-testid="headerUserIcon"><div class="l hn"><img alt="" class="l hh by bz ca cv" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="hv by l bz ca hw n ay hx"></div></div></button></div></div></div><div class="ab cc"><div class="hy hz ia cg ch ci cj bh"><div class="ib ic id ie if ig l hn"><div class="ab q ih ii ij ik il im in io"><div class="ip i d cu"></div><a class="bk ag bg iq bf ak b ir an ao ap aq ar as at z ab q is it iu iv fi iw ix iy iz cv cq ja jb" rel="noopener follow" href="/explore-topics?source=topic_portal---topic_nav---vanillajs-------------------------------"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24" width="24"><circle cx="12" cy="12.001" r="10.5" stroke="currentColor"></circle><path fill="currentColor" fill-rule="evenodd" d="m16.083 6.167-.147.989-.984 6.636-.036.247-.22.119-5.899 3.194-.88.476.147-.989.984-6.635.037-.248.22-.119 5.899-3.194zM9.92 11.15 9.2 15.997l4.308-2.333zm4.163 1.695-3.59-2.514L14.8 8z" clip-rule="evenodd"></path></svg><div class="fy h k">Explore topics</div></a><a class="cr ay am ao" aria-current="page" rel="noopener follow" href="/tag/vanillajs?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq jd ja jb bf b bg z bk iz">Vanillajs</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/javascript?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">JavaScript</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/web-development?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">Web Development</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/react?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">React</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/front-end-development?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">Front End Development</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/vanilla-javascript?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">Vanilla Javascript</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/javascript-tips?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">Javascript Tips</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/programming?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">Programming</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/js?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">Js</div></a><a class="cr ay am ao" rel="noopener follow" href="/tag/html?source=topic_portal---topic_nav---vanillajs-------------------------------"><div class="jc hn cv cq iq ja jb bf b bg z bk iz">HTML</div></a><div class="hw je n jf jg ab q jh ji jj jk"><button class="ay am jl ao jm jn" aria-label="next sections" tabindex="-1"><svg width="26px" height="26px" class="svgIcon-use" viewBox="0 0 19 19" style="transform:rotate(180deg)" aria-hidden="true"><path fill-rule="evenodd" d="M11.47 13.969 6.986 9.484 11.47 5l.553.492L8.03 9.484l3.993 3.993z"></path></svg></button></div><div class="hw jo n jf jp ab q jh ji jq jk"><button class="ay am jl ao jm jn" aria-label="previous sections" tabindex="-1"><svg width="26px" height="26px" class="svgIcon-use" viewBox="0 0 19 19" aria-hidden="true"><path fill-rule="evenodd" d="M11.47 13.969 6.986 9.484 11.47 5l.553.492L8.03 9.484l3.993 3.993z"></path></svg></button></div></div></div></div></div><div class="l hn"><div class="ab cc"><div class="ke kf kg kh ki ci cj bh"><div class="l hj"><h2 class="bf kj kk kl km kn ko kp kq kr ks kt ku kv kw kx ky bk">Vanillajs</h2><div class="ab cc jr js gd jt ju gf jv jw jx jy jz ka kb kc kd dn bf b fz">Topic<div class="kz l">·</div>30<!-- --> <!-- -->Followers<div class="kz l">·</div>363<!-- --> <!-- -->Stories</div><div class="l"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fsignedin%2Fsubscriptions%2Ftag%2Fvanillajs%3FfollowSource%3Dtopics_v2&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ftag%2Fvanillajs&source=------vanillajs--------------------follow_tag-----------"><button class="bf b bg z la jc lb lc ld le lf gz ha lg lh li he hf hg hh bm hi hj">Follow</button></a></span></div></div></div></div><div class="ab cc"><div class="hy hz ia cg ch ci cj bh"><div class="lj bh r"></div></div></div><div class="ab cc"><div class="lk ll kg lm ln ci cj bh"><div class="lo l"><h2 class="bf kj lp lq lr ls lt lu lv lw lx ly lz ma mb mc md bk">Recommended stories</h2></div><div class="j i d"><div class="ab db"><div class="me l"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo mp mq mr ms" role="link" data-href="https://medium.com/@avicndugu/drawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f" tabindex="0"><div class="mt"><div aria-label="Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads"><div class="mv mw mx my mz"><img alt="Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads" class="bh na nb nc nd bx" src="https://miro.medium.com/v2/resize:fit:1358/format:webp/0*wp5e7rlpYNr8cwWu.jpeg" loading="eager"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@avicndugu?source=topic_portal---recommended_stories---vanillajs---0-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="Avic Ndugu" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*kL4qnvfu98rFAiwG9wbpuA.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@avicndugu?source=topic_portal---recommended_stories---vanillajs---0-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">Avic Ndugu</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@avicndugu/drawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f?source=topic_portal---recommended_stories---vanillajs---0-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title=""><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ow ka ox oy oz pa kd pb pc pd cm ns nt nv nx bk">Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">In our first tutorial, we set up Drawflow, created a canvas, and added a simple “Hello World” node.</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Nov 18</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@avicndugu/drawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f?source=topic_portal---recommended_stories---vanillajs---0-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Ffcc2d58e5f8f&operation=register&redirect=https%3A%2F%2Favicndugu.medium.com%2Fdrawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f&source=---recommended_stories---vanillajs---0-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="ps l"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo mp mq mr ms" role="link" data-href="https://medium.com/@zeeshan.khan14/pure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a" tabindex="0"><div class="mt"><div aria-label="Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive"><div class="mv mw mx my mz"><img alt="Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive" class="bh na nb nc nd bx" src="https://miro.medium.com/v2/resize:fit:1358/format:webp/1*70aCACRIjsi-wKaYw-219A.png" loading="eager"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@zeeshan.khan14?source=topic_portal---recommended_stories---vanillajs---1-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="Zeeshan Khan" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/0*cX2ragjLRTwD_AlP." width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@zeeshan.khan14?source=topic_portal---recommended_stories---vanillajs---1-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">Zeeshan Khan</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@zeeshan.khan14/pure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a?source=topic_portal---recommended_stories---vanillajs---1-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title="Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive"><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ow ka ox oy oz pa kd pb pc pd cm ns nt nv nx bk">Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">Few months back I got pulled in to one of the big project which was running from quite a long time. In this project I had to work with…</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Jun 20</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@zeeshan.khan14/pure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a?source=topic_portal---recommended_stories---vanillajs---1-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F092be9f42c1a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40zeeshan.khan14%2Fpure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a&source=---recommended_stories---vanillajs---1-85----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="ps l"><article class=""><div class="mf l"><div class="bh gb"><div class="l"><div class="bh l"><div style="position:relative;display:flex" role="link" data-href="https://medium.com/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983" tabindex="0"><div class="bh nf ng nh ni"><div class="ab"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@whoz_?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="whoz" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*hJ8pA3LYiXGB8RMqMR2pXA.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@whoz_?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">whoz</p></a></div></div></div></div><div class="ab"><div class="l pt oe"><div class="of og oh oi oj ok ol om pu pv"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><h2 class="bf on lp lq pw px lr ls lt py pz lu os jx qa qb ov ow ka qc qd oz pa kd qe qf pd cm ns nt nv nx bk">Let’s build an analog chronograph watch with VanillaJS + HTML pt.2</h2><div class="pe"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">Continuing from the pt.1 https://medium.com/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63, in this…</h3></div></a></div><div class="h k j i d"><div class="qg qh qi qj qk ql qm qn qo qp l"><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Oct 6</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F4db16d182983&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40whoz_%2Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983&source=---recommended_stories---vanillajs---2-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span></div></div></div><div class="qq qr qs qt qu l"><div aria-label="Let’s build an analog chronograph watch with VanillaJS + HTML pt.2"><div class=""><img alt="Let’s build an analog chronograph watch with VanillaJS + HTML pt.2" class="bx na" src="https://miro.medium.com/v2/resize:fill:160:106/format:webp/0*9-PhaW_ZUjlUmTyj.png" width="80" height="53" loading="lazy"/></div></div></div></div><div class="qv"><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Oct 6</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F4db16d182983&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40whoz_%2Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983&source=---recommended_stories---vanillajs---2-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span></div></div></div><div class="lj bh r qw qx qy qz ra"></div></div></div></div></div></article></div><div class="ps l"><article class=""><div class="mf l"><div class="bh gb"><div class="l"><div class="bh l"><div style="position:relative;display:flex" role="link" data-href="https://medium.com/@sqkhor/create-an-otp-input-with-javascript-c0c9f7c610fe" tabindex="0"><div class="bh nf ng nh ni"><div class="ab"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@sqkhor?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="Shuqi Khor" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*GUcIDciU1W1t4o1_uwaZdg.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@sqkhor?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">Shuqi Khor</p></a></div></div></div></div><div class="ab"><div class="l pt oe"><div class="of og oh oi oj ok ol om pu pv"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@sqkhor/create-an-otp-input-with-javascript-c0c9f7c610fe?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><h2 class="bf on lp lq pw px lr ls lt py pz lu os jx qa qb ov ow ka qc qd oz pa kd qe qf pd cm ns nt nv nx bk">Create an OTP Input with Javascript</h2><div class="pe"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">It’s easy, you just need 6 input boxes…</h3></div></a></div><div class="h k j i d"><div class="qg qh qi qj qk ql qm qn qo qp l"><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>May 19, 2023</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@sqkhor/create-an-otp-input-with-javascript-c0c9f7c610fe?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div><div class="ab" aria-hidden="false"><div class="ab q rb"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#6B6B6B" viewBox="0 0 16 16"><path fill="#6B6B6B" d="M12.344 11.458A5.28 5.28 0 0 0 14 7.526C14 4.483 11.391 2 8.051 2S2 4.483 2 7.527c0 3.051 2.712 5.526 6.059 5.526a6.6 6.6 0 0 0 1.758-.236q.255.223.554.414c.784.51 1.626.768 2.512.768a.37.37 0 0 0 .355-.214.37.37 0 0 0-.03-.384 4.7 4.7 0 0 1-.857-1.958v.014z"></path></svg><span>1</span></div></div></div></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fc0c9f7c610fe&operation=register&redirect=https%3A%2F%2Fsqkhor.medium.com%2Fcreate-an-otp-input-with-javascript-c0c9f7c610fe&source=---recommended_stories---vanillajs---3-85----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span></div></div></div><div class="qq qr qs qt qu l"><div aria-label="Create an OTP Input with Javascript"><div class=""><img alt="Create an OTP Input with Javascript" class="bx na" src="https://miro.medium.com/v2/resize:fill:160:106/format:webp/1*SEHo1ptxyNCbtloG-SQW-w.png" width="80" height="53" loading="lazy"/></div></div></div></div><div class="qv"><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>May 19, 2023</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@sqkhor/create-an-otp-input-with-javascript-c0c9f7c610fe?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div><div class="ab" aria-hidden="false"><div class="ab q rb"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#6B6B6B" viewBox="0 0 16 16"><path fill="#6B6B6B" d="M12.344 11.458A5.28 5.28 0 0 0 14 7.526C14 4.483 11.391 2 8.051 2S2 4.483 2 7.527c0 3.051 2.712 5.526 6.059 5.526a6.6 6.6 0 0 0 1.758-.236q.255.223.554.414c.784.51 1.626.768 2.512.768a.37.37 0 0 0 .355-.214.37.37 0 0 0-.03-.384 4.7 4.7 0 0 1-.857-1.958v.014z"></path></svg><span>1</span></div></div></div></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fc0c9f7c610fe&operation=register&redirect=https%3A%2F%2Fsqkhor.medium.com%2Fcreate-an-otp-input-with-javascript-c0c9f7c610fe&source=---recommended_stories---vanillajs---3-85----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span></div></div></div><div class="lj bh r qw qx qy qz ra"></div></div></div></div></div></article></div><div class="ps l"><article class=""><div class="mf l"><div class="bh gb"><div class="l"><div class="bh l"><div style="position:relative;display:flex" role="link" data-href="https://medium.com/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63" tabindex="0"><div class="bh nf ng nh ni"><div class="ab"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@whoz_?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="whoz" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*hJ8pA3LYiXGB8RMqMR2pXA.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@whoz_?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">whoz</p></a></div></div></div></div><div class="ab"><div class="l pt oe"><div class="of og oh oi oj ok ol om pu pv"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><h2 class="bf on lp lq pw px lr ls lt py pz lu os jx qa qb ov ow ka qc qd oz pa kd qe qf pd cm ns nt nv nx bk">Let’s build an analog chronograph watch with VanillaJS + HTML pt.1</h2><div class="pe"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">In this project, we’ll be recreating a functional chronograph analog watch using just Vanilla JavaScript and HTML, with a bit of CSS for…</h3></div></a></div><div class="h k j i d"><div class="qg qh qi qj qk ql qm qn qo qp l"><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Oct 6</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fef28ce9edf63&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40whoz_%2Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63&source=---recommended_stories---vanillajs---4-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span></div></div></div><div class="qq qr qs qt qu l"><div aria-label="Let’s build an analog chronograph watch with VanillaJS + HTML pt.1"><div class=""><img alt="Let’s build an analog chronograph watch with VanillaJS + HTML pt.1" class="bx na" src="https://miro.medium.com/v2/resize:fill:160:106/format:webp/1*9wAfcUtHejo4rVDKs1fquA.png" width="80" height="53" loading="lazy"/></div></div></div></div><div class="qv"><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Oct 6</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fef28ce9edf63&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40whoz_%2Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63&source=---recommended_stories---vanillajs---4-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span></div></div></div><div class="lj bh r qw qx qy qz ra"></div></div></div></div></div></article></div></div></div><div class="h k"><div class="mg rc rd re rf rg rh ri"><div class="rj"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo rr mq rs ms" role="link" data-href="https://medium.com/@avicndugu/drawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f" tabindex="0"><div class="mt"><div aria-label="Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads"><div class="mv mw mx i d"><img alt="Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads" class="bh na rt ru rv rw rx nc nd bx" src="https://miro.medium.com/v2/resize:fit:1144/format:webp/0*wp5e7rlpYNr8cwWu.jpeg" loading="eager"/></div><div class="h k j my mz"><img alt="Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads" class="bh na rt ru rv rw rx nc nd bx" src="https://miro.medium.com/v2/resize:fit:1144/format:webp/0*wp5e7rlpYNr8cwWu.jpeg" loading="eager"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@avicndugu?source=topic_portal---recommended_stories---vanillajs---0-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="Avic Ndugu" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*kL4qnvfu98rFAiwG9wbpuA.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@avicndugu?source=topic_portal---recommended_stories---vanillajs---0-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">Avic Ndugu</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@avicndugu/drawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f?source=topic_portal---recommended_stories---vanillajs---0-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title=""><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ly lz ry oy ma mb mc rz pc md cm ns nt nv nx bk">Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">In our first tutorial, we set up Drawflow, created a canvas, and added a simple “Hello World” node.</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Nov 18</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@avicndugu/drawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f?source=topic_portal---recommended_stories---vanillajs---0-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Ffcc2d58e5f8f&operation=register&redirect=https%3A%2F%2Favicndugu.medium.com%2Fdrawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f&source=---recommended_stories---vanillajs---0-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="h k j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="rk"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo rr mq rs ms" role="link" data-href="https://medium.com/@zeeshan.khan14/pure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a" tabindex="0"><div class="mt"><div aria-label="Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive"><div class="mv mw mx i d"><img alt="Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive" class="bh na rt ru rv rw rx nc nd bx" src="https://miro.medium.com/v2/resize:fit:1144/format:webp/1*70aCACRIjsi-wKaYw-219A.png" loading="eager"/></div><div class="h k j my mz"><img alt="Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive" class="bh na rt ru rv rw rx nc nd bx" src="https://miro.medium.com/v2/resize:fit:1144/format:webp/1*70aCACRIjsi-wKaYw-219A.png" loading="eager"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@zeeshan.khan14?source=topic_portal---recommended_stories---vanillajs---1-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="Zeeshan Khan" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/0*cX2ragjLRTwD_AlP." width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@zeeshan.khan14?source=topic_portal---recommended_stories---vanillajs---1-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">Zeeshan Khan</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@zeeshan.khan14/pure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a?source=topic_portal---recommended_stories---vanillajs---1-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title="Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive"><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ly lz ry oy ma mb mc rz pc md cm ns nt nv nx bk">Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">Few months back I got pulled in to one of the big project which was running from quite a long time. In this project I had to work with…</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Jun 20</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@zeeshan.khan14/pure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a?source=topic_portal---recommended_stories---vanillajs---1-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F092be9f42c1a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40zeeshan.khan14%2Fpure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a&source=---recommended_stories---vanillajs---1-85----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="h k j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="rl"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo mp mq mr ms" role="link" data-href="https://medium.com/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983" tabindex="0"><div class="mt"><div aria-label="Let’s build an analog chronograph watch with VanillaJS + HTML pt.2"><div class="mv mw mx my mz"><img alt="Let’s build an analog chronograph watch with VanillaJS + HTML pt.2" class="bh na rt ru rv sa sb nc nd bx" src="https://miro.medium.com/v2/resize:fit:730/format:webp/0*9-PhaW_ZUjlUmTyj.png" loading="lazy"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@whoz_?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="whoz" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*hJ8pA3LYiXGB8RMqMR2pXA.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@whoz_?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">whoz</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title=""><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ow ka ox oy oz pa kd pb pc pd cm ns nt nv nx bk">Let’s build an analog chronograph watch with VanillaJS + HTML pt.2</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">Continuing from the pt.1 https://medium.com/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63, in this…</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Oct 6</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983?source=topic_portal---recommended_stories---vanillajs---2-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F4db16d182983&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40whoz_%2Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983&source=---recommended_stories---vanillajs---2-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="h k j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="rm"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo mp mq mr ms" role="link" data-href="https://medium.com/@sqkhor/create-an-otp-input-with-javascript-c0c9f7c610fe" tabindex="0"><div class="mt"><div aria-label="Create an OTP Input with Javascript"><div class="mv mw mx my mz"><img alt="Create an OTP Input with Javascript" class="bh na rt ru rv sa sb nc nd bx" src="https://miro.medium.com/v2/resize:fit:730/format:webp/1*SEHo1ptxyNCbtloG-SQW-w.png" loading="lazy"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@sqkhor?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="Shuqi Khor" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*GUcIDciU1W1t4o1_uwaZdg.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@sqkhor?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">Shuqi Khor</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@sqkhor/create-an-otp-input-with-javascript-c0c9f7c610fe?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title=""><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ow ka ox oy oz pa kd pb pc pd cm ns nt nv nx bk">Create an OTP Input with Javascript</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">It’s easy, you just need 6 input boxes…</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>May 19, 2023</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@sqkhor/create-an-otp-input-with-javascript-c0c9f7c610fe?source=topic_portal---recommended_stories---vanillajs---3-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div><div class="ab" aria-hidden="false"><div class="ab q rb"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#6B6B6B" viewBox="0 0 16 16"><path fill="#6B6B6B" d="M12.344 11.458A5.28 5.28 0 0 0 14 7.526C14 4.483 11.391 2 8.051 2S2 4.483 2 7.527c0 3.051 2.712 5.526 6.059 5.526a6.6 6.6 0 0 0 1.758-.236q.255.223.554.414c.784.51 1.626.768 2.512.768a.37.37 0 0 0 .355-.214.37.37 0 0 0-.03-.384 4.7 4.7 0 0 1-.857-1.958v.014z"></path></svg><span>1</span></div></div></div></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fc0c9f7c610fe&operation=register&redirect=https%3A%2F%2Fsqkhor.medium.com%2Fcreate-an-otp-input-with-javascript-c0c9f7c610fe&source=---recommended_stories---vanillajs---3-85----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="h k j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="rn"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo mp mq mr ms" role="link" data-href="https://medium.com/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63" tabindex="0"><div class="mt"><div aria-label="Let’s build an analog chronograph watch with VanillaJS + HTML pt.1"><div class="mv mw mx my mz"><img alt="Let’s build an analog chronograph watch with VanillaJS + HTML pt.1" class="bh na rt ru rv sa sb nc nd bx" src="https://miro.medium.com/v2/resize:fit:730/format:webp/1*9wAfcUtHejo4rVDKs1fquA.png" loading="lazy"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@whoz_?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="whoz" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*hJ8pA3LYiXGB8RMqMR2pXA.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@whoz_?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">whoz</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title=""><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ow ka ox oy oz pa kd pb pc pd cm ns nt nv nx bk">Let’s build an analog chronograph watch with VanillaJS + HTML pt.1</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">In this project, we’ll be recreating a functional chronograph analog watch using just Vanilla JavaScript and HTML, with a bit of CSS for…</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Oct 6</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@whoz_/lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63?source=topic_portal---recommended_stories---vanillajs---4-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fef28ce9edf63&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40whoz_%2Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63&source=---recommended_stories---vanillajs---4-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="h k j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="ro"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo mp mq mr ms" role="link" data-href="https://medium.com/@aabroo.jalil/how-to-test-a-chrome-extension-locally-step-by-step-guide-852e4622d4c7" tabindex="0"><div class="mt"><div aria-label="How to Test a Chrome Extension Locally: Step-by-Step Guide"><div class="mv mw mx my mz"><img alt="How to Test a Chrome Extension Locally: Step-by-Step Guide" class="bh na rt ru rv sa sb nc nd bx" src="https://miro.medium.com/v2/resize:fit:730/format:webp/1*yuVzMhCJyDENbyhwAsrkwA.png" loading="lazy"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@aabroo.jalil?source=topic_portal---recommended_stories---vanillajs---5-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="Aabroo Jalil" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/0*nrR_4Tjx4QQvi8TP" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@aabroo.jalil?source=topic_portal---recommended_stories---vanillajs---5-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">Aabroo Jalil</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@aabroo.jalil/how-to-test-a-chrome-extension-locally-step-by-step-guide-852e4622d4c7?source=topic_portal---recommended_stories---vanillajs---5-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title=""><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ow ka ox oy oz pa kd pb pc pd cm ns nt nv nx bk">How to Test a Chrome Extension Locally: Step-by-Step Guide</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">Introduction: Chrome extensions can enhance your browsing experience by adding new functionalities and customization to the browser. Before…</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Jun 30, 2023</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@aabroo.jalil/how-to-test-a-chrome-extension-locally-step-by-step-guide-852e4622d4c7?source=topic_portal---recommended_stories---vanillajs---5-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div><div class="ab" aria-hidden="false"><div class="ab q rb"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#6B6B6B" viewBox="0 0 16 16"><path fill="#6B6B6B" d="M12.344 11.458A5.28 5.28 0 0 0 14 7.526C14 4.483 11.391 2 8.051 2S2 4.483 2 7.527c0 3.051 2.712 5.526 6.059 5.526a6.6 6.6 0 0 0 1.758-.236q.255.223.554.414c.784.51 1.626.768 2.512.768a.37.37 0 0 0 .355-.214.37.37 0 0 0-.03-.384 4.7 4.7 0 0 1-.857-1.958v.014z"></path></svg><span>1</span></div></div></div></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F852e4622d4c7&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40aabroo.jalil%2Fhow-to-test-a-chrome-extension-locally-step-by-step-guide-852e4622d4c7&source=---recommended_stories---vanillajs---5-85----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="h k j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="rp"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo mp mq mr ms" role="link" data-href="https://medium.com/@Or_yoffe/you-dont-need-a-frontend-framework-9992a80e4abf" tabindex="0"><div class="mt"><div aria-label="You don’t need a frontend framework"><div class="mv mw mx my mz"><img alt="You don’t need a frontend framework" class="bh na rt ru rv sa sb nc nd bx" src="https://miro.medium.com/v2/resize:fit:730/format:webp/1*yuVzMhCJyDENbyhwAsrkwA.png" loading="lazy"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@Or_yoffe?source=topic_portal---recommended_stories---vanillajs---6-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="Or Yoffe" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*rEINb6P7S4qJ9yPAN7kY7w.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@Or_yoffe?source=topic_portal---recommended_stories---vanillajs---6-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">Or Yoffe</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@Or_yoffe/you-dont-need-a-frontend-framework-9992a80e4abf?source=topic_portal---recommended_stories---vanillajs---6-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title=""><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ow ka ox oy oz pa kd pb pc pd cm ns nt nv nx bk">You don’t need a frontend framework</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">You can and should build one yourself, but you would benefit from using a framework in production.</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Jul 20</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@Or_yoffe/you-dont-need-a-frontend-framework-9992a80e4abf?source=topic_portal---recommended_stories---vanillajs---6-84--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F9992a80e4abf&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40Or_yoffe%2Fyou-dont-need-a-frontend-framework-9992a80e4abf&source=---recommended_stories---vanillajs---6-84----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="h k j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div><div class="rq"><article class="gb"><div class="gb mf l"><div class="bh gb"><div class="gb l"><div class="hn gb mg mh mi mj mk ml mm mn mo mp mq mr ms" role="link" data-href="https://medium.com/@bkn020612/indexed-db-50227ae9e52b" tabindex="0"><div class="mt"><div aria-label="Indexed DB"><div class="mv mw mx my mz"><img alt="Indexed DB" class="bh na rt ru rv sa sb nc nd bx" src="https://miro.medium.com/v2/resize:fit:730/format:webp/0*beKpqOHjTV5Mry_j.png" loading="lazy"/></div></div></div><div class="mu ab cc db"><div class="ab db ne bh nf ng nh ni"><div class="nj nk nl nm nn ab q"><div class="cr l"><div><div class="l" aria-hidden="false"><a tabindex="-1" rel="noopener follow" href="/@bkn020612?source=topic_portal---recommended_stories---vanillajs---7-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div class="l hn"><img alt="💚 Suwon Baek 💚" class="l hh by no np cv" src="https://miro.medium.com/v2/resize:fill:40:40/1*yjWCP6BFmoVugEJt8LzUtw.jpeg" width="20" height="20" loading="lazy"/><div class="hv by l no np hw n ay hx"></div></div></a></div></div></div><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar nq ab q" rel="noopener follow" href="/@bkn020612?source=topic_portal---recommended_stories---vanillajs---7-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><p class="bf b ga z cm nr ns nt nu nv nw nx bk">💚 Suwon Baek 💚</p></a></div></div></div><div class="ny l nz oa ob oc od oe"><div class="of og oh oi oj ok ol om"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/@bkn020612/indexed-db-50227ae9e52b?source=topic_portal---recommended_stories---vanillajs---7-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><div title=""><h2 class="bf on lp lq oo op lr ls lt oq or lu os jx ot ou ov ow ka ox oy oz pa kd pb pc pd cm ns nt nv nx bk">Indexed DB</h2></div><div class="pe l"><h3 class="bf b pf z cm pg ns nt ph nv nx fz">1. What is Indexed DB ?</h3></div></a></div></div><span class="bf b ga z fz"><div class="pi ab pj ae"><div class="ab q pn"><span>Jan 16, 2023</span><div class="h k j i d"><div class="hn pk do ab q"><div class="hw pl pm ab q pn"><div class="ax do du l cv"></div></div><a class="hw ji pm ab q pn" tabindex="-1" rel="noopener follow" href="/@bkn020612/indexed-db-50227ae9e52b?source=topic_portal---recommended_stories---vanillajs---7-85--------------------05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"></a></div></div></div><div class="ab q po pp"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F50227ae9e52b&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40bkn020612%2Findexed-db-50227ae9e52b&source=---recommended_stories---vanillajs---7-85----------------bookmark_preview----05270e9a_3ce8_423c_b8d9_1f2249c1b440-------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="fz pq pr" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div></div></div></span><div class="h k j i d"><div class="lj bh r me"></div></div></div></div></div></div></div></div></article></div></div></div><div class="sc sd se sf sg l"><a class="bf b bg z bk jc sh si sj pq sk lf gz ha hb sl sm sn he so hf hg hh bm hi hj" rel="noopener follow" href="/tag/vanillajs/recommended?source=topic_portal------vanillajs-------------------------------"><div class="l hj">See more recommended stories</div></a></div></div></div><div class="l hw n je sp jo sq sr"></div></div></div></div></div><script>window.__BUILD_ID__="main-20241129-135346-5cf0f044cd"</script><script>window.__GRAPHQL_URI__ = "https://medium.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"","group":"enabled","tags":["group-edgeCacheTags","tag-vanillajs"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"3425f8a1-bebb-408e-9379-2e5465b8a3c3","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-921f0e02c6a8d02ab6b21fd3b768ab93-8aa7b0b49e512e4a-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Ftag\u002Fvanillajs","host":"medium.com","hostname":"medium.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"","currentHash":""},"config":{"nodeEnv":"production","version":"main-20241129-135346-5cf0f044cd","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20241129-135346-5cf0f044cd","commit":"5cf0f044cde04a296c7f1e11fd4877d75fdab011"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"collectionByDomainOrSlug({\"domainOrSlug\":\"medium.com\"})":null,"tagFromSlug({\"tagSlug\":\"vanillajs\"})":{"__ref":"Tag:vanillajs"},"relatedTags({\"tagSlug\":\"vanillajs\"})":[{"__ref":"Tag:javascript"},{"__ref":"Tag:web-development"},{"__ref":"Tag:react"},{"__ref":"Tag:front-end-development"},{"__ref":"Tag:vanilla-javascript"},{"__ref":"Tag:javascript-tips"},{"__ref":"Tag:programming"},{"__ref":"Tag:js"},{"__ref":"Tag:html"}]},"ImageMetadata:0*wp5e7rlpYNr8cwWu.jpeg":{"__typename":"ImageMetadata","id":"0*wp5e7rlpYNr8cwWu.jpeg","focusPercentX":null,"focusPercentY":null,"alt":null},"User:25dd370c633d":{"__typename":"User","id":"25dd370c633d","name":"Avic Ndugu","viewerEdge":{"__ref":"UserViewerEdge:userId:25dd370c633d-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"avicndugu.medium.com"}},"hasSubdomain":true,"username":"avicndugu","bio":"Web developer and Tech enthusiast. I also enjoy reading & writing informative articles. Contributor of Tunapanda.org medium publication.","imageId":"1*kL4qnvfu98rFAiwG9wbpuA.jpeg","membership":null},"UserViewerEdge:userId:25dd370c633d-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:25dd370c633d-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:fcc2d58e5f8f":{"__typename":"Post","id":"fcc2d58e5f8f","title":"Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads","previewImage":{"__ref":"ImageMetadata:0*wp5e7rlpYNr8cwWu.jpeg"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"In our first tutorial, we set up Drawflow, created a canvas, and added a simple “Hello World” node.","isFullContent":false},"creator":{"__ref":"User:25dd370c633d"},"isPublished":true,"mediumUrl":"https:\u002F\u002Favicndugu.medium.com\u002Fdrawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":2,"isLocked":false,"firstPublishedAt":1731888012428,"latestPublishedAt":1732181565931,"pinnedAt":0,"readingTime":4.94559748427673,"sequence":null,"isSeries":false,"uniqueSlug":"drawflow-tutorial-2-automatically-show-nodes-when-page-loads-fcc2d58e5f8f"},"ImageMetadata:1*70aCACRIjsi-wKaYw-219A.png":{"__typename":"ImageMetadata","id":"1*70aCACRIjsi-wKaYw-219A.png","focusPercentX":null,"focusPercentY":null,"alt":null},"User:1705dfda4a6f":{"__typename":"User","id":"1705dfda4a6f","name":"Zeeshan Khan","viewerEdge":{"__ref":"UserViewerEdge:userId:1705dfda4a6f-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"zeeshan.khan14","bio":"","imageId":"0*cX2ragjLRTwD_AlP.","membership":null},"UserViewerEdge:userId:1705dfda4a6f-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:1705dfda4a6f-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:092be9f42c1a":{"__typename":"Post","id":"092be9f42c1a","title":"Pure JS or Vanilla JS — Carousel with infinite effect and fully responsive","previewImage":{"__ref":"ImageMetadata:1*70aCACRIjsi-wKaYw-219A.png"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"Few months back I got pulled in to one of the big project which was running from quite a long time.\nIn this project I had to work with…","isFullContent":false},"creator":{"__ref":"User:1705dfda4a6f"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@zeeshan.khan14\u002Fpure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":0,"isLocked":false,"firstPublishedAt":1718905541761,"latestPublishedAt":1718905541761,"pinnedAt":0,"readingTime":6.6330188679245285,"sequence":null,"isSeries":false,"uniqueSlug":"pure-js-or-vanilla-js-carousel-with-infinite-effect-and-fully-responsive-092be9f42c1a"},"ImageMetadata:0*9-PhaW_ZUjlUmTyj.png":{"__typename":"ImageMetadata","id":"0*9-PhaW_ZUjlUmTyj.png","focusPercentX":null,"focusPercentY":null,"alt":null},"User:6486a32ccd5f":{"__typename":"User","id":"6486a32ccd5f","name":"whoz","viewerEdge":{"__ref":"UserViewerEdge:userId:6486a32ccd5f-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"whoz_","bio":"Just a friendly humble dev. https:\u002F\u002Fwhoz.dev","imageId":"1*hJ8pA3LYiXGB8RMqMR2pXA.jpeg","membership":null},"UserViewerEdge:userId:6486a32ccd5f-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:6486a32ccd5f-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:4db16d182983":{"__typename":"Post","id":"4db16d182983","title":"Let’s build an analog chronograph watch with VanillaJS + HTML pt.2","previewImage":{"__ref":"ImageMetadata:0*9-PhaW_ZUjlUmTyj.png"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"Continuing from the pt.1 https:\u002F\u002Fmedium.com\u002F@whoz_\u002Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63, in this…","isFullContent":false},"creator":{"__ref":"User:6486a32ccd5f"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@whoz_\u002Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":35,"isLocked":false,"firstPublishedAt":1728257322640,"latestPublishedAt":1728257334018,"pinnedAt":0,"readingTime":3.714150943396226,"sequence":null,"isSeries":false,"uniqueSlug":"lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-4db16d182983"},"ImageMetadata:1*SEHo1ptxyNCbtloG-SQW-w.png":{"__typename":"ImageMetadata","id":"1*SEHo1ptxyNCbtloG-SQW-w.png","focusPercentX":null,"focusPercentY":null,"alt":null},"User:1016f2c79bd4":{"__typename":"User","id":"1016f2c79bd4","name":"Shuqi Khor","viewerEdge":{"__ref":"UserViewerEdge:userId:1016f2c79bd4-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"sqkhor.medium.com"}},"hasSubdomain":true,"username":"sqkhor","bio":"IT Director - UI\u002FUX","imageId":"1*GUcIDciU1W1t4o1_uwaZdg.jpeg","membership":{"__ref":"Membership:f821f4d3ffed"}},"UserViewerEdge:userId:1016f2c79bd4-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:1016f2c79bd4-viewerId:lo_20aa6e6e9759","isMuting":false},"Membership:f821f4d3ffed":{"__typename":"Membership","tier":"MEMBER","id":"f821f4d3ffed"},"Post:c0c9f7c610fe":{"__typename":"Post","id":"c0c9f7c610fe","title":"Create an OTP Input with Javascript","previewImage":{"__ref":"ImageMetadata:1*SEHo1ptxyNCbtloG-SQW-w.png"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"It’s easy, you just need 6 input boxes…","isFullContent":false},"creator":{"__ref":"User:1016f2c79bd4"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fsqkhor.medium.com\u002Fcreate-an-otp-input-with-javascript-c0c9f7c610fe","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":1},"visibility":"PUBLIC","clapCount":10,"isLocked":false,"firstPublishedAt":1684483840122,"latestPublishedAt":1684483840122,"pinnedAt":0,"readingTime":3.181132075471698,"sequence":null,"isSeries":false,"uniqueSlug":"create-an-otp-input-with-javascript-c0c9f7c610fe"},"ImageMetadata:1*9wAfcUtHejo4rVDKs1fquA.png":{"__typename":"ImageMetadata","id":"1*9wAfcUtHejo4rVDKs1fquA.png","focusPercentX":null,"focusPercentY":null,"alt":null},"Post:ef28ce9edf63":{"__typename":"Post","id":"ef28ce9edf63","title":"Let’s build an analog chronograph watch with VanillaJS + HTML pt.1","previewImage":{"__ref":"ImageMetadata:1*9wAfcUtHejo4rVDKs1fquA.png"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"In this project, we’ll be recreating a functional chronograph analog watch using just Vanilla JavaScript and HTML, with a bit of CSS for…","isFullContent":false},"creator":{"__ref":"User:6486a32ccd5f"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@whoz_\u002Flets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":20,"isLocked":false,"firstPublishedAt":1728253601737,"latestPublishedAt":1728257358747,"pinnedAt":0,"readingTime":3.9415094339622643,"sequence":null,"isSeries":false,"uniqueSlug":"lets-build-an-analog-chronograph-watch-with-vanillajs-html-pt-1-ef28ce9edf63"},"ImageMetadata:":{"__typename":"ImageMetadata","id":"","focusPercentX":null,"focusPercentY":null,"alt":null},"User:e6c13f01abf4":{"__typename":"User","id":"e6c13f01abf4","name":"Aabroo Jalil","viewerEdge":{"__ref":"UserViewerEdge:userId:e6c13f01abf4-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"aabroo.jalil","bio":"","imageId":"0*nrR_4Tjx4QQvi8TP","membership":null},"UserViewerEdge:userId:e6c13f01abf4-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:e6c13f01abf4-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:852e4622d4c7":{"__typename":"Post","id":"852e4622d4c7","title":"How to Test a Chrome Extension Locally: Step-by-Step Guide","previewImage":{"__ref":"ImageMetadata:"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"Introduction:\nChrome extensions can enhance your browsing experience by adding new functionalities and customization to the browser. Before…","isFullContent":false},"creator":{"__ref":"User:e6c13f01abf4"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@aabroo.jalil\u002Fhow-to-test-a-chrome-extension-locally-step-by-step-guide-852e4622d4c7","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":1},"visibility":"PUBLIC","clapCount":22,"isLocked":false,"firstPublishedAt":1688135654323,"latestPublishedAt":1688135654323,"pinnedAt":0,"readingTime":2,"sequence":null,"isSeries":false,"uniqueSlug":"how-to-test-a-chrome-extension-locally-step-by-step-guide-852e4622d4c7"},"User:669aa7e57c8f":{"__typename":"User","id":"669aa7e57c8f","name":"Or Yoffe","viewerEdge":{"__ref":"UserViewerEdge:userId:669aa7e57c8f-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"Or_yoffe","bio":"https:\u002F\u002Ftwitter.com\u002FOrYoffe https:\u002F\u002Fgithub.com\u002ForYoffe","imageId":"1*rEINb6P7S4qJ9yPAN7kY7w.jpeg","membership":null},"UserViewerEdge:userId:669aa7e57c8f-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:669aa7e57c8f-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:9992a80e4abf":{"__typename":"Post","id":"9992a80e4abf","title":"You don’t need a frontend framework","previewImage":{"__ref":"ImageMetadata:"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"You can and should build one yourself, but you would benefit from using a framework in production.","isFullContent":false},"creator":{"__ref":"User:669aa7e57c8f"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@Or_yoffe\u002Fyou-dont-need-a-frontend-framework-9992a80e4abf","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":3,"isLocked":false,"firstPublishedAt":1721470225638,"latestPublishedAt":1721471358736,"pinnedAt":0,"readingTime":4.313207547169811,"sequence":null,"isSeries":false,"uniqueSlug":"you-dont-need-a-frontend-framework-9992a80e4abf"},"ImageMetadata:0*beKpqOHjTV5Mry_j.png":{"__typename":"ImageMetadata","id":"0*beKpqOHjTV5Mry_j.png","focusPercentX":null,"focusPercentY":null,"alt":null},"User:73dd39b14c30":{"__typename":"User","id":"73dd39b14c30","name":"💚 Suwon Baek 💚","viewerEdge":{"__ref":"UserViewerEdge:userId:73dd39b14c30-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"bkn020612","bio":"Developer from South Korea. I love coding:D","imageId":"1*yjWCP6BFmoVugEJt8LzUtw.jpeg","membership":null},"UserViewerEdge:userId:73dd39b14c30-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:73dd39b14c30-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:50227ae9e52b":{"__typename":"Post","id":"50227ae9e52b","title":"Indexed DB","previewImage":{"__ref":"ImageMetadata:0*beKpqOHjTV5Mry_j.png"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"1. What is Indexed DB ?","isFullContent":false},"creator":{"__ref":"User:73dd39b14c30"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@bkn020612\u002Findexed-db-50227ae9e52b","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":0,"isLocked":false,"firstPublishedAt":1673851834620,"latestPublishedAt":1673851834620,"pinnedAt":0,"readingTime":4.160691823899371,"sequence":null,"isSeries":false,"uniqueSlug":"indexed-db-50227ae9e52b"},"ImageMetadata:1*N0y7fu2Kc2kF2k9vJ6tWQA.png":{"__typename":"ImageMetadata","id":"1*N0y7fu2Kc2kF2k9vJ6tWQA.png","focusPercentX":null,"focusPercentY":null,"alt":null},"User:5cf98d4d15e3":{"__typename":"User","id":"5cf98d4d15e3","name":"Jérôme Beau","viewerEdge":{"__ref":"UserViewerEdge:userId:5cf98d4d15e3-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"javarome.medium.com"}},"hasSubdomain":true,"username":"javarome","bio":"Sharing learnings from three decades of software development. https:\u002F\u002Fjavarome.com","imageId":"1*5YpHuV_pS65DZiGB1VEIlg.jpeg","membership":null},"UserViewerEdge:userId:5cf98d4d15e3-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:5cf98d4d15e3-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:66347b4dafca":{"__typename":"Post","id":"66347b4dafca","title":"Implementation: Vanilla Web Components","previewImage":{"__ref":"ImageMetadata:1*N0y7fu2Kc2kF2k9vJ6tWQA.png"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"Do it the standard way","isFullContent":false},"creator":{"__ref":"User:5cf98d4d15e3"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fjavarome.medium.com\u002Fimplementation-vanilla-web-components-66347b4dafca","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":1},"visibility":"PUBLIC","clapCount":9,"isLocked":false,"firstPublishedAt":1720176285106,"latestPublishedAt":1732543421377,"pinnedAt":0,"readingTime":3.905660377358491,"sequence":null,"isSeries":false,"uniqueSlug":"implementation-vanilla-web-components-66347b4dafca"},"ImageMetadata:1*Ru14fJQjR_baD8GBsmY8jQ.png":{"__typename":"ImageMetadata","id":"1*Ru14fJQjR_baD8GBsmY8jQ.png","focusPercentX":null,"focusPercentY":null,"alt":"DI Container"},"User:6835a67ac4ed":{"__typename":"User","id":"6835a67ac4ed","name":"Aleksandr Kubarskii","viewerEdge":{"__ref":"UserViewerEdge:userId:6835a67ac4ed-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"sasha.kub95","bio":"EPAM, JavaScript developer. LinkedIn: https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Faleksandr-kubarskii-7a40aa11b\u002F","imageId":"0*6qUrRGHPqsLK3a5p","membership":{"__ref":"Membership:b77175caef6e"}},"UserViewerEdge:userId:6835a67ac4ed-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:6835a67ac4ed-viewerId:lo_20aa6e6e9759","isMuting":false},"Membership:b77175caef6e":{"__typename":"Membership","tier":"MEMBER","id":"b77175caef6e"},"Post:adb888498bd":{"__typename":"Post","id":"adb888498bd","title":"Dependency injection (DI) and DI Container with Vanilla JavaScript","previewImage":{"__ref":"ImageMetadata:1*Ru14fJQjR_baD8GBsmY8jQ.png"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"Only the lazy hasn’t written about dependency injection in JavaScript and now it’s my turn. The one said:","isFullContent":false},"creator":{"__ref":"User:6835a67ac4ed"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@sasha.kub95\u002Fdependency-injection-di-and-di-container-with-vanilla-javascript-adb888498bd","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":15,"isLocked":false,"firstPublishedAt":1647191535476,"latestPublishedAt":1647246243065,"pinnedAt":0,"readingTime":4.786792452830189,"sequence":null,"isSeries":false,"uniqueSlug":"dependency-injection-di-and-di-container-with-vanilla-javascript-adb888498bd"},"ImageMetadata:1*TdEza5k1f4wqDpdRijeFEQ.png":{"__typename":"ImageMetadata","id":"1*TdEza5k1f4wqDpdRijeFEQ.png","focusPercentX":null,"focusPercentY":null,"alt":null},"User:77ee18e3b47f":{"__typename":"User","id":"77ee18e3b47f","name":"Lucia Nambi","viewerEdge":{"__ref":"UserViewerEdge:userId:77ee18e3b47f-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"nambilucia","bio":"Dedicated to mastering the art of coding.","imageId":"1*ULk3KAGiip6rNqerCUxrEA.jpeg","membership":null},"UserViewerEdge:userId:77ee18e3b47f-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:77ee18e3b47f-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:50b13fcd9c39":{"__typename":"Post","id":"50b13fcd9c39","title":"Lets build a simple Random Quote Generator in Vanilla JS","previewImage":{"__ref":"ImageMetadata:1*TdEza5k1f4wqDpdRijeFEQ.png"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"I chose this project because it’s ideal for beginners and helps in grasping JavaScript basics, such as:","isFullContent":false},"creator":{"__ref":"User:77ee18e3b47f"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@nambilucia\u002Flets-build-a-simple-random-quote-generator-in-vanilla-js-50b13fcd9c39","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":5,"isLocked":false,"firstPublishedAt":1716902975196,"latestPublishedAt":1716902975196,"pinnedAt":0,"readingTime":2.5352201257861635,"sequence":null,"isSeries":false,"uniqueSlug":"lets-build-a-simple-random-quote-generator-in-vanilla-js-50b13fcd9c39"},"ImageMetadata:1*Sq3gIFG4MtV6mWOYd1Qs8Q.jpeg":{"__typename":"ImageMetadata","id":"1*Sq3gIFG4MtV6mWOYd1Qs8Q.jpeg","focusPercentX":null,"focusPercentY":null,"alt":null},"User:91413b1c9762":{"__typename":"User","id":"91413b1c9762","name":"otieno mike","viewerEdge":{"__ref":"UserViewerEdge:userId:91413b1c9762-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"bpmikeomo","bio":"I'm just a programmer \u002F developer writing code and writing about writing code among other things","imageId":"0*aI4YwYew9eD3xsTr","membership":null},"UserViewerEdge:userId:91413b1c9762-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:91413b1c9762-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:d1498b625584":{"__typename":"Post","id":"d1498b625584","title":"Interactive Todo App Created with Pure Vanilla JavaScript HTML\u002FCSS Part II","previewImage":{"__ref":"ImageMetadata:1*Sq3gIFG4MtV6mWOYd1Qs8Q.jpeg"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"The app includes a dark\u002Flight theme toggle and drag & drop reordering","isFullContent":false},"creator":{"__ref":"User:91413b1c9762"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@bpmikeomo\u002Finteractive-todo-app-created-with-pure-vanilla-javascript-html-css-part-ii-d1498b625584","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":39,"isLocked":false,"firstPublishedAt":1690829168906,"latestPublishedAt":1690837226089,"pinnedAt":0,"readingTime":7.6301886792452835,"sequence":null,"isSeries":false,"uniqueSlug":"interactive-todo-app-created-with-pure-vanilla-javascript-html-css-part-ii-d1498b625584"},"ImageMetadata:0*diB4pWVlPQzQlb6y":{"__typename":"ImageMetadata","id":"0*diB4pWVlPQzQlb6y","focusPercentX":null,"focusPercentY":null,"alt":null},"User:1ed451d73b8f":{"__typename":"User","id":"1ed451d73b8f","name":"corbado","viewerEdge":{"__ref":"UserViewerEdge:userId:1ed451d73b8f-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"corbado_tech","bio":"✨️Authentication for the #passkeys era 👉Demo: http:\u002F\u002Fpasskeys.eu 💬Community: https:\u002F\u002Fbit.ly\u002Fpasskeys-community","imageId":"0*SP0rq-xE1fZ1i2ds.jpg","membership":null},"UserViewerEdge:userId:1ed451d73b8f-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:1ed451d73b8f-viewerId:lo_20aa6e6e9759","isMuting":false},"Post:ddf043d5363e":{"__typename":"Post","id":"ddf043d5363e","title":"How to Implement Passkeys in Vanilla JavaScript","previewImage":{"__ref":"ImageMetadata:0*diB4pWVlPQzQlb6y"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"Add passkey authentication in \u003C5 minutes to your Vanilla JavaScript application","isFullContent":false},"creator":{"__ref":"User:1ed451d73b8f"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@corbado_tech\u002Fhow-to-implement-passkeys-in-vanilla-javascript-ddf043d5363e","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"PUBLIC","clapCount":10,"isLocked":false,"firstPublishedAt":1715727698924,"latestPublishedAt":1715727698924,"pinnedAt":0,"readingTime":2.090566037735849,"sequence":null,"isSeries":false,"uniqueSlug":"how-to-implement-passkeys-in-vanilla-javascript-ddf043d5363e"},"ImageMetadata:1*K5GXAPomZjKLaRNRmFgC1A.jpeg":{"__typename":"ImageMetadata","id":"1*K5GXAPomZjKLaRNRmFgC1A.jpeg","focusPercentX":null,"focusPercentY":null,"alt":null},"User:30badf8c5da":{"__typename":"User","id":"30badf8c5da","name":"Stan Georgian","viewerEdge":{"__ref":"UserViewerEdge:userId:30badf8c5da-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"georgianstan.medium.com"}},"hasSubdomain":true,"username":"georgianstan","bio":"Full-Stack Web Developer. Say hi https:\u002F\u002Ftwitter.com\u002FGeorgianStan9","imageId":"1*XYLxd1L1yhfPnldyFMa9Xw.jpeg","membership":null},"Collection:5b301f10ddcd":{"__typename":"Collection","id":"5b301f10ddcd","slug":"itnext","name":"ITNEXT","viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:5b301f10ddcd-viewerId:lo_20aa6e6e9759"},"domain":"itnext.io","description":"ITNEXT is a platform for IT developers & software engineers to share knowledge, connect, collaborate, learn and experience next-gen technologies.","subscriberCount":65181,"customStyleSheet":null,"avatar":{"__ref":"ImageMetadata:1*yAqDFIFA5F_NXalOJKz4TA.png"}},"UserViewerEdge:userId:30badf8c5da-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:30badf8c5da-viewerId:lo_20aa6e6e9759","isMuting":false},"CollectionViewerEdge:collectionId:5b301f10ddcd-viewerId:lo_20aa6e6e9759":{"__typename":"CollectionViewerEdge","id":"collectionId:5b301f10ddcd-viewerId:lo_20aa6e6e9759","isMuting":false},"ImageMetadata:1*yAqDFIFA5F_NXalOJKz4TA.png":{"__typename":"ImageMetadata","id":"1*yAqDFIFA5F_NXalOJKz4TA.png"},"Post:9c368bb58724":{"__typename":"Post","id":"9c368bb58724","title":"How to Create a Custom Right-Click Menu With JavaScript","previewImage":{"__ref":"ImageMetadata:1*K5GXAPomZjKLaRNRmFgC1A.jpeg"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"Here is how you can create a custom context (right-click) menu for your web application","isFullContent":false},"creator":{"__ref":"User:30badf8c5da"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fitnext.io\u002Fhow-to-create-a-custom-right-click-menu-with-javascript-9c368bb58724","collection":{"__ref":"Collection:5b301f10ddcd"},"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":2},"visibility":"PUBLIC","clapCount":283,"isLocked":false,"firstPublishedAt":1618941128681,"latestPublishedAt":1618941128681,"pinnedAt":0,"readingTime":4.942452830188679,"sequence":null,"isSeries":false,"uniqueSlug":"how-to-create-a-custom-right-click-menu-with-javascript-9c368bb58724"},"ImageMetadata:1*KHolBt38ADrd9wXI11XsRw.jpeg":{"__typename":"ImageMetadata","id":"1*KHolBt38ADrd9wXI11XsRw.jpeg","focusPercentX":null,"focusPercentY":null,"alt":null},"User:ca6e49f91ff1":{"__typename":"User","id":"ca6e49f91ff1","name":"asierr.dev","viewerEdge":{"__ref":"UserViewerEdge:userId:ca6e49f91ff1-viewerId:lo_20aa6e6e9759"},"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"customDomainState":null,"hasSubdomain":false,"username":"asierr","bio":"Asier Recondo. CTO at ZIZLE & Fractional CTO","imageId":"1*6uUfKiRRclIlA0iS4keBDQ.png","membership":{"__ref":"Membership:fbcda5d3d4ce"}},"UserViewerEdge:userId:ca6e49f91ff1-viewerId:lo_20aa6e6e9759":{"__typename":"UserViewerEdge","id":"userId:ca6e49f91ff1-viewerId:lo_20aa6e6e9759","isMuting":false},"Membership:fbcda5d3d4ce":{"__typename":"Membership","tier":"MEMBER","id":"fbcda5d3d4ce"},"Post:1dc8ac2a6a64":{"__typename":"Post","id":"1dc8ac2a6a64","title":"Elevating Web Performance with Lazy Loading in Vanilla JavaScript","previewImage":{"__ref":"ImageMetadata:1*KHolBt38ADrd9wXI11XsRw.jpeg"},"extendedPreviewContent":{"__typename":"PreviewContent","subtitle":"Unlocking Faster Page Speeds and Enhanced User Experience","isFullContent":false},"creator":{"__ref":"User:ca6e49f91ff1"},"isPublished":true,"mediumUrl":"https:\u002F\u002Fmedium.com\u002F@asierr\u002Felevating-web-performance-with-lazy-loading-in-vanilla-javascript-1dc8ac2a6a64","collection":null,"isLimitedState":false,"allowResponses":true,"postResponses":{"__typename":"PostResponses","count":0},"visibility":"LOCKED","clapCount":40,"isLocked":true,"firstPublishedAt":1711353748295,"latestPublishedAt":1711353748295,"pinnedAt":0,"readingTime":3.3698113207547173,"sequence":null,"isSeries":false,"uniqueSlug":"elevating-web-performance-with-lazy-loading-in-vanilla-javascript-1dc8ac2a6a64"},"TagViewerEdge:tagSlug:vanillajs-viewerId:lo_20aa6e6e9759":{"__typename":"TagViewerEdge","recommendedPostsFeed:(limit:15)":{"__typename":"TagFeedResult","items":[{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":84,"post":{"__ref":"Post:fcc2d58e5f8f"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":85,"post":{"__ref":"Post:092be9f42c1a"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":84,"post":{"__ref":"Post:4db16d182983"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":85,"post":{"__ref":"Post:c0c9f7c610fe"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":84,"post":{"__ref":"Post:ef28ce9edf63"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":85,"post":{"__ref":"Post:852e4622d4c7"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":84,"post":{"__ref":"Post:9992a80e4abf"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":85,"post":{"__ref":"Post:50227ae9e52b"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":84,"post":{"__ref":"Post:66347b4dafca"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":85,"post":{"__ref":"Post:adb888498bd"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":84,"post":{"__ref":"Post:50b13fcd9c39"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":85,"post":{"__ref":"Post:d1498b625584"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":84,"post":{"__ref":"Post:ddf043d5363e"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":85,"post":{"__ref":"Post:9c368bb58724"}},{"__typename":"TagFeedItem","feedId":"05270e9a-3ce8-423c-b8d9-1f2249c1b440","reason":84,"post":{"__ref":"Post:1dc8ac2a6a64"}}]},"id":"tagSlug:vanillajs-viewerId:lo_20aa6e6e9759"},"Tag:vanillajs":{"__typename":"Tag","id":"vanillajs","normalizedTagSlug":"vanillajs","displayTitle":"Vanillajs","postCount":363,"followerCount":30,"viewerEdge":{"__ref":"TagViewerEdge:tagSlug:vanillajs-viewerId:lo_20aa6e6e9759"},"parentTag":null},"Tag:javascript":{"__typename":"Tag","id":"javascript","displayTitle":"JavaScript","normalizedTagSlug":"javascript"},"Tag:web-development":{"__typename":"Tag","id":"web-development","displayTitle":"Web Development","normalizedTagSlug":"web-development"},"Tag:react":{"__typename":"Tag","id":"react","displayTitle":"React","normalizedTagSlug":"react"},"Tag:front-end-development":{"__typename":"Tag","id":"front-end-development","displayTitle":"Front End Development","normalizedTagSlug":"front-end-development"},"Tag:vanilla-javascript":{"__typename":"Tag","id":"vanilla-javascript","displayTitle":"Vanilla Javascript","normalizedTagSlug":"vanilla-javascript"},"Tag:javascript-tips":{"__typename":"Tag","id":"javascript-tips","displayTitle":"Javascript Tips","normalizedTagSlug":"javascript-tips"},"Tag:programming":{"__typename":"Tag","id":"programming","displayTitle":"Programming","normalizedTagSlug":"programming"},"Tag:js":{"__typename":"Tag","id":"js","displayTitle":"Js","normalizedTagSlug":"js"},"Tag:html":{"__typename":"Tag","id":"html","displayTitle":"HTML","normalizedTagSlug":"html"}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"HIT"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.bbe4ab66.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.bbe47cad.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.d9108df7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4810.6318add7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.b0942613.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.5b3eb23a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.1ab63137.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5250.9f9e01d2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5787.e66a3a4d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.826a25fb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7549.2176f21f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6589.7c500280.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.0a97706a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.08de95de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6882.628a1cdf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9553.1f5c3a14.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7560.d03991bf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/TopicPortalPage.MainContent.8c8c10e6.chunk.js"></script><script>window.main();</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8ebbe40ddb9a4106',t:'MTczMzE0ODUyNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>