Dev front

"
Dev front

Angular 18, nouveautés et améliorations

Angular 18 introduit des améliorations significatives de performance, en particulier avec la fonctionnalité Zoneless qui remplace Zone.js pour une meilleure gestion des changements. Le nouveau Control Flow permet d'optimiser la construction de templates, tandis que les Deferrable Views facilitent le lazy loading des composants. Angular Material 3 est maintenant stable et compatible avec Zoneless. De plus, Angular 18 prend en charge TypeScript 5.4, améliorant ainsi les typages. Toutes ces nouveautés visent à fluidifier le développement et à améliorer l'expérience utilisateur.

www.axopen.com

typescriptangularmaterial design
"
Dev front

WebAssembly, le futur du web ?

Le WebAssembly (WASM) est un format de compilation permettant d'exécuter du code natif dans les navigateurs. Contrairement à un framework JavaScript, il offre une performance proche du natif tout en restant complémentaire à HTML, CSS et JavaScript. Créez du code avec des langages comme Rust ou C++ et compilez-le en WASM pour des applications web plus rapides, bien que des limitations comme l'accès aux Web APIs subsistent.

www.axopen.com

webassemblyrustc++
Dev front

Highlight Search Terms In Page Content

Cet article explique comment mettre en évidence des termes de recherche dans le contenu d'une page web. Il présente une bibliothèque JavaScript open-source qui permet de réaliser cette tâche sans modifier le DOM, ce qui est particulièrement utile dans des frameworks comme React, Vue ou Angular. L'auteur aborde les méthodes traditionnelles et les limitations de celles-ci, puis propose une solution utilisant l'API CSS Custom Highlight qui permet de styliser les mises en évidence via CSS. Bien que cette méthode ne fonctionne pas avec Firefox pour l'instant, elle est prometteuse pour améliorer l'interface utilisateur avec des résultats de recherche en direct.

marmelab.com

javascriptcssreact
Dev front

LIT: A Lightweight Library For Building Web Components

LIT est une bibliothèque développée par Google pour créer des composants web légers et rapides. L'article présente comment construire un composant accordéon avec LIT et l'utiliser dans des applications React et Vue. LIT permet de créer des composants réutilisables à l'aide de spécifications W3C, comme les éléments personnalisés et le Shadow DOM. L'article souligne la simplicité et la rapidité de LIT par rapport à d'autres bibliothèques, tout en permettant une intégration facile dans différents frameworks.

marmelab.com

littypescriptweb components
Dev front

Trigger Animations On Scroll With GSAP

Cet article explique comment utiliser la bibliothèque d'animations GSAP pour déclencher des animations au défilement. Il présente des concepts clés tels que l'utilisation de plugins pour animer les éléments uniquement lorsqu'ils deviennent visibles à l'écran. Les options comme 'trigger', 'start', et 'scrub' permettent de contrôler quand et comment les animations se déclenchent et se terminent, offrant ainsi des effets créatifs et interactifs lors du défilement de la page.

marmelab.com

gsap
Dev front

SnowCamp 2024 : Les talks à ne pas manquer

Le SnowCamp 2024 à Grenoble a présenté 70 talks, dont ceux sur la compression de données et OpenTelemetry. La compression est essentielle pour améliorer la performance web, mais un quart des sites ne l'appliquent toujours pas. OpenTelemetry permet une instrumentation déconnectée de la plateforme de monitoring. Des conseils ont été partagés pour améliorer l'accessibilité web, très insuffisante aujourd'hui.

marmelab.com

microservicesopentelemetrycompression
Dev front

GSAP Basics: Dive into Web Animations

Cet article présente les bases de GSAP (GreenSock Animation Platform), une bibliothèque JavaScript permettant de créer des animations web complexes et performantes. Il aborde les concepts clés tels que les 'tweens' et les 'timelines', tout en fournissant des exemples pratiques de syntaxe pour animer des éléments de façon fluide et contrôlée. GSAP est mis en avant pour sa facilité d'utilisation et ses fonctionnalités avancées, rendant l'animation plus accessible aux développeurs.

marmelab.com

gsaphtmljavascript
Dev front

New client-side hooks coming to React 19

Le nouvel article aborde l'introduction de nouveaux hooks côté client dans React 19, se concentrant principalement sur la récupération de données et la gestion des formulaires. Ces hooks visent à améliorer la productivité des développeurs React, y compris ceux travaillant sur des applications monopages. Des fonctionnalités comme 'use(Promise)', 'use(Context)', et des actions de formulaire sont introduites pour simplifier la gestion des formulaires et améliorer l'expérience utilisateur, ainsi qu'un bonus pour les transitions asynchrones. Ces hooks peuvent être appelés dans des boucles et des déclarations conditionnelles, rendant le développement plus flexible.

marmelab.com

reactjavascriptajax