DEV Community: gagecantrelle

The Basics of TypeScript

gagecantrelle — Tue, 20 May 2025 02:48:04 +0000

TypeScript - sounds familiar to another coding language called JavaScript, right? Well, it's a language based on JavaScript; the only difference is that it focuses on type safety. This makes it easier to catch errors before you run your code. This makes working on big projects easier to manage and improves the coding process by making it smoother and more reliable. Luckily, it's not too hard to learn as long as you have a basic understanding of JavaScript. JavaScript was created by Microsoft and released in October 2012

How do I start?
For starters, you need to install TypeScript as a developer(dev) dependency. If you're using Node.js, you must install the TypeScript node dependency as a dev dependency.

npm install typescript --save-dev
npm install @types/node --save-dev
npm install ts-node --save-dev

When you declare a variable, you need to declare the value type. If you've created a variable called box that is a boolean, you will declare it as a boolean. You also need to do the same for the function and its parameters. Other types, like objects and arrays, need to be declared differently. Also, any TypeScript file name will need .ts(TypeScript) instead of .js(JavaScript) at the end of the name

var box: Noolean = true;
var obj = {n: Number}
let obj: Obj = {n: 1}
let arr: String[]
arr.push('test')

function checkbox(box: Boolean, {n}: {n: Number}): void{
if(box === true){
console.log(n)
}
}
checkbox(box, obj)

But wait, there's more to know. If you want an array to hold different types, use this method

let test:  Array<string | number | boolean> = ["hello", 42, true];

If your function returns a value, instead of saying void(returns no values), declare the return type

function str(): String {
return "hey this is a string"
}

Then, depending on whether you plan to use a bundler like webpack, you need to install other dependencies. For some bundlers, like Next.js, you don't need to install any dependencies. Let's take a look at an example of Webpack using TypeScript.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  mode: 'development',
  stats: {
    excludeModules: /node_modules/,
  },
  entry: path.resolve(__dirname, './Client/index.tsx'),
  output: { filename: "bundle.js", path: path.join(__dirname, './Client/dist'),  publicPath: '/'},
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    plugins: [new TsconfigPathsPlugin()],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        use: [{
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        },
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
          },
        },
      ],
      exclude: /node_modules/,
      },
    ]
  },  
  plugins: [
    new HtmlWebpackPlugin({template: path.join(__dirname, "./Client/index.html")}),
  ]
};

What is a Tsconfig?
Now you're probably wondering what TsconfigPathsPlugin is? Well, it's a plugin that helps Webpack work with a TsConfig file. This is a file that tells TypeScript how to understand and then build your project. The TsconfigPathsPlugin is not needed, but can cause some TypeScript files to be compiled/built incorrectly if you don't use it. Let's take a look at what the TsConfig file would look like.

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "ES2022",
    "target": "es5",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
  }
}

But what do all of those options do?

outDir: Puts all compiled JS files into a specific directory
noImplicitAny: Stop 'any' type from being used in the project
module: Tells how to use modules are handled (import/export) based on JavaScript standards(2022 standard)
Convert the code to work with older browsers that can only understand ES5
allowJs: mix TypeScript and JavaScript files together -moduleResolution: Tell TypeScript to look for modules like Node.js does (using node_modules)
allowSyntheticDefaultImports: Let you import default exports even if it not written properly for TypeScript
esModuleInterop: easyer inports from old commonJs module(import express from 'express')

There are plenty more options, but those 8 options are a good base for a default TsConfig file. If you want to know more about the other options, run this command in the terminal. It will create a default TsConfig file with all the options commented out. With each line describing what each option does. Now, some options won't be in the file when created, the reason being that they're advanced or rarely used.

npx tsc --init

Example

type: Manually tells TypeScript which package to use( instead of making it guess like normal)
incremental: only rebuild changed files(make building faster)

@type/
Since TypeScript is a different language, any dependency you use will need to be compatible with it. Luckily, some dependencies have a TypeScript version. Let's take a look at the React version of TypeScript

npm install @types/react @types/react-dom --save-dev
///////////////////////////////////////////////////
"@types/react": "^19.1.0",
"@types/react-dom": "^19.1.1",

Fun Fact 1: There is also an option for React in the TsConfig called jsx. This allows you to write JSX files in TypeScript.

jsx: "react-jsx"

Fun Fact 2: You can't declare a React file with .jsx; it will need to be declared with .tsx at the end of the file name

That's it for the basics of TypeScript. If you find this blog helpful, leave a like and/or comment. Thanks for reading and have a nice day

Beginner set up for Video game development(Unreal Engine or others)

gagecantrelle — Sat, 15 Feb 2025 20:55:03 +0000

So you are looking into setting up your computer and/or laptop for video game development. It's not too hard to set up but it can be tricky if you don't know your own computer/laptop. Even the software you are planning to use may throw some problems during game development. I'll show you some tips that can help you on your journey.

Knowing your computer and/or laptop
Understanding your computer’s capabilities is crucial before you begin. A gaming PC is ideal, but a standard PC or laptop can also work. You need to know your system specifications and how old your hardware is, as newer software often demands more power and storage or certain software to run programs. it may sound simple, you can buy more storage and update your computer when needed but it's not that simple.

You want to know why, well it is because of MONEY. some of you might have some to spend to buy upgrades for your computer but others don't. since your computer/laptop may be the latest model since 2019 it might run into some incompatibility issues. like trying to add new upgrades to your computers meant for 2025 computers. For software updates like graphic cards updates can be a problem. Normally they don't send updated alerts like normal pc/laptop updates, where you click the update button. You will manually have to go into your computer system and update it since the graphics card is one of the major components of your computer. If you try to mess with it you may have some problems. For example, if you try to update your graphic there is a chance that you get the blue screen of death. That may or may not be permanent if you're lucky. You can even try to use a different graphic card but be warned, that switch may also break your computer. Each computer runs using different tech/software, The other graphic cards you are trying to use may have some incompatibility issues.

With these problems, you might run into you may want to seek help from someone you know with some computer knowledge. To try and stop or minimize any damage you may cause when updating or changing important software like your graphic card. If not, let's hope you don't break your computer and end up buying a new one. Computers can be around $300 to $600, which isn't cheap. so be careful and check your computer's capability before making major changes. One option to avoid those problems is to try and build your PC. It is cheaper than buying one and you can choose what components you want to use. Just make sure you know what you're doing when building your computer.

