DEV Community: Musab

Best VS Code Extensions You Can Use to Boost Your Productivity

Musab — Sat, 27 Jan 2024 09:13:36 +0000

As developers, we spend most of our time in our code editor. And most of us are using Visual Studio Code. So today, I will show you some of the best VS Code extensions that I use to create programs.

ESLint

ESLint is one of the best linting extensions I have ever used. It helps you to implement the best practices in your code while writing the syntax.

Marketplace Link: ESLint

Error Lens

So as you have seen in the previous image, you have to hover over the text to see the error. But this extension makes it easy for you by showing it directly next to your code.

Marketplace Link: Error Lens

Prettier - Code formatter

Yeah, it's a code formatter. It formats the code once you save the file. You can always customize how you want it to format.

Marketplace Link: Prettier - Code formatter

GitLens — Git supercharged

This extension is helpful for git users. This extension helps you to see the author of the code in your code editor by hovering over the line.

Marketplace Link: GitLens — Git supercharged

Code Spell Checker

This extension checks your code for any wrong spelling including comments, variables, functions, etc.

Marketplace Link: Code Spell Checker

Vim

I know we're talking about VS Code. But let's be fair, vim motions increase your moving speed. And you can get the vim motions in your VS Code with this extension.

Marketplace Link: Vim

Multiple cursor case preserve

Many times we want to select the text by pressing CTRL + D or CMD + D (in Mac) and try to edit it. But the problem we get is, that it changes to the exact case we type in and doesn't match the previous case. So, this extension solves that problem.

Marketplace Link: Multiple cursor case preserve

indent-rainbow

This extension makes reading the code in segments easier by colorizing the indentation in front of the text, alternating four different colors on each step.

Marketplace Link: indent-rainbow

Tailwind CSS IntelliSense

If you work with Tailwind CSS, this extension auto-completes the class names before you even type them.

Marketplace Link: Tailwind CSS IntelliSense

Import Cost

This extension displays inline in the editor the size of the imported package. The extension utilizes webpack to detect the imported size.

Marketplace Link: Import Cost

Conclusion

VS Code is a very good code editor we use for everything. In this article we see some awesome extensions however there are a lot of extensions to explore. With the extensions VS Code becomes even more powerful.

Thanks for reading and happy coding!

My new blog

Musab — Sat, 30 Sep 2023 10:54:51 +0000

https://blog.musabdev.com/

Shadcn UI pros and cons

Musab — Wed, 14 Jun 2023 23:29:11 +0000

Shadcn UI provides components to copy and paste into your app. It's built with Radix UI and Tailwind CSS.

It's been a couple of weeks using Shadcn UI. So, I would like to share my thoughts on it. Like other frameworks, it has pros and cons. Some of them are mentioned below.

Pros

Copy and paste components directly to your app.
Built with Radix UI and Tailwind CSS.
Good design.
Light/Dark mode out of the box.
Automatic CLI installation.
Well integrated with Next.js 13 (app directory).
Full accessibility out of the box.
Full type safety with Zod.
It's open source.

and more

Cons

Issues with intellisense. It shows autocomplete from Radix UI too.
Difficulty in changing colors. It's very confusing to change colors on it.

Some feature requests I would like to make 🥳

Ability to change naming convention

Add an option (while installing) for changing the file convention like PascalCase, camelCase, or spinal-case. As people like me usually use PascalCase for components.

Ability to change colors with CLI

