DEV Community: Uma

Responsive Form Using HTML And CSS

Uma — Mon, 08 Mar 2021 03:40:15 +0000

Today I am going to demonstrate a responsive Form utilizing HTML and CSS. This is going to be a simple survey form intended for Web Developers. It includes their information, a dropdown menu that describes their current role, a checkbox feature to describe their favorite technologies and tool, a radio button feature for their recommendations, a textarea to leave any other comments or suggestions, and a submit button to submit the form. My goal here is to make it fully responsive. So let’s begin.

First thing first, I am going to make a directory where my project is going to be saved. Then open up VScode(My favorite text editor), and create index.html and style.css files. Those are the only files, we need for this project. Right now it looks something like this:

Inside the html file, I added a DOCTYPE declaration, and link tag of the stylesheet to connect the style.css file and on the right, I have a style.css file where I added a background-color to the body of the HTML page. Nothing much happening here but right now if I open up my HTML page in the browser by using open html.index command in the terminal, I can see a purple screen like so:

Now let’s create a form then we will add the CSS at the end.




<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="style.css">
   <title>Developer's Survey Form</title>
</head>
<body>
   <div class="container">
       <header>
           <h1 id='title'>Web Developer's Survey Form</h1>
           <p id='description'>
               Thank you for taking the time to do this survey
           </p>
       </header>

       <form id='survey-form'>
           <div class='form-input'>
               <label id='name-label'>Name</label>
               <input type='text' id='name' placeholder='Enter your name' class='form-input-size' required />
           </div>
           <div class='form-input'>
               <label id='email-label'>Email</label>
               <input type='email' id='email' placeholder='Enter your email' class='form-input-size' required />
           </div>
           <div class='form-input'>
               <label id='number-label'>Age
                   <span>(optional)</span>
               </label>
               <input type='number' id='number' placeholder='25' min='0' max='80' class='form-input-size' />
           </div>

           <div class='form-input'>
               <p>Which option best describes your current role?</p>
               <select id='dropdown' class='form-input-size' required>
                   <option disabled selected value>Select current role</option>
                   <option value='Student'>Student</option>
                   <option value='Senior Software Engineer'>Senior Software Engineer</option>
                   <option value='Junior Software Engineer'>Junior Software Engineer</option>
                   <option value='Full Stack Web Developer'>Full Stack Web Developer</option>
                   <option value='Front-end Web Developer'>Front-end Web Developer</option>
                   <option value='Back-end Web Developer'>Back-end Web Developer</option>
                   <option value='Prefer not to say'>Prefer not to answer</option>
                   <option value='Other'>Other</option>
               </select>
           </div>

           <div class='form-input'>
               <p>Would you recommend Web Development career to a friend or family?</p>
               <input type='radio' name='answer' id='radio-btn' value='Definately' checked />Definately    </br>
               <input type='radio' name='answer' id='radio-btn' value='Maybe' />Maybe </br>
               <input type='radio' name='answer' id='radio-btn' value='Not sure' />Not sure </br>
           </div>

           <div class='form-input'>
               <p>What are your favorite Technology Languages and Frameworks?
                   <span>(Check all that apply)</span>
               </p>
               <label><input type='checkbox' id='check-box' value='Ruby on Rails'>Ruby on Rails</label>
               <label><input type='checkbox' id='check-box' value='JavaScript'>JavaScript</label>
               <label><input type='checkbox' id='check-box' value='React'>React</label>
               <label><input type='checkbox' id='check-box' value='Python'>Python</label>
               <label><input type='checkbox' id='check-box' value='Java'>Java</label>
               <label><input type='checkbox' id='check-box' value='PHP'>PHP</label>
               <label><input type='checkbox' id='check-box' value='Angular'>Angular</label>
               <label><input type='checkbox' id='check-box' value='Vue'>Vue</label>
               <label><input type='checkbox' id='check-box' value='Swift'>Swift</label>
               <label><input type='checkbox' id='check-box' value='HTML'>HTML</label>
               <label><input type='checkbox' id='check-box' value='CSS'>CSS</label>
               <label><input type='checkbox' id='check-box' value='Other'>Other</label>
           </div>

           <div class='form-input'>
               <p>Any comments or suggestions to a new Web Developers?</p>
               <textarea type='text' placeholder='Enter your comment here...'></textarea>
           </div>

           <div class='form-input'>
               <button type='submit' id='submit'>Submit</button>
           </div>
       </form>
   </div>

</body>
</html>

Above I created a header, form, and added id class div etc for reference. We will use them to style later on. Currently, it looks something like this in the browser right now:

Looks okay but let’s add some CSS to make it better and responsive. I will work each section at a time to have a better picture of how it is working. So let’s work on the body page and header part first. In the style.css file add the following code:




html{
    font-size: 16px;
}

body{
    background-color: rgba(98, 95, 241, 0.635);
    margin: 0;
    font-family: sans-serif;
    color: white;
}

.container{
  width: 100%;
  margin: 3.2rem auto 0 auto;
}

@media(min-width: 576px){
  .container{
    max-width: 540px;
  }
}

@media(min-width: 768px){
  .container{
    max-width: 720px
  }
}

header{
    text-align: center;
    margin-bottom: 1.5rem;
}

h1{
  font-weight: 400;
}

#description{
  font-weight: 200;
  font-style: italic;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5)
}

