Forem: Mohammed Salah

VS Code settings that every front-end developer should know

Mohammed Salah — Thu, 04 Jul 2024 00:59:22 +0000

In today's world of web development, Visual Studio Code (VS Code) is considered one of the most powerful and popular integrated development environments (IDEs) among developers. It is known for its great flexibility and support for a wide range of accessories that make the programming process an enjoyable and efficient experience. However, to get the most out of this powerful tool, developers need to customize its settings to suit their specific needs.
Whether you are a novice developer or an expert in front-end development, properly adjusting your VS Code settings can greatly improve your productivity and make the development process much smoother. In this article, we will review a set of optimal settings that will help you improve your programming experience, by using tools such as ESLint, Prettier, Live Server and others.
Get ready to discover how you can turn VS Code into an IDE that meets all your needs as a front-end developer.

Steps to open Visual Studio Code:

1 - Make sure you have Visual Studio Code installed on your machine. If you don't have it, you can download it from the official website.
2 - Open the Command Palette:
Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the command panel.
3 - Find JSON settings:
In the command panel, start typing “Preferences: Open Settings (JSON)” until the option appears in the drop-down menu.
Click this option to open the settings JSON file.
4 - Edit settings:
The settings.json file will open, you can now copy and paste the settings you want to add or modify.
Make sure to save the file after making your edits using Ctrl+S (or Cmd+S on macOS).

You can copy these settings

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "onFocusChange",
  "files.associations": {
    "*.js": "javascriptreact",
    "*.jsx": "javascriptreact"
  },
  "eslint.alwaysShowStatus": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.trailingComma": "es5",
  "liveServer.settings.port": 5500,
  "liveServer.settings.root": "/",
  "liveServer.settings.ignoreFiles": [
    ".vscode/**",
    "**/*.scss",
    "**/*.sass"
  ],
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "html": "html",
    "css": "css"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.suggestSelection": "first",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "workbench.colorTheme": "Default Light+",
  "workbench.iconTheme": "vscode-icons"
}

Explanation of settings:

editor.tabSize: Set the tab size to 2 spaces.
editor.insertSpaces: Use spaces instead of tabs.
editor.formatOnSave: Automatically format code on save.
editor.codeActionsOnSave: Automatically run ESLint fixes on save.
files.autoSave: Auto save when focus changes.
files.associations: Set .js and .jsx files as javascriptreact.
eslint.alwaysShowStatus: Always show ESLint status.
prettier.*: Prettier settings for code formatting.
liveServer.settings.*: Live Server settings to run the project locally.
emmet.includeLanguages: Include Emmet to support multiple languages.
editor.quickSuggestions: Enable quick text suggestions.
editor.suggestSelection: Selects the first suggestion by default.
explorer.confirmDelete: Disable confirmation of deletion.
explorer.confirmDragAndDrop: Disable drag-and-drop confirmation.
workbench.colorTheme: Set the default color theme.
workbench.iconTheme: Set the theme for the icons.

The importance of TypeScript, its uses, and types

Mohammed Salah — Sun, 30 Jun 2024 16:25:59 +0000

In the world of software development, TypeScript stands out as one of the most powerful and influential tools for improving code quality and development speed. Developed by Microsoft, TypeScript is an open source programming language based on JavaScript with powerful Type Annotations. In this article, we will review the importance of TypeScript, its uses, and its different types.

TypeScript is a powerful tool that can significantly improve code quality and development speed. By catching errors early, improving the developer experience, and making maintenance easier, TypeScript provides an ideal development environment for large, complex projects. Whether you're developing web, server, mobile, or even games applications, TypeScript gives you the tools you need to succeed.

The importance of TypeScript