It can handle automatic color generation. (e.g. https://www.tailwindshades.com)

Building Confidence in Coding: Embracing the Unknown

Musab — Tue, 23 May 2023 10:38:22 +0000

As aspiring coders, we've all been there. We stumble upon someone else's code, and suddenly, it feels like we've entered a foreign land. Confusion sets in, and self-doubt takes hold. How can we ever understand this intricate web of logic and syntax? How can we be as confident as the professionals, the YouTubers, and the experienced developers we look up to? The truth is, building confidence in coding is a journey—one that requires patience, practice, and a willingness to embrace the unknown.

1. Mastering the Basics

Every great achievement starts with a solid foundation. Take the time to reinforce your understanding of the fundamentals of programming. Begin by writing simple programs and gradually increase their complexity as you gain confidence. Remember, Rome wasn't built in a day, and neither is expertise in coding.

2. Unraveling Complexity

When faced with complex code that seems insurmountable, don't panic. Break it down into manageable parts. Analyze each component individually and seek to understand its purpose and functionality. It's crucial to approach this process with patience and a genuine curiosity to learn. Rome wasn't built in a day, and neither is expertise in coding.

3. Learning from the Masters

One of the most effective ways to grow as a coder is to study the work of experienced developers. Open-source projects, tutorials, and coding forums are treasure troves of knowledge. Dive into their code, ask questions, and unravel the mysteries. Remember, even the most seasoned professionals were once novices. By exposing yourself to different coding styles and techniques, you'll expand your horizons and gain valuable insights.

4. Seeking Support

No one becomes a coding wizard in isolation. Don't be afraid to reach out for help when you encounter challenges. Join coding communities, engage in forums, or find a mentor who can guide you. Collaboration not only helps you understand unfamiliar code but also fosters a sense of belonging in the coding community. Remember, you're not alone in this journey.

5. The Power of Practice

Like any skill, coding requires practice. Challenge yourself with coding projects and participate in competitions. The more you code, the more confident you'll become. Embrace problem-solving as a creative outlet and relish in the sense of accomplishment that comes with overcoming challenges. And remember, Rome wasn't built in a day, and neither is expertise in coding.

6. Celebrate Your Progress

Amidst the complexities of coding, it's essential to acknowledge and celebrate your achievements, no matter how small. Every milestone reached, every bug squashed, and every new concept grasped is a step forward. Recognize your growth, reward yourself, and let these moments fuel your journey to becoming a confident coder.

Embracing the Journey

Gaining confidence in coding is a process that takes time, dedication, and perseverance. Embrace the unknown, for it is where true growth lies. Be patient with yourself, ask questions, and never stop exploring. Rome wasn't built in a day, but with each line of code you write and each hurdle you overcome, you'll inch closer to your goals. Remember, you have the power to become a confident coder, just like the professionals and YouTubers who inspire you.

So, take a deep breath, dive into the code, and let the journey begin!

Client-side may not be the best option for API requests

Musab — Sat, 29 Apr 2023 12:31:36 +0000

As more and more web applications are developed, client-side API requests have become a common practice. Client-side API requests allow developers to fetch data from a server without reloading the entire page, resulting in faster and more responsive web applications. However, these requests come with hidden dangers that can compromise the security of your web application.

One of the main dangers of client-side API requests is the possibility of exposing sensitive data. When developers fetch data from a server using client-side requests, they risk exposing the data to malicious users who can intercept the requests. This can happen if the API endpoint is not secured properly, or if the request is sent over an unencrypted channel. This can lead to sensitive data, such as user credentials or financial information, being exposed and potentially stolen by attackers.

Another danger of client-side API requests is the risk of Cross-Site Scripting (XSS) attacks. XSS attacks occur when malicious code is injected into a web page, which can then execute on the user's browser. If a web application uses client-side API requests to fetch data and that data is not properly sanitized, an attacker can inject malicious code into the response, which can then be executed by the user's browser. This can lead to a range of attacks, including the theft of sensitive data, hijacking of user sessions, and more.

In addition, client-side API requests can also lead to Denial of Service (DoS) attacks. This can occur when attackers flood a web application with a large number of requests, overwhelming the server and causing it to crash. If a web application relies heavily on client-side API requests, it may be more susceptible to DoS attacks, as the server may not be able to handle the volume of requests generated by the client.

To mitigate these risks, developers must take several precautions when using client-side API requests. First and foremost, it is important to secure API endpoints properly, using authentication and encryption to prevent unauthorized access. Developers should also ensure that all data received from the server is properly sanitized to prevent XSS attacks. Additionally, web applications should be designed to handle DoS attacks, with measures such as rate limiting and load balancing.

In conclusion, while client-side API requests can provide significant benefits in terms of faster and more responsive web applications, they come with hidden dangers that must be taken seriously. Developers must be vigilant in securing their API endpoints, sanitizing data, and designing their applications to withstand attacks. By taking these precautions, developers can ensure that their web applications remain secure and reliable.

Create React App vs Vite: Choosing the Right Build Tool for Your Project

Musab — Mon, 20 Feb 2023 08:50:40 +0000

Frontend development has come a long way since the advent of web technologies. Today, developers are spoilt for choice when it comes to selecting the right tools for their projects. One of the most critical decisions that a developer has to make is the choice of a build tool. Two of the most popular build tools are Create React App and Vite. Both are powerful tools that can be used to create efficient, optimized, and scalable web applications.

Create React App:

Create React App is built on Webpack and Babel and it is a popular tool that enables developers to quickly set up a React project. It is an officially supported tool by the React team, making it a reliable choice. It creates a basic React application with all the necessary configuration files, dependencies, and scripts. The tool provides a pre-configured environment that abstracts away much of the configuration that developers would typically have to handle manually. This means that the developer can focus on writing code rather than configuration files. It is especially useful for beginners to get started.

Initialize the create-react-app project:

npx create-react-app my-app

Vite:

Vite is a newer build tool that has gained popularity in recent years. It was created to address the limitations of existing build tools, particularly in the development phase. Vite is a build tool that is optimized for speed. It leverages the latest browser technologies, such as ES modules and native browser imports, to provide fast build times.

Vite is particularly useful for small to medium-sized projects that do not require complex configurations. It is built on top of the Rollup bundler, which is known for its fast build times. Vite also provides a development server that is optimized for performance. The server leverages HTTP/2 server push, which enables the server to send multiple responses for a single client request.

Initialize the vite project:

npm create vite@latest
# or
yarn create vite
# or
pnpm create vite

Create React App vs. Vite:

When it comes to choosing between Create React App and Vite, there are a few factors to consider. One of the most important factors is the size of the project. Create React App is an excellent choice for large-scale projects that require complex configurations. It provides developers with a pre-configured environment that handles much of the setup work. However, Sometimes, Create React App can be overkill, and Vite may be a better choice.

Another factor to consider is the build time. Vite is optimized for speed and can provide faster build times than Create React App. This is particularly useful during development when the developer needs to see changes in real-time. Vite's development server is also optimized for performance, which further enhances the development experience.

In conclusion, both Create React App and Vite are excellent build tools that provide developers with a solid foundation for building React applications. Create React App is a reliable choice for beginners to learn, while Vite is a better choice for real-world projects that require faster build times. Ultimately, the choice between the two will depend on the project's requirements and the developer's preferences.

7 Tips and Tricks for Debugging in JavaScript

Musab — Mon, 20 Feb 2023 05:06:56 +0000

Debugging is an essential part of software development, and JavaScript is no exception. Whether you're building a small application or a large-scale project, you'll inevitably run into bugs that need to be fixed. In this blog post, we'll discuss some tips and tricks for debugging in JavaScript.

1. Use `console.log()`

One of the simplest and most effective ways to debug JavaScript code is by using console.log(). This method allows you to print the value of a variable or an expression to the console. By using console.log() at different points in your code, you can get a better understanding of what's happening at each step.

2. Use Debuggers

Debuggers are tools that allow you to stop the execution of your code at a particular point and inspect the state of your application. Most modern browsers have built-in debuggers that you can use to step through your code, set breakpoints, and examine variables. Using a debugger can be very useful for complex bugs that are hard to track down.

3. Check for Syntax Errors

Syntax errors can cause your code to fail before it even runs. The good news is that these errors are usually easy to spot. Most text editors and IDEs will highlight syntax errors in your code, so it's important to pay attention to these warnings.

4. Use a Linter

A linter is a tool that analyzes your code for potential errors and style issues. By using a linter, you can catch potential bugs before they even happen. Linters can also enforce consistent code style across your team, making your code more readable and maintainable.

5. Break Your Code into Smaller Pieces

When you're trying to track down a bug, it's often helpful to break your code into smaller pieces. By isolating the problematic code, you can more easily determine the source of the bug. You can then gradually add back in the rest of your code, testing each step along the way.

6. Use Error Messages

Error messages are your friends! They can provide valuable information about what went wrong in your code. When you encounter an error, make sure to read the error message carefully. Often, the error message will give you a clue as to what caused the bug.

7. Get a Fresh Perspective

Sometimes, it's helpful to step away from your code for a little while and come back to it with fresh eyes. In the meantime, you can ask a colleague to take a look at your code. A fresh perspective can often help you spot issues that you might have overlooked.

Conclusion

In conclusion, debugging is an essential part of software development, and JavaScript developers need to be proficient in debugging techniques. By following these tips and tricks, you can save yourself a lot of time and frustration when hunting down bugs in your code. Remember to use console.log(), debuggers, syntax checking, linters, break your code into smaller pieces, read error messages carefully, and get a fresh perspective. Happy debugging!

How to Set Up TypeScript with Node.js

Musab — Tue, 14 Feb 2023 06:55:38 +0000

Node.js is a popular JavaScript runtime environment that allows developers to run JavaScript on the server-side. TypeScript is a superset of JavaScript that adds type annotations, interfaces, and other features that help developers write more maintainable and scalable code. In this tutorial, we'll walk through how to set up a TypeScript project with Node.js.

Prerequisites

Before we start, make sure you have Node.js installed on your system. You can download it from the official Node.js website.

Step 1: Initialize a new Node.js project

First, let's create a new directory for our project and initialize it as a new Node.js project:

mkdir my-typescript-project
cd my-typescript-project
npm init -y

This will create a new package.json file in the project directory.

Step 2: Install TypeScript

Next, let's install TypeScript as a development dependency:

npm install --save-dev typescript

This will install the latest version of TypeScript and add it to the devDependencies section of the package.json file.

Step 3: Install @types/node

To get type definitions for Node.js, we need to install the @types/node package as a development dependency:

npm install --save-dev @types/node

This will install the latest version of @types/node and add it to the devDependencies section of the package.json file.

Step 4: Create a tsconfig.json file

To configure TypeScript, we need to create a tsconfig.json file in the project directory. This file tells the TypeScript compiler how to compile our TypeScript code.

Copy and paste the following code into your tsconfig.json file:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "target": "ES2020",
    "sourceMap": false,
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}