What software do I use
Some free software you will see can be used with other game engines. Some are optional depending on how you want to build your game project. For starters let's Start with Unreal Engine version 4 or 5

Unreal Engine To Download Unreal Engine you need to download the Epic Games store. Once you get it you need to choose what version you want to download. Some might think why not just download the latest version? Well, there are some benefits in the later version that some like.

-Unreal 4
-Install Size 20-50GB
-Minimum RAM to run 8Gb
-Recommended RAM 16GB

-Unreal 5
-new Features
- Nanite Virtualized Geometry(better handle highly models without a
drop in performance)
- Lumen Global Illumination(better dynamic lighting for realistic
scenes)
- World Partition(handles open world projects better)
- MetaHumans(enhanced lifelike humans characters)
- Chaos Physics(better physics)
-Install Size 50-100GB
-Minimum RAM to run 16Gb
-Recommended RAM 32GB

After comparing the difference you can see that Unreal 5 has more benefits. Depending on what you're planning for your game project you may not need those features. So it is better to get Unreal 4 to save some memory instead of wasting them. If you plan to use Unreal 5 at some point in time don't worry. Unreal has a handy feature to make projects in older versions, work in new versions of Unreal.

Ubunto(optional)
It's a Linux-based operating system known for its stability, security, and performance. It's more efficient using its resources than Windows. should be installed first before VS Code(Visual Studio Code)

Visual Studio Code(Optional)
It's a lightweight code editor for General coding, web development, and open source. It has free extensions that you can use for whatever project you're working on. It can also be used with an Unreal engine, just set Unreal to use it in the setting. Great for when you're just using Visual Studio(different software) for the SDK. After it's installed get this extension since the Unreal engine uses C++ to code.

C/C++(language)
C#(language)
C# dev kit(development kit)

Visual Studio
An integrated development environment or IDE similar to Visual Studio Code but without extensions. when installing you are asked to select some additional features to be installed with. Select the Game Development feature, and then go to the right side of the installation screen. You see some checkboxes, Select the flowing

.NET desktop development(optional)
Desktop development with C++
MSVC v143 - C++ build tools
Windows 10 or 11 SDK(latest versions)
C++ profiling tools
CMake tools for Windows
Git for Windows(optional)

Visual Studio is free but for a limited time then you have to pay for it after the free trial. Luckily you can still use the SDK tool even after your free trial is over, But what is an SDK? It's a Software Development Kit that can turn C++ language into machine language. It is used when building/packaging a game project in Unreal. The SDK is not required for Unreal Engine to build/package projects, but it can help stop any problem after being built/packaged. This can range from stopping small bugs, game crashes, or even soft locks(stopping game progress).

Others software
Since there is a game market there is also a game assets market. When making a game project you need some assets like sounds/music, 3d models, and textures. You could go and look for some free assets or buy some. There is also the option to make some from scratch. Here is a list of some free software you can use.

Blender(3d modeler and can make animation along with visual effects) -Lmms(Linux MultiMedia Studio, music making software) -Audacity(voice/sound editing software) -Gimp(a general photo editing software) -Tiled(create tile-based maps used in 2d game)
- Unreal engine has a similar built-in feature, so if you're using Unreal you might not want to install this software

