Thursday, November 30, 2023

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

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

Introduction to Regular Expressions
Basic Syntax and Matching
Metacharacters
Quantifiers
Character Classes
Anchors
Grouping and Capturing
Alternation
Escape Characters
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

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.

Monday, September 18, 2023

SharePoint Useful URLs for administrators and super users

This post serves as a valuable reference hub for all the handy shortcut URLs in SharePoint, streamlining tasks for administrators and super users.

While others have shared these URLs in various blog posts, I aim to safeguard them within my own blog, ensuring their accessibility for future generations!

Frequently used

Title	URL
Remove nav bar, header & command bar	?env=WebView (after .aspx)
Remove nav bar & header	?env=Embedded
Open list/ library in Microsoft Lists	?env=WebViewList
Site contents	/_layouts/15/viewlsts.aspx /_layouts/15/viewlsts.aspx?view=14 (old style view)
Manage content & structure	/_layouts/sitemanager.aspx
Audit log reports	/_layouts/Reporting.aspx?Category=Auditing
Shared with us	/Shared%20Documents/Forms/AllItems.aspx?view=3

Users and permissions

Title	URL
People	/_layouts/people.aspx
Groups	/_layouts/groups.aspx
Site Collection Admins	/_layouts/mngsiteadmin.aspx
Advanced Permissions	/_layouts/user.aspx

Galleries

Title	URL
Site Columns	/_layouts/mngfield.aspx
Site content types	/_layouts/mngctype.aspx
Web parts	/_catalogs/wp/Forms/AllItems.aspx
List templates	/_catalogs/lt/Forms/AllItems.aspx
Master Pages	/_layouts/ChangeSiteMasterPage.aspx
Themes	/_catalogs/theme/Forms/AllItems.aspx
Solutions	/_catalogs/solutions/Forms/AllItems.aspx

Site administration

Title	URL
Regional settings	/_layouts/regionalsetng.aspx
Content and structure	/_Layouts/sitemanager.aspx?Source={WebUrl}_layouts/settings.aspx
Content and structure logs	/_Layouts/SiteManager.aspx?lro=all
Site libraries and lists	/_layouts/mcontent.aspx
User alerts	/_layouts/sitesubs.aspx
RSS	/_layouts/siterss.aspx
Search and offline availability	/_layouts/srchvis.aspx
Sites and workspaces	/_layouts/mngsubwebs.aspx
Workflows	/_layouts/wrkmng.aspx
Workflow settings	/_layouts/wrksetng.aspx
Related Links scope settings	/_layouts/RelLinksScopeSettings.aspx
Content Organizer Settings	/_layouts/DocumentRouterSettings.aspx?Source=settings.aspx
Content Organizer Rules	/RoutingRules/Group%20by%20Content%20Type.aspx
Site output cache	/_Layouts/areacachesettings.aspx
Term store management	/_Layouts/termstoremanager.aspx
Taxonomy Hidden List	/Lists/TaxonomyHiddenList
Searchable columns	/_Layouts/NoCrawlSettings.aspx

Look and feel

Title	URL
Welcome page	/_Layouts/AreaWelcomePage.aspx
Title, description and icon	/_layouts/prjsetng.aspx
Master page	/_Layouts/ChangeSiteMasterPage.aspx
Page layouts and site templates	/_Layouts/ChangeSiteMasterPage.aspx
Tree view	/_layouts/navoptions.aspx
Site theme	/_layouts/themeweb.aspx
Navigation	/_layouts/AreaNavigationSettings.aspx

Site actions

Title	URL
Manage site features	/_layouts/ManageFeatures.aspx
Reset to site definition	/_layouts/reghost.aspx
Delete this site	/_layouts/deleteweb.aspx
Site web analytics reports	/_layouts/WebAnalytics/Report.aspx?t=SummaryReport&l=s
Site collection web analytics reports	/_layouts/WebAnalytics/Report.aspx?t=SummaryReport&l=sc

Site collection administration

Title	URL
Search settings	/_layouts/enhancedSearch.aspx
Search scopes	/_layouts/viewscopes.aspx
Search keywords	/_layouts/listkeywords.aspx
Site level recycle bin	/_layouts/RecycleBin.aspx
Site collection recycle bin	/_layouts/AdminRecycleBin.aspx
Site collection features	/_layouts/ManageFeatures.aspx?Scope=Site
Site directory settings	/_layouts/SiteDirectorySettings.aspx
Site hierarchy	/_layouts/vsubwebs.aspx
Site collection navigation	/_layouts/SiteNavigationSettings.aspx
Site collection audit settings	/_layouts/AuditSettings.aspx
Audit log reports	/_layouts/Reporting.aspx?Category=Auditing
Portal site connection	/_layouts/portal.aspx
Site collection policies	/_layouts/Policylist.aspx
Storage Metrics	/_layouts/storman.aspx
Record declaration settings	/_layouts/InPlaceRecordsSettings.aspx?Source=settings.aspx
Content type publishing	/_Layouts/contenttypesyndicationhubs.aspx
Site collection cache profiles	/_Layouts/RedirectPage.aspx?Target={SiteCollectionUrl}cache profiles
Site collection object cache	/_Layouts/objectcachesettings.aspx
Content type service application error log	/Lists/ContentTypeAppLog
Site collection output cache	/_Layouts/sitecachesettings.aspx
Variations	/_Layouts/VariationSettings.aspx
Variation labels	/_Layouts/VariationLabels.aspx
Translatable columns	/_Layouts/TranslatableSettings.aspx
Variation logs	/_Layouts/VariationLogs.aspx
Suggested Content Browser Locations	/PublishedLinks/
Document ID settings	/_Layouts/DocIdSettings.aspx
SharePoint Designer Settings	/_layouts/SharePointDesignerSettings.aspx
Visual Upgrade	/_layouts/suppux.aspx
Help settings	/_layouts/HelpSettings.aspx

