Recherche avancée

Sur d’autres sites (9613)

• Evolution #4391 : Squelettes de la dist : améliorer le markup et passer à BEM

  14 octobre 2019, par tcharlss (*´_ゝ｀)

  j’utiliserais plutôt un modifier de "menu__item" : <li class="menu__item menu__item--plan"></li>

  Cf. remarque de RastaPopoulos (qui a posté pendant que j’écrivais ma réponse :p)
  Il y a encore beaucoup de guides officieux qui ne sont pas à jour sur ce point.
  Le guide officiel : https://en.bem.info/methodology/naming-convention/

  Pas de HTML5 pour l’instant.

  Pourquoi ?

  Je pensais qu’il y avait encore des points bloquants ou tout du moins genants, mais finalement ça ne semble pas être le cas.
  Donc go go go pour le HTML5, mieux pour la sémantique et l’accessibilité.

  Classes en english avec des exceptions en français

  Why ?

  Français ou anglais, ou mélange des 2, je n’ai pas d’avis vraiment tranché là dessus. Est-ce qu’il y a un consensus à ce sujet ? (dans ce cas, on continue comme ça et on en parle plus :p)
  Mon avis en 2 mots, c’est que c’est en général moins verbeux, et ça rend le code accessible aux non francophones.

  Je ne pense pas que la version cible est la 3.3, 3.4 ou plus à la limite

  Ok pour 3.4. Mais on ne sait jamais, ça pourrait être prêt avant :)
  Je te laisse modifier, j’ai pas le droit d’éditer le ticket.

  pensez-vous que BEM est un truc utilisé par les personnes qui bidouillent leur site à partir de la dist ?

  Bis, cf. remarque de RastaPopoulos qui poste plus vite que son ombre concernant les perfs.
  C’est juste un standard parmis d’autres (OOCSS, SMACSS...), mais il me semble que c’est un des plus simples et un des plus utilisés.

  Après, je ne pense pas que ça forcerait les gens qui bidouillent la dist à l’apprendre et à l’adopter.
  Ce ne sont que des noms de classe, même sans connaître BEM et comprendre comment ces noms sont construits, ça n’empêche pas de bidouiller les styles.

  Rangement¶

  Il y a un autre point que je n’avais pas abordé, c’est le rangement des squelettes.

  Je pense que les listes d’objets pourraient être mutualisées comme dans spipr, en ajoutant 2 dossiers et en y créant ces squelettes :

  • inclure/liste/
    • articles.html
    • rubriques.html
    • etc.
  • inclure/resume/
    • article.html
    • rubrique.html
    • etc.

  Après, je me demande si on ne pourrait pas aller plus loin, et reprendre le rangement de z-core pour les blocs principaux.
  Attention, je parle bien uniquement de rangement, pas de mettre z-core en dépendance.

  C’est à dire concrètement :

  • header/
    • dist.html
  • footer/
    • dist.html
  • content/
    • sommaire.html
    • article.html
    • rubrique.html
    • etc.
  • aside/
    • sommaire.html
    • article.html
    • rubrique.html
    • etc.

  Ce qui fait que le squelette des pages en serait simplifié, exemple pour sommaire.html :
  

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">page</span><span class="delimiter">"</span></span><span class="tag">></span>
  
  
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">header</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">header</span><span class="delimiter">"</span></span> <span class="attribute-name">role</span>=<span class="string"><span class="delimiter">"</span><span class="content">banner</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">header</span><span class="error">/</span><span class="attribute-name">dist</span><span class="error">,</span> <span class="attribute-name">home</span>=<span class="attribute-value">oui</span><span class="error">}</span> <span class="tag">/></span>
  
      <span class="tag"></span>
  
  
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">content</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">content</span><span class="delimiter">"</span></span><span class="tag">></span>
  
  
  
          <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">main</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">main</span><span class="delimiter">"</span></span> <span class="attribute-name">role</span>=<span class="string"><span class="delimiter">"</span><span class="content">main</span><span class="delimiter">"</span></span><span class="tag">></span>
  
              <span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">content</span><span class="error">/</span><span class="attribute-name">sommaire</span><span class="error">,</span> <span class="attribute-name">env</span><span class="error">}</span><span class="tag">></span>
  
          <span class="tag"></span>
  
  
  
          <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">aside</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">aside</span><span class="delimiter">"</span></span><span class="tag">></span>
  
              <span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">aside</span><span class="error">/</span><span class="attribute-name">sommaire</span><span class="error">,</span> <span class="attribute-name">env</span><span class="error">}</span><span class="tag">></span>
  
          <span class="tag"></span>
  
  
  
      <span class="tag"></span>
  
  
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">footer</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">footer</span><span class="delimiter">"</span></span> <span class="attribute-name">role</span>=<span class="string"><span class="delimiter">"</span><span class="content">contentinfo</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">footer</span><span class="error">/</span><span class="attribute-name">dist</span><span class="error">,</span> <span class="attribute-name">self</span>=<span class="error">#</span><span class="attribute-value">SELF</span><span class="error">}</span> <span class="tag">/></span>
  
      <span class="tag"></span>
  
  
  
  <span class="tag"></span>
  
  </span></span></span></span></span></span></span></span></span></span></span>

  Bon, je sais pas, je réfléchis tout haut.
  Peut-être que ça pourrait apporter aussi un peu de confusion.

  Branche et dépôt GIT¶

  Concernant le dépôt, je n’ai pas les droits pour créer une branche sur https://git.spip.net/SPIP/dist , du coup je bosse dans un fork : https://git.spip.net/tcharlss/dist/src/branch/bem

  Pour celleux intéressées à contribuer, c’est quoi la meilleurs méthode ? Je vous ajoute comme collaborateurs sur ce dépôt ?
  Ou alors il faut faire une vraie branche 3.4 dans le dépôt de l’orga SPIP ?

