Forem: sheenasany

How to use Mapbox using React-Map-Gl V7 for your React App for beginners

sheenasany — Mon, 31 Oct 2022 00:08:43 +0000

Mapbox is essentially a third-party JavaScript library that allows developers to build maps and display them in a web browser application. It's really great for users especially when maps include interactivity such as zooming in and out of a map, adding markers, and popups, and animated geographic data. Mapbox overall is super cool! However, it mostly works with Javascript. So how can we add this nifty tool to our React app?

Along comes React-Map-Gl which was first created by Uber's Visualization team where they saw how powerful Mapbox could be and sought ways to implement it using React programming. Go here for a deep dive into their Design Philosophy and Limitations. It's also open source so anyone is welcome to contribute to making it even better for future iterations. You can do so here.

When I first came across Mapbox to use in my Capstone project, I noticed that a lot of the current documentation, tutorials, and videos that existed were for React-Mapbox-Gl version 6.1 or 5.3. However, they've recently upgraded to v7.0 in Feb 2022 and changed MANY things behind the scenes so all the old tutorials out there needed some revamping and reconfiguring to get it to work with the newer version. I also noticed that there weren't a lot of new tutorials or videos incorporating v7.0 so I decided to start simple and write about how to create a map and add markers using this awesome API. For an in-depth look at the differences in versions, take a look here.

Set-Up

Now, to get started, download the package:

npm install --save react-map-gl mapbox-gl

check that your dependencies look like this:

 "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-map-gl": "^7.0.0",
    "mapbox-gl": "^2.0.0"
  }

and import Map into your component along with Marker like so:

import Map, {Marker} from 'react-map-gl';

Also, you'll need to import css styling as well so we can have the ability to set height and width to our map or to add additional styling to your map if you want to get fancy. But bear this in mind as we'll be needing this later.

import 'mapbox-gl/dist/mapbox-gl.css';

In order to use Mapbox in our app, we'll need to sign up with an account and enter some billing information. Even though it's free to use for developers, it's only free up to a certain point which is about 50,000 loads or so a month, and after that they'll charge a fee. Don't worry though because during development you should never come close to this number, but keep on eye on your dashboard as it will have a bar to let you know how many times your map has been mounted. For example, during pre and post development, I only had a total of 368 loads.

Once an account has been created, you'll want to create a token for your app. Nothing fancy needs to be added or modified to create that token, but make sure it's different from your default public token. You'll want to protect that token from the public which means we don't want to set it to a variable directly on our map component or anywhere in our app, but instead, make sure that it is set to .env.local file in your react app. Make sure to check your .gitignore file and that .env.local comes with it. It usually does when you've used create-react-app. Set REACT_APP_MAPBOX_ACCESS_TOKEN as the variable name in this .env.local file to your token.

REACT_APP_MAPBOX_TOKEN="your token goes here"

The reason we do this is to prevent someone from taking our token and abusing it. We don't want anyone to take our token and go beyond that 50,000 loads. Not cool. Again, never commit your token in clear text anywhere in your app into Github... For more information on how to secure your Mapbox token, here's some more documentation on it as well as on the tokens themselves.

You'll be calling this variable later so keep this in mind for now. That should be all the set-up we need for now. Let's get to coding.

Getting your map on the browser

For our purposes here, we're going to start by simply showing the map and adding markers from our backend database.

But first we want to set our initial viewport to where we want our app to load when first mounted on the browser. Let's make this controlled so we'll set state outside of the JSX like so.

