Article

Démos CodePen (collection)

10 janv. 2017 2 min de lecture

Écouter en version balado

Le carnet de laboratoire CodePen d'Antoine · 1:37 · voix synthétiques, script rédigé avec l’IA

Transcription

Sylvie : Avant que ce blogue existe, où Antoine mettait-il ses expériences front-end ? Sur CodePen, qu'il appelle son carnet de laboratoire public.

Thierry : Donc cette page, c'est un marque-page vers de vieux pens ?

Sylvie : En gros, oui. Elle rassemble des démos en direct de l'époque jQuery et JavaScript natif, vers 2016 et 2017. D'abord de petits essais d'interface, puis deux démos plus fournies.

Thierry : Quel genre de petits essais ?

Sylvie : Un formulaire d'inscription, une console façon terminal avec curseur clignotant, un en-tête fixe avec des liens d'ancrage, une barre de progression en quatre étapes, un sélecteur de plage de dates et un minuteur avec un court son à la fin du décompte.

Thierry : Et côté API du navigateur ?

Sylvie : Une démo de capture d'écran avec getDisplayMedia : aperçu vidéo, bordure rouge pendant l'enregistrement et un panneau de log pour les erreurs.

Thierry : Et les deux grosses démos ?

Sylvie : Un tableau noir en HTML5 canvas plein écran : couleur et épaisseur du trait, images à glisser, export PNG, ou tout effacer. Et une vague en Three.js, une grille de cubes verts animée par une onde sinusoïdale, avec souris, clavier, zoom à la molette et option manette pour la caméra.

Thierry : Chaque carte reprend le titre du pen, pas seulement le code dans l'adresse.

Sylvie : Et si on veut adapter une démo ?

Thierry : On peut la forker directement sur CodePen. D'anciens articles détaillés sur certaines de ces idées ont d'ailleurs été regroupés sur cette page.

Sylvie : La page complète contient toutes les démos en direct.

Collection de démos CodePen — éditeur et grille type vague Three.js (illustration du billet)

Table des matières

CodePen, c’était mon carnet de labo public avant ce blog Hugo — aperçu instantané, commentaires et forks sans déployer. Voici des intégrations CodePen live de l’ère jQuery et vanilla (~2016–2017) : petits labos UI, puis deux démos plus longues (Canvas et Three.js). Chaque carte reprend le titre du pen — pas seulement le slug. Forkez sur CodePen pour adapter.

1. Expériences UI et formulaires

Formulaire d’inscription (Log in Page Style)

Mise en page type Bootstrap : courriel, mot de passe, cases à cocher, boutons radio, liste déroulante et zone de texte — surtout de la pratique HTML/CSS.

Ouvrir sur CodePen

Console style terminal (Simple Console style)

Trois fausses lignes de terminal avec curseur clignotant ; la frappe dans un champ se reflète dans le texte du prompt.

Ouvrir sur CodePen

En-tête fixe avec liens d’ancrage

Longue page factice, barre de navigation noire qui se fixe après l’image d’en-tête, liens qui scrollent vers les sections.

Ouvrir sur CodePen

2. Widgets à la jQuery

Barre de progression par étapes

Indicateur horizontal en quatre étapes avec pastilles numérotées ; jQuery marque les étapes complétées et raccourcit le libellé du premier champ sur écran étroit.

Ouvrir sur CodePen

Sélecteur de plage de dates (double champ)

Élément personnalisé daterangepicker-two-input avec Moment.js et le plugin Date Range Picker — départ/retour et nombre de nuits.

Ouvrir sur CodePen

Minuteur (Bootstrap)

Saisie des minutes, démarrage avec Entrée, affichage min/sec, bouton reset et court son à la fin du décompte.

Ouvrir sur CodePen

3. API navigateur

Capture d’écran (ScreenShare)

Démo getDisplayMedia : démarrer/arrêter, aperçu vidéo, bordure rouge « enregistrement » et panneau de log pour les réglages de piste et les erreurs.

Ouvrir sur CodePen

4. Démos plus fournies

Tableau noir Canvas HTML5 (Blackboard Interactive)

Surface de dessin plein écran : couleur et épaisseur du trait, glisser des images importées, export PNG, effacer traits et images.

Ouvrir sur CodePen

Vague Three.js (3D Animation)

Grille de cubes verts animés par une onde sinusoïdale ; souris, clavier, zoom à la molette et option manette pour la caméra.

Ouvrir sur CodePen

5. Tous les pens (liens rapides)

Pen	CodePen
Formulaire d’inscription	BMdzwx^[1]
Console terminal	JxrqQx^[2]
En-tête fixe + ancres	ZEENwWB^[3]
Barre d’étapes	byVQKJ^[4]
Plage de dates	jjzxER^[5]
Minuteur	xMXNyy^[6]
Capture d’écran	qzQpYg^[7]
Tableau noir Canvas	MLEdxr^[8]
Vague Three.js	rNoqVOj^[9]

D’anciens articles détaillés sur certaines de ces idées ont été regroupés ici ; les alias du site pointent toujours vers cette page.

Références

BMdzwx. (10 janvier 2017). [Web page] codepen.io.
JxrqQx. (10 janvier 2017). [Web page] codepen.io.
ZEENwWB. (10 janvier 2017). [Web page] codepen.io.
byVQKJ. (10 janvier 2017). [Web page] codepen.io.
jjzxER. (10 janvier 2017). [Web page] codepen.io.
xMXNyy. (10 janvier 2017). [Web page] codepen.io.
qzQpYg. (10 janvier 2017). [Web page] codepen.io.
MLEdxr. (10 janvier 2017). [Web page] codepen.io.
rNoqVOj. (10 janvier 2017). [Web page] codepen.io.

Les références utilisent la date de publication de cet article.