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.


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

  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.

 

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

    

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

Free resources links on web development over the internet

Free resources on web development

ONLINE LEARNING PLATFORM
  1. Free Code Camp https://www.freecodecamp.org/
  2. Udemy https://www.udemy.com/
  3. Treehouse https://teamtreehouse.com/
  4. Udacity https://www.udacity.com/
  5. Cousera https://www.coursera.org/
  6. Sololearn https://www.sololearn.com/
  7. Frontend Masters https://frontendmasters.com/
  8. W3Schools https://www.w3schools.com/
  9. Codeacademy https://www.codecademy.com/
  10. Traversy Media https://www.traversymedia.com/
YOUTUBE CHANNELS
  1. FreeCodeCamp https://youtube.com/c/Freecodecamp
  2. Traversy Media https://youtube.com/c/TraversyMedia
  3. Dev Ed https://youtube.com/c/DevEd
  4. Programming With Mosh https://youtube.com/c/programmingwithmosh
  5. Tyler Moore https://youtube.com/user/Conutant
  6. Web Bos https://youtube.com/c/WesBos
  7. Coding The Smart Way https://youtube.com/c/Codingthesmartway
  8. Code With Harry https://youtube.com/c/CodeWithHarry
  9. Clever Programmer https://youtube.com/c/CleverProgrammer
  10. Yahoo Baba https://youtube.com/c/YahooBaba
  11. Design Course https://youtube.com/c/DesignCourse
DOCUMENTS
  1. Dev Docs https://devdocs.io/
  2. GeeksForGeeks https://devdocs.io/
  3. Tutorials Point https://www.tutorialspoint.com/
  4. W3Schools https://www.w3schools.com/
  5. Java Point https://www.javatpoint.com/
APPLICATIONS
  1. Programming Hub https://programminghub.io/
  2. Grasshopper https://careerkarma.com/blog/grasshopper-app-review/
  3. Encode https://play.google.com/store/apps/details?id=com.upskew.encode&hl=en
  4. Mimo https://getmimo.com/
  5. Programming Hero https://www.programming-hero.com/
  6. Sololearn https://www.sololearn.com/
  7. Khan Academy https://www.khanacademy.org/computing/computer-programming
  8. W3Schools https://www.w3schools.com/
BLOG WEBSITES
  1. CSS Tricks https://css-tricks.com/
  2. Smashing Magazine https://www.smashingmagazine.com/
  3. Site Point https://www.sitepoint.com/
  4. Dev Community https://dev.to/
  5. Evanto Tuts https://tutsplus.com/
  6. Medium https://medium.com/
CHEAT SHEETS
  1. Over API https://overapi.com/
  2. Awesome Cheat Sheets https://lecoupa.github.io/awesome-cheatsheets/
  3. HTML5 Element Index http://html5doctor.com/element-index/
  4. HTML CheatSheet https://htmlcheatsheet.com/
  5. Can I Use https://caniuse.com/
  6. CSS Animation http://www.justinaguilar.com/animations/
  7. CSS Grid Cheat Sheet https://grid.malven.co/
  8. CSS Flexbox Cheat Sheet https://flexbox.malven.co/
  9. CSS Easing Functions https://easings.net/
FREE COURSES
  1. Web Development Learn By Doing HTML5 & CSS3 From Scratch https://www.u
  2. Master The Basics Of HTML5 & CSS3 Beginner Web Development https://www.udemy.com/c
  3. HTML And CSS Foundations https://www.udemy.com/course/html-and-css-foundations/
  4. Build Your First Website In 1 Week https://www.udemy.com/course/build-your-first-website-in-1-week/
  5. Introduction To CSS Beginners Guide To CSS Web Design https://www.udemy.com/course
BOOKS
  1. CSS Pocket Reference https://drive.google.com/file/d/1fqKiCvkESei14Oh3RoGCBBJkewZ3-
  2. CSS3 The Missing Manual https://drive.google.com/file/d/1deKgQjs9O0MoivQvDH3wyLz_nrU
  3. Head First HTML & CSS https://drive.google.com/file/d/1Ig31aq3gEd6qyOuLuvL1aeJXlE_A1B
  4. HTML & CSS Design & Build Websites - https://drive.google.
  5. HTML5 https://drive.google.com/file/d/1nxYanqOOsA3olZkfIL5BZsMoax_MMQ0R/vi ew?
  6. CSS3 https://drive.google.com/file/d/1clN8z5fH0cjR4NiBZTNXbS6dfw0GOjhr/vie w?usp=shari