Here I am not going to talk about every CSS element we are using but I will mention the factors which could affect the responsive design. Above in html we have font-size set to 16px and further I am going to use em or rem instead of px on font-size. You can refer to this documentation about em and rem to get detailed information. Another important thing is @media, which plays a huge role to make your layout responsive. It will let you add the breakpoints and according to the breakpoints, you can style your CSS. Above I added two breakpoints and added desire width on container class based on device size. To learn more about @media refer to this documentation. The output from the above CSS looks like so:

You can check it out in all device size in your developer tool whether or not it’s responsive. Now let’s move on to the Form. It’s looking very congested right now. I am going to add a background color and some padding/margin to it and work slowly on each section.




#survey-form{
   background: rgba(21, 20, 85, 0.7);
   padding: 2.3rem 0.5rem;
   border-radius: 0.3rem;
}

.form-input{
   margin: 0 2.5rem 1.2rem 2rem;
}

.form-input-size{
   display: block;
   width: 100%;
   height: 1.5rem;
   padding: 0.3rem 0.4rem;
   border-radius: 0.2rem;
   outline: 0;
   border-style: none;
   margin-top: 0.4rem;  
}

Adding these code will output the following result:

Ahh much better right? If you notice I am using rem instead of px in most of the places. If you haven’t read the documentation about em and rem please read it from the above link I provided earlier. Now that padding, margins, and inputs look good, let’s fix the checkbox, radio buttons, and labels. Add the following in your CSS file:



p{
 font-size: 1.12rem;
}

#radio-btn,
#check-box {
 margin-right: 0.5rem;
 min-height: 1.2rem;
 min-width: 1.2rem;
}

label {
 display: flex;
 align-items: center;
 font-size: 1.125rem;
 margin-bottom: 0.5rem;
}

Here I want to mention display: flex in the label section. Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It’s responsive so it can save some time on designing layouts. To read more about Flexbox follow this link. I also recommend that comment out each line of code and see the difference and what each one of those lines doing. Here is the result from previous changes:

We are almost there. The last thing we have to accomplish is the textarea and a submit button. So let’s add some styling to it like so:




textarea{
 width: 100%;
 min-height: 6rem;
 resize: vertical;
 padding: 0.5rem 0 0 0.5rem;
}

#submit{
 width: 100%;
 padding: 0.8rem;
 background: rgb(7, 173, 7);
 color: white;
 border-radius: 0.2rem;
 cursor: pointer;
 border: none;
}

Here I would like to discuss few things:

by adding resize: vertical; we are allowing users to only expand the textarea vertically so that it won’t go outside our form box and look odd.
cursor: pointer; will give us a pointer icon upon hover and make it easier to understand that it’s clickable.
border: none; will remove the outline border from buttons and make it more elegant.

Alright! We did it. I add the final result in mobile view as well. Make sure you test it in all device sizes as well. I hope you enjoyed this tutorial on creating a responsive form. Thank you

Fetch vs. Axios HTTP Requests In JavaScript

Uma — Mon, 01 Mar 2021 03:02:44 +0000

Fetch:

Fetch is a newer way to send HTTP requests. Before Fetch, XMLHttpRequest was a very popular way to send requests. In fact, it was the only way to send HTTP requests in the early days of JavaScript. XMLHttpRequest does not support promises and mostly relies on callbacks if we have nested requests, which could be too repetitive and hard to read. That’s when Fetch entered.

Fetch supports promises. It is way cleaner and readable than XMLHttpRequest requests, at least in my experience. Here is an example of fetch request:

fetch('URL')   //instead of URL use which ever URL you want to send a request
.then((response) => {
    if (!response.ok)
       throw new Error(`Status Code Error: ${response.status}`)
    response.json() //parse json
.then((data) => {
    for (let student of data.results) {   //assuming data is list of students and has property name
        console.log(student.name)
    }
})
.catch((err) => {
    console.log('SOMETHING WENT WRONG WITH FETCH!');
    console.log(err);
 })
});

Here, the first .then gives us a response object, it resolves but we can not access the data yet. The data we need is inside the body key with the value ReadableStream. To access the data we use response.json() as shown above which parses JSON and we get the data we need. Now the second .then gives us the data and we are looping through it to display the student’s name. This is the scenario of when the promise resolves, but what happens when something goes wrong with the URL and the promise gets rejected? In that case, we handle it with .catch like above. You might be thinking what is that if statement for? Well, adding .catch doesn’t catch the error if something goes wrong with fetch. It will give us a 404 status response instead of catching the error because the response.json() line fails if the response gets rejected, so we are trying to parse something that doesn’t exist. So by adding the if statement, we are checking if we have the response, and only then parse JSON. To read more about Fetch you can refer to this documentation.

Axios:

Axios is a library for making HTTP Requests. It’s one of the most popular libraries that simplifies the process of making HTTP Requests. Unlike fetch it’s not a built-in option. It’s an external library that uses fetch behind the scenes. It is promise-based like fetch which means we don’t have to deal with a lot of callbacks. One nice feature Axios has is, it can be used on the server-side as well with node.js.

To use Axios, you can add a script tag on the Html file like so:

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Or you can download it with the following commands:

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using yarn:

$ yarn add axios

Now let’s make the same GET Request from the above example with Axios:

axios.get(‘URL’).then((response) => {   
   console.log(response.data)
   for (let student of data.results) {  
     console.log(student.name)
    }
 }).catch((error) => {
    console.log(error)
})

