Techno-magis

プログラミング

Intégration conditionnelle de iFrameResizer

2021年11月25日(木曜日)

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.

記事にコメントする...

Base 64 sur NativeScript

2020年2月4日(火曜日)

Il est possible d'utiliser Base64 avec Nativescript sans passer par un package, en utilisant directement celui du système :

コード:

    // for Android
 
    base64Encode(string: string): string {
        const text = new java.lang.String(string);
        const data = text.getBytes('UTF-8');
        return String.fromCharCode(...Array.from(android.util.Base64.encode(data, android.util.Base64.DEFAULT));
    }
 
    base64Decode(string: string): string {
        const text = new java.lang.String(string);
        const data = text.getBytes('UTF-8');
        return String.fromCharCode(...Array.from(android.util.Base64.decode(data, android.util.Base64.DEFAULT)));
    }


コード:

    //iOS
 
    base64Encode(string: string): string {
        const text = NSString.stringWithString(string);
        const data = text.dataUsingEncoding(NSUTF8StringEncoding);
        const base64 = data.base64EncodedStringWithOptions(0);
        return base64;
    }
 
    base64Decode(string: string): string {
        const decodedData = NSData.alloc().initWithBase64EncodedStringOptions(string, 0);
        const decodedString = NSString.alloc().initWithDataEncoding(decodedData, NSUTF8StringEncoding);
        return `${decodedString}`;
    }

記事にコメントする...

Astuce JavaScript : getter/setter sur un input

2018年7月17日(火曜日)

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;
	}
});

記事にコメントする...
カテゴリ:
Zéflingによって、 2018/07/17 14:00:28
198回を読んだ。0件のコメントが投稿されています。

Copies de sources sur Git

2016年11月20日(日曜日)

Depuis quelque temps, j'essaie de retrouver les sources de projets pour les publiés sur mon Gitlab. C'est surtout pour archivage, certaines choses sont abandonnées depuis belle lurette ou inutilisables en l'état. De plus, je ne peux pas attribuer de licence à des projets que je n'ai pas réalisés seul... En fait, si à 99% pour le code, mais étant des TP universitaires, je ne sais pas s'il me faut l'accord de la personne avec qui jamais ne fait le projet (qui franchement n'avait rien foutu ou presque pour la partie code). J'ai aussi posté toutes les sources de classes ou petits projets que j'avais postées au fur et à mesure sur ce blog. Je compte continuer à mettre à disposition des sources, car cela me permet aussi de les retrouver plus facilement et d'en faire profiter d'autres qui peuvent plus simplement les récupérer ou s'en inspirer sans s'embêter à récupérer les sources pour savoir si c'est vraiment intéressant.

En tout cas, Gitlab est un outil vraiment intéressant pour la publication personnelle sur son propre serveur, quoiqu'un peu lourd, mais facile à mettre en place. On pourrait me dire que ça fait un peu prendre un char pour tirer sur une mouche vu ce que j'en fais. L'utilisant au boulot, ça me semble plus simple comme ça. Pourquoi pas ailleurs, comme Github ? Ce n'est pas que je n’aime pas Github, je l'utilise souvent, mais je n'aime pas l'idée qu'une seule plateforme concentre la majorité des codes sources du monde. En fait, je n'aime pas la minitélisation du web.

Voici les projets publiques.

記事にコメントする...
カテゴリ:
Zéflingによって、 2016/11/20 23:48:59
241回を読んだ。0件のコメントが投稿されています。

BakuJS : l'importance des tests

2016年1月27日(水曜日)

Ç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.

全記事を読みます...
カテゴリ:
Zéflingによって、 2016/01/27 23:51:55
345回を読んだ。2件のコメントが投稿されています。

Open source & Github

2016年1月16日(土曜日)

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.

記事にコメントする...
カテゴリ:
Zéflingによって、 2016/01/16 10:59:06
234回を読んだ。0件のコメントが投稿されています。

Jquery : show/hide/toggle c'est le mal !

2015年11月15日(日曜日)

De base, je ne suis pas super fan de Jquery. D'ailleurs, je ne l'utilise pas pour mes propres sites, mais il permet une compatibilité multi-navigateur (surtout les anciens) sans se prendre trop la tête.

Je sais que certains trouvent que .show(), .hide() et .toggle(bool) sont bien pratiques, mais ils posent certains problèmes quand on doit appliquer des règles CSS ou le détecter par sélecteur. On se retrouve parfois à passer par des règles bien compliquées pour pas grand-chose. Par exemple, dans ce genre de cas, si l'on veut ajouter une règle CSS pour cacher un élément, on devra nécessairement passer par !important ce qui n'est pas l'idéale :


Exemple repris sur un projet du boulot

Si j'avais une proposition, ça serait de passer par la classe hide. Donc .addClass('hide'), .removeClass('hide') ou .toggleClass('hide', bool).

コード:

.hide {
	display:none;
}

De mon point de vue, cela apporte plusieurs avantages :

  • il n'y a pas de style ajouté directement sur les éléments du DOM (ce qui généralement mal vu),
  • côté CSS : on peut appliquer des règles par dessus sans faire des trucs tordus comme [style*="display"][style*="none"] pour détecter un élément caché par style="display:none",
  • coté Jquery : on peut utiliser des sélecteurs jquery comme .hide ou :not(.hide), car :visible ne fonctionne pas dans tous les cas, par exemple sur un élément entier masqué. De plus, détecter .hideet beaucoup plus rapides que :visible.

Les inconvénients :

  • c'est un peu plus lourd à écrire,
  • les classes sont probablement un peu plus lente que de changer directement le style,
  • ce n’est pas forcement applicable dans le cas de l'animation (et d'un support de navigateur obsolète).

