DEV Community: Ateeq Syed

Five basic TypeScript Fundamentals you must know?

Ateeq Syed — Tue, 28 Feb 2023 17:48:00 +0000

We all loved understanding and writing code for Object Oriented Programming and Data Structures course but people who opt to write vanilla JavaScript tend to miss the concepts data types, classes, static type and null checking even if you did that course in Java or C++, but worry not, TypeScript is here to programmers who love writing low level programming code, let me introduce you to TypeScript

TypeScript is a popular programming language that is a superset of JavaScript. It adds several features to JavaScript, such as static typing and class-based object-oriented programming and here are five basic fundamentals you must know about TypeScript to get started and write low level code that you love:

Static Typing:

Static typing is the core feature of TypeScript that sets it apart from JavaScript. In JavaScript, variables can hold any type of data, and the data type can change at runtime. However, in TypeScript, variables have a static data type that is defined during development. This helps catch errors at compile time rather than at runtime, making code more robust.

For Example:

if a variable is defined as a string, it cannot be assigned a number value without throwing an error. This helps developers catch type errors earlier in the development process, making code more stable and reliable.

Object-Oriented Programming:

TypeScript supports class-based object-oriented programming. This allows developers to use features like inheritance and polymorphism that are not available in JavaScript. This makes it easier to write complex applications with a large number of objects and classes.

For Example:

Interfaces:

Interfaces are a key feature of TypeScript that allows developers to define the shape of objects. An interface defines the structure of an object, including the properties and methods it should have. This helps ensure that objects are used correctly and reduces the likelihood of runtime errors.

For Example:

An interface can define the shape of an object representing a user, including properties such as name, email, and age. Any object that implements this interface must have these properties, ensuring that the object is used correctly throughout the application.

Type Inference:

TypeScript has a powerful type inference system that allows the compiler to determine the type of a variable automatically. This means that developers do not need to explicitly define the type of every variable they create, making code faster to write and easier to read.

For Example:

Strict Null Checking:

TypeScript has a strict null checking feature that helps catch null and undefined errors at compile time. This is achieved by adding a question mark to the end of a variable's type definition, indicating that it can be null or undefined. This ensures that developers must explicitly handle null and undefined values, reducing the likelihood of runtime errors.

For Example:

in JavaScript, a function may return a null value, and if this value is not handled correctly, it can lead to errors. In TypeScript, strict null checking ensures that developers must handle null and undefined values correctly, making code more reliable.

Conclusion:

TypeScript is a powerful programming language that adds features like static typing, object-oriented programming, interfaces, type inference, and strict null checking to JavaScript. These features help make code more robust, reliable, and easier to maintain, making TypeScript an excellent choice for large-scale applications. By using TypeScript, developers can catch errors early in the development process, ensuring that their code is stable and reliable.

Why you should learn TypeScript in 2023?

Ateeq Syed — Tue, 28 Feb 2023 16:42:48 +0000

TypeScript is a popular and powerful programming language that has rapidly gained popularity among developers over the past few years. It is a superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code. However, TypeScript provides additional features, such as static typing, interfaces, and classes, that make it a more powerful and scalable language than JavaScript. Here are five reasons why you should learn TypeScript:

Type Safety:

One of the primary benefits of TypeScript is its strong typing system. By allowing developers to define the types of variables and function arguments, TypeScript makes it easier to catch errors before they become major issues in your codebase. This can lead to more stable and reliable applications, as well as faster debugging and troubleshooting. TypeScript's type system also helps developers to better understand and document their code, making it easier for others to collaborate and maintain the codebase.

Better Tooling:

TypeScript is designed to work well with modern development tools like Visual Studio Code, which provide advanced features like IntelliSense, code completion, and refactoring. These features can help you write code more efficiently and with fewer errors. Additionally, TypeScript integrates well with popular front-end frameworks like React and Angular, making it easier to build robust and scalable applications.

Popularity:

TypeScript has become increasingly popular among developers, and it is now used by many large tech companies such as Microsoft, Google, and Airbnb. By learning TypeScript, you will be better positioned to work on exciting and high-paying projects, as well as collaborate with other developers who are already familiar with the language.

Improved Code Quality:

The strong typing system in TypeScript can also help to improve code quality. By catching errors early in the development process, you can avoid costly bugs and issues that might arise later on. Additionally, TypeScript's modular design and support for object-oriented programming can make it easier to write maintainable and scalable code.

Learning Opportunity:

Finally, learning TypeScript can be a great opportunity for personal and professional growth. By learning a new language, you will be challenging yourself to think in new ways and develop new skills. This can help you to become a more well-rounded and versatile developer, as well as prepare you for future opportunities and challenges.

Conclusion

