DEV Community: 이아 | Nessa Okeke

How do backend developers showcase their work?

이아 | Nessa Okeke — Mon, 01 Feb 2021 10:40:51 +0000

As backend developers, how do you showcase your work. I think that has been something I have struggled with. I am not quite sure how to showcase most of my work because it is all server side. I am open to suggestions really...leave one in the comment below.

🤔

Promises in Javascript Explained + Examples

이아 | Nessa Okeke — Mon, 01 Feb 2021 10:29:06 +0000

Prerequisites

Before you begin this tutorial you'll need the following:

IDE (VS Code is used in this tutorial)
Basic understanding of Javascript ES6
Nodejs installed, you can get the latest version here.

Introduction

Working with data from other resources has brought the need to deal with asynchronous operations, that is, operations that do not run in sequence. In this post, I explain, in simple terms one of the ways of handling asynchronous operations in Javascript, Promises. By the end of this post, you would understand Javascript Promises in code and simple English.

What are Javascript Promises?

According to the official documentation:

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

SYNTAX:

new Promise((resolve, reject)=>{})

In simpler terms, a Promise is an object that will return a particular value depending on the state of the Promise. A Promise can have one of three states

fulfilled
rejected
pending

Promise `fulfilled`

A promise has a state of fulfilledwhen it is resolved, meaning, nothing went wrong in the Promise and there are no errors. The code snippet below will return a state of fulfilled, because the Promise was resolved:

new Promise((resolve, reject)=>{
    resolve(console.log("Hello"))
})

RESULT:
"Hello"
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

Promise `rejected`

A promise has a state of rejected when an error occurs. In this case, the Promise was rejected. The code snippet below will return a state of rejected because the Promise was rejected:

new Promise((resolve, reject)=>{
    reject(console.log("Oh no, an error"))
})

RESULT:
"Oh no, an error"
[[PromiseState]]: "rejected"
[[PromiseResult]]: undefined

Promise `pending`

A promise has a state of pending when the Promise itself is neither resolved or rejected. The code snippet below will return a status of pending because the Promise is neither resolved nor rejected:

new Promise((resolve, reject)=>{})

RESULT:
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined

Working with Promises

When working with Promises, you might encounter some methods and functions like the ones below

The then method: This method takes the returned values from a resolved Promise and performs some action on them. The then method is usually chained to the Promise. See an example below:

function getDataFromDatabase(){
    return new Promise((resolve, reject)=>{
        // promise resolves with no errors
    })
}

getDataFromDatabase().then((data)=>{
    // data is the returned value from the getFromDatabase function
    console.log(data)
})

When working with the then keyword, it would be helpful to think of it in plain English like this:

First of all, get data from the database with the getDataFromDatabase() function, and then console.log all the data gotten from the database

The trycatch handler: The trycatch handler is very commonly used in working with Promises. Since there is a possibility of your Promise having a rejected status, it would be helpful to add a way to catch that error, which is exactly how the trycatch handler works. See an example below:

function getDataFromDatabase(){
    return new Promise((resolve, reject)=>{
       try {
           // if Promise resolves, return data from the resolve method
           resolve()
       } catch (error) {
           // if the promise rejects, return error data from the reject method
           reject(console.log(error.message))
       }
    })
}

getDataFromDatabase().then((data)=>{
    // data is the returned value from the getFromDatabase function
    console.log(data)
})

When working with the trycatch handler, it would be helpful to imagine it in plain English like this

In getting data from the database with the getDataFromDatabase() function, try this code inside this block first, if I successfully get the data, return data from the resolve() function. If I run into some error, return data from the reject function. Then run the function inside the THEN method

Code Example

In this example, we are going to try and simulate making an API call to an external endpoint. The idea is to mimic the delay in getting the data when making an API call. Here are the steps we will want to take into account:

Create a data store
Create a function to get the data (imagine the fetch function in Javascript)
Add new data to the data store when we finally get it
Log the results to the console

STEP 1: Create a data store

In this example, we will use a simple array to store items, we are mimicing the database here.

let names = ['Kim Seon Ho', 'Park Seo Joon', 'Park Shin Hye', 'Shin Hye Sun']

STEP 2: Create a function to get the data

Here, we will mimic the delay when getting data from a database with the setTimeout() function. This is where we will use a Promise since we want it to run as an asynchronous function in our theoretical project.

function getData(dataItems) {
    return new Promise((resolve, reject) => {
        try {
            setTimeout(() => {
                resolve(dataItems)
            }, 3000);
        }
        catch (error) {
            reject(console.log(error))
        }
    })
}

**WHAT IS HAPPENING: **In this snippet of code, we are making sure the getData() function returns a Promise, so we can use the chaining method that Promises provide to change/edit the data when we get it back from the data store.

STEP 3: Transform the data when we get it

getData(names).then(data=>{
    let newName = 'Han Yoo Joo'
    data.push(newName)
    return data
}).then(finalData=>{
    console.log(finalData)
})

