Forem: EidorianAvi

Forms in React

EidorianAvi — Sat, 13 Mar 2021 18:18:09 +0000

Something almost any application or website will include will undoubtedly be a form in some shape or manner. Whether it be simply for user login or to modify profile data or for a search function a form is simply a core building block in development. Chances are if you're reading this you have at least some idea as how to build a form out with HTML. This post is to demonstrate how a form is handled differently in a React application and how to build it out so it functions within the single page application.

Why is it different in React?

Generally inputs and form elements maintain their own state on a web page this is how you're able to type into them and they maintain the script. React needs access to all of the state on the page including form data. So the forms state and the applications state needs to be the same thing. That's where building out how your form is handled differs in React.

Controlled Components is how its done. What do I mean by that? Well the same way react is rendering the form onto the page it is also in control of rendering the users input onto the form. This is done through the use of connecting the users input to the state of the form component.

A Demonstration

From this point I'll walk you through how to build out a basic dog form component that takes in name, age, and breed. I'll be personally using functional arrow components and the useState hook built in to React as opposed to a class component to handle state.

Okay so first things first lets just create our component and make sure to bring in useState.

import React, { useState } from 'react';

const ReactForm = () => {


}

export default ReactForm;

Next thing we can do is build out our form in our return statement with labels, inputs, and a submit.

    return (
        <div>
            <form>
                <label htmlFor="name">Name:</label>
                <input type="text" name="name" />
                <label htmlFor="age">Age:</label>
                <input type="text" name="age" />
                <label htmlFor="name">Breed:</label>
                <input type="text" name="breed" />
                <input type="submit" value="submit" />
            </form>
        </div>
    )

Looks like a pretty standard HTML form at this point right? Well this is where it will start to differ and we will begin tying the inputs to the state of the component.

We will need state to store the input values for name, age, and breed since that's the case. Lets set that up in our component with the useState hook.

    const [ name, setName ] = useState("");
    const [ age, setAge ] = useState("");
    const [ breed, setBreed ] = useState("");

Alright so now that we have a place in our component to store the inputs state we can then tie associate the value of the input to that state variable. Do this for each input. It should look like this.

<input type="text" name="name" value={name}/>

Now that the value of the input is associated with the state variable and the state variable is an empty string "" you'll notice in your form you can no longer type into the input box. Go ahead try it.

That's a good sign. Means your input is associated to the components state. The problem at hand now is how do we allow for actual user input. Well it's associated with state so we have to change state right?

Let's create a function for that.

    const handleChange = ({ target }) => {
        switch(target.name){
            case "name":
                setName(target.value);
                break;
            case "age":
                setAge(target.value);
                break;
            case "breed":
                setBreed(target.value);
                break;
            default:
                return;
        }
    }

Woah woah woah what's going on in there? Let's break it down

A handleChange function is created. It takes in an event. I've chosen to deconstruct the target out from the event because what we're looking at is the event.target which in turn will be the input tag this function is associated with
Since there are multiple inputs I've set up a switch statement that will consider the targets name value for each case.
Dependent on the value of the target.name the switch statement will use our earlier created hook to change the values state.

Now that the function for handling state change is created we just have to associate it with each input tag by assigning an onChange to our function like so:

<input type="text" name="name" value={name} onChange={handleChange}/>

Voila! Now that the change handler is associated with the input you should successfully be able to type into the input boxes. What does that mean then? That your changing the state of the component by typing into these inputs, and more importantly that the inputs state and the components state are one and the same.

Okay so what else do we have to do with the form? Probably work on making sure you can submit the form. Lets create a handleSubmit function for that. I will be making it so the form makes a POST request to a dummy backend through the use of https://httpbin.org. It's an excellent resource for testing a request without it actually going anywhere.

    const handleSubmit = (event) => {
        event.preventDefault();
        let dog = {
            name,
            age,
            breed
        }

        fetch("https://httpbin.org/post", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(dog),
        })
          .then((response) => response.json())
          .then(console.log);
    }

Let's walk through this one.

A handleSubmit function is created that takes in an event as an argument.
First we use preventDefault() on our event because what does a form generally do on submit? Refresh or redirect and that's not what we would like to do with a single page application.
A dog object is created and we can assign each of its key value pairs to the state variables that store them.
A fetch POST request is made to the dummy backend and submits that previously mentioned dog object with our states values.
After a response is received and turned into JSON it is then locked to the console.

Alright now that we have determined the functionality of our submit let's associate it with our form by assigning our function to onSubmit like so:

    <form onSubmit={handleSubmit}>

Now when you fill out the inputs and hit submit it will make a POST request that will in turn send a response which will then be logged to your console. Test it out.

Success. Your form is functional.

One last thing you can do is since the inputs are tied to state (Have I mentioned that yet?) is to clear the inputs on a submit.

The way I handled that is created a super simple helper function:

   const clearForm = () => {
        setName("");
        setAge("");
        setBreed("");
    }

And invoked it during the then chain on my handleSubmit:

          .then(clearForm())
          .then((response) => response.json())
          .then(console.log);

You should now have a controlled form component that allows for form submission and the form will clear on submit. How about that. Anyways that will be it from me today I hope you picked something up and as always feel free to reach out to me about any questions or comments. Happy Coding!

Recursion in JavaScript

EidorianAvi — Mon, 08 Mar 2021 06:12:39 +0000

