L’homme qui hululait à l’oreille des formulaires – 24 jours de web

En résumé

  • Contrôler la validité des champs avec trop d’enthousiasme : difficile de prendre en compte les spécificités de tout le monde...
  • Abuser de la validation côté client : éviter les situations bloquantes.
  • Imposer des contraintes fantaisistes sur les mots de passe : privilégier la longueur des mots de passe plutôt que leur complexité.
  • Obliger l’internaute à nettoyer lui-même ses données : privilégier le nettoyage côté serveur avant stockage.
  • Confondre les attributs labels et placeholder : label = nom du champ, placeholder = exemple de saisie
  • Recueillir des informations non-conformes : Moins on recueille d’informations sur l’utilisateur, mieux tout le monde se porte.
  • Obliger à utiliser la souris pour saisir des mots de passe
  • Ré-inventer des composants de formulaire : accessibilité ? compatibilité ? javascript bloqué ?
  • Reporter la complexité du processus sur l’utilisateur·ice : ex, les mini formulaires enchainés. Solution: proposer une alternative

SQLite as a document database

OMAGAD: SQlite peut gérer les données JSON ?!

Oufti !

The benefit here is you can start off with a table which could be as simple as just a single JSON column, and add columns and indexes as you find useful data in that JSON. For example this can work really well for webhooks, insert all the data you are sent straight into a table, then pull out the useful stuff later. Have fun.

Merci Seb !

GitHub - josephernest/void: Void is a blogging platform.

MMMouaip... Oui, c'est minimaliste, mais ce n'est pas un CMS: il ne permet pas du tout de gérer le contenu, il se contente de mettre en HTML des fichiers txt écrits en MD et collés sur le serveur via FTP...

En gros, c'est un simple script php qui liste le contenu d'un dossier à l'aide d'un glob, parse le contenu à la recherche de balises normailsées (author etc) et génère le HTML à l'aide de la lib parsedown.

Alors, ce n'est pas pour autant que c'est nul, hein: c'est simple et uber minimaliste, en effet... C'est bien que ça existe.

Mais ce n'est pas un CMS, on ne peut RIEN gérer sans accès FTP, on ne peut pas utiliser de plugins, de configuration etc...

Via https://valentin.tomasso.fr/liens/


Le code du lundi: pix version 2020

Dans une volonté de mettre un peu d'ordre sur un serveur qui n'a rien à envier à la chambre de ma fille en matière d'entropie, je relocalise certains bouts de code tout en les dépoussiérant un peu...

Aujourd'hui, j'ai repris un peu pix, le placeholder codé au tout début du jurassique...

Pour faire simple,

il s'agit d'une api permettant de récupérer une image unie d'une certaine taille et d'une certaine couleur en guise de placeholder.

  • w,h; largeur et hauteur
  • c: la couleur au format FFF ou FFFFFF (si on ne la précise pas, la couleur sera randomisée)
  • t: un texte qui sera placé au centre. S'il est omis, ce sera la taille de l'image qui sera ajoutée

image 150x150 couleur au hasard

api.warriordudimanche.net/pix/?w=150&h=150

image 256x128 couleur rouge

api.warriordudimanche.net/pix/?w=256&h=128&c=f00

Git is simply too hard |> Changelog - Liens en vrac de sebsauvage

Alors: +1, +1... heu +1 et ... +1 «Tout ces outils, cumulés, finissent par imposer aux développeurs une charge mentale énorme sur la partie technique avant même de pouvoir commencer à produire du code, avant même de commencer à travailler concrètement sur le problème initial à résoudre.»

et en plus, tout le temps passé à utiliser des frameworks qui mâchent le travail peuvent empêcher de comprendre comment les choses fonctionnent...

Le code du dimanche: Iconeleon

Comme je le disais dans le billet précédent à propos de SVGBox, l'idée était bonne mais le poids était rédhibitoire.

Pourtant, ça peut être sympa d'avoir un catalogue d'icônes prêtes à servir et dont on puisse altérer la couleur, sans compter que ce serait une bonne alternative aux webfonts tout en étant plus accessible.

Donc, j'ai récupéré le pack d'icônes de fontAwesome et j'ai bidouillé une API qui permette de faire la même chose que SVGBox.net, à savoir obtenir une icône svg dans la couleur que l'on souhaite.

