Forem: a frank

Bien build avec parcel

a frank — Thu, 11 Jan 2024 15:50:03 +0000

Introduction

Ce post peut et pourra vous servir lorsque vous souhaiterez publier votre site en ligne avec Parcel (StarterKit eikon).

C'est un petit tutoriel avec les étapes nécessaires pour bien configurer vos pages, liens etc. avant le "build".

Disclaimer : Ce post est surement incomplet ou mal exécuté par moment, alors il est fortement conseillé de faire vos propres recherches et si vous rencontrer des problèmes n'hésitez pas à demander à ChatGPT.

Mise en place

Avant de commencer, il nous faut préparer le terrain en installant et vérifiant quelques fichiers.

Étape 1: Installation

Pour la suite nous aurons besoin d'un plugin de parcel, il peut s'installer via le terminal en entrant cette commande :

npm install --save-dev parcel-plugin-static-files-copy

Normalement, si vous vous ouvrez votre fichier 'package.json' et vérifiez que dans la section 'devDependencies' la ligne "parcel-plugin-static-files-copy": "^2.6.0", s'est ajoutée. Ma version du plugin est surement différente mais ça ne devrait pas vous empèchez de poursuivre ce tuto.

Étape 2: Adapter le 'package.json'

Le plugin que nous venons d'ajouter va permettre à notre site de gérer beaucoup plus facilement les liens entre ses pages et de les simplifier.

Nous allons d'abord ajouter à notre fichier 'package.json' quelques lignes pour lui permettre de comprendre ce qu'on souhaite faire.

A la fin de votre fichier juste avant la dernière parenthèse ajouter ceci:

"staticFiles": {
    "staticPath": "./src",
    "outputPath": "./dist"
  },

Ça devrait ressembler à ceci:

{
  // le reste du code
  },
  "staticFiles": {
    "staticPath": "./src",
    "outputPath": "./dist"
  },
}

Cette règle va permettre à Parcel de diriger convenablement les fichier vers le './dist'

Puis l'on ajoute juste en dessous cette règle:

"parcel": {
    "transformers": {
      "*.{html,css,js}": [
        "@parcel/transformer-static-files-copy",
        "@parcel/transformer-html"
      ],
      "*": [
        "@parcel/transformer-raw"
      ]
    }
  }

Ici nous allons indiquer que dorénavant, parcel utilisera 'transformers' de façon légèrement différente, car il peut désormais interpreter des liens simplifier.

Votre fichier devrais ressembler à ceci:

{
  // le reste du code
  "staticFiles": {
    "staticPath": "./src",
    "outputPath": "./dist"
  },
  "parcel": {
    "transformers": {
      "*.{html,css,js}": [
        "@parcel/transformer-static-files-copy",
        "@parcel/transformer-html"
      ],
      "*": [
        "@parcel/transformer-raw"
      ]
    }
  }
}

Étape 3: Adapter le HTML

Maintenant que notre fichier de règles est prêt, nous pouvons nous attaquer au HTML.

Rien de plus simple, à chaque mentions d'une page dans un <a></a> nous allons supprimer l'extension .html.

Avant :

<header>
  <a href="about.html">À propos</a>
</header>

Après :

<header>
  <a href="about">À propos</a>
</header>

Normalement grâce à nos changements dans les règles, les liens sont maintenus et continuent de fonctionner convenablement.

Si vous possédez un lien qui redirige vers votre index.html nous allons un peu plus le modifier, car voir dans la barre de lien un site se terminant par .../index ne fait pas très pro.

Nous allons juste remplacer l'adresse index.html par ./ de la sorte, nous indiquons à parcel qu'il faut retourner à la racine de notre site et le reste est fait par le navigateur, qui lui va directement prendre le fichier index.html, l'afficher et ne rien ajouter dans la barre de lien.

Comme ceci:

<header>
  <a href="./">Home</a>
</header>

Étape 4: Vérifier

Si vous avez bien suivi chaque étape, vous êtes en mesure de pouvoir lancer la commande npm run dev et constater que l'adresse ne possède plus aucune terminaison de fichier.

Bien joué!

Si le build ne s'est pas fait correctement, verifier chaque étape si nécessaires réinstaller le plugin et si cela ne fonctionne toujours pas, demander à ChatGPT.