Je note tout de même que l'inconvénient de la lourdeur s'efface parfois par la lourdeur qu'il faut entreprendre pour récupérer les éléments voulus dans certains cas. C'est d'ailleurs à cause de cas répété où j'ai vu des boucles super lourdent pour faire des choses simples que j'en suis venu à me dire qu'il était bien plus simple et propre de passer par la classe hide.

記事にコメントする...
カテゴリ:
Zéflingによって、 2015/11/15 20:56:25
260回を読んだ。0件のコメントが投稿されています。

Trier une liste d’éléments avec le drag'n drop de HTML5

2015年8月15日(土曜日)

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 :

全記事を読みます...

Godot : tuons des « monstres » !!

2015年3月1日(日曜日)

J’ai un peu avancé. La doc est vraiment infecte, j’ai compris certaines choses en regardant certains exemples et quelques bugs.

Ce qu’il y a de plus :

  • Ajout de « monstres » (c’est juste pour tester)
  • Test de collision (pour détecter si une flamme touche/traverse un ennemi)

Pour les touches, ça reste pareil (j'ai oublié de les préciser dans mon article précédent) :

  • Flèches : se diriger
  • [Shift] : courir
  • [<] : tirer (j’ai un problème avec espace et les diagonales)

Ce qui m’a posé problème, c’est comprendre la détection d’entrée dans une zone, mais surtout en sorte de savoir ce que c’est. Je n’ai pas trop l’habitude de ce genre de syntaxe :

コード:

extends Area2D
 
func _on_Pickup_body_enter( body ):
	# si c'est un monstre
	if (body extends preload("Monstre.gd")):
		body.toucher()
 
func _ready():
	# test si le tir touche quelque chose
	connect("body_enter", self, "_on_Pickup_body_enter") 
	set_process(true)
	pass
記事にコメントする...

PHP, MySQL/MariaDB & Unicode 7

2014年9月30日(火曜日)

C’est souvent dans l’urgence que l’on se rend compte qu’une nouveauté ne passe pas. En l’occurrence, j’ai voulu profiter des emoji 😄 fournis par Unicode 7.0 pour éviter de mettre des images à la place des smileys et c’est plus universel, pour le coup. Sauf que je n’avais pas fait attention au fait que ces caractères en UTF-8 sont codés sur 4 octets ce qui dépasse ce qui est prévu de base dans l’interclassement « utf8_unicode_ci » qui n’accepte que l’UTF-8 sur 3 octets maximum. Il faut que les tables et les champs passent en « utf8mb4_unicode_ci ». L’utf8mb4 est là pour préciser que l’UTF-8 sur 4 octets est accepté. Il faut savoir que l’UTF-8 peut en théorie accepter jusqu’à 8 caractères, mais la version normalisée se limite à 4 pour l’instant. Attentions, il semble que « utf8mb4_unicode_ci » soit un peu plus lourd.

Côté PHP, il faut aussi préciser que l’on voit des données « utf8mb4 » pour éviter les surprises.

コード:

$mysqli = new mysqli($sql_host, $sql_user, $sql_pass, $sql_base);
$mysqli->set_charset("utf8mb4"); //  utf8 → utf8mb4

Bon visiblement, à part l’interclassement et l’encodage d’envoi, il n’y a rien de plus à faire. Les champs restés en « utf8_unicode_ci » fonctionnent toujours, mais il ne faut pas leur envoyer du « utf8mb4 » sous peine d’une mauvaise surprise.

記事にコメントする...
カテゴリ:
Zéflingによって、 2014/09/30 00:19:43
245回を読んだ。0件のコメントが投稿されています。

Un semblant d'« override » en JavaScript

2014年9月22日(月曜日)

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).

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/09/22 23:47:46
276回を読んだ。0件のコメントが投稿されています。

