Forem: Guillaume Sere

🧩 Building Mosaic Grid — A Rotation-Based Puzzle Game with Next.js

Guillaume Sere — Fri, 10 Apr 2026 14:58:44 +0000

I recently built Mosaic Grid, a browser-based puzzle game focused on placement and rotation mechanics. In this post, I want to walk through the technical decisions, challenges, and architecture behind it.

https://mosaic-grid.vercel.app/

🎮 Concept

The game is played on a 6x6 grid, where players must:

Drag & drop pieces onto the board
Rotate them in 90° increments
Avoid overlaps
Match an expected solution

At its core, it’s a mix of spatial reasoning and constraint solving.

⚙️ Tech Stack

Next.js (App Router)
React
TypeScript
CSS Modules / Tailwind (depending on your setup)
Custom state management (no heavy external libs)

🧠 Core Architecture

1. Grid Representation

The board is represented as a 2D array:

type Cell = { 
occupied: boolean;
 pieceId?: number;
 };
 const grid: Cell[][] = Array(6).fill(null).map(() => 
Array(6).fill({ occupied: false }) 
);

2. Piece Modeling

Each piece is defined as a matrix:

type Piece = {
  id: number;
  shape: number[][];
  rotation: number; // 0, 90, 180, 270
};

Example (2x2 block):

[
  [1, 1],
  [1, 1]
]

3. Rotation Logic

Instead of storing multiple orientations, I compute rotations dynamically:

function rotateMatrix(matrix: number[][]): number[][] {
 return matrix[0].map((_, i) =>
 matrix.map(row => row[i]).reverse()
 ); 
}

Each click applies a 90° rotation.

4. Drag & Drop System

I implemented a custom drag & drop system instead of relying on libraries.

Why?

More control over snapping behavior
Easier grid alignment
Better performance for small UI

Key ideas:

Track mouse position
Translate piece preview in real-time
Snap to nearest valid grid cell on drop

5. Placement Validation

Before placing a piece:

Check boundaries
Check collisions
Apply special rules (e.g. 2x2 pieces must align on even coordinates)

function canPlace(piece, x, y, grid) {
 for (let i = 0; i < piece.shape.length; i++) {
 for (let j = 0; j < piece.shape[i].length; j++) { 
if (piece.shape[i][j]) {
 if (!grid[y + i] || !grid[y + i][x + j]) return false;
 if (grid[y + i][x + j].occupied) return false;
 }
 }
 } 
return true;
 }

6. Game State

State is split into:

grid
pieces (with position + rotation)
progress (correct vs incorrect placements)

I avoided global state libraries and used React state + lifting state up, which was sufficient for this scale.

🎯 UX Details

Some small but important features:

Double-click to rotate placed pieces
Click to rotate pieces in the palette
Visual feedback:
1. 🟢 Correct placement
2. 🔴 Incorrect placement
Automatic “snap” to valid positions

🧩 Challenges

1. Rotation + Collision Combined

Handling rotation while ensuring valid placement required recalculating bounding boxes dynamically.

2. Snapping System

Making the drag feel natural without jitter or misalignment took several iterations.

3. Edge Cases

Partial out-of-bounds placement
Rotated shapes exceeding grid limits
Special constraints for certain pieces

🚀 What’s Next

Possible improvements:

Procedural level generation
Mobile touch support improvements
Animations (Framer Motion)
Score / timer system
Multiplayer or daily challenges

💬 Feedback

https://mosaic-grid.vercel.app/

If you’re into puzzle games or frontend architecture, I’d love your feedback!

What would you improve in this kind of system?
How would you handle state or performance differently?

webdev #nextjs #react #gamedev #javascript #indiedev

🌍 Building “Ma Zone” — A Geolocated Events Platform with Next.js

Guillaume Sere — Fri, 06 Feb 2026 11:51:02 +0000

I recently built Ma Zone, a web application that helps users discover events near their location and around the world.
The goal was to work on real-world challenges like geolocation, third-party APIs, maps, and SEO in a modern full-stack React environment.

Here’s a breakdown of the technical side of the project 👇

https://ma-zone-60.vercel.app/

🧱 Tech Stack

Next.js (App Router)
React + TypeScript
Leaflet + React-Leaflet for interactive maps
External Event APIs (geolocated event data)
Server-side data fetching with caching control
SEO optimization using Next.js Metadata API

🗺️ 1. Handling Maps in Next.js (SSR Challenge)

Leaflet depends on the window object, which doesn’t exist during server-side rendering.

To avoid the classic:

ReferenceError: window is not defined

I isolated the map into a Client Component and loaded it dynamically:

"use client";

import dynamic from "next/dynamic";

const Map = dynamic(() => import("./Map"), { ssr: false });

export default function MapWrapper() {
  return <Map />;
}

📍 2. User Geolocation

The app requests the user’s position via the browser API:

navigator.geolocation.getCurrentPosition(
  (position) => {
    setCoords({
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    });
  },
  () => {
    // fallback location (Paris)
    setCoords({ lat: 48.8566, lng: 2.3522 });
  }
);

These coordinates are then used to fetch nearby events.

🌐 3. Fetching Geolocated Events from APIs

On the server side, I aggregate event data from multiple providers and normalize the structure:

const mapEvent = (item: any) => ({
  id: item.id,
  title: item.name,
  description: item.description,
  date: item.date,
  latitude: Number(item.latitude),
  longitude: Number(item.longitude),
});

Data is fetched with cache: "no-store" to ensure fresh event listings:

await fetch(url, { cache: "no-store" });

🧭 4. Displaying Events on the Map

Each event becomes a marker:

<Marker position={[event.latitude, event.longitude]}>
  <Popup>
    <h3>{event.title}</h3>
    <p>{event.date}</p>
  </Popup>
</Marker>

This creates a visual discovery experience instead of a simple list.

⚡ 5. SEO with Next.js Metadata API

Even though the app is dynamic and map-heavy, SEO still matters.

