DEV Community: BOUT Valentin

Figma aiuta: Perché i miei elementi si spostano quando cambio le dimensioni del mio frame?

BOUT Valentin — Mon, 28 Aug 2023 13:43:23 +0000

Quando parliamo di design, in particolare di prototipi o di mockup di un'applicazione o di un sito web, Figma è lo strumento più popolare e ampiamente utilizzato dai designer e dai freelance.

Tuttavia, può succedere che comportamenti involontari appaiano quando si lavora su Figma, facendoci perdere molto tempo e rovinando il nostro design.

Mentre stavo lavorando al prototipo del mio nuovo sito web, che dovrebbe essere lanciato molto presto (www.boutvalentin.com), purtroppo è emerso un problema. Ogni volta che ho aumentato le dimensioni del mio frame, alcuni elementi al suo interno hanno iniziato a crescere e spostarsi. Questo problema mi è capitato anche utilizzando il meccanismo di raggruppamento degli elementi.

Per correggere questo problema, è necessario in realtà prestare attenzione al modo in cui posizioniamo gli elementi all'interno di questi frame.

In effetti, di default, gli elementi vengono posizionati in funzione della distanza dal top e dalla sinistra del loro genitore. In altre parole, l'origine (X,Y) degli elementi corrisponde all'angolo superiore sinistro del nostro frame.

Utilizzando questi vincoli, quando aumentiamo le dimensioni del nostro frame o del nostro gruppo, il nostro elemento rimarrà nella sua posizione precedentemente definita.

Il problema si presenta quando i nostri elementi non sono vincolati all'angolo superiore sinistro del loro genitore.

Gli elementi posizionati secondo diversi vincoli avranno comportamenti diversi e variabili. Ad esempio, un elemento posizionato utilizzando il posizionamento scaled si ingrandirà o si espanderà in base al modo in cui modifichiamo il suo genitore.

Per comprendere meglio il problema, dobbiamo tenere a mente che questi vincoli determinano la posizione di ciascun elemento in funzione del suo genitore. In questo contesto, un oggetto posizionato con vincoli del tipo centre collocherà l'elemento al centro del suo genitore. Se modifichiamo le dimensioni del nostro frame, il centro di questo genitore si sposterà, influenzando la posizione dei suoi elementi figli.

In sintesi, per evitare che i vostri elementi si muovano in maniera inaspettata, devi utilizzare vincoli il più coerenti con il modo in cui stai ingrandendo il genitore. Utilizzando vincoli legati all'angolo superiore sinistro, potrai modificare le dimensioni del genitore superiormente, inferiormente o lateralmente senza rischiare di vedere i tuoi elementi allungati o spostati in un modo strano.

Altri vincoli possono essere utili se vuoi posizionare questi elementi in funzione di un altro punto del loro genitore. Ma per default, faresti meglio a utilizzare il vincolo dell'angolo superiore sinistro.

Spero che questo articolo ti abbia aiutato a migliorare il tuo design e a comprendere meglio i vincoli e il posizionamento degli elementi in Figma.

Se hai bisogno di un sito web, consulenza, audit in sicurezza informatica, DevOps o sviluppo web, non esitare a contattarmi e a consultare il mio sito web.

Questo articolo è disponibile in altre lingue:

Aide sur Figma : Pourquoi est-ce que mes éléments bougent lorsque je change la taille de mon frame ?

BOUT Valentin — Mon, 28 Aug 2023 09:49:26 +0000

Disponible en: 🇬🇧, 🇫🇷, 🇮🇹

Lorsqu'on parle de design, notamment de prototypes ou de maquettes d'une application ou d'un site web, Figma est l'outil le plus populaire et le plus utilisé par les designers et les freelances.

Pour autant, il peut arriver que des comportements involontaires fassent leur apparition pendant que l'on travaille sur Figma, nous faisant perdre souvent beaucoup de temps tout en ruinant notre design. C'est d'ailleurs ce qui m'est récemment arrivé.

Alors que je prototypais mon nouveau site web, qui devrait sortir très bientôt (www.boutvalentin.com), un problème malheureusement familier a fait son apparition. À chaque fois que j'augmentais la taille de mon frame, certains éléments à l'intérieur de celui-ci se mettaient aussi à grandir et à bouger. Ce problème m'est d'ailleurs aussi arrivé avec le mécanisme de regroupement d'éléments.

Pour corriger ce problème, il faut en réalité faire attention à la manière de placer nos éléments dans ces frames.

