Forem: Tawaliou

[Boost]

Tawaliou — Fri, 26 Sep 2025 14:14:09 +0000

Getting Started with Vagrant

ZINSOU Trinité ・ Sep 14

#tooling #ubuntu #devops #vagrant

Some tips when using T3 Stack: Part 1

Tawaliou — Sat, 04 Mar 2023 09:44:00 +0000

orignally published here.

May be these tips are not specifically related to T3 Stack but concern the stacks it uses

In my last article, I introduced the side project that I'm building and the tools (stacks) I'm using. And explain why I choose T3 Stack to build the project. Good, in this article I'll share some tips I discovered using T3 Stack when building the project. Let's go!

Reminder

NextAuth needs/uses for authentication a model User with some pre-configured columns like name, image, email, etc.
With T3 Stack we use Prisma as ORM
We have added some columns to the User model like the username

NextAuth and Module augmentation

NextAuth is used for authentication in Next.js applications and is packed in T3 Stack. When using NextAuth, the hook useSession returns session data that can be checked to verify if someone is signed like this:

const index = () => {
    const { data: session } = useSession()
    if (session) {
        return <div>You're signed as {session.user.email}</div>    
    }
    return <div>Not signed, we'll redirect you</div>
}

But for security reasons, the session data returned (by default) contained just

export interface DefaultSession {
    user?: {
        name?: string | null;
        email?: string | null;
        image?: string | null;
    };
    expires: ISODateString;
}

So what can we do if we want to add a new property like the username which is a column of our User model that we define with Prisma?

T3 dedicated's section to NextAuth and NextAuth itself already documented this part. To do it, we'll use module augmentation offered by TypeScript which allows a user to override classes, modules,... types that he/she doesn't access (maybe from a lib). To do it,

We can override the Session interface in the next-auth module declaration inside the file types/next-auth.d.ts.
```
import { DefaultSession } from "next-auth";

declare module "next-auth" {
  interface Session {
    user?: {
      id: string;
      username: string | null  
    } & DefaultSession["user"];
  }
}
```
We import next-auth module and override the Session interface by adding not only a username but also merging the type of user in DefaultSession so we still have the default properties of the user provided by NextAuth.
Then in the /pages/api/auth/[...nextauth].ts file we can override session callback by adding username like this
```
callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
        session.user.username = user.username;
      }
      return session;
    },
  },
```
But if you leave it like this, you'll get this warning from TS: Property 'username' does not exist on type 'User | AdapterUser'. Why?

Because, if you go to the TS definition of User (used by Nextauth) you'll see that it extends DefaultUser which has the following definition (the minimum)
```
export interface DefaultUser {
    id: string;
    name?: string | null;
    email?: string | null;
    image?: string | null;
}
```
So to fix this error, I think you guess the solution, yes: override the declaration of User as we did it with Session little above.
So back to the types/next-auth.d.ts, we can override User after the Session interface (inside next-auth declaration) like this
```
  interface User extends DefaultUser{
    username: string | null
  }
```
We've just override User interface by firstly extending DefaultUser (provided by NextAuth) and secondly adding a username.

Let's move to another tip.

Models types deductions (with tRPC)

With Prisma, we define our tables as models inside schema.prisma file but we don't have a direct access to their types in TypeScript because it generates types definitions in node_modules/.prisma/client/index.d.ts by default (read this link if you want to change this output file location). But there are some ways to get these types:

Use the return type of Prisma client methods like this

const getById = async () => await prisma.post.findUnique({
//....
})

type Post = ReturnType<typeof getById>

Or you can use the GetPayload version of the model type where we can specify all relations between this model and others

import { PrismaClient, Prisma } from "@prisma/client";
type User = Prisma.UserGetPayload<{
    // here you can specify all relations like: select, include, ...
}>

You can read more here and on this link.

I don't recommend you these solutions because we have tRPC (don't blame me).

