ECMAScript 2023 Object.groupBy

ECMAScript 2023, the 14th edition of the language, has some great changes that will make your programming life easier.

const inventory = [ { name: "asparagus", type: "vegetables", quantity: 5 }, { name: "bananas", type: "fruit", quantity: 0 }, { name: "goat", type: "meat", quantity: 23 }, { name: "cherries", type: "fruit", quantity: 5 }, { name: "fish", type: "meat", quantity: 22 }, ]; function myCallback({ quantity }) { return quantity > 5 ? "ok" : "restock"; } const result2 = Object.groupBy(inventory, myCallback); console.log(result2) //Result.... { "restock": [ { "name": "asparagus", "type": "vegetables", "quantity": 5 }, { "name": "bananas", "type": "fruit", "quantity": 0 }, { "name": "cherries", "type": "fruit", "quantity": 5 } ], "ok": [ { "name": "goat", "type": "meat", "quantity": 23 }, { "name": "fish", "type": "meat", "quantity": 22 } ] }

Reference

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.