#Outils Web

Codeanywhere, c’était mon éditeur de code que j’aimais d’amour.
Celui qui me laissait ouvrir un fichier sur un serveur FTP, le corriger, enregistrer, et voir le site bouger dans la foulée.

Je l’utilisais depuis 2013. J’en parlais déjà ici : Avec quoi je code ?
Treize ans de lune de miel.

Puis le support de la version que j’utilisais s’est arrêté.
Ça faisait déjà quelques années que le support me renouvelait mon compte manuellement, en me prévenant que, si ça se trouve, ça ne tiendrait que quelques mois.
Ça a tenu plusieurs années.

Mais au milieu de l’été, ça s’est arrêté pour de vrai.
En plein développement de Ets-Allio.fr.

La chiasse.

J’ai cherché, j’ai cherché, j’ai trouvé des trucs surement mieux, mais plus compliqués. Rien qui ne correspondait à mon utilisation.

Aujourd’hui, tout passe par des conteneurs, des repos GitHub, des pipelines, des environnements qui se montent et se démontent surement. Je n’utilise pas les notices de meubles Ikea.
C’est surement propre. Surement carré. Surement pro.

Mais c’est chiant. Et ce n’est pas ma façon de coder.

Tout ce que je veux c’est l’inverse.
DU SIMPLE.
Ouvrir un fichier, le modifier, enregistrer. Fin de la partie.
Ctrl + O, tiptiptip, Ctrl + S, Alt + F4. Mic drop.

Et tout ça,… directement en prod !

Pas de build, pas de branche à merger pour corriger une virgule, pas d’usine à gaz.

Rajouter ce putain de point virgule oublié ne mérite pas un pipeline de prod.

Le cahier des charges tenait en 2 mots.

Refaire Codeanywhere.

Avec toutes les fonctions que j’utilisais déjà au quotidien.
Plus celles que j’aurais aimé y trouver.

C’est tout.
En réfléchissant, c’est déjà beaucoup.

J’avais le NDD qyu.re qui dormait dans ma collection de noms de domaine.
(Oui, j’en collectionne. Non, je ne me soigne pas.)
Autant lui donner un vrai boulot plutôt que de le laisser prendre la poussière.

J’avais aussi en candidat partir.la, mais ça aurait été con de le cramer là-dessus.
Il mérite peut-être mieux qu’une arborescence de fichiers et du texte en monotype.

Ce que fait l’outil, la liste complète (?)

Connexion et comptes

• Coffre de serveurs FTP / FTPS, mots de passe chiffrés.
• Multi-utilisateurs, avec partage d’accès révocable (lecture seule ou écriture).
  Ça, c’est une fonction qui manquait sur Codeanywhere. Ici j’ajoute un serveur, et je peux le partager avec Lionel, ou Laure, ou n’importe qui qui bosse avec moi sur un projet, sans avoir à partager les identifiants.
• Relais HTTPS pour les serveurs qu’on ne peut pas joindre en direct, et un diagnostic de connexion intégré (Qyu.re est hébergé sur O2switch qui ne veut pas communiquer en FTP avec OVH).

Éditer

• Arborescence, onglets multi-fichiers, plusieurs serveurs ouverts en même temps.
  Les onglets, c’est la vie. #team+50
• Coloration syntaxique (HTML, CSS, JS, PHP, SQL, logs) et autocomplétion.
• Recherche / remplacement dans les fichiers ouverts ou sur tout un dossier, arborescence de dossier ou tout le serveur.
• Beautify / Minify.
• Validation de la syntaxe avant d’enregistrer.
  J’aimais Codeanywhere justement car tu pouvais rajouter ton point-virgule qui manquait dès la première erreur 500.
  Maintenant, je n’ai même plus l’occasion d’oublier ce point-virgule ou cette accolade fermante imbriquée dans une cascade de 9.
• Conversion d’encodage et de fins de ligne, édition des fichiers non-UTF-8.
• Thème clair / sombre, panneaux redimensionnables, position du curseur mémorisée.

Gérer les fichiers

• Uploader, télécharger, dupliquer, déplacer, zipper, dézipper, corbeille.
  La corbeille. Sur ton serveur de prod, … Que celui qui n’en a jamais rêvé… comprenne qu’il est surement tout à fait normal comparé à moi.
  Et oui, tout ça pour un fichier ou un dossier (et ses sous-dossiers).
