DEV Community: Romain

Building Your First Browser Game with Three.js and React: Part 4 - Adding Game Mechanics

Romain — Sat, 01 Jun 2024 15:28:58 +0000

Welcome to the final post of our series on creating a browser game with Three.js and React. In this piece, we'll introduce game mechanics to our mini-basketball game. We'll specifically establish a scoring system using Zustand for state management and configure colliders in our Table component to detect when the ball passes through the hoop.

Step 1: Setting Up Zustand

First, we're going to use Zustand to manage our game score. Zustand is a lightweight, fast, and scalable state management solution for React.

While there are many state management options for React, I favor Zustand for its simplicity and it’s created by Pmndrs, the creators of R3F!

We need state management to store the score of the current game. This allows us to trigger increments in our table component and pass these values to our Interface. State management simplifies the process of sharing values across all our components.

To start, we need to install it:

 npm install zustand

With Zustand installed, let's proceed to create the store. This is a file used for defining the values to be stored and shared across your components.

To do this, create a new file named src/stores/useGame.js and set up the store:

import { create } from 'zustand'

export default create((set) => {
  return {
    /**
     * Score
    */
    score: 0,
    increment: () => set((state) => ({ score: state.score + 1 })),
  }
})

Our store is straightforward, containing just one variable: score, which keeps track of the number of balls we score. It also has a simple function increment that increases this score.

Step 2: Displaying the Score

Next, we'll display the score on the game interface by creating a very simple HTML interface.

First, create a new file named Interface.jsx inside the src/ directory:

import useGame from "./stores/useGame"

const Interface = () => {
  const points = useGame((state) => state.score)

  return <div className="points">
    <h1>{points} points</h1>
  </div>
}

export default Interface

In this interface, we utilize our store to retrieve and display the actual game score within a div inside an h1 tag.

Next, we need to import it into our app. Since this component is not 3D-related, let's add it to our main.jsx file outside of our Canvas:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Canvas } from '@react-three/fiber'
import Experience from './Experience'
import './index.css'
import Interface from './Interface'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Interface />
    <Canvas>
      <Experience />
    </Canvas>
  </React.StrictMode>
)

You should see your interface in the top-left corner of the scene, as shown:

While it isn't bad, it’s very ugly. Let's add some CSS to enhance its appearance slightly. Open the existing index.css file and append the following at the end:

.points {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.25rem;
}

Great! The text is now centered, enlarged, white, and a little less unattractive (you can still improve it yourself!):

Step 3: Implementing Colliders

Now, we need to detect when the ball passes through the hoop using colliders in the Table component.

Colliders not only add physics to our object but also define areas where objects are detected when passing through.

Let's add our first collider to the hoop. Locate the nodes.Ring.geometry within the Table component:

const Table = (props) => {
  return (
    <group {...props}>
      {/* ... */}
      <CuboidCollider
        args={[0.35, 0, 0.35]}
        position={[-1.686, 1.40, 0]}
        sensor
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Ring.geometry}
          material={materials.Red}
          position={[0, 0.06, 0]}
        />
      </CuboidCollider>
      {/* ... */}
    </group>
  );
};

We've added a custom CuboidCollider to our Ring with a unique property sensor. A sensor allows for specific functions like onIntersectionEnter or onIntersectionExit. These functions can detect when an object enters or exits this specific collider. If we define a collider with the sensor, this collider won't generate any contact points. Its only purpose is to detect other objects.

Remember to adjust the position of our Ring. This is because now it's the parent collider that defines the position of our mesh.

Now, if you look inside your ring, you should see the cuboid collider as illustrated below:

This component should detect when the ball enters it. To achieve this, we simply need to add a function at the beginning of our component and use it in our collider:

import useGame from '../stores/useGame';

const Table = (props) => {
    // ...
  const increaseScore = useGame((state) => state.increment)
  // ...

  return (
    <group {...props}>
      {/* ... */}
      <CuboidCollider
        args={[0.35, 0, 0.35]}
        position={[-1.686, 1.40, 0]}
        sensor
        onIntersectionExit={increaseScore}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Ring.geometry}
          material={materials.Red}
          position={[0, 0.06, 0]}
        />
      </CuboidCollider>
      {/* ... */}
    </group>
  );
};

We've created a function called increaseScore that utilizes the increment function from our store. This function is used within the onIntersectionExit property of the CuboidCollider.

You can now play your game! Let's score some balls.

However, there is a problem.

You may have noticed that sometimes the score increases by two, or if the ball bounces too much and enters the hoop a second time, the score increases multiple times.

We need to verify this. We need to determine if the ball is returning to our thruster.

To do this, we already have all the necessary information! We just need another collider! 🎉

Let's add this collider and implement some conditions for our goal:

import { useRef, useState } from 'react'
import useGame from '../stores/useGame';

const Table = (props) => {
  // ...
  const [isScored, setIsScored] = useState(false)
  const increaseScore = useGame((state) => state.increment)
  const goal = () => {
    if(!isScored) {
      setIsScored(true)
      increaseScore()
    }
  }
  // ...

  return (
    <group {...props}>
      <RigidBody type='fixed' colliders='trimesh' restitution={0.6} friction={0}>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Table.geometry}
          material={materials.Wood}
          position={[0, 0.068, 0]}
        />

          {/* Add this collider inside the RigidBody of the Table mesh */}
        <CuboidCollider
          args={[0, 2, 1.5]}
          position={[1.5, 1.5, 0]}
          sensor
          onIntersectionExit={() => {
            setIsScored(false)
          }}
        />
      </RigidBody>
      {/* ... */}
        <CuboidCollider
          args={[0.35, 0, 0.35]}
          position={[-1.686, 1.40, 0]}
          sensor
          onIntersectionExit={goal}
        >
          <mesh
            castShadow
            receiveShadow
            geometry={nodes.Ring.geometry}
            material={materials.Red}
            position={[0, 0.06, 0]}
          />
        </CuboidCollider>
      {/* ... */}
    </group>
  );
};

Here's what we've done: we've added a state to our Table component using the useState hook. This state helps us determine whether we've already scored or not. We've also created a goal function to increment the score and set this state to true. This prevents indefinite score incrementing when the ball has already been scored but hasn't returned to the thruster yet.

To detect if the ball has returned to the thruster and is ready for another shot, we've placed a new CuboidCollider on our Table and reset the state to false.

You should now see the new collider positioned right in front of the thruster.

Now, when we launch the ball and it passes through our hoop, the goal function checks if we've already scored. If we haven't, it increments our score and sets the state to true. When we pass through our new Collider in front of our thruster, this variable switches to false, and we're ready to score again.

This improvement prevents us from scoring multiple points with one shot like we could before.

Finally, we can go to our Experience.jsx file and delete the debug property from the Physics component.

Conclusion

Congratulations! You've successfully incorporated game mechanics into your browser game using Three.js and React. You now have a fully functioning mini-basketball game equipped with a scoring system. This marks the end of our series on building your first browser game. Continue to experiment and add new features to further enhance your game.

In the future, I'll include some bonus articles to further improve the game, such as adding confetti when scoring, and so on.

There's always room for improvement in this game! For instance, Aezakmi from the Three.js Journey Discord suggested adding some "randomness" to the force of the thruster. I've included his message below in case it sparks some ideas:

So basically you have "puncher" state between 0 and 1, where 0 is full down, and 1 is full up.
To calculate the force you gotta do the (1.0 - puncherState)*forceValue . For example if the ball collide with puncher being halfway up, you gonna apply (1.0 - 0.5) * forceValue and if pucher is full up the force gonna be zero (1.0 - 1.0) * forceValue.

Now we need to calculate the direction for the force to apply.
Thats gonna be even easier. Just do new Vector3().subVectors(ball.position, puncher.position).normalize().

This topic might be a bit advanced, but I believe everyone will be able to grasp it after this series!

Thanks for following me throughout this series of articles. Don't hesitate to share your feelings about it on Twitter or in comments.

Building Your First Browser Game with Three.js and React: Part 3 - Adding Interactivity and Physics

Romain — Tue, 14 May 2024 10:30:00 +0000

Introduction

Welcome back to our series on creating a 3D basketball game using Three.js and React in your browser!
So far, we've set up our project and incorporated essential 3D models into our scene. Now, it's time to animate our game with interactivity and physics.
This installment will focus on integrating physics to simulate realistic ball movements and interactions, making our game genuinely interactive and enjoyable.

Step 1: Setting Up Physics with @react-three/rapier

When it comes to integrating physics into React Three Fiber, several libraries are available. @react-three/rapier stands out as one of the most recent updated (created in 2019 and written in Rust), making it a great choice for adding physics in 3D web environments.

While Rapier is known for its ease of use and good performance, other libraries might also be excellent choices depending on specific use cases, like Cannon for example. (The fork by pmndrs, that is awesome too)

First, ensure that @react-three/rapier is installed in your project:

npm install @react-three/rapier

Initialize the physics engine in your Experience file where all our scene is set up.

To accomplish this, we add the Physics component, provided by rapier, around our Table and Ball. We don't need to include our lights, controls, or environment, as they don't require physics.