In our case, we use Prisma client through tRPC. And you'll be happy to know that tRPC has a utility to infer routers' input/return types. Let's suppose that we have a router named user and we define inside this router a procedure retrieve. To get the return type in plain tRPC of this procedure we can do:

import type { inferRouterInputs } from "@trpc/server"

type User = inferRouterInputs<AppRouter>['user']['retrieve']

Nice! But how will you be if I say that in T3 Stack there is a little helper to make this operation easier:

import {RouterOutputs} from "@utils/api";
type User = RouterOutputs['project']['getById']

And yes, if you go to look inside the @utils/api you'll see that

export type RouterOutputs = inferRouterOutputs<AppRouter>;

Anyway, it's soft to use.

Bonus:

With this approach, TS can warm you that User type could be null, so to avoid it you can use the NonNullable utility:

import {RouterOutputs} from "@utils/api";
type User = NonNullable<RouterOutputs['project']['getById']>

Right!

Conclusion

I love the end-to-end typesafe that we get from tRPC and it's very cool to work with T3 Stack where they put together some great libs and frameworks to make full-stack development with JS much easier.

We are at the end of this article. I hope you enjoy it. If I get another tip while building my SaaS, I'll share them. Feedback or anything that could help me to improve this post is welcome.

Article posted using bloggu.io. Try it for free.

Why Next.js rather than create-react-app ?

Tawaliou — Sun, 30 Jan 2022 23:06:33 +0000

The background image is from Morioh

Cet article est disponible en français sur mon blog.

Why bother making a bunch of configurations if you can just start working without bothering? Well, I explain here (with humor) why I recommend to start a new project with Next.js instead of using create-react-app.

Reminder on React.js (create-react-app) and Next.js

React.js, the soldier of the devs' army

So React.js is a JavaScript-based framework (frontend) developed by our developer friends at Meta (you know, the company that wants to go beyond the physical world) in 2013. So it basically allows you:

have reusable components with features (properties)
embed JavaScript in HTML with some charisma
allow components to have life cycles, a state that the dev can influence

Code in React looks like this:

import { useEffect, useState } from "react";

export const NavBar = (props) => {
    const [news, setNew] = useState(false)

    useEffect(() => {
        console.log("We are in NavBar")
    }, [])

    return (
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>{props.serviceName}</li>
                <li>{props.locationName}</li>
                {news && <li>News</li>}
            </ul> 
        </nav>
    )
}

But that's not the point of this article, let's talk about create-react-app. Yes Create React App, the tool created by the team behind React to start a project in react. It's already very good, every React developer has used it at least once:

npm install react-scripts@latest

So with this command you have your React project which is initialized and pata-boom; a minimalist folder, where you literally have to configure everything: from routing to eslint (my pet peeve) to creating the flagship folders. A look at Hudson Kunde's article on Morioh which talks about file structure... Tiring and boring at times. And even with the recent version to have Server Side Rendering it's a lot of work, anyway we're with Client Side Rendering (the rendering of the page based on the JavaScript bundle is done by the browser). Like you've got a cute JavaScript bundle that's thrown at browsers saying: `Hey bro, figure out how to render that JS for me.

And now the Vercel devs are getting into the game.

Next.js, the shield of React

Well, the title is a bit forced but honestly that's how I consider Next.js.

