DEV Community: Aymeric Le Feyer

🎲 Boardie Journal #01 - My new side project

Aymeric Le Feyer — Mon, 20 Mar 2023 10:08:44 +0000

This is a new series of articles in which I will share my thoughts, my accomplishments, my mistakes and my fears. Welcome to the logbook of the Boardie app.

❤️ Let’s mix two passions

I like board games, I have many of them and I like spend time playing with friends. I've been thinking about developing an application related to board games for a while now. 🎯 The technical objective behind this project is to learn new things, to try to improve myself in UI/UX and to develop a project from beginning to end. I like code and I like games, let’s have fun !

🎲 Features

Basically the app won’t be revolutionary, I will develop simple features like

Manage collections of game (wishlists, owned games, played games)
Give a rating on a game
Suggest games related to ratings, mechanics & themes of games (will be a huge part)
Create parties with friends & games, history of parties …

🧑‍💻 Tech

Let’s take importants choices.

📱 The mobile part won’t surprise anyone, I picked Flutter for fast and cross-platform development.

📚 I hesitated for a long time for the database between a graph base and a classic relational base, I think a graph base could be really nice, because I need to make relations between games and games, users and users, games and users… A graph should be perfect in this case !

But I picked a classic relational database: Postgres, because of the backend !

💻 Indeed, I decided to learn a new backend : Serverpod. It’s a Flutter-thought backend written in Dart, allowing to share a part of the logic between front & back.

➡️ https://serverpod.dev/

Serverpod comes with a lot of features (authentication, cache, messaging …) and it uses Postgres database.

🚀 For this project, I want to discover the power of Serverpod !

✏️ I will write a lot of articles about Serverpod because I want to share everything I learned !

👀 Watch the next issues to be kept informed of the progress of the project, and to learn more about Flutter and Serverpod !

🎨 Discover CSS Keyframes

Aymeric Le Feyer — Sat, 24 Dec 2022 13:59:26 +0000

The purpose of this article is to share how I solved this problem. Copying/pasting each block of code will not work.

Let's have fun with CSS !

👋 This morning I gave me a challenge : making a custom spinner only with HTML and CSS (JS is allowed but only for creating a module for reusability)

💼 My objective was to animate the logo of Pit, the company in which I'm involved.

First of all, the mockup

💡 I had a general idea of what I wanted to do, so I decided to draw each step of the animation.

% Percentages you can see are the progression of the animation. Each frame lasts a different duration.

⏰ Here is the final timeline , with mathematics for calculating some areas (thank you Pitagore)

Do you need a translation of the timeline ?

0% -> 10% : Increased logo size
10% -> 15% : Appearance of the square n°2 (left one)
15% -> 20% : Appearance of the square n°3 (top one)
20% -> 25% : Appearance of the square n°1 (right one)
25% -> 35% : Appearance of the "addons", small squares next to each big square
35% -> 90% : Rotation (because it's a spinner !)
90% -> 100% : Decreased logo size

Can you imagine the result ?

Now, let's code !

🏛 For the HTML, I wanted to have the small import possible of the spinner, because I can imagine use it for projects later.
I wrote the HTML first and forbade myself to edit it, because that's what I wanted it to look like.

<div
  id="pit-loader"
  data-color="#E9AE24"
  data-size="150"
  data-duration="3s">
</div>

👨‍💻 Now, a pinch of JavaScript, I split the logo by 4 (yes, there are 4 squares).

const squareCount = 4;

for (var i = 0; i < squareCount; i++) {
  var squareNode = document.createElement("div");
  squareNode.classList.add("pit-square");
  loader.appendChild(squareNode);
}

I used this way to keep the call of the spinner in HTML as simple as possible.

👩‍🎨 The core of the animation is in the CSS.
The logo is composed by 4 squares, and for each square, another small square. The logo is easy to reproduce, that's why I draw it in CSS

#pit-loader {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) * 1px);
    width: calc(var(--canvas) * 1px);
    height: calc(var(--canvas) * 1px);
    transform: rotate(225deg);
}