En effet, par défaut, les éléments sont placés, ou plutôt "contraints", en fonction de leur distance avec le haut et la gauche de leur parent. En d'autres termes, l'origine (X,Y) de nos éléments correspond au coin supérieur gauche de notre frame.

En utilisant ces contraintes, lorsque nous augmentons la taille de notre frame ou de notre groupe, notre élément restera à la position définie précédemment.

Le problème fait son apparition lorsque des éléments ne sont pas contraints par le coin supérieur gauche de leur parent.

Les éléments positionnés selon d'autres contraintes auront des comportements divers et variés. Par exemple, un élément positionné avec le paramètre scaled se verra grandir ou s'élargir en fonction de la manière dont nous modifions son parent.

Pour mieux comprendre le problème, nous devons garder en tête que ces contraintes déterminent pour chaque élément sa position en fonction de son parent. Ainsi, un objet positionné avec des contraintes de type centre placera votre élément au centre de son parent. Si l'on modifie la taille de notre frame, le centre de ce parent se verra déplacé, affectant la position de ses enfants.

En résumé, pour éviter que vos éléments ne bougent de manière inattendue, vous devez utiliser les contraintes les plus cohérentes avec la manière dont vous allez agrandir le parent. En utilisant les contraintes liées au coin supérieur gauche, vous pouvez modifier la taille du parent par le haut, le bas ou sur les côtés sans risquer de voir vos éléments s'étirer ou se déplacer de manière étrange.

Les autres contraintes peuvent être utiles si vous voulez positionner ces éléments en fonction d'un point différent du parent. Mais par défaut, vous auriez souvent meilleur compte d'utiliser la contrainte du coin supérieur gauche.

J'espère que cet article vous a aidé à corriger votre design et à mieux comprendre les contraintes et le positionnement des éléments sur Figma.
Valentin

Si vous avez besoin d'un site web, d'un consultant, de conseils ou d'audits en Cybersécurité, DevOps ou en Développement Web, n'hésitez pas à me contacter et à consulter mon site web.

Cet article est également disponible dans d'autres langues :

Figma helps : why my elements are moving when changing the length of my frame ?

BOUT Valentin — Fri, 25 Aug 2023 15:44:43 +0000

Available in : 🇬🇧, 🇫🇷, 🇮🇹

When it comes to design and web or app mock-up, Figma is THE popular tools among every designer or freelancer.

When designing on Figma, some unwanted behaviour can pop up and ruined some perfect design or make you lose a big amount of time. This is what happened to me recently.

I was designing my new website, which should be available soon at www.boutvalentin.com, and a strange but unfortunately familiar problem showed up. Every time I increased the size of my frame, some elements within it also moved. This issue can also occur with elements within groups.

To fix this behaviour, you only need to pay attention to the way of placing your elements into your frame.

By default, elements are constrained with left and top values. In other words, they are placed according to the top-left corner of your frame.

When using these constraints, if you increase the height of your frame, the elements will remain where you intended them to be.

The issues arise when certain elements are constrained using values other than top-left.

Elements constrained with scaling will be scaled when you increase the size of their parent.

With other constraints, the elements will also move depending on where you stretch the frame.

To better understand the issues, keep in mind that constraints determine how elements will be positioned relative to their parent. For instance, the centre constraint will position your elements based in the centre of the parent. If you increase the size of the parent, the centre will also shift, affecting the position of your elements.

In summary, to prevent your elements from moving unexpectedly, you need to set the constraints based on how you primarily intend to expand the parent. By applying constraints to the top and left, you can confidently adjust the size of the parent by resizing from the top, bottom, left, or right.

The other constraint modes can also be useful if you want to position your elements according to a different point on the parent. However, by default, you will usually want to stick with the top-left constraint.

I hope this article has helped you fix your design and understand more about the world of constraints in Figma.
Valentin.

If you need a website, consulting, advice, or auditing services in Cybersecurity, DevOps, or WebDev, please check out my website!.

This article is also available in other languages:

Chiffrer vos dossiers sensibles pour les stocker sur votre Cloud préféré sans danger

BOUT Valentin — Fri, 14 Oct 2022 18:09:34 +0000

Photo de couverture par Erik Mclean sur Unsplash

Récemment, j'ai fait face à une problématique concernant la protection de mes données. Je souhaitais conserver des fichiers que je considère comme sensible sur Google Drive, mais je n'ai pas une grande confiance en ce dernier pour stocker ce genre de données. Je vous partage ainsi aujourd'hui une méthode que j'utilise pour chiffrer facilement vos fichiers afin de pouvoir les stoker où vous le voulez.

