Monthly Archives: février 2016

Javacript règles

* Pour un code plus clair et plus facile à maintenir.
* Déclaration des variables en début de fonction
* Déclaration des fonctions juste avant de les utiliser
* = espace avant et après comme (+,-,/,*)
* Ne pas utiliser  » préférer ‘ (réserver le » pour PHP, et donc règle inverse en PHP)
* espace après une virgule, pas avant
* Fonction, pas d’espace devant { }ou devant ()  function(par1, par2){ code } OK  function (par1,par2) { code } pas bon<
* Dans tous les autres cas ( est précédé d’un espace
* Toujours mettre ; à la fin de la ligne, même si cela fonctionne sans 
* Ligne trop longue -> à éviter : pb de lisibilité. Si pas autre solution, \ pour découper en plusieurs lignes (attention, pas d’espace après\)

* ‘use strict’; dès que possible pour être obligé de bien gérer les variables et faire remonter des erreurs invisibles autrement, accessoirement le code est plus rapide

function() {
  'use strict';

  // un monde plus sûr

}

Javascript liens intéressants

* Livre en ligne en anglais, très bien fait et très complet
* Livre en anglais complet

* Plein de livres

Design patern
* Livre en anglais
* Petit tuto en ligne en français

Outils
* jslint émulateur en ligne très utile pour tester du code ou apprendre à mieux écrire du JS
* jsbin émulateur en ligne plus complet avec HTML et CSS
* codepen émulateur en ligne plus complet avec HTML et CSS et des tas de codes exemples
* Doc devtools Chrome outils de dev présents dans le navigateur
* Doc devtools Firefox
* Doc devtools Edge de Microsoft

vidéos
* Style écriture du code, excellant, en anglais
* Plein d’autres dont certaines incontournables, en anglais

Bibliothèques
* Des centaines de bibliothèques de code très bon

Développement mobile notes

Google Chrome Ctrl+Shift+M passe en mode émulation mobile succinct

debug chrome mobile de puis chrome desktop
ripple appli chrome pour simuler un mobile

VIM

Editeur ligne de commande linux apt-get install vim

vim monficher –> ouvrir le fichier à éditer  

ESC :syntax on –> coloration syntaxique  
ESC :nu –> numérotation des lignes 
ESC –> Retour à la navigation dans le document (à faire tout le temps avant de continuer) 
touches flèche ou hjkl pour naviguer H haut de l’écran L en bas
i ou touche insert –> Modification (insert)  
v –> sélection de bloc de lignes (mode visuel)  
CTRL v –> sélection de bloc (mode visuel)  
gg –> début du fichier  
G –> fin du fichier  
$ –> fin de la ligne  
0 –> début de la ligne  
: –> Action (mode commande)
ESC :w –> enregistre
ESC :q –> quitte  ESC:q! quitte sans enregistrer
ESC :help commande
D –> couper la ligne   P –> Coller
O –> inserer une ligne
u –> annule la dernière action
/ –> recherche n –> continue la recherche
* –> recherche le mot sous le curseur

Le pavé numérique du clavier n’est pas toujours reconnu… utiliser les chiffres du clavier normal

CSS avec des variables

  :root {
    --main-bg-color: brown;  // set variable
  }
  .menu {
    color: white;
    background-color: var(--main-bg-color);
  }
  .page {
    color: red;
    background-color: var(--main-bg-color);
 }

Il peut être intéressant de définir des variables dans les CSS. Cet exemple ce code n’est pour l’instant utilisable qu’avec Firefox version bureau.. les autres navigateurs risquent de s’y mettre, à surveiller

CSS bouts de trucs

Calcul dans les styles

<style>
  #monobjet[
    width:180px;
    width:100%;    // tout le div contenant
    margin-left:180px;  // monobjet va sortir de 180px vers la droite
      // solution
    width:calc(100% - 180px);  // tout le div contenant - 180px;  
      // calcul avec + - * /  des % px, em  ne pas oublier d’entourer les opérateurs par des espaces
  }
</style>

Pour afficher un truc du genre : Ctrl+Shift+M

<kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">Shift</kbd>+<kbd class="kbd">M</kbd>
<style>
kbd {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    color: #333;
    font-size: 11px;
    line-height: 1.4;
    text-shadow: 0 1px 0 #fff;
    display: inline-block;
    padding: .1em .6em;
    margin: 0 .1em;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;
    border-radius: 3px;
}
</style>

WORPRESS ajout recherche Google

Google mets à disposition des recherche personnalisées. Il est possible de faire une recherche sur son site WordPress, et d’afficher les résultat dans une page comme si le moteur Google était intégré à WordPress.
Le moteur Google permet de savoir ce que les internautes peuvent trouver lors d’une recherche Google, ce qui est souvent différent de ce que vous voulez. Par contre il n’est à jour que quelques temps après la publication des articles… Pour ce qui est des modifications sur les articles, il faut parfois attendre très longtemps.
Le moteur interne de WordPress retourne le vrai contenu, à jour… mais ne corrige rien, on peut donc passer à coté du bon article pour une faute de frappe ou d’orthographe.

1 récupérer le code fourni par Google contenant les ID, A le code du formulaire de recherche, et B celui pour le résultat.
2 Créer une page, par exemple RECHERCHE, en mode texte coller le code Google B et copier le permalien
3 thème, éditeur -> searchform.php, remplacer le code d’origine par celui de Google A
Il est possible d’ajouter le code Google pour avoir simultanément les deux moteurs.

4 remplacer le form action par le permalien de RECHERCHE.
C’est tout

Il est ensuite possible de « bricoler le formulaire de recherche avec style=…. pour l’adapter au thème