DEV Community: Zeeshan Safdar

What is cross-origin? Why do we write cross-origin in our code?

Zeeshan Safdar — Sat, 03 Jun 2023 05:42:37 +0000

In web development, the term "cross-origin" refers to interactions between web pages or scripts that originate from different domains, protocols, or ports. Browsers enforce a security policy called the "same-origin policy" that restricts these interactions by default. The policy aims to prevent malicious websites from accessing or manipulating data from other websites without explicit permission.

Example

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>

The crossorigin attribute I included in my code snippet is used when loading external resources, such as scripts, stylesheets, or images, from a different origin. It is primarily used for loading resources that support Cross-Origin Resource Sharing (CORS).

When I set the crossorigin attribute to a value, such as "anonymous" or "use-credentials," I indicate to the browser how it should handle any cross-origin requests made while fetching the resource.

In my example, By including the crossorigin attribute, I am specifying that the browser should handle any cross-origin requests made by this script according to the CORS policy. This can include making AJAX requests to other domains or loading additional resources like stylesheets or images.

It's important to note that the use of the crossorigin attribute depends on the specific resource being loaded and whether the server hosting the resource supports CORS headers. If the server does not send the necessary CORS headers, the crossorigin attribute may not have any effect.

To fully understand the concept of CORS, let's have a look into it in detail.

What is CDN? Why do we use CDN?

Zeeshan Safdar — Wed, 31 May 2023 18:44:48 +0000

Do you know what is CDN? No, Don't worry, let's have a look on CDN.

CDN stands for Content Delivery Network. Think of a CDN (Content Delivery Network) as a network of servers spread across different locations around the world. These servers work together to deliver web content, like images, videos, and files, to users quickly and efficiently.

CDNs are used for several reasons:

Improved Performance: By placing servers closer to end-users, CDNs reduce the distance that content needs to travel, resulting in faster loading times and improved overall performance. This is especially beneficial for delivering content to users located far from the origin server.

Scalability: CDNs are designed to handle high traffic volumes and sudden spikes in demand. They distribute the load across multiple servers, preventing any single server from being overwhelmed, and ensuring a smooth user experience during peak times.

Reliability and Redundancy: CDNs employ redundancy and failover mechanisms to ensure high availability of content. If one server fails, another server in the network can seamlessly take over and continue serving the content.

Bandwidth Optimization: CDNs help optimize bandwidth usage by caching content at various edge server locations. When a user requests content, the CDN serves it from the server closest to the user, reducing the load on the origin server and conserving bandwidth.

Global Reach: CDNs have a wide network presence, enabling content to be delivered quickly to users worldwide. This is particularly advantageous for global businesses with a diverse user base.

Overall, CDNs enhance the speed, reliability, and scalability of content delivery, resulting in an improved user experience, reduced server load, and more efficient use of network resources.

Still confused?, don't worry, checkout this video for better understanding.

Understanding Git and Github

Zeeshan Safdar — Sat, 23 Jul 2022 08:04:08 +0000

Hi Folks, Are you get started with Version Control System? Or just want to learn about git? Don't worry, today we will learn these in details.

What and Why - Git and Github

Git is a version control system. And what is version control system exactly, let's find out.
Imagine you have some project and you want to collaborate with other people. Or Imagine you add a new feature into your project, and now your application breaks, and it is not running as it was running before, and you think,

Ohh, It would be very great, If I could go back in the past, in that codebase in which my application was running. I wish there is some sort of way.

Congratulations!!! Your wish came true.

Thanks to Version Control System that helps us to track and manage changes to our project. It helps us to maintain the history of our project, like at what particular point of time, which person made which change, where in the project.

So you understand the Version Control System, and what is relationship between Git and Version Control System? Git is a version control system. And there are other version control systems as well, like SVN, TFS etc. But we use Git because it is so popular, and mostly programmers like you and me use Git.

And what is Github?
Github is a platform, that allows us to host our Git projects/Repositories.

Think both like an email service. You use email service in you day to day life, right? You send an email via a platform like Gmail, Outlook etc. These are some platforms that give you an interface to use this service, which is send an email. Now relate with it Git and Github, you use Git with some other platforms, like Github, Gitlab, Bitbucket etc. These platforms allow us to host our projects on their website, so that other people from around the world can share, look, contribute our projects.
You get the idea... right!