Central administration

Title	URL
Manage web applications	/_admin/WebApplicationList.aspx
Create site collections	/_admin/createsite.aspx
Manage service applications	/_admin/ServiceApplications.aspx
Manage content databases	/_admin/CNTDBADM.aspx
Check job status	/_admin/Timer.aspx
Manage farm administrators group	/_layouts/people.aspx?MembershipGroupId=3
Configure service accounts	/_admin/FarmCredentialManagement.aspx
Configure send to connections	/_admin/OfficialFileAdmin.aspx
Configure content deployment paths and jobs	/_admin/Deployment.aspx
Manage form templates	_admin/ManageFormTemplates.aspx
Manage servers in farm	/_admin/FarmServers.aspx
Manage services on server	/_admin/Server.aspx
Manage farm features	/_admin/ManageFarmFeatures.aspx
Configure alternate access mappings	/_admin/AlternateUrlCollections.aspx
Perform a backup	/_admin/Backup.aspx
Restore from backup	/_admin/BackupHistory.aspx?restore=1&filter=1
Perform site collection backup	/_admin/SiteCollectionBackup.aspx
Convert farm license type	/_admin/Conversion.aspx
Check product and patch installation status	/_admin/PatchStatus.aspx
Check upgrade status	/_admin/UpgradeStatus.aspx

Common actions

Title	URL
Create new	_layouts/spscreate.aspx _layouts/create.aspx
View lists	_layouts/viewlsts.aspx
Create site groups	_layouts/permsetup.aspx
Quick launch	_layouts/quiklnch.aspx
Workflow history list	/lists/Workflow History
SharePoint server version + patch level	/_vti_pvt/Service.cnf (run at site collection level)
Web part maintenance mode	?Contents=1 (classic) ?maintenancemode=true (modern)
Save as site template	_layouts/savetmpl.aspx
Manage user alerts	_layouts/AlertsAdmin.aspx

REST API examples

Operation	SharePoint REST API endpoint
Site
Get a SharePoint Site Collection	[domain]/_api/site
Get a specific site or web	[domain]/_api/web
Get a sites title	[domain]/_api/title
List
Get all lists from a site	[domain]/_api/web/lists
Get all items from a list	[domain]/_api/web/lists/getbytitle(listname)/items
Get a lists title	[domain]/_api/web/lists/getbytitle(listname)?select=Title
Get all columns within a list	[domain]/_api/web/lists/getbytitle(listname)/Fields
Get list from GUID	[domain]/_api/Web/Lists(list GUID here)
Get list item by ID	[domain]/_api/Web/Lists/GetByTitle/(listtitle)/GetItemById(2)
Get selected fields for list items	[domain]/_api/Web/Lists/GetByTitle/(listtitle)/Items?select=ID,Title
User
Get current user information	[domain]/_api/web/currentUser
Get all site users	[domain]/_api/Web/siteusers
Group
Get all groups from the site	[domain]/_api/Web/siteusers/sitegroups
Get group by group ID	[domain]/_api/Web/sitegroups/GetById(GroupId)
Get all users from group	[domain]/_api/Web/sitegroups(Id)/users

Tuesday, September 12, 2023

Extract all URLs from a web page

Here is a quick JavaScript snippet to extract all URLs from a webpage, using Developer Tools. No Browser Extension is required!

Monday, September 4, 2023

Get icon from image file - CSS

CSS to get Carret symbol

Use Image icon file, and get the required image by background-position

First icon from the image

Icon from the middle of image

Friday, July 21, 2023

Clone columns of the table using jQuery

Following is the example where you can clone required columns and sequence from the source table to the new table

Monday, July 10, 2023

Read File Content from SharePoint List Items

Working function, where you can read file content available as an attachment in your SharePoint list item.
#sharepoint #jquery #sharepointsolutions

<div>
	<h1>Read File</h1>
	<div>
		<input type="file" id="file_input">
	</div>
	<div>
		<div id="readfiletextarea" rows="5" style="width:400px;"></div>
	
	
	<a href="#" onclick="loadURLToInputFiled('https://domain.sharepoint.com/sites/Lists/myList/Attachments/1/myFile.csv')">Click to Load File</a>
	<br />
	<a href="#" onclick="readfiledata()">Click to Read File</a>
	<br />
	
    
/*Read attachment data and display*/
function readfiledata(){
	let input = document.getElementById('file_input')
	let textarea = document.getElementById('readfiletextarea')

let files = input.files;
 
    if (files.length == 0) return;
    const file = files[0];
 
    let reader = new FileReader();
 
    reader.onload = (e) => {
        const file = e.target.result;
        const lines = file.split(/\r\n|\n/);
        textarea.value = lines.join('\n');
    };
 
    reader.onerror = (e) => alert(e.target.error.name);
    reader.readAsText(file);

}

/*Load URL to input type file */
function loadURLToInputFiled(url){
  getURL(url, (fileBlob)=>{
    // Load img blob to input
    // WIP: UTF8 character error
    let fileName = 'tmpfile.txt'
    let file = new File([fileBlob], fileName,{type:"text/txt", lastModified:new Date().getTime()}, 'utf-8');
    let container = new DataTransfer(); 
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    
  })
}
      
// xmlHTTP return blob respond
function getURL(url, callback){
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
      callback(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

Tuesday, July 4, 2023

VS-Code Cheatsheet

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

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

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

FILE MANAGEMENT

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

DISPLAY

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

Ctrl+ +/ 
Zoom in/out

Ctrl+B
Toggle Sidebar visibility

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

DEBUGGING

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