Archives de l’auteur : geekc

Un composant React de choix d’image

Publié le par
Répondre

Durant le développement de ma première application fullstack avec React (JavaScript « natif » d’abord puis TypeScript) et FastApi , j’ai été amené à créer un composant d’upload de fichier image.

Principe de fonctionnement

Ce composant est prévu pour être utilisé comme « champ » d’un formulaire, et utilise des données formattées comme suit :

{
   mode: 'current' | 'delete' | 'new', // utilisé côté back
   currentUrl: 'user-profile.png',
   file: objet File()
}

Au niveau visuel, d’un côté on affiche l’image actuelle ou celle par défaut ou la nouvelle image, de l’autre, des boutons radio permettant de soit garder l’image actuelle, soit l’effacer (et la remplacer par l’image par défaut), soit la remplacer.

Chacune des images mentionnées ci-dessus est affichée dans sa propre balise et est masquée ou affichée celon le besoin.

Continuer la lecture →

Ma première app fullstack React/FastAPI

Publié le par
Répondre

Ça y est ! J’ai enfin réussi à mettre en place ma première réalisation fullstack avec React et FastAPI.

Ce « chef d’œuvre » est visible ici.

Les tutos c’est bien sympa, mais si on ne se lance pas tout seul au bout d’un moment…

Chiffre de César en Python

Publié le par
Répondre

Pour commencer, un petit rappel sur ce qu’est le chiffre de César. Il s’agit d’une technique de chiffrement très simple, consistant à décaler les lettres de l’alphabet d’un nombre de crans.

Par exemple, si on dit que le décalage est de 4, « a » devient « e », « b » devient « f », « c » devient « g », etc…

Comment le faire en Python ?

Comme ici chaque lettre est toujours remplacée par la même, il y a une fonction parfaite pour ça : str.translate().

Cette fonction prend pour paramètre une table de traduction, générée par str.maketrans(), qui elle prend en paramètres deux chaînes de caractères :

  • les lettres de départ, dans notre cas l’alphabet
  • les lettres de remplacement, dans l’ordre, c’est-à-dire qu’avec « abc… » au départ, et un décalage de 4, la chaîne de remplacement est « efg… »

Bon, c’est bien sympa ce principe, mais comment on fait concrètement ?

Continuer la lecture →

Comment ajouter des séries sur une liseuse Kobo sans utiliser de gestionnaire de type Calibre

Publié le par
Répondre

Récemment, j’ai rajouté des livres à ma liseuse Kobo, et j’ai voulu les organiser en série, car contrairement aux collections, on peut ordonner les livres d’une série.

Pour faire ça on peut utiliser un logiciel de gestion, comme Calibre, mais moi j’ai préféré passer par une solution plus bas niveau, aller directement éditer la base de données de ma liseuse.

Continuer la lecture →

Recherche emploi (Laravel/Vue.js)

Publié le par
Répondre

Bon, je ne sais pas si c’est utile de poster ça ici, mais une plateforme de diffusion en plus est la bienvenue.

Après 5 ans chez UBAQ, éditeur de solution de gestion réglementaire pour les laboratoires médicaux, me voilà à la recherche d’une nouvelle aventure codesque.

Au début la solution se basait sur Joomla, pour lequel, via un système de XML maison (BML) et de générateur, on créait des composants.

Depuis, la stack a évolué vers un système plus moderne : Laravel pour le back et Vue.js pour la partie front.

Je suis donc à la recherche d’un nouveau poste avec le même genre de stack.

Concernant d’autres librairies JS et autres compétences, un rapide coup d’oeil à mes différents tutos et trucs et astuces vous donnera un bon aperçu.

Raccourcis de l’outil d’édition des noeuds dans Inkscape

Publié le par
Répondre

Après vous avoir présenté comment je fait pour facilement créer une découpe avec contour dans Inkscape, je trouve intéressant de vous présenter les raccourcis clavier de l’outil d’édition des noeuds que j’utilise.

Rajouter/supprimer des noeuds et segments

Pour créer un noeud au milieu d’un (ou plusieurs) segment(s), sélectionner les noeuds concernés, et utiliser le raccourci Shift + I.

Pour créer un noeud n’importe où sur votre chemin, maintenez Ctrl + Alt et cliquer à l’endroit voulu.

Pour dupliquer le(s) noeud(s) sélectionné(s), rien de plus simple, presser Shift + D.

Pour supprimer le(s) noeud(s) sélectionnés, vous avez juste à presser Suppr.

Pour supprimer un segment entre deux noeuds : Alt + Suppr, et pour le contraire : Alt + J.

Si vous voulez fusionner 2 noeuds, avec les noeuds concernés sélectionnés, presser Shift + J.