export const metadata = {
  title: "Ma Zone – Events near you",
  description: "Discover concerts, festivals and local events around you.",
  openGraph: {
    title: "Ma Zone",
    description: "Find events near you",
    type: "website",
  },
};

This ensures proper indexing and rich previews when shared.

🧠 Key Challenges Solved

✔ Mixing client-only libraries (Leaflet) with SSR
✔ Handling browser geolocation safely
✔ Normalizing data from different event APIs
✔ Building a map-based UX instead of a traditional feed
✔ Keeping performance + SEO in a hybrid Next.js app

🚀 What’s Next

Planned improvements include:

Event detail pages with dynamic metadata
Filters (date, category, free/paid)
Favorites system
Smarter location-based suggestions

Link: https://ma-zone-60.vercel.app/

This project was a great way to explore real-world geospatial data, API aggregation, and modern Next.js architecture.

If you're building something similar or working with maps + Next.js, I’d love to exchange ideas!

nextjs #react #typescript #webdev #frontend #maps #geolocation #seo

World Radio 60 : explorer les radios du monde entier depuis votre navigateur 🎧🌍

Guillaume Sere — Fri, 19 Dec 2025 17:02:24 +0000

J’ai récemment terminé un projet personnel que je voulais partager : World Radio 60, un site web qui permet d’écouter et de découvrir des radios du monde entier, avec une interface simple et intuitive.

Pourquoi ce projet ?

Je voulais créer une plateforme où l’utilisateur peut :

parcourir les radios par pays et voir le drapeau correspondant ;
filtrer par ville, pays ou nom de radio ;
écouter un flux audio en direct directement depuis le site ;
bénéficier d’une navigation fluide et rapide, même avec des centaines de radios.

Stack et choix techniques

Pour ce projet, j’ai utilisé:

Next.js 13 (App Router) pour le rendu côté serveur et la génération de pages dynamiques.
React pour construire une interface réactive et interactive.
TypeScript pour plus de sécurité sur les types et éviter les erreurs courantes.
API interne pour contourner les problèmes de CORS et récupérer les flux des radios.
Tailwind CSS pour un style moderne, responsive et rapide à mettre en place.

Comment ça fonctionne ?

Le site récupère les lieux (places) depuis l’API Radio.Garden.
Les lieux sont regroupés par pays, avec une limite de villes pour optimiser les performances.
Pour chaque lieu, les channels sont récupérés via un endpoint interne Next.js.
L’utilisateur peut filtrer les radios par pays ou rechercher une station spécifique.
Un lecteur audio permet d’écouter le flux en direct.

Optimisations

🔒 Verrou anti-double fetch pour éviter les requêtes infinies en React Strict Mode.

⚡ Lazy loading et limites par pays pour réduire le temps de chargement.

✅ Gestion des erreurs et fallback pour les flux indisponibles.

Résultat

World Radio 60 est maintenant en ligne et permet de parcourir facilement les radios de tous les continents, tout en offrant une interface simple et rapide.

🌐 Découvrez-le ici : https://world-radio-60.vercel.app/

🚀 Building nasa-media — Exploring NASA’s public image archives with React

Guillaume Sere — Wed, 10 Dec 2025 11:01:31 +0000

I recently built nasa-media, a web application that allows users to explore NASA’s public image archive using the NASA Image and Video Library API.

The goal of this project was not just to consume an API, but to turn a raw data source into a clean, usable and user-friendly experience.

🛰️ About the NASA Image & Video Library API

NASA provides a public API that grants access to:

historical space missions
planetary exploration images
lunar archives (Apollo missions)
ISS, Mars rovers, astronomy media
The API endpoint used in this project is: https://nasa-media.vercel.app/

🎯 Project goals

My main objectives were:

✅ Make large archives easy to explore

✅ Keep the UI readable even with long descriptions

✅ Provide a fast and intuitive search experience

✅ Ensure the app works well on desktop and mobile

✅ Preserve clarity and performance despite pagination

⚙️ Tech stack

React
Fetch API
NASA Image & Video Library API
CSS (flexbox / responsive design)
React Router
Lottie animations

🔎 Key features

1. Search system

Users can search for specific topics or missions:

Moon
Apollo
Mars
ISS
Any NASA-related keyword
Each search resets pagination to keep results consistent.

2. Paginated results

The API supports pagination, which is handled client-side:

next / previous navigation
detection of remaining pages
automatic scroll-to-top on page changes
This keeps the UX smooth and predictable.

3. Enriched image cards

Each result card displays:

the image
the official NASA title
the full description from the archive
The descriptions are always visible, allowing users to understand the context of each image without extra clicks.

4. UX improvements

Some UX details that made a big difference:

smooth scroll between pages
responsive layout for small screens
click on image opens high-resolution version
clear page description explaining how to use the app
automatic closing of mobile navigation menu

🧠 What I learned

This project helped me reinforce several skills:
Working with real-world public APIs
Handling API inconsistencies and missing fields
Designing UI around long-form content
Improving UX without overcomplicating the interface
Managing state and pagination cleanly in React

It also reminded me that good UX matters as much as clean code, especially when dealing with large datasets.

🚧 Possible next improvements

Some ideas I’d like to explore next:
route-based detail pages for each image
lazy loading for images
SEO improvements for archive pages
filters by media type or NASA center
skeleton loaders for better perceived performance

🌍 Final thoughts

nasa-media is a personal project, but it reflects how I like to approach development:

clean UI, clear purpose, and meaningful data presentation.

If you enjoy working with APIs, open data, or frontend UX, I highly recommend exploring NASA’s public APIs — there’s a lot of fascinating content available.

Thanks for reading 🚀
Feel free to share feedback or ideas for improvement.

Link: https://nasa-media.vercel.app/

🚆 Nouvelles fonctionnalités sur mon site d'horaires SNCF en temps réel ! 🛠️

Guillaume Sere — Fri, 05 Dec 2025 11:41:58 +0000

Mon site web qui utilise l’API de la SNCF pour afficher les horaires des trains partout en France vient de recevoir plusieurs améliorations majeures pour rendre l’expérience utilisateur encore plus agréable. 🎯

