โ€ข

newsletter

Under-engineering: less dependencies, more features and performance

It is possible to remove dependencies while also adding features and improving performance: I call this under-engineering. This is how I improved my blog, implemented and published a new open source package.


Sandro Maglione

Sandro Maglione

Software 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 ๐Ÿคฉ

Timeless coding principles, practices, and tools that make a difference, regardless of your language or framework, delivered in your inbox every week.

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.

Timeless coding principles, practices, and tools that make a difference, regardless of your language or framework, delivered in your inbox every week.