function ReactMap() {
 const [viewState, setViewState] = useState({
        latitude: 39.8283,
        longitude: -98.5795,
        zoom: 3.5
    });

We no longer need to use width or height in this version within state so latitude, longitude, and zoom is all we need. We'll be setting that in styles in the JSX later. Here, the latitude and longitude is the center of the USA with a zoom of 3.5. The smaller the zoom number, the more zoomed out it will be, the higher the number, the more zoomed in it will be on those coordinates.

Next, let's get into the return, call on <Map>, and take all of our set up and write it up, like so.

 return (
    <Map
      {...viewState}
      onMove={event => setViewState(event.viewState)}
      style={{width: 800, height: 600}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={REACT_APP_MAPBOX_TOKEN}
    >
    </Map>
  );
}

As you can see, we need to create a copy of our viewState using the spread operator to grab that state we initialized it as. Next we include the onMove callback whenever we want to manage the camera or view state for the map. This is triggered when the user moves the map around. Next is the styling of the map, how big we want the map to be on our page when it loads. Change specifications to your liking.

Next we include the mapStyle and add a styled map of our choosing from Mapbox. They have a gallery of already created map styles that you can use or gather inspiration from to create your own. Save one you created to your gallery, and grab the Style Url and plug it in. The one used above is a basic style. However, I actually am using one of the themed maps for my application, as you can see from the finished product.

And finally, we call on our REACT_APP_MAPBOX_TOKEN by setting it to
mapboxAccessToken so that your map from Mapbox is accessible.

Your final code should look like this:

import React from 'react';
import Map, {Marker} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

function ReactMap() {
 const [viewState, setViewState] = useState({
        latitude: 39.8283,
        longitude: -98.5795,
        zoom: 3.5
    });

return (
    <Map
      {...viewState}
      onMove={event => setViewState(event.viewState)}
      style={{width: 800, height: 600}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={REACT_APP_MAPBOX_TOKEN}
    >
    </Map>
  );
}

export default ReactMap;

Now check your browser by running npm start in your terminal.

Time to add some markers

Now that our app is there, it's looking a little bland. Let's add some markers to it, shall we?

In my app, I have data that I created on my backend using Ruby. However, knowing that Mapbox requires coordinates of latitude and longitude, I was able to include this in my seeds data to create the markers.

You can decide to have your Markers controlled or uncontrolled, but in our case, let's keep things consistent and have app controlled.

const [dataMarkers, setDataMarkers] = useState([])

    useEffect(() => {
        fetch('/markers')
        .then(res => res.json())
        .then(data => setDataMarkers(data))
    }, []);

First, I'm initializing the state of my Markers to an empty array so that when I fetch the data from my backend, it gathers the objects into an array and then I reset the state to my incoming data.

const mapMarkers = () => {
    dataMarkers.map((dataMarker) => {
    return (
        <Marker 
            key={dataMarker.id} 
            longitude={dataMarker.longitude} 
            latitude={dataMarker.latitude}
        >
            <img src="/glowsticks.svg" alt="Festival Icon"/>
        </Marker>
        )
    })
}

Next, we're creating a mapMarkers function, taking our data that came through the get request, and mapping over each marker. After mapping over the data, we create each Marker with a key, a latitude, and a longitude that we have saved on our backend. We then will invoke mapMarkers within the JSX.

I also created my own SVG of glowsticks for my festival map. If you want to use your own SVG, you can make one for free at Adobe or anywhere online. Once you've made one, save it to your public folder in your app and plug in the relative path. Don't forget to add alt text!

Et viola! Restart your terminal and take a look at all your markers.

The final product

Our final code should look like this:

import React from 'react';
import Map, {Marker} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

function ReactMap() {
 const [viewState, setViewState] = useState({
        latitude: 39.8283,
        longitude: -98.5795,
        zoom: 3.5
    });

const mapMarkers = () => {
    dataMarkers.map((dataMarker) => {
    return (
        <Marker 
            key={dataMarker.id} 
            longitude={dataMarker.longitude} 
            latitude={dataMarker.latitude}
        >
            <img src="/glowsticks.svg" alt="Festival Icon"/>
        </Marker>
        )
    })
}

return (
    <Map
      {...viewState}
      onMove={event => setViewState(event.viewState)}
      style={{width: 800, height: 600}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={REACT_APP_MAPBOX_TOKEN}
    >
    </Map>
   {mapMarkers()}
  );
}

export default ReactMap;

And our outcome should look like this:

I may create a series of these and have another post on adding popup functionality. Let me know your thoughts in the comments!

Common Rookie Mistake: Mass Assignment Vulnerabilities

sheenasany — Tue, 11 Oct 2022 04:47:28 +0000

I know that there are many articles out there talking about mass assignment and how awesome it is, but for a new developer, we must also understand the dangers that this can bring to our database as it can open us up to vicious attacks.

Even Github in 2012 wasn't safe from this kind of attack when a user managed to find a crack in their security via a public update form and exploit it by adding their own file to Rails' github. How could this have happened?! These attacks are actually a bit more common than you think, especially in complex applications that involve customizable input values and perhaps programming errors that occur when data is needed to be stored rather quickly. Well, let's get to that and how to protect your database from attacks such as these.

What exactly is mass assignment vulnerability? It's where a user is able to modify fields in your database which opens up for manipulation that was not intended on our part. Surprisingly, this happens in a lot of multiplayer video games because developers of these games, perhaps unbeknownst to them as to this particular vulnerability, are passing state data and storing it in their database, such as when not specifying the particular input from the form and their values as a single object rather than taking in whatever the user is inputting into the field. This case is unique to the front end and this video is great at going into further detail regarding how to protect the front end as well, but let us turn our focus on how we can use Ruby on Rails to form that layer of protection..

Let's say we are a programmer creating the backend to allow our user to create a session upon signing up. You've created your form in the front end which can look like this:

<form onSubmit={handleForm}>
  <p>
    Enter your email address:
    <input type="text" name="user_email" value={email}>
  </p>
  <p>
    Enter a password:
    <input type="password" name="user_password" value={password}>
  </p>
  <input type="submit" value="Sign up">
</form>

On the back end, we've got our corresponding controller handling when a new user is created:

def signup
  user = User.create(params[:user])
  # => User<email: "john@doe.com", password: "qwerty", is_admin: false>
end

As you can see, our params are taking in three user values: an email, a password, and a boolean stating whether that user is an administrator or not. However, our front end is only allowing the user to enter their email and password. Then how can they possibly get to our database? Just because the input is not there to allow the user to change the is_admin status does not prevent them from creating an HTTP request with is_admin in the query string or request body. They perhaps may have been able to view the request body that displays all the detail of the user's account in their developer tools or was able to guess that the param existed with the correct key. Either way, a user can infiltrate by changing the values from false to true and allowing them access to admin level status to do some heavy damage, like being able to access other user accounts or adding value to their own account such as gems, money, or other items of note.

Luckily for us, Rails has a wonderful way of raising an error if we do not protect the params on a controller when a user is created. So it will prompt us to declare which params to PERMIT upon creation. We do this by either explicitly assigning the params that we want to be taken into account within our form and only take in those params, or by white listing those specific params with a private method created within our controller. When white listing we are using what is called strong params. The use of the private method also allows the limitations of only using that method within that class which can provide a little bit more protection.

def signup
  # Explicit assignment:

   user = User.create!(
    email: params[:email],
    password: params[:password]
  )

  # or whitelisting:

  user = User.create!(
    user_params
  )

private

def user_params
        params.permit(:email, :password)
    end
end

In creating these strong params, if a user tries to include the is_admin key and attempt to infiltrate by changing the boolean to true when sending the HTTP request, the request will continue as normal, uninterrupted, but will limit the unpermitted params as it was not defined in our private user_params method. So long hackers!

Resources:
ropsec

Fetch() vs Axios

sheenasany — Fri, 16 Sep 2022 06:12:38 +0000

I've previously written about doing simple fetch() requests in JS before. Moving into Ruby, I seemed to glaze past this fun way of creating a fetch request in much less code and in a shorter amount of time. Because what are programmers if not lazy, always searching for the next available hack to make typing faster, easier, and cleaner.

Axios is a package that can be installed quite easily in any React Application with a simple npm install axios, add the import on the component you choose to work on and viola! You have access to a promise based HTTP Client for your browser.

Let's a look into the differences between the two starting with the basic syntax. First off, Axios needs fewer lines of code for a post request because it does away with the need to have a body property to send data to the endpoint where as Axios uses the data property. Another aspect that differs in syntax is the fact that Axios does not need the JSON.stringify method because it automatically converts data to JSON transforming the data returned from the server while only needing a simple header. With fetch(), you have to parse out the data to a JS object by calling the response.json method.


const url = "http://url.com"
const data = { name: Tom, age: 20}

axios.post(url, data, { 
headers: {"Content-Type" :"application/json"} 
})
.then(res => console.log(res.data)

const url = "http://url.com"
fetch(url, {
method: "POST"
headers: { "Content-Type" :"application/json"
},
body: JSON.stringify ({
name: "Tom",
age: "20"
})
})
.then(res => res.json())
.then(data => console.log(data))

Another way that Axios differs is how you can override the default behavior that automatically happens when sending data back to the server previously mentioned. You can actually redefine the transformation that occurs, but with fetch(), you'd have to do it manually. Let's see how this is done with a get request.

axios.get("http://url.com")
.then(res => console.log(res.data)
error => {
console.log(error)

fetch("http://url.com")
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error))

Although you'd have one additional line of code with fetch() it's kinda nice to not have to JSON-ify the data on a get request when Axios can do this for you. However, they can both fetch and parse the data the same way.

Another interesting point of note is backward compatibility. Axios is quite popular in this aspect because it runs XMLHttpRequest under the hood which makes it easier to run with little issue on a wide range of browsers, including older browsers like IE11. On the other hand fetch() is currently only supported on current versions of Chrome, Firefox, Edge, and Safari which isn't to say that this long list isn't wide ranging either. However, you'd need to implement a polyfill for fetch() which this explains how to do, but can add additional steps to simply allow fetch to be accepted on older browsers whereas Axios can already do the work without the extra work. See? We are lazy..

The examples above implement the same functionality so deciding on which to use is personal preference and up to the developer as to what would work best for your project. There are many other really great examples as to how Axios makes life a little easier which can be read here by Faraz Kelhini, especially when compared with fetch().

Resources:
Axios Documentation

Abstracting Input Change Logic

sheenasany — Fri, 26 Aug 2022 00:08:00 +0000

Cut down on Boilerplate Forms!

As a budding programmer, we learn the easier routes of how to get things to work on React before stepping it up a notch and moving on to cleaner, drier, more concise code. Well, as a budding programmer you may be familiar with how to create a form using React by now, right? And I’m sure you’re well acquainted with how to set the state of each input value or how to create a function to capture all those input values in order to change the state, yes? And I’m sure you’re following best coding practices by keeping state and the function to handle that state in the same component. Or that you’re also setting the function to handle the onChange and Submit event outside of the JSX, correct? Or even that you're using controlled inputs on your form, right? Yes, I’m sure we’re all up to speed on that and that your code kinda looks like this then:

Starter Code

import React, { useState } from "react";

function Form() {

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [avatar, setAvatar] = useState("");
  const [mailingList, setMailingList] = useState(false);

  const handleUsername = (e) => {
    setUsername(e.target.value)
  } 

  const handlePassword = (e) => {
    setPassword(e.target.value)
  }

  const handleAvatar = (e) => {
    setAvatar(e.target.value)
  } 

  const handleMailingList = (e) => {
    setMailingList(e.target.checked)
  } 

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = {
     username,
     password,
     avatar,
     accountType,
     newsletter
  }
  console.log(formData);
  }



  return (
    <form onSubmit={handleSubmit}>
      <h1>Create an Account</h1>
      <label htmlFor="username">Username</label>
      <input
        type="text"
        id="username"
        value={username}
        onChange={handleUsername}
      />

      <label htmlFor="password">Password</label>
      <input
        type="password"
        id="password"
        value={password}
        onChange={handlePassword}
      />

      <label htmlFor="avatar">Avatar Image</label>
      <input
        type="text"
        id="avatar"
        value={avatar}
        onChange={handleAvatar}
      />
      <img src="https://i.pinimg.com/originals/0a/dd/87/0add874e1ea0676c4365b2dd7ddd32e3.jpg"
        alt="Avatar preview"
      />

      <label>
        Join our Mailing List!
        <input
          type="checkbox"
          id="mailingList"
          checked={mailingList}
          onChange={handleMailingList}
        />

      </label>
      <input type="submit" value="Sign Up" />
    </form>

  )
}

export default Form

Whew! What a beast... This is typical boiler plate, cut, copy, alt + click all those lines, and paste form essentially. But as a beginner, this is great to know! Get it down to the point where it's muscle memory. Then you're ready to move on to more dynamic forms that can adapt if you want to edit the form to capture more user data. Let's go into detail with this.

Set The State

First start with the all those little slices of state for each input field. We're going to take all those states and mold them into one by initializing the state into an object with keys that each have an initial slice of state to them. Let's call that new slice of state formData as it will be capturing all of our forms data. Like so:

As you can see, we're taking all of those slices of state from the orange box, putting them under one slice of state in the yellow box, and initializing it as an object with key values set to the empty strings and false state for the mailing list as we had before when they were all sitting pretty in their own states. It's already starting to look a little less cluttered, huh? Let's move on.

Next thing we need to do is look to our JSX where the values are set within each input. As you can see we previously set the value to the state we initially had, but now that we've condensed our state to formData, let us now plug in that state and use dot notation to set our state the the key value of username. We'll need to plug this in for all of our values.

I'd like to point out here that the value for a checkbox is checked instead of value so keep that in mind as we move forward.

Deconstruct the Handler Functions

Best practice dictates that we keep state and their function handlers wrapped in the same component so we are following that here. Next, let's hone our attention to the very same handler functions that we had for each of those slices of state set to capture the input values when the onChange event gets fired off every time a user submits a new value within that particular field. As you can see, they take up quite a bit of space as we're setting that state for EACH input field. Imagine if we had a much larger form taking in A LOT more information from the user. Our code would be a bit more exhaustive and repetitive. Let's fix that.

First thing we're going to do is create a new function that will handle all the onChange events for each input field. We'll call it handleChange. This next part gets a little tricky because our setter function, setFormData, expects an object so we need to call it with an object. Therefore, we need to use curly braces when we invoke the setter function. What we want to do is have that object contain all of the data from the formData variable so we'll be using the spread operator to copy all the original data from the formData variable, which, again, is all the data from the object. The second argument when using the spread operator is going to be the change that's occurring on that input field, the key of the input which is the targeted or updated change that's affecting the state. So here we're going to include e.target.value as the value in the key value pair.

This is already looking much nicer, but wait, this is only updating the username. What we need to do is update the other fields by finding a way to use the other keys in the object. We need a way to dynamically determine which part of the form we want to update. Luckily for us, the inputs actually have ids assigned to them that match exactly the name of the input fields we want to target, it matches the keys of our data object which is great for us! Maybe something to keep in mind when initially creating the form. It also does not necessarily mean you need to use id all the time, you can also use name if it has one or if you created one within each label. So here we go, let's use the ids for now.

Let's create a variable in the new handleChange function to specify each targeted field by id. This will target which key in state we want to update. If we want to use the variable key dynamically to determine which key in the form we're updating, we can write it by wrapping it in bracket notation and have the value of that key pair be the event grabbing the value on change. That will look like this:

However, there's one more thing that's not quite working anymore due to all our changes and it's the last field, our special checkbox. It needs particular logic in order to show true or false when checked or not instead of logging as just on. We can even test this using our Components extension in our DevTools by checking the true or false state we specified in our data object when we click the checkbox. But we still need to figure out some way of differentiating when we click on the check box that this kind of input is separate from all our other inputs. Let's add a new variable for that value so that every time the target event type is a checkbox, show checked, and if it's not a checkbox type, then return the other kinds of input values. This is where a ternary operator will come in handy to render this logic.

Beautiful. Now the fun part. Delete all those old handlers. Clean house, my friend! And now, update all the old onChange handlers and replace them with the ONE handleChange function we created. It will now be easier to add a new field if needed to our form by simply adding it to the data object and just including it in the JSX with the already created logic to render user changes.

Final Code

import React, { useState } from "react";

function Form() {

  const [formData, setFormData] = useState({
            username: "",
            password: "",
            avatar: "",
            mailingList: false
  })

    function handleChange(event) {
        const key = event.target.id
        const value = event.target.type === "checkbox" 
        ? event.target.checked : event.target.value

        setFormData({ 
          ...formData, 
          [key]: value
        })
      } 

  return (
    <form onSubmit={handleSubmit}>
      <h1>Create an Account</h1>
      <label htmlFor="username">Username</label>
      <input
        type="text"
        id="username"
        value={formData.username}
        onChange={handleChange}
      />

      <label htmlFor="password">Password</label>
      <input
        type="password"
        id="password"
        value={formData.password}
        onChange={handleChange}
      />

      <label htmlFor="avatar">Avatar Image</label>
      <input
        type="text"
        id="avatar"
        value={formData.avatar}
        onChange={handleChange}
      />
      <img src="https://i.pinimg.com/originals/0a/dd/87/0add874e1ea0676c4365b2dd7ddd32e3.jpg"
        alt="Avatar preview"
      />

      <label>
        Join our Mailing List!
        <input
          type="checkbox"
          id="mailingList"
          checked={formData.mailingList}
          onChange={handleChange}
        />

      </label>
      <input type="submit" value="Sign Up" />
    </form>

  )
}

export default Form

So succinct, no?

Bonus: Adding a Post Request

With every proper form, we would want to capture and store new user data somewhere, right? Well, we have our form ready to accept a POST request to it. We just need to add it to the handleForm function so that any new user input gets captured and added to our database. Here's a simple example:

const handleForm = (e) => {
    e.preventDefault()

      fetch("http://localhost:3000", {
        method: "POST",
        headers: {
          "Content-Type" : "application/json"
         },
        body: JSON.stringify(formData)
        })
         .then(res => res.json())
         .then(data => setNewFormData(data))

      setFormData({
            username: "",
             password: "",
            avatar: "",
            mailingList: false
      })
    } 
  }

The second promise will include the function that will handle the new state taking in the new data that we're adding to the database. That will be up to you to decide where you want that function to live and whether you'll need to pass it down as a prop to your form component, but for now, this is the boilerplate POST request you can add on to your form.

If you notice that the input fields aren't resetting once you submit new data, then look to reset the state back to initial object state that holds the empty strings and false value once the request has been completed.

Now go out there and make magic happen by trying it out yourself! ✨

Resources:
Visual Representation

Listen Up! To Clicks and Submit

sheenasany — Wed, 03 Aug 2022 01:55:00 +0000

Common Event Listeners in JavaScript

Are you in a coding bootcamp? Do you barely understand how an event listener works or even how to create one? I've got two that'll be incredibly useful for you when you're first starting off on your coding journey. But first, let's explain what these event listeners are in vanilla Javascript.

The Basics

Event listeners are used for when an event happens and you want something to be done, such as when a user clicks a button or they submit information within a form. Essentially when these events are triggered it allows for interesting changes that affect the outcome of the interaction. This, I find, to be one of the most exciting things to code. It's the every day clicks and that we use when resizing a window or scrolling down a webpage or having our mouse hover over an image, text, or link. The possibility of creating code that enhances user interaction is endless. In this particular case we will focus on Javascript DOM Event Listeners, specifically the click and submit events. These two listeners combined can create really dynamic pages on your first few days of coding and give an instant feeling of satisfaction when they actually work.

Click Event Syntax

When using a click event we first need to create or grab an element in order to add the event listener to it. Since this is a click event, you want to state the event within the parameters along with a function. Here's an example:

element.addEventListener('click', function ());

We can keep this function anonymous or we can have a callback function within the parameters so that you can create a separate function for that specific event listener and declare all the things you want to happen for that particular event. But for now, let's console log that click to see if you targeted the correct element!

element.addEventListener('click', () => {
    console.log('Hello New World!');
}

//=> 'Hello New World!'

You should see that when you click on that particular element, whether it be a button, an image, or an h1 title tag, "Hello New World" should appear in the console as many times as you've clicked that element. Cool, huh?

Another fun way to test a click event is by using alert instead of console log. This will create a pop up alert of whatever text you want to appear upon the click. This can be very handy if you just want to create an alert for any particular user interaction, but it can also put a little excitement when testing out your click events.

element.addEventListener('click', () => {
    alert("Well, hello world!"); 
}

Submit Event Syntax

Now, submit events are a little different. If the HTML is formatted well, you'll want to grab the whole form, and NOT the button that appears with the form. The submit event is listening for input submission within the form and not a click event. Here's an example of what that looks like:

element.addEventListener('submit', function())

Of course, console log, console log, console log! However, this console log will be a little different as, again, it won't be listening for a click event for a submit event. The 'e' here stands for event.

element.addEventListener('submit', (e) => {
    console.log(e.target.value ) 
}

Wait a second... nothing happened when I tried to submit something! Here's the thing, the page, on a submit, will refresh automatically so it basically wipes your input and you never get to see it after the first submit click. To prevent this from happening, we would include .preventDefault() on the event. Like so:

element.addEventListener('submit', (e) => {
    e.preventDefault() 
        console.log(e.target.value ) 
}

e.target.value basically means that on the event, target the value within the input submission box and console log that back to me. You should see whatever you entered in the input in your console log.

And there ya have it! Now go out there and play around with these fun event listeners!

Resources:

JavaScript DOM EventListener

Demystifying Fetch()

sheenasany — Tue, 12 Jul 2022 04:46:04 +0000

I have to admit, fetch was (and still is at times) the most difficult concept for me to wrap my head around. I've been reading countless articles, trusted and some not so trusted, watching tons of YouTube videos and speaking to many of my colleagues and instructors who have been attempting to help me demystify it in my brain. Why isn't my data parsing correctly? Why does my second promise come up with an error? Why does an error show when I use .forEach? Why is nothing showing on my webpage?! Why isn't this thing FETCHING?!

I understand your frustration. So I am going to attempt to break it down for those who are also having a difficult time grasping the most essential piece of code you need to understand in order to get anything working on your webpage.

A Little Background

The Fetch API can be used to get data from a local or remote file or a database from an API, or we can use it to push new data to a database in an API. It's similar to the XMLHttpRequest but fetch is most commonly used as a preferred method to access data because it's promise based, it works asynchronously to promise data and return the data when the page is fully loaded. There are a lot of other reasons why fetch is better than XMLHttpRequest, but you don't need to know that now. Let's just focus on the basic stuff.

I know this already seems like a bit much, but if you don't know about asynchronous JavaScript, I suggest you take some time to watch this video. It gives a great simplified explanation of what I mean when I say asynchronous JavaScript and touches on fetch as well. The more information, the better, right?

Syntax

The fetch command is usually one of the first lines of code you need in order to access your data so that you actually see and interact with that data on a webpage as a client or user. First things first though, you need the data. Where would one get data? Well, we're starting simple, so let's just say that we have data that's all ready to be used in whatever code editor you use. You can access that file locally as db.json(or whatever you want to call that JSON file). This would be the easiest way. That file could look something like this and should be in JSON syntax.

[
{
    "name": "John",
     "age": 22,
    "gender": "male",
},
{
    "name": "Susie",
    "age": "20",
     "gender": "female"
}
]

For more information on JSON take a look here for a simplified explanation with some examples. On to the next!

Now, you've got your file and you're ready to start accessing this data and plugging it in on the interweb. How would you do that? Well, with fetch! We're gonna tell JavaScript to go and "fetch" our stuff that we want to use. We'll do so with this:

fetch()

Within the parentheses, or the parameters, we would put in the file or the URL of the server where our data currently lives. In this case, we're just going to fetch the JSON file. Don't forget to include quotation marks, doesn't matter if they're double or single, as that file or URL needs to be a string. I know it's silly to mention, but it's those little mistakes that tend to have you pulling out your hair when you're trying to get your code to work so just keep it in the back of your mind.

fetch('dummy.json')

This is also called a GET request. You don't need any other configuration in order to make this a GET request. See? Simple! You can also use POST, PATCH, or DELETE with some configuration with this first line, but let's just focus on our GET request for now.

Well, we fetched our data, now what do we do? We're now going to request a response by chaining a method onto fetch called .then. You can also do this with async/await, but we're only focusing on the .then method.

With the .then() we're going to request a response from the server to parse our stream of data and send us something in return while we wait. We know that our data is JSON so let's use another simplified method (arrow function) to get that response and use the .json() method to return a promise for us. We have to return the data from the callback function in order to use the data in the next .then() method call.

fetch('dummy.json')`
.then(response => response.json())`

Don’t forget to console log to make sure your data is being captured with this:

.then(response => console.log(response))

Remember to add the .json() as just console logging it isn't really doing anything with the data yet. We still need it to be in object format so remove the console.log after you've confirmed it works.

Pizza Analogy

Okay, so now that we're politely telling JavaScript to give us a response it's going to take some time doing so, but luckily for us, it's asynchronous which means it will run all our other lines of codes first and then come in when it's ready with our data. Remember when I mentioned that fetch is actually "promised based"? Well let me explain that a little further here.

I heard an amazing analogy from a video I watched during my course that I hope provides a better understanding of how fetch works. Imagine that you're ordering pizza from your favorite pizza place. You order from your phone, and that order (fetch request) gets sent to the pizza company (the server) who then send you a receipt (the response/promise) of when your order will arrive. But it takes some time for that pizza to get to you as it needs to be driven and delivered to you. You don't sit there and watch the clock, you're more than likely watching tv and doing other things while you wait for your pizza (asynchronous JS). When your pizza arrives it comes in a box (.json) that then needs to be opened in order for you to eat it.

The Final Act

Alright, this next part gets a little tricky. So the data is being fetched and we're requesting promises for the data to be sent back to us when the data is ready. But we want to do something with that data once it's been translated for us. That's where the second promise comes in, another .then(). This .then is the one that does all the heavy lifting. But first! Console log it! Like so:

.then(data => console.log(data))

From here you can then customize how you want the data to be retrieved and how it sums up on the page, whether you're iterating over an array of data from your JSON file, or from an external API, creating new elements to append images to, or creating event listeners to enhance user interaction on your app or webpage. Hopefully, this understanding will help you get started.

Resources:
Using Fetch API
JSON
GET Requests
Working With Data & APIs in JavaScript