This configuration sets the module system to ESNext and the module resolution to NodeNext. The target is set to ES2020, which means TypeScript will generate code that is compatible with ECMAScript 2020. The sourceMap option is set to false, which means that TypeScript won't generate source maps. Finally, the outDir option specifies the directory where compiled JavaScript files should be output, and the include option specifies the directory where the TypeScript source files are located.

Step 5: Create a src directory

Let's create a src directory for our TypeScript source files:

mkdir src

Step 6: Write some TypeScript code

Now that we have our project set up, let's write some TypeScript code. Create a new file in the src directory called index.ts:

touch src/index.ts

In this file, let's write some simple TypeScript code:

const message: string = "Hello, world!";
console.log(message);

This code declares a constant variable called message of type string and assigns it the value "Hello, world!". Then, it logs the value of message to the console.

Step 7: Compile the TypeScript code

Now that we have some TypeScript code, let's compile it to JavaScript. Run the following command in the terminal:

npx tsc

This will run the compiled index.js file and output "Hello, world!" to the console.

Conclusion

In this tutorial, we learned how to set up a TypeScript project with Node.js.

Getting Started with Puppeteer: A Guide to Web Scraping in Node.js

Musab — Sun, 12 Feb 2023 04:23:23 +0000

Puppeteer is a Node.js library that allows developers to automate and interact with web pages in a headless or full graphical interface mode. It provides a high-level API for developers to interact with web pages, making it easier to scrape information from websites and automate testing. In this blog post, we will explore the basics of Puppeteer and show you how to use it for web scraping.

