DEV Community: amiceli

Preums, reminds me that coding without AI is magical

amiceli — Wed, 21 Jan 2026 09:11:50 +0000

TL;DR

Preums ("first" in french 🇫🇷) is a side project built with Laravel, Vue with Inertia ❤️ who reminds us that we can code without AI. And being a developer isn't just about checking what AI has laid.

Go on Preums and see the history of the projects and programming languages that have built our tech world.

Preums history

The Preums project was born when one developer explained that he uses AI to generate unit tests and Gherkin after development. Another always uses AI whenever he has a bug or a question.

That alone breaks the basic rule of TDD. And there are great tools like DuckDuckGo, Brave Search and StackOverflow to help us with our needs.

Apart from being lazy, I don't see the interest. It breaks the flow of research, ideas, creation, etc.

Prolang and Github API

Thanks to Brave Search I found prolang repository and API.

I was looking for an API that lists a large number of programming languages, then I linked it to the GitHub API to get a code example via the RosettaCodeData for Fibonacci sample code or Hello-World-in-Different-Languages repository for each language.

If I had used AI, I would have wasted time searching for languages that weren't on the list and digging through Wikipedia.

Without that, I wouldn't have stumbled upon the Rocq language. I think this code example is as beautiful as a work of art ^^.

Features

In Preums, the goal is to highlight repositories that have been around for several years, are maintained, and are “starred” like oh-my-zsh, vue, boostrap, and Inertia.

Preums offers the following features:

The oldest and most starred repositories
View a history of repositories: first/last commit, releases, etc.
Search for a repository by name or author
History of languages and graph for their “families”

Nest

I'm continuing to work on Preums for fun and to improve performance. Memcached and Redis are on the road 😉.
Using the Wikipedia API to find languages and missing data for the history and family sections.

And of course, all of this without AI, “the old-fashioned way” as I learned my job: searching, finding, creating, redoing, improving. And above all, open source 🧑🏻‍💻.

Finally, if you have any ideas for features, don't hesitate to let me know or open an issue.

But as for AI, there's no need to give a long speech. I'm still a developer who codes the old-fashioned way.

PapierJS - PaperCSS with stencil and storybook

amiceli — Sun, 23 Feb 2025 14:06:55 +0000

Every time I start a side project, I search for which CSS framework I will use.

But Bootstrap, Tailwind, Foundation, etc., are not my thing, so I ended up using PaperCSS.

PaperCSS provides nice styles for many elements: forms, cards, navbars, buttons, etc.

But using a checkbox to open a dialog is a bit old-school ^^:

<div class="row flex-spaces child-borders">
  <label class="paper-btn margin" for="modal-1">Open Modal!</label>
</div>
<input class="modal-state" id="modal-1" type="checkbox">
<div class="modal">
  <label class="modal-bg" for="modal-1"></label>
  <div class="modal-body">
    <label class="btn-close" for="modal-1">X</label>
    <h4 class="modal-title">Modal Title</h4>
    <h5 class="modal-subtitle">Modal Subtitle</h5>
    <p class="modal-text">This is an example of a modal implemented with pure CSS! :D</p>
    <label for="modal-1">Nice!</label>
  </div>
</div>

That's why the PapierJS project was born.

PapierJS (papier means paper in French) is a web component library built with Stencil and Storybook.

The goal is to provide PaperCSS with web components easily:

<p-tabs>
    <p-tab title="Assassin's Creed Unity">
        <!-- content -->
    </p-tab>
    <p-tab title="Assassin's Creed Mirage" selected>
        <!-- content -->
    </p-tab>
    <p-tab title="Assassin's Creed II">
        <!-- content -->
    </p-tab>
</p-tabs>

PapierJS will also provide new components like dropdowns, accordion, notification, etc, still using PaperCSS styles.

Framework

Stencil

I use Stencil to create components with shadowRoot. It allows me to use PaperCSS without applying styles globally to the website.

I really like Stencil; it’s very helpful for creating components and managing state, props, events, etc.

Storybook

For providing component specs, playground, and overview, Storybook is awesome!

It’s a good practice for me to provide this for components.

Specs

For specs, I use mdx, which includes readme.md files generated by Stencil. Examples with the p-modal component. This way, we can read about events, methods, props, etc.

Overview

The Overview section provides a component demo and shows the html code to use it. Example with the p-accordion component.

For some stories, I created preview Stencil components. I provide a demo and show the tsx code. Another example with the p-modal component.

Playground

Playground is similar to the overview, but with Storybook's args features, you can test prop use cases. Examples with the p-button component.

Currently, there are still a few PaperCSS components to include, such as card and navbar.

I will also include new components like autocomplete, spinner, password fields, etc.

You can see all available component here : PapierJS and code on github.

I switch from Eslint to Biome

