Forem: Muhammad Asif

Laravel taught me one of the most underrated lessons in software development.

Muhammad Asif — Tue, 19 Aug 2025 15:41:39 +0000

🚀 Laravel taught me one of the most underrated lessons in software development.

It’s not just about writing controllers, routes, or migrations...

It’s about building systems that scale with clarity and maintainability.

After 15+ years, here’s what Laravel made me realize:
✅ Convention beats confusion → Laravel’s opinionated structure saves time.
✅ Eloquent is more than ORM → It teaches how to think in relationships, not just tables.
✅ Middleware isn’t just code → It’s how you keep projects secure, fast, and clean.
✅ Artisan CLI → Cuts repetitive tasks and helps you focus on real problems.

When I embraced these, I stopped seeing Laravel as just a framework…
👉 I started seeing it as a mindset for clean architecture.

💡 Pro tip for developers: Don’t fight Laravel’s conventions—use them. They exist to make you productive and to let you focus on solving business problems, not reinventing the wheel.

👉 What’s the biggest mindset shift Laravel has given you?

Laravel #PHP #SoftwareDevelopment #WebDevelopment #CleanCode #Scalability #Developers #TechMindset

Most developers write code. But fewer developers actually ship products.

Muhammad Asif — Mon, 18 Aug 2025 16:56:38 +0000

🚨Most developers write code. But fewer developers actually ship products.

💡 Ever noticed how many projects get stuck at "it works on my machine"?
That’s not just a meme—it’s a career trap.

Over 4+ years as a software developer working with PHP, Laravel, MySQL, JavaScript, and DevOps tools, I’ve realized something powerful:
👉 Your real value isn’t only in writing clean code—it’s in delivering working software that runs in production.

Here’s what changed my game:
✅ Learning to deploy Laravel apps on different servers (Apache, Nginx, shared hosting, VPS, cloud).
✅ Understanding databases beyond queries—optimizing MySQL for performance.
✅ Bridging frontend (JavaScript) with backend (PHP/Laravel) so clients see results faster.
✅ Picking up just enough DevOps to avoid waiting for someone else to "push my work live."

When you combine these skills → You’re not just a coder, you become a problem-solver who takes projects from idea → deployment → impact.

🔑 That’s the difference between being replaceable and being irreplaceable.

👉 So here’s my question for you:
Do you focus more on writing code or on delivering working products?

SoftwareDevelopment #Laravel #PHP #JavaScript #MySQL #DevOps #WebDevelopment #Coding #Programmer #CareerGrowth #Deployment

Time Complexity - The Easiest Way

Muhammad Asif — Thu, 07 Jul 2022 15:53:07 +0000

Hey, What's up guys😊

In this article, I will talk about a basic topic in computer programming which is Time Complexity(O). Though this is basic thing but many student, senior/mid level programmers are don't understand clearly this Time Complexity. I hope you guys practice with my code and Read carefully this article so that you can understand this clearly.

What is Time Complexity?
A Programs takes how much time to execute is called Time Complexity
It is always better to select the most efficient algorithm when a simple problem can solve with different methods. Time complexity defines by Big O notation.

Time Complexity depends on some operations --

Assignment operation -> x = 10
Comparison operation -> a > b
Mathematical operation -> a + b, a -b
Function call and it's inside work -> function() and include all the operations

I will start coding into C++, Because most of beginners are learn C and C++ language in their classes. So include the important header files

#include <stdio.h>
#include <iostream>
using namespace std;

All code will be inside the int main() function. Let's Jump into code...

1. Time Complexity O(1):
When the number of operations in the program does not depend on the input and the number of operations is constant, we call it O(n).if any problem has one assignment operation then the Time Complexity will be O(1). Example--

int n1, n2, result1;
    n1 = 10;    // 1 assignment operation
    n2 = 20;    // 1 assignment operation
    result1 = n1 + n2;   // 2 assignment operation =, +
    cout << "result no 1: " << result1 <<endl; //using double endl for line space
    cout << endl;

We see that, there is 4 operations, but the Time complexity will be O(1). Because here operation is constant. No matter how much input value is. the operation does not depend on input values.

2. Time Complexity O(n):
The number of operations is proportional to N values