We are adding a debug parameter to the Physics component. This will allow us to view all the colliders of our object.

import React from 'react';
import { Box, Center, Environment, OrbitControls } from '@react-three/drei';
import Table from './Components/Table';
import Ball from './Components/Ball';
import { Physics } from '@react-three/rapier';

const Experience = () => {
  return (
    <>
      <color attach="background" args={["#ddc28d"]} />

      <ambientLight />
      <directionalLight position={[0, 1, 2]} intensity={1.5} />
      <Environment preset="city" />

      <OrbitControls makeDefault />

      <Physics debug>
        <Center>
          <Table position={[0, 0, 0]} />
          <Ball position={[0.25, 1.5, 0]} />
        </Center>
      </Physics>
    </>
  );
}

export default Experience;

This wrapper will manage all physics-related updates automatically.

Step 2: Adding Physics to the Ball

Let's add physics to our ball. We'll adjust the Ball component to include the RigidBody component from rapier.

import { RigidBody } from '@react-three/rapier';

const Ball = ({ position }) => {
  return (
    <group position={position} scale={0.7}>
      <RigidBody>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Sphere.geometry}
          material={materials["Material.001"]}
        />
      </RigidBody>
    </group>
    );
};

We also include a group in our mesh to set the position and scale for the ball, along with our rigid body. To slightly decrease the ball's size, we incorporate a scale parameter of 0.7, which we'll use later to fit the hoop ring.

This setup adds physics to our ball. You should see the ball falling into the depths of our scene. The ball falls because we have not integrated physics into our table yet.

Before the ball falls, you should see a square around it, as shown in the screenshot below. This square represents the object's colliders. By default, all colliders are square-shaped and adapt to the size of the object to which we add a RigidBody. However, we can adjust the shape using the colliders parameter of RigidBody.

Let's try another collider, such as ball:

import { RigidBody } from '@react-three/rapier';

const Ball = ({ position }) => {
  const { nodes, materials } = useGLTF("/models/basketball.glb");

  return (
    <group position={position} scale={0.7}>
      <RigidBody colliders="ball">
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Sphere.geometry}
          material={materials["Material.001"]}
        />
      </RigidBody>
    </group>
  );
};

You should now see the collider in a "round shape" (like a ball). This is exactly what we want!

It exist some colliders provided by rapier:

cuboid , the default one, for square shape.
ball, the one we use, for round shape.
hull, a collider that fits a shape very closely but ignores holes within it. It's useful for complex objects without holes.
trimesh is similar to hull, but it doesn't ignore holes. While this collider is powerful, it can complicate collision detection and potentially introduce bugs. It's best to avoid it if possible, but for smaller projects with less collision, it’s acceptable. (Am I saying this because I use it in this project? Perhaps..)

Step 3: Adding physics to the Table

Now, let's modify the Table component to respond to the ball. This way, the ball will be "trapped" inside the table. First, let’s add RigidBody for the Table mesh:

import { RigidBody, useRigidBody } from '@react-three/rapier';

const Table = (props) => {
  return (
    <group {...props}>
      <RigidBody type='fixed'>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Table.geometry}
          material={materials.Wood}
          position={[0, 0.068, 0]}
        />
      </RigidBody>
        {/* ... */}
    </group>
  );
};

Now, we should observe the ball falling and coming to rest on the table. We're adding a 'fixed' type to the rigid body because the table shouldn't move; it simply acts as a "floor" for our ball. Take note of the table's colliders as illustrated below:

Our table has a shape more complex than a basic cuboid, so let's use trimesh instead (yes, I know, emergency collider only..).

import { RigidBody, useRigidBody } from '@react-three/rapier';

const Table = (props) => {
  return (
    <group {...props}>
      <RigidBody type='fixed' colliders='trimesh'>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Table.geometry}
          material={materials.Wood}
          position={[0, 0.068, 0]}
        />
      </RigidBody>
      {/* ... */}
    </group>
  );
};

Now, you can observe that our collider perfectly matches the shape of our table.

Now that our base table is set up, we need to add physics to our glass as well. This should be the final mesh of the Table component (if you followed the code given in this serie):

import { RigidBody, useRigidBody } from '@react-three/rapier';

const Table = (props) => {
  return (
    <group {...props}>
      {/* ... */}
      <RigidBody type='fixed' colliders='trimesh'>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Glass.geometry}
          position={[0.497, 1.54, 0.005]}
        >
          <MeshTransmissionMaterial anisotropy={0.1} chromaticAberration={0.04} distortionScale={0} temporalDistortion={0} />
        </mesh>
      </RigidBody>
    </group>
  );
};

The last physics component to add is our basketball hoop. It comprises four meshes: Base, Cylinder, Panel, and Ring. Like the others, enclose these four meshes in a RigidBody with a fixed type and trimesh colliders.

import { RigidBody, useRigidBody } from '@react-three/rapier';

const Table = (props) => {
  return (
    <group {...props}>
      {/* ... */}
      <RigidBody type='fixed' colliders='trimesh'>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Base.geometry}
          material={materials.Wood}
          position={[-2.235, 0.565, 0]}
        />
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Cylinder.geometry}
          material={materials.Red}
          position={[-2.235, 1.177, 0]}
        />
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Panel.geometry}
          material={materials.Wood}
          position={[-2.234, 1.814, 0]}
        />
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Ring.geometry}
          material={materials.Red}
          position={[-1.686, 1.46, 0]}
        />
      </RigidBody>
      {/* ... */}
    </group>
  );
};

We have now integrated physics into all of our models (except for a few used for controls)! You should be able to see all the colliders in your scene like this:

To observe our physics in action, let's adjust the ball's position slightly to the left and watch it roll across the table:

const Experience = () => {
  return (
    <>
      {/* ... */}
      <Physics debug>
        <Center>
          <Table position={[0, 0, 0]} />
          {/* Let's change the third parameter of position to 0.2 */}
          <Ball position={[0.25, 1.5, 0.2]} />
        </Center>
      </Physics>
    </>
  );
}

export default Experience;

Step 4: Tweak the Restitution and the Friction

Let's assign some default values to our existing physics to improve the ball's reaction to the floor, among other things.

Return to our Ball component and add restitution and friction to the RigidBody:

import { RigidBody } from '@react-three/rapier';

const Ball = ({ position }) => {
  const { nodes, materials } = useGLTF("/models/basketball.glb");

  return (
    <group position={position} scale={0.7}>
      <RigidBody colliders="ball" restitution={1} friction={0.2}>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Sphere.geometry}
          material={materials["Material.001"]}
        />
      </RigidBody>
    </group>
  );
};

Restitution refers to the "bounciness" of an object. The default value is 0, meaning the object does not bounce. We set it to 1 to give our basketball a lot of bounce!

Friction refers to the degree to which surfaces rub against each other. The default value is 0.7. The higher the friction, the quicker the object will stop. To let our ball slide more on the table, we’ll reduce the friction to 0.2.

You should see the ball jumping more. Feel free to tweak these parameters to observe the changes!

Now, let's return to our table. We will add both restitution and friction to the table and the glass.

import { RigidBody, useRigidBody } from '@react-three/rapier';

const Table = (props) => {
  return (
    <group {...props}>
      <RigidBody type='fixed' colliders='trimesh' restitution={0.6} friction={0}>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Table.geometry}
          material={materials.Wood}
          position={[0, 0.068, 0]}
        />
      </RigidBody>
      {/* ... */}
      <RigidBody type='fixed' colliders='trimesh' restitution={0.2} friction={0}>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Glass.geometry}
          position={[0.497, 1.54, 0.005]}
        >
          <MeshTransmissionMaterial anisotropy={0.1} chromaticAberration={0.04} distortionScale={0} temporalDistortion={0} />
        </mesh>
      </RigidBody>
    </group>
  );
};

You should see the ball jumping even more! We have now the perfect setup for our game. We can now add the controls.

Step 5: Integrating Controls

To make our game interactive, we need to give players control over the ball. We'll implement click controllers to trigger thrusters that propel the ball towards the basket ring.

First, we are going to add the “onclick” control on our Control_A and Control_B mesh.

Adding Control on Mesh

To identify our controls, we need to use useRef(), a hook from React that allows us to reference a value. This value can be anything we want, such as a boolean, a number, a string, or an object. After assigning this reference to our mesh, we can retrieve it later.

Let's incorporate it into our Table component:

import { useRef } from 'react'

const Table = (props) => {

  const controlA = useRef(null);
  const controlB = useRef(null);

  return (
    <group {...props}>
      {/* ... */}
      <mesh
        ref={controlA}
        castShadow
        receiveShadow
        geometry={nodes.Control_A.geometry}
        material={materials.Red}
        position={[4.184, 0.129, 0.744]}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Control_A_Text.geometry}
          material={materials.White}
          position={[0.237, 0.046, 0.21]}
          rotation={[Math.PI / 2, 1.179, -Math.PI / 2]}
        />
      </mesh>
      <mesh
        ref={controlB}
        castShadow
        receiveShadow
        geometry={nodes.Control_B.geometry}
        material={materials.Green}
        position={[4.183, 0.128, -0.754]}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Control_B_Text.geometry}
          material={materials.White}
          position={[0.25, 0.043, 0.207]}
          rotation={[Math.PI / 2, 1.184, -Math.PI / 2]}
        />
      </mesh>
      {/* ... */}
    </group>
  );
};

