Enforce module boundaries with no-restricted-imports

bits/enforce-module-boundaries-with-no-restricted-imports/index.md

@@ -0,0 +1,37 @@
+---
+title: Enforce module boundaries with no-restricted-imports
+slug: enforce-module-boundaries-with-no-restricted-imports
+date: 2024-05-21
+tags: typescript, developer-experience, architecture
+---
+
+# Enforce module boundaries with no-restricted-imports
+
+Define module boundaries in your project by restricting specific imports using ESLint's `no-restricted-imports` rule.
+The rule allows you to prevent certain modules from being imported in specific files or directories.
+
+From an architectural point of view this is useful to enforce module boundaries e.g. to prevent feature A to be imported within feature B, or prevent circular dependencies between modules.
+
+There are also some alternative tools that allow you to define module boundaries such as [Sherrif](https://github.com/softarc-consulting/sheriff) or [Nx](https://nx.dev/features/enforce-module-boundaries).
+If you're already using these tools, I think it's better to stick with them as they provide more flexibility and features.
+However, I find the ESLint approach to be straightforward and the easiest to configure, and it doesn't require an additional dependency.
+
+For more information about the ESLint rule, refer to the [official ESLint documentation](https://eslint.org/docs/rules/no-restricted-imports), or the TypeScript-variant at the [TypeScript ESLint documentation](https://typescript-eslint.io/rules/no-restricted-imports/). If you're using Biome, see the [Biome documentation](https://biomejs.dev/linter/rules/no-restricted-imports/).
+
+```js{3-13}:.eslintrc.js
+module.exports = {
+  rules: {
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['@feature-a'],
+            message: 'You cannot import feature A from this module.',
+          },
+        ],
+      },
+    ],
+  },
+};
+```

bits/simplify-grouping-arrays-in-javascript-with-objectgroupby/index.md

@@ -2,7 +2,7 @@
 title: Simplify Grouping Arrays in JavaScript with Object.groupBy()
 slug: simplify-grouping-arrays-in-javascript-with-objectgroupby
 date: 2024-02-13
-tags: TypeScript, JavaScript
+tags: TypeScript
 ---
 
 # Simplify Grouping Arrays in JavaScript with Object.groupBy()

src/lib/markdown.ts

@@ -84,7 +84,6 @@ export function parseFileToHtmlAndMeta(file): {
 		slug: string;
 		date: string;
 		tags: string[];
-		no_banner?: boolean;
 	};
 	assetsSrc: string;
 } {

src/routes/bits/+page.svelte

@@ -86,20 +86,35 @@
 
 {#each bits as bit, i}
 	{#if queryParts.length === 0 || bit.metadata.tags.some((tag) => tagSelected(tag))}
-		<h2>
-			{bits.length - i}.
-			<a
-				href="/bits/{bit.metadata.slug}"
-				class="mark-hover"
-				data-sveltekit-preload-data="hover"
-				style:--bit-title="bit-title-{bit.metadata.slug}">{bit.metadata.title}</a
-			>
-		</h2>
-		{@html bit.html}
+		<div class="bit">
+			<h2>
+				{bits.length - i}.
+				<a
+					href="/bits/{bit.metadata.slug}"
+					class="mark-hover"
+					data-sveltekit-preload-data="hover"
+					style:--bit-title="bit-title-{bit.metadata.slug}">{bit.metadata.title}</a
+				>
+			</h2>
+			{@html bit.html}
+
+			<hr />
+		</div>
 	{/if}
 {/each}
 
 <style>
+	hr {
+		border: none;
+		border-top: solid 2px var(--text-color);
+		margin: 4rem -2rem;
+	}
+	.bit:nth-child(even) hr {
+		transform: rotate(2deg);
+	}
+	.bit:nth-child(odd) hr {
+		transform: rotate(-2deg);
+	}
 	button {
 		color: var(--text-color-light);
 		transition: color 0.2s ease;

src/routes/bits/[slug]/+page.svelte

@@ -42,33 +42,29 @@
 	<meta name="og:description" content={bit.metadata.description} />
 	<meta name="og:type" content="article" />
 
-	{#if bit.metadata.no_banner === false}
-		<meta name="image" content={bit.metadata.banner} />
-		<meta name="twitter:image" content={bit.metadata.banner} />
-		<meta name="og:image" content={bit.metadata.banner} />
-	{/if}
+	<meta name="image" content={bit.metadata.banner} />
+	<meta name="twitter:image" content={bit.metadata.banner} />
+	<meta name="og:image" content={bit.metadata.banner} />
 </svelte:head>
 
 <svelte:window bind:scrollY />
 
 <div></div>
 <h1 style:--bit-title="bit-title-{bit.metadata.slug}">{bit.metadata.title}</h1>
-{#if bit.metadata.no_banner === false}
-	<img
-		src={bit.metadata.banner}
-		alt="banner"
-		style="--scroll: {(scrollY ?? 0) <= 150
-			? 1
-			: scrollY <= 200
-				? 0.75
-				: scrollY <= 300
-					? 0.5
-					: scrollY <= 500
-						? 0.25
-						: 0}"
-		loading="lazy"
-	/>
-{/if}
+<img
+	src={bit.metadata.banner}
+	alt="banner"
+	style="--scroll: {(scrollY ?? 0) <= 150
+		? 1
+		: scrollY <= 200
+			? 0.75
+			: scrollY <= 300
+				? 0.5
+				: scrollY <= 500
+					? 0.25
+					: 0}"
+	loading="lazy"
+/>
 
 {@html bit.html}
 

src/routes/bits/_bits.ts

@@ -10,7 +10,6 @@ const bits: {
 		slug: string;
 		date: string;
 		tags: string[];
-		no_banner: boolean;
 	};
 }[] = [];
 
@@ -22,7 +21,6 @@ export async function readBits(): Promise<
 			slug: string;
 			date: string;
 			tags: string[];
-			no_banner: boolean;
 		};
 	}[]
 > {
@@ -53,7 +51,6 @@ export async function readBits(): Promise<
 					slug: metadata.slug,
 					date: ISODate(metadata.date),
 					tags: tags.map((t) => t.toLowerCase()),
-					no_banner: metadata.no_banner ?? false,
 				},
 			};
 		})