CODE SNIPPETS
  1. Codepen https://codepen.io/
  2. Free Frontend https://freefrontend.com/
  3. Code My UI https://codemyui.com/
  4. Play Code https://playcode.io/
  5. JS Bin https://jsbin.com/
  6. JS Fiddle https://jsfiddle.net/
  7. CodeSandBox https://codesandbox.io/
  8. Web Code Tools https://webcode.tools/
  9. CSS Flow https://www.cssflow.com/
  10. CodePly https://www.codeply.com/
  11. CodePad https://coderpad.io/
  12. CSS Deck https://cssdeck.com/
  13. Code Interview https://codeinterview.io/
FREE WEB HOSTING
  1. GitHub Pages https://github.com/
  2. Netlify https://www.netlify.com/
  3. AWS https://aws.amazon.com/
  4. Firebase https://firebase.google.com/
  5. Infinity Free https://infinityfree.net/
  6. WordPress https://wordpress.com/
  7. Wix https://www.wix.com/
  8. Weebly https://www.weebly.com/in
  9. Shopify https://www.shopify.in/
CODE CHALLENGING WEBSITES
  1. TopCoder https://www.topcoder.com/challenges/?pageIndex=1
  2. Coderbyte https://www.coderbyte.com/
  3. HackerRank https://www.hackerrank.com/domains
  4. CodeChef https://www.codechef.com/
  5. Codewars https://www.codewars.com/
  6. LeetCode https://leetcode.com/
FREE ONLINE GAMES
  1. Floxbox Defense http://www.flexboxdefense.com/
  2. Unflod https://unfold.com/
  3. Grid Garden https://cssgridgarden.com/
  4. CSS Diner https://flukeout.github.io/
  5. Code Combat https://codecombat.com/
  6. Coding Game https://www.codingame.com/
  7. Screeps https://screeps.com/
  8. Flexbox Froggy https://flexboxfroggy.com/
  9. Code Monkey https://www.codemonkey.com/
  10. Cyber Dojo https://www.cyber-dojo.org/creator/home
CSS GENERATORS
  1. CSS Grid Generator https://cssgrid-generator.netlify.app/
  2. CSS Flexbox Generator https://cssflex-generator.netlify.app/
  3. CSS Matic https://www.cssmatic.com/
  4. Patternify http://www.patternify.com/
  5. ColorZilla Gradients https://www.colorzilla.com/gradient-editor/
  6. Gradient Generator https://cssgradient.io/
  7. CSS Layout Generator https://csslayout.io/
  8. Animation Generator https://cssanimate.com/
  9. CSS3 Generator https://css3generator.com/
  10. Web Code Tools https://webcode.tools/generators/css
FREE TEMPLATES
  1. Templated https://themewagon.com/author/templated/
  2. Zero Theme https://www.zerotheme.com/
  3. UI Deck https://uideck.com/
  4. Admin UI Themes https://athemes.com/collections/free-bootstrap-admin-templates/
  5. HTML5 Up https://html5up.net/
  6. Theme Wagon https://themewagon.com/
  7. ColorLib https://colorlib.com/
  8. W3Layouts https://w3layouts.com/
GITHUB REPOSITORIES
  1. Awesome CSS https://github.com/awesome-css-group/awesome-css
  2. Web Developer Roadmap https://github.com/kamranahmedse/developer-roadmap
  3. JavaScript Algorithms https://github.com/trekhleb/javascript-algorithms
  4. Awesome Learning Resources https://github.com/lauragift21/awesome-learning-resources
  5. Clean Code JavaScript https://github.com/ryanmcdermott/clean-code-javascript
  6. Frontend Checklist https://github.com/thedaviddias/Front-End-Checklist
  7. JavaScript Concepts https://github.com/leonardomso/33-js-concepts
  8. 30 Seconds Of Code https://github.com/30-seconds/30-seconds-of-code
  9. CSS Protips https://github.com/AllThingsSmitty/css-protips
COLOR PALETTES
  1. Color Hunt https://colorhunt.co/
  2. HTML Color Code https://htmlcolorcodes.com/
  3. Coolors https://coolors.co/
  4. UI Gradients https://uigradients.com/
  5. Gradient Genarator https://www.colorzilla.com/gradient-editor/
  6. Flat UI Colors https://flatuicolors.com/