Already Next.js is developed by Vercel in 2016 (now I'm passing my Baccalaureate). Vercel? Well, you know, I think that when the devs of this level are sometimes bored or get up all happy, they say to themselves: what if we develop a project to pass the time? Well, that's exactly what happened. They develop Next.js with the following goals :

everything is done in JavaScript and everywhere (as if they had thought of me)
all standard configurations/features including SSR (Server Side Rendering) will be included (I'm telling you, they thought of me)
ease of deploying a web application (and yes, the Vercel platform is there for that) etc See this article from Wikipedia on the 6 principles behind Next.js.

Basically, Next.js is based on React.js so you'll have to use React's features (state, lifecycle, props,...) but it's the multiple features of Next.js that make it one of my favorite frameworks. In the following I will present you just 3 of these features that I currently use and that are for me the best (experience).

Why then Next.js and not create-react-app

To start a Next.js project you can simply :

npm create-next-app /*et vous suivez les instructions*/

So the 3 features I'm talking about:

Routes based on js/jsx files (pages)

This is a big one: your application's routes are based on the js/jsx files that you create in the pages folder. So if we have:

pages
    - index.js
    - about.js
    - contact.js

then you have the pages:

index.js -> /
about.js -> /about.html
contact.js -> /contact.html

Recognize the class!!! And yes it saves us the: react-router, react-router-browser, react-router-browser-router, etc (I exaggerate) that we needed to manage pages with create-react-app. Ouff!

And they went far (frankly they don't sleep) by making available the api folder inside the pages folder where you can define your api routes (REST for example) if you want to make data/API available to devs or other teams. So no need to go and create another project in Node.js and create a separate API.

Path aliases import in the project

So seriously, I enjoyed it. You remember when we create files (components) in subfolders and when we import we face very long paths of ugliness and errors:

import NavBar from "../../components/somewhere";

Well, Next.js fixes that with path aliases provided by typescript. So you can from any file (in any location/folder) have this finally :

import NavBar from "@/components/somewhere";

Super chic, elegant and deserving of the Oscar for "intuitive solution". And it's easy to do:

You create a file either jsconfig.json or tsconfig.json (depending on your project)
You indicate the paths/folders which will be taken into account as path aliases (following example):

// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/data/*": ["data/*"],
      "@/layouts/*": ["layouts/*"],
      "@/lib/*": ["lib/*"],
      "@/css/*": ["css/*"]
    }
  }
}

And that's it!