.pit-square {
    position: absolute;
    width: calc(var(--square) * 0.4px);
    height: calc(var(--square) * 0.4px);
    border: calc(var(--square) * 0.3px) solid var(--primary);
}

.pit-square::after {
    content: "";
    position: absolute;
    width: calc(var(--square) * 0.3px);
    height: calc(var(--square) * 0.3px);
    background-color: var(--primary);
    bottom: calc(var(--square) * 0.4px);
    right: calc(var(--square) * 0.4px * 2);
}

Basically, this creates the logo you see before, nothing is relevant here.

🎞 To animate the logo, I used CSS Keyframes (Who guessed it ?) And it's now my split with percentages is useful !

🏞 When we focus on the whole logo, the "only" animation is the size and the spinning, that's it !

@keyframes loader {
    0% {
        opacity: 0;   
        transform: scale(0); 
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    35% {
        transform: rotate(225deg);
    }
    80% {
        transform: rotate(-135deg);
        opacity: 1;
    }
    100% {
        transform: rotate(-135deg) scale(0);
        opacity: 0;
    }
}

🤔 However the difficulty is the animation of the 4 squares, because I wished every square to appears after the previous one. So I created 4 keyframes

/* Animation of the right square */
@keyframes square-1 {
    0% {
        opacity: 0;
        right: 0;
    }
    20% {
        opacity: 0;
        right: 0;
    }
    25% {
        opacity: 1;
        right: calc((var(--square) + var(--gap)) * 1px);
    }
}

/* Animation of the left square */
@keyframes square-2 {
    0% {
        opacity: 0;
        left: 0;
    }
    10% {
        opacity: 0;
        left: 0;
    }
    15% {
        opacity: 1;
        left: calc((var(--square) + var(--gap)) * 1px);
    }
}

/* Animation of the top square */
@keyframes square-3 {
    0% {
        opacity: 0;
        top: 0;
    }
    15% {
        opacity: 0;
        top: 0;
    }
    20% {
        opacity: 1;
        top: calc((var(--square) + var(--gap)) * 1px);
    }
}

/* Animation of the bottom square */
@keyframes square-4 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
}

➕ Finally the "addon" square is so easy

@keyframes addon {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
        right: 0;
    }
    35% {
        opacity: 1;
        right: calc(var(--square) * 0.4px * 2);
    }
}

➡️ To give a specific keyframe to each square, I used the nth-child() way. Example for the right square.

.pit-square:nth-child(1) {
    top: calc(var(--square) * 1px + var(--gap) * 1px);
    animation: var(--animation-duration) ease-in infinite square-1;
}

⏮ I talked before of data-attributes, I discovered them in this project, so here is a small explanation.
In HTML, we can add data-* attribute to any component, and retrieve them back in JS.

var loader = document.getElementById("pit-loader");
var color = loader.getAttribute("data-color");
loader.style.setProperty("--primary", color);

It makes my head spin !

🥁 Drum roll ... the final result ... TADA!

🔥 Deploy a website with Firebase Hosting

Aymeric Le Feyer — Sat, 15 Oct 2022 09:19:53 +0000

🇫🇷 French version

Green light for deployment

🌐 Whether for a showcase site, a portfolio or even for a web application, the final step for a developer is to put it into production on an internet address available to everyone.

🔥 Today I offer you Firebase, which with its Hosting tool allows you to deploy a site quickly and for free.

💸 Firebase is a pay-as-you-go tool, you spend what you use. In the case of Hosting, it is possible to take advantage of 10GB of storage and a transfer of 360MB per day in the free offer (no credit card to enter). The link with the domain name and the SSL are also included in the offer.

Note, however, that to use a domain name, you must first have one!

To start the deployment, it is necessary to have npm as well as the firebase-tools CLI.

