DEV Community: Valencia White

HTML, CSS, JavaScript, and Ruby, Oh My! What Comes After Bootcamp?

Valencia White — Wed, 01 Jun 2022 15:00:18 +0000

My Flatiron graduation approaches rapidly and my anticipation is building steadily! Over the course of half a year, I have some takeaways from the entire experience I would like to share with others who have completed a coding bootcamp and those who are considering joining one.

What I Took Away From Learning Full-Stack Development

Having the opportunity to learn both front-end and back-end development was truly amazing! Knowing I come equip with the abilities to render out any idea that pops into my head, is a wonderful feeling and seeing how the more I code, I can scientifically only get better, I'm even more excited for my future!

I definitely know for now, I want to work on Front-end as my time with JavaScript and React was very satisfying in comparison to my time in back-end. I do like the fact you can experience your creation immediately as a front-end developer, and as an ex-graphic designer, that area just feels closer to home, as design and creativity can be implemented more so than rendering out a back-end to an application. I simply say that as back-end is very a-to-b in terms of how everything should be working. No bells and whistles there. But who's to say down the road, I won't end up taking a journey down back-end development.

I do know I will need to brush up on a few lessons after graduation, but that's to be expected. Even though I'm focusing on front-end, honing in on my back-end designing capabilities is a skill I would rather not loose all the way, as the information is still rather fresh in my head. Cue the bi-weekly full-stack side projects!

They Say Your Dream Life Is Made by Design

With my mornings freeing up, this gives me an amazing opportunity at re-ordering and re-designing my 'life-admin' duties that fell way-side as I got absorbed in the engrossing program that is Software Engineering. My program was 15-weeks + and extra 4 weeks for me as I ended up repeating a phase. JavaScript, you are tricky at times, but you changed my life so, thank you. From morning to night reading and watching every lecture on the front-end all the way to the back-end.

Nearly 10 whole hours back to myself for 5 days a week, this seems like a blessing from above. I can focus on building projects I'm interested in without the guilt of feeling like I'm behind in my actually classwork, and this is what I'm most pumped for. My instructor warned our cohort about students who graduate and stop coding for a while as a way to rest and recover from the grueling nature that is a coding bootcamp, and they almost always end up regretting taking that long of a break without coding as the skills seem to almost leave your memory.

With that being said I will still be coding daily, while studying more theory based knowledge in order to prep for technical interviews, while re-nurturing my love of graphic design! So don't worry about me, I will be very very busy entertaining myself with all my wildest design fantasies.

Some critical questions you're going to need to ask yourself before attending a bootcamp includes questions like, "What matters to you right now?", and "What can wait?" Because sacrifice will have to be made somewhere down the line in order to truly propel and see growth. You need to focus and having too many prospects on your plate can have you putting in a ton of effort with little returns on investment. Imagine spreading a gallon of water(yourself) over a span of ten cups (opportunities). Yes, you'll be quite diversified, but at what cost? In some instances depth in a field trumps breadth over many.

Outlooks + Prospects

I haven't dived too deeply in the job searching realm of business, I've been waiting until all loose ends are completely sealed with my program as the days wind down before graduation. I will be meeting with my career coach after graduation and I'm excited to see what opportunities lay before me.

After some research and careful thought, I do know I want to incorporate an old skill back into my current toolbox and that's - graphic design. So positions like UI Developer and UI Designer have been appealing to me. As they seem to scratch the logic of programming, while taking advantage of my eye for design. Also all things that fall under 'creative technologist', I just found out about this term not too long ago but the general description of all it entails pretty much sums up the life I want to be involved in.

From BetterTeam - "Creative technologists are primarily technology-focused individuals who develop information technology solutions for digital innovation projects. They collaborate with production and marketing departments, design software prototypes, and enhance digital user-experiences."

There's an entire new world opened up to me and now I have the luxury of experiencing it for myself full force! I wake up excited to create and design, and seriously learning to code has added a depth to my creative endeavors in a way I did not see coming. I joined a bootcamp because I was looking for a change in life, and by far this is the best chance I've took on any anything!

But now that I have these wonderful moments to look forward to, it's crucial I mention, that the journey to this position was not a cake walk by any means for me.

Introspection

Juggling everything all at once got very tricky at certain points also factoring in natural emotional fluctuations. Missing family and friend's events for so long leaves connections a tad severed and strained, if you are introverted in nature with a low social battery.