What is Puppeteer?

Puppeteer is an open-source project developed by the Chrome team at Google, which makes it a trusted tool for developers to use. It is built on top of the Chrome DevTools protocol and provides a simple API for automating browser tasks. With Puppeteer, you can launch a Chrome instance and perform various tasks like clicking buttons, filling out forms, and scraping data from websites.

Getting started with Puppeteer

Before getting started with Puppeteer, you need to install it in your project. You can install Puppeteer using npm by running the following command:

npm install puppeteer

Once you have installed Puppeteer, you can start using it in your Node.js project. To launch a new instance of Chrome, you can use the following code:

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
}

run();

In the code above, we first require the Puppeteer library and then launch a new instance of Chrome using puppeteer.launch(). We then create a new page using browser.newPage() and navigate to a website using page.goto(). Finally, we close the browser instance using browser.close().

Web Scraping with Puppeteer

Now that we have a basic understanding of how to use Puppeteer, let's see how we can use it for web scraping. Web scraping is the process of extracting data from websites, and Puppeteer makes it easy to do so.

For example, let's say we want to scrape the title and description of a website. We can use the following code:

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const title = await page.title();
  const description = await page.$eval('meta[name="description"]', el => el.content);
  console.log(`Title: ${title}`);
  console.log(`Description: ${description}`);
  await browser.close();
}

run();

In the code above, we use page.title() to get the title of the website and page.$eval() to get the description of the website. The first argument to page.$eval() is a CSS selector that we use to select the meta tag with the name attribute set to "description". The second argument is a function that returns the content of the selected element.

Conclusion

Puppeteer is a powerful tool for automating browser tasks and scraping information from websites. It provides a high-level API for developers to interact with web.

