Dev Breeze

Dev front

Mettre en surbrillance ligne et colonne au survol d'une table

Cet article explique comment mettre en surbrillance une ligne et une colonne d'une table au survol de la souris en utilisant des techniques CSS. Il présente des solutions simples et fonctionnelles, tout en comparant l'utilisation de JavaScript et de CSS pour obtenir cet effet. L'accent est mis sur la combinaison de certaines propriétés et pseudo-éléments CSS pour créer une illusion de surbrillance sur les deux axes. Des recommandations sont également fournies pour mieux gérer l'affichage dans certaines situations.

www.alsacreations.com

cssjavascript
Dev front

CSS :has() le sélecteur de parent, mais bien plus encore !

Le sélecteur CSS :has() permet de cibler des éléments parents ou frères dans le DOM en fonction des éléments qu'ils contiennent. Introduit dans les spécifications 'Selectors level 4', ce sélecteur ouvre de nouvelles possibilités en CSS, permettant des effets conditionnels selon la présence de descendants ou d'enfants. Sa compatibilité est assurée dans tous les navigateurs depuis décembre 2023. L'article explore divers cas d'usage et exemples pratiques de son application.

www.alsacreations.com

selectors level 4css
Dev front

Optimiser le poids des images SVG

Cet article discute de l'importance d'optimiser le poids des images SVG sur le web, en expliquant les différentes techniques d'optimisation, y compris l'utilisation d'outils comme SVGO et SVGOMG. Il aborde également l'exportation d'images SVG depuis des outils de design comme Figma et souligne l'impact de la performance sur l'expérience utilisateur.

www.alsacreations.com

svgwebpacknodejs
Dev front

Dialog, Modal, Popover : la synthèse

L'article présente les différentes notions liées aux éléments dialog, modal et overlay en HTML, en expliquant leurs caractéristiques, leur fonctionnement, et l'importance de l'accessibilité et de la gestion des interactions utilisateur sur une page web. Il décrit notamment les différences entre éléments modaux et non-modaux, ainsi que les techniques pour gérer l'inertie du contenu lors de l'affichage d'éléments de type overlay.

www.alsacreations.com

javascriptapihtml
Dev front

Les modes d'apparence Light mode et Dark mode

L'article explique le concept du mode sombre (dark mode) et ses bénéfices pour réduire la fatigue visuelle et la consommation d'énergie. Il aborde les façons d'activer cette fonctionnalité sur différents systèmes (Windows, MacOS) et dans les navigateurs (Firefox, Chrome), ainsi que l'utilisation des Devtools pour les développeurs. Il détaille aussi les couleurs système qui s'adaptent automatiquement au thème. Enfin, l'article parle de media queries pour détecter les préférences d'apparence de l'utilisateur et l'importance d'offrir aux utilisateurs la possibilité de choisir leur thème.

www.alsacreations.com

htmlcssjavascript
Dev front

Tout savoir sur les variables CSS (custom properties)

Cet article explique l'utilisation des variables CSS dans le développement web, soulignant leur praticité pour centraliser et réutiliser les styles, améliorer la maintenance du code et faciliter la personnalisation de thèmes. En comparant les variables CSS aux préprocesseurs comme Sass et LESS, il montre comment elles offrent un support natif sans compilation et permettent des modifications en temps réel. Les avantages des variables CSS incluent également leur flexibilité et leur compatibilité avec la plupart des navigateurs modernes, faisant d'elles un outil essentiel pour les développeurs.

www.alsacreations.com

lesssasscss
IA

IA : Interroger un LLM en JavaScript avec Ollama

Cet article explore comment interroger un modèle de langage localement grâce à Ollama, en utilisant JavaScript. Il décrit les étapes d'installation et d'utilisation de cette bibliothèque sur différentes plateformes, ainsi que les commandes essentielles pour gérer des modèles de langage. De plus, l'article offre un aperçu sur la création d'une application web simple qui interroge le modèle via Ollama, en ajoutant des éléments client-serveur, montrant que le développement d'interfaces utilisant des LLM est désormais accessible grâce aux technologies modernes.

www.alsacreations.com

javascriptnode.jsollama
Dev front

URL, URI, URN, quelles différences ?

L'article explique la différence entre URL, URI et URN, décrivant leur fonction et leur structure. L'URL sert d'adresse pour les ressources sur le web, l'URN identifie des ressources par leur nom sans spécifier comment y accéder, tandis que l'URI est le terme général qui englobe les deux. L'auteur évoque également l'invention des URL par Tim Berners-Lee et leur standardisation dans les RFC. Enfin, il souligne l'importance des URL bien structurées pour le référencement.

www.alsacreations.com

htmlcsshttp
Autre

Mermaid : diagrammes, schémas et graphiques dans markdown

Mermaid est un langage permettant de créer des diagrammes dynamiques en texte au sein de fichiers Markdown. Il prend en charge divers types de diagrammes (diagrammes de flux, organigrammes, graphiques Gantt) et s'intègre aisément dans des plateformes comme GitHub et GitLab. Grâce à sa syntaxe simple, les utilisateurs peuvent générer des diagrammes en SVG adaptatifs directement dans leurs fichiers README ou wikis, permettant une documentation claire et versionnable. Sa nature open-source permet également des personnalisations et l'utilisation de différents thèmes de couleur. Avec des éditeurs en ligne disponibles, les utilisateurs peuvent s'initier facilement à sa syntaxe tout en visualisant leurs créations.

www.alsacreations.com

markdownjavascriptmermaid