Ergodox : le clavier de geek de l’extrême

J’ai terminé la mise en place du clavier de l’extrême, et si vous êtes intéressé(e) par ces claviers de l’extrême, qui proposent, justement, une customisation extrême, n’hésitez pas à poser des question ici, ou aller lire mes pages qui concernent ce clavier de pur geek (dans la section « pages ») :

Image finale

WordPress et Permaliens : une solution / hint / astuce

Si jamais les permaliens ne fonctionnent pas :

  • via les fichiers .htaccess ;
  • que vous avez essayé de copier-coller le code qu’il vous a donné dans un fichier vhost ;
  • que vous n’y comprenez rien en règles de réécriture…

Alors essayez de mettre ce qui suit en règle de réécriture dans votre fichier vhost :

# Olivier Pons : règles pour WordPress
# faites "à la main" :
# si index, on stoppe tout :
RewriteRule ^index\.php$ - [QSA,L]
# Tester TOUTES les possibilités
# pour voir si c'est un fichier :
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-d
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d  RewriteRule . /index.php [QSA,L]

Dans mon cas leurs règles ne fonctionnaient pas car il ne voyait pas que les fichiers étaient bien là, alors j’ai ajouté la vérification en ajoutant %{DOCUMENT_ROOT}.
Oui je sais ça n’est pas l’idéal, mais comme il est écrit sur l’entrée de Facebook :

Done is better than perfect.

…And I got this thing done. Whatever.

Adobe Photoshop Scripting : astuces – hints

Après avoir lu la documentation et essayé toutes les choses de bases, voici ce qu’il me manquait pour faire les choses rapidement : notez bien que je ne programme Photoshop qu’en JavaScript.

Extension des fichiers Photoshop JavaScript

Tous vos fichiers doivent se terminer par « .jsx »

Charger les scripts uniquement via Photoshop

  • Si Photoshop est déjà ouvert, choisissez Fichier » Scripts » Parcourir. Allez dans le répertoire Presets » Scripts et sélectionnez votre script.
  • Si Photoshop n’est pas ouver : démarrez Photoshop et choisissez Fichier » Scripts, et sélectionnez votre script à partir du menu Scripts.

En scripting, impossible de sélectionner un cercle. La sélection ne fonctionne que sur des points : on peut préciser un ensemble de points, et ensuite demander à ce que la sélection « suive » cet ensemble de points. L’astuce que j’ai trouvé : faire un tracé qui soit un cercle, et demander au tracer de s’appliquer à la sélection.

Enfin, ce qu’il vous manquera le plus et qui est dur à trouver :

Le logger JavaScript

Ils ont fait un truc génial et super pratique : c’est un plugin JavaScript qui loggue toutes vos actions. Comme il loggue toutes vos actions il faut surtout ne pas oublier de le désactiver, mais en pratique, à la moindre de vos actions Photoshop, il remplit un fichier qu’il a crée sur le bureau : ScriptingListenerJS.log (mais aussi pour ceux que ça intéresseil crée le même fichier avec les actions en Visual Basic : ScriptingListenerVB.log).

Donc si vous avez du mal à trouver le code en JavaScript, hop le logger et là vous regardez ce qu’il écrit quand vous faites une action.

WordPress : notes pour les débutants

Petites notes que j’ai apprises lors du développement d’un plugin qui créait des champs entièrement personnalisés :

Les filtres et les actions se ressemblent beaucoup à la fois dans la documentation et dans la déclaration, pourtant :

  • un filtre est une fonction qui reçoit quelque chose en paramètre et qui doit renvoyer quelque chose en paramètre, et s’il n’y a aucune modification du paramètre qui arrive, elle doit obligatoirement renvoyer le paramètre entrant ;
  • par opposition, une action est une fonction qui ne reçoit pas forcément quelque chose en paramètre et surtout, qui n’a pas besoin de renvoyer quelque chose (même si elle renvoie quelque chose, c’est ignoré).

Dans beaucoup de fonctions, il y a deux versions : avec et sans get_ :

  • the_ID(); et get_the_ID();
  • the_category(); et get_the_category();
  • …

La version sans le get_ affiche le contenu correspondant (= echo) alors que la version avec get_ renvoie le contenu correspondant, il faut donc utiliser cette dernière en l’assignant à une variable (par exemple : $categorie = get_the_category();).

Enfin dernière astuce : très souvent (voire tout le temps), les fonctions qui commencent par wp_ affichent le contenu, elles font un echo. Exemple de code que j’ai trouvé un peu déroutant quand on ne sait pas ce qu’il en est :

echo '<div class="form-wrap">';
wp_nonce_field(
    'ma_cle_unique',
    'ma_cle_unique_nonce'
);
echo '</div>';

Ici, wp_nonce_field() affiche quelque chose. Les fonctions qui commencent par wp_ affichent quelque chose.

Voilà. En espérant que cela évite à des personnes de perdre autant de temps que cela m’en a fait perdre…

vim et xdebug principes de base pour y arriver

Le principe est de comprendre comment fonctionne xdebug sinon vous n’arriverez jamais à faire du pas à pas en Php.

L’idée plutôt bizarre mais fonctionne très bien, et ça semble le moyen le plus efficace pour y arriver.