Now that we have our references to Control A and Control B, we need to activate the "click" control. For this, the <mesh> component from Three.js offers two functions that we can use: onPointerUp and onPointerDown.

We can use these functions to trigger a function we've created when a player clicks on ControlA or ControlB. Let's create these two functions and assign them to the controls:

import { useRef } from 'react'

const Table = (props) => {

  const controlA = useRef(null);
  const controlB = useRef(null);

  const clickUp = (controlRef) => {
    if (controlRef.current) {
      controlRef.current.position.y = 0.128
    }
  }

  const clickDown = (controlRef) => {
    if (controlRef.current) {
      controlRef.current.position.y = 0.128 - 0.1
    }
  }

  return (
    <group {...props}>
      {/* ... */}
      <mesh
        ref={controlA}
        castShadow
        receiveShadow
        geometry={nodes.Control_A.geometry}
        material={materials.Red}
        position={[4.184, 0.129, 0.744]}
        onPointerUp={() => clickUp(controlA)}
        onPointerDown={() => clickDown(controlA)}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Control_A_Text.geometry}
          material={materials.White}
          position={[0.237, 0.046, 0.21]}
          rotation={[Math.PI / 2, 1.179, -Math.PI / 2]}
        />
      </mesh>
      <mesh
        ref={controlB}
        castShadow
        receiveShadow
        geometry={nodes.Control_B.geometry}
        material={materials.Green}
        position={[4.183, 0.128, -0.754]}
        onPointerUp={() => clickUp(controlB)}
        onPointerDown={() => clickDown(controlB)}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Control_B_Text.geometry}
          material={materials.White}
          position={[0.25, 0.043, 0.207]}
          rotation={[Math.PI / 2, 1.184, -Math.PI / 2]}
        />
      </mesh>
      {/* ... */}
    </group>
  );
};

In this function, we "simulate" a click by slightly lowering the position of our control, similar to pressing a button. We trigger the clickDown action when the user clicks the button, and clickUp action when they release the click.

You can test it on your scene, you should see the button going down when clicking on it.

We can now proceed to the next part: adding physics to the thruster.

Adding Physics on Thrusters

In this section, we need to identify our thrusters using useRef, add a special rigid body to them, and activate them when we use the controls. Let's get started:

const Table = (props) => {

  // Add useRef on thruster to identify them
  const thrusterA = useRef(null);
  const thrusterB = useRef(null);


  const clickUp = (controlRef) => {
    if (controlRef.current) {
      controlRef.current.position.y = 0.128
    }
  }

  const clickDown = (controlRef) => {
    if (controlRef.current) {
      controlRef.current.position.y = 0.128 - 0.1
    }
  }

  return (
    <group {...props}>
      {/* ... */}
      <RigidBody
        ref={thrusterA}
        type="kinematicPosition"
        colliders="hull"
        lockRotations={true}
        enabledTranslations={[false, true, false]}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Thruster_A.geometry}
          material={materials.Black}
          position={[2.259, -0.189, 0.765]}
        />
      </RigidBody>
      <RigidBody
        ref={thrusterB}
        type="kinematicPosition"
        colliders="hull"
        lockRotations={true}
        enabledTranslations={[false, true, false]}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Thruster_B.geometry}
          material={materials.Black}
          position={[2.259, -0.189, -0.764]}
        />
      </RigidBody>
      {/* ... */}
    </group>
  );
};

We assign a specific type of RigidBody, kinematicPosition, to the thrusters. This type allows our object to be moved using special functions, such as translate/rotate, through code. The rigid body doesn't move until we instruct it to, and can't be moved by other rigid bodies, for example.

We also restrict rotations on this mesh, as we only want it to move up and down.

Now, we simply need to move it up or down when we press or release our controls. Let's do it:

const Table = (props) => {

  const thrusterA = useRef(null);
  const thrusterB = useRef(null);

  const clickUp = (controlRef) => {
    if (controlRef.current) {
    controlRef.current.position.y = 0.128

    if(controlRef === controlA) {
      const position = vec3(thrusterA.current.translation())
      thrusterA.current.setNextKinematicTranslation({
        x: position.x,
        y: position.y - 0.5,
        z: position.z
      })
    } else {
      const position = vec3(thrusterB.current.translation())
      thrusterB.current.setNextKinematicTranslation({
        x: position.x,
        y: position.y - 0.5,
        z: position.z
      })
    }
    }
  }

  const clickDown = (controlRef) => {
    if (controlRef.current) {
    controlRef.current.position.y = 0.128 - 0.1

    if(controlRef === controlA) {
      const position = vec3(thrusterA.current.translation())
      thrusterA.current.setNextKinematicTranslation({
        x: position.x,
        y: position.y + 0.5,
        z: position.z
      })
    } else {
      const position = vec3(thrusterB.current.translation())
      thrusterB.current.setNextKinematicTranslation({
        x: position.x,
        y: position.y + 0.5,
        z: position.z
      })
    }
    }
  }

  return (
    {/* ... */}
  );
};

Now, when we activate the clickUp and clickDown functions by pressing our controls, thruster A for control A and thruster B for control B will propel the ball across our table.

To accomplish this, we simply use the setNextKinematicTranslation function to apply a translation to our object. We just need to add a number, such as 0.5, to the y-axis to move it upwards.

When the user clicks, the thruster elevates by 0.5. When the user releases the click, the thruster reverts back to -0.5.

Small Tweak to Improve Game

To enhance our game, I propose adding a parameter to the rigid body of our Ball component: gravityScale. This parameter enables us to influence how gravity impacts our object. By default, this value simulates Earth's gravity (-9.81 approximately). However, I want the ball to be more energetic and faster, so let's introduce a new value:

const Ball = ({ position }) => {
  return (
    <group position={position} scale={0.7}>
      <RigidBody colliders="ball" restitution={1} friction={0.2} gravityScale={3.5}>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Sphere.geometry}
          material={materials["Material.001"]}
          />
      </RigidBody>
    </group>
  );
};

Step 6: Testing and Debugging

With physics and controls established, thoroughly testing the game is crucial to observe their interactions. Based on this testing, adjust the physics parameters and controls as needed. Observe how different settings alter the gameplay.

If you encounter any issues, please don't hesitate to contact me!

Conclusion

Congratulations! You have successfully added interactivity and physics to your browser-based basketball game. The ball now moves realistically, and players can control actions within the game. It's time to start scoring some baskets!

In the next installment, we will introduce game mechanics to make the game fully playable.

Stay tuned and happy coding!

Building Your First Browser Game with Three.js and React: Part 2 - Implementing 3D Models

Romain — Fri, 10 May 2024 10:49:09 +0000

Introduction

Welcome back to our series on building a 3D basketball game in the browser!
In Part 1, we set up our project with Vite and created a basic 3D scene with a cube.
Today, we're adding key elements to our game: the basketball and the table (or hoop stand).
By the end of this tutorial, you'll see these core game components come to life in our scene.

Step 1: Preparing Your 3D Models