Les jours fériés en PHP : France & Japon

2014年6月14日(土曜日)

J'avais déjà fait une petite fonction pour les jours fériés en France dans cet article. Puis, comme j'aime bien le Japon, je me suis dit que j'allais faire de même pour le Japon ce qui a été largement plus compliqué vu qu'ils ont la bonne idée d'avoir les équinoxes en jours fériés. Contrairement au dimanche de Pacques, il n'y a pas de méthode miracle qui les calcule tous seule. Heureusement, j'ai trouvé comment les avoir.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/06/14 11:35:18
268回を読んだ。0件のコメントが投稿されています。

Calcul des saisons en PHP

2014年6月10日(火曜日)

Encore une idée stupide, ici, directement liée à un autre petit projet que présenterait dans un prochain article. J'avais besoin des dates de changement des saisons... le problème c'est : « comment ça se calcul ? ».

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/06/10 02:00:28
307回を読んだ。0件のコメントが投稿されています。

PHP & Crontab (Unix world only)

2014年6月3日(火曜日)

À la base, c'était une demande du boulot, sauf qu'une fois que j'avais ce que je voulais pour mon module, il y avait peu d’intérêt d'aller plus loin. Du coup, j'ai repris l'idée chez moi et j'ai essayé d'en faire un outil plus polyvalent qui ne demande même pas de connaître la syntaxe de Crontab. J'ai découpé la chose en deux parties, la gestion des lignes et du fichier d'un côté et de l'autre celui du temps. Le plus long a été de faire tous les contrôles lors du parsing d'un fichier pour s'assurer qu'il n'y a pas d'erreurs.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/06/03 00:37:41
266回を読んだ。0件のコメントが投稿されています。

Formatage automatique des ISBN à partir d'un EAN13 en PHP

2014年5月13日(火曜日)

J'avais une petite méthode pour générer ou vérifier des EAN13 que j'ai présentés dans un article précédent. J'avais fait une méthode de formatage pour ajouter des tirets (en anglais “hyphenation”). Je pensais bêtement qu'il y avait un seul formatage, jusqu'à ce que j'y fasse vraiment attention. En fait il y a un formatage spécial pour les ISBN13, et c'est un poil plus compliqué que je ne le pensais.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/05/13 00:48:05
519回を読んだ。0件のコメントが投稿されています。

Résoudre un sodoku en Java

2014年5月12日(月曜日)

J'ai déterré un de mes TP de Java où j'avais eu à résoudre des sodokus. C'est très loin d'être optimal , il existe plein de technique pour réduire le nombre de tests, mais comme j'ai un résultat en moins d'une demi-seconde et que le temps TP ne m'a pas permis pas d'aller plus loin, ça se limite à la recherche par force brute (tout tester).

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/05/12 21:40:22
382回を読んだ。0件のコメントが投稿されています。

Liste des jours fériés en France avec PHP

2014年5月12日(月曜日)

Comme d'habitude ça part de l'idée de ne pas se prendre la tête et surtout ne rien avoir à faire par la suite pour gérer les jours fériés. Le seul problème c'est le lundi de Pâques, qui ne semble pas si simple à avoir. Heureusement, PHP dispose de la fonction easter_date() qui permet d'avoir le timestamp du dimanche de Pâques. Avec ça, ça devient infiniment plus simple.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/05/12 20:20:20
284回を読んだ。0件のコメントが投稿されています。

Code barre & QR code en PHP

2014年4月5日(土曜日)

Encore des problématiques de code-barre ou plutôt identificateur. Comme en ce moment c'était une de mes problématiques, et que j'ai trouvé des solutions facilement intégrables. Autant en faire profiter tout le monde avec quelques explications.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/04/05 01:07:14
683回を読んだ。0件のコメントが投稿されています。

Pour générer ou tester un EAN13 en PHP

2014年3月26日(水曜日)

Pour compléter l'article d'hier, quelques méthodes simples pour l'EAN13 (accessoirement ça marche aussi pour l'ISBN13 qui est une plage de l'EAN13).

Télécharger la classe : EAN13 (1.0)

Exemple, avec ce code :

コード:

$ean13 = EAN13::generator(40, 49);
echo $ean13; // affiche : 0418408982338
 
echo EAN13::format($ean13);  // affiche : 041-8-4089-8233-8
記事にコメントする...
カテゴリ:
Zéflingによって、 2014/03/26 16:16:22
309回を読んだ。0件のコメントが投稿されています。

Générer en PHP l'image d'une code barre pour un EAN13

2014年3月25日(火曜日)

