diff --git a/src/lib/posts/ShowcaseNewsCard.svelte b/src/lib/posts/ShowcaseNewsCard.svelte index 21cf174..9ee9c3c 100644 --- a/src/lib/posts/ShowcaseNewsCard.svelte +++ b/src/lib/posts/ShowcaseNewsCard.svelte @@ -4,7 +4,7 @@ export let thumbnail_alt = 'Picture describting the deprived devs logo'; export let 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"> - <img src={thumbnail_url} alt={thumbnail_alt}/> + <div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});"> </div> <div class="content"> <h3 id="title">{title}</h3> @@ -42,17 +41,14 @@ font-size: 22px; } - .thumbnail img { - background-size: cover; + .thumbnail { 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; - - flex-shrink: 0; - min-width: 100%; - min-height: 100%; + margin-bottom: 15px; } .content { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6ce89cb..08cffd5 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -98,6 +98,10 @@ justify-content: center; } + header a { + text-decoration: none; + } + .nav-bar { width: 100%; max-width: 1400px; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 34133ad..dafb64e 100644 --- a/src/routes/+page.svelte +++ b/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> diff --git a/src/routes/post/+layout.svelte b/src/routes/post/+layout.svelte index aa638a5..849ccc3 100644 --- a/src/routes/post/+layout.svelte +++ b/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> diff --git a/src/routes/post/git-bisecting/+page.svelte b/src/routes/post/git-bisecting/+page.svelte new file mode 100644 index 0000000..cbcff93 --- /dev/null +++ b/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> diff --git a/src/routes/posts/posts_data.ts b/src/routes/posts/posts_data.ts index 68a5433..cf805f0 100644 --- a/src/routes/posts/posts_data.ts +++ b/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', diff --git a/static/images/posts/git-bisecting/bisect_problem.png b/static/images/posts/git-bisecting/bisect_problem.png new file mode 100644 index 0000000..c851527 Binary files /dev/null and b/static/images/posts/git-bisecting/bisect_problem.png differ diff --git a/static/images/posts/git-bisecting/thumbnail.png b/static/images/posts/git-bisecting/thumbnail.png new file mode 100644 index 0000000..0b78d92 Binary files /dev/null and b/static/images/posts/git-bisecting/thumbnail.png differ diff --git a/static/stylesheets/global.css b/static/stylesheets/global.css index a9216b9..7b4f2d3 100644 --- a/static/stylesheets/global.css +++ b/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; +}