Before we start coding, ensure you have the 3D models for the basketball and the table.
We're using models prepared for Three.js (just created in Blender and exported in the right format), which are available for download below
(If these links don't lead directly to downloads, simply copy the entire page and paste the content into the files mentioned later.)

Download the basketball model (basketball.glb)
Download the table model (table.gltf)

Create a new folder named models/ within the public/ directory and place the two models in it.
Now, the project contains these files: public/models/basketball.glb and public/models/table.gltf.

Step 2: Creating the Ball Component

We will create two components using the GLTFJSX tool.
This tool transforms 3D models (in gltf format or others) into ready-to-use components for your React Three Fiber project. Try it yourself with our two models!

Let's start by adding the basketball to our scene. We'll use the useGLTF hook from @react-three/drei to load our model.
You can find everything drei has to offer on the github of the project, don't hesitate to go on the documentation if you want more explanation about what we use!

First, create a new Components folder within the src/ directory to house the Ball and Table components and create a new Ball.jsx file inside:

// src/Components/Ball.jsx

import React from 'react';
import { useGLTF } from "@react-three/drei";

const Ball = ({ position }) => {
    const { nodes, materials } = useGLTF("/models/basketball.glb");

    return (
        <mesh
            position={position}
            geometry={nodes.Sphere.geometry}
            material={materials["Material.001"]}
            castShadow
            receiveShadow
        />
    );
};

useGLTF.preload("/models/basketball.glb");

export default Ball;

In this component, we're loading the basketball model and allow us to placing it at a specified position in the scene with the position prop.
The preload function ensures the model is lazy loaded before it's needed, improving the performance.

This component is straightforward, containing just a single mesh—a 3D object made up of vertices and polygons—equipped with specific geometry and material. These parameters can be found by logging nodes and materials, the two parameters that the function useGLTF give us. Additionally, we've included parameters such as castShadow and receiveShadow to control how the mesh casts and receives shadows from other objects.

Step 3: Creating the Table Component

Next, we'll add the table. This is a significant component as it's more complex than the ball.

Create a new component named Table.jsx:

// src/Components/Table.jsx

import React, { useRef } from 'react'
import { MeshTransmissionMaterial, useGLTF } from '@react-three/drei'

const Table = (props) => {
  const { nodes, materials } = useGLTF('/models/table.gltf');

  return (
    <group {...props} dispose={null}>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Table.geometry}
        material={materials.Wood}
        position={[0, 0.068, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Controls.geometry}
        material={materials.Wood}
        position={[4.135, 0.092, -0.003]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Control_A.geometry}
        material={materials.Red}
        position={[4.184, 0.129, 0.744]}>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Control_A_Text.geometry}
          material={materials.White}
          position={[0.237, 0.046, 0.21]}
          rotation={[Math.PI / 2, 1.179, -Math.PI / 2]}
        />
      </mesh>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Control_B.geometry}
        material={materials.Green}
        position={[4.183, 0.128, -0.754]}>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.Control_B_Text.geometry}
          material={materials.White}
          position={[0.25, 0.043, 0.207]}
          rotation={[Math.PI / 2, 1.184, -Math.PI / 2]}
        />
      </mesh>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Thruster_B.geometry}
        material={materials.Black}
        position={[2.259, -0.189, -0.764]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Thruster_A.geometry}
        material={materials.Black}
        position={[2.259, -0.189, 0.765]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Hide_Thruster.geometry}
        material={materials.Black}
        position={[2.257, -0.047, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Base.geometry}
        material={materials.Wood}
        position={[-2.235, 0.565, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cylinder.geometry}
        material={materials.Red}
        position={[-2.235, 1.177, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Panel.geometry}
        material={materials.Wood}
        position={[-2.234, 1.814, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Ring.geometry}
        material={materials.Red}
        position={[-1.686, 1.46, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Glass.geometry}
        position={[0.497, 1.54, 0.005]}
      >
        <MeshTransmissionMaterial anisotropy={0.1} chromaticAberration={0.04} distortionScale={0} temporalDistortion={0} />
      </mesh>
    </group>
  )
}

useGLTF.preload('/models/table.gltf');

export default Table;

This component loads the table model and all of its parts, such as the basket hop ring, controls, thrusters, and so on. You can identify each component by examining the geometry prop of each mesh. For instance, nodes.Ring.geometry corresponds to the ring of the basketball hoop!

We simply modify the glass part of the model (The mesh with the nodes.Glass.geometry geometry) by adding a custom material: the MeshTransmissionMaterial to achieve appealing glass aesthetics! To achieve this, we simply add a child to the mesh that contains the Glass geometry and remove the existing material from this mesh. This way, the mesh will use the material specified in its child.
We give it some default parameter for a good looking glass.

Step 4: Integrating the Components into the Scene

Now, let's add both the Ball and Table components into our existing scene.

Update your Experience.jsx file to incorporate these new components and implement a few minor changes.

import React from 'react';
import { Box, Center, Environment, OrbitControls } from '@react-three/drei';
import Table from './Components/Table';
import Ball from './Components/Ball';

const Experience = () => {
  return (
    <>
      <color attach="background" args={["#ddc28d"]} />

      <ambientLight />
      <directionalLight position={[0, 1, 2]} intensity={1.5} />
      <Environment preset="city" />

      <OrbitControls makeDefault />

      <Center>
        <Table position={[0, 0, 0]} />
        <Ball position={[0.25, 1.5, 0]} />
      </Center>
    </>
  );
}

export default Experience;

Now we have added these two new components inside another component from drei called Center.
As the name suggests, this component is very useful for centering 3D objects on the screen.

We also include a <color> component to set the scene's background color.
The transmission of our table's glass uses this to determine its background color.

We make slight adjustments to the lighting by replacing the point light with a directional light,
and we remove the parameter of the ambient light, opting to use the default one for a better view of our scene.
Lastly, we add an Environment component from drei to enhance the reflection on our table model.

Step 5: Testing Your Scene

Launch your development server (if it's not already running) and navigate to your app.
You should see the basketball and table rendered in the scene.

Conclusion

Great job! You've successfully incorporated complex 3D models into your basketball game.
This progress brings us one step closer to finalizing our interactive game.

In the next part of our series, we'll introduce interactivity and physics.

Stay tuned, and happy coding! 🏀

Building Your First Browser Game with Three.js and React: Part 1 - Getting Started

Romain — Wed, 08 May 2024 22:01:33 +0000

Introduction

Are you ready to jump into the exciting world of 3D web games?
In this series, we're going to build from scratch an interactive browser-based basketball game using Three.js and React Three Fiber.
Imagine controlling a basketball with simple button clicks, aiming to score as many baskets as possible. If that sounds intriguing, you’re in for a treat!

By the end of this series, not only will you have a fully functional game, but you'll also have gained a good understanding of creating 3D experiences using Three.js and React.
Check out the final version of the game to see what you'll be capable of creating.
It's simple, fun, and a great way to dive into the possibilities of web-based game development.

Today, we kick off with the basics—setting up our project environment using Vite, which provides a fast and modern way to set up a React project.

Step 1: Setting Up Your Environment

First things first, you'll need to ensure you have Node.js installed on your computer.
Node.js will help us manage our project's dependencies and run our development server.
You can download and install Node.js from here.

Once Node.js is ready, we're going to set up our project using Vite. Open your terminal and run the following commands:

# Create a new directory for your project and navigate into it
mkdir basketball-game
cd basketball-game

# Initialize a new project using Vite with a React template
npm create vite@latest . -- --template react

This command sets up a new React project using Vite, which includes all the boilerplate code you need to get started.

Step 2: Installing Dependencies

Our game will utilize Three.js and React Three Fiber. We need to add these to our project.
While we're at it, we'll also install drei, a handy collection of abstractions for React Three Fiber that makes working with Three.js even easier.

Run the following command in your terminal:

npm install three @react-three/fiber @react-three/drei

These libraries are crucial as they allow us to work with 3D objects and harness React's powerful component-based architecture to manage them effectively.

Step 3: Verify Your Project Setup

After installing your dependencies, it’s a good idea to ensure that everything is working as expected. Start your development server by running:

npm run dev

This command will launch your application in a local development server.
Open your browser and navigate to http://localhost:5173 to see your new React application running. You should see a basic React welcome screen.

Step 4: Creating a Basic 3D Scene with a Cube

Now that we have our project environment ready and our libraries installed,
let's dive into the fun part—creating our first 3D scene using Three.js and React Three Fiber.
In this step, we'll set up a simple scene with a basic cube and a camera to get a feel for how Three.js integrates within a React application.

Setting Up the Experience Component

Inside your src/ directory, create a new file named Experience.jsx.
This component will house our 3D scene. Add the following code to initialize a basic scene with a cube:

import React from 'react';
import { Box, OrbitControls } from '@react-three/drei';

const Experience = () => {
  return (
    <>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <OrbitControls makeDefault />

      <Box>
        <meshStandardMaterial attach="material" color="orange" />
      </Box>
    </>
  );
}

export default Experience;

In this component:

<ambientLight> and <pointLight> add basic lighting to the scene, which helps in viewing the cube.
<OrbitControls> a basic control to rotate/move around the scene.
<Box> is a component from drei that represents a 3D cube. We color it orange.

Incorporating the Experience into Our App

Next, we need to ensure that our scene is rendered by the main application.
Delete the existing App.js file in the src folder and update the main.jsx file to include our Experience component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Canvas } from '@react-three/fiber'
import Experience from './Experience'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Canvas>
        <Experience />
    </Canvas>
  </React.StrictMode>
)

This setup integrates the Experience component into our main application layout and adding a base Canvas component,
which creates a canvas element where our 3D scene will render.

Create the base style for the 3D Experience

Now, we just need to update the existing index.css file to add the base of styling of our app:

* {
    box-sizing: border-box;
}

html,
body {
    background-color: #ddc28d;
}

html,
body,
#root,
#main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    user-select: none;
}

You can now delete the App.jsx file and the App.css file also, we don’t need them.

Testing Your Scene

Once you have made these changes, save your files and ensure your development server is still running. Refresh your browser page at http://localhost:5173.
You should now see a cube rendered on the screen. You can rotate around, zooming in/out and move pressing CTRL.

If it's not appearing, make sure your development server is running correctly and that there are no errors in your console.

If you encounter any issues or have questions, don't hesitate to reach out for help.
You can contact me in comments. I'm here to assist and ensure you have a great experience building this game!

Conclusion

Congratulations! You've just created your first 3D scene using Three.js and React Three Fiber.
This basic setup is the stepping stone to more complex and interactive 3D graphics that we will explore in upcoming posts in this series.

In the next part of our series, we will add the base models.

Stay tuned as we continue to build out our basketball game! 🏀

Supercharge your application's performance: Consuming Symfony messenger messages with Go

Romain — Fri, 21 Jul 2023 07:25:21 +0000

Introduction

As applications scale and grow, efficient message processing becomes crucial for maintaining high performance.

While Symfony Messenger excels in dispatching messages, I introduce a tool to supercharge your message consumption process: Gosumer.

Harness the raw power of Go to optimize your application's performance and handle Symfony Messenger messages seamlessly.

In this article, I'll delve into the functionalities of Gosumer and showcase an example of its implementation to demonstrate its capabilities.

Introducing Gosumer

Gosumer is a cutting-edge package designed to enhance your application's performance by efficiently consuming Symfony Messenger messages using Go code.

Built to work seamlessly with PostgreSQL and AMQP, this tool empowers developers to streamline their message processing and unlock unparalleled performance gains.

You can find the source code of this package here; feel free to contribute or share your feedback!

Example: Empowering your application with Gosumer

Let's dive into an illustrative example to showcase Gosumer in action.

Imagine you have a Go application that needs to process incoming messages efficiently.

With Gosumer, you can easily achieve this goal with just a few lines of code:

package main

import (
"encoding/json"
"log"

"github.com/romaixn/gosumer"
)

type Message struct {
    ID     int `json:"id"`
    Number int `json:"number"`
}

func main() {
    database := gosumer.PgDatabase{
        Host:      "localhost",
        Port:      5432,
        User:      "app",
        Password:  "!ChangeMe!",
        Database:  "app",
        TableName: "messenger_messages",
    }

    err := gosumer.Listen(database, processMessage, Message{})

    if err != nil {
        log.Fatal(err)
    }
}

func processMessage(message any, err chan error) {
    log.Printf("Message received: %v", message)

    jsonData, e := json.Marshal(message)
    if e != nil {
        log.Printf("Error marshalling message: %v", e)
        err <- e

        return
    }

    var msg Message
    e = json.Unmarshal(jsonData, &msg)
    if e != nil {
        log.Printf("Error unmarshalling message: %v", e)
        err <- e

        return
    }

    log.Printf("Sum of %d and %d is %d", msg.ID, msg.Number, msg.ID+msg.Number)

    err <- nil

    return
}

In this example, we define a Message struct, representing the data in the incoming messages, it's the same structure that you have defined on the Symfony side (PHP).

Afterwards, we listen to all messages using the gosumer.listen function and process them through processMessage.

Once the message is processed and there are no errors, it's deleted from the database.
However, if an error occurs during processing, the message is not deleted and will be re-consumed at a later time.

I already have some ideas for improving the developer experience of the package. I've created a few issues that you can check out here.

Conclusion

Gosumer can help you for optimizing your application's performance by consuming Symfony Messenger messages with Go.

By leveraging the power of Go and Symfony Messenger, your application will be as powerful as a superhero team on an efficiency-boosting, scalability-expanding quest!

Feel free to visit GitHub to explore the project and test it out! I'd love to hear your feedback.

See you on GitHub! ⭐️

Discover new developer communities (Discord, Slack, etc.)

Romain — Fri, 27 Jan 2023 15:55:44 +0000

Hello everyone ! If you're a web developer looking for a place to connect with other developers, then this repository is for you :

Romaixn / awesome-communities

A curated list of awesome developer communities (Discord, Slack, Telegram, etc.).

Awesome Communities

A curated list of awesome developer communities (Discord, Slack, Telegram, etc.).

Use the "Table of Contents" menu in the top-left corner to explore the list.

English

AI

Hugging Face Discord - The AI community building the future.
Leonardo AI - Official Leonardo Image generation AI Discord community.

Frontend

Frontend Developers Discord - Friendly creative web developer Discord community.

Help / Courses

Codecademy Discord - The official Codecademy Discord community.
Codu Discord - Codu - The Coding community.
freeCodeCamp Discord - The official freeCodeCamp Discord community.
The Odin Project Discord - The official The Odin Project Discord community.

Java

Java Discord - One of the biggest Java Communities on Discord.
Together Java - Java self-help Discord community.

PHP

PHP Slack - The official PHP Slack community.
Symfony Slack - The official Symfony Slack community.

Python

Discord.py Discord - The official Discord.py Discord community.
Flet Discord -…

View on GitHub

The goal of this repository is to gather all the Discord, Slack, etc. servers speaking of development in the same place.

Do not hesitate to contribute to add the communities that you know, that you appreciate.

No matter the language (Javascript, PHP, etc.), topic, the spoken language (english, french, etc.) etc.

Soft skills, why are they so important?

Romain — Thu, 20 Oct 2022 15:57:32 +0000

French version is here

Today we're going to talk about "soft skills" in the workplace and I'm going to try to explain to you why they are so important and how they can make the difference.

Soft Skills

We often hear about soft skills, but what are they?

Soft skills, also called "basic skills", are skills that can be applied to all professions, as opposed to "hard skills", which are specific to a particular profession.

This category includes a multitude of relational skills, for example (this list is not exhaustive, it corresponds to the most important points in my opinion):

Critical thinking , know how to question yourself but also the decisions of others,
Problem solving , not feeling demoralized when faced with a big problem,
Communication , knowing how to communicate is very important, not isolate yourself,
Teamwork , know how to collaborate on a common project,

These very general skills will be useful for you to integrate into a team or to interact with your clients.

Do they really matter?

Soft skills are extremely important in the professional world.

Especially during a job interview, a person who knows how to communicate correctly, explain what he/she has been working on, etc., has a much better chance of being recruited than the opposite.

Developers who have technical difficulties and know how to communicate are considered better than the opposite.

In our business, technologies are evolving so fast that a recruiter is not only looking for a technically gifted developer but also someone able to evolve within the company.

A developer who doesn't want to change/evolve, who has an overinflated ego (believing himself to be on top of everything) will have much less chance than vice versa.

That's why we can say that soft skills are more important than hard skills (I'm talking about our profession, but I imagine that this is also true for other professions)

