Design & Développement web - Le topic des canards qui mangent des cookies

**Awake** · 16/04/2023, 12h40

Aucun soucis à mon avis, c'est pas comme si t'étais un attaché de presse qui venait poser son lien et disparaître

**Etheon** · 16/04/2023, 16h09

C'est pas faux. Du coup je vous présente un site que je développe depuis 2 ans maintenant (en vrai en temps de dev ça doit être 2-3 mois), https://www.multy.me

Pour le pitch, c'est c'est url shortener un peu spécial, puisqu'il vous permet de créer des listes de liens plutôt qu'en avoir un seul. C'est plus comme Linktree, sauf que tu n'as pas droit qu'à une seule liste.
J'ai déjà quelques clients et c'est rigolo de voir l'utilisation que les gens en font (alors que j'avais pas du tout de cible en tête quand je l'ai créé). Une de mes toutes premières clientes c'était une actrice canadienne qui m'a d'ailleurs bien aidé à améliorer le site avec des idées de features. Elle s'en servait pour sa newsletter je crois.

J'ai également pas mal de prof qui l'utilise pour créer des listes pour leurs élèves, c'est plus pratique à partager qu'un pavé de liens sur un document.

Voila pour la présentation, maintenant j'aurais aimé avoir des retours sur le design, parce qu'autant j'adore faire du back, autant le front...

J'ai changé le design 3 fois en 2 ans déjà, et je suis pas encore satisfait. Notamment sur la palette de couleur, j'arrive jamais à trouver un truc qui me fasse dire "ah ouais, c'est ça le branding du site". J'ai retouché un peu la page pricing hier pour la rendre un peu plus potable (et voir si ça augmente la conversion).

Si vous avez des retours/idées, je suis preneur ! Pareil si vous avez des ressources pour "apprendre" le design. J'hésite à acheter le bouquin des mecs de Tailwind, mais c'est CHER https://www.refactoringui.com/

Edit: J'ai oublié de mettre ma stack, alors que ça doit vous intéresser bande de nerdz.

Next.JS pour le front/back
TailwindCSS avec DaisyUI pour la UI
Supabase pour tout ce qui est database et auth (j'adore ce service, même si c'est un peu cher au delà de leur offre gratuite)
Sendgrid pour gestion des mails / liste de contacts
Stripe pour le paiement

Niveau hébergement, j'étais sur Vercel pendant plus d'un an et la je suis passé sur mon propre serveur Hetzner à 4euros par mois, couplé à Cloudflare en CDN, ça marche très bien !

**raaaahman** · 16/04/2023, 19h13

Envoyé par Etheon

Si vous avez des retours/idées, je suis preneur ! Pareil si vous avez des ressources pour "apprendre" le design. J'hésite à acheter le bouquin des mecs de Tailwind, mais c'est CHER https://www.refactoringui.com/

Le design, c'est un métier à part entière. Je pense que tu devrais déléguer cette tâche. Soit payer une prestation, soit acheter un template. Voire même demander à une IA...

**Hideo** · 17/04/2023, 15h21

Woputain c'est exactement ce que j'avais commence a faire sur une app heroku pour mon usage perso en vachement plus propre quand meme. Faudra que je retrouve ca

J'vais garder ton lien dans un coin.

**Etheon** · 17/04/2023, 18h46

Envoyé par raaaahman

Le design, c'est un métier à part entière. Je pense que tu devrais déléguer cette tâche. Soit payer une prestation, soit acheter un template. Voire même demander à une IA...

C'est pas faux, mais dans l'idée du indie hacking, j'aime bien tout faire

côté template c'est effectivement ce que j'avais cherché, mais tu te retrouves très vite limité (c'est à cause des limitations que j'étais passé sur Tailwind plutôt que bootstrap).

Envoyé par Hideo

Woputain c'est exactement ce que j'avais commence a faire sur une app heroku pour mon usage perso en vachement plus propre quand meme. Faudra que je retrouve ca

J'vais garder ton lien dans un coin.

