Grouping object by key value using reduce()

Grouping objects by key-value

const users = [ { name: 'Ram', etype: 'Employee }, { name: 'Shyam', etype: 'Contract' }, { name: 'Samir', etype: 'Employee' }, { name: 'Sunil', etype: 'Contract' }, { name: 'Bhavin', etype: 'Contract' } ]; const groupedUsers = users.reduce((obj, user) => { const etype = user.etype; if (!obj[etype]) { obj[etype] = [] } obj[etype].push(user.name); return obj }, {}) console.log(groupedUsers); // { Employee: [ 'Ram', 'Samir' ], Contract:[ 'Shyam', 'Sunil','Bhavin' ] }

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

// mycomponent.js class CurrentDate extends HTMLElement { // The browser calls this method when the element is // added to the DOM. connectedCallback() { // Create a Date object representing the current date. const now = new Date(); // Format the date to a human-friendly string, and set the // formatted date as the text content of this element. this.textContent = now.toLocaleDateString(); } } // Register the CurrentDate component using the tag name <current-date>. customElements.define('current-date', CurrentDate); // index.html <h2>Today's Date: <current-date></current-date></h2>

 # 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.

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.

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

let cities = $('#sampleTable tbody td:nth-child(3)').map(function(){ return $(this).text(); }).get(); console.log(cities); // ['Vadodara', 'Ahmedabad', 'Anand', 'Udaipur']

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.

//save data in local storage localStorage.setItem('key',''); //get data from local storage localStorage.getItem('key'); //remove data from local storage localStorage.removeItem('key');

(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.

const writeToClipboard = async () => { try{ await navigator.clipboard.writeText(userText); console.log('Copy text to clipboard'); }catch(error){ console.log(error); } } const readFromClipboard = async () =>{ try{ const clipboardText = await navigator.clipboard.readText(); console.log(clipboardText); }catch(error){ console.log(error); } }

(3) Geolocation API

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

const getCurrentLocation = () => { navigator.geolocation.getCurrentPosition( position => { const coord = position.coords; console.log(coord.accuracy); console.log(coord.latitude); console.log(coord.longitude); }, err => { console.log(`Error: ${error.message}`); }, { enableHighAccuracy:true, timeout: 5000, maximumAge: 0 } ); };

(4) History API

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

// go back in history window.history.back(); // go forward in history window.history.forward();

(5) Fetch API

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

async function callAPI(){ try{ const res = await fetch(`API`, { method: '', header: {}, body:{}, }); const data = await res.json(); return data; }catch(err){ console.log(err); } } Note: Content published here is sourced from social platforms, and full credit goes to the original author.

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.