Much cleaner and less code than with Fetch. Two key difference between Fetch and Axios are:

We don’t have to manually check the response of the status code as we did in a fetch request. Axios knows to display the catch error if the status code is not 200 - ok.
We don’t have to parse JSON to retrieve data like Fetch.

Git Commands

Uma — Sun, 21 Feb 2021 18:31:35 +0000

If you are new to using Git and GitHub, this article might be helpful. Here, I am going to list the most frequently used Git commands that I use:

git init - Initialize git. The very first thing you do to initialize your local directory to a git repository.
git status - Lists any changed files within the directory.
git add . - Adds all the unstaged files that have been changed to staged status and makes the files ready to be committed. If you want to add a specific file only you can do so by using the git add <file-path/name-of-file> command.
git commit -m “<your message>” - Commits all the staged files with the message provided. It's important to write meaningful commit messages so that it can be easily understood as to what accepting the changes will do.
git commit -am “<your message>” - Add and commit all changed files at once.
git reset --soft HEAD~ - Undo the last commit.
git push - Pushes all commits to the main branch. If you want to push to a specific branch you can do so by using the git push <name of remote> <name of branch> command.
git branch - Shows all the branches.
git branch <branch name> - Creates new branch.
git checkout <branch name> - Switch to branch.
git checkout -b <branch name> - Create and switch to the new branch at once.
git branch -m <branch name> <new branch name> - Rename branch name.
git branch -D <branch name> - Deletes branch that is not merged yet.
git branch -d <branch name> - Deletes branch that is already merged.
git log - Shows all the commits.
git diff - Compares modified files.

This is a good starting place to learn about git commands, but there are many more commands that are not listed above that I haven’t used much. Besides these commands, I learned another command a few weeks back that I found very helpful if you use certain git commands frequently.

git config --global alias.st status - Creates an alias(shortcut) for git status. Once this is done, the next time you want to run git status you can just do st. It will save some time. If you want to create shortcuts for other commands you can do the same steps but instead of alias.st status you will need to add alias.<shortcut-name-you-want-to-give>< command-you-want-to-add-shortcut-to>. For example, if we wanted to add the shortcut gp for git push, we can do so by typing git config --global alias.gp push.
I hope this is helpful. Have a good Sunday!

How I refactored my code using one of the React Hooks ‘useState()’

Uma — Sun, 14 Feb 2021 20:42:43 +0000

A quick introduction of ‘hooks’ according to the reactjs.org docs:

“Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.”

There are few points in the reactjs.org docs, as to why use React Hooks. I will link to them below if you would like to learn more:

Now let's move on to my app where I refactored the class component and used the ‘useState’ hook to manage state. It's recommended by reactjs.org not to refactor old projects with hooks, and to instead use hooks in new projects. You can find out why here I was curious while going through the document linked in the previous sentence, so I decided to try it out in an existing application anyway. Here I was trying to add a Like feature in the app so I created a class component like so:

Above is a LikeButton class component that has a default state set to zero. In the render function, there is a button called Likes returning the default state. To update the state each time users click on the like button we have a handleClick function that updates the current state by using the built-in function setState. Now we can use this component wherever we want to add a Like button. In my case I added it in the job listing like so:

In the browser it looks something like this:

Now let’s refactor this using the ‘useState’ hook. Remember ‘hooks’ can’t be used in class components, they can only be used in functional components. Don’t forget to check the links provided at the beginning of this article to know why to use hooks. Now for the refactoring, first we have to convert the class component to a functional component to be able to use the ‘useState’ hook. Then import ‘useState’ from React and implement it like so:

Above on line 4, we have the const variables ‘like’ and ‘setLike’ where ‘like’ creates a piece of state that is set to a default value of the 0 in the parenthesis after useState and ‘setLike’ is used for updating that state value, similar to setState. Now to update that state all that has to be done is, inside the ‘onClick’ function, create an arrow function that returns setLike, which increments ‘like’ by 1 each time users click on the button. That's all. You can compare these two components and figure out which one has less code and more readability. Some prefer class components, some prefer functional so it really is your preference of which to use.

Gatsby route v/s React route

Uma — Sat, 06 Feb 2021 00:52:38 +0000

Today I’m going to share a little bit about Gatsby’s route. As I’m always learning new tools and technologies, a couple of days ago I came across Gatsby and was super curious about what it is and how it works? So I went through Gatsby’s documentation and what I found out was something very interesting.

I’m sure you have already guessed it by the title, we will discuss Gatsby route functionalities. I am going to show you the difference between these two ways of using routes. I am going to compare one of my React projects with this newly created Gatsby project. I am not going to show the whole process of creating an app and how it functions, however, it will be a topic for a future article.

Before I dive into detail, here is a brief definition of Gatsby from Gatsby’s documentation: “Gatsby is a React-based open-source framework for creating websites and apps. It's great whether you're building a portfolio site, blog, a high-traffic e-commerce store, or company homepage.”

Okay, Let’s get started:

First, we will go through the React route.

Above I have an index.js file from my React app. To run this file in the browser I have to install the react-dom package and import ReactDOM in this file in order to render it. In this case, I’m rendering an App component, so let’s have a look at the App component:

Here, as you can see, I am importing all the components that I want to make a route with, then I have to install the react-router-dom package to import BrowserRouter and Route. After that, I am adding them to the App class component. Also, we need to give the exact path so that it renders only the associated page in each route. Once the route is set I need to link them in the Navbar component. Here is how that looks:

Ignore all the class names and ul/li tags for now and let’s focus on Links. Here also we have to import Link from react-router-dom then add links. This is the whole process of React route to work. It looks something like this in the browser:

It’s all functioning properly. Now let’s do the same thing with the Gatsby app. First, let’s look at the index.js file:

Here all we have is a functioning homepage that is returning the Navbar component. Now let’s move on to the Navbar file:

Here all I did was import Link from ‘gatsby’ then return Links inside the Navbar function. I did not add all of the class names and ul/li tags in order to keep it clean, so it won’t look exactly the same as my React Navbar but functionality wise it works exactly the same. That’s it and now you have fully functioning Navbar routes. There’s no need to install any router or anything manually. The only thing you need to do here is to add your route pages inside the ‘pages’ folder where you have your index.js file and it will automatically work as an additional route. The ‘index.js’ file is the homepage and all other files you add on the same level become additional routes. Here is the Navbar from the Gatsby app:

Let me know what you guys think about this. I really find it easy to use, however, I am sure there are complicated factors but I am looking forward to diving into more detail soon.

Deploying process of React app to Netlify

Uma — Thu, 28 Jan 2021 18:34:18 +0000

First of all let’s discuss a little bit about why I used Netlify?

To be honest, I haven’t deployed a lot of apps but my first one was a Rails app and I deployed it to Heroku. I used an SQLite3 database on my Rails app so it was a bit of a struggle to deploy it to Heroku. I definitely found an easier way to deploy a rails app on Heroku now but if the app is not running for 30 minutes straight it tends to sleep for a few seconds which is not convenient. I heard a lot about Netlify on Udemy courses, youtube videos, and stack overflow, so I decided to give it a shot.

How was my experience?

I must say it was the easiest and fastest deployment ever. The process was super smooth as you will see soon below. As per Netlify “Now you can get a React project up and running with a few commands, and in less than 30 seconds you can have it deployed with Netlify.” Isn’t that cool?

Follow this document on how to deploy it in 30 seconds from your CLI(command line interface).

I did not do the deployment from CLI so let me show you how I did it:

The very first thing I did was create an account in Netlify. It was an easy process. I signed up with Github, that way it would be easy to link my repositories to Netlify. In this picture you can see the options to log in or sign up:

I already had an account so I simply logged in with GitHub but if you are first time user, upon clicking the sign-up button, it will prompt you to the following page:

Now click on Github which takes you to the GitHub login page. Once you log in with GitHub it will bring you here:

As you can see I already have some apps in my Team overview but for new users, this page would be empty and it would ask you to create your team. Here if you click on sites it will prompt you to the page where you can see an option of “New site from Git”. Clicking on that button will bring you here:

I clicked on GitHub, it gave me the option to pick a repo that already exists there but I wanted to pick the new one so I followed the link “configure the Netlify app on GitHub” that took me on this page:

Above there are two options if I want to select “all repositories” or “only select repositories”. Since I have over 300 repositories in my Github, I decided to add only the few that I like to deploy so I went with the second option. Once you add the repo you can click on the save button that will take you to this page:

We are almost there!
As you can see my positive_quotes app is here and once I click on that it took me to the following page:

Everything here was already filled. I did not add anything but you can modify it if necessary. Then hit the “Deploy site” button. That’s it. Now you can see your deploying process like so:

Once it’s done, it will look something like this:

Neat!
The link I highlighted is the live link. I know the name looks so random but don’t worry you can change it to a different name like so:

“Go to the Site Settings and find the option that says change site name and save it. Also, if you are thinking of buying a domain for your site you can do so by going to the domain settings above and following the steps. It’s pretty straightforward.”
That’s all. Sweet and simple.

My first ever PR(Pull Request) to an open-source project experience

Uma — Sat, 23 Jan 2021 06:23:51 +0000

This article is for people who have never contributed to any open source projects but that doesn’t mean that others cannot read it though :). Doing something new always feels like a newborn baby who is overwhelmed by every small thing and doesn’t know how to react except getting fussed when something doesn’t happen and smile when something happens according to his/her desire. Every time I do something new, I am like that baby as well.

Today I am going to share my experience about how I created my first PR for an open source project called CASA.

First let's talk about what is PR(Pull Request)?

According to Github Guides : “Pull Requests are the heart of collaboration on GitHub. When you open a pull request, you’re proposing your changes and requesting that someone review and pull in your contribution and merge them into their branch. Pull requests show diffs, or differences, of the content from both branches. The changes, additions, and subtractions are shown in green and red. As soon as you make a commit, you can open a pull request and start a discussion, even before the code is finished.”

You can also create pull requests to your own project and merge it on your own. It’s a best practice because in a big project that’s how work is done.

Why is it important to contribute to open source projects?

There are few important points I can share why it’s important to contribute:
To have real world working environment practice
These contributions can go on your resume as your experience which is very important, especially for fresh graduates who don’t have prior experience
To get opportunities to collaborate with senior developers and also make lots of connections
You can learn teamwork which is important when you work as a developer

