1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>JavaScript, React, TypeScript, and other Web Tech Articles and Tutorials - Fireship</title><meta name="description" content="Articles and tutorials on the latest JavaScript and Web technologies like React, TypeScript, and more."/><meta name="image" content="https://fireship.dev/images/default-og-image.jpg"/><link rel="canonical" href="https://fireship.dev/blog"/><meta property="og:site_name" content="Fireship"/><meta property="og:url" content="https://fireship.dev/blog"/><meta property="og:title" content="JavaScript, React, TypeScript, and other Web Tech Articles and Tutorials - Fireship"/><meta property="og:description" content="Articles and tutorials on the latest JavaScript and Web technologies like React, TypeScript, and more."/><meta property="og:image" content="https://fireship.dev/images/default-og-image.jpg"/><meta content="website" property="og:type"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@uidotdev"/><meta name="twitter:creator" content="@uidotdev"/><meta name="twitter:title" content="JavaScript, React, TypeScript, and other Web Tech Articles and Tutorials - Fireship"/><meta name="twitter:description" content="Articles and tutorials on the latest JavaScript and Web technologies like React, TypeScript, and more."/><meta name="twitter:image" content="https://fireship.dev/images/default-og-image.jpg"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><link rel="preload" href="/fonts/outfit-v4-latin-regular.woff2" as="font" crossorigin="anonymous"/><link rel="preload" href="/fonts/outfit-v4-latin-500.woff2" as="font" crossorigin="anonymous"/><link rel="preload" href="/fonts/outfit-v4-latin-700.woff2" as="font" crossorigin="anonymous"/><link rel="preload" href="/fonts/outfit-v4-latin-900.woff2" as="font" crossorigin="anonymous"/><link rel="preload" href="/fonts/paytone-one-v16-latin-regular.woff2" as="font" crossorigin="anonymous"/><meta name="next-head-count" content="27"/><noscript><img alt="fb" height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=312702129964814&ev=PageView&noscript=1"/></noscript><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/b6147e7fff365010.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b6147e7fff365010.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script>
1<script src="/_next/static/chunks/webpack-6d56c2ae500f1fc1.js" defer=""></script>
1<script src="/_next/static/chunks/framework-56eb74ff06128874.js" defer=""></script>
1<script src="/_next/static/chunks/main-854c13a8037929ae.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-607971f9e441bb0f.js" defer=""></script>
1<script src="/_next/static/chunks/0c428ae2-a42fa7a98798433f.js" defer=""></script>
1<script src="/_next/static/chunks/7765-b8c1c06bd60a06e8.js" defer=""></script>
1<script src="/_next/static/chunks/7536-56869878f9c68c88.js" defer=""></script>
1<script src="/_next/static/chunks/334-2ebb91e269a0c65e.js" defer=""></script>
1<script src="/_next/static/chunks/pages/blog-f4049fc7f712b4c9.js" defer=""></script>
1<script src="/_next/static/r_4k6_gcL9FTomo4yA_x_/_buildManifest.js" defer=""></script>
1<script src="/_next/static/r_4k6_gcL9FTomo4yA_x_/_ssgManifest.js" defer=""></script>
1<style id="sandpack">--sxs{--sxs:1 sp-k-eyOShd sp-k-iOHdLQ}@media{@keyframes sp-k-eyOShd{0%{opacity:0}100%{opacity:1}}@keyframes sp-k-iOHdLQ{0%{transform:rotateX(-25.5deg) rotateY(45deg)}100%{transform:rotateX(-25.5deg) rotateY(405deg)}}}--sxs{--sxs:2 sp-c-gMfcns sp-c-bxeRRt sp-c-jKPvnt sp-c-fWymNx sp-c-euXojQ sp-c-bpmgvy sp-c-PJLV}@media{.sp-c-gMfcns svg{margin:auto}.sp-c-bxeRRt{-webkit-appearance:none;appearance:none;outline:none;display:flex;align-items:center;font-size:inherit;font-family:inherit;background-color:transparent;transition:color var(--sp-transitions-default), background var(--sp-transitions-default);cursor:pointer;color:var(--sp-colors-clickable);border:0;text-decoration:none}.sp-c-bxeRRt:disabled{color:var(--sp-colors-disabled)}.sp-c-bxeRRt:hover:not(:disabled,[data-active='true']){color:var(--sp-colors-hover)}.sp-c-bxeRRt[data-active="true"]{color:var(--sp-colors-accent)}.sp-c-bxeRRt svg{min-width:var(--sp-space-4);width:var(--sp-space-4);height:var(--sp-space-4)}.sp-c-bxeRRt.sp-c-gMfcns{padding:var(--sp-space-1);height:var(--sp-space-7);display:flex}.sp-c-bxeRRt.sp-c-gMfcns.sp-c-bxeRRt:not(:has(span)){width:var(--sp-space-7)}.sp-c-bxeRRt.sp-c-gMfcns.sp-c-bxeRRt:has(svg + span){padding-right:var(--sp-space-3);padding-left:var(--sp-space-2);gap:var(--sp-space-1)}.sp-c-jKPvnt{padding:0 var(--sp-space-1) 0 var(--sp-space-1);border-radius:var(--sp-border-radius);margin-left:var(--sp-space-1);width:var(--sp-space-5);visibility:hidden;cursor:pointer;position:absolute;right:0px}.sp-c-jKPvnt svg{width:var(--sp-space-3);height:var(--sp-space-3);display:block;position:relative;top:1px}.sp-c-fWymNx{margin:0;display:block;font-family:var(--sp-font-mono);font-size:var(--sp-font-size);color:var(--sp-syntax-color-plain);line-height:var(--sp-font-lineHeight)}.sp-c-euXojQ{display:flex;flex-direction:column;width:100%;position:relative;background-color:var(--sp-colors-surface1);gap:1px}.sp-c-euXojQ:has(.sp-stack){background-color:var(--sp-colors-surface2)}.sp-c-bpmgvy{transform:translate(-4px, 9px) scale(0.13, 0.13)}.sp-c-bpmgvy *{position:absolute;width:96px;height:96px}}--sxs{--sxs:3 sp-c-PJLV-kCOVwI-status-pass sp-c-PJLV-kEzYsr-status-fail sp-c-PJLV-gHAhSA-status-skip sp-c-PJLV-jgnHyR-status-title sp-c-PJLV-iCgxLS-status-run sp-c-PJLV-bnDZSy-status-pass sp-c-PJLV-eYuGwt-status-fail}@media{.sp-c-PJLV-kCOVwI-status-pass{color:var(--test-pass)}.sp-c-PJLV-kEzYsr-status-fail{color:var(--test-fail)}.sp-c-PJLV-gHAhSA-status-skip{color:var(--test-skip)}.sp-c-PJLV-jgnHyR-status-title{color:var(--test-title)}.sp-c-PJLV-iCgxLS-status-run{background:var(--test-run);color:var(--sp-colors-surface1)}.sp-c-PJLV-bnDZSy-status-pass{background:var(--test-pass);color:var(--sp-colors-surface1)}.sp-c-PJLV-eYuGwt-status-fail{background:var(--test-fail);color:var(--sp-colors-surface1)}}</style></head><body class="dark"><div id="__next"><div style="position:fixed;z-index:9999;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none"></div><nav class="mx-auto p-6 sm:p-8 container flex flex-wrap justify-end items-center gap-6"><a class="mr-auto grid place-items-center text-center aspect-square" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="45" viewBox="0 0 300 301"><title>Fireship</title><path d="M115.44.64c-.53-.45-1.74-.43-2.75-.64-.53.78-1.21,1.4-1.38,2.08-.4,1.72-.69,3.47-.85,5.23-3.9,39.25-18.51,75.68-46.94,109.02-15.77,18.49-31.47,37.39-43.07,57.48-28.8,49.84-3.17,100.74,59.65,122.99,2.07.73,4.39,1.06,9.57,2.27-21.31-19.27-32.28-38.85-28.58-62.02,3.52-22.1,14.7-41.82,31.64-59.8,1.25,2.5,1.32,4.68,1.24,6.86-.83,19.72,5.7,37.12,25.86,50.86,9.32,6.35,17.69,13.54,26.12,20.61,8.56,7.2,11.04,15.85,8.61,25.28-1.17,4.58-2.88,9.09-4.73,14.74,14.35-1.42,27.62-3.4,36.53-11.33,8.52-7.57,14.82-16.55,23.91-27.01.64,8.85,1.88,15.74,1.4,22.56-.51,7.09-2.7,14.12-4.16,21.18,43.61-6.57,82.08-49.36,83.77-93.13,1.24-31.94-25.94-78.72-48.76-83.26,1.28,3,2.47,5.84,3.75,8.64,7.92,17.44,10.24,35.12,5.23,53.37-5.01,18.15-30.43,38.52-52.85,41.09.76-1.82,1.08-3.52,2.12-4.91,24.15-32.54,24.45-66.6,10.72-101.36C193.12,74.99,157.88,36.14,115.44.64Z" fill="var(--brand-orange)"></path></svg></a><a class="order-first sm:order-none w-full sm:w-auto p-px bg-[linear-gradient(45deg,var(--brand-purple),var(--brand-red))] dark:bg-[linear-gradient(45deg,var(--brand-blue),var(--brand-green))] rounded-[4px] text-sm !transition-none" href="/uidotdev-and-fireship-join-forces"><span class="block py-2 px-3 bg-gray-25 dark:bg-brand-coal rounded-[3px]"><strong class="uppercase text-brand-purple dark:text-brand-pink">New</strong> ui.dev + Fireship join forces â</span></a><button class="aspect-square w-[40px] grid place-items-center relative bg-gray-75 hover:bg-gray-100 dark:bg-brand-charcoalMuted dar
1k:hover:bg-brand-beige/10 text-xl text-brand-charcoal dark:text-brand-beige rounded-full transition-all duration-100"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path></svg></button><a class="px-8 py-2 border-brand-purple dark:border-brand-yellow bg-gray-25 dark:bg-brand-coal rounded-full uppercase font-medium border-2 cursor-pointer text-brand-purple dark:text-brand-yellow hover:bg-brand-purple hover:text-brand-beige dark:hover:bg-brand-yellow dark:hover:text-brand-charcoal shadow-button" href="/login"><span class="font-black">Login</span></a></nav><main class=""><div class="mx-auto container p-6 md:p-8 pt-0 mt-20 mb-[100px]"><h1 class="mx-4 mb-20 font-display text-4xl md:text-5xl lg:text-6xl uppercase text-center">The Blog</h1><ul class="grid"><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/uidotdev-and-fireship-join-forces">
1ui.dev and Fireship join forces<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/why-react-query">Why React Query?<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/javascript-double-equals-vs-triple-equals">Double Equal (==) vs Triple Equal (===) in JavaScript<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/why-react-renders">The Interactive Guide to Rendering in React<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/get-current-url-javascript">How to get the current URL in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/get-current-timestamp-javascript">
1How to get the current timestamp in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-ambiguous-matches">Ambiguous Matches with React Router<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-animated-transitions">Animated Transitions with React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-code-splitting">Code Splitting with React, React.lazy, and React Router<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-custom-link">How to Create a Custom Link Component with React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-handling-404-pages">How to create a 404 page with React Router<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-nested-routes">The Guide to Nested Routes with React Router<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-pass-props-to-components">How to Pass Props to a Component Rendered by React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-pass-props-to-link">How to Pass Props Through React Router's Link Component<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-preventing-transitions">How to Prevent Transitions with React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-programmatically-navigate">How to Programmatically Navigate with React Router<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-protected-routes-authentication">Protected Routes and Authentication with React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-query-strings">A Guide to Query Strings with React Router<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-recursive-paths">How to Create Recursive Routes with React Router<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-route-config">Creating a Central Route Config with React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-server-rendering">Server Rendering with React and React Router<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-sidebar-breadcrumbs">How To Create a Location Aware Sidebar with React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-tutorial">A Complete Guide to React Router: Everything You Need to Know<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-url-parameters">The Complete Guide to URL parameters with React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/es2021">What's new in ES2021<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-ambiguous-matches">Ambiguous Matches with React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/web-audio-api">
1Introduction to the Web Audio API<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-animated-transitions">Animated Transitions with React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-sidebar-breadcrumbs">Rendering a Sidebar or Breadcrumbs with React Router v5<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/usereducer">Understanding React's useReducer Hook<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-route-config">Route Config with React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/dom">Building an App with the Vanilla DOM API (2020)<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-preventing-transitions">Preventing transitions with React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-programmatically-navigate">Programmatically navigate with React Router v5<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-custom-link">Customizing your own Link component in React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-recursive-paths">Recursive paths with React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-server-rendering">
1Server Rendering with React and React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-pass-props-to-link">Pass props to React Router v5's Link component<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-pass-props-to-components">Pass props to a component rendered by React Router v5<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/esmodules">ES Modules in Depth<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-query-strings">Query Strings with React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-code-splitting">Code Splitting with React, React.lazy, and React Router v5<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-nested-routes">Nested routes with React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/web-gamepad-api">Introduction to the Web Gamepad API<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-handling-404-pages">Handling 404 pages (catch all routes) with React Router v5<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-protected-routes-authentication">Protected routes and authentication with React Router v5<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v5-url-parameters">URL Parameters with React Router v5<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-props">Introduction to props in React<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/primitive-vs-reference-values-in-javascript">Primitive vs Reference Values in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/useref">Understanding React'
1s useRef Hook<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/jsx">JSX Tips and Gotchas for Beginners<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/npm">What is NPM? A guide to the company, registry, and CLI<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/capitalize-first-letter-of-string-javascript">How to capitalize the first letter of a string in JavaScript<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-context">Guide to React Context<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/add-item-to-end-of-array-javascript">How to add an item to the end of an Array in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/webpack">
1Webpack: A gentle introduction<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/check-for-undefined-javascript">How to check for undefined in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/creating-your-own-array">Creating your own implementation of Array<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/cancel-adobe-without-paying-the-cancellation-fee">Cancel Adobe without paying the cancellation fee<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/rwd-weekly-409-interview-series-with-chris-coyier">RWD Weekly #409 Interview Series with Chris Coyier<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/computed-property-names">Computed Property Names in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/shorthand-properties">Shorthand Property and Method Names in JavaScript | ES6<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/why-react-hooks">
1Why React Hooks?<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/font-smoothing">Font Smoothing<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/allow-file-directory-listing-using-htaccess">Allow file directory listing using .htaccess<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-code-splitting">Code Splitting with React and React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/javascript-inheritance-vs-composition">JavaScript Inheritance vs Composition<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/javascript-modules-iifes-commonjs-esmodules">JavaScript Modules: From IIFEs to CommonJS to ES6 Modules<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-recursive-paths">Recursive paths with React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-pass-props-to-link">Pass props to React Router v4's Link component<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/var-let-const">
1var vs let vs const in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/arrow-functions">Arrow Functions in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-sidebar-breadcrumbs">Rendering a Sidebar or Breadcrumbs with React Router v4<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/validate-email-address-javascript">How to validate an email address in JavaScript (2022)<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/javascript-inheritance-and-the-prototype-chain">JavaScript Inheritance and the Prototype Chain<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/javascript-private-and-public-class-fields">JavaScript Private and Public Class Fields<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/async-javascript-from-callbacks-to-promises-to-async-await">Async JavaScript: From Callbacks, to Promises, to Async/Await<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-render-props">React Render Props<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-higher-order-components">React Higher-Order Components<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript">The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/beginners-guide-to-javascript-prototype">A Beginner's Guide to JavaScript's Prototype<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/altering-expectations-by-improving-pwa-on-ios">Altering expectations by improving PWA on iOS<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-ambiguous-matches">Ambiguous Matches with React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-route-config">Route Config with React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/this-keyword-call-apply-bind-javascript">Understanding the "this"
1 keyword, call, apply, and bind in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-query-strings">Query Strings with React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/amp-is-not-the-issue-its-google">AMP is not the issue, it'
1s Google<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-server-rendering">Server Rendering with React and React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-animated-transitions">Animated Transitions with React Router v4<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-pass-props-to-components">Pass props to a component rendered by React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-cannot-get-url-refresh">Fixing the 'cannot GET /URL' error on refresh with React Router (or how client side routers work)<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-nested-routes">Nested routes with React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-programmatically-navigate">Programmatically navigate with React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-handling-404-pages">Handling 404 pages (catch all routes) with React Router v4<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-url-parameters">URL Parameters with React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-custom-link">Customizing your own Link component in React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-preventing-transitions">
1Preventing transitions with React Router v4<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/should-i-use-system-fonts-or-web-fonts">Should I use system fonts or web fonts?<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-router-v4-protected-routes-authentication">Protected routes and authentication with React Router v4<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/template-literals">Template Literals (Template Strings) in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/compiling-polyfills">Compiling vs Polyfills with Babel (JavaScript)<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/default-parameters">Default Parameters in JavaScript | ES6 | ES2015<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/ecmascript">ECMAScript, TC39, and the History of JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/dan-abramov">Progression, Curiosity, and Burnout with Dan Abramov<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/patterns/css-grid-responsive-layout">
1CSS Grid Responsive Layout<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/object-array-destructuring">Object and Array Destructuring in JavaScript<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/build-your-own-react-router">Build your own React Router<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/configuring-http2-push-wordpress">Configuring HTTP2 Push with Wordpress<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-interview-questions">React Interview Questions<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-aha-moments">React 'Aha'
1 Moments<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/react-elements-vs-react-components">React Elements vs React Components<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/guidelines/flexible-images-and-media">Flexible Images and Media<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/design/content-first-design">Content First Design<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/design/responsive-typography">Responsive Typography<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/develop/browser-feature-support/media-queries-for-common-device-breakpoints">
1media queries for common device breakpoints<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/develop/responsive-html/viewport-meta-element">Viewport Meta Element<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/strategy/page-layout/defining-breakpoints">
1Defining Breakpoints<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/strategy/page-layout/mobile-first">Mobile First<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/imperative-vs-declarative-programming">Imperative vs Declarative Programming<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/whats-the-deal-with-accelerated-mobile-pages-amp">What is the deal with Accelerated Mobile Pages - AMP<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/examples/responsive-field-day">Responsive Field Day<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/why-you-dont-need-device-specific-breakpoints">Why you donât need device specific breakpoints<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/reducing-image-sizes">Reducing image sizes<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/angularjs-factory-vs-service-vs-provider">AngularJS: Factory vs Service vs Provider<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/responsive-icons">Responsive Icons<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/difference-between-sass-and-scss">
1Difference between .sass and .scss<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/articles/24-ways-to-be-responsive">24 Ways to be Responsive<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/resources/javascript-jquery/lazy-load-jquery">Lazy Load (jQuery)<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/articles/the-printer-is-a-device-too">The printer is a device too!<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/resources/images/refine-slide">Refine Slide<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/resources/javascript-jquery/adapt-js">
1adapt.js<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/resources/testing/demonstrating-responsive-design">Demonstrating Responsive Design<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/resources/frameworks/960-grid-system">960 Grid System<span class="self
1-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li><li class=""><a class="group flex justify-between gap-2 py-4 md:py-6 border-b-2 border-gray-100 dark:border-brand-charcoal text-brand-purple dark:text-brand-yellow text-lg md:text-xl lg:text-2xl hover:border-brand-blue dark:hover:border-brand-blue" href="/rwd/resources/javascript-jquery/respond-js">Respond.js<span class="self-center text-gray-300 group-hover:text-brand-purple dark:text-brand-beige opacity-30 dark:group-hover:text-brand-yellow group-hover:opacity-100">â</span></a></li></ul></div></main><footer class="mt-10 mb-6 sm:mb-8 mx-6 sm:mx-8 py-8 lg:pt-14 bg-brand-white dark:bg-brand-charcoal rounded-3xl relative overflow-hidden shadow-md dark:shadow-none"><div class="container mx-auto px-8 pb-8 grid grid-cols-2 lg:grid-cols-12 gap-20"><div class="lg:col-span-3"><ul class="grid gap-4"><li><a class="underline" href="/login">Login</a></li><li><a class="underline" href="/about">About</a></li><li><a class="underline" href="/jobs">Jobs</a></li><li><a class="underline" href="/blog">Blog</a></li><li><a class="underline" href="/reviews">Reviews</a></li><li><a class="underline" href="/terms">Terms</a></li><li><a class="underline" href="/privacy">Privacy</a></li><li><a class="underline" href="/code-of-conduct">Code of Conduct</a></li></ul></div><div class="lg:col-span-3"><ul class="grid gap-4"><li><a href="https://www.youtube.com/@Fireship" target="_blank" class="underline">YouTube</a></li><li><a href="https://bytes.dev" target="_blank" class="underline">Bytes</a></li><li><a href="https://npmtrends.com" target="_blank" class="underline">npmtrends</a></li><li><a href="https://usehooks.com" target="_blank" class="underline">useHooks</a></li><li><a href="https://react.gg" target="_blank" class="underline">react.gg</a></li><li><a href="https://query.gg" target="_blank" class="underline">query.gg</a></li></ul></div><div class="col-span-2 lg:col-span-6"><h4 class="uppercase font-bold mb-8">Sign Up For Bytes</h4><form class="p-8 bg-brand-white dark:bg-[rgba(0,0,0,.2)] shadow dark:shadow-none relative rounded-2xl w-full"><figure class="absolute top-[-12px] right-0"><img width="48" src="/images/bytes-logo.svg" alt="Bytes"/></figure><h6 class="mb-4 pr-4 text-pretty">Delivered to over <b>200,000</b> web developers every <b>Tuesday</b> and<!-- --> <b>Friday</b></h6><div class="flex gap-2 items-start flex-wrap md:flex-nowrap"><div class="w-full"><div class="grid gap-2 flex-1 "><input id="bytes_email" placeholder="Enter your email" name="bytes_email" class="h-10 w-full !bg-[rgba(0,0,0,0)] border border-brand-charcoal/10 dark:border-brand-beige/10 rounded-md py-2 pl-4 placeholder:opacity-50 placeholder:text-brand-charcoal dark:placeholder:text-brand-beige focus:border-brand-purple dark:focus:border-brand-beige outline-none focus:ring-0 undefined"/></div></div><button type="submit" class="bg-brand-purple dark:bg-brand-yellow text-brand-white dark:text-brand-charcoal rounded py-2 px-4 font-bold w-full md:w-[200px] whitespace-nowrap"><span class="flex-grow">Get Bytes Today</span></button></div></form></div></div><div class="container mx-auto px-8 mt-14"><svg xmlns="http://www.w3.org/2000/svg" width="170" viewBox="0 0 393 95"><title>Fireship</title><path fill="var(--brand-orange)" d="M27.51.23c-.13-.11-.44-.11-.7-.16-.13.2-.31.36-.35.53-.1.44-.18.88-.22 1.33-.99 9.98-4.71 19.25-11.94 27.72-4.01 4.7-8 9.51-10.95 14.62-7.32 12.68-.81 25.62 15.17 31.28.53.18 1.12.27 2.43.58-5.42-4.9-8.21-9.88-7.27-15.77.9-5.62 3.74-10.64 8.05-15.21.32.64.34 1.19.31 1.74-.21 5.01 1.45 9.44 6.58 12.94 2.37 1.61 4.5 3.44 6.64 5.24 2.18 1.83 2.81 4.03 2.19 6.43-.3 1.17-.73 2.31-1.2 3.75 3.65-.36 7.02-.86 9.29-2.88 2.17-1.92 3.77-4.21 6.08-6.87.16 2.25.48 4 .36 5.74-.13 1.8-.69 3.59-1.06 5.39 11.09-1.67 20.87-12.55 21.3-23.68.31-8.12-6.6-20.02-12.4-21.17.33.76.63 1.48.95 2.2 2.01 4.44 2.6 8.93 1.33 13.57-1.27 4.62-7.74 9.8-13.44 10.45.19-.46.27-.9.54-1.25 6.14-8.28 6.22-16.94 2.73-25.78C47.26 19.14 38.3 9.26 27.51.23Z"></path><path fill="#f6f1d7" class="fill-brand-charcoal dark:fill-brand-beige" d="M131.27 32.47v41.91h-11.76V41.62h-17.05v32.76H90.7V41.62h-7.9v-9.15h7.9v-3.05c0-12.57 6.46-19.75 18.4-19.75h2.78v10.95h-1.71c-5.83 0-7.72 3.14-7.72 7.54v4.31h28.81Zm-13.38-14.45c0-3.95 3.41-7 7.45-7s7.45 3.05 7.45 7-3.23 7.09-7.45 7.09-7.45-3.14-7.45-7.09ZM173.72 32.73l-2.69 11.22c-2.51-1.35-4.58-1.53-6.01-1.53-6.01 0-10.14 5.65-10.14 17.59v
114.36h-11.76V32.46h11.67v8.98c2.33-7 7.09-10.05 12.3-10.05 2.24 0 4.76.36 6.64 1.35ZM220.04 57.24h-31.5c1.26 4.94 5.21 7.81 10.77 7.81 4.31 0 8.44-1.97 11.04-4.94l6.82 6.91c-3.95 5.3-11.22 8.44-18.58 8.44-12.92 0-22.35-9.06-22.35-21.99s10.32-22.08 22.26-22.08 21.81 8.53 21.81 21.36c0 1.17-.09 2.6-.27 4.49Zm-11.58-7.63c-.36-4.94-4.4-8.08-9.69-8.08-4.85 0-8.98 2.42-10.23 8.08h19.93ZM226.77 61.19h11.04c0 2.42 2.06 5.03 6.19 5.03 3.41 0 6.01-1.71 6.01-4.13 0-1.8-1.44-2.69-4.58-3.5l-5.56-1.35c-10.77-2.87-12.21-8.89-12.21-13.28 0-6.46 6.73-12.57 16.42-12.57 7.63 0 16.6 3.68 16.51 13.64h-11.22c0-2.87-2.33-4.4-5.12-4.4s-4.85 1.53-4.85 3.68c0 1.97 1.79 2.96 4.13 3.59l6.91 1.8c10.05 2.69 11.31 8.98 11.31 12.39 0 8.8-8.98 13.37-17.59 13.37s-17.32-5.03-17.41-14.27ZM311.95 51.4v22.98h-11.76V52.12c0-6.55-3.95-9.6-7.99-9.6s-9.42 2.33-9.42 9.87v21.99h-11.76V9.67h11.76v29.44c1.79-5.39 8.53-7.72 12.56-7.72 10.95 0 16.69 7.45 16.6 20.01ZM321.65 18.02c0-3.95 3.41-7 7.45-7s7.45 3.05 7.45 7-3.32 7.09-7.45 7.09-7.45-3.14-7.45-7.09Zm1.61 56.36V32.47h11.76v41.91h-11.76ZM392.64 53.38c0 13.55-9.78 22.08-20.55 22.08-4.76 0-10.5-1.97-13.46-6.28v25.76h-11.76V32.47h11.76v5.12c2.96-4.22 8.71-6.19 13.46-6.19 10.77 0 20.55 8.62 20.55 21.99Zm-12.02.09c0-6.19-4.85-11.13-10.77-11.13s-10.86 4.76-10.86 11.13 5.39 11.04 10.86 11.04c5.92 0 10.77-4.85 10.77-11.04Z"></path></svg></div></footer></div>
1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"posts":[{"title":"ui.dev and Fireship join forces","slug":"uidotdev-and-fireship-join-forces"},{"title":"Why React Query?","slug":"why-react-query"},{"title":"Double Equal (==) vs Triple Equal (===) in JavaScript","slug":"javascript-double-equals-vs-triple-equals"},{"title":"The Interactive Guide to Rendering in React","slug":"why-react-renders"},{"title":"How to get the current URL in JavaScript","slug":"get-current-url-javascript"},{"title":"How to get the current timestamp in JavaScript","slug":"get-current-timestamp-javascript"},{"title":"Ambiguous Matches with React Router","slug":"react-router-ambiguous-matches"},{"title":"Animated Transitions with React Router","slug":"react-router-animated-transitions"},{"title":"Code Splitting with React, React.lazy, and React Router","slug":"react-router-code-splitting"},{"title":"How to Create a Custom Link Component with React Router","slug":"react-router-custom-link"},{"title":"How to create a 404 page with React Router","slug":"react-router-handling-404-pages"},{"title":"The Guide to Nested Routes with React Router","slug":"react-router-nested-routes"},{"title":"How to Pass Props to a Component Rendered by React Router","slug":"react-router-pass-props-to-components"},{"title":"How to Pass Props Through React Router's Link Component","slug":"react-router-pass-props-to-link"},{"title":"How to Prevent Transitions with React Router","slug":"react-router-preventing-transitions"},{"title":"How to Programmatically Navigate with React Router","slug":"react-router-programmatically-navigate"},{"title":"Protected Routes and Authentication with React Router","slug":"react-router-protected-routes-authentication"},{"title":"A Guide to Query Strings with React Router","slug":"react-router-query-strings"},{"title":"How to Create Recursive Routes with React Router","slug":"react-router-recursive-paths"},{"title":"Creating a Central Route Config with React Router","slug":"react-router-route-config"},{"title":"Server Rendering with React and React Router","slug":"react-router-server-rendering"},{"title":"How To Create a Location Aware Sidebar with React Router","slug":"react-router-sidebar-breadcrumbs"},{"title":"A Complete Guide to React Router: Everything You Need to Know","slug":"react-router-tutorial"},{"title":"The Complete Guide to URL parameters with React Router","slug":"react-router-url-parameters"},{"title":"What's new in ES2021","slug":"es2021"},{"title":"Ambiguous Matches with React Router v5","slug":"react-router-v5-ambiguous-matches"},{"title":"Introduction to the Web Audio API","slug":"web-audio-api"},{"title":"Animated Transitions with React Router v5","slug":"react-router-v5-animated-transitions"},{"title":"Rendering a Sidebar or Breadcrumbs with React Router v5","slug":"react-router-v5-sidebar-breadcrumbs"},{"title":"Understanding React's useReducer Hook","slug":"usereducer"},{"title":"Route Config with React Router v5","slug":"react-router-v5-route-config"},{"title":"Building an App with the Vanilla DOM API (2020)","slug":"dom"},{"title":"Preventing transitions with React Router v5","slug":"react-router-v5-
1preventing-transitions"},{"title":"Programmatically navigate with React Router v5","slug":"react-router-v5-programmatically-navigate"},{"title":"Customizing your own Link component in React Router v5","slug":"react-router-v5-custom-link"},{"title":"Recursive paths with React Router v5","slug":"react-router-v5-recursive-paths"},{"title":"Server Rendering with React and React Router v5","slug":"react-router-v5-server-rendering"},{"title":"Pass props to React Router v5's Link component","slug":"react-router-v5-pass-props-to-link"},{"title":"Pass props to a component rendered by React Router v5","slug":"react-router-v5-pass-props-to-components"},{"title":"ES Modules in Depth","slug":"esmodules"},{"title":"Query Strings with React Router v5","slug":"react-router-v5-query-strings"},{"title":"Code Splitting with React, React.lazy, and React Router v5","slug":"react-router-v5-code-splitting"},{"title":"Nested routes with React Router v5","slug":"react-router-v5-nested-routes"},{"title":"Introduction to the Web Gamepad API","slug":"web-gamepad-api"},{"title":"Handling 404 pages (catch all routes) with React Router v5","slug":"react-router-v5-handling-404-pages"},{"title":"Protected routes and authentication with React Router v5","slug":"react-router-v5-
1protected-routes-authentication"},{"title":"URL Parameters with React Router v5","slug":"react-router-v5-url-parameters"},{"title":"Introduction to props in React","slug":"react-props"},{"title":"Primitive vs Reference Values in JavaScript","slug":"primitive-vs-reference-values-in-javascript"},{"title":"Understanding React's useRef Hook","slug":"useref"},{"title":"JSX Tips and Gotchas for Beginners","slug":"jsx"},{"title":"What is NPM? A guide to the company, registry, and CLI","slug":"npm"},{"title":"How to capitalize the first letter of a string in JavaScript","slug":"capitalize-first-letter-of-string-javascript"},{"title":"Guide to React Context","slug":"react-context"},{"title":"How to add an item to the end of an Array in JavaScript","slug":"add-item-to-end-of-array-javascript"},{"title":"Webpack: A gentle introduction","slug":"webpack"},{"title":"How to check for undefined in JavaScript","slug":"check-for-undefined-javascript"},{"title":"Creating your own implementation of Array","slug":"creating-your-own-array"},{"title":"Cancel Adobe without paying the cancellation fee","slug":"rwd/articles/cancel-adobe-without-paying-the-cancellation-fee"},{"title":"RWD Weekly #409 Interview Series with Chris Coyier","slug":"rwd/articles/rwd-weekly-409-interview-series-with-chris-coyier"},{"title":"Computed Property Names in JavaScript","slug":"computed-property-names"},{"title":"Shorthand Property and Method Names in JavaScript | ES6","slug":"shorthand-properties"},{"title":"Why React Hooks?","slug":"why-react-hooks"},{"title":"Font Smoothing","slug":"rwd/articles/font-smoothing"},{"title":"Allow file directory listing using .htaccess","slug":"rwd/articles/allow-file-directory-listing-using-htaccess"},{"title":"Code Splitting with React and React Router v4","slug":"react-router-v4-code-splitting"},{"title":"JavaScript Inheritance vs Composition","slug":"javascript-inheritance-vs-composition"},{"title":"JavaScript Modules: From IIFEs to CommonJS to ES6 Modules","slug":"javascript-modules-iifes-commonjs-esmodules"},{"title":"Recursive paths with React Router v4","slug":"react-router-v4-recursive-paths"},{"title":"Pass props to React Router v4's Link component","slug":"react-router-v4-pass-props-to-link"},{"title":"var vs let vs const in JavaScript","slug":"var-let-const"},{"title":"Arrow Functions in JavaScript","slug":"arrow-functions"},{"title":"Rendering a Sidebar or Breadcrumbs with React Router v4","slug":"react-router-v4-sidebar-breadcrumbs"},{"title":"How to validate an email address in JavaScript (2022)","slug":"validate-email-address-javascript"},{"title":"JavaScript Inheritance and the Prototype Chain","slug":"javascript-inheritance-and-the-prototype-chain"},{"title":"JavaScript Private and Public Class Fields","slug":"javascript-private-and-public-class-fields"},{"title":"Async JavaScript: From Callbacks, to Promises, to Async/Await","slug":"async-javascript-from-callbacks-to-promises-to-async-await"},{"title":"React Render Props","slug":"react-render-props"},{"title":"React Higher-Order Components","slug":"react-higher-order-components"},{"title":"The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript","slug":"ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript"},{"title":"A Beginner's Guide to JavaScript's Prototype","slug":"beginners-guide-to-javascript-prototype"},{"title":"Altering expectations by improving PWA on iOS","slug":"rwd/articles/altering-expectations-by-improving-pwa-on-ios"},{"title":"Ambiguous Matches with React Router v4","slug":"react-router-v4-ambiguous-matches"},{"title":"Route Config with React Router v4","slug":"react-router-v4-route-config"},{"title":"Understanding the \"this\" keyword, call, apply, and bind in JavaScript","slug":"this-keyword-call-apply-bind-javascript"},{"title":"Query Strings with React Router v4","slug":"react-router-v4-query-strings"},{"title":"AMP is not the issue, it's Google","slug":"rwd/articles/amp-is-not-the-issue-its-google"},{"title":"Server Rendering with React and React Router v4","slug":"react-router-v4-server-rendering"},{"title":"Animated Transitions with React Router v4","slug":"react-router-v4
1-animated-transitions"},{"title":"Pass props to a component rendered by React Router v4","slug":"react-router-v4-pass-props-to-components"},{"title":"Fixing the 'cannot GET /URL' error on refresh with React Router (or how client side routers work)","slug":"react-router-cannot-get-url-refresh"},{"title":"Nested routes with React Router v4","slug":"react-router-v4-nested-routes"},{"title":"Programmatically navigate with React Router v4","slug":"react-router-v4-programmatically-navigate"},{"title":"Handling 404 pages (catch all routes) with React Router v4","slug":"react-router-v4-handling-404-pages"},{"title":"URL Parameters with React Router v4","slug":"react-router-v4-url-parameters"},{"title":"Customizing your own Link component in React Router v4","slug":"react-router-v4-custom-link"},{"title":"Preventing transitions with React Router v4","slug":"react-router-v4-preventing-transitions"},{"title":"Should I use system fonts or web fonts?","slug":"rwd/articles/should-i-use-system-fonts-or-web-fonts"},{"title":"Protected routes and authentication with React Router v4","slug":"react-router-v4-protected-routes-authentication"},{"title":"Template Literals (Template Strings) in JavaScript","slug":"template-literals"},{"title":"Compiling vs Polyfills with Babel (JavaScript)","slug":"compiling-polyfills"},{"title":"Default Parameters in JavaScript | ES6 | ES2015","slug":"default-parameters"},{"title":"ECMAScript, TC39, and the History of JavaScript","slug":"ecmascript"},{"title":"Progression, Curiosity, and Burnout with Dan Abramov","slug":"dan-abramov"},{"title":"CSS Grid Responsive Layout","slug":"rwd/patterns/css-grid-responsive-layout"},{"title":"Object and Array Destructuring in JavaScript","slug":"object-array-destructuring"},{"title":"Build your own React Router","slug":"build-your-own-react-router"},{"title":"Configuring HTTP2 Push with Wordpress","slug":"rwd/articles/configuring-http2-push-wordpress"},{"title":"React Interview Questions","slug":"react-interview-questions"},{"title":"React 'Aha' Moments","slug":"react-aha-moments"},{"title":"React Elements vs React Components","slug":"react-elements-vs-react-components"},{"title":"Flexible Images and Media","slug":"rwd/guidelines/flexible-images-and-media"},{"title":"Content First Design","slug":"rwd/design/content-first-design"},{"title":"Responsive Typography","slug":"rwd/design/responsive-typography"},{"title":"media queries for common device breakpoints","slug":"rwd/develop/browser-feature-support/media-queries-for-common-device-breakpoints"},{"title":"Viewport Meta Element","slug":"rwd/develop/responsive-html/viewport-meta-element"},{"title":"Defining Breakpoints","slug":"rwd/strategy/page-layout/defining-breakpoints"},{"title":"Mobile First","slug":"rwd/strategy/page-layout/mobile-first"},{"title":"Imperative vs Declarative Programming","slug":"imperative-vs-declarative-programming"},{"title":"What is the deal with Accelerated Mobile Pages - AMP","slug":"rwd/articles/whats-the-deal-with-accelerated-mobile-pages-amp"},{"title":"Responsive Field Day","slug":"rwd/examples/responsive-field-day"},{"title":"Why you donât need device specific breakpoints","slug":"rwd/articles/why-you-dont-need-device-specific-breakpoints"},{"title":"Reducing image sizes","slug":"rwd/articles/reducing-image-sizes"},{"title":"AngularJS: Factory vs Service vs Provider","slug":"angularjs-factory-vs-service-vs-provider"},{"title":"Responsive Icons","slug":"rwd/articles/responsive-icons"},{"title":"Difference between .sass and .scss","slug":"rwd/articles/difference-between-sass-and-scss"},{"title":"24 Ways to be Responsive","slug":"rwd/articles/24-ways-to-be-responsive"},{"title":"Lazy Load (jQuery)","slug":"rwd/resources/javascript-jquery/lazy-load-jquery"},{"title":"The printer is a device too!","slug":"articles/the-printer-is-a-device-too"},{"title":"Refine Slide","slug":"rwd/resources/images/refine-slide"},{"title":"adapt.js","slug":"rwd/resources/javascript-jquery/adapt-js"},{"title":"Demonstrating Responsive Design","slug":"rwd/resources/testing/demonstrating-responsive-design"},{"title":"960 Grid System","slug":"rwd/resources/frameworks/960-grid-system"},{"title":"Respond.js","slug":"rwd/resources/javascript-jquery/respond-js"}]},"__N_SSG":true},"page":"/blog","query":{},"buildId":"r_4k6_gcL9FTomo4yA_x_","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.