CODEPEN UN OUTIL DE PARTAGE DE CODE POUR LES DÉVELOPPEURS FRONTEND

CodePen est un outil de social coding qui permet de créer des snippets (bouts de code html/css/JS) permettant d’illustrer des tutoriels et autres techniques que les blogeurs, développeur frontend… souhaitent partager avec la communauté du web.

Il permet également d’implémenter ces « pens » sur votre site/blog pour afficher vos exemples d’astuces web en tout genre. Voyons cela plus en détails…

Intégration dans votre site internet

Pour intégrer cette fonctionnalité sur un site web codé from scratch, il vous faudra ajouter le script :

<script async src="//codepen.io/assets/embed/ei.js"></script>

Ensuite, il faudra copier/coller le code fourni dans le champs « Copy & Paste Code » en haut à droit de la lightbox qui s’ouvre. Il faudra toutefois penser à retirer l’insertion du script javscript que j’ai copié au-dessus de la capture d’écran. Cela ressemblera à ceci :

<p data-height="268" data-theme-id="0" data-slug-hash="ivcIA" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/Piju06/pen/ivcIA'>ivcIA</a> by Provost Pierre-julien (<a href='http://codepen.io/Piju06'>@Piju06</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

Vous avez également la possibilité de faire un embed du shortcode pour WordPress qui fonctionne avec le plugin qu’ils ont créés spécialement pour cette plateforme. Nous y reviendrons juste après.

Pourquoi retirer ce script à chaque fois ? Toute simplement parce qu’il est plus avantageux de le déclarer une seule fois dans le head ou le footer de votre page que de l’insérer autant de fois que vous aurez de pen dans votre page. Là, il s’agit clairement d’un soucis du détail en terme de performance web !

Plugin WordPress

Si par contre vous utilisez un site sous WordPress, il existe une alternative très simple pour intégrer « pens » sur votre blog. Voici un exemple de shortcode permettant d’intégrer un bout de code.

[codepen_embed height="268" theme_id="0" slug_hash="ivcIA" default_tab="result"]See the Pen <a href='http://codepen.io/Piju06/pen/ivcIA'>ivcIA</a> by Provost Pierre-julien (<a href='http://codepen.io/Piju06'>@Piju06</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]

Dans l’exemple ci-dessus, j’ai intégré un snippet d’un précédent article concernantl’intégration de font icons en css.