Practical case of using network graphs
The Twitch API allows you to develop applications using some of the data made available by the streaming platform. I suggest you use this powerful API to see the links between streamer communities.
A demo of the final project is available at splitviewer.com. The sources are accessible on my github repository.
The principle is as follows:
- a streamer connects, the application is notified thanks to the twitch API.
- at regular intervals, the streamer’s viewers are recorded
- when the streamer disconnects, the operation stops
- every day, the application calculates for each streamer the percentages of viewers in common with the other…
Create your first hook and reuse it in your React apps
Goals
- Find out how to add hooks to our React components
- Write easy re-usable logic
- Use the localstorage API
You can test the application and see the sources of this tutorial.
Context
The hooks were introduced by the developers of React to allow a better organization of the code by exporting certain elements of component logic. Several hooks are developed and used within a project, and the simplicity with which they can be re-used make it a tool staple of the React ecosystem.
A bit of theory
We are going to set up a hook step by step to manage a system of favorites. Our application…
Améliorez l’expérience utilisateur et la réactivité de vos applications React avec un peu d’optimisme !
Objectifs
- Découvrir le principe de l’optimistic UI
- L’utiliser avec React et GraphQL pour augmenter l’expérience utilisateur
Contexte
Le temps de réponse entre le backend et le frontend est un des facteurs limitants l’expérience utilisateur. C’est encore plus vrai lorsque l’application ou le site web est destiné aux mobiles qui peuvent avoir une connexion dégradée.
Dès qu’un utilisateur effectue une action d’envoi de données au serveur, ce qu’on appelle une mutation, l’application cliente attend le retour du serveur pour mettre à jour l’interface. Si le temps de réponse du serveur est important, l’expérience utilisateur est mauvaise.
Un peu de théorie
L’application gère une liste de personnages, on…
Improve the user experience and responsiveness of your React applications with optimism !
Goals
- Discover the principle of optimistic UI
- Use it with React and GraphQL to increase user experience
Context
The response time between the backend and the frontend is one of the factors limiting the user experience. This is even more true when the application or the website is intended for mobiles which may have a degraded connection.
As soon as a user performs an action to send data to the server, this is called a mutation, the client application waits for the return of the server to update the interface. If the server response time is importantly, the user experience is bad.
A bit of theory
…
Start the machine learning adventure with Tensorflowjs and React, tutorial with demo and sources
Goals
- Discover some api’s function of Tensorflowjs
- Integrate Tensorflowjs in React
- Create and train a basic machine learning model
- Predict a value from linear data
Demo of application is available and sources are on my github.
Context
React is one of the most used javascript libraries to build a rich and powerful user interface. Tensorflowjs is the implementation of Tensorflow for NodeJS and to allow developers to use client-side machine learning models created on the server side.
Environment setup
Node.js must be installed to generate the project and manage dependencies.
The application is developped with React library, we will use Create React App to…
Commencez l'aventure ‘machine learning’ avec Tensorflowjs et React, tutoriel avec démo et sources
Objectifs
- Utiliser l’api de base de Tensorflowjs
- Intégrer Tensorflowjs dans React
- Créer et entrainer un modèle simple de machine learning
- Prédire une valeur à partir de données linéraires
Une démo de l’application et les sources sont disponibles sur github.
Contexte
React est une des librairies javascript la plus utilisée pour construire une interface utilisateur riche et performante. Tensorflowjs est l’implémentation de Tensorflow pour NodeJS et pour permettre aux développeurs d’utiliser côté client des modèles de machine learning créés côté serveur.
Préparation de l’environnement
Node.js doit être installé pour générer le projet et gérer les dépendances.
L’application est développée grâce à la librairie React, nous allons…
Amichaud Romain
French independant developer.