Recursion is a common concept in coding and one everyone should understand down the road. I'd like to introduce it to anyone who's heard the term but isn't familiar with what it is or how it works within JavaScript.

So first thing is to talk about what it is. Recursion is where a function calls itself within itself. So when the function is invoked it calls itself. Which then calls itself. Which then calls itself. Which then.. you get the point.

const callMyself = () => {
  callMyself();
}

//DONT DO THIS IT WILL INFINITELY RUN
callMyself();

Sounds like an infinite loop right? Well that's because it is. So what's the point of doing that? Well there isn't.. unless you enable a way out of the infinite loop. This will come in the form of conditional statements such as our good friends if/else statements.

You can set this up so it either keeps recurring while a condition is true or it keeps recurring until it isn't true.


const callMyself = () => {
  if(condition){
    callMyself();
  } else {
    //Do something else besides invoking self
  }
}

A super common example and one that helps to visualize the concept is counting numbers up or down until a condition is met.


const newYearCountDown = (number) => {

  console.log(number);

  nextNumber = number--;

  if(nextNumber > 0){
    newYearCountDown(nextNumber);
  } else {
    console.log("Happy New Year!!!");
  }
}

So that's cool and all but counting can be done a great number of ways. The point is using recursion until a condition is met and using conditionals to exit the loop once the condition is satisfied.

A second common example when it comes to recursion is finding the factorial of a given number. A factorial is the product of a number and every number preceding it.

The factorial of 5 would be:

5 x 4 x 3 x 2 x 1 = 120

With recursion this would look like:

const factorial = (number) => {
  if (number <= 0) {
    return 1;
  } else {
    return number * factorial(number - 1);
  }
};

factorial(5);

//factorial(5) returns 5 * factorial(4)
//factorial(4) returns 5 * 4 * factorial(3)
//factorial(3) returns 5 * 4 * 3 * factorial(2)
//factorial(2) returns 5 * 4 * 3 * 2 * factorial(1)
//factorial(1) returns 5 * 4 * 3 * 2 * 1 * factorial(0)
//factorial(0) returns 120

So now that you have a grasp of what recursion is doing you might be thinking this is doing the same thing as a loop. It's true these things could be done with a loop or via iteration and a lot of the time in JavaScript those may be a more fitting solution than recursion. So when is recursion most useful?

Well one advantage is you can make your code a lot more readable if you use recursion. It can also shorten your code in some cases compared to loops. Some downsides with recursion is that it can take up more memory and produce slower code depending on usage.

That'll be it from me this week.. happy coding!

Switch Statements in JavaScript

EidorianAvi — Sun, 28 Feb 2021 22:49:53 +0000

Today I'll be doing a quick tutorial on how to use a switch statement in JavaScript and when it's appropriate to use. I bring this up because I found my self in a situation where I was writing a series of if statements that a switch made for a much better solution.

When to use a switch statement?

Switch statements are perfect for when different outputs may require a different following reaction. For example x + y can have many different outcomes but what if you need a different reaction depending on what the output turns out to be? You could write a series of if statements or you can contain the logic entirely within a switch statement.

How to use it:

The switch itself will take in an expression and depending on what case the expression fulfills will be the code block that performs.

switch(expression) {
  case 1:
    // Does something
    break;
  case 2:
    // Does something else
    break;
  default:
    // If none are met this one performs
}

That's the basic structure of how it will look. Notice how at the end of each case we break out of the code. If you don't it will keep running through the cases.

Here's a full on example of it in use. It will be a function that takes in a species as a string and return a name of a famous member of said species.

const famousMemberOfSpecies = (species) => {
    let famousMember;

    switch(species){
        case "Wookie":
            famousMember = "Chewbacca";
            break;
        case "Twi'lek":
            famousMember = "Hera Syndulla";
            break;
        case "Weequay":
            famousMember = "Hondo Ohnaka";
            break;
        case "Hutt":
            famousMember = "Jabba";
            break;
        default: 
            return "No famous members found";
    }

    return famousMember;
}

console.log(famousMemberOfSpecies("Hutt"));//Should log "Jabba" to the console.

console.log(famousMemberOfSpecies("Nexu"))//Should log "No famous members found" to the console.

Notice how I used the default case to handle an output that might not need a response.

You can get much more complicated with these and perform entire code blocks in each case but the point is you can handle different outputs with different responses using this and avoid overusing if/else statements that are more appropriate for more complicated conditional statements.

Anyways that'll be it for today. Happy Coding!

Uploading Images to your Node/MongoDB Backend

EidorianAvi — Mon, 22 Feb 2021 02:38:18 +0000

Today I will be breaking down how to upload an image to your node backend. This will be uploading the image file to the actual back end keep in mind so if you're looking to uploading to the database this isn't the article. I won't be showing anything about creating a front end form or anything but I will be testing my routes with POSTMAN.

Something else to note is I will assume you have basic knowledge of express and routes in your backend. If you don't I have a prior post that might be helpful nudge nudge.

Let's get started.

So first things first you will need to install multer which is a package that will help with file handling.

npm i multer

Good. Now that that's done lets go ahead and create an 'uploads' folder in your root directory for storing these images.

mkdir uploads

Following that lets set up some middleware so that we can access our uploads folder in a request. This is set up in my server file app.js

app.use('/uploads', express.static('uploads'));

Awesome now that that's all good to go let's head to whichever route you are trying to set up image upload with.

