How I made this website ?

Introduction

First of all, welcome to my website !

I've been wanting to make a website for a long time, here is my journey. This website was the opportunity to learn a lot of new things, and I hope that you will enjoy it too.

Technologies

The goal was to try out new technologies that I wanted to try out.

Here is my choice :

SolidStart

Since SolidStart is a built-in meta framwork for SolidJS, it is very easy to use. It is also very fast to start a new project.

It is very flexible and support SSG, SSR.

Not that much to say about it, it is very easy and similar to other meta frameworks like NextJS.

SolidJS

I am a React guy for many years now. 6 months ago, I started to use SolidJS, I was very impressed by the simplicity of the syntax and the performance of the framework.

The conditional rendering as well as list rendering make the code very readable and easy to maintain compared to React.

// React
{data.loading ? <div>Loading...</div> : null}

{data.items.map((item) => <div key={item.id}>{item.name}</div>)}

// SolidJS
import { Show, For } from "solid-js"

<Show when={data.loading}>
  <div>Loading...</div>
</Show>

<For each={data()}>
  {(item) =>
    <div>
      {item.name}
    </div>
  }
</For>

For me, SolidJS is still missing a big community like React because we are missing a lot of community packages around the framework. But more and more people are coming to SolidJS, and I think that will be a solid competitor in the future.

UnoCSS

I never found a CSS framework that I liked to use. I use TailwindCSS for many years and I pretty like it but I would like to try something new.

UnoCSS is a CSS framework that is very similar to TailwindCSS, and it is fully compatible with this last. It is very easy to customize with your own rules or presets, and very fast.

I will continue to use Uno over Tailwind for my next projects.

Biome

I am always using linter and formatter for my projects since it make your life so much easier. I use ESLint and Prettier for many years, I wrote my own configs that I import in every project.

The problem with ESLint and Prettier is that is sometime slow on big codebases.

Then I heard about biome and I would like to try it out. It is a 2 in 1 solution for ESLint and Prettier, it is very fast and it is very easy to use. I converted my configs to Biome and I am very happy with it.

The only problem for now is that biome is not yet compatible with others files than JS and TS. That make it not usable for big production projects, but I'm sure that it will be in the future, this is a great tool.