Mots-clé : html

Livre HTML5 gratuit : un exemple… exemplaire !

Voici un exemple à suivre : tout un livre écrit par la communauté, donc tout un chacun – et ce pourraît même être vous – qui explique de manière très compréhensible, le HTML5.

http://diveintohtml5.info/

symfony 2 : isset et null avec Twig

Une des questions qu’on cherche le plus souvent avec Twig, c’est comment vérifier si une variable existe ou pas ?

La réponse se fait en trois étapes :

  1. Vérifier si une variable existe (= si elle a été initialisée) :
    En php, c’est isset().
    En Twig, c’est defined.
    Exemple de code Twig :

    {% if app.user is defined %}
Code html
{% endif %}
  2. Vérifier si une variable n’est pas null (= elle est définie, mais contient la valeur null) :
    En php, c’est !is_null().
    En Twig, c’est is not null.
    Exemple de code Twig :

    {% if app.user is not null%}
Code html
{% endif %}
  3. Vérifier si une variable existe et qu’elle n’est pas null (= elle est définie, et contient autre chose que la valeur null) :
    En php, c’est isset() && (!is_null()).
    En Twig, c’est is defined and is not null.
    Exemple de code Twig :

    {% if app.user is defined and app.user is not null%}
Code html
{% endif %}

En espérant que cela aide du monde !

Symfony 2 : mon site de démonstration est sorti : livrepizzas

Mon site de démonstration pour l’utilisation du framework Symfony 2 est sorti.

http://www.livrepizzas.fr

Ce n’est qu’un site de démonstration, il est loin d’être parfait !

  • Bien sûr il est optimisé pour google et pour les mobiles et tablettes.
  • Bien sûr il est compatible w3c.
  • Bien sûr il est moderne et utilise du HTML5.
  • Bien sûr il est en responsive design.
  • Bien sûr c’est facile à faire. 🙂

Si vous avez des commentaires ou suggestions à faire, n’hésitez pas !

HTML5 et réalisations : un projet assez impressionnant

Une personne a développé en JavaScript un émulateur complet de la Super NES : JSNES.
Cliquez ici pour le voir : http://fir.sh/projects/jsnes/

Si vous regardez le code source, c’est impressionnant : il a vraiment retranscrit les registres, et le code assembleur de la SNES.
Voici un extrait que j’ai trouvé assez épatant :

switch(opinf&0xFF){
  case 0:{
    // *******
    // * ADC *
    // *******

    // Add with carry.
    temp = this.REG_ACC + this.load(addr) + this.F_CARRY;
    this.F_OVERFLOW = ((!(((this.REG_ACC ^ this.load(addr)) & 0x80)!=0) && (((this.REG_ACC ^ temp) & 0x80))!=0)?1:0);
    this.F_CARRY = (temp>255?1:0);
    this.F_SIGN = (temp>>7)&1;
    this.F_ZERO = temp&0xFF;
    this.REG_ACC = (temp&255);
    cycleCount+=cycleAdd;
    break;

  }case 1:{
    // *******
    // * AND *
    // *******

    // AND memory with accumulator.
    this.REG_ACC = this.REG_ACC & this.load(addr);
    this.F_SIGN = (this.REG_ACC>>7)&1;
    this.F_ZERO = this.REG_ACC;
    //this.REG_ACC = temp;
    if(addrMode!=11)cycleCount+=cycleAdd; // PostIdxInd = 11
    break;
  }case 2:{
    // *******
    // * ASL *
    // *******

Smarty 3.1 et les plugins : comment faire / howto

Sur la toute dernière version de Smarty (3.1), voici comment créer un plugin personnalisé.
Pour résumer, l’un de mes sites n’était pas assez optimisé.
Le code qui sortait était :

<body class="sbody">
    <div>
....
    </div>
....
</body>

J’ai donc ajouté le filtre d’optimisation qui supprime les espaces en début :

$this->smarty->loadFilter('output', 'trimwhitespace');

Le code de sortie est devenu :

<body class="sbody"><img src="/title.jpg" /><div>....</div>....</body>

Tout mise en une ligne, super !
Le seul problème, c’est que ça ne fonctionnait pas avec le code JavaScript, il faut en effet les retours à la ligne.
J’ai donc crée mon plugin qui ne fait que supprimer les espaces en début de ligne, et remplacer de « retour + line feed » (deux octets) de fin de ligne par un seul octet « retour ».

Voici le code, je vous laisse comprendre, c’est extrêmement simple :

/* Déclarer un plugin "block".
 * Block = il faut un début et une fin.
 * Ici : {triml} {/triml}
 */
$this->smarty->registerPlugin('block',
  'triml', array($this,'smarty_block_trim_l'));

Après avoir déclaré le plugin, il faut faire la fonction adéquate :

/**
 * Fonction de plugin smarty pour supprimer tous les espaces
 * en début de ligne entre les blocs {triml}{/triml}
 * "triml" = trimleft
 * Voir le constructeur et chercher $this->smarty->registerPlugin()
 *
 * @param array $params les paramètres qu'on passe à {strip_nl}
 * @param variant $content Le contenu qu'il y a dans le bloc
 * @param variant $template Le nom du template
 * @param variant &$repeat
 *
 * @return int Description retour
 */
public function smarty_block_trim_l(
  array $params, $content, $template, &$repeat)
{
  $content = preg_replace('/\n[\s]+/', "\n", $content);
  return $content;
}

Et voilà maintenant, vous pourrez aussi optimiser votre site comme un professionnel.
Bien évidemment le gain le plus gros est dans la compression (voir mod_deflate)

JavaScript : comment tester, et faire partager très rapidement son code

Supposons que vous vouliez montrer quelques exemples de code JavaScript, mais surtout, le partager rapidement.
C’est très simple : avec http://jsfiddle.net/, vous tapez votre exemple de code, et à la fin vous cliquez sur « sauver » et hop, une URL automatique est créée. Il vous suffit de copier colle le lien pour partager votre code exemple (ou votre code qui démontre qu’une librairie a un problème, par exemple).

HTML : tags <pre> / <code> : comment forcer retour à la ligne

Voici une astuce : vous avec une page qui s’affiche parfaitement, avec plein de choses, à part un petit détail plutôt gênant : vous avez des lignes de code qui « débordent » et lorsque vous voulez imprimer, comme, justement, ça déborde, vous n’avez pas le code en entier.

Il vous suffit de mettre ce code en dernier dans le css (afin qu’il « écrase » toutes les configurations précedentes des retour-chariot) :


pre, code {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Et voilà, vous pourrez imprimer votre document tranquillement, tout le code sera affiché.
Cet article fait suite à une question que j’ai posée sur stackoverflow.com. Cette dernière avait déjà été posée, et la réponse était valide : le lien est ici. Et la solution, carrément à la source, est ici.

Javascript : une page xhtml 1.0 valide

Vous voulez inclure directement du code dans votre page xhtml 1.0 et pourtant le validateur râle tout le temps et vous dit que votre page n’est pas valide ?
Voici l’astuce : il faut mettre les tags spécifiant qu’il y a des données « qu’il ne faut pas interpréter », c’est à dire que même s’il y a des caractères interdits (signe supérieur, inférieur, point-virgule, etc) ils seront ignorés. Ces fameux tags sont : <![CDATA[ et ]]>
Bien évidemment, comme ils sont dans une section JavaScript, il faut mettre les commentaires juste avant, commentaires qui sont autorisés :
//. Ce qui donne au final :
<script type="text/javascript">
// <![CDATA[
...
le script proprement dit
...
// ]]>
</script>