TLDR :

$ brew install gnupg # Install gnupg on macOS
$ export GPG_TTY=$(tty) # Evite l'erreur indiquant un probléme d'ioctl

##-- Compression + Chiffrement
$ tar -cvzf - <dossier_à_compresser> | gpg -c > <nom_du_tar_compresser_et_chiffrer> # Création d'une archive compressée et chiffrée
# Ex: tar -cvzf - test_file | gpg -c > test_files.tar.gz.gpg

##-- Déchiffrement + décompression
$ gpg -d <archive_chiffrer_a_dechiffrer> | tar xvzf - -C <chemin_ou_mettre_archive> # Déchiffre et décompresse l'archive dans le chemin donné
# Ex: gpg -d test_files.tar.gz.gpg | tar xvzf - -C ./test_file

Ma problématique en détail

Comme j'ai pu rapidement l'énoncé, mon but est de pouvoir stocker des fichiers "sensibles" (chacun définis ce qu'il considère comme sensible ou non) sur différent Clouds Providers. À titre personnel, je me méfie de Google Drive et de ce qu'il peut faire avec mes données (analyse, revente pseudo-anonymiser...).
Cette réticence n'est pas spécifique à Google, mais aussi à tous les autres Cloud Providers propriétaires et privées. Par ailleurs, je vous conseille de dupliquer la sauvegarde de vos données sur deux Clouds différents, vous mettant à l'abri si l'un de ces derniers décide de fermer ses portes (un peu comme hubiC 😉).

Mon idée était donc d'essayer de trouver un moyen de chiffrer et de déchiffrer mes fichiers rapidement et facilement, en utilisant une chaine de caractères comme clef (chiffrement symétrique).

Les dépendances nécessaires

Pour pouvoir chiffrer nos données, nous allons utiliser la commande tar coupléé avec l'utilitaire GnuPG 2.0. L'ensemble des commandes seront réalisé sur macOS, mais sont naturellement adaptables à tous systèmes Unix et Windows.

Installer GnuPG 2.0

$ brew install gnupg
# Pour les machines Linux basés sur debian
# sudo apt-get install gnupg

Voilà, nous venons d'installer l'ensemble des dépendances nécessaires, car la commande tar est déjà présentes sur macOS (et Linux). 🥳

Un premier exemple sans compresser le dossier (pour bien comprendre ce qu'il se passe)

Nous allons commencer par essayer de transformer un dossier en un fichier tar non compressé. Nous allons ensuite le chiffrer et observer la différence entre les deux fichiers pour observer si notre chiffrement est utile.

1) Commençons par créer un dossier et quelques fichiers de test

$ mkdir test_folders # Créons notre dossier pour contenir les fichier
$ cd test_folders # Direction notre dossier fraichement créé
$ for i in $(seq 10); do echo "Mon fichier numéro $i" > fichier_$i; done # Création de 10 fichiers 
$ ls # On vérifie que l'on a nos fichier créés
# fichier_1 fichier_10  fichier_2   fichier_3    
 fichier_4  fichier_5   fichier_6   fichier_7    
 fichier_8  fichier_9

2) Créons une archive tar

Nous avons ainsi un dossier d'exemple prêt à être regroupé en un fichier tar.

$ tar -cvf test_folders.tar test_folders/ # Créons une archive tar nommé test_folders.tar à partir du dossier test_folders

La commande précédente nous permet de créer une archive tar (test_folders.tar) à partir du dossier source test_folders.
Les options de la commande tar :

-c : Créer une nouvelle archive
-v : Active le mode verbeux
-f : Définis le nom de notre archive

D'ailleurs, pour informations, une archive tar n'est qu'un simple fichier regroupant tous les autres fichiers combinés à quelques metadatas. C'est donc pour cette raison que nous pouvons observer son contenu avec la commande cat.