So I'll stop here. Yes, because in terms of innovations, Next.js comes with a lot of features. I haven't touched on image optimization, SWC (Speed Web Compiler) which is 20 times faster than Babel in compiling JS/TS files, rendering issues (SSG, SSR, ISR), using Next.js with Capacitor for hybrid applications, etc. You can visit the [Next.js] website (https://nextjs.org/) for more information.

Finally?

This is not to dismiss create-react-app which is still a great tool but if you're like me and sometimes you like to get started quickly on projects without worrying about config or setup issues then Next.js is for you. And also it's a progressive framework (nothing to do with politics) so improvements and additions are very frequent.

By the way, I deployed on Vercel a mobile oriented application based on Next.js, Chakra UI (UI Components) and Lingui.js for the translation of the site (internationalization) and which is available here.

I will soon propose you to discover these 4 musketeers (frameworks) based on React namely...

I'm sharing some tips I use in my daily tasks and I hope you have others you want to share with us. I'm open to advice, and my social accounts (below) are there for that.

So can you smell what TawalMc is cooking?

Real time guessing game with react and socket

Tawaliou — Tue, 25 May 2021 10:39:35 +0000

Hi everyone, I hope you're doing well. I want to share with you a real time guessing game web app that I built with React, NodeJS and Socket. It is a multiplayer game (02). You just need to share a generated token on the home page with your friend to allow him to join you and start the game. At turn of each player, the player revert two cards and try to find the cards with the same emoji to earn points. You can view instantly your score on the board and a green circle position indicate each player turn.
You can try at: guessing game or get the source code on my github repositories: source code.
I use React + grommet + socket client for the client side and nodejs + express + socket server for the server part.
Hope you will like it. Thanks.

Reactnative developer

Tawaliou — Sun, 28 Mar 2021 14:19:12 +0000

Hi. Is there any reactnative developer here ? 😎 I want to add you to my contacts and we will exchange about this technologies. And I have a question: what is the power of reactnative against Flutter rising a part from its community ? I used Reactnative for my projects and start Kotlin to understand deeply this framework. I loved 🤣

React Native: Adaptive layout for UI

Tawaliou — Wed, 17 Feb 2021 20:14:44 +0000

Improve UI/UX by adapting layout for screen orientation.
You can get the code of this project on my Github: rn_adaptive_ui.

Hi everyone, I hope you're doing well. I will share with you a little solution that I have found when creating React Native app and want to adapt your layout to the user screen orientation. On this topic there are many solutions like some packages to listen the user orientation change or use simply scrollview component to scroll on screen when components or data overflow. But here I will talk about how to structure your layout and how to use the useWindowDimensions hook of react native to adapt your layout. And to do this, I will take an example of adaptive UI to reproduce.

The problem

Here is the UI

for portrait. But the problem is, what to get if it is the landscape orientation.
To answer this, if you have a designer, great but if you don't have it is not a problem.
Just ask some questions:

What are the important parts of the UI that user must easily see or interact with them
In how many parts will we divide our UI to make it adaptive ?
So to avoid you many reflections, just keep this

for landscape.

How to structure UI layout ?

To answer this question, see how we cut our portrait ui in the following picture

In this picture you can see:
The I box which represent our main layout component
The 1 box which represent the first child among the two
The 2 box which represent the second and last child.

So the 1 and 2 box are in the same high order. And with this structure, we can easily adapt our ui by setting the main layout (I) from column to row direction. Look at this code

import React, { useEffect } from 'react';
import {
  SafeAreaView,
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  useWindowDimensions,
} from 'react-native';
import Battery from './assets/images/battery.svg';
import Microchip from './assets/images/microchip.svg';
import Speedometer from './assets/images/speedometer.svg';
import Wheel from './assets/images/wheel.svg';

const PhoneStatusEltArray = [
  {
    name: 'Battery',
    status: '5h40mn',
    Icon: Battery,
  },
  {
    name: 'Performance mode',
    status: 'Optimized',
    Icon: Speedometer,
  },
  {
    name: 'Storage',
    status: '11.8 GB free',
    Icon: Wheel,
  },
  {
    name: 'memory',
    status: '1.9 GB free',
    Icon: Microchip,
  },
];

function PhoneStatusElt({ name, Icon, status }) {
  return (
    <View style={styles.phoneStatusEltContainer}>
      <View style={styles.statusEltImg}>
        <Icon width={24} height={24} fill="black" />
      </View>
      <Text
        style={{
          textAlign: 'center',
          fontSize: 12,
          fontWeight: 'bold',
          marginBottom: 5,
        }}
      >
        {name}
      </Text>
      <Text
        style={{
          textAlign: 'center',
          color: 'grey',
          fontSize: 12,
          position: 'absolute',
          bottom: 0,
        }}
      >
        {status}
      </Text>
    </View>
  );
}

export default function App() {
  const windowWidth = useWindowDimensions().width;
  const windowHeight = useWindowDimensions().height;

  useEffect(() => {
    console.log(windowWidth);
  });
  return (
    <SafeAreaView
      style={{
        flexDirection: windowWidth < windowHeight ? 'column' : 'row',
        flex: 1,
        alignItems: 'center',
      }}
    >
      <View style={styles.subContainer}>
        <View style={styles.circleContainer}>
          <View style={styles.percentContainer}>
            <Text style={{ fontSize: 50, color: 'lightblue' }}>99</Text>
            <Text style={{ fontSize: 15 }}>/100</Text>
          </View>
          <Text
            style={{
              color: 'lightblue',
              fontSize: 20,
              textTransform: 'uppercase',
            }}
          >
            Excellent!
          </Text>
        </View>
      </View>
      <View style={styles.subContainer}>
        <Text
          style={{
            textAlign: 'center',
            paddingHorizontal: 25,
            marginBottom: 15,
            fontSize: 17,
          }}
        >
          Your phone's maintenance status is excellent. Tap below to improve it.
          This won't affect your personal data.
        </Text>
        <TouchableOpacity style={styles.buttonOptimize} activeOpacity={0.7}>
          <Text style={{ color: 'white', fontSize: 20 }}>OPTIMISE NOW</Text>
        </TouchableOpacity>
        <View style={styles.statusEltContainer}>
          {PhoneStatusEltArray.map((item) => (
            <PhoneStatusElt
              key={item.name}
              name={item.name}
              Icon={item.Icon}
              status={item.status}
            />
          ))}
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  subContainer: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  circleContainer: {
    width: 220,
    height: 220,
    borderRadius: 110,
    borderWidth: 2,
    borderColor: 'lightblue',
    alignItems: 'center',
    justifyContent: 'center',
  },
  percentContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  buttonOptimize: {
    backgroundColor: 'lightblue',
    paddingHorizontal: 40,
    paddingVertical: 15,
    borderRadius: 40,
    marginVertical: 10,
  },
  phoneStatusEltContainer: {
    alignItems: 'center',
    width: 70,
    height: 100,
    marginHorizontal: 8,
  },
  statusEltImg: {
    padding: 15,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: 'grey',
    marginBottom: 5,
  },
  statusEltContainer: {
    width: '100%',
    paddingVertical: 5,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    marginTop: 15,
    paddingHorizontal: 5,
  },
});

The most important part of this code are

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

In this code we use useWindowDimensions code which get the current width and height of screen. It means that when the orientation changes, its updates these two values. So we need just to compare these values to know when it is landscapes or portrait and so change the flex direction of the main layout (I) . And so we have

flexDirection: windowWidth < windowHeight ? 'column' : 'row'

NB: When screen orientation is landscape, width is superior to height.

So... we can update easily our layout by using useWindowDimensions hook values.

Conclusion

With this hook and the structure of layout we can adapt the UI when screen orientation changes. The main problem is to find the landscapes UI and after do a good structure of layout to easily change some styles properties like flexDirection, justifyContent,... And also I suggest you this article

React Native: Responsive and Adaptive User Interfaces

Rahul ・ Jan 11 '21

#reactnative #react #javascript #programming

of Rahul. Bye!

Pourquoi je prends du temps lors de la prise en main d'une technologie ?

Tawaliou — Sun, 13 Sep 2020 18:29:05 +0000

Hi. Je m'appelle Tawaliou et ceci est mon premier article en tant que développeur logiciel(junior 😎). Alors je vous explique un peu pourquoi je prends parfois 1 à 2 mois voire plus pour apprendre une nouvelle technologie, les avantages de cette manière de faire. Dans la suite techno fait référence à language de programmation ou bibliothèque.

Une nouvelle techno ? Un nouveau language de programmation ?

Parfois à cause de ses orientations en tant que développeur, l'on choisit d'apprendre de nouveaux languages, de nouveaux frameworks, bref rester productif, être à la page et pour le fun 🤗. Dans mon cas c'est simple: je peux prendre 2 mois et bannalement 4 mois pour apprendre une nouvelle techno(language ou bibliothèque). Pourquoi?

Pour avoir assez d'informations sur la techno:
- communauté et popularité,
- projets l'utilisant,
- l'historique de la techno;
Pour me familiariser avec les concepts de base du language, la syntaxe et la manière de présenter le code dans cette techno;
Pour avoir une vue panoramique des fonctionnalités de la techno et de ce qu'elle est habiletée à faire et donc adaptée à mes besoins ou pas;
Pour (très important) me familiariser avec sa documentation officielle.

1. Avoir des informations sur la techno

Souvent étant donné la popularité + communauté + l'historique d'une bibliothèque on se lance dans son apprentissage parce qu'elle répond déjà à certains de nos besoins. Prenons l'exemple de ReactJS. Je cherchais une bibliothèque front-end assez puissante, légère et pas trop compliquée. Donc fallait choisir entre: VueJS - React - Angular. Je me suis alors basé sur la communauté très grande autour de ReactJS et le fait qu'il soit supporté par une des entreprises que j'apprécie, Facebook. Mais Angular aussi est supporté par Google. Simple j'ai passé plusieurs semaines à faire des confrontations de commentaires et disons que j'ai commencé avec de petits bouts de code mais rapidement j'ai trouvé React plus abordable. Donc imaginez le temps mis. De plus, pour moi l'historique derrière une techno est source de motivation car tu essaies d'imaginer le niveau de ses développeurs, du travail abattu et des échecs et corrections apportées pour avoir une version stable et tu te dis waooh j'aimerais être comme eux: une techno utilisée par des milliers de dev, cela doit être fait par des développeurs très bons. Cela te pousse à vouloir comprendre en profondeur la techno, à réaliser des petits TPs avec et donc à prendre du temps avec!

2. Se familiariser avec les concepts de bases du language et sa syntaxe

Première remarque à ce niveau: quand je fais une prise en main en moins d'un mois (sans oublier les cours à l'université); c'est sûr que je ne vais pas apprécier le language soit à cause de la syntaxe soit à cause de la manière de faire certaines fonctions.
Preuve vivante: PHP et Go 🤣. Parce que j'avais un background en C++ (mon language préféré) j'ai fait la prise en main du PHP en moins de 3 semaines. Super et tout mais bof j'ai détesté plusieurs choses dans ce language ce qui m'a fait perdre de vue la richesse de ce language:

