Recherche : [exemple] - Les liens de Raphaël

Getting Creative With Small Screens | CSS-Tricks

L’article explore comment adapter des designs éditoriaux et distinctifs aux petits écrans, en évitant la monotonie des colonnes infinies. L’auteur, Andy Clarke, démontre que le design pour mobile ne doit pas se limiter à empiler du contenu verticalement, mais peut s’inspirer des magazines en créant des « moments » visuels uniques : utilisation du défilement horizontal pour regrouper des éléments (comme des pochettes d’albums), placement d’éléments hors-cadre pour conserver la personnalité du design, ou encore création de mini-maquettes défilables qui rappellent les doubles pages imprimées. Il propose des techniques CSS modernes comme les container queries, le shape-outside, et les media queries d’orientation pour recomposer dynamiquement les layouts selon l’espace disponible et l’orientation de l’écran. L’objectif est de préserver l’impact visuel et la narration, même sur mobile, en jouant sur la variété, le rythme et l’interaction.

responsive-web-design · design · mobile · container-query · shape-outside · media-query · layout · exemple · roundup

October 30, 2025 at 5:58:23 AM GMT+1 * · permalien

·

https://css-tricks.com/getting-creative-with-small-screens/

·

Frontend coding with GPT-5

L’article Frontend coding with GPT-5 du Cookbook OpenAI illustre comment GPT-5 révolutionne le développement frontend en générant des applications complètes, en réalisant des refactoring complexes ou des modifications précises dans des codebases existantes, le tout en une seule itération. Le guide met en avant des principes efficaces et recommande des bibliothèques (Next.js, React, Tailwind CSS, shadcn/ui, Radix Themes, etc.) pour orienter le modèle. Grâce à sa capacité multimodale (texte et image), GPT-5 permet de créer ou adapter des interfaces rapidement, comme un site de jeux rétro ou un jeu Snake stylisé, en respectant les thèmes et styles existants. L’outil se révèle particulièrement puissant pour transformer des prompts simples en résultats de qualité professionnelle, ouvrant la voie à une créativité accrue en développement frontend.

frontend · intelligence-artificielle · exemple · roundup

August 31, 2025 at 7:27:08 AM GMT+2 * · permalien

·

https://cookbook.openai.com/examples/gpt-5/gpt-5_frontend

·

Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead — Smashing Magazine

L'article explore l'utilisation des animations SMIL (Synchronized Multimedia Integration Language) dans les SVG pour enrichir les conceptions web. Contrairement aux idées reçues, SMIL n'est pas obsolète et offre des moyens simples et sémantiques d'ajouter des animations aux designs. L'auteur, Andy Clarke, démontre comment SMIL peut être utilisé pour créer des animations complexes, synchroniser plusieurs animations et contrôler les transformations et les chemins de mouvement. Il met en lumière les avantages de SMIL, notamment sa capacité à fonctionner sans dépendre de JavaScript ou de frameworks, et son intégration directe dans les fichiers SVG, ce qui le rend idéal pour des effets d'animation compacts et portables.