DEV Community: Barrington Hebert

Sockets & Multiplayer Gaming

Barrington Hebert — Mon, 03 Feb 2025 22:30:47 +0000

Ever wanted to make a multiplayer game? It may sound intimidating at first but it offers an exciting chance to learn all the wonders of sockets and how they work. No, not the sockets we use as tools in a mechanical hardware sense, but sockets as a point of connection that allows clients or programs to communicate with one another. They are used primarily to send and receive data over a network, I like to think of them as being similar to http requests in the context of web development, except they specialize in their ability to be utilized for communication from client to client. In this short example, I will demonstrate how we can use the unique capabilities of sockets to create a multiplayer gaming experience in any web application using Express, React, and socket.io.

A Brief Introduction to Sockets

First, the way we initialize sockets is by making use of the socket() function, which creates a new socket object. We first start on our server side, and can initialize the socket there:

import { createServer } from "http";
import { Server, Socket } from "socket.io";

const httpServer = createServer(); // create your server normally
const io = new Server(httpServer, { // pass that server in here
  // ... // your options, such as your cors setup, can go here
});

io.on("connection", (socket: Socket) => { // this is when the socket is initialized
  // We will pass our socket events here
});

httpServer.listen(4000); // sets up your server

Here we can see that socket.io comes with typescript support, where we can let typescript know we are dealing with a socket inside of our function. In our case we are using Express, we must make use of a slightly different setup:

const app = require("express")();
const httpServer = require("http").createServer(app);
const options = { /* ... */ };
const io = require("socket.io")(httpServer, options);

io.on("connection", socket => { /* ... */ });

httpServer.listen(4000);

As you can see, in this case; we are not using app.listen(PORT) in this case; this is because it will create a new HTTP server. We do not want this; as we want to ensure we use the server that has been initialized with sockets ready for use. Socket.IO needs to attach itself to an http server to handle initial handshakes and upgrades to the WebSocket protocol, however if we were to use app.listen() Express will create its own HTTP server instance. It will also lead to issues with CORS, as Express handles CORS seperately from Socket.IO, which will lead to potential conflicts. Thus the best way to use Socket.IO is to create an HTTP server instance and explicitly pass it to Socket.IO, which gives us more control and avoids potential conflicts.

Now that we have our sockets on the server side ready, lets start looking at our client-side for sockets:

// We use io from a separate library for client-side sockets
import { io } from "socket.io-client";

// initialize your socket to the same url as your server                  
const socket = io("http://localhost:3000");

// Inside of your component...
function Component(){

// Inside of a useEffect hook...
useEffect(() => {

// Place your assorted socket event listeners
socket.on("connect", () => {
  console.log("Connected to the server!");
});

socket.on("message", (data) => {
  console.log("Received message:", data);
});
})
//...
}

Here we can see how our sockets will be set up on the client side, it requires we use a different library socket.io-client, and we import io from there, then initialize it whilst passing our server URL into it as an argument. From here, we can use socket.emit() to send events to the server, and socket.on() to listen for those events from the server. Our connect event, indicates a successful connection to the server. In React, we want to wrap all of this inside of our useEffect hook, so that the sockets are at a constant ready state to receive socket.emit() from the server, and at any point outside of this connection, we may send data via emit() to the server, and vice versa. To summarize this; the basic syntax of this communication is essentially socket.on('x', {data}) will activate on the server side when socket.emit(x, {data}) is called on the client side, where x is a string which only triggers when its matching counterpart is called. Similar to the way express request handlers work in tandem with axios for example.

Multiplayer Game Logic

Now that a basic rundown of how sockets and events work have been successfully reviewed, lets start implementing a multiplayer game where our characters can move around the screen in real time. This subject is slightly more advanced, and we will go over how the logic for controlling your character will work in this game first. The initial part of this chain of inputs comes from our user when they push buttons on their keyboard or game-pad, we need to set ourselves up with a way to listen to all those inputs coming from the keyboard with basic event listeners being activated when the React component mounts:

  // EVENT LISTENERS FOR PLAYER INPUT
  useEffect(() => {
    // This 'isTyping' bool is if you want to toggle when the player is allowed to move their character
    if (isTyping === false) {
    // If they are not typing, start your event listeners!
      document.addEventListener('keydown', keyPress);
 // the first parameter is the event, the second is the function to be called
      document.addEventListener('keyup', keyUp);
    } else {
      document.removeEventListener('keydown', keyPress);
      document.removeEventListener('keyup', keyUp);
    }
// The return statement is for when the component unmounts
    return () => {
      document.removeEventListener('keydown', keyPress);
      document.removeEventListener('keyup', keyUp);
    };
// A dependency, meaning only trigger when this state variable is changed
  }, [isTyping]);