précéder $ du nom des variables à tout moment (la galère 😫)
une masse incroyable de fonctions prédéfinies dans le language pour résoudre des problèmes et l'inconformité dans la syntaxe de certaines fonctions: les fonctions exécutant des rôles similaires devraient être nommées de la même manière.... Gbich, Erreur de erreur. J'ai négligé le language. Il m'a fallut m'orienter en premier lieu dans l'IoT pour voir qu'il est très important et utile et même facile à utiliser (avec des précautions) et en deuxième lieu dans le web pour voir que je ne pouvais pas l'éviter facilement. Pour Go même chose: moins d'un mois je pouvais compiler des codes de calculs mais j'ai vite lacher prise à cause de la syntaxe que je traitais dans le temps de Guingois. Comment un language comparé au C pouvait avoir une telle syntaxe assez moche, c'était mon avis il y a 1 an. Mais maintenant je me dis que j'aurais mieu fait de me familiariser avec ce language pour mieu le découvrir. En 3 semaines tu ne comprends pas forcément le bien fondé d'une techno. Par contre avec le C++ dont la réputation en terme de difficulté n'est plus à démontrer, j'ai avec le temps apprécié le language et continué à le suivre: j'ai pris 1an pour sa prise en main. Ce qui m'a permis de comprendre le pourquoi de certaines syntaxes soit pour cause de compatibilité avec le C soit pour dissiper des doutes, bref faciliter la vie du dev.