int n3, result2;
    cout<< "Type O(1) Input_";
    // scanf("%d", &n);
    cin >> n3;
    result2 = n3 * (n3 + 1) / 2;    //here 1 assignment and 3 mathmatical operation = 4 operation
    cout << "result no 2: " << result2 << endl;
    cout << endl;

So the Time Complexity will be O(1). whatever the n value is, the operation is constant here too.

Now I will solve the same type problem in loop. the output will be linear type. But the Time Complexity will be same? what will be the complexity of this program? let's see.

int i, n4, result3;
    cout << "type O(n) input_";
    cin >> n4;
    result3 = 0;
    for(i = 0; i <= n4; i++){
        result3 = result3 + 1;
        cout << "result no 3 = " << result3 << endl;
    }
    cout << endl;

Here we see that, if n value is 3, the loop will run 3 time and the operations will run 6 times. because there is two operations(=, +). 1 loop run = 2 operation run.
if n = 1 operation = 2
n = 5 operation = 10
n = 10 operation = 20
n is proportional to operation. so the operation is increasing by 2 times. so this 2 is constant we know and we can remove this 2. Now the complexity is O(n).

3. Time Complexity O(n^2):
The value of n will be the square of the number of operations

int i2, j2, n5, count;
    cout << "Type O(n^2) input_";
    cin >> n5;
    count = 0;
    for(i2 = 0; i2 < n5; i2++){
        for(j2 = 0; j2 < n5; j2++){
            count = count + 1;
        }
    }
    cout << "----result no 4----" << endl;
    cout << "n = " << n5 << ", count = " << count << endl;
    cout << endl;

For two loop operation
if n = 1 , count = 1
n = 2, count = 4
n = 3, count = 9,
n = 10, count = 100
We see that, the value of count is increasing by 2 multiplying, which i n^2. so the Time Complexity will be O(n^2). when the two loop will be depend on same value(n), then we can call it O(n^2), otherwise it will be O(n). Because the operation numbers are constant, whatever it is 2, 3, 4 etc.

4. Time Complexity O(n^3):
think about loop, The number of loops depends on the value of n. if the loop is 3 times and the nth value is 3 times the Time Complexity will be O(n^3) and the each operation will run for 3 times. that's the main fact--

int i3, j3, k3, n6, count2;
    cout << "Type O(n^3) input_";
    cin >> n6;
    for(i3 = 0; i3 < n6; i3++){
        for(j3 = 0; j3 < n6; j3++){
            for(k3 = 0; k3 < n6; k3++){
                count2 = count2 + 1;
            }
        }
    }
    cout << "----result no 5----" << endl;
    cout << "n = " << n6 << ", count = " << count2 << endl;

If we add another loop, the complexity will be O(n^4). Basically we don't use more complexity than O(n^3) in our program. So remember this.

How the Big O Increase?

O(1) - There no change in time by increasing input value. whatever the input value the time is same and operation will be same.

O(n) - The number of operations is proportional to N values. the operation and n will be same. so it will take equal time

O(n^2) - The value of n will be the square of the number of operations. the operation numbers are multiply by 2 times.

O(n^3) - This operation numbers are multiply by 3 times of n value. Takes more time to run.

O(n!) - The factorial n will be the highest Time Complexity. You can search it on google or YouTube.

Note:
By mistake if you are using four nested loop, that mean's something is wrong and be careful about that program.
Don't try to memorize this algorithm, always practice, do code, mind it and this is good practice.

Click here to see the full code

Wrapping Up

I hope you enjoyed the article, if yes then don't forget to press ❤️ and Subscribe. You can also bookmark it for later use. It was fun to create this article and If you have any queries or suggestions don't hesitate to drop them. See you.
You can extend your support by giving me stars on GitHub Profile.😊👇
G i t h u b
P o r t f o l i o
L i n k e d i n

Support

Buy me a Coffee
#muhammadasif #webdeveloper #bangladesh

Best NPM Package for React.js Part - 2

Muhammad Asif — Fri, 24 Jun 2022 15:39:30 +0000

At my previous article, I share 20 React.js packages. If you didn't read that check it out Best NPM Package for React.js part -1 and then continue this article.

React front-end Design & Development for some important "npm" packages that will play a very helpful role in your daily work. These packages are widely used and they will play a great role in making your work easier.