Now that we have discussed what PR is and what's the importance of contribution on open source projects, let's move on to how I created my first PR. First of all, I picked the project I want to contribute to. CASA(Court Appointed Special Advocates) is a national association in the United States that supports and promotes court-appointed advocates for abused or neglected children. Then with the help of my good friend Collin Jilbert(who has been contributing to CASA for a while now) ,I got connected with a senior developer Linda(Lead of CASA team). She explained to me the whole process and added me as a contributor in the CASA project on Github. The very next day I went to their page where all the ‘issues’ were created. Here is the screenshot of the issue panel:

If you click on issues, you can find all the current issues casa is having in their web application, from there you can pick whichever issue you think you can solve or you can go to the ‘projects’ menu and find the ‘todo’ section where all the issues are listed. It looks something like this:

This way is easy because you can clearly see which issues are available, which are taken by other developers and which are already merged or completed. In progress means somebody is working on it and there is a done section as well that means it’s completed. So your focus should be on Todo.I picked something very simple since it was my first time but I was glad that at least I was starting. Once I found the issue I wanted to work on I clicked on it which pops up this box:

If you click on ‘Go to issue for full details’ you will see the full description of issue:

As you can see there are all the descriptions and screenshots of current behavior. If you scroll down on that page you can find more details and the comment section where you can ask any questions regarding issues to clarify. Now it's time to work on the issue. At this point I was super excited. I opened up my text editor and tried to set up the CASA project. Of course I had some difficulties with setting it up but as usual my friend Collin was by my side to help me to get unstuck. Lucky me!

After setting up the project on my local environment the very first thing I did was create a branch. It's highly recommended that you always create a branch before working on any project and give the branch a name which reflects the issue you are working on so that when you create a PR other developers can easily figure out what work you have done. To create branch and switch it to it I ran following command:

git checkout -b <new-branch-name>

All set to roll...
But here is the biggest challenge I faced!

Any guesses what it might be????

I couldn’t find the file I need to work on. This is when I saw a glance of reality. This is not a school project, where you just have 3 or 4 models, 6 or 7 controllers and limited view pages. This was the real world, where you have more than 20 models, tons of controllers and view pages and guess what? In the real world this is not even considered a big project. Phew

Although the issue I picked was small, to solve that issue I had another issue which was to find the code where issues was. After going back and forth on the description and playing around in the staging environment I finally figured out where exactly I need to work. Once I found it, it did not take long to solve the issue. I was super happy.

Things we need to be careful after solving issues are:
1.Making sure all the tests are still passing
2.Test it a few times on the site, if it’s working correctly on all screen types.

I did both and pushed it to GitHub by using following command:
git push origin <branch-you-created>

Then create a PR in GitHub like so:

Once you push it to GitHub you should be able to see something like this. Then click on ‘Compare & pull request’,which will bring you here:

Here you get change to modify branch name and add comments then click on ‘Create pull request’, which will bring you to this page:

But your work is done here. You are not supposed to ‘Merge pull request’ unless you are working on your own project.
Yay!
Time to celebrate. I just created my first Pull Request for the CASA project. If everything works fine someone from their team will merge it. In this case mine went everything well and it got merged. Here is the proof:

Now this issue is closed. :)

Overall my experience was full of fun. For ruby developers the ‘Ruby for Good’ community is a great place to be. If you would like to contribute to CASA here is the GitHub link. If you have any questions DM me or leave a comment. Finally, I just want to say to new developers, don’t wait to start contributing to open source projects. It's a better way to learn and grow.

Thank you for reading.

Scope

Uma — Sun, 17 Jan 2021 00:54:27 +0000

Scope refers to where you can access a specific variable or function. From the MDN documentation, “scope is the current context of execution. The context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.”

Let's discuss this with a few examples of scopes:

Function scope
In the function scope, if we define a function and create a variable and try to access it from outside of that function, what do you think we will get? Lets try it in the console:

   function funcScope() {
       let a = 10
       const b = 20
       var c = 5
   console.log(a)
   }

// to execute this function in the console we have to invoke it like so:
funScope()
console.log(a)
console.log(b)
console.log(c)
>10
>Uncaught ReferenceError: a is not defined
>Uncaught ReferenceError: b is not defined
>Uncaught ReferenceError: c is not defined

In the above code snippet, first a console.log of a returned 10 because it is inside the scope of that function and all other console logs returned ref error because they are outside of the scope. It doesn’t have access to those variables that were declared inside the function, which is why you can declare the same variable in other functions.

Now, what about if we declare a variable outside the function and try to access it inside the function and also outside the function? Let's figure it out:

let color = ‘red’

function rainbow(){
   let color = ‘orange’
   console.log(color)
}

rainbow()
console.log(color)
> orange
> red

Interesting right? In this case variable color = ‘orange’, inside the function rainbow can not be accessed outside that function but the variable color = ‘red’ can be accessed outside the function because it is declared outside the function which means it is in Global scope. If you remove the variable from function rainbow, the console.log(color) from the function rainbow will look outside the function to see if there is any variable called color declared? In this case, yes so it returns red.

Block scope
So what is block in JavaScript? A block is a set of curly brackets { } that has a chunk of code but it's not the same as a JavaScript object like so: { name: uma, age: 30}. As function scope in block scope we can not access variables outside the block that is declared inside it. Have a look at an example below:

 If (true) {
    let name = ‘Uma’
}
console.log(name)
> uncaught ReferenceError: name is not defined

Now here we have one very interesting thing to experiment. Are you guys ready for it? Okay let's do it!