CHROME EXTENSIONS
  1. CSS Peeper https://chrome.google.com/webstore/detail/css- peeper/mbnbehi
  2. Colorpick Eyedropper https://chrome.google.com/webstore/detail/
  3. Window Resizer https://chrome.google.com/webstore/detail/window- res
  4. Lorem Ipsum Generator https://chrome.google.com/webstore/d
  5. CSS Scan https://chrome.google.com/webstore/detail/css- scan/gieabiemggnpn
  6. CSS Viewer https://chrome.google.com/webstore/detail/css-v
  7. HTML Validator https://chrome.google.com/webstore/detail/k
  8. Wappalyzer https://chrome.google.com/webstore/detail/wappalyzer/gppongmhj
  9. JSON Viewer https://chrome.google.com/webstore/detail/json- 19
  10. viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en US
ICONS
  1. Font Awesome https://fontawesome.com/
  2. Icons8 https://icons8.com/
  3. Flaticon https://www.flaticon.com/
  4. Pixeden https://www.pixeden.com/
  5. Fontello https://fontello.com/
  6. Icon Finder https://www.iconfinder.com/
  7. Captain Icon https://mariodelvalle.github.io/CaptainIconWeb/
  8. Endless Icons https://endlessicons.com/
  9. Icon Icons - https://icon-icons.com/
  10. Round Icons https://roundicons.com/
ILLUSTRATIONS
  1. Freepik https://www.freepik.com/
  2. Undraw https://undraw.co/
  3. Drawkit https://www.drawkit.io/
  4. Humaaans https://www.humaaans.com/
  5. Handz https://www.handz.design/
  6. Open Doodles https://www.opendoodles.com/
  7. Illustration. co http://illustration.co/
  8. Vivid Js https://webkul.github.io/vivid/
  9. Many Pixels https://www.manypixels.co/
NEWSLETTERS
  1. JavaScript Weekly https://javascriptweekly.com/
  2. Node.js Weekly https://nodeweekly.com/
  3. FrontEnd Focus https://frontendfoc.us/
  4. WebTools Weekly https://webtoolsweekly.com/
  5. CSS Weekly https://css-weekly.com/
  6. JavaScript Kicks https://javascriptkicks.com/
WEB DESIGN INSPIRATION
  1. Behance https://www.behance.net/
  2. Awwwards http://www.awwwards.com/
  3. CSS Nectar http://cssnectar.com/
  4. SiteInspire https://www.siteinspire.com/
  5. Frontend Mentor https://www.frontendmentor.io/
ANIMATION LIBRARIES
  1. Animate. CSS http://daneden.github.io/animate.css/
  2. Bounce JS http://bouncejs.com/
  3. Anime JS http://anime-js.com/
  4. CSShake http://elrumordelaluz.github.io/csshake/#1
  5. Hover. CSS http://ianlunn.github.io/Hover/
SOME MORE USEFUL WEBSITES
  1. Hidden Tools https://hiddentools.dev/
  2. Iconscout https://iconscout.com/
  3. CSS Zen Garden http://www.csszengarden.com/
  4. A List Apart https://alistapart.com/
  5. Code Project https://www.codeproject.com/
  6. Scotch https://scotch.io/
  7. The Odin Project https://www.theodinproject.com/
  8. CSS Autor https://cssauthor.com/
  9. Gradient Magic https://www.gradientmagic.com/
  10. Trianglify https://trianglify.io/
  11. CSS Reference https://cssreference.io/
  12. HTML Reference https://htmlreference.io/
  13. Free CSS https://www.free-css.com/
  14. Fun JavaScript Projects https://fun-javascript-projects.com/
  15. Daily Dev https://daily.dev/
  16. Dev Docs https://devdocs.io/
  17. What Runs https://www.whatruns.com/
  18. 1LOC https://1loc.dev/
  19. Am i Responsive http://ami.responsivedesign.is/
  20. Shape Divider https://www.shapedivider.app/
SOME MORE USEFUL WEBSITES
  1. Fancy Border Radius https://9elements.github.io/fancy-border-radius/
  2. CSS Clip Path https://bennettfeely.com/clippy/
  3. 30 Seconds Of Code https://www.30secondsofcode.org/
  4. Undraw https://undraw.co/
  5. Humaaans https://www.humaaans.com/