WIKITOK : Naviguer sur Wikipédia comme sur TikTok
📌WIKITOK est une application web qui propose une interface inspirée de TikTok pour explorer des articles Wikipédia aléatoires en plusieurs langues.
SCHADCN : Créez votre bibliothèque de composants
📌 SHADCN est une bibliothèque de composants UI pour React, conçue pour offrir une expérience fluide et esthétique. Basée sur Radix UI et Tailwind CSS, elle permet d’intégrer rapidement des éléments modernes et accessibles dans une interface.
DIVHUNT : Constructeur de sites Web rapide et facile pour les codeurs et les non-codeurs
📌 DIVHUNT est une application qui permet de créer des sites web sans limites, en combinant flexibilité visuelle et puissance du code. Tout ce qui peut être codé peut être conçu visuellement avec Divhunt.
SPRINKLES : Personnaliser n’importe quel site web via CSS / JS
📌 SPRINKLES est une application MacOS qui permet d’ajouter du CSS et du JavaScript à n’importe quel site web afin d’en personnaliser l’affichage. Il suffit de stocker des fichiers .css et .js dans un dossier local, et SPRINKLES les applique automatiquement lors de la navigation.
BUILDER.IO : Plate-forme de développement visuel
📌 BUILDER.io est une application révolutionnaire pour le développement visuel, qui permet de transformer les processus web avec rapidité, efficacité et simplicité et de convertir automatiquement vos Figma en code.
MIDSCENE : Automatisation gratuite de votre navigateur
📌 Midscene.js s’appuie sur un modèle de langage multimodal (LLM) capable de “comprendre” intuitivement une interface utilisateur. Il suffit de décrire les interactions ou les formats de données attendus, et l’IA se charge de l’exécution.
CEREBRAS CODER : Générer des applications en moins d’une seconde
📌 CEREBRAS CODER est une application qui simplifie la création de vos projets en déléguant le code à une IA. J’ai fait un test avec le jeu 2048, et j’ai obtenu un résultat super en seulement 3 prompts, grâce à une génération de code instantanée et optimisée.
10 astuces de conception incontournables pour élever votre marque en 2025
Aujourd’hui, nous allons voir ensemble dix astuces de conception qui vous aideront à faire une bonne première impression.
v0 : Figma to Code
📌 V0 est une application révolutionnaire pour les développeurs et designers. Annoncée par Vercel il y a quelques mois, V0.dev utilise une technologie similaire à ChatGPT pour générer du code React dédié à l’interface utilisateur. Ce qui le distingue, c’est sa capacité à transformer directement des designs Figma en code React, facilitant ainsi la transition entre conception et développement.
PLASH : Un site web comme fond d’écran
📌 PLASH est une application permettant de transformer n’importe quel site web en fond d’écran dynamique pour votre bureau MacOS. Affichez vos actualités préférées, le fil Linkedin, votre agenda, ou même des paysages magnifiques en rotation. Vous pouvez même utiliser des GIF animés !
CODDY – Apprendre le dev’
📌 CODDY est la plateforme idéale pour apprendre à coder de manière ludique, efficace et accessible à tous, partout et à tout moment. Elle permet de coder n’importe où, n’importe quand, sans qu’aucune installation ne soit nécessaire, avec des cours simples et des projets concrets !
TWINE : Logiciel pour Livre dont vous êtes le héros
📌 TWINE est un outil open-source pour la création d’histoires interactives et non linéaires. Si comme moi, vous êtes passionné par les Livres dont vous êtes le Héros, TWINE offre une plateforme accessible à tous pour créer vos propres histoires, que vous soyez débutant ou expert.
GRADIENT ART : Editeur de gradient CSS avancé
📌 GRADIENT ART est un éditeur en ligne qui vous permet de concevoir des illustrations, des motifs, des icônes et bien plus encore, à l’aide d’un éditeur riche en fonctionnalités avec superposition de layer, outils de conception et stockage gratuit sur le cloud.
20 compétences techniques indispensables pour les UX designers en 2024
📌 Je vous mets ici une traduction d’un article vraiment sympa sur les compétences clés d’un UX designers. Je me suis permis également d’amender, de compléter et d’ajouter un certain nombre de commentaires 😉
STRUCTURE : Figma to HTML
📌 STRUCTURE est un plugin FIGMA qui vous permet de générer du code HTML et SASS directement à partir des designs Figma
PAPERCLIP : Une approche hybride de la conception et du codage d’interfaces utilisateur web
https://github.com/paperclip-ui/paperclip 📌 PAPERCLIP propose une approche hybride de la construction d’interfaces utilisateur qui vous permet de concevoir et de coder en parallèle. Il se concentre uniquement sur l’aspect visuel de votre application – juste du HTML, du CSS, que vous pouvez ensuite importer directement dans votre application type VSCODE. PAPERCLIP fonctionne actuellement avec React, d’autres…
PRELINE : Design system Open source basé sur Tailwind CSS
📌 PRELINE UI est un design system, open-source, basés sur le framework CSS Tailwind, et bien évidement FIGMA.
MILLE CHECK : Rapport de performance web
📌 MILLE CHECK est un service en ligne qui analyse la performance, l’éco-conception, le SEO, la Sécurité et l’Accessibilité de vos urls.
TLDRAW : tableau blanc collaboratif open source avec GPT 4
📌 TLDRAW est un service de tableau blanc en ligne qui offre une expérience de collaboration et, grâce à son dernier support GPT-4V, l’utilisateur peut dessiner n’importe quoi et tirer parti de la puissance de l’IA pour transformer le dessin en site web.
CSS LAYOUT : Bibliothèque de composants et animations CSS
📌 CSS LAYOUT est une librairie de centaines de composants pour les développeurs web qui cherchent à créer des sites web professionnels et visuellement attrayants. La collection comprend un large éventail de composants, tels que des menus de navigation, des boutons, des formulaires et des cartes, tous conçus à l’aide des techniques de mise en page CSS.
Codedex : La façon la plus amusante d’apprendre à coder
📌 CODEDEX est une toute nouvelle façon d’apprendre à coder pour les enfants et les adultes. Voyagez dans le monde fantastique de Python, HTML/CSS ou JavaScript, gagnez des points d’expérience pour débloquer de nouvelles régions et collectionnez tous les badges à votre propre rythme.
HOLOGRAM : Fonds d’écran et widgets personnalisés pour macOS
📌 HOLOGRAM est une application Freemium pour MacOS qui permet de personnaliser son environnement de bureau avec des widgets et des fonds d’écran personnalisables.
SUPER DESIGNER : Générateur d’assets 2D
📌 SUPER DESIGNER est un ensemble de générateurs d’assets 2D, gratuits pour créer des arrière-plans, des motifs, des formes, des images et bien d’autres choses uniques en quelques clics.
APPS GEYSER : html to apk
📌 APPS GEYSER est un service en ligne permettant de générer une application Android au format APK simplement à partir de code HTML.
KHROMA : palette de couleurs générée par IA
📌 KHROMA est un service en ligne utilisant l’IA pour apprendre les couleurs que vous aimez et crée des palettes qui vous plaisent et que vous pourrez combiner, rechercher et enregistrer vos préférées.
GLASS UI GENERATOR
📌 GLASSMORPHISM UI GENERATOR est un outil en ligne permettant de générer le code CSS d’une interface en glassmorphism qui est une nouvelle tendance de conception qui repose principalement sur l’effet de flou d’un élément et d’un arrière-plan.
IPREVIEW : Plus de formats supportés pour votre MacOS preview
📌 IPREVIEW est une application MacOS qui résout le problème de certains fichiers qui ne peuvent pas être prévisualisés dans macOS Finder, Quick Look et surtout Spotlight.
IPREVIEW vous aide à améliorer considérablement l’expérience macOS en fournissant la mise en évidence du code, la prévisualisation du rendu Markdown et Jupyter, la prévisualisation des images Webp et Avif et l’affichage de leur taille, la prise en charge d’une variété de fichiers de modèles 3D et la prévisualisation des animations, la prise en charge du mode sombre, etc.
WINDOWS 11 online ;)
📌 WIN11REACT est un projet open source réalisé dans l’espoir de reproduire l’expérience de Windows 11 sur le web, en utilisant des technologies web standard comme React, CSS et JavaScript. Donc si vous voulez “tester” Windows 11 directement depuis votre navigateur.
JSON VIEWER PRO : mise en forme de vos fichier Json pour une lecture simplifiée
📌 JSON VIEWER PRO est une extension chrome qui améliore l’expérience utilisateur de manipulation de vos fichiers JSON.
En effet JSON VIEWER PRO propose un code formater pour mettre en forme les réponses de vos API de manière structurée, et propose également une vue bien pratique sous forme d’arbre graphique.
DESECH : Outil de conception NoCode
📌 DESECH est un outil de conception #Freemium, destiné aux concepteurs et programmeurs web. C’est donc un outil No-Code / Low-Code qui propose un éditeur visuel reprenant les interfaces classiques d’outil de designer, mais également une vue HTML/CSS.
#cmondary
RELATE : Outil de conception Design to Code
📌 RELATE est un outil de conception visant à fluidifier les échanges entre designers et développeurs via une application Design to code.
Designer vos écrans comme vous le feriez habituellement sur Sketch ou Figma et obtenez un code HTML / CSS / JS directement exploitable. Pendant que vous concevez, le code est généré en arrière-plan et peut être publié n’importe où. Un véritable gain de temps pour votre équipe !
#cmondary
GRAPHITE SPACE : Editeur NoCode de siteweb
📌 GRAPHITE est un service #NoCode de création de #SiteWeb 100% gratuit !
GRAPHITE SPACE est un éditeur visuel créé, avant tout, pour les designers. Avec GRAPHITE SPACE, vous pouvez utiliser des calques, un positionnement absolu des élémentes et d’autres outils bien connus des éditeurs graphiques pour concevoir une maquette et obtenir une page Web pixel perfect.
#cmondary #Tools
MINIMAL TWITTER
📌 MINIMAL TWITTER est une #extension #chrome / #firefox modifiant l’apparence de #twitter pour la rendre plus simple, plus claire, plus lisible.
15 CSS full screen video background
📌 ARTICLE proposant pas moins de 15 #snippets différents en #CSS offrant la possibilité d’afficher une vidéo en plein écran en background.
Pas toujours optimal pour le #SEO, mais tellement immersif !!
Personnellement j’adore.
On ne pourra plus vous dire que c’est compliqué à implémenter 😀
#FullScreen #video #cmondary
WAVES : Animated background CSS / JS
📌 WAVES est un #snippet sur #Codepen proposant en quelques lignes de #HTML / #CSS / #JS une #animation de votre #background sous forme de vagues. Super sympa !
#cmondary
CSS BACKGROUNDS
📌 CSS BACKGROUNDS est un générateur de #backgrounds en #CSS.
Vous pourrez piocher parmi les thèmes déjà généré, ou créer le votre, selon vos paramètres.
#cmondary
3D Book CSS
📌 3D BOOK CSS est un petit service en ligne pour créer des mockups de couverture de bouquin directement en CSS.
Vous pouvez donc appliquer n’importe quelle image en ligne (il faut donner l’URL de l’image, pas d’upload possible) comme couverture de bouquin. Et pour ceux que le code intéresse, il est disponible directement sur le site.
#Code #cmondary
700+ icons svg
📌 CSS.GG est une #librairie, gratuite, en ligne proposant plus de 700 #icons sous différents formats : #SVG, #FIG, #XD, #CSS, etc
#UX#UI#cmondary
Changer l’apparence GMAIL via CSS
📌 ARTICLE offrant la possibilité de surcharger le CSS de gmail afin d’en changer l’apparence !
L’idée est sympa même si pour ma part j’utilise SIMPLIFY GMAIL, l’extension chrome, qui me fait ça très bien !
#Gmail #Chrome #Extension #Tips #cmondary
PALETTTE – Outil de palette de couleurs
📌 PALETTTE est un outil en ligne permettant assez simplement de créer une palette couleur et de l’exporter en JSON, CSS ou HEXA.
Duotone Tips
📌 ARTICLE vraiment sympa pour appliquer un filtre DUOTONE directement via le code CSS. Plus d’excuse pour votre équipe de dev 😉
Gradients party
📌 GRADIENTS est un service en ligne proposant des palettes de gradients de couleurs assez sympas, pouvait être téléchargés en CSS 😉
Grabient
📌 GRABIENT est un outil en ligne offrant une palette de gradients téléchargeable en CSS ou SKETCH. L’outil permet même de les éditer et les personnaliser, et ce, de manière assez intuitive.
Archetypeapp
📌 ARCHETYPE est un service gratuit en ligne, vraiment génial ! Il va vous permettre de mettre en forme votre texte : sélectionner la police, sa taille, les espacements, visualiser les versions mobiles et desktops ainsi créées. Enfin vous aurez la possibilité de l’importer directement dans Sketch, ou l’exporter au format CSS !! Petit bonus, sachez que toutes les polices de caractères présentées ici sont téléchargeables !!
The Mine : Jeu Codepen
📌 THE MINE est un jeu d’aventure plateforme entièrement réalisé en CSS
HORIZONTAL IMAGE ACCORDION
📌 HORIZONTAL IMAGE ACCORDION est un petit snippet sur CodePen réalisé entièrement en CSS. Pour ceux que cela intéresserait, 13 autres codes d’accordéons sont disponibles sur le lien suivant
CSS ONLY FLOAT LABEL
📌 CSS ONLY FLOAT LABEL est un code CSS hébergé sur le génial codepen illustrant merveilleusement bien l’animation d’un libellé passant de l’intérieur du champ de saisie , au dessus du champs de saisie. Personnellement, je considère comme une bonne pratique, à complété d’un control de surface indiquant si le champs est OK ou KO 😉
CSS GRADIENT
📌 CSS GRADIENT est un service web permettant de créer des gradients de couleurs linéaires ou radiaux et d’en obtenir le code CSS.
Morphing SVG
📌 Un article vraiment interessant vous aidant à créer un morphing à partir de forme SVG !
HERO PATTERNS
📌 HERO PATTERNS est un site proposant des patterns a utiliser en backgrounds. Le truc sympa c’est la possibilité de configurer ses couleurs et opacité, mais surtout l’export en SVG ou directement en code CSS.
Three-dots
📌 THREE DOTS est un petit projet sur Github sympa qui fourni 14 types différents d’animations CSS , des fameux 3 petits points qui vous invite à patienter. Il est amusant de retrouver sur une même base de 3 petits points , différentes conventions de signifiance des codes (Chargement, traitement en cours, écriture en cours, ….)
ANIMISTA
📌 j’avais déjà écris sur ANIMISTA, mais je crois bien qu’ils viennent d’ajouter de nouvelles animations CSS. Il est possible maintenant d’agir sur une animation du background, de texte en opening, en ending. Toujours aussi simple d’utilisation !
Keyframes
📌 KEYFRAMES est un petit outil qui remplacement aisément SPIRIT
TABLER est un dashboard responsive en HTML/CSS
📌 TABLER est un dashboard responsive en HTML/CSS et bien sûr open source 😉 J’aime bcp la réalisation sobre et fonctionnelle de ce dashboard. Je rêverais de savoir/pouvoir pluger ce dashboard sur une base de données GoogleSheet…
JAMICONS : 422+ icones
📌 JAMICONS est une bibliothèque de 422 icônes vraiment bien réalisés, dont je me sers actuellement pour un projet.