In there you will bring in that multer mentioned earlier...

const multer = require('multer');

...and then we will configure it.

First off lets set up its storage.

const storage = multer.diskStorage({
    destination: function(req, file, callback){
        callback(null, './uploads/');
    },
    filename: function(req, file, callback){
        callback(null, Date.now() + '-' + file.originalname)
    },
});

Woah woah woah what's going on in there?

A storage variable is created and assigned to multer.diskStorage()
A couple options are set up inside of their in the form of an object.
The first being the destination which takes a function with the request, the file, and the callback.
The callback takes in two parameters the first being for error handling which I won't be working with and the destination you'd like the image file to be stored. In our case the uploads folder we set up earlier.
The second option is the filename which also takes a function with the same parameters. You can set that up how you like but I set it up so It prepends my original files name with the Date.

Sweet. Our storage options are created.

Following that we will be setting up our upload middleware which invokes multer. We will also be configuring that with an object.

const upload = multer({ 
    storage: storage, 
    limits: {
        fileSize: 1024 * 1024 * 5
    },
    fileFilter(req, file, callback){

        if(!file.originalname.endsWith(".png" || ".jpg" || ".jpeg")){
            callback(new Error("Must be an image file", false))
        } else {
            callback(null, true);
        }
    },
});

I assign our invoked multer to the upload constant.
I assign its storage option to that storage constant we just configured.
A second option it takes limits. I assigned it so that it can only take a fileSize up to 5MB.
A third option is the fileFilter which will determine that the file is actually an image. I did the check by checking if the file name ends with any of the image tags. If not it throws an error and doesn't save if it does it saves the file.

We're mostly there.

In your Schema make sure and include the image and in this case we will be accessing the path so it will be type: String.

const NovelSchema = mongoose.Schema({
    title: {
        type: String,
        required: true
    },
    author: {
        type: String,
        required: true
    },
    book_cover: { 
        type: String,
    }
}, { timestamps: true });

Now that we have it all set configured you just pass it into your post request as middleware.

//Post a new novel
router.post('/', upload.single('image') ,async (req, res) => {
    try {
        const novel = new Novel({
            title: req.body.title,
            author: req.body.author,
            image: req.file.path,
        });

        const savedNovel =  await novel.save();
        res.json(savedNovel);
    } catch(e) {
        res.json({ message: e})
    }
});

I passed our upload(multer) in as middleware to handle the file. I used the single option and passed in the argument for image.
The rest is a standard post response but notice how in our image instead of accessing our requests body we access the file.
I assigned it the path in our backend to access that image.

Now what is stored in our backend is the image in our uploads folder and what is stored in MongoDB is a String with the path to that image. It should look something like:

"uploads/1613958234056-Dark_Disciple_Cover.png"

Since we setup middleware to access our uploads folder as a route earlier you can use that as your URL param and viola your image should appear.

Wrap Up

Now you should be able to successfully save an image to your backend and store its path in your database. If you'd like to know how to store the actual image to the database.. well me too. I'm working on that currently and will be making a future blog post once I get it figured out myself. If you have any questions or comments feel free to reach out. As always happy coding!

Scope and Closure in JavaScript

EidorianAvi — Sun, 14 Feb 2021 06:15:32 +0000

Today I'd like to briefly go over what closure is in JavaScript and how it works.

Scope

The first thing we have to talk about when it comes to closure is scope. Scope is the level at which you have access to a point of data. There are multiple levels of scope.

Global Scope: This is when a variable is declared globally in a file and is able to thus be accessed at any point in that same file.
Local Scope: This is a functions own degree of scope. Say a variable is declared inside the function this is considered local. If you try to access this variable outside of its function or local environment you will not have access to it.
Outer Functions Scope: This is a big part as far as closure is concerned. If you have a function inside of a function that inner function will have access to all variables declared in the outer function.

Examples

Global:

const jediMaster = "Avar Kriss";

function greetMaster(){
   console.log(`Hello ${jediMaster}`);
}

console.log(jediMaster)
//This will log the string "Avar Kriss"

greetMaster();
//This will log the string "Hello Avar Kriss"

The main takeaway here is since the variable jediMaster is declared at a global level in the file it is accessible both outside and inside the function.

Local:

function greetMaster(){
   const jediMaster = "Avar Kriss";
   console.log(`Hello ${jediMaster}`);
}

console.log(jediMaster);
//This will give you a Reference Error as jediMaster is not defined

greetMaster();
//This will log the string "Hello Avar Kriss"

So now you see that the variable is only available to its local environment or the function as to where it was declared in. You cannot access it outside of the function even if in the same file.

Outer Function:


function greetMaster(){
   const jediMaster = "Avar Kriss";

   function honorMaster(){
      console.log(`Hello esteemed Jedi Master ${jediMaster}`);
   }
   honorMaster();
}

console.log(jediMaster);
//This will give you a Reference Error as jediMaster is not defined

greetMaster();
//This will log "Hello esteemed Jedi Master Avar Kriss"

What's happening in here is that the function inside of the function still has access to the outer functions declared variable. This is due to it still being within the scope of the environment the variable was created in.

Closure

So now that we know what scope is how does that have to do with closure? Well pretty much everything.

A closure allows you to use scoping to your advantage and enclose an inner scope into a returned function allowing for encased behavior. It sounds tricky I know I'm still wrapping my head around it.

