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 ๐
๐ก Project update ๐ก The articles are reaching the next level ๐ โ Step by step difference โ Highlight lines with blur โ Copy code Better examples = Easier to understand ๐ค
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 bycontentlayer
- 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 ๐๐ผโโ๏ธ
This level of performance ๐
Second major update: I published a new package on pub.dev โญ๏ธ
๐ I published a new package ๐ Welcome ITrie โก๏ธ Efficient, immutable and stack safe Trie in @dart_lang Store and search string and prefixes with โก๏ธ speed This is how it works ๐๐งต
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 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 node
I did the same using Effect (of course ๐๐ผโโ๏ธ)
๐ก How I use @EffectTS_ with @nextjs ๐ก 1๏ธโฃ Implement all the logic using Effect (Services) 2๏ธโฃ Execute a single main function in a server component 3๏ธโฃ Return possible errors and success value Clear separation logic/UI โ
Adding features and improve performance
At the same time I updated some styling and added some features:
โน๏ธ Project update โน๏ธ You can now copy code snippets on my blog ๐ก This was definitely a missing features, but now it's there to stay ๐๐ผโโ๏ธ
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
All open source and available on pub ๐ฅ Check it out ๐ pub.dev/packages/itrie
A Trie is ideal when working with String
and words in general (more examples coming ๐).
Damn, you're addicted to that Trie
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 ๐