And WHY we are using Git and Github as there are so many version control systems (like CVS, SVN, Mercurial, Monotone etc.) and platforms (like Gitlab, Bitbucket etc.) because these are so popular in the market. Everybody use Git and Github as these are the standards.
You get the idea... right!

A Basic Project (Steps)

Make a repository in the Github website
Make a folder into your PC
run command git init into your folder
rum command git remote add origin insert_https_project_link_here to connect your Github repository with your current(local) folder
run command git remote -v to view your all remote urls
Add files into your folder, make some changes also
run command git status to view the changes
run command git add file_name or git add . (to add everything in the current folder)
run command git commit -m "your_message_here" to Committing the files
run command git push origin master to push your local changes to remote repository

Congratulations!!! You create your first Github repo

Now I will list down some basic concepts that you use daily in your git work

Some Keywords and Concepts

You never need to become a master of Git and Github before using it. You just need a basic understanding of it to get started. Mostly, in the industry, we use some concepts repetitively and these are the followings.

Repository/repo: This is your project on the platform or project in which you are working on.

Branch: A branch is a new/separate version of the main repository. There will be a main or master branch which is the first or default branch in the repository. Let' say I am working on a project, and 7 other developers are also working on the same project. If all the others are working in the same branch, It will be very difficult to maintain all the work. If I am working on a feature called login feature, then I will make a new branch let's say feature/login and will work on this branch without impacting the other code work. Once my work will complete, I will merge my feature/login branch into the main or master branch.

Never commit on the main or master branch since it's the one
used by the people, to prevent any mishaps.

Push: Let's say I complete my login work (mentioned above), now I need to push my local code into our repository. For that we use push concept, I will run the command and push my changes to the branch.
git push origin feature/login
-- feature/login is the branch name

Note: Before pushing my changes, I need to pull the latest code in my current branch.

Pull: Let's say I was working on my login work, and also one my friend also working on login functionality and his part is to beautify the UI part. He done his changes and push his code into the feature/login branch. Now, If I need his changes, I need to pull his changes from the Git. And the command I will use is
git pull origin feature/login
-- feature/login is the branch name

Merge: Let's say I completed my work of login functionality, and now I want to merge with it main code base and accessible to others to use my functionality. For this I need to merge my branch with the main branch or master branch.

Merge Conflict: Let's say, I was working on a file in my feature/login branch, and my other friend was also working on the same file. We both make a change on the same line, when I take pull of his code, then Git will on confuse, wether my code will be on this line or my friend's code. This situation is called conflict. We then resolve this issue, by telling the Git that whose code will be gone to the repository.

Basic Git Commands

To check if git is installed in your PC
git
To initialize an empty Git repository in your folder
git init
To view the changes or the untracked files in the
project that's not been saved yet
git status
Staging the files
git add file_name or git add . (to stage everything in
the current folder)
Committing the files
git commit -m "your_message_here"
To unstage or remove a file from the staging level
git restore --staged file_name.txt
To view the entire history of the project
git log
Removing a commit from the history of a project
git reset insert_commit_hash_id_to_which_you_want_to_go_back_to_here
(all the commits or changes before this will go back to
the unstaged area now)
After you stage a few files but then you want to have a
clean codebase or reuse those files later, we can
stash those changes to go back to the commit before
they were staged
git stash
Bringing back those changes or pop them from the
stash
git stash pop
To clear the changes or files in your stash
git stash clear

How Git works

Connecting your Remote Repository to Local Repository
git remote add origin insert_https_project_link_here
Pushing local changes to remote repository
git push origin master (we're pushing to the url origin,
and the branch master)
To view all your remote urls
git remote -v
Move to other branch
git checkout branch_name
Merging your branch to main of project
git merge branch_name

If you are still feel stuck or confuse, don't worry,
Follow the video that will clear your concepts.
Complete Git and GitHub Tutorial - Kunal Kushwaha

Follow this very useful PDF for all the commands that you need.
Git Cheat Sheet Education