J'avais besoin d'afficher un EAN13, j'ai trouvé une petite classe qui fait cela, mais comme d'habitude, je tombe sur un code qui date de PHP 4 et la programmation-objet qui en dépend, donc plus à jour. Après une revue de code pour le passage en PHP 5, je redistribue la mise à jour. Normalement, le comportent est identique à l'original, car je n'ai rien modifié sur son fonctionnement interne. Par contre, ça doit être plus facile à intégrer. J'aurais pu ajouter une validation de l'EAN13 (je l'ai fait ailleurs, pour un prochain article ?) Mais je considère que ce n'était pas le rôle de la classe en question.

Télécharger la classe : Debora (1.1)

Exemple, avec ce code :

コード:

$ean = new Debora('0123456789012', 2);
$ean->makeImage();

Cela donne :

記事にコメントする...
カテゴリ:
Zéflingによって、 2014/03/25 21:38:14
2656回を読んだ。3件のコメントが投稿されています。

Ajouter des images et fichiers sur un article dans PrestaShop

2014年3月19日(水曜日)

Travaillant avec des webservices, je n'ai pas physiquement mes fichiers à intégrer dans PrestaShop. Il m'a donc fallu trouver des solutions pour pouvoir intégrer des documents venant de l'extérieur. Après quelques recherches, je suis arrivé à trouver comment ajouteras des images (pour le visuel) et des fichiers joints.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/03/19 20:28:41
895回を読んだ。1件のコメントが投稿されています。

Variables de classe indexées

2014年3月14日(金曜日)

À la base, j'avais besoin d'une information que je puisse appeler soit par le nom de variable soit par une position dans un index. Pour faire simple, l'information était dupliquée deux fois... Le problème, c'est qu'en cas de modification, c'est assez chiant à corriger.

J'ai fini par simplifier ma tâche en réduisant le tout à un seul tableau indexé avec une table de correspondance. Avec l'aide des méthodes magiques __get() et __set, il est possible de faire ça assez simplement. Pour que ça soit utilisable facilement ailleurs, je suis partis sur des appels static et non self lors de l'appel à liste de correspondance. Le seul inconvénient est que ça augmente le traitement dû à la recherche de la correspondance.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/03/14 09:37:45
248回を読んだ。0件のコメントが投稿されています。

Mes astuces pour PrestaShop 1.5

2014年3月12日(水曜日)

Étant en ce moment sur PrestaShop depuis un peu plus d'une semaine, j'ai rencontré quelques difficultés lors de l'écriture de code pour modifier un module. J'ai fini par surmonter mes problèmes avec un peu d'aide trouver ici et là sur le Net (aide en ligne, blogs, forums) et avec la lecture du code même. Ce n'est jamais très compliqué une fois qu'on a compris.

Je mets ici quelques points qui m'ont semblé utiles. C'est peut-être aussi le premier d'une suite d'article, vu que j'ai eu à toucher à pas mal de choses en peu de temps : ajouter d'information dans la base, surcharge de classe, écriture de templète, injection dans une complète, etc.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/03/12 21:50:05
853回を読んだ。2件のコメントが投稿されています。

Javascript, le numéro de semaine et numéro du jour de l'année

2014年3月1日(土曜日)

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.

全記事を読みます...
カテゴリ:
Zéflingによって、 2014/03/01 04:26:28
3888回を読んだ。6件のコメントが投稿されています。

Transformer un « array » en chaîne PHP

2013年11月22日(金曜日)

C'est très con, mais j'avais besoin de générer un tableau PHP en PHP pour le stocker et pouvoir l'utiliser plus tard. J'aurais pu passer par du XML ou du JSON, mais quitte à lire du code dans un fichier autant faire un include() en PHP, comme ça il n'y a aucun traitement à faire par la suite.

コード:

$mon_tableau = array(
	'clé1_n1' => 'val1_n1',
	'clé2_n1' => 'val2_n1',	
	'clé3_n1' => array(
		'clé1_n2' => 'val1_n2'
	)
);

全記事を読みます...
カテゴリ:
Zéflingによって、 2013/11/22 06:33:07
360回を読んだ。1件のコメントが投稿されています。

PHP et les tableaux à N dimensions

2013年11月11日(月曜日)

Il n’est pas toujours évident de récupérer une valeur dans un tableau, surtout la profondeur est variable suivant tout un tas de paramètres. Je n’ai pas trouvé de méthode qui permet de lire, modifier ou tester l’existence d’une valeur dans un tableau dont le chemin est dynamique, type : $table[$keys[0]][$keys[1]]...[$keys[n]]. Pour ce faire, je me suis lancé dans la réalisation de trois méthodes pour arriver à cela.

全記事を読みます...
カテゴリ:
Zéflingによって、 2013/11/11 03:03:22
432回を読んだ。0件のコメントが投稿されています。