Par exemple:

api.warriordudimanche.net/iconeleon/?i=headphones donne:

et si on ajoute le paramètre c on peut changer la couleur: api.warriordudimanche.net/iconeleon/?i=headphones&c=red

La couleur peut-être au format HTML, un nom de couleur css ou un rgba quelconque...

api.warriordudimanche.net/iconeleon/?i=headphones&c=rgba(255,0,255,0.5)

Comme pour fancytation

Toute icône modifiée est sauvegardée en cache pour éviter une surcharge du serveur

  • help: affiche une aide
  • iconlist: renvoie la liste des icones au format json
  • search=string: renvoie le résultat de la recherche au format json
  • download: permet de télécharger le script php de l'api
  • Et en plus

    Je vous ai ajouté un frontend minimaliste pour rechercher les icones dans les 1615 du pack.

    liens

    Voilà

    Du coup, si ça peut être utile, n'hésitez pas à vous servir voire à proposer un frontend plus... comment dire ? abouti ?

    La programmation fonctionnelle démystifiée : pourquoi et comment ?

    TROLL INSIDE

    Wow, la programmation fonctionnelle revient à la mode pour plein de raisons...

    Donc, après avoir poussé au cul pour adopter la POO qu'est trop bien que les frameworks c'est le top pis toussa, on revient en arrière en utilisant les arguments de l'époque où on défendait la PF.

    On remballe du vieux pour faire du neuf révolutionnaire: on se croirait dans l'éducation nationale, mon gars !

    Why SQLite Does Not Use Git

    xkcd-git.gif

    Omagad, c'est tellement ça !

    The mental model for Git is needlessly complex Git provides a poor user experience

    Ha ! Je ne suis pas tout seul... Pour moi, GIT c'est de la magie: peu intuitif, impossible à mémoriser, tu comprends pas quand ça merde, tu comprends pas pourquoi ça marche...

    Via https://sebsauvage.net/links/

    Astuce Javascript+html: Avoir un comportement normal sur le drop avec Firefox

    Note pour la prochaine fois que je voudrai faire un drag & drop de fichiers sur Firefox

    Comme découvert grâce à ArthurHoaro, pour obliger le navigateur à gérer le drop de fichier sur une dropzone, il faut d'abord faire un preventDefault() sur les événements dragover et/ou dragenter.

    solution N°1

    On peut le faire en dur dans le HTML:

    <div ondragover="return false">
    <div ondragover="event.preventDefault()">

    Ce qui peut même servir pour le ciblage du drop avec un sélecteur genre *[ondragover]

    Solution N°2

    On peut bien entendu également le définir directement dans le js:

    document.getElementById("body").addEventListener("drop",function(e){
            console.log(e);
            e.preventDefault();
            e.stopPropagation();
    })
    document.getElementById("body").addEventListener("dragover",function(e){
            e.preventDefault();
            e.stopPropagation();
    })
    document.getElementById("body").addEventListener("dragenter",function(e){
            e.preventDefault();
            e.stopPropagation();
    })

    Je sers la programmation et c est ma joie   (1).jpg

    Sources:

    Astuce Javascript+html: confirmer lors d'un clic sur un lien

    Je partage une petit truc vraiment tout con que je viens de tester pour une de mes applis de boulot.

    J'avais besoin de confirmer vite fait et sans prise de tête le clic sur un lien «supprimer»: j'ai opté pour l'utilisation d'un attribut «confirm» et d'un bout de JS qui va bien.

    Le code ci-dessous utilise ma petite betalib VanillaJS perso (http://cdn.warriordudimanche.net/VanillaJS.js) parce que j'avais la flemme de récrire la partie ciblage et foreach, mais vous aurez pigé le concept (c'est vraiment tout con)

    HTML

    <a href="http://www.warriordudimanche.net/?delete" confirm="true">Delete</a>

    JS

    on('click','a[confirm]',function(e){
            // La partie à mettre dans un évènement click
        e.stopPropagation();
        if (!confirm("Etes-vous certain ?")){
            e.preventDefault();
            return false;
        }
    });

    L'avantage, c'est qu'il suffit de coller l'attribut «confirm» sur un lien pour qu'il ne soit activé qu'en cas de confirmation.

    Fil RSS des articles