Ca m'avait vraiment étonné quand j'avais commencé ce projet qu'il n'y avait personne sur le créneau. Faut que je focus un peu le marketing mais ya des intéressés (généralement quand ya personne sur un secteur, ça sent mauvais).

**Awake** · 17/04/2023, 19h57

Je trouve le design correct, dans l'ère du temps, juste un peu "off" par endroits. Par ex, le bleu/gris terne que tu utilise pour le top menu et le CTA, c'est typiquement une couleur timide choisie par un dev. Mais je serais bien incapable de te donner des conseils sur comment l'améliorer. (parce que c'est le genre de couleurs que je choisirais aussi

).

**raaaahman** · 17/04/2023, 20h46

Tu devrais refaire un tour de recherches sur les templates Tailwind, je pense que le framework à beaucoup gagné en popularité.

Après tu peux aussi n'acheter que le design, ou t'inspirer d'un dribble shot / figma community file gratis.

Sinon tu as aussi l'option de jouer sur l'absence ou l'insolence du design, voir toute la tendance "brutaliste".

**mellifico** · 28/04/2023, 21h20

Punaise sveltekit + wpgraphql + typescript = l'enfer...
Le typage c'est l'horreur pour un noob comme moi. Codegen, apollo, mon cul sur la commode, j'en peux plus...
Si vous avez des conseils, je prends, il n'y a aucune documentation vraiment complète, il manque toujours quelque chose...
ChatGPT m'a un peu aidé à débrouiller des concepts, mais bon...

EDIT / je serais bien curieux d'entendre un seul cas où typescript vous a sauvé, pasque en fait je vois pas l'intérêt dans mon petit cas...

**Orhin** · 29/04/2023, 00h29

Alors j'ai jamais utilisé cette combinaison de techno donc je saurais pas trop t'aider sur ce sujet précis, mais par exemple graphql + apollo + react + typescript (mon taf actuel) ça se passe très bien.

De manière générale, je ne pourrais plus me passer de typescript.
À moins de faire une petite appli et de bosser tout seul, c'est pour moi essentiel dans le dev web :
- auto documentation du code qui facilite sa compréhension pour les autres devs (et aussi soi même dans le futur

)
- facilitation d'écriture de code via une bien meilleure auto completion et navigation syntaxique de l'IDE
- refactoring facilité aussi bien via les outils de l'IDE que les checks du compilateur
- mais surtout ça force à réfléchir aux structures de données manipulées et à poser son raisonnement lorsque tu écris une fonction ou un component

**Awake** · 29/04/2023, 08h32

+1 Je pense aussi que le typage est indispensable.

**Captain_Cowkill** · 29/04/2023, 09h32

C'est toujours ça avec TypeScript : au début tu le hais parce qu'il passe son temps à te casser les noix, et après tu ne te verras plus coder sans.

Orhin a bien résumé.

**Fastela** · 29/04/2023, 14h13

Typescript c'est la vie. D'un côté ça t'oblige à écrire du code propre et qui a du sens, de l'autre côté ça te préviens dès que tu commences à écrire de la merde.

C'est tout simplement le futur de JavaScript.

**mellifico** · 29/04/2023, 15h04

Je reste motivé et j'apprécie d'en baver comme ça ; je le savais que j'allais pleurer des larmes de sang pour me hisser au niveau convoité...
Je viens de trouver kitql et houdini qui semblent être développés en collaboration, mais leur doc est trouée (enfin pour un apprenant comme moi...), elle suppose que tu sais tout et que tu vas combler ce qu'ils ne disent pas, résultat, leur "getting started" aboutit pour moi à un gros fail, et c'est pas faute de creuser...
Si quelqu'un veut bien prendre le temps de comparer vite fait leurs instructions et le projet-demo qu'ils proposent pour me confirmer que t'es pas "started" du tout après avoir suivi leurs instructions : https://www.kitql.dev/docs

Edit : après avoir contacté le dev, il me confirme que sa doc est trouée ! iI me propose gentiment de le contacter sur Discord, sympa ! mais je pense que je vais utiliser apollo en fait...