TypeScript is a powerful and popular programming language that offers many benefits to developers. Its strong typing system, better tooling, popularity, improved code quality, and learning opportunities make it a great choice for anyone looking to improve their coding skills and work on exciting projects. If you are a JavaScript developer looking to expand your skill set, or if you are simply interested in exploring new languages, TypeScript is definitely worth considering.

What is React's virtual DOM and How to increase its Performance (In Depth)

Ateeq Syed — Sat, 11 Feb 2023 20:14:20 +0000

React is a popular JavaScript library used for building user interfaces. It's fast, efficient, and has a large developer community. One of the key features that sets React apart from other UI libraries is its virtual DOM. In this article, we will take an in-depth look at React's virtual DOM and how it works to increase the performance of your application.

What is a Virtual DOM?

A virtual DOM is a lightweight, in-memory representation of the actual DOM (Document Object Model). When an application updates, the virtual DOM is updated first. The virtual DOM then calculates the difference between the old and the new virtual DOM, and only updates the actual DOM with the changes. This process is known as reconciliation.

Why Use a Virtual DOM?

The primary reason for using a virtual DOM is to increase the performance of an application. Updating the actual DOM can be slow and expensive, especially for large applications with many components. By using a virtual DOM, React can quickly update the virtual DOM, calculate the changes, and then make a single update to the actual DOM. This significantly improves the overall performance of an application.

How Does the Virtual DOM Work?

When an application updates, the virtual DOM is updated first. React uses a process called reconciliation to determine what has changed in the virtual DOM and updates the actual DOM only with the necessary changes. This process is performed by a function called the renderer.

The renderer takes the updated virtual DOM and compares it to the previous virtual DOM. It then calculates the difference between the two and creates a list of changes that need to be made to the actual DOM.

Next, the renderer updates the actual DOM with the changes. This is done by creating a new DOM tree, which is a copy of the updated virtual DOM. The new DOM tree is then compared to the old DOM tree, and only the necessary changes are made. This process is efficient because it only updates the specific elements that have changed, rather than rewriting the entire DOM tree.

Conclusion

React's virtual DOM is a key feature that sets it apart from other UI libraries. It provides a fast and efficient way to update the user interface without sacrificing performance. The virtual DOM works by updating a lightweight, in-memory representation of the actual DOM, and then only making the necessary changes to the actual DOM. This process is performed by the renderer, which calculates the difference between the old and new virtual DOM and updates the actual DOM only with the necessary changes. By using the virtual DOM, React can provide a fast, efficient, and highly performant user interface for your application.

How to handle different Types of Data in React

Ateeq Syed — Sat, 11 Feb 2023 19:58:09 +0000

One of the most critical aspects of modern web development for software engineers is to understand how to handle different types of data and how to handle them efficiently. In this blog, I’ll discuss the various types of data that Software Engineers might encounter while building a React App, including REST APIs, GraphQL and Firebase. We’ll also look at some tips and best practices for handling these data sources effectively.

REST APIs

Representational State Transfer (REST) APIs are a common data source for modern web applications. REST APIs allow developers to access data stored on a server and manipulate it in a variety of ways, such as retrieving, updating, and deleting records. REST APIs use HTTP requests to interact with the server, and the response is typically in JSON format.

To handle REST APIs in a React app, developers typically use a library such as Axios or Fetch to make HTTP requests. For example, to retrieve data from a REST API, developers can make a GET request to the API endpoint and then use the data in their React components.

When working with REST APIs, it's important to keep a few best practices in mind. First, it's a good idea to separate the API calls from the React components, as this will make it easier to maintain the code and test it. It's also a good idea to use a caching layer to store data that has already been retrieved from the API, as this can improve performance and reduce the number of requests made to the server.

GraphQL

GraphQL is a newer data source that has gained popularity in recent years. Unlike REST APIs, which use HTTP requests to interact with the server, GraphQL uses a single endpoint and a query language to access data. This allows developers to retrieve only the data they need, rather than having to fetch a whole record or resource.

To handle GraphQL in a React app, developers typically use a library such as Apollo or Relay. These libraries provide a way to make GraphQL requests and receive the data in a format that can be used in React components.

When working with GraphQL, it's important to keep a few best practices in mind. First, it's a good idea to structure the queries and mutations in a way that makes sense for the app and the data being retrieved. It's also a good idea to use a caching layer to store data that has already been retrieved, as this can improve performance and reduce the number of requests made to the server.

Firebase

Firebase is a backend-as-a-service (BaaS) platform that provides a variety of tools for handling data in a web application. Firebase provides real-time database services, authentication, and storage, among other features.

To handle Firebase in a React app, developers typically use the Firebase SDK and make calls to the API to interact with the data. For example, to retrieve data from the database, developers can make a call to the Firebase API and then use the data in their React components.