That's a key takeaway for you: Know Thyself

Seriously if you're thinking of enrolling in a coding bootcamp full-time, factor in the shifts to your social life, factor in the shifts to your diverted attention from your other hobbies, and especially scouting the source of income you will be receiving while enrolled, because working a regular full-time while attending bootcamp full-time is next to impossible. Not saying it can't be done, but you will feel like you're operating off of fumes, and the goal is to cross the finish line in stride, not barely scathing by.

In my case juggling between the coding program, my weekend job, and my social life every week, one of them would have to suffer in some way. I've paid great money to attend Flatiron, so I couldn't just waste it away, so I intended on showing up in that regard. I still have financial obligations I'm tethered to, so not giving my job attention is almost impossible as well... hopefully you see the image I'm trying to paint here. In my life during this time, the social aspect to my life was heavily neglected, so now a nice portion of my time will be spent re-nurturing those connections.

It was hard for me to be involved with others, while duties in my own life seemed so desperately urgent and I seemed to struggle with managing my own anxious thoughts and self-sabotaging nature.

There is only so much of you to go around, and only you have a say of where your energy goes!

Final Regards...

I have widening curiosities about the combination of technology and design and the wonders the two can produce. I know I will be entering the tech world as a Front-End Developer, but where that path leads, I'm excited to explore.

Thank you Flatiron for the experience, I'm proud of the work I get to provide into the ethers and the craft that a user gets to experience! I will keep on developing and building projects out, stretching my knowledge and visions in this field.

Working With React Props The Right Way

Valencia White — Wed, 01 Jun 2022 04:07:00 +0000

If you are new to React and you are working with 'components' for the first time, I don't know if it was just me but it took me a while to understand the movement flow of 'props' and looking back it could of been a lot simpler, if I understood these starting points first.

What are Props in React?

Props in React are used to pass data from one parent component to it's children component(s) and vice versa. Props allow data to be dynamic within your application as they travel to new components. And to reiterate, components can be summed to files of encapsulated logic, that has the ability of being reusable.

In my code I'm accessing the data I've fetched from an API I created and with the array of data objects returned, I'll be using JavaScript's .map() function to render each card out individually.

I have the component placed with the parentheses of the return function and I use dot notation to access individual data about each data point I'm looking for.

const cardRender = tarots.map((tarot) => {
        return (
            <TarotCard
                key={tarot.id}
                card_name={tarot.card_name}
                image={tarot.image}
                description={tarot.description} />
        )
      })

I started off with passing the data from the parent of TarotCard, which was Home and now it's time for me to work in the TarotCard component itself and restructure the data I'm passing down.

I want to highlight a tidbit of keeping your naming conventions relatively consistent. To the left of the equal sign you are free to name this value anything of your pleasing, but keep in mind this is how you will have to intake your data from the component you are sending it to.

What is Destructuring?

"To destructure means to dismantle the structure of something. In JavaScript, this structure could be an array, an object, or even a string where the properties that make up the structure would be used to create a new identical structure (the properties can be altered)."

In the function TarotCard, as an argument, I am passing into it all the data we placed in the TarotCard component from the Parent directory {card_name, image, description}.

The magic of this all, is that TarotCard has no direct access to the API I am using, but because we passed down data from the parent directory, now we can access the data from here and keep the information on the tarot cards dynamic, based off of changes in the database.

return (
        <div className="main-container">
          <div className="minor-container">
            <div className="tarot-list" >
              <div className="card">
                <img className="card-img-top" src={image} 
                alt={card_name}></img>
                <h5 className="card-title">{card_name}</h5>
                <ReadMore >
                  {description}
                </ReadMore>
             </div>
          </div>
        </div>
    </div>
   )

To create my tarot cards I have "main-container" that is the black border around my cards, the 'minor-container' that is the victorian print overlay and finally a div that is the card container that will be the parent of the details of the card.

To use props with an image tag, I give it a class name that makes targeting easier down the road, and then as the source I pass the data object "image". So now the source will populate with whatever combination of strings sent through my seeded data. I also provide an alt name for accessibility reasons, and for this, just pass down the card_name object.

I essentially do this to the rest of the inputs I need dynamic data for and in my case the description data is wrapped in tags that enforce text character limiting upon initial render.

