var Phenix = function () {

Troll du Web depuis 1996

Une marge sur le « scroll » des ancres HTML

17 décembre 2017 par phenix dans Trucs et astuces

Voici une petite astuce pour avoir une marge, entre le « haut du browser » et l’emplacement réel de l’ancres, lorsque l’on clic sur une ancre.

  1. /**
  2.  * Appliquer une marge sur les ancres HTML c'est plus
  3.  * ergonomique.
  4.  */
  5. :target {
  6.     border-top: 75px solid transparent;
  7.     margin: -75px 0 0;
  8.     -webkit-background-clip: padding-box;
  9.     -moz-background-clip: padding;
  10.     background-clip: padding-box;
  11.     outline: none; /* Supprimer la outline disgracieuse de Chrome */
  12. }

:target est une sélécteur css bien supporté qui cible toutes les ancres. Du coup on lui ajouter une fausse marge.
L’avantage ce code, c’est qu’il va fonctionner même si l’ancre est dans un texte. Ce que n’est pas le cas de la majorité des techniques à base de display: block; et de :before.

Voir en ligne : offsetting an html anchor to adjust for fixed header

Recherche ajax avec les formulaires SPIP

Une recherche « live »

16 novembre 2017 par phenix dans SPIP

Le but de ce formulaire est une recherche dynamique : a chaque nouvelle lettre dans l’input la recherche s’affine.

La bonne nouvelle c’est qu’on peut faire cela nativement avec les fonctions présentent dans SPIP.

Dans un premier temps, il faut créer un fichier formulaires/recherche_ajax.php. Il va mettre à jour le contexte du formulaire en lui passant un critère de recherche {recherche}.

  1. <?php
  2.  
  3. if (!defined('_ECRIRE_INC_VERSION')) {
  4.         return;
  5. }
  6.  
  7. function formulaires_recherche_ajax_charger_dist($ajax_bloc) {
  8.         return array(
  9.                 'ajax_bloc' => $ajax_bloc,
  10.                 'recherche_'.$ajax_bloc => _request('recherche_'.$ajax_bloc),
  11.                 'lang' => $lang,
  12.         );
  13. }

Ensuite un peu de JavaScript et d’HTML pour recharger un bloc ajax, dans un fichier formulaires/recherche_ajax.html.
Ici, j’ai simplement repris le formulaire de recherche de SPIP en modifiant le name de l’input de recherche.

  1. <div class="formulaire_spip formulaire_recherche[ (#ENV{class})]" id="formulaire_recherche">
  2.         <form action="[(#ENV{action})]" method="get">
  3.                 <div class="editer-groupe">
  4.                         [(#ENV{action}|form_hidden)]
  5.                         [<input type="hidden" name="lang" value="(#ENV{lang})" />]
  6.                         <label for="#ENV{_id_champ}"><:info_rechercher_02:></label>
  7.                         <input type="[(#HTML5|?{search,text})]" class="search text" name="recherche_#ENV{ajax_bloc}" id="#ENV{_id_champ}"[ value="(#ENV{recherche})"] />
  8.                         <input type="submit" class="submit" value="&gt;&gt;" title="<:info_rechercher:>" />
  9.                 </div>
  10.         </form>
  11. </div>

Dans le même fichier, à la fin, un peu de JavaScript pour mettre à jour le bloc_ajax (a savoir un squelette avec la boucle de recherche). Pour plus d’information, sur le fonctionnement d’Ajax avec SPIP, la page de la documentation officiel est bien faite.

  1. <script type="text/javascript">
  2.  // Chaque input déclenche la recherche ajax
  3.  $("#recherche_#ENV{ajax_bloc}").on("input", function () {
  4.          ajaxReload(
  5.                  "#ENV{ajax_bloc}",
  6.                  {
  7.                          args: {
  8.                                  // Envoyer le contenu du formulaire dans le
  9.                                  // contexte de recherche SPIP
  10.                                  recherche: $(this).val()
  11.                          }
  12.                  }
  13.          );
  14.  });
  15. </script>

Dans le bloc ajax (un fichier inclure/grille_article), je place simplement ma boucle de recherche :

  1. [(#SET{defaut_tri, #ARRAY{titre, 1, num titre, 1, date, #ENV{date_sens, -1}, id_article, 1, points, -1
  2.  }})
  3.  
  4. ]<B_article_ajax>
  5.         #ANCRE_PAGINATION
  6.         <BOUCLE_article_ajax(articles){recherche ?}{tri #ENV{par, [(#ENV{recherche}|?{points, num titre})]}, #GET{defaut_tri}}{pagination}>
  7.                 <INCLURE{fond=inclure/article_resume}{id_article} />
  8.         </BOUCLE_article_ajax>
  9.         [<p class="pagination">(#PAGINATION)</p>]
  10. </B_article_ajax>

Il ne reste qu’à appeler tout cela :

  1. [(#FORMULAIRE_RECHERCHE_AJAX{grille_article})
  2.  
  3. ]<INCLURE{fond=inclure/grille_article}{env, ajax=grille_article} />

Pour en savoir plus sur les formulaires de SPIP, rien ne vaut la documentation de spip.net :).

Laravel + Foundation 6

7 septembre 2017 par phenix dans Laravel

Laraval vient par défaut avec Boostrap. Personnellement, en matière de Framework frontend, je préfère largement Foundation.

Heureusement, il existe un preset pour changer cela proprement dans Laravel. Les autres Tuto ou tout était fait à la main était quand même barbant.

Installer le preset :

Facile, on demande à composer :

  1. composer require laravel-frontend-presets/zurb-foundation

Activé le preset :

Soit on veut juste activer foundation :

  1. php artisan preset foundation

Soit on veut aussi que les templates de base de Laravel soit adapté :

  1. php artisan preset foundation-auth

Il ne reste plus qu’à installer :

  1. npm install && npm run dev
Voir en ligne : Zurb Foundation 6 Preset For Laravel 5.5

Éxecuter du code quand une commande est payée

16 juin 2017 par phenix dans Pipelines

Lorsque l’on utilise le plugin commande et que l’on souhaite exécuter une peu de code lorsqu’une commande est payée, il suffit d’utiliser ce petit pipeline :

  1. function prefixe_post_edition($flux) {
  2.         if ($flux['args']['table'] == table_objet_sql('commande')
  3.                 and $flux['args']['action'] == 'instituer'
  4.                 and $flux['args']['statut_ancien'] == 'encours'
  5.                 and $flux['data']['statut'] == 'paye'
  6.         ) {
  7.                 $id_commande = $flux['args']['id_objet'];
  8.                 // Coder ici
  9.         }
  10.         return $flux;
  11. }

Un serveur de mail local pour le développement web

Sous Ubuntu 16.04 ou LinuxMint 18

1er juin 2017 par phenix dans GNU/Linux

Petite astuce pour avoir un serveur de mail local, qui renvoie tous les mails envoyés par PHP (ou autre) vers username@localhost.

La première chose est d’installer le serveur d’envoi, postfix :

  1. sudo apt install postfix

Il est possible qu’il soit déjà installé, mais pas spécialement bien configurer, pour être certain, il vaut mieux le reconfigurer :

  1. sudo dpkg-reconfigure postfix

Sélectionnez l’option Local uniquement et laisser toutes les autres options par défauts.

Ensuite, j’ai fait une petite page php de test :

  1. <?php
  2. mail('username@localhost', 'test', 'test');

L’envoie du mail devrait alors créer un fichier dans /var/mail/username. Vérifiez que tout ce passe bien :

  1. more /var/mail/username

Vous devriez avoir quelques choses comme ceci dans votre terminal :

From phenix@Thanatos.localdomain  Thu Jun  1 17:23:07 2017
Return-Path: <phenix@Thanatos.localdomain>
X-Original-To: phenix@localhost
Delivered-To: phenix@localhost.localdomain
Received: by Thanatos.localdomain (Postfix, from userid 1000)
        id CF2F385652; Thu,  1 Jun 2017 17:23:07 +0200 (CEST)
To: phenix@localhost.localdomain
Subject: test
X-PHP-Originating-Script: 1000:test_mail_local.php
Message-Id: <20170601152307.CF2F385652@Thanatos.localdomain>
Date: Thu,  1 Jun 2017 17:23:07 +0200 (CEST)
From: phenix@Thanatos.localdomain (phenix)

test

J’ai laissé les valeurs de ma machine, ce sera sans doute différent sur la vôtre.

On peut ensuite configurer Thunderbird pour lire cette boite mail. J’utilise la version 52.1.1.

Fichier > Nouveau > Autres comptes...

Configurez une Unix Mailspool (Movemail).

Voilà, Thunderbird va lire la boite locale.

Rediriger tous les mails vers usename@local

L’idée de base est de recevoir tous les mails envoyés par le serveur dans cette boite, afin de débugger facilement.

On va éditer la configuration de postfix dans le fichier /etc/postfix/main.cf pour y ajouter :

  1. virtual_alias_maps = pcre:/etc/postfix/virtual

Créer ensuite le fichier /etc/postfix/virtual et placez y le code suivant :

  1. /.*@.*/ username

Il faudra également installer le paquet postfix-pcre :

  1. sudo apt install postfix-pcre

Voilà, tout le trafic mail du serveur va aller dans votre boîte mail locale ! Beaucoup plus pratique pour débugger l’envoie de mail de vos applications :) !