These event listeners allow you to listen for any keyboard usage our user does while on our page. I should also clarify that in my component, I implemented a way for players to send messages to one another, so I am making use of an 'isTyping' state variable that ensures the event listeners are turned off whenever a player is typing inside of our inbox (which triggers isTyping to change it's state to true, in which case these event listeners are removed). Anyways, when the keys are pressed or released, we will be able to trigger events or functions based on this. These functions will look something like the following depending on your controls:

// Remember this function from earlier? I hope so!
  const keyPress = ({ key }: Element) => {
// It's 100% cleaner to use switch statements here. 
// But I'm opting for if/else to illustrate grandiose detail of what happens
    if (isTyping === false) {
      if (key === 'ArrowUp' || key === 'w') {
// Behold, our first socket.  It is emitting to 'keyPress', passing an object full of data.
        socket.emit('keyPress', { inputId: 'Up', state: true });
      } else if (key === 'ArrowDown' || key === 's') {
        socket.emit('keyPress', { inputId: 'Down', state: true });
      } else if (key === 'ArrowLeft' || key === 'a') {
        socket.emit('keyPress', { inputId: 'Left', state: true });
      } else if (key === 'ArrowRight' || key === 'd') {
        socket.emit('keyPress', { inputId: 'Right', state: true });
      }
    }
  };

// When they release the key...
  const keyUp = ({ key }: Element) => {
    if (key === 'ArrowUp' || key === 'w') {
      // Up
      socket.emit('keyPress', { inputId: 'Up', state: false });
    } else if (key === 'ArrowDown' || key === 's') {
      // Down
      socket.emit('keyPress', { inputId: 'Down', state: false });
    } else if (key === 'ArrowLeft' || key === 'a') {
      // Left
      socket.emit('keyPress', { inputId: 'Left', state: false });
    } else if (key === 'ArrowRight' || key === 'd') {
      // Right
      socket.emit('keyPress', { inputId: 'Right', state: false });
    }
  };

As you can see, our sockets emit data to a keyPress listener on the server side, along with some details needed for those listeners. On the server side; you will see that the listeners are set up like this:

    // Controls movement. Update their respective state via socket.id
// This is the socket catching all the information from the client's event...
    socket.on('keyPress', ({ inputId, state }) => {
      if (inputId === 'Up') {
        PLAYER_LIST[socket.id].pressingUp = state;
      }
      if (inputId === 'Left') {
        PLAYER_LIST[socket.id].pressingLeft = state;
      }
      if (inputId === 'Right') {
        PLAYER_LIST[socket.id].pressingRight = state;
      }
      if (inputId === 'Down') {
        PLAYER_LIST[socket.id].pressingDown = state;
      }
    });
// On the server side, this all goes inside of io.on('connect', (socket) => { *** }}

This socket will catch anything that is sent from the client to 'keypress', and update a player based on their socket.id, which comes inherent on every socket. The PLAYER_LIST is an object which each player of our game is added. We can tell which player is which based on their socket.id, which comes unique for each client. These key values will point to a player object that looks something like this:

// Player constructor function. This is 100% better using ES6 or pseudoclassical, 
// Once again I am opting for using something else to illustrate grandiose detail. 
const Player = function (id: string, user: any, eventId: string): any {
  const self = {
    username: user.username,
    name: id,
    data: {
      // positions
      x: 25,
      y: 25,
    },
    pressingRight: false, // States of movement
    pressingLeft: false, // Remember state in the client side?
    pressingUp: false, // This is what it will be used for
    pressingDown: false, // Based on those keypress
    maxSpd: 10,
    sentMessage: false,
    currentMessage: '',
    eventId,
    updatePosition() { 
      // method for updating state of movement
      if (self.pressingRight) {
        self.data.x += self.maxSpd;
      }
      if (self.pressingLeft) {
        self.data.x -= self.maxSpd;
      }
      if (self.pressingUp) {
        self.data.y -= self.maxSpd;
      }
      if (self.pressingDown) {
        self.data.y += self.maxSpd;
      }
    },
  };
  return self;
};

As you can see, each of these players will have a method that will update based on the passed in data of their movement; and in turn will update their own x and y positions by the value of their maxSpd. We create these players whenever they initially join a room, so on the client side we will need them to join a certain room which I based on their eventId value, and they will also need to be added to a socket list. This is so I can update every single player in the list based on their respective socket in the player list. I accomplished this task by utilizing something like this:

// When a player joins the game/chat
socket.on('joinChat', ({ user, eventId }) => {
      // Add data to their socket, data is of type any
      socket.data.name = socket.id;
      socket.data.eventId = eventId;
      // join add's them to a "room" (discussed later)
      socket.join(eventId);
      // Create a player out of their information!
      const player = Player(socket.id, user, eventId);
      // stringName is really their socket.id... I did it this way just to illustrate that the data is unique to this particular socket
      const stringName = socket.data.name;
      // Add them to an object full of sockets
      SOCKET_LIST[stringName] = socket;
      // Add them to an object full of players
      PLAYER_LIST[socket.id] = player;
    });

I placed this on the server side, so whenever the client-side sockets emit that someone has joined a chatroom/game, we can attach essential information on that player to their socket.data (which is naturally of type any; this is how we can attach information to our socket for use later on in our program), then we create a Player using our Player constructor function, and add the player to a player list, and their socket to a socket list. Lastly, on the server side, we need to set something up to update all the client information continuously. This is where the functionality of our player list and players is finally revealed:

  setInterval(() => {
    let pack = []; // package to store players
    // Iterate through the list of players
    for (let key in PLAYER_LIST) {
      let player = PLAYER_LIST[key];
      // Add this information on the player into the pack
      player.updatePosition();
      pack.push({
        id: player.name,
        x: player.data.x,
        y: player.data.y,
        username: player.username,
        sentMessage: player.sentMessage,
        currentMessage: player.currentMessage,
        room: player.eventId,
      });
    }
    // loop through the sockets and send the package to each of them
    for (let key in SOCKET_LIST) {
      let socket = SOCKET_LIST[key];
      // Sending info to the client here!
      socket.emit('newPositions', pack);
    } // How often the function is called... 
  }, 1000 / 25);

Here, we create a pack, to store all of our players, then loop through each player in our list, and call their respective updatePosition methods. Then add those updated positions to our pack, which is then added to our PLAYER_LIST. Lastly, we loop through the entirety of that list, and emit to the newPositions socket event on the client side, along with that data. Thus, on the client side, we now know we need trigger our 'joinChat'
and listen for 'newPositions' from the server socket events, ensuring we are passing and set up to handle the proper information:

useEffect(() => {
    // Page loads and a player joins the chat/game
    // Passing information that is used to create a player and a room. eventId can be a url endpoint or path for example.   
    socket.emit('joinChat', { user, eventId });


    // Update state of all players and their respective positions
    socket.on('newPositions', (data) => {
      let allPlayerInfo = [];
// We receive data from the server, and loop through it
      for (let i = 0; i < data.length; i++) {
// if the room matches, we keep it
        if (data[i].room === eventId) {
          allPlayerInfo.push({
            id: data[i].id,
            x: data[i].x,
            y: data[i].y,
            username: data[i].username,
            sentMessage: data[i].sentMessage,
            currentMessage: data[i].currentMessage,
            room: data[i].room,
          });
        }
      }
// Update a state variable you use to map players into the game
      setAllPlayers(allPlayerInfo);
    });
  }, []);

allPlayers is a state variable which was initialized using the useState hook, so whenever it changes, the component reliant upon these variables will update itself. I ensure to map through each player in this array of players and make use of their x and y variables to position them within the game. Due to the fact that the server is making use of setInterval which is triggered 25 times per second, this means the positions of the players are going to appear to move at 25 frames per second; which is optimal for RPG's and most games which aren't First-Person-Shooters. I also ensure that we filter out any player who does not belong on the client-side by checking which 'room' they are in when this object is passed. Of course the most efficient way to do this is by making use of "rooms" in sockets. Such as socket.nsp.to(room).emit(data); on our server side. This will require some knowledge of namespaces and rooms in sockets.

Socket Rooms, NameSpaces ( nsp ) & Optimization

For Socket.IO, nsp (namespaces) act as isolated channels for communication. When you create a new socket, it's like tuning into a radio station that broadcasts on a specific frequency. Without specifying a namespace, you're essentially broadcasting your message on a public channel where anyone can listen in. But by using nsp, you create a private channel for your sockets to communicate on. Imagine a large office building with hundreds of employees. If everyone talked at once, you'd have a cacophony of noise and no one would get anything done. Now, introduce conference rooms with walls—each room is a namespace. When you use socket.nsp.to('room').emit(data), you're essentially speaking into the intercom of that specific conference room. Only the sockets that have joined that 'room' & namespace will receive the message.
Take a step further back and look at the documentation on namespaces:
Official documentation states that

io.sockets === io.of("/") // <-- this is a default 'namespace' of io. Where the namespace is essentially global.

So whenever I try to put two and two together; I am thinking that: socket.nsp === io.of('this socket'), in which case socket.nsp.emit(data) emits data to a point that is dependent on the original way you initiated io... meaning 'nsp' is a property that references the io initialization. The latter half: socket.to(room).emit behaves normally by emitting to all in the room except yourself. The
final part is just chaining the two socket.nsp.to(room).emit(data) thus your socket emits to yourself, and to everyone else in a certain 'room'. In summary, there are many ways to create a multiplayer game and communicate information back and forth between the server and other clients at a breakneck pace through the utilization of sockets. HTTP requests are simply too slow; and sockets somewhat skim some of the extra data off themselves by not using large request and response objects.
Usage of socket-rooms and namespaces can help limit the amount of data passed and control who receives the data from your server-side sockets. There is a plethora of ways to refactor this code to your liking and help make it more efficient, or cultivate it to your needs. Simple things like switch statements, or making use of socket rooms and namespaces would accomplish this. I figured I would sacrifice these quintessential strategies in order to create code blocks that were more digestible for those of you who are brand new to coding, and looking to create your first multiplayer game. I hope this strategy also illustrates details and intricacies of how data can be accessed and passed back and forth using sockets, as well as allow you the time to linger on a more basic form of code, while providing you room for creativity in terms of optimization for more advanced developers. Anyways; Happy coding! -Cheers!

Unreal Engine, BluePrints, C++, Oh My!

Barrington Hebert — Mon, 27 Jan 2025 12:37:26 +0000

When I mention Blueprints and C++, the first thing thing that comes to mind is Unreal Engine. Unreal Engine is a 3D computer graphics tool, it can be used for films, special effects, and game design. Developed by Epic Games, this powerful tool can be utilized to create games for desktop, mobile, console, virtual reality, augmented reality, and mixed reality. It Allows you to code in both C++ and something called BluePrints, both of which are valuable tools that may not take too long to build foundational knowledge in, but will require time, commitment, and discipline to master.

So far my experience with Unreal Engine has been great. The ease for creating character models and weapons models is mind-boggling. Once you get a decent set of assets, it becomes quite easy to get started with creating your own game. Assets are the pieces of content used to create a game, they come in many forms, audio, meshes, and textures. Unreal Engine provides a wide variety of assets in it's store, and there are a variety of high quality free assets out there as well. I highly recommend using the free assets from some guys abandoned game project which can be found here:

Assets

Everything in gaming relies highly on assets, they are the fundamental geometric shapes, colors, and sounds that create the game world. Those games where they show the enemy's head explode from headshots? Each individual chunk of the brain that flies away is it's own respectable mesh. Static meshes comprise the geometrical shapes which are pieced together, whereas textures act as the paint brush of images that are used to be applies to their surfaces. If creating an enemy from scratch in a 3D world in some cases may take just as long as building the entire map they reside in. This game engine takes the first leap into game design by providing templates, including everything from weapons to entire maps to get started with.

Unreal Engine has gained alot of popularity for ensuring the more complex elements of game design, such as the collision detection, gravity, bullet projections, physics, dynamic lighting, and various mathematical complexities come pre-coded in C++. The code for the game can be edited, but it is limited to a certain degree, as it seems like gaining access to the deep inner-workings of some functions as they seem to present them in a way that only shows the input and output parameters of a function.

I found this mildly disappointing seeing as though I looked forward to expanding my understanding the verbose structure of C++ in game design, but it is not the end of the world completely because at the end of the day, I still get to glimpse at the wonders whilst making games in the process, and I can appreciate the desire to increase usability. They truly step up the usability by offering game design by using blue-prints.

Blueprints are a visual scripting language in Unreal Engine. It presents itself like a Tree data-structure, where the nodes represents code, and by connecting them, we also connect events, functions, and variables. You can take glimpses of the C++ code from within these nodes, the best way I could describe working with blue-prints is that it reminded me of coding with Scratch.

Blueprints allow you to manipulate the behavior of an Actor, which is essentially any animated asset that moves around in the game. Players and characters in the game, are pawns, which are subclasses of Actors, they too can also be manipulated via blueprints.

Unreal allows the user to create games in both C++ and blueprints, and there are some cases in which you can use a little bit of both. For the C++ side, every class consists of a header file (.h) and a class source file (.cpp). The header will have the declaration of the class and all of its variables and functions, and the source file acts somewhat like a controller where the implementation of those functions takes place. They follow a naming convention where they are prefixed with either U or A, the syntax will look something like this:

UCLASS([specifier, specifier, ...], [meta(key=value)])
class ClassName : public ParentName
{
 GENERATED_BODY()
}

The GENERATED_BODY() part is a macro that executes a series of commands or actions. It helps signal the Unreal Header Tool to set up the necessary infrastructure for a class to be recognized by the Unreal Engine. The specifiers help determine how the class behaves with the various aspect of the game engine. You can see some of this in action via the blueprints, yet that seems to be the depth at which Unreal Engine directly allows if you do not have an IDE ready to compile in C++. Here is an example of what you may see if you have opted to use BluePrints:

Whether or not you choose to dive into the intricacies of C++ and gaming or utilize blueprints is completely up to you. It should be noted that C++ does perform better than blueprints since it compiles directly into machine code (it will run faster on your CPU), where as with blueprints you need to rely on Unreal engines virtual machine at runtime. Regardless of the two, both are valuable avenues of knowledge and the best way to learn is to dive straight into the pool with a mind that does not fear documentation. There is a common argument that someone new to game design should only focus on learning Unreal Engines Blue-Prints rather than C++. Regardless of which route one may choose, it will be challenging and a foreign experience if they have never designed a game before; so why not take the time to build a foundational knowledge in both? Cheers!

Pixi JS vs Pixi-React

Barrington Hebert — Mon, 13 Jan 2025 07:25:52 +0000

If you haven't heard of Pixi JS, it is essentially a 2D rendering engine that uses WebGL for hardware-accelerated graphics rendering. PixiJS relies on communication with it's own PixiJS API, that in turn utilizes Web Graphics Language API (WebGL) underneath the hood, WebGL allows you to create custom graphics for game design, and the former allows for seamless integration into any Javascript code. PixiJS will take an html Canvas element, and then load it's assets into it. However, when it comes to building a web-game that utilizes React and it's declarative syntax, you will need to opt for using Pixi React. This partially has something to do with the fact that React uses .jsx files, with the primary benefit being that Pixi-React adapts to Reacts component-based syntax style, and allows the code to integrate seamlessly into React's syntax.

PixiJS

When I first began looking into PixiJS I was happy to see they have some amazing documentation on how to get started with the basics of their application. Once you get your server running you would essentially add a script tag to the head of your HTML file: <script src="https://pixijs.download/release/pixi.js"></script> then create new PIXI application instance:

<script type="module">
  const app = new PIXI.Application();
  await app.init({ width: 640, height: 360 });
</script>

The application instance we created is a helper class, it creates the rendering and stage for us along with a ticker for updating. We then initialize this helper class and pass in the option which will dictate the size of the stage where our images will be rendered. With the advent of version 8 for PixiJS, it will primarily be using WebGPU, which will be an asynchronous process thus we need to add await onto the initialization of the application. Earlier versions of PixiJS goes through of process of choosing whether to use WebGL vs WebGPU for rendering, which is an asynchronous process in itself, so regardless of the selected API, you will need to ensure we wait for this value to return within our code.

PixiJS in it's native form will build it's stage within an HTML canvas element. It primarily draws inside of this canvas using a stage and various sprites.

<!doctype html>
<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script type="module">
      const app = new PIXI.Application();
      await app.init({ width: 640, height: 360 })

      // Canvas element added to body 
      document.body.appendChild(app.canvas);

      // Loading of an image
      await PIXI.Assets.load('sample.png');
      let sprite = PIXI.Sprite.from('sample.png');
      app.stage.addChild(sprite);

    </script>
  </body>
</html>

The Assets property of Pixi has a load method. These methods return a promise that when resolved will have the parsed value of your image. Assets.load can automatically tell which parser to use for loading a file based on the file type if it is included in the file name, but for something ambiguous, you will need to specify an explicit loader like so:

promise = Assets.load({
  src: 'https://example.com/ambiguous-file-name',
  loadParser: 'loadTextures'
})
/* 
The parser options can vary based on your needs
Textures: loadTextures
Web fonts: loadWebFont
Json files: loadJson
Text files: loadTxt
*/

Once you have your image loaded; you can then add a ticker which will simulate the movement of the sprite:

  let elapsed = 0.0;
      app.ticker.add((ticker) => {
        elapsed += ticker.deltaTime;
        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
      });

Afterwards you should be able to see your image of choice moving back and forth across the screen; truly amazing. Check out the full tutorial on how to do something like this on pixijs site here: https://pixijs.com/8.x/guides/basics/getting-started

Pixi-React

As for Pixi-React, I personally felt that the process was much simpler, albeit providing a little bit less direct control. For Pixi-React, you will need to run npm install @pixi/react , along my coding journey of learning Pixi, I found that having this installed prevented me from using various other Pixi installations due to dependency conflicts. However this didn't truly matter in the long run because this version of pixi essentially allowed me to do everything those other dependencies could do without needing to install them... in a slightly different way of course.


import { Container, AnimatedSprite, Stage, Sprite } from '@pixi/react';

I like to call these the four horseman of Pixi-React. I was able to build an entire map filled with animated characters who would do battle against one another using these four alone. I wanted to take advantage of tileMap for pixi, but ran into trouble with installation due to it having conflicting dependencies with the version of Pixi I was using... thankfully I understood it's underlying logic and made a tilemap object from scratch, and utilized Reacts hooks and basic logic to overcome this small obstacle. I found that the reasoning behind many of these occurrences where there were conflicting dependencies was simply because there was no need for them if you can understand the logic behind what they need to do and the various things react provides. Some examples include how I implemented sound effects while in React, I utilized the use-sound hook, and basic JavaScript logic for map controls, collision detection, and setting up tiles. Just want to point out I thoroughly enjoyed the music-making aspect the most as I have a long history of music production and I almost cried when I saw my game running for the first time with my chiptune bops playing in the background... but that is for another article! For now; I will show you how to get an animated item onto your page, this time using Pixi-React.

const MyComponent = () => {

// Set your values here for an enemy!

return(
<Stage
        width={420}
        height={666}
      >
<Container position={[16, 16]}>
            <AnimatedSprite
              key='enemyPos'
              images={enemyAnimation}
              isPlaying
              initialFrame={0}
              animationSpeed={0.3}
              anchor={0.5}
              x={enemyX32}
              y={enemyY32}
              width={32}
              height={32}
            />
          </Container>
    </Stage>
  )
}

Don't blink because that is pretty much it. Pixi-React provides you with these elements. The Stage element works just like earlier, however this time we simply need to just place the element into our components return statement. Inside of the stage will be a container, which works somewhat like the canvas element mentioned earlier. The containers are given a position, and inside those containers you can place your sprites. In this example I am using an AnimatedSprite element.

The Animated Sprite element allows you to put an "images" tag, which can be an array of images you wish to animate from. The element will cycle through these images starting at the frame number you provide the value of initialFrame, and cycling at the rate of the value you provide animationSpeed. The anchor tag sets where a hypothetical pin will be placed in your image when it comes to setting it's location; I usually default this to 0.5 for the middle. The x and y values inside the element will be numbers; that point to the coordinates of your enemy in pixels.

Lets say you ran into a similar obstacle like mine and are looking to create a map using only Pixi-React without the sweet benefits of using the tilemap. What you can do is create an object, and give it a key that has an array of numbers, along with a key that has an array of images that are already cut to precise 32 bit squares (or whatever bit size you want your map to be).

const mapData = {
 tileLayout: [
[ 0, 1, 2, ]
[ 2, 1, 0, ]
[ 0, 1, 2, ]
],

 tiles: {
0: 'path/to/red.png'
1: 'path/to/blue.png'
2: 'path/to/black.png'
}
}

Then pass that map and those values into a Sprite tag like so:

<Stage 
width={mapData[0].length * 32}
height={mapData.length * 32}
>
<Container
position={[0,0]}
>
{mapData.tileLayout.map((row, y) =>
            row.map((tile, x) => (
              <Sprite
                key={`${x}-${y}`}
                image={mapData.tiles[tile]}
                x={x * tileSize}
                y={y * tileSize}
              />
            ))
          )}
</Container>

I didn't use destructuring yet so you could see how the two previous code blocks will connect and rely on one another. With further object nesting, it is possible to have a different map load depending on the situation, this takes advantage of reacts useEffect hooks, and highlights how well Pixi-React compliments react by opting to use less space in the code block so that you can keep your files abstract and easily readable. We can also layer the map with seperate overlay tiles that are transparent. Together with destructuring, your code would look like this:

import mapData from './path-to-your-map-object'
import { React, useState } from 'react'
import { Container, AnimatedSprite, Stage, Sprite } from '@pixi/react';

const myLevel = () => {

const { 
tileLayout, 
tiles, 
overlayTileLayout, 
overlayTiles,
enemy,
enemyStartingPosition, 
} = mapData;


const [ tileset, setTileset ] = useState(tiles); 
const [ overlayTileset, setOverlayTileset ] = useState(tiles);
const [ layout, setLayout ] = useState(tileLayout);
const [ overlayLayout, setOverlayLayout ] = useState(overlayTileLayout);
 // useState is optional here, but allows for level unique changes mid-game if needed when properly combined with useEffect.
  const [enemyX32, setenemyX32] = useState(enemyStartingPosition[1] * 32);
  const [enemyY32, setenemyY32] = useState(enemyStartingPosition[0] * 32);
  const [enemyPos, setEnemyPos] = useState([enemyY32 / 32, enemyX32 / 32]);
  const [enemyAnimation, setEnemyAnimation] = useState(enemy);

return (

<Stage width={mapData[0].length * 32} height={mapData.length * 32}>
<Container position={[0,0]}>
   {mapData.tileLayout.map((row, y) =>
            row.map((tile, x) => (
              <Sprite
                key={`${x}-${y}`}
                image={mapData.tiles[tile]}
                x={x * tileSize}
                y={y * tileSize}
              />
            ))
          )}
     {overlayData.map((row, y) =>
            row.map((tile, x) => (
              <Sprite
                key={`${x}-${y}`}
                image={overlayTiles[tile]}
                x={x * tileSize}
                y={y * tileSize}
              />
            ))
          )}
</Container>
        <Container position={[16, 16]}>
            <AnimatedSprite
              key='enemyPos'
              images={enemyAnimation}
              isPlaying
              initialFrame={0}
              animationSpeed={0.3}
              anchor={0.5}
              x={enemyX32}
              y={enemyY32}
              width={80}
              height={80}
            />
          </Container>
</Stage>
)}

And that's it! Hopefully now you have a good basic understanding of the differences between PixiJS and React-Pixi, as well how to make a map using React-Pixi without utilizing the tileMap feature. I look forward to learning more about game development while using PixiJS and React-Pixi, as well as sharing some of the cool things I have learned along the way.

-Cheers

Node Express

Barrington Hebert — Sun, 01 Dec 2024 07:05:45 +0000

One of Node.js's most popular and well-known frameworks is Node Express. Node Express, is used primarily for building server-side web applications and APIs and is the most popular framework for Node. With Node Express, we can simplify the process of handling HTTP requests and response.

Unlike it's 'opinionated' counterparts; which tend to have a plethora of rules and conventions that need to be followed, express.js is considered 'unopinionated', meaning the workflow and layout of your code is open to more flexibility. If you never heard of Express then you have come to the right place! I have traversed the myriad of Node's profound glossary of documentation to figure out just enough to get you started with Node Express. So without further ado, let's get you started by covering core concepts that come with express.js

Let's Get Started With Node Express!

Type this into your terminal to install express:

npm i express

Once the installation is complete you can begin using the library which comes with express; note that you will need to have Node.js installed and a package.json created prior to this. Now that we are armed to the teeth with Express ready to fire; lets build a basic basic Hello World program to begin familiarizing ourselves with express.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.all('*', (req, res) => {
    res.status(404).send('404! Page not found');
})


app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Ah, so up on line 1 we import our node express using require, then initialize app to that value; from there, we have a single get request which handles all requests to '/' by responding with "hello world". In the next few lines we are using app.all(), which takes in an asterisk as it's first parameter. The asterisk denotes that the path can be used on any endpoint of incoming requests. app.all() will do as it's name suggests and handle all requests. The last few lines are whe we set the server up to listen for connections on a given port. With res.send(), I am using the send method on my response object, if I wanted to; I could also put html tag or even an object directly into it's parameters and it would still work; like so:

//with html tag
res.send( `<h1> HELLO WORLD <h1>` )

//JSON
res.send({ message: 'Hello World' })

The Old Way

const express = require('express');
const path = require('path');

const app = express();

let PORT - '8080';

app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.get('/aboutMe', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'aboutMe.html'));
});