🆕 Quoi de neuf ?

✅ Interface plus vivante avec animations Lottie et visuels interactifs
✅ Recherche de trajets possible par sélection de gares
✅ Affichage détaillé des trajets avec correspondances, quai et durée de chaque segment
✅ Suggestions de trajets populaires pour gagner du temps
✅ Chargement rapide et responsive sur tous les appareils

Le site reproduit fidèlement l’affichage que l’on retrouve dans les gares tout en ajoutant des fonctionnalités pratiques pour planifier vos voyages en quelques clics.

🔗 Idéal pour consulter les horaires, vérifier les retards ou préparer un trajet de dernière minute, où que vous soyez !

Lien: https://train-sncf.vercel.app/

📺 IPTV-60 – Mon lecteur IPTV personnel en ligne

Guillaume Sere — Wed, 26 Nov 2025 14:14:39 +0000

Salut la communauté ! 👋

Je voulais partager avec vous IPTV-60, un projet sur lequel j’ai travaillé récemment. C’est une application web qui permet de regarder des chaînes IPTV directement depuis votre navigateur et de gérer vos favoris de façon simple et rapide.

🚀 Fonctionnalités principales

Lecture en direct de chaînes IPTV via HLS.
Favoris : ajoutez et retirez vos chaînes préférées en un clic.
Filtres : recherchez par pays et catégorie.
Chargement optimisé : affichage progressif avec infinite scroll pour ne pas surcharger la page.
Catégories et pays : affiche le logo, le drapeau et le nom du pays de la chaîne.
Sous-titrage : support pour les flux avec sous-titres.

🛠 Tech Stack

Frontend : React, Next.js
Streaming : Hls.js
State management : Hooks + LocalStorage pour les favoris
Données : API publique IPTV-org (streams, chaînes, logos)

💡 Ce qui m’a motivé

Regarder la télévision en ligne peut vite devenir compliqué avec plusieurs apps et services. J’avais envie d’un lecteur centralisé, simple et rapide à utiliser directement depuis un navigateur, avec mes chaînes préférées toujours à portée de main.

🔧 Aperçu du projet

🌐 Essayer IPTV-60

Vous pouvez tester le projet ici : https://iptv-60.vercel.app/

💬 Conclusion

IPTV-60 est encore en développement, mais il fonctionne déjà très bien pour un usage personnel ou pour tester des flux IPTV.

Si vous avez des idées d’amélioration ou des suggestions (nouveaux filtres, thème sombre, etc.), je serais ravi d’en discuter !

Intégrer l'Intelligence Artificielle dans vos Applications TypeScript

Guillaume Sere — Fri, 14 Feb 2025 09:53:26 +0000

L'intelligence artificielle (IA) est en train de révolutionner le développement web, offrant de nouvelles possibilités pour créer des applications plus intelligentes et interactives. Dans cet article, nous allons explorer comment intégrer l'IA dans vos applications TypeScript, en mettant l'accent sur les outils et les techniques disponibles pour les développeurs.

Pourquoi Intégrer l'IA dans vos Applications ?

L'intégration de l'IA peut apporter plusieurs avantages à vos applications web :

Personnalisation : L'IA peut analyser les comportements des utilisateurs pour offrir des expériences personnalisées.
Automatisation : Automatisez les tâches répétitives pour améliorer l'efficacité.
Analyse Prédictive : Utilisez des modèles prédictifs pour anticiper les besoins des utilisateurs.
Interaction Naturelle : Intégrez des chatbots et des assistants virtuels pour une interaction plus naturelle.

Outils et Bibliothèques pour l'IA avec TypeScript

Pour intégrer l'IA dans vos applications TypeScript, vous pouvez utiliser divers outils et bibliothèques. Voici quelques-uns des plus populaires :

TensorFlow.js : Une bibliothèque JavaScript pour l'apprentissage automatique, compatible avec TypeScript. Elle permet d'entraîner et d'exécuter des modèles directement dans le navigateur.
Brain.js : Une bibliothèque de réseaux de neurones pour JavaScript, qui fonctionne bien avec TypeScript. Elle est idéale pour des projets plus simples et des prototypes.
ONNX.js : Permet d'exécuter des modèles ONNX (Open Neural Network Exchange) dans le navigateur. ONNX est un format standard pour les modèles d'IA.
API d'IA : Utilisez des API externes comme celles de Google Cloud AI, Microsoft Azure AI, ou IBM Watson pour intégrer des fonctionnalités d'IA avancées sans avoir à entraîner vos propres modèles.

Étapes pour Intégrer l'IA dans une Application TypeScript

Définir les Besoins : Identifiez les fonctionnalités que vous souhaitez ajouter avec l'IA. Cela peut être la reconnaissance vocale, l'analyse de sentiments, ou la recommandation de produits.
Choisir les Outils : Sélectionnez les bibliothèques ou API qui répondent le mieux à vos besoins.
Installer les Dépendances : Ajoutez les bibliothèques nécessaires à votre projet TypeScript via npm ou yarn.

npm install @tensorflow/tfjs

Développer les Fonctionnalités : Implémentez les fonctionnalités d'IA dans votre code TypeScript. Par exemple, pour utiliser TensorFlow.js :

import * as tf from '@tensorflow/tfjs';

// Charger un modèle pré-entraîné
const model = await tf.loadLayersModel('path/to/model.json');

// Préparer les données d'entrée
const input = tf.tensor2d([[1.0, 2.0], [3.0, 4.0]]);

// Faire une prédiction
const prediction = model.predict(input);
prediction.print();

Tester et Optimiser : Testez vos fonctionnalités d'IA et optimisez les performances pour garantir une expérience utilisateur fluide.

Voici un exemple concret d'utilisation de TensorFlow.js pour intégrer un modèle de reconnaissance d'images dans une application TypeScript. Nous allons utiliser un modèle pré-entraîné pour classer des images.

Exemple : Reconnaissance d'Images avec TensorFlow.js