**Captain_Cowkill** · 29/04/2023, 16h48

Oui, Apollo c'est très bien. Bon leur doc est pas ouf mais ça donne déjà des bases (des toutes petites bases).

**mellifico** · 01/05/2023, 18h07

rholalalalalala que ce soit apollo, genql ou bien houdini, c'est un casse-tête abominable, j'abandonne.

**tenshu** · 01/05/2023, 20h40

Honnêtement tu as commencé à râler sur le typage de Typescript donc je pense que c'est pas tant les outils qui pêchent que tes connaissances de bases sur le langage.
Ptêtre un bon coup d'apprentissage et de pratique en plus à ce sujet pourrait faire le truc.

**mellifico** · 01/05/2023, 21h19

Oui, c'est vrai, tu as raison, en fait, j'ai juste visé un peu haut pour commencer...et j'ai fait un ptit burnout. Bref je m'y suis remis quand même, et je fais juste des petites interfaces toutes mignonnes uniquement pour quelques données et ça va beaucoup mieux !

**deathdigger** · 02/05/2023, 09h15

Envoyé par Captain_Cowkill

C'est toujours ça avec TypeScript : au début tu le hais parce qu'il passe son temps à te casser les noix, et après tu ne te verras plus coder sans.

Orhin a bien résumé.

Y'a quand même toujours des trucs très casse-couilles.
Pour ma part, le côté rxjs avec le côté asynchrone tout ça est très compliqué à gérer/comprendre. Par contre, j'ai horreur des langages non typés

**Orhin** · 02/05/2023, 10h10

Envoyé par deathdigger

Pour ma part, le côté rxjs avec le côté asynchrone tout ça est très compliqué à gérer/comprendre.

Ouais mais ça c'est pas lié à Typescript.
La librairie s'utilise de la même façon en Javascript et de façon assez similaire dans sa version Java.

**GrandFather** · 02/05/2023, 12h07

Décidément, TypeScript je n'arrive pas à m'y faire. Je vois bien l'intérêt, notamment quand on manipule des structures de données complexes, mais ça me rappelle un peu trop - et c'est pas un bon souvenir - les combines à base de pré-processeur et de sucre syntaxique pour transformer le C en pseudo langage objet... Je trouve que le rapport verbosité/sécurité n'est pas en sa faveur, mais c'est un avis que je sais minoritaire, et que je peux me permettre d'avoir dans mon contexte métier particulier.

**deathdigger** · 02/05/2023, 13h57

C'est quand même mieux que tout se taper à la main en mode js ou entre les deux non-optimisés en mode js+jquery (qui était très bien quand il est sorti mais qui n'est plus trop performant).

**GrandFather** · 02/05/2023, 14h14

Ca dépend de ce que tu appelles "tout se taper à la main". J'écris des clients JS avec Vue 3 pour attaquer des API et la logique métier est principalement côté back-end, du coup du JS j'en écris pas tant que ça...

**Dross** · 02/05/2023, 23h57

Avoir des interfaces modélisant les API c'est utile aussi : ça permet de détecter quand ça change, gérer des versions multiples sans en perdre son latin, etc.

Perso juste pour l'autocomplete je ne saurai plus me passer de TS.

**raaaahman** · 05/05/2023, 11h05

D'ailleurs, certains d'entre vous utilisent tRPC?

