Dev front

2024-11-08Dev front

Comment Svelte prépare l'avenir de JavaScript

Cet article explique comment Svelte propose une approche optimisée par rapport aux frameworks JavaScript traditionnels en allégeant la taille des bundles grâce à un système de compilation. SvelteKit, le framework officiel de Svelte, permet une gestion efficace du routage, des méthodes de rendu et améliore les performances des applications. Il s’inspire des meilleures pratiques des frameworks modernes pour offrir une expérience utilisateur fluide et rapide.

www.axopen.com

webpack sveltekit svelte

2024-11-08Dev front

La réactivité en Vue.JS

Cet article explique la réactivité dans Vue.js, en détaillant son concept fondamental qui permet de suivre automatiquement les changements et de mettre à jour le DOM. Il aborde les améliorations apportées avec Vue 3, telles que les proxies et l'API Composition, ainsi que les fonctions 'ref' et 'reactive' pour gérer les données réactives. De plus, il compare la réactivité dans Vue.js avec d'autres frameworks comme React et Angular, soulignant la simplicité et l'efficacité du système de réactivité de Vue.js, idéal tant pour les développeurs expérimentés que pour les débutants.

www.axopen.com

vue.js api composition javascript

2024-11-05Dev front

My Modern CSS Reset | jakelazaroff.com

Cet article présente une approche personnalisée de réinitialisation du CSS, inspirée par un article de Josh W Comeau. L'auteur explique comment son réinitialisation utilise des propriétés modernes du CSS et certaines conventions de framework CSS sans classe. Il détaille les différences par rapport aux réinitialisations classiques et propose des ajustements pour une base de styles plus efficace, incluant l'usage de propriétés logiques et des ajustements pour les éléments de formulaire.

jakelazaroff.com

css nesting cascade layers css

2024-10-31Dev front

Les raccourcis de propriétés (property shorthand) en JavaScript

La property shorthand en JavaScript, introduite avec ES6, permet de créer et initialiser plus facilement les propriétés d'objet en utilisant uniquement le nom de la clé, évitant ainsi la répétition du code. Cette syntaxe, bien supportée, cohabite avec d'autres méthodes comme la déstructuration. Les méthodes des objets bénéficient aussi de cette écriture concise. Sa validité peut être contrôlée par ESLint.

www.alsacreations.com

es6 eslint javascript

2024-10-31Dev front

Les Container Queries en CSS

Les requêtes de conteneur CSS permettent d'appliquer des styles à un élément en fonction des propriétés de son conteneur, offrant ainsi une flexibilité supplémentaire par rapport aux Media Queries traditionnelles. Cette méthode est particulièrement utile pour le Responsive Webdesign, car elle permet de styliser les composants selon leur environnement immédiat. De plus, les nouvelles unités de mesure CSS ajoutées facilitent la création de designs adaptatifs. De nombreux navigateurs récents supportent déjà ces propriétés, rendant leur utilisation pratique en production.

www.alsacreations.com

container queries css media queries

2024-10-31Dev front

Choisir entre balance et pretty pour text-wrap

Cet article présente les nouvelles propriétés CSS pour la gestion de l'enveloppement du texte via la valeur 'text-wrap' du CSS Text Module Level 4. Deux valeurs, 'balance' et 'pretty', sont détaillées pour équilibrer le texte dans un conteneur, avec des recommandations d'utilisation selon le contexte. Les performances et la compatibilité navigateur sont également abordées.

www.alsacreations.com

javascript html css

2024-10-31Dev front

Animer un bouton burger simple avec SVG et CSS

Cet article explique comment animer un bouton burger en utilisant SVG et CSS. Il détaille les étapes de création de l'icône en SVG et l'ajout de styles CSS pour réaliser des animations fluides. Le processus inclut également des considérations pour l'accessibilité et la gestion des événements via JavaScript, permettant au bouton de fonctionner comme un élément interactif. Les transitions sont expliquées en profondeur avec des instructions claires pour obtenir un résultat visuel harmonieux et efficace.

www.alsacreations.com

svg javascript css

2024-10-31Dev 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

javascript css

2024-10-31Dev 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 4 css

2024-10-31Dev 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

svg webpack nodejs