A. Html-react-parser:
When we write blogs, we have to post them from our backend or admin panel. However, when we make posts, they are stored in the database as normal text, but if we use this plugin, the entire HTML structure will be stored in the database. This means that we can send full html through this plugin.
Example: parse('<h1>single</h1>'); That is, we get the output here just like that <h1>single</h1>, Another will be completely stored in the database.

https://www.npmjs.com/package/html-react-parser

B. Axios:
This is a popular plugin for receiving HTTP clients. Usually in client site we have to work with API. It is mandatory to use API for loading data. But in the beginning we use fetch (). But the most interesting thing is that this plugin is so simple that you can load the API very quickly
Example:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

https://www.npmjs.com/package/axios

C. React-share:
In various blog posts we can see at the bottom or at the top. Some social networks have a system of sharing. We can take such action if we want through this plugin. The function of this plugin is to connect with social networks, that is, if you want to share your post on social networks, you can do it through this plugin.

https://www.npmjs.com/package/react-share

D. Export-from-json:
This is commonly used to export json files. Export to plain text, css, html, json, csv, xls, xml files from JSON. If you need to export from JSON file to plain text, css, html, json, csv, xls, xml files then you can use it.

https://www.npmjs.com/package/export-from-json

E. EmailJS:
We usually exchange information in the contact list. The communication system starts from the contact list and you can make the communication system very easy with this plugin, which means you can easily get the files in the contact list via email with this plugin.

https://www.emailjs.com/docs/examples/reactjs/

F. Progressbar:
Most of the time we see Progressbar in website design, Progressbar is some symbolic design which shows how much knowledge he has acquired on a subject or all the information of a company. You can create your own design using the plugins.

G. Rich editor:
The Rich Text Editor is a tool that allows you to add or edit content, images, links, and other components on the page without having to know any code. It displays the content and any formatting as it would display in the browser. These plugins are related to html-react-parser.

H. React-tabs:
I can't go on without it. I have had to use this plugin on every website I create. In a word, extraordinary. I even created menu / navbar with this plugin. However, other frameworks have similar designs, such as the Bootstrap tab, but I will put this React-tabs plugin at the top.

https://www.npmjs.com/package/react-tabs

I. Scroll Effect:
These plugins are quite useful for CSS design. These plugins allow you to make a number of changes as you scroll through your website.

https://www.npmjs.com/package/react-scroll-parallax
https://www.npmjs.com/package/react-custom-scroll (This plugin can be used to change the scroll bar design on the right side of the browser)
https://www.npmjs.com/package/react-infinite-scroller
https://www.npmjs.com/package/react-custom-scrollbars

J. React Date Picker:
By hearing the name you can understand what a job can be. A simple and reusable Datepicker component for React. Many times we may need to count the dates on the website. You can easily pick up time with this plugin. Very popular plugin that is widely used.