app.listen(8080, () => console.log(`Server is running on port ${PORT}`));

So this is the old way of doing things; with Node, bringing in the path module; then pointing to the directory that has your file using __dirname. All dirname will do is ensure you get the directory up to the point of the current point, it's a way of passing in an absolute directory instead of the shortened version. Feel free to simmer on the syntax:
path.join(__dirname, *A Folder Name*, *Another Folder Name*, *The File to load*). With express API, you can simply pass in the location of the file using express.static(/folder/).

express.static(root, [options])

The root argument is the directory, for example, if you wanted to load all the files in the public directory, you could just use this:

app.use(express.static('public'))

By using this line, all files in the public directory will be served. We will discuss more on how app.use() works later in this blog when we discuss middleware, but for now I wanted to point out that the primary benefit of express is it's ease of use when it comes to navigating directories and organization of your code with a less convoluted syntax.
So before we go about creating multiple folders by hand; we can simply type npx express-generator into our terminal and it will automatically set up our project directory for us. The layout will be like so:

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

7 directories, 9 files

Express.js And Request Handlers

app.METHOD(PATH, HANDLER)

The syntax for basic HTTP request handlers is intuitive if you have a familiarity of them. You attach the name of the request method as a method onto express, and pass in the path and callback function as parameters, where the callback function automatically receives a request and response object. Earlier you saw how 'all' can be sent as a method that will respond to all HTTP methods, you soon see that we can also use app.use() as a way to redirect to something called middleware. But first we need to ensure we have a basic understanding of what middleware is.

