Under-engineering: less dependencies, more features and performance

Sandro Maglione

Sandro Maglione

Web development

This week periodic appointment with refactoring the blog and organizing my open source contributions.

This time I was able to under-engineer the implementation (this never happened before 🀯).

Released update 1️⃣ βœ… Faster pages (generated at build time) βœ… Better code examples styling βœ… Removed dependencies Next round coming πŸ”œ

Sandro Maglione
Sandro Maglione
@SandroMaglione

πŸ’‘ Project update πŸ’‘ The articles are reaching the next level πŸš€ βœ… Step by step difference βœ… Highlight lines with blur βœ… Copy code Better examples = Easier to understand 🀝

Image
6
Reply

I also published a new open source package πŸ’πŸΌβ€β™‚οΈ

Here is everything that I shipped this week πŸ‘‡


Tech stack

  • Effect: new core dependency that runs my website, everything is implemented starting from Effect
  • NextJs: the website uses nextjs (since a long time ago)
  • Dart: new open source package released on pub.dev (ITrie)

Setup

Every once in a while I take some time to review and improve my stack.

On the web nowadays, if your codebase was implemented 6 months ago, today it would be completely outdated πŸ—‘οΈ

The same can be said for open source projects: they require continuos improvements and support πŸ› οΈ

In preparation for a strong 2024, my goal was:

  • Add features to the blog, while at the same time reducing dependencies and improving performance
  • Organize and plan a roadmap for my open source projects

TLDR: I made it πŸš€πŸ‘‡

Get started

This was the situation of the blog before the improvements:

  • Local mdx articles powered by contentlayer
  • NextJs version 13 (outdated)
  • Effect (without a proper structure)

This is the the situation after the improvements:

  • Local mdx articles served without external dependencies
  • Newest version of NextJs, all the articles generated at build time (performance πŸš€)
  • Effect everywhere πŸ’πŸΌβ€β™‚οΈ

Second major update: I published a new package on pub.dev ⭐️

Let's see how I got here πŸ‘‡

There is more.

Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 600+ readers.

Implementation

How many dependencies can I remove while still having the same (and more) features? πŸ€”

Every external dependency has a (significant) maintenance cost, especially on the web ☝️

My blog was based on contentlayer. Nonetheless, the library wasn't getting any update for a while now:

contentlayer is still based on an older version of nextjs. This dependency was starting to cause some update problems on my blogcontentlayer is still based on an older version of nextjs. This dependency was starting to cause some update problems on my blog

Back to the basics: Node

Last week I read a blog post from Lee Robinson (@leeerob) on his 2023 blog update:

This is how to remove dependencies and come back to plain nodeThis is how to remove dependencies and come back to plain node

I did the same using Effect (of course πŸ’πŸΌβ€β™‚οΈ)

Adding features and improve performance

At the same time I updated some styling and added some features:

Another idea I implemented is to generate all the article pages at build time using nextjs:

export async function generateStaticParams() { 
  return await mainAll.pipe(Effect.runPromise); 
} 
 
export default async function Page({
  params: { slug },
}: {
  params: { slug: string };
}) {
  const { source, tableOfContents, frontmatter, readingTime } = await main(
    slug
  ).pipe(
    Effect.catchAll(() => Effect.sync(() => redirect("/articles"))),
    Effect.runPromise
  );
 
  return ( /** */ );
}

πŸ’‘ Win-Win: Less dependencies, more features, better performance

New open source package: itrie

I ported my Trie implementation from typescript to dart and published a new package: ITrie

A Trie is ideal when working with String and words in general (more examples coming πŸ”œ).

I also did some research on the present and future of fpdart. More updates on this in the upcoming weeks, you don't want to miss this πŸ‘€


I wrote a complete overview of how my website is implemented using Effect, NextJs, and MDX.

This article covers all the details of the engine behind the blog and the newsletter πŸ‘¨β€πŸ’»

Takeaways

  • Take some time to update your tech stack every once in a while
  • Technologies are evolving fast: you need to be continuously learning and exploring to stay up to date
  • It's possible to remove dependencies and still add features (under-engineeringℒ️)
  • 2024 will be a powerful year: be prepared for much more content and upgrades πŸš€

Now the blog is ready for all the upcoming project of the next weeks.

I am planning some interesting updates: Effect, fpdart, Flutter apps, local-first and more πŸ‘€

See you next πŸ‘‹

Start here.

Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 600+ readers.