DEV Community: Humza Hasan

Code Splitting in React

Humza Hasan — Wed, 11 May 2022 12:01:35 +0000

If you are someone like me who has just finished few projects in React and got his/her hand dirty with hooks, state management, etc. Your next stop should be performance.

WHY ?

I don't know about you but a slow website me make sometimes wanna do this 👇

So without further adieu, lets get started!

So before jumping into "What is Code Splitting in React?", let's first understand why do we need this at all.

Traditionally in React, all components code are bundled into one single bundle.js file with the help of bundler such as Webpack, Rollup, etc. This helps the application to download the entire app code at once and eliminate the need of making further subsequent HTTP request. But the drawback here is as and when the application grows, so does the size of the bundle file which leads to a longer initial load time. To solve this problem Code Splitting was introduced in React.

Code Splitting is a feature where we can create multiple bundles that can be dynamically loaded on runtime. This helps us to lazy load just the things that are currently needed by the user, which can dramatically improve the performance of your app.

Few common methods of Code Splitting in React are as follows:

Dynamic Export
Lazy Loading
Route-based code splitting
Named Export

With the help of these techniques we don't reduce the number of lines of code in our app but we avoid loading code that the user may never need, and reduced the amount of code needed during the initial load, thus helping us improve the overall performance of the app.

You can also check out these amazing resources for in-depth understanding:

I Don't Know JS Yet: Hoisting

Humza Hasan — Tue, 10 Nov 2020 18:11:56 +0000

In the last post, we discussed the concept of declaration and scope of a variable in javascript. But what if we end up using a variable or a function before its declaration. That's where hoisting comes into play.

In simple word, Hoisting is a Javascript behaviour of moving all the declarations to the top of the current scope.

Variable Hoisting

Let's visualize this with a small code snippet, the below code can be treated as a low-level example of hoisting.

x = 'I will be hoisted';
console.log(x);
var x;

This code is internally converted by JS execution context to the below snippet

var x;
x = 'I will be hoisted';
console.log(x);

The output in both the case will be

I will be hoisted

Thus we are safe in saying that the variable defined with 'var', have their declaration hoisted to the top of their present scope.

Now let's take another example to explore the concept of hoisting in a bit more depth.

x = 5;
console.log(x);
console.log(y);
y = 10;
var x, y;

/*Output:
5
undefined
*/

If we have a look at the output we would see the first console statement giving us '5', but the second console will give us 'undefined'. This is because as mentioned, in hoisting only the declaration are hoisted to the top of the scope but the initializations are not hoisted.

So in this example, although when the compiler encounters the console.log(y) statement, it hoists the variable declaration to the top, the variable is still not initialized.

The above code can be thought of the following:

var x, y;
x = 5;
console.log(x);   //5
console.log(y);   //undefined
y = 10;

In Hoisitng, only the declaration is hoisted to the top and not the initialization.

We have seen that the variables declared with 'var' are hoisted, but when you come to 'let' and 'const', it's a different story!

Let's take a look at these code snippets to get a better understanding.

/*Scenario 1*/
x = 9;
console.log(x);
let x;

// Error : Uncaught ReferenceError: Cannot access 'x' before initialization

/*Scenario 2*/
y = 9;
console.log(y);
const y;

//Error : Uncaught SyntaxError: Missing initializer in const declaration

So it's safe to say that only variable declared with var are hoisted to the top of the scope but the variables declared with let and const aren't.

Function Hoisting

Although both are called hoisting, function hoisting is different from variable hoisitng. In Function Hoisitng, not just the function name is hoisted but also the actual function definition is hoisted.

Let's take a quick look at the following code snippet,

isItHoisted();

function isItHoisted() {
    console.log("Yes!");
}

This internally means same as,

function isItHoisted() {
    console.log("Yes!");
}
isItHoisted();

The above snippet will result in 'Yes!', because in the first case even though we call the function first and then declare it, internally the definition is hoisted and to the top and then it's called.

An important note which be should take is the fact that only function definition can be hoisted and not function expression.

I Don't Know JS Yet: Declaration and Scope

Humza Hasan — Sun, 01 Nov 2020 18:05:57 +0000

In this first article of the series 'I Don't Know JS Yet' ', we will be looking at the various types of variable declaration along with their scope inside a particular program.

Declaration and Scope

Pre ES6 we only had the 'var' keyword available to us for declaration of variables inside a javascript program, which was said to be function-scoped. But after the release of ES6, we got two new keywords 'let' and 'const' for variables declaration which is said to be block-scoped.