Objectif
Créer une application web simple qui permet à l'utilisateur de télécharger une image, puis utiliser un modèle pré-entraîné pour classer cette image.

Initialiser le Projet

Commencez par créer un nouveau projet Node.js et installez les dépendances nécessaires :

Créer la Structure du Projet

Créez un fichier index.html pour la structure de base de votre application web et un fichier app.ts pour le code TypeScript.

index.html

app.ts

Compiler le Code TypeScript

Ajoutez un fichier tsconfig.json pour configurer la compilation TypeScript :

tsconfig.json

Compilez le code TypeScript :
npx tsc

Tester l'Application

Ouvrez index.html dans votre navigateur. Vous devriez pouvoir télécharger une image et voir la prédiction du modèle s'afficher.

Explication

TensorFlow.js : Nous utilisons TensorFlow.js pour charger et exécuter le modèle directement dans le navigateur.

MobileNet : Un modèle pré-entraîné pour la classification d'images, capable de reconnaître 1000 classes d'objets différents.

FileReader : Utilisé pour lire l'image téléchargée par l'utilisateur et l'afficher dans l'application.

Sortie de TypeScript 5.7 RC, nouvelle alternative à npm, avenir des frameworks JavaScript - Cette semaine en JS

Guillaume Sere — Tue, 26 Nov 2024 09:56:45 +0000

Bonjour les passionnés de JavaScript !
Bienvenue dans l'édition de cette semaine de « This Week In JavaScript »

Aujourd'hui, nous plongeons dans le dernier candidat à la sortie de TypeScript, une discussion stimulante sur l'avenir des frameworks à l'ère de l'IA et quelques outils incontournables pour booster votre jeu de développement.

Terrains RC Typescript 5.7

Vous pouvez désormais installer TypeScript 5.7 Release Candidate avec :
npm install -D typescript@rc

Voici les nouveautés :

Détection de bugs plus intelligente : de nouveaux contrôles détectent les variables jamais initialisées, même dans les fonctions profondément imbriquées.

Commodité sans build : pour les utilisateurs de ts-node et de Deno, l'option --rewriteRelativeImportExtensions convertit automatiquement les importations .ts en .js, permettant aux développeurs d'exécuter du code TypeScript de manière transparente dans plusieurs environnements comme Node.js et Deno.

ECMAScript 2024 : prise en charge complète de Object.groupBy et Promise.withResolvers, vous aidant à tirer parti des dernières fonctionnalités ECMAScript.

Le gestionnaire de paquets Vlt et le registre sans serveur

Isaac Schlueter , le créateur de npm , est de retour avec quelque chose de nouveau : vlt et le registre sans serveur (vsr) .

vlt Package Manager : une alternative plus rapide et plus élégante à npm avec des fonctionnalités telles que des performances améliorées et une syntaxe de requête de dépendance.

Registre sans serveur : compatible avec npm, ce registre privé et évolutif vous donne un contrôle total sur la distribution de vos packages.

Ces outils pourraient considérablement rationaliser la manière dont les développeurs gèrent les packages JavaScript en offrant des performances plus rapides et davantage de contrôle sur la distribution des packages privés.

Composante du parti

Si vous êtes un développeur front-end travaillant sur plusieurs frameworks, Component Party est votre nouveau meilleur ami. Il s'agit d'un outil qui compare la manière dont les tâches courantes sont effectuées dans différentes bibliothèques telles que React , Vue , Svelte et Angular .

Avec ses derniers ajouts (prise en charge de Svelte 5 et Angular 17) , il est plus à jour que jamais. Il offre une comparaison côte à côte de la manière dont les tâches courantes (comme le rendu d'un composant ou la gestion de l'état) sont gérées dans des bibliothèques telles que React , Vue et Svelte . Cela facilite l'apprentissage ou le changement de framework sans perdre de temps à parcourir la documentation.

Le débat sur le cadre de l’IA

Avec des outils comme Replit , Cursor , v0 et d’autres qui génèrent du code fonctionnel presque instantanément, un nouveau débat se prépare : les frameworks auront-ils encore de l’importance à l’avenir ?

Vitesse vs structure : le code généré par l’IA pourrait réduire la dépendance aux frameworks traditionnels pour certains projets, mais les frameworks resteront probablement essentiels pour les applications plus vastes et complexes. La véritable question est de savoir comment les frameworks évolueront parallèlement à ces outils d’IA.

Impact futur : À mesure que l'IA progresse, nous pourrions assister à un changement dans la manière dont les logiciels sont conçus : les frameworks pourraient évoluer ou devenir moins pertinents. C'est certainement un sujet à surveiller !

Outils et versions que vous devriez connaître

Voici quelques outils et versions clés qui méritent une place sur votre radar cette semaine :

Parcel 2.13.0 : cette mise à jour inclut une mise en cache de résolution plus rapide (qui accélère les builds en améliorant la façon dont les dépendances sont résolues) et ajoute la prise en charge de glob dans package.json, vous permettant de faire correspondre plus facilement les modèles pour les fichiers.

Lexical 0.20 : Lexical est un framework d'éditeur de texte extensible de Meta, axé sur la vitesse, l'accessibilité et la compatibilité multiplateforme. Il dispose même d'une variante Swift pour iOS, ce qui en fait un outil incontournable si vous créez des applications contenant beaucoup de texte.

@clerk/nextjs v6 : la dernière version de Clerk prend en charge Next.js 15 avec async auth(), le rendu statique par défaut et le pré-rendu partiel. Il est rétrocompatible avec Next.js 14, ce qui en fait une mise à niveau transparente pour toute équipe de développement

Storybook 8.4 : développeurs front-end, découvrez-le ! Storybook 8.4 propose désormais des tests de composants en un clic directement dans votre navigateur, une prise en charge complète de Svelte 5 et des mises à jour de React Native Storybook. De plus, la taille du bundle est désormais 50 % plus petite, ce qui le rend plus rapide et plus léger.