Early detection of errors: One of the biggest advantages of TypeScript is its ability to detect errors early during the development process. Using qualitative feedback, syntactic and logical errors can be detected before the code is run, reducing debugging time and increasing application reliability.
Improve developer experience: TypeScript provides a better development experience by offering features such as Autocomplete and Intelligent Suggestions. These features make writing code faster and more accurate.
Maintenance improvement: Thanks to qualitative comments, the code becomes clearer and easier to understand. This makes it easier for large teams to work on the same project and makes maintenance and adding new features smoother.
JavaScript compatibility: TypeScript is fully compatible with JavaScript, which means that any JavaScript code can be used within a TypeScript project. This makes it easier to switch to TypeScript gradually without having to rewrite the entire code.

TypeScript uses

Web application development: TypeScript is widely used in developing large and complex web applications. Many popular frameworks like Angular are primarily based on TypeScript.
Server-side application development: TypeScript can be used with Node.js to develop server applications. TypeScript provides powerful features that make developing server applications safer and easier.
Mobile application development: Using frameworks like React Native, TypeScript can be used to develop mobile applications for iOS and Android.
Game development: TypeScript is also used in game development with engines like Phaser, providing a powerful and flexible development environment.

TypeScript types

1 - Type Annotations:
Type comments are used to specify the type of variables, parameters, and return values from functions. This helps in catching errors and makes the code more clear.

2 - Interfaces:
Interfaces are used to define the appearance of objects. Interfaces help ensure that objects follow a specific structure, making it easier to work with code.

3 - Classes:
Classes are used to define objects and provide object-oriented programming (OOP) features such as inheritance and encapsulation.

4 - Enums:
Enumerations are used to define a set of constant values. Enumerations help make the code clearer and easier to understand.

The Lifecycle of a JavaScript File in the Browser: Request, Load, Execute1

Mohammed Salah — Thu, 27 Jun 2024 02:31:14 +0000

Lifecycle of a JavaScript file in the browser: request, load, and execution

In this article, we'll walk through the life of a JavaScript file and see the full version of a file request, from its download, all the way to its execution. Understanding this method can help developers improve the performance of web pages and thus the user experience.

1. Request:

When the browser encounters a script tag in an HTML document, it sends an HTTP request to the server to get the JavaScript file specified in the src attribute. This request can be synchronous or asynchronous depending on how the tag is set up.

2. Load:

Once the request is sent, the browser starts loading the JavaScript file. During this phase, the browser can load multiple files in parallel to improve performance. However, the browser must be careful in the order in which files are loaded and executed to ensure that the page functions correctly.

3. Execute:

After the JavaScript file is fully loaded, the browser starts executing it. If the tag contains an async property, the file is executed immediately after it is uploaded. If it contains the defer property, the file is executed after the entire page is fully loaded and parsed.

1 - Request: The browser sends an HTTP request to the server to obtain a JavaScript file.
2 - Load: The browser starts loading the JavaScript file after receiving the request.
3 - Execute: The browser executes the JavaScript file after it has completed loading.

Large or multiple JavaScript files can cause page loading delays. Therefore, it is important to use techniques such as async and defer to improve performance.
Developers need to be aware of how the order in which JavaScript files are loaded and executed affects the page's cross-browser compatibility.

Understanding the life cycle of a JavaScript file in a browser can help developers write more efficient code and improve user experience. By optimizing the request, load, and fulfillment process, page load time can be reduced and overall performance improved.

javascript exeuction context

Mohammed Salah — Sat, 22 Jun 2024 16:23:21 +0000

javascript execution context
That is, execution context in JavaScript
The first means an environment in which the code is executed, and in order to imagine it, we put in our minds that it is a large container that contains something that we can use, for example, variables.

Inside the large container, we may have small containers. Each container, of course, contains the code that will be executed, and with the code there are also the needs that the code may need in order to execute, as well as the variables.

There is something that manages this

This engine provides JavaScript, which varies from browser to browser

When the JavaScript engine receives the code, it downloads it and starts creating a code tree

It starts to work automatically on the large container that we talked about, and it contains every thing in the code and every thing that the code can need.

If you tried to debug the browser and it got a breakpoint

The debug will of course start from breakpoint and will remain, for example, function

While you are monitoring the stack we talked about, you will find that put the global execution context in the stack

Then creates something called the Function Execution Context for the function, which is a breakpoint.