Here's a basic example of what it can look like:

function incrementBy(integer) {
    let count = 0;
    function innerFunction() {
        count += integer;
        console.log(count)
    }
    return innerFunction;
}

const firstClosure = incrementBy(3);

firstClosure();
//This will log 3 to the console

firstClosure();
//This will log 6 to the console

const secondClosure = incrementBy(5);

secondClosure();
//This will log 5 to the console

secondClosure();
//This will log 10 to the console.

Let's talk about it.

I created an incrementBy outer function that returns an innerFunction. That is closure to its core. Now let's walk it through step by step.

First thing is I created the outer function incrementBy that takes in an integer as an argument.
I created a local count variable that will start at 0 within that outer function.
I created the inner function that will increment and then log the count of the outer functions scope by the argument provided.
The inner function will be what the outer function returns.
From there the incrementBy function is assigned to a variable firstClosure and invoked with the argument of 3. This effectively assigns the inner functions with an incrementor of 3.
When you invoke the variable that again is just the inner function you will see that it will now perform the inner functions purpose and log and increment that counter by 3 every time invoked. This is where it's important to take note. We are using the outer functions variable by invoking the inner function outside of the outer function. Sounds confusing I know. That means we've created enclosed(closure) behavior with this function.
You can verify this by assigning the same function incrementBy to another variable and see that it has its own count variable by invoking it.

Wrap Up

Now this example is extremely simple and can absolutely be performed without closure but it's the overall concept I'm trying to drive home and have performed it using closure. The point is that that count variable is encased and available for manipulation or use by the inner function even when the inner functions functionality is exported to an external scope.

If you have any questions or comments please feel free to reach out to me. Happy Coding!

Async and Await in JavaScript

EidorianAvi — Sun, 07 Feb 2021 23:00:53 +0000

Do you really know JavaScript if you don't know how to use an asynchronous function? Sure, I'm not here to gatekeep but it doesn't mean you shouldn't know what they are and how to use them. Today I'll be briefly going over exactly that using the more recent async and await format.

What is an asynchronous function and why use them?

I'm glad you asked.

Asynchronous functions in JavaScript are functions that enable promise based behavior to be used within your code.

First thing you'll need to know is what the heck is a promise? Think of it as a placeholder you can work with for incoming data. This is necessary for handling data from an external API that is part of your page but takes a moment to fetch. So you're able to use a Promise in place of the data and set conditions for what happens to do the data if it successfully comes through or doesn't.

A promise can be in three separate states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

The async and await keywords were added to make promise handling more readable. It use to be more prevalent to do callback functions but I won't be getting into that today.

Async

To create an asynchronous function you must first prepend it with the async keyword. When you do this you're stating that the function will be handling a Promise or a placeholder for incoming data. This could be done in the older function format or through the use of an arrow function like so.

async function fetchAPI(){
   console.log("fetched");
}

const fetchAPI = async() => {
   console.log("fetched");
}

Now these functions clearly aren't doing much at the moment except logging the string "fetched". What matters is what they actually return upon invocation. If you invoke you will see in your console that actually logs a Promise object that should look like:

Promise {<fulfilled>: "fetched"}

The promise is in the fulfilled state since the data was immediately available considering it's just a string within the function.

Where it counts is when the data takes time to load such as from a fetch. Today I will be using jsonplaceholder as my API to fetch from for examples sake. If you're not familiar with it it's a super useful resource for fetching dummy data for practice.

const fetchAPI = async () => {
    let data = fetch("https://jsonplaceholder.typicode.com/todos")

    console.log(data);
}

Now what happens when you log the return of this fetch? It still logs a Promise yes but if you'll notice it is now pending.

Promise {<pending>}

In both cases we have a Promise object to work with which is the point entirely. Even if the data you're reaching out is pending or still being fetched you at least have the Promise to work with which is crucial for working with APIs.

Await

Great we got a Promise after fetching an API. Now what?

Now my friend comes the await keyword.

We can place the await keyword inside async functions to indicate that piece of data will be the one that may take a moment to fulfill. We simply include it prior to the fetch.

const fetchAPI = async () => {
    let data = await fetch("https://jsonplaceholder.typicode.com/todos/1")

    console.log(data)
}

This will now turn that promise into it's response once fulfilled.

Response {type: "cors", url: "https://jsonplaceholder.typicode.com/todos/1", redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: falseheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: ""type: "cors"url: "https://jsonplaceholder.typicode.com/todos/1"__proto__: Response

Now we're getting somewhere.

You will want to translate it to it's actual data so you can perform a .json() on your fetch or do it to the variable its assigned. Since that data is asynchronous make sure to still include the await keyword.

const fetchAPI = async () => {
    let response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
    let data = await response.json()
    console.log(data)
}

Which will turn that response into it's JSON format and it should look like:

{userId: 1, id: 1, title: "delectus aut autem", completed: false}completed: falseid: 1title: "delectus aut autem"userId: 1__proto__: Object

Error Handling: Try/Catch

The thing about pulling data from an external source is there can be hiccups along the way. Maybe it's on their end or maybe your fetch has a typo. Either way there can be errors when it comes to Promise handling.

In an async function you can use a try/catch block to determine how to process the Promise whether it was properly fulfilled or rejected.

const fetchAPI = async () => {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
        let data = await response.json();

        console.log(data);
    } catch(e) {
        console.log(e);
    }
}