Jsep : vous souhaitez analyser des expressions en JavaScript ? jsep est une bibliothèque légère qui convertit les expressions x * (1 + 2) en AST. Elle est flexible, légère et prend en charge les opérateurs personnalisés, ce qui la rend parfaite pour les projets côté client et côté serveur.

Expo SDK 52 : développeurs React Native, cette version est pour vous ! Expo SDK 52 apporte à React Native 0.76 une amélioration des performances de 38 % grâce à sa nouvelle architecture. Cette version inclut également de nouvelles bibliothèques, des corrections de bugs et des améliorations de l'écosystème.

Effectuez une mise à niveau maintenant avec npx expo install expo@^52.0.0 --fix

Si vous avez trouvé ces mises à jour JavaScript utiles, donnez un vote positif à cet article pour aider les autres à le découvrir. N'oubliez pas de le partager avec vos collègues développeurs et restez à l'affût pour plus d'informations sur le monde JavaScript.

De la Maquette au Code : Comment Figma Simplifie l’Intégration Front-End

Guillaume Sere — Mon, 25 Nov 2024 13:23:53 +0000

Dans le développement web moderne, le passage de la maquette au code est une étape cruciale. Figma, outil de design collaboratif très populaire, a changé la donne en rendant ce processus plus fluide et collaboratif. Bien qu’il ne génère pas automatiquement du code parfait prêt pour la production, il fournit des outils et fonctionnalités qui facilitent grandement la vie des développeurs et des designers. Cet article explore comment Figma contribue à transformer des maquettes en projets web fonctionnels.

1. Exportation directe des propriétés CSS

Figma permet aux développeurs d’accéder rapidement aux propriétés CSS de chaque élément d’une maquette. Grâce au panneau Inspect, disponible dans l’interface ou via le partage des fichiers, vous pouvez :

Copier les styles CSS, tels que les tailles, couleurs, marges, polices, etc.
Exporter des images ou icônes en différents formats (PNG, SVG, JPG).
Obtenir des données spécifiques pour des plateformes mobiles (Swift pour iOS ou XML pour Android).

Ces outils réduisent considérablement les échanges entre designers et développeurs, en fournissant des spécifications précises.

2. Utilisation de Plugins pour aller plus loin

Pour automatiser ou simplifier davantage le processus, Figma dispose d’un riche écosystème de plugins. Voici quelques-uns des plus populaires :

Zeplin : Outil de collaboration entre designers et développeurs, il extrait les assets et fournit des snippets de code directement exploitables.
Anima : Plugin puissant permettant de convertir des maquettes en HTML, CSS, et parfois même en React ou Vue.js. Il gère aussi les animations.
Avocode : Offre une alternative pour transférer les designs Figma vers du code front-end.

Ces plugins permettent de passer rapidement de la conception statique à des fichiers exploitables par les développeurs.

3. Design Tokens et Workflow Automatisé

Figma s’intègre bien dans des workflows design-to-code grâce aux design tokens. Ces tokens représentent les styles (couleurs, typographies, tailles) sous une forme standardisée, exportable dans des frameworks front-end. Par exemple :

Utilisez des outils comme Style Dictionary pour convertir les styles Figma en SCSS ou JSON utilisables dans vos projets.
Associez Figma avec des pipelines CI/CD pour mettre à jour automatiquement les styles dans vos projets.

4. API Figma pour l’automatisation

Pour les équipes techniques, l’API de Figma offre des possibilités d’automatisation puissantes :

Extraire les propriétés d’un design.
Générer des fichiers de styles directement à partir des données Figma.
Intégrer des composants dans des bibliothèques front-end comme Storybook.

L’utilisation de l’API nécessite des compétences en développement, mais elle ouvre la porte à des intégrations sur mesure pour des workflows plus efficaces.

5. Limites du Code Automatique

Bien que certains plugins comme Anima génèrent du code HTML/CSS ou React, le code produit est souvent brut et nécessite un travail de refactoring. Voici pourquoi :

Le code généré manque parfois d’optimisation ou de sémantique.
Il est difficile d’intégrer directement ce code dans des projets complexes qui suivent des architectures spécifiques (comme BEM, Atomic Design, etc.).

Ainsi, Figma doit être vu comme un outil de spécifications plutôt que comme un générateur de code "clé en main".

6. Bonnes Pratiques pour une Intégration Réussie

Pour tirer le meilleur parti de Figma dans un workflow design-to-code, voici quelques conseils :

Utilisez des Components : Les "Components" et "Variants" dans Figma permettent de créer des éléments réutilisables, alignés avec des bibliothèques comme Material UI.
Collaboration constante : Encouragez les développeurs à explorer les maquettes directement dans Figma pour clarifier les spécifications.
Tests et révisions : Validez régulièrement que le design final correspond aux attentes fonctionnelles et techniques.

Conclusion

Figma révolutionne le passage de la maquette au code en offrant des outils collaboratifs, une intégration avec des plugins et une API puissante. Bien qu’il ne remplace pas le travail d’un développeur, il simplifie la communication et accélère le processus d’intégration. En maîtrisant ses fonctionnalités et en combinant ses atouts avec des plugins ou workflows personnalisés, vous pouvez transformer vos maquettes en sites web fonctionnels tout en gagnant du temps et en minimisant les erreurs.

Si vous êtes designer ou développeur, il est temps de tirer parti de ces outils pour optimiser votre workflow ! 🚀

Better – Un outil de révision de code basé sur l'IA

Guillaume Sere — Thu, 21 Nov 2024 10:03:47 +0000

Les revues de code ont toujours été cruciales pour maintenir des normes élevées et renforcer les meilleures pratiques dans un projet de codage. Cet article ne porte pas sur la manière dont les développeurs doivent réviser le code, mais plutôt sur la délégation d'une partie de celui-ci à l'IA.

Je ne dis pas que l'IA doit être utilisée à la place des outils de formatage et des linters. Au lieu de cela, elle doit être utilisée en plus de cela, pour détecter des éléments triviaux qui pourraient être manqués par un humain. C'est pourquoi j'ai décidé de suivre une action GitHub créer par Murtuzaali Surti qui examine le code d'une demande d'extraction et génère des suggestions à l'aide de l'IA. Laissez-moi vous expliquer comment procéder.

