CINXE.COM

<!doctype html> <html lang="en-US" class="mt-0"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <link rel="icon" type="image/x-icon" href="https://github.githubassets.com/favicon.ico"> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />  <title>Exploring the challenges in creating an accessible sortable list (drag-and-drop) - The GitHub Blog</title> <meta name="description" content="The Accessibility team at GitHub considers drag-and-drop a “high-risk pattern,” often leading to accessibility barriers and a lack of effective solutions in the industry." /> <link rel="canonical" href="https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Exploring the challenges in creating an accessible sortable list (drag-and-drop)" /> <meta property="og:description" content="The Accessibility team at GitHub considers drag-and-drop a “high-risk pattern,” often leading to accessibility barriers and a lack of effective solutions in the industry." /> <meta property="og:url" content="https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/" /> <meta property="og:site_name" content="The GitHub Blog" /> <meta property="article:published_time" content="2024-07-09T19:06:50+00:00" /> <meta property="article:modified_time" content="2024-07-23T13:17:07+00:00" /> <meta property="og:image" content="https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?fit=1200%2C630" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:type" content="image/png" /> <meta name="author" content="Kendall Gassner" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Kendall Gassner" /> <meta name="twitter:label2" content="Est. reading time" /> <meta name="twitter:data2" content="8 minutes" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/","url":"https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/","name":"Exploring the challenges in creating an accessible sortable list (drag-and-drop) - The GitHub Blog","isPartOf":{"@id":"https://github.blog/#website"},"primaryImageOfPage":{"@id":"https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/#primaryimage"},"image":{"@id":"https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/#primaryimage"},"thumbnailUrl":"https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?fit=1200%2C630","datePublished":"2024-07-09T19:06:50+00:00","dateModified":"2024-07-23T13:17:07+00:00","author":{"@id":"https://github.blog/#/schema/person/b0cd293218fbe3e57b1f2a4ae3a203ce"},"description":"The Accessibility team at GitHub considers drag-and-drop a “high-risk pattern,” often leading to accessibility barriers and a lack of effective solutions in the industry.","breadcrumb":{"@id":"https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/#primaryimage","url":"https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?fit=1200%2C630","contentUrl":"https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?fit=1200%2C630","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https://github.blog/engineering/user-experience/exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://github.blog/"},{"@type":"ListItem","position":2,"name":"Engineering","item":"https://github.blog/engineering/"},{"@type":"ListItem","position":3,"name":"User experience","item":"https://github.blog/engineering/user-experience/"},{"@type":"ListItem","position":4,"name":"Exploring the challenges in creating an accessible sortable list (drag-and-drop)"}]},{"@type":"WebSite","@id":"https://github.blog/#website","url":"https://github.blog/","name":"The GitHub Blog","description":"Updates, ideas, and inspiration from GitHub to help developers build and design software.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://github.blog/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https://github.blog/#/schema/person/b0cd293218fbe3e57b1f2a4ae3a203ce","name":"Kendall Gassner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://github.blog/#/schema/person/image/63a08b7e11e832c3d49a59a082395841","url":"https://secure.gravatar.com/avatar/60cbb8e426f1d5978643945c0ca7d078?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/60cbb8e426f1d5978643945c0ca7d078?s=96&d=mm&r=g","caption":"Kendall Gassner"},"url":"https://github.blog/author/kendallgassner/"}]}</script>  <link rel='dns-prefetch' href='//ghcc.githubassets.com' /> <link rel='dns-prefetch' href='//js.monitor.azure.com' /> <link rel='dns-prefetch' href='//cdnjs.cloudflare.com' /> <link rel='dns-prefetch' href='//analytics.githubassets.com' /> <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//v0.wordpress.com' /> <link rel="alternate" type="application/rss+xml" title="The GitHub Blog » Feed" href="https://github.blog/feed/" /> <link rel="alternate" type="application/rss+xml" title="The GitHub Blog » Comments Feed" href="https://github.blog/comments/feed/" /> <script> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/github.blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.6.2"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); </script> <style id='wp-emoji-styles-inline-css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='all-css-2' href='https://github.blog/wp-includes/css/dist/block-library/style.min.css?m=1732206008g' type='text/css' media='all' /> <style id='co-authors-plus-coauthors-style-inline-css'> .wp-block-co-authors-plus-coauthors.is-layout-flow [class*=wp-block-co-authors-plus]{display:inline} </style> <style id='co-authors-plus-avatar-style-inline-css'> .wp-block-co-authors-plus-avatar :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-avatar :where(img){vertical-align:middle}.wp-block-co-authors-plus-avatar:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-avatar.aligncenter{display:table;margin-inline:auto} </style> <style id='co-authors-plus-image-style-inline-css'> .wp-block-co-authors-plus-image{margin-bottom:0}.wp-block-co-authors-plus-image :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-image :where(img){vertical-align:middle}.wp-block-co-authors-plus-image:is(.alignfull,.alignwide) :where(img){width:100%}.wp-block-co-authors-plus-image:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-image.aligncenter{display:table;margin-inline:auto} </style> <style id='safe-svg-svg-icon-style-inline-css'> .safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%} </style> <style id='jetpack-sharing-buttons-style-inline-css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <style id='classic-theme-styles-inline-css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='all-css-20' href='https://github.blog/_static/??/wp-content/plugins/wp-menu-image/assets/css/wmi-front-style.css,/wp-content/themes/github-2021/dist/css/site-script.css?m=1732601037' type='text/css' media='all' /> <link rel='stylesheet' id='highlightjs-css-css' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css?ver=11.4.0' media='all' /> <link rel="https://api.w.org/" href="https://github.blog/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://github.blog/wp-json/wp/v2/posts/78695" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://github.blog/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.6.2" /> <link rel='shortlink' href='https://wp.me/pamS32-kth' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://github.blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fgithub.blog%2Fengineering%2Fuser-experience%2Fexploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://github.blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fgithub.blog%2Fengineering%2Fuser-experience%2Fexploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop%2F&format=xml" /> <style>img#wpstats{display:none}</style> <meta name="ha-url" content="https://collector.githubapp.com/github-blog/collect"><link rel="preload" href="https://github.blog/wp-content/themes/github-2021/dist/fonts/alliance/Alliance-No-1-ExtraBold.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://github.blog/wp-content/themes/github-2021/dist/fonts/alliance/Alliance-No-1-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://github.blog/wp-content/themes/github-2021/dist/fonts/alliance/Alliance-No-1-SemiBold.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://github.blog/wp-content/themes/github-2021/dist/fonts/alliance/Alliance-No-1-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="icon" href="https://github.blog/wp-content/uploads/2019/01/cropped-github-favicon-512.png?fit=32%2C32" sizes="32x32" /> <link rel="icon" href="https://github.blog/wp-content/uploads/2019/01/cropped-github-favicon-512.png?fit=192%2C192" sizes="192x192" /> <link rel="apple-touch-icon" href="https://github.blog/wp-content/uploads/2019/01/cropped-github-favicon-512.png?fit=180%2C180" /> <meta name="msapplication-TileImage" content="https://github.blog/wp-content/uploads/2019/01/cropped-github-favicon-512.png?fit=270%2C270" /> <style id="wp-custom-css"> .post__content { word-break: break-word; } </style> </head> <body class="post-template-default single single-post postid-78695 single-format-standard font-mktg no-sidebar"> <div data-color-mode="dark" data-light-theme="light" data-dark-theme="dark_dimmed" class="pt-header pt-lg-0"> <header id="header" class="header position-fixed position-lg-static pb-lg-header z-4 top-0 left-0 right-0 d-flex flex-column flex-items-stretch color-bg-default"> <a href="#start-of-content" class="p-3 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus"> Skip to content </a> <a href="#sidebar" class="p-3 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus"> Skip to sidebar </a> <div class="position-relative container-xl width-full mx-auto p-responsive-blog"> <div class="d-flex flex-items-center flex-justify-between pt-3 pb-3 color-fg-default"> <a href="https://github.com" target="_blank" rel="noreferrer" aria-label="GitHub homepage" class="Header-link position-relative d-flex flex-items-center color-fg-default"> <svg aria-hidden="true" role="presentation" class="nav-back-arrow position-absolute d-block" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path fill-rule="evenodd" d="M15.28 5.22a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 000 1.06l6.25 6.25a.75.75 0 101.06-1.06L9.56 12l5.72-5.72a.75.75 0 000-1.06z"></path></svg> <svg aria-hidden="true" role="img" class="octicon octicon-mark-github d-block" viewBox="0 0 16 16" width="32" height="32" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg> </a> <span class="d-inline-block ml-2 f1-mktg f2-md-mktg" style="opacity: 0.3;">/</span> <a class="d-inline-block Header-link font-weight-semibold ml-2 f2 color-fg-default" href="https://github.blog/"> Blog</a> <nav class="d-none d-lg-block" aria-label="Secondary navigation"> <ul id="secondary-navigation" class="secondary-navigation flex-items-center flex-nowrap list-style-none ml-4" aria-hidden="false"><li id="menu-item-78809"><a href="https://github.blog/changelog/" class="position-relative d-flex flex-items-center flex-start no-wrap py-2 px-4 f4 lh-condensed-ultra Link--secondary color-fg-default text-medium">Changelog</a></li> <li id="menu-item-78810"><a href="https://docs.github.com/" class="position-relative d-flex flex-items-center flex-start no-wrap py-2 px-4 f4 lh-condensed-ultra Link--secondary color-fg-default text-medium">Docs<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-down position-absolute right-0 d-block ml-1 mt-1" role="presentation"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li> <li id="menu-item-78811"><a href="https://github.com/customer-stories" class="position-relative d-flex flex-items-center flex-start no-wrap py-2 px-4 f4 lh-condensed-ultra Link--secondary color-fg-default text-medium">Customer stories<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-down position-absolute right-0 d-block ml-1 mt-1" role="presentation"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li> </ul></nav> <div class="d-none d-lg-flex flex-1"> <form id="desktop-search" class="desktop-search position-relative ml-lg-4 flex-1" action="https://github.blog" method="get" aria-hidden="true" aria-label="Search form" role="search"> <div class="position-relative d-flex flex-1 height-full color-bg-transparent" data-color-mode="light" data-light-theme="light" data-dark-theme="dark" > <input aria-label="Search the blog" type="search" class="p-2 pl-3 pr-6 border-0 rounded-2 flex-1" placeholder="Search the blog…" value="" name="s" id="search-input"> <button type="submit" class="position-absolute right-0 z-3 d-flex flex-items-center flex-justify-center flex-self-center mr-2 p-2 border-0 rounded-2 color-bg-transparent color-fg-subtle" aria-label="Search"> <svg viewBox="0 0 16 16" width="20" height="20" class="octicon octicon-search" role="presentation"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg> </button> </div> </form> <button aria-label="Toggle search" class="flex-self-center ml-auto p-2 border-0 color-bg-transparent color-fg-default rounded-3 js-toggle" aria-controls="desktop-search" aria-expanded="false" > <svg viewBox="0 0 24 24" width="24" height="24" class="octicon octicon-search" role="presentation"><path d="M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z"></path></svg> <svg viewBox="2 2 20 20" width="24" height="24" class="octicon octicon-x" role="presentation"><path d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"></path></svg> </button> <a data-analytics-click="Blog, click on button, text: Try GitHub Copilot; ref_location:top nav;" class="no-wrap btn-mktg font-weight-semibold ml-3 js-header-cta header-cta" href="https://docs.github.com/en/copilot/quickstart?utm_source=github&utm_medium=blog&utm_campaign=topnav" target="_blank">Try GitHub Copilot</a> <a data-analytics-click="Blog, click on button, text: Contact sales; ref_location:top nav;" class="no-wrap btn-mktg btn-muted-mktg font-weight-semibold ml-3 js-header-cta header-cta" href="https://github.com/enterprise/contact?ref_cta=contact%2520sales&ref_loc=banner&ref_page=blog" target="_blank">Contact sales</a> </div> <div class="d-flex d-lg-none flex-items-center flex-1 mr-n2"> <button aria-label="Toggle search" class="ml-auto p-2 border-0 color-bg-transparent color-fg-default rounded-3 js-toggle" aria-controls="mobile-search" aria-expanded="false" > <svg viewBox="0 0 24 24" width="24" height="24" class="octicon octicon-search" role="presentation"><path d="M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z"></path></svg> <svg viewBox="2 2 20 20" width="24" height="24" class="octicon octicon-x" role="presentation"><path d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"></path></svg> </button> <button aria-label="Toggle menu" class="ml-2 p-2 border-0 color-bg-transparent color-fg-default rounded-3 js-toggle" aria-controls="mobile-menu" aria-expanded="false" data-trap-focus="#header"> <svg viewBox="0 0 16 16" width="24" height="24" class="octicon octicon-three-bars" role="presentation"><path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z"></path></svg> <svg viewBox="2 2 20 20" width="24" height="24" class="octicon octicon-x " role="presentation"><path d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"></path></svg> </button> </div> </div> </div> <div class="position-relative pb-lg-navigation" data-sticky-navigation=".sticky-navigation"> <nav aria-label="Primary navigation" class="sticky-navigation position-absolute z-4 top-0 left-0 d-none d-lg-block width-full color-border-subtle color-bg-default"> <div class="position-relative container-xl width-full mx-auto p-responsive-blog"> <ul id="primary-navigation" class="primary-navigation position-relative d-flex flex-row flex-nowrap flex-grow-0 flex-justify-between list-style-none"><li id="menu-item-78814"><a href="https://github.blog/ai-and-ml/" class="position-relative d-flex flex-items-center flex-start no-wrap py-3 f4-mktg text-bold js-toggle" aria-controls="primary-78814-dropdown" aria-expanded="false" aria-haspopup="true" role="button">AI & ML<svg viewBox="0 0 16 16" width="16" height="16" class="octicon d-block ml-1 mt-1 color-fg-muted" role="presentation"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></a> <ul class="dropdown d-flex flex-wrap width-full position-absolute left-0 list-style-none mt-2 rounded-3 z-3 overflow-hidden color-border-subtle" aria-label="AI & ML sub-menu" aria-hidden="true" data-color-mode="light" data-dark-theme="dark" data-light-theme="light" id="primary-78814-dropdown" tabindex="-1"> <li id="menu-item-78863" class="flex-1 p-5 py-xl-7 px-xl-7"><div class="col-9 mb-4 mb-lg-7"><a href="https://github.blog/ai-and-ml/" class="d-flex flex-items-center flex-start f3 lh-condensed color-fg-default text-bold">AI & ML<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-1 my-0 f4 color-fg-muted">Learn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry.</p></div> <ul class="d-flex flex-wrap list-style-none" aria-label="AI & ML sub-menu"> <li id="menu-item-78815" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right"><a href="https://github.blog/ai-and-ml/generative-ai/" class="d-block f4 color-fg-default text-bold">Generative AI</a><p class="mb-0 f5 color-fg-muted">Learn how to build with generative AI.</p></li> <li id="menu-item-78816" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8"><a href="https://github.blog/ai-and-ml/github-copilot/" class="d-block f4 color-fg-default text-bold">GitHub Copilot</a><p class="mb-0 f5 color-fg-muted">Change how you work with GitHub Copilot.</p></li> <li id="menu-item-78817" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/ai-and-ml/llms/" class="d-block f4 color-fg-default text-bold">LLMs</a><p class="mb-0 f5 color-fg-muted">Everything developers need to know about LLMs.</p></li> <li id="menu-item-78818" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/ai-and-ml/machine-learning/" class="d-block f4 color-fg-default text-bold">Machine learning</a><p class="mb-0 f5 color-fg-muted">Machine learning tips, tricks, and best practices.</p></li> </ul> </li> <li id="menu-item-78864" class="p-5 py-xl-7 px-xl-8 col-4 color-bg-subtle card"><div class="d-block position-relative mb-3 rounded-2 tease-thumbnail overflow-hidden"><img width="800" height="425" src="https://github.blog/wp-content/uploads/2024/06/AI-DarkMode-4.png?resize=800%2C425" class="tease-thumbnail__img d-block width-full height-auto aspect-ratio-1032-548 object-fit-cover" alt="" decoding="async" fetchpriority="high" srcset="https://github.blog/wp-content/uploads/2024/06/AI-DarkMode-4.png?w=300 300w, https://github.blog/wp-content/uploads/2024/06/AI-DarkMode-4.png?w=800 800w, https://github.blog/wp-content/uploads/2024/06/AI-DarkMode-4.png?w=400 400w, https://github.blog/wp-content/uploads/2024/06/AI-DarkMode-4.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/06/AI-DarkMode-4.png?w=516 516w" sizes="(max-width: 800px) 100vw, 800px" /></div><a href="https://github.blog/ai-and-ml/generative-ai/how-ai-code-generation-works/" class="d-block mb-2 f3 lh-condensed color-fg-default text-bold card__link">How AI code generation works</a><p class="mb-3 f5 color-fg-muted">Explore the capabilities and benefits of AI code generation and how it can improve your developer experience.</p><span class="Link d-inline-flex flex-items-center" role="presentation">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></span></li> </ul> </li> <li id="menu-item-78819"><a href="https://github.blog/developer-skills/" class="position-relative d-flex flex-items-center flex-start no-wrap py-3 f4-mktg text-bold js-toggle" aria-controls="primary-78819-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Developer skills<svg viewBox="0 0 16 16" width="16" height="16" class="octicon d-block ml-1 mt-1 color-fg-muted" role="presentation"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></a> <ul class="dropdown d-flex flex-wrap width-full position-absolute left-0 list-style-none mt-2 rounded-3 z-3 overflow-hidden color-border-subtle" aria-label="Developer skills sub-menu" aria-hidden="true" data-color-mode="light" data-dark-theme="dark" data-light-theme="light" id="primary-78819-dropdown" tabindex="-1"> <li id="menu-item-78865" class="flex-1 p-5 py-xl-7 px-xl-7"><div class="col-9 mb-4 mb-lg-7"><a href="https://github.blog/developer-skills/" class="d-flex flex-items-center flex-start f3 lh-condensed color-fg-default text-bold">Developer skills<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-1 my-0 f4 color-fg-muted">Resources for developers to grow in their skills and careers.</p></div> <ul class="d-flex flex-wrap list-style-none" aria-label="Developer skills sub-menu"> <li id="menu-item-78820" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right"><a href="https://github.blog/developer-skills/application-development/" class="d-block f4 color-fg-default text-bold">Application development</a><p class="mb-0 f5 color-fg-muted">Insights and best practices for building apps.</p></li> <li id="menu-item-78821" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8"><a href="https://github.blog/developer-skills/career-growth/" class="d-block f4 color-fg-default text-bold">Career growth</a><p class="mb-0 f5 color-fg-muted">Tips & tricks to grow as a professional developer.</p></li> <li id="menu-item-78822" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/developer-skills/github/" class="d-block f4 color-fg-default text-bold">GitHub</a><p class="mb-0 f5 color-fg-muted">Improve how you use GitHub at work.</p></li> <li id="menu-item-78823" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/developer-skills/github-education/" class="d-block f4 color-fg-default text-bold">GitHub Education</a><p class="mb-0 f5 color-fg-muted">Learn how to move into your first professional role.</p></li> <li id="menu-item-78824" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/developer-skills/programming-languages-and-frameworks/" class="d-block f4 color-fg-default text-bold">Programming languages & frameworks</a><p class="mb-0 f5 color-fg-muted">Stay current on what’s new (or new again).</p></li> </ul> </li> <li id="menu-item-78866" class="p-5 py-xl-7 px-xl-8 col-4 color-bg-subtle card"><div class="d-block position-relative mb-3 rounded-2 tease-thumbnail overflow-hidden"><img width="800" height="425" src="https://github.blog/wp-content/uploads/2024/05/Enterprise-DarkMode-3.png?resize=800%2C425" class="tease-thumbnail__img d-block width-full height-auto aspect-ratio-1032-548 object-fit-cover" alt="" decoding="async" srcset="https://github.blog/wp-content/uploads/2024/05/Enterprise-DarkMode-3.png?w=300 300w, https://github.blog/wp-content/uploads/2024/05/Enterprise-DarkMode-3.png?w=800 800w, https://github.blog/wp-content/uploads/2024/05/Enterprise-DarkMode-3.png?w=400 400w, https://github.blog/wp-content/uploads/2024/05/Enterprise-DarkMode-3.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/05/Enterprise-DarkMode-3.png?w=516 516w" sizes="(max-width: 800px) 100vw, 800px" /></div><a href="https://docs.github.com/en/get-started" class="d-block mb-2 f3 lh-condensed color-fg-default text-bold card__link">Get started with GitHub documentation</a><p class="mb-3 f5 color-fg-muted">Learn how to start building, shipping, and maintaining software with GitHub.</p><span class="Link d-inline-flex flex-items-center" role="presentation">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></span></li> </ul> </li> <li id="menu-item-78825"><a href="https://github.blog/engineering/" class="position-relative d-flex flex-items-center flex-start no-wrap py-3 f4-mktg text-bold js-toggle" aria-controls="primary-78825-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Engineering<svg viewBox="0 0 16 16" width="16" height="16" class="octicon d-block ml-1 mt-1 color-fg-muted" role="presentation"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></a> <ul class="dropdown d-flex flex-wrap width-full position-absolute left-0 list-style-none mt-2 rounded-3 z-3 overflow-hidden color-border-subtle" aria-label="Engineering sub-menu" aria-hidden="true" data-color-mode="light" data-dark-theme="dark" data-light-theme="light" id="primary-78825-dropdown" tabindex="-1"> <li id="menu-item-78867" class="flex-1 p-5 py-xl-7 px-xl-7"><div class="col-9 mb-4 mb-lg-7"><a href="https://github.blog/engineering/" class="d-flex flex-items-center flex-start f3 lh-condensed color-fg-default text-bold">Engineering<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-1 my-0 f4 color-fg-muted">Get an inside look at how we’re building the home for all developers.</p></div> <ul class="d-flex flex-wrap list-style-none" aria-label="Engineering sub-menu"> <li id="menu-item-78827" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right"><a href="https://github.blog/engineering/architecture-optimization/" class="d-block f4 color-fg-default text-bold">Architecture & optimization</a><p class="mb-0 f5 color-fg-muted">Discover how we deliver a performant and highly available experience across the GitHub platform.</p></li> <li id="menu-item-78828" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8"><a href="https://github.blog/engineering/engineering-principles/" class="d-block f4 color-fg-default text-bold">Engineering principles</a><p class="mb-0 f5 color-fg-muted">Explore best practices for building software at scale with a majority remote team.</p></li> <li id="menu-item-78829" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/engineering/infrastructure/" class="d-block f4 color-fg-default text-bold">Infrastructure</a><p class="mb-0 f5 color-fg-muted">Get a glimpse at the technology underlying the world’s leading AI-powered developer platform.</p></li> <li id="menu-item-78830" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/engineering/platform-security/" class="d-block f4 color-fg-default text-bold">Platform security</a><p class="mb-0 f5 color-fg-muted">Learn how we build security into everything we do across the developer lifecycle.</p></li> <li id="menu-item-78858" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/engineering/user-experience/" class="d-block f4 color-fg-default text-bold">User experience</a><p class="mb-0 f5 color-fg-muted">Find out what goes into making GitHub the home for all developers.</p></li> </ul> </li> <li id="menu-item-78868" class="p-5 py-xl-7 px-xl-8 col-4 color-bg-subtle card"><div class="d-block position-relative mb-3 rounded-2 tease-thumbnail overflow-hidden"><img width="800" height="425" src="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.42.45 AM.png?resize=800%2C425" class="tease-thumbnail__img d-block width-full height-auto aspect-ratio-1032-548 object-fit-cover" alt="" decoding="async" srcset="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.42.45 AM.png?w=800 800w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.42.45 AM.png?w=400 400w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.42.45 AM.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.42.45 AM.png?w=516 516w" sizes="(max-width: 800px) 100vw, 800px" /></div><a href="https://github.blog/engineering/how-we-use-github-to-be-more-productive-collaborative-and-secure/" class="d-block mb-2 f3 lh-condensed color-fg-default text-bold card__link">How we use GitHub to be more productive, collaborative, and secure</a><p class="mb-3 f5 color-fg-muted">Our engineering and security teams do some incredible work. Let’s take a look at how we use GitHub to be more productive, build collaboratively, and shift security left.</p><span class="Link d-inline-flex flex-items-center" role="presentation">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></span></li> </ul> </li> <li id="menu-item-78832"><a href="https://github.blog/enterprise-software/" class="position-relative d-flex flex-items-center flex-start no-wrap py-3 f4-mktg text-bold js-toggle" aria-controls="primary-78832-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Enterprise software<svg viewBox="0 0 16 16" width="16" height="16" class="octicon d-block ml-1 mt-1 color-fg-muted" role="presentation"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></a> <ul class="dropdown d-flex flex-wrap width-full position-absolute left-0 list-style-none mt-2 rounded-3 z-3 overflow-hidden color-border-subtle" aria-label="Enterprise software sub-menu" aria-hidden="true" data-color-mode="light" data-dark-theme="dark" data-light-theme="light" id="primary-78832-dropdown" tabindex="-1"> <li id="menu-item-78869" class="flex-1 p-5 py-xl-7 px-xl-7"><div class="col-9 mb-4 mb-lg-7"><a href="https://github.blog/enterprise-software/" class="d-flex flex-items-center flex-start f3 lh-condensed color-fg-default text-bold">Enterprise software<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-1 my-0 f4 color-fg-muted">Explore how to write, build, and deploy enterprise software at scale.</p></div> <ul class="d-flex flex-wrap list-style-none" aria-label="Enterprise software sub-menu"> <li id="menu-item-78833" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right"><a href="https://github.blog/enterprise-software/automation/" class="d-block f4 color-fg-default text-bold">Automation</a><p class="mb-0 f5 color-fg-muted">Automating your way to faster and more secure ships.</p></li> <li id="menu-item-78834" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8"><a href="https://github.blog/enterprise-software/ci-cd/" class="d-block f4 color-fg-default text-bold">CI/CD</a><p class="mb-0 f5 color-fg-muted">Guides on continuous integration and delivery.</p></li> <li id="menu-item-78835" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/enterprise-software/collaboration/" class="d-block f4 color-fg-default text-bold">Collaboration</a><p class="mb-0 f5 color-fg-muted">Tips, tools, and tricks to improve developer collaboration.</p></li> <li id="menu-item-78836" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/enterprise-software/devops/" class="d-block f4 color-fg-default text-bold">DevOps</a><p class="mb-0 f5 color-fg-muted">DevOps resources for enterprise engineering teams.</p></li> <li id="menu-item-78837" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/enterprise-software/devsecops/" class="d-block f4 color-fg-default text-bold">DevSecOps</a><p class="mb-0 f5 color-fg-muted">How to integrate security into the SDLC.</p></li> <li id="menu-item-78838" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/enterprise-software/governance-and-compliance/" class="d-block f4 color-fg-default text-bold">Governance & compliance</a><p class="mb-0 f5 color-fg-muted">Ensuring your builds stay clean.</p></li> </ul> </li> <li id="menu-item-78870" class="p-5 py-xl-7 px-xl-8 col-4 color-bg-subtle card"><div class="d-block position-relative mb-3 rounded-2 tease-thumbnail overflow-hidden"><img width="800" height="425" src="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.43.47 AM.png?resize=800%2C425" class="tease-thumbnail__img d-block width-full height-auto aspect-ratio-1032-548 object-fit-cover" alt="" decoding="async" srcset="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.43.47 AM.png?w=800 800w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.43.47 AM.png?w=400 400w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.43.47 AM.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.43.47 AM.png?w=516 516w" sizes="(max-width: 800px) 100vw, 800px" /></div><a href="https://resources.github.com/artificial-intelligence/how-enterprise-engineering-teams-can-successfully-adopt-ai/" class="d-block mb-2 f3 lh-condensed color-fg-default text-bold card__link">How enterprise engineering teams can successfully adopt AI</a><p class="mb-3 f5 color-fg-muted">Learn how to bring AI to your engineering teams and maximize the value that you get from it.</p><span class="Link d-inline-flex flex-items-center" role="presentation">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></span></li> </ul> </li> <li id="menu-item-78840"><a href="https://github.blog/news-insights/" class="position-relative d-flex flex-items-center flex-start no-wrap py-3 f4-mktg text-bold js-toggle" aria-controls="primary-78840-dropdown" aria-expanded="false" aria-haspopup="true" role="button">News & insights<svg viewBox="0 0 16 16" width="16" height="16" class="octicon d-block ml-1 mt-1 color-fg-muted" role="presentation"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></a> <ul class="dropdown d-flex flex-wrap width-full position-absolute left-0 list-style-none mt-2 rounded-3 z-3 overflow-hidden color-border-subtle" aria-label="News & insights sub-menu" aria-hidden="true" data-color-mode="light" data-dark-theme="dark" data-light-theme="light" id="primary-78840-dropdown" tabindex="-1"> <li id="menu-item-78871" class="flex-1 p-5 py-xl-7 px-xl-7"><div class="col-9 mb-4 mb-lg-7"><a href="https://github.blog/news-insights/" class="d-flex flex-items-center flex-start f3 lh-condensed color-fg-default text-bold">News & insights<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-1 my-0 f4 color-fg-muted">Keep up with what’s new and notable from inside GitHub.</p></div> <ul class="d-flex flex-wrap list-style-none" aria-label="News & insights sub-menu"> <li id="menu-item-78841" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right"><a href="https://github.blog/news-insights/company-news/" class="d-block f4 color-fg-default text-bold">Company news</a><p class="mb-0 f5 color-fg-muted">An inside look at news and product updates from GitHub.</p></li> <li id="menu-item-78844" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8"><a href="https://github.blog/news-insights/product-news/" class="d-block f4 color-fg-default text-bold">Product</a><p class="mb-0 f5 color-fg-muted">The latest on GitHub’s platform, products, and tools.</p></li> <li id="menu-item-78842" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/news-insights/octoverse/" class="d-block f4 color-fg-default text-bold">Octoverse</a><p class="mb-0 f5 color-fg-muted">Insights into the state of open source on GitHub.</p></li> <li id="menu-item-78843" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/news-insights/policy-news-and-insights/" class="d-block f4 color-fg-default text-bold">Policy</a><p class="mb-0 f5 color-fg-muted">The latest policy and regulatory changes in software.</p></li> <li id="menu-item-78845" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/news-insights/research/" class="d-block f4 color-fg-default text-bold">Research</a><p class="mb-0 f5 color-fg-muted">Data-driven insights around the developer ecosystem.</p></li> <li id="menu-item-78847" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/news-insights/the-library/" class="d-block f4 color-fg-default text-bold">The library</a><p class="mb-0 f5 color-fg-muted">Older news and updates from GitHub.</p></li> </ul> </li> <li id="menu-item-78872" class="p-5 py-xl-7 px-xl-8 col-4 color-bg-subtle card"><div class="d-block position-relative mb-3 rounded-2 tease-thumbnail overflow-hidden"><img width="800" height="425" src="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.44.23 AM.png?resize=800%2C425" class="tease-thumbnail__img d-block width-full height-auto aspect-ratio-1032-548 object-fit-cover" alt="" decoding="async" srcset="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.44.23 AM.png?w=300 300w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.44.23 AM.png?w=800 800w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.44.23 AM.png?w=400 400w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.44.23 AM.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.44.23 AM.png?w=516 516w" sizes="(max-width: 800px) 100vw, 800px" /></div><a href="https://github.blog/ai-and-ml/llms/unlocking-the-power-of-unstructured-data-with-rag/" class="d-block mb-2 f3 lh-condensed color-fg-default text-bold card__link">Unlocking the power of unstructured data with RAG</a><p class="mb-3 f5 color-fg-muted">Learn how to use retrieval-augmented generation (RAG) to capture more insights.</p><span class="Link d-inline-flex flex-items-center" role="presentation">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></span></li> </ul> </li> <li id="menu-item-78848"><a href="https://github.blog/open-source/" class="position-relative d-flex flex-items-center flex-start no-wrap py-3 f4-mktg text-bold js-toggle" aria-controls="primary-78848-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Open Source<svg viewBox="0 0 16 16" width="16" height="16" class="octicon d-block ml-1 mt-1 color-fg-muted" role="presentation"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></a> <ul class="dropdown d-flex flex-wrap width-full position-absolute left-0 list-style-none mt-2 rounded-3 z-3 overflow-hidden color-border-subtle" aria-label="Open Source sub-menu" aria-hidden="true" data-color-mode="light" data-dark-theme="dark" data-light-theme="light" id="primary-78848-dropdown" tabindex="-1"> <li id="menu-item-78873" class="flex-1 p-5 py-xl-7 px-xl-7"><div class="col-9 mb-4 mb-lg-7"><a href="https://github.blog/open-source/" class="d-flex flex-items-center flex-start f3 lh-condensed color-fg-default text-bold">Open Source<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-1 my-0 f4 color-fg-muted">Everything open source on GitHub.</p></div> <ul class="d-flex flex-wrap list-style-none" aria-label="Open Source sub-menu"> <li id="menu-item-78851" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right"><a href="https://github.blog/open-source/git/" class="d-block f4 color-fg-default text-bold">Git</a><p class="mb-0 f5 color-fg-muted">The latest Git updates.</p></li> <li id="menu-item-78853" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8"><a href="https://github.blog/open-source/maintainers/" class="d-block f4 color-fg-default text-bold">Maintainers</a><p class="mb-0 f5 color-fg-muted">Spotlighting open source maintainers.</p></li> <li id="menu-item-78854" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/open-source/social-impact/" class="d-block f4 color-fg-default text-bold">Social impact</a><p class="mb-0 f5 color-fg-muted">How open source is driving positive change.</p></li> <li id="menu-item-78850" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/open-source/gaming/" class="d-block f4 color-fg-default text-bold">Gaming</a><p class="mb-0 f5 color-fg-muted">Explore open source games on GitHub.</p></li> </ul> </li> <li id="menu-item-78874" class="p-5 py-xl-7 px-xl-8 col-4 color-bg-subtle card"><div class="d-block position-relative mb-3 rounded-2 tease-thumbnail overflow-hidden"><img width="800" height="425" src="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.46.23 AM.png?resize=800%2C425" class="tease-thumbnail__img d-block width-full height-auto aspect-ratio-1032-548 object-fit-cover" alt="" decoding="async" srcset="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.46.23 AM.png?w=800 800w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.46.23 AM.png?w=400 400w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.46.23 AM.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.46.23 AM.png?w=516 516w" sizes="(max-width: 800px) 100vw, 800px" /></div><a href="https://resources.github.com/software-development/innersource/" class="d-block mb-2 f3 lh-condensed color-fg-default text-bold card__link">An introduction to innersource</a><p class="mb-3 f5 color-fg-muted">Organizations worldwide are incorporating open source methodologies into the way they build and ship their own software.</p><span class="Link d-inline-flex flex-items-center" role="presentation">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></span></li> </ul> </li> <li id="menu-item-78859"><a href="https://github.blog/security/" class="position-relative d-flex flex-items-center flex-start no-wrap py-3 f4-mktg text-bold js-toggle" aria-controls="primary-78859-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Security<svg viewBox="0 0 16 16" width="16" height="16" class="octicon d-block ml-1 mt-1 color-fg-muted" role="presentation"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></a> <ul class="dropdown d-flex flex-wrap width-full position-absolute left-0 list-style-none mt-2 rounded-3 z-3 overflow-hidden color-border-subtle" aria-label="Security sub-menu" aria-hidden="true" data-color-mode="light" data-dark-theme="dark" data-light-theme="light" id="primary-78859-dropdown" tabindex="-1"> <li id="menu-item-78875" class="flex-1 p-5 py-xl-7 px-xl-7"><div class="col-9 mb-4 mb-lg-7"><a href="https://github.blog/security/" class="d-flex flex-items-center flex-start f3 lh-condensed color-fg-default text-bold">Security<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-1 my-0 f4 color-fg-muted">Stay up to date on everything security.</p></div> <ul class="d-flex flex-wrap list-style-none" aria-label="Security sub-menu"> <li id="menu-item-78860" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right"><a href="https://github.blog/security/application-security/" class="d-block f4 color-fg-default text-bold">Application security</a><p class="mb-0 f5 color-fg-muted">Application security, explained.</p></li> <li id="menu-item-78861" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8"><a href="https://github.blog/security/supply-chain-security/" class="d-block f4 color-fg-default text-bold">Supply chain security</a><p class="mb-0 f5 color-fg-muted">Demystifying supply chain security.</p></li> <li id="menu-item-78855" class="col-6 d-block f4 color-fg-default color-border-subtle pr-4 pr-lg-8 border-right pt-2 pt-lg-4"><a href="https://github.blog/security/vulnerability-research/" class="d-block f4 color-fg-default text-bold">Vulnerability research</a><p class="mb-0 f5 color-fg-muted">Updates from the GitHub Security Lab.</p></li> <li id="menu-item-78862" class="col-6 d-block f4 color-fg-default color-border-subtle pl-4 pl-lg-8 pt-2 pt-lg-4"><a href="https://github.blog/security/web-application-security/" class="d-block f4 color-fg-default text-bold">Web application security</a><p class="mb-0 f5 color-fg-muted">Helpful tips on securing web applications.</p></li> </ul> </li> <li id="menu-item-78876" class="p-5 py-xl-7 px-xl-8 col-4 color-bg-subtle card"><div class="d-block position-relative mb-3 rounded-2 tease-thumbnail overflow-hidden"><img width="800" height="425" src="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.47.04 AM.png?resize=800%2C425" class="tease-thumbnail__img d-block width-full height-auto aspect-ratio-1032-548 object-fit-cover" alt="" decoding="async" srcset="https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.47.04 AM.png?w=800 800w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.47.04 AM.png?w=400 400w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.47.04 AM.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/07/Screenshot-2024-07-23-at-8.47.04 AM.png?w=516 516w" sizes="(max-width: 800px) 100vw, 800px" /></div><a href="https://resources.github.com/security/the-enterprise-guide-to-ai-powered-devsecops/" class="d-block mb-2 f3 lh-condensed color-fg-default text-bold card__link">The enterprise guide to AI-powered DevSecOps</a><p class="mb-3 f5 color-fg-muted">Learn about core challenges in DevSecOps, and how you can start addressing them with AI and automation.</p><span class="Link d-inline-flex flex-items-center" role="presentation">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></span></li> </ul> </li> </ul> </div> </nav> </div> <form id="mobile-search" role="search" method="get" class="mobile-search" action="https://github.blog" aria-hidden="true" aria-label="Search form"> <div class="d-flex flex-1 p-3 color-bg-inset"> <div class="d-flex flex-1 position-relative color-bg-transparent" data-color-mode="light" data-light-theme="light" data-dark-theme="dark" > <svg height="20" class="d-flex position-absolute z-3 octicon height-full ml-2 color-fg-subtle" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="20" role="img"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg> <input aria-label="Search the blog" type="search" class="pl-6 search-field form-control p-2 flex-1" placeholder="Search the blog…" value="" name="s" id="search-input"> </div> <button type="submit" class="btn-mktg btn-muted-mktg font-weight-semibold ml-2 border-1 color-fg-default"> Search </button> </div> </form> <nav id="mobile-menu" class="mobile-menu position-relative overflow-y-auto flex-1 width-full rounded-top-3" aria-label="Navigation menu" aria-hidden="true" data-color-mode="light" data-light-theme="light" data-dark-theme="dark_dimmed"> <div class="p-5"> <h2 class="mb-5 text-bold color-fg-subtle">Categories</h2> <ul id="menu-new-primary-navigation" class="list-style-none"><li class="mb-5"><a href="https://github.blog/ai-and-ml/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default js-toggle" aria-controls="primary-mobile-78814-dropdown" aria-expanded="false" aria-haspopup="true" role="button">AI & ML<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right d-block mt-1 color-fg-subtle" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a> <ul aria-hidden="true" aria-label="AI & ML sub-menu" class="dropdown overflow-y-auto position-absolute top-0 left-0 right-0 bottom-0 flex-wrap p-5 list-style-none rounded-3 z-3 color-bg-default color-border-subtle" id="primary-mobile-78814-dropdown"> <li class="mb-5"><div class="mb-4"><button type="button" class="d-flex flex-items-center mb-4 p-0 border-0 text-semibold color-bg-transparent color-fg-subtle" aria-controls="primary-mobile-78814-dropdown" aria-expanded="true"><svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-left mr-1"><path d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"></path></svg>Back</button><a href="https://github.blog/ai-and-ml/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">AI & ML<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-2 mb-0 color-fg-muted">Learn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry.</p></div> <ul class="border-top list-style-none"> <li class="mt-4"><a href="https://github.blog/ai-and-ml/generative-ai/" class="text-bold lh-condensed-ultra color-fg-default">Generative AI</a><p class="mb-0 f5 color-fg-muted">Learn how to build with generative AI.</p></li> <li class="mt-4"><a href="https://github.blog/ai-and-ml/github-copilot/" class="text-bold lh-condensed-ultra color-fg-default">GitHub Copilot</a><p class="mb-0 f5 color-fg-muted">Change how you work with GitHub Copilot.</p></li> <li class="mt-4"><a href="https://github.blog/ai-and-ml/llms/" class="text-bold lh-condensed-ultra color-fg-default">LLMs</a><p class="mb-0 f5 color-fg-muted">Everything developers need to know about LLMs.</p></li> <li class="mt-4"><a href="https://github.blog/ai-and-ml/machine-learning/" class="text-bold lh-condensed-ultra color-fg-default">Machine learning</a><p class="mb-0 f5 color-fg-muted">Machine learning tips, tricks, and best practices.</p></li> </ul> </li> <li class="d-none"><div class="mb-4"><a href="https://github.blog/ai-and-ml/generative-ai/how-ai-code-generation-works/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">How AI code generation works</a><p class="mb-3 f5 color-fg-muted">Explore the capabilities and benefits of AI code generation and how it can improve your developer experience.</p><a href="https://github.blog/ai-and-ml/generative-ai/how-ai-code-generation-works/" target="" class="Link d-inline-flex flex-items-center">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></a></div></li> </ul> </li> <li class="mb-5"><a href="https://github.blog/developer-skills/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default js-toggle" aria-controls="primary-mobile-78819-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Developer skills<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right d-block mt-1 color-fg-subtle" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a> <ul aria-hidden="true" aria-label="Developer skills sub-menu" class="dropdown overflow-y-auto position-absolute top-0 left-0 right-0 bottom-0 flex-wrap p-5 list-style-none rounded-3 z-3 color-bg-default color-border-subtle" id="primary-mobile-78819-dropdown"> <li class="mb-5"><div class="mb-4"><button type="button" class="d-flex flex-items-center mb-4 p-0 border-0 text-semibold color-bg-transparent color-fg-subtle" aria-controls="primary-mobile-78819-dropdown" aria-expanded="true"><svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-left mr-1"><path d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"></path></svg>Back</button><a href="https://github.blog/developer-skills/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">Developer skills<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-2 mb-0 color-fg-muted">Resources for developers to grow in their skills and careers.</p></div> <ul class="border-top list-style-none"> <li class="mt-4"><a href="https://github.blog/developer-skills/application-development/" class="text-bold lh-condensed-ultra color-fg-default">Application development</a><p class="mb-0 f5 color-fg-muted">Insights and best practices for building apps.</p></li> <li class="mt-4"><a href="https://github.blog/developer-skills/career-growth/" class="text-bold lh-condensed-ultra color-fg-default">Career growth</a><p class="mb-0 f5 color-fg-muted">Tips & tricks to grow as a professional developer.</p></li> <li class="mt-4"><a href="https://github.blog/developer-skills/github/" class="text-bold lh-condensed-ultra color-fg-default">GitHub</a><p class="mb-0 f5 color-fg-muted">Improve how you use GitHub at work.</p></li> <li class="mt-4"><a href="https://github.blog/developer-skills/github-education/" class="text-bold lh-condensed-ultra color-fg-default">GitHub Education</a><p class="mb-0 f5 color-fg-muted">Learn how to move into your first professional role.</p></li> <li class="mt-4"><a href="https://github.blog/developer-skills/programming-languages-and-frameworks/" class="text-bold lh-condensed-ultra color-fg-default">Programming languages & frameworks</a><p class="mb-0 f5 color-fg-muted">Stay current on what’s new (or new again).</p></li> </ul> </li> <li class="d-none"><div class="mb-4"><a href="https://docs.github.com/en/get-started" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">Get started with GitHub documentation</a><p class="mb-3 f5 color-fg-muted">Learn how to start building, shipping, and maintaining software with GitHub.</p><a href="https://docs.github.com/en/get-started" target="" class="Link d-inline-flex flex-items-center">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></a></div></li> </ul> </li> <li class="mb-5"><a href="https://github.blog/engineering/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default js-toggle" aria-controls="primary-mobile-78825-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Engineering<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right d-block mt-1 color-fg-subtle" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a> <ul aria-hidden="true" aria-label="Engineering sub-menu" class="dropdown overflow-y-auto position-absolute top-0 left-0 right-0 bottom-0 flex-wrap p-5 list-style-none rounded-3 z-3 color-bg-default color-border-subtle" id="primary-mobile-78825-dropdown"> <li class="mb-5"><div class="mb-4"><button type="button" class="d-flex flex-items-center mb-4 p-0 border-0 text-semibold color-bg-transparent color-fg-subtle" aria-controls="primary-mobile-78825-dropdown" aria-expanded="true"><svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-left mr-1"><path d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"></path></svg>Back</button><a href="https://github.blog/engineering/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">Engineering<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-2 mb-0 color-fg-muted">Get an inside look at how we’re building the home for all developers.</p></div> <ul class="border-top list-style-none"> <li class="mt-4"><a href="https://github.blog/engineering/architecture-optimization/" class="text-bold lh-condensed-ultra color-fg-default">Architecture & optimization</a><p class="mb-0 f5 color-fg-muted">Discover how we deliver a performant and highly available experience across the GitHub platform.</p></li> <li class="mt-4"><a href="https://github.blog/engineering/engineering-principles/" class="text-bold lh-condensed-ultra color-fg-default">Engineering principles</a><p class="mb-0 f5 color-fg-muted">Explore best practices for building software at scale with a majority remote team.</p></li> <li class="mt-4"><a href="https://github.blog/engineering/infrastructure/" class="text-bold lh-condensed-ultra color-fg-default">Infrastructure</a><p class="mb-0 f5 color-fg-muted">Get a glimpse at the technology underlying the world’s leading AI-powered developer platform.</p></li> <li class="mt-4"><a href="https://github.blog/engineering/platform-security/" class="text-bold lh-condensed-ultra color-fg-default">Platform security</a><p class="mb-0 f5 color-fg-muted">Learn how we build security into everything we do across the developer lifecycle.</p></li> <li class="mt-4"><a href="https://github.blog/engineering/user-experience/" class="text-bold lh-condensed-ultra color-fg-default">User experience</a><p class="mb-0 f5 color-fg-muted">Find out what goes into making GitHub the home for all developers.</p></li> </ul> </li> <li class="d-none"><div class="mb-4"><a href="https://github.blog/engineering/how-we-use-github-to-be-more-productive-collaborative-and-secure/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">How we use GitHub to be more productive, collaborative, and secure</a><p class="mb-3 f5 color-fg-muted">Our engineering and security teams do some incredible work. Let’s take a look at how we use GitHub to be more productive, build collaboratively, and shift security left.</p><a href="https://github.blog/engineering/how-we-use-github-to-be-more-productive-collaborative-and-secure/" target="" class="Link d-inline-flex flex-items-center">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></a></div></li> </ul> </li> <li class="mb-5"><a href="https://github.blog/enterprise-software/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default js-toggle" aria-controls="primary-mobile-78832-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Enterprise software<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right d-block mt-1 color-fg-subtle" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a> <ul aria-hidden="true" aria-label="Enterprise software sub-menu" class="dropdown overflow-y-auto position-absolute top-0 left-0 right-0 bottom-0 flex-wrap p-5 list-style-none rounded-3 z-3 color-bg-default color-border-subtle" id="primary-mobile-78832-dropdown"> <li class="mb-5"><div class="mb-4"><button type="button" class="d-flex flex-items-center mb-4 p-0 border-0 text-semibold color-bg-transparent color-fg-subtle" aria-controls="primary-mobile-78832-dropdown" aria-expanded="true"><svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-left mr-1"><path d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"></path></svg>Back</button><a href="https://github.blog/enterprise-software/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">Enterprise software<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-2 mb-0 color-fg-muted">Explore how to write, build, and deploy enterprise software at scale.</p></div> <ul class="border-top list-style-none"> <li class="mt-4"><a href="https://github.blog/enterprise-software/automation/" class="text-bold lh-condensed-ultra color-fg-default">Automation</a><p class="mb-0 f5 color-fg-muted">Automating your way to faster and more secure ships.</p></li> <li class="mt-4"><a href="https://github.blog/enterprise-software/ci-cd/" class="text-bold lh-condensed-ultra color-fg-default">CI/CD</a><p class="mb-0 f5 color-fg-muted">Guides on continuous integration and delivery.</p></li> <li class="mt-4"><a href="https://github.blog/enterprise-software/collaboration/" class="text-bold lh-condensed-ultra color-fg-default">Collaboration</a><p class="mb-0 f5 color-fg-muted">Tips, tools, and tricks to improve developer collaboration.</p></li> <li class="mt-4"><a href="https://github.blog/enterprise-software/devops/" class="text-bold lh-condensed-ultra color-fg-default">DevOps</a><p class="mb-0 f5 color-fg-muted">DevOps resources for enterprise engineering teams.</p></li> <li class="mt-4"><a href="https://github.blog/enterprise-software/devsecops/" class="text-bold lh-condensed-ultra color-fg-default">DevSecOps</a><p class="mb-0 f5 color-fg-muted">How to integrate security into the SDLC.</p></li> <li class="mt-4"><a href="https://github.blog/enterprise-software/governance-and-compliance/" class="text-bold lh-condensed-ultra color-fg-default">Governance & compliance</a><p class="mb-0 f5 color-fg-muted">Ensuring your builds stay clean.</p></li> </ul> </li> <li class="d-none"><div class="mb-4"><a href="https://resources.github.com/artificial-intelligence/how-enterprise-engineering-teams-can-successfully-adopt-ai/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">How enterprise engineering teams can successfully adopt AI</a><p class="mb-3 f5 color-fg-muted">Learn how to bring AI to your engineering teams and maximize the value that you get from it.</p><a href="https://resources.github.com/artificial-intelligence/how-enterprise-engineering-teams-can-successfully-adopt-ai/" target="" class="Link d-inline-flex flex-items-center">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></a></div></li> </ul> </li> <li class="mb-5"><a href="https://github.blog/news-insights/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default js-toggle" aria-controls="primary-mobile-78840-dropdown" aria-expanded="false" aria-haspopup="true" role="button">News & insights<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right d-block mt-1 color-fg-subtle" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a> <ul aria-hidden="true" aria-label="News & insights sub-menu" class="dropdown overflow-y-auto position-absolute top-0 left-0 right-0 bottom-0 flex-wrap p-5 list-style-none rounded-3 z-3 color-bg-default color-border-subtle" id="primary-mobile-78840-dropdown"> <li class="mb-5"><div class="mb-4"><button type="button" class="d-flex flex-items-center mb-4 p-0 border-0 text-semibold color-bg-transparent color-fg-subtle" aria-controls="primary-mobile-78840-dropdown" aria-expanded="true"><svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-left mr-1"><path d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"></path></svg>Back</button><a href="https://github.blog/news-insights/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">News & insights<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-2 mb-0 color-fg-muted">Keep up with what’s new and notable from inside GitHub.</p></div> <ul class="border-top list-style-none"> <li class="mt-4"><a href="https://github.blog/news-insights/company-news/" class="text-bold lh-condensed-ultra color-fg-default">Company news</a><p class="mb-0 f5 color-fg-muted">An inside look at news and product updates from GitHub.</p></li> <li class="mt-4"><a href="https://github.blog/news-insights/product-news/" class="text-bold lh-condensed-ultra color-fg-default">Product</a><p class="mb-0 f5 color-fg-muted">The latest on GitHub’s platform, products, and tools.</p></li> <li class="mt-4"><a href="https://github.blog/news-insights/octoverse/" class="text-bold lh-condensed-ultra color-fg-default">Octoverse</a><p class="mb-0 f5 color-fg-muted">Insights into the state of open source on GitHub.</p></li> <li class="mt-4"><a href="https://github.blog/news-insights/policy-news-and-insights/" class="text-bold lh-condensed-ultra color-fg-default">Policy</a><p class="mb-0 f5 color-fg-muted">The latest policy and regulatory changes in software.</p></li> <li class="mt-4"><a href="https://github.blog/news-insights/research/" class="text-bold lh-condensed-ultra color-fg-default">Research</a><p class="mb-0 f5 color-fg-muted">Data-driven insights around the developer ecosystem.</p></li> <li class="mt-4"><a href="https://github.blog/news-insights/the-library/" class="text-bold lh-condensed-ultra color-fg-default">The library</a><p class="mb-0 f5 color-fg-muted">Older news and updates from GitHub.</p></li> </ul> </li> <li class="d-none"><div class="mb-4"><a href="https://github.blog/ai-and-ml/llms/unlocking-the-power-of-unstructured-data-with-rag/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">Unlocking the power of unstructured data with RAG</a><p class="mb-3 f5 color-fg-muted">Learn how to use retrieval-augmented generation (RAG) to capture more insights.</p><a href="https://github.blog/ai-and-ml/llms/unlocking-the-power-of-unstructured-data-with-rag/" target="" class="Link d-inline-flex flex-items-center">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></a></div></li> </ul> </li> <li class="mb-5"><a href="https://github.blog/open-source/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default js-toggle" aria-controls="primary-mobile-78848-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Open Source<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right d-block mt-1 color-fg-subtle" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a> <ul aria-hidden="true" aria-label="Open Source sub-menu" class="dropdown overflow-y-auto position-absolute top-0 left-0 right-0 bottom-0 flex-wrap p-5 list-style-none rounded-3 z-3 color-bg-default color-border-subtle" id="primary-mobile-78848-dropdown"> <li class="mb-5"><div class="mb-4"><button type="button" class="d-flex flex-items-center mb-4 p-0 border-0 text-semibold color-bg-transparent color-fg-subtle" aria-controls="primary-mobile-78848-dropdown" aria-expanded="true"><svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-left mr-1"><path d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"></path></svg>Back</button><a href="https://github.blog/open-source/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">Open Source<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-2 mb-0 color-fg-muted">Everything open source on GitHub.</p></div> <ul class="border-top list-style-none"> <li class="mt-4"><a href="https://github.blog/open-source/git/" class="text-bold lh-condensed-ultra color-fg-default">Git</a><p class="mb-0 f5 color-fg-muted">The latest Git updates.</p></li> <li class="mt-4"><a href="https://github.blog/open-source/maintainers/" class="text-bold lh-condensed-ultra color-fg-default">Maintainers</a><p class="mb-0 f5 color-fg-muted">Spotlighting open source maintainers.</p></li> <li class="mt-4"><a href="https://github.blog/open-source/social-impact/" class="text-bold lh-condensed-ultra color-fg-default">Social impact</a><p class="mb-0 f5 color-fg-muted">How open source is driving positive change.</p></li> <li class="mt-4"><a href="https://github.blog/open-source/gaming/" class="text-bold lh-condensed-ultra color-fg-default">Gaming</a><p class="mb-0 f5 color-fg-muted">Explore open source games on GitHub.</p></li> </ul> </li> <li class="d-none"><div class="mb-4"><a href="https://resources.github.com/software-development/innersource/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">An introduction to innersource</a><p class="mb-3 f5 color-fg-muted">Organizations worldwide are incorporating open source methodologies into the way they build and ship their own software.</p><a href="https://resources.github.com/software-development/innersource/" target="" class="Link d-inline-flex flex-items-center">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></a></div></li> </ul> </li> <li class="mb-5"><a href="https://github.blog/security/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default js-toggle" aria-controls="primary-mobile-78859-dropdown" aria-expanded="false" aria-haspopup="true" role="button">Security<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right d-block mt-1 color-fg-subtle" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a> <ul aria-hidden="true" aria-label="Security sub-menu" class="dropdown overflow-y-auto position-absolute top-0 left-0 right-0 bottom-0 flex-wrap p-5 list-style-none rounded-3 z-3 color-bg-default color-border-subtle" id="primary-mobile-78859-dropdown"> <li class="mb-5"><div class="mb-4"><button type="button" class="d-flex flex-items-center mb-4 p-0 border-0 text-semibold color-bg-transparent color-fg-subtle" aria-controls="primary-mobile-78859-dropdown" aria-expanded="true"><svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-left mr-1"><path d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"></path></svg>Back</button><a href="https://github.blog/security/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">Security<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-chevron-right ml-1 mt-1" role="presentation"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a><p class="mt-2 mb-0 color-fg-muted">Stay up to date on everything security.</p></div> <ul class="border-top list-style-none"> <li class="mt-4"><a href="https://github.blog/security/application-security/" class="text-bold lh-condensed-ultra color-fg-default">Application security</a><p class="mb-0 f5 color-fg-muted">Application security, explained.</p></li> <li class="mt-4"><a href="https://github.blog/security/supply-chain-security/" class="text-bold lh-condensed-ultra color-fg-default">Supply chain security</a><p class="mb-0 f5 color-fg-muted">Demystifying supply chain security.</p></li> <li class="mt-4"><a href="https://github.blog/security/vulnerability-research/" class="text-bold lh-condensed-ultra color-fg-default">Vulnerability research</a><p class="mb-0 f5 color-fg-muted">Updates from the GitHub Security Lab.</p></li> <li class="mt-4"><a href="https://github.blog/security/web-application-security/" class="text-bold lh-condensed-ultra color-fg-default">Web application security</a><p class="mb-0 f5 color-fg-muted">Helpful tips on securing web applications.</p></li> </ul> </li> <li class="d-none"><div class="mb-4"><a href="https://resources.github.com/security/the-enterprise-guide-to-ai-powered-devsecops/" class="d-flex flex-items-center flex-justify-start lh-condensed-ultra text-bold color-fg-default">The enterprise guide to AI-powered DevSecOps</a><p class="mb-3 f5 color-fg-muted">Learn about core challenges in DevSecOps, and how you can start addressing them with AI and automation.</p><a href="https://resources.github.com/security/the-enterprise-guide-to-ai-powered-devsecops/" target="" class="Link d-inline-flex flex-items-center">Learn more<svg xmlns="http://www.w3.org/2000/svg" class="octicon d-block ml-1 mt-1" viewBox="0 0 12 12" width="12" height="12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg></a></div></li> </ul> </li> </ul><ul id="menu-secondary-navigation" class="pt-5 border-top list-style-none"><li class="mb-5"><a href="https://github.blog/changelog/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default">Changelog</a></li> <li class="mb-5"><a href="https://docs.github.com/" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default">Docs<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-link-external d-block mt-1 color-fg-subtle" role="presentation"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li> <li class="mb-5"><a href="https://github.com/customer-stories" class="d-flex flex-items-center flex-justify-between lh-condensed-ultra text-bold color-fg-default">Customer stories<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-link-external d-block mt-1 color-fg-subtle" role="presentation"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li> </ul> <a data-analytics-click="Blog, click on button, text: Contact sales; ref_location:top nav;" class="d-block no-wrap my-3 btn-mktg btn-muted-mktg font-weight-semibold" href="https://github.com/enterprise/contact?ref_cta=contact%2520sales&ref_loc=banner&ref_page=blog" target="_blank">Contact sales</a> <a data-analytics-click="Blog, click on button, text: Try GitHub Copilot; ref_location:top nav;" class="d-block no-wrap btn-mktg font-weight-semibold" href="https://docs.github.com/en/copilot/quickstart?utm_source=github&utm_medium=blog&utm_campaign=topnav" target="_blank">Try GitHub Copilot</a> </div> </nav> </header> </div> <main id="start-of-content"> <header class="position-relative" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark_dimmed"> <div class="container-xl p-responsive-blog"> <div class="gutter-spacious"> <div class="col-12 offset-lg-1 col-lg-10 col-xl-8 py-5 py-md-6 "> <div class="f5 mb-5 mb-md-8"><span><span><a class="Link--primary" href="https://github.blog/">Home</a></span> <span class="mx-2 opacity-5">/</span> <span><a class="Link--primary" href="https://github.blog/engineering/">Engineering</a></span> <span class="mx-2 opacity-5">/</span> <span><a class="Link--primary" href="https://github.blog/engineering/user-experience/">User experience</a></span></span></div> <h1 class="h3-mktg lh-condensed mb-3 color-fg-default">Exploring the challenges in creating an accessible sortable list (drag-and-drop)</h1> <div class="f4-mktg"> <p>Drag-and-drop is a highly interactive and visual interface. We often use drag-and-drop to perform tasks like uploading files, reordering browser bookmarks, or even moving a card in solitaire.</p> </div> </div> <div class="offset-lg-1 col-lg-10"> <div class="position-relative overflow-hidden rounded-2 z-1"> <svg aria-hidden="true" width="1032" height="548" class=" d-block width-full height-auto" role="presentation"></svg> <img width="1200" height="630" src="https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?resize=1200%2C630" class="d-block cover-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?w=1200 1200w, https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?w=300 300w, https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?w=768 768w, https://github.blog/wp-content/uploads/2024/05/Collaboration-LightMode-3-1.png?w=1024 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /> </div> </div> </div> </div> <div class="position-absolute bottom-0 width-full" style="background:#fff; height:80px;"></div> </header> <section class="container-xl mx-auto p-responsive-blog mt-4"> <div class="gutter-spacious"> <div class="col-12 offset-lg-1 col-lg-10"> <div class="d-lg-flex flex-justify-between flex-items-center"> <div class="mb-4 mb-lg-0"> <div class="mb-1"> <div class="d-flex flex-items-center mb-6px"> <span> <span class="text-bold"> <a href="https://github.blog/author/kendallgassner/" title="Posts by Kendall Gassner" class="author url fn Link--primary no-wrap position-relative z-2" rel="author">Kendall Gassner</a><span class="mx-2">·</span><a target="_blank" href="https://github.com/kendallgassner" class="Link--primary" aria-label="GitHub profile of kendallgassner">@kendallgassner</a> </span> </span> </div> </div> <div data-color-mode="auto" data-light-theme="light_tritanopia" class="d-flex flex-column flex-md-row text-mono color-fg-muted"> <time datetime="2024-07-09" class="d-block"> July 9, 2024 </time> <span class="d-none d-md-block mx-3">|</span> <time datetime="2024-07-23" class="d-block mt-1 mt-md-0"> Updated July 23, 2024 </time> <div class="d-flex flex-items-center mt-2 mt-md-0"> <span class="d-none d-md-block mx-3">|</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="mr-2"> <path fill="currentcolor" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z"></path> </svg> 8 minutes </div> </div> </div> <ul class="list-style-none d-flex flex-items-center"> <li> <span class="text-semibold"> Share: </span> </li> <li class="ml-3"> <a href="https://x.com/share?text=Exploring%20the%20challenges%20in%20creating%20an%20accessible%20sortable%20list%20%28drag-and-drop%29&url=https%3A%2F%2Fgithub.blog%2Fengineering%2Fuser-experience%2Fexploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop%2F" target="_blank" rel="noopener noreferrer" class="d-flex flex-justify-center flex-items-center border circle px-2 py-2" aria-label="Share on X"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227" width="10" height="10"> <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="currentColor" /> </svg> </a> </li> <li class="ml-3"> <a href="https://www.facebook.com/sharer/sharer.php?t=Exploring%20the%20challenges%20in%20creating%20an%20accessible%20sortable%20list%20%28drag-and-drop%29&u=https%3A%2F%2Fgithub.blog%2Fengineering%2Fuser-experience%2Fexploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop%2F" target="_blank" rel="noopener noreferrer" class="d-flex flex-justify-center flex-items-center border circle px-2 py-2" aria-label="Share on Facebook"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.3 15.4" width="10" height="10"> <path d="M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z" fill="currentColor" /> </svg> </a> </li> <li class="ml-3"> <a href="https://www.linkedin.com/shareArticle?title=Exploring%20the%20challenges%20in%20creating%20an%20accessible%20sortable%20list%20%28drag-and-drop%29&url=https%3A%2F%2Fgithub.blog%2Fengineering%2Fuser-experience%2Fexploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop%2F" target="_blank" rel="noopener noreferrer" class="d-flex flex-justify-center flex-items-center border circle px-2 py-2" aria-label="Share on LinkedIn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18" width="10" height="10"> <path d="M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z" fill="currentColor" /> </svg> </a> </li> </ul> </div> <div class="indigo-separator mt-4"></div> </div> </div> </section> <div class="container-xl mx-auto p-responsive-blog mt-4 mt-md-7 mb-7 mb-md-9"> <div class="d-flex flex-wrap flex-justify-center gutter-spacious"> <section class="col-12 col-md-8 col-lg-7 post__content post-78695 post type-post status-publish format-standard has-post-thumbnail hentry category-engineering category-user-experience tag-accessibility"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body><p>Drag-and-drop is a highly interactive and visual interface. We often use drag-and-drop to perform tasks like uploading files, reordering browser bookmarks, or even moving a card in solitaire. It can be hard to imagine completing most of these tasks without a mouse and even harder without using a screen or visual aid. This is why the Accessibility team at GitHub considers drag-and-drop a “high-risk pattern,” often leading to accessibility barriers and a lack of effective solutions in the industry.</p> <p>Recently, our team worked to develop a solution for a more accessible sortable list, which we refer to as ‘one-dimensional drag-and-drop.’ In our first step toward making drag-and-drop more accessible, we scoped our efforts to explore moving items along a single axis.</p> <div class="image-frame image-frame-full border rounded-2 overflow-hidden d-flex flex-row flex-justify-center" style="background: #EAEEF2"><img data-recalc-dims="1" decoding="async" src="https://github.blog/wp-content/uploads/2024/07/image3.png?resize=1024%2C545" alt="An example of a sortable to do list. This list has 7 items all of which are in a single column. One of the the items is hovering over the list to indicate it is being dragged to another position." width="1024" height="545" class="aligncenter size-full wp-image-78699 width-fit" loading="lazy" srcset="https://github.blog/wp-content/uploads/2024/07/image3.png?w=2000 2000w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=300 300w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=768 768w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=1024 1024w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=1536 1536w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=1600 1600w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=800 800w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=400 400w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/07/image3.png?w=516 516w" sizes="(max-width: 1000px) 100vw, 1000px" /></div> <p>Based on our findings, here are some of the challenges we faced and how we solved them:</p> <h2 id="challenge-screen-readers-use-arrow-keys-to-navigate-through-content">Challenge: Screen readers use arrow keys to navigate through content<a href="#challenge-screen-readers-use-arrow-keys-to-navigate-through-content" class="heading-link pl-2 text-italic text-bold" aria-label="Challenge: Screen readers use arrow keys to navigate through content"></a></h2> <p>One of the very first challenges we faced involved setting up an interaction model for moving an item through keyboard navigation. We chose to use arrow keys as we wanted keyboard operation to feel natural for a visual keyboard user. However, this choice posed a problem for users who relied on screen readers to navigate throughout a webpage.</p> <p><strong>To note</strong>: Arrow keys are commonly used by screen readers to help users navigate through content, like reading text or navigating between cells in a table. Consequently, when we tested drag-and-drop with screen reader users, the users were unable to use the arrow keys to move the item as intended. The arrow keys ignored drag-and-drop actions and performed typical screen reader navigation instead.</p> <p>In order to override these key bindings we used <code>role='application'</code>.</p> <p><strong>Take note</strong>: I cannot talk about using <code>role='application'</code> without also providing a warning. <code>role='application'</code> should almost never be used. It is important to use <code>role='application'</code> sparingly and to scope it to the smallest possible element. The <code>role='application'</code> attribute alters how a screen reader operates, making it treat the element and its contents as a single application. </p><p>Considering the mentioned caution, we applied the role to the drag-and-drop trigger to restrict the scope of the DOM impacted by <code>role='application'</code>. Additionally, we exclusively added <code>role='application'</code> to the DOM when a user activates drag-and-drop. We remove <code>role='application'</code> when the user completes or cancels out of drag-and-drop. By employing <code>role='application'</code>, we are able to override or reassign the screen reader’s arrow commands to correspond with our drag-and-drop commands.</p> <p>Remember, even if implemented thoughtfully, it’s crucial to rely on feedback from daily screen reader users to ensure you have implemented <code>role='application'</code> correctly. Their feedback and experience should be the determining factor in assessing whether or not using <code>role='application'</code> is truly accessible and necessary.</p> <h2 id="challenge-nvda-simulates-mouse-events-when-a-user-presses-enter-or-space">Challenge: NVDA simulates mouse events when a user presses Enter or Space<a href="#challenge-nvda-simulates-mouse-events-when-a-user-presses-enter-or-space" class="heading-link pl-2 text-italic text-bold" aria-label="Challenge: NVDA simulates mouse events when a user presses Enter or Space"></a></h2> <p>Another challenge we faced was determining whether a mouse or keyboard event was triggered when an <a href="https://www.nvaccess.org/about-nvda/">NVDA screen reader</a> user activated drag-and-drop.</p> <p>When a user uses a mouse to drag-and-drop items, the expectation is that releasing the mouse button (triggering an <code>onMouseUp</code> event) will finalize the drag-and-drop operation. Whereas, when operating drag-and-drop via the keyboard, Enter or Escape is used to finalize the drag-and-drop operation.</p> <p><strong>To note</strong>: When a user activates a button with the Enter or Space key while using NVDA, the screen reader simulates an <code>onMouseDown</code> and <code>onMouseUp</code> event rather than an <code>onKeyDown</code> event.</p> <p>Because most NVDA users rely on keyboard operations to operate drag-and-drop instead of a mouse, we had to find a way to make sure our code ignored the <code>onMouseUp</code> event triggered by an NVDA Enter or Space key press.</p> <p>We accomplished this by using two HTML elements to separate keyboard and mouse functionality:<br> 1. A <a href="https://primer.style/components/icon-button">Primer Icon button</a> to handle keyboard interactions.<br> 2. An invisible overlay to capture mouse interactions.</p> <div class="image-frame image-frame-full border rounded-2 overflow-hidden d-flex flex-row flex-justify-center" style="background: #EAEEF2"><img data-recalc-dims="1" decoding="async" src="https://github.blog/wp-content/uploads/2024/07/image2.png?resize=1024%2C750" alt='A screenshot of the drag-and-drop trigger. Added to the screenshot are two informational text boxes the first explains the purpose of the invisible overlay, stating: "An empty <div> overlays the iconButton to handle mouse events. This is neither focusable nor visible to keyboard users. Associated event handlers: onMouseDown". The second text box explains the purpose of the visible iconButton, stating: "The iconButton can only be activated by keyboard users. This is not clickable for mouse users. Associated event handlers: onMouseDown, onKeyDown.' width="1024" height="750" class="aligncenter size-full wp-image-78698 width-fit" loading="lazy" srcset="https://github.blog/wp-content/uploads/2024/07/image2.png?w=1576 1576w, https://github.blog/wp-content/uploads/2024/07/image2.png?w=300 300w, https://github.blog/wp-content/uploads/2024/07/image2.png?w=768 768w, https://github.blog/wp-content/uploads/2024/07/image2.png?w=1024 1024w, https://github.blog/wp-content/uploads/2024/07/image2.png?w=1536 1536w" sizes="(max-width: 1000px) 100vw, 1000px" /></div> <h2 id="challenge-announcing-movements-in-rapid-succession">Challenge: Announcing movements in rapid succession<a href="#challenge-announcing-movements-in-rapid-succession" class="heading-link pl-2 text-italic text-bold" aria-label="Challenge: Announcing movements in rapid succession"></a></h2> <p>Once we had our keyboard operations working, our next big obstacle was <a href="https://dequeuniversity.com/tips/webpagechanges">announcing movements to users</a>, in particular announcing rapid movements of a selected item.</p> <p>To prepare for external user testing we tested our announcements ourselves with screen readers. Because we are not native screen reader users, we moved items slowly throughout the page and the announcements sounded great. However, users typically move items rapidly to complete tasks quickly, so our screen reader testing did not reflect how users would actually interact with our feature.</p> <p><strong>To note</strong>: It was not until user testing that we discovered that when a user moved an item in rapid succession the <code>aria-live</code> announcements would lag or sometimes announce movements that were no longer relevant. This would disorient users, leading to confusion about the item’s current position.</p> <p>To solve this problem, we added a small debounce to our move announcements. We tested various debounce speeds with users and landed on 100ms to ensure that we did not slow down a user’s ability to interact with drag-and-drop. Additionally, we used <code>aria-live='assertive'</code> to ensure that stale positional announcements are interrupted by the new positional announcement.</p> <pre><code class="language-javascript">export const debounceAnnouncement = debounce((announcement: string) => { announce(announcement, {assertive: true}) }, 100) </code></pre> <p><strong>Take note</strong>: <code>aria-live='assertive'</code> is reserved for time-sensitive or critical notifications. <code>aria-live='assertive'</code> interrupts any ongoing announcements the screen reader is making and can be disruptive for users. Use <code>aria-live='assertive'</code> sparingly and test with screen reader users to ensure your feature implores it correctly.</p> <h2 id="challenge-first-time-user-experience-of-a-new-pattern">Challenge: First-time user experience of a new pattern<a href="#challenge-first-time-user-experience-of-a-new-pattern" class="heading-link pl-2 text-italic text-bold" aria-label="Challenge: First-time user experience of a new pattern"></a></h2> <p><strong>To note</strong>: During user testing we discovered that some of our users found it difficult to operate drag-and-drop with a keyboard. Oftentimes, drag-and-drop is not keyboard accessible or screen reader accessible. As a result, users with disabilities might not have had the opportunity to use drag-and-drop before, making the operations unfamiliar to them.</p> <p>This problem was particularly challenging to solve because we wanted to make sure our instruction set was easy to find but not a constant distraction for users who frequently use the drag-and-drop functionality.</p> <p>To address this, we added a dialog with a set of instructions that would open when a user activated drag-and-drop via the keyboard. This dialog has a “don’t show this again” checkbox preference for users who feel like they have a good grasp on the interaction and no longer want a reminder.</p> <div class="image-frame image-frame-full border rounded-2 overflow-hidden d-flex flex-row flex-justify-center" style="background: #EAEEF2"><img data-recalc-dims="1" decoding="async" src="https://github.blog/wp-content/uploads/2024/07/image1.png?resize=1024%2C579" alt="A screenshot of the instruction dialog. The dialog contains a table with three rows. Each row contains two columns the first column is the movement and the second column is the keyboard command. At the bottom is the " don show this again checkbox. width="1024" height="579" class="aligncenter size-full wp-image-78697 width-fit" loading="lazy" srcset="https://github.blog/wp-content/uploads/2024/07/image1.png?w=1460 1460w, https://github.blog/wp-content/uploads/2024/07/image1.png?w=300 300w, https://github.blog/wp-content/uploads/2024/07/image1.png?w=768 768w, https://github.blog/wp-content/uploads/2024/07/image1.png?w=1024 1024w" sizes="(max-width: 1000px) 100vw, 1000px" /></div> <h2 id="challenge-moving-items-with-voice-control-in-a-scrollable-container">Challenge: Moving items with voice control in a scrollable container<a href="#challenge-moving-items-with-voice-control-in-a-scrollable-container" class="heading-link pl-2 text-italic text-bold" aria-label="Challenge: Moving items with voice control in a scrollable container"></a></h2> <p>One of the final big challenges we faced was operating drag-and-drop using voice control assistive technology. We found that using <a href="https://support.apple.com/en-us/111778">voice control</a> to drag-and-drop items in a non-scrollable list was straightforward, but when the list became scrollable it was nearly impossible to move an item from the top of the list to the bottom.</p> <p><strong>To note</strong>: Voice control displays an overlay of numbers next to interactive items on the screen when requested. These numbers are references to items a user can interact with. For example, if a user says, “Click item 5” and item 5 is a button on a web page the assistive technology will then click the button. These number references dynamically update as the user scrolls through the webpage. Because references are updated as a user scrolls, scrolling the page while dragging an item via a numerical reference will cause the item to be dropped.</p> <p>We found it critical to support two modes of operation in order to ensure that voice control users are able to sort items in a list. The first mode of operation, traditional drag-and-drop, has been discussed previously. The second mode is a move dialog.</p> <p>The move dialog is a form that allows users to move items in a list without having to use traditional drag-and-drop:</p> <div class="image-frame image-frame-full border rounded-2 overflow-hidden d-flex flex-row flex-justify-center" style="background: #EAEEF2"><img data-recalc-dims="1" decoding="async" src="https://github.blog/wp-content/uploads/2024/07/image4.png?resize=998%2C792" alt="A screenshot of the Move Dialog. At the top of the dialog is a span specifying the item being moved. Followed by a form to move items then a preview of the movement." width="998" height="792" class="aligncenter size-full wp-image-78700 width-fit" loading="lazy" srcset="https://github.blog/wp-content/uploads/2024/07/image4.png?w=998 998w, https://github.blog/wp-content/uploads/2024/07/image4.png?w=300 300w, https://github.blog/wp-content/uploads/2024/07/image4.png?w=768 768w" sizes="(max-width: 998px) 100vw, 998px" /></div> <p>The form includes two input fields: action and position.<br> The action field specifies the movement or direction of the operation, for example, “move item before” or “move item after.” And the position specifies the location of where the item should be moved.</p> <p>Below the input fields we show a preview of where an item will be moved based on the input values. This preview is announced using <code>aria-live</code> and provides a way for users to preview their movements before finalizing them.</p> <p>During our testing we found that the move dialog was the preferred mode of operation for several of our users who do not use voice control assistive technology. Our users felt more confident when using the move dialog to move items and we were delighted to find that our accessibility feature provided unexpected benefits to a wide range of users.</p> <p>In Summary, creating an accessible drag-and-drop pattern is challenging and it is important to leverage feedback and consider a diverse range of user needs. If you are working to create an accessible drag-and-drop, we hope our journey helps you understand the nuances and pitfalls of this complex pattern.</p> <p>A big thanks to my colleagues, <a href="https://github.com/alexislucio">Alexis Lucio</a>, <a href="https://github.com/ohiosveryown">Matt Pence</a>, <a href="https://github.com/hussam-i-am">Hussam Ghazzi</a>, and <a href="https://github.com/ayy-bc">Aarya BC</a>, for their hard work in making drag-and-drop more accessible. Your dedication and expertise have been invaluable. I am excited about the progress we made and what we will achieve in the future!</p> <p>Lastly, if you are interested in testing the future of drag-and-drop with us, consider <a href="https://forms.gle/23Jgw5tRwPLZHNTs5">joining our Customer Research Panel</a>.</p> </body></html> <section class="my-6 my-md-8 mt-md-0"> <hr class="post-tags-separator border-0 mt-0 mb-2" /> <div class="d-flex flex-items-start"> <h2 class="text-mono f4-mktg py-1 mr-3">Tags:</h2> <ul class="d-flex flex-wrap px-0 my-0 list-style-none post-tags"> <li class="my-0"> <a href="https://github.blog/tag/accessibility/" class="d-block border py-2 px-3 f5 lh-condensed-ultra text-semibold Link--primary" rel="tag"> accessibility </a> </li> </ul> </div> </section> <div class="mt-8 mb-8 mb-md-0"> <h2 class="h5-mktg"> Written by </h2> <div class="gradient-separator mt-3 mb-4"></div> <article class="author-bio mb-5 mb-md-4"> <div class="author-bio__content"> <div class="author-bio__avatar"> <picture> <source srcset="https://avatars.githubusercontent.com/u/15275462?v=4&s=200" width="120" height="120" media="(min-width: 768px)" /> <img class="d-block circle" src="https://avatars.githubusercontent.com/u/15275462?v=4&s=200" alt="Kendall Gassner" width="80" height="80" loading="lazy" decoding="async" > </picture> </div> <header class="author-bio__header"> <h3 class="f3-mktg text-bold mb-1"> <a href="https://github.blog/author/kendallgassner/" class="Link--primary color-fg-default">Kendall Gassner</a> </h3> <p class="mb-0 f4 lh-condensed"> <a href="https://github.com/kendallgassner" target="_blank">@kendallgassner</a> </p> </header> </div> </article> </div> </section> <aside id="sidebar" class="col-12 col-md-4 col-lg-3 post__sidebar" aria-label="Sidebar"> <section aria-label="Tags"> <ul class="d-none d-md-flex flex-items-start flex-wrap list-style-none mt-4 mt-md-0 mb-6 mb-md-8 post-tags"> <li class="my-0"> <a href="https://github.blog/tag/accessibility/" class="d-block border py-2 px-3 f5 lh-condensed-ultra text-semibold Link--primary" rel="tag"> accessibility </a> </li> </ul> </section> <div class="position-sticky top-md-scroll"> <div class="d-none d-md-block"> </div> <section aria-labelledby="accessibility-related-posts-title" class="mb-7 mb-md-8 mt-7 mt-md-0"><h2 class="h5-mktg aside-heading pb-3 border-bottom color-fg-muted color-border-muted" id="accessibility-related-posts-title">More on <a href="https://github.blog/tag/accessibility/" class="Link--primary">accessibility</a></h2><article class="py-4 d-flex flex-column"><div class="col-12 tease-text"><h3 class="h6-mktg mb-12px"><a href="https://github.blog/engineering/user-experience/how-to-make-storybook-interactions-respect-user-motion-preferences/" class="Link--primary">How to make Storybook Interactions respect user motion preferences</a></h3><div class="f4-mktg color-fg-muted"><p>With this custom addon, you can ensure your workplace remains accessible to users with motion sensitivities while benefiting from Storybook’s Interactions.</p> </div><div class="d-flex flex-items-center mb-6px"> <span> <span class="text-bold"> <a href="https://github.blog/author/kendallgassner/" title="Posts by Kendall Gassner" class="author url fn Link--primary no-wrap position-relative z-2" rel="author">Kendall Gassner</a> </span> </span> </div> </div></article><article class="py-4 d-flex flex-column border-top"><div class="col-12 tease-text"><h3 class="h6-mktg mb-12px"><a href="https://github.blog/engineering/engineering-principles/how-github-supports-neurodiverse-employees-and-how-your-company-can-too/" class="Link--primary">How GitHub supports neurodiverse employees (and how your company can, too)</a></h3><div class="f4-mktg color-fg-muted"><p>Teams with neurodivergent employees can be up to 30 percent more productive. Discover tips on how best to support them in your workplace.</p> </div><div class="d-flex flex-items-center mb-6px"> <span> <span class="text-bold"> <a href="https://github.blog/author/loujr/" title="Posts by Lou Nelson" class="author url fn Link--primary no-wrap position-relative z-2" rel="author">Lou Nelson</a> & <a href="https://github.blog/author/owenniblock/" title="Posts by Owen Niblock" class="author url fn Link--primary no-wrap position-relative z-2" rel="author">Owen Niblock</a> </span> </span> </div> </div></article></section> </div> </aside> </div> </div> <section class="container-xl p-responsive-blog mx-auto mt-12 mb-8"> <h2 class="h5-mktg mb-4 mb-lg-7 pb-3 border-bottom color-border-subtle"> Related posts </h2> <div class="post-columns post-columns--3-3"> <article class="color-border-muted card"> <div class="d-flex flex-column"> <div class="d-block col-12 position-relative rounded-2 mb-3 overflow-hidden tease-thumbnail" target="_self"> <svg aria-hidden="true" width="1032" height="548" class="width-full height-auto d-block" role="presentation"></svg> <img width="400" height="212" src="https://github.blog/wp-content/uploads/2024/01/Productivity-DarkMode-3.png?resize=400%2C212" class="d-block cover-image tease-thumbnail__img wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://github.blog/wp-content/uploads/2024/01/Productivity-DarkMode-3.png?w=300 300w, https://github.blog/wp-content/uploads/2024/01/Productivity-DarkMode-3.png?w=800 800w, https://github.blog/wp-content/uploads/2024/01/Productivity-DarkMode-3.png?w=400 400w, https://github.blog/wp-content/uploads/2024/01/Productivity-DarkMode-3.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/01/Productivity-DarkMode-3.png?w=516 516w, https://github.blog/wp-content/uploads/2024/01/Productivity-DarkMode-3.png?zoom=3&resize=400%2C212 1200w" sizes="(max-width: 400px) 100vw, 400px" /> </div> <div class="mb-1"><a href="https://github.blog/engineering/architecture-optimization/" class="f5-mktg text-gradient-purple-coral text-bold pb-1 position-relative z-2">Architecture & optimization</a></div> <h3 class="h6-mktg mb-2"> <a class="Link--primary card__link" href="https://github.blog/engineering/architecture-optimization/breaking-down-cpu-speed-how-utilization-impacts-performance/" target="_self"> Breaking down CPU speed: How utilization impacts performance </a> </h3> <div class="f4-mktg color-fg-muted"> <p>The Performance Engineering team at GitHub assessed how CPU performance degrades as utilization increases and how this relates to capacity.</p> </div> <footer> <div class="d-flex flex-items-center mb-6px"> <span> <span class="text-bold"> <a href="https://github.blog/author/astrikos/" title="Posts by Andreas Strikos" class="author url fn Link--primary no-wrap position-relative z-2" rel="author">Andreas Strikos</a> </span> </span> </div> </footer> </div> </article> <article class="color-border-muted card"> <div class="d-flex flex-column"> <div class="d-block col-12 position-relative rounded-2 mb-3 overflow-hidden tease-thumbnail" target="_self"> <svg aria-hidden="true" width="1032" height="548" class="width-full height-auto d-block" role="presentation"></svg> <img width="400" height="212" src="https://github.blog/wp-content/uploads/2024/02/Productivity-DarkMode-2-2.png?resize=400%2C212" class="d-block cover-image tease-thumbnail__img wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://github.blog/wp-content/uploads/2024/02/Productivity-DarkMode-2-2.png?w=300 300w, https://github.blog/wp-content/uploads/2024/02/Productivity-DarkMode-2-2.png?w=800 800w, https://github.blog/wp-content/uploads/2024/02/Productivity-DarkMode-2-2.png?w=400 400w, https://github.blog/wp-content/uploads/2024/02/Productivity-DarkMode-2-2.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/02/Productivity-DarkMode-2-2.png?w=516 516w, https://github.blog/wp-content/uploads/2024/02/Productivity-DarkMode-2-2.png?zoom=3&resize=400%2C212 1200w" sizes="(max-width: 400px) 100vw, 400px" /> </div> <div class="mb-1"><a href="https://github.blog/engineering/" class="f5-mktg text-gradient-purple-coral text-bold pb-1 position-relative z-2">Engineering</a></div> <h3 class="h6-mktg mb-2"> <a class="Link--primary card__link" href="https://github.blog/engineering/user-experience/how-to-make-storybook-interactions-respect-user-motion-preferences/" target="_self"> How to make Storybook Interactions respect user motion preferences </a> </h3> <div class="f4-mktg color-fg-muted"> <p>With this custom addon, you can ensure your workplace remains accessible to users with motion sensitivities while benefiting from Storybook’s Interactions.</p> </div> <footer> <div class="d-flex flex-items-center mb-6px"> <span> <span class="text-bold"> <a href="https://github.blog/author/kendallgassner/" title="Posts by Kendall Gassner" class="author url fn Link--primary no-wrap position-relative z-2" rel="author">Kendall Gassner</a> </span> </span> </div> </footer> </div> </article> <article class="color-border-muted card"> <div class="d-flex flex-column"> <div class="d-block col-12 position-relative rounded-2 mb-3 overflow-hidden tease-thumbnail" target="_self"> <svg aria-hidden="true" width="1032" height="548" class="width-full height-auto d-block" role="presentation"></svg> <img width="400" height="212" src="https://github.blog/wp-content/uploads/2024/09/image1_df4267.png?resize=400%2C212" class="d-block cover-image tease-thumbnail__img wp-post-image" alt="Image of a globe with GitHub Enterprise Cloud Data residency overlaying in the title" decoding="async" loading="lazy" srcset="https://github.blog/wp-content/uploads/2024/09/image1_df4267.png?w=300 300w, https://github.blog/wp-content/uploads/2024/09/image1_df4267.png?w=1600 1600w, https://github.blog/wp-content/uploads/2024/09/image1_df4267.png?w=800 800w, https://github.blog/wp-content/uploads/2024/09/image1_df4267.png?w=400 400w, https://github.blog/wp-content/uploads/2024/09/image1_df4267.png?w=1032 1032w, https://github.blog/wp-content/uploads/2024/09/image1_df4267.png?w=516 516w, https://github.blog/wp-content/uploads/2024/09/image1_df4267.png?zoom=3&resize=400%2C212 1200w" sizes="(max-width: 400px) 100vw, 400px" /> </div> <div class="mb-1"><a href="https://github.blog/engineering/" class="f5-mktg text-gradient-purple-coral text-bold pb-1 position-relative z-2">Engineering</a></div> <h3 class="h6-mktg mb-2"> <a class="Link--primary card__link" href="https://github.blog/engineering/engineering-principles/github-enterprise-cloud-with-data-residency/" target="_self"> GitHub Enterprise Cloud with data residency: How we built the next evolution of GitHub Enterprise using GitHub </a> </h3> <div class="f4-mktg color-fg-muted"> <p>How we used GitHub to build GitHub Enterprise Cloud with data residency.</p> </div> <footer> <div class="d-flex flex-items-center mb-6px"> <span> <span class="text-bold"> <a href="https://github.blog/author/turanuk/" title="Posts by Jim Wang" class="author url fn Link--primary no-wrap position-relative z-2" rel="author">Jim Wang</a> </span> </span> </div> </footer> </div> </article> </div> </section> <aside class="container-xl p-responsive-blog mx-auto mb-12"> <h2 class="h5-mktg border-bottom pb-3"> Explore more from GitHub </h2> <div class="d-flex flex-wrap ml-md-n4"> <div class="col-12 col-md-6 col-lg-3 d-flex mt-4 mt-lg-6 pl-md-4"> <div class="rounded-3 color-bg-subtle d-flex flex-column flex-items-start width-full p-5 f4-mktg color-fg-muted"> <img src="https://github.blog/wp-content/uploads/2024/07/Icon-Circle.svg" width="44" height="44" class="width-auto d-block mb-3" alt="Docs"/> <h3 class="f3-mktg text-bold color-fg-default mb-3"> Docs </h3> <div class="mb-auto"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body><p>Everything you need to master GitHub, all in one place.</p> </body></html> </div> <div class="mt-7"> <a data-analytics-click="Blog, click on module, text: Go to Docs; ref_location:bottom recirculation;" href="https://docs.github.com/" class="text-semibold arrow-target-mktg Link--primary" target="_blank" aria-label="Go to Docs"> Go to Docs <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-link-external ml-1"><path fill-rule="evenodd" d="M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z"></path></svg> </a> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 d-flex mt-4 mt-lg-6 pl-md-4"> <div class="rounded-3 color-bg-subtle d-flex flex-column flex-items-start width-full p-5 f4-mktg color-fg-muted"> <img src="https://github.blog/wp-content/uploads/2024/04/Icon.svg" width="44" height="44" class="width-auto d-block mb-3" alt="GitHub Universe 2024"/> <h3 class="f3-mktg text-bold color-fg-default mb-3"> GitHub Universe 2024 </h3> <div class="mb-auto"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body><p>Get tickets to the 10th anniversary of our global developer event on AI, DevEx, and security.</p> </body></html> </div> <div class="mt-7"> <a data-analytics-click="Blog, click on module, text: Get tickets; ref_location:bottom recirculation;" href="https://githubuniverse.com/?utm_source=Blog&utm_medium=GitHub&utm_campaign=blog-module" class="text-semibold arrow-target-mktg Link--primary" target="_blank" aria-label="Get tickets"> Get tickets <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-link-external ml-1"><path fill-rule="evenodd" d="M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z"></path></svg> </a> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 d-flex mt-4 mt-lg-6 pl-md-4"> <div class="rounded-3 color-bg-subtle d-flex flex-column flex-items-start width-full p-5 f4-mktg color-fg-muted"> <img src="https://github.blog/wp-content/uploads/2022/05/Copilot_Blog_Icon-1.svg" width="44" height="44" class="width-auto d-block mb-3" alt="GitHub Copilot"/> <h3 class="f3-mktg text-bold color-fg-default mb-3"> GitHub Copilot </h3> <div class="mb-auto"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body><p>Don’t fly solo. Try 30 days for free.</p> </body></html> </div> <div class="mt-7"> <a data-analytics-click="Blog, click on module, text: Learn more; ref_location:bottom recirculation;" href="https://github.blog/ai-and-ml/github-copilot/" class="text-semibold arrow-target-mktg Link--primary" target="_blank" aria-label="Learn more"> Learn more <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path class="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg> </a> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 d-flex mt-4 mt-lg-6 pl-md-4"> <div class="rounded-3 color-bg-subtle d-flex flex-column flex-items-start width-full p-5 f4-mktg color-fg-muted"> <img src="https://github.blog/wp-content/uploads/2022/05/careers.svg" width="44" height="44" class="width-auto d-block mb-3" alt="Work at GitHub!"/> <h3 class="f3-mktg text-bold color-fg-default mb-3"> Work at GitHub! </h3> <div class="mb-auto"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body><p><span style="font-weight: 400">Check out our current job openings.</span></p> </body></html> </div> </div> </div> </div> </aside> <div class="py-6 py-lg-8 color-bg-subtle" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark"> <div class="container-xl p-responsive-blog"> <section id="newsletter" class="newsletter rounded-2"> <div class="color-bg-subtle rounded-2"> <div class="d-flex flex-row flex-wrap gutter-spacious py-5 px-4 py-md-6 px-md-5"> <div class="col-12 col-lg-6 col-xl-7"> <h2 class="h4-mktg color-fg-default"> We do newsletters, too</h2> <p class="f3-mktg color-fg-muted mt-2 mb-3">Discover tips, technical guides, and best practices in our biweekly newsletter just for devs.</p> </div> <div class="col-12 col-lg-6 col-xl-5"> <form method="post" action="https://s88570519.t.eloqua.com/e/f2?elqFormName=copynewsletter-signup-form-637872624660309567&elqSiteID=88570519" class="js-form-validator"> <div class="newsletter-form d-md-flex flex-row mt-0 mb-3 rounded-2 required form-group"> <div class="m-0 width-full"> <label for="newsletter_emailAddress" class="screen-reader-text">Your email address</label> <input type="email" required id="newsletter_emailAddress" name="emailAddress" placeholder="Your email address" class="required js-validity-check d-block width-full height-md-full mb-2 mb-md-0 f4-mktg newsletter-field rounded-2" /> </div> <input type="hidden" name="classification" value="Practitioner"> <button type="submit" class="js-form-validator-submit newsletter-submit flex-shrink-0 arrow-target-mktg d-none d-md-flex flex-row f3-mktg flex-items-center text-semibold rounded-2"> <span>Subscribe</span> <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="24" height="24" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path class="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg> </button> </div> <div class="form-checkbox color-fg-muted f6-mktg m-0 mt-2 form-group"> <label class="text-normal"> <input id="optincheckbox" name="marketingEmailOptIn1" type="checkbox" value="True"> Yes please, I’d like GitHub and affiliates to use my information for personalized communications, targeted advertising and campaign effectiveness. See the <a href="https://github.com/site/privacy" target="blank">GitHub Privacy Statement</a> for more details. </label> </div> <button type="submit" class="js-form-validator-submit newsletter-submit flex-shrink-0 arrow-target-mktg mt-3 d-flex d-md-none flex-row f3-mktg flex-items-center text-semibold rounded-2"> <span>Subscribe</span> <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="24" height="24" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path class="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg> </button> </form> </div> </div> </div> </section> </div> </div> </main> <div data-color-mode="dark" data-light-theme="light" data-dark-theme="dark"> <footer class="footer pt-6"> <div class="container-xl p-responsive-blog"> <div class="d-flex flex-wrap py-5 mb-5"> <div class="col-12 col-lg-4 mb-5"> <a href="https://github.com/" data-ga-click="Resources, go to home, resources footer" class="color-fg-default" aria-label="Go to GitHub homepage"> <svg height="30" class="octicon octicon-logo-github" viewBox="0 0 45 16" version="1.1" width="84" aria-hidden="true"> <path fill-rule="evenodd" d="M18.53 12.03h-.02c.009 0 .015.01.024.011h.006l-.01-.01zm.004.011c-.093.001-.327.05-.574.05-.78 0-1.05-.36-1.05-.83V8.13h1.59c.09 0 .16-.08.16-.19v-1.7c0-.09-.08-.17-.16-.17h-1.59V3.96c0-.08-.05-.13-.14-.13h-2.16c-.09 0-.14.05-.14.13v2.17s-1.09.27-1.16.28c-.08.02-.13.09-.13.17v1.36c0 .11.08.19.17.19h1.11v3.28c0 2.44 1.7 2.69 2.86 2.69.53 0 1.17-.17 1.27-.22.06-.02.09-.09.09-.16v-1.5a.177.177 0 00-.146-.18zM42.23 9.84c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25zm2.43-.16c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88zm-8.72-3.61h-2.1c-.11 0-.17.08-.17.19v5.44s-.55.39-1.3.39-.97-.34-.97-1.09V6.25c0-.09-.08-.17-.17-.17h-2.14c-.09 0-.17.08-.17.17v5.11c0 2.2 1.23 2.75 2.92 2.75 1.39 0 2.52-.77 2.52-.77s.05.39.08.45c.02.05.09.09.16.09h1.34c.11 0 .17-.08.17-.17l.02-7.47c0-.09-.08-.17-.19-.17zm-23.7-.01h-2.13c-.09 0-.17.09-.17.2v7.34c0 .2.13.27.3.27h1.92c.2 0 .25-.09.25-.27V6.23c0-.09-.08-.17-.17-.17zm-1.05-3.38c-.77 0-1.38.61-1.38 1.38 0 .77.61 1.38 1.38 1.38.75 0 1.36-.61 1.36-1.38 0-.77-.61-1.38-1.36-1.38zm16.49-.25h-2.11c-.09 0-.17.08-.17.17v4.09h-3.31V2.6c0-.09-.08-.17-.17-.17h-2.13c-.09 0-.17.08-.17.17v11.11c0 .09.09.17.17.17h2.13c.09 0 .17-.08.17-.17V8.96h3.31l-.02 4.75c0 .09.08.17.17.17h2.13c.09 0 .17-.08.17-.17V2.6c0-.09-.08-.17-.17-.17zM8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17z"></path> </svg> </a> </div> <div class="col-6 col-sm-3 col-lg-2 mb-6 mb-md-2 pr-3 pr-lg-0 pl-lg-4"><h2 class="h5 mb-3 text-mono color-text-tertiary text-normal">Product</h2><ul class="list-style-none text-gray f5"><li class="lh-condensed mb-3"><a href="https://github.com/features" data-ga-click="Site Foundation Components, go to Features, site foundation components footer" class="Link--secondary">Features</a></li><li class="lh-condensed mb-3"><a href="https://github.com/security" data-ga-click="Site Foundation Components, go to Security, site foundation components footer" class="Link--secondary">Security</a></li><li class="lh-condensed mb-3"><a href="https://github.com/enterprise" data-ga-click="Site Foundation Components, go to Enterprise, site foundation components footer" class="Link--secondary">Enterprise</a></li><li class="lh-condensed mb-3"><a href="https://github.com/customer-stories?type=enterprise" data-ga-click="Site Foundation Components, go to Customer Stories, site foundation components footer" class="Link--secondary">Customer Stories</a></li><li class="lh-condensed mb-3"><a href="https://github.com/pricing" data-ga-click="Site Foundation Components, go to Pricing, site foundation components footer" class="Link--secondary">Pricing</a></li><li class="lh-condensed mb-3"><a href="https://resources.github.com/" data-ga-click="Site Foundation Components, go to Resources, site foundation components footer" class="Link--secondary">Resources</a></li></ul></div><div class="col-6 col-sm-3 col-lg-2 mb-6 mb-md-2 pr-3 pr-lg-0 pl-lg-4"><h2 class="h5 mb-3 text-mono color-text-tertiary text-normal">Platform</h2><ul class="list-style-none text-gray f5"><li class="lh-condensed mb-3"><a href="https://developer.github.com/" data-ga-click="Site Foundation Components, go to Developer API, site foundation components footer" class="Link--secondary">Developer API</a></li><li class="lh-condensed mb-3"><a href="https://partner.github.com/" data-ga-click="Site Foundation Components, go to Partners, site foundation components footer" class="Link--secondary">Partners</a></li><li class="lh-condensed mb-3"><a href="https://atom.io/" data-ga-click="Site Foundation Components, go to Atom, site foundation components footer" class="Link--secondary">Atom</a></li><li class="lh-condensed mb-3"><a href="https://www.electronjs.org/" data-ga-click="Site Foundation Components, go to Electron, site foundation components footer" class="Link--secondary">Electron</a></li><li class="lh-condensed mb-3"><a href="https://desktop.github.com/" data-ga-click="Site Foundation Components, go to GitHub Desktop, site foundation components footer" class="Link--secondary">GitHub Desktop</a></li></ul></div><div class="col-6 col-sm-3 col-lg-2 mb-6 mb-md-2 pr-3 pr-lg-0 pl-lg-4"><h2 class="h5 mb-3 text-mono color-text-tertiary text-normal">Support</h2><ul class="list-style-none text-gray f5"><li class="lh-condensed mb-3"><a href="https://docs.github.com/" data-ga-click="Site Foundation Components, go to Docs, site foundation components footer" class="Link--secondary">Docs</a></li><li class="lh-condensed mb-3"><a href="https://github.community/" data-ga-click="Site Foundation Components, go to Community Forum, site foundation components footer" class="Link--secondary">Community Forum</a></li><li class="lh-condensed mb-3"><a href="https://services.github.com/" data-ga-click="Site Foundation Components, go to Training, site foundation components footer" class="Link--secondary">Training</a></li><li class="lh-condensed mb-3"><a href="https://www.githubstatus.com/" data-ga-click="Site Foundation Components, go to Status, site foundation components footer" class="Link--secondary">Status</a></li><li class="lh-condensed mb-3"><a href="https://support.github.com/" data-ga-click="Site Foundation Components, go to Contact, site foundation components footer" class="Link--secondary">Contact</a></li></ul></div><div class="col-6 col-sm-3 col-lg-2 mb-6 mb-md-2 pr-3 pr-lg-0 pl-lg-4"><h2 class="h5 mb-3 text-mono color-text-tertiary text-normal">Company</h2><ul class="list-style-none text-gray f5"><li class="lh-condensed mb-3"><a href="https://github.com/about" data-ga-click="Site Foundation Components, go to About, site foundation components footer" class="Link--secondary">About</a></li><li class="lh-condensed mb-3"><a href="https://github.blog/" data-ga-click="Site Foundation Components, go to Blog, site foundation components footer" class="Link--secondary">Blog</a></li><li class="lh-condensed mb-3"><a href="https://github.com/about/careers" data-ga-click="Site Foundation Components, go to Careers, site foundation components footer" class="Link--secondary">Careers</a></li><li class="lh-condensed mb-3"><a href="https://github.com/about/press" data-ga-click="Site Foundation Components, go to Press, site foundation components footer" class="Link--secondary">Press</a></li><li class="lh-condensed mb-3"><a href="https://shop.github.com/" data-ga-click="Site Foundation Components, go to Shop, site foundation components footer" class="Link--secondary">Shop</a></li></ul></div> </div> </div> <div class="color-bg-subtle"> <div class="container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center"> <ul class="list-style-none d-flex flex-items-center mb-3 mb-sm-0 lh-condensed-ultra"> <li class="mr-3"> <a href="https://twitter.com/github" data-ga-click="Blog, go to X, resources footer" style="color: #959da5;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227" class="d-block" height="18"> <title>X icon</title> <path xmlns="http://www.w3.org/2000/svg" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" fill="currentColor"></path> </svg> <span class="sr-only">GitHub on X</span> </a> </li> <li class="mr-3"> <a href="https://www.facebook.com/GitHub" data-ga-click="Blog, go to Facebook, resources footer" style="color: #959da5;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.3 15.4" class="d-block" height="18"> <title>Facebook icon</title> <path d="M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z" fill="currentColor"></path> </svg> <span class="sr-only">GitHub on Facebook</span> </a> </li> <li class="mr-3"> <a href="https://www.youtube.com/github" data-ga-click="Blog, go to YouTube, resources footer" style="color: #959da5;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.17 13.6" class="d-block" height="16"> <title>YouTube icon</title> <path d="M18.77 2.13A2.4 2.4 0 0 0 17.09.42C15.59 0 9.58 0 9.58 0a57.55 57.55 0 0 0-7.5.4A2.49 2.49 0 0 0 .39 2.13 26.27 26.27 0 0 0 0 6.8a26.15 26.15 0 0 0 .39 4.67 2.43 2.43 0 0 0 1.69 1.71c1.52.42 7.5.42 7.5.42a57.69 57.69 0 0 0 7.51-.4 2.4 2.4 0 0 0 1.68-1.71 25.63 25.63 0 0 0 .4-4.67 24 24 0 0 0-.4-4.69zM7.67 9.71V3.89l5 2.91z" fill="currentColor"></path> </svg> <span class="sr-only">GitHub on YouTube</span> </a> </li> <li class="mr-3 flex-self-start"> <a href="https://www.twitch.tv/github" data-ga-click="Blog, go to Twitch, resources footer" style="color: #959da5;"> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="d-block" height="18"> <title>Twitch icon</title> <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z" fill="currentColor"/> </svg> <span class="sr-only">GitHub on Twitch</span> </a> </li> <li class="mr-3 flex-self-start"> <a href="https://www.tiktok.com/@github" data-ga-click="Blog, go to TikTok, resources footer" style="color: #959da5;"> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="d-block" height="18"> <title>TikTok icon</title> <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" fill="currentColor"/> </svg> <span class="sr-only">GitHub on TikTok</span> </a> </li> <li class="mr-3 flex-self-start"> <a href="https://www.linkedin.com/company/github" data-ga-click="Blog, go to Linkedin, resources footer" style="color: #959da5;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18" class="d-block" height="18"> <title>LinkedIn icon</title> <path d="M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z" fill="currentColor"></path> </svg> <span class="sr-only">GitHub on LinkedIn</span> </a> </li> <li> <a href="https://github.com/github" data-ga-click="Blog, go to github's org, resources footer" style="color: #959da5;"> <svg height="20" class="octicon octicon-mark-github d-block" alt="" viewBox="0 0 16 16" version="1.1" width="20" aria-hidden="true"> <title>GitHub icon</title> <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path> </svg> <span class="sr-only">GitHub’s organization on GitHub</span> </a> </li> </ul> <ul class="list-style-none d-flex flex-wrap text-gray"> <li class="mr-3">© 2024 GitHub, Inc.</li> <li class="mr-3"> <a href="https://docs.github.com/en/github/site-policy/github-terms-of-service" data-ga-click="Site Foundation Components, go to terms, site foundation components footer" class="Link--secondary">Terms</a> </li> <li class="mr-3"> <a href="https://docs.github.com/en/github/site-policy/github-privacy-statement" data-ga-click="Site Foundation Components, go to privacy, site foundation components footer" class="Link--secondary">Privacy</a> </li> <li class="mr-3"> <button type="button" class="btn-link Link--secondary" onClick="_ghcc.showPreferences()">Manage Cookies</button> </li> <li class="mr-3"> <button type="button" class="btn-link Link--secondary" onClick="_ghcc.showPreferences()">Do not share my personal information</button> </li> </ul> </div> </div> </footer> </div> <div id="ghcc" style="position: sticky; bottom: 0; z-index: 99999;"></div><script src="https://ghcc.githubassets.com/ghcc.min.js" id="github_cookie_consent-js"></script> <script src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-4.js" id="github_microsoft_analytics-js"></script> <script type="text/javascript" src="https://github.blog/_static/??/wp-content/plugins/gh-cookie-consent-and-tracking/dist/js/cookie-consent-and-tracking.js,/wp-includes/js/dist/hooks.min.js?m=1732206009j" ></script><script src="https://github.blog/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script type="text/javascript" src="https://github.blog/wp-includes/js/dist/url.min.js?m=1732206009g" ></script><script src="https://github.blog/wp-includes/js/dist/api-fetch.min.js?ver=4c185334c5ec26e149cc" id="wp-api-fetch-js"></script> <script id="wp-api-fetch-js-after"> wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "https://github.blog/wp-json/" ) ); wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "8431ea5ba1" ); wp.apiFetch.use( wp.apiFetch.nonceMiddleware ); wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware ); wp.apiFetch.nonceEndpoint = "https://github.blog/wp-admin/admin-ajax.php?action=rest-nonce"; </script> <script type="text/javascript" src="https://github.blog/wp-content/themes/github-2021/dist/js/site-script.js?m=1732205351g" ></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js?ver=11.4.0" id="highlightjs-js"></script> <script id="highlightjs-js-after"> hljs.highlightAll() </script> <script integrity="sha256-kAnFXX7lCXF9K2o4g5q1lKyk167yRq6C4TiXWtbgvQw=" crossorigin="anonymous" src="https://analytics.githubassets.com/v1.1.0/hydro-marketing.min.js?ver=6.6.2" id="hydro-analytics-js"></script> <script src="https://stats.wp.com/e-202448.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script id="jetpack-stats-js-after"> _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"153214340\",\"post\":\"78695\",\"tz\":\"-8\",\"srv\":\"github.blog\",\"hp\":\"vip\",\"j\":\"1:14.0\"}") ]); _stq.push([ "clickTrackerInit", "153214340", "78695" ]); </script> </body> </html>