DEV Community: Corentin Girard

Programmatically output lyrics on a tee-shirt

Corentin Girard — Sun, 30 May 2021 18:21:42 +0000

Some years ago I re-wrote the lyrics of a song as a JS script. I ordered a tee-shirt with this "art" of mine (I actually find it quite beautiful 😅).

But everytime someone looked at my tee-shirt, they would ask me if it really means or does something. I would answer "no, it doesn't work, it's just a representation".

But now, I've implemented it!

I chose C++ to be able to overload operators exactly as I wanted... My goal was to not change anything about this source code, which I designed without knowing I would implement it.

So in the main.cpp file, all I have is the following:

#include "logic.cpp"

int main()
{
    /**
     * Guess the song... 😌 😎
     */

    imagine(!heaven) == "easy";
    us.below = !hell;
    us.above = sky;
    imagineAll("living for today");

    imagine(!countries) != "hard";
    (kill || die).reasons.length == 0;
    religion = undefined;
    imagineAll("living life in peace");

    chorus(); //🎵🎶

    imagine(!possessions) ? "😀" : "😥";
    need(greed || hunger) == false;
    men.reduce([]() { return "brothers"; });
    imagineAll("sharing all the world");

    chorus(); //🎵🎶
}

All the logic is included in another file.

As you can see, the only differences are the double quotes for the string literals and the syntax of the lambda expression. Apart from that, it's the exact same thing as my tee-shirt.

Here's the output of the program, without any hardcoding:

Here's the repo: https://github.com/Drarig29/tee-shirt-song

So, did you guess the song?

Kounter, a simple PWA

Corentin Girard — Tue, 02 Mar 2021 18:59:50 +0000

Request

My mom is a teacher and wanted to have something easy where she can count up the participations of her students.

She asked for a straightforward solution, preferably a mobile app.

Choice

I already have a Play Store account so I said to myself: "What a good opportunity to learn React Native!"

Before I got started, I verified if the whole process was fast enough... but I saw I had to re-install Android Studio and all the build tools needed for Android (see here) and everything about Gradle and APK signing (see here) brought me back bad memories...

So instead I chose to make a progressive web app with Preact (basically a lightweight React! 🚀).

I do not consider myself as a beginner in React but it was definitely the first time I was going to use functional components. I wanted to try those hooks! 😁

My other choices:

I always use pnpm currently, this is a faster npm
I generated the PWA with Preact CLI
I wanted to try PrimeReact components with Preact
I wanted to automatically build and publish my PWA on GitHub Pages with a CI pipeline

Thinking

My mom can easily export each of her student groups to separate CSV files.

But because she wants to import data once, I figured out that having a single file with all the groups would be a good thing.

So this will be the only annoying she has to do: export all the groups and combine them into a single CSV file with a simple format.

She'll have to do this only once.

Example of CSV file (names generated here):

Group name	Students
Group A	Jalisa Daughtry
	Tisa Metellus
	Elba Kennison
	Johnna Goetzinger
	Monet Caine
Group B	Blair Gomes
	Angeles Ratley
	Lamonica Miner
	Elton Standley

All the data is persisted in localStorage so nothing is on a server, and there is no problem with GPDR and students.

Resolution

You can see the code here: https://github.com/Drarig29/kounter
And a live demo here: https://drarig29.github.io/kounter

For beginners, I think this can be a good example for many things.

However, I didn't split anything, this is a quickly-made solution. So most of the logic is in this file.

I'm open to comments too! 😊

pnpm and package-lock.json

Corentin Girard — Wed, 28 Oct 2020 22:40:45 +0000

I just started to use pnpm as an alternative to npm and it's great!

However, I quickly ran into a problem: pnpm creates a pnpm-lock.yaml file and it doesn't update my old package-lock.json.

So here is what I could do:

Get rid of my package-lock.json (so that I don't need to keep it up to date anymore) and keep the pnpm-lock.yaml but I "force" people to use pnpm
Remove both lock files and pretend that "it's a library so it should always be up to date" (from a comment below this question on StackOverflow)
Keep both files but I need to manually update the package-lock.json with npm because pnpm doesn't support it

For now, I disabled the creation of the pnpm lock file so that pnpm just acts for me as something which speeds up my installation process and I kept my package-lock.json file.

I think this question is also applicable to someone who uses yarn, so I searched for it and found in this answer that there is a yarn import command which creates a yarn lock file from a npm lock file. There is exactly the same command with pnpm (but it creates a pnpm lock file, obviously).

The problem is that it would force me to use something that I don't want to use anymore (npm) to be able to please others.

What do you think about that? Maybe you have another solution?

Edit:

Here's the answer of pnpm's creator:

You should always commit a lockfile. If you use @pnpmjs, you should commit pnpm-lock.yaml.

You should not commit lockfiles of other package managers. So if you commit pnpm-lock.yaml, remote package-lock.json or yarn.lock.
— Zoltan Kochan 🇺🇦🇭🇺 (@ZoltanKochan) October 29, 2020

A funny thing about npm

Corentin Girard — Mon, 12 Oct 2020 19:49:58 +0000

Every now and then, I need to make a search on npm website. As I often do, I decided to add a new query URL in my browser.

So I searched for a random letter on npm website to see the pattern of the search query.

But, to my surprise, it redirected me to an existing package with this only letter as a name. "LOL", I thought.

Then I tried with "a" and it existed too! As a result, I eventually searched for all the alphabet and... all the alphabet exists! WOW. 😂

As a proof, I made a quick script to gather all of them and their descriptions. You can find it here:

https://github.com/Drarig29/npm-alphabet

Here is the full list:

a : Mocking framework and test framework in compact when-style. With recursive test runner
b : Benchmarks for Node.js.
c : Set and remove comments from files and directories, and view them from the command line.
d : Property descriptor factory
e : A modern universal utility library.
f : Functional Microservice Request Library
g : Globalize module functions
h : generate HTML from javascript array structures
i : custom inflections for nodejs
j : CLI tool for working with spreadsheet files
k : new web framework
l : Mix Async/Sync code with Promises and Streams in a reusable unified line
m : mongodb version management
n : Interactively Manage All Your Node Versions
o : common object helper functions
p : pattern matching in javascript for asyncronous iteration
q : A library for promises (CommonJS/Promises/A,B,D)
r : require relative to your root project
s : SheetJS Spreadsheet Helper Library
t : tree traversal and manipulation
u : A minimalist, functional utility library designed for embedding into another small program.
v : Secure, Synchronized, Realtime, Cloud, Native JavaScript Variables & Events
w : WordBox cli to quickly spin up PHP dev environments.
x : Apply HTML transformations using attributes
y : Simple object inspection tool
z : native pattern matching for javascript

Thank you for reading my first post! 😎