Best Practices for Web Development: Coding Standards, Performance Optimization, and Security Measures

Musab — Sat, 11 Feb 2023 01:59:42 +0000

Web development has come a long way since the early days of the internet. With the proliferation of connected devices and the increasing complexity of web applications, it's more important than ever to follow best practices for web development. In this blog, we'll discuss some of the most important best practices for web development, including coding standards, performance optimization, and security measures.

Coding Standards

Coding standards refer to a set of guidelines and conventions that developers use to write clean, maintainable, and consistent code. The main goal of coding standards is to ensure that code is easy to understand, modify, and reuse, even for developers who are unfamiliar with the project.

Some of the key aspects of coding standards include:

Naming conventions: A consistent naming convention helps make code easier to understand and follow. For example, using camelCase for variables, PascalCase for classes, and snake_case for file names.
Code structure: A well-structured codebase makes it easier to maintain and add new features. For example, using modular design patterns, keeping functions and classes small, and separating concerns with appropriate abstraction.
Comments: Adding comments to code helps other developers understand what is going on, especially if the code is complex or uses a less-common library or framework.

Performance Optimization

Performance optimization is an important aspect of web development, as slow-loading web pages can negatively impact the user experience and even drive away potential customers. Here are some of the key best practices for performance optimization:

Minimize the number of HTTP requests: The more requests a page makes, the slower it will load. Minimize the number of requests by using a content delivery network (CDN), compressing files, and combining files whenever possible.
Optimize images: Large images can slow down a web page significantly. Optimize images by compressing them, using the appropriate image format, and resizing them to the correct size.
Use caching: Caching can improve page load times by storing frequently used data so that it doesn't have to be loaded from scratch each time the page is visited.

Security Measures

Security is a crucial aspect of web development, as vulnerable web applications can expose sensitive information and be vulnerable to attacks. Here are some of the key best practices for web security:

Use encryption: Encryption protects sensitive information by encoding it so that it can only be deciphered by authorized parties. Use encryption technologies like SSL/TLS to protect sensitive information, such as login credentials and financial information.
Validate user inputs: Attackers can exploit vulnerabilities in your code by submitting malicious data. Validate user inputs to ensure that they are in the correct format and free of harmful code.
Keep software up to date: Software updates often include security patches, so it's important to keep your software up to date to ensure that you have the latest security protections.

Conclusion

By following best practices for web development, including coding standards, performance optimization, and security measures, you can build high-quality web applications that provide a great user experience, perform well, and are secure. Whether you're a beginner or an experienced developer, taking the time to follow these best practices will pay off in the long run and help you create better web applications.

DEV Community: Musab

Best VS Code Extensions You Can Use to Boost Your Productivity

ESLint

Error Lens

Prettier - Code formatter

GitLens — Git supercharged

Code Spell Checker

Vim

Multiple cursor case preserve

indent-rainbow

Tailwind CSS IntelliSense

Import Cost

Conclusion

My new blog

Shadcn UI pros and cons

Pros

Cons

Some feature requests I would like to make 🥳

Ability to change naming convention

Ability to change colors with CLI

Building Confidence in Coding: Embracing the Unknown

1. Mastering the Basics

2. Unraveling Complexity

3. Learning from the Masters

4. Seeking Support

5. The Power of Practice

6. Celebrate Your Progress

Embracing the Journey

Client-side may not be the best option for API requests

Create React App vs Vite: Choosing the Right Build Tool for Your Project

Create React App:

Vite:

Create React App vs. Vite:

7 Tips and Tricks for Debugging in JavaScript

1. Use console.log()

2. Use Debuggers

3. Check for Syntax Errors

4. Use a Linter

5. Break Your Code into Smaller Pieces

6. Use Error Messages

7. Get a Fresh Perspective

Conclusion

How to Set Up TypeScript with Node.js

Prerequisites

Step 1: Initialize a new Node.js project

Step 2: Install TypeScript

Step 3: Install @types/node

Step 4: Create a tsconfig.json file

Step 5: Create a src directory

Step 6: Write some TypeScript code

Step 7: Compile the TypeScript code

Conclusion

Getting Started with Puppeteer: A Guide to Web Scraping in Node.js

What is Puppeteer?

Getting started with Puppeteer

Web Scraping with Puppeteer

Conclusion

Best Practices for Web Development: Coding Standards, Performance Optimization, and Security Measures

Coding Standards

Performance Optimization

Security Measures

Conclusion

1. Use `console.log()`