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 “Handle HTML includes with Jade”

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.

Continue reading “Faire déborder des éléments en dehors d’un parent en overflow hidden”

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