npm install -g firebase-tools

Depending on the composition of your project, the installation procedure differs. I invite you to follow the official documentation for more completeness.

💪 Once the CLI is installed, connect to your Firebase account with firebase login then in your project folder, launch a firebase init in order to admire the beautiful Firebase CLI.

You can use an existing firebase project, or create it from the CLI.

Example of firebase init command

⛔ If you already have files in the public folder, be sure to answer N when the CLI asks to override the directory.

Once done, new files have been created in your project, the firebase project configuration (you need to commit them).

File tree after create project

⬆️ Finally, place the firebase deploy

Firebase deploy command with CLI

Overview of the website just deployed

Et voilà, your site is deployed !

You will find information on the Firebase project page, such as history or configuration for the domain name.

History of versions deployed on Firebase

See only fire

🤔 I had the idea to write this article after deploying my personal website, and since this is the kind of site that we modify once every 6 months, it is always difficult to find the commands to use to update it.

😁 Surely you come to me, the goal now is to automate the firebase deploy in a CI/CD process, so that you don't have to worry about deployment anymore and see only fire in it (yes, there is a link to the title of the section).
During the init, the CLI offered to configure automatic builds, you had to answer Y.

You can change the options with a little firebase init hosting:github.

🤫 The CLI will automatically create Github Secrets and the .yaml file.

I propose a yaml file very similar to the one generated, but which triggers at each push on the master branch, and which will deploy in “production” (finally, it is the perfect configuration for a personal project or a POC) .

⚠️ I added a build step because my project was in VueJS, you can adapt the line npm install && npm run build with your needs.

name: Deploy to Firebase Hosting on push
on:
  push:
    branches: [master]

jobs:
  build_and_live:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: ⬇️ Install dependencies and build
        run: npm install && npm run build

      - name: 🔥 Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_project }}"
          projectId: projectId
          channelId: "live"

⚠️ Remember to modify the projectId at the end, and also the service_account. 🙂

➡️ Now with each push, a Github Actions will launch and a build will occur in Firebase.

Github Actions

History of versions deployed on Firebase

📑 For more information, the Firebase Hosting documentation is really effective !

And now ? All that remains is to test the power of the tool on your side, and perhaps you will use it in your next projects?

🧱 Make templates with Mason CLI

Aymeric Le Feyer — Fri, 14 Oct 2022 19:14:36 +0000

🇫🇷 French version

Template and rule

🧑‍💻 The job of a developer is also copy/paste of already existing snippets. Why reinvent the wheel with each new project?

A template, or boilerplate, allows you to start a project or a new feature with a solid code base.

To facilitate the usage of template, BrickHub offers a new tool : Mason CLI.

➡️ The promise is simple, that of being able to create reusable bricks in your projects, all via a CLI. (Command Line Interface)

🧱 A brick being a set of files that can be generated according to different parameters.

Usage of the hello brick

The brick flutter_getx available on brickhub allows to create a Flutter project with the GetX architecture. It is enough to give some parameters to create the project.

Addition of the brick flutter_getx and usage

👉 With templates, it is possible to simplify project creation.

Bring your brick to the building

➕ To create a custom brick, just place all the files to be generated in the __brick__ directory after entering the following command :

mason new <BRICK_NAME>

Example of using the command mason new

Architecture of a new brick

ℹ️ The brick.yaml file lists all the bricks of the project.

🥸 The mustache notation is used to inject variables in files.

Hello {{name}}!

🖥 Once your brick has been created, it is possible to publish it on brickhub so that other users can use it. In a professional setting, it is possible to host your bricks elsewhere and then add them to the project manually, by changing the reference of the bricks registered in the .mason folder of your project.

📑 For more information on creating custom bricks, the official documentation is well provided → https://pub.dev/packages/mason_cli

And now ? All that remains is to test the power of the tool on your side, and perhaps you will use it in your next projects?