When working with Firebase, it's important to keep a few best practices in mind. First, it's a good idea to structure the data in a way that makes sense for the app and the data being stored. It's also a good idea to use security rules to control access to the data and prevent unauthorized access.

Conclusion

In conclusion, handling different types of data in a React app can be challenging, but with the right tools and techniques, it can be done effectively. Whether you're working with REST APIs, GraphQL, or Firebase, it's important to keep a few best practices in mind, such as separating the API calls from the React components, using a caching layer, and structuring the data in a way that makes sense for the app.

Another important consideration is error handling. When making API calls, it's crucial to anticipate and handle any errors that might occur, such as network errors or server-side errors. This can be done using try-catch blocks or by using libraries such as Axios, which provide built-in error handling.

Finally, it's important to keep performance in mind when handling data in a React app. This includes minimizing the number of API requests made, using a caching layer to store data that has already been retrieved, and optimizing the data structures and queries used to retrieve data.

In conclusion, handling data in a React app is a critical aspect of modern web development, and it's important for developers to understand the different types of data and how to handle them effectively. Whether you're working with REST APIs, GraphQL, or Firebase, it's important to keep best practices in mind and prioritize performance, error handling, and data organization.

The Art of Mastering Git

Ateeq Syed — Wed, 25 Jan 2023 13:14:26 +0000

The first thing to learn about Github, is to learn that Git and Github are different. Git is a version control system that helps you maintain a track record of changes made which you cannot normally do in a USB or an SSD while GitHub is a GUI that holds all the code. Git is often ignored by most Software Engineers but they have to learn it the hard way because there is no choice left. I’ve articulated all of the major points you need

The Four Areas: Basic Workflow

The basic workflow of Git involves four main areas: the working directory, the staging area, the local repository, and the remote repository.The working directory is where you make changes to files.The staging area is where you stage changes before committing them to the local repository.

The local repository is where you commit changes and create branches and tags.The remote repository is where you push and pull changes to share them with others.

To start working with git, you need to initialize a repository in the directory where you want to start tracking files using git init. Then you need to add files to the staging area by using the git add command. Once you're ready to save your changes, you can commit them to the local repository using git commit and you can push the changes to the remote repository using git push.

The Four Areas: Advanced Tools

In addition to the basic workflow of Git, there are several advanced tools and features that can help you manage and collaborate on projects more effectively. Some of these include:

Branching: Git allows you to create multiple branches of a project, which allows you to work on different features or bug fixes simultaneously without affecting the main branch.

Merging: When you've finished working on a branch, you can merge it back into the main branch, bringing in all of your changes.

Rebasing: This allows you to reapply commits on top of another base tip. It's useful when you need to integrate changes from one branch into another, but you don't want to create a merge commit.

Tagging: Git allows you to create tags to mark specific points in the history of a project, such as release versions.

Stash: Git stash allows you to save your changes temporarily, and you can use it when you want to switch branches or work on a different task without committing the changes.

Git Hooks: Git allows you to run scripts before and after git commands. This can be useful for automating tasks such as testing, building, or deploying code.

Git aliases: Git allows you to create custom commands by using git aliases, it's useful for creating custom commands and making your work easier.

These are just a few examples of the advanced tools and features that Git has to offer. With a little practice and experimentation, you'll be able to take full advantage of Git's capabilities to manage and collaborate on projects more efficiently.

Stashing Data

Stashing data in Git is a way to temporarily save changes that you have made to your working directory, but do not want to commit yet. This allows you to switch branches or work on a different task without committing the changes, and then later come back and re-apply the changes.

When you use the git stash command, Git will save the current state of your working directory and the staging area to a new stash. The changes are not committed to the local repository and are not visible in any branches. Instead, they are saved in a separate stash. You can later apply the changes from a stash by using the git stash apply or git stash pop command.

Stashing data can be useful in situations where you're in the middle of working on something, but need to switch to a different branch to work on something else. It can also be useful for keeping your commits clean and organized, by allowing you to commit only the changes that are ready to be committed.

Additionally, you can create multiple stash and work on different stashes independently, and you can use git stash list to list all stashes and git stash drop to delete a specific stash.

Solving Conflicts

Solving conflicts in Git occurs when two branches have made changes to the same lines of code in a file and those changes cannot be automatically merged. This can happen when two people are working on the same file at the same time, or when you're trying to merge one branch into another.

When a conflict occurs, Git will mark the conflicted lines in the file with special conflict markers, such as

"<<<<<1 Malformed citation <<" and ">>>>>>>

You will need to manually resolve the conflict by editing the file and removing the conflict markers, along with any unnecessary code. Once you have resolved the conflict, you will need to add the file and commit the changes.

To solve conflicts, you can use the command git merge or git pull and git will automatically identify the conflicts and mark them in the files.