• chmod (une case à cocher à la FileZilla, pas un chiffre à retenir), usage disque, propriétés.
• Lecture de la fin des gros logs et suivi en direct (tail -f).

Voir

• Aperçu des images + zoom + compression.
  Même plus besoin de télécharger une image, de la passer sur TinyPNG et de la réuploader. Un bouton et le panda vient directement te faire ça à domicile sur ton serveur.
• CSV en mode texte ou tableur.
  Pareil, tu bosses sur ton CSV en prod, on est pas là pour faire semblant.
• SVG éditable en code avec visualisation des modifs en direct.
  Qui d’autre édite ses SVG en code par ici ?

Travailler à plusieurs

• Révisions : chaque enregistrement est archivé, avec diff et restauration.
  Ça, je l’utilisais pas mal sur Codeanywhere. On pouvait d’ailleurs s’en servir comme une « poubelle », si tu supprimais un fichier, tu en recréais un au même endroit avec le même nom et tu pouvais retrouver son contenu via la révision.
• Présence en temps réel et journal d’activité : qui édite quoi, en ce moment.
  Ça évite qu’on écrase un fichier qu’un autre est en train d’éditer.

Les trucs plus récents

Chaud comme je suis, j’ai encore rajouté des trucs suivant mes besoins et je vais continuer à le faire.

• Serveur MCP.
  Mon IA peut éditer les fichiers à ma place, avec des droits bornés : un seul serveur, voire un seul dossier, en lecture seule si je veux.
• Upload de photo en masse.
  J’ai eu besoin de scanner un livre. Long. Chiant.
  Donc j’ai rajouté une fonction dans Qyu.re pour le faire.
  Je mitraille avec le téléphone, les photos partent direct sur le serveur, sans jamais être enregistrées dans la pellicule, métadonnées EXIF supprimées, et redimensionnées au passage.

Et le plus beau dans tout ça :

Je n’ai pas écrit une ligne de code

Tout est vibecodé.
Avec Claude.

Je dis ce que je veux.
Claude fait.
Je teste, je râle, il refait, je valide.

Voilà

Ce n’est pas à vendre, c’est juste l’outil dont j’ai besoin, et qui me sert tous les jours.

Si vous en avez besoin, je vous crée un compte, ou vous file le code.

Codeanywhere je l’aimais d’amour.
Qyu.re Faisons des enfants.

Cela va faire maintenant 20 ans (!?) que j’utilise une technique anti-spam que je trouve miraculeuse.
Elle est pourtant SI SIMPLE que je me demande encore tout le temps pourquoi elle n’est pas universelle…

Mais si elle était universelle, elle ne fonctionnerait simplement plus.

Je protège tous mes formulaires de contact avec cette technique depuis donc de très nombreuses années.

La technique se base facilement sur le fait que les robots spammeurs veulent remplir tous les champs de votre formulaire.

J’ajoute donc un champ URL dans mon formulaire et je le cache en CSS.

<style>
    #monform input[type=url]{display:none}
</style>
 
<input id="url" name="url" type="url">

 

Et en récupérant mon formulaire, je vérifie si le champ URL est rempli.
S’il l’est, c’est que ce n’est pas un humain qui a rempli le formulaire (sinon, il n’aurait pas vu le champ).
Et donc ça dégage.

<?php

// Tu recup tes variables et leur fait un petit traitement de sécurité au besoin ici

$message = $_GET['m'];
$email = $_GET['e'];
[…]
$url = $_GET['u'];


// Tu t'assures que tous les champs requis sont là et surtout que le champ URL est vide
// C'est le empty($url) qui est important ici

if (isset($message) && isset($email) […] && empty($url)) {
    // Tu fais tes expéditions d'email comme tu le veux (Perso, je passe par l'API Mailjet)
    […]
    // Important, si tu envoies une confirmation de réception à l'expéditeur, n'envoies pas le message d'origine
    // Les spammeurs pourraient utiliser ton accusé de réception pour faire passer leurs SPAM.
}

// Et si le champ URL est rempli, tu réponds à l'expéditeur d'aller se faire voir dans d'autres contrés.
elseif (isset($url)) {
    echo '<center><img src="https://pbs.twimg.com/media/CNzgBseWwAQ90Nw.png:large" alt="Hahaha"/><br>Please bitch</center>';
}


?>

Remerciez Xakan pour sa demande.