🚨 REMARQUE :

Cette action GitHub est désormais disponible sur la place de marché GitHub
C'est une action JavaScript - apprenez-en plus sur la création d'actions JavaScript sur GitHub

Obtenir la différence

Pour interagir avec l'API github, j'ai utilisé octokit, qui est une sorte de SDK ou une bibliothèque cliente permettant d'interagir avec l'API github de manière automatique.

Pour obtenir la différence de la demande d'extraction soulevée, vous devez transmettre l' Accepten-tête avec la valeur application/vnd.github.diffainsi que les paramètres requis.

Si vous n'êtes pas du tout familier avec les actions GitHub, voici une série d'actions GitHub 101 par Victoria Lo et c'est un bon début:

Une fois que j'obtiens le diff, je l'analyse et supprime les modifications indésirables, puis je le renvoie dans un schéma illustré ci-dessous :

Ignorer les fichiers

Ignorer des fichiers est assez simple. La liste d'entrée utilisateur nécessite une chaîne de motifs glob séparés par des points-virgules. Elle est ensuite analysée, concaténée avec la liste par défaut des fichiers ignorés et dédupliquée.

La liste des fichiers ignorés est ensuite utilisée pour supprimer les modifications différentielles qui font référence à ces fichiers ignorés. Cela vous donne une charge utile brute contenant uniquement les modifications souhaitées.

Générer des suggestions

Une fois que j'obtiens la charge utile brute après avoir analysé la différence, je la transmets à l'API de la plateforme. Voici une implémentation de l'API OpenAI.

Vous remarquerez peut-être l'utilisation du format de réponse dans l'implémentation de l'API. Il s'agit d'une fonctionnalité fournie par de nombreuses plateformes LLM, qui vous permet d'indiquer au modèle de générer la réponse dans un schéma/format spécifique. C'est particulièrement utile dans ce cas, car je ne veux pas que le modèle hallucine et génère des suggestions pour des fichiers ou des positions incorrects dans la demande d'extraction, ou ajoute de nouvelles propriétés à la charge utile de la réponse.

L'invite système est là pour donner au modèle plus de contexte sur la manière dont il doit effectuer la révision du code et sur les éléments à garder à l'esprit. Vous pouvez consulter l'invite système ici . L'invite utilisateur contient la différence réelle, les règles et le contexte de la demande d'extraction. C'est ce qui déclenche la révision du code.

Cette action GitHub prend en charge les modèles OpenAI et Anthropic. Voici comment elle implémente l'API Anthropic :

Ajout de commentaires

Enfin, après avoir récupéré les suggestions, je les nettoie et les transmets à l'API GitHub pour ajouter des commentaires dans le cadre de la révision.

J'ai choisi la méthode ci-dessous pour ajouter des commentaires car en créant un nouvel avis, vous pouvez ajouter tous les commentaires en une seule fois au lieu d'ajouter un seul commentaire à la fois. L'ajout de commentaires un par un peut également déclencher une limitation du débit, car l'ajout de commentaires déclenche des notifications et vous ne voulez pas spammer les utilisateurs avec des notifications.

Si cet article vous a plu, n'hésitez pas à me suivre pour plus de contenu ou à partager vos propres expériences dans les commentaires. 🙌

Les Nouveautés de React 19 : Une Révolution pour les Développeurs Frontend

Guillaume Sere — Wed, 20 Nov 2024 10:38:24 +0000

React 19, la dernière version de la célèbre bibliothèque JavaScript, introduit des fonctionnalités et optimisations majeures, améliorant significativement l'expérience des développeurs et des utilisateurs finaux. Voici un aperçu des innovations les plus marquantes.

Aperçu des fonctionnalités

⚛️Compilateur React
🗄️ Composants du serveur 🖥
🔄Traitement automatique par lots📦
🗒️Métadonnées SEO
📈Récupération de données améliorée avec Suspense
💼 Chargement des actifs
🪝 Crochets améliorés

⚛️ Compilateur React ⚛️

React19 se dote d'un nouvel assistant appelé React Compiler 💡. C'est comme un compilateur de code intelligent qui fait fonctionner votre code plus rapidement sans que vous ayez à faire de travail supplémentaire. Cela signifie que les personnes qui créent des sites Web peuvent écrire du code plus simple, et le compilateur s'assurera qu'il fonctionne vraiment bien. C'est comme avoir un assistant super intelligent qui nettoie et organise votre chambre pour vous, afin que vous puissiez vous concentrer sur le jeu et vous amuser avec React !

🗄️ Composants du serveur 🖥

React19 est doté du super pouvoir « 🖥Composants serveur ».

C'est comme avoir un outil de rendu intelligent qui fait une partie du travail avant même que vous le demandiez !

React19 restitue les composants de l'interface utilisateur sur le serveur, indépendamment de votre application côté client ou de la configuration traditionnelle de rendu côté serveur (SSR). En pré-rendant les composants sur le serveur, les RSC peuvent automatiquement améliorer les temps de chargement des pages.

Cela signifie que lorsque vous ouvrez un site Web, les images et les mots s'affichent beaucoup plus rapidement. C'est particulièrement utile pour les sites Web contenant de nombreuses fonctionnalités intéressantes. Le plus intéressant est que ces composants de serveur peuvent fonctionner de différentes manières en fonction des besoins du site Web.

Exemple de code : composants du serveur

Fichier : ServerComponent.server.js

Ce composant React est un Server Component. Cela signifie qu'il est rendu côté serveur avant d'être envoyé au client. Le rendu côté serveur est particulièrement utile pour :

Améliorer les performances : Les données sont générées côté serveur, ce qui réduit la charge sur le client.
SEO : Le contenu généré est directement visible pour les moteurs de recherche.

Ce composant est suffixé par .server.js, ce qui indique qu'il est destiné uniquement au rendu serveur. React utilise cette convention pour distinguer les composants rendus côté serveur de ceux rendus côté client.