A BRIEF Touch on MiddleWares

Along your journey into Node Express, you will hear the word 'middleware' thrown around like candy; don't be frightened. It is essentially a fancy way of describing all the code that runs during the time your routers are running... Meaning it is the code that happens during the time a request is being handled from a client. It is the time in the middle; before the site responds; while the page loads; the twilight zone of coding. Let's say there is a function that provides updates in the log as to which programs are running or which callbacks are being successful; whilst checking for errors. These functions are called 'loggers' and are a type of middleware you will soon experience along your journey of understanding how express.js works.

app.use(PATH, MIDDLEWARE)

With app.use(), we are able to specify which functions we want to designate as middleware. Be it a 'logger', or a list of http requests. Inside of these callback functions, we call next(), this will ensure that once the function is complete, it will move on to the next middleware function. I like to imagine it works similarly to using .then() in relation to promises or await in asynchronous functions; meaning that we are somewhat deciding what the function must complete prior to moving on to the next expression that is written sequentially in the code. Please don't let my logic confuse you however, because the syntax is nowhere near the same.

There are multiple shortcuts afforded to us with node express, and as I said earlier, it is unopinionated. Another way of shortening the code is by creating another folder and placing all of our routers in there; request handler style!

Say you have a folder that contains a javascript file that looks something like this:

