Découvrez comment utiliser la Document Picture-in-Picture API pour afficher n’importe quel contenu HTML dans une fenêtre flottante toujours visible, et explorez des cas d’usage innovants qui réinventent l’expérience utilisateur sur le web.

Document Picture-in-Picture, le PiP pour n’importe quel contenu HTML

Une plongée dans les moments forts, les défis rencontrés et les idées de notre projet qui ont émergé au fil de cet intense week-end

Retour sur Shift 2025 - Le Hackathon Gen AI 

Comment fonctionne l’API use avec Next 15 et React 19 ?

Simplifiez la gestion des abonnements et boostez vos conversions avec RevenueCat : une solution tout-en-un pour iOS, Android et Stripe. 🚀

RevenueCat x Expo : une solution clé en main pour les paiements et abonnements

Metabase est un outil open source qui permet de créer des dashboards et d’exploiter ses données. Il est facile à utiliser et à configurer, et il offre de nombreuses fonctionnalités pour les utilisateurs.

Metabase: L’outil open source idéal pour créer des dashboards et exploiter ses données

Au fil des années, Expo a considérablement amélioré sa plage de fonctionnalités, devenant...

App universelle avec Expo

Bun est un runtime (et plus encore) JavaScript dont l'axe de communication principal est sa performance...

Bun : un outil tout-en-un JavaScript révolutionnaire ?

Découvrez comment faciliter la gestion de vos packages avec un monorepo Turbo et les workspaces Yarn

Comment mettre en place un monorepo avec Turborepo et Yarn ?

Retour d'expérience sur la création d'une GitHub Action ('Prisma drop migration warning') pour détecter les suppressions de colonnes/tables dans Prisma et améliorer la fiabilité des migrations.

Créer une GitHub Action pour surveiller les suppressions de colonnes / tables dans Prisma

Découvrez comment simuler une réponse streamée avec le SDK Vercel AI et useCompletion.

Comment simuler une réponse streamée avec le SDK Vercel AI

Découvrez comment l'architecture headless avec Shopify, associée à React et Next.js, peut transformer votre e-commerce en offrant une personnalisation et des performances optimales. Explorez également Hydrogen, le framework innovant de Shopify, et ses avantages pour le développement d'interfaces modernes.

Shopify et React: Une stack e-commerce moderne avec l'API Storefront

Gérez les notifications dans une WebView avec React Native

Chez Premier Octet, nous aimons partager nos articles avec le plus grand nombre, pour cela nous avons mis en place un workflow de traduction automatisée.

Notre workflow de traduction d’articles avec l’API OpenAI

Cet article explique pourquoi la mutation du state en React peut causer des problèmes et comment l'éviter.

Pourquoi muter le state pose problème en React

Cet article a pour objectif d’expliquer de manière claire et visuelle le fonctionnement d’un composant React.

Anatomie d'un composant React : une explication visuelle

Gestion des permissions simplifiée et nouvelles extensions : Tour d’horizon des nouveautés de Directus 11 le CMS headless open source.

Quelles nouveautés pour la dernière version du CMS headless Directus 11 ?

Découvrez comment ne pas faire confiance à vos utilisateurs et valider leurs données avec Zod.

Comment utiliser Zod pour valider des données en TypeScript

Vercel a dévoilé une nouvelle version de Vercel AI SDK, conçu pour simplifier le processus de développement d'applications IA en fournissant des outils et des bibliothèques prêts à l'emploi pour les développeurs. Je vous propose un tour d'horizon des exemples clés abordés par Nico Albanese, ingénieur chez Vercel, dans sa vidéo didactique publiée sur YouTube.

Comment construire des applications IA avec Vercel AI SDK — Part I

Dans cet article, nous allons voir comment créer un indicateur d'activité audio dans le navigateur, pour afficher une animation lorsqu'un son est joué. Très utile pour les applications de chat video ou de streaming audio.

Créer un indicateur d'activité audio dans le navigateur

Toute l’équipe de l'agence Premier Octet était présente à dotJS pour aiguiser son expertise technique JavaScript…