K. React-select:
This is a very advanced topic. Usually there is a tag called html select. Which is used to select. However w3school on this website (https://www.w3schools.com/tags/tag_option.asp) is very normal but if you want to get some features in advance then this npm React-select package is not an option. A little complicated, however, if you read their documentation well, you can easily use it.
The last 2 days I had a lot of trouble using this package, but I did not give up and after spending about 14 hours I solved the problem. I said that you have to read the documentation well. I read the documentation line by line over time and then he brought the codes to their proper status.

https://www.npmjs.com/package/react-select

L. React-accessible-accordion:
After hearing the name Accordion, you understand what it does. I clicked on a text or an icon and immediately a section at the bottom gave out some information, then I clicked on that icon and it closed. Ha's name is Accordion. You can use Bootstrap or any other framework that you have, but I like this plugin very much. I have also used it on some websites.

M. React Visibility Sensor:
is a very advanced topic. But it is very easy to understand. The last two months I purchased four react templates from Themeforest for research purposes only. And the most interesting package I've seen is this. Its function is the Sensor component for React that notifies you when it goes in or out of the window viewport.
This means that once your entire web page is loaded, the task will wait for you until you go to a specific section. Suppose you create a section called Counter on your website and there is a count of one to one hundred when data or website is reloaded. But one thing you will notice is that if your counter section is in the footer then you will see in the footer that counter 100 is full. You no longer see the counter being 100. And so the function of this React Visibility Sensor plugin is that the counter will not be counted until you go to that section. As soon as you see that section or that section of your monitor, that counter will start counting. In other words, by turning the scroll of the mouse, you will start counting from one to one hundred as soon as you go to the counter section.
Example: http://met-cifo.amitjs.com/about-us

https://www.npmjs.com/package/react-visibility-sensor

N. React Hook Form:
A very popular plugin is React Hook Form (Performant, flexible and extensible forms with easy-to-use validation). We have to create a lot of obligations when we work with Form, and so this plugin will help you a lot to do that. This plugin has a very simple structure and a lot of popularity. It can work with both react web and react native.

https://react-hook-form.com

O. React-helmet:
This plugin is very popular for dynamically setting metadata. I use this plugin on every website.
Example: http://met-cifo.amitjs.com/ (If you hover over the favicon of each page on this website, you will see that the metadata is seen separately on each page.)

https://www.npmjs.com/package/react-helmet

P. React-image-magnify:
When we visit an e-commerce website and hover the mouse over the product, the product is magnified and zoomed. You can do this with the React-image-magnify plugin. However, the setup is a little complicated, so read the documentation well.

https://www.npmjs.com/package/react-image-magnify

Q. React-modal:
Clicked on an icon and a pop up box appeared. This means that this plugin can be used to create pop-up models.

https://www.npmjs.com/package/react-modal

R. Countdown:
Countdown is used. On the website we usually see some information called counter which is mostly seen how many people are working in a company or how many people are in a company or how many projects have been completed. Such information is presented through a design. Suppose you have completed a project, now your design will be calculated from 1 to 100. You can do this by following the plugins below.

S. Table:
Table which is a very useful tag. When we have a lot of data in our hands, we have to take the help of tables to show that data. If you want, you can create and use the normal table format in w3schools. Again if you want something of advanced level then you can use this plugin I personally use these plugins.

T. React Rating:
We often have to use ratings to create feedback sections. You can create ratings very nicely with the help of these plugins below. Using these plugins, you can customize the designs through your own customization.

U. Typewriter Effect:
Various texts show that some texts are dancing and disappearing. Yes these are called Typewriter Effect. You can easily create text effects using these plugins given below.

Wrapping Up

Support

Buy me a Coffee
#muhammadasif #webdeveloper #bangladesh

Best NPM Package for React.js

Muhammad Asif — Wed, 22 Jun 2022 06:55:42 +0000

React front-end design and development feedback for some important "npm" packages that will play a very helpful role in your day-to-day work. These packages are widely used and will play a great role in making your job easier.

A. carousel Slider:
Of course we use sliders in a website. In order to catch 90% of the websites we have to use sliders. Here are three sliders.

https://www.npmjs.com/package/react-slick (I personally use it)
https://www.npmjs.com/package/rc-slider
https://www.npmjs.com/package/swiper

B. Marquee:
Many times we need a slider show that will continue automatically. Most of the time we use this Marquee design when we use the logo section. If you want you can use React Fast Marquee this npm package. Built by a very simple and very attractive design.

https://www.npmjs.com/package/react-fast-marquee

C. JavaScript image gallery and lightbox:
We may need to show gallery images a lot of the time. We've even seen many websites where gallery images start with pop-ups. You can use this package to show exactly the same gallery images through pop-ups.

D. Lazyload:
Listening to the name, you can understand what it does. This is Lazyload. When the content of a website becomes redundant, the website does not have much time to load and this Lazyload npm package will give you some features that are surprising. This means that your skin will load as much as you want - the whole page will never load. You will scroll the website and it will load as well as scroll. Due to which customers will be able to see your content even before your web page is completed.

https://www.npmjs.com/package/react-lazyload

E. Modal-video:
To create a website we may need to show youtube video or self made video and we have seen in many websites that clicking a button will show youtube video through pop-up and it will continue if you want. You can use the package to show YouTube video pop-ups in the same way.

F. Tooltip:
I hover the mouse over an item and suddenly I see something showing, yes it is called Tooltip. If you want, you can use this package to use beautiful Tooltip. There are several types of designs that are great.

G. Recharts:
Usually when we create dashboard or admin panel we have to look at the data through graph chart and this npm package has a unique role to show the data through graphat I have personally used it is quite good and friendly behavior. In the middle of it.

https://recharts.org/en-US

H. Animate:
And without animation, a website can never be 100 percent beautiful. Attraction to a website is created by the type of animation. Below I have given some animation usage npm packages which are very popular and top notch.

I. Alert:
By hearing the name you can understand what it might be like. We may use it when we need the signal on the website. For example, a person went to your website in contact form and sent a message to you, now he sent you a token to know if the work was successful and these npm packages are very useful for sending this token.

J. Google-maps:
We often have to put maps on the website and we have seen many websites that have maps so that the customer can know the location accurately. You can easily setup Google Maps using this npm package.

https://www.npmjs.com/package/@react-google-maps/api

K. Menu:
This allows you to create menus. Those who are struggling to create custom menus can use it. But I think if you can't create custom menus then you can use any framework like Bootstrap, material-ui etc. and if you like then you can also use this package.

L. Sticky Nav:
Many websites have Navbar position Fixed but with a little scrolling you can see an effective design Navbar from top to bottom and you can use this package to do this.

https://www.npmjs.com/package/react-js-stickynav

M. scroll-to-top:
Suppose you scroll down to the bottom footer of a website but for some reason you have to climb to the top, then what do you do? Usually what we do is turn the scroll and go up again but here is a package that you can use. If you click through an icon, you can go to the Home stage, that is, if you click on an icon with Footer, you can jump to the top.

N. Perfect-scrollbar:
One of the most popular packages is the Perfect-scrollbar, which is most commonly used in admin panels or dashboards. It places the data on the basis of a specific volume and creates a scrolling effect within that volume. If we put a lot of data on a normal website then the perpendicular of that website will be a lot so using this package thousands of data can be loaded in a specific section and they can be displayed in that section by scrolling.

https://www.npmjs.com/package/perfect-scrollbar

O. React-ui-scrollspy:
Many times we show all the items through one page, such as, Home, About, Blog, Contact, Portfolio etc. And just in case you need to scroll through the menu item and the section option activated through this package you can do all this work very easily.

https://www.npmjs.com/package/react-ui-scrollspy

P. React Icons:
No matter, just install and use. The benefits of this npm package cannot be overstated. We have to set up icons on the website normally and to set up this icon we have to go to different websites and gather crowds. You can get all the icons from here using this package if you want. Here you will find the icons--- Bootstrap Icons , BoxIcons Devicons, Feather Flat Color Icons, Font Awesome, Game Icons, Github Octicons icons, Grommet-Icons, Heroicons, IcoMoon Free, Ionicons 4, Ionicons 5, Material Design icons, Remix Icon, Simple Icons, Tabler Icons , Typicons, VS Code Icons, Weather Icons, css.gg

https://react-icons.github.io/react-icons/ (I can't go on without it).

Q. Spinners:
We have to place spinners when the website loads. You can use a great spinner using these npm packages.

R. React-code-input:
Many times we may need OTP (one-time password) from our mobile number. If you need to create a website in such a situation then you can use this npm package. It takes code input in a very nice way.

https://www.npmjs.com/package/react-code-input

S. React-currency-format:
E-commerce website may need to sort the amount of money in a format. And you can use this npm package to sort the amount of money.

T. React-countup:
This is very effective in creating designs that can increase a certain number of times over time. We see on most websites that such a company did a job and how many members they have in their team and also starts counting from zero is a specific. If you want, you can create it using this package.

https://www.npmjs.com/package/react-countup

Wrapping Up

Support

Buy me a Coffee
#muhammadasif #webdeveloper #bangladesh

password strength indicator in JavaScript

Muhammad Asif — Sun, 24 Apr 2022 14:59:51 +0000

Wrapping Up

Support

Buy me a Coffee

JavaScript closure in 2 minutes..

Muhammad Asif — Fri, 08 Apr 2022 16:16:03 +0000

Intro

Closure is one of the most important tricky concepts of JavaScript.
Many people's heads hang when they hear the name of Closure, but in this post I will prove that your fears were unfounded.
A common question on the interview board is Closure ??
So it is very important for us to know this.

The smart concept of JavaScript is Closure, Smart means there is something in it which is not in others. Closure really does something that others cannot do.
Before talking about Closure, I would like to ask you to know Scope, Lexical Scope, Context, Variable Life Cycle a little better.

Let's Start --

We know that the JavaScript engine normally executes all code in the default global context except for a single function call.
Because the function itself creates a context which is called functional context.

The life cycle of the variables that are used in a function lasts until the function is executed. As soon as the function is executed, the variables die.

Example:

function counter(){
var count = 0
return count +=1
}
counter() // 1
counter() // 1
counter() // 1

Here 3 times counter function was called & 3 times result came 1,1,1.
This means that if you call a function, its internal variable cannot store the previous data.

If we want this to come 1,2,3 then it is not going to be done through a function.
But it is possible to do this by creating closures,
Because he (Closure) remembers a lot like a lover who gets deception.

We know that all the parameters of OuterFunc get Variable InnerFunc Access through lexical scope and even if it returns the function.
Take a closer look at the code below:

function counter(){
var count=0
return function(){
return count += 1
}
}
var counter1 = counter() ;
counter1() // 1
counter1() // 2
counter1() // 3

Same !! How did this happen !?
Let me tell you what happened here

A function is declared named counter, a variable named count is taken and it is returned by adding 1 to InnerFunc.
Since the function in JavaScript is a fastclass function, the function can be returned in the form of value.
Here, since Counter1 is placed in the variable, we get the result only by calling Counter1 as a function.
Well understood !! But the second time I called the function, the count increased by 1 - how did it happen ???

Um, of course, yes, I know this, why it's something known in advance.
This means that even after a function is executed, it is the job of the Closure Viber to keep the internal variables and parameters alive.

I hope if you can understand this much better then you will get 6-7 effortlessly at 10.
If you want to get 10 out of 10, you can read the book Scope & Closures By Kyle Simpson.
And I, the student, will be 100% wrong, so I hope you will do a little constructive criticism without swearing.

Wrapping Up

Support

Buy me a Coffee

Let's Learn About SASS

Muhammad Asif — Fri, 01 Apr 2022 08:48:31 +0000

sass:

SASS is a pre-processor of CSS. The code is most beautiful and optimized when using it. SASS is written without curly brackets [{}], SCSS is written with curly brackets [{}].

Mainly SASS can be installed in two ways.

LIVE SASS COMPILER.
node package modules (NPM).

If you do it with the best NPM and with COMPILER, it will not issue browser support.

Now let's see how to install SASS?

first Method:

First come the compiler, now the code editor VS Code is very popular for coding. Go to its extension and install LIVE SASS COMPILER. Then create a file, create html and SASS file and turn on LIVE SASS COMPILER.

The second method is:

With Node Package Module (NPM):
First you have to go to the terminal and select the correct file.
You have to give the command


> npm init - Enter
> npm install / i sass -D (developer) Enter
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
{
"Format":"expanded",
or
"format":"compressed",
"extensionName": ".css",
"savePath":"/sass"
}
],