In the above example if we change let to const what happens? Hmm nothing. Same output but how about we change it to var? Lets try it:

 if (true) {
    var name = ‘Uma’
}
console.log(name)
> Uma

What?
Yes. You saw it right. It outputs the value of the variable, because let or const and var have different rules of scope. This is why it’s not recommended to use var. var might not run any complications in the above example but if you have a scenario where you have the same variable declared outside the block as well then it can definitely cause conflict. Try it yourself. Try adding var name = ‘Aiden’ on top of above code, then add console.log(name) inside block and see what happens? Will it print out both variables or just one?

 var name = ‘Aiden’
 if (true) {
    var name = ‘Uma’
    console.log(name)
}
console.log(name)
> Uma
> Uma

Yes. It just printed out Uma twice. Now try it with let. You will definitely get both variables like so:

Uma
Aiden

Lexical scope
Lexical scope, also known as static scope refers to the location where a variable is declared and determines where that variable is available. When we have a nested function it can access variables declared in their outer scope: meaning it’s parent function but not a vice versa.

In the above diagram, there is a nested function. Inside the inner function inFunc() there are not any variables declared but when we run that code it will return Uma which is declared outside the inner function. If in outFunc() also there was not any variable declared it will go above the outer function and search in the global scope. In this case we do have the name variable declare outside outFunc() so it will return Umesh but if you declare variable inside inFunc() function like so:

function outFunc(){
    function inFunc() {
         let name = ‘Aiden’
   }
 inFunc()
console.log(name)
}

In this case nothing is returned because the outer function doesn’t have access to the inner function. This is called lexical scope. I hope this article gives you little bit of a better idea about scope.
Thank you for reading.

What are JavaScript loops?

Uma — Fri, 08 Jan 2021 19:56:49 +0000

In this article, we will discuss a very important part of javaScript: loops, which means doing things repeatedly. Loops allow us to repeat certain chunks of code using some conditions. If we have to print something a certain number of times, sum all the numbers in an array, or list all the keys/values from an object, we can do so by using loops. There are different types of loops:

for loop:

It loops through a block of code until the counter reaches a specified number.
syntax :

for([initial expression] [condition] [increment expression]) {
//statement 
}

//example of a for loop

for(let i = 1; i <= 10; i++) {
    console.log(“Hello, my name is Uma!”, i)
}
>Hello, my name is Uma! 1
>Hello, my name is Uma! 2
>Hello, my name is Uma! 3
>Hello, my name is Uma! 4
>Hello, my name is Uma! 5
>Hello, my name is Uma! 6
>Hello, my name is Uma! 7
>Hello, my name is Uma! 8
>Hello, my name is Uma! 9
>Hello, my name is Uma! 10

Above we set the counter variable i to 1, then conditionally check if i is less than or equal to 10 and increment i each time until the condition is met. As we can see, it printed out the string 10 times, and each time it printed, the counter was incremented by 1.

One important part to discuss here is the idea of an Infinite loop. This is something we never want to encounter because an infinite loop never ends and will end up crashing your program. Which of course you never want to happen. Have a look at an example below:

for(let i = 1; i !==20; i+=2) {
    console.log(i)
}

What is wrong with the above code snippet? Yes, you guessed it right- the condition. That condition will never be met: by incrementing by 2 each time from the starting counter value of 1, it will only print out odd numbers, which means the counter i variable will never be set to the value of 20, so it will keep running until your program crashes(oops!). It's recommended to not use == or !== in a for loop, instead use >= or <=, which will prevent an infinite loop even if the condition is not met.

Can we use for loops with Arrays and Strings?
The answer is yes. Let’s look at a few examples of using a for loop with arrays and strings below:

const studentsName = [“Uma”, “Collin”, “Jordan”, “Henry”, “Wills”]

for(let i = 0; i < studentsName.length;  i++) {
     console.log(studentsName[i])
 }
>Uma
>Collin
>Jordan
>Henry
>Wills

Let's take a look at another example that has objects inside an array.

const myFamily = [
{
  Name: “Umesh”,
  Age: 36
},
{
  Name: “Uma”,
  Age: 35
},
{
   Name: “Aiden”,
   Age: 4
}
]

for(let i = 0; i < myFamily.length;  i++) {
   let familyMember = myFamily[i]   //this has to be inside the loop to access one object at a time
     console.log(`${familyMember.name} is ${familyMember.age} years old.`)
 }
>Umesh is 36 years old.
>Uma is 35 years old.
>Aiden is 4 years old.

Now let's take a look at a string. This time we will use decrement(--) instead of increment(++):

const greet = “Hello!”
for(let i = greet.length - 1; i >= 0; i--) {
   console.log(i, greet[i].toUpperCase())
}
>5, !
>4, O
>3, L
>2, L
>1, E
>0, H

Pretty straight forward right?

while loop:

A while loop continues to run as long as its test condition is true.
Syntax:

while(condition) {  //condition needs to be true
  //statement   -need to make it false somehow, otherwise, it will turn into an infinite loop
}

Let's take a look at a simple While Loop example:

let age = 8

while(age < 18) {
      console.log("your age is less than 18, you can't have a drink right now!") 
      age++
   }
   console.log("You are now over 18, enjoy your first drink. Cheers!!")

>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>You are now over 18, enjoy your first drink. Cheers!!

Here is another example of a While loop:


const target = Math.floor(Math.random()* 10)
let yourGuess = Math.floor(Math.random()* 10)