Comme je l’avais déjà dit il y a deux ans Mandrill, qui est notre serveur d’expédition d’email, nous a déjà bien sauvé le cul avec une attaque de spammeurs qui se servent de la création de compte sur notre Magento pour envoyer du SPAM à la terre entière.
Un truc sur lequel on serait sans défenses sans Mandrill et sa possibilité de filtrer les emails sortant au niveau du serveur d’envoi.

La semaine passée, je me suis penché sur un problème qui nous pendait au nez depuis le début de l’année.

Depuis le début de l’année, Mandrill nous alertait sur la réputation email de notre domaine qui était en chute lente, mais continue. D’autres chats à fouetter, je ne m’étais jamais penché sur le problème.

Mais la semaine dernière avec le confinement, on s’est retrouvé sous une avalanche de commande (générant des emails par notre site) et nous derrière qui expédiions également des emails à chaque commande pour demander aux clients s’ils avaient bien lu le message indiquant que nous n’expédions plus rien (SPOILER ALERT : Pour les 2/3, non ils ne l’avaient pas lu), et la limite horaire imposée par Mandrill suite à la baisse de la réputation de notre domaine de plus en plus pourrave, ne suffisait plus.

J’ai donc pris le temps de demander des explications à Mandrill, car à mes yeux, on avait le cul propre.
Nous bloquions déjà toutes les tentatives de SPAM.

Après quelques minutes seulement (service client au top top top), ils m’ont répondu, que notre domaine envoyait quand même des SPAM, avec des exemples à la clé.

En effet, notre formulaire de contact nous envoyait des SPAM. À nous.
Notre domaine nous envoyait bien des emails de SPAM pourris incontestablement.
Nous ne les signalions jamais en SPAM (on n’est pas si con, même si j’ai des doutes sur certains), mais les analyseurs de mails notaient bien que notre nom de domaine envoyait des emails avec des liens vers du pr0n ou du v14gr4.

Je ne voulais pas me résigner à installer un Captcha. 
Nos clients ont déjà du mal à remplir comme il le faut leur code postal ou leur numéro de téléphone (true story) alors leur demander de recopier des caractères dégradés, ou de cliquer sur des images de voitures ou de bus, c’est impensable !

Autres soucis, notre Magento étant devenu avec le temps tellement instable, qu’il est hors de question d’installer des plugins tiers.
Bon en vrai, il n’est pas instable, il est vitrifié pour garder sa stabilité.

Bon, le problème était clos il n’y avait rien à faire. J’ai passé une nuit à pleurer.

Puis, REVELATION !

Je serais incapable de dire d’où elle est venue, mais je me suis souvenu qu’il était possible d’activer ou de désactiver le formulaire de contact.

Car oui, c’est bien lui qu’il faut désactiver, car les spammeurs pointent leurs robots directement sur le moteur d’envoi, et ne visitent aucunes pages. (J’avais déjà tenté un truc sur cette caractéristique avec Cloudflare, mais sans succès)

Une fois désactivé, j’ai fait moi-même mon petit formulaire et son script d’expé d’email à la main.

J’y ai ajouté deux antispam :

• Un bête et méchant de ma fabrication

Dans le formulaire j’ajoute un champ URL, que je cache en CSS.
Les robots spammeurs aiment être exhaustifs. Ils remplissent tous les champs des formulaires. Alors pensez-y, un champ nommé URL !
Donc dans mon script si le champ URL est renseigné, c’est à coup sûr du spam.
Essayez, c’est redoutable, et ça fait plus de 10 ans que j’applique cette technique un peu partout.

• Akismet à la rescousse

Pour les plus malins qui visent spécifiquement des Magento, qui savent que ce champ n’existe pas et qui font naviguer leur robot, j’ai rajouté une couche avec l’antispam de WordPress.
Je suis passé par la libraire/function Fuspam en php pour accéder à l’API Akismet.

Pour les messages qui restent coincé dans ce filet, j’enregistre sur le serveur le message et envoie un email neutre à notre adresse indiquant qu’il faut aller vérifier.
J’ai aussi fait une page pour visualiser et supprimer tout d’un coup.

Et pour les messages qui ne passent pas le premier test de l’URL vide, je les déclare tout de suite comme SPAM à Akismet.

Si vous voulez, vous aussi, ce script de formulaire, n’hésitez pas à me le demander.