$ cat test_folders.tar
test_folders/000755 000766 001750 00000000000 14322264445 013130 5ustar00VALENTIN000000 000000 test_folders/fichier_2000644 000766 001750 00000000026 14322264445 014703 0ustar00VALENTIN000000 000000 Mon fichier numéro 2
test_folders/fichier_5000644 000766 001750 00000000026 14322264445 014706 0ustar00VALENTIN000000 000000 Mon fichier numéro 5
test_folders/fichier_4000644 000766 001750 00000000026 14322264445 014705 0ustar00VALENTIN000000 000000 Mon fichier numéro 4
test_folders/fichier_3000644 000766 001750 00000000026 14322264445 014704 0ustar00VALENTIN000000 000000 Mon fichier numéro 3
test_folders/fichier_6000644 000766 001750 00000000026 14322264445 014707 0ustar00VALENTIN000000 000000 Mon fichier numéro 6
test_folders/fichier_1000644 000766 001750 00000000026 14322264445 014702 0ustar00VALENTIN000000 000000 Mon fichier numéro 1
test_folders/fichier_8000644 000766 001750 00000000026 14322264445 014711 0ustar00VALENTIN000000 000000 Mon fichier numéro 8
test_folders/fichier_9000644 000766 001750 00000000026 14322264445 014712 0ustar00VALENTIN000000 000000 Mon fichier numéro 9
test_folders/fichier_7000644 000766 001750 00000000026 14322264445 014710 0ustar00VALENTIN000000 000000 Mon fichier numéro 7
test_folders/fichier_10000644 000766 001750 00000000027 14322264445 014763 0ustar00VALENTIN000000 000000 Mon fichier numéro 10

3) Chiffrons notre archive

Nous allons maintenant utiliser gpg pour chiffrer notre archive tar.

$ export GPG_TTY=$(tty) # Evite l'erreur indiquant un probléme d'ioctl
$ gpg -c test_folders.tar > test_folders.tar.gpg # Chiffrer l'archive tar en une autre archive chiffré

Pendant l'exécution de la commande, GPG va vous demander une "passphrase" pour encrypter votre archive. Cette passphrase devra être répété ensuite. Il faut aussi bien noter cette passphrase car vous allez en avoir besoin pour décrypter votre archive. Je vous conseille de stocker cette passphrase dans un gestionnaire de mot de passe.

L'option de gpg :

-c : Créer un nouveaux fichier chiffrer symétriquement

Note : Pour vous déplacer dans GPG lorsque cette commande vous demande votre passphrase, utiliser la touche tab et entrer.

Après l'exécution de gpg, vous devriez avoir une archive nommée test_folders.tar.gpg. Si nous regardons ce nouveau fichier, nous observons que le contenu de ce dernier est illisible. Cela signifie ainsi que notre archive est bien chiffrée.

$ cat test_folders.tar.gpg
?-???A?Y?G??Q??]?$???????[|??A?t??j?ļ?]?n?lN?B???M?R???/?ʸ6?S???cr?%?????????L϶??˭^?,?귀F?\E?}?a???u????)T(pI?Qa??ӎ?y?nD^????
                                                                                                                             ?HU???L??T?Wk?,?
??d?V?x?Q$??P?Cn?2l???% ?x??????H?                                                                                                           .???*^D?G?
.???p?Bm6???k٘?U???????????vQ???rPv??W?9????~U
                                             ~#??9(r|`c??@3?E???&?]?4?????V:???
# Exemple avec l'archive chiffré utilisant la passphrase "123456"

4) Déchiffrons et décompressons notre archive

Nous allons maintenant déchiffrer et décompresser notre archive en une seule fois.

$ mkdir second_folders # On utilise ce dossier pour stocker les fichiers de notre archive
$ gpg -d test_folders.tar.gpg | tar -xvf - -C second_folders/ # On décrypte le test_folders.tar.gpg puis on exporte les fichier de notre archive dans notre second dossier  

## On retrouve bien toutes notre archive dans notre second dossier
$ ls second_folders/
test_folders
$ ls second_folders/test_folders
fichier_1   fichier_10  fichier_2   fichier_3   fichier_4   fichier_5   fichier_6   fichier_7   fichier_8   fichier_9
$ cat second_folders/test_folders/fichier_1
Mon fichier numéro 1