while(yourGuess !== target) {
    console.log('try again') 
    yourGuess = Math.floor(Math.random() * 10)
  }

console.log(`Target: ${target} yourGuess: ${yourGuess}`) 
console.log('Congrats you win!')

> try again
> Target: 2 yourGuess: 2
> Congrats you win!

for...of loop:

for...of is an easy way of iterating over arrays or other iterable objects.
Syntax:

 for( variable of iterable) {
       statement
  }

We can use the same example from the for loop with arrays to see the difference between these two methods. With a for loop, to access an element from an array we had to do this:

const studentsName = [“Uma”, “Collin”, “Jordan”, “Henry”, “Wills”]

 for(let i = 0; i < studentsName.length;  i++) {
     console.log(studentsName[i])
 }
>Uma
>Collin
>Jordan
>Henry
>Wills

Now with a for...of loop we can simply do like so:

const studentsName = [“Uma”, “Collin”, “Jordan”, “Henry”, “Wills”]

for(let name of studentsName ) {
     console.log(name)
 }
>Uma
>Collin
>Jordan
>Henry
>Wills

BOOM. How cool was that? We can use the same logic with a String.

const word = “welcome!”

for(let char of word) {
   console.log(char)
}
> w
> e
> l
> c
> o
> m
> e
> !

for...of is a great fit most of the time but where we need to use indexes, it’s not recommended to use for..of. In that case, a for loop is better to use. For example, if we have two arrays:

const words1 = [“orange”, “peanut”, “strawberry”]
const words2 = [“juice”, “butter”, “jam”]

To print the corresponding indexes of “orange juice”, “peanut butter” and “strawberry jam”, we need to have access to the indexes which is not possible with the for...of loop but we can easily solve it with a for loop like so:

for(let i = 0; i < words1.length; i++) {
    console.log(`${words1[i]  ${words2[i]}`)
}
> orange juice
> peanut butter
> strawberry jam

Neat!!

Now the question is can we use for...of with an object?
The answer is yes but it's not as straightforward as with an array. Objects are not iterable. So how can we use a for...of loop with an object? Here is an example:

const progressReportOfAiden = {
    math: 10,
    science: 9.5,
    english: 9.5,
    art: 9,
    history: 8,
    social: 8.5,
    nepali: 8
}

// to print out only subject names we can do so by:
// in Object.keys Object needs to be capitalized. 