If all the data is fetched correctly, passed down correctly, and accepted properly your DOM should render the data you set out to retrieve! Like so...

Resources

JavaScript ES6

Should You Accept Cookies From Strangers?

Valencia White — Fri, 06 May 2022 20:31:37 +0000

As an avid computer user and now programmer, it recently dawned on me, how desensitized I was to receiving cookie pop-ups, you know the one, asking you to allow or deny website's access to store cookies on your device.

I always hit 'allow' as fast as I can just to get the pop-up out of the way and continue browsing the site I was on.

But I had to ask myself, "Do I even know what I'm agreeing to?".

I didn't. I vaguely understood it was to make my user experience better, somehow. But after clicking that 'allow' button, what was to follow was unbeknownst to me.

What Exactly Are Cookies?

Invented by programmer Lou Montoulli, browser cookies (a.k.a internet/web/HTTP cookies) are text files that help track your user session, and identify who you are as a visitor, and what you may like to see render on your webpage. Browser cookies are browser independent, so the browser cookies that are stored on your device on e.g., Google will not be available in e.g., Firefox.

Yes, that sounds kinda creepy, but browser cookies can be very helpful.

How Are They Helpful?

Imagine if every time you online shopped and navigated to different parts of the website, everything you managed to save to your cart, gets removed. That would be frustrating for you, the customer, and that would be an expensive liability to the business.

That's where cookies come in.

With the numerous amount of websites the average person has to sift through in one day alone, imagine having to remember the username and password for every single site you engage with and then having to re-enter that information every time you go to that site after closing it out.

That's where cookies come in.

In the modern age of technology, escaping the viewing of ads is near impossible as that's how most free websites make their income, so rather than being bombarded with ads that would be considered undesirable by a user, the personalization of ads that align with what the user likes, helps make the experience more bearable to endure.

That's where cookies come in.

As you can see, browser cookies intend to streamline your web browsing experience, nothing too creepy going on here. The data that cookies store cannot be changed. Also, the amount of data cookies can hold, reach a merely 4kB. Compared to local Storage and sessionStorage, storing 5MB.

So, How Exactly Does It All Work?

I'm glad you asked! Remember those text files, that essentially makeup what a cookie is? Those files are given to a user's browser of choice by a web server. And since web servers aren't intended to hold memory, the cookie that is created from a user's activity and input from a site is compiled into a file called a 'session id' that can be accessed and stored through a user's browser.

Subsequently, when a user visit the same website the browser will send that file to the web server. The web server will check for the session id and in return send data back to the browser. In order to present user's with their choice of web page personalization and in some cases an already logged in account.

Types of Cookies

1. Session Cookies
Session cookies do not store data in your device, nor do they remain once your browser is closed.

2. Persistent Cookies
Unlike session browser cookies, persistent cookies are stored on your device until you delete them or they expire.

3. First-Party Cookies
Are browser cookies that are sourced from the original website a user visits.

4. Third-Party Cookies
These are the cookies that are stored in a user's device from advertisements, search engines, and social media sites frequented by the user.

That's How The Cookie Crumbles

So now the next time you accept a website's cookies, I hope after reading through this article, you'll feel more confident as a developer knowing what you're doing on the internet and learning how bits and pieces of the web works as a whole.

Using Canvas API in JavaScript

Valencia White — Mon, 11 Apr 2022 06:33:20 +0000

What is Canvas API

From MDN

The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the element, draws hardware-accelerated 2D and 3D graphics.

How to start using Canvas API

Place your script tag in between the HTML <body> tags to begin using Canvas.

<canvas id="canvas" width="600" height="600"></canvas>

As a convention, the name of the id typically goes by 'canvas'. This of course can be any name of your choosing, just pick a name that optimizes your code flow and makes sense to you.

Once you have the initial skeleton set-up, two attributes are required when setting up your canvas space. A desired 'width' and 'height' of the canvas needs to be set. Also note these attributes can be altered well into the design process if necessary.

let canvas = document.querySelector("#canvas");
const width = canvas.width;
const height = canvas.height;

canvas.width = 400;
canvas.height = 400;

Getting Creative

Thought these examples, I will be coding in the HTML's body tag, nested between script tags. You're free to code along with me in the same environment, or move your code into a separate JavaScript file.