First the function tries to get the response and if it works it will log the data in JSON format. If it doesn't work out it hits the catch and you will see what kind of error is occurring logged the console.

Wrap Up

There's just an introduction to the async/await format of promise handling JavaScript. There's of course always more to it but I'd recommend exploring the topic further on your own as there are plenty of nuances and approaches to how you work with these. If you're new to async functions I hope this shed some light on how they work and what they do. That'll be it for today. Happy coding!

An introduction to animation and keyframes in CSS

EidorianAvi — Mon, 01 Feb 2021 02:12:27 +0000

A topic I've recently caught interest in is how to animate things through the use of CSS. It's not something I'm entirely unfamiliar with I've used it in previous projects but it's something I was hesitant to use thinking they'd be so much more difficult to do than they actually were. Go figure.

Today I'd like to break down how to build out your own personal(basic) animations using CSS.

A Quick Setup

I'll be playing with two basic shapes a square and a circle. All I have in my project is an index.html file as well as a styles.css file and I of course linked the stylesheet to the index.

The body of my HTML looks like:


 HTML
<body>
    <div class="blue-box"></div>
    <div class="red-circle"></div>
</body>

And my styles sheet looks like:


 CSS
body {
    margin: auto;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
}


.red-circle {
    height: 200px;
    width: 200px;
    background-color: red;
    border-radius: 50%;
}

Which should look like:

We're all set to start playing with some animations.

Keyframes

What are keyframes you ask? Well they're the CSS rule we use to assign how an animation will proceed at specific keyframes(think checkpoints) in its sequence. The directions of the animation if you will.

To build out a keyframe animation in your CSS file you use the @keyframes at-rule and then assign it a name. This will be the name you call later so it should be self-descriptive.

From there you can assign it a to and from value in terms of what you're animation should be doing. For more control(and my personal preference) you can also use multiple percentages in place of.

Example:


 CSS
@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Percentage Version */

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180deg)

    100% {
        transform: rotate(180deg);
    }
}

Notice how in the percentage version I can specify where I want the animation to be at its 50% keyframe, or any keyframe for that matter. Much more control. If it's a two step animation by all means use from and to but for more customized animations percentage is the way to go.

Using the Animations

So now that you created a keyframe animation that will rotate whatever you assign it to a full 360 degrees let's check out how you would implement it.

There are multiple properties you can work with with animations but I will be going over the main three I've run into.

animation-name: Takes in the name of your created animation.
animation-duration: The amount of time you would like the animation to last in its entirety.
animation-iteration-count: The amount of times you would like the animation to repeat itself.

Let's check out how this might look on our blue box:


 CSS
.blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

If you're following along you'll notice the box is now rotating infinitely and it takes 5 seconds to make the full 360 rotation animation.

There's also this nifty little shorthand in the form of:



animation: name duration timing-function

So our rule can now look like...


 CSS
.blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
    animation: rotate 5s infinite;
}

... and work just the same!

A Couple More Animations

Okay so now that we have an idea as to how make and use a keyframe animation let's check out a couple more quick ones.


 CSS
@keyframes color-changer {
    0% {
        background-color: red;
    }

    50% {
        background-color: green;
    }

    100% {
        background-color: blue;
    }
}

@keyframes pulsate {
    0% {
        width: 200px;
        height: 200px;
    }

    50% {
        width: 250px;
        height: 250px;
    }

    100% {
        width: 200px;
        height: 200px;
    }
}

Again these names are supposed to be descriptive as to what they perform. The first will cycle through RGB and the second will make the element pulsate.

I made two to show you how you could use both on a single element. This time I will be working with the red circle.


 CSS
.red-circle {
    height: 200px;
    width: 200px;
    background-color: red;
    border-radius: 50%;
    animation: pulsate 5s infinite, color-changer 10s 2;
}

I used the shorthand method to show that you can call on both animations on the same element and specify different rule sets for each animation.

The red circle will now pulsate at the rate of 5 seconds per pulse infinitely. It will also change colors at the rate of 10 seconds per rotation but it will only occur twice. It will continue pulsating red after the color-changer animation is done running.

Go Animate!

That'll be it from me today on keyframes and animations. I know for a fact that there are some insanely creative and talented people out there who can work magic with this tool, and I'm sure you can do so much more than the basic stuff I showcased today. I do hope you either learned something new today or just enjoyed the read. Always open to feedback and discussion but until next time... happy coding!

The Two Sum Problem in JavaScript

EidorianAvi — Mon, 25 Jan 2021 04:03:46 +0000

The very first technical question I got asked was the classic two sum algorithm problem. I was fresh to algorithms and could solve it but I couldn't optimize it to a requested time complexity. Turns out this is a super common problem and you will likely encounter it either in an interview or down the road practicing algorithms.

It's a pattern useful to recognize and it shows up in different types of problems so it's ideal to know how to tackle it if it ever rears its head.

The Problem

So the general gist of a two sum is that you have a list or an array of numbers and a target sum to hit. You're looking to return the indexes of the two numbers that when added together hit the target sum. There should only be one solution to the problem from the list of numbers and a number can not be used twice.

My first solution

Let's assume the input is:

array = [1, 3, 10, 11, 14]
goal = 13