To understand the difference between function scoped and block-scoped, let's look at the below two snippets of code.

👇Function scoped behaviour of var

var fname = "Captain";  //Global Scope
function displayN() {
    var lname = "America";
    console.log(`${fname} ${lname}`);
}

displayN();                                      
console.log(`${fname} ${lname}`);  //ReferenceError: lname is not defined

/*
Output:
Captain America 
*/

Explanation 👉*When the program executes the first variable 'fname' is defined in the global scope (i.e, it is accessible throughout the program) and then the function displayN() is declared and called. Inside this function, the 'lname' variable is declared and accessible only inside the function and any attempt to call it outside the function will result in *'ReferenceError'.

🛑Note: Variable defined with 'var' in the global scope as well as inside a function scope can be updated at any point of the program.

👇Block scoped behaviour of let &const

let fname = "Captain"; //Global Scope
const color = "Red and Blue";  //Global Scope

function superHero() {
    let lname = "Marvel";
    console.log(`${fname} ${lname}`);
    if(true) {
        let age = 58;
        console.log(`${fname} ${lname} was ${age} years old.`);
        age = 59;  
        console.log(`${fname} ${lname} is ${age} years old.`);
    }
    console.log(`${fname} ${lname} is ${age} years old.`); //ReferenceError: age is not defined
}

superHero();
console.log(`${fname} loves ${color}.`);
color = 'Green';  //TypeError: Assignment to constant variable.
console.log(`${fname} ${lname} `);  //ReferenceError: lname is not defined
/*
Output:
Captain Marvel
Captain Marvel was 58 years old.
Captain Marvel is 58 years old.
Captain loves Red and Blue.
*/

*Explanation 👉*When the above snippet runs, the first two variables are declared using 'let' and 'const' respectively. The only difference is that once you’ve assigned a value to a variable using const, you can’t reassign it to a new value.

Continuing further, we declare a function superHero() and call it, which has the variable 'lname' defined inside it making it block-scoped along with 'age' inside another block. Both these variables are only accessible inside their particular block and any attempt to call them outside the defined block will result in 'ReferenceError'.*

🛑Note: Variable defined with 'let' in the global scope or inside a block can be updated at any point of the program whereas 'const' type of variable's value can't be updated as those values are assumed to be constants.

Quick Snapshot

Let's Connect on LinkedIn || Follow me on Instagram

I Don't Know JS Yet (Weekly Updated)

Humza Hasan — Fri, 30 Oct 2020 12:18:27 +0000

When I started my web development journey(roughly 2 years ago), my first experience was with legacy codebase with pre-ES6 syntax. It was ok-ish to honest cause I had no idea about the existence of ES6+ syntax.

Fast forward to today where ES6 is pretty much the benchmark, and after doing a dozen of projects using Vanilla JS(using ES5 and ES6+ syntax) with intermediate experience in ReactJS as well. I decided to jot down my learnings in this Series 'I Don't Know JS Yet'.

Head over to the below articles where we start from the stepping stone of Javascript and move our way towards intermediate level 👇

👉Declaration and Scope (Published)

👉Hoisting (Published)

🤚Next article publishing soon.

Follow me to get notified as soon as I publish an article in this series.

Hit Me up on Instagram or Let's Connect on LinkedIn

How does the Internet work?

Humza Hasan — Sat, 01 Aug 2020 15:13:27 +0000

We all have been using the Internet in our daily life for communicating, streaming, trading, shopping, sharing, travelling, etc purposes to name a few. Our lives have been revolving around the usage of the internet where on average a person uses 31.4 GB per month (as per The NPD Group Market Analysis) which is at almost 25% increase from the data collected the last year. Another report suggests users spend around 2 hours on average per day on social media and is nearly 4 hours on average active on the internet.

Since we are so much depended on the internet, let's dive deeper into the world of the internet and explore how the internet actually works!

Let's start with our favourite Browser first.

A browser is a software application used to makes a request to the server using URL's and then render the response data. The modern browsers can also interpret and run code written by other applications too.

The next big word is URL

Uniform Resource Locator or URL as we commonly know it, helps us to find the server and render the resource of the server. A URL is a heterogeneous combination of protocols, hostname, path and query string(if any). Each URL is mapped with a unique IP address of its own. This IP address is then passed onto the DNS which takes the IP address and looks up in different servers.