C'est sur la partie communication avec les APIs où TypeScript m'embête le plus. En ce moment j'utilise des schémas Zod avec son inférence de types bien pratique, mais je l'utilise "à l'envers" du coup: je parse les données reçues de l'API, alors que je connais déjà leur modèle, pour "rassurer" TypeScript. A l'inverse, je n'ai pas besoin de les parser à l'envoi (sauf si elles viennent d'un formulaire, bien sûr), puisque l'utilisation de types dans mon code me garanti qu'elles sont formatées convenablement.

EDIT: Pour ceux qui veulent aller "un peu" plus loin en TypeScript:

EDIT²: Plus progressif, et dans la langue de Yann Le Cun: https://www.codeheroes.fr/2023/05/05...tion-de-types/

**Awake** · 15/05/2023, 15h55

Hello, petite question TS justement, comme il y a des gens expérimentés dans le coin.

Imaginons que j'ai les types suivants :

Code:

export type DiceRollerItems = Array<DiceRollerItemDice | DiceRollerItemNumber>;

export interface DiceRollerItem {
  type: DiceRollerItemType;
  operator?: DiceRollerOperator;
}

export interface DiceRollerItemDice extends DiceRollerItem {
  count: number;
  dimension: DiceDimension;
  func?: DiceRollFunction;
}

export interface DiceRollerItemNumber extends DiceRollerItem {
  value: number;
}

Comment, dans l'utilisation du type DiceRollerItem, puis-je indiquer si il fait parti du type DiceRollerItemDice ou DiceRollerItemNumber pour tout un bloc sans déclarer une nouvelle variable ?

En gros, à l'heure actuelle, je fais :

Code:

      if (item.type === DiceRollerItemType.Dice) {
        const dice: DiceRollerItemDice = item as DiceRollerItemDice;
        // ....
      }

Ou, dans le cas d'un accès ponctuel, en castant sur place :

Code:

(item as DiceRollerItemDice).dimension = 20;

Mais je cherche en gros à faire :

Code:

with (item as DiceRollerItemDice) {
    item.dimension = 20;
}

Donc sans avoir besoin de redéclarer quoi que ce soit.

Est-ce que c'est possible ?

**Orhin** · 15/05/2023, 16h14

Oui c'est possible.

Code:

export type DiceRollerItem = DiceRollerItemDice | DiceRollerItemNumber 

export interface BaseDiceRollerItem {
  type: DiceRollerItem
  operator?: DiceRollerItemType
}

export interface DiceRollerItemDice extends BaseDiceRollerItem {
  readonly type: DiceRollerItemType.Dice
  count: number
  dimension: DiceDimension
  func?: DiceRollFunction
}

export interface DiceRollerItemNumber extends BaseDiceRollerItem {
  readonly type: DiceRollerItemType.Number
  value: number
}

Normalement avec ça, dans ton bloc if tu n'auras plus besoin du type casting.

Code:

if (item.type === DiceRollerItemType.Dice) {
        item.dimension = ... // pas d'erreur ici
}

**Awake** · 15/05/2023, 16h32

Merci ça marche nickel

.

Je n'avais jamais pensé à utiliser la valeur d'un enum comme type.

**Orhin** · 15/05/2023, 16h35

Techniquement tu peux t'en tirer de d'autres façon, mais c'est la plus propre.

Genre :

Code:

if ('dimension' in item) {
        item.dimension = ... // pas d'erreur ici
}

ça fonctionne car ça va restreindre le type de "item" à tous les sous-types qui possèdent bien un champs "dimension".

**Awake** · 15/05/2023, 21h51

Oui autant utiliser la méthode propre puisque j'ai le choix

Depuis que j'ai mis en place typescript-eslint et une politique 0 any, la qualité de mon code a vraiment fait un bon en avant.

**Captain_Cowkill** · 16/05/2023, 11h02

Envoyé par Orhin

Oui c'est possible.

Code:

export type DiceRollerItem = DiceRollerItemDice | DiceRollerItemNumber 

export interface BaseDiceRollerItem {
  type: DiceRollerItem
  operator?: DiceRollerItemType
}

export interface DiceRollerItemDice extends BaseDiceRollerItem {
  readonly type: DiceRollerItemType.Dice
  count: number
  dimension: DiceDimension
  func?: DiceRollFunction
}

export interface DiceRollerItemNumber extends BaseDiceRollerItem {
  readonly type: DiceRollerItemType.Number
  value: number
}

Normalement avec ça, dans ton bloc if tu n'auras plus besoin du type casting.

Code:

if (item.type === DiceRollerItemType.Dice) {
        item.dimension = ... // pas d'erreur ici
}

Malin

Discussion: Design & Développement web - Le topic des canards qui mangent des cookies

Outils de la discussion

Règles de messages