let r1 = express.Router()
r1.get('/', function (req, res, next) {
  next()
})

let r2 = express.Router()
r2.get('/', function (req, res, next) {
  next()
})

app.use([r1, r2])

In the above code, we create 2 routers, and their functions are executed, then next() is called at the end. Whatever function we passed in as our next parameter will be the next function that will run, if the next parameter is empty, it will automatically be populated when we use app.use in the manner we see above. In this way, we are logically listing the functions we want to use in our router as an array. Also note that next() is not a part of Node.js or Express API, it is the third argument passed to the middleware function,

We can also utilize app.use() to designate we want to use certain files for items in our other folder. The syntax looks like this: app.use('directory to a file as a string<optional>', variableToBeUsed), In this case, our first parameter dictates an endpoint we want to use, and the variabletoBeUsed will be available inside your main server file after importing it; doing this removes the need to pass in the entire folder directory on your get request; and thus shortens the length of your get requests in your routers to this: router.get('/', callback)). Notice we are using express.Router()? Which means all our requests syntax will change from app.get() to router.get(*folder directory*, *callback*). They will still have the same functionality; you can go back to your main server file; and just put in

//all your requirements aka imports here//
const posts = require('/folderPath/posts');

const app = express();

app.use('/api/posts', posts);

app.listen( etc )