Retour sur dotJS 2024

Dans ce premier article d’une série consacrée à l’IA et l’UI, je vous propose de découvrir différentes manières d’intégrer ces modèles d’IA dans vos applications React pour améliorer l’expérience utilisateur.

AI et UI #1 - Filtres intelligents avec le SDK Vercel AI et Next.js

Voici un aperçu des toutes dernières annonces de Google I/O, avec une attention particulière sur les nouveautés HTML, CSS, ainsi que les améliorations de performance.

Les nouveautés de Google IO 2024 : CSS, HTML et performance

Dans cet article, vous ne trouverez pas de snippets ou de tips croustillants sur React, seulement le récit d'une aventure plutôt ordinaire à travers le développement et l'évolution d'un projet technique.

Retour d'expérience chez 20 Minutes : s'adapter au journalisme numérique

Le composant Image de Next.js simplifie la gestion des images, améliore les performances et renforce l'accessibilité, mais est souvent mal compris. Ce guide instructif explique de manière simple son fonctionnement, permettant ainsi aux développeurs de découvrir son plein potentiel et ses avantages

Le composant Next.js <Image>

React Native Vision Camera vient d’annoncer une toute nouvelle version. L’occasion de tester le retour du hook Skia et d’interagir avec les frames de la caméra...

React Native Camera Vision x Skia : les nouveautés de la v4

Après plusieurs années sur Linux, j'ai récemment décidé de repasser sur un environnement de travail MacOS. J'ai donc chercher à reconfigurer mon environnement de travail pour retrouver des méthodes similaires...

Environnement MacOS avec Yabai et SketchyBar

Après plus de 2 ans depuis sa dernière release officielle, l'équipe de Meta vient d'annoncer la version 19 de React

Nouveautés de React 19

Nous avons participé à la toute première édition de la React Connection qui se tenait…

Retour sur React Connection 2024

Les WebViews avec React Native, une solution pour intégrer un site web dans une application mobile.

Embarquez vos sites Web dans une application React Native avec les WebViews

Avec le récent passage en stable de App Router dans Next.JS, il s'est avéré nécessaire de...

Intégration de App Router au sein d'une librairie Next.JS

Nous sommes le 01 novembre 2023, pour nous, ainsi que pour nos copains de chez JoliCode c’est également la journée de solidarité, destinée au financement d’actions en faveur de l’autonomie des personnes âgées ou handicapées. À cette occasion nous consacrons cette journée à la réalisation de divers projets sortant de nos habitudes quotidiennes.

OctetDay 2023, journée de la créativité chez Premier Octet

L'audit d'une application web est un processus essentiel pour assurer la sécurité, la performance et la fiabilité d'une application.

Comment réaliser un audit technique

Medusa est une source d'innovation majeure pour les développeurs web et les boutiques de commerce électronique...

Découverte du e-commerce headless avec Medusa.js

En l'espace de presque deux ans, la popularité d'Expo a quintuplé, l'amenant au rang d'incontournable

Intégration de module natif avec Expo Modules

Ces deux dernières années ont vu des avancées significatives dans le domaine du traitement du langage naturel.

Intégrez vos données métiers au modèle OpenAI GPT avec Next.js

Focus sur les server actions, grande nouveauté de Next 13.4 et leur promesse de jours meilleurs pour les requêtes POST.

Next 13.4 : Tour d’horizon des server actions

Dans l'univers react-native, nombreuses sont les librairies UI proposant du contenu intéressant. Cependant...

Découverte de Tamagui

Filtres, transformations, machine learning, Replicate vous propose des effets pour tous les goûts...

Premiers pas avec Replicate

Une solution open source pour créer des interfaces d’administration en un claquement de doigts.

Next-admin: une admin clé en main pour vos projets

Dans l'ecosystème React Native, les outils d'instrumentation de tests end to end (E2E) sont...

Tests end to end avec Maestro

Nous vous proposons dans cet article de découvrir un pattern avancé de TypeScript...

Les branded types avec TypeScript

