marmelab.com

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

opentelemetrycompressionmicroservices
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

gsapjavascripthtml
Fullstack

OpenTelemetry in Practice: Instrumenting JavaScript Apps for Tracing

Cet article explique comment instrumenter les applications JavaScript, en particulier celles utilisant Node.js et React, avec OpenTelemetry pour la collecte et l'exportation des données de télémétrie. L'accent est mis sur la traçabilité, essentielle pour le débogage dans les applications multi-niveaux. OpenTelemetry fournit des SDK et des API pour faciliter l'intégration, ainsi qu'une documentation complète. L'utilisation d'un Collector est recommandée pour gérer les données de télémétrie de façon efficace. L'article guide également sur la configuration de l'instrumentation automatique pour des applications Node.js, tout en présentant comment visualiser les traces via Jaeger.

marmelab.com

opentelemetryjavascriptnode.js
Autre

React Admin March 2024 Update

La mise à jour de mars 2024 de react-admin présente de nouvelles fonctionnalités, des composants améliorés et un nouveau canal YouTube. Parmi les ajouts, un nouveau composant de datagrid basé sur AG Grid, une démo d'application de prise de notes, un support amélioré pour i18next et Cognito, ainsi que des éléments révisés pour le suivi des changements. La mise à jour met également l'accent sur la personnalisation des colonnes pour les utilisateurs et l'ajout d'une fonctionnalité de recherche pour une intégration dans des pages personnalisées.

marmelab.com

reactgraphqlag grid
Dev back

Automate Your Workflow With Git Hooks

L'article explique comment automatiser le flux de travail avec Git Hooks, en vérifiant les messages de commit et les types TypeScript avant de pousser le code. Il présente également Husky comme un moyen de partager facilement les hooks entre les membres de l'équipe et d'assurer la conformité des messages de commit avec des conventions standardisées. En utilisant ces outils, les développeurs peuvent améliorer la qualité de leur code et simplifier les révisions de pull requests.

marmelab.com

githuskytypescript
Dev back

Build Type-Safe SQL Queries With Kysely

L'article présente Kysely, un constructeur de requêtes SQL pour Node.js qui permet d'écrire des requêtes fortement typées en TypeScript. Il montre comment Kysely peut aider à éviter les erreurs de type liées aux changements dans le schéma de base de données et introduit un outil appelé kysely-codegen qui génère automatiquement des types à partir de la base de données. Kysely prend également en charge des types de colonnes spéciaux de PostgreSQL et fournit des fonctionnalités de migration, bien que sans CLI. Le résultat est une expérience de développement améliorée avec un code plus robuste et fiable.

marmelab.com

typescriptkyselypostgresql
Dev back

Write JavaScript Shell Scripts With Bun

L'arrivée de Bun Shell permet d'écrire des scripts en JavaScript rapidement. Bun, un runtime JavaScript performant, propose ce nouvel outil qui supporte la syntaxe UNIX et prétend être jusqu'à 20 fois plus rapide que d'autres solutions. Bien qu'il ne remplace pas encore complètement Bash en termes de performance, il offre un développement simplifié et une compatibilité avec TypeScript. Bun est en constante évolution et améliore l'expérience des développeurs avec des commandes UNIX intégrées.

marmelab.com

javascripttypescriptbun
Dev back

Demystifying Monitoring: From Basics to OpenTelemetry

Cet article explore l'importance du monitoring des applications, en commençant par les notions de base et en introduisant des outils avancés comme OpenTelemetry. Il aborde différents types de monitoring tels que les analyses, les probes HTTP, les logs, et les metrics, tout en soulignant comment ces outils interagissent pour assurer une meilleure performance des applications. OpenTelemetry, un projet open-source, unifie l'instrumentation pour différents APMs, permettant ainsi aux développeurs d'optimiser la collecte et la gestion des données de télémétrie sans dépendance à un langage spécifique.

marmelab.com

opentelemetrynew relickibana
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