Handle HTML includes with Jade

As a front end developer I'm sometimes confront to projects where I need to deal with only static HTML files. Being able to use inclusions in PHP makes it so much easier to maintain.

I’m a Git fan and I usually use Github as remote repository, it allows the creation of a gh-page branch. Basically it means you can have a static web page for your Github project for free. Really it's easy here's the Github doc.

Github pages are awesome but it's then impossible to use php includes in them...

Continue reading ...

Ras le bol de devoir return false sur les balises link au click event ?

Si vous aussi vous en avez marre de devoir spécifier (ou carrément d'oublier de spécifier) les return false sur les balises <a href="#"></a> pour éviter que l'internaute soit violemment expulsé en haut de la page quand il clique sur le lien en question, eh bien sachez qu'une lecture rapide de la doc du W3C concernant les balises link vous aurait appris que l'attribut href est optionnel !

Citation W3C :
"Authors may also create an A element that specifies no anchors, i.e., that doesn't specify href, name, or id. Values for these attributes may be set at a later time through scripts."
++

Traduction :
"Les auteurs peuvent aussi créer un <a> qui ne spécifie pas d'ancre, par exemple, qui ne spécifie ni href, ni name ou id. Les valeurs pour ces attributs peuvent être set up plus tard via des scripts."

Il vous est donc possible d'écrire vos liens comme ceci dans vos pages :

# html
<a id="bob" class="leponge">click me!</a>

# js
$('#bob').on('click', function(){
    noNeedToReturnFalseYou(ahahah);
});

# css
a { cursor:pointer; }

Et voilà plus besoin d'annuler le comportement habituel du lien en javascript au moment du click.

Faire déborder des éléments en dehors d’un parent en overflow hidden

Quel intégrateur HTML n'a pas un jour rencontré le cas de figure où il a besoin de faire déborder un élément par rapport à son parent et là, aïe... le parent en question est en overflow:hidden... Eh oui cette propriété fonctionne comme un masque qui cache tout ce qui dépasse (on s'en sert aussi beaucoup pour résoudre le fameux problème de float). Voie sans issue donc ? Non voilà une astuce :) Prenons un exemple d'une div parente en overflow:hidden qui contient une div enfant en position:absolute; et on la décale de manière à essayer de la faire déborder.

L'HTML

<div class="parent">
  <div class="enfant"></div>
</div>

Le CSS

.parent {
  position:relative;
  overflow:hidden;
  margin:0 auto;
  height:100px;
  box-shadow:inset 0px 0px 12px #555;
  background-color:white;
}
.enfant {
  position:absolute;
  top:-10px;
  left:-5px;
  width:30px;
  height:30px;
  background-color:rgba(30,110,190,.8);
}

Le rendu

Bon donc oui on se rend bien compte que ça ne marche pas. Le petit carré bleu est mangé dans l'overflow hidden de son parent.

La solution

Le trick se situe dans le fait de NE PAS définir de propriété "position" (absolute / static / relative / fixed) sur la div qui possède l'overflow hidden (juste ne rien mettre) et là... magie le contenu en absolute apparaîtra en dehors de l'overflow.

L'HTML

<div class="fakeParent">
  <div class="parent">
    <div class="enfant"></div>
  </div>
</div>

Le CSS

.fakeParent {
  position:relative;
}
.parent {
  /* position:relative; */
  overflow:hidden;
  margin:0 auto;
  height:100px;
  box-shadow:inset 0px 0px 12px #555;
  background-color:white;
}
.enfant {
  position:absolute;
  top:-10px;
  left:-5px;
  width:30px;
  height:30px;
  background-color:rgba(30,110,190,.8);
}

Le rendu

 

Attention justement à cet absolute qui du coup va remonter le DOM jusqu'à trouver un parent pour le contenir (en l'occurrence un parent en relative OU en absolute). Donc il est judicieux d'encapsuler le tout dans une nouvelle div parente sur laquelle on met simplement le position:relative. Et voilà, le tour est joué !

Simple hein ? Evidemment on est pas obligé de CRÉER une nouvelle div spécialement pour ça. On pourrait utiliser une div parente déjà existante dans la page et qui pourrait faire l'affaire. Mais bon ce n'est pas toujours possible donc on rajoute juste un parent supplémentaire (l'exemple de notre fakeParent) ce qui aura finalement peu d'impacte en terme de performance sur notre application / site web.

Ressources

Article de Thierry Koblentz en anglais énumérant les différentes manières de « clearer les float » et démontrant l'utilisation de la technique évoquée dans ci-dessus :
L'article lui même
Page de démo

HTML : balises à fermeture optionelle

Voilà une astuce pas très utile mais qui troue le fondement de bien des intégrateurs lorsqu'ils découvrent le pot-aux-roses.

Une partie des balises comprises dans la norme HTML ne doivent pas forcément être fermées !

En voici la liste :

</html>
</head>
</body>
</p>
</dt>
</dd>
</li>
</option>
</thead>
</th>
</tbody>
</tr>
</td>
</tfoot>
</colgroup>

Ainsi, ces deux syntaxes sont parfaitement valides :

<ul>
    <li>Des pâtes,</li>
    <li>Des poires,</li>
    <li>Des lamas ougandais.</li>
</ul>
<ul>
    <li>Des pâtes,
    <li>Des poires,
    <li>Des lamas ougandais.
</ul>

Donc, si vous voulez économiser quelques bits en omettant de fermer vos balises body et html, c'est toujours ça de pris. Pour le reste, j'aurais personnellement tendance à tout de même tout fermer pour la clareté du code.

Source: http://www.w3.org/TR/REC-html40/index/elements.html