update metadata, etc
· 1 year ago
4450d6ff7055154a0d21be4f22e09d61d305d2fa
Parent:
afb387962
1 file changed +325 −273
- versioncontrol.html +325 −273
Diff
--- a/versioncontrol.html +++ b/versioncontrol.html @@ -3,249 +3,264 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Modern Source Control Cheatsheet - Living History Tree</title> + <title>Interactive Cheatsheet: Modern Version Control (Git, Mercurial) & Hosting Platforms</title> <!-- SEO Meta Description --> - <meta name="description" content="Interactive cheatsheet comparing modern source control systems (Git, Mercurial) and hosting platforms (GitHub, GitLab, Bitbucket, Azure DevOps) using a history tree visual metaphor."> + <meta name="description" content="An interactive visual cheatsheet comparing modern Distributed Version Control Systems (Git, Mercurial) and popular hosting platforms (GitHub, GitLab, Bitbucket, Azure DevOps). Covers core concepts, key workflows, and selection criteria using a history tree metaphor."> + <meta name="keywords" content="Git, Mercurial, DVCS, Version Control, Source Control, GitHub, GitLab, Bitbucket, Azure DevOps, Cheatsheet, Branching, Merging, CI/CD, Hosting Platform"> - <!-- Canonical URL (Update if hosted) --> - <!-- <link rel="canonical" href="http://your-domain.com/source-control-cheatsheet-tree.html"> --> + <!-- Canonical URL --> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/versioncontrol.html"> - <!-- Social Media Metadata (Add URLs if needed) --> - <meta property="og:title" content="Modern Source Control Cheatsheet - Living History Tree"> - <meta property="og:description" content="Interactive visual guide comparing Git, Mercurial, GitHub, GitLab, Bitbucket, Azure DevOps using a branching history metaphor."> + <!-- Social Media Metadata --> + <meta property="og:title" content="Interactive Cheatsheet: Modern Version Control & Platforms"> + <meta property="og:description" content="Explore Git, Mercurial, GitHub, GitLab, Bitbucket & Azure DevOps with this interactive visual guide comparing features, workflows, and selection criteria."> <meta property="og:type" content="article"> - <!-- <meta property="og:url" content="http://your-domain.com/source-control-cheatsheet-tree.html"> --> - <!-- <meta property="og:image" content="http://your-domain.com/images/source-control-tree.png"> --> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/versioncontrol.html"> + <meta property="og:site_name" content="David Veksler Cheatsheets"> <!-- Example Site Name --> + <!-- <meta property="og:image" content="https://cheatsheets.davidveksler.com/images/source-control-tree-preview.png"> --> <!-- Placeholder OG image URL --> <meta name="twitter:card" content="summary_large_image"> - <meta name="twitter:title" content="Modern Source Control Cheatsheet - Living History Tree"> - <meta name="twitter:description" content="Interactive visual guide comparing Git, Mercurial, GitHub, GitLab, Bitbucket, Azure DevOps using a branching history metaphor."> - <!-- <meta name="twitter:image" content="http://your-domain.com/images/source-control-tree.png"> --> + <meta name="twitter:title" content="Interactive Cheatsheet: Modern Version Control & Platforms"> + <meta name="twitter:description" content="Explore Git, Mercurial, GitHub, GitLab, Bitbucket & Azure DevOps with this interactive visual guide comparing features, workflows, and selection criteria."> + <!-- <meta name="twitter:image" content="https://cheatsheets.davidveksler.com/images/source-control-tree-preview.png"> --> <!-- Placeholder Twitter image URL --> + <!-- If you have a Twitter handle associated with the site: <meta name="twitter:site" content="@YourTwitterHandle"> --> + <!-- If you have a personal Twitter handle: <meta name="twitter:creator" content="@YourTwitterHandle"> --> - <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> + + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> - <link rel="stylesheet" href="history_tree_style.css"> <!-- We'll create this based on POC --> + <!-- Link to your specific CSS for the history tree styling --> + <link rel="stylesheet" href="history_tree_style.css"> + </head> <body> - <header class="page-header"> - <h1><i class="bi bi-git"></i> Modern Source Control Cheatsheet</h1> - <p class="lead">An interactive guide using a history tree metaphor.</p> + <header class="page-header container"> + <h1><i class="bi bi-git"></i> Modern Version Control Cheatsheet</h1> + <p class="lead">Explore Git, Mercurial, & Hosting Platforms using an interactive visual tree.</p> </header> - <div class="history-container"> + <div class="history-container container"> <!-- The visual trunk line --> <div class="history-trunk"></div> <!-- Node 1: Foundational Concepts --> <section class="history-node" id="section-concepts"> + <!-- Branch line connects node-dot to card --> <div class="branch-line"></div> - <div class="section-card"> <!-- Main card for the section node --> - <h2 class="section-title-inline"><i class="bi bi-lightbulb"></i> Foundational Concepts</h2> - <div class="section-content"> - <!-- Inner cards using Bootstrap grid --> - <div class="row"> - <div class="col-lg-4 col-md-6 mb-4"> - <div class="info-card" id="card-dvcs"> - <div class="card-body"> - <h5><i class="bi bi-diagram-3"></i> DVCS Philosophy</h5> - <div class="card-content-wrapper"> - <p class="summary"><span class="term">Distributed Version Control Systems</span> (DVCS) like Git & Mercurial give every developer a <span class="term">full repository copy</span>, enabling offline work, faster operations, and flexible workflows.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept1" aria-expanded="false" aria-controls="collapseConcept1"> - Details <i class="bi bi-chevron-down"></i> - </button> + <!-- Card containing the content for this node --> + <div class="section-card card shadow-sm"> + <div class="card-body"> + <h2 class="section-title-inline"><i class="bi bi-lightbulb"></i> Foundational Concepts</h2> + <div class="section-content"> + <!-- Inner cards using Bootstrap grid --> + <div class="row"> + <div class="col-lg-4 col-md-6 mb-3"> + <div class="info-card" id="card-dvcs"> + <div class="card-body"> + <h5><i class="bi bi-diagram-3"></i> DVCS Philosophy</h5> + <div class="card-content-wrapper"> + <p class="summary"><span class="term">Distributed Version Control Systems</span> (DVCS) like Git & Mercurial give every developer a <span class="term">full repository copy</span>, enabling offline work, faster operations, and flexible workflows.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept1" aria-expanded="false" aria-controls="collapseConcept1"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseConcept1"> + <h6>Core Idea</h6><p>Unlike older Centralized VCS (like SVN or CVS) where developers checked out files from a single central server, DVCS provides each user with a complete, independent copy (clone) of the entire repository history.</p><h6>Key Advantages</h6><ul><li><strong>Offline Work:</strong> Commit, branch, view history, and merge without needing a network connection.</li><li><strong>Performance:</strong> Most operations (commit, branch, merge, diff) are local and thus significantly faster.</li><li><strong>Redundancy:</strong> Every clone is effectively a full backup of the repository.</li><li><strong>Workflow Flexibility:</strong> Enables complex branching strategies and collaboration models (e.g., pull requests).</li><li><strong>Collaboration:</strong> Easily share changes between any two repositories, not just client-server.</li></ul><h6>Shift from Centralized</h6><p>The move to DVCS addressed key limitations of CVCS, particularly around branching/merging complexity, performance bottlenecks, and reliance on network connectivity.</p> </div> - </div> - <div class="collapse collapse-content" id="collapseConcept1"> - <h6>Core Idea</h6><p>Unlike older Centralized VCS (like SVN or CVS) where developers checked out files from a single central server, DVCS provides each user with a complete, independent copy (clone) of the entire repository history.</p><h6>Key Advantages</h6><ul><li><strong>Offline Work:</strong> Commit, branch, view history, and merge without needing a network connection.</li><li><strong>Performance:</strong> Most operations (commit, branch, merge, diff) are local and thus significantly faster.</li><li><strong>Redundancy:</strong> Every clone is effectively a full backup of the repository.</li><li><strong>Workflow Flexibility:</strong> Enables complex branching strategies and collaboration models (e.g., pull requests).</li><li><strong>Collaboration:</strong> Easily share changes between any two repositories, not just client-server.</li></ul><h6>Shift from Centralized</h6><p>The move to DVCS addressed key limitations of CVCS, particularly around branching/merging complexity, performance bottlenecks, and reliance on network connectivity.</p> </div> </div> - </div> - <div class="col-lg-4 col-md-6 mb-4"> - <div class="info-card" id="card-repository"> - <div class="card-body"> - <h5><i class="bi bi-archive"></i> Repository (Repo)</h5> - <div class="card-content-wrapper"> - <p class="summary">A collection of <span class="term">files</span> and the <span class="term">history</span> of their changes. In DVCS, you have a local copy and interact with remote copies (e.g., on GitHub).</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept2" aria-expanded="false" aria-controls="collapseConcept2"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-4 col-md-6 mb-3"> + <div class="info-card" id="card-repository"> + <div class="card-body"> + <h5><i class="bi bi-archive"></i> Repository (Repo)</h5> + <div class="card-content-wrapper"> + <p class="summary">A collection of <span class="term">files</span> and the <span class="term">history</span> of their changes. In DVCS, you have a local copy and interact with remote copies (e.g., on GitHub).</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept2" aria-expanded="false" aria-controls="collapseConcept2"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseConcept2"> + <h6>What it Contains</h6><p>A repository stores all the files belonging to a project, plus the complete history of modifications made to those files over time. This history is typically stored as a series of <span class="term">commits</span>.</p><h6>Local vs. Remote</h6><ul><li><strong>Local Repository:</strong> The full copy residing on your own computer. This is where you do your work: edit files, commit changes, create branches.</li><li><strong>Remote Repository:</strong> A copy hosted on a server (e.g., GitHub, GitLab, a company server). Used for collaboration, backup, and sharing code with others. A common conventional name for the primary remote is <code>origin</code>.</li></ul><h6>Operations</h6><p>You typically <span class="term">clone</span> a remote repository to create your local copy, <span class="term">pull</span> changes from a remote, and <span class="term">push</span> your local changes to a remote. <span class="term">Fetch</span> retrieves changes without merging.</p> </div> - </div> - <div class="collapse collapse-content" id="collapseConcept2"> - <h6>What it Contains</h6><p>A repository stores all the files belonging to a project, plus the complete history of modifications made to those files over time. This history is typically stored as a series of <span class="term">commits</span>.</p><h6>Local vs. Remote</h6><ul><li><strong>Local Repository:</strong> The full copy residing on your own computer. This is where you do your work: edit files, commit changes, create branches.</li><li><strong>Remote Repository:</strong> A copy hosted on a server (e.g., GitHub, GitLab, a company server). Used for collaboration, backup, and sharing code with others. Common remote names include <code>origin</code>.</li></ul><h6>Operations</h6><p>You typically <span class="term">clone</span> a remote repository to create your local copy, <span class="term">pull</span> changes from a remote, and <span class="term">push</span> your local changes to a remote.</p> </div> </div> - </div> - <div class="col-lg-4 col-md-6 mb-4"> - <div class="info-card" id="card-commit"> - <div class="card-body"> - <h5><i class="bi bi-check2-circle"></i> Commit</h5> - <div class="card-content-wrapper"> - <p class="summary">A <span class="term">snapshot</span> of your project's files at a specific point in time, saved to the repository's history. Each commit has a unique ID and a message.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept3" aria-expanded="false" aria-controls="collapseConcept3"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-4 col-md-6 mb-3"> + <div class="info-card" id="card-commit"> + <div class="card-body"> + <h5><i class="bi bi-check2-circle"></i> Commit</h5> + <div class="card-content-wrapper"> + <p class="summary">A <span class="term">snapshot</span> of your project's tracked files at a specific point in time, saved to the repository's history. Each commit has a unique ID (e.g., Git SHA-1 hash) and a message.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept3" aria-expanded="false" aria-controls="collapseConcept3"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseConcept3"> + <h6>Purpose</h6><p>Commits are the fundamental building blocks of a project's history. They represent saved states that you can reference, revert to, or compare against.</p><h6>Components</h6><ul><li><strong>Snapshot:</strong> Records the state of all tracked files at that moment. DVCS like Git often store this efficiently, only recording changes relative to previous commits.</li><li><strong>Metadata:</strong> Includes the author, committer, timestamp, and a unique identifier (e.g., a SHA-1 hash in Git).</li><li><strong>Parent(s):</strong> Points to the preceding commit(s). A standard commit has one parent; a merge commit has two or more.</li><li><strong>Commit Message:</strong> A description written by the author explaining the changes made in the commit. Crucial for understanding history.</li></ul><h6>Workflow (Git Example)</h6><p>Typically, you modify files, <span class="term">stage</span> the specific changes you want to include (<code>git add</code>), and then <span class="term">commit</span> them with a message (<code>git commit</code>).</p> </div> - </div> - <div class="collapse collapse-content" id="collapseConcept3"> - <h6>Purpose</h6><p>Commits are the fundamental building blocks of a project's history. They represent saved states that you can reference, revert to, or compare against.</p><h6>Components</h6><ul><li><strong>Snapshot:</strong> Records the state of all tracked files at that moment. DVCS like Git often store this efficiently, only recording changes relative to previous commits.</li><li><strong>Metadata:</strong> Includes the author, committer, timestamp, and a unique identifier (e.g., SHA-1 hash in Git).</li><li><strong>Parent(s):</strong> Points to the preceding commit(s). A standard commit has one parent; a merge commit has two or more.</li><li><strong>Commit Message:</strong> A description written by the author explaining the changes made in the commit. Crucial for understanding history.</li></ul><h6>Workflow (Git Example)</h6><p>Typically, you modify files, <span class="term">stage</span> the specific changes you want to include (<code>git add</code>), and then <span class="term">commit</span> them with a message (<code>git commit</code>).</p> </div> </div> - </div> - <div class="col-lg-4 col-md-6 mb-4"> - <div class="info-card" id="card-branch"> - <div class="card-body"> - <h5><i class="bi bi-diagram-2"></i> Branch</h5> - <div class="card-content-wrapper"> - <p class="summary">An <span class="term">independent line of development</span>. Branches allow you to work on features or fixes without affecting the main codebase (e.g., <code>main</code> or <code>master</code>).</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept4" aria-expanded="false" aria-controls="collapseConcept4"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-4 col-md-6 mb-3"> + <div class="info-card" id="card-branch"> + <div class="card-body"> + <h5><i class="bi bi-diagram-2"></i> Branch</h5> + <div class="card-content-wrapper"> + <p class="summary">An <span class="term">independent line of development</span>. Branches allow you to work on features or fixes without affecting the main codebase (e.g., <code>main</code> or <code>master</code>).</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept4" aria-expanded="false" aria-controls="collapseConcept4"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseConcept4"> + <h6>Concept</h6><p>Think of a branch as a movable pointer to a specific commit. When you create a branch, you create a new pointer. As you make commits on that branch, the pointer moves forward along with your changes.</p><h6>Why Use Branches?</h6><ul><li><strong>Isolation:</strong> Develop features, experiment, or fix bugs without destabilizing the main line of code.</li><li><strong>Parallel Development:</strong> Multiple team members can work on different features simultaneously on separate branches.</li><li><strong>Organization:</strong> Keep related changes grouped together (e.g., a 'feature/user-login' branch).</li><li><strong>Workflow Enablement:</strong> Basis for workflows like Gitflow or GitHub Flow, often involving Pull/Merge Requests.</li></ul><h6>Common Operations (Git)</h6><p>Creating a branch (<code>git branch feature-x</code>), switching to it (<code>git checkout feature-x</code> or the newer <code>git switch feature-x</code>), making commits, and eventually merging it back.</p> </div> - </div> - <div class="collapse collapse-content" id="collapseConcept4"> - <h6>Concept</h6><p>Think of a branch as a movable pointer to a specific commit. When you create a branch, you create a new pointer. As you make commits on that branch, the pointer moves forward.</p><h6>Why Use Branches?</h6><ul><li><strong>Isolation:</strong> Develop features, experiment, or fix bugs without destabilizing the main line of code.</li><li><strong>Parallel Development:</strong> Multiple team members can work on different features simultaneously on separate branches.</li><li><strong>Organization:</strong> Keep related changes grouped together (e.g., a 'feature/user-login' branch).</li><li><strong>Workflow Enablement:</strong> Basis for workflows like Gitflow or GitHub Flow, often involving Pull Requests.</li></ul><h6>Common Operations</h6><p>Creating a branch (<code>git branch feature-x</code>), switching to it (<code>git checkout feature-x</code> or <code>git switch feature-x</code>), making commits, and eventually merging it back.</p> </div> </div> - </div> - <div class="col-lg-4 col-md-6 mb-4"> - <div class="info-card" id="card-merge"> - <div class="card-body"> - <h5><i class="bi bi-bezier2"></i> Merge</h5> - <div class="card-content-wrapper"> - <p class="summary">The process of <span class="term">combining changes</span> from different branches back into one. Resolves differences between the development histories.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept5" aria-expanded="false" aria-controls="collapseConcept5"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-4 col-md-6 mb-3"> + <div class="info-card" id="card-merge"> + <div class="card-body"> + <h5><i class="bi bi-bezier2"></i> Merge</h5> + <div class="card-content-wrapper"> + <p class="summary">The process of <span class="term">combining changes</span> from different branches back into one. Resolves differences between the development histories.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConcept5" aria-expanded="false" aria-controls="collapseConcept5"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseConcept5"> + <h6>Goal</h6><p>To integrate work done on a separate branch (e.g., a feature branch) into another branch (e.g., <code>main</code>).</p><h6>How it Works</h6><p>VCS tools analyze the histories of the branches being merged. </p><ul><li><strong>Fast-Forward Merge:</strong> If the target branch hasn't diverged (no new commits since the feature branch was created), the target branch pointer simply moves forward to the source branch's latest commit. Simple and results in a linear history.</li><li><strong>Three-Way Merge (or Merge Commit):</strong> If both branches have diverged, the VCS finds a common ancestor commit and combines the changes from both branches since that ancestor. This typically creates a new <span class="term">merge commit</span> with two parents, explicitly showing where the histories were combined.</li></ul><h6>Merge Conflicts</h6><p>Occur when both branches modified the same part of the same file differently. The VCS cannot automatically decide which change to keep, requiring manual intervention by the developer to resolve the conflict before completing the merge.</p><h6>Alternatives</h6><p><span class="term">Rebasing</span> (e.g., <code>git rebase</code>) is another way to integrate changes. It rewrites the history of one branch on top of another, creating a linear history but potentially causing issues if the branch has already been shared. It has different tradeoffs compared to merging regarding history clarity and collaboration safety.</p> </div> - </div> - <div class="collapse collapse-content" id="collapseConcept5"> - <h6>Goal</h6><p>To integrate work done on a separate branch (e.g., a feature branch) into another branch (e.g., <code>main</code>).</p><h6>How it Works</h6><p>VCS tools analyze the histories of the branches being merged. </p><ul><li><strong>Fast-Forward Merge:</strong> If the target branch hasn't diverged (no new commits), the target branch pointer simply moves forward to the source branch's latest commit. Simple and clean history.</li><li><strong>Three-Way Merge:</strong> If both branches have diverged, the VCS finds a common ancestor commit and combines the changes from both branches since that ancestor. This typically creates a new <span class="term">merge commit</span> with two parents.</li></ul><h6>Merge Conflicts</h6><p>Occur when both branches modified the same part of the same file differently. The VCS cannot automatically decide which change to keep, requiring manual intervention by the developer to resolve the conflict before completing the merge.</p><h6>Alternatives</h6><p><span class="term">Rebasing</span> (e.g., <code>git rebase</code>) is another way to integrate changes, rewriting history to make it appear linear. Has different tradeoffs regarding history clarity and collaboration.</p> </div> </div> - </div> + </div> </div> - </div> + </div> </div> </section> - <!-- Node 2: DVCS Systems (Branched Off) --> + <!-- Node 2: DVCS Systems (Branched Off - indicated by style/border) --> <section class="history-node branch-off" id="section-dvcs"> <div class="branch-line"></div> - <div class="section-card"> - <h2 class="section-title-inline"><i class="bi bi-git"></i> Distributed VCS</h2> - <div class="section-content"> - <div class="row"> - <div class="col-lg-6 mb-4"> - <div class="info-card vcs-git" id="card-git"> - <div class="card-body"> - <h5><i class="bi bi-git"></i> Git</h5> - <div class="card-content-wrapper"> - <p class="summary">The <span class="term">dominant DVCS</span>, known for speed, flexibility, powerful branching/merging, and a vast ecosystem. Features a <span class="term">staging area</span>.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGit" aria-expanded="false" aria-controls="collapseGit"> - Details <i class="bi bi-chevron-down"></i> - </button> - </div> - </div> - <div class="collapse collapse-content" id="collapseGit"> - <h6>Philosophy & Core</h6><p>Designed by Linus Torvalds for Linux kernel development. Focuses on performance, data integrity (content-addressable storage using SHA-1), and support for non-linear workflows (branching).</p><h6>Key Features</h6><ul><li><strong>Staging Area (Index):</strong> Intermediate step between working directory and repository history. Allows crafting precise commits.</li><li><strong>Branching Model:</strong> Extremely lightweight and fast branching and merging.</li><li><strong>Distributed Nature:</strong> Full repository locally, facilitating offline work and peer-to-peer sharing.</li><li><strong>Performance:</strong> Most operations are very fast as they are local.</li><li><strong>Flexibility:</strong> Supports diverse workflows (Gitflow, GitHub Flow, etc.). Commands like <code>rebase</code> allow history manipulation (use with care).</li></ul><h6>Common Commands</h6><p><code>git clone</code>, <code>git add</code>, <code>git commit</code>, <code>git status</code>, <code>git log</code>, <code>git branch</code>, <code>git checkout</code>/<code>git switch</code>, <code>git merge</code>, <code>git pull</code>, <code>git push</code>, <code>git fetch</code>, <code>git rebase</code>.</p><h6>Strengths</h6><ul><li>Industry standard, huge community, extensive tooling and platform support (GitHub, GitLab, etc.).</li><li>Excellent performance for most operations.</li><li>Powerful and flexible branching/merging capabilities.</li><li>Staging area allows granular control over commits.</li></ul><h6>Tradeoffs</h6><ul><li>Can have a steeper learning curve compared to Mercurial initially (especially concepts like the staging area, reset, rebase).</li><li>Command-line interface can feel complex with many options.</li><li>Handling very large binary files can require extensions (Git LFS).</li></ul><h6>Use Cases</h6><p>Software development of all sizes, open-source projects, infrastructure as code, documentation, anywhere collaborative text-based file tracking is needed.</p> - </div> + <div class="section-card card shadow-sm"> + <div class="card-body"> + <h2 class="section-title-inline"><i class="bi bi-git"></i> Distributed VCS</h2> + <div class="section-content"> + <div class="row"> + <div class="col-lg-6 mb-3"> + <div class="info-card vcs-git" id="card-git"> + <div class="card-body"> + <h5><i class="bi bi-git"></i> Git (<a href="https://git-scm.com/" target="_blank" rel="noopener noreferrer">git-scm.com</a>)</h5> + <div class="card-content-wrapper"> + <p class="summary">The <span class="term">dominant DVCS</span>, known for speed, flexibility, powerful branching/merging, and a vast ecosystem. Features a <span class="term">staging area</span> (index) for crafting commits.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGit" aria-expanded="false" aria-controls="collapseGit"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseGit"> + <h6>Philosophy & Core</h6><p>Designed by Linus Torvalds for Linux kernel development. Focuses on performance, data integrity (content-addressable storage using SHA-1 hashes), and robust support for non-linear workflows (branching and merging).</p><h6>Key Features</h6><ul><li><strong>Staging Area (Index):</strong> An intermediate step between your working directory and the repository history. Allows you to selectively stage parts of files to craft precise, logical commits.</li><li><strong>Branching Model:</strong> Extremely lightweight and fast branching and merging are core strengths.</li><li><strong>Distributed Nature:</strong> Every clone is a full repository, facilitating offline work and peer-to-peer sharing.</li><li><strong>Performance:</strong> Most operations are very fast as they are performed locally.</li><li><strong>Flexibility:</strong> Supports diverse workflows (Gitflow, GitHub Flow, etc.). Commands like <code>rebase</code> allow history manipulation (powerful, but use with care on shared branches).</li><li><strong>Large File Support:</strong> Handles large binary files better with extensions like <a href="https://git-lfs.github.com/" target="_blank" rel="noopener noreferrer">Git Large File Storage (LFS)</a>.</li></ul><h6>Common Commands</h6><p><code>git clone</code>, <code>git add</code>, <code>git commit</code>, <code>git status</code>, <code>git log</code>, <code>git branch</code>, <code>git checkout</code> / <code>git switch</code>, <code>git merge</code>, <code>git rebase</code>, <code>git pull</code>, <code>git push</code>, <code>git fetch</code>.</p><h6>Strengths</h6><ul><li>Industry standard; huge community and ecosystem.</li><li>Extensive tooling and platform support (GitHub, GitLab, etc.).</li><li>Excellent performance for most common operations.</li><li>Powerful and flexible branching/merging.</li><li>Staging area allows granular commit control.</li></ul><h6>Tradeoffs</h6><ul><li>Steeper initial learning curve for some concepts (staging area, reset, rebase).</li><li>Command-line interface can feel complex due to numerous options.</li><li>Default handling of very large binaries isn't ideal without LFS.</li></ul><h6>Use Cases</h6><p>Software development of all sizes, open-source projects, infrastructure as code, documentation, collaborative writing - essentially anywhere tracking changes to text-based files is needed.</p> + </div> + </div> </div> - </div> - <div class="col-lg-6 mb-4"> - <div class="info-card vcs-mercurial" id="card-mercurial"> - <div class="card-body"> - <h5><i class="bi bi-infinity"></i> Mercurial (Hg)</h5> - <div class="card-content-wrapper"> - <p class="summary">A DVCS focused on <span class="term">simplicity</span>, ease of use, and performance. Often considered more intuitive than Git initially.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHg" aria-expanded="false" aria-controls="collapseHg"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-6 mb-3"> + <div class="info-card vcs-mercurial" id="card-mercurial"> + <div class="card-body"> + <h5><i class="bi bi-infinity"></i> Mercurial (Hg) (<a href="https://www.mercurial-scm.org/" target="_blank" rel="noopener noreferrer">mercurial-scm.org</a>)</h5> + <div class="card-content-wrapper"> + <p class="summary">A DVCS focused on <span class="term">simplicity</span>, ease of use, and performance. Often considered more intuitive than Git initially, but less widely used today.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHg" aria-expanded="false" aria-controls="collapseHg"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseHg"> + <h6>Philosophy & Core</h6><p>Designed with user-friendliness and interface consistency as high priorities. Aims to provide powerful DVCS features with a simpler command set and conceptual model compared to Git's defaults.</p><h6>Key Features</h6><ul><li><strong>Simpler Interface:</strong> Commands are often perceived as more consistent and intuitive (e.g., no staging area by default; <code>hg commit</code> commits all tracked changes).</li><li><strong>Branching Concepts:</strong> Supports multiple ways to handle parallel lines of development (named branches, bookmarks, anonymous heads). Named branches are permanent parts of history, unlike Git branches which are just pointers. This can offer power but also cause confusion.</li><li><strong>Extensibility:</strong> Core functionality can be extended via built-in extensions (e.g., `rebase`, `histedit` for history modification, `largefiles` for binary file support).</li><li><strong>Performance:</strong> Generally excellent performance, comparable to Git.</li><li><strong>Windows Support:</strong> Historically known for strong native Windows support.</li></ul><h6>Common Commands</h6><p><code>hg clone</code>, <code>hg add</code>, <code>hg commit</code> (or <code>hg ci</code>), <code>hg status</code>, <code>hg log</code>, <code>hg branch</code>, <code>hg update</code> (switches branches/commits), <code>hg merge</code>, <code>hg pull</code>, <code>hg push</code>, <code>hg heads</code>.</p><h6>Strengths</h6><ul><li>Potentially easier initial learning curve for basic workflows.</li><li>More consistent command-line interface structure.</li><li>Good performance.</li><li>Built-in web interface (<code>hg serve</code>).</li></ul><h6>Tradeoffs</h6><ul><li>Significantly smaller community and ecosystem compared to Git.</li><li>Declining support on major hosting platforms (Bitbucket deprecated new Hg repos in 2020; GitHub never fully supported it; GitLab requires workarounds).</li><li>Multiple branching models (named branches vs bookmarks) can be confusing.</li><li>Some advanced operations require enabling non-default extensions.</li></ul><h6>Use Cases</h6><p>Legacy projects, specific large organizations (e.g., Meta/Facebook uses it heavily internally), teams that strongly prefer its model over Git and manage their own hosting or use Bitbucket for existing repos.</p> </div> - </div> - <div class="collapse collapse-content" id="collapseHg"> - <h6>Philosophy & Core</h6><p>Designed with user-friendliness and consistency in mind. Aims to provide powerful DVCS features with a simpler command set and conceptual model compared to Git.</p><h6>Key Features</h6><ul><li><strong>Simpler Interface:</strong> Commands are often seen as more consistent and intuitive. No direct equivalent of Git's staging area by default (commits typically include all tracked changes).</li><li><strong>Branching Concepts:</strong> Supports multiple ways to handle branches (named branches, bookmarks, anonymous heads), which can be confusing but offers flexibility. Named branches are permanent markers in history.</li><li><strong>Extensibility:</strong> Features can be added via extensions (e.g., rebase, largefiles support similar to Git LFS).</li><li><strong>Performance:</strong> Generally excellent performance, competitive with Git.</li><li><strong>Windows Support:</strong> Historically known for strong native Windows support.</li></ul><h6>Common Commands</h6><p><code>hg clone</code>, <code>hg add</code>, <code>hg commit</code> (or <code>hg ci</code>), <code>hg status</code>, <code>hg log</code>, <code>hg branch</code>, <code>hg update</code> (switches branches/commits), <code>hg merge</code>, <code>hg pull</code>, <code>hg push</code>, <code>hg heads</code>.</p><h6>Strengths</h6><ul><li>Easier initial learning curve for many users.</li><li>Consistent command-line interface.</li><li>Good performance.</li><li>Built-in web interface (<code>hg serve</code>).</li></ul><h6>Tradeoffs</h6><ul><li>Smaller community and ecosystem compared to Git.</li><li>Less prevalent on major hosting platforms (though Bitbucket has excellent support).</li><li>Branching model (especially named branches vs bookmarks) can be confusing.</li><li>Some advanced operations require enabling extensions.</li></ul><h6>Use Cases</h6><p>Software development (especially where ease of use is prioritized), large projects (used by Facebook/Meta internally), teams comfortable with its branching models.</p> </div> </div> - </div> + </div> </div> </div> </div> </section> - <!-- Node 3: Platforms (Branched Off) --> + <!-- Node 3: Platforms (Branched Off - indicated by style/border) --> <section class="history-node branch-off" id="section-platforms"> <div class="branch-line"></div> - <div class="section-card"> - <h2 class="section-title-inline"><i class="bi bi-hdd-stack"></i> Hosting Platforms</h2> - <div class="section-content"> - <div class="row"> - <div class="col-lg-3 col-md-6 mb-4"> - <div class="info-card platform-github" id="card-github"> - <div class="card-body"> - <h5><i class="bi bi-github"></i> GitHub</h5> - <div class="card-content-wrapper"> - <p class="summary">The most popular platform for hosting Git repositories. Strong focus on <span class="term">collaboration</span>, <span class="term">open source</span>, and developer community features.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlatform1" aria-expanded="false" aria-controls="collapsePlatform1"> - Details <i class="bi bi-chevron-down"></i> - </button> - </div> - </div> - <div class="collapse collapse-content" id="collapsePlatform1"> - <h6>Core Offerings</h6><p>Git repository hosting, Pull Requests (code review/merge workflow), issue tracking, project management (Projects), CI/CD (GitHub Actions), package hosting (Packages), wikis, security scanning (Dependabot, Code Scanning), large community.</p><h6>Key Features</h6><ul><li><strong>Pull Requests:</strong> Core collaborative code review and merging mechanism.</li><li><strong>GitHub Actions:</strong> Powerful, integrated CI/CD and workflow automation platform.</li><li><strong>Community Focus:</strong> Hub for open-source projects, social coding features (following, starring).</li><li><strong>Marketplace:</strong> Integrations with numerous third-party developer tools.</li><li><strong>Codespaces:</strong> Cloud-based development environments.</li><li><strong>Copilot:</strong> AI pair programmer integration.</li></ul><h6>Strengths</h6><ul><li>Massive user base and community effect.</li><li>Excellent UI/UX, generally intuitive.</li><li>Powerful and flexible GitHub Actions.</li><li>Generous free tier for public and private repositories.</li><li>Strong focus on security features.</li></ul><h6>Tradeoffs</h6><ul><li>Owned by Microsoft (a concern for some).</li><li>CI/CD minutes/storage limits on free/lower tiers can be restrictive for large projects.</li><li>Project management features less mature than specialized tools like Jira.</li></ul> - </div> + <div class="section-card card shadow-sm"> + <div class="card-body"> + <h2 class="section-title-inline"><i class="bi bi-hdd-stack"></i> Hosting Platforms</h2> + <div class="section-content"> + <div class="row"> + <div class="col-lg-3 col-md-6 mb-3"> + <div class="info-card platform-github" id="card-github"> + <div class="card-body"> + <h5><i class="bi bi-github"></i> GitHub (<a href="https://github.com/" target="_blank" rel="noopener noreferrer">github.com</a>)</h5> + <div class="card-content-wrapper"> + <p class="summary">The most popular platform for hosting Git repositories. Strong focus on <span class="term">collaboration</span>, <span class="term">open source</span>, and developer community features.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlatform1" aria-expanded="false" aria-controls="collapsePlatform1"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapsePlatform1"> + <h6>Core Offerings</h6><p>Git repository hosting, Pull Requests (code review/merge workflow), issue tracking, project management (Projects v2 - boards/tables), CI/CD (GitHub Actions), package hosting (Packages), wikis, security scanning (Dependabot, Code Scanning), large community.</p><h6>Key Features</h6><ul><li><strong>Pull Requests:</strong> Central mechanism for collaborative code review and merging.</li><li><strong>GitHub Actions:</strong> Powerful, integrated CI/CD and workflow automation platform defined in YAML files within the repo.</li><li><strong>Community Focus:</strong> The de facto hub for open-source projects; social coding features (following, starring, forks).</li><li><strong>Marketplace:</strong> Integrations with numerous third-party developer tools.</li><li><strong>Codespaces:</strong> Cloud-based development environments accessible via browser or VS Code.</li><li><strong>Copilot:</strong> AI pair programmer deeply integrated into the developer workflow.</li></ul><h6>Strengths</h6><ul><li>Massive user base and network effect.</li><li>Generally excellent UI/UX, considered intuitive by many.</li><li>Powerful and flexible GitHub Actions CI/CD.</li><li>Generous free tier for public and private repositories, including Actions minutes for public repos.</li><li>Strong focus on security features (Dependabot, code scanning).</li></ul><h6>Tradeoffs</h6><ul><li>Owned by Microsoft (a potential concern for some).</li><li>CI/CD minutes/storage limits on free/lower tiers can be restrictive for large private projects.</li><li>Integrated project management features may be less comprehensive than specialized tools like Jira or Azure Boards for complex needs.</li></ul> + </div> + </div> </div> - </div> - <div class="col-lg-3 col-md-6 mb-4"> - <div class="info-card platform-gitlab" id="card-gitlab"> - <div class="card-body"> - <h5><i class="bi bi-gitlab"></i> GitLab</h5> - <div class="card-content-wrapper"> - <p class="summary">An <span class="term">integrated DevOps platform</span> built around Git hosting. Offers a complete toolchain from planning to monitoring. <span class="term">Self-hosting</span> option available.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlatform2" aria-expanded="false" aria-controls="collapsePlatform2"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-3 col-md-6 mb-3"> + <div class="info-card platform-gitlab" id="card-gitlab"> + <div class="card-body"> + <h5><i class="bi bi-gitlab"></i> GitLab (<a href="https://gitlab.com/" target="_blank" rel="noopener noreferrer">gitlab.com</a>)</h5> + <div class="card-content-wrapper"> + <p class="summary">An <span class="term">integrated DevOps platform</span> built around Git hosting. Offers a wide toolchain from planning to monitoring. <span class="term">Self-hosting</span> option available.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlatform2" aria-expanded="false" aria-controls="collapsePlatform2"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapsePlatform2"> + <h6>Core Offerings</h6><p>Git repository hosting, Merge Requests (their term for PRs), issue tracking with boards, powerful integrated CI/CD (GitLab CI/CD), container registry, extensive security scanning (SAST, DAST, dependency, secrets), monitoring features, planning tools (Epics, Roadmaps), wiki.</p><h6>Key Features</h6><ul><li><strong>Single Application:</strong> Aims to provide the entire DevOps lifecycle within one platform, reducing toolchain complexity.</li><li><strong>GitLab CI/CD:</strong> Highly integrated, powerful, and configurable CI/CD using a <code>.gitlab-ci.yml</code> file. Runners can be shared or self-hosted.</li><li><strong>Self-Managed Option:</strong> Can be installed on your own infrastructure (Community Edition is open source, Enterprise Edition offers more features).</li><li><strong>Security Focus (DevSecOps):</strong> Comprehensive suite of security scanning tools integrated into the development workflow and MRs.</li><li><strong>Auto DevOps:</strong> Opinionated pipeline for automating build, test, deploy, and monitoring for simple projects.</li></ul><h6>Strengths</h6><ul><li>All-in-one DevOps platform can simplify tooling.</li><li>Mature and powerful built-in CI/CD is a core strength.</li><li>Strong security features integrated throughout the lifecycle.</li><li>Viable and popular self-hosting option with the open-source Community Edition.</li><li>Transparent development and release process.</li></ul><h6>Tradeoffs</h6><ul><li>The sheer number of features can make the UI feel complex or overwhelming initially.</li><li>UI/UX sometimes perceived as less polished than GitHub by some users.</li><li>Free tier CI/CD limits may be reached quickly by active teams.</li><li>Self-hosting requires operational overhead (maintenance, scaling, security).</li></ul> </div> - </div> - <div class="collapse collapse-content" id="collapsePlatform2"> - <h6>Core Offerings</h6><p>Git repository hosting, Merge Requests, issue tracking with boards, powerful integrated CI/CD (GitLab CI/CD), container registry, security scanning (SAST, DAST, etc.), monitoring, planning tools (Epics, Roadmaps), wiki.</p><h6>Key Features</h6><ul><li><strong>Single Application:</strong> Aims to provide the entire DevOps lifecycle in one platform.</li><li><strong>GitLab CI/CD:</strong> Highly integrated, powerful, and configurable CI/CD using a <code>.gitlab-ci.yml</code> file.</li><li><strong>Self-Managed Option:</strong> Can be installed on your own infrastructure (Community Edition is open source).</li><li><strong>Security Focus:</strong> Comprehensive suite of security scanning tools integrated into the development workflow (DevSecOps).</li><li><strong>Auto DevOps:</strong> Opinionated pipeline for automating build, test, deploy, and monitoring.</li></ul><h6>Strengths</h6><ul><li>All-in-one DevOps platform reduces toolchain complexity.</li><li>Mature and powerful built-in CI/CD.</li><li>Strong security features integrated throughout.</li><li>Viable self-hosting option with the open-source Community Edition.</li><li>Transparent development process.</li></ul><h6>Tradeoffs</h6><ul><li>Can feel complex due to the sheer number of features.</li><li>UI can sometimes be less polished or intuitive than GitHub.</li><li>Free tier CI/CD limits can be hit quickly.</li><li>Self-hosting requires operational overhead.</li></ul> </div> </div> - </div> - <div class="col-lg-3 col-md-6 mb-4"> - <div class="info-card platform-bitbucket" id="card-bitbucket"> - <div class="card-body"> - <h5><i class="bi bi-bitbucket"></i> Bitbucket Cloud</h5> - <div class="card-content-wrapper"> - <p class="summary">Atlassian's Git (and historically Mercurial) hosting platform. Known for excellent <span class="term">integration</span> with other Atlassian tools like <span class="term">Jira and Trello</span>.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlatform3" aria-expanded="false" aria-controls="collapsePlatform3"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-3 col-md-6 mb-3"> + <div class="info-card platform-bitbucket" id="card-bitbucket"> + <div class="card-body"> + <h5><i class="bi bi-bitbucket"></i> Bitbucket Cloud (<a href="https://bitbucket.org/" target="_blank" rel="noopener noreferrer">bitbucket.org</a>)</h5> + <div class="card-content-wrapper"> + <p class="summary">Atlassian's Git hosting platform. Known for excellent <span class="term">integration</span> with other Atlassian tools like <span class="term">Jira and Trello</span>. (Mercurial support deprecated).</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlatform3" aria-expanded="false" aria-controls="collapsePlatform3"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapsePlatform3"> + <h6>Core Offerings</h6><p>Git repository hosting (Mercurial support was removed for new repos in 2020, existing Hg repos may still function but are legacy), Pull Requests, integrated CI/CD (Bitbucket Pipelines), code search, deep issue tracking integration (Jira), project tracking integration (Trello).</p><h6>Key Features</h6><ul><li><strong>Atlassian Ecosystem Integration:</strong> Seamless workflow between Bitbucket commits/PRs and Jira issues is its main draw. Also integrates with Trello, Confluence, Opsgenie etc.</li><li><strong>Bitbucket Pipelines:</strong> Integrated CI/CD configured via a <code>bitbucket-pipelines.yml</code> file within the repository.</li><li><strong>Code Insights:</strong> Allows surfacing information from scanning/testing tools directly within Pull Requests.</li><li><strong>Free Tier:</strong> Offers free private repositories for small teams (up to 5 users), including CI/CD minutes.</li><li><strong>Deployment tracking:</strong> Integrates deployment information back into Jira issues.</li></ul><h6>Strengths</h6><ul><li>Unbeatable integration if your team is heavily invested in the Atlassian suite (Jira especially).</li><li>Competitive pricing, potentially cost-effective for small teams needing private repos and basic CI/CD.</li><li>Simple and effective built-in CI/CD with Pipelines for many common use cases.</li><li>Clean and straightforward user interface.</li></ul><h6>Tradeoffs</h6><ul><li>Smaller developer community compared to GitHub or GitLab.</li><li>CI/CD (Pipelines) may be less flexible or powerful than GitHub Actions or GitLab CI for very complex scenarios.</li><li>Fewer built-in features compared to GitLab's all-in-one approach (relies more on integrating other Atlassian tools).</li><li>Less focus on open-source community features than GitHub.</li><li>Mercurial support is effectively gone for practical purposes.</li></ul><h6>Use Cases</h6><p>Teams already using Jira extensively for project management, organizations standardized on Atlassian tools, small teams looking for cost-effective private repositories with integrated CI/CD.</p> </div> - </div> - <div class="collapse collapse-content" id="collapsePlatform3"> - <h6>Core Offerings</h6><p>Git repository hosting (Mercurial support deprecated for new repos), Pull Requests, integrated CI/CD (Bitbucket Pipelines), code search, issue tracking integration (Jira), project tracking integration (Trello).</p><h6>Key Features</h6><ul><li><strong>Atlassian Ecosystem Integration:</strong> Seamless workflow between Bitbucket, Jira (issue tracking), Trello (boards), Confluence (documentation), etc.</li><li><strong>Bitbucket Pipelines:</strong> Integrated CI/CD configured within the repository (<code>bitbucket-pipelines.yml</code>).</li><li><strong>Code Insights:</strong> Surface information from scanning/testing tools directly in Pull Requests.</li><li><strong>Free Tier:</strong> Offers free private repositories for small teams (up to 5 users).</li></ul><h6>Strengths</h6><ul><li>Unbeatable integration if you're heavily invested in the Atlassian suite (Jira especially).</li><li>Competitive pricing, potentially cheaper for small teams needing private repos than GitHub historically.</li><li>Simple and effective built-in CI/CD with Pipelines.</li><li>Clean UI.</li></ul><h6>Tradeoffs</h6><ul><li>Smaller community compared to GitHub.</li><li>CI/CD (Pipelines) may be less flexible or powerful than GitHub Actions or GitLab CI for complex scenarios.</li><li>Less focus on open-source community features.</li><li>Mercurial support is effectively legacy.</li></ul><h6>Use Cases</h6><p>Teams using Jira for project management, organizations standardized on Atlassian tools, small teams needing cost-effective private repositories.</p> </div> </div> - </div> - <div class="col-lg-3 col-md-6 mb-4"> - <div class="info-card platform-azure" id="card-azure-devops"> - <div class="card-body"> - <h5><i class="bi bi-microsoft"></i> Azure DevOps Repos</h5> - <div class="card-content-wrapper"> - <p class="summary">Microsoft's Git hosting service within the broader <span class="term">Azure DevOps</span> suite. Strong integration with Azure cloud and other DevOps services.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlatform4" aria-expanded="false" aria-controls="collapsePlatform4"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-3 col-md-6 mb-3"> + <div class="info-card platform-azure" id="card-azure-devops"> + <div class="card-body"> + <h5><i class="bi bi-microsoft"></i> Azure DevOps (<a href="https://azure.microsoft.com/en-us/products/devops/" target="_blank" rel="noopener noreferrer">azure.microsoft.com</a>)</h5> + <div class="card-content-wrapper"> + <p class="summary">Microsoft's suite of DevOps services, including <span class="term">Azure Repos</span> for Git hosting. Strong integration with Azure cloud and other DevOps services.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlatform4" aria-expanded="false" aria-controls="collapsePlatform4"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapsePlatform4"> + <h6>Core Offerings (Suite)</h6><p>Azure DevOps Services is a suite including: <strong>Azure Repos</strong> (Git hosting, TFVC also supported), <strong>Azure Pipelines</strong> (CI/CD), <strong>Azure Boards</strong> (Agile planning, work item tracking), <strong>Azure Test Plans</strong>, and <strong>Azure Artifacts</strong> (package management).</p><h6>Key Features (Focus on Repos & Pipelines)</h6><ul><li><strong>Integrated Suite:</strong> Provides tools across the development lifecycle, similar in scope to GitLab but within the Microsoft Azure ecosystem. Services can often be used independently.</li><li><strong>Azure Repos:</strong> Unlimited private Git repositories. Also supports Microsoft's legacy centralized VCS (Team Foundation Version Control - TFVC).</li><li><strong>Azure Pipelines:</strong> Very powerful and flexible CI/CD system. Supports building/deploying almost anywhere (Azure, AWS, GCP, on-prem). Can be defined with YAML or a classic visual editor.</li><li><strong>Azure Boards:</strong> Mature and highly customizable Agile planning and work tracking tools (comparable to Jira).</li><li><strong>Enterprise Focus:</strong> Strong support for granular permissions, branch policies, auditing, and integration with Azure Active Directory (now Microsoft Entra ID).</li></ul><h6>Strengths</h6><ul><li>Excellent integration with Azure cloud services for build and deployment.</li><li>Mature, powerful, and flexible CI/CD (Azure Pipelines).</li><li>Comprehensive and customizable work tracking features (Azure Boards).</li><li>Strong enterprise governance, security policies, and access control features.</li><li>Generous free tier for small teams (up to 5 users) and open source projects (more users, parallel jobs).</li><li>Continued support for TFVC for teams migrating from older Microsoft VCS.</li></ul><h6>Tradeoffs</h6><ul><li>UI can feel complex or slightly dated compared to GitHub/GitLab, especially navigating between the different services (Repos, Pipelines, Boards).</li><li>Less prominent in the general open-source community compared to GitHub.</li><li>Can feel heavily tied to the Microsoft ecosystem, although Pipelines are platform-agnostic.</li><li>The split between different services (Repos, Pipelines, Boards) might feel less unified than GitLab's single-application approach for some users.</li></ul><h6>Use Cases</h6><p>Organizations heavily invested in Microsoft Azure, enterprise teams needing strong governance/planning tools, teams migrating from TFVC, projects requiring complex CI/CD pipelines regardless of deployment target.</p> </div> - </div> - <div class="collapse collapse-content" id="collapsePlatform4"> - <h6>Core Offerings</h6><p>Part of Azure DevOps Services which includes: Azure Repos (Git hosting, TFVC also supported), Azure Pipelines (CI/CD), Azure Boards (Agile planning, work item tracking), Azure Test Plans, Azure Artifacts (package management).</p><h6>Key Features</h6><ul><li><strong>Integrated Suite:</strong> Provides tools across the development lifecycle, similar to GitLab but within the Microsoft Azure ecosystem.</li><li><strong>Azure Pipelines:</strong> Very powerful and flexible CI/CD system, supports building/deploying anywhere (not just Azure). YAML or classic visual editor.</li><li><strong>Azure Boards:</strong> Mature Agile planning and work tracking tools.</li><li><strong>Enterprise Focus:</strong> Strong support for permissions, policies, auditing, and integration with Azure Active Directory.</li><li><strong>TFVC Support:</strong> Also supports Microsoft's legacy centralized VCS (Team Foundation Version Control).</li></ul><h6>Strengths</h6><ul><li>Excellent integration with Azure cloud services.</li><li>Mature and powerful CI/CD (Azure Pipelines).</li><li>Comprehensive work tracking features (Azure Boards).</li><li>Strong enterprise governance and security features.</li><li>Generous free tier for small teams and open source projects.</li></ul><h6>Tradeoffs</h6><ul><li>UI can feel complex and sometimes dated compared to GitHub/GitLab.</li><li>Less prominent in the open-source community than GitHub.</li><li>Can feel heavily tied to the Microsoft ecosystem (though Pipelines can deploy anywhere).</li><li>Split between different services (Repos, Pipelines, Boards) can feel less unified than GitLab's approach.</li></ul><h6>Use Cases</h6><p>Organizations heavily invested in Microsoft Azure, enterprise teams needing strong governance and planning tools, teams using TFVC, projects requiring complex CI/CD pipelines.</p> </div> </div> </div> - </div> + </div> </div> </div> </section> @@ -253,83 +268,116 @@ <!-- Node 4: Workflows (Back on Main Trunk) --> <section class="history-node" id="section-workflows"> <div class="branch-line"></div> - <div class="section-card"> - <h2 class="section-title-inline"><i class="bi bi-diagram-3-fill"></i> Key Workflows</h2> - <div class="section-content"> - <div class="row"> - <div class="col-lg-4 col-md-6 mb-4"> - <div class="info-card workflow-branching" id="card-workflow-branching"> - <div class="card-body"> - <h5><i class="bi bi-diagram-3-fill"></i> Branching Strategies</h5> - <div class="card-content-wrapper"> - <p class="summary">Defined patterns for using branches to manage development, releases, and fixes. Examples: <span class="term">Gitflow</span>, <span class="term">GitHub Flow</span>, <span class="term">GitLab Flow</span>.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWorkflow1" aria-expanded="false" aria-controls="collapseWorkflow1"> - Explore <i class="bi bi-chevron-down"></i> - </button> + <div class="section-card card shadow-sm"> + <div class="card-body"> + <h2 class="section-title-inline"><i class="bi bi-diagram-3-fill"></i> Key Workflows</h2> + <div class="section-content"> + <div class="row"> + <div class="col-lg-4 col-md-6 mb-3"> + <div class="info-card workflow-branching" id="card-workflow-branching"> + <div class="card-body"> + <h5><i class="bi bi-diagram-3-fill"></i> Branching Strategies</h5> + <div class="card-content-wrapper"> + <p class="summary">Defined patterns for using branches to manage development, releases, and fixes. Common examples include <span class="term">Gitflow</span>, <span class="term">GitHub Flow</span>, and <span class="term">Trunk-Based Development</span>.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWorkflow1" aria-expanded="false" aria-controls="collapseWorkflow1"> + Explore <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseWorkflow1"> + <h6>Common Strategies</h6><ul><li><strong><a href="https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow" target="_blank" rel="noopener noreferrer">Gitflow</a>:</strong> A robust model with dedicated branches: `main` (production releases), `develop` (integration), `feature/*` (new work), `release/*` (release prep), `hotfix/*` (urgent production fixes). Good for projects with distinct, scheduled releases. Can be complex.</li><li><strong><a href="https://docs.github.com/en/get-started/quickstart/github-flow" target="_blank" rel="noopener noreferrer">GitHub Flow</a>:</strong> A simpler model optimized for continuous deployment. `main` is always deployable. New work happens in feature branches created from `main`. Changes are merged back into `main` via Pull Request and typically deployed immediately.</li><li><strong><a href="https://about.gitlab.com/topics/version-control/what-is-gitlab-flow/" target="_blank" rel="noopener noreferrer">GitLab Flow</a>:</strong> Similar to GitHub Flow but adds more flexibility, often including environment branches (e.g., `production`, `staging`) or release branches, bridging the gap between continuous deployment and versioned releases.</li><li><strong><a href="https://trunkbaseddevelopment.com/" target="_blank" rel="noopener noreferrer">Trunk-Based Development (TBD)</a>:</strong> Developers work in very short-lived feature branches or commit directly to the main line (`trunk`/`main`). Relies heavily on feature flags, comprehensive automated testing, and robust CI/CD pipelines. Aims for continuous integration and fast feedback.</li></ul><p>The best strategy depends on team size, release cadence, deployment practices, required stability guarantees, and team discipline.</p> </div> - </div> - <div class="collapse collapse-content" id="collapseWorkflow1"> - <h6>Common Strategies</h6><ul><li><strong>Gitflow:</strong> A more complex model with dedicated branches for features (<code>feature/*</code>), releases (<code>release/*</code>), hotfixes (<code>hotfix/*</code>), development (<code>develop</code>), and production (<code>main</code>/<code>master</code>). Good for projects with scheduled releases.</li><li><strong>GitHub Flow:</strong> Simpler model. <code>main</code> is always deployable. New work is done on feature branches created from <code>main</code>. Changes are merged back into <code>main</code> via Pull Request and deployed immediately. Optimized for continuous delivery.</li><li><strong>GitLab Flow:</strong> Similar to GitHub Flow but adds optional environment branches (e.g., <code>production</code>, <code>staging</code>) or release branches, providing more flexibility between continuous delivery and versioned releases.</li><li><strong>Trunk-Based Development:</strong> Developers work in short-lived branches or commit directly to the main line (<code>trunk</code>/<code>main</code>), relying heavily on feature flags and automated testing. Requires mature CI/CD practices.</li></ul><p>The best strategy depends on team size, release cadence, deployment practices, and tooling.</p> </div> </div> - </div> - <div class="col-lg-4 col-md-6 mb-4"> - <div class="info-card workflow-pr" id="card-workflow-pr"> - <div class="card-body"> - <h5><i class="bi bi-git"></i> Pull/Merge Requests</h5> - <div class="card-content-wrapper"> - <p class="summary">A mechanism on hosting platforms to propose changes from a branch, facilitating <span class="term">code review</span>, discussion, automated checks, and <span class="term">controlled merging</span>.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWorkflow2" aria-expanded="false" aria-controls="collapseWorkflow2"> - Explore <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-4 col-md-6 mb-3"> + <div class="info-card workflow-pr" id="card-workflow-pr"> + <div class="card-body"> + <h5><i class="bi bi-git"></i> Pull/Merge Requests (PR/MR)</h5> + <div class="card-content-wrapper"> + <p class="summary">A core collaboration feature on hosting platforms to propose changes from one branch to another, facilitating <span class="term">code review</span>, discussion, automated checks, and <span class="term">controlled merging</span>.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWorkflow2" aria-expanded="false" aria-controls="collapseWorkflow2"> + Explore <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseWorkflow2"> + <h6>Process Overview</h6><ol><li>A developer creates a feature branch, makes commits locally, and pushes the branch to the remote platform.</li><li>The developer opens a Pull Request (GitHub, Bitbucket, Azure Repos) or Merge Request (GitLab) targeting the desired integration branch (e.g., `main` or `develop`).</li><li>Team members (reviewers) examine the code changes ('diff'), leave comments, ask questions, and request modifications.</li><li>Automated checks configured via CI/CD (builds, tests, linters, security scans) run against the proposed changes, reporting status back to the PR/MR.</li><li>Discussion and code updates occur until the changes are approved and all checks pass.</li><li>Finally, an authorized user merges the changes into the target branch, often directly via the platform's UI, which usually closes the PR/MR.</li></ol><h6>Benefits</h6><ul><li><strong>Code Quality:</strong> Facilitates peer review to catch bugs, improve design, ensure coding standards, and enforce consistency.</li><li><strong>Knowledge Sharing:</strong> Team members learn from each other's code and gain context on changes across the project.</li><li><strong>Gatekeeping:</strong> Acts as a checkpoint, ensuring changes meet quality standards and pass automated checks before entering critical branches.</li><li><strong>Discussion Record:</strong> Provides a valuable history of decisions, discussions, and context related to specific changes.</li></ul> </div> - </div> - <div class="collapse collapse-content" id="collapseWorkflow2"> - <h6>Process Overview</h6><ol><li>Developer creates a feature branch, makes commits, and pushes it to the platform.</li><li>Developer opens a Pull/Merge Request (PR/MR) targeting the main branch (e.g., <code>main</code>).</li><li>Team members review the code changes, leave comments, and request modifications.</li><li>Automated checks (CI builds, tests, linters, security scans) run against the proposed changes.</li><li>Once approved and checks pass, the changes are merged into the target branch (often directly via the platform's UI).</li></ol><h6>Benefits</h6><ul><li><strong>Code Quality:</strong> Facilitates peer review to catch bugs, improve design, and ensure consistency.</li><li><strong>Knowledge Sharing:</strong> Team members learn from each other's code and provide feedback.</li><li><strong>Gatekeeping:</strong> Ensures changes meet standards and pass tests before entering the main codebase.</li><li><strong>Discussion Record:</strong> Provides a history of decisions and discussions related to the changes.</li></ul> </div> </div> - </div> - <div class="col-lg-4 col-md-6 mb-4"> - <div class="info-card workflow-cicd" id="card-workflow-cicd"> - <div class="card-body"> - <h5><i class="bi bi-gear-wide-connected"></i> CI/CD Integration</h5> - <div class="card-content-wrapper"> - <p class="summary">VCS triggers <span class="term">Continuous Integration</span> (automated build/test) and <span class="term">Continuous Delivery/Deployment</span> pipelines, automating the software delivery process.</p> - <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWorkflow3" aria-expanded="false" aria-controls="collapseWorkflow3"> - Explore <i class="bi bi-chevron-down"></i> - </button> + <div class="col-lg-4 col-md-6 mb-3"> + <div class="info-card workflow-cicd" id="card-workflow-cicd"> + <div class="card-body"> + <h5><i class="bi bi-gear-wide-connected"></i> CI/CD Integration</h5> + <div class="card-content-wrapper"> + <p class="summary">VCS events (like pushes or PRs) trigger <span class="term">Continuous Integration</span> (automated build/test) and <span class="term">Continuous Delivery/Deployment</span> pipelines, automating the software delivery process.</p> + <button class="btn btn-outline-primary details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWorkflow3" aria-expanded="false" aria-controls="collapseWorkflow3"> + Explore <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseWorkflow3"> + <h6>Continuous Integration (CI)</h6><p>The practice of frequently merging all developers' working copies to a shared mainline (e.g., `main` or `develop`), several times a day. Each merge triggers an automated build and execution of automated tests.</p><ul><li><strong>Trigger:</strong> Typically runs on every push to any branch, or specifically on pushes/updates to PRs/MRs targeting key branches.</li><li><strong>Goal:</strong> Detect integration errors, build failures, and test regressions as early as possible in the development cycle.</li><li><strong>Benefit:</strong> Provides a fast feedback loop to developers, reduces integration problems ("merge hell"), and improves overall code quality and stability.</li></ul><h6>Continuous Delivery / Continuous Deployment (CD)</h6><p>Extends CI by automating the release process beyond just building and testing.</p><ul><li><strong>Continuous Delivery:</strong> Automatically builds, tests, and prepares code changes for release to production. The pipeline ensures the software *can* be released at any time, but the final deployment to production usually requires a manual approval step.</li><li><strong>Continuous Deployment:</strong> Automatically deploys every validated change that passes the full CI/CD pipeline directly to production without human intervention. Requires high confidence in automated testing and infrastructure.</li><li><strong>Trigger:</strong> Typically runs after CI succeeds on specific branches (e.g., merge to `main`) or upon creation of tags.</li><li><strong>Benefit:</strong> Enables faster, more frequent, and more reliable releases; reduces manual deployment effort and associated errors.</li></ul><h6>Role of VCS & Platforms</h6><p>The VCS (Git) and the Hosting Platform (GitHub, GitLab, etc.) are central. VCS events (push, merge, tag creation) act as the primary triggers for CI/CD pipelines. Platforms provide integrated CI/CD tools (Actions, GitLab CI, Pipelines) or integrate tightly with external tools (like Jenkins, CircleCI, etc.). The pipeline definitions are often stored as code (e.g., YAML files) within the repository itself.</p> </div> - </div> - <div class="collapse collapse-content" id="collapseWorkflow3"> - <h6>Continuous Integration (CI)</h6><p>The practice of frequently merging code changes into a central repository, after which automated builds and tests are run.</p><ul><li><strong>Trigger:</strong> Typically runs on every push to a branch or opening/updating a PR/MR.</li><li><strong>Goal:</strong> Detect integration errors early by automatically building the software and running automated tests (unit, integration).</li><li><strong>Benefit:</strong> Faster feedback loop, reduced integration problems, improved code quality.</li></ul><h6>Continuous Delivery (CD) / Continuous Deployment (CD)</h6><p>Extends CI by automating the release process.</p><ul><li><strong>Continuous Delivery:</strong> Automatically builds, tests, and prepares code changes for release to production. The final deployment to production might still be a manual step.</li><li><strong>Continuous Deployment:</strong> Automatically deploys every validated change to production without manual intervention.</li><li><strong>Trigger:</strong> Typically runs after CI succeeds on specific branches (e.g., <code>main</code>) or merges.</li><li><strong>Benefit:</strong> Faster, reliable releases; reduced manual deployment effort and errors.</li></ul><h6>Role of VCS</h6><p>VCS events (push, merge, tag creation) act as the primary triggers for CI/CD pipelines provided by platforms like GitHub Actions, GitLab CI/CD, Bitbucket Pipelines, Azure Pipelines, or dedicated tools like Jenkins.</p> </div> </div> </div> - </div> - </div> + </div> + </div> </div> </section> <!-- Node 5: Choosing Tools (Back on Main Trunk) --> <section class="history-node" id="section-choosing"> <div class="branch-line"></div> - <div class="section-card"> - <h2 class="section-title-inline"><i class="bi bi-check2-square"></i> Choosing Tools</h2> - <div class="section-content"> - <div class="row"> - <div class="col-12 mb-4"> - <div class="info-card choosing-card" id="card-choosing"> - <div class="card-body"> - <h5 class="text-center"><i class="bi bi-check2-square"></i> System & Platform Selection</h5> - <div class="card-content-wrapper"> - <p class="summary text-center">Choose <span class="term">Git</span> unless you have specific reasons for Mercurial. Select a <span class="term">Platform</span> based on ecosystem integration (Atlassian, Microsoft), desired features (CI/CD, security), community needs, and self-hosting requirements.</p> - <button class="btn btn-sm details-toggle mx-auto d-block" type="button" data-bs-toggle="collapse" data-bs-target="#collapseChoosing" aria-expanded="false" aria-controls="collapseChoosing"> - Key Factors <i class="bi bi-chevron-down"></i> - </button> + <div class="section-card card shadow-sm"> + <div class="card-body"> + <h2 class="section-title-inline"><i class="bi bi-check2-square"></i> Choosing Tools</h2> + <div class="section-content"> + <div class="row"> + <div class="col-12 mb-3"> + <div class="info-card choosing-card" id="card-choosing"> + <div class="card-body"> + <h5 class="text-center"><i class="bi bi-check2-square"></i> System & Platform Selection Factors</h5> + <div class="card-content-wrapper"> + <p class="summary text-center">Generally, choose <span class="term">Git</span> due to its ubiquity. Select a <span class="term">Hosting Platform</span> based on ecosystem integration (Atlassian, Microsoft, Open Source), desired feature depth (CI/CD, security, project management), community vs. enterprise focus, self-hosting needs, and pricing.</p> + <button class="btn btn-outline-primary details-toggle mx-auto d-block" type="button" data-bs-toggle="collapse" data-bs-target="#collapseChoosing" aria-expanded="false" aria-controls="collapseChoosing"> + Key Factors <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseChoosing"> + <h6>Choosing the VCS System (Git vs. Mercurial)</h6><ul><li><strong>Default Choice:</strong> <span class="term">Git</span>. It's the overwhelming industry standard. Choosing Git ensures maximum compatibility, community support, available talent, tooling options, and platform choices.</li><li><strong>Consider Mercurial Only If:</strong> You have a strong, specific reason, such as maintaining large legacy Hg projects, being part of an organization deeply committed to it (like Meta), or having a team that vastly prefers its specific model and is aware of the ecosystem limitations. Be prepared for fewer hosting options and potentially less community support.</li></ul><h6>Choosing the Hosting Platform (GitHub vs. GitLab vs. Bitbucket vs. Azure DevOps)</h6><ul><li><strong>Ecosystem Integration:</strong> How well does it fit with your other tools? + <ul> + <li><span class="term">Bitbucket:</span> Best for deep Atlassian (Jira, Confluence) integration.</li> + <li><span class="term">Azure DevOps:</span> Best for deep Microsoft Azure and Microsoft Entra ID integration.</li> + <li><span class="term">GitHub:</span> Strong integrations via Marketplace, excellent for open source workflows.</li> + <li><span class="term">GitLab:</span> Aims to *be* the ecosystem (all-in-one).</li> + </ul></li> + <li><strong>Feature Set & Depth:</strong> What capabilities are crucial? + <ul> + <li><span class="term">GitLab:</span> Most comprehensive built-in feature set across the DevOps lifecycle (especially strong CI/CD and integrated security scanning).</li> + <li><span class="term">Azure DevOps:</span> Very mature and powerful Pipelines (CI/CD) and Boards (planning).</li> + <li><span class="term">GitHub:</span> Excellent Actions (CI/CD), leading community features, strong security addons (Dependabot, Code Scanning), integrated Packages and Codespaces.</li> + <li><span class="term">Bitbucket:</span> Core Git hosting, solid Pipelines (CI/CD), primary strength is Jira integration.</li> + </ul></li> + <li><strong>Hosting Model:</strong> Cloud SaaS vs. Self-Managed? + <ul> + <li><span class="term">GitLab:</span> Strong offering for both SaaS and self-managed (Community/Enterprise editions).</li> + <li><span class="term">GitHub:</span> Primarily SaaS, but offers GitHub Enterprise Server for self-hosting.</li> + <li><span class="term">Azure DevOps:</span> Primarily SaaS (Services), but Azure DevOps Server exists for on-premise (less common now).</li> + <li><span class="term">Bitbucket:</span> Cloud (SaaS) and Data Center (self-managed).</li> + </ul></li> + <li><strong>Community vs. Enterprise Focus:</strong> + <ul> + <li><span class="term">GitHub:</span> Leader in open source and general developer community. Strong enterprise offering too.</li> + <li><span class="term">GitLab:</span> Strong in both, appeals to companies wanting an integrated platform.</li> + <li><span class="term">Azure DevOps:</span> Historically strong enterprise focus, good free tiers attract smaller teams/OSS too.</li> + <li><span class="term">Bitbucket:</span> Traditionally strong with SMBs and enterprises using Atlassian products.</li> + </ul></li> + <li><strong>Pricing & Tiers:</strong> Carefully compare free tier limitations (users, private repos, CI/CD minutes, storage) and the costs of paid plans based on your team size and expected usage.</li> + <li><strong>User Interface & Experience (UI/UX):</strong> This is subjective. Explore the interfaces or use free tiers to see which platform your team finds most intuitive and pleasant to work with.</li></ul><h6>Standardization vs. Polyglot</h6><p>While technically possible to use different platforms for different needs (e.g., GitHub for open source, Azure DevOps for internal enterprise apps), most organizations find it beneficial to standardize on one primary platform for consistency, billing simplification, user management, and unified workflow, potentially integrating specific best-of-breed tools if necessary.</p> </div> - </div> - <div class="collapse collapse-content" id="collapseChoosing"> - <h6>Choosing the VCS System (Git vs. Mercurial)</h6><ul><li><strong>Default Choice:</strong> <span class="term">Git</span> is the overwhelming industry standard. Choose Git for maximum compatibility, community support, tooling, and platform options.</li><li><strong>Consider Mercurial if:</strong> Your team strongly prefers its perceived simplicity, you need its specific branching model, or you are contributing to an existing Mercurial project (e.g., some parts of Meta). Be aware of declining platform support.</li></ul><h6>Choosing the Hosting Platform (GitHub vs. GitLab vs. Bitbucket vs. Azure DevOps)</h6><ul><li><strong>Community & Open Source:</strong> <span class="term">GitHub</span> is the leader. Its Actions CI/CD is very popular.</li><li><strong>Integrated DevOps & Self-Hosting:</strong> <span class="term">GitLab</span> excels if you want an all-in-one solution or need to host it yourself. Strong built-in CI/CD and security focus.</li><li><strong>Atlassian Ecosystem:</strong> <span class="term">Bitbucket</span> is the best choice if you rely heavily on Jira and other Atlassian tools.</li><li><strong>Microsoft Ecosystem & Enterprise:</strong> <span class="term">Azure DevOps</span> is ideal for teams deep in Azure, needing enterprise governance, or leveraging its mature Boards and Pipelines.</li><li><strong>CI/CD Needs:</strong> Evaluate the specifics of GitHub Actions, GitLab CI/CD, Bitbucket Pipelines, and Azure Pipelines based on your complexity and integration requirements.</li><li><strong>Pricing & Tiers:</strong> Compare free tier limitations (users, private repos, CI/CD minutes, storage) and paid plan costs based on your team size and usage.</li><li><strong>User Interface & Experience:</strong> Team preference for the platform's look, feel, and ease of use can be a factor.</li></ul><h6>Polyglot Approach?</h6><p>While possible to use different platforms for different projects, most organizations standardize on one primary hosting platform for consistency, billing, and user management, while potentially integrating specialized tools from other ecosystems if needed.</p> </div> </div> </div> @@ -341,53 +389,57 @@ </div> <!-- /history-container --> - <footer class="container text-center mt-5 pb-5"> - <p>© 2024 Your Name Here</p> <!-- Update copyright --> + <footer class="container text-center mt-4 pt-4 pb-5 border-top"> + <!-- Update copyright name and year as appropriate --> + <p class="text-muted small">Cheatsheet content by David Veksler | © 2024</p> + <p class="text-muted small">Requires `history_tree_style.css` for full visual effect.</p> </footer> - <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script> - // JS for Collapse Chevron Toggle (from previous full version) + // JS for Collapse Chevron Toggle document.addEventListener('DOMContentLoaded', () => { const collapseToggles = document.querySelectorAll('.details-toggle'); collapseToggles.forEach(button => { const targetId = button.getAttribute('data-bs-target'); + if (!targetId) return; + const targetCollapse = document.querySelector(targetId); - const icon = button.querySelector('.bi'); + const icon = button.querySelector('.bi'); // Get the icon inside the button if (targetCollapse && icon) { - // Set initial icon state based on whether the collapse element starts shown - if (targetCollapse.classList.contains('show')) { - icon.classList.remove('bi-chevron-down'); - icon.classList.add('bi-chevron-up'); - } else { - icon.classList.remove('bi-chevron-up'); - icon.classList.add('bi-chevron-down'); - } + // Function to update icon based on collapse state + const updateIcon = () => { + if (targetCollapse.classList.contains('show')) { + icon.classList.remove('bi-chevron-down'); + icon.classList.add('bi-chevron-up'); + button.setAttribute('aria-expanded', 'true'); + } else { + icon.classList.remove('bi-chevron-up'); + icon.classList.add('bi-chevron-down'); + button.setAttribute('aria-expanded', 'false'); + } + }; + + // Set initial icon state + updateIcon(); // Listen to Bootstrap collapse events to toggle icon - targetCollapse.addEventListener('show.bs.collapse', () => { - icon.classList.remove('bi-chevron-down'); - icon.classList.add('bi-chevron-up'); - }); - targetCollapse.addEventListener('hide.bs.collapse', () => { - icon.classList.remove('bi-chevron-up'); - icon.classList.add('bi-chevron-down'); - }); + targetCollapse.addEventListener('show.bs.collapse', updateIcon); + targetCollapse.addEventListener('hide.bs.collapse', updateIcon); } }); - // Optional: Simple hover effect for the main section nodes - const historyNodes = document.querySelectorAll('.history-node'); - historyNodes.forEach(node => { - node.addEventListener('mouseenter', () => { - node.classList.add('is-hovered'); - }); - node.addEventListener('mouseleave', () => { - node.classList.remove('is-hovered'); - }); - }); - + // Optional: Simple hover effect for the main section node cards for visual feedback + const sectionCards = document.querySelectorAll('.section-card'); + sectionCards.forEach(card => { + card.addEventListener('mouseenter', () => { + card.classList.add('shadow-lg'); // Add more prominent shadow on hover + }); + card.addEventListener('mouseleave', () => { + card.classList.remove('shadow-lg'); + }); + }); }); </script> </body>