const twoSum = (array, goal) => {
    let indexes = [];

    for(let i = 0; i < array.length; i++){
       for(let j = i + 1; j < array.length; j++){
          if (array[i] + array[j] === goal) {
        indexes.push(i);
        indexes.push(j);
          }
       }
    }
    return indexes;
}

This will return an array of [1, 2].

It works but if you check it out you'll notice it's running a loop inside of a loop to figure out which two numbers add up to the goal. That puts us at a time complexity of O(n^2). Pretty slow. Not a big deal for a small array like ours but it's far from optimized and I could say without a shadow of a doubt that if you're doing this type of problem they will be looking for you to improve the time complexity.

A more optimized solution

Lets assume the same input:

array = [1, 3, 10, 11, 14]
goal = 13

const twoSum = (array, goal) => {
    let mapOfNumbers = {};
        let twoIndexes = [];

        for (let i = 0; i < array.length; i++) {
        mapOfNumbers[array[i]] = i;
    }

    for (let i = 0; i < array.length; i++) {
          let target = goal - arr[i];
      if(mapOfNumbers[target] !== null && mapOfNumbers[target] !== i) {
        twoIndexes.push(i);
            twoIndexes.push(mapOfNumbers[target]);
      }
        }

      return twoIndexes;
}

Okay so let's talk about what's going on in this.

First thing is I mapped out the numbers and their indexes. I used the first for loop to accomplish this. Notice I assigned the number as the key and the index as its value.

Second thing is a ran a second for loop through the array and first determined what the value would have to be to equal to goal at that index.

Then inside that loop I do an if statement to check two things. One being if that target value exists in the map we created. The second making sure it's not at the same index as the one we are currently working with.

If they both pass then I push those two indexes into my output array and simply return it.

So while this one has two loops they're not nested so the time complexity lands at O(n) power. Much better.

Wrap Up

Okay so that's all I'm covering for today but if you have any questions at all feel free to reach out to me. I hope this is helpful to somebody in solving this problem you will no doubt encounter at some point. Happy Coding!

The Math object in JavaScript

EidorianAvi — Sun, 17 Jan 2021 05:10:25 +0000

I have recently been using the Math object and its methods in my algorithms and I can't help but wonder why I didn't start using it sooner. This may be a super basic topic to some people but I personally had little to no exposure to using it until recently and thought I'd go over a few of the useful methods just to get them out there.

One thing to clarify if you have no idea what I'm talking about JavaScript has a built in Math object with many methods to perform mathematical calculations or to provide a common mathematical value such as Pi or the constant e.

Now that we cleared that up let's get started.

1. Math.round(), Math.ceil() and Math.floor()

These are all very similar in that they round to the nearest whole integer.

Math.round() is used to round to the nearest whole integer whether it be lower or higher. Just like you would round UP at the .5 mark and down at anything lower.

Math.round(1.4);
// Returns 1

Math.round(2.5);
// Returns 3

Math.ceil() also rounds to the nearest whole integer but it only rounds UP no matter the decimal value.

Math.ceil(10.2);
// Returns 11

Math.ceil(13.7);
// Returns 14

Math.floor() does the opposite. It will always round DOWN to the nearest whole value.

Math.floor(100.3);
// Returns 100

Math.floor(56.9);
// Returns 56

So they all have the same purpose but you have options depending on what you the situation might demand.

2. Math.min() and Math.max()

These do exactly what they seem like they will do and will return the minimum or maximum value of a set of data.

Don't let the simplicity fool you though that's incredibly useful.

My favorite way to use these is when determining the minimum or maximum value in an array. To do this all you have to do is pass the array into the method but first make sure to use the spread operator.

Math.min(100, 4, 13, 8,56);
// Returns 4

Math.max(10, 2000, 26, 1701, 235);
// Returns 2000

const numberArray = [3, 6, 1, 4, 9];

Math.max(...numberArray);
// Returns 9

Math.min(...numberArray);
// Returns 1

3. Math.sqrt() and Math.pow()

Math.sqrt() allows you to find the square root of a given value. Nothing to fancy but definitely handy to know.

Math.sqrt(9);
// Returns 3

Math.sqrt(64);
// Returns 8

Math.pow() takes in two values. The first being the base value, the second the power you'd like to apply to it.

Math.pow(2, 2);
// Returns 4

Math.pow(2, 8);
// Returns 256

4. Math.abs() and Math.sign()

Math.abs() gives you the absolute value of a number so if you have a case where you need a negative to be it's positive counterpart you use this, which happened to me recently incidentally.

Math.abs(-100);
// Returns 100

Math.abs(200);
// Returns 200

Math.sign() tells you the sign of the input whether it be positive, negative or zero. It returns it in the form of -1, 0, or 1.

Math.sign(-13);
// Returns -1

Math.sign(13);
// Returns 1

Math.sign(0);
// Returns 0

This has proven to be useful for testing if a value passes a threshold.

Wrap Up

These are all methods I've recently used in my algorithm practice that have helped tremendously. They've also helped me shorten my solutions in multiple cases.

There are quite a few methods used for calculation purposes and a couple common values like:

Math.E
// Returns Eulers constant which is 2.718

Math.PI
// Returns 3.14159

Really though there a ton of methods to use on the object for your calculation needs and here's a reference for your future mathematical needs.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

Anywho that'll it from me. Happy Coding!

An Introduction to Web Accessibility

EidorianAvi — Mon, 11 Jan 2021 03:23:03 +0000