La commande gpg -d <fichier_chiffrer> nous permet de déchiffrer (avec l'option -d) notre archive. gpg nous demande alors notre passphrase.

La commande tar -xvf - -C <chemin> nous permet d'extraire les fichiers contenus dans l'archive (avec l'option -x) de manière verbeuse (-v) à partir du fichier (-f) '-' représentant l'entrée standard dans le dossier représenté par le chemin définis avec l'option -C.

Note : il est possible que gpg ne vous demande par votre passphrase pour déchiffrer l'archive. Pas de panique, cela ne signifie pas que tout le monde peut déchiffrer votre archive. En réalité, par mesure d'efficacité, gpg stocke dans le cache de votre ordinateur votre passphrase pour vous permettre de ne pas devoir retaper cette dernière plusieurs fois. Pour vérifier mes propos, vous pouvez utiliser l'option --no-symkey-cache à chaque appel de gpg. Vous verrez alors que gpg redemande bien la passphrase à chaque utilisation et que vos données sont bien sécurisées.

Bravo 🎉, vous venez de créer une archive chiffrée à partir d'un dossier puis de la déchiffrer dans la foulée. La dernière étape est maintenant de faire la même chose, mais en compressant notre archive pour économiser de la place dans notre cloud.

Création d'une archive compressée et chiffrée (et son inverse)

Par mesure d'efficacité, nous allons maintenant réaliser les opérations précédentes de manière chainées. Pour compresser une archive, rien de plus simple. Il suffit d'ajouter l'option -z à la commande tar (à la création de l'archive, mais aussi à son extraction).

Création de notre archive compressée puis chiffrage dans la foulée

$ tar -cvzf - test_folders | gpg -c > test_folders.tar.gz.gpg
a test_folders
a test_folders/fichier_2
a test_folders/fichier_5
a test_folders/fichier_4
a test_folders/fichier_3
a test_folders/fichier_6
a test_folders/fichier_1
a test_folders/fichier_8
a test_folders/fichier_9
a test_folders/fichier_7
a test_folders/fichier_10
$ ls test_folders       test_folders.tar.gz.gpg

Déchiffrage de notre archive puis décompression et extraction de cette dernière dans la foulée.

$ mkdir second_folders
$ gpg -d test_folders.tar.gz.gpg | tar xvzf - -C ./second_folders
gpg: AES256.CFB encrypted data
gpg: encrypted with 1 passphrase
x test_folders/
x test_folders/fichier_2
x test_folders/fichier_5
x test_folders/fichier_4
x test_folders/fichier_3
x test_folders/fichier_6
x test_folders/fichier_1
x test_folders/fichier_8
x test_folders/fichier_9
x test_folders/fichier_7
x test_folders/fichier_10
$ ls second_folders/test_folders/
fichier_1   fichier_10  fichier_2   fichier_3   fichier_4   fichier_5   fichier_6   fichier_7   fichier_8   fichier_9

Et voilà, vous savez maintenant comment générer des archives encryptées et compressées avec une passphrase de votre choix 👏.

Bonus : vérifier l'intégrité de nos données.

Lorsque l'on stocke des données dans des Clouds, rien ne peut nous assurer que nos fichiers sont intègres (beaucoup d'erreur peuvent intervenir dans le transport). Nous allons donc utiliser le shasum de nos archives pour en créer un fichier à stocker sur notre cloud.
Vous pouvez utiliser la commande shasum native ou installer une implémentation sha256sum si vous le souhaitez.

$ shasum test_folders.tar.gpg | cut -d ' ' -f 1 > sha_sum_for_test_folders

Vous n'avez plus qu'à stocker le fichier sha_sum_for_test_folders sur vos Clouds providers. Lorsque vous téléchargez votre dossier depuis votre cloud sur votre ordinateur, vous pouvez vérifier son intégrité en téléchargeant aussi le fichier contenant le shasum et en le comparant au shasum de votre archive provenant de votre cloud.

$ [ $(shasum test_folders.tar.gpg | cut -d ' ' -f 1) = $(cat ./sha_sum_for_test_folders) ] && echo "Le fichier est intègre 🥳" || echo "Oups.. Le fichier est corrompu 😭"

Bravo, vous pouvez maintenant être sûr que vos données sont chiffrés et confidentielle sur votre Cloud et que ces dernières sont aussi intègres 👍.

Le mot de la fin

Vous savez maintenant comment être maitre dans le chiffrement de vos données et dormir sur vos deux oreilles en sachant que vos données sont illisibles par vos Clouds providers.

N'hésitez pas à partager l'article, ou à me contacter pour discuter tech si vous le voulez.

Je partage d'autres articles ou des tutos simples pour tous afin d'améliorer l'expérience de vos utilisateurs, le référencement, la sécurité et parfois même le management de vos projets alors n'hésitez pas à me suivre ou à lire d'autre de mes articles ou formations et si vous ne voulez pas…

et bonne journée 🥳

PS : Si vous êtes intéressé par le Dev Front plus spécifiquement, go check @sidali et ses articles / formations faits avec ❤️ (et passion) sur tous ses sujets.
PSS : Si vous êtes intéressé par la Cybersécurité, go check @emiliebout et ses articles / formations faits avec passion (et ❤️) sur tous ses sujets.