amiceli — Mon, 22 Apr 2024 20:57:33 +0000

For several years I use Eslint in my side projects, for Vue, JS, TS, Astro etc.

I created npm packages with my favorite rules for TS, Vue, astro, etc like :

space after function public test () { }
space before / after equal const test = true or { test : true }
4 spaces indent
indent in Vue script tag
backtick for string
etc

I also added husky and lint-staged to lint code before commit.

But... ^^

Each time to install, configure or update Eslint packages, it was annoying for me.

It was a challenge on each Github DepsBot PT for it ^^.

So last week I started to switch to Biome. I started with one project, today I switched almost all my side projects.

Reading Biome doc I also switched from husky to lefthook.

Pro

First thing I like, switching to Biome, I removed almost 10 npm packages :

eslint
@vue/eslint-config-typescript
@typescript-eslint/eslint-plugin
@vue/eslint-config-typescript
my own eslint rules packages
etc

lint-staged was removed, lefthook doesn't need it to lint staged files.

My lefthhok config :

pre-commit:
  commands:
    check:
      glob: "*.{js,vue,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
      run: npx biome check --no-errors-on-unmatched --files-ignore-unknown=true {staged_files}

commit-msg:
  commands:
    lint-commit-msg:
      run: npx commitlint --edit

pre-push:
  commands:
    test:
      run: npm run test:cov

Biome is really easy to install and fast : Checked 442 files in 94ms..

Biome config file looks like this :

{
    "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
    "organizeImports": {
        "enabled": true
    },
    "files": {
        "ignore": ["package.json", "package-lock.json"]
    },
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true,
            "style": {
                "noUnusedTemplateLiteral": "off"
            }
        }
    },
    "formatter": {
        "indentStyle": "space",
        "indentWidth": 4,
        "lineWidth": 320
    },
    "javascript": {
        "formatter": {
            "semicolons": "asNeeded"
        }
    }
}

With Biome we can format, lint and check (format + lint) code. And a migrate command allows to generate Biome config from our Eslint config.

This is why I like Biome <3.

Cons

For me, the only con is ... I lost some of my favorite rules, like space after function name.

But I stay on Biome <3.

Note

Just, If you use NestJs take care about lint/style/useImportType rule ;).

First time I ran Biome on my Nest project, it formatted some code with import type :

Format import { TagService } from "./tag.service" to import type { TagService } from "./tag.service"

And I had an error : Nest can't resolve dependencies of the TagController.

I added some comment to ignore this rule for some imports : // biome-ignore lint/style/useImportType: <explanation>.

And now ?

My side projects arn't big projects. Biome offers a way to migrate big project.
We're speaking of that in my company but for now we keep Eslint.

I'm following Biome project, I hope my favorite rules comming ;).

And I can update my zx script to install eslint to install Biome and Lefthook.

Scenario Outline is coming in vitest-cucumber

amiceli — Sat, 02 Dec 2023 20:38:34 +0000

I'm still wording on my library vitest-cucumber. I presented it in this post : Use Gherkin file in your unit tests with vitest

Step by step I add logic from Gherkin language, I worked with Scenario Outline.

Scenario Outline definition from Gherkin doc : The Scenario Outline keyword can be used to run the same Scenario multiple times, with different combinations of values.

We take this Scenario Outline as example :

Feature: Detect image ratio from width and height

    Scenario Outline: Detect image ratio when upload image
        Given As a user in an awesome project
        When  I upload an image <width>px on <height>px
        Then  I see my image <ratio>

        Examples:
            | width | height | ratio |
            | 100   | 100    | 1     |
            | 100   | 200    | 2     |

With vitest-cucumber, now you can use it like this :

describeFeature(feature, ({ ScenarioOutline }) => {

    ScenarioOutline(`Detect image ratio when upload image`, ({ Given, When, Then }, variables) =>{
        Given(`As a user in an awesome project`, () => {})
        When(` I upload an image <width>px on <height>px`, () => {
            expect(variables.width[0]).toEqual(100)
            expect(variables.height[0]).toEqual(100)
            expect(variables.ratio[0]).toEqual(100)
        })
        Then(`I see my image <ratio>`, () => {
            expect(variables.ratio[1]).toEqual(
                variables.height[1] / variables.width[1]
            )
        })
    })
})

Variables is an array with values extracted from Examples: :

{
    "width": ["100", "100"],
    "height": ["100", "200"],
    "ratio": ["1", "2"]
}

But before publish a new version of vitest-cucumber I need your opinions ;)

For Scenario Outline I don't know what is best solution.

1) run scenario one time with variable values as arguments

Like my example, scenario is run one time and variable values is passed as arguments.
So inside ScenarioOutline callback we can use variables as an array.

2) run scenario x times for x variable values

