Thursday, November 23, 2023

How to Create Web Component

As of 2023, the support for web components, alternatively referred to as custom elements, across browsers is exceptionally robust. Now is an opportune moment to embark on the journey of crafting your personalized elements for the web.

Web components, synonymous with custom elements, represent novel HTML elements that you can personally construct. These elements encapsulate a combination of markup, style, and interactive features.

Within the confines of this article, you'll delve into the fundamentals of web components and embark on the creation of a straightforward web component designed to display the current date.

Example


 # A Complete Guide to Regular Expressions

Regular expressions, often referred to as regex or regexp, provide a powerful and flexible way to search, match, and manipulate text. They are widely used in programming, text processing, and data validation. This guide aims to provide a comprehensive overview of regular expressions, including syntax, common patterns, and practical examples.


## Table of Contents

  1. Introduction to Regular Expressions
  2. Basic Syntax and Matching
  3. Metacharacters
  4. Quantifiers
  5. Character Classes
  6. Anchors
  7. Grouping and Capturing
  8. Alternation
  9. Escape Characters
  10. Examples and Use Cases


### 1. Introduction to Regular Expressions

Regular expressions are patterns that describe sets of strings. They are used for pattern matching within strings. A regular expression is composed of ordinary characters and special characters called metacharacters.


### 2. Basic Syntax and Matching

- `.` (dot): Matches any single character except a newline.
- `^`: Anchors the regex at the start of a line.
- `$`: Anchors the regex at the end of a line.

Example:
^Hello$


This regex matches the string "Hello" only if it appears at the beginning of a line.

### 3. Metacharacters

- `*`: Matches zero or more occurrences of the preceding character or group.
- `+`: Matches one or more occurrences of the preceding character or group.
- `?`: Matches zero or one occurrence of the preceding character or group.

Example:
\d+ 

This regex matches one or more digits.

### 4. Quantifiers

- `{n}`: Matches exactly n occurrences of the preceding character or group.
- `{n,}`: Matches n or more occurrences of the preceding character or group.
- `{n,m}`: Matches between n and m occurrences of the preceding character or group.

Example:
\w{3,6}

This regex matches word characters (alphanumeric + underscore) with a length between 3 and 6.

### 5. Character Classes

- `\d`: Matches any digit (0-9).
- `\w`: Matches any word character (alphanumeric + underscore).
- `\s`: Matches any whitespace character (space, tab, newline).

Example:
[A-Za-z]\d{2}

This regex matches an uppercase or lowercase letter followed by two digits.

### 6. Anchors

- `\b`: Word boundary.
- `\B`: Non-word boundary.
- `^` (caret) and `$` (dollar): Match the start and end of a line, respectively.

Example:
\bword\b

This regex matches the word "word" as a whole word.

### 7. Grouping and Capturing

- `()`: Groups characters together.
- `(?:)`: Non-capturing group.

Example:
(\d{3})-(\d{2})


This regex captures a three-digit group, a hyphen, and a two-digit group.

### 8. Alternation

- `|`: Acts like a logical OR.

Example:
cat|dog

This regex matches either "cat" or "dog".

### 9. Escape Characters

