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 🤯).

Sandro Maglione
Sandro Maglione
@SandroMaglione
·Follow

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
Read 1 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.