Mon passage sous eCharts
Thursday 25th November 2021
Je suis passé récemment sous Apache eCharts, et j’ai eu quelques petits problèmes.
Je suis passé récemment sous Apache eCharts, et j’ai eu quelques petits problèmes.
Si vous voulez que votre site soit compatible dans un iframe, mais que ça soit juste si le parent présente la bibliothèque iframe-resizer, il y a une solution assez simple :
En JavaScript vanilla :
<script>
window.addEventListener('message', e => {
if (
String(e.data).startsWith('[iFrameSizer]') &&
!document.body.classList.contains('into-container')
) {
var script = document.createElement('script');
script.src = '**CHEMIN À CHANGER**/iframeResizer.contentWindow.min.js';
document.head.appendChild(script);
document.body.classList.add('into-container');
}
});
</script>
En TypeScript :
window.addEventListener('message', (e: MessageEvent) => {
if (
String(e.data).startsWith('[iFrameSizer]') &&
!document.body.classList.contains('into-container')
) {
var script = document.createElement('script');
script.src = '**CHEMIN À CHANGER**/iframeResizer.contentWindow.min.js';
document.head.appendChild(script);
document.body.classList.add('into-container');
}
});
Note la classe “into-container” permet de changer le CSS de la page pour l'adapter au changement de mode.
Il est possible de débugger en JS la valeur de tout élément en remplaçant cette valeur par un getter et un setter de la façon suivante :
inputElement._value = inputElement.value;
Object.defineProperty(inputElement, 'value', {
get: function () {
return this._value;
},
set: function (p) {
this._value = p;
}
});
Après un peu plus d'un mois, j'ai fini par sortir une version de ma petite bibliothèque sur GitHub. J'ai surtout accès mon projet sur les besoins sur celui d'un projet. Maintenant, je compte l'intégré sur ce site même, donc je vais maintenant plus me concentrer sur la partie DOM. Celle du formatage, je m'en sers assez peu à titre perso, même si elle est pratique pour le framework qui m'a eu donner l'idée de me lancer. D'ailleurs grand nombre de retours se sont produits lors de l'intégration : « ça marche pas avec », « j'ai besoin de ça », etc. C'est dur de penser à tous les cas.
Pour ce qui est du support, j'ai vu ce que ça donnait avec IE 8 et 9, et j'ai pas le courage de m'arracher les cheveux pour eux. D'ailleurs, pour ce site, le support est IE10 minimum depuis pas mal de temps. Je ne jalouse pas ceux qui doivent travailler avec ces dinosaures.
Pour conclure, voilà où trouver la version : BakuJS.
Le projet est sous licence libre (MIT), donc tout aide sera la bienvenue, quelque soit sa forme.
Ça va faire deux semaines que je me suis vraiment lancé sur ma petite bibliothèque JS et j'ai presque tout réécrit, en grande partie à cause d'erreurs de conception. J'avais fait quelques tests, un peu à l'arrache (en live dans la console), et je n'avais jamais rencontré de problème. Puis pour être certains que ça fonctionne, j'ai commencé à écrire une batterie de tests, et à chaque fois c'était « si je vais ceci, ça doit donner cela » et je lance mon test. C'est avec stupeur que certains ne fonctionnaient pas. Donc je me suis lancé sur la recherche de toute les cas tordus avec le résultat escompté et je suis parti à la chasse aux bugs. En fait, cette technique de débogage, je la connais. C'est du TDD. On commence par écrire un test qui ne fonctionne pas, et on fait en sorte que le code le fasse marcher. Dans mon cas, il y a aussi tous les autres tests qui fonctionnaient déjà.
Je me rends compte que je n'ai pas tellement le temps de faire de genre de choses au boulot et c'est dur à prendre en main. J'ai du passé autant de temps à écrire mes tests qu'à faire les corrections pour qu'ils passent. Pour être franc, c'est un peu long et chiant, mais une fois que j'ai les tests, ça devient facile de détecter la moindre variance dans le code. Il en reste que ce n'est pas simple de penser à tout, je suis certain qu'il y a une kyrielle de cas oubliés.
Bref, c'est donc partiellement mis en application pour BakuJS. J'essaie méthode par méthode d'étoffer les tests. J'ai aussi pris un petit temps pour écrire la doc. C'est également un bon moyen de relire son code. Pour l'instant, c'est tout en français. Dès que j'ai le courage, je la fais en anglais et je passe également mes commentaires de code en anglais... sauf si quelqu'un veut m'aider. J'en serais ravi.
Suite à un petit problème de licence, en fait du code sans licence n'est techniquement pas utilisable ou éditable. Pour pallier à ce petit problème, j'ai commencé à diffuser une partie du code présenté ici sur GitHub, avec une licence MIT.
Mon premier projet sur Github concerne les extensions Js par prototypage sur les objets de base : String, Number, Date. Comme, en ce comment, je bosse assez souvent sur du formatage JS au boulot, et que j'avais remarqué que j'en avais aussi un peu dans le code de mon site, j'ai repris l'idée et j'ai essayé d'aller plus loin pour rendre ça quasiment transparent à l'utilisation. Bref, c'est plus pour pallier certains manques qu'un véritable framework, du moins pour l'instant.
Le dépôt est ici : https://github.com/Zefling/BakuJS
J'ai même corrigé du code que j'avais proposé. Sous peu, je devrais aussi publier les tests qui vont avec. Je vais probablement y pousser d'autres idées sur ce dépôt ou un autre. À terme, ça sera peut-être le code entier de ce site.
Édit 19/01 : changement de nom et de licence. Je n'avais pas fait attention ExtJS est déjà utiliser par un module de Sencha et la licence GPL est un peu chiant pour un projet JS comme celui-ci. Pour information le nom Baku vient d'une créature fantastique japonaise.
Comme j'ai passé un peu de temps à comprendre comment fonctionne le drag'n drop (ou glisser-déposer en français), et que j'ai perdu pas mal de temps parce que ça ne fonctionne pas du tout sur les flexboxes... En fait, j'ai bien failli abandonné jusqu'à ce que je me rende compte du souci. Bref, je suis donc parti sur une liste d’éléments en inline-block que j'ai voulu trier moi-même avec l'API native de HTML5, donc sans se servir d'un framework bien lourd comme Jquery. Je ne dis pas que Jquery c'est mal, mais on peut s'en passer, mais forcement, on perd toutes ses facilitées. De plus, j'aime parfois comprendre comment ça fonctionne dernière :
La programmation JavaScript permet de faire certaines choses, vu que les objets en tant que tels (comme en Java par exemple) n'existent pas vraiment (du moins, pas pour l'instant), mais il est toujours possible d’étendre un objet sans toucher à celui d'origine. Un peu comme un « extends + override », mais sur l'objet en mémoire. C'est très utile quand on utilise un framework, mais qu'on ne veut pas toucher au cœur de celui-ci (pour faire des mises à jour plus facilement).
Pour un petit projet en JavaScript, j'ai eu besoin du numéro de semaine. Par flemme, je suis allé sur Stack Overflow dans l'espoir d'avoir une réponse. Il y en a, en nombre avec des solutions plus ou moins complexe... complexe, mais visiblement pas testé. Je me suis donc mis à écrire ma propre solution... où j'ai eu besoin du numéro de jour dans l'année. Et j'ai eu le même problème, des solutions non testées.