Setting Up the Basics

Once we've laid out the skeleton-frame of our HTML code, it's time to implement code that brings our creative desires to life!

 let canvas = document.querySelector("#canvas");
 let context = canvas.getContext('2d');

Place a 'Document' method in the Script portion of the code and pass the id of the canvas space we've created earlier to begin customizing our graphic. We'll target the id by first typing the symbol of the corresponding attribute.

Quick refresher
# = id . = class.

The code below tells JavaScript the context of the drawing surface we are creating is 2D as opposed to 3D. And this can be used for creating shapes, text, and images.

let context = canvas.getContext('2d');

First Shape

I'll begin by creating a rectangle that is outlined in a 4 pixel stroke with the 'strokeRect()' method. The color attribute can be altered by calling the variable chained to 'strokeStyle()', then entering a hex color code or by the name of a color identified by JavaScript. In today's example, I'll use 'green'. The parameters passed to the 'strokeRect()' simply refer to its top-left corner at (100, 100), and gives it a size of 400 units wide (first 400) by 400 tall (second 400).

 context.lineWidth = 4;
 context.strokeStyle = 'green';
 context.beginPath();
 context.strokeRect(100, 100, 400, 400); 
 context.stroke();

Outcome

Nested Shapes

context.beginPath();
        context.arc(300, 300, 100, 0, Math.PI*2);
        context.lineWidth = 3;
        context.stroke();

Outcome

Play Around With Your Code

Add in new shapes, rearrange the size of shapes, etc. just get creative and explore all that you can do with a few tweaks, or major ones! In our example, I created two side circles for the larger main circle that all together posses a Venn diagram positioning amongst each other.

context.beginPath();
        context.arc(400, 300, 50, 0, Math.PI*2);
        context.lineWidth = 2.5;
        context.stroke();

        context.beginPath();
        context.arc(200, 300, 50, 0, Math.PI*2);
        context.lineWidth = 2.5;
        context.stroke();

Outcome

Resources

MDN Official Canvas API Documentation

5 Soft-Skills You Will Need To Thrive As A Web Developer

Valencia White — Sat, 02 Apr 2022 01:13:30 +0000

Patience... and lots of it!

In the world of technology and development, it’s normal for this side of the world to introduce new technologies in software almost daily. As a developer, you’re expected to keep up just as fast as it's being created in order to keep up with trends in the market. But not only are you expected to be aware of the new technology that comes out, but you’re also expected to widen your breadth of knowledge in the technology you’re currently niched in.

It can be a lot and quite frankly, it is a lot.

With the sheer amount of knowledge so readily available for your consumption, it’s critical to be patient with yourself when it comes down to learning new information. It’s easy to get wrapped up in the idea of you should be understanding something quicker than what you are. Especially when it seems your peers are outpacing you on that same topics. Trust me, don’t fall for the mirage in the desert.

You’re not alone in the feeling.

+ Actionable steps you can take: I encourage you to make a flexible game plan every few months, simply checking in with yourself on the technologies and tools you desired learning and exploring. And while you’re learning new technologies, build, build, build, and build some more. Break code, debug code, and contribute to open-source code in that technology stack - just get your hands dirty!

Flexible Communication & Negotiation

Maybe it was just me, but as an introvert I thought the world of development would be an “every man for himself” type of environment. That couldn’t be further from the truth from my experience, I have seen this can be a highly connected, community oriented environment and if you’re not prepared to tweak your tune for the crowd you're communicating to, you will unfortunately suffer in the social aspect that makes up the work-force of thriving companies.

+ Actionable steps you can take: You could create the greatest presentation on a project assigned to you to solve, but with the way human nature plays out, what good is it if you didn’t attune the message to a frequency that aligned with the crowd. Be prepared to work with many people from all walks of life, so knowing how to be flexible enough to adjust your approach in a given situation is bound to give you an upper-hand in social settings.

Child-like Curiosity & Imagination

With the wide range of options to explore in the tech world, it’s essential to carry within you a childlike curiosity about all that you encounter, as it makes the journey that much more rewarding.

Getting lost for hours in a code base, just trying out different logic paths and cropping curiosities is bound to lead you to new discoveries across the web as you dive deeper.

This is what we want! To not have an end goal in mind and just letting your coding fingers auto-pilot the rest of the experience.