Go to the format option [compressed]> convert the code into a small file / [expanded]> the code will show the output exactly as it is written.
Once installed, go to the Jason file and type in the crypt option ("...")

Another is to extract the SASS file from the settings and set them there.

"scripts": {
"compile-sass": "sass style.scss style.css -style compiler --watch --no-source-map"
},

When you go to see the code manually you have to give the command in the terminal, when the code changes you have to give the command every time to see which is very paramatman. A nice solution is to turn on the WATCH option. For that, the crypt file first has SASS which refers to the main topic then there is the name of the compiler (you can name it as you like)> then when the code is compiled its place> there is code to indicate that it will not be compressed or expanded> atchwatch which makes the code live> No source map commands.

(--watch)

If you want to SASS beautifully, you have to learn these:

Variable
Operators
Extension / Inheritance
Rules
Value
Modules
Nesting
Mixin
Much more

Wrapping Up

Support

Buy me a Coffee

The 4 Common Programming Errors

Muhammad Asif — Sat, 19 Mar 2022 18:34:12 +0000

Hey, what's up mates,
At previous blog I was written about master the web API. If you didn't catch it yet, check it out right now. Because that was the special resource for developers, specially for JavaScript developers.
So, in this tutorial I have written about The most common problems of every developers, which is being stuck with software engineers. Developers should need an exact knowledge about this problems, because it stuck with our every single line of code. so let's get start.