This week I'd like to talk about web accessibility. It's a topic I find not only interesting but also really important. I was asked once during an interview how to make your page more accessible and I blanked. I had all the answers I just didn't piece them together properly. Recently I've reexamined the topic and I'd like to share some of the points I've come across.

What is Web Accessibility?

Well it's a pretty fitting name. It's making your web page more accessible to a larger audience. This means designing it in a way that allows for people of all varieties, disabilities included, to have equal access to your page. This is important for a multitude of reasons. From a business standpoint it makes sense you'd want your product to reach as many people as humanely possible. From an inclusivity standpoint it makes sense to build your page out in a way that allows those with disabilities to partake in standard societal practices such as browsing the web.

Luckily HTML5 brought along many features that allow for much more inclusive practices. It allowed for writing much more semantic HTML. Semantic HTML meaning the code is much more descriptive to what it performs and contains. This allowed for screen readers, that someone with a visual disability might use, to sort through much more organized and sectioned off web pages.

Ways to Improve Accessibility:

1. Header/Body/Footer

Using tags to identify the three major parts of the page is easy to overlook considering they're not required when building out your page. It's important when making your page accessible to not section it out into its proper segments however.

Use the header tags to store stuff such as your h1 tag which is the primary focus of the page as well as stuff like navigation bars or logo images.

Use the body tags to store your pages actual content whatever that may be. You can only use these once on each page which makes sense there shouldn't be two body sections. This is used to store the mass majority of your page, the content the user is likely on the page to see. This can include tags of almost all varieties to be frank and will take up the majority of your HTML document.

Use the footer tags to store stuff such as copyright information, contact info, a sitemap or a link to the top of the page. All things that are necessary for your page but aren't necessarily actual content of the page.

These not only help you organize your page but a lot of screen readers can use them to quickly navigate the page for the user.

2. h1 - h6 tags

So we all use these already on our pages but are we using them correctly? To be honest I definitely wasn't for a good while.

Here's the thing when it comes to the header tags. A lot of people myself included use them for their sizing as opposed to their importance. Don't do that. I'm going to say it one more time just to drive it home. Don't do that.

This matters for not only web accessibility but also for search engine optimization(SEO).

From what I've gathered the h1 tag should be used only once per page. This is the overall point of the page and will be the first thing a search engine is seeking to learn if the page is relevant to a search. If you use it all over the place because you need larger text your pages meaning is lost.

Following h2-h6 should be used in accordance with overall relevancy to the pages topic and to each other. These can be used multiple times throughout the page but each should be tagged accordingly.

<header>
   <h1>This page is about Star Wars!</h1>
<header>
<body>
   <h2>The Prequel Trilogy</h2>
     <h3>Episode I: The Phantom Menace</h3>
     <h3>Episode II: Attack of the Clones</h3>
     <h3>Episode III: Revenge of the Sith</h3>
   <h2>The Original Trilogy</h2>
      <h3>Episode IV: A New Hope</h3>
      <h3>Episode V: The Empire Strikes Back</h3>
      <h3>Episode VI: Return of the Jedi</h3>
</body>

Notice how the tags are used in relation to their importance to the overall structure of the page. Not only that but I didn't jump from h2 to h5. The h3's are related to the h2 that precedes them. Structure your headers in such a fashion.

One last thing I have to mention on using your headers properly is to just use your CSS styling to adjust their sizing and style to what you need.

3. Labels on forms / alt attribute on images

When creating a form it's important to associate a label with a provided input field. It's easy to do you simply pass in the id of the input field into the 'for' attribute of the label. This identifies exactly what is supposed to go into the input field.

<form action="">
  <label for="username">Male</label>
  <input type="text" id="username" value="male"><br>
  <input type="submit" value="Submit">
</form>

When using an image that is a visual representation of a topic on the page it's important to provide a value for the alt attribute.

<img src="deathstar.jpg" alt="The Death Star looming over Alderaan">

This attribute is important for not if the image fails to load but if a user can't personally experience the image.

An instance of when not to use it is if the image is purely for styling effects on the page or if it already has a caption under it detailing it.

Wrap Up

These are just an introduction into making your page more accessible. There's really a lot more to it but I feel like these are a strong starting point in understanding what it is, why it matters and how to approach it. These are things you likely knew about but maybe didn't know why it mattered in using them correctly like I didn't initially.

I'll be wrapping up there but here are some great resources to further read on the topic:

Thanks for checking this out if you did and as always.. Happy Coding!

Some Array methods I've recently encountered

EidorianAvi — Mon, 04 Jan 2021 03:32:16 +0000

Recently I've been working on my algorithms and data structure problems which has of course led to a ton of array manipulation. As I've done so I've run into some less common and less used array methods and thought I could share a few of my favorite encounters. I'll be running through 3 array methods that are less common so I wont be doing the fan favorites such as .map() or .forEach() but ones I found useful or that I just found interesting.

Let's get started.

.some()

This one falls closer to the interesting category but absolutely has its uses as well. It's very similar to .includes() but not identical.

What it does: checks if any values in an array meet a certain condition. It returns a truthy value if any pass the condition.

Example

const oddNumbers = [1, 3, 5, 7, 9, 11];

