git bisect blog post

src/lib/posts/ShowcaseNewsCard.svelte

@@ -4,7 +4,7 @@
     export let thumbnail_alt = 'Picture describting the deprived devs logo';
     export let title = '<title>';
     export let summary = '<summary>';
-    export let creation_date = '<date>';
+    export let creation_date = 1710006969;
 
     const monthNames = ["January", "February", "March", "April", "May", "June",
                   "July", "August", "September", "October", "November", "December"];
@@ -14,8 +14,7 @@
 
 <div class="news-card">
     <a href=/post/{post_url} >
-        <div class="thumbnail">
+        <div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
-            <img src={thumbnail_url} alt={thumbnail_alt}/>
         </div>
         <div class="content">
             <h3 id="title">{title}</h3>
@@ -42,17 +41,14 @@
         font-size: 22px;
     }
 
-    .thumbnail img {
+    .thumbnail {
-        background-size: cover;
         aspect-ratio: 16 / 9;
+        background-size: cover;
         background-position: center;
 
         box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
-
+        margin-bottom: 15px;
-        flex-shrink: 0;
-        min-width: 100%;
-        min-height: 100%;
     }
 
     .content {

src/routes/+layout.svelte

@@ -98,6 +98,10 @@
         justify-content: center;
     }
 
+    header a {
+        text-decoration: none;
+    }
+
     .nav-bar {
         width: 100%;
         max-width: 1400px;

src/routes/+page.svelte

@@ -28,11 +28,27 @@
     </header>
     <div class="news-container">
         <!-- The newest blog post being showcased -->
-        <ShowcaseNewsCard post_url={most_recent_post.url} title={most_recent_post.title} summary={most_recent_post.summary} creation_date={most_recent_post.creation_date} />
+        <div class="showcase">
+            <ShowcaseNewsCard
+                thumbnail_url={most_recent_post.cover_img}
+                thumbnail_alt={most_recent_post.cover_alt}
+                post_url={most_recent_post.url}
+                title={most_recent_post.title}
+                summary={most_recent_post.summary}
+                creation_date={most_recent_post.creation_date}
+            />
+        </div>
 
         <div class="news-list">
             {#each data.summaries.slice(1, post_show_count) as summary}
-                <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
+                <NewsCard
+                    thumbnail_url={summary.cover_img}
+                    thumbnail_alt={summary.cover_alt}
+                    post_url={summary.url}
+                    title={summary.title}
+                    summary={summary.summary}
+                    creation_date={summary.creation_date}
+                />
             {/each}
         </div>
     </div>

src/routes/post/+layout.svelte

@@ -79,4 +79,14 @@
         font-size: 18px;
         text-rendering: optimizeLegibility;
     }
+
+    /* CSS for posts - child rooutes. */
+    img {
+        width: 100%;
+    }
+
+    :global(a) {
+        color: var(--text1);
+        text-decoration-line: underline;
+    }
 </style>

src/routes/post/git-bisecting/+page.svelte

@@ -0,0 +1,66 @@
+<script>
+    import Highlight from "svelte-highlight";
+    import { shell } from "svelte-highlight/languages";
+    import obsidian from "svelte-highlight/styles/obsidian";
+</script>
+
+<svelte:head>
+    {@html obsidian}
+</svelte:head>
+
+<p>
+Finding the specific commit that introduced a bug in your code can be frustrating,
+especially in big projects with a lot of commits. Git bisecting is a method
+used to quickly find which commit is the culprit. Git bisect works by you specifying
+a so called 'bad' commit where you know the bug occurs and a commit where you know the
+bug doesn't occur. Afterwards git will binary search it's way to find the commit
+introducing the bug.
+</p>
+<p>
+Suppose we've the following git history:
+</p>
+
+<img src="/images/posts/git-bisecting/bisect_problem.png" alt="Showing a git history, where on the left there is a 'good' commit with a couple of commits between the current commit on the right"/>
+<p>
+It could potentially contain many more commits between the known 'good' commit and the
+current one. Somewhere in the commits 1, 2, 3, 4 or the current one, a bug was
+introduced. One way to find the specific commit that introduced the bug, could
+be to check each commit starting from commit 1 then 2 then 3 ... and so on.
+This is known as a linear search, and would take very long if there are a lot
+of commits between the bad and the current.
+</p>
+<p>
+Instead git bisect comes to the rescue. Git bisect performs a
+<a href="https://en.wikipedia.org/wiki/Binary_search_algorithm" target="_blank">binary search</a>,
+which is much faster.
+To use git bisect, you must tell git to start bisecting:
+</p>
+<Highlight language={shell} code="$ git bisect start" />
+<p>
+Afterwards we mark the 'bad' commit - any commit we know the bug occurs in. In this example
+the current commit that we know is bad have the commit hash <code>c26cf8a</code>, so
+we mark the commit bad:
+</p>
+<Highlight language={shell} code="$ git bisect bad c26cf8a" />
+<p>
+After that we mark a previous commit that we know the bug doesn't occur in. In this
+example it's the 'good' commit (se picture above), which has a commit hash of <code>b34ec52</code>
+</p>
+<Highlight language={shell} code="$ git bisect good b34ec52" />
+<p>
+Now git will automatically checkout a commit somewhere in between the good and bad commit.
+Your job is now to re-build your project and test if the bug occurs. If the bug
+<b>doesn't</b> occur you report it to git:
+</p>
+<Highlight language={shell} code="$ git bisect good" />
+<p>
+However if it does occur you mark it bad:
+</p>
+<Highlight language={shell} code="$ git bisect bad" />
+<p>
+You continue to do this until git has tracked down the first bad commit, ie. the
+commit that introduced the bug.
+</p>
+
+<h2>Resources</h2>
+Git bisect man page: <a href="https://git-scm.com/docs/git-bisect">https://git-scm.com/docs/git-bisect</a>

src/routes/posts/posts_data.ts

@@ -14,6 +14,15 @@ export type Post = {
 }
 
 export const posts : Post[] = [
+    {
+        url: 'git-bisecting',
+        cover_img: '/images/posts/git-bisecting/thumbnail.png',
+        cover_alt: 'Photo of a bug',
+        title: 'Tracking down bugs in your code — using git bisect',
+        summary: 'Track down which specific change introduced a bug using the binary search tool provided by git.',
+        creation_date: 1709907213,
+        modification_date: 1709907213,
+    },
     {
         url: 'folder-icons',
         cover_img: '/images/posts/folder-icons/cover.png',

static/stylesheets/global.css

@@ -20,3 +20,13 @@ a, a:link a:visited {
     color: var(--text1);
     text-decoration: none;
 }
+
+code {
+    font-weight: 400;
+    font-size: 0.9rem;
+    line-height: 1.3;
+    letter-spacing: .32px;
+    border-radius: .25rem;
+    padding: 0 .5rem;
+    background-color: #333333;
+}