How to "work" on my soft skills?

Just like hard skills, soft skills are not "innate".

For example, the more you communicate, the more comfortable you will be.

You don't need to master absolutely all of these skills, but we can see the "must have " skills in my opinion.

Have a critical mind

Having a critical mind is great. You have to understand that one way of working is not necessarily the best way for everyone, to know how to question yourself continuously.

If you take the slightest remark about your code or the way you work the wrong way, it's a bad sign! We have to know how to remember our work.

We always have something to learn and we welcome any feedback.

You must also dare to talk about your difficulties , not to close yourself off to a problem that could be solved as a team. Simply ask for help.

Know how to communicate

Communication** is essential in our business.

A developer never works alone.

Being able to explain code to colleagues, to justify technical decisions are very important things, for example.

Knowing how to communicate with a customer is essential too, especially if you are brought to be in contact with.

Constantly learning

Our job is in constant evolution, we are required to learn throughout our career.

You have to be able to learn a new framework, a new technology on your own.

Don't hesitate to do technology watch to keep you informed of new features but also of updates. For that, I create a newsletter to share my technology watch every week. You can subscribe at this address(The newsletter has just been switched to English/French, don't hesitate to subscribe !)).

Solving problems without panic

Not to panic and demoralize at the first problem encountered is very important too, especially in our job where we spend our time debugging!

For that, nothing better than decoupling your big problem into several small ones, so you don't feel overloaded.

And if you are stuck, don't hesitate to ask for help, as seen in the 1st point.

A company would rather you ask for help than waste time on a problem for 4 days!

In conclusion

Most soft skills come "on their own" with experience but mostly it all depends on one's character.

Now that you have all the keys in hand, you will be able to be much more fulfilled in what you do.

If you want to go deeper, I recommend this book that Medhi Zed aka Jesuisundev had shared on his article "Top 3 essential books for developers"

If you have any feedback on this article, don't hesitate to come and tell me about it !

Qu’est-ce que “l’open source” et pourquoi je devrais y contribuer ?

Romain — Mon, 26 Sep 2022 09:33:53 +0000

L’ Hacktoberfest 2022 est l’occasion de comprendre ce qu’est l’ open source et pourquoi tu devrais y contribuer , et donc participer à cet événement qui se déroule durant tout le mois d’octobre.

Qu’est ce que l’open source

Un code open source est un code ouvert , accessible à tous.

À ne pas confondre avec la notion de “code libre”.

Code libre vs code open source, quelles différences ?

La notion de code libre est née bien avant celle de l’open source.

C’est Richard STALLMAN qui a initié ce mouvement. La différence est grande selon lui :

Think of “free speech”, not “free beer”.

Richard STALLMAN

_ Pensez à “liberté d’expression” et pas à “entrée libre” _, la grande différence entre les deux notions résident dans cette phrase.

C’est une question de liberté, pas de prix.

Ce n’est pas parce que le code est accessible qu’il respecte toutes les libertés résidant dans le code libre :

Liberté de l’utiliser,
Liberté de l’étudier,
Liberté de le modifier et d’en redistribuer des copies, modifiées ou non.

Ce n’est pas parce que le code est disponible pour tous qu’il prône les valeurs du libre.