This sets it us so that all routers in the posts folder will use '/api/posts' as prefixes to all of their paths. Take note that what is passed into app.use can be the assignment of a path to a folder, as well as a list of middleware functions or requests. The important distinction to make would be that app.use() is going to run regardless of other conditions.

Conclusion

With that being said; I hope you all are enjoying Node Express as much as I am; at first it may seem to be a huge jump from NodeJS, but it is more of a different way of doing things. Hopefully I spared you from the vast caverns of the Node documentation libraries, and have allowed you time to reconcile on the beauties of Node Express. -Cheers

Three Tier Architecture. Overview and Each tier explained.

Barrington Hebert — Mon, 18 Nov 2024 15:01:01 +0000

Three tier architecture is a pattern, or order of operations that pertains to the manner in which we go about building an application or program. Each tier will run on it's own infrastructure, and can be developed simultaneously. A three tier architecture design benefits our code organization, and scalability, as well as providing a way in which we can visualize the interaction between different systems that help bring our application to life. The three tier architecture system consists of the Presentation Tier, Application Tier, and the Data Tier. In terms of web development, These tiers are referred to as the web server, the application server, and the database server. Before we get into the depths of three tier architecture's it is important to understand their distinction from it's layers, in conjunction with a basic understanding of one and two-tier architectures.

Imagine you want to construct a building. Before you construct the building, you must go speak with an engineer, and the engineer gives you a plan, he calls his plan the three tier architecture plan. So you take this three tier architecture plan of his then go and speak with your contractors who will do the physical labor of creating this building. You tell the contractors about the three tier architecture plan for constructing the building, and how it will allow them to simultaneously construct each floor... cough cough each layer cough... of this building all at once. Let us also imagine that it is the future so it is possible to do so. The contractors are broken up into groups who will each focus on constructing a particular floor of the building.

This building used 3-tier architecture planning

Like the construction of this building in this scenario, the three tier architecture plan works similarly in it's layers. The first floor is the presentation floor, and will be designed in a manner which is attractive and friendly towards customers. The second and third floor will work closely together, where the second floor is a business floor that will will gather, validate, and calculate customer data, and the third floor will be called a data access floor that re-organizes information from the second floor to a way that can be understood by the fourth floor. The fourth floor is a database floor where all the information we need to send back to the customers is stored. The way these floors communicate will be via an elevator that is called the business object elevator. Hopefully it is no surprise to you that each floor represents a different layer, and the three tier architecture encompasses the strategy and organization of how these floors cough layers will be built.

This building did not use 3-tier architecture

One might ask, why not do all three things on the same floor? This is where one tier architecture comes into play. One tier architecture will contain all 3 layers within one application. All data and logic is stored on the same system, systems that use one tier application are things like mp3 players, or MS Paint. The similarity being that the experience for each client will always be the same. The web application is static, meaning it will not change, and everyone will experience the same output or end result of the product. Two tier architecture is divided into 2 sections, the first tier will be the client layer and the second will be the server layer. The two tier architecture applications are apps where the user is directly communicating with a server that holds data, Microsoft Access is a good example of a two tier architecture, where the client is directly communicating with a back end server. Once again, many of these applications are static, but may store some unique information that occasionally changes based on the user, yet the majority of the end result is mostly the same. As for the 3 tier architecture, it consists of a multitude of layers, which pertains to the majority of E-commerce websites like Amazon, and CMS (content management systems) sites, such as WordPress. Due to the fact these applications being more complex, the three tier architecture allows for a separation of concerns and allows more scalability and more efficient maintenance.

Client Tier

The first tier is the client tier, which is developed within a presentation layer. This layer considers your front-end framework, or how your app to be displayed, which can be via laptop, mobile phone, or even a smart TV! It is called the client/presentation layer because this is the layer that your clients will interact with, and where the magic of your code will be presented, such as your web browser. On this layer, the client will see text boxes, and buttons, and will enter information and interact with your page via clicking on things and entering information. All of this information will later be handled by our second tier, which is called our application tier.

Application Tier

The second tier is called the logic tier. It will consist of a business logic layer, and a data access layer. These layers consider the workflow, or the manner in which the first tier information will be handled from behind the scenes. This is where the heart of the application lies. It is considered the Application tier because this is where your front-end code will begin to handle the business logic of performing tasks based on the users interactions with your application. This tier will contain your JAVA , PHP, Python, or basic development tools and files. It may also come with a separate data access layer, which will use the information from the business logic layer and translate it into a way which will allow it to interact with a database, and will also relay information back to the presentation layer. This layer acts as a mediator between the business logic layer and database layer. Sometimes this tier, or a separate class, referred to as the business object, will use getters and setters to relay information to the database. If there is a business object that is focused on using getters and setters, it will be the primary tool in which information is passed between all layers. like an elevator!
elevator**

Database Tier //

The third tier is called the data tier which essentially explains the necessity of a database layer that is dedicated to storing all information in a database. Your second tier will rely on information within the database in order to relay information back to the presentation layer. The database layer is where the data is stored, which will pertain to server operating systems such as Oracle and MYSQL. It is not user friendly and in many cases will mostly consists of information organized into tables. The first two tiers rely heavily on the information and data stored here.

So this is essentially the 3 tier architecture. The first tier being where you enter information, the second tier being where this information is handled, and the third tier being where the data for the second and first tier is stored. As we can see there are many different forms of logic and software at play here. We can find HTML and css styling in presentation, javascript/php/python in the second tier, and SQL/Oracle in the third tier. Due to all these logics and different forms of code which will heavily rely on each other, many successful businesses will use the 3 tier architecture in order to layout a plan that results in faster development, improved scalability, reliability, and security. In web development we can see these tiers referred to as the web server, application server, and database server; yet the overall concept and theory is the same. With planning being the most important part within all forms of construction, software development can also be seen to have adopted these concepts; and apply them via three-tier applications. Hopefully this article has helped you further understand three-tier architecture. -Cheers

How To Code Faster: Coding Strategies, GRASP, Shortcuts

Barrington Hebert — Mon, 11 Nov 2024 13:00:02 +0000

Sometimes coding can be a swift and easy experience, and other times it may seem to be a slow and never-ending process filled with continuously going back to fix untimely mistakes and errors. In this blog, we will explore methods in which we can code faster and quickly reach the deadlines given to us by our employers.
First off, the most important element of coding, and possibly the most overlooked by newer programmers, is the importance of the GRASP principles. GRASP, which stands for General Responsibility Assignment Software Patterns, is a concept described by Craig Larman which lays out a set of principles and guidelines for designing object-oriented software systems. GRASP allows us to coders to make more informed decisions during the object-oriented design process, and through understanding the GRASP principles, we can tackle complex coding projects with ease.
One can discuss the GRASP phase in depth, however I will bless you with a short rundown of the principles outlined in GRASP for your enjoyment, whilst highlighting a few of my personal favorite principles in GRASP.
There are 9 principles to GRASP, the first principle is the creator principle; which provides us the task of asking ourselves; where exactly should we create our Objects in our code? How can we minimize the usage of memory on our systems in a way that we can find what we want in our code easily without searching through multiple lines of code for a single variable? The general answer to such a question can be found in the implementation and usage of constructor functions, or class constructors; which minimize the recreation of objects multiple times. Consider the following example in which you are designing a game with multiple countries:

//this constructor is where all countries created in our game will be 
//passed in.
class Country {
  constructor(name, population,wealth){
    this.name = name;
    this.population = population;
    this.wealth = wealth
  }
}

//This named country, will have a unique bonus, and will inherit the properties of the Country constructor
class Jamaica extends Country {
  //the unique bonus or trait that comes with this country will stay assigned to this country. Perhaps not all countries will need this trait or method. Allowing for easier access, fewer lines of code will be needed
  constructor(name, job, income, somethingUniqueToJamaica){
    super(name, job, income)
    this.somethingUniqueToJamaica =  somethingUniqueToJamaica;
  }
}

The second principle of GRASP dictates where you should assign different responsibilities in your code. Which states that in your code; you should try to keep the responsibilities closest to the code block that is related to that responsibility. If you were computing sales of rugs for example, you would keep the expression or function that computes the total sales closest to the function that generates the list of items you are calculating the total for. There is also the controller principle; that says it makes sense to have an object inside of your user interface that handles the events that relate to the user interface. It helps your code look neat if you place methods that handles events (click, mouseenter, etc) all inside of one object; saving you time from scrolling around searching for where you put that .onclick for a particular button.

The next principle is called Protected Variation. It is essentially a reinforcement of the fundamental concept of Abstraction; which is the removal of unnecessary details from code or programs to make them easier to use and understand [https://stackify.com/oop-concept-abstraction/#:~:text=Abstraction%20is%20one%20of%20the,about%20all%20the%20hidden%20complexity]. Creating an object that helps translate, or format other objects into a certain way, will help make code easier to read or pass in to other code blocks; a good example of Protected Variation would be something similar to JSON.parse. Indirection and Low-Coupling, are two more principles in GRASP that highly relate to the implementation of this concept.
The Indirection principle involves introducing an intermediary object or layer to mediate interactions between classes . Low-coupling asks that you keep your code broken up into smaller pieces for ease of reusability, and High Cohesion, asks for us to ensure our code blocks are each individually highly focused on accomplishing one particular task. GRASP also emphasizes Pure Fabrication and Polymorphism, where polymorphism emphasizes the importance of using object inheritance, and pure fabrication is a principle that states if we don't know where exactly to put something, we may be better off creating a new object or class for it.
If you wish to explore more into the GRASP phase, the youtube channel ArjanCodes does an excellent job explaining all the principles of GRASP in this video [https://www.youtube.com/watch?v=fGNF6wuD-fg].

Now that you understand the GRASP principles, it should become clear to you how important it is to make a plan before you begin coding. Planning out what it is you want to accomplish before coding is the arguably the most important part of creating code and can drastically reduce the time spent coding a project. Dedicating an extra 15 minutes of time on the drawing board ensuring everyone is on the same page, can understand the layout of a project, whilst also reinforcing the importance of implementing the GRASP principles, can result in hours saved in the long run. When it comes time to actually begin coding, it is also important to utilize all the tools made available to us as programmers to speed up our time coding exponentially.
We as coders are given a toolbox of methods we can use to help speed up the time we spend coding, three of our most important tools is the debugger, our ability to write tests, and shortcut commands. These three tools work together, as they can help us identify problems and fix them much faster than without. Becoming comfortable with using the debugger can help us identify issues in our code, and writing automated tests will help issues reveal themselves earlier in our code than without. Writing our own tests is a good way to ensure we don't ruin other sections of code with the added bonus of the fact that as one continues to code; the tests will always be there for us to reference.

The debugger, as well as tests, are amazing tools we can use to step through our code one line at a time to find errors and fix them quickly. Once these errors are found, we can go back and correct our code. If we do not make use of the shortcut commands available to us in coding; this can drastically increase the time spent coding. Some ideas that would easily fix a problem are often overlooked due to the fact that the fix may take "too long" to go back and due, but with implementing proper shortcuts, these tasks become easy, and we are given more freedom to begin experimenting with ideas that may yield the results we wish to acheive.

Some strategies I enjoy implementing is using ctrl+f to find if an item is in my code; although at times it will not answer the question as to whether it has been assigned value, or describe all the contents of the item within the code. This is where we can make use of logging values to a console.

//checking the value of an object
console.log("myObj is " + myObj);

console.log(`myObj is ${myObj} `);

console.log(myObj, 'myObj')

Above, all 3 of these give the same result. But it is much faster to list the arguments to pass in console.log by separating them with a comma as seen on the third line. This is also much faster than chaining if/else statements as seen below in our next example.

//takes too many lines of code
if(myObj){
console.log('myObj', myObj)
} else {
console.log('myObj', myObj)
}

//cut out the middle man

console.log('myObj', myObj)

I know it seems ridiculous but you will be surprised how many people want to use that if statement to check their code. Just type it in and hop into the debugger.

Consider this; If you do something that takes 15 seconds, it may not seem like a huge deal, but if you do that 1000 times, you just wasted 2 hours, cutting it down to 2 seconds will make it roughly 15 minutes. By shortening the amount of code or keys we need to push, we can drastically reduce the time spent coding. Some shortcuts are better than others at reducing these 15 second experiences down to a few seconds.

We can type out the abbreviation for a file and hit enter; and then voila, our css is there. One example of this is in css code, instead of trying to type out something crazy like 'grid-template-columns', you can just type "g" "t" and "c" (the abbreviation for it) then push enter, and the entire line will pop up!
Ever had to rename every single variable in your code? Instead of manually going through, you can highlight the variable in question, then press ctrl+shift+l, and it will select all matching variables in your code, as you type out one, you will be replacing them all. You can also go two at a time with ctrl+d.

There are countless shortcuts and tools we can use to shorten our code, and continuously learning these shortcuts from other programmers is something I continually experience on my coding journey. So be open-minded and willing to continuously learn. However shortcuts and using the debugger alone are nowhere near as powerful as ensuring you have a clear-cut plan and goal laid out before you code. Ensuring that plan implements the principles of GRASP will exponentially decrease the time you spend coding, as well as ensuring everyone involved in your project is on the same page. Hopefully you found this blog helpful and I look forward to sharing more things I have learned in my coding journey with you. Cheers!

Objects & Arrays in Javascript

Barrington Hebert — Sun, 06 Oct 2024 19:27:01 +0000

Arrays and Objects are complex data-types that, unlike their primitive counterparts, are capable of holding multiple values at once.

You may ask yourself why one should have a need for 2 complex datatypes to accomplish this task, questioning why having one isn't enough to get the job done. Depending on your conditions and objectives, you might be better off choosing to use an "Object" to hold multiple values over an "Array", and the reasoning behind this comes down to one reason: readability. There are circumstances in which you will be better off choosing an object over an array, and vice versa.

Objects work better for, you guessed it, objects! They are able to provide names for their multitude of values, and are usually used to describe the properties that come with a single item. Arrays work better for lists, they are restricted in their capability to be descriptive of their values, and although Arrays are technically objects, they have earned their unique name of Array due to how unique they are in their syntax and manner in which their multiple values are stored or accessed. You will soon come to understand these complex data-types as I do, where objects can be conceived as 3 dimensional, and arrays can be considered 2-dimensional.

-3D Objects & 2D Arrays

//AN OBJECT
let person = {
voice: "soft",
age: "32"
};

//AN ARRAY
let groceryList = ['bananas', 'coconuts', 'grapes']

  -Above we have an example of an object doing what it does best, describing a 3 dimensional object in reality. Here we have the initialization of the variable 'animal' using the 'let' keyword to point to an object; which contains it's information within curly braces '{}'. Within the object are 'key: value' pairs. Keys are to the left of ':', and their values are to the right, with each pair separated by ','. As you can see with an object, we can give each value it holds a unique name to help describe and identify the value it points to. The age of the person is 32, and their voice is soft. You may notice that this format is easily readable and comes natural to understand, even someone who has no clue what coding is will likely be able to glance at those lines of code, and get a general understanding of what is going on.

Underneath this we have our beautiful array of the most quintessential items for a grocery list, and the same natural readability can be found. Notice that the array is denoted by brackets "[]".

Object & Array Access:

console.log(dog.name) //returns "Fifo"
console.log(groceryList[0] //returns bananas

As mentioned earlier, objects are 3-dimensional, and arrays are 2-dimensional. The first way this becomes noticeable is when you try to access the values of an array or object. In a 2-dimensional plane, the surroundings are described with coordinates; a series of numbers that equate to the description of a particular location. This is how arrays behave, their coordinates are called indexes, and their particular location is a value. Like coordinates, indexes will always be numbers, and arrays cannot access their values in any other way unless you pass in a number next to it surrounded by brackets '[#]'. Even the brackets themselves move like a 2 dimensional object; up, down, left, right, there are no curves to help one describe the complexities of a 3-dimensional plane, then comes Objects. Objects access their values with their 'key'. Earlier, the "key: value" pair was '"voice: "soft"', thus we can reference the dogs name by typing "person.voice". Just like 3-dimensional objects in  our non-virtual reality, the properties of these objects are described with words, given names so-to-speak. The phenomenological conclusion we draw for what these properties are in relation to the object we experience, equates to the value we give to that word.

PHILOSOPHY AND UNDERSTANDING OBJECTS: We may describe a texture as soft, a smell as foul, an emotion as painful, but all concepts ultimately rely on two words to describe. The word "soft" alone can be misconstrued and difficult to conceive when describing an object in reality. If one were to say just "'person' that is 'soft'", the resulting conclusion may be different from one individuals concept to the other; One may believe you say 'a soft-person' is kind and loving, the other may say 'soft person' is weak and feeble. Yet if we said "a 'person' has a 'texture' that is 'soft'", or "a 'person' has a 'voice' that is 'soft', we would ultimately come to a less divergent conclusion on what it is we describe. This is why "an 'object' has a 'key' that is a 'value'" can make sense as being 3-dimensional.

Object & Array Manipulation

Objects and Arrays are manipulatable in different ways. Arrays are accessed by an index number, whereas with objects, their values are accessed using something called a 'key'. Due to the fact that each key is named, it is harder to navigate through objects than it is through arrays. Which is why arrays work better with numbered lists, and objects work better with describing properties of a single item.
You access things in an object using its key, and arrays must use its index. We add things to objects using bracket and dot notation, for arrays, we can use bracket notation along with something called 'methods'.
The methods used to remove AND add to an array are .pop(), .push(), .shift(), .unshift(), .splice(), and more. The method chosen will depend on the situation.

//adding / removing values to arrays and objects

person.name = "Sam"; //adds key 'name' to person with value of "sam"
person["sign"] = "pisces" //adds key iykyk to a
array.push(tomato) //adds tomato to the end of array
array.unshift(cherries) //adds -1 to beginning
array.splice(1, 2, 'hello world') //starts at index 1, removes 2 indexes and inserts hello world at index 1.

// 5

array.pop() //removes last index
array.shift() //removes first index in array
delete animal.sign //removes key sign from animal
array.slice(1) //removes first element from a COPY of the array

Objects & Arrays in Javascript

Barrington Hebert — Sun, 06 Oct 2024 19:26:58 +0000

-3D Objects & 2D Arrays

//AN OBJECT
let person = {
voice: "soft",
age: "32"
};

//AN ARRAY
let groceryList = ['bananas', 'coconuts', 'grapes']

Above we have an example of an object doing what it does best, describing a 3 dimensional object in reality. Here we have the initialization of the variable 'animal' using the 'let' keyword to point to an object; which contains it's information within curly braces '{}'. Within the object are 'key: value' pairs. Keys are to the left of ':', and their values are to the right, with each pair separated by ','. As you can see with an object, we can give each value it holds a unique name to help describe and identify the value it points to. The age of the person is 32, and their voice is soft. You may notice that this format is easily readable and comes natural to understand, even someone who has no clue what coding is will likely be able to glance at those lines of code, and get a general understanding of what is going on.
Underneath this we have our beautiful array of the most quintessential items for a grocery list, and the same natural readability can be found. Notice that the array is denoted by brackets "[]".

Object & Array Access:

console.log(dog.name) //returns "Fifo"
console.log(groceryList[0] //returns bananas

As mentioned earlier, objects are 3-dimensional, and arrays are 2-dimensional. The first way this becomes noticeable is when you try to access the values of an array or object. In a 2-dimensional plane, the surroundings are described with coordinates; a series of numbers that equate to the description of a particular location. This is how arrays behave, their coordinates are called indexes, and their particular location is a value. Like coordinates, indexes will always be numbers, and arrays cannot access their values in any other way unless you pass in a number next to it surrounded by brackets '[#]'. Even the brackets themselves move like a 2 dimensional object; up, down, left, right, there are no curves to help one describe the complexities of a 3-dimensional plane, then comes Objects. Objects access their values with their 'key'. Earlier, the "key: value" pair was '"voice: "soft"', thus we can reference the dogs name by typing "person.voice". Just like 3-dimensional objects in our non-virtual reality, the properties of these objects are described with words, given names so-to-speak. The phenomenological conclusion we draw for what these properties are in relation to the object we experience, equates to the value we give to that word.

Object & Array Manipulation

//adding / removing values to arrays and objects

person.name = "Sam"; //adds key 'name' to person with value of "sam"
person["sign"] = "pisces" //adds key iykyk to a
array.push(tomato) //adds tomato to the end of array
array.unshift(cherries) //adds -1 to beginning
array.splice(1, 2, 'hello world') //starts at index 1, removes 2 indexes and inserts hello world at index 1.

// 5

array.pop() //removes last index
array.shift() //removes first index in array
delete animal.sign //removes key sign from animal
array.slice(1) //removes first element from a COPY of the array