As you let a natural flow of discovering exist in this process, new information is easily absorbed as the excitement of learning something that inspires you, lead you down a rabbit hole of positive challenges that keeps you hooked and evolving.

Ability to Accept Multiple Truths

One of my favorite aspects of coding, is that there is so many ways to reach the same destination! Granted there is a convergent nature that looms over developers, as there really isn't too many variations from the script of code that is the most efficient in production-level programming, sought out by established tech companies.

Despite that, on smaller projects, it’s incredibly freeing and exciting as you could recode the same project over and over just to test different syntax out, and still arrive to the same conclusion.

Since being in a coding boot camp, I’ve soon realized that not all people inherently enjoy that amount of laxity, as it makes learning concepts a bit more difficult if you’re learning material from one source and it is taught a certain way and then switch to a different resource and they go about the same concept in a varying way.

+ Actionable steps you can take: I agree, that part of the learning process can be frustrating to what feels like gravel through new concepts from different sources and utilizing it in your code, but that’s where point 3 comes in! It’s going to take some Frankenstein level of stitching of elements to get things to work right for what you need them for, but hey- that’s what coding is about... getting your brain churning and your fingers gliding!

Knowing When to Move On

Sometimes, the code is just broken to a point where it’s okay to call it quits.

Yes, tenacity is golden, but keeping your sanity is priceless.

After you’ve given a task at hand plenty of effort and time, it’s okay to bury it and move on. And whose to say after moving on and learning new concepts, the solution comes to you at a later time-period. The good thing about code, for the most part if you’re keeping up with your storage - it’ll always be there for you! So no need to feel like you need to solve every issue the moment it arises.

And maybe before calling it quits, it never hurts to bring in some outside eyes to help guide you along if possible, but again if that method renders futile, it's a-okay to save it for a later date.

+ Shifting perspective a little bit: Theoretically speaking, as time goes on and you continue coding properly and progressively, you can only get better. Think of the code that’s broken today as a problem you are gifting future you to solve once you have the understanding and knowledge to tackle such a task.

It’s like you’re your own Yoda :p

Resources

Photos from Unsplash

Making Fetch Happen in Vanilla JavaScript

Valencia White — Fri, 18 Mar 2022 21:16:16 +0000

Starting on your Javascript journey, you're probably used to working with data you've created yourself. With time and consistent practice, you'll get to a point where you're ready to utilize a larger database from a third-party server, and if I guessed right, it's safe to say that time is now... since you're here.

No fears, my coding babies! By the end of this blog post, you'll be ready to make fetch happen!

What is Fetch?

A fetch() request allows a developer to access data (or wink wink, fetch) data by sending asynchronous HTTP request to a server from a web browser and returning a promise in the form of a response, once the data is received.

Lets Send Your First `Fetch()` Request to an API in JavaScript

Firstly, let us invoke the fetch() function with the URL of the desired API. And if you prefer cleaner code, initialize a variable with the API URL and pass the variable as an argument to the fetch function.

For this example, I'll be using a fake API, but you're free to use any API that meets your needs.

const baseURL = "https://jsonplaceholder.typicode.com/posts";

fetch(baseURL)

Since the fetch() method returns a promise, we can use the .then() to handle the response.

fetch(baseURL)
.then(response => ?)

With the first promise, we need to add a .json() method to return the resolved promise's information as JSON.
The result is NOT inherently JSON, but rather JSON that has been taken in to produce a JavaScript object.

fetch(baseURL)
.then(response => response.json())

Do not forget to add your parenthesis after .json()! Like functions, if the parenthesis are omitted, there's no way the method could be invoked.

Now, it's time for our second .then() method. Here, I'm logging the data we just received from our API in the console. The data I'm logging is the data we will be using for a deliverable we would need to meet, if there was one.

fetch(baseURL)
.then(response => response.json())
.then(data => console.log(data))

The names we given to "response" and "data" are also not set in stone.

fetch(baseURL)
.then(res => res.json())
.then(bakeryData => console.log(bakeryData))

A naming format like this one is just as valid as our original example. Just be sure to make the variable names match!
For readability sake, if you are going to name it something other than "data", I encourage a name that hints to what the data is in reference to.

What's Rendered in the Console

Here we have an array of objects, ready to be iterated over and rendered onto our DOM like so!

Final Thoughts