De nos jours de nombreuses licences sont disponibles, plus ou moins restrictives. Certaines ne respectant pas le mouvement du libre.

GitHub a même créer un outil permettant de choisir la licence appropriée à nos besoin : https://choosealicense.com/.

Pourquoi contribuer ?

Il existe une multitude de raisons de vouloir contribuer.

Tu utilises un framework que tu apprécies et tu souhaites apporter ton aide à la communauté? Tu peux contribuer.

Tu rencontres un bug dans un package que tu utilises et tu souhaites le résoudre toi même ? Tu peux contribuer

Il n’existe pas de traduction pour ta langue ? Tu peux contribuer.

Et encore bien d’autres.

Le principal avantage à la contribution est que tu vas apporter ton aide à la communauté, que tu vas participer activement à l’amélioration d’outils open source que tu utilises quasiment tous les jours.

Ensuite, en termes de compétences, tu vas pouvoir découvrir du code existant et donc t’exercer à comprendre et adapter un code que tu n’as pas écrit.

Tu vas même pouvoir acquérir de nouvelles compétences.

Et si tu contribues à ton framework / CMS / outil préféré tu vas bien mieux comprendre comment il fonctionne, en découvrant le cœur de celui-ci.

En bref, il n’y a que du bon dans la contribution de projets open source, donc n’hésites pas !

Maintenant si tu as envie d’apporter ta contribution, comment faire ?

Comment contribuer ?

Nous avons vu qu’il existe énormément de manières différentes de contribuer :

Résoudre des issues (bug)
Création/Correction de documentations
Faire de la traduction
etc..

Si tu es débutant⸱e et que tu n’as jamais fait ce genre de chose, tu peux commencer par consulter cette page ou encore celle ci (en français) créée par GitHub.

Ces tutoriels rapides vont t’apprendre à te servir de _ git _ et t’expliquer de A à Z comment apporter ton aide.

Pour commencer et pour découvrir le monde de l’open source et de la contribution :

First Contributions, un projet pour réaliser ta première PR (Pull Request)
Awesome For Beginner, une liste de projet cool pour les juniors
Good First Issues Github, une liste de toutes les issues notées comme “Good First Issue”

Si tu sais déjà comment contribuer et te servir de git tu peux tout de suite te lancer.

Mais tout d’abord, il va falloir trouver un projet sur lequel tu veux contribuer et te trouver un problème à résoudre. (c’est souvent l’étape la plus compliquée)

Cela peut être le framework, outil, CMS que tu utilise quotidiennement en tant que développeur.

Par exemple, si tu souhaites contribuer au projet Symfony , il existe une formation gratuite excellente sur Symfony Casts ! Ensuite, il suffit de te rendre dans l’onglet “Issues” du repository.

Si tu préfères t’entraîner sur d’autres projets, tu peux consulter ces différentes pages :

Ces pages vont te donner des projets où il y a besoin d’aide et tu peux filtrer par langage, facilité de résolution, etc..

Il n’y a plus qu’à trouver une issue, te l’attribuer et commencer à la résoudre !

Maintenant que tu sais comment contribuer, je ne peux que te souhaiter un Happy Hacktoberfest 2022

Les “Soft skills”, pourquoi sont-ils si importants ?

Romain — Mon, 22 Aug 2022 08:30:00 +0000

Aujourd’hui, nous allons parler des “ Soft skills ” dans le monde du travail et je vais tenter de t’expliquer pourquoi sont-ils si importants et comment peuvent-ils faire la différence.

Les “Soft Skills”

On entend souvent parler de soft skills, mais qu’est ce que c’est ?

Les soft skills, aussi appelés “compétences de base” sont des compétences applicables à tous les corps de métiers, à l’inverse des “hard skills” , qui eux sont spécifiques à un métier en particulier.

Cette catégorie regroupe une multitude de compétences relationnelles , par exemple (cette liste est non-exhaustive, elle correspond aux points les plus importants selon moi) :

Esprit critique , savoir se remettre en question mais aussi les décisions des autres,
Résolution de problèmes , ne pas se sentir démoralisé⸱e face à un problème de taille,
Communication , savoir communiquer est très important, ne pas s’isoler,
Travail d’équipe , savoir collaborer sur un projet commun,
Attitude professionnelle

Ces compétences, très générales, vont t’être utiles pour t’intégrer dans une équipe ou interagir au mieux avec tes clients.

Sont-ils vraiment importants ?

Les soft skills sont extrêmement importants dans le monde professionnel.

Notamment lors d’un entretien d’embauche , une personne sachant communiquer correctement, expliquer ce sur quoi elle a travaillé, etc.. à beaucoup plus de chance d’être recrutée que l’inverse.

Les développeur⸱euse⸱s qui ont des difficultés techniques et qui savent communiqué⸱e⸱s sont considéré⸱e⸱s comme meilleur⸱e⸱s que l’inverse.

Dans notre métier, les technologies évoluent tellement rapidement qu’un⸱e recruteur⸱euse ne cherche plus seulement un⸱e développeur⸱euse techniquement doué⸱e mais aussi quelqu’un capable d’évoluer au sein de l’entreprise.

Un⸱e développeur⸱euse ne voulant pas changer/évoluer, ayant un ego surdimensionné (se croyant au dessus de tout) aura bien moins de chance qu’inversement.

C’est pour cela que l’on peut dire que les soft skills ont une place plus importante que les hard skills. (je parle dans notre métier, mais j’imagine que cela est valable dans d’autres également)

Comment “travailler” mes soft skills ?

Tout comme les hard skills, les soft skills ne sont pas “innés”.

Par exemple, plus tu vas communiquer, plus tu seras à l’aise.

Tu n’as pas besoin de maîtriser absolument toutes ces compétences, mais nous pouvons voir les compétences “indispensables” selon moi.

Avoir un esprit critique

Avoir un esprit critique est génial. Il faut comprendre qu’une méthode de travail n’est pas forcément la meilleure pour tout le monde, savoir se remettre en question continuellement.

Si tu prends mal la moindre remarque fait par rapport à ton code ou à ta façon de travailler, c’est mauvais signe ! Il faut savoir prendre du recul sur notre travail.

Nous avons toujours à apprendre et toute remarque est la bienvenue.

Il faut aussi oser parler de ses difficultés , ne pas se renfermer sur un problème qui pourrait être résolu en équipe. Demander de l’aide , tout simplement.

Savoir communiquer

La communication est primordiale dans notre métier.

Un⸱e développeur⸱euse ne travaille jamais seul.

Pouvoir expliquer du code à ses collègues, justifier des décisions techniques sont des choses très importantes, par exemple.

Savoir communiquer avec un client est indispensable aussi, surtout si tu es amené⸱e à être en contact avec.

Apprendre constamment

Notre métier est en constante évolution , nous sommes amenés à apprendre durant toute notre carrière.

Il faut que tu puisses apprendre un nouveau framework, une nouvelle technologie par toi-même.

Ne pas hésiter à faire de la veille technologique pour te tenir au courant des nouveautés mais aussi des mises à jour. Pour cela, je réalise une newsletter pour partager ma veille toutes les semaines. Tu peux t’inscrire en bas de cet article ou encore à cette adresse.

Résoudre des problèmes sans panique

Ne pas paniquer et démoraliser au premier problème rencontré est très important aussi, surtout dans notre métier où l’on passe notre temps à debugger !

Pour cela, rien de mieux que de découper ton gros problème en plusieurs petits, pour ne pas te sentir surchargé⸱e.

Et si tu es coincé⸱e, ne pas hésiter à demander de l’aide , comme vu dans le 1er point.

Une entreprise préfère que tu demandes de l’aide plutôt que tu perdes du temps sur un problème pendant 4 jours !

Pour conclure

La plupart des soft skills viennent “tout seuls” avec l’expérience mais surtout tout dépend du caractère de chacun.

Maintenant que tu as toutes les clés en main, tu vas pouvoir être bien plus épanoui⸱e dans ce que tu fais.

Si tu souhaites approfondir, je te conseille ce livre qu’avait partagé Medhi Zed alias Jesuisundev sur son article “Top 3 des livres indispensables pour développeurs”

Si tu as des retours suite à cet article, n’hésite pas à venir m’en parler !

Découverte du composant workflow de Symfony

Romain — Tue, 16 Aug 2022 16:19:01 +0000

Aujourd’hui, nous allons découvrir ensemble le composant Workflow de Symfony.

Le but de ce composant

L’objectif de ce composant est de reproduire des “machines à état” (ou automate ) qui correspond à un modèle de mathématique.

Evidemment, dit comme ça, le composant paraît hyper compliqué. Mais une image vaut 1000 mots :

Explication du Workflow du site symfony.com

En bref, le composant Workflow permet de définir plusieurs états pour une entité.

Prenons l’exemple donné par Wikipedia :

Imagine un “portillon d’accès” (comme dans le métro, tu insères ton ticket et hop tu passes), il est très simple de le représenter sous la forme d’un automate :

Automate d’un portillon d’accès

