- 扫描 ID：
- 1b0f0b86-7d22-4e15-a5d4-f0736fc90cea已完成
- 提交的 URL：
- https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/
- 报告完成时间：
链接 · 找到 8 个
从页面中识别出的传出链接
| 链接 | 文本 |
|---|---|
| https://en.wikipedia.org/wiki/Graph_theory | Graph Theory |
| https://wa.me/447736930110 | Send me a message on WhatsApp |
| https://www.linkedin.com/in/johnmkavanagh/ | Find me on LinkedIn |
| https://x.com/johnkavanagh | Follow me on X (formerly Twitter) |
| https://app.yunojuno.com/p/johnkavanagh | Hire me via YunoJuno |
| https://wellfound.com/u/johnkavanagh | View my profile on Wellfound (formerly AngelList) |
| https://goo.gl/maps/j4UGSDYAXpXukVvf8 | Find me on Google Maps |
| https://github.com/johnkavanagh | View my code on Github |
JavaScript 变量 · 找到 13 个
在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量，可以从当前范围内的代码中的任何位置访问
| 名称 | 类型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| pagePath | string |
| ___chunkMapping | string |
| ___webpackCompilationHash | string |
| webpackChunkjohn_kavanagh_website | object |
| asyncRequires | object |
| ___emitter | object |
| ___loader | object |
控制台日志消息 · 找到 0 条
记录到 Web 控制台的消息
HTML
页面的原始 HTML 正文
<!DOCTYPE html><html dir="ltr" lang="en-GB" xml:lang="en-GB" style="--calculated-vh: 6px;"><head><meta charset="utf-8"><meta content="ie=edge" http-equiv="x-ua-compatible"><meta content="width=device-width,initial-scale=1,viewport-fit=cover,shrink-to-fit=no,minimal-ui" name="viewport"><meta content="base-uri 'self'; default-src 'self'; script-src 'self' 'unsafe-inline' *.netlify.app *.nsvcs.net; style-src 'self' 'unsafe-inline'; object-src 'none'; form-action 'self'; font-src 'self' data:; connect-src 'self' *.johnkavanagh.co.uk kavanagh.dev *.netlify.app *.nsvcs.net; img-src 'self' *.ctfassets.net data:; style-src-attr 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline'; media-src 'self' *.ctfassets.net kavanagh.dev data:;" http-equiv="Content-Security-Policy"><meta content="John Kavanagh" data-gatsby-head="true" name="author"><meta content="Copyright 2001 - 2024 John Kavanagh. All rights reserved." data-gatsby-head="true" name="copyright"><meta content="A question I have often been asked when it comes to developing with Gatsby and GraphQL: what's the difference between Edges and Nodes?" data-gatsby-head="true" name="description"><meta content="A question I have often been asked when it comes to developing with Gatsby and GraphQL: what's the difference between Edges and Nodes?" data-gatsby-head="true" name="subject"><meta content="EN" data-gatsby-head="true" name="language"><meta content="2024-12-02T01:05:55.5555+00:00" data-gatsby-head="true" name="revised"><meta content="index, follow, noarchive, max-video-preview:-1, max-snippet:-1" data-gatsby-head="true" name="robots"><meta content="John Kavanagh: Freelance Front-End Web Developer, Brighton, London & Remote" data-gatsby-head="true" name="application-name"><meta content="John Kavanagh" data-gatsby-head="true" name="apple-mobile-web-app-title"><meta content="General" data-gatsby-head="true" name="rating"><meta content="Global" data-gatsby-head="true" name="distribution"><meta content="telephone=no" data-gatsby-head="true" name="format-detection"><meta content="1DnEb3XdXJGXRhvSXC09Wi929UaiMfqvy9qoFJHsOPc" data-gatsby-head="true" name="google-site-verification"><meta content="F6988A6C79A83A8FA28CA4D3551F0727" data-gatsby-head="true" name="msvalidate.01"><meta content="#fff" data-gatsby-head="true" name="theme-color"><meta content="light dark" data-gatsby-head="true" name="color-scheme"><meta content="summary_large_image" data-gatsby-head="true" name="twitter:card"><meta content="johnkavanagh.co.uk" data-gatsby-head="true" name="twitter:domain"><meta content="@johnkavanagh" data-gatsby-head="true" name="twitter:site"><meta content="@johnkavanagh" data-gatsby-head="true" name="twitter:creator"><meta content="https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/" data-gatsby-head="true" name="twitter:url"><meta content="Gatsby & GraphQL: Nodes vs. Edges, by John Kavanagh" data-gatsby-head="true" name="twitter:title"><meta content="A question I have often been asked when it comes to developing with Gatsby and GraphQL: what's the difference between Edges and Nodes?" data-gatsby-head="true" name="twitter:description"><meta content="https://johnkavanagh.co.uk/static/d84773933de014236b34af7c03c442f5/0eab3/nodes-hero.jpg" data-gatsby-head="true" name="twitter:image"><meta content="Abstract image used to represent Gatsby & GraphQL: Nodes vs. Edges" data-gatsby-head="true" name="twitter:image:alt"><meta content="John Kavanagh" data-gatsby-head="true" property="og:site_name"><meta content="article" data-gatsby-head="true" property="og:type"><meta content="en_GB" data-gatsby-head="true" property="og:locale"><meta content="en_US" data-gatsby-head="true" property="og:locale:alternate"><meta content="https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/" data-gatsby-head="true" property="og:url"><meta content="Gatsby & GraphQL: Nodes vs. Edges, by John Kavanagh" data-gatsby-head="true" property="og:title"><meta content="A question I have often been asked when it comes to developing with Gatsby and GraphQL: what's the difference between Edges and Nodes?" data-gatsby-head="true" property="og:description"><meta content="https://johnkavanagh.co.uk/static/d84773933de014236b34af7c03c442f5/0eab3/nodes-hero.jpg" data-gatsby-head="true" property="og:image"><meta content="https://johnkavanagh.co.uk/static/d84773933de014236b34af7c03c442f5/0eab3/nodes-hero.jpg" data-gatsby-head="true" property="og:image:secure_url"><meta content="Abstract image used to represent Gatsby & GraphQL: Nodes vs. Edges" data-gatsby-head="true" property="og:image:alt"><meta content="1200" data-gatsby-head="true" property="og:image:width"><meta content="630" data-gatsby-head="true" property="og:image:height"><meta content="#112c52" data-gatsby-head="true" name="msapplication-TileColor"><meta content="https://johnkavanagh.co.uk/mstile-144x144.png" data-gatsby-head="true" name="msapplication-TileImage"><meta content="https://johnkavanagh.co.uk/about/" data-gatsby-head="true" property="article:author"><meta content="https://johnkavanagh.co.uk/about/" data-gatsby-head="true" property="article:publisher"><meta content="2022-04-04T00:00:00.000+00:00" data-gatsby-head="true" property="article:published_time"><meta content="2024-11-01T10:22:45.4545+00:00" data-gatsby-head="true" property="article:modified_time"><meta content="Development" data-gatsby-head="true" property="article:tag"><meta content="Node" data-gatsby-head="true" property="article:tag"><meta content="GatsbyJS" data-gatsby-head="true" property="article:tag"><meta content="GraphQL" data-gatsby-head="true" property="article:tag"><meta content="2024-11-01T10:22:45.4545+00:00" data-gatsby-head="true" name="publish_date" property="og:publish_date"><link href="/styles.540ba60fc90f6cd1bee3.css" rel="stylesheet" data-identity="gatsby-global-css"><style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper picture.object-fit-polyfill{position:static!important}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style><noscript><style>.gatsby-image-wrapper noscript [data-main-image]{opacity:1!important}.gatsby-image-wrapper [data-placeholder-image]{opacity:0!important}</style></noscript><script type="module">const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){const t=e.target;if(void 0===t.dataset.mainImage)return;if(void 0===t.dataset.gatsbyImageSsr)return;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch(()=>{}).then(()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")})}),!0)</script><link href="/favicon-32x32.png" rel="icon" type="image/png"><link href="/manifest.webmanifest" rel="manifest" crossorigin="anonymous"><link href="/sitemap.xml" rel="sitemap" type="application/xml"><link href="/static/open-sans-latin-wght-normal-2bf64b071a7e955bf5e5c0860d5b9109.woff2" rel="preload" crossorigin="anonymous" as="font"><link href="/static/inconsolata-latin-wght-normal-712e5078026609d1255f6fca0c231f5b.woff2" rel="preload" crossorigin="anonymous" as="font"><link href="/static/open-sans-symbols-wght-normal-5a982a46c371a8eb3ce23ebfb847665c.woff2" rel="preload" crossorigin="anonymous" as="font"><link href="/static/open-sans-math-wght-normal-384b80779baf485a5f7c9c61385a82fb.woff2" rel="preload" crossorigin="anonymous" as="font"><title data-gatsby-head="true">Gatsby & GraphQL: Nodes vs. Edges, by John Kavanagh</title><link href="https://johnkavanagh.co.uk/safari-pinned-tab.svg" rel="mask-icon" data-gatsby-head="true" color="#112c52"><link href="https://johnkavanagh.co.uk/icon.svg" rel="icon" data-gatsby-head="true" type="image/svg+xml"><link href="https://johnkavanagh.co.uk/apple-touch-icon.png" rel="apple-touch-icon" data-gatsby-head="true"><link href="https://johnkavanagh.co.uk/apple-touch-icon-57x57.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="57x57"><link href="https://johnkavanagh.co.uk/apple-touch-icon-60x60.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="60x60"><link href="https://johnkavanagh.co.uk/apple-touch-icon-76x76.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="76x76"><link href="https://johnkavanagh.co.uk/apple-touch-icon-114x114.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="114x114"><link href="https://johnkavanagh.co.uk/apple-touch-icon-120x120.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="120x120"><link href="https://johnkavanagh.co.uk/apple-touch-icon-144x144.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="144x144"><link href="https://johnkavanagh.co.uk/apple-touch-icon-152x152.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="152x152"><link href="https://johnkavanagh.co.uk/apple-touch-icon-176x176.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="176x176"><link href="https://johnkavanagh.co.uk/apple-touch-icon-180x180.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="180x180"><link href="https://johnkavanagh.co.uk/apple-touch-icon-192x192.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="192x192"><link href="https://johnkavanagh.co.uk/apple-touch-icon-256x256.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="256x256"><link href="https://johnkavanagh.co.uk/apple-touch-icon-384x384.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="384x384"><link href="https://johnkavanagh.co.uk/apple-touch-icon-512x512.png" rel="apple-touch-icon" data-gatsby-head="true" sizes="512x512"><link href="https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/" rel="canonical" data-gatsby-head="true"><link href="https://johnkavanagh.co.uk/" rel="home" data-gatsby-head="true"><link href="/sitemap.xml" rel="sitemap" data-gatsby-head="true" type="application/xml"><link href="https://kavanagh.dev" rel="preconnect" data-gatsby-head="true" crossorigin=""><script type="application/ld+json" data-gatsby-head="true">{"@context":"https://schema.org","@type":"WebSite","name":"John Kavanagh","description":"The personal website, portfolio, and blog of John Kavanagh: a freelance front-end web developer based in Brighton, in the UK","url":"https://johnkavanagh.co.uk","about":{"@context":"https://schema.org","@type":"Person","name":"John Kavanagh","givenName":"John","familyName":"Kavanagh","email":"[email protected]","telephone":"+447736930110","url":"https://johnkavanagh.co.uk","jobTitle":"Freelance front-end web developer"},"accessMode":["textual","visual"],"accessModeSufficient":[{"@type":"ItemList","itemListElement":["textual","visual"],"description":"Text and images"},{"@type":"ItemList","itemListElement":["visual"],"description":"Images with textual alternatives and descriptions"}],"accessibilitySummary":"Video-based visual elements are described by surrounding text and have sound. Graphical basis of website appearance and structure is described by HTML markup.","creator":{"@context":"https://schema.org","@type":"Person","name":"John Kavanagh","givenName":"John","familyName":"Kavanagh","email":"[email protected]","telephone":"+447736930110","url":"https://johnkavanagh.co.uk","jobTitle":"Freelance front-end web developer"},"publisher":{"@context":"https://schema.org","@type":"LocalBusiness","@id":"https://kavanagh.digital","name":"Kavanagh Digital Ltd: A specialist tech consultancy","email":"[email protected]","telephone":"07736930110","url":"https://kavanagh.digital","description":"A specialist, independent, creative, digital web development studio based in Brighton. Focusing on engaging, quirky, and unusual website design and development, search engine optimisation, and social media development","address":{"@type":"PostalAddress","streetAddress":"86-90 Paul Street","addressLocality":"London","addressRegion":"London","postalCode":"EC2A 4NE","addressCountry":"United Kingdom"},"contactPoint":{"@type":"ContactPoint","email":"[email protected]","telephone":"+447736930110","availableLanguage":["en","en-GB","en-US"],"areaServed":["Brighton","Worthing","Chichester","Eastbourne","West Sussex","East Sussex","Greater London","London","Worldwide"]},"logo":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo.png","caption":"Kavanagh Digital Ltd. logo: KD","width":732,"height":508,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo-thumbnail.png","caption":"Thumbnail of the Kavanagh Digital Ltd. KD logo","width":250,"height":250,"inLanguage":["en","en-GB","en-US"]}},"image":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo.png","caption":"Kavanagh Digital Ltd. logo: KD","width":732,"height":508,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo-thumbnail.png","caption":"Thumbnail of the Kavanagh Digital Ltd. KD logo","width":250,"height":250,"inLanguage":["en","en-GB","en-US"]}},"openingHours":"Mo, Tu, We, Th, Fr, Sa, Su 08:00-20:00","priceRange":"££","awards":["BAFTA-nominated","Awwwards Site of the Day","The FWA Hall of Fame","Design Museum Designs of the Year Digital Award"],"hasOfferCatalog":{"@type":"OfferCatalog","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","name":"Front-end web development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Consultancy and freelance development services","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Application development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Software architecture","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development planning","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Project scoping","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Project wireframing","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website reviews","url":"https://johnkavanagh.co.uk/services/#performance-audits"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website performance audits","url":"https://johnkavanagh.co.uk/services/#performance-audits"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website usability and accessibility reviews","url":"https://johnkavanagh.co.uk/services/#accessibility-and-usability-reviews"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Ongoing support and maintenance","url":"https://johnkavanagh.co.uk/services/#ongoing-support-and-maintenance"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website and application hosting","url":"https://johnkavanagh.co.uk/services/#project-hosting"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development team leadership and recruitment","url":"https://johnkavanagh.co.uk/services/#development-leadership-and-mentoring"}}]}},"copyrightHolder":{"@context":"https://schema.org","@type":"Person","name":"John Kavanagh","givenName":"John","familyName":"Kavanagh","email":"[email protected]","telephone":"+447736930110","url":"https://johnkavanagh.co.uk","jobTitle":"Freelance front-end web developer"},"license":"UNLICENSED","copyrightNotice":"Copyright 2001 - 2024 John Kavanagh. All rights reserved.","copyrightYear":2001,"dateCreated":"2006-12-01T07:13:11.000+00:00","datePublished":"2024-02-26T13:25:42.4242+00:00","dateModified":"2024-12-02T01:05:55.5555+00:00","inLanguage":["en","en-GB","en-US"],"image":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/jk-logo.png","caption":"John Kavanagh logo","width":1500,"height":1500,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/jk-logo-thumbnail.png","caption":"Thumbnail of John Kavanagh logo","width":250,"height":250,"inLanguage":["en","en-GB","en-US"]}},"exampleOfWork":{"@id":"https://johnkavanagh.co.uk/projects/polestar-cars/"}}</script><script type="application/ld+json" data-gatsby-head="true">{"@context":"https://schema.org","@type":"BreadcrumbList","@id":"https://johnkavanagh.co.uk/","itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WebSite","@id":"https://johnkavanagh.co.uk/","url":"https://johnkavanagh.co.uk/","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@type":"CollectionPage","@id":"https://johnkavanagh.co.uk/articles/","url":"https://johnkavanagh.co.uk/articles/","name":"Articles"}},{"@type":"ListItem","position":3,"item":{"@type":"TechArticle","@id":"https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/","url":"https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/","name":"Gatsby & GraphQL: Nodes vs. Edges"}}]}</script><script type="application/ld+json" data-gatsby-head="true">{"@context":"https://schema.org","@type":["BlogPosting","Article"],"@id":"https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/","url":"https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/","headline":"Gatsby & GraphQL: Nodes vs. Edges","abstract":"A question I have often been asked when it comes to developing with Gatsby and GraphQL: what's the difference between Edges and Nodes?","keywords":"Development, Node, GatsbyJS, GraphQL","author":{"@context":"https://schema.org","@type":"Person","name":"John Kavanagh","givenName":"John","familyName":"Kavanagh","email":"[email protected]","telephone":"+447736930110","url":"https://johnkavanagh.co.uk","jobTitle":"Freelance front-end web developer","address":{"@type":"PostalAddress","streetAddress":"15-17 Middle Street","addressLocality":"Brighton","addressRegion":"East Sussex","postalCode":"BN1 1AL","addressCountry":"United Kingdom"},"hasOccupation":[{"@context":"https://schema.org/","@type":"Occupation","name":"Freelance web developer","occupationLocation":"United Kingdom","occupationalCategory":{"@type":"CategoryCode","name":"Web Developers","inCodeSet":{"@type":"CategoryCodeSet","name":"O*Net-SOC","url":"https://www.onetonline.org/"},"codeValue":"15-1254.00","url":"https://www.onetonline.org/link/summary/15-1254.00"}}],"knowsAbout":["HTML","CSS","JavaScript","React","Gatsby","Next.js","Web development","Front-end development","Freelance web development","Contract web development","Software development","Lead software development"],"description":"John is a freelance front-end web developer based in Brighton. He specialises in building highly-performant, responsive, and accessible websites and applications with HTML, CSS, and Javascript (often with React)","awards":["BAFTA-nominated","Awwwards Site of the Day","The FWA Hall of Fame","Design Museum Designs of the Year Digital Award"],"image":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/johnkavanagh.jpg","caption":"Photograph of John Kavanagh, freelance front-end web developer","width":1500,"height":1500,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/johnkavanagh-thumbnail.jpg","caption":"Thumbnail photograph of John Kavanagh, freelance front-end web developer","width":250,"height":250,"inLanguage":["en","en-GB","en-US"]}},"contactPoint":{"@type":"ContactPoint","email":"[email protected]","telephone":"07736930110","availableLanguage":["en","en-GB","en-US"],"areaServed":["Brighton","Worthing","Chichester","Eastbourne","West Sussex","East Sussex","Greater London","London","Worldwide"]},"sameAs":["https://www.linkedin.com/in/johnmkavanagh/","https://www.gatsbyjs.com/creators/people/john-kavanagh","https://www.gatsbyjs.com/showcase/johnkavanagh.co.uk","https://twitter.com/johnkavanagh","https://x.com/johnkavanagh","https://github.com/johnkavanagh","https://stackoverflow.com/users/607004/johnkavanagh","https://stackoverflow.com/story/johnkavanagh","https://app.yunojuno.com/p/johnkavanagh","https://angel.co/u/johnkavanagh","https://creativepool.com/john-kavanagh","https://www.codecademy.com/profiles/johnkavanagh","https://www.instagram.com/johnkavanagh/","https://www.facebook.com/johnmkavanagh/","https://goo.gl/maps/j4UGSDYAXpXukVvf8","https://ecologi.com/johnkavanagh?r=60c353940cde7a926c8356b5","https://www.polywork.com/johnkavanagh","https://platform.a.team/johnkavanagh","https://the-dots.com/users/john-kavanagh-1754923"],"hasOfferCatalog":{"@type":"OfferCatalog","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","name":"Front-end web development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Consultancy and freelance development services","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Application development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Software architecture","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development planning","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Project scoping","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Project wireframing","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website reviews","url":"https://johnkavanagh.co.uk/services/#performance-audits"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website performance audits","url":"https://johnkavanagh.co.uk/services/#performance-audits"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website usability and accessibility reviews","url":"https://johnkavanagh.co.uk/services/#accessibility-and-usability-reviews"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Ongoing support and maintenance","url":"https://johnkavanagh.co.uk/services/#ongoing-support-and-maintenance"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website and application hosting","url":"https://johnkavanagh.co.uk/services/#project-hosting"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development team leadership and recruitment","url":"https://johnkavanagh.co.uk/services/#development-leadership-and-mentoring"}}]},"memberOf":[{"@type":"Organization","name":"British Computer Society","@id":"https://www.bcs.org/"},{"@type":"Organization","name":"Motorsport UK","@id":"https://www.motorsportuk.org/"},{"@type":"Organization","name":"The Writers Bureau","@id":"https://www.writersbureaucourse.com/"}],"worksFor":[{"@context":"https://schema.org","@type":"LocalBusiness","@id":"https://kavanagh.digital","name":"Kavanagh Digital Ltd: A specialist tech consultancy","email":"[email protected]","telephone":"07736930110","url":"https://kavanagh.digital","description":"A specialist, independent, creative, digital web development studio based in Brighton. Focusing on engaging, quirky, and unusual website design and development, search engine optimisation, and social media development","address":{"@type":"PostalAddress","streetAddress":"86-90 Paul Street","addressLocality":"London","addressRegion":"London","postalCode":"EC2A 4NE","addressCountry":"United Kingdom"},"contactPoint":{"@type":"ContactPoint","email":"[email protected]","telephone":"+447736930110","availableLanguage":["en","en-GB","en-US"],"areaServed":["Brighton","Worthing","Chichester","Eastbourne","West Sussex","East Sussex","Greater London","London","Worldwide"]},"logo":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo.png","caption":"Kavanagh Digital Ltd. logo: KD","width":732,"height":508,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo-thumbnail.png","caption":"Thumbnail of the Kavanagh Digital Ltd. KD logo","width":250,"height":250,"inLanguage":["en","en-GB","en-US"]}},"image":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo.png","caption":"Kavanagh Digital Ltd. logo: KD","width":732,"height":508,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo-thumbnail.png","caption":"Thumbnail of the Kavanagh Digital Ltd. KD logo","width":250,"height":250,"inLanguage":["en","en-GB","en-US"]}},"openingHours":"Mo, Tu, We, Th, Fr, Sa, Su 08:00-20:00","priceRange":"££","awards":["BAFTA-nominated","Awwwards Site of the Day","The FWA Hall of Fame","Design Museum Designs of the Year Digital Award"],"hasOfferCatalog":{"@type":"OfferCatalog","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","name":"Front-end web development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Consultancy and freelance development services","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Application development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Software architecture","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development planning","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Project scoping","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Project wireframing","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website reviews","url":"https://johnkavanagh.co.uk/services/#performance-audits"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website performance audits","url":"https://johnkavanagh.co.uk/services/#performance-audits"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website usability and accessibility reviews","url":"https://johnkavanagh.co.uk/services/#accessibility-and-usability-reviews"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Ongoing support and maintenance","url":"https://johnkavanagh.co.uk/services/#ongoing-support-and-maintenance"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website and application hosting","url":"https://johnkavanagh.co.uk/services/#project-hosting"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development team leadership and recruitment","url":"https://johnkavanagh.co.uk/services/#development-leadership-and-mentoring"}}]}}]},"publisher":{"@context":"https://schema.org","@type":"LocalBusiness","@id":"https://kavanagh.digital","name":"Kavanagh Digital Ltd: A specialist tech consultancy","email":"[email protected]","telephone":"07736930110","url":"https://kavanagh.digital","description":"A specialist, independent, creative, digital web development studio based in Brighton. Focusing on engaging, quirky, and unusual website design and development, search engine optimisation, and social media development","address":{"@type":"PostalAddress","streetAddress":"86-90 Paul Street","addressLocality":"London","addressRegion":"London","postalCode":"EC2A 4NE","addressCountry":"United Kingdom"},"contactPoint":{"@type":"ContactPoint","email":"[email protected]","telephone":"+447736930110","availableLanguage":["en","en-GB","en-US"],"areaServed":["Brighton","Worthing","Chichester","Eastbourne","West Sussex","East Sussex","Greater London","London","Worldwide"]},"logo":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo.png","caption":"Kavanagh Digital Ltd. logo: KD","width":732,"height":508,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo-thumbnail.png","caption":"Thumbnail of the Kavanagh Digital Ltd. KD logo","width":250,"height":250,"inLanguage":["en","en-GB","en-US"]}},"image":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo.png","caption":"Kavanagh Digital Ltd. logo: KD","width":732,"height":508,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/kavanagh-digital-logo-thumbnail.png","caption":"Thumbnail of the Kavanagh Digital Ltd. KD logo","width":250,"height":250,"inLanguage":["en","en-GB","en-US"]}},"openingHours":"Mo, Tu, We, Th, Fr, Sa, Su 08:00-20:00","priceRange":"££","awards":["BAFTA-nominated","Awwwards Site of the Day","The FWA Hall of Fame","Design Museum Designs of the Year Digital Award"],"hasOfferCatalog":{"@type":"OfferCatalog","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","name":"Front-end web development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Consultancy and freelance development services","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Application development","url":"https://johnkavanagh.co.uk/services/#website-and-online-software-development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Software architecture","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development planning","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Project scoping","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Project wireframing","url":"https://johnkavanagh.co.uk/services/#project-architecture-and-management"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website reviews","url":"https://johnkavanagh.co.uk/services/#performance-audits"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website performance audits","url":"https://johnkavanagh.co.uk/services/#performance-audits"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website usability and accessibility reviews","url":"https://johnkavanagh.co.uk/services/#accessibility-and-usability-reviews"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Ongoing support and maintenance","url":"https://johnkavanagh.co.uk/services/#ongoing-support-and-maintenance"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Website and application hosting","url":"https://johnkavanagh.co.uk/services/#project-hosting"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development team leadership and recruitment","url":"https://johnkavanagh.co.uk/services/#development-leadership-and-mentoring"}}]}},"inLanguage":["en","en-GB","en-US"],"datePublished":"2022-04-04T00:00:00.000+00:00","dateModified":"2024-11-01T10:22:45.4545+00:00","timeRequired":"PT03M","mainEntityOfPage":"https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/","image":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/static/d84773933de014236b34af7c03c442f5/0eab3/nodes-hero.jpg","caption":"Abstract image used to represent Gatsby & GraphQL: Nodes vs. Edges","width":1200,"height":630,"inLanguage":["en","en-GB","en-US"],"thumbnail":{"@type":"ImageObject","url":"https://johnkavanagh.co.uk/static/8f70b2bc467e2893fc6749f5ea64d7cd/751ca/nodes-grid.jpg","caption":"Thumbnail abstract image used to represent Gatsby & GraphQL: Nodes vs. Edges","width":250,"height":260,"inLanguage":["en","en-GB","en-US"]}},"isPartOf":["https://johnkavanagh.co.uk/articles/","https://johnkavanagh.co.uk/articles/categories/development/","https://johnkavanagh.co.uk/articles/categories/node/","https://johnkavanagh.co.uk/articles/categories/gatsbyjs/","https://johnkavanagh.co.uk/articles/categories/graphql/"],"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2032,"interactionService":[{"@type":"WebSite","url":"https://johnkavanagh.co.uk"}],"location":[{"@type":"VirtualLocation","url":"https://johnkavanagh.co.uk/articles/gatsby-and-graphql-nodes-vs-edges/"}]}]}</script><link href="https://johnkavanagh.co.uk/articles/the-palindrome-number-problem-strings-vs-maths/" rel="first" data-gatsby-head="true"><link href="https://johnkavanagh.co.uk/articles/html-video-and-the-preload-attribute/" rel="next" data-gatsby-head="true"><link href="https://johnkavanagh.co.uk/articles/what-is-a-distributed-denial-of-service-ddos-attack/" rel="prev" data-gatsby-head="true"><link href="https://johnkavanagh.co.uk/articles/setting-css-blur-filter-to-zero-on-a-retina-screen/" rel="last" data-gatsby-head="true"></head><body><div id="___gatsby"><div tabindex="-1" id="gatsby-focus-wrapper" style="outline: none;"><div id="page" class="layout"><nav class="skip-links" aria-label="On-page skip links"><ol class="skip-links__list"><li class="skip-links__item skip-links__item--to-top"><a href="#top" aria-label="Top of the page" aria-hidden="true" id="top" tabindex="-1" class="skip-links__button">Top of the page</a></li><li class="skip-links__item"><a class="button button--dark-primary button--skiplink skip-links__button" tabindex="0" aria-label="Go to homepage" href="/"><span class="button__inner">Go to homepage</span></a></li><li class="skip-links__item"><a class="button button--dark-primary button--skiplink skip-links__button" tabindex="0" aria-label="Skip to navigation" href="/articles/gatsby-and-graphql-nodes-vs-edges/#navigation"><span class="button__inner">Skip to navigation</span></a></li><li class="skip-links__item"><a class="button button--dark-primary button--skiplink skip-links__button" tabindex="0" aria-label="Skip to main content" href="/articles/gatsby-and-graphql-nodes-vs-edges/#main"><span class="button__inner">Skip to main content</span></a></li><li class="skip-links__item"><a class="button button--dark-primary button--skiplink skip-links__button" tabindex="0" aria-label="Skip to footer" href="/articles/gatsby-and-graphql-nodes-vs-edges/#footer"><span class="button__inner">Skip to footer</span></a></li></ol></nav><header class="header header--peeked" id="header"><div class="container header__container"><a href="https://johnkavanagh.co.uk" class="header__logo-link" aria-label="John Kavanagh" rel="home"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2016 375.44" class="header__logo header__logo--dark"><path d="M1033.86 368.2h-31.92l-14.36-41.25-.65-1.87h-.05l-21.65-57.42c-2.17-5.75-4.09-11.04-5.75-15.86a184.61 184.61 0 0 1-4.39 13.5l-21.98 59.78h-.07l-5.4 14.89-10.24 28.23h-28.79l57.81-150.53h25.84l61.61 150.53Zm83.63-44.45c-1.35 3.59-2.62 7.19-3.82 10.8-1.14-3.49-2.37-7.08-3.68-10.74l-37.97-106.14h-29.21l58.33 150.54h24.9l58.94-150.54h-28.03l-39.45 106.09ZM784.7 288.46l57.33-70.8h-30.37l-74.07 91.47v-91.37h-23.6v157.68l55.52-68.24 49.48 61.1h30.37l-64.66-79.84zm554.04 79.74h-31.92l-14.36-41.25-.65-1.87h-.05l-21.65-57.42c-2.17-5.75-4.09-11.04-5.75-15.86a184.61 184.61 0 0 1-4.39 13.5l-21.98 59.78h-.07l-5.4 14.89-10.24 28.23h-28.79l57.81-150.53h25.84l61.61 150.53Zm343.9 0h-31.92l-14.36-41.25-.65-1.87h-.05l-21.65-57.42c-2.17-5.75-4.09-11.04-5.75-15.86a184.61 184.61 0 0 1-4.39 13.5l-21.98 59.78h-.07l-5.4 14.89-10.24 28.23h-28.79l57.81-150.53h25.84l61.61 150.53Zm-210.61-48.08-68.54-102.46h-25.58V368.2h26.21V265.65l68.55 102.55h25.57V217.66h-26.21v102.46zm516.98-102.46v58.47h-65.87v-58.47h-26.98V368.2h26.98v-67.12h65.87v67.12H2016V217.66h-26.99zm-146.6 86.24c-.04.14-.06.29-.1.43h.1v44.47c-6.73 5.66-14.49 10.25-22.98 13.55-9.63 3.75-20.19 5.82-31.28 5.82-44.78 0-81.08-33.73-81.08-75.33s36.3-75.33 81.08-75.33c20.81 0 39.79 7.28 54.14 19.25l-14.16 20.25c-10.11-9.72-24.28-15.77-39.98-15.77-30.67 0-55.54 23.11-55.54 51.61s24.87 51.61 55.54 51.61c11.61 0 22.37-3.31 31.28-8.96v-31.16h-37.03v-22.98h60.01v22.55ZM211.83.44v260.98c0 58.74-47.62 106.36-106.36 106.36H0V327.3h106.6c35.77 0 64.76-28.99 64.76-64.76V.44h40.48Zm324.09 326.87L410.48 172.4 549.83.31h-52.08L384.44 140.24l-26.05 32.16-66.27 81.84V.57h-40.48v367.22h.62l32.78-40.48 7.08-8.75 92.32-114 99.4 122.75 32.77 40.48h52.08l-32.77-40.48zm582.46-268.53h-65.87V.31h-26.99v150.53h26.99V83.73h65.87v67.11h26.99V.31h-26.99v58.47zM1271.65.31v102.46L1203.1.31h-25.57v150.53h26.21V48.3l68.54 102.54h25.58V.31h-26.21zm-488.51 0v105.73c0 12.89-10.49 23.38-23.38 23.38h-45.52v26.64h45.03c27.85 0 50.5-22.66 50.5-50.5V.31h-26.64ZM917.71 0c-43.01 0-77.87 34.86-77.87 77.87s34.86 77.87 77.87 77.87 77.87-34.86 77.87-77.87S960.72 0 917.71 0Zm0 130.28c-28.94 0-52.4-23.46-52.4-52.4s23.46-52.4 52.4-52.4 52.4 23.46 52.4 52.4-23.46 52.4-52.4 52.4Z"></path></svg></a><button type="button" class="bento-button bento-button--dark" aria-haspopup="true" aria-expanded="false" aria-controls="navigation" aria-label="Open main menu" id="bento"><span class="bento-button__inner"><span class="bento-button__dot bento-button__dot--1"></span><span class="bento-button__dot bento-button__dot--2"></span><span class="bento-button__dot bento-button__dot--3"></span><span class="bento-button__dot bento-button__dot--4"></span><span class="bento-button__dot bento-button__dot--5"></span><span class="bento-button__dot bento-button__dot--6"></span><span class="bento-button__dot bento-button__dot--7"></span><span class="bento-button__dot bento-button__dot--8"></span><span class="bento-button__dot bento-button__dot--9"></span><span class="bento-button__label">Main menu</span></span></button><nav class="navigation navigation--dark" id="navigation" tabindex="-1" aria-labelledby="bento"><ul class="navigation__menu"><li class="navigation__item"><a class="navigation__link" tabindex="-1" href="/about/">About</a></li><li class="navigation__item"><a class="navigation__link" tabindex="-1" href="/services/">Services</a></li><li class="navigation__item"><a class="navigation__link" tabindex="-1" href="/projects/">Projects</a></li><li class="navigation__item"><a class="navigation__link navigation__link--active" tabindex="-1" href="/articles/">Articles</a></li><li class="navigation__item"><a class="navigation__link" tabindex="-1" href="/availability/">Availability</a></li><li class="navigation__item"><a class="navigation__link" tabindex="-1" href="/contact/">Contact</a></li></ul></nav><div class="navigation-overlay" tabindex="-1"></div></div></header><main id="main" class="layout__main" tabindex="-1"><section class="article-hero"><div class="container container--grid"><div class="article-hero__inner"><time class="article-hero__date" title="Published on 04 April 2022; last updated on 01 November 2024." datetime="2022-04-04T00:00:00.000Z">04 April 2022</time><h1 class="article-hero__title"><abbr title="GatsbyJS">Gatsby</abbr> & <abbr title="Graph Query Language">GraphQL</abbr>: Nodes <abbr title="versus">vs</abbr>. Edges</h1></div></div><figure class="article-hero__media-wrap article-hero__media-wrap--blurred" style="background-color: rgb(8, 8, 8); --background-image: url(/static/d84773933de014236b34af7c03c442f5/7ac61/nodes-hero.webp);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-hero__image"><div style="max-width:1700px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='668'%20width='1700'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#080808;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/d84773933de014236b34af7c03c442f5/7ac61/nodes-hero.webp 376w,
/static/d84773933de014236b34af7c03c442f5/76111/nodes-hero.webp 576w,
/static/d84773933de014236b34af7c03c442f5/ecd73/nodes-hero.webp 768w,
/static/d84773933de014236b34af7c03c442f5/df852/nodes-hero.webp 992w,
/static/d84773933de014236b34af7c03c442f5/1356e/nodes-hero.webp 1200w,
/static/d84773933de014236b34af7c03c442f5/a378a/nodes-hero.webp 1500w,
/static/d84773933de014236b34af7c03c442f5/fffe0/nodes-hero.webp 1700w,
/static/d84773933de014236b34af7c03c442f5/692e5/nodes-hero.webp 1920w" sizes="(min-width: 1700px) 1700px, 100vw"><img width="1700" height="668" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 1700px) 1700px, 100vw" decoding="async" loading="eager" src="/static/d84773933de014236b34af7c03c442f5/4cda3/nodes-hero.png" srcset="/static/d84773933de014236b34af7c03c442f5/48711/nodes-hero.png 376w,
/static/d84773933de014236b34af7c03c442f5/1a3fa/nodes-hero.png 576w,
/static/d84773933de014236b34af7c03c442f5/ba7f9/nodes-hero.png 768w,
/static/d84773933de014236b34af7c03c442f5/78c05/nodes-hero.png 992w,
/static/d84773933de014236b34af7c03c442f5/dd1dc/nodes-hero.png 1200w,
/static/d84773933de014236b34af7c03c442f5/5dcf9/nodes-hero.png 1500w,
/static/d84773933de014236b34af7c03c442f5/4cda3/nodes-hero.png 1700w,
/static/d84773933de014236b34af7c03c442f5/57f0a/nodes-hero.png 1920w" alt="Hero image for Gatsby & GraphQL: Nodes vs. Edges. Image by Shutterstock."></picture><noscript><picture><source type="image/webp" srcSet="/static/d84773933de014236b34af7c03c442f5/7ac61/nodes-hero.webp 376w,
/static/d84773933de014236b34af7c03c442f5/76111/nodes-hero.webp 576w,
/static/d84773933de014236b34af7c03c442f5/ecd73/nodes-hero.webp 768w,
/static/d84773933de014236b34af7c03c442f5/df852/nodes-hero.webp 992w,
/static/d84773933de014236b34af7c03c442f5/1356e/nodes-hero.webp 1200w,
/static/d84773933de014236b34af7c03c442f5/a378a/nodes-hero.webp 1500w,
/static/d84773933de014236b34af7c03c442f5/fffe0/nodes-hero.webp 1700w,
/static/d84773933de014236b34af7c03c442f5/692e5/nodes-hero.webp 1920w" sizes="(min-width: 1700px) 1700px, 100vw"/><img width="1700" height="668" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 1700px) 1700px, 100vw" decoding="async" loading="eager" src="/static/d84773933de014236b34af7c03c442f5/4cda3/nodes-hero.png" srcSet="/static/d84773933de014236b34af7c03c442f5/48711/nodes-hero.png 376w,
/static/d84773933de014236b34af7c03c442f5/1a3fa/nodes-hero.png 576w,
/static/d84773933de014236b34af7c03c442f5/ba7f9/nodes-hero.png 768w,
/static/d84773933de014236b34af7c03c442f5/78c05/nodes-hero.png 992w,
/static/d84773933de014236b34af7c03c442f5/dd1dc/nodes-hero.png 1200w,
/static/d84773933de014236b34af7c03c442f5/5dcf9/nodes-hero.png 1500w,
/static/d84773933de014236b34af7c03c442f5/4cda3/nodes-hero.png 1700w,
/static/d84773933de014236b34af7c03c442f5/57f0a/nodes-hero.png 1920w" alt="Hero image for Gatsby & GraphQL: Nodes vs. Edges. Image by Shutterstock."/></picture></noscript></div><figcaption class="article-hero__image-caption">Hero image for 'Gatsby & GraphQL: Nodes vs. Edges.' Image by Shutterstock.</figcaption></figure></section><section class="container container--grid rich-content rich-content--article" id="scrollDownAnchor"><div class="rich-content__inner rich-content__inner--article"><p>Although strictly speaking this doesn't relate directly to <abbr title="GatsbyJS">Gatsby</abbr>, it is a question that I am asked fairly frequently when it comes to developing with <abbr title="GatsbyJS">Gatsby</abbr>. For many front‑end developers, using <abbr title="GatsbyJS">GatsbyJS</abbr> will be the first time that they have been exposed to <abbr title="Graph Query Language">GraphQL</abbr> queries.</p><p>So, what's the difference? Take this query for example:</p><div class="pullout-panel rich-media-outset rich-code"><div class="pullout-panel__inner"><div class="container container--grid container--outset"><div class="rich-media-outset__inner"><pre class="rich-code__inner rich-code__inner--scrolled-to-left"><code class="rich-code__code language-graphql" lang="graphql (programming language)"><span class="rich-code__line">query Shuttles {</span><span class="rich-code__line"> allShuttles {</span><span class="rich-code__line"> edges {</span><span class="rich-code__line"> node {</span><span class="rich-code__line"> name</span><span class="rich-code__line"> }</span><span class="rich-code__line"> }</span><span class="rich-code__line"> nodes {</span><span class="rich-code__line"> name</span><span class="rich-code__line"> }</span><span class="rich-code__line"> }</span><span class="rich-code__line">}</span><span class="rich-code__line"></span></code></pre></div></div></div></div><p>At first glance, the result from this looks to be the same for both <code class="rich-content__inline-code">edges</code> and <code class="rich-content__inline-code">nodes</code>:</p><div class="pullout-panel rich-media-outset rich-code"><div class="pullout-panel__inner"><div class="container container--grid container--outset"><div class="rich-media-outset__inner"><pre class="rich-code__inner rich-code__inner--scrolled-to-left"><code class="rich-code__code language-json" lang="json (programming language)"><span class="rich-code__line">data: {</span><span class="rich-code__line"> allShuttles: {</span><span class="rich-code__line"> edges: [</span><span class="rich-code__line"> {</span><span class="rich-code__line"> node: {</span><span class="rich-code__line"> name: 'Enterprise',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> },</span><span class="rich-code__line"> {</span><span class="rich-code__line"> node: {</span><span class="rich-code__line"> name: 'Columbia',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> },</span><span class="rich-code__line"> {</span><span class="rich-code__line"> node: {</span><span class="rich-code__line"> name: 'Challenger',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> },</span><span class="rich-code__line"> ],</span><span class="rich-code__line"> nodes: [</span><span class="rich-code__line"> {</span><span class="rich-code__line"> name: 'Enterprise',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> {</span><span class="rich-code__line"> name: 'Columbia',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> {</span><span class="rich-code__line"> name: 'Challenger',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> ],</span><span class="rich-code__line"> },</span><span class="rich-code__line">},</span></code></pre></div></div></div></div><p>However, there are some subtle and key differences between the two.</p><figure class="pullout-panel rich-media-outset"><div class="pullout-panel__inner"><div class="container container--grid container--outset"><div class="rich-media-outset__inner"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained rich-content__image" style="aspect-ratio: 2200 / 1097;"><div style="max-width:1160px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='578'%20width='1160'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#282828;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/ceb78b98dd60048e42acf4d224324ec8/3513b/shuttle.webp 376w,
/static/ceb78b98dd60048e42acf4d224324ec8/b8ab7/shuttle.webp 576w,
/static/ceb78b98dd60048e42acf4d224324ec8/770e7/shuttle.webp 768w,
/static/ceb78b98dd60048e42acf4d224324ec8/c6665/shuttle.webp 992w,
/static/ceb78b98dd60048e42acf4d224324ec8/8bc62/shuttle.webp 1160w,
/static/ceb78b98dd60048e42acf4d224324ec8/81f50/shuttle.webp 1200w,
/static/ceb78b98dd60048e42acf4d224324ec8/48d27/shuttle.webp 1500w,
/static/ceb78b98dd60048e42acf4d224324ec8/25d0c/shuttle.webp 1700w,
/static/ceb78b98dd60048e42acf4d224324ec8/0940d/shuttle.webp 1920w" sizes="(min-width: 1160px) 1160px, 100vw"><img width="1160" height="578" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 1160px) 1160px, 100vw" decoding="async" loading="lazy" src="/static/ceb78b98dd60048e42acf4d224324ec8/dd6b8/shuttle.jpg" srcset="/static/ceb78b98dd60048e42acf4d224324ec8/b47c2/shuttle.jpg 376w,
/static/ceb78b98dd60048e42acf4d224324ec8/8c52d/shuttle.jpg 576w,
/static/ceb78b98dd60048e42acf4d224324ec8/93db7/shuttle.jpg 768w,
/static/ceb78b98dd60048e42acf4d224324ec8/baefc/shuttle.jpg 992w,
/static/ceb78b98dd60048e42acf4d224324ec8/dd6b8/shuttle.jpg 1160w,
/static/ceb78b98dd60048e42acf4d224324ec8/97fdb/shuttle.jpg 1200w,
/static/ceb78b98dd60048e42acf4d224324ec8/7c7cd/shuttle.jpg 1500w,
/static/ceb78b98dd60048e42acf4d224324ec8/6a91c/shuttle.jpg 1700w,
/static/ceb78b98dd60048e42acf4d224324ec8/ffa05/shuttle.jpg 1920w" alt="Photograph of the Nasa Shuttle Endeavour in Los Angeles, taken by Kvnga in Unsplash."></picture><noscript><picture><source type="image/webp" srcSet="/static/ceb78b98dd60048e42acf4d224324ec8/3513b/shuttle.webp 376w,
/static/ceb78b98dd60048e42acf4d224324ec8/b8ab7/shuttle.webp 576w,
/static/ceb78b98dd60048e42acf4d224324ec8/770e7/shuttle.webp 768w,
/static/ceb78b98dd60048e42acf4d224324ec8/c6665/shuttle.webp 992w,
/static/ceb78b98dd60048e42acf4d224324ec8/8bc62/shuttle.webp 1160w,
/static/ceb78b98dd60048e42acf4d224324ec8/81f50/shuttle.webp 1200w,
/static/ceb78b98dd60048e42acf4d224324ec8/48d27/shuttle.webp 1500w,
/static/ceb78b98dd60048e42acf4d224324ec8/25d0c/shuttle.webp 1700w,
/static/ceb78b98dd60048e42acf4d224324ec8/0940d/shuttle.webp 1920w" sizes="(min-width: 1160px) 1160px, 100vw"/><img width="1160" height="578" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 1160px) 1160px, 100vw" decoding="async" loading="lazy" src="/static/ceb78b98dd60048e42acf4d224324ec8/dd6b8/shuttle.jpg" srcSet="/static/ceb78b98dd60048e42acf4d224324ec8/b47c2/shuttle.jpg 376w,
/static/ceb78b98dd60048e42acf4d224324ec8/8c52d/shuttle.jpg 576w,
/static/ceb78b98dd60048e42acf4d224324ec8/93db7/shuttle.jpg 768w,
/static/ceb78b98dd60048e42acf4d224324ec8/baefc/shuttle.jpg 992w,
/static/ceb78b98dd60048e42acf4d224324ec8/dd6b8/shuttle.jpg 1160w,
/static/ceb78b98dd60048e42acf4d224324ec8/97fdb/shuttle.jpg 1200w,
/static/ceb78b98dd60048e42acf4d224324ec8/7c7cd/shuttle.jpg 1500w,
/static/ceb78b98dd60048e42acf4d224324ec8/6a91c/shuttle.jpg 1700w,
/static/ceb78b98dd60048e42acf4d224324ec8/ffa05/shuttle.jpg 1920w" alt="Photograph of the Nasa Shuttle Endeavour in Los Angeles, taken by Kvnga in Unsplash."/></picture></noscript></div></div></div></div></figure><h2 class="rich-content__heading rich-content__heading--level-1" id="heading-graph-theory">Graph Theory</h2><p>In order to explain the difference, you need to have a very gentle grasp of <a href="https://en.wikipedia.org/wiki/Graph_theory" class="rich-content__link" target="_blank" rel="nofollow noopener noreferrer" title="Graph Theory. Opens in a new window.">Graph Theory</a>. In the quickest and simplest way I can manage: Graph Theory describes the idea that data can be modelled by connecting circles (nodes) of data, via lines that describe the relationship between nodes (edges). Therefore, our <abbr title="Graph Query Language">GraphQL</abbr> data looks a little like a much more complex version of this diagram:</p><figure class="pullout-panel rich-media-outset"><div class="pullout-panel__inner"><div class="container container--grid container--outset"><div class="rich-media-outset__inner"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained rich-content__image" style="aspect-ratio: 1100 / 401;"><div style="max-width:1160px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='423'%20width='1160'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/0f039b112f9e3566ad43a59fd4a2dd0d/ad35b/graph-theory.webp 376w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/055a4/graph-theory.webp 576w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/d18f7/graph-theory.webp 768w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/85e4d/graph-theory.webp 992w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/a2a84/graph-theory.webp 1160w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/4be0a/graph-theory.webp 1200w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/0bffc/graph-theory.webp 1500w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/f8110/graph-theory.webp 1700w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/b6fa4/graph-theory.webp 1920w" sizes="(min-width: 1160px) 1160px, 100vw"><img width="1160" height="423" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 1160px) 1160px, 100vw" decoding="async" loading="lazy" src="/static/0f039b112f9e3566ad43a59fd4a2dd0d/94beb/graph-theory.png" srcset="/static/0f039b112f9e3566ad43a59fd4a2dd0d/b5370/graph-theory.png 376w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/24bfc/graph-theory.png 576w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/963da/graph-theory.png 768w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/4226e/graph-theory.png 992w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/94beb/graph-theory.png 1160w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/d0a4f/graph-theory.png 1200w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/18916/graph-theory.png 1500w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/58673/graph-theory.png 1700w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/44d1f/graph-theory.png 1920w" alt="Diagram of a directed graph by David_W on Wikicommons."></picture><noscript><picture><source type="image/webp" srcSet="/static/0f039b112f9e3566ad43a59fd4a2dd0d/ad35b/graph-theory.webp 376w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/055a4/graph-theory.webp 576w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/d18f7/graph-theory.webp 768w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/85e4d/graph-theory.webp 992w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/a2a84/graph-theory.webp 1160w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/4be0a/graph-theory.webp 1200w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/0bffc/graph-theory.webp 1500w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/f8110/graph-theory.webp 1700w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/b6fa4/graph-theory.webp 1920w" sizes="(min-width: 1160px) 1160px, 100vw"/><img width="1160" height="423" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 1160px) 1160px, 100vw" decoding="async" loading="lazy" src="/static/0f039b112f9e3566ad43a59fd4a2dd0d/94beb/graph-theory.png" srcSet="/static/0f039b112f9e3566ad43a59fd4a2dd0d/b5370/graph-theory.png 376w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/24bfc/graph-theory.png 576w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/963da/graph-theory.png 768w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/4226e/graph-theory.png 992w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/94beb/graph-theory.png 1160w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/d0a4f/graph-theory.png 1200w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/18916/graph-theory.png 1500w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/58673/graph-theory.png 1700w,
/static/0f039b112f9e3566ad43a59fd4a2dd0d/44d1f/graph-theory.png 1920w" alt="Diagram of a directed graph by David_W on Wikicommons."/></picture></noscript></div></div></div></div></figure><p>Each circle is a <code class="rich-content__inline-code">node</code>, each line between them is an <code class="rich-content__inline-code">edge</code>.</p><h2 class="rich-content__heading rich-content__heading--level-1" id="heading-nodes">Nodes</h2><p>In situations where you only need to access an item of data directly (without any additional data about it's relationship with other nodes), then accessing them directly via <code class="rich-content__inline-code">node</code> makes perfect sense: it is a shorter and more concise query, and it returns all the data you need.</p><h2 class="rich-content__heading rich-content__heading--level-1" id="heading-edges">Edges</h2><p>On the other hand, <code class="rich-content__inline-code">edges</code> also describe the relationship between those <code class="rich-content__inline-code">nodes</code>. So, expanding on the original example above:</p><div class="pullout-panel rich-media-outset rich-code"><div class="pullout-panel__inner"><div class="container container--grid container--outset"><div class="rich-media-outset__inner"><pre class="rich-code__inner rich-code__inner--scrolled-to-left"><code class="rich-code__code language-graphql" lang="graphql (programming language)"><span class="rich-code__line">query Shuttles {</span><span class="rich-code__line"> allShuttles {</span><span class="rich-code__line"> edges {</span><span class="rich-code__line"> node {</span><span class="rich-code__line"> name</span><span class="rich-code__line"> }</span><span class="rich-code__line"> next {</span><span class="rich-code__line"> name</span><span class="rich-code__line"> }</span><span class="rich-code__line"> previous {</span><span class="rich-code__line"> name</span><span class="rich-code__line"> }</span><span class="rich-code__line"> }</span><span class="rich-code__line"> }</span><span class="rich-code__line">}</span></code></pre></div></div></div></div><p>Results in:</p><div class="pullout-panel rich-media-outset rich-code"><div class="pullout-panel__inner"><div class="container container--grid container--outset"><div class="rich-media-outset__inner"><pre class="rich-code__inner rich-code__inner--scrolled-to-left"><code class="rich-code__code language-json" lang="json (programming language)"><span class="rich-code__line">data: {</span><span class="rich-code__line"> allShuttles: {</span><span class="rich-code__line"> edges: [</span><span class="rich-code__line"> {</span><span class="rich-code__line"> node: {</span><span class="rich-code__line"> name: 'Enterprise',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> next: {</span><span class="rich-code__line"> name: 'Columbia',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> previous: {</span><span class="rich-code__line"> name: null,</span><span class="rich-code__line"> },</span><span class="rich-code__line"> },</span><span class="rich-code__line"> {</span><span class="rich-code__line"> node: {</span><span class="rich-code__line"> name: 'Columbia',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> next: {</span><span class="rich-code__line"> name: 'Challenger',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> previous: {</span><span class="rich-code__line"> name: 'Enterprise',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> },</span><span class="rich-code__line"> {</span><span class="rich-code__line"> node: {</span><span class="rich-code__line"> name: 'Challenger',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> next: {</span><span class="rich-code__line"> name: null,</span><span class="rich-code__line"> },</span><span class="rich-code__line"> previous: {</span><span class="rich-code__line"> name: 'Columbia',</span><span class="rich-code__line"> },</span><span class="rich-code__line"> },</span><span class="rich-code__line"> ],</span><span class="rich-code__line"> },</span><span class="rich-code__line">},</span></code></pre></div></div></div></div><p>What we now have is all the same data that we had previously when querying <code class="rich-content__inline-code">nodes</code> directly but with the addition of knowing which shuttle (item of data) came before and after it.</p><h3 class="rich-content__heading rich-content__heading--level-2" id="heading-pagination-in-gatsby-using-edges">Pagination in <abbr title="GatsbyJS">Gatsby</abbr> Using Edges</h3><p>Pagination in <abbr title="GatsbyJS">Gatsby</abbr> itself is definitely something for another time and another article, but to give some brief context: in the case of developing within <abbr title="GatsbyJS">Gatsby</abbr>, the most common use‑case for <code class="rich-content__inline-code">edge</code> queries is going to be building up pagination between pieces of data. For example, blog articles.</p><p>I use this myself to determine what the 'next' article at the bottom of this very page should be. I also use it again to display the next project in the footer of each <a class="rich-content__link" href="/projects/">portfolio item</a>. Using the <code class="rich-content__inline-code">edges</code> structure, you can pass the <code class="rich-content__inline-code">next</code> and <code class="rich-content__inline-code">previous</code> nodes into <code class="rich-content__inline-code">pageContext</code> from <code class="rich-content__inline-code">gatsby‑node.js</code>, and then use that data as you need. Were you simply to query <code class="rich-content__inline-code">nodes</code> directly, this relationship between preceding and proceeding nodes would not be available.</p><h2 class="rich-content__heading rich-content__heading--level-1" id="heading-the-difference-in-a-nutshell">The Difference in a Nutshell</h2><p>All of this is a lot of words (and excuses to post pictures of Space Shuttles) to say in a nutshell: the difference is that a <code class="rich-content__inline-code">node</code> is a specific piece of data whereas <code class="rich-content__inline-code">edge</code> allows you to access and use the relationship between that data and others as well.</p><p>Use a <code class="rich-content__inline-code">node</code> query if you just want the data. Use an <code class="rich-content__inline-code">edge</code> query if you want to know more about the data's relationship with other pieces of data in your schema.</p><div class="rich-content__share"><div class="pullout-panel rich-media-outset"><div class="pullout-panel__inner"><div class="container container--grid container--outset"><div class="rich-media-outset__inner"><hr class="rich-content__rule"></div></div></div></div><button class="clap-button" type="button" aria-label="There are currently null claps for this article. Click to add another one."><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="99.61 77.07 312.42 358.19" class="clap-button__icon"><path d="M398 268.9c12.9-6.9 17.8-22.9 10.9-35.9-6.4-12-20.7-17.2-33.3-12.1l-.6.2c3.6-14.2-5.1-28.6-19.3-32.1-5.4-1.4-11.2-1-16.4 1.1L313 200.7c-5.7-5.9-13.9-8.9-22.1-7.9 5.4-12.4.7-26.9-11.1-33.6-12.7-7.2-28.9-2.8-36.2 9.9l-.3.6c-6.1-13.3-21.8-19.2-35.1-13.2-5.1 2.3-9.3 6.2-12.1 11l-42.3 74.1-1.3-14.4c-1.2-14.6-13.9-25.5-28.5-24.3s-25.5 13.9-24.3 28.5v.5l9.1 100.9v.6c-6.8 49 27.4 94.2 76.4 101 22.9 3.2 46.2-2.6 64.9-16.3l1.1-.3c5.1-1.6 10.2-3.2 11.9-3.9l120.5-48.5c13.6-5.5 20.2-20.9 14.7-34.5-2.1-5.2-5.7-9.6-10.5-12.5l5.6-2.3c13.6-5.5 20.2-20.9 14.7-34.5-1.6-5.3-5.3-9.7-10.1-12.7m-18.2-37.8c7.9-3.2 17 .7 20.2 8.6s-.7 17-8.6 20.2l-17.2 6.9-36.7 14.8 2.6-4.6c5.3-9.4 4.5-21-2.2-29.5l21.4-8.2zm-36.3-30.7c7.9-3.2 17 .6 20.2 8.6s-.6 17-8.6 20.2l-27.5 10.5c-4.2-1.9-8.9-2.6-13.5-2.1l3-5.3c3.5-6.1 4.4-13.3 2.5-20.1-.2-.6-.4-1.3-.6-1.9zm-125 220.9c-41.8 11.4-85-13.2-96.5-55.1-2.8-10.2-3.5-20.8-2.1-31.2.2-.7.2-1.5.2-2.2v-.1L111 230.8c-1-8.5 5.2-16.2 13.7-17.2s16.2 5.2 17.2 13.7c0 .3.1.5.1.8l2.8 31.9c.3 3 2.9 5.3 6 5 1.8-.2 3.4-1.2 4.3-2.8l51-89.4c4.2-7.4 13.7-10 21.2-5.8 7.4 4.2 10 13.7 5.8 21.2l-39.6 69.4c-1.5 2.6-.6 6 2 7.5.8.5 1.8.7 2.7.7 2 0 3.8-1.1 4.8-2.8l39.5-69.4 11-19.2c4.2-7.4 13.7-10 21.2-5.8s10 13.7 5.8 21.2l-9.2 16.1-41.3 72.4c-1.5 2.6-.6 6 2.1 7.5s6 .6 7.5-2.1l41.3-72.4c4.2-7.5 13.7-10.1 21.2-5.8s10.1 13.7 5.8 21.2L294 250.8l-27.7 48.5c-1.5 2.6-.6 6 2.1 7.5s6 .6 7.5-2.1l27.7-48.5c4.2-7.4 13.7-10 21.2-5.8s10 13.7 5.8 21.2l-64.4 112.9c-5.3 9.4-12.5 17.5-21.2 24-.1 0-.1.1-.2.1-8 5.8-16.8 10.1-26.3 12.7m171.3-115.5-25.6 10.3-41.5 16.7c-2.8 1.1-4.2 4.3-3 7.2.8 2.1 2.9 3.4 5.1 3.4.7 0 1.4-.1 2-.4l41.5-16.7c7.9-3.2 17 .6 20.2 8.6s-.6 17-8.6 20.2l-110.8 44.6c2.4-3.1 4.5-6.4 6.5-9.8l53-92.9 49.6-20c7.9-3.2 17 .7 20.2 8.6 3.3 7.9-.6 17-8.6 20.2"></path><path d="M333.3 143.6c2.5 1.7 5.9 1.1 7.7-1.3l25.3-36.1c1.8-2.4 1.3-5.9-1.2-7.7-2.4-1.8-5.9-1.3-7.7 1.2 0 .1-.1.1-.1.2l-25.3 36c-1.8 2.4-1.2 5.9 1.3 7.7-.1 0 0 0 0 0m21.2 23.9c.6 2.4 2.8 4.1 5.3 4.1.5 0 .9-.1 1.4-.2l42.7-10.8c2.9-.7 4.7-3.7 4-6.7-.7-2.9-3.7-4.7-6.7-4l-42.7 10.8c-3 .9-4.7 3.8-4 6.8m-56.9-40.7c.3 2.8 2.6 5 5.5 5h.5c3-.3 5.2-3 4.9-6L304.2 82c-.3-3-3-5.2-6-4.9s-5.2 3-4.9 6z" class="dynamic-clapping_svg__wave"></path></svg><span class="clap-button__label"></span><span class="clap-button__adder" aria-hidden="true">+0</span></button></div></div></section><section class="container container--grid article-categories"><div class="article-categories__inner"><h2 class="article-categories__title">Categories:</h2><ol class="article-categories__list"><li class="article-categories__list-item"><a class="article-categories__item-link" href="/articles/categories/gatsbyjs/"><abbr title="GatsbyJS">GatsbyJS</abbr></a></li><li class="article-categories__list-item"><a class="article-categories__item-link" href="/articles/categories/node/">Node</a></li><li class="article-categories__list-item"><a class="article-categories__item-link" href="/articles/categories/development/">Development</a></li><li class="article-categories__list-item"><a class="article-categories__item-link" href="/articles/categories/graphql/"><abbr title="Graph Query Language">GraphQL</abbr></a></li></ol></div></section><div class="featured-articles featured-articles--page-panel" role="region" aria-labelledby="featured-articles-title" aria-live="polite"><div class="container featured-articles__container"><h2 id="featured-articles-title" class="featured-articles__title">More articles</h2><div class="featured-articles__button-wrap"><a class="button button--dark-primary button--centered button--animated featured-articles__button" tabindex="0" aria-label="View all" href="/articles/"><span class="button__inner">View all</span></a></div><ol class="featured-articles__grid" role="list" aria-label="Featured Articles Carousel"><li class="featured-articles__grid-item" tabindex="-1" role="listitem"><article class="article-grid-item" aria-label="HTML Video and the `preload` Attribute"><a title="HTML Video and the Preload Attribute" class="article-grid-item__link" href="/articles/html-video-and-the-preload-attribute/"><figure class="article-grid-item__image-wrap" style="background: rgb(232, 232, 232);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#e8e8e8;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/f5584201b878f2bd1b0caa402646934c/9da9e/sony-mp90-cassette-grid.webp 376w,
/static/f5584201b878f2bd1b0caa402646934c/61ad1/sony-mp90-cassette-grid.webp 576w,
/static/f5584201b878f2bd1b0caa402646934c/13c89/sony-mp90-cassette-grid.webp 680w,
/static/f5584201b878f2bd1b0caa402646934c/6ee21/sony-mp90-cassette-grid.webp 768w,
/static/f5584201b878f2bd1b0caa402646934c/7e64f/sony-mp90-cassette-grid.webp 992w,
/static/f5584201b878f2bd1b0caa402646934c/fe183/sony-mp90-cassette-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/f5584201b878f2bd1b0caa402646934c/9480f/sony-mp90-cassette-grid.jpg" srcset="/static/f5584201b878f2bd1b0caa402646934c/34661/sony-mp90-cassette-grid.jpg 376w,
/static/f5584201b878f2bd1b0caa402646934c/1d875/sony-mp90-cassette-grid.jpg 576w,
/static/f5584201b878f2bd1b0caa402646934c/9480f/sony-mp90-cassette-grid.jpg 680w,
/static/f5584201b878f2bd1b0caa402646934c/40784/sony-mp90-cassette-grid.jpg 768w,
/static/f5584201b878f2bd1b0caa402646934c/f8bc6/sony-mp90-cassette-grid.jpg 992w,
/static/f5584201b878f2bd1b0caa402646934c/3bd4c/sony-mp90-cassette-grid.jpg 1030w" alt="HTML Video and the preload Attribute."></picture><noscript><picture><source type="image/webp" srcSet="/static/f5584201b878f2bd1b0caa402646934c/9da9e/sony-mp90-cassette-grid.webp 376w,
/static/f5584201b878f2bd1b0caa402646934c/61ad1/sony-mp90-cassette-grid.webp 576w,
/static/f5584201b878f2bd1b0caa402646934c/13c89/sony-mp90-cassette-grid.webp 680w,
/static/f5584201b878f2bd1b0caa402646934c/6ee21/sony-mp90-cassette-grid.webp 768w,
/static/f5584201b878f2bd1b0caa402646934c/7e64f/sony-mp90-cassette-grid.webp 992w,
/static/f5584201b878f2bd1b0caa402646934c/fe183/sony-mp90-cassette-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/f5584201b878f2bd1b0caa402646934c/9480f/sony-mp90-cassette-grid.jpg" srcSet="/static/f5584201b878f2bd1b0caa402646934c/34661/sony-mp90-cassette-grid.jpg 376w,
/static/f5584201b878f2bd1b0caa402646934c/1d875/sony-mp90-cassette-grid.jpg 576w,
/static/f5584201b878f2bd1b0caa402646934c/9480f/sony-mp90-cassette-grid.jpg 680w,
/static/f5584201b878f2bd1b0caa402646934c/40784/sony-mp90-cassette-grid.jpg 768w,
/static/f5584201b878f2bd1b0caa402646934c/f8bc6/sony-mp90-cassette-grid.jpg 992w,
/static/f5584201b878f2bd1b0caa402646934c/3bd4c/sony-mp90-cassette-grid.jpg 1030w" alt="HTML Video and the preload Attribute."/></picture></noscript></div><div class="article-grid-item__button"><span class="article-grid-item__button-label">Next article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">HTML Video and the preload Attribute.</figcaption></figure><time class="article-grid-item__date" title="Published on 29 March 2022; last updated on 27 February 2024." datetime="2022-03-29T00:00:00.000Z">29 March 2022</time><h3 class="article-grid-item__title"><abbr title="HyperText Markup Language">HTML</abbr> Video and the <code class="article-grid-item__title-code">preload</code> Attribute</h3></a></article></li><li class="featured-articles__grid-item" tabindex="-1" role="listitem"><article class="article-grid-item" aria-label="Adding static files to a GatsbyJS site"><a title="Adding Static Files to a GatsbyJS Site" class="article-grid-item__link" href="/articles/adding-static-files-to-a-gatsbyjs-site/"><figure class="article-grid-item__image-wrap" style="background: rgb(8, 8, 8);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#080808;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/87d0448691102ac39663e96b68622e4c/9da9e/records---grid.webp 376w,
/static/87d0448691102ac39663e96b68622e4c/61ad1/records---grid.webp 576w,
/static/87d0448691102ac39663e96b68622e4c/13c89/records---grid.webp 680w,
/static/87d0448691102ac39663e96b68622e4c/6ee21/records---grid.webp 768w,
/static/87d0448691102ac39663e96b68622e4c/7e64f/records---grid.webp 992w,
/static/87d0448691102ac39663e96b68622e4c/fe183/records---grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/87d0448691102ac39663e96b68622e4c/9480f/records---grid.jpg" srcset="/static/87d0448691102ac39663e96b68622e4c/34661/records---grid.jpg 376w,
/static/87d0448691102ac39663e96b68622e4c/1d875/records---grid.jpg 576w,
/static/87d0448691102ac39663e96b68622e4c/9480f/records---grid.jpg 680w,
/static/87d0448691102ac39663e96b68622e4c/40784/records---grid.jpg 768w,
/static/87d0448691102ac39663e96b68622e4c/f8bc6/records---grid.jpg 992w,
/static/87d0448691102ac39663e96b68622e4c/3bd4c/records---grid.jpg 1030w" alt="Adding Static Files to a GatsbyJS Site."></picture><noscript><picture><source type="image/webp" srcSet="/static/87d0448691102ac39663e96b68622e4c/9da9e/records---grid.webp 376w,
/static/87d0448691102ac39663e96b68622e4c/61ad1/records---grid.webp 576w,
/static/87d0448691102ac39663e96b68622e4c/13c89/records---grid.webp 680w,
/static/87d0448691102ac39663e96b68622e4c/6ee21/records---grid.webp 768w,
/static/87d0448691102ac39663e96b68622e4c/7e64f/records---grid.webp 992w,
/static/87d0448691102ac39663e96b68622e4c/fe183/records---grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/87d0448691102ac39663e96b68622e4c/9480f/records---grid.jpg" srcSet="/static/87d0448691102ac39663e96b68622e4c/34661/records---grid.jpg 376w,
/static/87d0448691102ac39663e96b68622e4c/1d875/records---grid.jpg 576w,
/static/87d0448691102ac39663e96b68622e4c/9480f/records---grid.jpg 680w,
/static/87d0448691102ac39663e96b68622e4c/40784/records---grid.jpg 768w,
/static/87d0448691102ac39663e96b68622e4c/f8bc6/records---grid.jpg 992w,
/static/87d0448691102ac39663e96b68622e4c/3bd4c/records---grid.jpg 1030w" alt="Adding Static Files to a GatsbyJS Site."/></picture></noscript></div><div class="article-grid-item__button"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">Adding Static Files to a GatsbyJS Site.</figcaption></figure><time class="article-grid-item__date" title="Published on 05 October 2020; last updated on 02 August 2024." datetime="2020-10-05T00:00:00.000Z">05 October 2020</time><h3 class="article-grid-item__title">Adding Static Files to a <abbr title="GatsbyJS">GatsbyJS</abbr> Site</h3></a></article></li><li class="featured-articles__grid-item" tabindex="-1" role="listitem"><article class="article-grid-item" aria-label="Using JavaScript to avoid orphans"><a title="Using JavaScript to Avoid Orphans" class="article-grid-item__link" href="/articles/using-javascript-to-avoid-orphans/"><figure class="article-grid-item__image-wrap" style="background: rgb(232, 232, 232);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#e8e8e8;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/21a1c87594e33d51058746e92bb1427a/9da9e/widows-grid.webp 376w,
/static/21a1c87594e33d51058746e92bb1427a/61ad1/widows-grid.webp 576w,
/static/21a1c87594e33d51058746e92bb1427a/13c89/widows-grid.webp 680w,
/static/21a1c87594e33d51058746e92bb1427a/6ee21/widows-grid.webp 768w,
/static/21a1c87594e33d51058746e92bb1427a/7e64f/widows-grid.webp 992w,
/static/21a1c87594e33d51058746e92bb1427a/fe183/widows-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/21a1c87594e33d51058746e92bb1427a/9480f/widows-grid.jpg" srcset="/static/21a1c87594e33d51058746e92bb1427a/34661/widows-grid.jpg 376w,
/static/21a1c87594e33d51058746e92bb1427a/1d875/widows-grid.jpg 576w,
/static/21a1c87594e33d51058746e92bb1427a/9480f/widows-grid.jpg 680w,
/static/21a1c87594e33d51058746e92bb1427a/40784/widows-grid.jpg 768w,
/static/21a1c87594e33d51058746e92bb1427a/f8bc6/widows-grid.jpg 992w,
/static/21a1c87594e33d51058746e92bb1427a/3bd4c/widows-grid.jpg 1030w" alt="Using JavaScript to Avoid Orphans."></picture><noscript><picture><source type="image/webp" srcSet="/static/21a1c87594e33d51058746e92bb1427a/9da9e/widows-grid.webp 376w,
/static/21a1c87594e33d51058746e92bb1427a/61ad1/widows-grid.webp 576w,
/static/21a1c87594e33d51058746e92bb1427a/13c89/widows-grid.webp 680w,
/static/21a1c87594e33d51058746e92bb1427a/6ee21/widows-grid.webp 768w,
/static/21a1c87594e33d51058746e92bb1427a/7e64f/widows-grid.webp 992w,
/static/21a1c87594e33d51058746e92bb1427a/fe183/widows-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/21a1c87594e33d51058746e92bb1427a/9480f/widows-grid.jpg" srcSet="/static/21a1c87594e33d51058746e92bb1427a/34661/widows-grid.jpg 376w,
/static/21a1c87594e33d51058746e92bb1427a/1d875/widows-grid.jpg 576w,
/static/21a1c87594e33d51058746e92bb1427a/9480f/widows-grid.jpg 680w,
/static/21a1c87594e33d51058746e92bb1427a/40784/widows-grid.jpg 768w,
/static/21a1c87594e33d51058746e92bb1427a/f8bc6/widows-grid.jpg 992w,
/static/21a1c87594e33d51058746e92bb1427a/3bd4c/widows-grid.jpg 1030w" alt="Using JavaScript to Avoid Orphans."/></picture></noscript></div><div class="article-grid-item__button"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">Using JavaScript to Avoid Orphans.</figcaption></figure><time class="article-grid-item__date" title="Published on 26 August 2020; last updated on 08 February 2024." datetime="2020-08-26T00:00:00.000Z">26 August 2020</time><h3 class="article-grid-item__title">Using JavaScript to Avoid Orphans</h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="Using JavaScript to solve the LeetCode 3Sum Closest Problem"><a title="Using JavaScript to Solve the 3Sum Closest Problem" class="article-grid-item__link" href="/articles/using-javascript-to-solve-the-3sum-closest-problem/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(168, 40, 24);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#a82818;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/a51b5300c05777ac8bbec5be358f7c62/9da9e/3sum-closest-grid.webp 376w,
/static/a51b5300c05777ac8bbec5be358f7c62/61ad1/3sum-closest-grid.webp 576w,
/static/a51b5300c05777ac8bbec5be358f7c62/13c89/3sum-closest-grid.webp 680w,
/static/a51b5300c05777ac8bbec5be358f7c62/6ee21/3sum-closest-grid.webp 768w,
/static/a51b5300c05777ac8bbec5be358f7c62/7e64f/3sum-closest-grid.webp 992w,
/static/a51b5300c05777ac8bbec5be358f7c62/fe183/3sum-closest-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/a51b5300c05777ac8bbec5be358f7c62/33b79/3sum-closest-grid.png" srcset="/static/a51b5300c05777ac8bbec5be358f7c62/40b67/3sum-closest-grid.png 376w,
/static/a51b5300c05777ac8bbec5be358f7c62/c09d7/3sum-closest-grid.png 576w,
/static/a51b5300c05777ac8bbec5be358f7c62/33b79/3sum-closest-grid.png 680w,
/static/a51b5300c05777ac8bbec5be358f7c62/fc160/3sum-closest-grid.png 768w,
/static/a51b5300c05777ac8bbec5be358f7c62/38cf0/3sum-closest-grid.png 992w,
/static/a51b5300c05777ac8bbec5be358f7c62/bf3de/3sum-closest-grid.png 1030w" alt="Using JavaScript to Solve the LeetCode 3Sum Closest Problem."></picture><noscript><picture><source type="image/webp" srcSet="/static/a51b5300c05777ac8bbec5be358f7c62/9da9e/3sum-closest-grid.webp 376w,
/static/a51b5300c05777ac8bbec5be358f7c62/61ad1/3sum-closest-grid.webp 576w,
/static/a51b5300c05777ac8bbec5be358f7c62/13c89/3sum-closest-grid.webp 680w,
/static/a51b5300c05777ac8bbec5be358f7c62/6ee21/3sum-closest-grid.webp 768w,
/static/a51b5300c05777ac8bbec5be358f7c62/7e64f/3sum-closest-grid.webp 992w,
/static/a51b5300c05777ac8bbec5be358f7c62/fe183/3sum-closest-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/a51b5300c05777ac8bbec5be358f7c62/33b79/3sum-closest-grid.png" srcSet="/static/a51b5300c05777ac8bbec5be358f7c62/40b67/3sum-closest-grid.png 376w,
/static/a51b5300c05777ac8bbec5be358f7c62/c09d7/3sum-closest-grid.png 576w,
/static/a51b5300c05777ac8bbec5be358f7c62/33b79/3sum-closest-grid.png 680w,
/static/a51b5300c05777ac8bbec5be358f7c62/fc160/3sum-closest-grid.png 768w,
/static/a51b5300c05777ac8bbec5be358f7c62/38cf0/3sum-closest-grid.png 992w,
/static/a51b5300c05777ac8bbec5be358f7c62/bf3de/3sum-closest-grid.png 1030w" alt="Using JavaScript to Solve the LeetCode 3Sum Closest Problem."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">Using JavaScript to Solve the LeetCode 3Sum Closest Problem.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 09 September 2023; last updated on 01 June 2024." datetime="2023-09-09T00:00:00.000Z">09 September 2023</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds">Using JavaScript to Solve the LeetCode 3Sum Closest Problem</h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="Using the Modulo Operator in JavaScript"><a title="Using the Modulo Operator in JavaScript" class="article-grid-item__link" href="/articles/using-the-modulo-operator-in-javascript/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(120, 168, 152);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#78a898;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/0460455ad83eb257199ba447bb4b0761/9da9e/modulo-grid.webp 376w,
/static/0460455ad83eb257199ba447bb4b0761/61ad1/modulo-grid.webp 576w,
/static/0460455ad83eb257199ba447bb4b0761/13c89/modulo-grid.webp 680w,
/static/0460455ad83eb257199ba447bb4b0761/6ee21/modulo-grid.webp 768w,
/static/0460455ad83eb257199ba447bb4b0761/7e64f/modulo-grid.webp 992w,
/static/0460455ad83eb257199ba447bb4b0761/fe183/modulo-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/0460455ad83eb257199ba447bb4b0761/9480f/modulo-grid.jpg" srcset="/static/0460455ad83eb257199ba447bb4b0761/34661/modulo-grid.jpg 376w,
/static/0460455ad83eb257199ba447bb4b0761/1d875/modulo-grid.jpg 576w,
/static/0460455ad83eb257199ba447bb4b0761/9480f/modulo-grid.jpg 680w,
/static/0460455ad83eb257199ba447bb4b0761/40784/modulo-grid.jpg 768w,
/static/0460455ad83eb257199ba447bb4b0761/f8bc6/modulo-grid.jpg 992w,
/static/0460455ad83eb257199ba447bb4b0761/3bd4c/modulo-grid.jpg 1030w" alt="Using the Modulo Operator in JavaScript."></picture><noscript><picture><source type="image/webp" srcSet="/static/0460455ad83eb257199ba447bb4b0761/9da9e/modulo-grid.webp 376w,
/static/0460455ad83eb257199ba447bb4b0761/61ad1/modulo-grid.webp 576w,
/static/0460455ad83eb257199ba447bb4b0761/13c89/modulo-grid.webp 680w,
/static/0460455ad83eb257199ba447bb4b0761/6ee21/modulo-grid.webp 768w,
/static/0460455ad83eb257199ba447bb4b0761/7e64f/modulo-grid.webp 992w,
/static/0460455ad83eb257199ba447bb4b0761/fe183/modulo-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/0460455ad83eb257199ba447bb4b0761/9480f/modulo-grid.jpg" srcSet="/static/0460455ad83eb257199ba447bb4b0761/34661/modulo-grid.jpg 376w,
/static/0460455ad83eb257199ba447bb4b0761/1d875/modulo-grid.jpg 576w,
/static/0460455ad83eb257199ba447bb4b0761/9480f/modulo-grid.jpg 680w,
/static/0460455ad83eb257199ba447bb4b0761/40784/modulo-grid.jpg 768w,
/static/0460455ad83eb257199ba447bb4b0761/f8bc6/modulo-grid.jpg 992w,
/static/0460455ad83eb257199ba447bb4b0761/3bd4c/modulo-grid.jpg 1030w" alt="Using the Modulo Operator in JavaScript."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">Using the Modulo Operator in JavaScript.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 07 September 2022; last updated on 27 February 2024." datetime="2022-09-07T00:00:00.000Z">07 September 2022</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds">Using the Modulo Operator in JavaScript</h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="The JavaScript `map()` Method"><a title="The JavaScript map() Method" class="article-grid-item__link" href="/articles/the-javascript-map-method/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(184, 184, 184);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#b8b8b8;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/ed9105e531b916e3265844771685ae3a/9da9e/map-grid.webp 376w,
/static/ed9105e531b916e3265844771685ae3a/61ad1/map-grid.webp 576w,
/static/ed9105e531b916e3265844771685ae3a/13c89/map-grid.webp 680w,
/static/ed9105e531b916e3265844771685ae3a/6ee21/map-grid.webp 768w,
/static/ed9105e531b916e3265844771685ae3a/7e64f/map-grid.webp 992w,
/static/ed9105e531b916e3265844771685ae3a/fe183/map-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/ed9105e531b916e3265844771685ae3a/9480f/map-grid.jpg" srcset="/static/ed9105e531b916e3265844771685ae3a/34661/map-grid.jpg 376w,
/static/ed9105e531b916e3265844771685ae3a/1d875/map-grid.jpg 576w,
/static/ed9105e531b916e3265844771685ae3a/9480f/map-grid.jpg 680w,
/static/ed9105e531b916e3265844771685ae3a/40784/map-grid.jpg 768w,
/static/ed9105e531b916e3265844771685ae3a/f8bc6/map-grid.jpg 992w,
/static/ed9105e531b916e3265844771685ae3a/3bd4c/map-grid.jpg 1030w" alt="The JavaScript map() Method."></picture><noscript><picture><source type="image/webp" srcSet="/static/ed9105e531b916e3265844771685ae3a/9da9e/map-grid.webp 376w,
/static/ed9105e531b916e3265844771685ae3a/61ad1/map-grid.webp 576w,
/static/ed9105e531b916e3265844771685ae3a/13c89/map-grid.webp 680w,
/static/ed9105e531b916e3265844771685ae3a/6ee21/map-grid.webp 768w,
/static/ed9105e531b916e3265844771685ae3a/7e64f/map-grid.webp 992w,
/static/ed9105e531b916e3265844771685ae3a/fe183/map-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/ed9105e531b916e3265844771685ae3a/9480f/map-grid.jpg" srcSet="/static/ed9105e531b916e3265844771685ae3a/34661/map-grid.jpg 376w,
/static/ed9105e531b916e3265844771685ae3a/1d875/map-grid.jpg 576w,
/static/ed9105e531b916e3265844771685ae3a/9480f/map-grid.jpg 680w,
/static/ed9105e531b916e3265844771685ae3a/40784/map-grid.jpg 768w,
/static/ed9105e531b916e3265844771685ae3a/f8bc6/map-grid.jpg 992w,
/static/ed9105e531b916e3265844771685ae3a/3bd4c/map-grid.jpg 1030w" alt="The JavaScript map() Method."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">The JavaScript map() Method.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 21 October 2024; last updated on 15 May 2024." datetime="2024-10-21T00:00:00.000Z">21 October 2024</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds">The JavaScript <code class="article-grid-item__title-code">map()</code> Method</h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="LeetCode Container with Most Water: The Two-Pointer Solution"><a title="Container with Most Water: The Two‑Pointer Solution" class="article-grid-item__link" href="/articles/container-with-most-water-the-two-pointer-solution/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(8, 24, 40);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#081828;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/8b9920b1a2c5012b47e405930ec9f678/9da9e/containers-of-water-grid.webp 376w,
/static/8b9920b1a2c5012b47e405930ec9f678/61ad1/containers-of-water-grid.webp 576w,
/static/8b9920b1a2c5012b47e405930ec9f678/13c89/containers-of-water-grid.webp 680w,
/static/8b9920b1a2c5012b47e405930ec9f678/6ee21/containers-of-water-grid.webp 768w,
/static/8b9920b1a2c5012b47e405930ec9f678/7e64f/containers-of-water-grid.webp 992w,
/static/8b9920b1a2c5012b47e405930ec9f678/fe183/containers-of-water-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/8b9920b1a2c5012b47e405930ec9f678/9480f/containers-of-water-grid.jpg" srcset="/static/8b9920b1a2c5012b47e405930ec9f678/34661/containers-of-water-grid.jpg 376w,
/static/8b9920b1a2c5012b47e405930ec9f678/1d875/containers-of-water-grid.jpg 576w,
/static/8b9920b1a2c5012b47e405930ec9f678/9480f/containers-of-water-grid.jpg 680w,
/static/8b9920b1a2c5012b47e405930ec9f678/40784/containers-of-water-grid.jpg 768w,
/static/8b9920b1a2c5012b47e405930ec9f678/f8bc6/containers-of-water-grid.jpg 992w,
/static/8b9920b1a2c5012b47e405930ec9f678/3bd4c/containers-of-water-grid.jpg 1030w" alt="LeetCode Container with Most Water: The Two‑Pointer Solution."></picture><noscript><picture><source type="image/webp" srcSet="/static/8b9920b1a2c5012b47e405930ec9f678/9da9e/containers-of-water-grid.webp 376w,
/static/8b9920b1a2c5012b47e405930ec9f678/61ad1/containers-of-water-grid.webp 576w,
/static/8b9920b1a2c5012b47e405930ec9f678/13c89/containers-of-water-grid.webp 680w,
/static/8b9920b1a2c5012b47e405930ec9f678/6ee21/containers-of-water-grid.webp 768w,
/static/8b9920b1a2c5012b47e405930ec9f678/7e64f/containers-of-water-grid.webp 992w,
/static/8b9920b1a2c5012b47e405930ec9f678/fe183/containers-of-water-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/8b9920b1a2c5012b47e405930ec9f678/9480f/containers-of-water-grid.jpg" srcSet="/static/8b9920b1a2c5012b47e405930ec9f678/34661/containers-of-water-grid.jpg 376w,
/static/8b9920b1a2c5012b47e405930ec9f678/1d875/containers-of-water-grid.jpg 576w,
/static/8b9920b1a2c5012b47e405930ec9f678/9480f/containers-of-water-grid.jpg 680w,
/static/8b9920b1a2c5012b47e405930ec9f678/40784/containers-of-water-grid.jpg 768w,
/static/8b9920b1a2c5012b47e405930ec9f678/f8bc6/containers-of-water-grid.jpg 992w,
/static/8b9920b1a2c5012b47e405930ec9f678/3bd4c/containers-of-water-grid.jpg 1030w" alt="LeetCode Container with Most Water: The Two‑Pointer Solution."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">LeetCode Container with Most Water: The Two‑Pointer Solution.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 18 November 2023; last updated on 01 June 2024." datetime="2023-11-18T00:00:00.000Z">18 November 2023</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds">LeetCode Container with Most Water: The Two‑Pointer Solution</h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="ReferenceError: window is not defined in GatsbyJS"><a title="ReferenceError: Window is Not Defined in GatsbyJS" class="article-grid-item__link" href="/articles/referenceerror-window-is-not-defined-in-gatsbyjs/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(8, 8, 8);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#080808;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/457231bf9bbba5ecdecb7163f1193b0f/9da9e/window-grid.webp 376w,
/static/457231bf9bbba5ecdecb7163f1193b0f/61ad1/window-grid.webp 576w,
/static/457231bf9bbba5ecdecb7163f1193b0f/13c89/window-grid.webp 680w,
/static/457231bf9bbba5ecdecb7163f1193b0f/6ee21/window-grid.webp 768w,
/static/457231bf9bbba5ecdecb7163f1193b0f/7e64f/window-grid.webp 992w,
/static/457231bf9bbba5ecdecb7163f1193b0f/fe183/window-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/457231bf9bbba5ecdecb7163f1193b0f/9480f/window-grid.jpg" srcset="/static/457231bf9bbba5ecdecb7163f1193b0f/34661/window-grid.jpg 376w,
/static/457231bf9bbba5ecdecb7163f1193b0f/1d875/window-grid.jpg 576w,
/static/457231bf9bbba5ecdecb7163f1193b0f/9480f/window-grid.jpg 680w,
/static/457231bf9bbba5ecdecb7163f1193b0f/40784/window-grid.jpg 768w,
/static/457231bf9bbba5ecdecb7163f1193b0f/f8bc6/window-grid.jpg 992w,
/static/457231bf9bbba5ecdecb7163f1193b0f/3bd4c/window-grid.jpg 1030w" alt="ReferenceError: Window is Not Defined in GatsbyJS."></picture><noscript><picture><source type="image/webp" srcSet="/static/457231bf9bbba5ecdecb7163f1193b0f/9da9e/window-grid.webp 376w,
/static/457231bf9bbba5ecdecb7163f1193b0f/61ad1/window-grid.webp 576w,
/static/457231bf9bbba5ecdecb7163f1193b0f/13c89/window-grid.webp 680w,
/static/457231bf9bbba5ecdecb7163f1193b0f/6ee21/window-grid.webp 768w,
/static/457231bf9bbba5ecdecb7163f1193b0f/7e64f/window-grid.webp 992w,
/static/457231bf9bbba5ecdecb7163f1193b0f/fe183/window-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/457231bf9bbba5ecdecb7163f1193b0f/9480f/window-grid.jpg" srcSet="/static/457231bf9bbba5ecdecb7163f1193b0f/34661/window-grid.jpg 376w,
/static/457231bf9bbba5ecdecb7163f1193b0f/1d875/window-grid.jpg 576w,
/static/457231bf9bbba5ecdecb7163f1193b0f/9480f/window-grid.jpg 680w,
/static/457231bf9bbba5ecdecb7163f1193b0f/40784/window-grid.jpg 768w,
/static/457231bf9bbba5ecdecb7163f1193b0f/f8bc6/window-grid.jpg 992w,
/static/457231bf9bbba5ecdecb7163f1193b0f/3bd4c/window-grid.jpg 1030w" alt="ReferenceError: Window is Not Defined in GatsbyJS."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">ReferenceError: Window is Not Defined in GatsbyJS.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 20 July 2021; last updated on 06 June 2024." datetime="2021-07-20T00:00:00.000Z">20 July 2021</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds">ReferenceError: Window is Not Defined in <abbr title="GatsbyJS">GatsbyJS</abbr></h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="Understanding the `:hover` Pseudo-Class in CSS"><a title="Understanding the :hover Pseudo‑Class in CSS" class="article-grid-item__link" href="/articles/understanding-the-hover-pseudo-class-in-css/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(248, 232, 200);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8e8c8;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/3e5581c7ec2247a9eed4778373ee6c44/9da9e/hover-grid.webp 376w,
/static/3e5581c7ec2247a9eed4778373ee6c44/61ad1/hover-grid.webp 576w,
/static/3e5581c7ec2247a9eed4778373ee6c44/13c89/hover-grid.webp 680w,
/static/3e5581c7ec2247a9eed4778373ee6c44/6ee21/hover-grid.webp 768w,
/static/3e5581c7ec2247a9eed4778373ee6c44/7e64f/hover-grid.webp 992w,
/static/3e5581c7ec2247a9eed4778373ee6c44/fe183/hover-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/3e5581c7ec2247a9eed4778373ee6c44/9480f/hover-grid.jpg" srcset="/static/3e5581c7ec2247a9eed4778373ee6c44/34661/hover-grid.jpg 376w,
/static/3e5581c7ec2247a9eed4778373ee6c44/1d875/hover-grid.jpg 576w,
/static/3e5581c7ec2247a9eed4778373ee6c44/9480f/hover-grid.jpg 680w,
/static/3e5581c7ec2247a9eed4778373ee6c44/40784/hover-grid.jpg 768w,
/static/3e5581c7ec2247a9eed4778373ee6c44/f8bc6/hover-grid.jpg 992w,
/static/3e5581c7ec2247a9eed4778373ee6c44/3bd4c/hover-grid.jpg 1030w" alt="Understanding the :hover Pseudo‑Class in CSS."></picture><noscript><picture><source type="image/webp" srcSet="/static/3e5581c7ec2247a9eed4778373ee6c44/9da9e/hover-grid.webp 376w,
/static/3e5581c7ec2247a9eed4778373ee6c44/61ad1/hover-grid.webp 576w,
/static/3e5581c7ec2247a9eed4778373ee6c44/13c89/hover-grid.webp 680w,
/static/3e5581c7ec2247a9eed4778373ee6c44/6ee21/hover-grid.webp 768w,
/static/3e5581c7ec2247a9eed4778373ee6c44/7e64f/hover-grid.webp 992w,
/static/3e5581c7ec2247a9eed4778373ee6c44/fe183/hover-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/3e5581c7ec2247a9eed4778373ee6c44/9480f/hover-grid.jpg" srcSet="/static/3e5581c7ec2247a9eed4778373ee6c44/34661/hover-grid.jpg 376w,
/static/3e5581c7ec2247a9eed4778373ee6c44/1d875/hover-grid.jpg 576w,
/static/3e5581c7ec2247a9eed4778373ee6c44/9480f/hover-grid.jpg 680w,
/static/3e5581c7ec2247a9eed4778373ee6c44/40784/hover-grid.jpg 768w,
/static/3e5581c7ec2247a9eed4778373ee6c44/f8bc6/hover-grid.jpg 992w,
/static/3e5581c7ec2247a9eed4778373ee6c44/3bd4c/hover-grid.jpg 1030w" alt="Understanding the :hover Pseudo‑Class in CSS."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">Understanding the :hover Pseudo‑Class in CSS.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 03 March 2018; last updated on 01 November 2024." datetime="2018-03-03T00:00:00.000Z">03 March 2018</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds">Understanding the <code class="article-grid-item__title-code">:hover</code> Pseudo‑Class in <abbr title="Cascading Style Sheets">CSS</abbr></h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="Creating a discernible name for icon links"><a title="Creating a Discernible Name for Icon Links" class="article-grid-item__link" href="/articles/creating-a-discernible-name-for-icon-links/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(56, 56, 40);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#383828;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/16c8f1eb9418378696667b591dbc9917/9da9e/discerible-link-grid.webp 376w,
/static/16c8f1eb9418378696667b591dbc9917/61ad1/discerible-link-grid.webp 576w,
/static/16c8f1eb9418378696667b591dbc9917/13c89/discerible-link-grid.webp 680w,
/static/16c8f1eb9418378696667b591dbc9917/6ee21/discerible-link-grid.webp 768w,
/static/16c8f1eb9418378696667b591dbc9917/7e64f/discerible-link-grid.webp 992w,
/static/16c8f1eb9418378696667b591dbc9917/fe183/discerible-link-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/16c8f1eb9418378696667b591dbc9917/9480f/discerible-link-grid.jpg" srcset="/static/16c8f1eb9418378696667b591dbc9917/34661/discerible-link-grid.jpg 376w,
/static/16c8f1eb9418378696667b591dbc9917/1d875/discerible-link-grid.jpg 576w,
/static/16c8f1eb9418378696667b591dbc9917/9480f/discerible-link-grid.jpg 680w,
/static/16c8f1eb9418378696667b591dbc9917/40784/discerible-link-grid.jpg 768w,
/static/16c8f1eb9418378696667b591dbc9917/f8bc6/discerible-link-grid.jpg 992w,
/static/16c8f1eb9418378696667b591dbc9917/3bd4c/discerible-link-grid.jpg 1030w" alt="Creating a Discernible Name for Icon Links."></picture><noscript><picture><source type="image/webp" srcSet="/static/16c8f1eb9418378696667b591dbc9917/9da9e/discerible-link-grid.webp 376w,
/static/16c8f1eb9418378696667b591dbc9917/61ad1/discerible-link-grid.webp 576w,
/static/16c8f1eb9418378696667b591dbc9917/13c89/discerible-link-grid.webp 680w,
/static/16c8f1eb9418378696667b591dbc9917/6ee21/discerible-link-grid.webp 768w,
/static/16c8f1eb9418378696667b591dbc9917/7e64f/discerible-link-grid.webp 992w,
/static/16c8f1eb9418378696667b591dbc9917/fe183/discerible-link-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/16c8f1eb9418378696667b591dbc9917/9480f/discerible-link-grid.jpg" srcSet="/static/16c8f1eb9418378696667b591dbc9917/34661/discerible-link-grid.jpg 376w,
/static/16c8f1eb9418378696667b591dbc9917/1d875/discerible-link-grid.jpg 576w,
/static/16c8f1eb9418378696667b591dbc9917/9480f/discerible-link-grid.jpg 680w,
/static/16c8f1eb9418378696667b591dbc9917/40784/discerible-link-grid.jpg 768w,
/static/16c8f1eb9418378696667b591dbc9917/f8bc6/discerible-link-grid.jpg 992w,
/static/16c8f1eb9418378696667b591dbc9917/3bd4c/discerible-link-grid.jpg 1030w" alt="Creating a Discernible Name for Icon Links."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">Creating a Discernible Name for Icon Links.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 17 June 2020; last updated on 06 June 2024." datetime="2020-06-17T00:00:00.000Z">17 June 2020</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds">Creating a Discernible Name for Icon Links</h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="CSS focus styles for keyboard users only"><a title="CSS Focus Styles for Keyboard Users Only" class="article-grid-item__link" href="/articles/css-focus-styles-for-keyboard-users-only/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(72, 40, 24);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#482818;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/98c3c7c7571926df20b19c279aa6b818/9da9e/keyboard-grid.webp 376w,
/static/98c3c7c7571926df20b19c279aa6b818/61ad1/keyboard-grid.webp 576w,
/static/98c3c7c7571926df20b19c279aa6b818/13c89/keyboard-grid.webp 680w,
/static/98c3c7c7571926df20b19c279aa6b818/6ee21/keyboard-grid.webp 768w,
/static/98c3c7c7571926df20b19c279aa6b818/7e64f/keyboard-grid.webp 992w,
/static/98c3c7c7571926df20b19c279aa6b818/fe183/keyboard-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/98c3c7c7571926df20b19c279aa6b818/9480f/keyboard-grid.jpg" srcset="/static/98c3c7c7571926df20b19c279aa6b818/34661/keyboard-grid.jpg 376w,
/static/98c3c7c7571926df20b19c279aa6b818/1d875/keyboard-grid.jpg 576w,
/static/98c3c7c7571926df20b19c279aa6b818/9480f/keyboard-grid.jpg 680w,
/static/98c3c7c7571926df20b19c279aa6b818/40784/keyboard-grid.jpg 768w,
/static/98c3c7c7571926df20b19c279aa6b818/f8bc6/keyboard-grid.jpg 992w,
/static/98c3c7c7571926df20b19c279aa6b818/3bd4c/keyboard-grid.jpg 1030w" alt="CSS Focus Styles for Keyboard Users Only."></picture><noscript><picture><source type="image/webp" srcSet="/static/98c3c7c7571926df20b19c279aa6b818/9da9e/keyboard-grid.webp 376w,
/static/98c3c7c7571926df20b19c279aa6b818/61ad1/keyboard-grid.webp 576w,
/static/98c3c7c7571926df20b19c279aa6b818/13c89/keyboard-grid.webp 680w,
/static/98c3c7c7571926df20b19c279aa6b818/6ee21/keyboard-grid.webp 768w,
/static/98c3c7c7571926df20b19c279aa6b818/7e64f/keyboard-grid.webp 992w,
/static/98c3c7c7571926df20b19c279aa6b818/fe183/keyboard-grid.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/98c3c7c7571926df20b19c279aa6b818/9480f/keyboard-grid.jpg" srcSet="/static/98c3c7c7571926df20b19c279aa6b818/34661/keyboard-grid.jpg 376w,
/static/98c3c7c7571926df20b19c279aa6b818/1d875/keyboard-grid.jpg 576w,
/static/98c3c7c7571926df20b19c279aa6b818/9480f/keyboard-grid.jpg 680w,
/static/98c3c7c7571926df20b19c279aa6b818/40784/keyboard-grid.jpg 768w,
/static/98c3c7c7571926df20b19c279aa6b818/f8bc6/keyboard-grid.jpg 992w,
/static/98c3c7c7571926df20b19c279aa6b818/3bd4c/keyboard-grid.jpg 1030w" alt="CSS Focus Styles for Keyboard Users Only."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">CSS Focus Styles for Keyboard Users Only.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 27 September 2020; last updated on 20 February 2024." datetime="2020-09-27T00:00:00.000Z">27 September 2020</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds"><abbr title="Cascading Style Sheets">CSS</abbr> Focus Styles for Keyboard Users Only</h3></a></article></li><li class="featured-articles__grid-item featured-articles__grid-item--out-of-bounds featured-articles__grid-item--out-of-bounds-right" tabindex="0" role="listitem"><article class="article-grid-item article-grid-item--out-of-bounds" aria-label="Setting CSS blur filter to zero on a retina screen"><a title="Setting CSS Blur Filter to Zero on a Retina Screen" class="article-grid-item__link" href="/articles/setting-css-blur-filter-to-zero-on-a-retina-screen/" tabindex="-1"><figure class="article-grid-item__image-wrap" style="background: rgb(248, 216, 168);"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained article-grid-item__image"><div style="max-width:680px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='426'%20width='680'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8d8a8;position:absolute;top:0;left:0;bottom:0;right:0;object-fit:cover"></div><picture><source type="image/webp" srcset="/static/24a016d64acb693cf7c622cb51350255/9da9e/grid_jpg.webp 376w,
/static/24a016d64acb693cf7c622cb51350255/61ad1/grid_jpg.webp 576w,
/static/24a016d64acb693cf7c622cb51350255/13c89/grid_jpg.webp 680w,
/static/24a016d64acb693cf7c622cb51350255/6ee21/grid_jpg.webp 768w,
/static/24a016d64acb693cf7c622cb51350255/7e64f/grid_jpg.webp 992w,
/static/24a016d64acb693cf7c622cb51350255/fe183/grid_jpg.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/24a016d64acb693cf7c622cb51350255/9480f/grid_jpg.jpg" srcset="/static/24a016d64acb693cf7c622cb51350255/34661/grid_jpg.jpg 376w,
/static/24a016d64acb693cf7c622cb51350255/1d875/grid_jpg.jpg 576w,
/static/24a016d64acb693cf7c622cb51350255/9480f/grid_jpg.jpg 680w,
/static/24a016d64acb693cf7c622cb51350255/40784/grid_jpg.jpg 768w,
/static/24a016d64acb693cf7c622cb51350255/f8bc6/grid_jpg.jpg 992w,
/static/24a016d64acb693cf7c622cb51350255/3bd4c/grid_jpg.jpg 1030w" alt="Setting CSS Blur Filter to Zero on a Retina Screen."></picture><noscript><picture><source type="image/webp" srcSet="/static/24a016d64acb693cf7c622cb51350255/9da9e/grid_jpg.webp 376w,
/static/24a016d64acb693cf7c622cb51350255/61ad1/grid_jpg.webp 576w,
/static/24a016d64acb693cf7c622cb51350255/13c89/grid_jpg.webp 680w,
/static/24a016d64acb693cf7c622cb51350255/6ee21/grid_jpg.webp 768w,
/static/24a016d64acb693cf7c622cb51350255/7e64f/grid_jpg.webp 992w,
/static/24a016d64acb693cf7c622cb51350255/fe183/grid_jpg.webp 1030w" sizes="(min-width: 680px) 680px, 100vw"/><img width="680" height="426" data-main-image="" style="object-fit:cover;opacity:0" sizes="(min-width: 680px) 680px, 100vw" decoding="async" loading="lazy" src="/static/24a016d64acb693cf7c622cb51350255/9480f/grid_jpg.jpg" srcSet="/static/24a016d64acb693cf7c622cb51350255/34661/grid_jpg.jpg 376w,
/static/24a016d64acb693cf7c622cb51350255/1d875/grid_jpg.jpg 576w,
/static/24a016d64acb693cf7c622cb51350255/9480f/grid_jpg.jpg 680w,
/static/24a016d64acb693cf7c622cb51350255/40784/grid_jpg.jpg 768w,
/static/24a016d64acb693cf7c622cb51350255/f8bc6/grid_jpg.jpg 992w,
/static/24a016d64acb693cf7c622cb51350255/3bd4c/grid_jpg.jpg 1030w" alt="Setting CSS Blur Filter to Zero on a Retina Screen."/></picture></noscript></div><div class="article-grid-item__button article-grid-item__button--out-of-bounds"><span class="article-grid-item__button-label">Read article</span><span class="article-grid-item__button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="article-grid-item__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></span></div><figcaption class="article-grid-item__image-caption">Setting CSS Blur Filter to Zero on a Retina Screen.</figcaption></figure><time class="article-grid-item__date article-grid-item__date--out-of-bounds" title="Published on 21 January 2014; last updated on 13 February 2024." datetime="2014-01-21T00:00:00.000Z">21 January 2014</time><h3 class="article-grid-item__title article-grid-item__title--out-of-bounds">Setting <abbr title="Cascading Style Sheets">CSS</abbr> Blur Filter to Zero on a Retina Screen</h3></a></article></li></ol></div></div></main><aside class="quotes-carousel"><div class="container container--grid quotes-carousel__inner"><button type="button" class="quotes-carousel__button quotes-carousel__button--backwards" aria-label="Previous quote" tabindex="0"></button><ol class="quotes-carousel__stage"><li class="quotes-carousel__item quotes-carousel__item--active" aria-hidden="false"><blockquote class="quote" cite="https://www.linkedin.com/in/simon-h/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh was great to work with, solving problems without any input and contributing to the project way beyond what was expected. I'd happily work with him again and would easily recommend his talent to <span style="white-space: nowrap;">everyone!”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Simon Hunt </strong><strong class="quote__position">Co-Founder</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/daniel-franks-b176464a/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is enthusiastic and enjoys getting work completed. His opinion on how we have developed features has been key to our success this financial year. He is fun to work with, always vocal and the dynamic he brought has driven us to deliver better quality features faster <span style="white-space: nowrap;">than before.”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Daniel Franks </strong><strong class="quote__position">Product Owner</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/andy-howell-51952451/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>If you're seeking to elevate the visual appeal of your design and translate it into an exceptional user interface, John Kavanagh is the ideal professional for the job. With his outstanding skills as a <abbr title="User Interface">UI</abbr> developer, he consistently delivers remarkable work with remarkable efficiency. John's contributions make him a valuable addition to any front‑end team.”</p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Andy Howell </strong><strong class="quote__position">Technical Lead</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/genedarocha/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is an exceptional programmer who consistently delivered high‑quality work at Selfridges. He possesses exceptional front‑end development skills and has a remarkable ability to tackle complex problems with creative and effective solutions.</p><p>What sets John apart is his strong work ethic and dedication to delivering results. He is a reliable and proactive team player, willing to go the extra mile to ensure project success. I was particularly impressed with his ability to resolve issues and make the explanations simple and succinct. He communicates effectively, collaborates seamlessly with team members, and approaches challenges with a positive and solution‑oriented mindset.”</p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Gene Da Rocha </strong><strong class="quote__position">Generative AI Engineer</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/alexharmsworth/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>I was lucky enough to work with John Kavanagh at Selfridges on the CX Team for the better part of a year. Throughout that time John's expertise and insight were invaluable in helping get projects started and over the finish line. He is a very approachable, diligent, and good‑humoured Front End Developer and I hope to work with him <span style="white-space: nowrap;">again soon!”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Alex Harmsworth </strong><strong class="quote__position">Front End Developer</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/clive-evans-2a1b9b31/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>Delighted to write a few words of sincere praise for John Kavanagh's excellent and exciting work and help in launching our new film production company. I plan to contact him again shortly about another, completely different project, as I do not think anyone could handle <span style="white-space: nowrap;">it better!”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Clive Evans </strong><strong class="quote__position">Director & Producer</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/adam-millington-41512623/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is a fantastic developer with all the skills one would want in a lead developer. He's done a superb job on all tasks and has been a great resource within the company. Exceptionally knowledgeable, self‑motivated, and a great team player. I would certainly work with <span style="white-space: nowrap;">John again!”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Adam Millington </strong><strong class="quote__position">Front-end Developer</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/howell-lee-5bb407127/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh was always articulate, willing to speak his mind, helpful and always did an amazing job ‑ he clearly takes immense pride his in work (and rightly so!). His attention to detail and perfectionist attitude helped produce a product that we could all be <span style="white-space: nowrap;">proud of.”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Howell Lee </strong><strong class="quote__position">Head of Business Analysis</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/metheridge/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is one of the most open‑minded developers I have ever worked with. His appreciation of great creative work, his enthusiasm and 'anything is possible' attitude is always a breath of fresh air. He is always super efficient and effective, combining a great work ethic with immense talent.”</p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Mike Etheridge </strong><strong class="quote__position">Creative Direction + Design</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/%F0%9F%91%A8%F0%9F%8F%BE%E2%80%8D%F0%9F%92%BB-menelik-williams-51556427/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is a passionate and highly skilled developer with a wonderful ability to calmly concede downward business pressures whilst pragmatically delivering the project <span style="white-space: nowrap;">at hand.</span></p><p>John is never phased by project management/requirement issues as are common in these environments, instead, he always finds a way to deliver value to both the end consumer and the business. It's not always easy to remain level‑headed and calm on high‑pressure projects but John's good nature and professionalism invariably remain infallible. It's an absolute pleasure working <span style="white-space: nowrap;">with him.”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Menelik Williams </strong><strong class="quote__position">Lead Full Stack Developer</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/markburchwebdev/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is an incredible <abbr title="User Interface">UI</abbr> developer, mentor and passionate lead developer. </p><p>I've been incredibly impressed by his technical understanding of <abbr title="User Experience">UX</abbr> and front‑end frameworks. Rapid turnaround times with quality output and attention to detail. Would highly recommend.”</p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Mark Burch </strong><strong class="quote__position">Technical Lead</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/phanos-panayiotou-715211162/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>I had the pleasure of working alongside John Kavanagh on a project focussing around building static webpages for a client, as well as improving their current webpages. John was an absolute pleasure to work with, he knows how to benefit the project and is able to get his point across without being offensive, this really helped him share his vast knowledge of JavaScript, <abbr title="GatsbyJS">Gatsby</abbr> and Contentful.</p><p>I can see John fitting into most environments as he has a great sense of humour, can read the room and has very advanced <span style="white-space: nowrap;">soft skills.”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Phanos Panayiotou </strong><strong class="quote__position">Product Developer</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/davidleemannheim/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is an 'above and beyond' front end developer. By that, a task could be assigned to John and he would complete it effectively, but more than that, if involved at the beginning of the process he would add so much more value to the project in way of ideas, solutions, process, search optimisation, user experience and <span style="white-space: nowrap;">so forth.”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">David Mannheim </strong><strong class="quote__position">Founder & CEO</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/dersanli/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh’s biggest strength is his ability to deal with conflicting priorities in high‑pressure situations. Along with his excellent development skills, John’s ability to manage difficult stakeholders and requirements is one of the key reasons that the projects he led were completed on time without too many <span style="white-space: nowrap;">problems.”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Devrim Ersanli </strong><strong class="quote__position">Senior Front-end Developer</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/langsamu/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is a highly intelligent and truly senior front‑end web developer, who's surprisingly well versed in the arcana of <abbr title="Cascading Style Sheets">CSS</abbr>. I enjoyed John's productivity and attitude, and I very much look forward to working together again.”</p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Samu Lang </strong><strong class="quote__position">Technical Director</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/clarissereyes/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is an incredibly talented and efficient developer with great expertise in <abbr title="GatsbyJS">Gatsby</abbr> and Contentful. He is incredibly personable and also always willing to share his knowledge. I also appreciated his ability to communicate openly and in a way that allowed me to find a way forward <span style="white-space: nowrap;">with him.</span></p><p>It was a pleasure to work with John and I would welcome another opportunity to work with <span style="white-space: nowrap;">him again!”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Clarisse Reyes </strong><strong class="quote__position">Senior Client Success Manager</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/jamiescott/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is a talented front end developer and was also a very fast learner. No matter what was thrown at John he always delivered in a timely manner and with a professional attitude. He is easy to work with and an inspirational person to <span style="white-space: nowrap;">be around.”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Jamie Scott </strong><strong class="quote__position">CTO & Co-Founder</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/christianduncan/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>I've worked with John Kavanagh several times, and can fully recommend his services as a front‑end web developer to anyone. He is a strong JavaScript programmer, and has thorough knowledge of cross‑platform <abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="Cascading Style Sheets">CSS</abbr> development. Always punctual, very friendly and importantly knows how to get the job done on time, maintaining a keen eye for professional detail.”</p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Christian Duncan </strong><strong class="quote__position">Technical Lead</strong></p></footer></blockquote></li><li class="quotes-carousel__item" aria-hidden="true"><blockquote class="quote" cite="https://www.linkedin.com/in/malinj/"><div class="quote__text"><span class="quote__quote-mark">“</span><p>John Kavanagh is one of the best front‑end developers I've had the pleasure of working with. Incredibly knowledgeable, great attention to detail – he understands design and why it's important to get it right. Always professional but with a great sense of fun, John would be an asset to any team <span style="white-space: nowrap;">and project.”</span></p></div><footer class="quote__footer"><p class="quote__info"><strong class="quote__name">Malin Johannesson </strong><strong class="quote__position">Lead UI Designer</strong></p></footer></blockquote></li></ol><button type="button" class="quotes-carousel__button quotes-carousel__button--forwards" aria-label="Next quote" tabindex="0"></button><span class="quotes-carousel__indicator"><span class="quotes-carousel__indicator-tick quotes-carousel__indicator-tick--animate"></span></span></div></aside><footer class="footer" id="footer" tabindex="-1"><div class="container container--grid footer__container"><ul class="footer__navigation"><li class="footer__navigation-item"><a class="footer__navigation-link" rel="home" href="/">Home</a></li><li class="footer__navigation-item"><a class="footer__navigation-link" href="/about/">About</a></li><li class="footer__navigation-item"><a class="footer__navigation-link" href="/services/">Services</a></li><li class="footer__navigation-item"><a class="footer__navigation-link" href="/projects/">Projects</a></li><li class="footer__navigation-item"><a class="footer__navigation-link footer__navigation-link--current" href="/articles/">Articles</a></li><li class="footer__navigation-item"><a class="footer__navigation-link" href="/timeline/">Timeline</a></li><li class="footer__navigation-item"><a class="footer__navigation-link" href="/availability/">Availability</a></li><li class="footer__navigation-item"><a class="footer__navigation-link" href="/contact/">Contact</a></li></ul><div class="footer__base-panel"><ol class="footer__contact"><li class="footer__contact-item"><a class="footer__contact-link" href="tel:+447736930110">+44 (0) 7736 930110</a></li><li class="footer__contact-item"><a class="footer__contact-link" href="mailto:[email protected]">[email protected]</a></li></ol><ol class="social-icons social-icons--small footer__social"><li class="social-icons__item"><a href="https://wa.me/447736930110" class="social-icons__link social-icons__link--whatsapp social-icons__link--small" aria-label="Send me a message on WhatsApp" target="_blank" rel="nofollow noopener noreferrer" title="Send me a message on WhatsApp. Opens in a new window."><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--outline"><path d="M256.61 104.6c-82.73 0-150.07 67.33-150.1 150.08a150.26 150.26 0 0 0 18.9 73l-19.92 72.74a5.5 5.5 0 0 0 6.7 6.77l74.57-19.56a150.5 150.5 0 0 0 69.85 17.23c82.73 0 150.06-67.33 150.09-150.09A150.11 150.11 0 0 0 256.61 104.6m-.06 289.29A139.34 139.34 0 0 1 190.08 377a5.52 5.52 0 0 0-4-.49l-67.44 17.69 18-65.74a5.56 5.56 0 0 0-.54-4.2 139.1 139.1 0 0 1-18.57-69.53c0-76.7 62.43-139.09 139.1-139.09A139.11 139.11 0 0 1 395.7 254.79c-.03 76.7-62.43 139.1-139.15 139.1"></path><path d="m334.46 284.3-2.13-1c-.23-.12-23.44-11.65-28-13.31-3.33-1.21-10.26-3.73-15.49 4.13-2.35 3.52-9.42 11.89-12.28 15.17a5 5 0 0 1-.38.39 8.2 8.2 0 0 1-1.72-.68c-.79-.4-1.73-.81-2.93-1.33a97.7 97.7 0 0 1-28.15-17.79c-10.94-9.75-18.5-21.77-21.25-26.48a2.6 2.6 0 0 1-.19-.37 15 15 0 0 1 1.08-1.15c1.41-1.4 2.91-3.23 4.36-5 .66-.81 1.32-1.61 2-2.36a27.9 27.9 0 0 0 4.22-6.73l.54-1.09c1.87-3.74 1.75-7.76-.34-11.95-.61-1.25-4.72-11.24-7.71-18.53-1.74-4.23-3.39-8.24-4.51-10.93-3.78-9.09-8.79-10.33-13.24-10.27h-.6c-2.65-.14-5.65-.15-8-.15a20.15 20.15 0 0 0-14.74 6.77l-.74.79c-4.42 4.71-14.75 15.74-14.75 36.41 0 19.38 12.2 37.77 17.49 44.84l.6.85c11.64 16.68 36.23 46.85 70.2 61.52a235 235 0 0 0 23.41 8.65 56.6 56.6 0 0 0 17.21 2.63 71 71 0 0 0 10.55-.84c8.38-1.25 27.09-10.39 31.47-22.68 2.92-8.18 4.57-19.29 1.88-23.77-1.69-2.76-4.41-4.04-7.86-5.74M330 310.11c-2.35 6.6-15.89 14.48-22.73 15.5a49.7 49.7 0 0 1-22.81-1.4 223 223 0 0 1-22.34-8.21c-31.47-13.59-54.57-42-65.54-57.71-.39-.57-.67-1-.86-1.21-3.58-4.78-15.25-21.66-15.25-38.19 0-16.32 7.95-24.81 11.77-28.88l.83-.9a9.24 9.24 0 0 1 6.66-3.23c2.19 0 5 0 7.41.13h2.14c.1 0 .88.56 2.1 3.48 1.11 2.68 2.75 6.67 4.48 10.87 4.54 11.06 7.35 17.87 8.06 19.28s.52 1.73.33 2.12-.4.8-.58 1.17a18 18 0 0 1-2.69 4.41c-.69.8-1.4 1.66-2.11 2.53-1.28 1.56-2.6 3.17-3.62 4.18-1.95 2-7.15 7.12-2.63 14.86 3 5.16 11.31 18.35 23.42 29.15a109.5 109.5 0 0 0 31.1 19.67c1 .44 1.87.81 2.39 1.07 2.28 1.15 9.24 4.63 15.3-2.3.1-.11 9.77-11.24 13.15-16.31a5 5 0 0 1 .43-.57 17 17 0 0 1 2.15.68c2.93 1.06 20.37 9.57 26.85 12.81l2.26 1.11c1 .49 2.25 1.08 2.95 1.5a39 39 0 0 1-2.62 14.39"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--hover"><path fill="#25d366" d="M362.79 148.62a149.2 149.2 0 0 0-106.18-44c-82.73 0-150.07 67.33-150.1 150.08a150.26 150.26 0 0 0 18.9 73l-19.92 72.74a5.5 5.5 0 0 0 6.7 6.77l74.57-19.56a150.5 150.5 0 0 0 69.85 17.23c82.73 0 150.06-67.33 150.09-150.09a149.2 149.2 0 0 0-43.91-106.17"></path><path fill="#fff" fill-rule="evenodd" d="M335.22 312c-3.34 9.38-19.38 17.94-27.1 19.09a55 55 0 0 1-25.29-1.59 230 230 0 0 1-22.89-8.5c-40.27-17.39-66.57-57.94-68.58-60.62S175 238.61 175 218.84s10.37-29.47 14.05-33.49a14.74 14.74 0 0 1 10.71-5c2.67 0 5.35 0 7.69.14s5.78-.94 9 6.89c3.35 8 11.38 27.81 12.38 29.81a7.38 7.38 0 0 1 .34 7c-1.34 2.67-2 4.35-4 6.69s-4.22 5.24-6 7c-2 2-4.1 4.17-1.76 8.19S227.77 263.3 239.7 274c15.3 13.63 28.3 17.86 32.3 19.87s6.36 1.68 8.7-1 10-11.73 12.71-15.74 5.36-3.35 9-2 23.42 11.05 27.43 13.06 6.69 3 7.7 4.69 1.03 9.7-2.32 19.12"></path></svg></a></li><li class="social-icons__item"><a href="https://www.linkedin.com/in/johnmkavanagh/" class="social-icons__link social-icons__link--linkedin social-icons__link--small" aria-label="Find me on LinkedIn" target="_blank" rel="nofollow noopener noreferrer" title="Find me on LinkedIn. Opens in a new window."><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--outline"><path d="M140.59 396.92h230.82c14.07 0 25.51-11.17 25.51-24.9V140c0-13.73-11.44-24.9-25.51-24.9H140.59c-14.07 0-25.51 11.17-25.51 24.9v232c0 13.75 11.44 24.92 25.51 24.92M126.08 140c0-7.67 6.51-13.9 14.51-13.9h230.82c8 0 14.51 6.23 14.51 13.9v232c0 7.67-6.51 13.9-14.51 13.9H140.59c-8 0-14.51-6.23-14.51-13.9Z"></path><path d="M202.68 219.5h-40.91a5.5 5.5 0 0 0-5.5 5.5v122.3a5.5 5.5 0 0 0 5.5 5.5h40.91a5.5 5.5 0 0 0 5.5-5.5V225a5.5 5.5 0 0 0-5.5-5.5m-5.5 122.3h-29.91V230.5h29.91ZM182 213.8h.26c16.6 0 28.65-11.2 28.65-26.63v-.12c-.35-15.61-12-26.51-28.37-26.51-16.6 0-28.65 11.2-28.65 26.63S165.67 213.8 182 213.8m.54-42.26c10.32 0 17.13 6.16 17.37 15.7 0 9.31-7.11 15.56-17.65 15.56H182c-10.07 0-17.11-6.42-17.11-15.63s7.05-15.63 17.61-15.63Zm38.88 179.64a5.48 5.48 0 0 0 3.9 1.62h40.91a5.5 5.5 0 0 0 5.5-5.5V279c0-3.69.31-6.32.94-7.85 1.39-3.44 5.73-11.43 15.89-11.43 4.17 0 15.23 0 15.23 22.16v65.42a5.5 5.5 0 0 0 5.5 5.5h40.9a5.5 5.5 0 0 0 5.5-5.5v-70.12c0-19.42-5-34.68-14.92-45.35-9.22-9.94-22.25-15.2-37.68-15.2-14.59 0-24.45 4.82-31.36 10.79V225a5.5 5.5 0 0 0-5.5-5.5h-40.91a5.5 5.5 0 0 0-5.5 5.76c.52 11.2 0 120.91 0 122a5.47 5.47 0 0 0 1.6 3.92m9.52-120.68h29.79v11.82a5.49 5.49 0 0 0 10.1 3c5.38-8.23 13.9-17.69 32.26-17.69 26.44 0 41.6 18.06 41.6 49.55v64.62h-29.9v-59.92c0-21.08-9.56-33.16-26.23-33.16-11.69 0-21.45 6.84-26.07 18.26-1.22 2.95-1.76 6.66-1.76 12v62.8h-29.89c.09-20.29.37-89.33.1-111.28"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--hover"><path fill="#0077b5" d="M371.41 115.08H140.59c-14.07 0-25.51 11.17-25.51 24.9V372c0 13.73 11.44 24.9 25.51 24.9h230.82c14.07 0 25.51-11.17 25.51-24.9V140c0-13.75-11.44-24.92-25.51-24.92"></path><path fill="#fff" d="M161.77 225h40.91v122.3h-40.91zm20.45-16.7H182c-13.73 0-22.61-9.39-22.61-21.13 0-12 9.15-21.13 23.14-21.13s22.61 9.13 22.88 21.13c-.04 11.74-8.92 21.13-23.19 21.13m167.97 139h-40.9v-65.43c0-16.44-5.92-27.65-20.73-27.65-11.3 0-18 7.56-21 14.86-1.08 2.62-1.34 6.27-1.34 9.92v68.3h-40.9s.53-110.82 0-122.3h40.91v17.32c5.43-8.34 15.16-20.19 36.86-20.19 26.92 0 47.1 17.48 47.1 55.05Z"></path></svg></a></li><li class="social-icons__item"><a href="https://x.com/johnkavanagh" class="social-icons__link social-icons__link--x social-icons__link--small" aria-label="Follow me on X (formerly Twitter)" target="_blank" rel="nofollow noopener noreferrer" title="Follow me on X (formerly Twitter). Opens in a new window."><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--outline"><path d="M377.87 372.21 277.39 237.62l91.84-97.35a5.5 5.5 0 0 0-8-7.55l-90.52 95.95-71.26-95.46A5.5 5.5 0 0 0 195 131h-56.5a5.5 5.5 0 0 0-4.41 8.79l97.38 130.44-95.75 101.5a5.5 5.5 0 0 0 .23 7.77 5.44 5.44 0 0 0 3.77 1.5 5.5 5.5 0 0 0 4-1.72l94.43-100.1 74.36 99.61A5.5 5.5 0 0 0 317 381h56.5a5.5 5.5 0 0 0 4.41-8.79ZM319.72 370 149.51 142h42.77l72.47 97.07a5.3 5.3 0 0 0 2.23 3L362.49 370Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--hover"><path d="M377.87 372.21 277.39 237.62l91.84-97.35a5.5 5.5 0 0 0-8-7.55l-90.52 95.95-71.26-95.46A5.5 5.5 0 0 0 195 131h-56.5a5.5 5.5 0 0 0-4.41 8.79l97.38 130.44-95.75 101.5a5.5 5.5 0 0 0 .23 7.77 5.44 5.44 0 0 0 3.77 1.5 5.5 5.5 0 0 0 4-1.72l94.43-100.1 74.36 99.61A5.5 5.5 0 0 0 317 381h56.5a5.5 5.5 0 0 0 4.41-8.79Z"></path></svg></a></li><li class="social-icons__item"><a href="https://app.yunojuno.com/p/johnkavanagh" class="social-icons__link social-icons__link--yunojuno social-icons__link--small" aria-label="Hire me via YunoJuno" target="_blank" rel="nofollow noopener noreferrer" title="Hire me via YunoJuno. Opens in a new window."><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--outline"><path d="M397.85 212.85 364.59 155a5.5 5.5 0 0 0-7.51-2l-62.23 35.78v-72.45a5.5 5.5 0 0 0-5.5-5.5h-66.7a5.5 5.5 0 0 0-5.5 5.5v72.45L154.92 153a5.5 5.5 0 0 0-7.51 2l-33.26 57.82a5.51 5.51 0 0 0 2 7.51l62 35.64-62 35.64a5.51 5.51 0 0 0-2 7.51L147.41 357a5.45 5.45 0 0 0 3.33 2.57 5.4 5.4 0 0 0 1.43.19 5.55 5.55 0 0 0 2.75-.73l62.23-35.79v72.46a5.5 5.5 0 0 0 5.5 5.5h66.7a5.5 5.5 0 0 0 5.5-5.5V278.42l101-58.06a5.51 5.51 0 0 0 2-7.51m-169.7-91h55.7v73.28l-27.85 16-27.85-16Zm-74 224.89-27.77-48.29 62.76-36.09 28 16.08v32.11Zm132.41-76.25a5.49 5.49 0 0 0-2.76 4.77v114.91h-55.7V275.24a5.49 5.49 0 0 0-2.76-4.77l-99-56.9 27.77-48.29 99.06 57a5.47 5.47 0 0 0 5.48 0l99.06-57 27.77 48.29Z"></path><path d="m395.79 291.62-48.56-27.53a5.51 5.51 0 0 0-5.46 0l-11.13 6.4a5.5 5.5 0 0 0-2.72 5.46l3 23.62-22.1 9.82a5.49 5.49 0 0 0-3.27 5v12.14a5.52 5.52 0 0 0 2.79 4.79L357.11 359a5.54 5.54 0 0 0 2.71.71 5.49 5.49 0 0 0 4.77-2.76l33.26-57.82a5.52 5.52 0 0 0-2.06-7.53Zm-38 55.13-41.23-23.37V318l22.58-10a5.52 5.52 0 0 0 3.22-5.72l-3.05-24 5.23-3 41 23.25Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--hover"><path fill="#4b4fc5" d="M397.85 212.85 364.59 155a5.5 5.5 0 0 0-7.51-2l-62.23 35.78v-72.45a5.5 5.5 0 0 0-5.5-5.5h-66.7a5.5 5.5 0 0 0-5.5 5.5v72.45L154.92 153a5.5 5.5 0 0 0-7.51 2l-33.26 57.82a5.51 5.51 0 0 0 2 7.51l62 35.64-62 35.64a5.51 5.51 0 0 0-2 7.51L147.41 357a5.45 5.45 0 0 0 3.33 2.57 5.4 5.4 0 0 0 1.43.19 5.55 5.55 0 0 0 2.75-.73l62.23-35.79v72.46a5.5 5.5 0 0 0 5.5 5.5h66.7a5.5 5.5 0 0 0 5.5-5.5V278.42l101-58.06a5.51 5.51 0 0 0 2-7.51"></path><path fill="#4b4fc5" d="M398.38 295a5.47 5.47 0 0 0-2.59-3.34l-48.56-27.53a5.51 5.51 0 0 0-5.46 0l-11.13 6.4a5.5 5.5 0 0 0-2.72 5.46l3 23.62-22.1 9.82a5.49 5.49 0 0 0-3.27 5v12.14a5.52 5.52 0 0 0 2.79 4.79L357.11 359a5.54 5.54 0 0 0 2.71.71 5.49 5.49 0 0 0 4.77-2.76l33.26-57.82a5.48 5.48 0 0 0 .53-4.13"></path></svg></a></li><li class="social-icons__item"><a href="https://wellfound.com/u/johnkavanagh" class="social-icons__link social-icons__link--wellfound social-icons__link--small" aria-label="View my profile on Wellfound (formerly AngelList)" target="_blank" rel="nofollow noopener noreferrer" title="View my profile on Wellfound (formerly AngelList). Opens in a new window."><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--outline"><path d="M347 173.5h-32a5.51 5.51 0 0 0-5.17 3.6l-36.61 100.06-36.38-100a5.49 5.49 0 0 0-5.17-3.62h-30.28a5.51 5.51 0 0 0-5.16 3.57L159.1 276.6l-35.6-99.46a5.49 5.49 0 0 0-5.17-3.64h-34a5.49 5.49 0 0 0-5.16 7.39l56.53 154a5.49 5.49 0 0 0 5.16 3.6h34.61a5.5 5.5 0 0 0 5.14-3.54l35.2-92.52 34.69 92.5a5.49 5.49 0 0 0 5.15 3.56h34.61a5.5 5.5 0 0 0 5.16-3.59l56.81-154a5.49 5.49 0 0 0-5.16-7.4Zm-60.65 154h-27L221 224.94a5.52 5.52 0 0 0-5.14-3.57 5.5 5.5 0 0 0-5.14 3.55l-39 102.58h-27l-52.49-143h22.28l39.36 110a5.51 5.51 0 0 0 5.14 3.65 5.49 5.49 0 0 0 5.15-3.58l41.07-110h22.61L268 295.08a5.5 5.5 0 0 0 5.16 3.63 5.52 5.52 0 0 0 5.17-3.61l40.49-110.6h20.28Zm117.18-154a29.68 29.68 0 1 0 29.68 29.68 29.71 29.71 0 0 0-29.68-29.68m0 48.36a18.68 18.68 0 1 1 18.68-18.68 18.7 18.7 0 0 1-18.68 18.68m0 57.28a29.68 29.68 0 1 0 29.68 29.68 29.71 29.71 0 0 0-29.68-29.68m0 48.36a18.68 18.68 0 1 1 18.68-18.68 18.7 18.7 0 0 1-18.68 18.68"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--hover"><path fill="#282828" d="M351.55 175.85a5.52 5.52 0 0 0-4.55-2.35h-32a5.51 5.51 0 0 0-5.17 3.6l-36.61 100.06-36.38-100a5.49 5.49 0 0 0-5.17-3.62h-30.28a5.51 5.51 0 0 0-5.16 3.57L159.1 276.6l-35.6-99.46a5.49 5.49 0 0 0-5.17-3.64h-34a5.49 5.49 0 0 0-5.16 7.39l56.53 154a5.49 5.49 0 0 0 5.16 3.6h34.61a5.5 5.5 0 0 0 5.14-3.54l35.2-92.52 34.69 92.5a5.49 5.49 0 0 0 5.15 3.56h34.61a5.5 5.5 0 0 0 5.16-3.59l56.81-154a5.5 5.5 0 0 0-.68-5.05"></path><path fill="#d94242" d="M403.53 232.86a29.68 29.68 0 1 0-29.68-29.68 29.72 29.72 0 0 0 29.68 29.68m0 46.28a29.68 29.68 0 1 0 29.68 29.68 29.71 29.71 0 0 0-29.68-29.68"></path></svg></a></li><li class="social-icons__item"><a href="https://www.gatsbyjs.com/showcase/johnkavanagh.co.uk" class="social-icons__link social-icons__link--gatsby social-icons__link--small" aria-label="See my work on the GatsbyJS Showcase" target="_blank" rel="nofollow noopener noreferrer" title="See my work on the GatsbyJS Showcase. Opens in a new window."><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--outline"><path d="M256 115.08c-77.71 0-140.92 63.21-140.92 140.92S178.29 396.92 256 396.92 396.92 333.71 396.92 256 333.71 115.08 256 115.08m0 270.84A129.92 129.92 0 1 1 385.92 256 130.06 130.06 0 0 1 256 385.92"></path><path d="M294.71 256a5.5 5.5 0 0 0 5.5 5.5h52.6a97.59 97.59 0 0 1-66.27 86.55C248.11 309.6 199 261.69 163.39 227.18A97.2 97.2 0 0 1 256 159a96.22 96.22 0 0 1 77.8 39.08 5.5 5.5 0 0 0 8.82-6.58A107.12 107.12 0 0 0 256 148a108.21 108.21 0 0 0-104.12 79.33 5.52 5.52 0 0 0 1.48 5.41c36.44 35.33 88.19 85.77 127.75 125.41a5.46 5.46 0 0 0 5.45 1.39A108.8 108.8 0 0 0 342 321.23 107.06 107.06 0 0 0 364 256a5.5 5.5 0 0 0-5.5-5.5h-58.29a5.5 5.5 0 0 0-5.5 5.5m-136.95 5a5.5 5.5 0 0 0-9.31 4.41 108 108 0 0 0 100.21 98.3h.37a5.5 5.5 0 0 0 3.88-9.4C227 328.58 195 297.18 157.76 261m4.48 19.7c26.67 26 50.43 49.26 70.91 69.52a98 98 0 0 1-70.91-69.52"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--hover"><circle cx="256" cy="256" r="140.92" fill="#542c85"></circle><path fill="#fff" d="M285 359.8a5.52 5.52 0 0 1-3.9-1.62c-39.56-39.64-91.31-90.08-127.75-125.41a5.52 5.52 0 0 1-1.48-5.41A108.21 108.21 0 0 1 256 148a107.12 107.12 0 0 1 86.62 43.5 5.5 5.5 0 0 1-8.82 6.58A96.22 96.22 0 0 0 256 159a97.2 97.2 0 0 0-92.61 68.15c35.61 34.54 84.72 82.45 123.15 120.9a97.59 97.59 0 0 0 66.27-86.55h-52.6a5.5 5.5 0 0 1 0-11h58.26A5.5 5.5 0 0 1 364 256a107.06 107.06 0 0 1-22 65.23 108.8 108.8 0 0 1-55.48 38.34 5.5 5.5 0 0 1-1.52.23m-36-1.57c-30-29.8-64.44-63.49-95.1-93.29a102.48 102.48 0 0 0 95.1 93.29"></path></svg></a></li><li class="social-icons__item"><a href="https://goo.gl/maps/j4UGSDYAXpXukVvf8" class="social-icons__link social-icons__link--googlemaps social-icons__link--small" aria-label="Find me on Google Maps" target="_blank" rel="nofollow noopener noreferrer" title="Find me on Google Maps. Opens in a new window."><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--outline"><path d="M256 115.08a101.52 101.52 0 0 0-101.41 101.4c0 54.25 93.12 173.3 97.09 178.34a5.49 5.49 0 0 0 8.64 0c4-5 97.09-124.09 97.09-178.34A101.52 101.52 0 0 0 256 115.08m0 267.32c-18.55-24.4-90.41-121.75-90.41-165.92a90.41 90.41 0 0 1 180.82 0c0 44.17-71.86 141.52-90.41 165.92"></path><path d="M256 176.76a39.72 39.72 0 1 0 39.72 39.72A39.77 39.77 0 0 0 256 176.76m0 68.44a28.72 28.72 0 1 1 28.72-28.72A28.75 28.75 0 0 1 256 245.2"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--hover"><path fill="#c2423b" d="M256 115.08a101.52 101.52 0 0 0-101.41 101.4c0 54.25 93.12 173.3 97.09 178.34a5.49 5.49 0 0 0 8.64 0c4-5 97.09-124.09 97.09-178.34A101.52 101.52 0 0 0 256 115.08m0 135.62a34.22 34.22 0 1 1 34.22-34.22A34.22 34.22 0 0 1 256 250.7"></path></svg></a></li><li class="social-icons__item"><a href="https://github.com/johnkavanagh" class="social-icons__link social-icons__link--github social-icons__link--small" aria-label="View my code on Github" target="_blank" rel="nofollow noopener noreferrer" title="View my code on Github. Opens in a new window."><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--outline"><path d="M218 407.42a7 7 0 0 0 .76.19 154 154 0 0 0 77.23-.69 7 7 0 0 0 .81-.22c65.09-17.91 113-77.61 113-148.31 0-84.8-69-153.79-153.79-153.79s-153.79 69-153.79 153.79c-.01 71.68 49.27 132.06 115.78 149.03m7.2-9.6v-7.2c0-15-.06-29.61-.08-33.43a5.49 5.49 0 0 0-6.68-5.34c-36.35 8-44.27-13.59-44.57-14.47 0-.1-.07-.19-.1-.29-5.15-13.29-11.94-20.1-16.05-23.23 8.64 3.2 13.47 11.75 13.51 11.84l.07.11c16.17 28.17 43.19 18.64 51.09 15.05a5.52 5.52 0 0 0 3.17-4.26c1.39-10.16 5.49-15.13 7.81-17.19a5.5 5.5 0 0 0-3-9.58c-31.69-3.66-64.08-14.91-64.08-70.51 0-14.48 4.77-27.13 14.18-37.59a5.51 5.51 0 0 0 1-5.75c-1-2.53-5.59-15.49.36-33.48 4.5.19 15.73 2.23 34.52 15.15a5.47 5.47 0 0 0 4.61.76 135.8 135.8 0 0 1 72.81 0 5.47 5.47 0 0 0 4.61-.76c18.74-12.9 29.87-15 34.48-15.12 5.94 18 1.4 30.92.37 33.45a5.5 5.5 0 0 0 1 5.75c9.4 10.43 14.16 23.07 14.16 37.59 0 55.63-32.47 66.8-64.23 70.39a5.51 5.51 0 0 0-3 9.6c2.53 2.22 8.4 9 8.4 24.34 0 8.16 0 32.89-.06 53.58a143 143 0 0 1-64.28.59ZM256 115.6c78.74 0 142.79 64.06 142.79 142.79 0 63.23-41.31 117-98.36 135.71 0-20 .06-42.7.06-50.45 0-9.35-2-17.77-5.62-24.35 30.06-5.15 64.46-20.95 64.46-80 0-16.18-5-30.45-14.84-42.45 2.19-7.18 4.87-22.32-2.59-41.51a5.52 5.52 0 0 0-3.43-3.23c-1.52-.5-15.46-4.19-44.27 15a146.94 146.94 0 0 0-73.81 0c-28.85-19.21-42.8-15.52-44.32-15a5.49 5.49 0 0 0-3.43 3.24c-7.45 19.19-4.77 34.32-2.58 41.5-9.86 12-14.85 26.3-14.85 42.45 0 59 34.36 74.87 64.36 80.09a43.8 43.8 0 0 0-4.44 12.61c-9.52 3.63-24.47 5.55-34.33-11.57-.79-1.42-10-17.38-27.6-18.64h-.32c-3 0-10.29.48-12.11 6.17-2 6.32 4.9 11.14 7.86 13.19a5 5 0 0 0 .7.42c.08 0 8.21 4.37 14.08 19.44A34.1 34.1 0 0 0 175 356c7 5.33 19.29 10.68 39.13 7.8 0 6.57 0 16.63.06 26.83v4.28C155.77 377 113.21 322.57 113.21 258.39c0-78.73 64.05-142.79 142.79-142.79"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="social-icons__icon social-icons__icon--hover"><path fill="#282828" d="M256 104.6c-84.8 0-153.79 69-153.79 153.79 0 71.68 49.28 132.06 115.74 149a7 7 0 0 0 .76.19 154 154 0 0 0 77.23-.69 7 7 0 0 0 .81-.22c65.09-17.91 113-77.61 113-148.31.04-84.77-68.95-153.76-153.75-153.76"></path><path fill="#fff" d="M353.83 239.32c0-16.79-5.87-30.5-15.57-41.27 1.57-3.88 6.75-19.51-1.49-40.69 0 0-12.69-4.13-41.58 15.76a141.2 141.2 0 0 0-75.79 0c-28.93-19.89-41.63-15.76-41.63-15.76-8.22 21.18-3 36.81-1.47 40.69a60 60 0 0 0-15.6 41.27c0 58.91 35.34 72.09 69 76-4.33 3.84-8.25 10.62-9.61 20.56-8.64 3.92-30.54 10.72-44-12.78 0 0-8-14.77-23.2-15.85 0 0-14.77-.19-1 9.35 0 0 9.92 4.72 16.81 22.5 0 0 8.88 27.44 51 18.14 0 4.26.06 31.78.09 50.61a153.6 153.6 0 0 0 75.28-.66c0-22.18.06-55.63.06-63.52 0-14.35-4.84-23.7-10.27-28.47 33.57-3.83 68.97-16.83 68.97-75.88"></path></svg></a></li></ol></div><div class="footer__logo-wrap"><a href="https://johnkavanagh.co.uk" class="footer__logo-link" aria-label="JK monogram"><figure class="logo-monogram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 252.44 166.62" class="footer__logo"><path d="M78.04.15C84.23-.18 90.47.14 96.67.03c-.02 39.57.02 79.24-.02 118.8-.08 15.01-7.6 29.45-19.68 38.3-8.13 6.05-18.15 9.43-28.29 9.47-16.22.04-32.46-.01-48.68 0 0-5.85.01-11.71 0-17.56 16.22-.02 32.46.05 48.68-.03 12.23-.02 23.47-8.16 27.53-19.65 2.15-5.82 1.69-11.47 1.72-17.54-.02-34 0-68 0-102 .02-3.22-.15-6.48.12-9.68Zm37.28.51h18.62c0 37.41-.02 74.83.01 112.25 30.8-37.42 61.54-74.93 92.41-112.29 7.77.08 15.53.02 23.3.04-20.43 25.29-40.88 50.56-61.3 75.85 21.36 29.84 42.73 59.66 64.08 89.51-7.36.01-14.73-.02-22.1.02-18.32-24.51-36.52-49.11-54.82-73.63-20.07 24.35-40.1 48.73-60.19 73.06-.03-54.94-.01-109.88-.01-164.81Z"></path></svg><figcaption class="logo-monogram__caption">John Kavanagh monogram logo: JK</figcaption></figure></a></div><ul class="footer__secondary-links"><li><a href="/terms/">Terms & Imprint</a></li><li><a href="/privacy/">Privacy</a></li><li><a href="/sitemap/">Sitemap</a></li></ul><p class="footer__copyright">© 2001 - 2024 <a href="https://johnkavanagh.co.uk">John Kavanagh</a>. All rights reserved.<br>Redesigned and redeveloped often.</p></div></footer><div class="container scroll-arrows"><button type="button" aria-label="Back to top" class="scroll-arrows__button scroll-arrows__button--up scroll-arrows__button--shifted" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="scroll-arrows__arrow"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></button><button type="button" aria-label="Down to content" class="scroll-arrows__button scroll-arrows__button--down scroll-arrows__button--shown" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="scroll-arrows__arrow scroll-arrows__arrow--down"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16h22m-9 9 9-9-9-9"></path></svg></button></div></div></div><div id="gatsby-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0px; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"></div></div><script id="gatsby-script-loader">window.pagePath="/articles/gatsby-and-graphql-nodes-vs-edges/"</script><!-- slice-start id="_gatsby-scripts-1" --><script id="gatsby-chunk-mapping">window.___chunkMapping='{"app":["/app-7f39e48c62c9cba7a7d5.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-72334daa64ae2f1a7c0a.js"],"component---src-pages-about-tsx":["/component---src-pages-about-tsx-23f2760326a9118bec34.js"],"component---src-pages-availability-tsx":["/component---src-pages-availability-tsx-98cec557e1b4deaef4c9.js"],"component---src-pages-blocked-tsx":["/component---src-pages-blocked-tsx-fa9c49556be53db3a6ab.js"],"component---src-pages-contact-tsx":["/component---src-pages-contact-tsx-89e8074bcaee58b1b780.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-35a4690f2e7762094cba.js"],"component---src-pages-privacy-tsx":["/component---src-pages-privacy-tsx-810fa4c4a8f21a372845.js"],"component---src-pages-projects-tsx":["/component---src-pages-projects-tsx-f241807de80cc2f758a6.js"],"component---src-pages-services-tsx":["/component---src-pages-services-tsx-8346b27b3a717ebead79.js"],"component---src-pages-sitemap-tsx":["/component---src-pages-sitemap-tsx-129c18a14126c6038067.js"],"component---src-pages-terms-tsx":["/component---src-pages-terms-tsx-9264133ca149964f49b6.js"],"component---src-pages-timeline-tsx":["/component---src-pages-timeline-tsx-14cf9fccd8495e644baa.js"],"component---src-templates-article-categories-tsx":["/component---src-templates-article-categories-tsx-e37da9c3d9f6072634b6.js"],"component---src-templates-article-listing-tsx":["/component---src-templates-article-listing-tsx-cb072e88786008f2a5c2.js"],"component---src-templates-article-tsx":["/component---src-templates-article-tsx-eee0180031e1445cc622.js"],"component---src-templates-project-tsx":["/component---src-templates-project-tsx-80a09a2ebab63a2f86fe.js"]}'</script><script>window.___webpackCompilationHash="d9783d3edb371b98e331"</script><script async="" src="/webpack-runtime-1b7d328cd22704828bbc.js"></script><script async="" src="/framework-d8fadba9c13742c2dce0.js"></script><script async="" src="/app-7f39e48c62c9cba7a7d5.js"></script><!-- slice-end id="_gatsby-scripts-1" -->
<script async="" id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="ef03e840-697b-4d6e-8f7e-d5d42121ab37" data-netlify-deploy-branch="deploy" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiZWYwM2U4NDAtNjk3Yi00ZDZlLThmN2UtZDVkNDIxMjFhYjM3IiwiYWNjb3VudF9pZCI6IjVmNzQ4ZWJjNTMxNzU4Yzg1OGYxYjg4NyIsImRlcGxveV9pZCI6IjY3NGQwN2MzYTU0YTNmMDAwOGI3MTNhYiIsImlzc3VlciI6Im5mc2VydmVyIn0.9QG8efpzW-ESzuGqj5vAlGVROiceR9Ld3gq-CUcfPCM"></script></body></html>