CINXE.COM

<!DOCTYPE html><html lang="en"> <head><title>Git Articles - 30 seconds of code</title><meta name="description" content="An article collection of simplified git documentation and tips, covering most commonly-used commands and covering various use-cases."><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"><meta property="og:title" content="Git Articles - 30 seconds of code"><meta property="og:description" content="An article collection of simplified git documentation and tips, covering most commonly-used commands and covering various use-cases."><meta property="og:type" content="website"><meta property="og:image" content="https://www.30secondsofcode.org/assets/splash/keyboard-coffee-600.webp"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json">{"@context":"https://schema.org","@type":"ItemList","url":"https://www.30secondsofcode.org/git/p/1","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.30secondsofcode.org/git/p/1"},"name":"Git Articles","numberOfItems":24,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://www.30secondsofcode.org/git/s/stashing","name":"A guide to Git stashing"},{"@type":"ListItem","position":2,"url":"https://www.30secondsofcode.org/git/s/aliases","name":"Customize Git using aliases for common operations"},{"@type":"ListItem","position":3,"url":"https://www.30secondsofcode.org/git/s/purge-file","name":"Purge a file from Git history"},{"@type":"ListItem","position":4,"url":"https://www.30secondsofcode.org/git/s/sort-branches-by-date","name":"View Git branches sorted by date"},{"@type":"ListItem","position":5,"url":"https://www.30secondsofcode.org/git/s/find-merge-commit","name":"How can I find the merge commit given a Git commit?"},{"@type":"ListItem","position":6,"url":"https://www.30secondsofcode.org/git/s/delete-branch","name":"Delete a Git branch"},{"@type":"ListItem","position":7,"url":"https://www.30secondsofcode.org/git/s/view-merged-branches","name":"View all merged Git branches"},{"@type":"ListItem","position":8,"url":"https://www.30secondsofcode.org/git/s/view-commits-in-date-range","name":"View Git commits in a specific date range"},{"@type":"ListItem","position":9,"url":"https://www.30secondsofcode.org/git/s/interactive-rebase","name":"Perform an interactive rebase in Git"},{"@type":"ListItem","position":10,"url":"https://www.30secondsofcode.org/git/s/view-commits-by-string","name":"View Git commits that manipulated a specific string"},{"@type":"ListItem","position":11,"url":"https://www.30secondsofcode.org/git/s/set-or-amend-commit-author","name":"Create a commit by a different author in Git"},{"@type":"ListItem","position":12,"url":"https://www.30secondsofcode.org/git/s/branches-containing-commit","name":"Find branches containing a specific Git commit"},{"@type":"ListItem","position":13,"url":"https://www.30secondsofcode.org/git/s/view-all-branches","name":"View all Git branches"},{"@type":"ListItem","position":14,"url":"https://www.30secondsofcode.org/git/s/split-commit","name":"Split a Git commit into multiple commits"},{"@type":"ListItem","position":15,"url":"https://www.30secondsofcode.org/git/s/remove-file-from-commit","name":"Remove a file from the last Git commit"},{"@type":"ListItem","position":16,"url":"https://www.30secondsofcode.org/git/s/move-commits-to-branch","name":"Move Git commits from master to a new branch"},{"@type":"ListItem","position":17,"url":"https://www.30secondsofcode.org/git/s/find-lost-files","name":"Find lost files using Git"},{"@type":"ListItem","position":18,"url":"https://www.30secondsofcode.org/git/s/view-undo-history","name":"View Git \"undo\" history"},{"@type":"ListItem","position":19,"url":"https://www.30secondsofcode.org/git/s/merge-branch-merge-commit","name":"Merge a branch in Git"},{"@type":"ListItem","position":20,"url":"https://www.30secondsofcode.org/git/s/view-commits-by-author-or-committer","name":"View Git commits by a certain author or committer"},{"@type":"ListItem","position":21,"url":"https://www.30secondsofcode.org/git/s/view-changes-summary","name":"View a summary of changes between two Git commits"},{"@type":"ListItem","position":22,"url":"https://www.30secondsofcode.org/git/s/force-update-remote-branch","name":"How can I update a remote branch after rewriting Git history?"},{"@type":"ListItem","position":23,"url":"https://www.30secondsofcode.org/git/s/fast-forward-merge","name":"How does Git's fast-forward mode work?"},{"@type":"ListItem","position":24,"url":"https://www.30secondsofcode.org/git/s/view-commit-graph","name":"View a visual graph of the Git repository"}]}</script><link rel="sitemap" href="/sitemap.xml" type="application/xml"><link rel="alternate" href="/feed" type="application/rss+xml" title="30secondsofcode.org"><link rel="preload" type="font/woff2" href="/assets/Inter.var.woff2" as="font" crossorigin><link rel="preload" type="font/woff2" href="/assets/RobotoMono-Regular.woff2" as="font" crossorigin><link rel="icon" href="/assets/icons/favicon-32x32.png?v=30swp20231218115417" type="image/png"><link rel="stylesheet" href="/assets/print.css?v=30swp20231218115417" media="print"><link rel="manifest" href="/manifest.webmanifest" crossorigin><meta name="theme-color" content="#07071c"><link rel="icon" sizes="192x192" href="/assets/icons/icon-192x192.png?v=30swp20231218115417"><link rel="apple-touch-icon" href="/assets/icons/icon-180x180.png?v=30swp20231218115417"><link rel="canonical" href="https://www.30secondsofcode.org/git/p/1"><script>(function(){const timestamp = "195f29fc2e2"; })();</script><style>@charset "UTF-8";@layer framework{@font-face{font-family:Inter;font-weight:100 1000;font-display:swap;src:local("Inter Var"),local("Inter Variable"),local("Inter-Variable"),url(/assets/Inter.var.woff2) format("woff2 supports variations"),url(/assets/Inter.var.woff2) format("woff2-variations")}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Mono"),local("RobotoMono-Regular"),url(/assets/RobotoMono-Regular.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Mono;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Mono Italic"),local("RobotoMono-Italic"),url(/assets/RobotoMono-Italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(/assets/RobotoMono-Medium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}:root{--color-background: hsl(240, 61%, 7%);--color-background-light: hsl(240, 39%, 14%);--color-text: hsl(240, 10%, 90%);--color-text-light: hsl(240, 10%, 80%);--color-text-lighter: hsl(240, 10%, 70%);--color-primary: hsl(217, 98%, 66%);--color-primary-light: hsl(217, 98%, 77%);--color-warning: hsl(29, 91%, 53%);--color-caution: hsl(0, 98%, 64%);--color-code-background: hsl(225, 42%, 16%);--color-border: hsl(235, 25%, 27%);--color-border-light: hsl(235, 15%, 41%);--color-scrollbar-knob: hsl(240, 35%, 17%);--color-scrollbar-knob-active: hsl(240, 30%, 23%);--color-selection-background: hsl(230, 98%, 58%);--font-xs: .8125rem;--font-sm: 1rem;--font-md: 1.125rem;--font-lg: 1.3125rem;--font-xl: 1.625rem;--font-x2: 2rem;--font-x3: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-strong: 600;--line-height-loose: 1.75;--line-height-normal: 1.5;--line-height-tight: 1.25;--spacing-1: 2px;--spacing-2: 4px;--spacing-4: 8px;--spacing-6: 12px;--spacing-8: 16px;--spacing-10: 20px;--spacing-12: 24px;--spacing-16: 32px;--spacing-20: 40px;--spacing-24: 48px;--border-radius-small: 2px;--border-radius-medium: 4px;--border-radius-large: 8px;--border-width-hairline: .5px;--border-width-thin: 1px;--border-width-medium: 2px;--border-width-thick: 4px;--animation-duration-short: .2s;--animation-duration-medium: .3s;--animation-duration-long: .45s}@media (prefers-reduced-motion: reduce){:root{--animation-duration-short: .15s;--animation-duration-medium: .15s;--animation-duration-long: .15s}}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid}*{margin:0}html,body{height:100%}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--color-background);color:var(--color-text);-webkit-font-smoothing:antialiased}[hidden]{display:none}:focus-visible{outline-color:var(--color-primary)}::selection{background-color:var(--color-selection-background);color:var(--color-text)}::backdrop{--color-dialog-backdrop: hsla(0, 0%, 0%, .6);background:var(--color-dialog-backdrop)}html{font-family:Inter,Helvetica,sans-serif}body{line-height:var(--line-height-loose);font-weight:var(--font-weight-normal)}strong{font-weight:var(--font-weight-strong)}em{font-variation-settings:"slnt" -10;font-style:normal}h1,h2,h3,h4{font-weight:var(--font-weight-strong);overflow-wrap:break-word;hyphens:auto;text-wrap:pretty}h1,h2,h3{line-height:var(--line-height-tight)}h4,h5,h6{line-height:var(--line-height-normal)}h1{font-size:clamp(var(--font-x2),3vw + 1rem,var(--font-x3))}h2{font-size:clamp(var(--font-xl),2vw + 1rem,var(--font-x2))}h3{font-size:clamp(var(--font-lg),1vw + 1rem,var(--font-xl))}h4{font-size:var(--font-lg)}h5,h6{font-size:var(--font-md)}main>article>:is(h2,h3,h4){margin-block:calc(1.5 * var(--layout-row-spacing));margin-block-end:calc(.5 * var(--layout-row-spacing))}small{font-size:80%}sub{bottom:-.25em}sup{top:-.5em}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}p,ul,ol,table,blockquote{font-size:var(--font-md)}p,li{text-wrap:pretty}ol,ul{list-style:none;padding:0}main>article :is(ol,ul){list-style:revert;padding-inline-start:var(--spacing-10)}main>article :is(ol,ul) li{padding-block:0 var(--spacing-2);margin-block:var(--spacing-2)}blockquote{background:var(--color-background-light);padding-inline-start:calc(var(--layout-bleed-width) - var(--border-width-thick));padding-inline-end:var(--layout-bleed-width);padding-block:var(--spacing-6);border-inline-start:var(--border-width-thick) solid var(--color-primary);font-variation-settings:"slnt" -5;display:flex;flex-direction:column;row-gap:calc(var(--layout-row-spacing) / 3)}figure.admonition{background:var(--color-background-light);padding-inline-start:calc(var(--layout-bleed-width) - var(--border-width-thick));padding-inline-end:var(--layout-bleed-width);padding-block:var(--spacing-6);border-inline-start:var(--border-width-thick) solid var(--admonition_-accent-color);display:flex;flex-direction:column;row-gap:calc(var(--layout-row-spacing) / 3)}figure.admonition[data-admonition-type=note],figure.admonition[data-admonition-type=tip]{--admonition_-accent-color: var(--color-primary-light)}figure.admonition[data-admonition-type=important]{--admonition_-accent-color: var(--color-primary)}figure.admonition[data-admonition-type=warning]{--admonition_-accent-color: var(--color-warning)}figure.admonition[data-admonition-type=caution]{--admonition_-accent-color: var(--color-caution)}figure.admonition figcaption{color:var(--admonition_-accent-color);font-weight:var(--font-weight-medium);font-size:var(--font-md);white-space:pre-wrap}dfn{font-style:normal;text-decoration:underline var(--color-border-light) dotted;text-underline-offset:4.5px}:not(:is(code,kbd,pre)){font-feature-settings:"frac","cv05","cv11","calt","kern"}hr{height:0;color:var(--color-border-light);border-block-start-width:var(--border-width-thin)}a{--link_color-underline: var(--color-primary);box-shadow:0 1px 0 var(--link_color-underline);transition:box-shadow var(--animation-duration-medium) ease}a:any-link{text-decoration:none;color:inherit}@media (hover: hover){a:is(:hover,:focus){box-shadow:0 2px 0 var(--link_color-underline)}}a:has(>code){-webkit-box-decoration-break:clone;box-decoration-break:clone}a[data-code-reference=true]{border-radius:var(--border-radius-small)}:is(h2,h3,h4)>a[id]{--link_color-underline: transparent;--link_hash_opacity: 0;position:relative}:is(h2,h3,h4)>a[id]:before{position:absolute;content:"📎";font-size:.5em;text-align:center;font-weight:var(--font-weight-medium);top:.25px;height:100%;line-height:2.5em;left:calc(-1 * var(--layout-bleed-width));width:var(--layout-bleed-width);color:var(--color-primary-light);opacity:var(--link_hash_opacity);transition:opacity var(--animation-duration-short) ease-out}@media (hover: hover){:is(h2,h3,h4)>a[id]:is(:hover,:focus){--link_hash_opacity: 1}}:is(h2,h3,h4)>a[id]:target{--link_hash_opacity: 1}a[data-skip-link]{--link_color-underline: transparent;position:absolute;overflow:hidden;clip-path:polygon(0 0,0 0,0 0,0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}a[data-skip-link]:focus{clip-path:none;padding:var(--spacing-6) var(--spacing-8);font-size:var(--font-md);z-index:1000;width:auto;height:auto;left:50%;transform:translate(-50%)}:is(pre,code,kbd){font-family:Roboto Mono,Menlo,Consolas,monospace;font-size:var(--font-sm);background:var(--color-code-background);letter-spacing:-.205px}:is(pre,code,kbd) *{font-family:inherit}code,kbd{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-small)}:not(:is(h1,h2,h3,h4))>a>code{padding-block-end:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:is(h1,h2,h3,h4) code{font-size:.875em;font-weight:var(--font-weight-medium);padding-inline:var(--spacing-4);padding-block:0}pre{position:relative;padding:var(--spacing-12) var(--layout-bleed-width);overflow:auto;white-space:pre-wrap;-webkit-hyphens:none;hyphens:none;tab-size:2;line-height:var(--line-height-normal)}pre::-webkit-scrollbar{display:none}pre[data-code-language],pre[data-code-title]{padding-block-start:var(--spacing-24)}pre[data-code-language]:before,pre[data-code-title]:before{position:absolute;display:block;top:var(--spacing-8);left:var(--layout-bleed-width);font-family:Inter,Helvetica,sans-serif;font-size:var(--font-sm);font-weight:var(--font-weight-strong);content:attr(data-code-language)}pre[data-code-language][data-code-title]:before{content:attr(data-code-title) " (" attr(data-code-language) ")"}pre:not(data-code-language)[data-code-title]:before{content:attr(data-code-title)}main>article>pre:has(+pre){border-bottom-left-radius:0;border-bottom-right-radius:0}main>article>pre+pre{margin-block-start:calc(-1 * var(--layout-row-spacing, 0));border-top-left-radius:0;border-top-right-radius:0}button,input,select,textarea{font-family:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;padding:0}button{-webkit-appearance:button;background-color:transparent;background-image:none;cursor:pointer}:disabled{cursor:default}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=search]::-webkit-input-placeholder{font-family:Inter,Helvetica,sans-serif}[type=search]::-moz-placeholder{font-family:Inter,Helvetica,sans-serif}input,input::placeholder,textarea::placeholder{color:inherit}textarea{resize:vertical}label{cursor:pointer}table{border-spacing:0;border-collapse:collapse;width:100%}th{font-weight:var(--font-weight-strong)}td,th{text-align:center;border-width:var(--border-width-thin);border-color:var(--color-border-light);padding:var(--table_spacing, var(--spacing-2))}.table-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;--scrollbar_size: 8px;--table_spacing: var(--spacing-2);border-width:var(--border-width-medium);border-color:var(--color-border-light)}.table-wrapper table{clip-path:polygon(var(--table_spacing) var(--table_spacing),calc(100% - var(--table_spacing)) var(--table_spacing),calc(100% - var(--table_spacing)) calc(100% - var(--table_spacing)),var(--table_spacing) calc(100% - var(--table_spacing)))}::-webkit-scrollbar{background-color:transparent;width:var(--scrollbar_size, 8px);height:var(--scrollbar_size, 8px)}::-webkit-scrollbar-track{margin:var(--scrollbar_margin, 0)}::-webkit-scrollbar-thumb{background-color:var(--scrollbar_color-knob, var(--color-scrollbar-knob));border-radius:var(--scrollbar_size);border:var(--scrollbar_border, none)}@media (hover: hover){::-webkit-scrollbar-thumb:hover{background-color:var(-scrollbar_color-knob-active, var(--color-scrollbar-knob-active))}}body{scrollbar-gutter:stable both-edges;--scrollbar_size: 12px;--scrollbar_border: 2px solid var(--color-background)}body[data-scroll-lock=true]{overflow-y:hidden}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}main>article>h1+img{width:100%;aspect-ratio:2;object-fit:cover}@media (hover: hover) and (prefers-reduced-motion: no-preference){main>article>h1+img{transition:filter 1.5s ease;transition-delay:1.5s}main>article>h1+img:hover{filter:saturate(200%)}}html{--layout-main-column-width: 800px;--layout-bleed-width: 24px;--layout-row-spacing: var(--spacing-12);--layout-area-spacing: calc(2 * var(--layout-row-spacing));--layout-border-radius: var(--border-radius-medium);scroll-padding-top:var(--layout-row-spacing)}@media (max-width: 50rem){html{--layout-border-radius: 0;--layout-row-spacing: var(--spacing-8)}}body{display:grid;grid-template-columns:minmax(0,1fr) minmax(auto,var(--layout-main-column-width)) minmax(0,1fr);grid-template-areas:"header header header" "left center right" "footer footer footer";row-gap:var(--layout-area-spacing)}main{grid-area:center}main>article{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);row-gap:var(--layout-row-spacing)}main>article>*{grid-column:2}main>article>pre,main>article>blockquote,main>article>img,main>article>figure,main>article>details{grid-column:1/-1;border-radius:var(--layout-border-radius)}[data-area-gap]{padding-block-end:var(--layout-area-spacing)}.codepen-wrapper{width:100%}.codepen-wrapper>p{background:var(--color-background-light);padding-inline:var(--layout-bleed-width);padding-block:var(--spacing-6);border-radius:var(--layout-border-radius);font-variation-settings:"slnt" -5}.codepen-wrapper>div{height:clamp(300px,50vh,600px)}.codepen-wrapper>div,.codepen-wrapper>div>iframe{border-radius:var(--layout-border-radius)}.sparkles{display:inline-block;position:relative}@media (prefers-reduced-motion: no-preference){.sparkles:before,.sparkles:after{content:"✨";position:absolute;top:.5em;font-size:.5em;line-height:1;animation:flicker 2.5s 3 forwards ease-in-out,travel-vertical 5s 3 forwards ease-in-out}.sparkles:before{left:-.5em}.sparkles:after{right:-.5em;animation-delay:1s,3.75s;opacity:0}}@keyframes flicker{0%{transform:scale(.95);opacity:0}50%{transform:scale(1);opacity:.95}to{transform:scale(.95);opacity:0}}@keyframes travel-vertical{0%{transform:translateY(1.5em)}49%{transform:translateY(1.5em)}50%{transform:translateY(0)}99%{transform:translateY(0)}to{transform:translateY(1.5em)}}.wave{cursor:default;display:inline-block;transform-origin:75% 80%;will-change:transform}@media (hover: hover) and (prefers-reduced-motion: no-preference){.wave:is(:hover,:focus){animation:wave var(--animation-duration-long) infinite alternate ease-in-out}}@keyframes wave{0%{transform:rotate(-5deg)}to{transform:rotate(15deg)}}nav[aria-label=Collections]{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);margin-block-end:var(--layout-area-spacing)}nav[aria-label=Collections] ul{grid-column:2;gap:var(--spacing-8);display:flex;flex-wrap:wrap}@media (max-width: 35rem){nav[aria-label=Collections] ul{overflow-x:auto;flex-wrap:nowrap;grid-column:1/-1;padding-inline:var(--layout-bleed-width);padding-block-end:var(--spacing-4);--scrollbar_size: 2.5px;--scrollbar_border: none;--scrollbar_margin: 0 var(--spacing-24)}}nav[aria-label=Collections] li{flex:none}nav[aria-label=Collections] a{--link_color-underline: transparent;display:inline-flex;column-gap:var(--spacing-2);padding:var(--spacing-6) var(--spacing-8);border-radius:var(--border-radius-medium);background:var(--color-background-light);line-height:var(--line-height-tight);font-weight:var(--font-weight-medium);will-change:transform;transition:color var(--animation-duration-medium) ease,transform var(--animation-duration-medium) ease}nav[aria-label=Collections] a:is([data-selected=true]){color:var(--color-primary)}@media (hover: hover){nav[aria-label=Collections] a:not(:is([data-selected=true])):is(:hover,:focus){color:var(--color-primary)}}@media (hover: hover) and (prefers-reduced-motion: no-preference){nav[aria-label=Collections] a:not(:is([data-selected=true])):is(:hover,:focus){transform:translateY(-2px);box-shadow:0 2px 0 transparent}nav[aria-label=Collections] a:not(:is([data-selected=true])):is(:hover,:focus) svg{animation:arrow-pull .75s ease 2}}@keyframes arrow-pull{0%{transform:translate(0)}50%{transform:translate(2px)}to{transform:translate(0)}}header{grid-area:header;display:grid;grid-template-columns:minmax(var(--layout-bleed-width),1fr) repeat(2,min(var(--layout-main-column-width) / 2,50% - var(--layout-bleed-width))) minmax(var(--layout-bleed-width),1fr);padding-block:var(--spacing-10)}header h1{grid-column:2;justify-self:start}header h1 img{width:8.75rem}header nav{grid-column:3;display:flex;align-items:center;justify-content:flex-end;color:var(--color-text-lighter)}header nav :is(a,button){--link_color-underline: transparent;display:inline-block;flex-shrink:0;padding:var(--spacing-6);border-radius:var(--border-radius-small);transition:color var(--animation-duration-medium) ease}header nav :is(a,button) svg{transition:scale var(--animation-duration-short) ease;transition-delay:.1s}@media (hover: hover){header nav :is(a,button):is(:hover,:focus){color:var(--color-text)}}@media (hover: hover) and (prefers-reduced-motion: no-preference){header nav :is(a,button):is(:hover,:focus) svg{scale:1.2;transition-delay:0ms}}@media (max-width: 25rem){header nav a{position:absolute;overflow:hidden;clip-path:polygon(0 0,0 0,0 0,0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}}header nav[data-nav-action-container]{--nav-action-opacity: 0;--nav-action-transform-y: 70%}header nav [data-nav-action]:before{display:block;position:absolute;content:var(--nav-action-hotkey);opacity:var(--nav-action-opacity);font-family:Roboto Mono,Menlo,Consolas,monospace;font-size:var(--font-xs);background:var(--color-code-background);border-radius:var(--border-radius-small);width:1rem;height:1rem;line-height:1rem;text-align:center;border:var(--border-width-hairline) solid var(--color-border-light);border-bottom-width:var(--border-width-thin);transform:translate(10%,var(--nav-action-transform-y));transition:opacity var(--animation-duration-short) ease,transform var(--animation-duration-short) ease}header nav [data-nav-action]:hover:before{--nav-action-opacity: 0;--nav-action-transform-y: 150%}header nav [data-nav-action=home]{--nav-action-hotkey: "H"}header nav [data-nav-action=collections]{--nav-action-hotkey: "J"}header nav [data-nav-action=search]{--nav-action-hotkey: "K"}@media (pointer: fine) and (scripting: enabled) and (hover: hover){header nav[data-nav-action-container][data-nav-actions-shown]{--nav-action-opacity: 1;--nav-action-transform-y: 85%}}footer{grid-area:footer;display:grid;grid-template-columns:minmax(var(--layout-bleed-width),1fr) min((var(--layout-main-column-width)),100% - 2 * var(--layout-bleed-width)) minmax(var(--layout-bleed-width),1fr);padding-block:var(--spacing-8) var(--spacing-20)}footer div{grid-column:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--spacing-16) var(--spacing-24);padding-block-start:var(--spacing-12);border-block-start:var(--border-width-hairline) solid var(--color-border)}footer p{flex-basis:20rem;flex-grow:1;max-width:25rem;text-wrap:pretty}footer nav{display:flex;flex-direction:column;row-gap:var(--spacing-6);justify-content:space-between;flex-grow:.25;--footer_sitemap-column-count: 2}@media (max-width: 40rem){footer nav{--footer_sitemap-column-count: 3;flex-grow:0}}footer p,footer ul{font-size:var(--font-sm)}footer ul{columns:var(--footer_sitemap-column-count);column-gap:var(--spacing-12)}footer a{--link_color-underline: transparent;--link_color-hover: var(--color-primary);--link_animation-duration: var(--animation-duration-medium);transition:color var(--link_animation-duration) ease}@media (hover: hover){footer a:is(:hover,:focus){color:var(--link_color-hover)}}footer small{flex-basis:100%;font-size:var(--font-xs);color:var(--color-text-lighter);text-align:center}footer small a{--link_color-hover: var(--color-text);--link_animation-duration: var(--animation-duration-short)}nav[aria-label=Breadcrumb]{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);--breadcrumb_column-gap: var(--spacing-2)}nav[aria-label=Breadcrumb] ol{grid-column:2;display:flex;color:var(--color-text-light);column-gap:var(--breadcrumb_column-gap);font-size:var(--font-sm);flex-wrap:wrap;margin-block-end:var(--spacing-8)}@media (hover: hover){nav[aria-label=Breadcrumb] ol:has(a:is(:hover,:focus)){color:var(--color-text-lighter)}}nav[aria-label=Breadcrumb] li{display:flex;column-gap:var(--breadcrumb_column-gap)}nav[aria-label=Breadcrumb] li:has([aria-current=page]){position:absolute;overflow:hidden;clip-path:polygon(0 0,0 0,0 0,0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media (max-width: 25rem){nav[aria-label=Breadcrumb] li:first-child{position:absolute;overflow:hidden;clip-path:polygon(0 0,0 0,0 0,0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}}nav[aria-label=Breadcrumb] svg{transition:color var(--animation-duration-medium) ease}nav[aria-label=Breadcrumb] a{--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}@media (hover: hover){nav[aria-label=Breadcrumb] a:is(:hover,:focus){color:var(--color-text)}}.hero{display:flex;column-gap:var(--spacing-20);row-gap:var(--spacing-12);align-items:center;padding-inline:var(--layout-bleed-width);margin-block-end:var(--layout-area-spacing)}.hero h1,.hero h2{margin-block-end:var(--spacing-8)}.hero p{text-wrap:balance}.hero p+p{margin-block-start:var(--spacing-4)}.hero img{border-radius:var(--border-radius-medium);height:240px;aspect-ratio:1;object-fit:cover}@media (hover: hover) and (prefers-reduced-motion: no-preference){.hero img{transition:filter 1.5s ease;transition-delay:1.5s}.hero img:hover{filter:saturate(200%)}}.hero footer{display:block;padding-block:var(--spacing-8) 0;color:var(--color-text-lighter);font-size:var(--font-sm)}.hero footer>a{--link_color-underline: transparent;display:inline-block;transition:color var(--animation-duration-short) ease}@media (hover: hover){.hero footer>a:is(:hover,:focus){color:var(--color-text)}}@media (max-width: 40rem){.hero{flex-direction:column}.hero img{order:-1}.hero h1,.hero h2,.hero p{text-align:center}}.preview-list{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);margin-block-start:var(--layout-row-spacing)}.preview-list>*{grid-column:2}.preview-list h2{margin-block-end:var(--spacing-16)}.preview-list ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:start;column-gap:var(--spacing-16);row-gap:var(--spacing-24)}.preview-list:has(nav)>ul{margin-block-end:var(--layout-area-spacing)}.preview-list li{position:relative;container:preview/inline-size;display:flex;flex-wrap:wrap;row-gap:var(--spacing-8);column-gap:var(--spacing-12);align-items:center}.preview-list li a:before{content:"";position:absolute;inset:0}@media (hover: hover){.preview-list li:has(a:is(:hover,:focus)) h3{color:var(--color-primary-light)}}@media (hover: hover) and (prefers-reduced-motion: no-preference){.preview-list li:has(a:is(:hover,:focus)) img{filter:brightness(110%) saturate(125%);transform:scale(1.01)}}.preview-list article{display:flex;flex-direction:column;row-gap:var(--spacing-4)}.preview-list img{border-radius:var(--border-radius-medium);aspect-ratio:2;object-fit:cover;will-change:transform;transition:filter var(--animation-duration-long) ease,transform var(--animation-duration-medium) ease}.preview-list[data-large-images=true] img{aspect-ratio:1.5}.preview-list[data-single-column=true] ul{grid-template-columns:1fr}.preview-list a{--link_color-underline: transparent}.preview-list small{color:var(--color-text-lighter)}.preview-list h3{font-weight:var(--font-weight-medium);transition:color var(--animation-duration-medium) ease}@container preview (min-width: 23rem){.preview-list img{width:30cqi;height:30cqi;aspect-ratio:1}.preview-list article{flex:1 1 0}.preview-list p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}}main>article>footer{grid-row:auto;display:block;padding:0;color:var(--color-text-lighter);margin-block-end:var(--layout-area-spacing)}main>article>footer p{font-size:var(--font-sm);text-align:right;max-width:unset}main>article>footer p time{display:inline-block}main>article>footer p>*:is(a,span){display:block}@media (min-width: 28rem){main>article>footer p>a{display:inline}main>article>footer p>a:before{content:"·";padding-inline-end:var(--spacing-2)}}@media (min-width: 38rem){main>article>footer p>span{display:inline}main>article>footer p>span:before{content:"·"}}main>article>footer a{--link_color-underline: transparent;display:inline-block;transition:color var(--animation-duration-short) ease}@media (hover: hover){main>article>footer a:is(:hover,:focus){color:var(--color-text)}}nav[aria-label=Pagination],figcaption[aria-label="Replay steps"]{--pagination_middle-column-width: 1fr;display:grid;grid-template-columns:1fr var(--pagination_middle-column-width) 1fr;gap:var(--spacing-8)}nav[aria-label=Pagination]>a,nav[aria-label=Pagination]>button,figcaption[aria-label="Replay steps"]>a,figcaption[aria-label="Replay steps"]>button{--link_color-underline: transparent;min-width:120px;border-radius:var(--border-radius-medium);font-weight:var(--font-weight-medium);padding:var(--spacing-6);line-height:1;background:var(--color-background-light);display:inline-flex;align-items:center;column-gap:var(--spacing-2);justify-content:center;justify-self:center;will-change:transform;transition:color var(--animation-duration-medium) ease}@media (hover: hover){nav[aria-label=Pagination]>a:is(:hover,:focus),nav[aria-label=Pagination]>button:is(:hover,:focus),figcaption[aria-label="Replay steps"]>a:is(:hover,:focus),figcaption[aria-label="Replay steps"]>button:is(:hover,:focus){color:var(--color-primary)}}@media (hover: hover) and (prefers-reduced-motion: no-preference){nav[aria-label=Pagination]>a:is(:hover,:focus)[rel=next] svg,nav[aria-label=Pagination]>button:is(:hover,:focus)[rel=next] svg,figcaption[aria-label="Replay steps"]>a:is(:hover,:focus)[rel=next] svg,figcaption[aria-label="Replay steps"]>button:is(:hover,:focus)[rel=next] svg{transform:translate(2px)}nav[aria-label=Pagination]>a:is(:hover,:focus)[rel=prev] svg,nav[aria-label=Pagination]>button:is(:hover,:focus)[rel=prev] svg,figcaption[aria-label="Replay steps"]>a:is(:hover,:focus)[rel=prev] svg,figcaption[aria-label="Replay steps"]>button:is(:hover,:focus)[rel=prev] svg{transform:translate(-2px)}}nav[aria-label=Pagination]>a[aria-disabled=true],nav[aria-label=Pagination]>button[aria-disabled=true],figcaption[aria-label="Replay steps"]>a[aria-disabled=true],figcaption[aria-label="Replay steps"]>button[aria-disabled=true]{color:var(--color-text-lighter);pointer-events:none}nav[aria-label=Pagination]>a[aria-disabled=true] svg,nav[aria-label=Pagination]>button[aria-disabled=true] svg,figcaption[aria-label="Replay steps"]>a[aria-disabled=true] svg,figcaption[aria-label="Replay steps"]>button[aria-disabled=true] svg{display:none}nav[aria-label=Pagination]>a[rel=prev],nav[aria-label=Pagination]>button[rel=prev],figcaption[aria-label="Replay steps"]>a[rel=prev],figcaption[aria-label="Replay steps"]>button[rel=prev]{grid-column:1}nav[aria-label=Pagination]>a[rel=prev]:not([aria-disabled=true]),nav[aria-label=Pagination]>button[rel=prev]:not([aria-disabled=true]),figcaption[aria-label="Replay steps"]>a[rel=prev]:not([aria-disabled=true]),figcaption[aria-label="Replay steps"]>button[rel=prev]:not([aria-disabled=true]){padding-inline-end:var(--spacing-10)}nav[aria-label=Pagination]>a[rel=next],nav[aria-label=Pagination]>button[rel=next],figcaption[aria-label="Replay steps"]>a[rel=next],figcaption[aria-label="Replay steps"]>button[rel=next]{grid-column:-2}nav[aria-label=Pagination] svg.icon,figcaption[aria-label="Replay steps"] svg.icon{display:inline;flex-shrink:0;transition:transform var(--animation-duration-medium) ease}nav[aria-label=Pagination] p,figcaption[aria-label="Replay steps"] p{font-size:var(--font-xs);color:var(--color-text-light);grid-column:2;grid-row:1;text-align:center;align-self:center;line-height:var(--line-height-normal)}nav[aria-label=Pagination] p a,figcaption[aria-label="Replay steps"] p a{--link_color-underline: transparent;transition:color var(--animation-duration-short) ease}@media (hover: hover){nav[aria-label=Pagination] p a:is(:hover,:focus),figcaption[aria-label="Replay steps"] p a:is(:hover,:focus){color:var(--color-text)}}nav[aria-label=Pagination] p a,nav[aria-label=Pagination] p span,figcaption[aria-label="Replay steps"] p a,figcaption[aria-label="Replay steps"] p span{display:inline-block}@media (max-width: 30rem){nav[aria-label=Pagination],figcaption[aria-label="Replay steps"]{--pagination_middle-column-width: 0}nav[aria-label=Pagination] a[rel=prev],figcaption[aria-label="Replay steps"] a[rel=prev]{justify-self:end}nav[aria-label=Pagination] a[rel=next],figcaption[aria-label="Replay steps"] a[rel=next]{justify-self:start}nav[aria-label=Pagination] p,figcaption[aria-label="Replay steps"] p{grid-column:1/-1;grid-row:2}}main>article+nav{margin-block-end:var(--layout-area-spacing)}figcaption[aria-label="Replay steps"]{margin-block-start:var(--spacing-8)}figcaption[aria-label="Replay steps"] p{font-size:var(--font-sm)}@media (max-width: 30rem){figcaption[aria-label="Replay steps"]{--pagination_middle-column-width: 1fr}figcaption[aria-label="Replay steps"] p{grid-column:2;grid-row:1}}dialog{padding:0;background:var(--color-background-light);color:var(--color-text);width:100%;max-width:600px;--search_margin-block-start: 200px;--search_margin-block-end: 200px;margin:var(--search_margin-block-start) auto var(--search_margin-block-end);border-radius:var(--border-radius-medium);--search_input-height: 60px}@media (max-width: 37.5rem){dialog{--search_margin-block-start: 100px;--search_margin-block-end: 0px;border-radius:0}}@media (prefers-reduced-motion: no-preference){dialog{animation:dialog-in var(--animation-duration-medium) ease-out}}dialog search{display:grid;grid-template-columns:var(--spacing-8) 1.25rem auto 2rem var(--spacing-8);grid-template-rows:var(--search_input-height) auto;align-items:center}dialog search>svg.icon:first-of-type{grid-column:2}dialog [type=search]{background:transparent;outline:0;font-size:var(--font-md);line-height:var(--line-height-normal);margin:var(--spacing-6) var(--spacing-4)}dialog [type=search]:focus~output{border-color:var(--color-primary-light)}dialog button{transition:color var(--animation-duration-short) ease}@media (hover: hover){dialog button:is(:hover,:focus){color:var(--color-primary)}}dialog output{grid-column:1/-1;padding:var(--spacing-8) calc(var(--spacing-8) - var(--scrollbar_size, 0)) var(--spacing-8) var(--spacing-8);max-height:calc(100vh - var(--search_margin-block-start) - var(--search_margin-block-end) - var(--search_input-height));border-block-start:var(--border-width-thin) solid var(--color-border);transition:border-color var(--animation-duration-medium) ease;overflow-x:auto;display:flex;flex-direction:column;row-gap:var(--spacing-4);--scrollbar_size: 8px;--scrollbar_border: 2px solid var(--color-background-light);--scrollbar_color-knob: var(--color-scrollbar-knob-active)}dialog output::-webkit-scrollbar-track{margin:var(--spacing-4) 0}dialog output h2{font-weight:var(--font-weight-medium);font-size:var(--font-sm);color:var(--color-text-light)}dialog output ul{display:flex;flex-direction:column;row-gap:var(--spacing-4)}dialog output ul:not(:last-child){margin-block-end:var(--spacing-8)}dialog output a{display:flex;align-items:baseline;justify-content:space-between;line-height:var(--line-height-normal);column-gap:var(--spacing-8);padding:var(--spacing-2) 0;--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}dialog output a small{font-size:var(--font-sm);color:var(--color-text-light)}@media (hover: hover){dialog output a:is(:hover,:focus){color:var(--color-primary-light)}dialog output a:is(:hover,:focus)>small{color:var(--color-primary-light)}}dialog output p{padding-block:var(--spacing-4);text-wrap:pretty}@keyframes dialog-in{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}nav[aria-label="Table of contents"]{grid-area:left;display:block;padding:112px var(--spacing-24) var(--spacing-20) var(--spacing-12)}@media (max-width: 83rem){nav[aria-label="Table of contents"]{display:none}}nav[aria-label="Table of contents"] div{position:sticky;top:var(--spacing-24);display:grid;grid-template-columns:minmax(0,1fr) minmax(auto,17.5rem);grid-template-rows:auto;row-gap:var(--spacing-10)}nav[aria-label="Table of contents"] div>*{grid-column:2}nav[aria-label="Table of contents"] h2{font-size:var(--font-xl);font-weight:var(--font-weight-medium);color:var(--color-text)}nav[aria-label="Table of contents"] ol{display:flex;flex-direction:column;gap:var(--spacing-4)}nav[aria-label="Table of contents"] ol ol{padding-inline-start:var(--spacing-6);padding-block:var(--spacing-2)}nav[aria-label="Table of contents"] li{font-size:var(--font-sm);line-height:var(--line-height-normal);color:var(--color-text-light);text-wrap:wrap}nav[aria-label="Table of contents"] a{--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}nav[aria-label="Table of contents"] a[aria-current=true]{color:var(--color-primary-light);-webkit-font-smoothing:subpixel-antialiased}@media (hover: hover){nav[aria-label="Table of contents"] a:is(:hover,:focus){color:var(--color-primary-light)}}nav[aria-label="Table of contents"] div>a{display:flex;align-items:center;column-gap:var(--spacing-2);width:fit-content;color:var(--color-text-light);border-radius:var(--border-radius-small);margin-block-start:calc(0px - var(--spacing-2))}@media (hover: hover) and (prefers-reduced-motion: no-preference){nav[aria-label="Table of contents"] div>a:is(:hover,:focus) svg{animation:arrow-rise .75s ease 2}}@keyframes arrow-rise{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}details summary{display:flex;align-items:center;gap:var(--spacing-6);font-size:var(--font-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:color var(--animation-duration-medium) ease}@media (hover: hover){details summary:is(:hover,:focus){color:var(--color-primary-light)}}details summary:before{display:inline-block;content:"▶";font-size:.75em;transition:transform var(--animation-duration-medium) ease}@media (max-width: 52rem){details summary{gap:var(--spacing-4)}details summary:before{margin-left:var(--spacing-6)}}details summary::marker{display:none;content:""}details summary::-webkit-details-marker{display:none}details>:not(summary){margin-inline:var(--layout-bleed-width)}@media (max-width: 52rem){details>:not(summary){margin-inline:0}}details>pre,details>blockquote,details>img,details>figure{border-radius:var(--layout-border-radius)}details[open] summary{margin-block-end:var(--spacing-4)}details[open] summary:before{transform:rotate(90deg)}.announcement{display:flex;column-gap:var(--spacing-20);row-gap:var(--spacing-12);align-items:center;justify-content:center;padding-inline:var(--layout-bleed-width);margin-block-end:var(--layout-row-spacing);margin-block-start:calc(-1 * (var(--layout-row-spacing) + var(--spacing-2)))}.announcement p{font-size:var(--font-sm);text-align:center}.announcement a{display:inline-block}} </style></head> <body> <a href="#start-of-content" data-skip-link>Skip to content</a> <header aria-label="Main"> <h1> <a title="30 seconds of code" aria-label="30 seconds of code" href="/"> <img fetchpriority="high" src="/assets/30s-logo.png" alt="Home" width="140" height="48"> </a> </h1> <nav data-nav-action-container> <a href="/" data-nav-action="home"> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" title="Home" aria-label="Home" class="icon"><g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"><path d="M16 42.667A5.333 5.333 0 0 1 21.333 48v58.667A5.333 5.333 0 0 0 26.667 112h74.666a5.336 5.336 0 0 0 5.334-5.333V48a5.333 5.333 0 0 1 10.666 0v58.667a15.998 15.998 0 0 1-16 16H26.667a15.999 15.999 0 0 1-16-16V48A5.333 5.333 0 0 1 16 42.667Z"></path><path d="M42.667 64A5.333 5.333 0 0 1 48 58.667h32A5.333 5.333 0 0 1 85.333 64v53.333a5.334 5.334 0 1 1-10.666 0v-48H53.333v48a5.334 5.334 0 1 1-10.666 0V64Z"></path><path d="M60.623 1.206a5.333 5.333 0 0 1 6.754 0l58.667 48a5.333 5.333 0 1 1-6.754 8.255L64 12.224 8.71 57.461a5.333 5.333 0 0 1-6.754-8.255l58.667-48Z"></path></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h128v128H0z"></path></clipPath></defs></svg> </a> <a href="/collections/p/1" data-nav-action="collections"> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" title="Collections" aria-label="Collections" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 94.25c0-2.9 2.35-5.25 5.25-5.25h4.5a5.25 5.25 0 1 1 0 10.5h-4.5A5.25 5.25 0 0 1 21 94.25ZM46 94.25c0-2.9 2.35-5.25 5.25-5.25h49.5a5.25 5.25 0 0 1 0 10.5h-49.5A5.25 5.25 0 0 1 46 94.25ZM21 64.25c0-2.9 2.35-5.25 5.25-5.25h4.5a5.25 5.25 0 1 1 0 10.5h-4.5A5.25 5.25 0 0 1 21 64.25ZM46 64.25c0-2.9 2.35-5.25 5.25-5.25h49.5a5.25 5.25 0 0 1 0 10.5h-49.5A5.25 5.25 0 0 1 46 64.25ZM21 34.25c0-2.9 2.35-5.25 5.25-5.25h4.5a5.25 5.25 0 1 1 0 10.5h-4.5A5.25 5.25 0 0 1 21 34.25ZM46 34.25c0-2.9 2.35-5.25 5.25-5.25h49.5a5.25 5.25 0 0 1 0 10.5h-49.5A5.25 5.25 0 0 1 46 34.25Z" fill="currentColor"></path></svg> </a> <button data-open-modal="omnisearch" data-nav-action="search"> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" title="Search" aria-label="Search" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M53.333 18.667c-19.145 0-34.666 15.52-34.666 34.666C18.667 72.48 34.187 88 53.333 88 72.48 88 88 72.48 88 53.333c0-19.145-15.52-34.666-34.667-34.666ZM8 53.333C8 28.296 28.296 8 53.333 8s45.334 20.296 45.334 45.333S78.37 98.667 53.333 98.667C28.296 98.667 8 78.37 8 53.333Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M84.229 82.362a5.333 5.333 0 0 1 7.542 0l24 24a5.334 5.334 0 0 1-7.542 7.543l-24-24a5.333 5.333 0 0 1 0-7.543Z" fill="currentColor"></path></svg> </button> <a href="https://github.com/Chalarangelo/30-seconds-of-code" target="_blank" rel="noopener noreferrer"> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" title="GitHub" aria-label="GitHub" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.493 89.373a5.333 5.333 0 0 1 6.467-3.88c4.351 1.087 7.266 4.019 9.35 6.465a94.373 94.373 0 0 1 2.21 2.735c.273.346.536.68.784.99.952 1.193 1.847 2.258 2.8 3.212 1.848 1.848 3.84 3.2 6.528 3.829 2.757.645 6.775.652 12.836-1.166a5.334 5.334 0 0 1 3.064 10.217c-7.273 2.182-13.254 2.523-18.33 1.335-5.146-1.205-8.821-3.853-11.64-6.672-1.38-1.38-2.568-2.814-3.595-4.1a207.96 207.96 0 0 1-.969-1.225c-.642-.815-1.204-1.53-1.808-2.238-1.75-2.054-2.835-2.789-3.817-3.034a5.333 5.333 0 0 1-3.88-6.468Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M114.667 45.44A5.333 5.333 0 0 1 120 50.773c0 15.714-4.807 26.253-12.794 32.969-5.367 4.513-11.779 6.953-18.1 8.346a23.306 23.306 0 0 1 1.561 10.134v20.445a5.333 5.333 0 0 1-10.667 0v-20.64c0-.14.005-.279.016-.419a12.639 12.639 0 0 0-3.525-9.789 5.333 5.333 0 0 1 3.238-9.013c8.074-.9 15.353-2.806 20.612-7.228 4.999-4.204 8.992-11.398 8.992-24.805a5.334 5.334 0 0 1 5.334-5.333Zm-96 .16A5.333 5.333 0 0 1 24 50.933c0 13.283 3.983 20.432 8.992 24.645 5.278 4.438 12.578 6.39 20.679 7.396a5.333 5.333 0 0 1 3.175 9.002 12.64 12.64 0 0 0-3.526 9.676c.009.125.013.25.013.375v20.64a5.333 5.333 0 0 1-10.666 0v-20.465a23.306 23.306 0 0 1 1.597-10.028c-6.331-1.444-12.76-3.911-18.136-8.432-7.977-6.707-12.795-17.185-12.795-32.809a5.333 5.333 0 0 1 5.334-5.333ZM33.27 5.747c4.185.929 10.007 3.226 17.7 8.383a5.333 5.333 0 1 1-5.94 8.86c-6.867-4.603-11.471-6.253-14.073-6.83l-.04-.009a21.707 21.707 0 0 0 .746 12.758 5.333 5.333 0 1 1-9.993 3.73 32.373 32.373 0 0 1 .575-24.073 5.334 5.334 0 0 1 3.385-3.012l1.517 5.113C25.63 5.554 25.635 5.552 25.64 5.55l.01-.003.022-.006.045-.013.097-.026a8.832 8.832 0 0 1 .791-.163c.432-.07.966-.125 1.606-.143 1.281-.035 2.96.085 5.058.55ZM107.693 5.55c.005.002.01.004-1.506 5.117l1.516-5.113a5.335 5.335 0 0 1 3.386 3.012 32.375 32.375 0 0 1 .574 24.072 5.333 5.333 0 1 1-9.993-3.73 21.7 21.7 0 0 0 .746-12.757l-.04.009c-2.601.577-7.206 2.227-14.073 6.83a5.333 5.333 0 0 1-5.94-8.86c7.694-5.157 13.516-7.454 17.701-8.383 2.098-.466 3.777-.586 5.059-.55.639.017 1.173.073 1.605.142a8.933 8.933 0 0 1 .791.163l.097.026.045.013.021.006.011.003Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M46.605 13.412a76.693 76.693 0 0 1 40.123 0 5.333 5.333 0 1 1-2.79 10.296 66.028 66.028 0 0 0-34.543 0 5.333 5.333 0 1 1-2.79-10.296ZM30.344 26.91a5.333 5.333 0 0 1 .185 7.54A23.68 23.68 0 0 0 24 50.906a5.333 5.333 0 0 1-10.666.057 34.347 34.347 0 0 1 9.471-23.866 5.333 5.333 0 0 1 7.54-.185Zm72.645 0a5.333 5.333 0 0 1 7.54.186A34.345 34.345 0 0 1 120 50.772a5.333 5.333 0 1 1-10.667.002 23.681 23.681 0 0 0-6.529-16.323 5.334 5.334 0 0 1 .185-7.54Z" fill="currentColor"></path></svg> </a> </nav> </header> <script type="module">const t={isMac:navigator.userAgent.toLowerCase().includes("mac"),navActionContainer:document.querySelector("[data-nav-action-container]"),navActionTriggers:{home:document.querySelector('[data-nav-action="home"]'),collections:document.querySelector('[data-nav-action="collections"]'),omnisearch:document.querySelector('[data-nav-action="search"]')},omnisearchDialog:document.querySelector('[data-modal="omnisearch"]'),navActionMap:{k:"omnisearch",j:"collections",h:"home"},handleKeyDown(e){const n=this.isMac?e.metaKey:e.ctrlKey,o=this.omnisearchDialog.open;!o&&n&&Object.keys(this.navActionMap).includes(e.key)?(this.hideHotkeys(),e.preventDefault(),this.triggerAction(this.navActionMap[e.key])):n&&!o?this.showHotkeys():this.hideHotkeys()},handleKeyUp(e){(this.isMac?e.key==="Meta":e.key==="Control")&&this.hideHotkeys()},triggerAction(e){this.navActionTriggers[e].click()},showHotkeys(){this.navActionContainer.dataset.navActionsShown=""},hideHotkeys(){delete this.navActionContainer.dataset.navActionsShown}};document.addEventListener("keydown",t.handleKeyDown.bind(t));document.addEventListener("keyup",t.handleKeyUp.bind(t));</script> <div id="start-of-content"></div> <main> <section class="hero"> <div> <h1>Git Articles</h1> <p>The Git article collection contains a variety of short tips and tricks for all currently maintained versions of git. It includes most commonly-used commands and covers various use-cases in the form of simplified documentation, complete with multiple examples.</p> </div> <img src="/assets/splash/keyboard-coffee-600.webp" srcset="/assets/splash/keyboard-coffee-600.webp 600w,/assets/splash/keyboard-coffee-400.webp 400w" alt="" height="240" width="240" fetchpriority="high"> </section> <nav aria-label="Collections"> <ul> <li> <a href="/git/p/1" data-selected="true"> All </a> </li><li> <a href="/git/branch/p/1" data-selected="false"> Branch </a> </li><li> <a href="/git/commit/p/1" data-selected="false"> Commit </a> </li><li> <a href="/git/configuration/p/1" data-selected="false"> Configuration </a> </li><li> <a href="/git/repository/p/1" data-selected="false"> Repository </a> </li> </ul> </nav> <section class="preview-list"> <ul> <li> <img src="/assets/cover/purple-leaves-400.webp" srcset="/assets/cover/purple-leaves-400.webp 400w,/assets/cover/purple-leaves-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-05"> April 5, 2024 </time> </small> <h3> <a href="/git/s/stashing">A guide to Git stashing</a> </h3> <p>Learn all you need to know about Git stashing, including how to stash changes, apply, list, and delete stashes.</p> </article> </li><li> <img src="/assets/cover/compass-1-400.webp" srcset="/assets/cover/compass-1-400.webp 400w,/assets/cover/compass-1-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-05-03"> May 3, 2024 </time> </small> <h3> <a href="/git/s/aliases">Customize Git using aliases for common operations</a> </h3> <p>Increase your productivity and reduce your cognitive load by creating aliases for many common git operations.</p> </article> </li><li> <img src="/assets/cover/white-flower-400.webp" srcset="/assets/cover/white-flower-400.webp 400w,/assets/cover/white-flower-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-05-01"> May 1, 2024 </time> </small> <h3> <a href="/git/s/purge-file">Purge a file from Git history</a> </h3> <p>Did you accidentally commit sensitive information? Learn how to completely purge a file from Git history.</p> </article> </li><li> <img src="/assets/cover/sea-view-400.webp" srcset="/assets/cover/sea-view-400.webp 400w,/assets/cover/sea-view-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-01"> April 1, 2024 </time> </small> <h3> <a href="/git/s/sort-branches-by-date">View Git branches sorted by date</a> </h3> <p>Do you want to see a list of all local branches sorted by date? Here's a simple command to help you with that.</p> </article> </li><li> <img src="/assets/cover/travel-mug-1-400.webp" srcset="/assets/cover/travel-mug-1-400.webp 400w,/assets/cover/travel-mug-1-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-05-04"> May 4, 2024 </time> </small> <h3> <a href="/git/s/find-merge-commit">How can I find the merge commit given a Git commit?</a> </h3> <p>Looking for the merge commit where the changes from a given commit were merged into a branch? Here's how you can find it.</p> </article> </li><li> <img src="/assets/cover/volcano-sunset-400.webp" srcset="/assets/cover/volcano-sunset-400.webp 400w,/assets/cover/volcano-sunset-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-06"> April 6, 2024 </time> </small> <h3> <a href="/git/s/delete-branch">Delete a Git branch</a> </h3> <p>Having trouble deleting branches in Git? Here's a guide to help you delete local, remote, detached, and merged branches.</p> </article> </li><li> <img src="/assets/cover/cobbled-street-400.webp" srcset="/assets/cover/cobbled-street-400.webp 400w,/assets/cover/cobbled-street-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-17"> April 17, 2024 </time> </small> <h3> <a href="/git/s/view-merged-branches">View all merged Git branches</a> </h3> <p>Looking for a way to list all merged branches in your Git repository? Look no further.</p> </article> </li><li> <img src="/assets/cover/organizer-400.webp" srcset="/assets/cover/organizer-400.webp 400w,/assets/cover/organizer-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-03-29"> March 29, 2024 </time> </small> <h3> <a href="/git/s/view-commits-in-date-range">View Git commits in a specific date range</a> </h3> <p>View all commits in a specific date range using <code class="notranslate" translate="no">git log</code>.</p> </article> </li><li> <img src="/assets/cover/tea-laptop-table-400.webp" srcset="/assets/cover/tea-laptop-table-400.webp 400w,/assets/cover/tea-laptop-table-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-05-02"> May 2, 2024 </time> </small> <h3> <a href="/git/s/interactive-rebase">Perform an interactive rebase in Git</a> </h3> <p>Reorder, squash, and edit commits interactively using Git's interactive rebase feature.</p> </article> </li><li> <img src="/assets/cover/bunny-poster-400.webp" srcset="/assets/cover/bunny-poster-400.webp 400w,/assets/cover/bunny-poster-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-26"> April 26, 2024 </time> </small> <h3> <a href="/git/s/view-commits-by-string">View Git commits that manipulated a specific string</a> </h3> <p>Learn how to view all commits that manipulated a specific string in a Git repository.</p> </article> </li><li> <img src="/assets/cover/new-plant-400.webp" srcset="/assets/cover/new-plant-400.webp 400w,/assets/cover/new-plant-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2023-05-24"> May 24, 2023 </time> </small> <h3> <a href="/git/s/set-or-amend-commit-author">Create a commit by a different author in Git</a> </h3> <p>Ever wanted to commit as someone else? Maybe change the author of an existing commit? Here's how.</p> </article> </li><li> <img src="/assets/cover/dark-leaves-400.webp" srcset="/assets/cover/dark-leaves-400.webp 400w,/assets/cover/dark-leaves-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2023-05-25"> May 25, 2023 </time> </small> <h3> <a href="/git/s/branches-containing-commit">Find branches containing a specific Git commit</a> </h3> <p>Learn how to filter branches based on whether they contain a specific commit or not.</p> </article> </li><li> <img src="/assets/cover/aerial-view-port-400.webp" srcset="/assets/cover/aerial-view-port-400.webp 400w,/assets/cover/aerial-view-port-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-30"> April 30, 2024 </time> </small> <h3> <a href="/git/s/view-all-branches">View all Git branches</a> </h3> <p>Learn how to view a list of all local or remote branches in a Git repository.</p> </article> </li><li> <img src="/assets/cover/interior-16-400.webp" srcset="/assets/cover/interior-16-400.webp 400w,/assets/cover/interior-16-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-05-05"> May 5, 2024 </time> </small> <h3> <a href="/git/s/split-commit">Split a Git commit into multiple commits</a> </h3> <p>Altering Git history to split a commit sounds intimidating, but it's not that hard. Let's walk through the process step by step.</p> </article> </li><li> <img src="/assets/cover/cancel-typographer-400.webp" srcset="/assets/cover/cancel-typographer-400.webp 400w,/assets/cover/cancel-typographer-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-02"> April 2, 2024 </time> </small> <h3> <a href="/git/s/remove-file-from-commit">Remove a file from the last Git commit</a> </h3> <p>Have you ever made a commit only to realize that a file should not have been included? Let's see how you can fix this!</p> </article> </li><li> <img src="/assets/cover/red-succulent-400.webp" srcset="/assets/cover/red-succulent-400.webp 400w,/assets/cover/red-succulent-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-03"> April 3, 2024 </time> </small> <h3> <a href="/git/s/move-commits-to-branch">Move Git commits from master to a new branch</a> </h3> <p>Did you accidentally commit to <code class="notranslate" translate="no">master</code> instead of a feature branch? Here's how you can move those commits to a new branch.</p> </article> </li><li> <img src="/assets/cover/hard-disk-400.webp" srcset="/assets/cover/hard-disk-400.webp 400w,/assets/cover/hard-disk-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-05-01"> May 1, 2024 </time> </small> <h3> <a href="/git/s/find-lost-files">Find lost files using Git</a> </h3> <p>Learn how to find lost files and commits in a Git repository.</p> </article> </li><li> <img src="/assets/cover/rock-climbing-400.webp" srcset="/assets/cover/rock-climbing-400.webp 400w,/assets/cover/rock-climbing-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2023-05-21"> May 21, 2023 </time> </small> <h3> <a href="/git/s/view-undo-history">View Git "undo" history</a> </h3> <p>Learn how to view your "undo" history using git reflog and reset your repository to a previous state.</p> </article> </li><li> <img src="/assets/cover/meteora-400.webp" srcset="/assets/cover/meteora-400.webp 400w,/assets/cover/meteora-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2023-05-26"> May 26, 2023 </time> </small> <h3> <a href="/git/s/merge-branch-merge-commit">Merge a branch in Git</a> </h3> <p>Learn how to merge a branch in Git with or without creating a merge commit, depending on your team's workflow.</p> </article> </li><li> <img src="/assets/cover/comic-glasses-400.webp" srcset="/assets/cover/comic-glasses-400.webp 400w,/assets/cover/comic-glasses-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-25"> April 25, 2024 </time> </small> <h3> <a href="/git/s/view-commits-by-author-or-committer">View Git commits by a certain author or committer</a> </h3> <p>If you're looking for a way to find commits by a specific author or committer in a Git repository, look no further.</p> </article> </li><li> <img src="/assets/cover/taking-photos-400.webp" srcset="/assets/cover/taking-photos-400.webp 400w,/assets/cover/taking-photos-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-24"> April 24, 2024 </time> </small> <h3> <a href="/git/s/view-changes-summary">View a summary of changes between two Git commits</a> </h3> <p>Learn how to view a summary of changes between two Git commits, using a single command.</p> </article> </li><li> <img src="/assets/cover/compass-400.webp" srcset="/assets/cover/compass-400.webp 400w,/assets/cover/compass-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-15"> April 15, 2024 </time> </small> <h3> <a href="/git/s/force-update-remote-branch">How can I update a remote branch after rewriting Git history?</a> </h3> <p>Learn how to force update a remote branch after rewriting the Git history locally.</p> </article> </li><li> <img src="/assets/cover/boats-400.webp" srcset="/assets/cover/boats-400.webp 400w,/assets/cover/boats-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2021-07-15"> July 15, 2021 </time> </small> <h3> <a href="/git/s/fast-forward-merge">How does Git's fast-forward mode work?</a> </h3> <p>Learn about Git's fast-forward mode and its benefits when merging branches, so you can decide if it's a good fit for you and your team.</p> </article> </li><li> <img src="/assets/cover/city-view-400.webp" srcset="/assets/cover/city-view-400.webp 400w,/assets/cover/city-view-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> Git · <time datetime="2024-04-25"> April 25, 2024 </time> </small> <h3> <a href="/git/s/view-commit-graph">View a visual graph of the Git repository</a> </h3> <p>If you're more of a visual person, you can view a graph of all commits and branches in the repository using a single Git command.</p> </article> </li> </ul> <nav aria-label="Pagination"> <a href="/git/p/1" rel="prev" aria-disabled="true"> <svg width="1.25em" height="1.25em" viewBox="0 0 128 128" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M83.771 28.229a5.333 5.333 0 0 1 0 7.542L55.542 64l28.23 28.229a5.333 5.333 0 0 1-7.543 7.542l-32-32a5.333 5.333 0 0 1 0-7.542l32-32a5.333 5.333 0 0 1 7.542 0Z" fill="currentColor"></path></svg> Previous </a> <a href="/git/p/2" rel="next" aria-disabled="false"> Next <svg width="1.25em" height="1.25em" viewBox="0 0 128 128" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M44.229 28.229a5.333 5.333 0 0 1 7.542 0l32 32a5.333 5.333 0 0 1 0 7.542l-32 32a5.334 5.334 0 0 1-7.542-7.542L72.458 64l-28.23-28.229a5.333 5.333 0 0 1 0-7.542Z" fill="currentColor"></path></svg> </a> <p>Page 1 of 3 (67 articles)</p> </nav> </section> </main> <footer> <div> <p> Hello! <span class="wave">👋</span> I’m Angelos, a professional software engineer, based in Greece. I work on <strong>30 seconds of code</strong> in my free time to create the best resource I never had when I started out as a developer. </p> <nav aria-label="Sitemap"> <h5>Sitemap</h5> <ul> <li><a href="/">Home</a></li> <li><a href="/snippets/p/1">Articles</a></li> <li><a href="/collections/p/1">Collections</a></li> <li><a href="/about">About</a></li> <li><a href="/update-logs/p/1">Updates</a></li> <li><a href="/feed.xml">RSS</a></li> </ul> <small>Powered by <a href="https://www.netlify.com/" rel="noopener noreferrer nofollow" target="_blank">Netlify</a>, <a href="https://astro.build/" rel="noopener noreferrer nofollow" target="_blank">Astro</a> & <a href="https://github.com/" rel="noopener noreferrer nofollow" target="_blank">GitHub</a> <br> © 2017-2025 <a href="https://chalarangelo.me" rel="noopener noreferrer nofollow" target="_blank">Angelos Chalaris</a>. All rights reserved. </small> </nav> </div> </footer> <dialog data-modal="omnisearch"> <search> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" aria-hidden="true" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M53.333 18.667c-19.145 0-34.666 15.52-34.666 34.666C18.667 72.48 34.187 88 53.333 88 72.48 88 88 72.48 88 53.333c0-19.145-15.52-34.666-34.667-34.666ZM8 53.333C8 28.296 28.296 8 53.333 8s45.334 20.296 45.334 45.333S78.37 98.667 53.333 98.667C28.296 98.667 8 78.37 8 53.333Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M84.229 82.362a5.333 5.333 0 0 1 7.542 0l24 24a5.334 5.334 0 0 1-7.542 7.543l-24-24a5.333 5.333 0 0 1 0-7.543Z" fill="currentColor"></path></svg> <input type="search" placeholder="Search..." id="omnisearch" aria-label="Search articles and collections"> <button data-close-modal="omnisearch"> <svg width="2rem" height="2rem" viewBox="0 0 128 128" fill="none" aria-label="Close" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M90.7523 97.8234C92.7049 99.776 95.8708 99.776 97.8234 97.8234C99.776 95.8708 99.776 92.705 97.8234 90.7523L70.9533 63.8823L97.8234 37.0123C99.776 35.0596 99.776 31.8938 97.8234 29.9412C95.8708 27.9886 92.7049 27.9886 90.7523 29.9412L63.8823 56.8112L37.0122 29.9412C35.0596 27.9885 31.8938 27.9885 29.9411 29.9412C27.9885 31.8938 27.9885 35.0596 29.9411 37.0122L56.8112 63.8823L29.9411 90.7524C27.9885 92.705 27.9885 95.8708 29.9411 97.8234C31.8937 99.7761 35.0596 99.7761 37.0122 97.8234L63.8823 70.9534L90.7523 97.8234Z" fill="currentColor"></path></svg> </button> <output aria-label="Search results" for="omnisearch"> <p>Start typing a keyphrase to see matching articles.</p> </output> </search> </dialog> <script type="module" src="/_astro/Omnisearch.astro_astro_type_script_index_0_lang.B9Xbxmo2.js"></script> </body></html>