I hope you enjoy this blog and find it helpful. This blog is based on my experience in game development with Unreal Engine 4 and 5. some images used were screenshots taken from my PC and one from chat GBT. I am currently working on a game project Called Marble Runner, if you are interested I posted videos on YouTube (https://www.youtube.com/@InflatablePenguinGames). I even have a LinkedIn account(https://www.linkedin.com/public-profile/settings?trk=d_flagship3_profile_self_view_public_profile)

What is EmailJs

gagecantrelle — Sun, 18 Aug 2024 21:28:02 +0000

Long ago in the past when computers weren’t created, people would write letters and send them to others. At the time, it would always be delivered by hand, which sometimes could be a problem since some messages need to be read immediately and not later. Other times these letters could be as simple as small talk, like “How are you today?” Luckily in 1965 at Mit when computers were around, Ray Tomlinson, a computer programmer, created the first email. This helped solve some of the problems of sending messages to people far away from you, but then a new problem arose. How do we let a computer send emails by itself? Luckily that is where EmailJs comes in and helps.

EmailJs is a free emailing application that allows you to create some code that will let you send an email. Without having to create one, giving you more time to do other things. Though it is free, there is a limit of 200 emails a month. You can upgrade your account, but it may cost a bit of money. Besides that, EmailJs was created by a software developer by the name of Eugene Shvets. It was launched in the year of 2014 on January 15. It was also popular with frameworks like React, angular, and others.

How do I use EmailJs?

First, we need to create an EmailJs account. You also need a regular email account to use EmailJs. Once you create an account, you need to create a service and an email template. The service is to tell what type of email service you're using, for example, Google Email. When you log in to Emailjs, go to the service tab then click the Add New Service. Once it is created it will show the service ID on its tab. It also shows it when you create it.

The email template is the same, just go to its tab on the left, then click Create New Template. Though it's different when creating it, when you click it it will give you a premade template. The template will look a bit weird but let me explain what those weird things are.

. double currly brackets represent data that is passed to the template
. this is like from_name to use from_name that passes to it to tell
who sent it
.(Devto don't like double currly brackets, it gives me a liquid
variable error. reference the image used)

. Cc or Carbon copy when set will send you a copy of an email that was
sent to someone
. good for testing purposes

. Bcc or Blind carbon copy is the same as Cc but instead of sending the
email copy to you it sent to another defined email account
. good for when working with multiple people

Let's start coding

To use EmailJs, you need to send a post request to an EmailJs link. The link will be provided in the EmailJs doc. Then provide an object with the service, template, public, and secret ID key for the request to work. The object will also take in a template_params which will hold information that the template will use, like the name of who sent the email and the message you are sending.

const object = {
service_id,
template_id,
user_id: emailjsPublicId,
token: emailjsSecretId,
tempate_params:{
from_name: 'me',
to_name: 'you',
message: 'hello'
}
}

axios.Post('https://api.emailjs.com/api/v1.0/send', object)
.then(()=>{console.log('send'))

Email is great for allowing users to quickly create and send emails quickly, saving some time for the user. It is also popular for automatically sending emails like sending emails with weekly/monthly information. Another thing would be automatically sending an email to a user with a receipt for what they buy online. I recommend looking into Windows.setInterval() and Cron for code to run on a set time frame, like running once per day. Simply put, EmailJs is great for the automatic and quick sending of emails. If a project you are working on will send emails, try EmailJs.

Links used:
https://www.theguardian.com/technology/2016/mar/07/email-ray-tomlinson-history#:~:text=The%20very%20first%20version%20of,logging%20in%20from%20remote%20terminals.
https://www.emailjs.com/doc
https://www.emailjs.com

MINECRAFT-How does it work? (part 3)

gagecantrelle — Sun, 04 Aug 2024 15:40:20 +0000

If you haven’t seen Parts 1 and 2, I recommend you look at them before continuing to read this. If not, you may be confused about what is happening and why it is done like this. In part 2 we mentioned shaders, but never really talked about it due to it being able to be its own blog. Well, today let's talk about shaders and what they are.

Shaders are functions that help render images/models with vertexes. If you remember Part 1 talked about the graphic pipeline, four of the steps involve shaders. Let's talk about the two most common steps vertex input and fragment shading. For vertex input, it is used to transform geometry from 3d world space to normalize coordinates.
This uses a projection matrix, a view matrix, and a transformation matrix. When we model a 3d object we would model it around the center of origin, allowing us to apply a transformation. Transformation of the coordinates to world space.

It is helpful because let's say you are working with multiple game objects. You can think about the coordinates of a game object as if they existed in the world space.

For example, let's say you are developing a 2d game using Pixels. You Can define your world space to work in pixels and units. Since you are the developer of this 2d world you don’t have to stick with pixels, let's say you want to use meters. Then use meters this is the world you are creating do what you want and feel comfortable with. Moving on, let's say the world is defined by a 1080px by 1920px. The camera will then see you in a 1080xp by 1920px view. This is useful because it allows you to see where they will appear and lets you think where they will appear on the screen. Since we are referencing Minecraft the unit will be using will be cubs, which will represent the width, height, and depth

Once you decide on a unit to go by you want to then use three matrices, to transform our local coordinates to normalize coordinates

1.Transformation Matrix
-has scale, rotation, and translation
-in order from top to bottom is the order on how you set up scale,
rotation, and translation
-if done in a different order it will end up in a different position than
the one you want it to be in

2.View Matrix
-the camera
-to set up the camera you need it position(eye), it direction it
pointing to(center), and a up value
-there are multiple positions for the camera to be at, so to limit its
options we set it to be only one position.

up similar to rotation 3.Projection matrix -importing for rending the game objects -you want to use the perspective matrix for a 3d game, rendering fare game objects as a small game object -a simpler way to look at it is like looking at a big object get smaller when you walk away from it

Now let's take a look at how we transform the vertices sent to the vertex shaders, let write a simple program that looks like this. It will be written in GLSL, Graphics library shading language.

he first line of code will represent the version it will be using and must be the first line of the shader. Here's a link for all the versions https://en.wikipedia.org/wiki/OpenGL_Shading_Language#Versions, also the core at the end tells us to use the core version. The next line of code tells us the location of the vertex, it should seem familiar since we talked about it in part 2. We can also not tell the location and OpenGl can automatically determine the location, by removing layout (location = 0) from that line. You can even specify the location of other variables

But wait won’t this cause a problem with two vertices at the same location? No, thanks to the uniform which is GLSL, that tell will be read by the CPU and then passed to the GPU. This will create a variable with a different set of locations it can use. So we can reuse a location in attributes and uniform without both being in the same location in actual memory. The other three lines of code that use mat4 or matrix4 variable will be the code that is coming from the CPU

Next, we get to the main function which needs to be declared in all the shaders. It will hold the function that will set the gl position to the combination of all the matrices. Gl_position is a special variable that is built into the language itself. Used by OpenGl to determine the final position of a vertex. Finally, we set the vertex position to the multiplication of the matrices.

If you look at the end where a vec4 is being created that is a custom constructor for OpenGL. With these custom constructors, you can combine other vectors and scalars all these lines are equivalent in GLSL. Here is a link for those customs constructors https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)#Vector_constructors.

Ok, let's take a break Like I said in part 2 of Minecraft-how does it work this is a lot to take in and can be sometimes confusing. There is a lot more to go over, unfortunately, due to some problems I’m going to keep this blog short. If you are still interested here are one link used for this blog, Other links are in parts 1 and 2. https://www.youtube.com/watch?v=yrFo1_Izlk0

MINECRAFT-How does it work? (part 2)

gagecantrelle — Sat, 20 Jul 2024 20:58:57 +0000

Hello. If you haven't read part 1, I recommend you read that before you read this. To recap on what I talked about, it's about what the code of Minecraft looks like. Some of you might want to build a similar game to it or just want to try and change yourself. Whatever the reason, you are curious about it since this is a popular game we are talking about. So let's continue. I left off in part 1 of MINECRAFT-how does it work, also here is the link for part 1 https://dev.to/gagecantrelle/minecraft-how-does-it-work-part-1-1i8l.

Before starting let's refresh our knowledge of Minecraft

made by a Swedish game programmer Markus Notch
made in 2009
sold to Microsoft in 2014
Became popular after being sold

Buffers, what are they and why would we need them? If you remember, part 1 talked about Vertx data and the process, you need something to pass it to OpenGL. A Buffer is basically like a storage unit on the GPU, it can hold any data type.

In OpenGL, there are different buffer types for different tasks. Here are some common buffers that are used GL_ARRAY_BUFFER, GL_ELEMENT_ARRAY_BUFFER, GL_TEXTURE_BUFFER, GL_DRAW_INDIRECT_BUFFER, GL_SHADER_STORAGE_BUFFER, GL_TRANSFORM_FEEDBACK_BUFFER, and GL_UNIFORM_BUFFER.

Let's talk about GL_ARRAY_BUFFER and GL_ELEMENT_ARRAY_BUFFER first. So how do we use the two buffers? First, we need to create an array buffer
with the glCreateBuffers function. Passing it a number and ID so we can target it later. Next, we need to tell it what type of buffer it is supposed to be with glNindBuffer(). The parameters that it will take are the buffer type and the buffer ID you created. Finally, we need to use the glBufferData function to pass in our data. It will take in four parameters: the buffer type, the size of the data, the data itself, and usage. The last parameter is used for telling what we intend to do with the data. Here is some links to the Doc that talk about all the usage types. https://registry.khronos.org/OpenGL-Refpages/gl4/html/glBindBuffer.xhtml
https://registry.khronos.org/OpenGL-Refpages/gl4/html/glBufferData.xhtml

After creating the buffer and giving it data to use, how can we use that data? By using a Vertex and Fragment shader. Now let's say we want to send
the position and color data. First, we need to use the layout function to set the position where the Vertex data is at.

Now we need to use the glVertexAttribPointer function, to tell the GPU that the buffer holds vertex data.

It will take in six values GLuint, GLint, GLenum, GLboolean, GLsize, and offsetPointer

GLuint - index/location data for where it at
GLint - size / how many components this attribute has - Must be a size of 1, 2, 3, or 4 for basic data type - For a vertex 3 data type you use size 3
GLenum - type / the type of data - If you use vertex 3 you use GL_FLOAT
GLboolean - normalized / if you want data pass-in to be normalized - Integrate to float data type - Normalized: has many meanings depending on its use, but to put in a general term for code. It's the Process of organizing data in a database to eliminate redundancy and inconsistencies - Depending on how you look it up on Google you will get different types of Normalized. like the version to get Unicode in javascript - Good for converting color data to normalized range data
GLsize - stride / determine how many bites each vertex is - if the data is tightly pact meaning there is no gap between vertices, then set the value to 0 to represent the tightly pact data
const void* offsetPointer - ask for the offset of the data

After you call that with the correct values, you need to run the function glEnableVertexAttribArry. This takes in the number that represents the layout location in the shader. That makes sure that OpenGL enables this vertex attribute as part of the state for the vertex array

We know how to create a buffer and make data pass to the buffer, but how do we combine them with OpenGL? By using Vertex Array Objects Better known as VAOs. But what is it VAOs? Well, it's similar to an OpenGL buffer with its unique IDs, with only one difference, that instead of storing data, it stores how our data should work.

Next we create bind and create a vertex array by using the glCreateVertexArrays and glBindVertexArray functions. The reason why we have to bind it after creating it is because OpenGL is like a big state machine.

Then, let's say you don't want it to be bound anymore, rerun the same function again but pass in a 0. Now let's take a five-minute break to take a good look at an example to see how this would look.

Ok, now that we just need to run it through the shader. Unfortunately, we won't talk about shaders due to them being at a point where they should be in their own blog. I explain more about them in part 3 of Minecraft-how does it work? Move on from that when we get the shader working we need OpenGL to draw the data from VAO. To do this we need to use two functions glUseProgram with the shader as a parameter, and glDrawArrays. The parameters for that are the Primitive first, then the start index, and finally vertex count as the last. Let's say we have twenty vertices, the starting point is fourteen and the court at six. The data will be drawn from vertices fourteen through nineteen.

Now that we have all the functions and data set up, we can draw something. But wait, we have a problem that we need to fix first before moving on. The problem is the duplication of vertices when something is drawn since some vertices share the same data. Let's say we draw a star with ten vertices but we want to use 8 triangles, then we would need twenty-four Vertices.

How would we fix this? Luckily OpenGl thought of a way to fix this with the Element array buffer/GL_ELEMENT_ARRAY_BUFFER. This buffer will tell OpenGL that we want to reuse some of the vertices.

The way to set up the element array buffer is pretty much the same as setting up the array buffer.

Now how do we set the elements? The doc states that it can only be assigned one of three values: unsigned bytes, unsigned shorts, and unsigned ints. The OpenGl doc doesn't explain where to declare the data type we're using. We can specify it when drawing the elements, then declare them as unsigned ints with unit32_t. When the data is uploaded with the functions in the last images with the buffer being created. While the VAO is bound, that buffer will be related to that VAO.

While the VAO is bound to the buffer we can use a different OpenGL function to draw it. The VAO must also have an element buffer bound for this to work. The function we will use is called glDrawElements it takes in the Primitives, a number that will represent how many elements and how many to draw. Next, we need to assign them with a GL_UNSIGN_INT. Finally, we pass in an offset, if we set the offset to three it will start at the third index in the array. In the doc, it refers to this as a pointer because you can pass the element buffer directly to OpenGL here. Though you shouldn't do that because you need to upload the data every time the function is called. So instead think of this as an offset in the element array where you start drawing from.

This is a lot to take in from buffers to elements, vertices, etc. But it is important for creating an engine for a game to run on even if it is a Minecraft copy or not. Though we did skip talking about shaders we will talk more about them in part 3. Also, all information used in the creation of this blog is in the part 1 blog. Like I said in Part 1 this will not teach you how to make Minecraft but show you the steps that you might need to do if you're making a Minecraft copy or something similar.

The Basics of BABEL

gagecantrelle — Mon, 17 Jun 2024 02:31:26 +0000

Have you started a project for creating a website and got everything working? Your APIs, Requests, databases, and other codes not throwing an error. Great, now the only thing you have to do is bundle your code. You got webpack installed but what about the transcompiler, which
one is used, and is it good? Well, I’ve got one we can use and it is free to use, Babel. It’s not hard to set up and will only take under a minute to put in.

FunFacts
Babel is a free and open-source transcompiler for JavaScript. It was released to the world on September 28, 2014. The most stable version of it was released on January 8, 2014. Babel can also use plugins/libraries to help with certain syntax, mostly lines of code that use stuff like react code, CSS, SVG, and others. To use babel you need to have Node installed with npm.

Let start coding
First, let's start off by installing our dependencies for the package.json folder. If you don’t have one just run npm init.

Npm install @babel/core
Npm install @babel/cli
Npm install @babel/present-env

Now Let's create a file and add some code to it.

Let func = function(data){
return data + 255
}
//example code
Let hop test = false

Now let's set up our Babel file to tell Babel what to do and use. Create a present key in an object and give present one of the dependencies we install, @babel/present-env. This helps tell Babel what environment it will be using. For example, it could be running on Firefox, Safari, or the Chrome browser.

{
“present”: [
“@babel/present-env”
]
}

Next, to tell it which environment it will be working on we need to change the values in the present key a bit. First, we need to put “@babel/present-env” inside of an array. Then in the same array add an object with a target key. This key will hold what environment Babel will be working on, and what version.

{
“present”: [
[“@babel/present-env”, {
“targets” :{
“fireFox”: “17”,
“Chrome”: “67”,
“Safari”: “11.1”
}
}]
]
}

Finally, because we don’t have other codes to run Babel, we will have to run a command in the terminal to get it to work. This command will target a specific file and send it to a specific folder or file. If the specific output doesn't exist, the command will create the file/folder for use. After the command, go to the file you set to the output and see the result.

./node_modules/@babel/cli/bin/babel.js main.js –out-file main.dist.js
// use this command to check the current version
./node_modules/@babel/cli/bin/babel.js –version

Let’s say that you are working on a react project and you're also using babel. Now like a talk about Babel can’t handle certain syntax. There are plugins and other libraries you can install to help, let take a look at an example

{
“present”: [
“@babel/present-env”, 
“@babel/react”     // for react
],
“Plugins”:[
“@babel/plugin-syntax-dynamic-import”
]

Now that you have seen Babel and how exactly it works, why not try it out in your next project? Babel has multiple plugins and libraries for whatever type of project you’re doing. If you're interested in webpack that uses babel or react, I have done blogs on these topics before so when you have some time why not take a look?
https://dev.to/gagecantrelle/the-basics-of-react-57a1
https://dev.to/gagecantrelle/the-basics-of-webpack-2d71

Also if you are interested in what trans compiled code looks like, head to this site that will transcompile anything given to it. https://babeljs.io/

Links:
https://en.wikipedia.org/wiki/Babel_(transcompiler)
https://www.youtube.com/watch?v=o9hmjdmJLMU
https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9#bb4c

The Basics of WEBPACK

gagecantrelle — Sun, 09 Jun 2024 19:07:41 +0000

Have you ever run into a problem where you tried to email or send some data to someone and you got a warning that the data you are trying to send over is too big? What you're trying to send over could be as simple as a 1-minute cute dog/cat video. Well, you are not the only one. Websites can run into similar problems as well. When you open a website it will request everything from the server hosting that website. That site could be made with multiple files of code ranging from CSS, JPG, HTML, and more. Unfountly, most browsers can’t handle multiple files being requested. Normally, for sending data that is too big, you will zip/compact the data into smaller ones. This can not be done with a website since that data and what files connect to each other are too big. Luckily there’s an open-source module you can use to zip/bundle your data into a small single file, WEBPACK.

Fun Facts
It was released on February 19, 2014, with the most stable version released on March 20, 2024. Webpack is a free and open-source module bundler, which as I said in the first paragraph, bundles code, making projects with multiple files much easier for the browser to receive when requested, and much faster to load. Most developers will use this blunder when they are making a website. Another reason developers like this blunder is because it is not too hard to set up and install.

Let Start Coding
For starters, we will set the Webpack up using React so make sure you have React and React-dom installed. After that, we want to install a couple of other modules installed as dev dependencies, because what we are installing will be used for the developer to build his code.

npm install webpack webpack-cli webpack-dev-server --save-dev
npm install html-webpack-plugin --save-dev
npm install @babel/core babel-loader --save-dev
npm install @babel/preset-env @babel/preset-react --save-dev

Now let's create our file and call it webpack.config.js and start coding. First, we need to require ‘path’ a native NodeJs module that helps concatenate a file path, then we need to export an object with an entry and output path. This will tell it what file to bundle and where to send it after bundling it. Then inside the entry key, we need to give it a directory path, the path to where we want to bundle our code, and the file name itself. For output, it’s the same but the path for where to find the file will become where to put the file, and there is no need to give it a third parameter. In output, give it a filename key and it will create a file with the name given, and give it the bundle code. If no filename key is given, then that name will be given to the output path key as the third parameter. Instead of a file being created, it will create a folder with that name instead, containing our bundle code.

Const path = require ('path')

Module.export{
Entry: path.join(__dirname, "src", "index.js"),
Output:{
Filename: "bundle.js"
path.join(__dirname, "dist", "bundle"),
}
}

Next, we need to tell Webpack to use some plugins since normally it can only use Javascript by default. It is set up similarly to how we set up the entry key. This also allows webpack to interact with the script tag in the HTML file.

Const path = require ('path')

Module.export{
Entry: path.join(__dirname, "src", "index.js"),
Output:{
Filename: "bundle.js"
path.join(__dirname, "dist", "bundle"),
},
plugins: [
   new HtmlWebpackPlugin({
     template: path.join(__dirname, "src", "index.html"),
   }),
 ],
}

Now that we have our plugging we now set some rules for Webpack to follow when bundling our code. In this example, we will be using Bable and tell it to only use specific files like jsx.

Const path = require ('path)

Module.export{
Entry: path.join(__dirname, "src", "index.js"),
Output:{
Filename: "bundle.js"
path.join(__dirname, "dist", "bundle"),
},
module: {
   rules: [
     {
       test: /\.?jsx$/,
       exclude: /node_modules/,
       use: {
         loader: "babel-loader",
       }
     },
   ]
 },
plugins: [
   new HtmlWebpackPlugin({
     template: path.join(__dirname, "src", "index.html"),
   }),
 ],
}

Since Bable is a transpirer, we need to tell it what to transpile by giving it an options key with a present key holding some of the things we installed at the beginning.

Const path = require ('path)

Module.export{
Entry: path.join(__dirname, "src", "index.js"),
Output:{
Filename: "bundle.js"
path.join(__dirname, "dist", "bundle"),
},
module: {
   rules: [
     {
       test: /\.?jsx$/,
       exclude: /node_modules/,
       use: {
         loader: "babel-loader", options: {
           presets: ['@babel/preset-env', '@babel/preset-react']
         }
       }
     },
   ]
 },
plugins: [
   new HtmlWebpackPlugin({
     template: path.join(__dirname, "src", "index.html"),
   }),
 ],
}

Finally, in your package.json file make some script commands to run webpack server and bundle our code.

"scripts": {
 "dev": "webpack serve",
 "build": "weback",
 ...
}

Also, if you are curious, bable can set rules in Webpack to be able to bundle SVG, images, and CSS files too. Now that you know what webpack is, you probably want to add it to your next web development project, seeing as how it is not too hard to set up and install, perfect for any size project from big to small. Give it a try if you're interested in trying webpack out.

//links
https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9#bb4c
https://www.digitalocean.com/community/tutorials/nodejs-how-to-use__dirname
https://www.youtube.com/watch?v=5zeXFC_-gMQ&t=1s
https://www.youtube.com/watch?v=rI37HS-Vj8A&list=PLzAGFfNx

What is Google auth(Oauth 2.0)

gagecantrelle — Mon, 03 Jun 2024 03:40:22 +0000

Whenever you play a game or go to some site, 100% of the time you will have to log in to your account before moving on, handing out your account name and password to confirm your identity. Unaware that someone may be spying on you for your account information, this can lead to accounts being stolen with your personal information being deleted, sold online, or posted on social media, making you hesitate whenever you make an account. Luckly Google released an authentication application to calm your fear. Google Auth, or Oauth 2.0, will allow you to log in and create an account without having to put in your password or email account. This is done by having Google create an access token that will be sent to the account you’re trying to login to, and say, “Hey this this is the account created by this use so let her/him in”.

Fun facts
Oauth began development in November 2006, when later in 2007 a small group of implementers was created. The Group discussed ideas and proposed drafts for the Oauth application. Soon in July of the same year, google heard about Oauth and showed an interest in supporting the project. In April 2010 the Ouath 1.0 was released, with Oauth 2.0 being released two
years later in October. This application is free to use, but you need to have a Google account to use it. So let’s look at where to get started.

Creating a Google Auth project
To use Oauth 2.0 you will need to create a project on Google Cloud.

Go to this site https://console.cloud.google.com/ Then, if you don’t have any project created, you should see a new/create project. If not, then next to the Google Cloud symbol you should see a button with three circles. Click it and you should see a new/create project button.
After you click it, it will ask for a project name and organization name. You can skip the organization name.
When your project gets created, you should be sent to your project folder. Go to the search bar and search for Oauth consent screen. It should be under API and services.
After clicking you should see a screen asking how you want to configure your app, elect external (allow you to use test user with any account), then click create it.
You will then see another screen. It will ask you to name your app, user support email, and developer contact email. Then click save and continue.
Next you will see a button called add or remove scopes. Click it and another screen will appear with checkboxes. Check the boxes that say auth/user/email and auth/user/profile. Press update then click save and continue.
Next it will ask you to add a test account. This could be any Google regular account. But if you don’t want your project to mess with something on one of your Google accounts, just create a new Google account for testing. But be careful because the account you added will be the only one able to log in. Then click save and continue.
Next you will see a summary screen which you can skip and then you just need to click back to dashboard.
When you get to the dashboard screen, under API & service, click credential. Then click Create credentials. Finally, click Oauth client ID.
It will then ask for a link to where your web application is being hosted (example: http://localhost:3000). Pass it in the authorized JavaScript origins and authorized uris, then click Create.
You should then get a client ID and secret. Save them somewhen like a Google Doc file or text file.

Now it’s coding time.
If you’ve never used react before, here is a link to a blog I did that talks about the basics of react https://dev.to/gagecantrelle/the-basics-of-react-57a1 . If you don’t feel like making a react application from scratch, run this command in an empty folder in the terminal npx create-react-app. Then add the name of the file you will create npx create-react-app client. Npx should be installed when you install node same as npm. If you’re not sure, run the command npx –v, this will show what version of npx you have. Then after all that cd into the folder you create (client) run npm install gapi-script then npm install react-google-login. Next, create a component folder that holds two js files login and logout. Then create a function for login and logout with a const holding your ClientID you got when making your Google project.

//file name login
Import  { GoogleLogin } from ‘react-google-login’;

Const clientId = ‘your client id’;

Function login(){
Return();
};
Export default loging;

//file name logout
Import  { GoogleLogout } from ‘react-google-login’;

Const clientId = ‘your client id’;

Function logout(){
Return();
};
Export default logout;

Next for your login and logout function pass these in return, this code will go and try to log in you Google account

//for login
(
<div id=”signInButton>
<GoogleLogin
clientId={clientId}
buttonText=”login”
onSuccess={onSuccess}
onFailure={onFailure}
cookiePolicy={‘single_host_origin’}
isSignIn={true}
/>
</div>
)

// for logout
(
<div id=”signInButton>
<GoogleLogout
clientId={clientId}
buttonText=”login”
onSuccess={onSuccess}
/>
</div>
)

Now that we have that setup, we then need to create an onScuccess and onFailure function. These functions will take in a parameter, For onSuccess it takes in an object that holds a profileObj key. which like the name implies it an object that holds some information from your google account. for onFailure it takes in the same object as onSuccess.

onSuccess(res){
console.log(‘hey it worked”, res.profileObj);
};
onFailure(res){
console.log(‘error: cant log in’, res);
};

Finally, let’s add our login and logout function to the app.js/app.jsx file or the main file you’re using for your React project. In your app file, you’ll import both login and logout functions, useEffect from react, and gapi from the gapi-script we installed. Along with your client ID. The useEffect hook allows you to fetch data, directly updating the dom, and used it as a timer for side effects in your component. Then inside of your app call the useEffect and pass it a function called start that runs gapi.clent.int function. That takes in an object that holds the clientId and scope, the scope is empty unless you're using some API’s alongside Google auth. Then run the start function with gapi.load function. After that, put the imported login and logout functions inside the return div.

// file app.js
Import login from ‘./components/Login’;
Import logout from ‘./components/Logout’;
Import { useEffect } from ‘react’;
Import { gapi } from ‘gapi-script’;
Const clientId = ‘your client id’;

Function App(){
useEffect(() =>{
function start(){
gapi.client.init({
clientId: clientId,
scope: “”
});
};
Gapi.loade(‘client:auth2’, start)
});

Return(<div className=”app”> 
<login />
<logout />
</div>)
}

After that run your react application and test it out. You should see a login and logout button. Click login then you should see a Google select account screen pop up. Select the test account you pick when setting up your project in Google Cloud, and that it’s. Click the inspect button to check your console log for the login function and you should see a console log with an object containing the information about that account minus the password. Then when you click the logout button you’ll be logged out.

Also, like I said in the beginning google auth creates an access token for other sites to use, instead giving them your password and email account. To get that generated token, use this command in the code block. Remember this token is not permanent, it has a time limit before it goes bad.

Var accessToken =gapi.auth.getToken().access_token;

So now that you know about Google auth and how to use it, you probably see how useful it is. Allowing you to create accounts connected to a Google account, without taking in personal information like a password. also Allowing users to see that the account they are trying to make, won’t ask for a password or email account. Making the user feel safe knowing that their personal information is safe. Another good thing about Google auths is that it is fast to log in with it, removing the time it takes to put in a password and account name. In conclusion, using Google auth will be a great start for making your website.

links used for this blog:
https://www.youtube.com/watch?v=bOd4eFqIg00&t=323s
https://en.wikipedia.org/wiki/OAuth
https://developers.google.com/identity/protocols/oauth2
https://www.youtube.com/watch?v=ZDuRmhLSLOY
https://www.youtube.com/watch?v=HtJKUQXmtok

The Basics of Try/Catch

gagecantrelle — Mon, 15 Apr 2024 18:41:27 +0000

Have you ever run into a problem when coding and just can’t find where that error is coming from? This error could be anything from a typo, missing line of code, or undefined data. Thanks to that error it could also stop your console.log from running, making it harder to see what some variables equal to, or where the error is coming from. Luckily, there is a code statement you can use to help avoid having that problem Try/Catch. Similar to the .Then and .Catch methods used in promise. If there is an error in the Try block the Catch block will catch it and then run the code in the Catch block. Even though .Then/.Catch and Try/Catch are similar, Try/Catch are statements that can be used anywhere while .then/.catch are methods that can only be used in asynchronous code. Here is a blog I wrote for promises that use .then and .catch methods in its code https://dev.to/gagecantrelle/the-basic-of-promises-amf

Try/Catch history

During the early days of JavaScript when it was still somewhat new to the world, the developers were adding error-checking methods to it. By 1999 for javaScript version 1.4 the Try/Catch statement was added. It Was commonly used in code to check if it was running properly or not. Then at a later point in time, the Finally statement was added to the Try/Catch method. It works similarly to promises and is set similarly to an if statement. Making it easy to understand how it works and set up.

How the Try, Catch, Finally statements work

Try/Catch works best when working with data fetch from another server or asynchronous code, since you never know what you might get back. For the Try code block to work you must have a Catch or Finally code block at the end of Try. It does not take in any parameters or conditions. If a line of code in the Try block runs into an error it will stop running the rest of the code in that block, This will also happen if a variable is set to undined in the block. The Catch statement will take in an error parameter with an error argument, related to the error from the Try block. Catch can even work if not given any parameter, this will not affect how it will run.

const {url} = request(./urlExmple.js)
let data = fetch(url)
//"{num: 2}"
try{
let editData = JSON.parse(data);
let str = 1 + editData.num;
//the console should log a string of 3
console.log(str);
}catch (error){
console.log(error);
console.log('error on line 11');
};
//result will be '3'

The Finally statement can be added to the end of the Catch method or can replace the Catch method, It will always run if there is an error or not. The order in which Finally is used dose not affect the code


try {
  let str = 1 + 2 + '';
  console.log(str);
} catch (error){
  console.log(error);
  console.log('error on line 6');
} finally {
  //will run after Catch even if there is an error or not
  console.log('hey your Try block on line 1 has run')
}
//result will be '3' and 'hey your Try method on line 1 has run'

Try/Catch examples

Import { highOrderAsyncFunction } from './HOF.js;
Import { data } from './examples.js' 

let result = null;

Try{
result = highOrderAsyncFunction(data).map();
for(let i = 0; i < result.length; i++){
let test = result[i].val
console.log(test)
}
}catch{
console.log('Error: the high order function on line 7 in HOFTEST.js, data given is not the correct data type')
result = ['default’];
}

Let's say you have a high-order function that is also asynchronous, There are times when you might run into an error.
this error could be anything from a type error to a value being
undefined. Normally with Asynchronous code it usually the value
being undefined, sometimes it's an array or object with undefined values. Since the Try statement will throw an error if something
returns undefined or sets a variable to undefined value. you can use it to make sure that the code doesn't return any undefined
values.

function getData (url){
  return fetch(url)
     .then((data)=>{
        try{
          let changeData = parse.JSON(data)

          return changeData.images[3]  

        }catch(error){
          console.log(error)
        }

     }
}

Another good use for try/catch is in promises. Let's say you used the fetch method to send a request and you receive the data from the server. Although there are no errors here, There is a chance that there is something wrong with the requested data or not. You can use try/catch to check if the data requested is fulfilled or rejected because of an error.

The Basic of Promises

gagecantrelle — Sun, 17 Mar 2024 19:50:06 +0000

Most projects you work on may have a lot of asynchronous code, which is a code that will run at a different point in time. With a lot of callback functions, that can lead to a long wait time before your code can run completely. Promises can streamline your code and reduce the wait time. Promises will run at a later point in time allowing the rest of the code to run smoothly while reducing the use of callbacks used in your code. You might be wondering, why promises were
created?

Promises History

The term promise was proposed in 1976 by Daniel P Friedman and David Wise. It means ‘doing something at a later time’. It was implemented in the coding language allowing code to run at a later point in time. It already comes with JavaScript so there’s no need to download it. You might be wondering why promises were added to the coding language. Because some lines of code are asynchronous, like requesting data From YouTube for a specific video, it may take some time before you can get that data. Even if the line of code is not asynchronous, just having multiple callbacks can cause your code to run slower. Though callbacks are helpful, some functions are located in another file. Meaning that when that function runs it probably be called in a different file where that callback is located.

Code Example

Promises return one of three states
1.Pending: neither fulfilled nor rejected
2.Fulfilled: the code ran perfectly
3.rejected: the code failed

1.To make a promise you need to use the new keyword and then instantiate a promise. Then use a callback function as an argument that takes in two parameters resolve and reject.

let testP = new Promises((resolve, reject) => {

});

2.Set some type of condition to run resolve or reject. Then pass a
value to the resolve/reject function calls

let testP = new Promises((resolve, reject) => {
   var bol = true;
   if(bol){
       resolve(‘success’);
    }else{
      reject(‘failed’);
    }
});

3.Call the promises then use the .then method to run some code if the promises were successful and .catch if there was an error. Never put ; on a .then call if you're using a .catch. Because it will cause an error

testP()
// .then() takes in a function that takes in a parameter that equal
//the result of the promise that ran successfuly
.then((string)=> console.log('it was a ' + string)
//same as .then but will only run when there is an error, the //parameter that is used is the error the code ran into
.catch((string)=> console.log('it was a ' + string);

Examples

youTubeSearch(url){
return fetch(url)
//.json is a function that turns any data into javascript data
.then((data)=> data.json())
.catch((error)=>console.log('ERROR: ' + error));
};

A fetch request is like an asynchronous GET request. It will request data from YouTube and then turn that data into readable javascript data. The code will then return that data if there is no error. But if there is something wrong with the data, like being undefined, it will send an error message. If you want information on get requests, check out this blog https://dev.to/gagecantrelle/the-basics-of-ajax-3m6

//////callbacks
function getData (data, cb){
dataSearch(data, cb) //run a fetch request
}
function logData (data){
console.log(data)
recordData(data)
}
function recordData (data){
stoageFunction(data, 25, logData)
}

//////promises
p(data)
.then((data)=>console.log(data))
.catch((error)=>console.log('ERROR: ' + error))

Promises can lessen the amount of code you will need to write opposed to using callback functions to run asynchronous code. Depending on what the async function is doing, your code could take up a lot of space if it relies on multiple callback functions. It can also help with functions that can take some time to run, like a GET request. Since the data you're requesting could be from some website It might take some time before you get it. Another reason to use it is that a function might not have the time to wait for that data. This can lead to some errors or some data just becoming undefined.

The Basics of React

gagecantrelle — Mon, 29 Jan 2024 18:39:29 +0000

When making a website you have multiple options for extension to use. From JQuery, Angular JS, and more to choose from. The best one I believe You should use is React JS. It’s a javascript library that helps build the user interface(UI). It’s used in the front end for updating UI when something in the code changes the HTML code. An example could be something like displaying the current time. For that to happen you have to use the createRoot Component to bind the HTML file to the JS file. Allowing the js file to hold all the functions to be used on the HTML file.

In 2011 Facebook started to have some code maintenance problems. With ads starting to get some new features, it started to slow down FaceBook’s code maintenance. During that time a prototype of React was being made to fix the problem. Two years later it was released to the public free to use. To use it you will have to install Node js. Then run the command npm install -g create-react-app to install React Globally. The link to install node js will be down below.

To use react you need to do 3 steps

Create a basic HTML file with a div that has an id


<html>
    <title>test<title>
    <body>
        <div id =”mainApp”><div
    </body>
</html>

 2. create an app.js file and import react 
       .to use React you need to import it the file
        that is using react


Import React from ‘react’;

Function App(){
//used to hold important data
this.state= {
This.string = ‘this is a example’
},

Log: function(){
console.log(this.state.example)

//return a div
return(
<div>
<div>hello</div>
<button onCLick={log()}>
</div>
)

}

Export default App;

To render app.js you will need to render it using ReactDOM.render() from an index.js file


Import React from ‘react’;
Import ReactDom from ‘react-dom’;
Import App from “app.js”
//App will be rendered in the div that holds the ID of mainApp
ReactDOM.render(<App />, Document.getElementById(‘mainApp’));

One of my favorite components to use is componentdidmount. When
you put this function in your code it will run when the page renders. One good example of this would be using it for AJAX requests. You Could use a GET request to get your account information when you log in To your Facebook account. Another good example would be if you try to Go to some sites like an alcohol site. It will ask you to confirm if you're the Appropriate age to use this site.

componentdidmount(){
console.log(‘will run when page is rendered’)
}

Links used for bolg:
https://www.youtube.com/watch?v=Tn6-PIqc4UM
https://blog.risingstack.com/the-history-of-react-js-on-a-timeline
https://react.dev/learn/installation
https://www.youtube.com/watch?v=hQAHSlTtcmY&t=158s

//download link
https://nodejs.org/en/download
https://www.geeksforgeeks.org/how-to-install-reactjs-on-windows/

The Basics of PostMan

gagecantrelle — Thu, 07 Dec 2023 23:58:57 +0000

When you are creating a website for whatever reason, from shopping, social media, or entertainment, You will need a server to hold all your information. Setting up a server can be a bit tricky. The server will be hosted from a different computer rather than the one you are working on, which makes testing if your code can send and receive data difficult. Luckily there is an application called PostMan that will help with test sending and receiving data.

PostMan was created by a former intern at Yahoo called Abhinav Asthanan. He created PostMan as a side project due to API tests and development. It was first released in 2012 as a Browser extension then later became cross-platform. The application is free to download and easy to use. It will probably take an hour to download if I remember correctly. The link to download is at the bottom of the blog.

Let's look at how you can use PostMan

To use PostMan you need to have a good understanding of how to
use Ajax. I did a blog on the basics of Ajax but the blog
doesn't have all the details of using some of the commands. The
link to the Blog will be at the bottom of the blog.
When you start Postman it should create an empty file. If not,
right-click the file box and click create/add file. Then select
the request you want to do. There are seven to pick from but we
will only look at 4 of them.
GET, this request will ask the server it's targeting for data,
then show the data in the response box. Also for each request,
you will need a link to target the code sending the request.
This link will act as an ID for your code.
POST, this request will add data to the server. the response
box should show a number that represents if the data was
successfully sent.
Patch, this request updates the targeted data with the given
data
DELETE, this request removes targeted data

A good example of this application being used is test code for updates. Facebook and YouTube send requests to their servers. PostMan will help them check and see if whatever update they're doing will work/ not break any other code.

//link to AJAX blog
https://dev.to/gagecantrelle/the-basics-of-ajax-3m6
//links
https://en.wikipedia.org/wiki/Postman_(software)
https://www.postman.com/downloads/
https://logo-studio.blogspot.com/2011/08/facebook-icon-vector.html
https://pngpedia.blogspot.com/2019/11/youtube-subscribe-icon-logo.html