In Examples we have two lines, so scenario is run two times. First run with 100, 100 and 1 values and second time with 100, 200 and 2 etc if we have more values.

3) run scenario one time with random value

Scenario is run one time but we don't know which values. With 100, 100 and 1 or 100, 200 and 2.

Let me know the solution that you prefer ;). After I will update vitest-cucumber and publish a new stable version 🍾🍾

Update 10 / 12 / 23

I publish a new vitest-cucumber version 1.1.0.

Now ScenarioOutline and Examples is included in my project.

Reading Gherkin docs I choose to run ScenarioOutline callback X times for X variables.

With the same Examples example, in ScenarioOutline callback, variables are :

{
    "width": 100, // 100 in second test
    "height": 100, // 200 in second test
    "ratio": 1 // 2 in second test
}

I hope you will like it ;).

My script to install husky, commitlint and lint-staged with zx

amiceli — Sat, 18 Nov 2023 23:31:51 +0000

Hello friends,

In all my projects I use husky, lint-staged and commitlint.

Husky

I love husky ! It helps to create Git hook. I use it for :

run eslint with lint-staged before commit
commitlint to follow conventionnal commits rules
run unit tests before push

lint-staged

lint-staged is useful to run eslint against staged git files.
I love it, with lint-staged your commits contain nice files ;). It's better than one commit called lint all files after all commits ^^.

commitlint

commitlint checks if your commit messages meet the conventionnal commit format.
I discovered conventionnal commit in my company and know I use it in any projects ;).

It's especially useful when we are many developers in a project. It's better than commit like job done, fix something etc ^^.

Installation

To install everything on my projects I create a zx script in my zx-scripts repository.

If you want test it, you can run this script withzx :

zx https://raw.githubusercontent.com/amiceli/zx-scripts/main/index.mjs

If you don't have zx, you can install it with npm : npm i -g zx.

I'm still wording on it to add some args and eslint install.

Ciao friends !

Use Gherkin file in your unit tests with vitest

amiceli — Fri, 04 Aug 2023 22:57:52 +0000

Hi everybody, this is my first post, I hope you will like it ;)

In my company we are migrating some projects from jest to vitest. Everything is ok except one thing : the use our Gherkin feature file in our unit tests.

To be simple we use Gherkin to describe what we vill do : new feature, fix a bug, improvement etc

For example, I take it on Gherkin website :

Feature: Guess the word
    Scenario: Breaker joins a game
        Given the Maker has started a game with the word "silky"
        When  the Breaker joins the Maker's game
        Then  the Breaker must guess a word with 5 character

When we use jest, we use jest-cucumber but currenly we haven't an alternative for vitest.

So this week I worked on a new project : vitest-cucumber.

Why ?

Feature file are very important for us so when we run unit tests we want to know if we forgot a scenario or a scenario step or type wrong scenario title.

A good advantage for us, if one day some code break a unit test like it('should join a game').

Error Scenario: Breaker joins a game > When failed is a better error message ;)

How it works

In vitest-cucumber, I create a parser who reads feature file line by line and return a Feature class.

Feature can contains multiple Scenario and a Scenario can contains multiple steps.

And I create describeFeature when to write unit test for a Feature, Scenario and steps.

An example

An example of feature file :

Feature: Improve my unit tests
    Scenario: Use vitest-cucumber in my unit tests
        Given Developer using feature file
        And   Using vitest-cucumber
        When  I run my unit tests
        Then  I know if I forgot a scenario

And an example of unit tests using vitest :

import { loadFeature, describeFeature } from '@miceli/vitest-cucumber'
import { expect } from 'vitest'

const feature = await loadFeature('path/to/my/file.feature')

describeFeature(feature, ({ Scenario }) => {

    Scenario('Use vitest-cucumber in my unit tests', ({ Given, When, Then, And }) => {
        Given('Developer using feature file', () => {
            // ...
        })
        And('using vitest-cucumber', () => {
            // ...
        })
        When('I run my unit tests', () => {
            // ...
        })
        Then('I know if I forgot a scenario', () => {
            // ...
        })
    })

})

`describeFeature`

Run unit test for a Feature. This function uses describe vitest function and provide Scenario

describeFeature uses afterAll, at the end it checks if you missed a scenario or typed a wrong scenario name.

`Scenario`

This function also uses describe but provide multiple function for scenario steps.

It also uses afterAll but checks if you forgot a step or write a wrong step name.

`When`, `Then` etc

This function uses test vitest function.
So this is here to code our expect etc.

Now

I opened an issue on Vitests, to know their opinion and share my project.

I still work on it to improve error messages when unit tests failed and I hope for some feedback to improve this project.

Currently I code scenarios and steps but Gherkin is very powerful : tags, value etc. I've lot of work and I like it ;)

Thanks you, I hope you like this post.