Fichier : App.client.js

Importation de ServerComponent
Le composant ServerComponent (rendu côté serveur) est importé dans l'application React côté client.
Composant App
Le composant App est un Client Component, destiné à être rendu côté client. Il inclut le ServerComponent dans son rendu.
Rendu côté client avec ReactDOM
La méthode createRoot initialise l'application dans un élément DOM avec l'ID root. Ensuite, le composant App (et par extension, ses composants enfants) est rendu.

Comment ça fonctionne ?

Côté serveur :
ServerComponent.server.js est rendu sur le serveur, générant du HTML statique qui est envoyé au client.
Côté client :
Une fois le contenu reçu, React hydrate l'application, en ajoutant l'interactivité client.

Pourquoi utiliser Server Components ?

Optimisation des performances
Les calculs lourds ou les appels API sont gérés côté serveur, réduisant la latence pour l'utilisateur final.
Facilité de développement
La séparation entre Server et Client Components permet de mieux structurer l'application.
Flexibilité
React Server Components peuvent être combinés avec des frameworks comme Next.js pour profiter du meilleur des deux mondes (Static Site Generation + Server-Side Rendering).

🔄Traitement automatique par lots📦

React 19 introduit le traitement par lots automatique pour toutes les mises à jour dans les gestionnaires d'événements. Cela signifie que plusieurs mises à jour d'état dans un seul gestionnaire d'événements seront désormais traitées par lots automatiquement, ce qui entraînera moins de rendus et des performances améliorées.

Exemple de code : traitement par lots automatique

🗒️Métadonnées SEO 📝

React 19 est désormais une fonctionnalité AutoSEO qui permet de trouver des sites Web sur Internet ! Désormais, React simplifie les éléments sensibles au référencement et vous pouvez facilement contrôler les titres, les descriptions et d'autres éléments pertinents pour le référencement directement dans votre application React. De cette façon, lorsque quelqu'un recherche quelque chose sur Internet, il peut trouver les bons sites Web plus rapidement.

📈Récupération de données améliorée avec Suspense

React 19 s'appuie sur la fonctionnalité Suspense pour rendre la récupération des données plus simple et plus intuitive. Grâce aux nouvelles fonctionnalités de récupération des données, vous pouvez désormais gérer les opérations asynchrones de manière plus élégante au sein de vos composants.

Exemple de code : Récupération de données avec Suspense

💼 Chargement des actifs

React 19 dispose d'une fonctionnalité où les actifs se chargent automatiquement en arrière-plan afin que les sites Web fonctionnent plus rapidement et soient plus beaux !

Il commence à charger des images et d'autres éléments pour la page suivante pendant que vous regardez toujours la page actuelle. Cela signifie que lorsque vous cliquez pour accéder à une nouvelle page, elle s'affiche très rapidement !

Avez-vous déjà vu un site Web qui avait l'air bizarre pendant une fraction de seconde lors de son premier chargement ? Comme si les mots n'étaient pas au bon endroit ou que les couleurs étaient mélangées ? React 19 corrige également ce problème. Il s'assure que tout semble correct avant de vous le montrer.

Exemple de code : rendu simultané

De cette façon, le site Web peut charger des éléments en arrière-plan sans vous déranger pendant que vous l'utilisez. Concentrez-vous sur ce qui compte.

Crochets

React 19 introduit de nouveaux hooks pour aider à gérer les événements et les mises à jour optimistes de l'interface utilisateur plus efficacement. Le hook useEvent fournit un moyen plus simple de gérer les écouteurs d'événements, tandis que le hook useOptimistic permet de gérer les états optimistes de l'interface utilisateur.

Exemple de code : hook useEvent

Exemple de code : hook useOptimistic

Si cet article vous a plu, n'hésitez pas à me suivre pour plus de contenu ou à partager vos propres expériences dans les commentaires. 🙌

Pourquoi Cursor révolutionne l'expérience des développeurs

Guillaume Sere — Tue, 19 Nov 2024 13:42:01 +0000

Depuis quelques années, les outils destinés aux développeurs ne cessent d’évoluer. Parmi eux, Cursor, un éditeur de code encore relativement peu connu, commence à se démarquer. Si vous cherchez un éditeur rapide, moderne et adapté aux besoins des développeurs d’aujourd’hui, Cursor mérite toute votre attention. Voici pourquoi cet outil pourrait bien révolutionner votre workflow.

1. Une interface minimaliste et moderne

Cursor mise sur une interface épurée et une expérience utilisateur fluide. Contrairement à des éditeurs populaires comme Visual Studio Code ou IntelliJ IDEA, Cursor n’est pas encombré de fonctionnalités superflues dès son installation.

Avantages :

Moins de distractions pour se concentrer sur le code.
Une navigation intuitive et simple à personnaliser.

L’interface par défaut est un véritable vent de fraîcheur pour ceux qui souhaitent un éditeur rapide et sans surcharge visuelle.

2. Performances impressionnantes

Cursor a été conçu avec la vitesse en tête. Qu’il s’agisse d’ouvrir un projet complexe ou d’exécuter des tâches courantes, il excelle là où d'autres éditeurs peuvent souffrir de lenteurs.

Pourquoi c'est important ?

Un temps de chargement minimal.
Une exécution fluide même pour les projets de grande envergure.
Une gestion optimisée des extensions pour éviter les ralentissements.

3. Intégration de l’intelligence artificielle

Cursor va au-delà de la simple édition de code grâce à une intégration native de l’IA. Cet outil propose des suggestions contextuelles et des assistants intelligents pour :

Identifier les bugs potentiels.
Générer du code à partir de descriptions en langage naturel.
Répondre aux questions directement dans l’éditeur (similaire à GitHub Copilot, mais mieux intégré).

Imaginez un assistant IA qui comprend votre projet et vous guide en temps réel. Avec Cursor, c'est une réalité.

4. Compatibilité avec les projets modernes

Cursor prend en charge les principaux langages et frameworks utilisés aujourd'hui, notamment :