3. Pour avoir une vue panoramique des fonctionnalités de la techno

Je ne vous demande pas de tout savoir sur le language ou la bibliothèque, non. Je ne vous demande pas d'en devenir des Chuck Norris en 1 an, non et de toute façon c'est pas possible 🤣. Mais je demande d'en savoir assez sur la techno: ses pros et cons. Ses atouts, et une idée de jusqu'où elle peut vous amener. Et pour ça faudra beaucoup lire, se documenter sur la techno et s'exercer et ceci lors de la prise en main. Peut être que ce que vous apprendrez ne vous sera pas utile dans 1 an mais elle vous permettra de vite vous en sortir devant des situations compliquées.
Exemple: Récemment durant mon stage à YoupiLab (Bénin 😎) je devrais faire un petit dashboard en HTMl+CSS+JS pour un projet IoT. Je devais afficher une liste de donner que l'utilisateur allait envoyer à une base de données. Pour ne pas me fatiguer j'ai basculé la majorité du code vers le JS (affaire de front-end 🤣). Mais un problème se posait: Je voudrais supprimer une liste d'éléments pour en afficher une autre mais avec des propriétés similaires sans recharger la page. Bref je voulais garder une référence sur l'élément supprimé: Basique direz-vous, je sais. Mais je ne savais pas trop comment faire la recherche sur Google et comment m'y prendre. Alors de proche en proche j'y suis arrivé sans Googler.:

j'utilise removeChild() pour supprimer les éléments.
il y a 2 ans dans un TP lors de la prise en main de JS j'avais lu que removeChild() garde une référence de l'élément du dom supprimé. Bref ce que je cherchais était en ma possession et avec quelques console.log() j'ai eu ma réponse. C'est suite à ce fait que j'ai décidé d'écrire cet article 🤣. Parce que j'avais lu ça il y a deux ans, je savais qu'il avait un comportement pareil; je ne l'ai néanmoins jamais testé. J'ai fait au moins 4 mois avec le JS.

4. Le plus gros point: me familiariser avec sa documentation officielle

Pour moi la documentation d'un language est la meilleure chose que j'ai trouvée en programmation informatique. Même quand j'ai la flemme de coder, de travailler; il y a la documentation des technos que j'utilise. Donc simple je m'amuse à les ouvrir, à les lire, à comprendre comment cette documentation est structurée et comment m'y retrouvée facilement si j'ai des besoins. Je lisais même des notions que je n'aborderai alors que 2 ans plus tard; comme les templates et la STL il y a 3 ans avec le C++. Une documentation est je dirai ce que les auteurs ont légué aux utilisateurs pour atteindre leur but. En plus de donner réponse à des questions profondes, elle fournit des exemples de code qui éclairsissent dans beaucoup de situations. De plus la docmentation te montre qu'il faut bien faire son travail à tel point de décrire en détail toutes les fonctionnalités de la techno, ce qui n'est pas aisée; car une chose est de créer la techno pour résoudre un problème, l'autre chose est de l'expliquer à ceux qui doivent l'utiliser, comment l'utiliser pour résoudre leur problème.

Vous allez me demander mais s'il y a google pourquoi se gêner avec la doc qui peut être difficle à comprendre ?

Simple: je suis au Bénin (Afrique) la connexion internet ne facilite pas vraiment le taf en tant que dev, un peu chèrs, puis lente à tel point que la création d'un projet CRA en React peut échouer à cause de Timeout 🤣🤣🤣. Donc quand on a l'occasion d'avoir les documentations offline, alors on les prends et se les approprie pour qu'elles soient notre google en cas de petits besoins. Big up à Zeal qui fait un travail formidable pour qu'on ait en offline dans un même logiciel la documentation de la plupart des technos 😎😎😎.

Conclusion

Voilà j'en suis à la fin, certes cet article est long mais je ne voulais pas le diviser en deux parties car je trouve que les informations sont complémentaires. En gros certaines pratiques vous font aimer le métier de software developer et vous facilites la vie même si elles sont lentes à donner le résultat.
A bientôt pour un new article.

Forem: Tawaliou

[Boost]

Getting Started with Vagrant

ZINSOU Trinité ・ Sep 14

Some tips when using T3 Stack: Part 1

May be these tips are not specifically related to T3 Stack but concern the stacks it uses

Reminder

NextAuth and Module augmentation

Models types deductions (with tRPC)

Conclusion

Why Next.js rather than create-react-app ?

Reminder on React.js (create-react-app) and Next.js

React.js, the soldier of the devs' army

Next.js, the shield of React

Why then Next.js and not create-react-app

Routes based on js/jsx files (pages)

Path aliases import in the project

Finally?

Real time guessing game with react and socket

Reactnative developer

React Native: Adaptive layout for UI

The problem

How to structure UI layout ?

NB: When screen orientation is landscape, width is superior to height.

Conclusion

React Native: Responsive and Adaptive User Interfaces

Rahul ・ Jan 11 '21

Pourquoi je prends du temps lors de la prise en main d'une technologie ?

Une nouvelle techno ? Un nouveau language de programmation ?

1. Avoir des informations sur la techno

2. Se familiariser avec les concepts de bases du language et sa syntaxe

3. Pour avoir une vue panoramique des fonctionnalités de la techno

4. Le plus gros point: me familiariser avec sa documentation officielle

Vous allez me demander mais s'il y a google pourquoi se gêner avec la doc qui peut être difficle à comprendre ?

Conclusion