This brings us to the next set of fancy terms, which is DNS and IP Address.

DNS or Domain Name Server is responsible for converting the human-readable URL (eg: https://codingdeck.com/) into machine-readable IP Address(eg: 104.24.123.112). This is possible because the DNS system works like a phonebook which maps the name with the number. This entire process is popularly known as DNS Lookup.

Now let's take up these fancy numbers which we called IP Address earlier. Each computer in order to communicate with other machines over the internet has been allotted with a unique identity which we call as IP address. We can think of IP address as the physical address where each computer or website resides and in order to visit them, we have to go to their address.

This brings us to the last stage were using the IP address we hit the Web Server and get back the response data rendered in our browser, which is nothing but the website we were trying to access.

This, in short, is how the internet works in the background when we try to access a website or web application from our devices.

Getting started with Git and Github

Humza Hasan — Wed, 17 Jun 2020 17:49:45 +0000

Steps for working on a new Project from scratch:

Precondition: You have already created a Github repository to commit codes to.

git init (Initialize git repository)
git status (check for untracked and tracked files)
git add . (for all files) or git add {filename}. (for a specific file)
git commit -m “message” (save changes to the local repository)
git remote add origin {remote url} (connecting to Github repository)
git push origin master or git push origin {branchname} (pushing code from local to remote master branch or other named branch)

Note : Please remember not to work on the master branch directly, always create different branches for different purposes. To work on branch use the following command always before adding codes to the staging area:
git checkout -b {branchname}

Steps to start working with other's repository and contributing:

Precondition: Fork the repository in Github which you want to contribute to.

git clone {remoteurl} (Clones your fork repository in local. For first time user)
or
git pull {original_repo_url} master (To always pull the latest code from main repository, from second time don't clone but pull)
git checkout -b {branchname} (Change the branch from master to other)
git add . or git add {filename}
git commit -m “message” (save changes to the local repository)
git remote add origin {remote url} (connecting to Github repository)
git push origin {branchname} (pushing code from local to remote branch)

NOTE: Post push request go to Github and create a pull request so that your changes can be added to the main program and be viewed by others too.

API 101

Humza Hasan — Sun, 07 Jun 2020 11:20:40 +0000

API or Application Programming Interface is a software intermediary that allows two applications to talk to each other. In simple words API is a software which helps you get your end result according to your need without worrying what process happens in the backend.

For example, the waiter of a restaurant you visit caters to your need by providing you the menu card, taking your order, serving your food and finally giving you the bill. You don't have to worry about how the food is getting prepared, you don't have to go to the kitchen to collect it nor you have to do the calculation of the bill. The waiter here serves the purpose of API between you and the restaurant, who does all the work without exposing you the detailed process which happens in the behind the kitchen doors.

Types of API

Based on Ownership - Public API, Partner API, Internal API, Composite API
Based on Protocols - Rest, SOAP, RPC
Based on Categorized - Data API, Internal Service API, External Service API, User Experience API
Based on Communication Level - High level abrstraction, Low level abstraction

In this article we will be looking into the first two types, i.e, Based on Ownership and Based on Protocols.

Based on Ownership

Public API - Also known as Open API, are those APIs which are publically available for use without any restriction to access.
Private API - In this type of API a developer needs specific rights or licenses in order to access as they are not available to the public.
Internal API - These types of API are used internally inside an organization. It can be used to different teams internally to improve its product and services.
Composite API - In this type of API design we approach to batch API requests sequentially into a single API call. Rather than multiple round trips to a server, a client can make one API request with a chain of calls and receive one response.

Based on Protocols

SOAP - SOAP – Simple Object Access Protocol – is probably the better known of the two models.SOAP relies heavily on XML, and together with schemas, defines a very strongly typed messaging framework.Every operation the service provides is explicitly defined, along with the XML structure of the request and response for that operation.
REST - REST
REST – stands for Representational State Transfer. It is a software architecture style that relies on a stateless communications protocol, most commonly, HTTP. REST structures data in XML, YAML, or any other format that is machine-readable, but usually JSON is most widely used. REST follows the object-oriented programming paradigm of noun-verb. REST is very data-driven, compared to SOAP, which is strongly function-driven. You may see people refer to them as RESTful APIs or RESTful web services. They mean the same thing and can be interchangeable.

Resources

Array Operation with Javascript

Humza Hasan — Wed, 03 Jun 2020 07:22:19 +0000

In this article, we will be discussing the various functionalities offered by Javascript for Arrays. We will be starting with the basic Javascript functionalities along with some new features added in ES6.
So it’s almost summer and I guess fruits gonna be the best array name to start our experiments.

Note: Writing this article to serve the purpose of quick revision through most of the array features offered by Javascript.

Array Declaration

let fruits = [“mango”,”apple”];
console.log(fruits);
//Output :[ ‘mango’, ‘apple’ ]

Array length

let fruits = [“mango”,”apple”];
console.log(fruits.length);
//Output : 2

Adding element at the end of the array

fruits.push(“watermelon”);
console.log(fruits);
//Output : [ ‘mango’, ‘apple’, ‘watermelon’ ]

Deleting element from the end of the array

fruits.pop();
console.log(fruits);
//Output: [ ‘mango’, ‘apple’ ]

Deleting element from the start of the array

fruits.shift();
console.log(fruits);
//Output: [ ‘apple’ ]

Adding element at the start of the array

fruits.unshift(“banana”);
console.log(fruits);
//Output: [ ‘banana’, ‘apple’ ]

Slicing Array into parts

numbers = [12,31,23,76,3,9,45,2];
let fristTwo = numbers.slice(0,2);
console.log(fristTwo)
//Output: [12, 31]

Sort numeric array

numbers = [12,31,23,76,3,9,45,2];
console.log(“Original Array: “ + numbers)
let numberSort = numbers.sort((a,b) => { return a-b })
// return b-a for decending order
console.log(“Sorted Array: “ + numberSort)
/*Output:
Original Array: 12,31,23,76,3,9,45,2
Sorted Array: 2,3,9,12,23,31,45,76 */

Sort array alphabetically

fruits = [“mango”,”apple”,”watermelon”,”banana”]
let fruitSort = fruits.sort()
console.log(fruitSort)
//Output: [ 'apple', 'banana', 'mango', 'watermelon' ]

Reversing Array

fruits = [“mango”,”apple”,”watermelon”,”banana”]
fruits.reverse()
console.log(fruits);
//Output: [ 'banana', 'watermelon', 'apple', 'mango' ]

Array Iteration

Looping through array using forEach

fruits = [“mango”,”apple”,”watermelon”,”banana”]
fruits.forEach((fruit,index) => {
console.log(`${fruit} is at index ${index} in the array`)
})
/*Output:
mango is at index 0 in the array
apple is at index 1 in the array
watermelon is at index 2 in the array
banana is at index 3 in the array */

Filtering array according to the requirement

let numbers = [12,31,23,76,3,9,45,2];
let evennumber = numbers.filter(number => number%2==0)
console.log(‘Original Array: ‘ + numbers)
console.log(‘Filtered Array: ‘ + evennumber)
/*Output:
Original Array: 12,31,23,76,3,9,45,2
Filtered Array: 12,76,2 */

Modifying array according to requirement

let numbers = [12,31,23,76,3,9,45,2];
let timeTwo = numbers.map(number => number*2)
console.log(‘Original Array: ‘ + numbers)
console.log(‘Modified Array: ‘ + timeTwo)
/*Output:
Original Array: 12,31,23,76,3,9,45,2
Modified Array: 24,62,46,152,6,18,90,4 */

Array to String

fruits = [ "apple", "banana", "mango", "watermelon" ]
console.log(fruits.toString)
//Output: apple,banana,mango,watermelon

Concatenation of two array

let fruits = [“apple”,”mango”,”banana”]
let veggies = [“potato”,”onion”,”spinach”]
let food = fruits.concat(veggies);
console.log(food)
//Output: [ 'apple', 'mango', 'banana', 'potato', 'onion', 'spinach' ]

To be updated soon with few more functionalities of Array

React 101

Humza Hasan — Mon, 01 Jun 2020 06:35:36 +0000

Welcome to the fifth article of 'The Learning's 101' series. I am at Day 99 of 100DaysOfCode challenge. Pretty happy with the entire journey, this is going to be the second last article for this series!

So Let's React

React is an open-source Javascript library for building user interface originally introduced by Facebook in the year 2013. React now is maintained by Facebook and a community of individual developers and companies.

Before Reactjs, developers were occupied building UI the hard way using Vanilla JS or with jQuery. But the development was slow, with plenty of bugs and errors as both of the said technology were not very UI centric.

That's when Facebook engineer Jordan Walke created React JS specifically to improve UI development.

So let's dive deeper into the world of React and start of with the fundamental piece of any React application, the component.

Component

A component is a piece of the user interface. So when we talk about a React application, we mean a bunch of components working together to form a seamless experience. For example,

if you see in the picture above, you can see a bunch of components such as Profile component(grey box), Vertical Navigation Bar(red box), Media component(green box),etc. All this together form the parent component which is called the App component which is basically your entire Twitter Application.

When you design a react application you start with identifying different components you have then slowly integrating each small components inside the App component to get the final application.

I hope this gave you an overview about react applications and components, now let us look into two big words which react brings along , JSX and Virtual DOM.

JSX

JSX or Javascript Extension is a syntax used by React which allows you to write Javascript code which looks like HTML. This combined syntax of HTML like text co-existing with Javascript, is then used by preprocessor (i.e., transpilers like Babel) to transform into standard JavaScript objects which can be parsed by Javascript engine present in the browsers.

So basically, by using JSX you can write code with HTML like text inside a Javascript file, and then Babel transforms it into actual Javascript code. Unlike our previous practise of putting Javascript into HTML, we have started placing HTML inside Javascript, all thanks to JSX!

Here is what JSX looks like:

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

Pretty cool!

Virtual DOM

Before jumping onto what Virtual DOM is, let's just revisit on DOM(Document Object Model). When a web page is loaded, the browser creates a Document Object Model of the page which is basically a structured tree like representation of the page. Something like this:

So the question lies that if we already have a DOM which can be manipulated why do we need a Virtual DOM ? The most appriopritate answer being the DOM manipulation is inefficient and slow.

When it comes to Virtual DOM, it is a lightweight representation of the DOM. It only a virtual representation and does not exist in memory. It's a tree data structure of plain Javascript object. It came into existence with React and now is effectively used by other frameworks like Angular and Vue.

So on the initial render JSX tells the compiler how to construct the Virtual DOM tree. Post this the Render() function of React will render the Virtual DOM to the Real DOM.

Nodejs 101

Humza Hasan — Sat, 30 May 2020 18:44:37 +0000

Welcome to the fourth article of my series 'The Learning's 101'. At the time of writing this article, I am on Day 97 of the #100DaysOfCode challenge.

In this article, I am not going to start with the basic answer to ' What is Nodejs?' as we generally do. I am starting with giving you reasons to love Nodejs.

Why do I love Nodejs ?

First things first, I love Javascript! Even though there were times when I was literally banging my against a wall while understanding DOM manipulation.

The fact that we can have javascript at frontend(React, Angular or Vue) as well as backend(Node) along with a javascript based data storing format(JSON). All this makes life easier for a developer.

#JavascriptEverywhere

When Nodejs walks into the room it also brings along the largest package repository(npm) with it. npm has a collection of about 350,000 packages to make your life easier.

npm ecosystem is open to all, and anyone can publish their own module that can be listed in the npm repository.Some of the most useful npm modules are express, socket.io, connect, router, mongoose, etc.

Javascript gives power to your Nodejs app to be asychronous and of non-blocking nature which is very satisying for everyone.

I can send a request to an API which will not sent result back instantly, but even during the wait, I can work on a separate task without being blocked by the API.

Where does NodeJS shines, and where it doesn't ?

Like every other programming langauge,there are some bright side and some gray areas as well. Not all kind of application can be made using Nodejs as it does have some drawbacks.

Here are few types of application which shine out when using Nodejs for developement.

Non-blocking
Event driven
Data Intensive
I/O Intensive

If your application focuses majorly on Data retrival, I/O operation, API call in an eventful manner and run in a non-blocking manner with an asychronous approach then Nodejs is your go to techstack.

But if you are dealing with an application which wants you to do any of the following :

Data Calculation
Processor Intensive
Blocking Operation

In these senarios, Nodejs isn't the best solution.

Your Ideal Built with Nodejs are...

If you are planning to build:

Version Control 101

Humza Hasan — Thu, 28 May 2020 04:59:25 +0000

Welcome to my third article from the series 'The Learning's 101'. In this article, I will be sharing with you my experience with the Version control system i.e, Git and the cloud-based hosting services i.e, Github or Bitbucket.

Version Control

Well according to me, Version control is one of the most important skills for a developer. Right from using it for personal projects to using it at an organization level for the projects, version control plays a vital role in my life. Without the help of the version control system, I would be somewhat like this..

From helping me keep track of my work, creating checkpoints, and reverting back to original code if things don't go as planned in a personal project to collaboratively contributing with my fellow developers on different files and codebases on the organization level, Version control is the answer to all.

But what exactly is Version control, let's find out.

By a quick google search we get this:

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.

Why you should love Version Control?

When you are developing a project, irrespective of the domain at some point in time you come to trial, error, and correction to finally reach a successful outcome. That's where version control enters the room!

Version control helps you keep track and log all these changes by creating a virtual snapshot of each of the scenarios with the added ability to go back if things don't turn the way you want it to be. Apart from logging changes made to different files, version control also helps when collaborating with other developers by always helping you work on the latest version of the files so that even if someone else had made changes on a particular file you get to work on the latest version after you pull the changes.

Version Control system vs Cloud-hosting Services

Version Control system vs Cloud-hosting Services or let's just say Git vs Github !

When it comes to the version control system, Git is by far the most favorite developer toolkit. Other than Git, we have Subversion and Mercurical but clearly Git hub is preferred by 92% of the developers.

We have already discussed a lot on version control lets just pick up speed on cloud-hosting services too. Cloud-hosting services are the online database that allows you to keep track of your version control project which is available locally on your computer.

For simplicity, we can say that Github is to Git what Facebook is to you. Well, this means that Facebook is your online record of activities and you are you. Right?

When it comes to cloud-hosting services, we do have plenty of options. Github being most favorite among the developers and open-source enthusiast which give the option to create unlimited public as well as private repositories, but when it comes to organization Bitbucket is preferred one because it comes from Atlassian software family, which lets you integrate your other Atlassian products like Jira, Bamboo, and HipChat, and communicates well with all of these. Another popular name being GitLab because of its continuous integration (CI) capabilities which automate the testing and delivery of your code, which means you can get more done and spend less time waiting for tests to pass.

Wrapping It Up

So although all this might sound very sketchy to few, honestly it is not. Version control is just one of the toolkit which was designed to make a developer's life easy-peezy. It does not matter if you are working single-handily on a project or with co-workers, version control will surely lift things up for you!

With that said, "Happy Committing"

UI and UX Design 101

Humza Hasan — Mon, 18 May 2020 23:16:43 +0000

Welcome to my second article from the series 'The Learning's 101'. In this article, I will be sharing with you about the things I explored in UI and UX domain, the differences between UI and UX designer, and lastly my take as a newbie developer on UI & UX Design.

First things first, let us address the elephant in the room.

UI and UX Design are two separate entities in the web and app development world.

Well, I bet you already knew that. UI Design or User Interface Design is the design of the user interface. The goal of UI design is to make the user's interaction with the website/application as simple and efficient as possible.

When it comes to UX Design or User Experience Design, it more about enhancing customer satisfaction during their interaction with the product(website/application) by improving its usability and accessibility.

UI is how good the car looks, while UX is how you feel driving it.

A little about UI and UX Designer's

UI Designer - A UI Designer, is someone whose work starts with the market standard analysis and ends with an application efficient enough to make user interaction and perform actions. In between this starting and ending point, there are many things which a UI designer work on, here are some to name a few:

structuring the look and feel of the application
designing the various components with varied color schemes and typography
adding result of user interaction and animation
cross-device compatibility

UX Designer - The work-life of a UX designer usually starts with competitor and market research, moving on to brainstorming, implementation, and finally reporting. In between these general steps which a UX designer follows, here are some of the prominent ones:

content structuring
communication with the developer and UI designer
post-launch experience analytics
gathering user feedback and improvement based on it

Note : Just like a developer who is constantly working to improve the features and add functionalities to an application, both UI and UX designer work on improving the user's experience while interacting with the application.

From a personal prespective

From a personal point of view, I have come to an understanding that if you are more towards designing and visual problem-solving approach then UI Design is the domain for you, but if you are looking for something more cognitive and analytical then you should go with UX design.

Not all UI designers are UX designers, but mostly all UX designers are good UI designers.

Also to add, when the comparison between front-end developer and UI/UX designer comes to play, I will suggest that if you are someone who enjoys writing code along with designing stuff then you should definitely go for front-end, but if you are more of someone who likes the visual and the analytics more than the coding experience then UI/UX is the field which is going to take you to heights.

The Resources I Love

Here are few of the zillions websites I visit to draw some inspirations for better UI/UX while creating a new website

Also, do check out Careerfoundy, this has a complete package of everything you want to know about UI/UX along with coding and analytics.

Happy Designing