console.log(oddNumbers.some(number => number % 2 === 0);
// This will log as false.

console.log(oddNumbers.some(number => number > 8);
// This will log as true.

This can of course be accomplished with other methods but if you're strictly lookingo see if any values in an array meet a certain condition and that's all this is the method you're looking for.

.from()

So this one is more on the interesting side than useful in my opinion simply because I feel like I would rather use other methods to perform the same things. It creates an array from a string among other things and is performed on the actual Array global object not on an array.

What it does: creates an array from a string. It can also act similar to a map however in that it can transform each index in an array.

Example

const chewbaccaArray = Array.from('chewbacca');

console.log(chewbaccaArray);
// This will log ['c', 'h', 'e', 'w', 'b', 'a', 'c', 'c', 'a'];

const numbers = [1, 2, 3, 4, 5]

const tenDigits = Array.from(numbers, number => number * 10);

console.log(tenDigits);
//This will log [10, 20, 30, 40, 50]

Again my opinion on this is while it's interesting to know about it I feel like I'd rather either map an array or split a string for the same effect.

Set

Alright so I don't know if this counts as an array method to be honest but it's easily my favorite of the bunch. This one hands down wins as the most useful of the three.

What it does: It creates an array of only unique values so there are no duplicates. This isn't performed directly on an array but an array is passed into it.

Example

const badCounting = [1, 2, 3, 3, 4, 5, 5, 5, 6];

const goodCounting = [...new Set(badCounting)];

console.log(goodCounting);
//This will log [1, 2, 3, 4, 5, 6]

Pretty sweet I know.

I think this one was the most interesting and useful encounter and I'm stoked to have it in my arsenal. I can think of many times I was in need of exactly this.

Anyways those are just some methods I've run into that I thought were worth sharing. Let me know if there are any other neat or niche ones that you can use on arrays or objects I'd love to see more.

Happy Coding and Happy New Year!

.slice() vs .splice()

EidorianAvi — Mon, 28 Dec 2020 02:36:36 +0000

Everyone has that one thing that they need to look up ever single time. For JavaScript mine happens to be when to use slice and when to use splice on an array. Writing this post should end that once and for all (maybe).

The confusion stems from the fact that they do something very similar but at the same time in very contrasting ways so they have different use cases. They are both used to grab sections of an array. I'm going to break down how to use both and give my thoughts as to when one would be appropriate over the other.

.slice()

So slice is used to grab a section of an array and it returns a new COPY of that section while leaving the original array intact. The method can take in either one or two parameters.

The first parameter being the index of the array at which you want to start. The starting index will be included in the new copied array.
The second parameter is the index that you would like to stop at. It is not inclusive though so this index will not be included in the copy.
If you don't use the second parameter and designate an end index the copied array will start at the first parameter and carry on all the way to the end of the array.

Example:

const planets = ['Tatooine', 'Alderaan', 'Coruscant', 'Kashyyyk', 'Naboo', 'Hoth'];

// This will return indexes 1-4

const middleFourPlanets = planets.slice(1,5); 
console.log(middleFourPlanets);
//expected output: ['Alderaan', 'Coruscant', 'Kashyyyk', 'Naboo']

// This will return everything from index 3 on

const lastThreePlanets = planets.slice(3);
console.log(lastThreePlanets);
//expected output: ['Kashyyyk', 'Naboo', 'Hoth']

//The original array is still intact with all of its indexes;

console.log(planets);
//expected output: ['Tatooine', 'Alderaan', 'Coruscant', 'Kashyyyk', 'Naboo', 'Hoth']

So the use case for .slice() is when you need to grab parts of an array but still need the original array in its entirety.

.splice()

The splice method is also used for grabbing a section of an array, the key difference being that it does it destructively. Beyond the fact that it can pull out parts of an array it can also add/replace sections to an array. It takes in three different types of parameters.

The first parameter is the index you would like to start the splice at. This index is included.
The second is different than slice. It is not the index you want sliced up to, but instead how many items you want spliced out of the array. If this isn't declared then it will cut off the array from the first parameter indicated. Something worth noting here is if you're just trying to insert into the array you can specify 0 and it won't remove any items.
The third parameter type are items you would like to be inserted in place of what was removed or just at the position specified. Everything from the third parameter on will be inserted.

Since this is destructive it will alter the original array so keep that in mind before using it.

Example:

const planets = ['Tatooine', 'Alderaan', 'Coruscant', 'Kashyyyk', 'Naboo', 'Hoth'];

//This will start at index 2, remove 0 items, but insert two more strings at that position.

planets.splice(2, 0, 'Mustafar', 'Bespin');
console.log(planets);
// expected output: ['Tatooine', 'Alderaan', 'Coruscant', 'Mustafar', 'Bespin', 'Kashyyyk', 'Naboo', 'Hoth']

//This will start at index 0 and remove 1 item. 

planets.splice(0,1);
console.log(planets)
// expected output:  ['Alderaan', 'Coruscant', 'Mustafar', 'Bespin', 'Kashyyyk', 'Naboo', 'Hoth']


//This will remove all items after the indicated position

planets.splice(3);
console.log(planets);
// expected output: ['Alderaan', 'Coruscant', 'Mustafar']

So this is effective for adding items to an array at a specific position. It is also useful to remove segments of an array that maybe aren't relevant.

This shouldn't be used if you will need the original array at any point later.

Wrap Up

I'm feeling a little bit better on the two and think moving forward I'll know which one to use and when to use it.

While this post was largely for me to solidify the difference on the two I hope if you read this you gained something from it too. As always.. Happy Coding!