*WHAT IS HAPPENING: * Here, we are getting data using the getData() function. The getData() function returns information which we store inside the data parameter of the then method.
Remember, the then method takes returned data from the resolved method in a Promise and is able to perform tasks on it. It is this data that we then push a new name into using the Array.push() method.

STEP 4: Log the results to the console

The last then method is unnecessary because we can add the console.log() method to the first then method, however, I added it to show you how much chaining you can use when working with Promises in Javascript. In the last thenmethod, we take data returned from the first then method and log it to the console.

RESULTS

[
  'Kim Seon Ho',
  'Park Seo Joon',
  'Park Shin Hye',
  'Shin Hye Sun',
  'Han Yoo Joo'
]

Conclusion

Javascript Promises are a good way of performing asynchronous functions in your code. It is a way better option than facing every Javascript programmers nightmare, callback hell.
You can find the full code examples in this Github repository: code examples

Thanks for reading, see you.

Ciao!

Vanessa O.

❤ If you found this post useful, remember to share and help me grow my community. ❤

PS: If you're looking to start on your tech career this year, you can download this checklist of 14 careers in tech and see the programming language you should learn first.

Hello World, My coding journey from Interior Design to Backend Engineer.

이아 | Nessa Okeke — Sun, 31 Jan 2021 19:36:28 +0000

This seems to be the trend, make the first post a 'hello' of sorts, so, hello there.

My name is Vanessa O, and this is my Dev.to blog. I feel the need to tell a story so grab a cup of coffee/water/your favorite poison.

This is the story of my transition to a fully tech career.

It all started in 2007 when I read a book by Jefferey Deaver, The Blue Nowhere. Now, the book in itself was a fairly common story, one bad guy and one good guy, at least it was supposed to be a fairly normal story...that is, until I got to chapter 2.

I was introduced to the 'good guy', a computer hacker who built computers with anything from a spoon and a few batteries, he was bad but still less evil than the main bad guy.
The chapter numbers were in binary code and that was the first thing I noticed, so as a young kid, starry eyed and curious about everything, I went on a research on binary code and what it meant in computers, I. Was. Hooked from then on.

My First Time

The first thing I tried my hand on was HTML(Hypertext Markup Language), I built a very 2007 looking website with my basic knowledge of HTML, it was basically a page listing the different types of fish (I found it recently and Oh. My. Goodness). It was basic but that was the first time I got a thrill out of building something from nothing. I felt like I was well on my way to being the hacker from The Blue Nowhere.

Next came CSS(Cascading Style Sheets), now this was fairly easy to grasp, even then. I simply made some notes and thought "Sure, I'll just try to memorize all the color and font related tags" HA! (PS: This is 2020 me laughing at 2007 me).

Back to me and coding. So the next monster I had to slay was
JAVASCRIPT...DUM! DUM! DUM!

I am laughing writing this because I remember the almost impossible frustration I felt then, I had the idea that if I could just get past Javascript, I could become the hacker of my own dreams. Long story short, I gave up on my dream to become a social engineering sleek hacker when I hit the roadblock that was Javascript.

Architecture Calls

I should say here, I graduated with a Bachelors degree in Architecture from Obafemi Awolowo University. It was a ride and a half, filled with a lot of late nights, drawing and researching, and no-code. I was so focused on schoolwork, so I had no time to get back in the coding game, however, I did meet some interesting people who kept me close to the Code.

Graduation and more Javascript?

After school, I had a fun time working as an Interior Designer, but I was curious about the programmer part of me that was lying dormant like a lion in a den, waiting and watching for the right time to spring out. 2017 was the year of The Spring.
Cut to 2017, I made a list of all the skills I needed to build, and HTML popped up again, it took me a while but I added Javascript to the list, and then I got to learning. I breezed through HTML and CSS to conquer the beast that is Javascript, at least I thought it was a beast. Now however, I know it is a fire breathing hydra monster with 10 eyes.

Cheers to the freakin' 2020's

I'll cut the story here and bring you to 2020, 3 years and 1 internship, 4 programming languages and a lot of code review later, I have made the decision to go fully into tech. It was not an easy decision to make, I DID love building and designing houses, but I found that my curiosity is much more heightened when I have a coding problem before me.

Am I scared? Yes...Will I give up? It took me a long time to get to this point, so no, I am in it for the long haul. I will make Javascript my lover and probably drag many of you on my journey to building a community of Javascript lovers.

So, like I said, hello world and welcome to my Dev.to Blog.

PS: If you're looking to start on your tech career this year, you can download this checklist of 14 careers in tech and the programming language you should learn first.

10+ HTML5 Semantic tags with examples.

이아 | Nessa Okeke — Sun, 31 Jan 2021 19:24:24 +0000

Prerequisite(s)

Basic knowledge of HTML (Hypertext Markup Language), you can get an overview here.

