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. English version.
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 CodePenConsole 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 CodePenEn-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 CodePenWidgets à 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 CodePenSé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 CodePenMinuteur (Bootstrap)
Saisie des minutes, démarrage avec Entrée, affichage min/sec, bouton reset et court son à la fin du décompte.
Ouvrir sur CodePenAPI 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 CodePenDé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 CodePenVague 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 CodePenTous les pens (liens rapides)
| Pen | CodePen |
|---|---|
| Formulaire d’inscription | BMdzwx |
| Console terminal | JxrqQx |
| En-tête fixe + ancres | ZEENwWB |
| Barre d’étapes | byVQKJ |
| Plage de dates | jjzxER |
| Minuteur | xMXNyy |
| Capture d’écran | qzQpYg |
| Tableau noir Canvas | MLEdxr |
| Vague Three.js | rNoqVOj |
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.