Ici, on peut voir que si l’on insère le ticket alors que le portillon est dans l’état “Verrouillé”, alors l’automate passe dans l’état “Déverouillé” et il est alors possible de pousser afin de passer et de re-verouiller l’automate (c’est pour cela qu’il faut bien bien coller la personne en face pour frauder)

Maintenant que tout le principe de machine à état est clair, nous pouvons passer à un exemple plus concret dans Symfony et découvrir comment ce composant peut être utile dans de nombreux projets.

Exemple d’utilisation

Pour que ce soit bien plus clair, nous allons partir sur un exemple d’utilisation dans un vrai projet : mon portfolio.

Sur mon portfolio j’ai une entité Projet qui contient un champ isPublished, photoFilename, ainsi qu’un champ state, indiquant son état (pour l’utilisation dans un workflow).

Le cycle de vie de mon projet se déroule ainsi :

Création du projet, ajout du state “draft” (brouillon)
Si isPublished est à true, alors le code va aller optimiser l’image ajoutée (recadrement et génération du “blur” pour l’affichage en front), une fois cela fait, l’entité va passer à l’étape suivante : ready
Enfin, le projet passe dans l’état published. (Je n’ai plus qu’à récupérer uniquement les projets avec cet état en front pour l’affichage.)

Voici un schéma de mon cycle de vie :

Schéma du cycle de vie de mon projet

A chaque fois que je sauvegarderais un projet, il changera d’étape.

S’il ne peut pas, comme dans le cas du brouillon si le projet n’a pas vocation à être publié pour le moment par exemple, il restera dans le même état.

Configurer un workflow dans un projet Symfony 6

Pour configurer facilement un cycle de vie d’une entité dans un projet Symfony 6 , c’est très simple.

Configuration

Tout d’abord, il faut créer une propriété dans l’entité, par exemple un string nommé state !

    #[ORM\Column(type: 'string', options: ['default' => 'draft'])]
    private string $state = 'draft';

Je défini un état par défaut qui est “draft” (Brouillon en français).

Ensuite, il faut ajouter ce workflow dans un fichier de configurer nommé workflow.yml (dans config/packages) :

framework:
    workflows:
        project:
            type: state_machine
            audit_trail:
                enabled: "%kernel.debug%"
            marking_store:
                type: 'method'
                property: 'state'
            supports:
                - App\Entity\Project
            initial_marking: draft
            places:
                - draft
                - ready
                - published
            transitions:
                publish:
                    from: draft
                    to: ready
                optimize:
                    from: ready
                    to: published
                unpublish:
                    from: published
                    to: draft

Ce fichier va définir les différents états dont vous avez besoin pour votre entité, ainsi que les transitions. (passer de draft -> ready -> published -> draft)

Code

Maintenant que notre workflow est défini, il nous suffit d’écrire le code qui va effectuer les diverses actions à chaque étapes.

Pour cela, il faut que le code soit exécuté à chaque mise à jour / création de l’entité.

Il faut donc créer un EntityListener.

Si tu veux en savoir plus sur cette notion, je t’invite à consulter la documentation officielle.

Pour ma part, le code ressemble à ceci (j’ai suivi cette partie de la documentation) :

<?php

declare(strict_types=1);

namespace App\EntityListener;

use App\Entity\Project;
use App\Message\PublishProjectMessage;
use Doctrine\ORM\Event\LifecycleEventArgs;
use Symfony\Component\Messenger\MessageBusInterface;

final class ProjectListener
{
    public function __construct(
        private MessageBusInterface $bus
    ) {
    }

    public function postPersist(Project $project, LifecycleEventArgs $event): void
    {
        $this->bus->dispatch(new PublishProjectMessage($project->getId()));
    }

    public function preUpdate(Project $project, LifecycleEventArgs $event): void
    {
        $project->setUpdatedAt(new \DateTimeImmutable());
        $this->bus->dispatch(new PublishProjectMessage($project->getId()));
    }
}

Pour améliorer les performances de mon application, j’ai exécuté mon workflow dans un message , si tu ne sais pas de quoi il s’agit, je t’invite à consulter mon article sur Symfony Messenger.

Mais tu peux très bien adapter le code pour utiliser un service, le composant Workflow de Symfony marchera parfaitement.

Tout ce qu’il faut savoir, c’est qu’il faut implémenter l’interface WorkflowInterface pour ensuite l’utiliser dans ton code et savoir dans quel état est ton entité et quelles actions tu peux réaliser :

<?php

declare(strict_types=1);

namespace App\MessageHandler;

use App\Entity\Project;
use App\Message\PublishProjectMessage;
use App\Repository\ProjectRepository;
use Doctrine\ORM\EntityManagerInterface;
use Psr\Log\LoggerInterface;
use Symfony\Component\Messenger\Handler\MessageHandlerInterface;
use Symfony\Component\Messenger\MessageBusInterface;
use Symfony\Component\Workflow\WorkflowInterface;

final class PublishProjectMessageHandler implements MessageHandlerInterface
{
    public function __construct(
        private readonly EntityManagerInterface $entityManager,
        private readonly ProjectRepository $projectRepository,
        private readonly MessageBusInterface $bus,
        private readonly WorkflowInterface $projectStateMachine
    ) {
    }

    public function __invoke(PublishProjectMessage $message): void
    {
        /** @var Project|null $project */
        $project = $this->projectRepository->find($message->getId());
        if (!$project) {
            return;
        }

        // Le projet peut-il passer dans l'état "publish" ? 
        // En d'autres mots, est-il dans l'état "draft"
        if ($this->projectStateMachine->can($project, 'publish')) {
            if ($project->isPublished()) {
                // Si le projet est publié, applique l'état "publish"
                // C'est-à-dire passe de l'état "draft" à "ready"
                $this->projectStateMachine->apply($project, 'publish');
                $this->entityManager->flush();

                $this->bus->dispatch($message);
            }
        } elseif ($this->projectStateMachine->can($project, 'optimize')) {
            // Call to a service to optimize media
            ...

            // Si le projet est prêt, applique l'état "optimize"
            // C'est-à-dire passe de l'état "ready" à "published"
            $this->projectStateMachine->apply($project, 'optimize');
            $this->entityManager->flush();
        } elseif ($this->projectStateMachine->can($project, 'unpublish')) {
            if (!$project->isPublished()) {
                // Si le projet est dépublié, applique l'état "unpublish"
                // C'est-à-dire passe de l'état "publish" à "draft"
                $this->projectStateMachine->apply($project, 'unpublish');
                $this->entityManager->flush();
            }
        }
    }
}

Et voilà ! Maintenant quand tu vas modifier ton entité, tu verras son état changer en base de données.

En très peu de temps tu as pu créer une machine à état et su gérer parfaitement les différents états au fur et à mesure de la vie de ton entité.

Cet exemple est très simple mais tu peux très bien imaginer des workflow bien plus complexes avec une multitude d’état !

Si tu veux en savoir plus ou rentrer plus en profondeur, n’hésites pas à consulter la documentation.

Si tu remarques quelques coquilles dans l’article, n’hésites pas à m’en avertir en me contactant, ce serait un plaisir !

Devenir un meilleur développeur grâce au “Clean Code”

Romain — Mon, 13 Jun 2022 15:32:27 +0000

Il y a quelque temps j’ai intégré une nouvelle entreprise dans le cadre d’une “régie”, habitué aux agences web, c’est la première fois que je sortais de ce domaine.

Quand j’ai découvert le code de cette entreprise, j’ai vite compris que j’étais à la ramasse en terme de qualité de code.

Je connaissais tous les concepts utilisés mais je ne les appliquais pas systématiquement.

Pourquoi ? Par manque de temps, des deadline très rapprochés. (beaucoup d’excuses, oui)

Je privilégiais la quantité à la qualité.

Et ça, c’est un gros défaut que pas mal de développeurs (surtout junior) ont.

Aujourd’hui on va parler de “ Clean Code ” et de comment l’ensemble de ces pratiques peuvent faire de toi un meilleur développeur.

Qu’est-ce-que le “Clean Code”

Son importance

Au delà du titre “putaclick”, mon but est de te prouver l’importance de ces méthodologies et comment elles peuvent réellement faire de toi un meilleur développeur.

Le Clean Code , c’est surtout une liste (non exhaustive) de méthodologie à respecter pour faire du code de qualité.

Un code de qualité donne énormément d’avantages (en plus de pouvoir être fier de ton code) :

Plus maintenable , une modification dans une base de code ne devrait pas te faire peur.
Plus modulable/améliorable , n’importe quel développeur doit être en mesure d’ajouter et/ou modifier une fonctionnalité très facilement.

Et faire du code de qualité s’applique bien évidemment à tout les domaines, même dans le web pour les “petits sites”.

Il ne devrait pas y avoir d’excuse pour ne pas suivre ces principes.

En plus d’être bien plus agréable pour tout le monde (oui, personne n’aime développer avec du legacy), tu vas prendre un bien plus grand plaisir à développer.

L’objectif est que tu deviennes fier de ton code.

Le Clean Code c’est tout un état d’esprit, on parle de “Software Craftsmanship” (Artisan Développeur). Un manifeste existe même pour cela : https://manifesto.softwarecraftsmanship.org/.

