<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link href="https://cmp.inmobi.com" rel="dns-prefetch"/><link href="https://script.tapfiliate.com" rel="dns-prefetch"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/138d5b0847abe1e1-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/612821e83c2a36f1-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/dbd9bfd7927f161c-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="https://s3.sitepoint.com/images/avatars/default-50x50.jpg"/><link rel="stylesheet" href="/_next/static/css/220a9b19060a26f4.css?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/0ec955cdb0dea670.css?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-3173990e08d4146b.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J"/><script src="/_next/static/chunks/4bd1b696-ff88d3ca4a9484f7.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/9da6db1e-fcf4bce8f3eec7df.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/1684-2e08e87c87fdfc5b.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/main-app-bb669fd26f4b7323.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/6874-fca7afc287aa7bac.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/5003-d0ce1640fc94e490.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/6255-0a4c5567ba14faf2.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/7242-5698c918c93f5c3d.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/1886-576d9bed3ac56251.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/app/(main)/layout-115044f1e7dd32c1.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/5607-305e3a4b27849a0f.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/6851-94dd323272180872.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/2317-e127dc4219cf2d79.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script src="/_next/static/chunks/app/(main)/%5B...slug%5D/page-b7409ff32a7ed204.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><link rel="preload" href="https://www.googletagmanager.com/gtm.js?id=GTM-KL8PMMW" as="script"/><link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=GTM-KL8PMMW" as="script"/><meta name="next-size-adjust" content=""/><link rel="preconnect" href="https://cmp.inmobi.com"/><link rel="preload" as="script" href="https://cmp.inmobi.com/choice/DsckBJsAJpkVK/www.sitepoint.com/choice.js?tag_version=V3"/><title>SitePoint Blog - The Best Web Development &amp; Design Blog — SitePoint</title><meta name="description" content="The web&#x27;s best resource for web developers and designers to keep up-to-date and learn JavaScript, CSS, UX, WordPress, PHP and more"/><meta property="og:title" content="SitePoint"/><meta property="og:description" content="The web&#x27;s best resource for web developers and designers to keep up-to-date and learn JavaScript, CSS, UX, WordPress, PHP and more"/><meta property="og:site_name" content="SitePoint"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://uploads.sitepoint.com/wp-content/uploads/2021/07/1626450679sp-og.jpg"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@sitepointdotcom"/><meta name="twitter:creator" content="@sitepointdotcom"/><meta name="twitter:title" content="SitePoint"/><meta name="twitter:description" content="The web&#x27;s best resource for web developers and designers to keep up-to-date and learn JavaScript, CSS, UX, WordPress, PHP and more"/><meta name="twitter:image" content="https://uploads.sitepoint.com/wp-content/uploads/2021/07/1626450679sp-og.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="256x256"/><script id="consent-stub">
              window.consentState = (function() {
                try {
                  // Try to read the most granular consent info available
                  var consents = localStorage.getItem('consents');
                  if (consents) {
                    var parsed = JSON.parse(consents);
                    return {
                      analytics: parsed.AnalyticsConsent === 'Granted',
                      marketing: parsed.AdsConsent === 'Granted'
                    };
                  }
                  // Fallback: getterms_cookie_consent (if present)
                  var getterms = localStorage.getItem('getterms_cookie_consent');
                  if (getterms) {
                    var parsed = JSON.parse(getterms);
                    var prefs = parsed.cookie_preferences || {};
                    return {
                      analytics: !!prefs.Analytics,
                      marketing: !!prefs.Marketing
                    };
                  }
                  // Fallback: default deny
                  return { analytics: false, marketing: false };
                } catch (e) {
                  return { analytics: false, marketing: false };
                }
              })();
            </script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" noModule=""></script></head><body class="__variable_9368d5 __variable_ce324d __variable_9a8899 font-sans flex flex-col"><div class="grow"><div class="mb-14 lg:mb-16"><header class="fixed z-10 h-14 lg:h-16 flex items-center inset-x-0 top-0 bg-panel-translucent border-b border-neutral-alpha-4 backdrop-blur-xl"><nav class="container-2xl flex items-center justify-between"><div class="flex gap-5 items-center"><a aria-label="SitePoint" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="129" height="28" fill="none" viewBox="0 0 129 28" class="h-7 w-auto text-neutral-12"><path fill="currentColor" d="m.606 12.304 2.067 1.938 6.496 6.007 2.756-2.713a.77.77 0 0 0 0-1.065l-2.559-2.229-2.756-2.616a.96.96 0 0 1 0-1.26l7.48-7.072L10.647 0 2.673 7.654.606 9.592A1.84 1.84 0 0 0 0 10.948a1.82 1.82 0 0 0 .606 1.356"></path><path fill="currentColor" d="m22.752 15.696-2.067-1.938L14.19 7.75l-2.756 2.713a.77.77 0 0 0 0 1.066l2.559 2.228 2.756 2.713a.864.864 0 0 1 0 1.162l-7.48 7.073L12.711 28l7.973-7.654 2.067-1.938a1.84 1.84 0 0 0 .606-1.356 1.82 1.82 0 0 0-.606-1.356M33.194 18.357a2.34 2.34 0 0 1-.811-.79q-.312-.489-.343-1.2h-2.182c.031.81.208 1.495.509 2.063a3.9 3.9 0 0 0 1.237 1.369c.52.347 1.112.59 1.777.748a10 10 0 0 0 2.12.22c.665 0 1.34-.063 2.016-.189a5.6 5.6 0 0 0 1.828-.663c.54-.326.988-.748 1.32-1.274.333-.516.5-1.169.5-1.969 0-.62-.126-1.147-.375-1.568a3.2 3.2 0 0 0-.977-1.042 5.2 5.2 0 0 0-1.392-.674c-.52-.169-1.06-.306-1.611-.432a67 67 0 0 0-1.548-.337 7.7 7.7 0 0 1-1.383-.41c-.415-.158-.758-.358-1.018-.6a1.2 1.2 0 0 1-.405-.927c0-.337.083-.61.26-.821.166-.21.395-.38.665-.505.28-.127.582-.211.914-.264.343-.052.665-.073.998-.073.363 0 .717.031 1.07.116.353.073.675.189.967.357.29.18.53.4.717.674s.3.632.332 1.053h2.193c-.052-.8-.219-1.453-.51-1.99a3.6 3.6 0 0 0-1.174-1.263 5 5 0 0 0-1.694-.653 10.7 10.7 0 0 0-2.078-.19c-.592 0-1.174.074-1.767.211a5.5 5.5 0 0 0-1.6.664 3.7 3.7 0 0 0-1.164 1.147c-.301.474-.447 1.032-.447 1.695 0 .842.219 1.495.645 1.969.426.473.966.842 1.61 1.095.645.263 1.341.463 2.1.61.758.148 1.454.306 2.099.484.644.169 1.184.4 1.61.695.427.284.645.706.645 1.264 0 .4-.104.736-.312.99a2 2 0 0 1-.78.6 4 4 0 0 1-1.049.273 8 8 0 0 1-1.08.074q-.674 0-1.3-.127a3.5 3.5 0 0 1-1.132-.41M46.16 7.429h-2.182v13.065h2.182zM55.343 9.324V7.429h-2.66V3.502H50.49V7.43h-2.265v1.895h2.265v8.306c0 .61.063 1.106.187 1.474.114.369.301.653.55.853.25.21.573.347.978.421s.894.116 1.455.116h1.683v-1.895h-1.008c-.343 0-.623-.021-.842-.042a1.1 1.1 0 0 1-.498-.158.63.63 0 0 1-.25-.358 2.5 2.5 0 0 1-.062-.61V9.323zM105.132 7.429h-2.193v13.065h2.193zM110.559 9.492V7.43h-2.057v13.065h2.192v-7.38c0-.59.073-1.137.239-1.632a3.7 3.7 0 0 1 .738-1.305 3.2 3.2 0 0 1 1.216-.853c.499-.21 1.07-.305 1.746-.305.842 0 1.507.231 1.985.705s.717 1.116.717 1.916v8.854h2.192v-8.601q0-1.059-.218-1.927a3.6 3.6 0 0 0-.759-1.505c-.363-.421-.831-.748-1.423-.99q-.874-.347-2.182-.347-2.962 0-4.334 2.368zM128.8 9.324V7.429h-2.65V3.502h-2.193V7.43h-2.265v1.895h2.265v8.306c0 .61.063 1.106.187 1.474.115.369.302.653.551.853.25.21.572.347.977.421s.894.116 1.455.116h1.673v-1.895h-1.008c-.333 0-.613-.021-.831-.042q-.328-.032-.499-.158a.63.63 0 0 1-.25-.358 2.5 2.5 0 0 1-.062-.61V9.323z"></path><path fill="currentColor" fill-rule="evenodd" d="M67.381 19.652c-.997.747-2.255 1.116-3.761 1.116-1.06 0-1.985-.169-2.765-.506a5.44 5.44 0 0 1-1.974-1.41 6 6 0 0 1-1.195-2.18c-.27-.842-.416-1.758-.457-2.747 0-1 .156-1.906.467-2.738a6.6 6.6 0 0 1 1.3-2.147 6 6 0 0 1 1.984-1.41 6.2 6.2 0 0 1 2.515-.506c1.185 0 2.161.231 2.951.716a5.95 5.95 0 0 1 1.881 1.831c.468.748.79 1.559.977 2.432a10.5 10.5 0 0 1 .218 2.495h-9.976c-.01.58.052 1.116.208 1.632s.405.969.748 1.369.78.716 1.32.947q.795.348 1.87.348c.935 0 1.694-.2 2.286-.632.593-.41.988-1.053 1.175-1.916h2.161c-.29 1.463-.935 2.569-1.933 3.306m-1.33-9.56c.343.327.603.716.8 1.17.198.462.312.936.354 1.441h-7.659a4.3 4.3 0 0 1 .343-1.42c.187-.453.447-.843.769-1.18s.717-.6 1.174-.8c.447-.19.967-.284 1.528-.284.55 0 1.06.094 1.507.284q.686.3 1.184.79M74.331 7.429v1.769h.052c.364-.727.925-1.253 1.704-1.58.77-.336 1.621-.494 2.546-.494 1.04 0 1.933.179 2.692.558.74.345 1.394.857 1.912 1.495.509.631.883 1.368 1.143 2.19.26.831.384 1.705.384 2.631q0 1.39-.374 2.622a6.15 6.15 0 0 1-1.132 2.168c-.5.611-1.143 1.095-1.902 1.453-.77.348-1.652.527-2.67.527q-.484 0-1.092-.095a6 6 0 0 1-1.195-.337 4.5 4.5 0 0 1-1.122-.621 3.3 3.3 0 0 1-.894-.969h-.052v6.727h-2.193V7.43zm7.129 3.074q.498.693.748 1.558c.156.58.239 1.18.239 1.78 0 .642-.062 1.263-.208 1.873a4.8 4.8 0 0 1-.665 1.622 3.46 3.46 0 0 1-1.226 1.137c-.51.284-1.133.42-1.891.42q-1.138 0-1.933-.41c-.53-.284-.967-.642-1.3-1.105-.342-.453-.581-.98-.737-1.58a7.2 7.2 0 0 1-.229-1.852c0-.61.073-1.2.219-1.8a4.9 4.9 0 0 1 .706-1.58 3.8 3.8 0 0 1 1.258-1.116c.52-.294 1.143-.431 1.88-.431.707 0 1.32.137 1.85.4.506.257.947.628 1.289 1.084M87.296 11.282a6.3 6.3 0 0 1 1.236-2.18A6 6 0 0 1 90.58 7.65c.8-.347 1.725-.526 2.774-.526 1.07 0 1.995.179 2.796.526q1.2.537 2.026 1.453c.55.621.956 1.337 1.237 2.18.27.83.415 1.726.415 2.684a8.6 8.6 0 0 1-.415 2.684c-.281.821-.686 1.548-1.237 2.158-.55.622-1.226 1.095-2.026 1.443-.8.347-1.726.516-2.796.516-1.05 0-1.974-.169-2.774-.516-.811-.348-1.497-.821-2.048-1.443a6.3 6.3 0 0 1-1.236-2.158 8.6 8.6 0 0 1-.406-2.684q0-1.437.406-2.685m3.128 6.338c-.385-.41-.676-.927-.894-1.537-.218-.621-.322-1.316-.322-2.116 0-.79.104-1.495.322-2.106s.51-1.137.894-1.558a3.7 3.7 0 0 1 1.32-.958 4 4 0 0 1 1.61-.326c.572 0 1.102.105 1.61.326.51.221.947.537 1.331.958.394.454.695.984.883 1.558.219.61.323 1.316.323 2.106 0 .8-.104 1.495-.323 2.116a4.3 4.3 0 0 1-.883 1.537 4 4 0 0 1-1.338.95c-.506.22-1.052.33-1.603.324a4 4 0 0 1-1.61-.327 3.8 3.8 0 0 1-1.32-.947" clip-rule="evenodd"></path><path fill="currentColor" d="M46.36 4.804a1.3 1.3 0 0 1-1.3 1.303 1.3 1.3 0 0 1-1.298-1.303 1.3 1.3 0 0 1 1.299-1.302 1.3 1.3 0 0 1 1.298 1.302M105.348 4.802a1.3 1.3 0 0 1-1.299 1.303 1.3 1.3 0 0 1-1.298-1.303 1.3 1.3 0 0 1 1.298-1.302 1.3 1.3 0 0 1 1.299 1.302"></path></svg></a><div class="h-6 w-px bg-neutral-alpha-4 hidden lg:block"></div></div><button aria-label="Toggle navigation" aria-expanded="false" aria-controls="mobile-nav" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto bg-transparent text-neutral-12 hover:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18" class="size-[18px]"><path fill="currentColor" fill-rule="evenodd" d="M2.25 3.75a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m5.25 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m5.25 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0M2.25 9a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0M7.5 9a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m5.25 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m-10.5 5.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m5.25 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m5.25 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0" clip-rule="evenodd"></path></svg><span class="block"></span></button><button class="h-9 items-center lg:hidden gap-2 px-1 pr-1.5 rounded-full border border-neutral-alpha-4 text-neutral-11 hover:bg-neutral-alpha-3 hidden"><img src="https://s3.sitepoint.com/images/avatars/default-50x50.jpg" alt="avatar" class="rounded-full object-contain size-7"/><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18" class="size-6"><path fill="currentColor" fill-rule="evenodd" d="M1.5 4.5a.75.75 0 0 1 .75-.75h13.5a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1-.75-.75m0 4.5a.75.75 0 0 1 .75-.75h13.5a.75.75 0 0 1 0 1.5H2.25A.75.75 0 0 1 1.5 9m0 4.5a.75.75 0 0 1 .75-.75h13.5a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg></button><div class="ml-5 mr-auto hidden lg:flex gap-1"><a href="/premium/pricing/?ref_source=sitepoint&amp;ref_medium=topnav" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto !rounded-full bg-transparent text-neutral-12 hover:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3">Premium</a><a href="/premium/library/" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto !rounded-full bg-transparent text-neutral-12 hover:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3">Library</a><a href="/community/" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto !rounded-full bg-transparent text-neutral-12 hover:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3">Community</a><a href="https://jobs.sitepoint.com/" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto !rounded-full bg-transparent text-neutral-12 hover:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3">Jobs</a><div><div class="relative" data-headlessui-state=""><div><button class="focus:outline-none focus:ring-0" type="button" aria-expanded="false" data-headlessui-state=""><div class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto !rounded-full bg-transparent text-neutral-12 hover:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3" tabindex="0"><span class="text-3 font-medium">Tools</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.529 9.805c.26.26.682.26.942 0l2.667-2.667a.667.667 0 10-.943-.943L8 8.391 5.805 6.195a.667.667 0 10-.943.943l2.667 2.667z" clip-rule="evenodd"></path></svg></div></button></div></div><div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div></div><div><div class="relative" data-headlessui-state=""><div><button class="focus:outline-none focus:ring-0" type="button" aria-expanded="false" data-headlessui-state=""><div class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto !rounded-full bg-transparent text-neutral-12 hover:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3" tabindex="0"><span class="text-3 font-medium">Tutorials</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.529 9.805c.26.26.682.26.942 0l2.667-2.667a.667.667 0 10-.943-.943L8 8.391 5.805 6.195a.667.667 0 10-.943.943l2.667 2.667z" clip-rule="evenodd"></path></svg></div></button></div></div><div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div></div><div><div class="relative" data-headlessui-state=""><div><a href="/blog/"><button class="focus:outline-none focus:ring-0" type="button" aria-expanded="false" data-headlessui-state=""><div class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto !rounded-full bg-transparent text-neutral-12 hover:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3" tabindex="0"><span class="text-3 font-medium">Blog</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.529 9.805c.26.26.682.26.942 0l2.667-2.667a.667.667 0 10-.943-.943L8 8.391 5.805 6.195a.667.667 0 10-.943.943l2.667 2.667z" clip-rule="evenodd"></path></svg></div></button></a></div></div><div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div></div></div><div class="flex-1 hidden"><div class="relative flex flex-col pt-6 max-h-full lg:block lg:pt-0 lg:overflow-visible lg:flex-auto flex-auto flex-shrink-0"><form role="search" noValidate="" class="flex px-4 lg:px-0" action=""><div class="relative w-full"><div class="flex flex-col gap-2 w-full"><div class="group relative"><input class="relative form-input flex items-center text-ellipsis w-full border-none bg-neutral-alpha-3 hover:bg-neutral-alpha-4 focus:ring-0 focus:bg-panel-1 focus:outline-1 focus:outline-offset-0 focus:outline-neutral-alpha-6 text-3 font-normal placeholder:text-3 placeholder:font-normal h-10 rounded-lg px-2.5 pr-[38px]" autoComplete="off" autoCorrect="off" autoCapitalize="off" placeholder="Search article" spellCheck="false" maxLength="512" type="search" autofocus="" value=""/><button class="absolute top-1/2 transform -translate-y-1/2 text-neutral-alpha-9 group-hover:text-neutral-alpha-11 z-[2] size-6 right-2.5" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="absolute top-1/2 transform -translate-y-1/2 text-neutral-alpha-9 group-hover:text-neutral-alpha-11 z-[2] size-6"><path fill="currentColor" fill-opacity="0.882" fill-rule="evenodd" d="M11 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12m-8 6a8 8 0 1 1 14.32 4.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387A8 8 0 0 1 3 11" clip-rule="evenodd"></path></svg></button></div></div></div></form></div><button class="items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-2.5 rounded-[7px] font-medium text-3 gap-1 min-h-9 w-auto bg-transparent border border-neutral-alpha-6 text-neutral-12 hover:bg-neutral-alpha-3 hover:border-neutral-alpha-2 disabled:text-neutral-alpha-8 disabled:bg-panel-3 hidden ml-4 lg:inline-flex">Cancel</button></div><div class="hidden items-center gap-3 lg:flex"><button class="size-7 hidden lg:flex items-center justify-center hover:text-neutral-11 text-neutral-12 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="size-6"><path fill="currentColor" fill-opacity="0.882" fill-rule="evenodd" d="M11 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12m-8 6a8 8 0 1 1 14.32 4.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387A8 8 0 0 1 3 11" clip-rule="evenodd"></path></svg></button><a href="/premium/sign-in/"><button class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-2.5 rounded-[7px] font-medium text-3 gap-1 min-h-9 w-auto bg-neutral-alpha-3 text-neutral-12 hover:bg-neutral-alpha-4 disabled:text-neutral-alpha-8 disabled:bg-panel-3">Login</button></a><a href="/premium/pricing/?ref_source=sitepoint&amp;ref_medium=topnav" id="mobile-join-premium" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-2.5 rounded-[7px] font-medium text-3 gap-1 min-h-9 w-auto bg-primary-9 text-white hover:bg-primary-10 disabled:text-neutral-alpha-8 disabled:bg-panel-3">Start Free Trial</a></div><div id="mobile-nav" class="bg-panel-1 fixed z-[10] flex-col top-[3.5rem] h-[calc(100vh-3.5rem)] inset-x-0 hidden"><div class="relative flex flex-col pt-6 max-h-full lg:block lg:pt-0 lg:overflow-visible lg:flex-auto flex-auto flex-shrink-0"><form role="search" noValidate="" class="flex px-4 lg:px-0" action=""><div class="relative w-full"><div class="flex flex-col gap-2 w-full"><div class="group relative"><input class="relative form-input flex items-center text-ellipsis w-full border-none bg-neutral-alpha-3 hover:bg-neutral-alpha-4 focus:ring-0 focus:bg-panel-1 focus:outline-1 focus:outline-offset-0 focus:outline-neutral-alpha-6 text-3 font-normal placeholder:text-3 placeholder:font-normal h-10 rounded-lg px-2.5 pr-[38px]" autoComplete="off" autoCorrect="off" autoCapitalize="off" placeholder="Search article" spellCheck="false" maxLength="512" type="search" value=""/><button class="absolute top-1/2 transform -translate-y-1/2 text-neutral-alpha-9 group-hover:text-neutral-alpha-11 z-[2] size-6 right-2.5" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="absolute top-1/2 transform -translate-y-1/2 text-neutral-alpha-9 group-hover:text-neutral-alpha-11 z-[2] size-6"><path fill="currentColor" fill-opacity="0.882" fill-rule="evenodd" d="M11 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12m-8 6a8 8 0 1 1 14.32 4.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387A8 8 0 0 1 3 11" clip-rule="evenodd"></path></svg></button></div></div></div></form></div><div class="flex flex-col w-full flex-1 h-full overflow-hidden"><div class="flex flex-col px-4 overflow-y-auto w-full mt-6 gap-1"><div class="flex items-center justify-between cursor-pointer py-2 px-3 w-full"><div class="gap-2 flex items-center"><div class="text-jar-4 font-medium text-neutral-12"><a href="/premium/pricing/?ref_source=sitepoint&amp;ref_medium=topnav">Premium</a></div></div></div><div class="flex items-center justify-between cursor-pointer py-2 px-3 w-full"><div class="gap-2 flex items-center"><div class="text-jar-4 font-medium text-neutral-12"><a href="/premium/library/">Library</a></div></div></div><div class="flex items-center justify-between cursor-pointer py-2 px-3 w-full"><div class="gap-2 flex items-center"><div class="text-jar-4 font-medium text-neutral-12"><a href="/community/">Community</a></div></div></div><div class="flex items-center justify-between cursor-pointer py-2 px-3 w-full"><div class="gap-2 flex items-center"><div class="text-jar-4 font-medium text-neutral-12"><a href="https://jobs.sitepoint.com/">Developer Jobs</a></div></div></div><div class="flex items-center justify-between cursor-pointer py-2 px-3 w-full"><div class="gap-2 flex items-center"><div class="text-jar-4 font-medium text-neutral-12">Tutorials</div></div><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5 text-neutral-11"><path fill="currentColor" fill-rule="evenodd" d="M7.744 6.077a.833.833 0 0 1 1.179 0l3.333 3.334a.833.833 0 0 1 0 1.178l-3.333 3.334a.833.833 0 1 1-1.179-1.179L10.488 10 7.744 7.256a.833.833 0 0 1 0-1.179" clip-rule="evenodd"></path></svg></div><div class="flex items-center justify-between cursor-pointer py-2 px-3 w-full"><div class="gap-2 flex items-center"><div class="text-jar-4 font-medium text-neutral-12">Tools</div></div><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5 text-neutral-11"><path fill="currentColor" fill-rule="evenodd" d="M7.744 6.077a.833.833 0 0 1 1.179 0l3.333 3.334a.833.833 0 0 1 0 1.178l-3.333 3.334a.833.833 0 1 1-1.179-1.179L10.488 10 7.744 7.256a.833.833 0 0 1 0-1.179" clip-rule="evenodd"></path></svg></div><div class="flex items-center justify-between cursor-pointer py-2 px-3 w-full"><div class="gap-2 flex items-center"><div class="text-jar-4 font-medium text-neutral-12">Blog</div></div><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5 text-neutral-11"><path fill="currentColor" fill-rule="evenodd" d="M7.744 6.077a.833.833 0 0 1 1.179 0l3.333 3.334a.833.833 0 0 1 0 1.178l-3.333 3.334a.833.833 0 1 1-1.179-1.179L10.488 10 7.744 7.256a.833.833 0 0 1 0-1.179" clip-rule="evenodd"></path></svg></div></div><div class="flex flex-col mt-6 gap-2 px-3"><a href="/premium/sign-in/"><button class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-2.5 rounded-[7px] font-medium text-3 gap-1 min-h-9 bg-neutral-alpha-3 text-neutral-12 hover:bg-neutral-alpha-4 disabled:text-neutral-alpha-8 disabled:bg-panel-3 w-full">Login</button></a><a href="/premium/pricing/?ref_source=sitepoint&amp;ref_medium=topnav" id="mobile-join-premium" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-2.5 rounded-[7px] font-medium text-3 gap-1 min-h-9 bg-primary-9 text-white hover:bg-primary-10 disabled:text-neutral-alpha-8 disabled:bg-panel-3 w-full">Start Free Trial</a></div><div class="px-3 mt-auto py-8"><ul class="flex items-center gap-1 shrink-0"><li class="size-8 rounded-md flex items-center justify-center cursor-pointer hover:bg-neutral-alpha-3 text-neutral-11"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5"><g clip-path="url(#clip0_3590_670)"><path fill="currentColor" fill-rule="evenodd" d="M10 .833c.46 0 .833.373.833.834V2.5a.833.833 0 1 1-1.666 0v-.833c0-.46.373-.834.833-.834M3.52 3.52a.833.833 0 0 1 1.178 0l.591.592a.833.833 0 1 1-1.178 1.178l-.592-.591a.833.833 0 0 1 0-1.179m12.96 0a.833.833 0 0 1 0 1.179l-.59.591a.833.833 0 1 1-1.18-1.178l.592-.592a.833.833 0 0 1 1.179 0M7.644 7.643a3.333 3.333 0 1 0 4.714 4.714 3.333 3.333 0 0 0-4.714-4.714M6.464 6.464a5 5 0 1 1 7.072 7.072 5 5 0 0 1-7.072-7.072M.834 10c0-.46.372-.833.833-.833H2.5a.833.833 0 1 1 0 1.666h-.833A.833.833 0 0 1 .833 10m15.833 0c0-.46.373-.833.833-.833h.833a.833.833 0 0 1 0 1.666H17.5a.833.833 0 0 1-.833-.833M5.289 14.71a.833.833 0 0 1 0 1.18l-.591.59a.833.833 0 0 1-1.179-1.178l.592-.591a.833.833 0 0 1 1.178 0m9.422 0a.833.833 0 0 1 1.178 0l.592.592a.833.833 0 0 1-1.179 1.179l-.591-.592a.833.833 0 0 1 0-1.178M10 16.668c.46 0 .833.373.833.833v.833a.833.833 0 0 1-1.666 0V17.5c0-.46.373-.833.833-.833" clip-rule="evenodd"></path></g><defs><clipPath id="clip0_3590_670"><path fill="#fff" d="M0 0h20v20H0z"></path></clipPath></defs></svg></li><li class="size-8 rounded-md flex items-center justify-center cursor-pointer hover:bg-neutral-alpha-3 text-neutral-11"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M10.08 2.109a.83.83 0 0 1-.034.89A5 5 0 0 0 17 9.954a.833.833 0 0 1 1.303.757A8.333 8.333 0 1 1 9.29 1.697a.83.83 0 0 1 .79.411M7.854 3.686a6.665 6.665 0 1 0 8.46 8.46 6.667 6.667 0 0 1-8.46-8.46" clip-rule="evenodd"></path></svg></li><li class="size-8 rounded-md flex items-center justify-center cursor-pointer bg-neutral-alpha-3 text-neutral-12"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M2 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-4v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-3H5a3 3 0 0 1-3-3zm2 8v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1zm16-2H4V6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm-9 6v2h2v-2z" clip-rule="evenodd"></path></svg></li></ul></div></div></div></nav></header></div><div class="w-full h-20 xl:h-14"><div class="w-full flex xl:justify-center bg-accent-3 fixed h-20 xl:h-14 z-[2]"><div class="w-full xl:hidden"><div class="xl:w-3/5 w-full flex justify-between xl:items-center items-start xl:rounded-[999px] xl:px-4 2xl:px-24 p-4 hello-bar bg-accent-9"><div class="flex xl:flex-row flex-col xl:gap-4 xl:items-center"><svg xmlns="http://www.w3.org/2000/svg" width="150" height="26" viewBox="0 0 150 26" fill="none"><path d="M33.0654 13.0234C33.0654 8.47403 35.9415 5.44766 40.2457 5.44766C43.7253 5.44766 46.3198 7.47193 46.8226 10.6185H44.1074C43.6045 8.91488 42.1363 7.91279 40.1853 7.91279C37.4701 7.91279 35.7605 9.87693 35.7605 13.0034C35.7605 16.1099 37.4902 18.1141 40.1853 18.1141C42.1766 18.1141 43.7051 17.0718 44.1879 15.4485H46.8629C46.2998 18.5349 43.6045 20.5792 40.125 20.5792C35.8409 20.5792 33.0654 17.6131 33.0654 13.0234Z" fill="white"></path><path d="M53.2649 10.1575C56.3421 10.1575 58.5747 12.2819 58.5747 15.3684C58.5747 18.4549 56.3421 20.5793 53.2649 20.5793C50.1876 20.5793 47.955 18.4548 47.955 15.3684C47.955 12.282 50.1876 10.1575 53.2649 10.1575ZM53.2649 18.3947C54.9544 18.3947 56.1209 17.1721 56.1209 15.3684C56.1209 13.5647 54.9544 12.3421 53.2649 12.3421C51.5754 12.3421 50.4088 13.5646 50.4088 15.3684C50.4088 17.1721 51.5754 18.3947 53.2649 18.3947Z" fill="white"></path><path d="M59.6629 15.4284C59.6629 12.3421 61.4731 10.1375 64.4699 10.1375C65.8577 10.1375 67.0846 10.7187 67.7081 11.7007V5.42764H70.1418V20.3386H67.8892L67.7282 18.7954C67.1249 19.9378 65.8376 20.5992 64.3291 20.5992C61.453 20.5992 59.6629 18.4948 59.6629 15.4284ZM67.688 15.3483C67.688 13.5646 66.5818 12.3221 64.8722 12.3221C63.1625 12.3221 62.1166 13.5846 62.1166 15.3483C62.1166 17.1121 63.1626 18.3545 64.8722 18.3545C66.5817 18.3545 67.688 17.132 67.688 15.3483Z" fill="white"></path><path d="M71.7871 15.3884C71.7871 12.2819 73.8185 10.1375 76.735 10.1375C79.7117 10.1375 81.6023 12.1215 81.6023 15.2081V15.9496L74.1203 15.9695C74.3013 17.7132 75.2265 18.595 76.8556 18.595C78.2032 18.595 79.0882 18.0739 79.3698 17.132H81.6425C81.2201 19.2965 79.4099 20.5992 76.8154 20.5992C73.8587 20.5992 71.7871 18.4547 71.7871 15.3884ZM74.1805 14.4063H79.1686C79.1686 13.0434 78.2233 12.1416 76.755 12.1416C75.3068 12.1416 74.4219 12.9232 74.1805 14.4063Z" fill="white"></path><path d="M83.2697 20.3386V10.4381H85.5223L85.7235 11.6005C86.2263 10.7788 87.2319 10.1375 88.66 10.1375C90.1684 10.1375 91.2143 10.879 91.7372 12.0213C92.2401 10.879 93.4066 10.1375 94.9151 10.1375C97.3286 10.1375 98.656 11.5804 98.656 13.8651V20.3386H96.2224V14.5065C96.2224 13.0836 95.4582 12.342 94.2916 12.342C93.1049 12.342 92.1998 13.1036 92.1998 14.727V20.3386H89.746V14.4865C89.746 13.1036 89.0018 12.3621 87.8353 12.3621C86.6688 12.3621 85.7235 13.1236 85.7235 14.727V20.3386H83.2697Z" fill="white"></path><path d="M100.191 15.3884C100.191 12.2819 102.223 10.1375 105.139 10.1375C108.116 10.1375 110.007 12.1215 110.007 15.2081V15.9496L102.525 15.9696C102.706 17.7133 103.631 18.5951 105.26 18.5951C106.607 18.5951 107.492 18.074 107.774 17.1321H110.047C109.624 19.2966 107.814 20.5993 105.22 20.5993C102.263 20.5992 100.191 18.4547 100.191 15.3884ZM102.585 14.4063H107.573C107.573 13.0434 106.628 12.1416 105.159 12.1416C103.711 12.1416 102.826 12.9232 102.585 14.4063Z" fill="white"></path><path d="M112.518 20.3386V12.4823H110.607V10.4381H112.518V7.35163H114.972V10.4381H116.903V12.4823H114.972V20.3386H112.518Z" fill="white"></path><path d="M124.238 12.6627H123.333C121.563 12.6627 120.457 13.6047 120.457 15.5286V20.3387H118.003V10.4581H120.316L120.457 11.9011C120.879 10.9191 121.824 10.2577 123.152 10.2577C123.518 10.2587 123.883 10.3059 124.238 10.398L124.238 12.6627Z" fill="white"></path><path d="M125.119 6.97086C125.119 6.67839 125.206 6.39246 125.369 6.14901C125.531 5.90557 125.763 5.71549 126.033 5.60267C126.304 5.48986 126.602 5.45934 126.891 5.51496C127.179 5.57058 127.444 5.70985 127.653 5.91527C127.862 6.12068 128.005 6.38307 128.065 6.66942C128.124 6.95578 128.098 7.25333 127.988 7.52466C127.879 7.79598 127.691 8.02896 127.449 8.19431C127.207 8.35965 126.921 8.44998 126.628 8.45392C126.43 8.45643 126.235 8.41992 126.052 8.34653C125.869 8.27313 125.703 8.16431 125.562 8.02635C125.422 7.8884 125.311 7.72407 125.235 7.54289C125.159 7.36171 125.119 7.16727 125.119 6.97086ZM125.401 10.4381H127.854V20.3386H125.401L125.401 10.4381Z" fill="white"></path><path d="M134.377 10.1375C137.092 10.1375 138.943 11.6406 139.204 14.0255H136.75C136.469 12.9033 135.644 12.322 134.477 12.322C132.909 12.322 131.863 13.5044 131.863 15.3683C131.863 17.2323 132.828 18.3946 134.397 18.3946C135.624 18.3946 136.489 17.7933 136.75 16.7111H139.224C138.923 19.0159 136.992 20.5992 134.397 20.5992C131.38 20.5992 129.409 18.5148 129.409 15.3683C129.409 12.3019 131.44 10.1375 134.377 10.1375Z" fill="white"></path><path d="M142.46 17.3324C142.48 18.1942 143.124 18.7354 144.25 18.7354C145.397 18.7354 146.02 18.2743 146.02 17.5529C146.02 17.0518 145.759 16.691 144.874 16.4907L143.084 16.0698C141.294 15.669 140.429 14.8273 140.429 13.244C140.429 11.2999 142.078 10.1375 144.371 10.1375C146.604 10.1375 148.112 11.4202 148.132 13.3442H145.799C145.779 12.5024 145.216 11.9613 144.27 11.9613C143.305 11.9613 142.742 12.4022 142.742 13.1437C142.742 13.705 143.184 14.0657 144.029 14.2661L145.819 14.6869C147.489 15.0677 148.333 15.8293 148.333 17.3524C148.333 19.3566 146.624 20.5992 144.17 20.5992C141.696 20.5992 140.127 19.2764 140.127 17.3324H142.46Z" fill="white"></path><path d="M9.88511 23L4.53515 12.9999L9.88511 3H5.34996L0 12.9999L5.34996 23H9.88511Z" fill="white"></path><path d="M14.5874 14.202L20.5803 3H16.0453L12.9629 8.76139L9.88069 3H5.3457L11.3384 14.202H14.5874Z" fill="white" fill-opacity="0.4"></path><path d="M20.5814 23L25.9312 12.9999L20.5814 3H16.0461L21.396 12.9999L16.0461 23H20.5814Z" fill="white"></path></svg><p class="lg:text-4 xs:text-xs md:text-3 font-medium text-white hello-bar-title">Score code, devs, and debt fast.</p></div><a href="https://codemetrics.ai/?utm_source=hellobar&amp;utm_medium=banner&amp;utm_campaign=cm_hello_bar" target="_blank" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto text-neutral-12 border border-neutral-alpha-6 shadow-[0px_1px_2px_0px_#0000000F_0px_0px_0px_1px_#00000000] hover:bg-panel-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3 bg-panel-1">Start free trial</a></div></div><div class="relative w-4/5 xl:flex justify-center hidden"><div class="h-full w-full rounded-[999px] absolute top-0 bg-accent-3"></div><div class="h-full w-4/5 rounded-[999px] absolute top-0 bg-accent-6"></div><div class="xl:w-3/5 w-full flex justify-between xl:items-center items-start xl:rounded-[999px] xl:px-4 2xl:px-24 p-4 hello-bar bg-accent-9 z-[2]"><div class="flex xl:flex-row flex-col xl:gap-4 xl:items-center"><svg xmlns="http://www.w3.org/2000/svg" width="150" height="26" viewBox="0 0 150 26" fill="none"><path d="M33.0654 13.0234C33.0654 8.47403 35.9415 5.44766 40.2457 5.44766C43.7253 5.44766 46.3198 7.47193 46.8226 10.6185H44.1074C43.6045 8.91488 42.1363 7.91279 40.1853 7.91279C37.4701 7.91279 35.7605 9.87693 35.7605 13.0034C35.7605 16.1099 37.4902 18.1141 40.1853 18.1141C42.1766 18.1141 43.7051 17.0718 44.1879 15.4485H46.8629C46.2998 18.5349 43.6045 20.5792 40.125 20.5792C35.8409 20.5792 33.0654 17.6131 33.0654 13.0234Z" fill="white"></path><path d="M53.2649 10.1575C56.3421 10.1575 58.5747 12.2819 58.5747 15.3684C58.5747 18.4549 56.3421 20.5793 53.2649 20.5793C50.1876 20.5793 47.955 18.4548 47.955 15.3684C47.955 12.282 50.1876 10.1575 53.2649 10.1575ZM53.2649 18.3947C54.9544 18.3947 56.1209 17.1721 56.1209 15.3684C56.1209 13.5647 54.9544 12.3421 53.2649 12.3421C51.5754 12.3421 50.4088 13.5646 50.4088 15.3684C50.4088 17.1721 51.5754 18.3947 53.2649 18.3947Z" fill="white"></path><path d="M59.6629 15.4284C59.6629 12.3421 61.4731 10.1375 64.4699 10.1375C65.8577 10.1375 67.0846 10.7187 67.7081 11.7007V5.42764H70.1418V20.3386H67.8892L67.7282 18.7954C67.1249 19.9378 65.8376 20.5992 64.3291 20.5992C61.453 20.5992 59.6629 18.4948 59.6629 15.4284ZM67.688 15.3483C67.688 13.5646 66.5818 12.3221 64.8722 12.3221C63.1625 12.3221 62.1166 13.5846 62.1166 15.3483C62.1166 17.1121 63.1626 18.3545 64.8722 18.3545C66.5817 18.3545 67.688 17.132 67.688 15.3483Z" fill="white"></path><path d="M71.7871 15.3884C71.7871 12.2819 73.8185 10.1375 76.735 10.1375C79.7117 10.1375 81.6023 12.1215 81.6023 15.2081V15.9496L74.1203 15.9695C74.3013 17.7132 75.2265 18.595 76.8556 18.595C78.2032 18.595 79.0882 18.0739 79.3698 17.132H81.6425C81.2201 19.2965 79.4099 20.5992 76.8154 20.5992C73.8587 20.5992 71.7871 18.4547 71.7871 15.3884ZM74.1805 14.4063H79.1686C79.1686 13.0434 78.2233 12.1416 76.755 12.1416C75.3068 12.1416 74.4219 12.9232 74.1805 14.4063Z" fill="white"></path><path d="M83.2697 20.3386V10.4381H85.5223L85.7235 11.6005C86.2263 10.7788 87.2319 10.1375 88.66 10.1375C90.1684 10.1375 91.2143 10.879 91.7372 12.0213C92.2401 10.879 93.4066 10.1375 94.9151 10.1375C97.3286 10.1375 98.656 11.5804 98.656 13.8651V20.3386H96.2224V14.5065C96.2224 13.0836 95.4582 12.342 94.2916 12.342C93.1049 12.342 92.1998 13.1036 92.1998 14.727V20.3386H89.746V14.4865C89.746 13.1036 89.0018 12.3621 87.8353 12.3621C86.6688 12.3621 85.7235 13.1236 85.7235 14.727V20.3386H83.2697Z" fill="white"></path><path d="M100.191 15.3884C100.191 12.2819 102.223 10.1375 105.139 10.1375C108.116 10.1375 110.007 12.1215 110.007 15.2081V15.9496L102.525 15.9696C102.706 17.7133 103.631 18.5951 105.26 18.5951C106.607 18.5951 107.492 18.074 107.774 17.1321H110.047C109.624 19.2966 107.814 20.5993 105.22 20.5993C102.263 20.5992 100.191 18.4547 100.191 15.3884ZM102.585 14.4063H107.573C107.573 13.0434 106.628 12.1416 105.159 12.1416C103.711 12.1416 102.826 12.9232 102.585 14.4063Z" fill="white"></path><path d="M112.518 20.3386V12.4823H110.607V10.4381H112.518V7.35163H114.972V10.4381H116.903V12.4823H114.972V20.3386H112.518Z" fill="white"></path><path d="M124.238 12.6627H123.333C121.563 12.6627 120.457 13.6047 120.457 15.5286V20.3387H118.003V10.4581H120.316L120.457 11.9011C120.879 10.9191 121.824 10.2577 123.152 10.2577C123.518 10.2587 123.883 10.3059 124.238 10.398L124.238 12.6627Z" fill="white"></path><path d="M125.119 6.97086C125.119 6.67839 125.206 6.39246 125.369 6.14901C125.531 5.90557 125.763 5.71549 126.033 5.60267C126.304 5.48986 126.602 5.45934 126.891 5.51496C127.179 5.57058 127.444 5.70985 127.653 5.91527C127.862 6.12068 128.005 6.38307 128.065 6.66942C128.124 6.95578 128.098 7.25333 127.988 7.52466C127.879 7.79598 127.691 8.02896 127.449 8.19431C127.207 8.35965 126.921 8.44998 126.628 8.45392C126.43 8.45643 126.235 8.41992 126.052 8.34653C125.869 8.27313 125.703 8.16431 125.562 8.02635C125.422 7.8884 125.311 7.72407 125.235 7.54289C125.159 7.36171 125.119 7.16727 125.119 6.97086ZM125.401 10.4381H127.854V20.3386H125.401L125.401 10.4381Z" fill="white"></path><path d="M134.377 10.1375C137.092 10.1375 138.943 11.6406 139.204 14.0255H136.75C136.469 12.9033 135.644 12.322 134.477 12.322C132.909 12.322 131.863 13.5044 131.863 15.3683C131.863 17.2323 132.828 18.3946 134.397 18.3946C135.624 18.3946 136.489 17.7933 136.75 16.7111H139.224C138.923 19.0159 136.992 20.5992 134.397 20.5992C131.38 20.5992 129.409 18.5148 129.409 15.3683C129.409 12.3019 131.44 10.1375 134.377 10.1375Z" fill="white"></path><path d="M142.46 17.3324C142.48 18.1942 143.124 18.7354 144.25 18.7354C145.397 18.7354 146.02 18.2743 146.02 17.5529C146.02 17.0518 145.759 16.691 144.874 16.4907L143.084 16.0698C141.294 15.669 140.429 14.8273 140.429 13.244C140.429 11.2999 142.078 10.1375 144.371 10.1375C146.604 10.1375 148.112 11.4202 148.132 13.3442H145.799C145.779 12.5024 145.216 11.9613 144.27 11.9613C143.305 11.9613 142.742 12.4022 142.742 13.1437C142.742 13.705 143.184 14.0657 144.029 14.2661L145.819 14.6869C147.489 15.0677 148.333 15.8293 148.333 17.3524C148.333 19.3566 146.624 20.5992 144.17 20.5992C141.696 20.5992 140.127 19.2764 140.127 17.3324H142.46Z" fill="white"></path><path d="M9.88511 23L4.53515 12.9999L9.88511 3H5.34996L0 12.9999L5.34996 23H9.88511Z" fill="white"></path><path d="M14.5874 14.202L20.5803 3H16.0453L12.9629 8.76139L9.88069 3H5.3457L11.3384 14.202H14.5874Z" fill="white" fill-opacity="0.4"></path><path d="M20.5814 23L25.9312 12.9999L20.5814 3H16.0461L21.396 12.9999L16.0461 23H20.5814Z" fill="white"></path></svg><p class="lg:text-4 xs:text-xs md:text-3 font-medium text-white hello-bar-title">Score code, devs, and debt fast.</p></div><a href="https://codemetrics.ai/?utm_source=hellobar&amp;utm_medium=banner&amp;utm_campaign=cm_hello_bar" target="_blank" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 w-auto text-neutral-12 border border-neutral-alpha-6 shadow-[0px_1px_2px_0px_#0000000F_0px_0px_0px_1px_#00000000] hover:bg-panel-3 disabled:text-neutral-alpha-8 disabled:bg-panel-3 bg-panel-1">Start free trial</a></div></div></div></div><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"SitePoint","item":"https://www.sitepoint.com/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://www.sitepoint.com/blog"}]}</script><div class="container-xl"><section class="py-8 border-b border-neutral-4"><nav aria-label="Breadcrumb"><ul class="flex overflow-hidden gap-1"></ul></nav><div class="my-5 font-bold text-5 text-neutral-12 md:my-8 md:text-8">Keep up to date on current trends and technologies</div><nav aria-label="Category Menu" class="flex flex-wrap text-neutral-12 -mr-4"><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/blog/"><span class="font-medium text-2">Show All</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/computing/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path fill="currentColor" d="M1.666 17.5a.806.806 0 0 1-.593-.24.806.806 0 0 1-.24-.593c0-.236.08-.434.24-.594.16-.16.357-.24.593-.24h16.667c.236 0 .434.08.594.24.16.16.24.358.24.594s-.08.434-.24.593a.807.807 0 0 1-.594.24H1.666ZM3.333 15c-.458 0-.85-.163-1.177-.49a1.605 1.605 0 0 1-.49-1.177V4.167c0-.459.164-.851.49-1.177.326-.327.719-.49 1.177-.49h13.333c.459 0 .851.163 1.177.49.327.326.49.718.49 1.177v9.166c0 .459-.163.851-.49 1.177-.326.327-.718.49-1.177.49H3.333Zm0-1.667h13.333V4.167H3.333v9.166Z"></path></svg></span><span class="font-medium text-2">Computing</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/design-ux/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 2.5H7.5a2.5 2.5 0 0 0 0 5m2.5-5v5m0-5h2.5a2.5 2.5 0 0 1 0 5m-5 0H10m-2.5 0a2.5 2.5 0 1 0 0 5m2.5-5h2.5m-2.5 0v5m2.5-5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-2.5 5H7.5m2.5 0V15a2.5 2.5 0 1 1-2.5-2.5"></path></svg></span><span class="font-medium text-2">Design &amp; UX</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/entrepreneur/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path fill="currentColor" d="M8.584 16.5c.625-1.264 1.458-2.108 2.5-2.531 1.041-.424 1.93-.636 2.666-.636.32 0 .632.028.938.084.305.055.604.125.896.208a7.366 7.366 0 0 0 .791-1.708c.195-.611.292-1.25.292-1.917 0-1.861-.646-3.437-1.938-4.73C13.438 3.98 11.861 3.334 10 3.334c-1.86 0-3.437.646-4.729 1.938C3.98 6.563 3.334 8.139 3.334 10c0 .624.08 1.221.24 1.79.159.57.399 1.098.718 1.584a9.017 9.017 0 0 1 1.77-.646 7.62 7.62 0 0 1 1.855-.229c.444 0 .872.038 1.281.115.41.076.816.177 1.219.302-.32.166-.622.36-.906.583a8.718 8.718 0 0 0-.802.708 2.658 2.658 0 0 0-.427-.041h-.365c-.444 0-.885.048-1.323.146a5.763 5.763 0 0 0-1.26.437c.444.444.94.816 1.49 1.115.548.298 1.135.51 1.76.635ZM10 18.333a8.115 8.115 0 0 1-3.25-.656 8.416 8.416 0 0 1-2.646-1.781 8.415 8.415 0 0 1-1.78-2.646A8.115 8.115 0 0 1 1.666 10c0-1.153.219-2.236.656-3.25a8.415 8.415 0 0 1 1.781-2.646A8.415 8.415 0 0 1 6.75 2.323 8.115 8.115 0 0 1 10 1.667c1.153 0 2.236.218 3.25.656a8.416 8.416 0 0 1 2.646 1.781 8.415 8.415 0 0 1 1.781 2.646 8.115 8.115 0 0 1 .657 3.25 8.115 8.115 0 0 1-.657 3.25 8.415 8.415 0 0 1-1.78 2.646 8.416 8.416 0 0 1-2.647 1.781 8.115 8.115 0 0 1-3.25.656ZM7.917 11.25a2.81 2.81 0 0 1-2.063-.854A2.81 2.81 0 0 1 5 8.333c0-.805.285-1.493.854-2.062a2.81 2.81 0 0 1 2.063-.854 2.81 2.81 0 0 1 2.062.854c.57.57.855 1.257.855 2.062a2.81 2.81 0 0 1-.855 2.063 2.81 2.81 0 0 1-2.062.854Zm0-1.667c.347 0 .642-.121.885-.364s.365-.538.365-.886c0-.347-.122-.642-.365-.885a1.205 1.205 0 0 0-.885-.365c-.347 0-.642.122-.885.365a1.205 1.205 0 0 0-.365.885c0 .348.122.643.365.886s.538.364.885.364Zm5.833 2.5a2.011 2.011 0 0 1-1.479-.604A2.011 2.011 0 0 1 11.667 10c0-.583.201-1.076.604-1.48a2.011 2.011 0 0 1 1.48-.603c.583 0 1.076.201 1.479.604.402.403.604.896.604 1.48 0 .582-.202 1.075-.604 1.478a2.012 2.012 0 0 1-1.48.604Z"></path></svg></span><span class="font-medium text-2">Entrepreneur</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/html-css/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M14.026 7.034H7.639l.152 1.481h6.083c-.09 1.298-.36 4.047-.458 5.298L10 14.775v.003l-.008.003-3.419-1.203-.234-2.84h1.676l.119 1.527 1.861.694H10l1.858-.666.191-2.296H6.265c-.028-.297-.388-4.154-.45-4.444h8.36c-.047.488-.094.99-.15 1.48ZM3.334 2.59l1.213 13.442 5.445 1.371 5.46-1.399L16.665 2.59H3.334Z" clip-rule="evenodd"></path></svg></span><span class="font-medium text-2">HTML &amp; CSS</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/javascript/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M13.996 16.324c-1.309 0-2.155-.624-2.567-1.44l1.147-.665c.303.494.695.856 1.39.856.584 0 .956-.292.956-.694 0-.606-.808-.843-1.379-1.088-1.017-.432-1.692-.976-1.692-2.124 0-1.057.805-1.863 2.065-1.863.895 0 1.54.312 2.003 1.128l-1.097.705c-.242-.433-.503-.604-.906-.604-.414 0-.675.261-.675.604 0 .423.261.594.866.855 1.267.543 2.225.97 2.225 2.367 0 1.268-.997 1.963-2.336 1.963ZM10.75 14.2c0 1.46-.9 2.232-2.148 2.232-1.128 0-1.804-.431-2.136-1.181H6.447l1.146-.802c.221.393.421.67.904.67.463 0 .753-.234.753-.938V9.25h1.5v4.95ZM2.5 17.5h15v-15h-15v15Z" clip-rule="evenodd"></path></svg></span><span class="font-medium text-2">JavaScript</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/mobile/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 15h.008M9.167 5h1.666M7.667 17.5h4.666c.934 0 1.4 0 1.757-.182.314-.16.569-.414.728-.728.182-.357.182-.823.182-1.757V5.167c0-.934 0-1.4-.182-1.757a1.666 1.666 0 0 0-.728-.728c-.357-.182-.823-.182-1.757-.182H7.667c-.934 0-1.4 0-1.757.182-.314.16-.569.414-.728.728C5 3.767 5 4.233 5 5.167v9.666c0 .934 0 1.4.182 1.757.16.314.414.569.728.728.357.182.823.182 1.757.182Z"></path></svg></span><span class="font-medium text-2">Mobile</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/php/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path fill="currentColor" d="M15.666 8.75c.145.16.18.437.104.828-.08.407-.232.697-.458.872-.226.174-.57.26-1.033.26h-.697l.428-2.201h.785c.436 0 .726.08.871.241ZM5.85 8.509h-.786l-.428 2.202h.698c.462 0 .806-.087 1.032-.261.226-.175.379-.465.458-.872.076-.391.041-.667-.104-.828-.145-.16-.435-.241-.87-.241ZM19.98 10c0 2.9-4.468 5.25-9.98 5.25C4.488 15.25.02 12.9.02 10S4.488 4.75 10 4.75c5.512 0 9.98 2.35 9.98 5.25Zm-12.224.363c.118-.213.203-.448.253-.705.121-.624.03-1.11-.275-1.457-.304-.348-.787-.522-1.45-.522H4.08l-1.023 5.26h1.146l.272-1.398h.982c.433 0 .79-.045 1.07-.136.279-.091.533-.244.762-.458.192-.177.347-.371.467-.584Zm4.034 1.178.475-2.448c.097-.498.025-.859-.217-1.08-.242-.223-.682-.334-1.32-.334H9.717l.272-1.4H8.85l-1.023 5.262h1.137l.586-3.014h.909c.29 0 .48.048.57.144.09.097.108.277.057.542l-.453 2.328h1.156Zm4.89-3.34c-.304-.348-.787-.522-1.45-.522h-2.205l-1.022 5.26h1.146l.272-1.398h.982c.433 0 .79-.045 1.069-.136.28-.091.534-.244.763-.458.192-.177.347-.371.466-.584a2.36 2.36 0 0 0 .253-.705c.122-.624.03-1.11-.274-1.457Z"></path></svg></span><span class="font-medium text-2">PHP</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/programming/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path fill="currentColor" d="m9.813 15.896 3.458-6.75a.39.39 0 0 0-.02-.406.396.396 0 0 0-.355-.198h-2.229V4.188c0-.112-.052-.177-.156-.198-.104-.021-.184.017-.24.114l-3.458 6.75a.39.39 0 0 0 .02.407.396.396 0 0 0 .355.197h2.229v4.355c0 .11.052.177.156.197.104.021.184-.017.24-.114ZM10 18.333a8.115 8.115 0 0 1-3.25-.656 8.416 8.416 0 0 1-2.646-1.781 8.415 8.415 0 0 1-1.78-2.646A8.115 8.115 0 0 1 1.666 10c0-1.153.219-2.236.656-3.25a8.415 8.415 0 0 1 1.781-2.646A8.415 8.415 0 0 1 6.75 2.323 8.115 8.115 0 0 1 10 1.667c1.153 0 2.236.218 3.25.656a8.416 8.416 0 0 1 2.646 1.781 8.415 8.415 0 0 1 1.781 2.646 8.115 8.115 0 0 1 .657 3.25 8.115 8.115 0 0 1-.657 3.25 8.415 8.415 0 0 1-1.78 2.646 8.416 8.416 0 0 1-2.647 1.781 8.115 8.115 0 0 1-3.25.656Zm0-1.666c1.848 0 3.42-.65 4.72-1.948 1.298-1.299 1.947-2.872 1.947-4.719 0-1.847-.65-3.42-1.948-4.719C13.421 3.983 11.848 3.333 10 3.333c-1.847 0-3.42.65-4.718 1.948-1.299 1.299-1.948 2.872-1.948 4.72 0 1.846.649 3.42 1.948 4.718C6.58 16.017 8.153 16.667 10 16.667Z"></path></svg></span><span class="font-medium text-2">Programming</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/python-blog/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path fill="currentColor" d="M4.196 10.758 2.867 9.406c-.49-.5-.49-1.323.007-1.831L9.36 1l2.166 2.21L6.75 8.062a.649.649 0 0 0-.02.858l1.778 1.81h-.007l1.65 1.517a.65.65 0 0 1 .033.787L8.38 14.865l-4.183-4.107z"></path><path fill="currentColor" d="m15.805 9.242 1.322 1.345a1.31 1.31 0 0 1 0 1.831l-1.329 1.352L10.641 19l-2.173-2.21 4.782-4.851a.653.653 0 0 0 .014-.859l-1.771-1.81-1.65-1.516a.67.67 0 0 1-.033-.794l1.805-1.825 4.19 4.107z"></path></svg></span><span class="font-medium text-2">Python</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/web/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.5 10h15m-15 0a7.5 7.5 0 0 0 7.5 7.5M2.5 10A7.5 7.5 0 0 1 10 2.5m7.5 7.5a7.5 7.5 0 0 1-7.5 7.5m7.5-7.5A7.5 7.5 0 0 0 10 2.5m0 15c-6.037-6.6-2.515-12.75 0-15m0 15c6.037-6.6 2.515-12.75 0-15"></path></svg></span><span class="font-medium text-2">Web</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/wordpress/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M16.581 6.402c.032.239.05.494.05.77 0 1.319-.122 1.393-2.86 9.311a7.498 7.498 0 0 0 2.81-10.081Zm-6.449 4.254-2.25 6.539a7.502 7.502 0 0 0 4.609-.12.679.679 0 0 1-.053-.103l-2.306-6.316Zm4.931-1.035c0-.927-.333-1.569-.619-2.068-.379-.618-.736-1.14-.736-1.759 0-.69.524-1.331 1.26-1.331.033 0 .065.004.097.006A7.472 7.472 0 0 0 10 2.5a7.49 7.49 0 0 0-6.266 3.38c.478.015 1.119.021 2.481-.085.405-.024.452.57.048.617 0 0-.406.048-.858.072l2.731 8.124 1.641-4.923L8.61 6.483a13.256 13.256 0 0 1-.786-.071c-.405-.024-.357-.642.047-.618 1.55.12 2.344.128 3.974 0 .405-.024.453.57.048.618 0 0-.407.048-.858.071l2.71 8.063c1.07-3.576 1.32-4.175 1.32-4.925ZM2.5 10a7.501 7.501 0 0 0 4.227 6.75L3.149 6.948A7.47 7.47 0 0 0 2.5 10Z" clip-rule="evenodd"></path></svg></span><span class="font-medium text-2">WordPress</span></a><a class="cursor-pointer px-3 py-1.5 flex items-center space-x-1 rounded-full border border-neutral-alpha-5 hover:border-transparent hover:bg-neutral-alpha-4 active:opacity-80 mr-4 mb-4" href="/ai/"><span class="flex items-center justify-center fill-neutral-9"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="size-5"><g clip-path="url(#a)"><path fill="currentColor" d="m12.5 1.25-8.75 10h5.625L7.5 18.75l8.75-10h-5.625l1.875-7.5Z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h20v20H0z"></path></clipPath></defs></svg></span><span class="font-medium text-2">AI</span></a></nav></section><section class="mt-10 mb-16"><h1 class="sr-only">Blog</h1><p class="font-medium text-3">No posts found.</p></section></div></div><div class="border-t border-neutral-alpha-4 shrink-0"><div class="container-2xl"><div class="border-b border-neutral-alpha-4 py-16 justify-between gap-x-5 gap-y-14 grid footer-grid"><a class="hidden lg:block" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" class="text-neutral-12 size-8"><path fill="currentColor" d="m3.364 14.062 2.369 2.215 7.444 6.865 3.159-3.1a.877.877 0 0 0 0-1.219l-2.933-2.546-3.158-2.99a1.095 1.095 0 0 1 0-1.44l8.572-8.082L14.87 0 5.733 8.747l-2.369 2.215a2.1 2.1 0 0 0-.513.703 2.07 2.07 0 0 0 .513 2.397"></path><path fill="currentColor" d="m28.743 17.938-2.37-2.215-7.444-6.865-3.158 3.1a.877.877 0 0 0 0 1.219l2.933 2.546 3.158 3.1a.986.986 0 0 1 0 1.33l-8.572 8.082L17.237 32l9.137-8.747 2.369-2.215a2.07 2.07 0 0 0 0-3.1"></path></svg></a><div class="flex flex-col gap-5 order-2 lg:order-1"><div class="text-3 font-medium text-neutral-12">Stuff we do</div><div class="flex flex-col gap-4"><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/premium/library/">Premium</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/newsletters/">Newsletters</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/premium/library/paths/">Learning paths</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/premium/library/">Library</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/community/">Forums</a></div></div><div class="flex flex-col gap-5 order-3 lg:order-2"><div class="text-3 font-medium text-neutral-12">Contact</div><div class="flex flex-col gap-4"><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/contact-us/">Contact us</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/faq/">FAQ</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="mailto:support@sitepoint.com?subject=I&#x27;d like to publish my book on SitePoint">Publish your book with us</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/write-for-us/">Write an article with us</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/partnerships/">Advertise</a></div></div><div class="flex flex-col gap-5 order-4 lg:order-3"><div class="text-3 font-medium text-neutral-12">About</div><div class="flex flex-col gap-4"><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/about-us/">Our story</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/premium-for-teams/">Corporate memberships</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/premium/pricing/?ref_source=sitepoint&amp;unlock=true&amp;ref_medium=hp-footer">Start free trial</a><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/premium/sign-in/">Login</a></div></div><div class="flex flex-col gap-5 order-5 lg:order-4"><div class="text-3 font-medium text-neutral-12">Connect</div><div class="flex flex-col gap-4"><a class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral" href="/sitepoint.rss">RSS</a><a href="https://www.facebook.com/sitepoint" class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral">Facebook</a><a href="https://www.instagram.com/sitepointdotcom/?hl=en" class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral">Instagram</a><a href="https://twitter.com/sitepointdotcom" class="justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 font-medium inline-flex items-center space-x-1" color="neutral">Twitter (X)</a></div></div><div class=" order-1 col-span-2 md:col-span-3 lg:col-span-1 lg:order-6 flex flex-col gap-14"><div class="flex lg:hidden justify-between"><a class="block" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="129" height="28" fill="none" viewBox="0 0 129 28" class="fill-current text-neutral-12 h-8"><path fill="currentColor" d="m.606 12.304 2.067 1.938 6.496 6.007 2.756-2.713a.77.77 0 0 0 0-1.065l-2.559-2.229-2.756-2.616a.96.96 0 0 1 0-1.26l7.48-7.072L10.647 0 2.673 7.654.606 9.592A1.84 1.84 0 0 0 0 10.948a1.82 1.82 0 0 0 .606 1.356"></path><path fill="currentColor" d="m22.752 15.696-2.067-1.938L14.19 7.75l-2.756 2.713a.77.77 0 0 0 0 1.066l2.559 2.228 2.756 2.713a.864.864 0 0 1 0 1.162l-7.48 7.073L12.711 28l7.973-7.654 2.067-1.938a1.84 1.84 0 0 0 .606-1.356 1.82 1.82 0 0 0-.606-1.356M33.194 18.357a2.34 2.34 0 0 1-.811-.79q-.312-.489-.343-1.2h-2.182c.031.81.208 1.495.509 2.063a3.9 3.9 0 0 0 1.237 1.369c.52.347 1.112.59 1.777.748a10 10 0 0 0 2.12.22c.665 0 1.34-.063 2.016-.189a5.6 5.6 0 0 0 1.828-.663c.54-.326.988-.748 1.32-1.274.333-.516.5-1.169.5-1.969 0-.62-.126-1.147-.375-1.568a3.2 3.2 0 0 0-.977-1.042 5.2 5.2 0 0 0-1.392-.674c-.52-.169-1.06-.306-1.611-.432a67 67 0 0 0-1.548-.337 7.7 7.7 0 0 1-1.383-.41c-.415-.158-.758-.358-1.018-.6a1.2 1.2 0 0 1-.405-.927c0-.337.083-.61.26-.821.166-.21.395-.38.665-.505.28-.127.582-.211.914-.264.343-.052.665-.073.998-.073.363 0 .717.031 1.07.116.353.073.675.189.967.357.29.18.53.4.717.674s.3.632.332 1.053h2.193c-.052-.8-.219-1.453-.51-1.99a3.6 3.6 0 0 0-1.174-1.263 5 5 0 0 0-1.694-.653 10.7 10.7 0 0 0-2.078-.19c-.592 0-1.174.074-1.767.211a5.5 5.5 0 0 0-1.6.664 3.7 3.7 0 0 0-1.164 1.147c-.301.474-.447 1.032-.447 1.695 0 .842.219 1.495.645 1.969.426.473.966.842 1.61 1.095.645.263 1.341.463 2.1.61.758.148 1.454.306 2.099.484.644.169 1.184.4 1.61.695.427.284.645.706.645 1.264 0 .4-.104.736-.312.99a2 2 0 0 1-.78.6 4 4 0 0 1-1.049.273 8 8 0 0 1-1.08.074q-.674 0-1.3-.127a3.5 3.5 0 0 1-1.132-.41M46.16 7.429h-2.182v13.065h2.182zM55.343 9.324V7.429h-2.66V3.502H50.49V7.43h-2.265v1.895h2.265v8.306c0 .61.063 1.106.187 1.474.114.369.301.653.55.853.25.21.573.347.978.421s.894.116 1.455.116h1.683v-1.895h-1.008c-.343 0-.623-.021-.842-.042a1.1 1.1 0 0 1-.498-.158.63.63 0 0 1-.25-.358 2.5 2.5 0 0 1-.062-.61V9.323zM105.132 7.429h-2.193v13.065h2.193zM110.559 9.492V7.43h-2.057v13.065h2.192v-7.38c0-.59.073-1.137.239-1.632a3.7 3.7 0 0 1 .738-1.305 3.2 3.2 0 0 1 1.216-.853c.499-.21 1.07-.305 1.746-.305.842 0 1.507.231 1.985.705s.717 1.116.717 1.916v8.854h2.192v-8.601q0-1.059-.218-1.927a3.6 3.6 0 0 0-.759-1.505c-.363-.421-.831-.748-1.423-.99q-.874-.347-2.182-.347-2.962 0-4.334 2.368zM128.8 9.324V7.429h-2.65V3.502h-2.193V7.43h-2.265v1.895h2.265v8.306c0 .61.063 1.106.187 1.474.115.369.302.653.551.853.25.21.572.347.977.421s.894.116 1.455.116h1.673v-1.895h-1.008c-.333 0-.613-.021-.831-.042q-.328-.032-.499-.158a.63.63 0 0 1-.25-.358 2.5 2.5 0 0 1-.062-.61V9.323z"></path><path fill="currentColor" fill-rule="evenodd" d="M67.381 19.652c-.997.747-2.255 1.116-3.761 1.116-1.06 0-1.985-.169-2.765-.506a5.44 5.44 0 0 1-1.974-1.41 6 6 0 0 1-1.195-2.18c-.27-.842-.416-1.758-.457-2.747 0-1 .156-1.906.467-2.738a6.6 6.6 0 0 1 1.3-2.147 6 6 0 0 1 1.984-1.41 6.2 6.2 0 0 1 2.515-.506c1.185 0 2.161.231 2.951.716a5.95 5.95 0 0 1 1.881 1.831c.468.748.79 1.559.977 2.432a10.5 10.5 0 0 1 .218 2.495h-9.976c-.01.58.052 1.116.208 1.632s.405.969.748 1.369.78.716 1.32.947q.795.348 1.87.348c.935 0 1.694-.2 2.286-.632.593-.41.988-1.053 1.175-1.916h2.161c-.29 1.463-.935 2.569-1.933 3.306m-1.33-9.56c.343.327.603.716.8 1.17.198.462.312.936.354 1.441h-7.659a4.3 4.3 0 0 1 .343-1.42c.187-.453.447-.843.769-1.18s.717-.6 1.174-.8c.447-.19.967-.284 1.528-.284.55 0 1.06.094 1.507.284q.686.3 1.184.79M74.331 7.429v1.769h.052c.364-.727.925-1.253 1.704-1.58.77-.336 1.621-.494 2.546-.494 1.04 0 1.933.179 2.692.558.74.345 1.394.857 1.912 1.495.509.631.883 1.368 1.143 2.19.26.831.384 1.705.384 2.631q0 1.39-.374 2.622a6.15 6.15 0 0 1-1.132 2.168c-.5.611-1.143 1.095-1.902 1.453-.77.348-1.652.527-2.67.527q-.484 0-1.092-.095a6 6 0 0 1-1.195-.337 4.5 4.5 0 0 1-1.122-.621 3.3 3.3 0 0 1-.894-.969h-.052v6.727h-2.193V7.43zm7.129 3.074q.498.693.748 1.558c.156.58.239 1.18.239 1.78 0 .642-.062 1.263-.208 1.873a4.8 4.8 0 0 1-.665 1.622 3.46 3.46 0 0 1-1.226 1.137c-.51.284-1.133.42-1.891.42q-1.138 0-1.933-.41c-.53-.284-.967-.642-1.3-1.105-.342-.453-.581-.98-.737-1.58a7.2 7.2 0 0 1-.229-1.852c0-.61.073-1.2.219-1.8a4.9 4.9 0 0 1 .706-1.58 3.8 3.8 0 0 1 1.258-1.116c.52-.294 1.143-.431 1.88-.431.707 0 1.32.137 1.85.4.506.257.947.628 1.289 1.084M87.296 11.282a6.3 6.3 0 0 1 1.236-2.18A6 6 0 0 1 90.58 7.65c.8-.347 1.725-.526 2.774-.526 1.07 0 1.995.179 2.796.526q1.2.537 2.026 1.453c.55.621.956 1.337 1.237 2.18.27.83.415 1.726.415 2.684a8.6 8.6 0 0 1-.415 2.684c-.281.821-.686 1.548-1.237 2.158-.55.622-1.226 1.095-2.026 1.443-.8.347-1.726.516-2.796.516-1.05 0-1.974-.169-2.774-.516-.811-.348-1.497-.821-2.048-1.443a6.3 6.3 0 0 1-1.236-2.158 8.6 8.6 0 0 1-.406-2.684q0-1.437.406-2.685m3.128 6.338c-.385-.41-.676-.927-.894-1.537-.218-.621-.322-1.316-.322-2.116 0-.79.104-1.495.322-2.106s.51-1.137.894-1.558a3.7 3.7 0 0 1 1.32-.958 4 4 0 0 1 1.61-.326c.572 0 1.102.105 1.61.326.51.221.947.537 1.331.958.394.454.695.984.883 1.558.219.61.323 1.316.323 2.106 0 .8-.104 1.495-.323 2.116a4.3 4.3 0 0 1-.883 1.537 4 4 0 0 1-1.338.95c-.506.22-1.052.33-1.603.324a4 4 0 0 1-1.61-.327 3.8 3.8 0 0 1-1.32-.947" clip-rule="evenodd"></path><path fill="currentColor" d="M46.36 4.804a1.3 1.3 0 0 1-1.3 1.303 1.3 1.3 0 0 1-1.298-1.303 1.3 1.3 0 0 1 1.299-1.302 1.3 1.3 0 0 1 1.298 1.302M105.348 4.802a1.3 1.3 0 0 1-1.299 1.303 1.3 1.3 0 0 1-1.298-1.303 1.3 1.3 0 0 1 1.298-1.302 1.3 1.3 0 0 1 1.299 1.302"></path></svg></a><ul class="flex items-center gap-1 shrink-0"><li class="size-8 rounded-md flex items-center justify-center cursor-pointer hover:bg-neutral-alpha-3 text-neutral-11"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5"><g clip-path="url(#clip0_3590_670)"><path fill="currentColor" fill-rule="evenodd" d="M10 .833c.46 0 .833.373.833.834V2.5a.833.833 0 1 1-1.666 0v-.833c0-.46.373-.834.833-.834M3.52 3.52a.833.833 0 0 1 1.178 0l.591.592a.833.833 0 1 1-1.178 1.178l-.592-.591a.833.833 0 0 1 0-1.179m12.96 0a.833.833 0 0 1 0 1.179l-.59.591a.833.833 0 1 1-1.18-1.178l.592-.592a.833.833 0 0 1 1.179 0M7.644 7.643a3.333 3.333 0 1 0 4.714 4.714 3.333 3.333 0 0 0-4.714-4.714M6.464 6.464a5 5 0 1 1 7.072 7.072 5 5 0 0 1-7.072-7.072M.834 10c0-.46.372-.833.833-.833H2.5a.833.833 0 1 1 0 1.666h-.833A.833.833 0 0 1 .833 10m15.833 0c0-.46.373-.833.833-.833h.833a.833.833 0 0 1 0 1.666H17.5a.833.833 0 0 1-.833-.833M5.289 14.71a.833.833 0 0 1 0 1.18l-.591.59a.833.833 0 0 1-1.179-1.178l.592-.591a.833.833 0 0 1 1.178 0m9.422 0a.833.833 0 0 1 1.178 0l.592.592a.833.833 0 0 1-1.179 1.179l-.591-.592a.833.833 0 0 1 0-1.178M10 16.668c.46 0 .833.373.833.833v.833a.833.833 0 0 1-1.666 0V17.5c0-.46.373-.833.833-.833" clip-rule="evenodd"></path></g><defs><clipPath id="clip0_3590_670"><path fill="#fff" d="M0 0h20v20H0z"></path></clipPath></defs></svg></li><li class="size-8 rounded-md flex items-center justify-center cursor-pointer hover:bg-neutral-alpha-3 text-neutral-11"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M10.08 2.109a.83.83 0 0 1-.034.89A5 5 0 0 0 17 9.954a.833.833 0 0 1 1.303.757A8.333 8.333 0 1 1 9.29 1.697a.83.83 0 0 1 .79.411M7.854 3.686a6.665 6.665 0 1 0 8.46 8.46 6.667 6.667 0 0 1-8.46-8.46" clip-rule="evenodd"></path></svg></li><li class="size-8 rounded-md flex items-center justify-center cursor-pointer bg-neutral-alpha-3 text-neutral-12"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M2 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-4v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-3H5a3 3 0 0 1-3-3zm2 8v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1zm16-2H4V6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm-9 6v2h2v-2z" clip-rule="evenodd"></path></svg></li></ul></div><div class="w-full lg:w-[317px]"><div class="w-full"><div class="text-3 font-medium text-neutral-12">Subscribe to our newsletter</div><p class="text-3 text-neutral-11 my-5">Get the freshest news and resources for developers, designers and digital creators in your inbox each week</p><form><div class="flex flex-col sm:flex-row"><div class="flex flex-col gap-2 flex-auto mb-3 sm:mb-0 sm:mr-3"><div class="group relative"><input class="relative form-input flex items-center text-ellipsis border-none bg-neutral-alpha-3 hover:bg-neutral-alpha-4 focus:ring-0 focus:bg-panel-1 focus:outline-1 focus:outline-offset-0 focus:outline-neutral-alpha-6 text-3 font-normal placeholder:text-3 placeholder:font-normal h-8 rounded-md px-2 w-full" placeholder="example@gmail.com" name="email"/></div></div><button type="submit" class="flex items-center justify-center transition-all duration-300 ease-out box-border cursor-pointer px-3 rounded-md font-medium text-3 gap-1 min-h-8 bg-neutral-12 text-neutral-1 hover:opacity-[0.82] disabled:text-neutral-alpha-8 disabled:bg-panel-3 self-start w-full sm:w-auto">Subscribe</button></div></form></div></div></div></div><div class="flex flex-col md:flex-row justify-center gap-4 items-center md:justify-between py-14 lg:py-16 relative"><div class="text-3 font-normal text-neutral-alpha-11 text-center md:text-left">© 2000 – <!-- -->2025<!-- --> SitePoint Pty. Ltd.</div><div class="lg:absolute lg:left-1/2 lg:-translate-x-1/2 lg:top-1/2 lg:-translate-y-1/2 "><a class="flex items-center justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer font-normal pb-0 text-3 gap-1.5 border-b text-primary-alpha-12 border-primary-alpha-12 hover:text-primary-alpha-11 hover:border-primary-alpha-11">Back to top</a></div><div class="hidden lg:block"><ul class="flex items-center gap-1 shrink-0"><li class="size-8 rounded-md flex items-center justify-center cursor-pointer hover:bg-neutral-alpha-3 text-neutral-11"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5"><g clip-path="url(#clip0_3590_670)"><path fill="currentColor" fill-rule="evenodd" d="M10 .833c.46 0 .833.373.833.834V2.5a.833.833 0 1 1-1.666 0v-.833c0-.46.373-.834.833-.834M3.52 3.52a.833.833 0 0 1 1.178 0l.591.592a.833.833 0 1 1-1.178 1.178l-.592-.591a.833.833 0 0 1 0-1.179m12.96 0a.833.833 0 0 1 0 1.179l-.59.591a.833.833 0 1 1-1.18-1.178l.592-.592a.833.833 0 0 1 1.179 0M7.644 7.643a3.333 3.333 0 1 0 4.714 4.714 3.333 3.333 0 0 0-4.714-4.714M6.464 6.464a5 5 0 1 1 7.072 7.072 5 5 0 0 1-7.072-7.072M.834 10c0-.46.372-.833.833-.833H2.5a.833.833 0 1 1 0 1.666h-.833A.833.833 0 0 1 .833 10m15.833 0c0-.46.373-.833.833-.833h.833a.833.833 0 0 1 0 1.666H17.5a.833.833 0 0 1-.833-.833M5.289 14.71a.833.833 0 0 1 0 1.18l-.591.59a.833.833 0 0 1-1.179-1.178l.592-.591a.833.833 0 0 1 1.178 0m9.422 0a.833.833 0 0 1 1.178 0l.592.592a.833.833 0 0 1-1.179 1.179l-.591-.592a.833.833 0 0 1 0-1.178M10 16.668c.46 0 .833.373.833.833v.833a.833.833 0 0 1-1.666 0V17.5c0-.46.373-.833.833-.833" clip-rule="evenodd"></path></g><defs><clipPath id="clip0_3590_670"><path fill="#fff" d="M0 0h20v20H0z"></path></clipPath></defs></svg></li><li class="size-8 rounded-md flex items-center justify-center cursor-pointer hover:bg-neutral-alpha-3 text-neutral-11"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M10.08 2.109a.83.83 0 0 1-.034.89A5 5 0 0 0 17 9.954a.833.833 0 0 1 1.303.757A8.333 8.333 0 1 1 9.29 1.697a.83.83 0 0 1 .79.411M7.854 3.686a6.665 6.665 0 1 0 8.46 8.46 6.667 6.667 0 0 1-8.46-8.46" clip-rule="evenodd"></path></svg></li><li class="size-8 rounded-md flex items-center justify-center cursor-pointer bg-neutral-alpha-3 text-neutral-12"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="size-5"><path fill="currentColor" fill-rule="evenodd" d="M2 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-4v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-3H5a3 3 0 0 1-3-3zm2 8v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1zm16-2H4V6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm-9 6v2h2v-2z" clip-rule="evenodd"></path></svg></li></ul></div></div><div class="pb-8 justify-between flex gap-5 flex-col md:flex-row md:items-start lg:items-center"><div class="text-3 text-neutral-11 text-center md:text-left">This site is protected by reCAPTCHA and the Google<!-- --> <a href="https://policies.google.com/privacy" class="items-center justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer font-normal pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 inline-block" rel="noopener noreferrer" target="_blank">Privacy Policy</a> <!-- -->and<!-- --> <a href="https://policies.google.com/terms" class="items-center justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer font-normal pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12 inline-block" rel="noopener noreferrer" target="_blank">Terms of Service</a> <!-- -->apply.</div><div class="flex gap-5 shrink-0 justify-center items-center md:justify-start flex-col md:flex-row"><a class="flex items-center justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer font-normal pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12" href="/privacy-policy/">Privacy Policy</a><a class="flex items-center justify-center transition-all duration-300 ease-out box-border w-fit cursor-pointer font-normal pb-0 text-3 gap-1.5 text-neutral-alpha-11 border-neutral-alpha-7 hover:text-neutral-alpha-12 hover:border-neutral-alpha-12" href="/legals/">Terms of Service</a></div></div></div></div><script src="/_next/static/chunks/webpack-3173990e08d4146b.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[7489,[\"4239\",\"static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7177\",\"static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"ThemeProvider\"]\n4:I[8286,[\"4239\",\"static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7177\",\"static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"default\"]\n6:I[6624,[\"4239\",\"static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7177\",\"static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"default\"]\n7:I[6063,[\"4239\",\"static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7177\",\"static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"GoogleTagManager\"]\n8:I[6259,[\"4239\",\"static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7177\",\"static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"GoogleAnalytics\"]\n9:I[7705,[\"6874\",\"static/chunks/6874-fca7afc287aa7bac.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"5003\",\"static/chunks/5003-d0ce1640fc94e490.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"6255\",\"static/chunks/6255-0a4c5567ba14faf2.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7242\",\"static/chunks/7242-5698c918c93f5c3d.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"1886\",\"static/chunks/1886-576d9bed3ac56251.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"2076\",\"static/chunks/app/(main)/layout-115044f1e7dd32c1.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"default\"]\na:I[2807,[\"6874\",\"static/chunks/6874-fca7afc287aa7bac.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"5003\",\"static/chunks/5003-d0ce1640fc94e490.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"6255\",\"static/chunks/6255-0a4c5567ba14faf2.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7242\",\"static/chunks/7242-5698c918c93f5c3d.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"1886\",\"static/chunks/1886-576d9bed3ac56251.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"2076\",\"static/chunks/app/(main)/l"])</script><script>self.__next_f.push([1,"ayout-115044f1e7dd32c1.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"default\"]\nb:I[7555,[],\"\"]\nc:I[1295,[],\"\"]\nd:I[324,[\"6874\",\"static/chunks/6874-fca7afc287aa7bac.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"5003\",\"static/chunks/5003-d0ce1640fc94e490.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"6255\",\"static/chunks/6255-0a4c5567ba14faf2.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7242\",\"static/chunks/7242-5698c918c93f5c3d.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"1886\",\"static/chunks/1886-576d9bed3ac56251.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"2076\",\"static/chunks/app/(main)/layout-115044f1e7dd32c1.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"default\"]\nf:I[9665,[],\"OutletBoundary\"]\n12:I[9665,[],\"ViewportBoundary\"]\n14:I[9665,[],\"MetadataBoundary\"]\n16:I[6614,[],\"\"]\n:HL[\"/_next/static/media/138d5b0847abe1e1-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/612821e83c2a36f1-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/dbd9bfd7927f161c-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/220a9b19060a26f4.css?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"style\"]\n:HL[\"/_next/static/css/0ec955cdb0dea670.css?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"style\"]\n2:T4dd,\n              window.consentState = (function() {\n                try {\n                  // Try to read the most granular consent info available\n                  var consents = localStorage.getItem('consents');\n                  if (consents) {\n                    var parsed = JSON.parse(consents);\n                    return {\n                      analytics: parsed.AnalyticsConsent === 'Granted',\n                      marketing: parsed.AdsConsent === 'Granted'\n                    };\n                  }\n                  // Fallback: getterms_cookie_consent (if present)\n                  var getterms = localStorage.getItem('getterms_cookie_consent');\n                  if (getterms) "])</script><script>self.__next_f.push([1,"{\n                    var parsed = JSON.parse(getterms);\n                    var prefs = parsed.cookie_preferences || {};\n                    return {\n                      analytics: !!prefs.Analytics,\n                      marketing: !!prefs.Marketing\n                    };\n                  }\n                  // Fallback: default deny\n                  return { analytics: false, marketing: false };\n                } catch (e) {\n                  return { analytics: false, marketing: false };\n                }\n              })();\n            "])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"I7a5xenQHsNw9O9gDYHK4\",\"p\":\"\",\"c\":[\"\",\"blogs\",\"category\",\"php\",\"feed\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(main)\",{\"children\":[[\"slug\",\"blogs/category/php/feed\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/220a9b19060a26f4.css?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/0ec955cdb0dea670.css?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"id\":\"consent-stub\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2\"}}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://cmp.inmobi.com\"}],[\"$\",\"link\",null,{\"rel\":\"preload\",\"as\":\"script\",\"href\":\"https://cmp.inmobi.com/choice/DsckBJsAJpkVK/www.sitepoint.com/choice.js?tag_version=V3\"}]]}],[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"children\":\"$L5\"}]}],[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{\"gtmId\":\"GTM-KL8PMMW\"}],[\"$\",\"$L8\",null,{\"gaId\":\"GTM-KL8PMMW\"}]]}]]}],{\"children\":[\"(main)\",[\"$\",\"$1\",\"c\",{\"children\":[null,[[\"$\",\"div\",null,{\"className\":\"grow\",\"children\":[[\"$\",\"$L9\",null,{}],[\"$\",\"$La\",null,{}],[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],[\"$\",\"$Ld\",null,{}]]]}],{\"children\":[[\"slug\",\"blogs/category/php/feed\",\"c\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",\"$undefined\",null,[\"$\",\"$Lf\",null,{\"children\":[\"$L10\",\"$L11\",null]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"sCl7KupSC3k0PBRb5bTWk\",{\"children\":[[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],[\"$\",\"$L14\",null,{\"children\":\"$L15\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$16\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n10:null\n"])</script><script>self.__next_f.push([1,"17:I[346,[\"6874\",\"static/chunks/6874-fca7afc287aa7bac.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"5003\",\"static/chunks/5003-d0ce1640fc94e490.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"5607\",\"static/chunks/5607-305e3a4b27849a0f.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"6851\",\"static/chunks/6851-94dd323272180872.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"2317\",\"static/chunks/2317-e127dc4219cf2d79.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"8057\",\"static/chunks/app/(main)/%5B...slug%5D/page-b7409ff32a7ed204.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"SitePoint\\\",\\\"item\\\":\\\"https://www.sitepoint.com/\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Blog\\\",\\\"item\\\":\\\"https://www.sitepoint.com/blog\\\"}]}\"}}],[\"$\",\"div\",null,{\"className\":\"container-xl\",\"children\":[[\"$\",\"section\",null,{\"className\":\"py-8 border-b border-neutral-4\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"Breadcrumb\",\"children\":[\"$\",\"ul\",null,{\"className\":\"flex overflow-hidden gap-1\",\"children\":[]}]}],[\"$\",\"div\",null,{\"className\":\"my-5 font-bold text-5 text-neutral-12 md:my-8 md:text-8\",\"children\":\"Keep up to date on current trends and technologies\"}],[[\"$\",\"nav\",\"category-navigation\",{\"aria-label\":\"Category Menu\",\"className\":\"flex flex-wrap text-neutral-12 -mr-4\",\"children\":[[\"$\",\"$L17\",null,{\"url\":\"/blog/\",\"label\":\"Show All\",\"slug\":\"blog\",\"className\":\"mr-4 mb-4\",\"showIcon\":false}],[[\"$\",\"$L17\",\"6\",{\"slug\":\"computing\",\"url\":\"/computing\",\"label\":\"Computing\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"8\",{\"slug\":\"design-ux\",\"url\":\"/design-ux\",\"label\":\"Design \u0026 UX\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"10\",{\"slug\":\"entrepreneur\",\"url\":\"/entrepreneur\",\"label\":\"Entrepreneur\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"12\",{\"slug\":\"html-css\",\"url\":\"/html-css\",\"label\":\"HTML \u0026 CSS\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"18\",{\"slug\":\"javascript\",\"url\":\"/javascript\",\"label\":\"JavaScript\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"22\",{\"slug\":\"mobile\",\"url\":\"/mobile\",\"label\":\"Mobile\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"26\",{\"slug\":\"php\",\"url\":\"/php\",\"label\":\"PHP\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"28\",{\"slug\":\"programming\",\"url\":\"/programming\",\"label\":\"Programming\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"30\",{\"slug\":\"python-blog\",\"url\":\"/python-blog\",\"label\":\"Python\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"36\",{\"slug\":\"web\",\"url\":\"/web\",\"label\":\"Web\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"40\",{\"slug\":\"wordpress\",\"url\":\"/wordpress\",\"label\":\"WordPress\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}],[\"$\",\"$L17\",\"403\",{\"slug\":\"ai\",\"url\":\"/ai\",\"label\":\"AI\",\"className\":\"mr-4 mb-4\",\"showIcon\":true}]]]}]]]}],[\"$\",\"section\",null,{\"className\":\"mt-10 mb-16\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"sr-only\",\"children\":\"Blog\"}],[\"$\",\"p\",null,{\"className\":\"font-medium text-3\",\"children\":\"No posts found.\"}]]}]]}]]\n"])</script><script>self.__next_f.push([1,"11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"SitePoint Blog - The Best Web Development \u0026 Design Blog — SitePoint\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"The web's best resource for web developers and designers to keep up-to-date and learn JavaScript, CSS, UX, WordPress, PHP and more\"}],[\"$\",\"meta\",\"2\",{\"property\":\"og:title\",\"content\":\"SitePoint\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:description\",\"content\":\"The web's best resource for web developers and designers to keep up-to-date and learn JavaScript, CSS, UX, WordPress, PHP and more\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:site_name\",\"content\":\"SitePoint\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"https://uploads.sitepoint.com/wp-content/uploads/2021/07/1626450679sp-og.jpg\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:site\",\"content\":\"@sitepointdotcom\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:creator\",\"content\":\"@sitepointdotcom\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"SitePoint\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"The web's best resource for web developers and designers to keep up-to-date and learn JavaScript, CSS, UX, WordPress, PHP and more\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://uploads.sitepoint.com/wp-content/uploads/2021/07/1626450679sp-og.jpg\"}],[\"$\",\"link\",\"14\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"256x256\"}]]\n"])</script><script>self.__next_f.push([1,"18:I[5594,[\"4239\",\"static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7177\",\"static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"AdsProvider\"]\n19:I[9243,[\"4239\",\"static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7177\",\"static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"\"]\n1b:I[8220,[\"4239\",\"static/chunks/4239-316b212b61834e1c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\",\"7177\",\"static/chunks/app/layout-abc8c43dac930a0c.js?dpl=dpl_8xg8Ei8uwELFzHRiJZZSrUtx6R3J\"],\"default\"]\n1a:T26e3,"])</script><script>self.__next_f.push([1,"\n  (function() {\n    var host = 'www.sitepoint.com';\n    var element = document.createElement('script');\n    var firstScript = document.getElementsByTagName('script')[0];\n    var url = 'https://cmp.inmobi.com'\n      .concat('/choice/', 'DsckBJsAJpkVK', '/', host, '/choice.js?tag_version=V3');\n    var uspTries = 0;\n    var uspTriesLimit = 3;\n    element.async = true;\n    element.type = 'text/javascript';\n    element.src = url;\n\n    firstScript.parentNode.insertBefore(element, firstScript);\n\n    function makeStub() {\n      var TCF_LOCATOR_NAME = '__tcfapiLocator';\n      var queue = [];\n      var win = window;\n      var cmpFrame;\n\n      function addFrame() {\n        var doc = win.document;\n        var otherCMP = !!(win.frames[TCF_LOCATOR_NAME]);\n\n        if (!otherCMP) {\n          if (doc.body) {\n            var iframe = doc.createElement('iframe');\n\n            iframe.style.cssText = 'display:none';\n            iframe.name = TCF_LOCATOR_NAME;\n            doc.body.appendChild(iframe);\n          } else {\n            setTimeout(addFrame, 5);\n          }\n        }\n        return !otherCMP;\n      }\n\n      function tcfAPIHandler() {\n        var gdprApplies;\n        var args = arguments;\n\n        if (!args.length) {\n          return queue;\n        } else if (args[0] === 'setGdprApplies') {\n          if (\n            args.length \u003e 3 \u0026\u0026\n            args[2] === 2 \u0026\u0026\n            typeof args[3] === 'boolean'\n          ) {\n            gdprApplies = args[3];\n            if (typeof args[2] === 'function') {\n              args[2]('set', true);\n            }\n          }\n        } else if (args[0] === 'ping') {\n          var retr = {\n            gdprApplies: gdprApplies,\n            cmpLoaded: false,\n            cmpStatus: 'stub'\n          };\n\n          if (typeof args[2] === 'function') {\n            args[2](retr);\n          }\n        } else {\n          if(args[0] === 'init' \u0026\u0026 typeof args[3] === 'object') {\n            args[3] = Object.assign(args[3], { tag_version: 'V3' });\n          }\n          queue.push(args);\n        }\n      }\n\n      function postMessageEventHandler(event) {\n        var msgIsString = typeof event.data === 'string';\n        var json = {};\n\n        try {\n          if (msgIsString) {\n            json = JSON.parse(event.data);\n          } else {\n            json = event.data;\n          }\n        } catch (ignore) {}\n\n        var payload = json.__tcfapiCall;\n\n        if (payload) {\n          window.__tcfapi(\n            payload.command,\n            payload.version,\n            function(retValue, success) {\n              var returnMsg = {\n                __tcfapiReturn: {\n                  returnValue: retValue,\n                  success: success,\n                  callId: payload.callId\n                }\n              };\n              if (msgIsString) {\n                returnMsg = JSON.stringify(returnMsg);\n              }\n              if (event \u0026\u0026 event.source \u0026\u0026 event.source.postMessage) {\n                event.source.postMessage(returnMsg, '*');\n              }\n            },\n            payload.parameter\n          );\n        }\n      }\n\n      while (win) {\n        try {\n          if (win.frames[TCF_LOCATOR_NAME]) {\n            cmpFrame = win;\n            break;\n          }\n        } catch (ignore) {}\n\n        if (win === window.top) {\n          break;\n        }\n        win = win.parent;\n      }\n      if (!cmpFrame) {\n        addFrame();\n        win.__tcfapi = tcfAPIHandler;\n        win.addEventListener('message', postMessageEventHandler, false);\n      }\n    };\n\n    makeStub();\n\n    function makeGppStub() {\n      const CMP_ID = 10;\n      const SUPPORTED_APIS = [\n        '2:tcfeuv2',\n        '6:uspv1',\n        '7:usnatv1',\n        '8:usca',\n        '9:usvav1',\n        '10:uscov1',\n        '11:usutv1',\n        '12:usctv1'\n      ];\n\n      window.__gpp_addFrame = function (n) {\n        if (!window.frames[n]) {\n          if (document.body) {\n            var i = document.createElement(\"iframe\");\n            i.style.cssText = \"display:none\";\n            i.name = n;\n            document.body.appendChild(i);\n          } else {\n            window.setTimeout(window.__gpp_addFrame, 10, n);\n          }\n        }\n      };\n      window.__gpp_stub = function () {\n        var b = arguments;\n        __gpp.queue = __gpp.queue || [];\n        __gpp.events = __gpp.events || [];\n\n        if (!b.length || (b.length == 1 \u0026\u0026 b[0] == \"queue\")) {\n          return __gpp.queue;\n        }\n\n        if (b.length == 1 \u0026\u0026 b[0] == \"events\") {\n          return __gpp.events;\n        }\n\n        var cmd = b[0];\n        var clb = b.length \u003e 1 ? b[1] : null;\n        var par = b.length \u003e 2 ? b[2] : null;\n        if (cmd === \"ping\") {\n          clb(\n            {\n              gppVersion: \"1.1\", // must be “Version.Subversion”, current: “1.1”\n              cmpStatus: \"stub\", // possible values: stub, loading, loaded, error\n              cmpDisplayStatus: \"hidden\", // possible values: hidden, visible, disabled\n              signalStatus: \"not ready\", // possible values: not ready, ready\n              supportedAPIs: SUPPORTED_APIS, // list of supported APIs\n              cmpId: CMP_ID, // IAB assigned CMP ID, may be 0 during stub/loading\n              sectionList: [],\n              applicableSections: [-1],\n              gppString: \"\",\n              parsedSections: {},\n            },\n            true\n          );\n        } else if (cmd === \"addEventListener\") {\n          if (!(\"lastId\" in __gpp)) {\n            __gpp.lastId = 0;\n          }\n          __gpp.lastId++;\n          var lnr = __gpp.lastId;\n          __gpp.events.push({\n            id: lnr,\n            callback: clb,\n            parameter: par,\n          });\n          clb(\n            {\n              eventName: \"listenerRegistered\",\n              listenerId: lnr, // Registered ID of the listener\n              data: true, // positive signal\n              pingData: {\n                gppVersion: \"1.1\", // must be “Version.Subversion”, current: “1.1”\n                cmpStatus: \"stub\", // possible values: stub, loading, loaded, error\n                cmpDisplayStatus: \"hidden\", // possible values: hidden, visible, disabled\n                signalStatus: \"not ready\", // possible values: not ready, ready\n                supportedAPIs: SUPPORTED_APIS, // list of supported APIs\n                cmpId: CMP_ID, // list of supported APIs\n                sectionList: [],\n                applicableSections: [-1],\n                gppString: \"\",\n                parsedSections: {},\n              },\n            },\n            true\n          );\n        } else if (cmd === \"removeEventListener\") {\n          var success = false;\n          for (var i = 0; i \u003c __gpp.events.length; i++) {\n            if (__gpp.events[i].id == par) {\n              __gpp.events.splice(i, 1);\n              success = true;\n              break;\n            }\n          }\n          clb(\n            {\n              eventName: \"listenerRemoved\",\n              listenerId: par, // Registered ID of the listener\n              data: success, // status info\n              pingData: {\n                gppVersion: \"1.1\", // must be “Version.Subversion”, current: “1.1”\n                cmpStatus: \"stub\", // possible values: stub, loading, loaded, error\n                cmpDisplayStatus: \"hidden\", // possible values: hidden, visible, disabled\n                signalStatus: \"not ready\", // possible values: not ready, ready\n                supportedAPIs: SUPPORTED_APIS, // list of supported APIs\n                cmpId: CMP_ID, // CMP ID\n                sectionList: [],\n                applicableSections: [-1],\n                gppString: \"\",\n                parsedSections: {},\n              },\n            },\n            true\n          );\n        } else if (cmd === \"hasSection\") {\n          clb(false, true);\n        } else if (cmd === \"getSection\" || cmd === \"getField\") {\n          clb(null, true);\n        }\n        //queue all other commands\n        else {\n          __gpp.queue.push([].slice.apply(b));\n        }\n      };\n      window.__gpp_msghandler = function (event) {\n        var msgIsString = typeof event.data === \"string\";\n        try {\n          var json = msgIsString ? JSON.parse(event.data) : event.data;\n        } catch (e) {\n          var json = null;\n        }\n        if (typeof json === \"object\" \u0026\u0026 json !== null \u0026\u0026 \"__gppCall\" in json) {\n          var i = json.__gppCall;\n          window.__gpp(\n            i.command,\n            function (retValue, success) {\n              var returnMsg = {\n                __gppReturn: {\n                  returnValue: retValue,\n                  success: success,\n                  callId: i.callId,\n                },\n              };\n              event.source.postMessage(msgIsString ? JSON.stringify(returnMsg) : returnMsg, \"*\");\n            },\n            \"parameter\" in i ? i.parameter : null,\n            \"version\" in i ? i.version : \"1.1\"\n          );\n        }\n      };\n      if (!(\"__gpp\" in window) || typeof window.__gpp !== \"function\") {\n        window.__gpp = window.__gpp_stub;\n        window.addEventListener(\"message\", window.__gpp_msghandler, false);\n        window.__gpp_addFrame(\"__gppLocator\");\n      }\n    };\n\n    makeGppStub();\n\n    var uspStubFunction = function() {\n      var arg = arguments;\n      if (typeof window.__uspapi !== uspStubFunction) {\n        setTimeout(function() {\n          if (typeof window.__uspapi !== 'undefined') {\n            window.__uspapi.apply(window.__uspapi, arg);\n          }\n        }, 500);\n      }\n    };\n\n    var checkIfUspIsReady = function() {\n      uspTries++;\n      if (window.__uspapi === uspStubFunction \u0026\u0026 uspTries \u003c uspTriesLimit) {\n        console.warn('USP is not accessible');\n      } else {\n        clearInterval(uspInterval);\n      }\n    };\n\n    if (typeof window.__uspapi === 'undefined') {\n      window.__uspapi = uspStubFunction;\n      var uspInterval = setInterval(checkIfUspIsReady, 6000);\n    }\n  })();\n"])</script><script>self.__next_f.push([1,"5:[\"$\",\"$L18\",null,{\"takeover\":{\"id\":7,\"documentId\":\"u9e9u4qvfarevet3vx0olhao\",\"name\":\"test-campaign_2025_07\",\"startDate\":\"2025-07-01T19:00:00.000Z\",\"endDate\":\"2025-07-13T19:00:00.000Z\",\"createdAt\":\"2025-07-01T14:06:00.645Z\",\"updatedAt\":\"2025-07-09T09:26:11.626Z\",\"publishedAt\":\"2025-07-09T09:26:11.751Z\",\"locale\":null,\"verticalUnit\":{\"unitCode\":\"test-campaign_2025_07_vertical\",\"image\":\"https://uploads.sitepoint.com/wp-content/uploads/metronome_vertical_709e4b0d52.png\",\"url\":\"https://google.com\"},\"horizontalUnit\":{\"unitCode\":\"test-campaign_2025_07_horizontal\",\"image\":\"https://uploads.sitepoint.com/wp-content/uploads/metronome_horizontal_7bd24b3896.png\",\"url\":\"https://google.com\"},\"footerUnit\":{\"unitCode\":\"test-campaign_2025_07_footer\",\"image\":\"https://uploads.sitepoint.com/wp-content/uploads/metronome_footer_a0c4ebf913.png\",\"url\":\"https://google.com\"},\"helloBar\":{\"unitCode\":\"test-campaign_2025_07_desktop_hellobar\",\"image\":\"https://uploads.sitepoint.com/wp-content/uploads/desktop_hellobar_56ed3795aa.png\",\"url\":\"https://google.com\"},\"helloBarMobile\":{\"unitCode\":\"test-campaign_2025_07_mobile_hellobar\",\"image\":\"https://uploads.sitepoint.com/wp-content/uploads/mobile_hellobar_7466484789.png\",\"url\":\"https://google.com\"}},\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_9368d5 __variable_ce324d __variable_9a8899 font-sans flex flex-col\",\"children\":[[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:0:props:children:2:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:2:children:1:props:children:1:0:props:children:2:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:0:props:children:2:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:0:props:children:2:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L19\",null,{\"id\":\"consent-management\",\"strategy\":\"lazyOnload\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1a\"}}],[\"$\",\"$L19\",null,{\"strategy\":\"lazyOnload\",\"id\":\"tapfiliate-script\",\"src\":\"https://script.tapfiliate.com/tapfiliate.js\"}],[\"$\",\"$L19\",null,{\"id\":\"tapfiliate-init\",\"strategy\":\"lazyOnload\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n                (function(t,a,p){t.TapfiliateObject=a;t[a]=t[a]||function(){ (t[a].q=t[a].q||[]).push(arguments)}})(window,'tap');\\n                tap('create', '10694-267423', { integration: 'javascript' });\\n                tap('detect');\\n              \"}}],[\"$\",\"$L1b\",null,{}]]}]}]\n"])</script></body></html>