Catégorie : développement

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.

Ergodox

Je vais présenter ce clavier totalement atypique, pourtant qui enlève tous les inconvénients de tous les claviers actuels.

Voici le clavier :

My ergodox at home

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

4 – Comment faire des macros

Ergodox : un seul problème

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

  1. Utilisez le configurateur sur le site Massdrop ici ;
  2. 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 ;
  3. Récupérez les sources, pas juste le fichier binaire, cochez juste comme ceci :
    Ergodox Configurator download with source checked
  4. Dans le fichier lib\key-functions\public\special.c, ajoutez aux directives « include » celle-ci :

    #include <util/delay.h>

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

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

  7. Touche finale : le fichier dans lequel il y a la configuration de votre clavier :

    keyboard/ergodox/layout/default--layout.c

    A l’endroit des définitions, ajoutez-y la vôtre :

    // DEFINITIONS
    ...
    blabla
    ...
    #define  salprre  &kbfun_altgr_press_release
    #define  sshprre  &kbfun_shift_press_release
    ...
    blabla
    ...

  8. 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 :

    Ergodox configurator source layer 0 key e

  9. 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 :

    Ergodox configurator source layer 0 functions

    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

    Ergodox configurator source layer 0 function properly replaced by my own function

  10. Et voilà il ne vous reste plus qu’à compiler :

    Ergodox configurator compilation of the source

  11. 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 ?
  12. 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.

unity master server

network view = instance et sur chaque objet

un personnage c’est un composant

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!

🙂

vim : configuration

Je partage mon fichier de configuration de vim, si vous avez des suggestions, n’hésitez pas :

set nocompatible
set nocompatible
filetype plugin on
syntax enable

set ignorecase
set paste
set ruler
set modeline

set showcmd

set nowrap
set textwidth=0
set wrapmargin=0
let g:leave_my_textwidth_alone=1

set expandtab
set autoindent
set smartindent
set softtabstop=4
set tabstop=4

" Dans un fichier php, lorsqu'on tape {<CR> alors
" il fait l'indentation automatique
set shiftwidth=4

set number
colorscheme desert
colorscheme torte
colorscheme zellner

set vb t_vb=

set backup
set backupdir=~/.vim/backup
set directory=~/.vim/tmp
set fileencodings=utf-8,ucs-bom,default,latin1
set scrolloff=5
set scrolloff=15
set undolevels=1000
nmap ;bw :. w! ~/.vimxfer<CR>
nmap ;br :r ~/.vimxfer<CR>
nmap ;ba :. w! >>~/.vimxfer<CR>

" Pour la macro gset, après j'utilise F3 :
" ça sert à transformer les trucs du genre :
" - @return string le nom ajouté ...
" par :
" - @return string Nom ajouté ...
map <F3> ^3w/ [a-zA-Z]<CR><RIGHT>v/\( \\|'\)<CR>xvU
" Macro qui réindente le bloc courant d'une seule tab à droite :
map <F4> Vi{9<lt>Vi{>

" Tell vim to remember certain things when we exit
"  '10 : marks will be remembered for up to 10 previously edited files
"  "100 : will save up to 100 lines for each register
"  :20 : up to 20 lines of command-line history will be remembered
"  % : saves and restores the buffer list
"  n... : where to save the viminfo files
set viminfo='10,\"100,:20,%,n~/.viminfo

" when we reload, tell vim to restore the cursor to the saved position
augroup JumpCursorOnEdit
 au!
 autocmd BufReadPost *
 \ if expand("<afile>:p:h") !=? $TEMP |
 \ if line("'\"") > 1 && line("'\"") <= line("$") |
 \ let JumpCursorOnEdit_foo = line("'\"") |
 \ let b:doopenfold = 1 |
 \ if (foldlevel(JumpCursorOnEdit_foo) > foldlevel(JumpCursorOnEdit_foo - 1)) |
 \ let JumpCursorOnEdit_foo = JumpCursorOnEdit_foo - 1 |
 \ let b:doopenfold = 2 |
 \ endif |
 \ exe JumpCursorOnEdit_foo |
 \ endif |
 \ endif
 " Need to postpone using "zv" until after reading the modelines.
 autocmd BufWinEnter *
 \ if exists("b:doopenfold") |
 \ exe "normal zv" |
 \ if(b:doopenfold > 1) |
 \ exe "+".1 |
 \ endif |
 \ unlet b:doopenfold |
 \ endif
augroup END

set backspace=2

inoremap <silent> <Bar>   <Bar><Esc>:call <SID>align()<CR>a

function! s:align()
  let p = '^\s*|\s.*\s|\s*$'
  if exists(':Tabularize') && getline('.') =~# '^\s*|' && (getline(line('.')-1) =~# p || getline(line('.')+1) =~# p)
    let column = strlen(substitute(getline('.')[0:col('.')],'[^|]','','g'))
    let position = strlen(matchstr(getline('.')[0:col('.')],'.*|\s*\zs.*'))
    Tabularize/|/l1
    normal! 0
    call search(repeat('[^|]*|',column).'\s\{-\}'.repeat('.',position),'ce',line('.'))
  endif
endfunction

autocmd BufNewFile  * silent! 0r ~/.vim/templates/%:e.tpl
autocmd BufNewFile  *.php call search('w', '', line("w$"))
autocmd BufNewFile,BufRead *.vhost.conf set filetype=apache
autocmd BufNewFile,BufRead *.json set filetype=yaml

let g:snips_author='Olivier Pons'
let g:snips_author_email='olivier.pons@gmail.com'

" ----------------------------------------
" Smarty syntax highlighter / Rappel il est dans ~/.vim/syntax
" Pris ici http://www.vim.org/scripts/script.php?script_id=1798 :
autocmd BufRead,BufNewFile *.tpl set filetype=smarty

" ----------------------------------------
" Truc de Stackoverflow : si ouverture d'un fichier htm(l) alors
" verifier s'il y a {* *} ou {(alphanum) $xx (alphanum)}
" et si c'est le cas appliquer la syntaxe Smarty (au dessus)
autocmd BufNewFile,BufRead *.htm call s:CheckForSmarty()
autocmd BufNewFile,BufRead *.html call s:CheckForSmarty()

function! s:CheckForSmarty()
  for n in range(1, line('$'))
    "if n > 100
    "  return
    "endif

    let line = getline(n)
    if line =~ '{.*$\k\+}' || line =~ '{\*.*\*}'
      set filetype=smarty
      return
    endif
  endfor
endfunction

" (!) Ultra important sinon *tous* les mappings sont désactivés :
set nopaste

" Code will highlight trailing whitespace in red:
highlight WhitespaceEOL ctermbg=red guibg=red
match WhitespaceEOL /\s\+$/

"highlight OverLength ctermbg=red ctermfg=white guibg=#592929
"match OverLength /\%>80v.\+/
set textwidth=80
set colorcolumn=+1
highlight ColorColumn ctermbg=8
highlight Folded term=standout ctermfg=216 guifg=1 guibg=2 ctermbg=8

" Raccourci : F7 = ouvrir le fichier sous le curseur, F8 = ouvrir en vsplit :
:nnoremap <F8> :vertical wincmd f<CR>
:nnoremap <F7> :wincmd f<CR>