Pourquoi ?

Si tu n’es toujours pas convaincu de l’importance d’utiliser le Clean Code, il faut revenir à la base : pourquoi le développement orienté objet à été inventé ?

Est-ce que nous n’étions pas bien avec nos fichiers PHP de 1000 lignes avec tout un tas de fonctions posées comme ça sans contexte et des includes dans tout les sens ? (Je prends ici l’exemple du PHP puisque c’est celui que je maîtrise, mais tout cet article s’applique bien évidemment à n’importe quel langage.)

Tu l’auras deviné, la programmation orientée objet a été inventée spécifiquement pour ce problème : l’organisation.

Pouvoir organiser son code en classe a été une petite révolution.

De là sont nées énormément de bonne pratiques , acquis à force d’erreurs.

En effet, avez-vous déjà été confronté à une classe de 500 lignes en soupirant parce que vous savez que ce sera long de trouver ce que vous voulez vraiment ?

Beaucoup de développeur l’ont étés avant vous.

Et les principes que nous allons voir ont été créés pour ne pas répéter les mêmes erreurs.

Pour aller plus loin, certains ont inventés des design pattern ( patrons de conception ) pour tout un tas de cas d’utilisation. Nous n’allons pas parler de cela aujourd’hui mais si tu veux en savoir plus je te conseille l’excellent site refactoring.guru !

Les différents principes

Il existe évidemment bien d’autres principes, je vais parler ici des principaux, de ceux que tout le monde devraient appliquer.

KISS (Keep It Simple, Stupid)

Ce principe préconise la simplicité.

Ne pas ajouter une complexité non-indispensable à une application.

Un code simple est bien plus facile à modifier.

Il semble que la perfection soit atteinte non pas lorsqu’il n’y a plus rien à ajouter, mais lorsqu’il n’y a plus rien à enlever.

DRY ( Don’t Repeat Yourself )

Le titre en dit long : ne pas se répéter.

Si le fonctionnement de cette fonction doit changer, il est plus simple de la modifier à un seul endroit plutôt que de devoir chercher toutes les fonctions implémentant le même code.

Attention par contre avec ce principe, il peut être bon de se répéter parfois.

Lorsque les cas d’utilisations ne sont pas les mêmes, par exemple. Un produit dans un catalogue ou dans un panier utilisateur n’est pas le même, il pourrait être bon de le dupliquer dans ce cas là.

Celui-ci est à prendre avec des pincettes, si tu veux approfondir, je te conseille cet article.

SOLID

Le principe SOLID est le plus important de tous.

Responsabilité unique (Single responsibility principle)

Une classe, une fonction ou une méthode doit avoir une et une seule responsabilité

Ouvert/fermé (Open/closed principle)

Une entité applicative (classe, fonction, module …) doit être fermée à la modification directe mais ouverte à l’extension

Substitution de Liskov (Liskov substitution principle)

Une instance de type T doit pouvoir être remplacée par une instance de type G, tel que G sous-type de T, sans que cela ne modifie la cohérence du programme

Ségrégation des interfaces (Interface segregation principle)

Préférer plusieurs interfaces spécifiques pour chaque client plutôt qu’une seule interface générale

Inversion des dépendances (Dependency inversion principle)

Il faut dépendre des abstractions, pas des implémentations

Si tu souhaites plus de détails concernant ce principe je te renvois vers l’excellent article d’alexsoyes

Les bonnes pratiques

Au-delà de ces principes, il existe aussi des “bonnes pratiques”.

Cohérence

Être cohérent , toujours utilisé le même nommage dans toute son application, par exemple.

Si tu utilises l’anglais à un endroit, utilise le partout.

Si tu utilises du CamelCase pour le nommage de tes classes, utilise le partout.

Utiliser des noms de variables explicites. Au bûcher les variables a / b / array / variable, il devrait être possible de comprendre le code rien qu’en le lisant.

Conventions

Suivre les normes de son langage, le PSR-12 en PHP , par exemple.

Tous les langages ont (normalement) leurs normes, leurs “coding style”.

Mais les CMS ou framework en ont aussi, exemple avec Symfony ou encore WordPress.

Tu peux facilement trouver les bonnes pratiques liées à ta situation.

Mettre en pratique

On arrive à la partie la plus compliquée : la mise en pratique.

Il n’y a pas de secret, il faut pratiquer.

Réaliser un projet de 0 et appliquer au maximum tout ce que nous avons vu.

Ou alors ne pas hésiter à refactoriser (Retravailler une application informatique pour l’améliorer en profondeur, sans pour autant lui ajouter de nouvelles fonctions. Merci Wikipedia )

Reprends ton code et reprends un à un tous les principes et demande toi si tu les respectes tous.

Tu peux facilement trouver tout un tas d’exemples dans le framework / CMS de ton choix. Pour ma part cet article m’a beaucoup aidé à appréhender SOLID dans Symfony.

Ce qui serait encore mieux ce serait d’avoir des proches à qui demander conseils, pour savoir si tu respectes au maximum le clean code.

Si tu remarques une erreur, ou si tu souhaites améliorer cet article, n’hésites pas à m’envoyer un message via cette page ou directement sur twitter !

Github Actions for Symfony 5 PHPUnit and more

Romain — Wed, 10 Nov 2021 16:01:03 +0000

My Workflow

This Github Actions will help you to guarantee an optimal quality and the good functioning of the code thanks to the launching of automatic tests.
But also warn you about the known vulnerabilities of your dependencies.

PHP Setup

First, this action setup PHP, composer and install all composer dependencies.

Security / Quality

After that, it check vulnerabilities in your dependencies and check your quality code according to PSR12 coding style using PHP_CodeSniffer and PHPStan

Webpack Encore

For the Webpack Encore part, it install all npm dependencies and build all your assets.

Tests

Finally, it run your PHPUnit tests. (and Behat, if you have).

Submission Category:

Maintainer Must-Haves

Yaml File

name: Symfony 5 Tests
on:
  push:
    branches:
      - main
      - dev
  pull_request:

jobs:
  symfony:
    name: Symfony 5.0 (PHP ${{ matrix.php-versions }})
    # https://hub.docker.com/_/ubuntu/
    runs-on: ubuntu-latest
    strategy:
      fail-fast: true
      matrix:
        php-versions: ['7.4']
    steps:
      # https://github.com/actions/checkout (official)
      - name: Checkout
        uses: actions/checkout@v2

      # https://github.com/shivammathur/setup-php (community)
      - name: Setup PHP, extensions and composer with shivammathur/setup-php
        uses: shivammathur/setup-php@verbose
        with:
          php-version: ${{ matrix.php-versions }}
          extensions: mbstring, xml, ctype, iconv, intl, pdo_sqlite, dom, filter, gd, iconv, json, mbstring, pdo

      # Composer
      - name: Get composer cache directory
        id: composer-cache
        run: echo "::set-output name=dir::$(composer config cache-files-dir)"

        # https://help.github.com/en/actions/configuring-and-managing-workflows/caching-dependencies-to-speed-up-workflows
      - name: Cache composer dependencies
        uses: actions/cache@v1
        with:
          path: ${{ steps.composer-cache.outputs.dir }}
          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
          restore-keys: ${{ runner.os }}-composer-

      - name: Install Composer dependencies
        run: composer install --no-progress --no-suggest --prefer-dist --optimize-autoloader

      # https://github.com/sensiolabs/security-checker
      - name: Security check installed dependencies
        uses: symfonycorp/security-checker-action@v2

      # https://github.com/chekalsky/phpcs-action (community)
      - name: Check PSR12 code style (PHP_CodeSniffer)
        uses: chekalsky/phpcs-action@v1.2.0
        with:
          enable_warnings: true
          installed_paths: '${{ github.workspace }}/vendor/squizlabs/php_codesniffer'
          phpcs_bin_path: './vendor/bin/phpcs src --ignore="Migrations/"'

      # https://github.com/phpmd/phpmd
      # - name: Analyses PHP Code (PHP Mess Detector)
      #  run: vendor/bin/phpmd src,tests text .phpmd-ruleset.xml

      # https://github.com/phpstan/phpstan
      - name: Analyse PHP Code (PHPStan)
        run: vendor/bin/phpstan analyse src

      - name: Cache node_modules
        uses: actions/cache@v1
        id: yarn-cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-yarn-cache-node-modules-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-cache-node-modules-

      - name: Yarn install
        if: steps.yarn-cache-node-modules.outputs.cache-hit != 'true'
        run: yarn install

      - name: Yarn build
        run: yarn run encore production

      - name: Archive production artifacts
        uses: actions/upload-artifact@v1
        with:
          name: build
          path: public/build

      # Symfony
      - name: Check the Symfony console
        run: |
          php bin/console -V
          php bin/console about
      # Tests
      - name: Run unit and functional tests
        run: |
          php bin/phpunit --stop-on-failure

      # - name: Run Behat/Mink tests
      #  run: |
      #    php vendor/bin/behat

Additional Resources / Info

You can remove all yarn related parts if you don't use Webpack Encore