Découverte de l'univers 3D avec Expo-GL, React-three-fiber et Reanimated

Animation 3D avec React Native

Dans le cadre d'une mission nous avons eu l'occasion de travailler avec le CMS headless Directus

Directus : le CMS headless open source

Découverte des containers queries et de leur implémentation dans Tailwind

CSS Containers Queries avec Tailwind

C’est la première de React Native Connection, on vous raconte tout !

React Native Connection : première édition

La version 13 de Next introduit un nouveau routeur niché dans le dossier `app`.

Focus sur le nouveau routeur app de Next 13

Internationalisons nos applications Next : petit tour d'horizon de i18next

Internationaliser avec Next

Regardons dans notre boite à outils, ce qu'il est possible d'utiliser pour détecter et analyser la performance d'une application React Native.

Performances avec React Native

En 2021 Premier Octet lançait son premier projet avec Strapi, 1 an et demi plus tard place à la v4...

Strapi v4 :  Les nouveautés du CMS headless

Premier Octet était pour la première fois à React Advanced à Londres.

Retour sur React Advanced 2022

Gérer les données locales d’une application React a toujours été une question centrale d’architecture.

Contextes et performances

Dans le cadre d’un partage de nombreux composants entre différents applicatifs React, nous avons réalisé une bibliothèque de composants UI et haut niveau avec l’aide du package TSDX.

Créer un package avec TSDX

Depuis quelques temps déjà, nous utilisons Native-Base sur nos applications React-Native...

Améliorer les performances de Native-Base

Remix a fait son entrée dans les frameworks React cette année, avec des concepts qui se rapproche des standards du web. Découvrons le ensemble via une application simple d'e-commerce.

Création d'une application e-commerce avec Remix

Notre plateforme de cours / formations devient open-source.

Release de la V1 de Training-Platform

Après près de 3 ans d’absence, c’est donc le 17 juin 2022 que le React Summit est revenu...

Retour sur React Summit 2022