Pour casser le chemin au niveau du(des) noeud(s) sélectionné(s), utiliser : Shift + B.

Changer la nature des noeuds

Avec le(s) noeud(s) à changer sélectionné(s) :

  • pour obtenir un noeud dur (les poignées peuvent ne pas être alignés) -> Shift + C
  • pour avoir un noeud doux (poignées alignées, mais pouvant être de longueur différente) -> Shift + S
  • pour un noeuds symétrique (poignées alignées et de même longueur)-> Shift + Y

Mon expérience avec Linux

Publié le par
Répondre

Avec la fin de support de Windows 10 en octobre dernier, Linux a vu son usage progresser fortement cette année. Voici mon histoire avec le pingouin.

Linux dans mon passé

De mon côté, je n’ai pas attendu cet événement pour m’intéresser à Linux, vu que j’avais déjà utilisé courament Ubuntu il y a maintenant un 15aine d’années (ça ne me rajeuni pas cette histoire ^^’ ).

À cette époque, c’était sur mon premier ordinateur à moi, et étant alors novice avec le monde du pingouin, je me suis tourné vers la distro la plus « beginner friendly » de l’époque, Ubuntu.

Après quelque temps, j’ai dû réinstaller Windows (XP), car dans le cadre de mes études de l’époque (au sein de Sup de Pub) j’avais besoin de logiciels de la suite Adobe (principalement Photoshop, mais aussi un peu de Flash).

Ensuite est venu le temps de changer de machine, vu que la précédente commençait à fatiguer. Cette machine a fait toute sa « vie active » avec le Windows (7) venu avec elle.

La machine suivante (qui est mon actuelle) est venue avec Windows 10 (au moins 2 versions de Windows d’écart, comme entre la numéro 1 et la numéro 2).

Continuer la lecture →

Correctif découpe avec contour dans Inkscape

Publié le par
Répondre

Dans un article précédent, je présentait comment, dans le logiciel Inkscape, définir une découpe avec contour.

La technique présentée implique l’utilisation de 2 clones, mais après un essai récent, je me suis aperçu que cela marchait également avec un seul et unique clone

La nouvelle technique

On trace la forme de la future découpe (peut importe le remplissage et les contours), puis on la clone (Alt+D ou Édition>Cloner>Créer clone).

Ensuite, on sélectionne le clone, qui normalement a été créé au-dessus de la forme originale, et les objets à placer dans la découpe, puis on défini la découpe (Ctrl+M ou Objet>Découpe>Définir une découpe).

Si l’objet original avait un remplissage avant les opérations précédentes, vous pouvez avoir l’impression qu’elles ont été faites pour rien. Mais ne paniquez pas !

Sélectionnez l’objet, et attribuez lui un contour en supprimant le remplissage, et voilà !

Cette nouvelle technique présente l’avantage de n’utiliser qu’un seul clone et de faciliter l’édition de la découpe, vu que l’objet original est directement sur les objets découpés.

Inkscape – définir facilement une découpe avec contour

Publié le par
Répondre

Une version mise à jour et plus simple de ce tutoriel est disponible ici.

Dans ce tuto, pas de code, car j’ai décidé de vous parler d’une astuce avec le logiciel de dessin vectoriel Inkscape.

Du dessin, sur ce blog ?

Oui, car depuis maintenant bientôt 5 ans, je poste quotidiennement sur mon compte Instagram (@geekc) des illustrations réalisées avec ce logiciel.

Continuer la lecture →

Un marqueur personnalisé avec Leaflet

Publié le par
Répondre

Lors de mon tutoriel sur la carte du métro de Paris avec Leaflet, j’ai déjà personnalisé les marqueurs de cette carte, mais comme dans le cadre du tutoriel c’était assez secondaire, je n’ai pas détaillé ce point.

Aujourd’hui est venu le temps de revenir sur la manière d’utiliser nos propres marqueurs sur une carte Leaflet.

Rappel des bases

Avant de parler de la manière dont on crée un marqueur personnalisé avec Leaflet, je pense qu’il serait intéressant de revenir sur la création d’une carte avec un marqueur.

Première étape, créer la carte. Pour cela, il suffit juste d’appeler le constructeur L.map(), en lui fournissant deux paramètres :

  • l’id de la <div> destinée à la carte
  • un objet d’options, dont les plus intéressantes sont center (pour indiquer les coordonnées sur lesquelles centrer la carte) et zoom

    Pour créer une carte centrée sur le point zéro des routes de France, cela donne :

    const map = L.map('map', {
  center: [48.853402, 2.348785],
  zoom: 16,
});
    Continuer la lecture →