Voilà voilà normalement maintenant votre site est prêt à être publié comme un pro!

Master emmet and you'll be a great developer

a frank — Tue, 19 Dec 2023 16:14:59 +0000

Introduction

Why use emmet ? Simple, it is the most useful tool you can ever find. Its function ? Simplify your life with fast, efficient and very very useful commands.

I've been using emmet for 3 years now and it's really simpler.

Installation
Syntax
Links and doc

Installation

If you're on VScode or JetBrains, it is already installed.

But if it is not, click here

Syntax

Here we are! The fun part. Using emmet is really simple, it uses abbreviation and autocomplete.

For example, if you write this :

div>a*3

It should output this :

<div>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
</div>

You see? Emmet automatically setup three a inside of a div, by using > and *3.

There's a lot of rules like that but the most used are:

add children : >
add sibling : +
set the number of element : *Number
set the class : .
set the id : #
insert content : {Content}
use auto-number : $

With this list you should be ready to use emmet but you don't have all the keys.

The exact syntax is : element[#id or .class][{Content}][*Number][>children or +sibling]

This is how it works, but with some exemple you'll clearly understand don't panic.

Let's try some lines
First what should looks like this line ?

div.container>a.item#button{item $}*3

it supposes to output this:

<div class="container">
  <a class="item" id="button">item 1</a>
  <a class="item" id="button">item 2</a>
  <a class="item" id="button">item 3</a>
</div>

Then this one ?

.container>p{Hello world}+a.button{Read more}

If you writted this correctly, you should see this:

<div class="container">
  <p>Hello world</p>
  <a href="" class="button">Read more</a>
</div>

You see? We started with a class and it automatically add a <div>. It is the power of emmet.

With emmet you also have the autocomplete, you just have to write img and it'll be <img src="" alt="">. What a super power huh?

Links and doc

emmet documentation
emmet installation

Thank you very much for reading this article, made with love and coffee. <3

Useful VScode Extension for Front-end dev

a frank — Wed, 15 Nov 2023 14:14:03 +0000

What are extension ?

VScode extension are some tools, plugin or just customisation packs that you can install and use while coding with your favorite IDE (Integrated development environment e.g. VScode).

These extension can be really helpful to quickify your workflow, let your eyes take a break from ugly themes and more.

There is an embed panel in VScode that let you manage your installed extension and find new one. You can also visit their marketplace - all the links in this post.

Customisation

The key of a great developer is their "Themes". Just some .JSON lines that spice your IDE.

Bearded Theme

If you're a colourful person, this theme library should be perfect! With more than 40 different theme, you'll find your style.

Install it!

Community Material Theme

You are more "classic" but still like colours and better visuals. There you go, this theme library is a little bit smaller than the first one but still incredible. (I'm using it so it's the best).

Install it!

Chalice Icon Theme

Are you disapointed about all these icons and logos of languages or file format. Chalice have the solution, a minimalist icon theme, less distraction, more focus.

Install it!

Tool for code

If you're struggling about rethinking all of your links or have to be on several app at the same time. I have some solutions for you.

Color Highlight

Very useful to see the colours you're using in code.

Install it!

Auto Rename Tag

This one is incredible only usable in XML/HTML but it lets you code and not worrying about unclosed tags.

Install it!

Figma for VS Code

Yes, it's not a joke. You can literally open, see, copy content, attributs, exports your figma projects in VS Code.

Install it!

GitLens

Already known by the entire VS Code community but still useful to place here. GitLens provide you to see in a comfortable way your commits, branches and modified code. Very useful when you're not sure on which branch you are.

Install it!

Prettier & Prettier+

Same as GitLens, very famous but still interesting.
If you don't know what prettier do, just imagine someone who is enough good a code but only to indent correctly your code.

Install it!

Markdown All in One

This extension allow you to use some shortcut and enhanced the markdown creation to have a cool and simple tool, like dev.to.

Install it!

Open the web page

Simple as its name is, this extension let you open url in your IDE. So now you only have to open VS Code to work.

Install it!

Disclaimer

Obviously, nobody ask me to make this post, it is not an advertising and I'm not paid to do this. I only wanted to help the community as much as I can.

Thank you for reading this post and let me know if it was useful.