Chez Premier Octet nous sommes des aficionados de Chakra UI cependant nous avons eu l'occasion d'utiliser [Material UI](https://mui.com/) 4 puis 5 dans le cadre d'un projet client. MUI 4 souffrait de quelques lacunes concernant la personnalisation des composants, trois ans après la sortie de cette dernière, MUI nous offre une nouvelle version accompagnée de son lot de nouveautés ✨

Exploration des nouveautés apportées par Material UI v5

Nous sommes le 11 novembre 2021, jour férié pour une majorité des Français. Pour nous, ainsi que pour nos copains de chez JoliCode c’est également la journée de solidarité, destinée au financement d’actions en faveur de l’autonomie des personnes âgées ou handicapées. À cette occasion nous consacrons cette journée à la réalisation de divers projets sortant de nos habitudes quotidiennes.

OctetDay 2021, journée de la créativité chez Premier Octet

Stripe est une API qui facilite la configuration des différents paiements en ligne...

Découverte de Stripe avec Next.js

Créé il y a un peu plus de 5 ans, Expo n'a cessé de gagner en popularité auprès des développeurs React-Native.

Découverte du client customisé d'Expo

Chez Premier Octet comme vous le savez peut-être, nous sommes de grands fans de Chakra UI, une librairie de composants

Créer ses composants avec styled-system et styled-components

Nous vous présentions dans notre dernier article, le CMS headless Strapi que nous avions eu

Gestion de blocks CMS avec Strapi, Next.js et TypeScript

Chez Premier Octet nous avons récemment réalisé notre premier projet avec le CMS headless Strapi...

Tour d’horizon du CMS Headless Strapi

Après notre premier article sur les bases du mouvement avec Framer Motion, qui...

Framer Motion next level : des animations synchronisées et interactives

Vous avez besoin d'intégrer une font absente des systèmes Android et iOS ? Vous êtes...

Comment intégrer une font personnalisée dans une app React Native ?

Le débat existe depuis l'arrivée des progressive web apps aux alentours de 2015, et...

PWA et application mobile avec React Native

Ça y est ! 🎉 La V1 de Chakra UI est publiée avec de nombreuses nouvelles...

Release de la V1 de Chakra UI

En matière de design web et mobile, le mouvement est aujourd’hui la norme...

Framer Motion : Animez vos applications en toute simplicité

Connaissez-vous Storybook ? Cet outil open-source offre un environnement...

Améliorez vos composants avec Storybook

BlitzJS est un framework React basé sur Next.js qui se veut totalement fullstack contrairement...

Découverte de Blitz JS

Que diriez-vous de créer votre propre jeu rétro accessible directement sur le web ou sur une GameBoy ?...

Découverte de GB Studio

Next.js est un framework React open source qui a pour particularité d'être fullstack...

Next.js : du statique dynamique

Gatsby est un générateur de site statique (SSG) basé sur React. Il s’agit d’un projet open...

Découverte des Builds Incrementals dans Gatsby

Rappel : TypeScript est un analyseur de code statique avec quelques syntaxes...

Migration en douceur vers TypeScript

Vous êtes-vous déjà demandé s'il était possible de partager votre code JavaScript entre votre...

Partagez votre code JavaScript entre vos applications React Native, React et Symfony

Au-delà de la syntaxe et des structures, écrire du code n'est pas chose aisée. Cela demande une...

Pour un code simple

À l'heure où il ne fait aucun doute pour un développeur JavaScript que créer une API à l'aide...

Bootstraper une API avec NestJS

En l'espace de quelques mois, le développement de React Native s'est vu grandement amélioré...

Les nouveautés de React Native

Retour 8 ans en arrière où cet ami non-développeur venait vous voir en sortant...

Classification d'images avec React Native et CoreML sur iOS

Si vous regardez tout en haut de la pyramide, vous apercevrez les tests...

Tester son app React Native - End-to-End avec Detox

Chez Premier Octet, nous développons nos applications mobiles à l'aide de React Native...

Découverte de Flutter - CLI, DX et DevTools

Combien de fois avez-vous testé manuellement un workflow dans votre application...

Tester son app React avec Cypress

Premier Octet était à React Europe ces 23 et 24 mai 2019. Voici notre retour....

Retour sur React Europe 2019

J'ai eu l'occasion de donner une présentation au meetup mobile Romandie Beer situé...

La navigation dans les applications mobiles

Premier Octet était pour la première fois à React Amsterdam, voici notre...

Retour sur React Amsterdam 2019

JavaScript est un langage très puissant et flexible mais lors de la création d'applications...

Typage de bout en bout avec TypeScript, GraphQL et React

Cet article revient sur la réalisation de mon dernier petit projet IoT : le Cyclope...

Projet connecté : une carte Vélib tangible

Nous aimons bricoler, coder et tester de nouveaux concepts régulièrement. L'occasion s'est...

ISS Escape game

Caché dans un coin de votre OS, vous tombez sur un vieux fichier dont...

Please welcome the Screen Guru

Chez Premier Octet, bien que nous soyons spécialisés dans le développement...

Transformez une roue IKEA LUSTIGT en une roue connectée WiFi 🎡

L’équipe de Premier Octet était présente à la 7ème édition de dotJS. Une fois n'est pas coutume...

Retour sur dotJS 2018

L'API de React est loin d'être figée et ne cesse d'évoluer. En témoigne l'une des dernières nouveautés...

Plongée dans les Hooks React 🦑

Sous ses airs de release mineure, la version 16.6 de React sortie hier apporte...

 Les 5 nouveautés de React 16.6

Loin de la frénésie de l'écosystème React, la conférence Paris Web nous permet de prendre...

Retour sur Paris Web 2018

La sortie de l'application Framer X a fait des émules au sein de la communauté React...

React + Framer X : ça donne quoi ?

Dans une galaxie lointaine, entre le node_modules et les repository git...

All Star #1 : Rematch

Votre nouveau projet est dans les starting blocks, seulement voilà vous hésitez encore...

Premier Octet vous tire les cartes

C’est en cette rentrée de septembre que nous partageons nos premiers octets avec vous !...

Blog