for(let subject of Object.keys(progressReportOfAiden) {
    console.log(subject)
}
> math
> science
> english
> art
> history
> social
> nepali

If you are not familiar with Object.keys, have a look at this piece of documentation. Similarly, to access only values use Object.values instead of Object.keys.

for...in loop:

for...in loops over keys in objects, whereas in for...of we had to use Object.keys to access keys to loop over. This is the easier way to loop over keys.
Syntax:

for( variable in object) {
   statement
}

Now let’s use a for...in loop in the above for...of loop example:

const progressReportOfAiden = {
    math: 10,
    science: 9.5,
    english: 9.5,
    art: 9,
    history: 8,
    social: 8.5,
    nepali: 8
}

// to print out only subject names we can do it so by:

for(let subject in progressReportOfAiden) {
    console.log(subject)
}
> math
> science
> english
> art
> history
> social
> nepali

// to access values just console.log(progressReportOfAiden[subjects])

Ahhh much easier... And that's all for javascript loops. Thank you for reading.
Happy coding.

JavaScript “Strings”

Uma — Tue, 29 Dec 2020 04:29:06 +0000

Strings are pieces of text or “strings” of characters that are wrapped in quotes like so:
“Holidays” or ‘Holiday’. You can use single quotes or double quotes, it performs the same job. In the console, you can check typeof “Holidays” and it will return “String”, similarly, if you type typeof “30” - it will also return “String”. Yes, it’s a number but when inside quotes JavaScript treats it as a string.

Every character of a string has a corresponding index, starting at the 0 index, similar to an array object and we can access any character by its index. For example, if we have a string:

const holiday = “Christmas”

To access any character from it, we can simply type:

holiday[5]
> “t” 

holiday[0]
> “C”

holiday[12]
> undefined  // because there is no corresponding character at that index position.

To check the length of a string, you can use the .length method:

holiday.length
> 9

One thing you need to be careful with here is that .length will also count any spaces or symbols as well inside the string. Let's take a look at another example:

const fullName = “Uma Manandhar!”
fullName.length
>14

One might think it would return 12 but it actually returns 14 because it counts the spaces between first and last name and then the exclamation symbol as well. We can also concatenation two strings to one full string like so:

const firstName = “Aiden”
const lastName = “Manandhar”
const fullName = firstName + “ “ + lastName 
> "Aiden  Manandhar"

In the above snippet we declared firstName and lastName variables, then we use the concatenate method( + symbol ) to set the fullName variable. Notice the empty string between firstName and lastName, this is there to add a space between them, without adding an empty string it would return "AidenManadhar", which is probably not the format we would want to have in our application.

There are plenty of built-in methods for the String type which you can find in this document but here we will discuss some popular ones:

toUpperCase()

const currentHoliday = “Christmas”
currentHoliday.toUpperCase()  // converts string to UPPERCASE
> “CHRISTMAS”

toLowerCase()

const nextHoliday = “NEW YEAR”
nextHoliday.toLowerCase()   // converts string to lowercase.
> “new year”

trim()

const language = “   JavaScript      ”
language.trim()   // removes empty space from beginning and end only.
> “JavaScript”

indexOf(arg)

const greeting = “HelloWorld”
greeting.indexOf(“Hello”)   // find the index of the starting character.
> 0

greeting.indexOf(“World”)   
> 5

greeting.indexOf(“world”)    // case sensitive. Returns -1 when nothing is found.
> -1

slice()

const game = “baseball”
game.slice(4)       // slices of existing string and give a piece of string
>”ball”

game.slice(12)  //means not found
>””

game.slice(0, 4)    //starts at index 0 and end at index 3
>”base”

game.slice(4, 8)    //starts at index 4 and end at index 7
>”ball”

replace()

const phrase = “you are very very smart”
phrase.replace(“smart”, “intelligent”)  // it specify what you want to replace and what you want to     replace with
>"you are very intelligent"

phrase.replace(“very”, “a”)
>”you are a very smart” // if there is the same word more than once, it changes only the first one

phrase.replace(“so”, “so so”)
>"you are very very smart"  //stays unchanged

String is immutable so if you want to have all those updated returned values you need to set it in a variable like below:

const phrase = “you are very very smart”

const updatedPhrase = phrase.replace(“smart”, “intelligent”)

updatedPhrase
>"you are very intelligent"

phrase
>”you are very very smart”

Also, we can chain methods like so:

”   you are a rockstar like your mom    ”.replace(“mom”, “dad”).toUpperCase().trim()
>"YOU ARE A ROCK STAR LIKE YOUR DAD"

As you can see it replaced “mom” with “dad” and converted it to the upper case then trim empty spaces from the beginning and end of a string. I tried to cover the most important parts of JavaScript strings. I hope this helps.
Thank you for reading.

The Difference between JavaScript “==” and “===” Comparison Operators

Uma — Sat, 26 Dec 2020 17:40:12 +0000

There are many comparison operators in javascript but we are going to discuss double equal == and triple equal === operators. It is important to know the difference between these two operators and also the difference between != and !== in javascript. Lets begin with the double equal operator:

Double equal “==”
It is known as equality. The double equal operator checks for equality of value. It doesn’t care about data types. Before it checks for equality JavaScript converts both values to the same type and then compares them, which can lead to some unexpected results. Like:

5 == ‘5’    // true
0 == ‘ ‘    // true
0 == false  // true
null == undefined   // true

As seen above, the == operator is returning true for comparing an integer and a string in the first case, then 0 equals empty string true in the second case, 0 equals false in the third case and null equals undefined is also returning true which is not true in the last case. It is just checking the value but not the type, which is why all of the above comparisons return true. Similarly, the != operator is used to check inequality. If you use != in the above examples everything will return false. It can definitely lead to some nasty bugs in an application, so it's not recommended to use the == and/or != operators for comparison in JavaScript.

Note: If you are not sure about types you can go to the console and simply type “typeof ” and check its type. You can take a look at the image below to see what is returned in the console when you check the typeof. Make sure you use all lowercase letters when writing typeof and not the camelCase version of typeOf.

Triple equal “===”
Known as strict equality, it not only checks for equality of value but also datatype. It cares about value and types both which is why it's recommended to use strict equality for comparison, it's more precise. The above examples will return false when === is used :

5 === ‘5’   // false
0 === ‘ ‘   // false
0 === false // false
null === undefined  // false

Similarly the !== operator is strict inequality. Beside these operators there are few more comparison operators we need to know. Here is the screen shot from the MDN documentation:

var var1 = 3;
var var2 = 4;

That's all for comparison operators. I hope it helps.
Happy Holidays everyone!

Class and Functional Components

Uma — Mon, 14 Dec 2020 18:23:37 +0000

In React we have two types of components: 1. Functional components 2. Class components
We will learn about both types and also discuss the differences between the two but before we do that we need to know what is a “Component”? A component is a function or class that produces JSX to show the user and handle feedback from the user using event handlers. Now,
let's dive in:

Functional Components

Functional components are basically a JavaScript function that produces JSX to show content to the user. It doesn’t have access to the component's lifecycle methods or state. Its only job is to show content to users. Here is an example of a functional component:

const App = () => {
    return <div> Hello World! </div>
}

If you are not familiar with ES6 syntax here is the another example of regular function:

function App() {
   return <div> Hello World! </div>
}

They both return Hello World!. I prefer to use the arrow function as shown in the first example because it will automatically bind this.

Class Components

A class component is a JavaScript class that extends from React which has a render method. We can see we did not have a render method defined in the functional component. This is one difference between both components. Just as the functional component, the class component also produces JSX to show content to the user but it can also use the state system to update content on the screen using setState and in addition use, lifecycle methods to run code at specific points in time. Here is a simple example of a class component:

class App extends React.Component {
   render() {
      return <div> Hello World! </div>
    }
}

There is one more difference between class and function components which is how we pass props. In class components we pass props using this.props but in function components we simply pass props. Let's have a look:

const App = (props) => {
    return <div> My name is  {props.name}! </div>
}

class App extends React.Component {
   render() {
      return <div>My name is {this.props.name}! </div>
    }
}

Everything we discussed above was without the hooks system. With the React hooks system, there is much more we can do with functional components but we will not be exploring the hooks system in this blog post. However, I will say this: In the modern React world the hooks system gives more power to functional components and it functions similarly to that of class components.