JavaScript, TypeScript, Python.
Les frameworks modernes comme React, Vue.js, et Next.js.

De plus, l'éditeur propose une configuration simplifiée pour :

Linting et formatage (ESLint, Prettier).
Gestion des dépôts Git avec une interface intuitive.

5. Une alternative aux éditeurs classiques

Pourquoi choisir Cursor au lieu de Visual Studio Code ou JetBrains ? Voici quelques points qui le distinguent :

5. Suggestions intelligentes avec l’IA

Cursor intègre une intelligence artificielle directement dans l’éditeur pour améliorer l’efficacité des développeurs. Voici un exemple :

En tapant cette description dans Cursor, l’éditeur pourrait automatiquement générer :

6. Refactorisation en un clic

Imaginez un projet React avec des composants mal organisés. Avec Cursor, vous pouvez utiliser son assistant IA pour améliorer le code.

Avant refactorisation :

Demande dans Cursor : “Refactorise ce composant pour utiliser un hook.”

Après refactorisation :

7. Détection et correction d’erreurs

Cursor peut détecter des erreurs potentielles et proposer des corrections automatiques. Par exemple, erreur dans le code :

Cursor soulignera l’erreur d’indentation et proposera :

8. Génération de tests unitaires

Cursor peut également vous aider à créer des tests pour votre code.

Code à tester :

Demande à l’IA : “Génère un test unitaire pour cette fonction avec Jest.”

Résultat généré :

9. Recherche de documentation intégrée

Cursor permet également de rechercher rapidement dans la documentation sans quitter l’éditeur. Par exemple :

Tapez une commande comme “Qu’est-ce que useState dans React ?”
Cursor affichera un résumé de la documentation officielle de React directement dans l’éditeur.

10. Collaboration simplifiée avec des commentaires IA

Lors d’une révision de code, Cursor peut générer des commentaires automatiques pour expliquer des sections complexes.

Exemple :

Demandez à l’IA : “Ajoute des commentaires pour expliquer ce code.”

Résultat :

Conclusion : Cursor, l’éditeur de demain

Cursor ne cherche pas à remplacer vos outils actuels, mais à offrir une expérience moderne et simplifiée. Si vous êtes un développeur à la recherche d’un éditeur performant et axé sur la productivité, il est temps de tester Cursor.

👉 Téléchargez Cursor https://www.cursor.com/ et découvrez comment il peut révolutionner votre manière de coder.

Forem: Guillaume Sere

🧩 Building Mosaic Grid — A Rotation-Based Puzzle Game with Next.js

🎮 Concept

⚙️ Tech Stack

🧠 Core Architecture

1. Grid Representation

2. Piece Modeling

3. Rotation Logic

4. Drag & Drop System

5. Placement Validation

6. Game State

🎯 UX Details

🧩 Challenges

🚀 What’s Next

💬 Feedback

webdev #nextjs #react #gamedev #javascript #indiedev

🌍 Building “Ma Zone” — A Geolocated Events Platform with Next.js

🧱 Tech Stack

🗺️ 1. Handling Maps in Next.js (SSR Challenge)

📍 2. User Geolocation

🌐 3. Fetching Geolocated Events from APIs

🧭 4. Displaying Events on the Map

⚡ 5. SEO with Next.js Metadata API

🧠 Key Challenges Solved

🚀 What’s Next

nextjs #react #typescript #webdev #frontend #maps #geolocation #seo

World Radio 60 : explorer les radios du monde entier depuis votre navigateur 🎧🌍

Pourquoi ce projet ?

Stack et choix techniques

Comment ça fonctionne ?

Optimisations

Résultat

🚀 Building nasa-media — Exploring NASA’s public image archives with React

🛰️ About the NASA Image & Video Library API

🎯 Project goals

⚙️ Tech stack

🔎 Key features

🧠 What I learned

🚧 Possible next improvements

🌍 Final thoughts

🚆 Nouvelles fonctionnalités sur mon site d'horaires SNCF en temps réel ! 🛠️

📺 IPTV-60 – Mon lecteur IPTV personnel en ligne

Salut la communauté ! 👋

🚀 Fonctionnalités principales

🛠 Tech Stack

💡 Ce qui m’a motivé

🔧 Aperçu du projet

🌐 Essayer IPTV-60

💬 Conclusion

Intégrer l'Intelligence Artificielle dans vos Applications TypeScript

Pourquoi Intégrer l'IA dans vos Applications ?

Pour intégrer l'IA dans vos applications TypeScript, vous pouvez utiliser divers outils et bibliothèques. Voici quelques-uns des plus populaires :

Étapes pour Intégrer l'IA dans une Application TypeScript

Voici un exemple concret d'utilisation de TensorFlow.js pour intégrer un modèle de reconnaissance d'images dans une application TypeScript. Nous allons utiliser un modèle pré-entraîné pour classer des images.

Sortie de TypeScript 5.7 RC, nouvelle alternative à npm, avenir des frameworks JavaScript - Cette semaine en JS

Terrains RC Typescript 5.7

Le gestionnaire de paquets Vlt et le registre sans serveur

Composante du parti

Le débat sur le cadre de l’IA

Outils et versions que vous devriez connaître

De la Maquette au Code : Comment Figma Simplifie l’Intégration Front-End

1. Exportation directe des propriétés CSS

2. Utilisation de Plugins pour aller plus loin

3. Design Tokens et Workflow Automatisé

4. API Figma pour l’automatisation

5. Limites du Code Automatique

6. Bonnes Pratiques pour une Intégration Réussie

Conclusion

Better – Un outil de révision de code basé sur l'IA

Obtenir la différence

Ignorer les fichiers

Générer des suggestions

Ajout de commentaires

Les Nouveautés de React 19 : Une Révolution pour les Développeurs Frontend

🗄️ Composants du serveur 🖥

🔄Traitement automatique par lots📦

🗒️Métadonnées SEO 📝

📈Récupération de données améliorée avec Suspense

💼 Chargement des actifs

Pourquoi Cursor révolutionne l'expérience des développeurs

Salut la communauté ! 👋