Tout ce qui concerne le développement en général, que ce soit des choses générales, ou des choses bien précises. Cela va de la gestion de projet à la recherche du fonctionnement de pointeurs en C.
Voici la table qui vous manquera certainement le plus lorsque vous voudrez utiliser le configurateur Web qu’on met à disposition sur massdrop ici :
Attention : vous ne voyez qu’une partie des images pour qu’elles puissent s’afficher correctement dans mon blog, mais si vous cliquez dessus vous en verrez beaucoup plus !
Cliquez sur l’image et elle va s’ouvrir dans une autre fenêtre en grand.
Donc j’ai passé deux soirées complètes à faire ce qui va suivre, comme d’habitude, en espérant que cela serve à d’autres personnes qu’à moi :
Il y a 4 images, avec deux colonnes par image : la colonne de gauche c’est ce qu’il y a d’affiché sur massdrop, et la colonne de droite, c’est ce qui s’affichera réellement sur Windows (je n’ai pas testé sur Linux encore).
Exemple concret : vous voulez mettre la lettre « m ». Vous regardez dans la colonne de droite de chaque image et là vous trouverez le « m » tout en bas dans la première image. Cliquez sur l’image et elle va s’ouvrir dans une autre fenêtre en grand. Tout en bas, sur la fameuse ligne du « m » vous lirez ce menu : « Punctuation KEY_Comma_LessThan ». Donc dans le configurateur, il vous suffira de cliquer avec le bouton droit de la souris, et de choisir le menu « Punctuation KEY_Comma_LessThan ». Bien sûr ce qui va s’afficher sur le configurateur sera ce qu’il y a dans la colonne de gauche, donc le « ;: » mais on s’en moque, le plus important c’est que ce qui sera affiché sera sur la colonne de droite, donc « m ».
J’ai passé un temps énorme à faire ces fichiers de correspondance « propres », j’espère qu’il serviront et si c’est le cas, n’hésitez pas à me remercier en laissant un message !
Lorsque j’ai reçu le colis, j’ai pris quelques photos afin de vous montrer ce que cela donne :
Pour la note, j’ai acheté aussi l’outil qui aide à retirer les touches, et je vous conseille vivement de l’acheter, parce que le petit truc qui est fourni avec n’est pas très efficace, j’ai eu du nez pour le coup : l’outil est juste en haut sur l’image :
Je vais présenter ce clavier totalement atypique, pourtant qui enlève tous les inconvénients de tous les claviers actuels.
Voici le clavier :
Voici tous les inconvénients, je les cite rapidement car il y en a peu :
Il faut être un peu dans la technique ou avoir, comme moi, une connaissance proche qui aime l’électronique et se dévoue pour le monter
Il y a un temps d’apprentissage du nouveau clavier qui peut paraître frustrant. Et malheureusement pour nous c’est le changement qui fait peur à l’être humain… enfin pas pour tout le monde, moi y compris !
Voici tous les avantages :
On peut configurer totalement la disposition des touches comme on le veut
On peut simuler l’appui sur plusieurs touches à la fois (fini le ALTGR-8 pour faire l’antislash)
Les touches sont alignées verticalement, et après un court temps d’adaptation on fait beaucoup moins de fautes qu’avec un clavier classique
On peut faire une vraie macro, c’est à dire simuler qu’on appuie sur plusieurs touches les unes à la suite des autres, alors qu’on n’appuie que sur une touche
On a les mains séparées : du point de vue ergonomique, on ne peut tout simplement pas faire mieux
Les touches sont des touches mécaniques, c’est à dire que :
la durée de vie est dix fois plus supérieure à celles des touches des claviers habituels qu’on trouve en grande surface
on a énormément de choix sur le « feeling » que nous apportent les touches : il y a les touches Cherry MX blanches, les rouges, les bleues, les marrons etc, et chaque type de touche a ses avantages et ses inconvénients
les touches sont entièrement démontables et customisables, on peut donc avoir les lettres qu’on veut sur le clavier, il n’y a qu’une seule limite : l’imagination
Beaucoup de personnes, moi y compris, ont acheté l’Ergodox pour pallier à deux choses gênantes des claviers actuels (je parle pour ceux qui tapent beaucoup, comme moi) :
Être beaucoup mieux positionné avec les mains pour pouvoir écrire ;
Pouvoir entièrement configurer son clavier afin de pouvoir accéder plus rapidement aux touches d’habitude difficiles d’accès.
Vous allez sûrement faire les étapes que j’ai fait à savoir :
Utiliser le configurateur sur le site Massdrop ici ;
Faire une vraie correspondance entre les touches américaines QWERTY et notre bon clavier français AZERTY et j’ai fait un article dessus il y a quelques jours ;
S’apercevoir que finalement il manque des choses, notamment la possibilité de faire un pipe (j’ai dit « un » pipe, pas une pipe !) ou d’autres choses, qui ne nécessitent pas l’appui avec la touche SHIFT mais l’appui avec la touche ALTGR (oui oui avec le GR c’est à dire uniquement la touche ALT de droite du clavier).
Donc vous allez sûrement essayer d’aller chercher les dernières sources concernant le programme qui génère le fameux fichier de configuration de l’ergodox, le fichier HEX.
Ici : https://github.com/benblazak/ergodox-firmware.
Eh bien la compilation ne fonctionne pas. Pour être plus précis elle fonctionne, mais le fichier généré ne fait rien du tout : mon Ergodox ne fonctionne pas du tout.
Alors je me suis pris en main et j’ai commencé à étudier le code qui a été fait.
Maintenant venons-en à…
Ergodox : la solution
Utilisez le configurateur sur le site Massdrop ici ;
Configurez votre clavier comme vous le voulez, en utilisant les bonnes « traductions » des touches dont je donne l’aide dans l’article précédent sur l’Ergodox ;
Récupérez les sources, pas juste le fichier binaire, cochez juste comme ceci :
Dans le fichier lib\key-functions\public\special.c, ajoutez aux directives « include » celle-ci :
#include <util/delay.h>
Dans même fichier lib\key-functions\public\special.c, ajoutez cette fonction :
/*
* [name]
* ALTGR + press|release
*
* [description]
* Generate a 'altgr' press or release before the
* normal keypress or keyrelease
*/
void kbfun_altgr_press_release(void) {
/* Remember old state before modifying it */
bool backup_pressed = _kbfun_is_pressed(KEY_RightAlt);
/* Force the state to "pressed" */
_kbfun_press_release(true, KEY_RightAlt);
kbfun_press_release();
/* Send the key */
usb_keyboard_send();
_delay_ms(MAKEFILE_DEBOUNCE_TIME);
/* Restore previous state */
_kbfun_press_release(backup_pressed, KEY_RightAlt);
}
Maintenant, vous avez donc crée une fonction qui permet de « forcer » l’appui sur ALTGR et d’envoyer la touche concernée.
Déclarez cette fonction dans lib/key-functions/public.h :
Juste avant la déclaration de kbfun_shift_press_release, mettez-y la vôtre :
// special
void kbfun_altgr_press_release (void);
void kbfun_shift_press_release (void);
void kbfun_2_keys_capslock_press_release (void);
Touche finale : le fichier dans lequel il y a la configuration de votre clavier :
Ca y est, vous avez votre fonction prête à être appelée.
Il vous suffira juste de chercher sur quelle touche l’appliquer.
Je vais vous donner un exemple simple, et après à vous de l’adapter : l’exemple est avec le symbole € : nous allons remplacer, juste pour l’exemple, la touche « e » par simuler qu’on appuie sur la touche ALTGR et e (comme on le fait sur un clavier classique, pour avoir le symbole €).
Ouvrez le fichier keyboard/ergodox/layout/default--layout.c dans lequel vous venez juste de déclarer (étape juste avant) votre fonction ALTGR sous la forme raccourcie salprre.
Voici le principe qu’a fait le développeur : pour une couche, il crée deux tableaux : un tableau dans lequel il y a les « codes » clavier à envoyer, tableau qui a la taille du clavier, donc, et un autre tableau, qui a la taille du clavier, dans lequel il y a les fonctions à appeler pour chaque touche. Oui je sais c’est très laid, c’est discutable etc mais c’est fait ainsi. Comme il y a plusieurs couches, il y a donc, si vous avez suivi :
un tableau composé lui même des tableaux des touches pour chaque couche
un tableau composé lui même des tableaux des fonctions à appeler lorsqu’on presse la touche, et ces fonctions reçoivent en paramètre la touche qui a été cherchée dans le tableau précédent
Dans ce fichier, allez chercher là où il y a la déclaration de la touche e. Pour moi c’est facile, c’est sur la couche 0 car j’ai configuré mon clavier presque comme un clavier « normal » AZERTY donc ici :
A partir d’ici, mémorisez bien la ligne et la colonne. Ici c’est donc ligne 2, colonne 4. Ensuite descendez dans le code et cherchez la déclaration des fonctions. Placez vous à la même couche, même ligne et même colonne comme ceci :
Et il vous suffit juste de remplacer le nom de l’appel de la fonction actuel (kprrel) par l’appel de votre fonction soit salprre
Et voilà il ne vous reste plus qu’à compiler :
Vous avez terminé ! Transférez le fichier HEX sur votre Ergodox, et voilà : avec mon exemple, vous ne pouvez plus qu’écrire des € à la place des « e » normaux. Elle est pas belle la vie ?
Il vous faudra répéter les opérations à partir de l’étape 7 à chaque fois que vous récupérerez un nouveau layout via le configurator du site Ergodox.
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.
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 :
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 :
Préparer l’URL concernée dans le navigateur avec le paramètre XDEBUG_SESSION_START=1
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.
Allez dans le navigateur et validez l’URL (entrée ou ‘Refresh’)
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 !
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.
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 !