Did you know, the program can be sick? Yes programs also get sick when we break the rules while writing programs. The program's errors are called programming errors and programming errors result in abnormal functioning of the program.

We all need to know what is programming error and what is the error in programming, because if the doctor can not catch the patient's disease, then the doctor will not be able to treat the patient properly. In the same way, if we can't understand what kind of error has occurred in this program after watching or doing a program, then we will not be able to run the program successfully. And when I can not solve the error of programming. Then we get frustrated that maybe the programming possibility by me.

I have even seen in many exam questions or job interviews that there is an error program to tell where it is wrong and what kind of mistake it is.

Programming error is an invalid operation performed by a user which results in abnormal operation of the program.
Programming errors are often undetectable until the program is compiled or executed. Some errors prevent the program from being compiled or executed. Errors should be removed before compiling and executing in this way.

The most common errors can be broadly classified as follows.

Syntax Error:

The errors that occur when you violate the C / C ++ syntax writing rules are known as Syntax Error. This compiler error indicates something that must be corrected before compiling the code. All of these errors are detected by the compiler and are thus known as compile-time errors.
The most frequent syntax errors are:

Missing parentheses (}).
Print without declaring the value of the variable.
If the semicolon is not given at the end of the program statement.

Run-Time Error:

Errors that occur during program execution (run-time) after successful compilation are called run-time errors. One of the most common run-time errors is partitioning by zero, also known as section error. This type of error is difficult to find because the compiler does not point to the line where the error occurs.

