CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Crack your Front-End Development Interviews | by Shivani Gupta | JavaScript in Plain English</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="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2023-07-25T00:19:00.922Z"/><meta data-rh="true" name="title" content="Crack your Front-End Development Interviews | by Shivani Gupta | JavaScript in Plain English"/><meta data-rh="true" property="og:title" content="🌟💼 Crack your Web Development Interviews"/><meta data-rh="true" property="al:android:url" content="medium://p/acee97282513"/><meta data-rh="true" property="al:ios:url" content="medium://p/acee97282513"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="🌟💼 From painting dots in MNC to becoming a key Product developer, each switch in my career journey has come with its own set of challenges. I knew that transitioning wouldn’t be easy. Multiple…"/><meta data-rh="true" property="og:description" content="Discover thought provoking interview questions, scenario-based queries, and tips to help you showcase your skills. From CSS to ReactJS!"/><meta data-rh="true" property="og:url" content="https://javascript.plainenglish.io/crack-your-web-development-interviews-acee97282513"/><meta data-rh="true" property="al:web:url" content="https://javascript.plainenglish.io/crack-your-web-development-interviews-acee97282513"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/da:true/resize:fit:1200/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif"/><meta data-rh="true" property="article:author" content="https://gshivani.medium.com"/><meta data-rh="true" name="author" content="Shivani Gupta"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="🌟💼 Crack your Web Development Interviews"/><meta data-rh="true" name="twitter:site" content="@inPlainEngHQ"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/acee97282513"/><meta data-rh="true" property="twitter:description" content="Discover thought provoking interview questions, scenario-based queries, and tips to help you showcase your skills. From CSS to ReactJS!"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/da:true/resize:fit:1200/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="8 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/resize:fill:256:256/1*APjYv_YDdw1J7WCT4uKh9Q.png"/><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" 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="author" href="https://gshivani.medium.com"/><link data-rh="true" rel="canonical" href="https://javascript.plainenglish.io/crack-your-web-development-interviews-acee97282513"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/acee97282513"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fda:true\u002Fresize:fit:1200\u002F1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif"],"url":"https:\u002F\u002Fjavascript.plainenglish.io\u002Fcrack-your-web-development-interviews-acee97282513","dateCreated":"2023-07-12T11:11:37.861Z","datePublished":"2023-07-12T11:11:37.861Z","dateModified":"2023-07-25T00:19:00.988Z","headline":"Crack your Front-End Development Interviews - JavaScript in Plain English","name":"Crack your Front-End Development Interviews - JavaScript in Plain English","description":"🌟💼 From painting dots in MNC to becoming a key Product developer, each switch in my career journey has come with its own set of challenges. I knew that transitioning wouldn’t be easy. Multiple…","identifier":"acee97282513","author":{"@type":"Person","name":"Shivani Gupta","url":"https:\u002F\u002Fgshivani.medium.com"},"creator":["Shivani Gupta"],"publisher":{"@type":"Organization","name":"JavaScript in Plain English","url":"javascript.plainenglish.io","logo":{"@type":"ImageObject","width":205,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:410\u002F1*Q1MaP5W5ig0jfVG1A2vt8Q@2x.png"}},"mainEntityOfPage":"https:\u002F\u002Fjavascript.plainenglish.io\u002Fcrack-your-web-development-interviews-acee97282513"}</script><style type="text/css" data-fela-rehydration="550" 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="550" 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="550" 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{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:#1A8917}.es{border-color:#1A8917}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:#1A8917}.ez:disabled:hover{border-color:#1A8917}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{line-height:1.23}.gt{letter-spacing:0}.gu{font-style:normal}.gv{font-weight:700}.hq{margin-bottom:-0.27em}.hr{line-height:1.394}.im{align-items:baseline}.in{width:48px}.io{height:48px}.ip{border:2px solid rgba(255, 255, 255, 1)}.iq{z-index:0}.ir{box-shadow:none}.is{border:1px solid rgba(0, 0, 0, 0.05)}.it{margin-left:-12px}.iu{width:28px}.iv{height:28px}.iw{z-index:1}.ix{width:24px}.iy{margin-bottom:2px}.iz{flex-wrap:nowrap}.ja{font-size:16px}.jb{line-height:24px}.jd{margin:0 8px}.je{display:inline}.jf{color:#1A8917}.jg{fill:#1A8917}.jj{flex:0 0 auto}.jm{flex-wrap:wrap}.jp{white-space:pre-wrap}.jq{margin-right:4px}.jr{overflow:hidden}.js{max-height:20px}.jt{text-overflow:ellipsis}.ju{display:-webkit-box}.jv{-webkit-line-clamp:1}.jw{-webkit-box-orient:vertical}.jx{word-break:break-all}.jz{padding-left:8px}.ka{padding-right:8px}.lb> *{flex-shrink:0}.lc{overflow-x:scroll}.ld::-webkit-scrollbar{display:none}.le{scrollbar-width:none}.lf{-ms-overflow-style:none}.lg{width:74px}.lh{flex-direction:row}.li{z-index:2}.ll{-webkit-user-select:none}.lm{border:0}.ln{fill:rgba(117, 117, 117, 1)}.lq{outline:0}.lr{user-select:none}.ls> svg{pointer-events:none}.mb{cursor:progress}.mc{opacity:1}.md{padding:4px 0}.mg{margin-top:0px}.mh{width:16px}.mj{display:inline-flex}.mp{max-width:100%}.mq{padding:8px 2px}.mr svg{color:#6B6B6B}.ni{line-height:1.58}.nj{letter-spacing:-0.004em}.nk{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.od{margin-bottom:-0.46em}.oe{margin-left:auto}.of{margin-right:auto}.og{max-width:1500px}.om{clear:both}.oo{cursor:zoom-in}.op{z-index:auto}.or{height:auto}.os{margin-top:32px}.ot{margin-bottom:14px}.ou{padding-top:24px}.ov{padding-bottom:10px}.ow{background-color:#000000}.ox{height:3px}.oy{width:3px}.oz{margin-right:20px}.pa{max-width:490px}.pb{margin-top:10px}.pc{max-width:728px}.pf{overflow-x:auto}.pg{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.ph{padding:20px}.pi{border-radius:0}.pj{background:#F2F2F2}.pk{line-height:1.18}.pl{letter-spacing:-0.022em}.pm{margin-top:-0.09em}.pn{margin-bottom:-0.09em}.po{min-width:fit-content}.pp{max-width:1266px}.pq{max-width:1206px}.pr{text-decoration:underline}.ps{max-width:1280px}.pt{max-width:404px}.pu{max-width:742px}.pv{padding:2px 4px}.pw{font-size:75%}.px> strong{font-family:inherit}.py{font-style:italic}.pz{max-width:1400px}.qa{margin-bottom:26px}.qb{margin-top:6px}.qc{margin-top:8px}.qd{margin-right:8px}.qe{padding:8px 16px}.qf{border-radius:100px}.qg{transition:background 300ms ease}.qi{white-space:nowrap}.qj{border-top:none}.qk{height:52px}.ql{max-height:52px}.qm{box-sizing:content-box}.qn{position:static}.qp{max-width:155px}.ra{height:0px}.rb{margin-bottom:40px}.rc{margin-bottom:48px}.rq{border-radius:2px}.rs{height:64px}.rt{width:64px}.ru{align-self:flex-end}.rv{color:rgba(255, 255, 255, 1)}.rw{fill:rgba(255, 255, 255, 1)}.rx{background:rgba(25, 25, 25, 1)}.ry{border-color:rgba(25, 25, 25, 1)}.sb:disabled{opacity:0.1}.sc:disabled:hover{background:rgba(25, 25, 25, 1)}.sd:disabled:hover{border-color:rgba(25, 25, 25, 1)}.se{flex:1 1 auto}.sk{padding-right:4px}.sl{font-weight:500}.sy{margin-top:16px}.sz{margin-bottom:54px}.ts{gap:18px}.tt{fill:rgba(61, 61, 61, 1)}.ua{border-bottom:solid 1px #E5E5E5}.ub{margin-top:72px}.uc{padding:24px 0}.ud{margin-bottom:0px}.ue{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:#156D12}.eu:hover{border-color:#156D12}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.jc:hover{text-decoration:underline}.jh:hover:not(:disabled){color:#156D12}.ji:hover:not(:disabled){fill:#156D12}.lp:hover{fill:rgba(8, 8, 8, 1)}.me:hover{fill:#000000}.mf:hover p{color:#000000}.mi:hover{color:#000000}.ms:hover svg{color:#000000}.qh:hover{background-color:#F2F2F2}.rr:hover{background-color:none}.rz:hover{background:#000000}.sa:hover{border-color:#242424}.tu:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.lo:focus{fill:rgba(8, 8, 8, 1)}.mt:focus svg{color:#000000}.oq:focus{transform:scale(1.01)}.lt:active{border-style:none}</style><style type="text/css" data-fela-rehydration="550" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:68px}.gc{max-width:680px}.hm{font-size:42px}.hn{margin-top:1.19em}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.ie{font-size:22px}.if{margin-top:0.92em}.ig{line-height:28px}.il{align-items:center}.kn{border-top:solid 1px #F2F2F2}.ko{border-bottom:solid 1px #F2F2F2}.kp{margin:32px 0 0}.kq{padding:3px 8px}.kz> *{margin-right:24px}.la> :last-child{margin-right:0}.ma{margin-top:0px}.mo{margin:0}.nz{font-size:20px}.oa{margin-top:2.14em}.ob{line-height:32px}.oc{letter-spacing:-0.003em}.ol{margin-top:56px}.qu{display:inline-block}.qz{margin-bottom:104px}.rd{flex-direction:row}.rg{margin-bottom:0}.rh{margin-right:20px}.sf{max-width:500px}.sw{line-height:24px}.sx{letter-spacing:0}.te{margin-bottom:72px}.tp{font-size:24px}.tq{line-height:30px}.tr{letter-spacing:-0.016em}.tz{padding-top:72px}</style><style type="text/css" data-fela-rehydration="550" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.lz{margin-top:0px}.pd{margin-left:auto}.pe{text-align:center}.qt{display:inline-block}</style><style type="text/css" data-fela-rehydration="550" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.ly{margin-top:0px}.qs{display:inline-block}</style><style type="text/css" data-fela-rehydration="550" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lw{margin-top:0px}.lx{margin-right:0px}.qr{display:inline-block}</style><style type="text/css" data-fela-rehydration="550" 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}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gw{font-size:32px}.gx{margin-top:1.01em}.gy{line-height:38px}.gz{letter-spacing:-0.014em}.hs{font-size:18px}.ht{margin-top:0.79em}.hu{line-height:24px}.ih{align-items:flex-start}.jk{flex-direction:column}.jn{margin-bottom:2px}.kb{margin:24px -24px 0}.kc{padding:0}.kr> *{margin-right:8px}.ks> :last-child{margin-right:24px}.lj{margin-left:0px}.lu{margin-top:0px}.lv{margin-right:0px}.mk{margin:0}.mu{border:1px solid #F2F2F2}.mv{border-radius:99em}.mw{padding:0px 16px 0px 12px}.mx{height:38px}.my{align-items:center}.na svg{margin-right:8px}.nl{margin-top:1.56em}.nm{line-height:28px}.nn{letter-spacing:-0.003em}.oh{margin-top:40px}.qq{display:inline-block}.qv{margin-bottom:96px}.ro{margin-bottom:20px}.rp{margin-right:0}.sj{max-width:100%}.sm{font-size:24px}.sn{line-height:30px}.so{letter-spacing:-0.016em}.ta{margin-bottom:64px}.tf{font-size:20px}.tg{letter-spacing:0}.tv{padding-top:48px}.mz:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="550" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.hi{font-size:42px}.hj{margin-top:1.19em}.hk{line-height:52px}.hl{letter-spacing:-0.011em}.ib{font-size:22px}.ic{margin-top:0.92em}.id{line-height:28px}.ik{align-items:center}.kj{border-top:solid 1px #F2F2F2}.kk{border-bottom:solid 1px #F2F2F2}.kl{margin:32px 0 0}.km{padding:3px 8px}.kx> *{margin-right:24px}.ky> :last-child{margin-right:0}.mn{margin:0}.nv{font-size:20px}.nw{margin-top:2.14em}.nx{line-height:32px}.ny{letter-spacing:-0.003em}.ok{margin-top:56px}.qy{margin-bottom:104px}.re{flex-direction:row}.ri{margin-bottom:0}.rj{margin-right:20px}.sg{max-width:500px}.su{line-height:24px}.sv{letter-spacing:0}.td{margin-bottom:72px}.tm{font-size:24px}.tn{line-height:30px}.to{letter-spacing:-0.016em}.ty{padding-top:72px}</style><style type="text/css" data-fela-rehydration="550" 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}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:68px}.ga{max-width:680px}.he{font-size:42px}.hf{margin-top:1.19em}.hg{line-height:52px}.hh{letter-spacing:-0.011em}.hy{font-size:22px}.hz{margin-top:0.92em}.ia{line-height:28px}.ij{align-items:center}.kf{border-top:solid 1px #F2F2F2}.kg{border-bottom:solid 1px #F2F2F2}.kh{margin:32px 0 0}.ki{padding:3px 8px}.kv> *{margin-right:24px}.kw> :last-child{margin-right:0}.mm{margin:0}.nr{font-size:20px}.ns{margin-top:2.14em}.nt{line-height:32px}.nu{letter-spacing:-0.003em}.oj{margin-top:56px}.qx{margin-bottom:104px}.rf{flex-direction:row}.rk{margin-bottom:0}.rl{margin-right:20px}.sh{max-width:500px}.ss{line-height:24px}.st{letter-spacing:0}.tc{margin-bottom:72px}.tj{font-size:24px}.tk{line-height:30px}.tl{letter-spacing:-0.016em}.tx{padding-top:72px}</style><style type="text/css" data-fela-rehydration="550" 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}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:4px}.ha{font-size:32px}.hb{margin-top:1.01em}.hc{line-height:38px}.hd{letter-spacing:-0.014em}.hv{font-size:18px}.hw{margin-top:0.79em}.hx{line-height:24px}.ii{align-items:flex-start}.jl{flex-direction:column}.jo{margin-bottom:2px}.kd{margin:24px 0 0}.ke{padding:0}.kt> *{margin-right:8px}.ku> :last-child{margin-right:8px}.lk{margin-left:0px}.ml{margin:0}.nb{border:1px solid #F2F2F2}.nc{border-radius:99em}.nd{padding:0px 16px 0px 12px}.ne{height:38px}.nf{align-items:center}.nh svg{margin-right:8px}.no{margin-top:1.56em}.np{line-height:28px}.nq{letter-spacing:-0.003em}.oi{margin-top:40px}.qw{margin-bottom:96px}.rm{margin-bottom:20px}.rn{margin-right:0}.si{max-width:100%}.sp{font-size:24px}.sq{line-height:30px}.sr{letter-spacing:-0.016em}.tb{margin-bottom:64px}.th{font-size:20px}.ti{letter-spacing:0}.tw{padding-top:48px}.ng:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="550" data-fela-type="RULE" media="print">.qo{display:none}</style><style type="text/css" data-fela-rehydration="550" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jy{max-height:none}</style><style type="text/css" data-fela-rehydration="550" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.on{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</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="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2Facee97282513&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&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="dt"><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 dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">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" href="https://medium.com/?source=---top_nav_layout_nav----------------------------------" rel="noopener follow"><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 fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav-----------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><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="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" href="https://medium.com/search?source=---top_nav_layout_nav----------------------------------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><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="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" 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="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="edfc" class="pw-post-title gs gt gu bf gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq bk" data-testid="storyTitle">Crack your <strong class="al">Front-End </strong>Development Interviews</h1></div><div><h2 id="b21a" class="pw-subtitle-paragraph hr gt gu bf b hs ht hu hv hw hx hy hz ia ib ic id ie if ig cq du">Are you preparing for web development interviews? Transitioning between roles can be challenging, but with the right foundation and knowledge, you can excel. Dive into this article and discover some of my favourite interview questions, scenario-based queries, and tips to help you showcase your skills. From CSS to ReactJS, I’ve got you covered. Let’s boost your confidence and prepare you for success! 💪🚀</h2><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="ih ii ij ik il ab"><div><div class="ab im"><div><div class="bm" aria-hidden="false"><a href="https://gshivani.medium.com/?source=post_page---byline--acee97282513--------------------------------" rel="noopener follow"><div class="l in io by ip iq"><div class="l fj"><img alt="Shivani Gupta" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/2*7Vr4JCeuKrF9jDy9_YEIqQ.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="ir by l dd de fs n is ft"></div></div></div></a></div></div><div class="it ab fj"><div><div class="bm" aria-hidden="false"><a href="https://javascript.plainenglish.io/?source=post_page---byline--acee97282513--------------------------------" rel="noopener ugc nofollow"><div class="l iu iv by ip iw"><div class="l fj"><img alt="JavaScript in Plain English" class="l fd by br ix cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*yUNfohs9jA6GCDmyCYJTvA@2x.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="ir by l br ix fs n is ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="iy ab q"><div class="ab q iz"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b ja jb bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" data-testid="authorName" href="https://gshivani.medium.com/?source=post_page---byline--acee97282513--------------------------------" rel="noopener follow">Shivani Gupta</a></p></div></div></div><span class="jd je" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b ja jb du"><span><a class="jf jg ah ai aj ak al am an ao ap aq ar ex jh ji" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Ffda018b60e78&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&user=Shivani+Gupta&userId=fda018b60e78&source=post_page-fda018b60e78--byline--acee97282513---------------------post_header-----------" rel="noopener follow">Follow</a></span></p></div></div></span></div></div><div class="l jj"><span class="bf b bg z du"><div class="ab cn jk jl jm"><div class="jn jo ab"><div class="bf b bg z du ab jp"><span class="jq l jj">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jc ab q" data-testid="publicationName" href="https://javascript.plainenglish.io/?source=post_page---byline--acee97282513--------------------------------" rel="noopener ugc nofollow"><p class="bf b bg z jr js jt ju jv jw jx jy bk">JavaScript in Plain English</p></a></div></div></div><div class="h k"><span class="jd je" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">8 min read</span><div class="jz ka l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Jul 12, 2023</span></div></span></div></span></div></div></div><div class="ab cp kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq"><div class="h k w fg fh q"><div class="lg l"><div class="ab q lh li"><div class="pw-multi-vote-icon fj jq lj lk ll"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fjavascript-in-plain-english%2Facee97282513&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&user=Shivani+Gupta&userId=fda018b60e78&source=---header_actions--acee97282513---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lm ao ln lo lp lq am lr ls lt ll"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lu lv lw lx ly lz ma"><p class="bf b dv z du"><span class="mb">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao lm mc md ab q fk me mf" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mg"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg></button></div></div></div><div class="ab q kr ks kt ku kv kw kx ky kz la lb lc ld le lf"><div class="mh k j i d"></div><div class="h k"><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" data-testid="headerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Facee97282513&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&source=---header_actions--acee97282513---------------------bookmark_footer-----------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mi" 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 class="fd mj cn"><div class="l ae"><div class="ab cb"><div class="mk ml mm mn mo mp ci bh"><div class="ab"><div class="bm bh" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al mq an ao ap ex mr ms mf mt mu mv mw mx s my mz na nb nc nd ne u nf ng nh"><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="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al mq an ao ap ex mr ms mf mt mu mv mw mx s my mz na nb nc nd ne u nf ng nh"><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="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><p id="a773" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk">🌟💼 From painting dots in MNC to becoming a key Product developer, each switch in my career journey has come with its own set of challenges. I knew that transitioning wouldn’t be easy. Multiple rounds of interviews awaited me, covering topics like Frontend frameworks, Architecture & tooling, Data Structures & Algorithms, Cultural fit, and Raising the bar. I’m sure many of you can relate to this experience. 😅</p><p id="5e82" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk">So, let’s dive in and explore these questions that will help you shine in your interviews. These questions, whether asked directly or indirectly, or based on real-life scenarios, can greatly assist you in clearing interviews and showcasing your expertise. 📝💡 Remember, preparation and a solid foundation are the keys to success! Best of luck! 🚀✨</p><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of og"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure></div></div></div><div class="ab cb os ot ou ov" role="separator"><span class="ow by bm ox oy oz"></span><span class="ow by bm ox oy oz"></span><span class="ow by bm ox oy"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="62e9" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">CSS :</strong> I see a lot of people having love-hate relationships with CSS. Cascading Style Sheets is an amazing and powerful 💪 style sheet language if you understand it well.</p><figure class="oh oi oj ok ol om oe of paragraph-image"><div class="oe of pa"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*pJLQ9p4b5NOz0A_VEwlogg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*pJLQ9p4b5NOz0A_VEwlogg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*pJLQ9p4b5NOz0A_VEwlogg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*pJLQ9p4b5NOz0A_VEwlogg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*pJLQ9p4b5NOz0A_VEwlogg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*pJLQ9p4b5NOz0A_VEwlogg.png 1100w, https://miro.medium.com/v2/resize:fit:980/format:webp/1*pJLQ9p4b5NOz0A_VEwlogg.png 980w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 490px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*pJLQ9p4b5NOz0A_VEwlogg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*pJLQ9p4b5NOz0A_VEwlogg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*pJLQ9p4b5NOz0A_VEwlogg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*pJLQ9p4b5NOz0A_VEwlogg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*pJLQ9p4b5NOz0A_VEwlogg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*pJLQ9p4b5NOz0A_VEwlogg.png 1100w, https://miro.medium.com/v2/resize:fit:980/1*pJLQ9p4b5NOz0A_VEwlogg.png 980w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 490px"/><img alt="" class="bh mp or c" width="490" height="107" loading="eager" role="presentation"/></picture></div><figcaption class="pb ff pc oe of pd pe bf b bg z du">Twitter</figcaption></figure><p id="5d7b" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk">Listing down few of my favourite CSS questions, you can explore.</p><p id="4da2" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">1.What is the difference between Opacity and Alpha Transparency? </strong><br/>I have seen a lot of developers making this mistake and use <strong class="nk gv">background-color with opacity</strong> and <strong class="nk gv">RGBA</strong> interchangeably. The opacity property sets the opacity for an element and makes the whole element transparent including its content.</p><pre class="oh oi oj ok ol pf pg ph pi ay pj bk"><span id="b1ad" class="pk pl gu pg b ja pm pn l jp po">/* Use of Opacity */<br/>div {<br/> background-color: #fbb626;<br/> opacity: 0.5;<br/>}</span></pre><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pp"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*fsd-QohNHTSSF4cnXOgDcA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*fsd-QohNHTSSF4cnXOgDcA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*fsd-QohNHTSSF4cnXOgDcA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*fsd-QohNHTSSF4cnXOgDcA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*fsd-QohNHTSSF4cnXOgDcA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*fsd-QohNHTSSF4cnXOgDcA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*fsd-QohNHTSSF4cnXOgDcA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*fsd-QohNHTSSF4cnXOgDcA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*fsd-QohNHTSSF4cnXOgDcA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*fsd-QohNHTSSF4cnXOgDcA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*fsd-QohNHTSSF4cnXOgDcA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*fsd-QohNHTSSF4cnXOgDcA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*fsd-QohNHTSSF4cnXOgDcA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*fsd-QohNHTSSF4cnXOgDcA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="309" loading="lazy" role="presentation"/></picture></div></div></figure><p id="8bd3" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk">While RGB colour values with an alpha channel only makes the element background transparent leaving its content as it is.</p><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pp"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*0MmYUrOuDjafe-YBo7UYRQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*0MmYUrOuDjafe-YBo7UYRQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*0MmYUrOuDjafe-YBo7UYRQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*0MmYUrOuDjafe-YBo7UYRQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*0MmYUrOuDjafe-YBo7UYRQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*0MmYUrOuDjafe-YBo7UYRQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*0MmYUrOuDjafe-YBo7UYRQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*0MmYUrOuDjafe-YBo7UYRQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*0MmYUrOuDjafe-YBo7UYRQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*0MmYUrOuDjafe-YBo7UYRQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*0MmYUrOuDjafe-YBo7UYRQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*0MmYUrOuDjafe-YBo7UYRQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*0MmYUrOuDjafe-YBo7UYRQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*0MmYUrOuDjafe-YBo7UYRQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="289" loading="lazy" role="presentation"/></picture></div></div></figure><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pq"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*OKH_G-3TGedHf506Vb3ebQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*OKH_G-3TGedHf506Vb3ebQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*OKH_G-3TGedHf506Vb3ebQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*OKH_G-3TGedHf506Vb3ebQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*OKH_G-3TGedHf506Vb3ebQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*OKH_G-3TGedHf506Vb3ebQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*OKH_G-3TGedHf506Vb3ebQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*OKH_G-3TGedHf506Vb3ebQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*OKH_G-3TGedHf506Vb3ebQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*OKH_G-3TGedHf506Vb3ebQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*OKH_G-3TGedHf506Vb3ebQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*OKH_G-3TGedHf506Vb3ebQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*OKH_G-3TGedHf506Vb3ebQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*OKH_G-3TGedHf506Vb3ebQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="190" loading="lazy" role="presentation"/></picture></div></div></figure><p id="47f9" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">2. What are the drawbacks of Inline CSS?</strong><br/>This is one of the most common mistakes I see developers making by writing inline css. The reason could be specificity issue, no idea where the style will stay or short period deadline 😫</p><p id="ba40" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">#1. </strong>You can not use ::before and ::after pseudo-elements.<br/><strong class="nk gv">#2.</strong> You can not reuse the style or extend it further.<br/><strong class="nk gv">#3. </strong>You will need to use !important to overriding inline styles which is not recommended. Read more : <a class="af pr" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception" rel="noopener ugc nofollow" target="_blank"><strong class="nk gv">https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception</strong></a><br/><strong class="nk gv">#4.</strong> Your css file are cached on the browser. Inline CSS hampers caching and you will end up loading data every time a page is refreshed.<br/><strong class="nk gv">#5. </strong>CSS is about keeping presentation separate from markup or else it will add lots of maintenance load.</p><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of ps"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*4NO-ROLw_7VJKMl8.jpg 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*4NO-ROLw_7VJKMl8.jpg 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*4NO-ROLw_7VJKMl8.jpg 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*4NO-ROLw_7VJKMl8.jpg 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*4NO-ROLw_7VJKMl8.jpg 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*4NO-ROLw_7VJKMl8.jpg 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*4NO-ROLw_7VJKMl8.jpg 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*4NO-ROLw_7VJKMl8.jpg 640w, https://miro.medium.com/v2/resize:fit:720/0*4NO-ROLw_7VJKMl8.jpg 720w, https://miro.medium.com/v2/resize:fit:750/0*4NO-ROLw_7VJKMl8.jpg 750w, https://miro.medium.com/v2/resize:fit:786/0*4NO-ROLw_7VJKMl8.jpg 786w, https://miro.medium.com/v2/resize:fit:828/0*4NO-ROLw_7VJKMl8.jpg 828w, https://miro.medium.com/v2/resize:fit:1100/0*4NO-ROLw_7VJKMl8.jpg 1100w, https://miro.medium.com/v2/resize:fit:1400/0*4NO-ROLw_7VJKMl8.jpg 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="pb ff pc oe of pd pe bf b bg z du"><a class="af pr" href="https://memegenerator.net/instance/68409885/game-of-thrones-dancing-maste-what-do-we-say-to-inline-css-styles-not-today" rel="noopener ugc nofollow" target="_blank">Source</a></figcaption></figure><p id="6e67" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">3.What is the difference between CSS border and CSS outline property?<br/></strong>Border property is part of<a class="af pr" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model" rel="noopener ugc nofollow" target="_blank"> The Box model</a>. On the other hand outline is not part of the box model and it is created outside the element.<br/>In the below example we have given a border 10px and it is getting reflected in the box model. We have used the same 10px for outline and it is not shown in the Box Model. It is added on top of the Box model and does not affect elements height and width.<br/>📓 You will need to take care of element’s outline from getting overlapped with other elements in view.</p><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pp"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*6uqoglV1egFqso6ye0juKw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*6uqoglV1egFqso6ye0juKw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*6uqoglV1egFqso6ye0juKw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*6uqoglV1egFqso6ye0juKw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*6uqoglV1egFqso6ye0juKw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*6uqoglV1egFqso6ye0juKw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*6uqoglV1egFqso6ye0juKw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*6uqoglV1egFqso6ye0juKw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*6uqoglV1egFqso6ye0juKw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*6uqoglV1egFqso6ye0juKw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*6uqoglV1egFqso6ye0juKw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*6uqoglV1egFqso6ye0juKw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*6uqoglV1egFqso6ye0juKw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*6uqoglV1egFqso6ye0juKw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="330" loading="lazy" role="presentation"/></picture></div></div></figure><figure class="oh oi oj ok ol om oe of paragraph-image"><div class="oe of pt"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*wff0SQ1NE9ZkNLoK8rhcXw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*wff0SQ1NE9ZkNLoK8rhcXw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*wff0SQ1NE9ZkNLoK8rhcXw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*wff0SQ1NE9ZkNLoK8rhcXw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*wff0SQ1NE9ZkNLoK8rhcXw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*wff0SQ1NE9ZkNLoK8rhcXw.png 1100w, https://miro.medium.com/v2/resize:fit:808/format:webp/1*wff0SQ1NE9ZkNLoK8rhcXw.png 808w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 404px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*wff0SQ1NE9ZkNLoK8rhcXw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*wff0SQ1NE9ZkNLoK8rhcXw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*wff0SQ1NE9ZkNLoK8rhcXw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*wff0SQ1NE9ZkNLoK8rhcXw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*wff0SQ1NE9ZkNLoK8rhcXw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*wff0SQ1NE9ZkNLoK8rhcXw.png 1100w, https://miro.medium.com/v2/resize:fit:808/1*wff0SQ1NE9ZkNLoK8rhcXw.png 808w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 404px"/><img alt="" class="bh mp or c" width="404" height="294" loading="lazy" role="presentation"/></picture></div><figcaption class="pb ff pc oe of pd pe bf b bg z du">Box model</figcaption></figure><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pu"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*gDJlCbGpdEQopUcM6ql4yw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*gDJlCbGpdEQopUcM6ql4yw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*gDJlCbGpdEQopUcM6ql4yw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*gDJlCbGpdEQopUcM6ql4yw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*gDJlCbGpdEQopUcM6ql4yw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*gDJlCbGpdEQopUcM6ql4yw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*gDJlCbGpdEQopUcM6ql4yw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*gDJlCbGpdEQopUcM6ql4yw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*gDJlCbGpdEQopUcM6ql4yw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*gDJlCbGpdEQopUcM6ql4yw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*gDJlCbGpdEQopUcM6ql4yw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*gDJlCbGpdEQopUcM6ql4yw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*gDJlCbGpdEQopUcM6ql4yw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*gDJlCbGpdEQopUcM6ql4yw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="323" loading="lazy" role="presentation"/></picture></div></div></figure><p id="628a" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">4.How do you select a Unit for font-size?</strong><br/><strong class="nk gv">Ans:</strong> Choosing a right unit is one of the most important aspect when working on adding responsiveness to your site or easing life of users by providing text scalability and accessibility. So how we choose right Unit, Let me help you on this. <br/>1. <strong class="nk gv">px :</strong> Most commonly used unit px is also known as fixed/Static unit. It allows developers to make the <strong class="nk gv">most accurate render </strong>but it fails to scale with browser size changes. <br/><strong class="nk gv">2. rem: </strong>The rem stands for root element. The font-size in rem is <strong class="nk gv">dependent on the value of the root element</strong> (or the <code class="cx pv pw px pg b">html</code> element). The standard size for 1rem is <strong class="nk gv">16px</strong><br/><strong class="nk gv">3. em : </strong>The em unit depends on the font size of the parent element. It looks at its immediate parent for font calculation and cascade till root element if needed to calculate <br/><strong class="nk gv">4. percentage: </strong>Percents are also scalable. However, 100% is equal to the current font size. Think of it 2em is 2<em class="py">times</em> larger, and 200% is 200percent of the font size.<br/><strong class="nk gv">Final verdict: </strong>Use REM when you need value according to the root. Use EM when you have to make more scaling than the root font size.</p><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of og"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*El_7OyGNt8x1ZOu1e_WNMQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="614" loading="lazy" role="presentation"/></picture></div></div></figure><p id="b85b" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">5.How will you make sure that every browser renders HTML elements with visual consistency?<br/></strong>As a web developer, there are three major browsers i.e. Chrome, Firefox and Safari where you test your application on. If you have already done some browser testing then you must have faced challenges with visual inconsistency(font sizes, spaces and focus styles for form fields) in elements. This could be due to browser specific default styles that get applied to elements. We want elements to look the same irrespective of which browser we are viewing the application. In order to solve this problem <strong class="nk gv">we normalize CSS</strong>.<br/><strong class="nk gv">Most commonly used:</strong> <a class="af pr" href="http://necolas.github.io/normalize.css" rel="noopener ugc nofollow" target="_blank">http://necolas.github.io/normalize.css</a><br/><strong class="nk gv">Default styles here for browsers:</strong> <a class="af pr" href="https://browserdefaultstyles.com/" rel="noopener ugc nofollow" target="_blank">https://browserdefaultstyles.com/</a></p></div></div></div><div class="ab cb os ot ou ov" role="separator"><span class="ow by bm ox oy oz"></span><span class="ow by bm ox oy oz"></span><span class="ow by bm ox oy"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="1b5a" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">ReactJS : </strong>ReactJS does not need any introduction. We know very well how popular this framework is among Frontend developers in the tech industry. If you are interested to know more about the popular and widely used frontend frameworks, Read here - <a class="af pr" href="https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/" rel="noopener ugc nofollow" target="_blank"><strong class="nk gv">https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/</strong></a><br/>Here I am listing down a few of my favourite ReactJS questions that you can explore.</p><p id="efb2" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">1.What do you keep in mind when declaring variables using let or const?</strong><br/>You can use either let or const by keeping a few things in mind. Use const when you don’t want to share the name with a function or a variable in the same scope to mitigate error. You can follow the rules of const and let when declaring your state to determine if you should use let or const.<br/>Front tooling is very sophisticated and errors can be caught at development time with linters so you don’t have to worry if you have used the same name by mistake.</p><p id="0b81" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">2.Can you initialise state in useState hook from a function?</strong><br/><strong class="nk gv">Ans: </strong>Yes, we can initialise the state by making use of function. Here I am going to call the function getUserDetails to fetch the initial value for user details through the REST API and create new state userDetails. Notice that I am using the arrow function to execute getUserDetails. We want the function to be executed only once at the time of initial render.</p><p id="87c8" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk">Read more ways to do initialisation: <a class="af pr" href="https://medium.com/front-end-weekly/usestate-this-very-minute-a4c246316b98" rel="noopener">https://medium.com/front-end-weekly/usestate-this-very-minute-a4c246316b98</a></p><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pz"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*RQQQo8J3T1XxHK7M.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*RQQQo8J3T1XxHK7M.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*RQQQo8J3T1XxHK7M.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*RQQQo8J3T1XxHK7M.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*RQQQo8J3T1XxHK7M.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*RQQQo8J3T1XxHK7M.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*RQQQo8J3T1XxHK7M.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*RQQQo8J3T1XxHK7M.png 640w, https://miro.medium.com/v2/resize:fit:720/0*RQQQo8J3T1XxHK7M.png 720w, https://miro.medium.com/v2/resize:fit:750/0*RQQQo8J3T1XxHK7M.png 750w, https://miro.medium.com/v2/resize:fit:786/0*RQQQo8J3T1XxHK7M.png 786w, https://miro.medium.com/v2/resize:fit:828/0*RQQQo8J3T1XxHK7M.png 828w, https://miro.medium.com/v2/resize:fit:1100/0*RQQQo8J3T1XxHK7M.png 1100w, https://miro.medium.com/v2/resize:fit:1400/0*RQQQo8J3T1XxHK7M.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="75" loading="eager" role="presentation"/></picture></div></div></figure><p id="efcf" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">3. What are the aspects you will consider when making a decision to use between Prop drilling</strong> <strong class="nk gv">and use Context?</strong><br/>Component communication is an essential aspect of any React Project. Parent to Child , Child to Parent and sibling Components communication. You might have come across a situation where you need to make a decision whether to use Props or Context . Here are few things you may consider:<br/><strong class="nk gv">1. Complexity:</strong> Always start simple and pass data using Props. Prop tunneling/drilling can be a good choice to keep things simple and easy for implementation purposes.<br/><strong class="nk gv">2. Re-rendering:</strong> Do you want to re-render your components? Context API will cause re-rendering of components whenever Provider value changes, even if component is not using this data.<br/><strong class="nk gv">3. Scope of Data: </strong>Is it global data that is required by Children,Grandchildren or complex nested components? Identify these and make your decision.<br/><strong class="nk gv">4. Frequency of changes: </strong>How frequently is the data going to be changed ? If it is changing too frequently then avoid context API.</p><p id="b76a" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">4.When do you use useRef hook?<br/>useRef</strong> hook accepts one argument and returns a reference, having a special property current. Use useRef hook when:<br/><strong class="nk gv">1. </strong>You don’t want to re-render your component on value change.<br/><strong class="nk gv">2. </strong>Want to have<strong class="nk gv"> </strong>persisted Reference for the lifetime of the component/ between component re-renderings.<br/><strong class="nk gv">3.</strong> You want the value update to be synchronous and it is available right away.<br/><strong class="nk gv">4. </strong>When you want to access a DOM element. For example you want to get video duration once video metadata is loaded. Here is sample example of useRef Hook :</p><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pp"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*aa-BX5MwBJCyPTKM5_htBw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*aa-BX5MwBJCyPTKM5_htBw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*aa-BX5MwBJCyPTKM5_htBw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*aa-BX5MwBJCyPTKM5_htBw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*aa-BX5MwBJCyPTKM5_htBw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*aa-BX5MwBJCyPTKM5_htBw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*aa-BX5MwBJCyPTKM5_htBw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*aa-BX5MwBJCyPTKM5_htBw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*aa-BX5MwBJCyPTKM5_htBw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*aa-BX5MwBJCyPTKM5_htBw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*aa-BX5MwBJCyPTKM5_htBw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*aa-BX5MwBJCyPTKM5_htBw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*aa-BX5MwBJCyPTKM5_htBw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*aa-BX5MwBJCyPTKM5_htBw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="1524" loading="lazy" role="presentation"/></picture></div></div></figure><p id="73d1" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">5.When will you go for Higher order component?</strong><br/>Higher Order Component is a pattern which is used to make component logic reusable and they also have to render some UI. It takes component as an argument and return a new component without producing any side effects.<br/><strong class="nk gv">When to create</strong> : I will implement HOC when I want to avoid myself from repeating logic. You do not want to repeat yourself to check if user has the correct role to display role based CTAs, Redirection to Pages and customise the view.<br/>Below is sample code snippets of <strong class="nk gv">RbacManager HOC</strong>. <br/>We want to show Switch User functionality only for Internal role and hide it for any other User role. We have created RbacManager higher order component which takes SwitchUser component and based on access return component.</p><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pp"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*PKpyIQjeAQ2_byxAif0EUA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*PKpyIQjeAQ2_byxAif0EUA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*PKpyIQjeAQ2_byxAif0EUA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*PKpyIQjeAQ2_byxAif0EUA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*PKpyIQjeAQ2_byxAif0EUA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*PKpyIQjeAQ2_byxAif0EUA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*PKpyIQjeAQ2_byxAif0EUA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*PKpyIQjeAQ2_byxAif0EUA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*PKpyIQjeAQ2_byxAif0EUA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*PKpyIQjeAQ2_byxAif0EUA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*PKpyIQjeAQ2_byxAif0EUA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*PKpyIQjeAQ2_byxAif0EUA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*PKpyIQjeAQ2_byxAif0EUA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*PKpyIQjeAQ2_byxAif0EUA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="700" loading="lazy" role="presentation"/></picture></div></div></figure><figure class="oh oi oj ok ol om oe of paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="oe of pp"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*JJJWllOsBRjzKsheOEQaTQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*JJJWllOsBRjzKsheOEQaTQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*JJJWllOsBRjzKsheOEQaTQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*JJJWllOsBRjzKsheOEQaTQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*JJJWllOsBRjzKsheOEQaTQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*JJJWllOsBRjzKsheOEQaTQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*JJJWllOsBRjzKsheOEQaTQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*JJJWllOsBRjzKsheOEQaTQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*JJJWllOsBRjzKsheOEQaTQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*JJJWllOsBRjzKsheOEQaTQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*JJJWllOsBRjzKsheOEQaTQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*JJJWllOsBRjzKsheOEQaTQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*JJJWllOsBRjzKsheOEQaTQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*JJJWllOsBRjzKsheOEQaTQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mp or c" width="700" height="268" loading="lazy" role="presentation"/></picture></div></div></figure></div></div></div><div class="ab cb os ot ou ov" role="separator"><span class="ow by bm ox oy oz"></span><span class="ow by bm ox oy oz"></span><span class="ow by bm ox oy"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="def5" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk">Having been on both sides of the table as an interviewer and an interviewee for 8 years, I’ve learned a valuable lesson from my experience — <strong class="nk gv">building a strong foundation is paramount</strong>. A solid understanding of the basics will not only help you clear interviews but also enable you to grasp advanced topics and enhance your skills. 🧱💪 Highlight your learnings, provide code examples, write clean & reusable code to showcase your knowledge and your eagerness to grow.</p><p id="916b" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">If you think anything could be improved in this article or you have any questions, let me know in the comments! Thanks for reading. Feel free to share or hit the clap button as many times as you want to show your appreciation.</strong></p></div></div></div><div class="ab cb os ot ou ov" role="separator"><span class="ow by bm ox oy oz"></span><span class="ow by bm ox oy oz"></span><span class="ow by bm ox oy"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="2f17" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><strong class="nk gv">Resource: </strong><br/><a class="af pr" href="https://www.debugbear.com/blog/react-rerenders" rel="noopener ugc nofollow" target="_blank">https://www.debugbear.com/blog/react-rerenders</a><br/><a class="af pr" href="https://blog.logrocket.com/react-memo-vs-usememo/" rel="noopener ugc nofollow" target="_blank">https://blog.logrocket.com/react-memo-vs-usememo/</a><br/><a class="af pr" href="https://tarunnagpal78.medium.com/tutorial-how-to-create-rbac-role-based-access-control-in-reactjs-87cb9a960cf3" rel="noopener">https://tarunnagpal78.medium.com/tutorial-how-to-create-rbac-role-based-access-control-in-reactjs-87cb9a960cf3</a></p><p id="0f74" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><em class="py">More content at </em><a class="af pr" href="https://plainenglish.io/" rel="noopener ugc nofollow" target="_blank"><strong class="nk gv"><em class="py">PlainEnglish.io</em></strong></a><em class="py">.</em></p><p id="21b4" class="pw-post-body-paragraph ni nj gu nk b hs nl nm nn hv no np nq nr ns nt nu nv nw nx ny nz oa ob oc od gn bk"><em class="py">Sign up for our </em><a class="af pr" href="http://newsletter.plainenglish.io/" rel="noopener ugc nofollow" target="_blank"><strong class="nk gv"><em class="py">free weekly newsletter</em></strong></a><em class="py">. Follow us on </em><a class="af pr" href="https://twitter.com/inPlainEngHQ" rel="noopener ugc nofollow" target="_blank"><strong class="nk gv"><em class="py">Twitter</em></strong></a>, <a class="af pr" href="https://www.linkedin.com/company/inplainenglish/" rel="noopener ugc nofollow" target="_blank"><strong class="nk gv"><em class="py">LinkedIn</em></strong></a><em class="py">, </em><a class="af pr" href="https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw" rel="noopener ugc nofollow" target="_blank"><strong class="nk gv"><em class="py">YouTube</em></strong></a><em class="py">, and </em><a class="af pr" href="https://discord.gg/GtDtUAvyhW" rel="noopener ugc nofollow" target="_blank"><strong class="nk gv"><em class="py">Discord</em></strong></a><strong class="nk gv"><em class="py">.</em></strong></p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="qa qb ab jm"><div class="qc ab"><a class="qd ay am ao" href="https://medium.com/tag/web-development?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><div class="qe fj cx qf ge qg qh bf b bg z bk qi">Web Development</div></a></div><div class="qc ab"><a class="qd ay am ao" href="https://medium.com/tag/interview-questions?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><div class="qe fj cx qf ge qg qh bf b bg z bk qi">Interview Questions</div></a></div><div class="qc ab"><a class="qd ay am ao" href="https://medium.com/tag/css?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><div class="qe fj cx qf ge qg qh bf b bg z bk qi">CSS</div></a></div><div class="qc ab"><a class="qd ay am ao" href="https://medium.com/tag/react?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><div class="qe fj cx qf ge qg qh bf b bg z bk qi">React</div></a></div><div class="qc ab"><a class="qd ay am ao" href="https://medium.com/tag/front-end-development?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><div class="qe fj cx qf ge qg qh bf b bg z bk qi">Front End Development</div></a></div></div></div></div><div class="l"></div><footer class="qj ot qk ql qm ab q qn iw c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp qo"><div class="ab q lh"><div class="qp l"><span class="l qq qr qs e d"><div class="ab q lh li"><div class="pw-multi-vote-icon fj jq lj lk ll"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fjavascript-in-plain-english%2Facee97282513&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&user=Shivani+Gupta&userId=fda018b60e78&source=---footer_actions--acee97282513---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lm ao ln lo lp lq am lr ls lt ll"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lu lv lw lx ly lz ma"><p class="bf b dv z du"><span class="mb">--</span></p></div></div></span><span class="l h g f qt qu"><div class="ab q lh li"><div class="pw-multi-vote-icon fj jq lj lk ll"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fjavascript-in-plain-english%2Facee97282513&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&user=Shivani+Gupta&userId=fda018b60e78&source=---footer_actions--acee97282513---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lm ao ln lo lp lq am lr ls lt ll"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lu lv lw lx ly lz ma"><p class="bf b dv z du"><span class="mb">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao lm mc md ab q fk me mf" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mg"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg></button></div></div></div></div><div class="ab q"><div class="oz l jj"><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" data-testid="footerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Facee97282513&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&source=---footer_actions--acee97282513---------------------bookmark_footer-----------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mi" 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 class="oz l jj"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al mq an ao ap ex mr ms mf mt"><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="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="qv qw qx qy qz l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ra bh r rb"></div><div class="rc l"><div class="ab rd re rf jl jk"><div class="rg rh ri rj rk rl rm rn ro rp ab cp"><div class="h k"><a href="https://javascript.plainenglish.io/?source=post_page---post_publication_info--acee97282513--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="JavaScript in Plain English" class="rq in io cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*yUNfohs9jA6GCDmyCYJTvA@2x.png" width="48" height="48" loading="lazy"/><div class="rq l io in fs n fr rr"></div></div></a></div><div class="j i d"><a href="https://javascript.plainenglish.io/?source=post_page---post_publication_info--acee97282513--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="JavaScript in Plain English" class="rq rt rs cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*yUNfohs9jA6GCDmyCYJTvA@2x.png" width="64" height="64" loading="lazy"/><div class="rq l rs rt fs n fr rr"></div></div></a></div><div class="j i d ru jj"><div class="ab"><span><a class="bf b bg z rv qe rw rx ry rz sa ev ew sb sc sd fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fjavascript-in-plain-english&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&collection=JavaScript+in+Plain+English&collectionId=4b3a1ed4f11c&source=post_page---post_publication_info--acee97282513---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co se"><div class="sf sg sh si sj l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://javascript.plainenglish.io/?source=post_page---post_publication_info--acee97282513--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf sl sm sn so sp sq sr nr ss st nv su sv nz sw sx bk"><span class="gn sk">Published in <!-- -->JavaScript in Plain English</span></h2></a><div class="qc ab im"><div class="l jj"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" rel="noopener follow" href="/followers?source=post_page---post_publication_info--acee97282513--------------------------------">109K Followers</a></span></div><div class="bf b bg z du ab jp"><span class="jd l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jc" rel="noopener follow" href="/unveiling-javascript-mutationobserver-harnessing-the-power-of-dynamic-dom-monitoring-65cd63511e99?source=post_page---post_publication_info--acee97282513--------------------------------">Last published <!-- -->1 day ago</a></div></div><div class="sy l"><p class="bf b bg z bk"><span class="gn">New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.</span></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z rv qe rw rx ry rz sa ev ew sb sc sd fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fjavascript-in-plain-english&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&collection=JavaScript+in+Plain+English&collectionId=4b3a1ed4f11c&source=post_page---post_publication_info--acee97282513---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div></div><div class="ab rd re rf jl jk"><div class="rg rh ri rj rk rl rm rn ro rp ab cp"><div class="h k"><a tabindex="0" href="https://gshivani.medium.com/?source=post_page---post_author_info--acee97282513--------------------------------" rel="noopener follow"><div class="l fj"><img alt="Shivani Gupta" class="l fd by io in cx" src="https://miro.medium.com/v2/resize:fill:96:96/2*7Vr4JCeuKrF9jDy9_YEIqQ.jpeg" width="48" height="48" loading="lazy"/><div class="fr by l io in fs n ay rr"></div></div></a></div><div class="j i d"><a tabindex="0" href="https://gshivani.medium.com/?source=post_page---post_author_info--acee97282513--------------------------------" rel="noopener follow"><div class="l fj"><img alt="Shivani Gupta" class="l fd by rs rt cx" src="https://miro.medium.com/v2/resize:fill:128:128/2*7Vr4JCeuKrF9jDy9_YEIqQ.jpeg" width="64" height="64" loading="lazy"/><div class="fr by l rs rt fs n ay rr"></div></div></a></div><div class="j i d ru jj"><div class="ab"><span><a class="bf b bg z rv qe rw rx ry rz sa ev ew sb sc sd fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Ffda018b60e78&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&user=Shivani+Gupta&userId=fda018b60e78&source=post_page-fda018b60e78--post_author_info--acee97282513---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co se"><div class="sf sg sh si sj l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://gshivani.medium.com/?source=post_page---post_author_info--acee97282513--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf sl sm sn so sp sq sr nr ss st nv su sv nz sw sx bk"><span class="gn sk">Written by <!-- -->Shivani Gupta</span></h2></a><div class="qc ab im"><div class="l jj"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" href="https://gshivani.medium.com/followers?source=post_page---post_author_info--acee97282513--------------------------------" rel="noopener follow">157 Followers</a></span></div><div class="bf b bg z du ab jp"><span class="jd l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jc" href="https://medium.com/@gshivani/following?source=post_page---post_author_info--acee97282513--------------------------------" rel="noopener follow">106 Following</a></div></div><div class="sy l"><p class="bf b bg z bk"><span class="gn">I’m a Front-End Developer based in Bangalore, India. I believe in pretty designs and clean coding.</span></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z rv qe rw rx ry rz sa ev ew sb sc sd fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Ffda018b60e78&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2Fcrack-your-web-development-interviews-acee97282513&user=Shivani+Gupta&userId=fda018b60e78&source=post_page-fda018b60e78--post_author_info--acee97282513---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div></div></div></div><div class="sz l"><div class="ra bh r ta tb tc td te"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf sl tf hu tg th hx ti tj tk tl tm tn to tp tq tr bk">No responses yet</h2><div class="ab ts"><div><div class="bm" aria-hidden="false"><a class="tt tu" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--acee97282513--------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div></div></div></div><div class="tv tw tx ty tz l bx"><div class="h k j"><div class="ra bh ua ub"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="uc ab lh jm"><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/about?autoplay=1&source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">About</p></a></div><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Careers</p></a></div><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="pressinquiries@medium.com?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="ud ue l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="ud l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/business?source=post_page-----acee97282513--------------------------------" rel="noopener follow"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20241129-135346-5cf0f044cd"</script><script>window.__GRAPHQL_URI__ = "https://javascript.plainenglish.io/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"This request is not using the cache middleware worker","group":"disabled","tags":["group-edgeCachePosts","post-acee97282513","user-fda018b60e78","collection-4b3a1ed4f11c"],"serverVariantState":"","middlewareEnabled":false,"cacheStatus":"DYNAMIC","shouldUseCache":false,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"COLLECTION","id":"4b3a1ed4f11c","explicit":true},"viewerIsBot":false},"debug":{"requestId":"ed7b2644-e01f-47bc-8951-5396cc986b4a","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-017c67f9ad3b16ff51f000f2792bbcc7-9ab1d7649fbfd4da-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fjavascript.plainenglish.io\u002Fcrack-your-web-development-interviews-acee97282513","host":"javascript.plainenglish.io","hostname":"javascript.plainenglish.io","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"?source=user_profile_page---------1-------------fda018b60e78---------------"},"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\":\"javascript.plainenglish.io\"})":{"__ref":"Collection:4b3a1ed4f11c"},"variantFlags":[{"__typename":"VariantFlag","name":"enable_pp_country_expansion","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_google_one_tap","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_aspiriational","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_home_post_menu","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cache_less_following_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recaptcha_enterprise","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rito_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_apple_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_stripe_customers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_premium_plan","valueType":{"__typename":"VariantFlagString","value":"12a660186432"}},{"__typename":"VariantFlag","name":"enable_apple_sign_in","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_legacy_feed_in_iceland","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_two_hour_refresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_app_flirty_thirty","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_archive_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_rating_prompt_stories_read_threshold","valueType":{"__typename":"VariantFlagNumber","value":2}},{"__typename":"VariantFlag","name":"mobile_custom_app_icon","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reengagement_notification_duration","valueType":{"__typename":"VariantFlagNumber","value":3}},{"__typename":"VariantFlag","name":"android_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_explore_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_medium2_kbfd","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_lock_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"rex_generator_max_candidates","valueType":{"__typename":"VariantFlagNumber","value":1000}},{"__typename":"VariantFlag","name":"ios_iceland_nux","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_billing_frequency_on_step2","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_verified_book_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reader_fair_distribution_non_qp","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_social_share_sheet","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_maim_the_meter","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_syntax_highlight","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_trial_membership","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_explicit_signals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_validate_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_simplified_digest_v2_b","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_starspace","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members_username_selection","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier_badge","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_speechify_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_topic_portals_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_verifications_service","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_yearly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"enable_auto_follow_on_subscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_speechify_widget","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_post_referrers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_homepage","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_c","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"redefined_top_posts","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_footer_app_buttons","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_easy_resubscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_marketing_emails","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recirc_model","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"coronavirus_topic_recirc","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"textshots_userid","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"enable_sprig","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_bg_post_post","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ranker_v10","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"skip_fs_cache_user_vals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_verified_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_programming","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lo_homepage","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"signin_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"available_annual_premium_plan","valueType":{"__typename":"VariantFlagString","value":"4a442ace1476"}},{"__typename":"VariantFlag","name":"enable_branch_io","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_deprecate_legacy_providers_v3","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tick_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_miro_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_aggregator_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_abandoned_cart_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_members_only_audio","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pill_based_home_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_publication_hierarchy_web","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_boost_nia_v01","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_all_recs_surfaces","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_signup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards_byline","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_automod","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_lists_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"browsable_stream_config_bucket","valueType":{"__typename":"VariantFlagString","value":"curated-topics"}},{"__typename":"VariantFlag","name":"enable_android_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_server_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_image_sharer","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_diversification_rex","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_switch_plan_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_integration","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_newsletter_lo_flow_custom_domains","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"signup_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses_input","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_plan","valueType":{"__typename":"VariantFlagString","value":"60e220181034"}},{"__typename":"VariantFlag","name":"enable_android_dynamic_aspirational_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_client","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tribute_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_updated_pub_recs_ui","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_monthly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"can_receive_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_conversion_ranker_v2","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_creator_welcome_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_explicit_signals_updated_post_previews","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_editor_new_publishing_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_in_app_free_trial","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_group_gifting","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_autorefresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_user_follows","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pre_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"onboarding_tags_from_top_views","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"disable_partner_program_enrollment","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_bayesian_average_pub_search","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_eventstats_event_processing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recommended_publishers_query","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_test_auth","valueType":{"__typename":"VariantFlagString","value":"disallow"}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"num_post_bottom_responses_to_show","valueType":{"__typename":"VariantFlagString","value":"1"}},{"__typename":"VariantFlag","name":"enable_braintree_paypal","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_create_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ml_rank_rex_anno","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_see_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tag_recs","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_avatar_upload","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_intrinsic_automatic_actions","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_response_markup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_reading_history","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_dynamic_programming_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_continue_this_thread","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_apple_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_conversion_model_v2","valueType":{"__typename":"VariantFlagString","value":"group_2"}},{"__typename":"VariantFlag","name":"enable_google_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_display_paywall_after_onboarding","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_topic_portals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_iceland_forced_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_remove_twitter_onboarding_step","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_import","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_configure_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"glyph_font_set","valueType":{"__typename":"VariantFlagString","value":"m2-unbound-source-serif-pro"}},{"__typename":"VariantFlag","name":"available_annual_plan","valueType":{"__typename":"VariantFlagString","value":"2c754bcc2995"}},{"__typename":"VariantFlag","name":"enable_entities_to_follow_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_seamless_social_sharing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"goliath_externalsearch_enable_comment_deindexation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"can_send_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_aurora_pub_follower_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_google_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_first_story","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_access","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_manage_membership_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_new_push_notification_endpoint","valueType":{"__typename":"VariantFlagBoolean","value":true}}],"postResult({\"id\":\"acee97282513\"})":{"__ref":"Post:acee97282513"}},"ImageMetadata:1*APjYv_YDdw1J7WCT4uKh9Q.png":{"__typename":"ImageMetadata","id":"1*APjYv_YDdw1J7WCT4uKh9Q.png"},"Collection:4b3a1ed4f11c":{"__typename":"Collection","id":"4b3a1ed4f11c","favicon":{"__ref":"ImageMetadata:1*APjYv_YDdw1J7WCT4uKh9Q.png"},"customStyleSheet":{"__ref":"CustomStyleSheet:b2f699e1b4ad"},"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFE2F4FF","point":0},{"__typename":"ColorPoint","color":"#FFDCF2FF","point":0.1},{"__typename":"ColorPoint","color":"#FFD7F1FF","point":0.2},{"__typename":"ColorPoint","color":"#FFD1EFFF","point":0.3},{"__typename":"ColorPoint","color":"#FFCBEDFF","point":0.4},{"__typename":"ColorPoint","color":"#FFC4EBFF","point":0.5},{"__typename":"ColorPoint","color":"#FFBEEAFF","point":0.6},{"__typename":"ColorPoint","color":"#FFB7E8FF","point":0.7},{"__typename":"ColorPoint","color":"#FFB1E5FF","point":0.8},{"__typename":"ColorPoint","color":"#FFA9E3FF","point":0.9},{"__typename":"ColorPoint","color":"#FFA2E1FF","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF297AFF","point":0},{"__typename":"ColorPoint","color":"#FF2B73FF","point":0.1},{"__typename":"ColorPoint","color":"#FF2C6CFB","point":0.2},{"__typename":"ColorPoint","color":"#FF2C64E0","point":0.3},{"__typename":"ColorPoint","color":"#FF2B5BC5","point":0.4},{"__typename":"ColorPoint","color":"#FF2952AB","point":0.5},{"__typename":"ColorPoint","color":"#FF274992","point":0.6},{"__typename":"ColorPoint","color":"#FF233E79","point":0.7},{"__typename":"ColorPoint","color":"#FF1D3361","point":0.8},{"__typename":"ColorPoint","color":"#FF172749","point":0.9},{"__typename":"ColorPoint","color":"#FF0F1A31","point":1}]},"tintBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FF0000FF","colorPoints":[{"__typename":"ColorPoint","color":"#FF0000FF","point":0},{"__typename":"ColorPoint","color":"#FF004BF8","point":0.1},{"__typename":"ColorPoint","color":"#FF2A6AF9","point":0.2},{"__typename":"ColorPoint","color":"#FF4A82FD","point":0.3},{"__typename":"ColorPoint","color":"#FF6597FF","point":0.4},{"__typename":"ColorPoint","color":"#FF7FABFF","point":0.5},{"__typename":"ColorPoint","color":"#FF98BDFF","point":0.6},{"__typename":"ColorPoint","color":"#FFAFCFFF","point":0.7},{"__typename":"ColorPoint","color":"#FFC6E0FF","point":0.8},{"__typename":"ColorPoint","color":"#FFDCF0FF","point":0.9},{"__typename":"ColorPoint","color":"#FFF2FFFF","point":1}]}},"domain":"javascript.plainenglish.io","slug":"javascript-in-plain-english","googleAnalyticsId":null,"editors":[{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:a7b125868703"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:d44045e01651"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:5fddac2241fc"}}],"name":"JavaScript in Plain English","avatar":{"__ref":"ImageMetadata:1*yUNfohs9jA6GCDmyCYJTvA@2x.png"},"description":"New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.","subscriberCount":109814,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:65cd63511e99"}]},"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:4b3a1ed4f11c-viewerId:lo_f64c663fa335"},"twitterUsername":"inPlainEngHQ","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*Q1MaP5W5ig0jfVG1A2vt8Q@2x.png"}},"CustomStyleSheet:b2f699e1b4ad":{"__typename":"CustomStyleSheet","id":"b2f699e1b4ad","global":{"__typename":"GlobalStyles","colorPalette":{"__typename":"StyleSheetColorPalette","primary":null,"background":null},"fonts":{"__typename":"StyleSheetFonts","font1":{"__typename":"StyleSheetFont","name":"SANS_SERIF_1"},"font2":{"__typename":"StyleSheetFont","name":"SANS_SERIF_1"},"font3":{"__typename":"StyleSheetFont","name":"SERIF_2"}}},"header":{"__typename":"HeaderStyles","backgroundImage":null}},"User:a7b125868703":{"__typename":"User","id":"a7b125868703"},"User:d44045e01651":{"__typename":"User","id":"d44045e01651"},"User:5fddac2241fc":{"__typename":"User","id":"5fddac2241fc"},"ImageMetadata:1*yUNfohs9jA6GCDmyCYJTvA@2x.png":{"__typename":"ImageMetadata","id":"1*yUNfohs9jA6GCDmyCYJTvA@2x.png"},"User:e01ee90b910e":{"__typename":"User","id":"e01ee90b910e","customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"skchawala.medium.com"}},"hasSubdomain":true,"username":"skchawala"},"Post:65cd63511e99":{"__typename":"Post","id":"65cd63511e99","firstPublishedAt":1732859526134,"creator":{"__ref":"User:e01ee90b910e"},"collection":{"__ref":"Collection:4b3a1ed4f11c"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fjavascript.plainenglish.io\u002Funveiling-javascript-mutationobserver-harnessing-the-power-of-dynamic-dom-monitoring-65cd63511e99","sequence":null,"uniqueSlug":"unveiling-javascript-mutationobserver-harnessing-the-power-of-dynamic-dom-monitoring-65cd63511e99"},"LinkedAccounts:fda018b60e78":{"__typename":"LinkedAccounts","mastodon":null,"id":"fda018b60e78"},"UserViewerEdge:userId:fda018b60e78-viewerId:lo_f64c663fa335":{"__typename":"UserViewerEdge","id":"userId:fda018b60e78-viewerId:lo_f64c663fa335","isFollowing":false,"isUser":false,"isMuting":false},"NewsletterV3:788e26056fcc":{"__typename":"NewsletterV3","id":"788e26056fcc","type":"NEWSLETTER_TYPE_AUTHOR","slug":"fda018b60e78","name":"fda018b60e78","collection":null,"user":{"__ref":"User:fda018b60e78"}},"User:fda018b60e78":{"__typename":"User","id":"fda018b60e78","name":"Shivani Gupta","username":"gshivani","newsletterV3":{"__ref":"NewsletterV3:788e26056fcc"},"linkedAccounts":{"__ref":"LinkedAccounts:fda018b60e78"},"isSuspended":false,"imageId":"2*7Vr4JCeuKrF9jDy9_YEIqQ.jpeg","mediumMemberAt":0,"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":157,"followingCount":88,"collectionFollowingCount":18},"customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"gshivani.medium.com"}},"hasSubdomain":true,"bio":"I’m a Front-End Developer based in Bangalore, India. I believe in pretty designs and clean coding.","isPartnerProgramEnrolled":false,"viewerEdge":{"__ref":"UserViewerEdge:userId:fda018b60e78-viewerId:lo_f64c663fa335"},"viewerIsUser":false,"postSubscribeMembershipUpsellShownAt":0,"membership":null,"allowNotes":true,"twitterScreenName":""},"Paragraph:e508e9c08e6e_0":{"__typename":"Paragraph","id":"e508e9c08e6e_0","name":"edfc","type":"H3","href":null,"layout":null,"metadata":null,"text":"Crack your Front-End Development Interviews","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":11,"end":21,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_1":{"__typename":"Paragraph","id":"e508e9c08e6e_1","name":"b21a","type":"H4","href":null,"layout":null,"metadata":null,"text":"Are you preparing for web development interviews? Transitioning between roles can be challenging, but with the right foundation and knowledge, you can excel. Dive into this article and discover some of my favourite interview questions, scenario-based queries, and tips to help you showcase your skills. From CSS to ReactJS, I’ve got you covered. Let’s boost your confidence and prepare you for success! 💪🚀","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_2":{"__typename":"Paragraph","id":"e508e9c08e6e_2","name":"a773","type":"P","href":null,"layout":null,"metadata":null,"text":"🌟💼 From painting dots in MNC to becoming a key Product developer, each switch in my career journey has come with its own set of challenges. I knew that transitioning wouldn’t be easy. Multiple rounds of interviews awaited me, covering topics like Frontend frameworks, Architecture & tooling, Data Structures & Algorithms, Cultural fit, and Raising the bar. I’m sure many of you can relate to this experience. 😅","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_3":{"__typename":"Paragraph","id":"e508e9c08e6e_3","name":"5e82","type":"P","href":null,"layout":null,"metadata":null,"text":"So, let’s dive in and explore these questions that will help you shine in your interviews. These questions, whether asked directly or indirectly, or based on real-life scenarios, can greatly assist you in clearing interviews and showcasing your expertise. 📝💡 Remember, preparation and a solid foundation are the keys to success! Best of luck! 🚀✨","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif":{"__typename":"ImageMetadata","id":"1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif","originalHeight":844,"originalWidth":1500,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_4":{"__typename":"Paragraph","id":"e508e9c08e6e_4","name":"8193","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_5":{"__typename":"Paragraph","id":"e508e9c08e6e_5","name":"62e9","type":"P","href":null,"layout":null,"metadata":null,"text":"CSS : I see a lot of people having love-hate relationships with CSS. Cascading Style Sheets is an amazing and powerful 💪 style sheet language if you understand it well.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":5,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*pJLQ9p4b5NOz0A_VEwlogg.png":{"__typename":"ImageMetadata","id":"1*pJLQ9p4b5NOz0A_VEwlogg.png","originalHeight":107,"originalWidth":490,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_6":{"__typename":"Paragraph","id":"e508e9c08e6e_6","name":"39ab","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*pJLQ9p4b5NOz0A_VEwlogg.png"},"text":"Twitter","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_7":{"__typename":"Paragraph","id":"e508e9c08e6e_7","name":"5d7b","type":"P","href":null,"layout":null,"metadata":null,"text":"Listing down few of my favourite CSS questions, you can explore.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_8":{"__typename":"Paragraph","id":"e508e9c08e6e_8","name":"4da2","type":"P","href":null,"layout":null,"metadata":null,"text":"1.What is the difference between Opacity and Alpha Transparency? \nI have seen a lot of developers making this mistake and use background-color with opacity and RGBA interchangeably. The opacity property sets the opacity for an element and makes the whole element transparent including its content.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":65,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":126,"end":155,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":160,"end":164,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_9":{"__typename":"Paragraph","id":"e508e9c08e6e_9","name":"b1ad","type":"PRE","href":null,"layout":null,"metadata":null,"text":"\u002F* Use of Opacity *\u002F\ndiv {\n background-color: #fbb626;\n opacity: 0.5;\n}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*fsd-QohNHTSSF4cnXOgDcA.png":{"__typename":"ImageMetadata","id":"1*fsd-QohNHTSSF4cnXOgDcA.png","originalHeight":558,"originalWidth":1266,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_10":{"__typename":"Paragraph","id":"e508e9c08e6e_10","name":"7a4e","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*fsd-QohNHTSSF4cnXOgDcA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_11":{"__typename":"Paragraph","id":"e508e9c08e6e_11","name":"8bd3","type":"P","href":null,"layout":null,"metadata":null,"text":"While RGB colour values with an alpha channel only makes the element background transparent leaving its content as it is.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*0MmYUrOuDjafe-YBo7UYRQ.png":{"__typename":"ImageMetadata","id":"1*0MmYUrOuDjafe-YBo7UYRQ.png","originalHeight":522,"originalWidth":1266,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_12":{"__typename":"Paragraph","id":"e508e9c08e6e_12","name":"e015","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*0MmYUrOuDjafe-YBo7UYRQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*OKH_G-3TGedHf506Vb3ebQ.png":{"__typename":"ImageMetadata","id":"1*OKH_G-3TGedHf506Vb3ebQ.png","originalHeight":326,"originalWidth":1206,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_13":{"__typename":"Paragraph","id":"e508e9c08e6e_13","name":"abf2","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*OKH_G-3TGedHf506Vb3ebQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_14":{"__typename":"Paragraph","id":"e508e9c08e6e_14","name":"47f9","type":"P","href":null,"layout":null,"metadata":null,"text":"2. What are the drawbacks of Inline CSS?\nThis is one of the most common mistakes I see developers making by writing inline css. The reason could be specificity issue, no idea where the style will stay or short period deadline 😫","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":40,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_15":{"__typename":"Paragraph","id":"e508e9c08e6e_15","name":"ba40","type":"P","href":null,"layout":null,"metadata":null,"text":"#1. You can not use ::before and ::after pseudo-elements.\n#2. You can not reuse the style or extend it further.\n#3. You will need to use !important to overriding inline styles which is not recommended. Read more : https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FSpecificity#the_!important_exception\n#4. Your css file are cached on the browser. Inline CSS hampers caching and you will end up loading data every time a page is refreshed.\n#5. CSS is about keeping presentation separate from markup or else it will add lots of maintenance load.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":214,"end":299,"href":"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FSpecificity#the_!important_exception","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":4,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":58,"end":61,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":112,"end":116,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":214,"end":299,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":300,"end":303,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":437,"end":441,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*4NO-ROLw_7VJKMl8.jpg":{"__typename":"ImageMetadata","id":"0*4NO-ROLw_7VJKMl8.jpg","originalHeight":720,"originalWidth":1280,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_16":{"__typename":"Paragraph","id":"e508e9c08e6e_16","name":"8fb1","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*4NO-ROLw_7VJKMl8.jpg"},"text":"Source","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":6,"href":"https:\u002F\u002Fmemegenerator.net\u002Finstance\u002F68409885\u002Fgame-of-thrones-dancing-maste-what-do-we-say-to-inline-css-styles-not-today","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_17":{"__typename":"Paragraph","id":"e508e9c08e6e_17","name":"6e67","type":"P","href":null,"layout":null,"metadata":null,"text":"3.What is the difference between CSS border and CSS outline property?\nBorder property is part of The Box model. On the other hand outline is not part of the box model and it is created outside the element.\nIn the below example we have given a border 10px and it is getting reflected in the box model. We have used the same 10px for outline and it is not shown in the Box Model. It is added on top of the Box model and does not affect elements height and width.\n📓 You will need to take care of element’s outline from getting overlapped with other elements in view.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":96,"end":110,"href":"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn\u002FCSS\u002FBuilding_blocks\u002FThe_box_model","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":70,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*6uqoglV1egFqso6ye0juKw.png":{"__typename":"ImageMetadata","id":"1*6uqoglV1egFqso6ye0juKw.png","originalHeight":596,"originalWidth":1266,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_18":{"__typename":"Paragraph","id":"e508e9c08e6e_18","name":"5ef4","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*6uqoglV1egFqso6ye0juKw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*wff0SQ1NE9ZkNLoK8rhcXw.png":{"__typename":"ImageMetadata","id":"1*wff0SQ1NE9ZkNLoK8rhcXw.png","originalHeight":294,"originalWidth":404,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_19":{"__typename":"Paragraph","id":"e508e9c08e6e_19","name":"4f70","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*wff0SQ1NE9ZkNLoK8rhcXw.png"},"text":"Box model","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*gDJlCbGpdEQopUcM6ql4yw.png":{"__typename":"ImageMetadata","id":"1*gDJlCbGpdEQopUcM6ql4yw.png","originalHeight":342,"originalWidth":742,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_20":{"__typename":"Paragraph","id":"e508e9c08e6e_20","name":"8f82","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*gDJlCbGpdEQopUcM6ql4yw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_21":{"__typename":"Paragraph","id":"e508e9c08e6e_21","name":"628a","type":"P","href":null,"layout":null,"metadata":null,"text":"4.How do you select a Unit for font-size?\nAns: Choosing a right unit is one of the most important aspect when working on adding responsiveness to your site or easing life of users by providing text scalability and accessibility. So how we choose right Unit, Let me help you on this. \n1. px : Most commonly used unit px is also known as fixed\u002FStatic unit. It allows developers to make the most accurate render but it fails to scale with browser size changes. \n2. rem: The rem stands for root element. The font-size in rem is dependent on the value of the root element (or the html element). The standard size for 1rem is 16px\n3. em : The em unit depends on the font size of the parent element. It looks at its immediate parent for font calculation and cascade till root element if needed to calculate \n4. percentage: Percents are also scalable. However, 100% is equal to the current font size. Think of it 2em is 2times larger, and 200% is 200percent of the font size.\nFinal verdict: Use REM when you need value according to the root. Use EM when you have to make more scaling than the root font size.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":575,"end":579,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":41,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":42,"end":46,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":287,"end":291,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":388,"end":409,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":459,"end":467,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":524,"end":566,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":620,"end":624,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":625,"end":633,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":801,"end":816,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":968,"end":983,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":913,"end":918,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*El_7OyGNt8x1ZOu1e_WNMQ.gif":{"__typename":"ImageMetadata","id":"1*El_7OyGNt8x1ZOu1e_WNMQ.gif","originalHeight":1314,"originalWidth":1500,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_22":{"__typename":"Paragraph","id":"e508e9c08e6e_22","name":"fff4","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*El_7OyGNt8x1ZOu1e_WNMQ.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_23":{"__typename":"Paragraph","id":"e508e9c08e6e_23","name":"b85b","type":"P","href":null,"layout":null,"metadata":null,"text":"5.How will you make sure that every browser renders HTML elements with visual consistency?\nAs a web developer, there are three major browsers i.e. Chrome, Firefox and Safari where you test your application on. If you have already done some browser testing then you must have faced challenges with visual inconsistency(font sizes, spaces and focus styles for form fields) in elements. This could be due to browser specific default styles that get applied to elements. We want elements to look the same irrespective of which browser we are viewing the application. In order to solve this problem we normalize CSS.\nMost commonly used: http:\u002F\u002Fnecolas.github.io\u002Fnormalize.css\nDefault styles here for browsers: https:\u002F\u002Fbrowserdefaultstyles.com\u002F","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":632,"end":670,"href":"http:\u002F\u002Fnecolas.github.io\u002Fnormalize.css","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":705,"end":738,"href":"https:\u002F\u002Fbrowserdefaultstyles.com\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":91,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":594,"end":610,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":612,"end":631,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":671,"end":704,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_24":{"__typename":"Paragraph","id":"e508e9c08e6e_24","name":"1b5a","type":"P","href":null,"layout":null,"metadata":null,"text":"ReactJS : ReactJS does not need any introduction. We know very well how popular this framework is among Frontend developers in the tech industry. If you are interested to know more about the popular and widely used frontend frameworks, Read here - https:\u002F\u002F2020.stateofjs.com\u002Fen-US\u002Ftechnologies\u002Ffront-end-frameworks\u002F\nHere I am listing down a few of my favourite ReactJS questions that you can explore.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":248,"end":315,"href":"https:\u002F\u002F2020.stateofjs.com\u002Fen-US\u002Ftechnologies\u002Ffront-end-frameworks\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":10,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":248,"end":315,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_25":{"__typename":"Paragraph","id":"e508e9c08e6e_25","name":"efb2","type":"P","href":null,"layout":null,"metadata":null,"text":"1.What do you keep in mind when declaring variables using let or const?\nYou can use either let or const by keeping a few things in mind. Use const when you don’t want to share the name with a function or a variable in the same scope to mitigate error. You can follow the rules of const and let when declaring your state to determine if you should use let or const.\nFront tooling is very sophisticated and errors can be caught at development time with linters so you don’t have to worry if you have used the same name by mistake.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":71,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_26":{"__typename":"Paragraph","id":"e508e9c08e6e_26","name":"0b81","type":"P","href":null,"layout":null,"metadata":null,"text":"2.Can you initialise state in useState hook from a function?\nAns: Yes, we can initialise the state by making use of function. Here I am going to call the function getUserDetails to fetch the initial value for user details through the REST API and create new state userDetails. Notice that I am using the arrow function to execute getUserDetails. We want the function to be executed only once at the time of initial render.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":60,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":61,"end":66,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_27":{"__typename":"Paragraph","id":"e508e9c08e6e_27","name":"87c8","type":"P","href":null,"layout":null,"metadata":null,"text":"Read more ways to do initialisation: https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fusestate-this-very-minute-a4c246316b98","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":37,"end":111,"href":"https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fusestate-this-very-minute-a4c246316b98","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*RQQQo8J3T1XxHK7M.png":{"__typename":"ImageMetadata","id":"0*RQQQo8J3T1XxHK7M.png","originalHeight":150,"originalWidth":1400,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_28":{"__typename":"Paragraph","id":"e508e9c08e6e_28","name":"9875","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*RQQQo8J3T1XxHK7M.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_29":{"__typename":"Paragraph","id":"e508e9c08e6e_29","name":"efcf","type":"P","href":null,"layout":null,"metadata":null,"text":"3. What are the aspects you will consider when making a decision to use between Prop drilling and use Context?\nComponent communication is an essential aspect of any React Project. Parent to Child , Child to Parent and sibling Components communication. You might have come across a situation where you need to make a decision whether to use Props or Context . Here are few things you may consider:\n1. Complexity: Always start simple and pass data using Props. Prop tunneling\u002Fdrilling can be a good choice to keep things simple and easy for implementation purposes.\n2. Re-rendering: Do you want to re-render your components? Context API will cause re-rendering of components whenever Provider value changes, even if component is not using this data.\n3. Scope of Data: Is it global data that is required by Children,Grandchildren or complex nested components? Identify these and make your decision.\n4. Frequency of changes: How frequently is the data going to be changed ? If it is changing too frequently then avoid context API.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":93,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":94,"end":110,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":397,"end":411,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":564,"end":580,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":748,"end":766,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":896,"end":921,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_30":{"__typename":"Paragraph","id":"e508e9c08e6e_30","name":"b76a","type":"P","href":null,"layout":null,"metadata":null,"text":"4.When do you use useRef hook?\nuseRef hook accepts one argument and returns a reference, having a special property current. Use useRef hook when:\n1. You don’t want to re-render your component on value change.\n2. Want to have persisted Reference for the lifetime of the component\u002F between component re-renderings.\n3. You want the value update to be synchronous and it is available right away.\n4. When you want to access a DOM element. For example you want to get video duration once video metadata is loaded. Here is sample example of useRef Hook :","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":37,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":146,"end":149,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":209,"end":212,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":224,"end":225,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":313,"end":315,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":392,"end":395,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*aa-BX5MwBJCyPTKM5_htBw.png":{"__typename":"ImageMetadata","id":"1*aa-BX5MwBJCyPTKM5_htBw.png","originalHeight":2756,"originalWidth":1266,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_31":{"__typename":"Paragraph","id":"e508e9c08e6e_31","name":"3f04","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*aa-BX5MwBJCyPTKM5_htBw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_32":{"__typename":"Paragraph","id":"e508e9c08e6e_32","name":"73d1","type":"P","href":null,"layout":null,"metadata":null,"text":"5.When will you go for Higher order component?\nHigher Order Component is a pattern which is used to make component logic reusable and they also have to render some UI. It takes component as an argument and return a new component without producing any side effects.\nWhen to create : I will implement HOC when I want to avoid myself from repeating logic. You do not want to repeat yourself to check if user has the correct role to display role based CTAs, Redirection to Pages and customise the view.\nBelow is sample code snippets of RbacManager HOC. \nWe want to show Switch User functionality only for Internal role and hide it for any other User role. We have created RbacManager higher order component which takes SwitchUser component and based on access return component.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":46,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":265,"end":279,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":532,"end":547,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*PKpyIQjeAQ2_byxAif0EUA.png":{"__typename":"ImageMetadata","id":"1*PKpyIQjeAQ2_byxAif0EUA.png","originalHeight":1266,"originalWidth":1266,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_33":{"__typename":"Paragraph","id":"e508e9c08e6e_33","name":"055f","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*PKpyIQjeAQ2_byxAif0EUA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*JJJWllOsBRjzKsheOEQaTQ.png":{"__typename":"ImageMetadata","id":"1*JJJWllOsBRjzKsheOEQaTQ.png","originalHeight":484,"originalWidth":1266,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:e508e9c08e6e_34":{"__typename":"Paragraph","id":"e508e9c08e6e_34","name":"6f73","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*JJJWllOsBRjzKsheOEQaTQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_35":{"__typename":"Paragraph","id":"e508e9c08e6e_35","name":"def5","type":"P","href":null,"layout":null,"metadata":null,"text":"Having been on both sides of the table as an interviewer and an interviewee for 8 years, I’ve learned a valuable lesson from my experience — building a strong foundation is paramount. A solid understanding of the basics will not only help you clear interviews but also enable you to grasp advanced topics and enhance your skills. 🧱💪 Highlight your learnings, provide code examples, write clean & reusable code to showcase your knowledge and your eagerness to grow.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":141,"end":182,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_36":{"__typename":"Paragraph","id":"e508e9c08e6e_36","name":"916b","type":"P","href":null,"layout":null,"metadata":null,"text":"If you think anything could be improved in this article or you have any questions, let me know in the comments! Thanks for reading. Feel free to share or hit the clap button as many times as you want to show your appreciation.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":226,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_37":{"__typename":"Paragraph","id":"e508e9c08e6e_37","name":"2f17","type":"P","href":null,"layout":null,"metadata":null,"text":"Resource: \nhttps:\u002F\u002Fwww.debugbear.com\u002Fblog\u002Freact-rerenders\nhttps:\u002F\u002Fblog.logrocket.com\u002Freact-memo-vs-usememo\u002F\nhttps:\u002F\u002Ftarunnagpal78.medium.com\u002Ftutorial-how-to-create-rbac-role-based-access-control-in-reactjs-87cb9a960cf3","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":11,"end":57,"href":"https:\u002F\u002Fwww.debugbear.com\u002Fblog\u002Freact-rerenders","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":58,"end":107,"href":"https:\u002F\u002Fblog.logrocket.com\u002Freact-memo-vs-usememo\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":108,"end":218,"href":"https:\u002F\u002Ftarunnagpal78.medium.com\u002Ftutorial-how-to-create-rbac-role-based-access-control-in-reactjs-87cb9a960cf3","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":10,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_38":{"__typename":"Paragraph","id":"e508e9c08e6e_38","name":"0f74","type":"P","href":null,"layout":null,"metadata":null,"text":"More content at PlainEnglish.io.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":16,"end":31,"href":"https:\u002F\u002Fplainenglish.io\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":16,"end":31,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":0,"end":32,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:e508e9c08e6e_39":{"__typename":"Paragraph","id":"e508e9c08e6e_39","name":"21b4","type":"P","href":null,"layout":null,"metadata":null,"text":"Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":16,"end":38,"href":"http:\u002F\u002Fnewsletter.plainenglish.io\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":53,"end":60,"href":"https:\u002F\u002Ftwitter.com\u002FinPlainEngHQ","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":62,"end":70,"href":"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Finplainenglish\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":72,"end":79,"href":"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCtipWUghju290NWcn8jhyAw","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":85,"end":92,"href":"https:\u002F\u002Fdiscord.gg\u002FGtDtUAvyhW","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":16,"end":38,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":53,"end":60,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":62,"end":70,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":72,"end":79,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":85,"end":93,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":0,"end":60,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":62,"end":93,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:4b3a1ed4f11c-viewerId:lo_f64c663fa335":{"__typename":"CollectionViewerEdge","id":"collectionId:4b3a1ed4f11c-viewerId:lo_f64c663fa335","isEditor":false,"isMuting":false},"ImageMetadata:1*Q1MaP5W5ig0jfVG1A2vt8Q@2x.png":{"__typename":"ImageMetadata","id":"1*Q1MaP5W5ig0jfVG1A2vt8Q@2x.png","originalWidth":4100,"originalHeight":1200},"PostViewerEdge:postId:acee97282513-viewerId:lo_f64c663fa335":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:acee97282513-viewerId:lo_f64c663fa335"},"Tag:web-development":{"__typename":"Tag","id":"web-development","displayTitle":"Web Development","normalizedTagSlug":"web-development"},"Tag:interview-questions":{"__typename":"Tag","id":"interview-questions","displayTitle":"Interview Questions","normalizedTagSlug":"interview-questions"},"Tag:css":{"__typename":"Tag","id":"css","displayTitle":"CSS","normalizedTagSlug":"css"},"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"},"Post:acee97282513":{"__typename":"Post","id":"acee97282513","collection":{"__ref":"Collection:4b3a1ed4f11c"},"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"b713","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"df08","startIndex":5,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"11fb","startIndex":24,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"22c0","startIndex":35,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"ccd5","startIndex":37,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:e508e9c08e6e_0"},{"__ref":"Paragraph:e508e9c08e6e_1"},{"__ref":"Paragraph:e508e9c08e6e_2"},{"__ref":"Paragraph:e508e9c08e6e_3"},{"__ref":"Paragraph:e508e9c08e6e_4"},{"__ref":"Paragraph:e508e9c08e6e_5"},{"__ref":"Paragraph:e508e9c08e6e_6"},{"__ref":"Paragraph:e508e9c08e6e_7"},{"__ref":"Paragraph:e508e9c08e6e_8"},{"__ref":"Paragraph:e508e9c08e6e_9"},{"__ref":"Paragraph:e508e9c08e6e_10"},{"__ref":"Paragraph:e508e9c08e6e_11"},{"__ref":"Paragraph:e508e9c08e6e_12"},{"__ref":"Paragraph:e508e9c08e6e_13"},{"__ref":"Paragraph:e508e9c08e6e_14"},{"__ref":"Paragraph:e508e9c08e6e_15"},{"__ref":"Paragraph:e508e9c08e6e_16"},{"__ref":"Paragraph:e508e9c08e6e_17"},{"__ref":"Paragraph:e508e9c08e6e_18"},{"__ref":"Paragraph:e508e9c08e6e_19"},{"__ref":"Paragraph:e508e9c08e6e_20"},{"__ref":"Paragraph:e508e9c08e6e_21"},{"__ref":"Paragraph:e508e9c08e6e_22"},{"__ref":"Paragraph:e508e9c08e6e_23"},{"__ref":"Paragraph:e508e9c08e6e_24"},{"__ref":"Paragraph:e508e9c08e6e_25"},{"__ref":"Paragraph:e508e9c08e6e_26"},{"__ref":"Paragraph:e508e9c08e6e_27"},{"__ref":"Paragraph:e508e9c08e6e_28"},{"__ref":"Paragraph:e508e9c08e6e_29"},{"__ref":"Paragraph:e508e9c08e6e_30"},{"__ref":"Paragraph:e508e9c08e6e_31"},{"__ref":"Paragraph:e508e9c08e6e_32"},{"__ref":"Paragraph:e508e9c08e6e_33"},{"__ref":"Paragraph:e508e9c08e6e_34"},{"__ref":"Paragraph:e508e9c08e6e_35"},{"__ref":"Paragraph:e508e9c08e6e_36"},{"__ref":"Paragraph:e508e9c08e6e_37"},{"__ref":"Paragraph:e508e9c08e6e_38"},{"__ref":"Paragraph:e508e9c08e6e_39"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:fda018b60e78"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fjavascript.plainenglish.io\u002Fcrack-your-web-development-interviews-acee97282513","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"javascript"},{"__typename":"Topic","slug":"programming"}],"isPublished":true,"latestPublishedVersion":"e508e9c08e6e","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":0},"clapCount":3,"allowResponses":true,"isLimitedState":false,"title":"🌟💼 Crack your Web Development Interviews","isSeries":false,"sequence":null,"uniqueSlug":"crack-your-web-development-interviews-acee97282513","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1690244340922,"readingTime":7.7896226415094345,"previewContent":{"__typename":"PreviewContent","subtitle":"Discover thought provoking interview questions, scenario-based queries, and tips to help you showcase your skills. From CSS to ReactJS!"},"previewImage":{"__ref":"ImageMetadata:1*Iq-TWHH-Fk5BYSRoeqg_hQ.gif"},"isShortform":false,"seoTitle":"","firstPublishedAt":1689160297861,"updatedAt":1690244340988,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:acee97282513-viewerId:lo_f64c663fa335"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:web-development"},{"__ref":"Tag:interview-questions"},{"__ref":"Tag:css"},{"__ref":"Tag:react"},{"__ref":"Tag:front-end-development"}],"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":1680,"layerCake":0,"responsesLocked":false}}</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/9120.5df29668.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/6618.db187378.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/3735.afb7e926.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/6546.cd03f950.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/7346.72622eb9.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2420.2a5e2d95.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.ca7937c2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.d195c6f1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.bf599bc5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2961.00a48598.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.c4082863.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4391.59acaed3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.902ad94b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.6565ad5f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.a0afad8a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.36c2ecf4.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:'8ea9d028af069e34',t:'MTczMjk1ODk2OC4wMDAwMDA='};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>