Hopefully, you can take away the knowledge I've learned and apply it to your project. If there's a step you're struggling over, take a second to re-read the code or look down below at the resources I provided, to supplement and fill in the gaps of your understanding.

Terminology You Should Know

-Asynchronous - allows another task to run before the previous one finishes.

-AJAX - stands for Asynchronous JavaScript And XML. AJAX allows asynchronous server interaction while the user is browsing the page.

-GET Requests — used for retrieving or “fetching” data from an API.

-POST Requests — used for uploading or adding data.

-PATCH/PUT Requests — used for editing data that is already in the database.

-DELETE Requests — used for deleting a piece of data.

Resources

MDN Fetch Documentation
MDN Promise Documentation
Free Fake API

The Subtle Differences between 'innerText' and 'textContent' You Should Know

Valencia White — Thu, 17 Feb 2022 08:22:57 +0000

While both properties on the surface seem to perform the same task within lines of code - render the text from an element or tag. Understanding the similarities and differences between the two will allow you to choose the property optimal for your next JavaScript project.

Element.innerText

Where 'element.innerText' triumphs above the other property, is the fact innerText takes into account CSS styling. Opting for rendering what humans prefer to read. Text will be rendered in plain text. Keeping styling in mind, 'element.innerText' trims all white space in its renderings, unlike 'node.textContent'.

To better demonstrate what '.innerText' does, below there's a sample of HTML.

   <div id='property-test'>
            Flatagram     is the <strong>best</strong> app ever! Wouldn't <em>you</em> agree?
        </div>

Once opened in browser, the code renders a sentence of "Flatagram is the best app ever! Wouldn't you agree?" with strong/bold tags wrapped around "best" and em/italic tags wrapped around "you".

const renderText = document.getElementById('property-test');

I assigned the div to a new variable. Let's call .innerText on our new variable 'renderText'.

renderText.innerText
// =>   Flatagram is the best app ever! Wouldn't you agree?

Once called, what's rendered is plain text. No inclusion of HTML tags like '.innerHTML' and no inclusion of the spacing like '.textContent'.

Node.textContent

Node.textContent triumphs 'element.innerText' in the event, all elements in the node need to be rendered.

<div id="market-options">
            <div>mangos, coconuts, and pears</div>
            <div style="visibility:hidden">all go great in a smoothie bowl.</div>
        </div>

In the code above although we have a element set to be hidden, using '.textContent' will override the assigned setting and display as logged.

mangos, coconuts, and pearsall go great in a smoothie bowl.

Conclusion

After reading through this post, I hope you've learned something new about .innerText and .textContent properties. And because I know one source is never enough to encapsulate the depth of knowledge that programming entails, I highly encourage you to check out the extra resources I've provided to show you more examples of the nuances of these properties and how they affect your code.

Resources

More information on .innerText Property | link
Comparison of the properties | link
MDN .textContent | link

DEV Community: Valencia White

HTML, CSS, JavaScript, and Ruby, Oh My! What Comes After Bootcamp?

What I Took Away From Learning Full-Stack Development

They Say Your Dream Life Is Made by Design

Outlooks + Prospects

Introspection

Final Regards...

Working With React Props The Right Way

What are Props in React?

What is Destructuring?

Resources

Should You Accept Cookies From Strangers?

What Exactly Are Cookies?

How Are They Helpful?

So, How Exactly Does It All Work?

Types of Cookies

That's How The Cookie Crumbles

Using Canvas API in JavaScript

What is Canvas API

How to start using Canvas API

Getting Creative

Setting Up the Basics

First Shape

Outcome

Nested Shapes

Outcome

Play Around With Your Code

Outcome

Resources

5 Soft-Skills You Will Need To Thrive As A Web Developer

Patience... and lots of it!

Flexible Communication & Negotiation

Child-like Curiosity & Imagination

Ability to Accept Multiple Truths

Knowing When to Move On

Resources

Making Fetch Happen in Vanilla JavaScript

What is Fetch?

Lets Send Your First Fetch() Request to an API in JavaScript

What's Rendered in the Console

Final Thoughts

Terminology You Should Know

Resources

The Subtle Differences between 'innerText' and 'textContent' You Should Know

Element.innerText

Node.textContent

Conclusion

Lets Send Your First `Fetch()` Request to an API in JavaScript