Linker Error:

This error occurs when after compiling we link different object files to the main object using Ctrl + F9 key (RUN). These errors are created when the executable of the program cannot be created. This may be due to incorrect function prototyping, incorrect header file. One of the most common linker errors is writing Main () instead of main ().

Logical Error:

During the compilation and execution of a program, if the specified input value is given, the desired output is not obtained. Such errors that provide incorrect output but appear to be error-free are called logical errors. This is one of the most common mistakes made by newbies to programming.
These errors depend only on the logical thinking of the programmer and it is easy to determine if we follow the line of execution and why the program takes that path of execution.

Semantic Error:

This error does not make sense to the compiler when the program statement.

Wrapping Up

Support

Buy me a Coffee

Master the web storage API

Muhammad Asif — Sun, 13 Mar 2022 16:44:36 +0000

What is Web storage?

web storage is a storage location in our browser that can store data locally on our machine.
the web storage api is a small mechanism that the browser uses to securely store key/value pairs.

Key : The identifier of a piece of data
value : The value corresponding to the defined key

There are two types of storage in your browser:

Local Storage: Maintains storage for a given web page for an unlimited period of time until it is deleted.

Session Storage: Maintains storage for given web page until the browser is closed completely.

Basic Usage

We will use localStorage in our examples. For any key/value pair, the value given must always be a string. Numbers are automatically converted into strings when stored.
Let's say we want to remember the theme one user prefers every time they come back to our web page. We can use localStorage for this:

Storing Data:
We use the .setItem() method to store a key/value pair. The first parameter of the function is the key, the second is the value we want to assign to it.

localStorage.setItem('appTheme', 'dark');

Accessing Data:

console.log(localStorage.getItem('appTheme'));

Accessing the whole Storage object

console.log(localStorage);

Working With Objects

Since we can only store strings inside our browser's storage, we have to convert any objects we might want to store onto a JSON string:

const myData = { name: 'david', job: 'web developer'};
localStorage.setItem('user', JSON.stringify(myData));

You can see the changes in your browser's developer tools under the 'application' tab in Chrome or "Storage" tab in Firefox. Notice how the storage in only kept for the web page where we ran our code, the live server localhost:5500.

When you want to read an object that has been stringified, you will need to run JSON.parse() like so:

console.log(JSON.parse(localStorage.getItem('user')));

Deleting Data

Data stored using localStorage will not be deleted until it is deleted manually or the browser's history is erased.
So in order two delete items, we have two methods:

1. Delete specific items using removeItem()

localStorage.removeItem('appTheme');

this allows you to delete an item by specifying the key that belongs to it.

2. Clear the entire storage for the active web page

localStorage.clear();

This method is straight forward and will erase all key/value pairs entirely from the web page's local storage.

The Storage Event

We can detect storage changes on a web page by using the storage event listener.

Keep in mind that this event will only be triggered when opening two tabs with the same origin, so the same web page. If we make changes to the storage in the first tab, the event will triggered in the second tab and all other tabs will the same origin. You can use this event like so:

window.addEventLister('storage', (e)=>{
console.log(`Storage Event triggered from ${document.title}`)
console.log(e)
});

Other Facts

When browsing privately (incognito), localStorage will also be emptied when you close the browser, in the same way as sessionStorage is deleted.
With little setup, localStorage can be succesfully used as a small database for basic practice projects and you can implement a full CRUD functionality using it.
The browser's web page storage is actually an object, so you can treat it like one and perform actions such as:

localStorage.appTheme = 'dark':
localStorage['userName'] = 'david';

//using object methods
console.log(Object.values(localStorage))

However, it is best to use the setItem and getItem methods to avoid possible problems.

Wrapping Up

Support

Buy me a Coffee

Deep Copying in JavaScript just in few minutes

Muhammad Asif — Tue, 08 Mar 2022 06:40:38 +0000

In the previous Article, I have written about
Shallow Copying in javascript using Spread Operator
You can check it out!!

Deep Copy

Unlike the shallow copy, deep copy makes a copy of all the members of the old object, allocates separate memory location for the new object and then assigns the copied members to the new object. In this way, both the objects are independent of each other and in case of any modification to either one the other is not affected. Also, if one of the objects is deleted the other still remains in the memory. Now to create a deep copy of an object in JavaScript we use JSON.parse() and JSON.stringify() methods. Let us take an example to understand it better.

Code Implementation:

var employee = {
    eid: "E102",
    ename: "Jack",
    eaddress: "New York",
    salary: 50000
}
console.log("=========Deep Copy========");
var newEmployee = JSON.parse(JSON.stringify(employee));
console.log("Employee=> ", employee);
console.log("New Employee=> ", newEmployee);
console.log("---------After modification---------");
newEmployee.ename = "Beck";
newEmployee.salary = 70000;
console.log("Employee=> ", employee);
console.log("New Employee=> ", newEmployee);

Copy from Array:

Copying arrays is just as common as copying objects. A lot of the logic behind it is similar, since arrays are also just objects under the hood.

Nested Arrays:

Similar to objects, using the methods above to copy an array with another array or object inside will generate a shallow copy. To prevent that, also use JSON.parse(JSON.stringify(someArray))

Spread Operator:

const a = [1, 2, 3]

let b = [...a]

b[1] = 4

console.log(b[1]) // 4

console.log(a[1]) // 2

To deal with objects and arrays that are referenced inside of your instance, you would have to apply your newly learned skills about deep copying!
With that copy method, you can put as many values as you want in your constructor, without having to manually copy everything!

Wrapping Up

Support

Buy me a Coffee

Shallow Copying in JavaScript using Object Spread Operator

Muhammad Asif — Tue, 01 Mar 2022 13:08:51 +0000

For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value.

Copying a value in JavaScript is almost always shallow, as opposed to deep. That means that changes to deeply nested values will be visible in the copy as well as the original.

One way to create a shallow copy in JavaScript using the object spread operator...:

const myOriginal = {
  someProp: "with a string value",
  anotherProp: {
    withAnotherProp: 1,
    andAnotherProp: true
  }
};

const myShallowCopy = {...myOriginal};

Adding or changing a property directly on the shallow copy will only affect the copy, not the original:

myShallowCopy.aNewProp = "a new value";
console.log(myOriginal.aNewProp)
// ^ logs `undefined`

However, adding or changing a deeply nested property affects both the copy and the original:

myShallowCopy.anotherProp.aNewProp = "a new value";
console.log(myOriginal.anotherProp.aNewProp) 
// ^ logs `a new value`

The expression {...myOriginal} iterates over the (enumerable) properties of myOriginal using the Spread Operator. It uses the property name and value, and assigns them one by one to a freshly created, empty object. As such, the resulting object is identical in shape, but with its own copy of the list of properties and values. The values are copied, too, but so-called primitive values are handled differently by the JavaScript value than non-primitive values. To quote MDN:

In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are seven primitive data types: string, number, bigint, boolean, undefined, symbol, and null.

MDN — Primitive

Non-primitive values are handled as references, meaning that the act of copying the value is really just copying a reference to the same underlying object, resulting in the shallow copy behavior.

That's it for now. Next article I will write about Deep copies in JavaScript.

Wrapping Up

Support

Buy me a Coffee