• Anomalie #3461 (Nouveau) : bug sur les urls à cause d’une mauvaise global $profondeur_url

  4 juin 2015, par Maïeul Rouquette

  Le symptome¶

  de temps en temps (mais assez fréquemment dans mon cas) lorsqu’on a un site dans un sous repertoire, les urls produite par #URL_ARTICLE et co contiennent des "../". Conséquent, lorsqu’on clique on remonte d’un niveau, et du coup on tombe sur une page 404.

  La cause¶

  Visiblement d’après https://core.spip.net/projects/spip/repository/revisions/20729 la cause serait une mauvaise globale $profondeur_url.
  Je cite ESJ

  Enfin compris pourquoi SPIP compile parfois des squelettes où la globale profondeur_url est incorrecte. Lorsqu’on place dans ecrire/.htaccess une redirection comme "ErrorDocument 403 / ?page=403", curieusement Apache met dans $_SERVER[’REQUEST_URI’] l’URL initiale (donc avec .../ecrire/...) tandis qu’il met dans $_SERVER[’SCRIPT_NAME’] l’URL de redirection (dans l’exemple ci-dessus une page à la racine). Du coup, la compilation de cette page à la racine se fait avec une profondeur d’URL qui est celle de ecrire/ et non de la racine. Pour peu que cette page et ses inclusions soient mises en cache, c’est toutes les autres pages qui les partagent qui se retouvent avec de mauvaises URL.

  Les tentatives de résolution¶

  Deux commits en 2.1 ont tenté de résoudre les pb :
  https://core.spip.net/projects/spip/repository/revisions/20729
  et https://core.spip.net/projects/spip/repository/revisions/20762

  Ils ont été reporté en 3.0 par
  - https://core.spip.net/projects/spip/repository/revisions/20744
  - https://core.spip.net/projects/spip/repository/revisions/20745
  puis annulé car visiblement non pleinement fonctionnels en

  - https://core.spip.net/projects/spip/repository/revisions/20746
  - https://core.spip.net/projects/spip/repository/revisions/20747

  à ma connaissance c’est le point mort depuis

• Evolution #3361 : Tri par défaut des entrées des menus du bandeau de l’espace privé

  6 décembre 2014, par tcharlss (*´_ゝ｀)

  Voilà ma petite proposition de patch et mes explications (un peu verbeuses, mais ça m’aide à retenir).

  Dans http://core.spip.org/projects/spip/repository/entry/spip/prive/squelettes/inclure/barre-nav.html#L46, c’est la boucle , ligne 46, qui affiche les entrées.
  Tel quel, on ne peut pas faire de tri au moyen de {par xxx}, car la chaîne de langue n’est pas contenue dans #VALEUR{menu}, juste le nom de l’entrée i18n associé :
  

  array (size=6)
    ’auteurs’ => 
      object(Bouton)[301]
        public ’icone’ => string ’’ (length=0)
        public ’libelle’ => string ’icone_auteurs’ (length=13)
        public ’url’ => null
        public ’urlArg’ => null
        public ’url2’ => null
        public ’target’ => null
        public ’sousmenu’ => null
    ’rubriques’ => ...
  

  
  (Note : dans la boucle DATA, l’objet « Bouton » est traité comme un tableau associatif).
  Pour faire le tri alphabétique, il y a juste 2 points à traiter :

  • Rajouter la chaîne de langue dans les valeurs. Les premières lettres suffiront pour le tri.
  • Faire en sorte que cette paire clé/valeur soit au début du tableau. Anéfé, dans une boucle DATA, quand les #VALEUR sont des tableaux associatifs, {par valeur/toto} ne fonctionne pas. En revanche, on peut faire {par valeur} tout court et ça va prendre en compte la valeur associée à la première clé du tableau.

  Donc concrètement, en ajoutant 'tri' => 'chaine de langue' au début du tableau de chaque entrée, on peut faire {par valeur} dans la boucle et le tour est joué.
  Je propose 2 patchs, au choix :

  Patch A¶

  Dans le squelette barre_nav.html : juste avant la boucle DATA qui affiche les entrées, on fait une boucle qui modifie le tableau qui l’alimente (dans le patch, on fait gaffe au espaces blancs, mais là c’est pour la lisibilité).

  [(#REM) prépare les données des entrées ]
  #SETsousmenu,#ARRAY
  #SETentree,#ARRAY#CLE,#ARRAY
  
      tri,#VAL#VALEURlibelle|_T|replace’\s+’,’’|substr0,3|strtolower,
  
      icone,#VALEURicone,
  
      libelle,#VALEURlibelle,
  
      url,#VALEURlibelle,url,
  
      urlArg,#VALEURurlArg,
  
      url2,#VALEURurl2,
  
      target,#VALEURtarget,
  
      sousmenu,#VALEURsousmenu
  
  
  
  #SETsousmenu,#GETsousmenu|array_merge#GETentree
  [(#REM) Affiche les entrées ]
  ...
  

  Patch B¶

  Dans boutons.php, on ajoute $this->tri      = strtolower(substr(preg_replace('/\s+/','',_T($libelle)),0,3)); à la classe Bouton et on fait en sorte que ce soit la première donnée renvoyée.
  Du coup dans le squelette barre_nav.html il suffit de rajouter {par valeur}.