This is the small container we talked about

But apart from debug, every invoke function is executed by an execution context

This means that every caller on a function, this function creates an execution context in which the code for the function and anything needed in the function.

There is another execution context called eval function execution context, and this is executed when the engine finds the breakpoint called eval()

Where do these context exeuctions go to be implemented?

When the engine finds a function, it creates the execution context for this function

Then he puts it in the stack to be executed

Of course, the global execution context is created automatically and placed in the stack first

This is a simplified explanation of the execution context

Profiles in Visual Studio Code (VSCode)

Mohammed Salah — Fri, 21 Jun 2024 02:04:22 +0000

Overview

Profiles in VSCode allow you to create and manage personalized setups for your coding environment. This feature is especially useful if you work on different projects that require distinct configurations, extensions, and settings. With profiles, you can quickly switch between different setups without manually changing your settings each time.

Key Features

Customizable Setup: Each profile can have its own set of extensions, themes, keybindings, and settings.
Easy Switching: Quickly switch between profiles to adapt your development environment to different projects or workflows.
Export and Share: Export your profiles and share them with team members to ensure a consistent development environment.

How to Use Profiles

Creating a New Profile: Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS). Type and select "Preferences: Create Profile". Give your profile a name and customize it as needed.
Switching Between Profiles: Open the Command Palette. Type and select "Preferences: Switch Profile". Choose the desired profile from the list.
Managing Profiles: Open the Command Palette. Type and select "Preferences: Manage Profiles". Here, you can rename, delete, or export profiles.
Exporting and Importing Profiles: To export a profile, use the "Preferences: Export Profile" command from the Command Palette. To import a profile, use the "Preferences: Import Profile" command and select the exported profile file.

Example Use Cases

Different Project Types: Web Development: A profile with extensions and settings for HTML, CSS, JavaScript, and frameworks like React or Angular. Python Development: A profile with Python-specific extensions, linters, and settings.
Different Workflows: Debugging: A profile optimized with debugging tools and configurations. Writing Documentation: A profile with Markdown preview extensions and focus mode settings.
Team Collaboration: Share a standardized profile with your team to ensure everyone has the same development environment, reducing setup time and inconsistencies.

Benefits

Productivity: Quickly switch between different setups tailored to your current task, saving time and reducing context switching.
Consistency: Maintain a consistent environment across different projects and team members.
Customization: Tailor your coding environment to match your preferences and requirements for each specific task or project.

The Tag in HTML

Mohammed Salah — Thu, 20 Jun 2024 14:39:37 +0000

The Tag in HTML

The tag in HTML is used to define an image map. An image map is a way of defining multiple clickable areas (regions) within a single image. Each of these clickable areas can be associated with different links or actions.

How It Works

The tag is used in conjunction with the tag to define these clickable regions. The tag itself does not display any content; it simply provides a container for the tags that define the clickable regions.
Here’s a step-by-step breakdown of how to use the tag:

Define the Image: You first need an image to apply the map to. Use the tag for this.
Define the Map: Use the tag to define the map and give it a unique name using the name attribute.
Define the Clickable Areas: Inside the tag, use the tags to define the clickable regions. Each tag uses attributes to specify the shape, coordinates, and link for each region.

Attributes

name (required): Specifies the name of the map. This name is referenced by the usemap attribute in the tag.
shape (in ): Defines the shape of the clickable area. Possible values are rect (rectangle), circle (circle), and poly (polygon).
coords (in ): Specifies the coordinates that define the shape of the clickable area. The format of the coordinates depends on the shape: rect: "x1,y1,x2,y2" circle: "x,y,radius" poly: "x1,y1,x2,y2,x3,y3,..."
href (in ): Defines the URL to which the user will be redirected when they click the area.
alt (in ): Provides alternative text for the clickable area, useful for accessibility.

Use Cases

Image maps are useful when you want to create interactive images, such as:

Geographic maps where each region links to a different page.
Interactive diagrams where each part of the diagram links to more detailed information.
Any scenario where multiple links are needed within a single image.