You can also use Git's visual merge and conflict resolution tools, such as GitKraken, SourceTree, or Git Extensions. These tools provide an interactive interface that allows you to easily view and resolve conflicts, and they can be a great help when you're dealing with complex merge scenarios.

It's important to remember that conflicts are an inherent part of working with Git, and that it's normal for them to occur from time to time. With practice and experience, you'll become more proficient at resolving conflicts and minimizing the time and effort required to do so.

Working with Paths

Working with paths in Git refers to specifying the location of files or directories within a repository. Git allows you to work with paths in several ways:

Absolute Paths: An absolute path is the full path from the root of the file system to a file or directory. For example, '/home/user/project/file.txt' is an absolute path.

Relative Paths: A relative path is the path to a file or directory relative to the current directory. For example, './file.txt' is a relative path that refers to a file called 'file.txt' in the current directory.

Wildcard Paths: Wildcard paths allow you to specify a pattern for matching multiple files or directories. For example, '*.txt' will match all files with the .txt extension in the current directory.

Regular Expressions: Git supports using regular expressions to match file paths. For example, .*.txt$ matches all files that end with .txt in the current directory.

Committing Parts of a File

Committing parts of a file in Git refers to the process of selectively staging and committing only specific changes within a file, rather than committing the entire file. This can be useful when you want to make multiple commits with different changes, or when you want to commit only a specific change and leave other changes for later.

There are several ways to commit parts of a file in Git:

git add -p (or git add --patch) : This command allows you to interactively stage and commit specific changes within a file. It will prompt you to select which changes to stage, and you can choose to stage a specific hunk of changes, or even split it into multiple hunks.

git add -i (or git add --interactive): This command also allows you to interactively stage and commit specific changes within a file, but with a different interface. It presents a list of options to choose from such as: stage this hunk, unstage this hunk, etc.

git gui : This command opens the Git GUI, a graphical user interface for Git. It allows you to visually select which changes to stage and commit.

git difftool : This command opens a diff tool that allows you to visually compare the changes made to the file, and you can select which changes to stage and commit.

Once you've selected the specific changes to stage, you can use the git commit command as usual to commit the changes.

Becoming a History Surgeon, Tracking Changes in History and Browsing the Log

How to become a Git Heart Surgeon?

Becoming a history surgeon in Git refers to the process of manipulating the commit history of a repository to make it more readable, understandable, and maintainable. This can be useful for cleaning up messy commits, squashing multiple commits into one, reordering commits, and more.

There are several Git commands that can help you with this:

git log: This command allows you to view the commit history of a repository, including the author, date, and commit message of each commit.

git blame: This command allows you to view the last person who modified each line of a file, and the commit in which the modification occurred.

git diff: This command allows you to view the differences between different commits, branches, or files.

git rebase: This command allows you to reorder, edit, or squash commits in the commit history.

git revert : This command allows you to undo a specific commit and create a new commit that undoes the changes made by the previous commit.

git cherry-pick : This command allows you to pick a specific commit from one branch and apply it to another branch.

git reset : This command allows you to reset your local repository to a specific commit, discarding any commits that were made after it.

Tracking changes in history is a fundamental concept in Git, it allows you to keep track of the changes made to the files and the evolution of the project. By browsing the log, you can see who made changes, when they were made, and why they were made. This information can be useful for troubleshooting issues and understanding the development of the project.

It's important to note that manipulating the commit history can be dangerous, because it can cause conflicts and errors if not done correctly. It's a good practice to make a backup of your repository before attempting to manipulate the history, and to test the changes in a separate branch before applying them to the main branch.

One Quality that will make you a 10x Remote Software Engineer

Ateeq Syed — Tue, 24 Jan 2023 19:05:52 +0000

Since we all heard the announcement, GitHub now has 100M developers using it, which makes the competition to a whole new level. Being a Software Engineer, especially remote requires a lot of things but one thing that is the most important and that is “Ownership”. Only that can lead them to become Senior Software Engineers, I will deconstruct the whole concept in very simple words.

When you own things, like your car, your MacBook, or the suit you bought, you take care of them, you do your best to maintain them and keep them in a secure place. The same is valid if you built a product that you love, it can be an open-source project, so you will keep updating pull requests, fixing performance issues, and updating security. If you own a car, to make it work you add gas to it, keep it clean, and do it all by yourself because you own it. If there is any issue with the engine, you take it to the mechanic by yourself, this is the concept of Ownership. You must hold yourself accountable for whatever work you put into that and improve it every day.

My Senior SWE Manager Hassaan Pasha told me that it struck me:

Build and ship something you’re proud to show to anyone and that only explains a lot of things.

Ownership is the same as holding accountability to yourself, about how you communicate, write good quality code, and ship code that you’re proud to show the world. By taking ownership you distinguish yourself from all other employees and portray your leadership quality which gets the job done.

By just holding yourself accountable, you can take your career to another level.