- `\`: Escapes a metacharacter, treating it as a literal character.

Example:
\d\.\d

This regex matches a digit followed by a literal dot and another digit.

### 10. Examples and Use Cases

- Email Validation:
  ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

- URL Matching:
  ^(https?|ftp)://[^\s/$.?#].[^\s]*$

- Phone Number Matching:
  ^\+?[1-9]\d{1,14}$

- Extracting Date from Text:
  (\d{4})-(\d{2})-(\d{2})

- HTML Tag Matching:
  <([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>(.*?)</\1>


Remember that while regular expressions are powerful, they can be complex. It's essential to test and validate them thoroughly.

This guide provides a foundation for understanding regular expressions, but there is much more to explore. Practice and experimentation are key to mastering this powerful tool.

Monday, November 20, 2023

CSOM vs JSOM vs SSOM vs REST

CSOM (Client-Side Object Model), JSOM (JavaScript Object Model), SSOM (Server-Side Object Model), and REST (Representational State Transfer) are different approaches or models used in SharePoint development for interacting with SharePoint data and functionality. Each has its own characteristics, advantages, and use cases. Here's an overview of each:


1. CSOM (Client-Side Object Model):

  • Language Support: Primarily used with .NET languages such as C#.
  • Execution Environment: Runs on the client side, usually within a .NET application.
  • Usage: Ideal for scenarios where the code needs to be executed on the client side (e.g., in a Windows Forms application, WPF application, or a console application).

2. JSOM (JavaScript Object Model):

  • Language Support: Primarily used with JavaScript.
  • Execution Environment: Runs on the client side, typically in a browser.
  • Usage: Well-suited for scenarios where client-side code (e.g., in a web page) needs to interact with SharePoint data and services.

3. SSOM (Server-Side Object Model):

  • Language Support: Primarily used with .NET languages such as C#.
  • Execution Environment: Runs on the server side, within the context of a SharePoint server.
  • Usage: Typically used in scenarios where server-side code is necessary (e.g., in custom SharePoint server-side solutions, timer jobs, and event receivers).

4. REST (Representational State Transfer):

  • Language Support: This can be used with a variety of languages, as it relies on HTTP and standard web technologies.
  • Execution Environment: Runs on the client side or server side, depending on the implementation.
  • Usage: Suitable for scenarios where a lightweight and language-agnostic approach is required. Can be used in web applications, mobile apps, or any scenario where HTTP requests can be made.

Key Points:

  • CSOM and JSOM: Both are client-side models but are tailored to different development environments and languages.
  • SSOM: Runs on the server side and is more suitable for server-side SharePoint solutions.
  • REST: Offers a flexible and lightweight approach, making it suitable for a variety of scenarios and programming languages.


When choosing between these models, developers often consider factors such as the type of application, the development environment, and the specific requirements of the SharePoint solution being developed. Additionally, with the evolution of SharePoint and the emphasis on modern development practices, REST and client-side models like CSOM and JSOM are often preferred for their flexibility and compatibility with various platforms.

Wednesday, November 15, 2023

Get HTML table column values in array using map ()

Developers often find themselves needing to validate HTML table columns values, occasionally getting stuck in loops. Here's a straightforward solution: use the map() function to easily retrieve the values in an array.

SrNo Name City
1 Rakesh Vadodara
2 Anil Ahmedabad
3 Sunil Anand
4 Bharat Udaipur


Wednesday, November 8, 2023

Some Useful APIs

Sharing some valuable APIs that have been instrumental in my projects on this blog for your reference.

(1) LocalStorage API

It lets you store data against the website address in the form of key/value pairs. Local storage is limited to 5 MB.

(2) Clipboard API

This API provides access to the operating system's clipboard. You can use it to build a copy button to copy/paste content.

(3) Geolocation API

This API provides the user's geographical latitudes and longitudes and the accuracy to which it is correct.

(4) History API

This API lets you go back and forth between web pages that are in your session history.

(5) Fetch API

It is a browser API that lets you call REST APIs or GraphQL APIs.

Note: Content published here is sourced from social platforms, and full credit goes to the original author.

Wednesday, October 18, 2023

Visual Studio Code CheatSheet

Visual Studio Code CheatSheet

This cheat sheet was a lifesaver for me; I hope it extends a helping hand to others too.

BASICS
Ctrl+Shift+N New window/instance
Ctrl+Shift+W Close window/instance
Ctrl+Shift+P or F1 Show Command Palette
Ctrl+P Quick Open, Go to File
Ctrl+, User Settings
Ctrl+K Ctrl+S Keyboard Shortcuts
Ctrl+C Copy line (empty selection)
Ctrl+X Cut line (empty selection)
Alt+ ↑ / ↓ Move line up/down
Shift+Alt + ↓ / ↑ Copy line up/down
Ctrl+Shift+K Delete line
Ctrl+Shift+Enter Insert line above
Ctrl+Home Go to beginning of file
Ctrl+End Go to end of file
Home / End Go to beginning/end of line
Ctrl+↑ / ↓ Scroll line up/down
Ctrl+Shift+\ Jump to matching bracket
Ctrl+Enter Insert line below Basic editing
Ctrl+] / [ Indent/outdent line
Ctrl+Shift+[ Fold (collapse) region
Ctrl+Shift+] Unfold (uncollapse) region
Alt+PgUp / PgDn Scroll page up/down Basic editing
Ctrl+/ Toggle line comment
Alt+Z Toggle word wrap
Ctrl+K Ctrl+U Remove line comment Navigation
Ctrl+T Show all Symbols
Ctrl+P Go to File...
Ctrl+K Ctrl+[ Fold (collapse) all subregions
Ctrl+K Ctrl+0 Fold (collapse) all regions
Ctrl+K Ctrl+J Unfold (uncollapse) all regions
Ctrl+K Ctrl+] Unfold (uncollapse) all subregions
Ctrl+K Ctrl+C Add line comment
Ctrl+Shift+O Go to Symbol
Ctrl+G Go to Line Navigation
Ctrl+Shift+M Show Problems panel
Shift+F8 Go to previous error or warning
Ctrl+Shift+Tab Navigate editor group history
F8 Go to next error or warning
EDITOR
Ctrl+K Ctrl+ ←/→ Focus into previous/next editor group
Ctrl+K ← / → Move active editor group
Ctrl+F4, Ctrl+W Close editor
Ctrl+\ Split editor
Ctrl+ 1 / 2 / 3 Focus into 1st, 2nd or 3rd editor group
Ctrl+K F Close folder
Ctrl+Shift+PgUp / PgDn Move editor left/right
Ctrl+M Toggle Tab moves
Shift+Alt+A Toggle block comment
Ctrl+N New File
Ctrl+S Save
Ctrl+Shift+S Save As
Ctrl+O Open File
Ctrl+K S Save All
Ctrl+K Ctrl+W Close All
Ctrl+Shift+T Reopen closed editor
Ctrl+F4 Close
Ctrl+K Enter Keep preview mode editor open
Ctrl+Shift+Tab Open previous
Ctrl+K P Copy path of active file
Ctrl+Tab Open next
Ctrl+K R Reveal active file in Explorer
Ctrl+K O Show active file in new window/instance
F11 Toggle full screen
Ctrl+Shift+E Show Explorer / Toggle focus
Ctrl+Shift+G Show Source Control
Ctrl+Shift+D Show Debug
Ctrl+Shift+F Show Search Display
Ctrl+Shift+X Show Extensions
Ctrl+Shift+J Toggle Search details
Ctrl+Shift+U Show Output panel
Ctrl+Shift+H Replace in files
Ctrl+Shift+V Open Markdown preview
Shift+Alt+0 Toggle editor layout (horizontal/vertical)
Ctrl+K Z Zen Mode (Esc, Esc to exit)
Ctrl+K V Open Markdown preview to the side
F5 Start/Continue Debug
F9 Toggle breakpoint
F10 Step over
Shift+F5 Stop
F11 / Shift+F11 Step into/out
Ctrl+K Ctrl+I Show hover Integrated terminal
Ctrl+` Show integrated terminal
Ctrl+C Copy selection
Ctrl+V Paste into active terminal
Ctrl+Shift+` Create new terminal Integrated terminal
Ctrl+↑ / ↓ Scroll up/down
Ctrl+Home / End Scroll to top/bottom
Shift+PgUp / PgDn Scroll page up/down
SEARCH AND REPLACE
Ctrl+F Find
F3 / Shift+F3 Find next/previous
Alt+Enter Select all occurences of Find match
Ctrl+H Replace Search and replace
Ctrl+D Add selection to next find match
Alt+C / R / W Toggle case-sensitive / regex / whole word
Ctrl+K Ctrl+D Move last selection to next find match
MULTI CURSOR SELECTION
Alt+Click Insert cursor
Ctrl+U Undo last cursor operation
Shift+Alt+I Insert cursor at end of each line selected
Ctrl+Alt+ ↑ / ↓ Insert cursor above / below
Ctrl+L Select current line
Ctrl+F2 Select all occurrences of current word
Shift+Alt+ → Expand selection
Ctrl+Shift+L Select all occurrences of current selection
Shift+Alt+ ← Shrink selection
Ctrl+Shift+Alt + (arrow key) Column (box) selection
Ctrl+Shift+Alt + PgUp/PgDn Column (box) selection page up/down
Shift+Alt + (drag mouse) Column (box) selection
LANGUAGE EDITING
F2 Rename
F12 Go to Definition
Ctrl+K F12 Open Definition to the side
Ctrl+. Quick Fix
Alt+F12 Peek Definition
Ctrl+Space, Ctrl+I Trigger suggestion
Shift+Alt+F Format document
Ctrl+K Ctrl+F Format selection
Ctrl+Shift+Space Trigger parameter hints
Shift+F12 Show References
Ctrl+K Ctrl+X Trim trailing whitespace
Ctrl+K M Change file language


Note: Knowledge gathered is sourced from the social platform, and credit is rightfully attributed to the diverse individuals generously sharing their wisdom.

Monday, October 9, 2023

Extract data from HTML table in an array using jQuery.

Individuals encounter challenges working with data in HTML when attempting to integrate it into their code. The following presents a straightforward method for extracting data from an HTML table and storing it in an array.