So, if you got started with HTML(Hypertext Markup Language) 10 years ago, you are most likely used to the non-semantic way of writing HTML.

Semantic HTML simply means the markup code is easy to make sense of while you read through. This style of writing uses more descriptive tags like <section></section>, <article></article> and others, to show the different parts of your website structure in code.

HTML before the 5

Before HTML5 came along, HTML documents were a mashup of div and span tags:

<div> </div>: These tags are used to show block level elements ie, each element inside a div tag represents a block of code that can stand alone.

<div>
    <h4>I am the heading for this section</h4>
    <p>I am the content for this section</p>
</div>

<span> </span>: These tags are used to show inline elements ie, each element inside a span tag represents an inline text or information.

<p>I am an <span>inline element</span></p>

The div tags were used to separate different sections of a HTML document while the span tags were used for inline elements. However, with this new version of HTML ie HTML5, semantic tags were introduced to takeover and create more readable and accessible HTML documents.

HTML vs HTML5

HTML

*** Sample code***

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I am the Title of the page</title>
</head>
<body>
    <div class="header">
        <div class="nav">
            <ul id="nav-items">
                <li class="nav-links">
                    <a href="">Home</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main">
        <h1>I am a heading</h1>
    </div>
    <div class="section">
        <!-- a section here -->
    </div>
</body>
</html>

the div with class 'header' denotes the header section of the website. This is the part of the website that holds the navigation links (the div element with the class of nav), the hero of the website and all other things in the 'above-the-fold' section of the website.
the div with the class main denotes the main section of the website. It is this section that holds the main contents of the website.

HTML5

*** Sample code***

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I am the Title of the page</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li class="nav-links"></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>I am a heading</h1>
        <section>
            <p>I am a section title</p>
        </section>
    </main>
    <footer>
        <p>This is the footer</p>
    </footer>
</body>
</html>

the header tag denotes the header of the website. It is this section that holds the navigation links in the nav tags.
the main tag holds the main block of your website. Using different section tags, you can separate different sections of your website.
the footer tag is used to show the footer section of your website.

HTML5 TAGS

<main> </main> : This tag specifies the main contents of your HTML document. You would usually add your different section tags to show the different sections of your page.
<header> </header> : This tag shows your readers the topmost part of your website, the introductory section. It typically contains the nav tags for navigation, some heading tags, your logo or site title.
<nav> </nav> : This tag holds all the links to your navigation. In longform, this tag means 'navigation'.
<section> </section> : The section tag is used to group different standalone sections of your website together. For example, you could have a section listing all your services, and another section listing details about your team.
<code> </code> : The code tag is used to format text to resemble code blocks. Information inside the code tag will be formatted to mono-space type text.
<map > </map > : The map tag is used create an image map. In an image map, you can set different parts of the image, using the area tag, to link to different external or internal pages. See example.
<mark> </mark> : The mark tag is used to highlight text. It has a default colour of yellow, but this can easily be changed using CSS (Cascading Style Sheet).
<detail> </detail> : The detail tag helps you to create HTML dropdown effect. This is good for when you want to give the user the option of showing or hiding certain pieces of information. It usually contains a summary tag.
<summary> </summary> : The summary is usually contained inside the detail tag. It works as the heading for the details tag. Content inside this tag is usually seen by your website visitors.
<footer> </footer> : The footer tag is used to define the footer section of your website. Everything inside this tag is usually text or information belonging to the footer section of your page.

Conclusion

In conclusion, HTML5 tags are better to use for the following reasons:

Accessibility: Screen readers and other disability-aid devices have an easier time reading through semantic tags. This is because the devices can read the header tags as headers, the main tags as main content e.t.c. This makes your website accessible to a wider range of people and allows accessibility for all.
Readability: Semantic code makes it easier for you, the developer, and your teammates easily read through the codebase and make edits where necessary.

See you next week, I will be writing more on web development and other beginner friendly topics.

Ciao!

Vanessa O.

PS: If you're looking to start on your tech career this year, you can download this checklist of 14 careers in tech and see the programming language you should learn first.

DEV Community: 이아 | Nessa Okeke

How do backend developers showcase their work?

Promises in Javascript Explained + Examples

Prerequisites

Introduction

What are Javascript Promises?

Promise fulfilled

Promise rejected

Promise pending

Working with Promises

Code Example

STEP 1: Create a data store

STEP 2: Create a function to get the data

STEP 3: Transform the data when we get it

STEP 4: Log the results to the console

RESULTS

Conclusion

Hello World, My coding journey from Interior Design to Backend Engineer.

My First Time

Architecture Calls

Graduation and more Javascript?

Cheers to the freakin' 2020's

10+ HTML5 Semantic tags with examples.

Prerequisite(s)

HTML before the 5

HTML vs HTML5

HTML

HTML5

HTML5 TAGS

Conclusion

Promise `fulfilled`

Promise `rejected`

Promise `pending`