Voici comment fonctionne une session de déboguage et après vous pourrez en déduire ce qu’il faut pour avancer :

  • Le client Web = Chrome demande une page en précisant qu’il veut faire du débogague pas à pas (ajouter dans l’URL XDEBUG_SESSION_START=1 (c’est la valeur xdebug par défaut))
  • Lorsque cela arrive sur le serveur Apache, ce dernier fait passer la demande à toutes les librairies liées à Apache, comme d’habitude. Ici, parmi celles qui l’ont demandé, il y a xdebug
  • Là, xdebug voit XDEBUG_SESSION_START=1. Il va alors essayer de se connecter au serveur de déboguage qu’on a configuré via ces directives dans php.ini :
    zend_extension=/chemincomplet/xdebug.so
    xdebug.remote_enable=1
    xdebug.remote_host=127.0.0.1
    xdebug.remote_port=9000
  • Oui j’insiste bien : Apache devient un client, et se connecte à un serveur de déboguage
  • C’est pourquoi dans vim, même si, comme moi, vous arrivez à installer correctement l’extension pour faire du pas à pas Vdebug, tant que vous n’aurez pas compris ce que j’explique juste avant, vous n’arriverez pas à faire du pas à pas
  • Donc dernière étape : je vous explique l’ordre correct de lancement des applications pour réussir à déboguer :
    1. Préparer l’URL concernée dans le navigateur avec le paramètre XDEBUG_SESSION_START=1
    2. Lancer vim avec l’extension Vdebug
    3. Appuyez sur <F5> dans vim afin qu’il se mette en mode serveur et qu’il attende une connexion. Là un message vous affiche qu’il attend 20s.
    4. Allez dans le navigateur et validez l’URL (entrée ou ‘Refresh’)
    5. Regardez vim: automatiquement il passe en mode pas à pas ! C’est magique, génial, efficace et la crème de la crème : vous pouvez déboguer directement sur un serveur distant quand vous connaissez vim. Le top.

Une fois en mode débogage, voici les raccourcis possibles :

<F5> : start/run (jusqu’au prochain breakpoint/ou fin du script)
<F2> : pas par dessus
<F3> : pas entrant dans la fonction
<F4> : sauter à la fin de la fonction
<F6> : stopper le déboguage
<F7> : detacher le script du débogueur
<F9> : continuer jusqu’au curseur
<F10> : mettre un breakpoint
<F11> : voir les variables du contexte (p.ex. après « eval »)
<F12> : évaluer une variable sous le curseur
:Breakpoint <type> <args>: mettre un breakpoint de n’importe quel type (voir :help VdebugBreakpoints)
:VdebugEval <code> : évaluer du code et afficher le résultat
<Leader>e : évaluer l’expression sous le curseur et afficher le résultat
Pour arrêter le déboguage, appuyez sur <F6>. Appuyez encore une fois pour fermer l’interface de déboguage.

If you can’t get a connection, then chances are you need to spend a bit of time setting up your environment. Type :help Vdebug for more information.

Voici une capture de vim / débogage de mon blog WordPress. En plus, en faisant du pas à pas dans WordPress, j’ai appris énormément de choses… Maintenant, à vous de jouer !

vim xdebug image

PacktLib jQuery for Designers Beginner’s Guide est sorti !

Le livre que j’ai revu – et critiqué est sorti :

PacktLib jQuery for designers

Avec mon petit CV de technical reviewer :

PacktLib jQuery for designers Olivier Pons

Olivier Pons is a developer who’s been building websites since 1997. He’s a teacher at IngeSup (École Supérieure d’Ingénierie Informatique; for more information visit https://www.ingesup.com/ and https://www.y-nov.com), at the University of Sciences (IUT) in Aix-en-Provence/France, and École d’Ingénieurs des Mines de Gardanne, where he teaches MVC fundamentals, Symfony, Php, HTML, CSS, jQuery/jQuery Mobile, Linux basics, and advanced VIM techniques. He has already done some technical reviews, including the books Ext JS 4 First Look, Packt Publishing and jQuery Mobile Web Delopment Essentials, Packt Publishing, among others. In 2013, he left a full-time job as a Delphi and PHP developer to concentrate on his own company, HQF Development (https://hqf.fr). He currently runs a number of websites, including https://www.livrepizzas.fr, https://www.papdevis.fr, and https://olivierpons.fr, his own web development blog. He works as a consultant, teacher, project manager, and sometimes a developer.

CreateJS : comment résoudre « …security restrictions on reading canvas pixel data with local or cross-domain images. »

Si vous essayez de charger des images qui ne sont pas sur le site d’origine qui demande la requête, vous allez sûrement avoir ce problème que va vous afficher le navigateur :

Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

Lisez la documentation très claire ici : .

Parmi toutes les solutions que vous allez trouver sur le Web, je n’en ai pas trouvé une qui fonctionne de manière simple :

Mon framework est optimisé pour la rapidité et la dispersion de ressources statiques sur des domaines différents.
Exemple : mon site principal est www.battlesoop.fr mais à partir de là, toutes les ressources statiques être chargées sur des domaines différents : fr.s1.battlesoop.fr, fr.s2.battlesoop.fr et fr.s3.battlesoop.fr, en prenant aussi la langue du navigateur en compte.
J’ai passé presque une journée avant de faire fonctionner cela avec CreateJS. La solution m’a été donnée sur les forums même, ici. N’hésitez pas à aller poser des questions par là-bas : c’est la première fois depuis des années que la réponse a été plus rapide sur ces forums que sur stackoverflow !

En tous les cas : HTML5 rocks!

🙂