LET'S LEARN TOGETHER. THE BEAUTIFUL THING ABOUT LEARNING IS NOBODY CAN TAKE IT AWAY FROM YOU.

Configure Husky in VS Code for JavaScript Development


In my previous post, I have written down the steps which will help you to configure ESLint and Prettier in Visual Studio Code to make your JavaScript development easy and making sure code syntax, as well as best practices, are being followed. If you haven't seen that post, I highly recommend you go through that at - Configure ESLint and Prettier in VS Code for JavaScript Development.

Today I am going to talk about another important tool when you are dealing with committing your JavaScript code in Git repository. It's called Husky. 

From this post, you can expect -
  • Problems that Husky can solve
  • Quick introduction of husky
  • Configure Husky in Visual Studio Code
  • Examples

Problems that Husky can solve

So far by installing ESLint and Prettier we have the option to run the script which will check for syntax and best practices in our JavaScript code. But what about if we forget to execute this script before committing our changes to the GitHub repository? We will be then committing poorly written code into our repo. We can always run ESLing and Prettier as part of our continuous integration, but having a problem identified at that stage is kind of late in the game. We need to fix now and do another commit. 

So it will be good if we can identify these problems even before we do the first commit. And here comes the power of Husky.

Quick Introduction of Husky

Husky is responsible for creating git hooks. Git hooks are scripts that git will execute before or after the events as per your configuration. So in our situation, we will be writing git hooks with husky which will execute eslint before every commit.

Configure Husky in Visual Studio Code

Step 1 - Install Husky

The first thing we need to do is to install Husky as dev dependencies. You can do that by executing the below command from your terminal.
"npm i -D husky".
Once the command executes successfully, husky will be added as a dev dependency in the package.json file.

Step 2 - Create git hook

You can create git hooks for husky by adding the below stuffs in your package.json.
"husky": {
"hooks": {
"pre-commit": "npm run lint -- -- src"
}
}

Basically, you are telling husky to run lint on the src folder before every commit. So if there is any complaint by lint, the actual commit will not happen.

You can get the full husky git options here.

Examples

Now let's create a new JavaScript file called HelloCanada.js and make sure ESLint through error message for that file. Here is the file -
var HelloCanada

console.log('Hello from Canada')

When we try to commit the file, the error will appear and the actual commit will fail. Below is the screenshot of the error message -

As you can see, husky ran the lint command and as it found some error, the actual commit stopped.


 

Share:

How to check for Permission Sets in Validation Rule



Recently while dealing with one of the requirement for my current project, I need to check for logged in user's persona and based on that, write validation rules which will restrict them to do some operations.

Here is the requirement

Let's say we have two personas - Change User and Change Manager. Both Change User and Change Manager can view and edit the cases, but when the case is in "In Progress" state, Change User is not allowed to update the target resolution date on the case.

Setup

Both the personas - Change User and Change Manager share the same role in the role hierarchy. (I know realistically they should have different role, but in my scenario, this is what customer wants as it aligns with their organization structure). So the way to differentiate them is through permission set. As a result, I have created two permission sets - Change User and Change Manager. Assigned the permission sets to respective users. 

"In Progress" is a case status value and Target resolution date is a custom field on Case object.

Problem faced

To implement the requirement that "Change User is not allowed to update the target resolution date on the case when the case is in In Progress state", I need to write validation rule. But there is no way that you can check for logged in user's assigned permission set in validation rule. There is a Salesforce Idea open for this feature. So makes sense that you vote for this idea.


Solution

I have created two Custom Permissions - Change User and Change Manager. Yes with the same name, but name doesn't matter, I choose to give the same name to make life simpler. ūüėäThen I added these custom permissions into the corresponding permission sets like Change User ( Custom Permission ) will go into  Change User ( Permission Set) and Change Manager ( Custom Permission ) will go into  Change Manager ( Permission Set).

With that done, I referred these custom permissions in my validation rule ( Yes, we can refer custom permissions in Validation Rule) like below -


I hope this will help you if you are also facing the same problem. I am very much interested to know if you have some other cool tricks to handle this situation. Thank you.

Share:

Configure ESLint and Prettier in VS Code for JavaScript Development



ESLint and Prettier are a great combination when it comes to doing JavaScript development work in Visual Studio Code. From this post, you can expect -
  • Quick Introduction of ESLint
  • Quick Introduction of Prettier
  • Configure ESLint and Prettier in Visual Studio Code
  • Example


Quick Introduction of ESLint

Writing JavaScript codes with clear coding conventions with automated enforcement is always the practice that every developer should follow. ESLint is that tool for linting Node.js packages, JavaScript files and can be easily configured to enforce many coding styles. Here is what mentioned in the ESLit website -

"ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code".


Quick Introduction of Prettier

Prettier is an opinionated code formatter. It is highly recommended when comes to making code formatted consistently for you and your team. Prettier supports many languages out of the box.


Configure ESLint and Prettier in Visual Studio Code

Step 1 - Install ESLint and Prettier from the VS Studio Marketplace

We can search for them in VS Studio Marketplace and Install from there.

Step 2 - Global Settings 

I have enable Editor: Format On Save. We can open settings from Ctrl + p and then type > Preferences: Open User Settings. Once opened check the box as shown below -

Step 3 - Initiate npm and create package.json

Execute the command "npm init -y" in the terminal and it will create package.json. Screenshot below


Step 4 - Install ESLint and Prettier as dev dependencies

Execute the command "npm i -D eslint prettier" and it will install the ESLint and Prettier as dev dependencies. Once installed, it will update package.json as -

Step 5 - Install ESLint-Plugin-Prettier and ESLint-Config-Prettier as dev dependencies

Installing this dependency will allow us to run prettier as eslint rules and report any issues. To install execute the command "npm i -D eslint-plugin-prettier eslint-config-prettier".

Step 6 - Install ESLint globally

We have to generate ESLint config files. Definitely we can generate the file manually, but I prefer generating the file through command. In order to generate ESLint config file through command line, we need to install ESLint globally. We can execute the command "sudo npm i -g eslint"

Step 7 - Generate the ESLint config file

We can execute the command "eslint --init" and then answer the questions asked there. This will create the config file named ".eslintrc.json".

Step 8 - Update ESLint configuration 

All the ESLint configurations are listed here.
ESLint-plugin-prettier configurations are listed here.
This is what I recommend for ESLint config -
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

 

Step 9: Update scripts in package.json

We can write below two lines/scripts in package.json which will help us to run javascript files and also execute eslint.
"start": "node",
"lint": "eslint",

Here is the final package.json file
{
"name": "JavaScriptSetup",
"version": "1.0.0",
"description": "",
"main": "HelloWorld.js",
"scripts": {
"start": "node",
"lint": "eslint",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Sudipta Deb",
"license": "ISC",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^3.6.1",
"@typescript-eslint/parser": "^3.6.1",
"eslint": "^7.4.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "^2.0.5"
}
}

Step 10: Execute JavaScript 

Let's create HelloWorld.js under src folder with simple statement console.log("Hello World");
From the terminal, execute the below command to execute HelloWorld.js

Note - In the command, I have passed the file name "src/HelloWorld.js" but I have used -- twice in the command. The reason for that to make sure letting npm know that the parameters are not for npm, rather this parameter is for the node so that it understands which file to execute.

Step 11: Execute ESLint and fix errors if needed

Execute the below command "npm run lint -- -- src" which will execute eslint in all the files present src folder. If there is no error, it will just show nothing. In case of error, it will show something like this -

The reason for this error is that Hello World is mentioned with single quotes and ESLint is recommending double quotes. You can fix these problems by executing "npm run lint -- --fix src".

I have shared this initial project in my Github Repo - ESLint-Prettier-VSCode-Setup

Below is the youtube video:



Share:

How to configure Visual Studio Code (IDE) for JavaScript Development



New to JavaScript development? Thinking about which IDE should you use and how to configure your IDE? How to test JavaScript code? How to debug JavaScript Code?

All these are valid and important questions to ask. I am going to create three posts covering each of these above three important points. Today's post is all about answering the first question. From this post, you can expect -
  • How to configure Visual Studio Code (IDE) for JavaScript Development

Configuring Visual Studio Code (IDE) for JavaScript Development

I personally like using Visual Studio Code for all my development work including JavaScript development. It is a very powerful source code editor. It is available for Windows, macOS and Linux. 
You can install it from here.

Once you install it, launch the application. Open the Command Palette and type 'shell command' to execute Shell Command: Install 'code' command in PATH.
Restart VS Code and that makes your editor ready to be configured for JavaScript. Pretty quick, right? Trust me this editor is also very lightweight.

Now to develop JavaScript and execute JavaScript, all you need is node.js. Installing node.js is very simple. You can refer this link

I personally prefer installing node through Brew. To do that, execute the below command from terminal in macOS.
brew install node
You can verify whether node is installed correct by doing this -

 [email protected]  ~/Documents/JavaScript node --version

v14.5.0


With that launch Visual Studio code and open Extension. Search for Babel ES6 and install the same. You can also open Babel ES6/ES7 from here. I highly recommend this as this will help you in coloring your JavaScript code and also highlight any syntax error. That's all you need to configure your IDE (Visual Studio Code) for JavaScript development.

With your Visual Studio code configured, you can execute your JavaScript code from Visual Studio code's terminal by executing node <JavaScript File Name>. Refer the below screenshot -


Share:

How I cleared Sales Cloud Consultant Certification

Happy Wednesday!! I am happy to announce that I have cleared my Sales Cloud Consultant certification exam last week and that is my 11th Salesforce certification.

 

In this post, I am going share my study notes hoping that it will help others.

Before going into more details, let's quickly understand what this certification is all about. Here is what we have from the Salesforce Exam Guide -







With that quickly review of the exam outline -

My two highly recommended study guides

Trailhead

The first thing that you need to complete is this Trailhead trail. This is must as it covers everything is a very structured way. Below is the link of the Trailhead trail

"Prepare for Your Salesforce Sales Cloud Consultant Credential"

Focus On Force

I highly recommend Focus On Force's Sales Cloud Consultant Study Guide. They explained all the important concepts in a very easy way with lots of visuals. Visual representation always seems very helpful to me to understand the concept. You can go for their Sales Cloud Consultant Certification Practice Exams as well. The practice exams helps me to understand the sections where I need to put more focus while studying.


My study notes


Sales Process

Read it from here 


Common Sales Productivity features

  1. Salesforce from Microsoft or Google Applications
  2. Email Templates with Merge Fields
  3. Salesforce App
  4. Dashboard
  5. News
    1. Includes articles from last 30 days.
    2. Available on Business accounts, contacts, leads, and in the home page.
    3. Articles come from reputable english-language news sources.
  6. Lightning Dialer
  7. Einstein Activity Capture
  8. High Velocity Sales (https://trailhead.salesforce.com/en/content/learn/modules/high-velocity-sales-for-sales-reps)
    1. Sales Cloud Add-ons for insight Sales team.
    2. Let managers use Sales Cadences to create custom Sales Processes that guide sales reps through handling different types of prospects.
    3. Those cadences appear for sales reps in the Work Queue, a task list that appears inside the Sales Console.
  9. Gmail integration (https://trailhead.salesforce.com/en/content/learn/modules/gmail_integration)
  10. Outlook Integration (https://trailhead.salesforce.com/en/content/learn/trails/outlook_gmail_integration)

Sales Productivity

Utilize Salesforce features like Console, Mobile App, Chatter, Work.com and email tools to improve Sales Productivity.

Measuring Productivity

Measure Sales Productivity by analyzing metrics related to the Sales Process, such as number of Sales Activities

Share:

Understanding JavaScript Variable Declaration - Let vs. Var vs. Const




Hello World!! Today I am going to explain different way of declaring variables in Javascript. 
Let's understand with examples how Let vs Var vs Const works in Javascript.

Before we start, let me recap the concepts of scope we have in Javascript.
Scope is the concept that manages the accessibility of the variables. At a very high level, the accessibility of the variable is limited to the block where they are defined. Outside the block, the variable in inaccessible. 

Let's jump into some examples -

Example 1: 
var myFunction = function(shouldCheck){
if(shouldCheck){
var x = 'Hello World';
}
return x;
}

var result = myFunction(true);
console.log(result);
Result: Hello World
Explanation: The variable x is declared with var. This makes the variable accessible within the function. The variable is even accessible outside the code block where it is defined. 
 
Example 2:
var myFunction = function(shouldCheck){
if(shouldCheck){
var x = 'Hello World';
}
return x;
}

var result = myFunction(false);
console.log(result);
Result: undefined
Explanation: Exactly the same as above code, the only difference is this time the code block within which x is declared is not getting executed. So we are getting undefined exception.

Example 3:
var myFunction = function(shouldCheck){
var x = 'Hello World from Outside'
if(shouldCheck){
var x = 'Hello World from Inside';
console.log(x);
}
console.log(x)
}

myFunction(true);
Result: 
Hello World from Inside
Hello World from Inside
Explanation: Here the outside x declaration is overwritten by inside x declaration. Calling the function with false will retain the outside x declaration and in that case it will print "Hello World from Outside".

Example 4:
var myFunction = function(shouldCheck){
if(shouldCheck){
let x = 'Hello World';
}
console.log(x);
}

myFunction(true);
Result: x is not defined
Explanation: This time x is defined with let instead of var. Declaring a variable with let will provide block scope i.e. the variable is accessible within the block in which this is defined. This is the biggest difference between declaring variable with Var vs. Let. Now in our example since x is not accessible within the if block, that is why console.log is throwing the error that x is not defined.

Example 5:
var myFunction = function(shouldCheck){
var x = 'Hello World from Outside';
if(shouldCheck){
let x = 'Hello World from Inside';
console.log(x);
}
console.log(x);
}

myFunction(true);
Result: 
Hello World from Inside
Hello World from Outside
Explanation: This time even though we have two declarations of the same variable x (one with var and one with let), inside declaration of x is treated as a separate variable and not overwriting the x declared outside with Var.

Example 6:
var myFunction = function(shouldCheck){
let x = 'Hello World from Outside';
if(shouldCheck){
var x = 'Hello World from Inside';
console.log(x);
}
console.log(x);
}

myFunction(true);
Result: 
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with let will make x accessible within the myFunction scope. Now declaring x again with Var within the same function creates conflicts and that is why the above error.

Example 7:
var myFunction = function(shouldCheck){
const x = 10;

if(shouldCheck){
var x = 100;
console.log(x);
}
console.log(x);
}

myFunction(true);
Result: 
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with const will make x accessible within the myFunction scope i.e. it created the Block scope. Now declaring x again with Var within the same function creates conflicts and that is why the above error.

Example 8:
var myFunction = function(shouldCheck){
const x = 10;

if(shouldCheck){
let x = 100;
console.log(x);
}
console.log(x);
}

myFunction(true);
Result: 
100
10
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with const will make x accessible within the myFunction scope i.e. it created the Block scope. Declaring x inside the loop with let creates another Block scope, which is absolutely fine even though the name of the variables are same. 

In summary, declaring variable with Const and Let will create Block Scope whereas declaring variable with Var will not create Block Scope.

Hope the above examples will help you to understand the basics of variable declaration in Javascript. Thank you and happy JavaScript learning.
 

Share:

Follow Me

Enter your email address:

Delivered by FeedBurner

Labels

Salesforce (105) Apex (47) admin (27) visualforce (21) ADM (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) lightning (16) javascript (14) SOAP (13) tutorial (11) Certification. (10) Kitchener Developer Group (8) Certification (7) Trigger (7) security (7) test class (7) unit testing (7) Advanced Admin (6) Advanced Apex (6) Sharing and Visibility (6) design pattern (6) developer (6) report (6) salesforce release (6) service cloud (6) trailhead (6) Lightning Experience (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) formula (5) mobile (5) solution management (5) use case (5) JSON (4) Kitchener User Group (4) Lightning Web Component (4) Sales Cloud (4) Salesforce DX (4) Tips (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) event (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) visual studio code (4) Architect (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) REST (3) Role (3) Salesforce Certification (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Web Technology (3) automation tool (3) dynamic apex (3) license (3) map (3) mapbox (3) release (3) singleton (3) version controlling (3) Asynchronous callout (2) Aura Framework (2) Bulkify (2) Community (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) LWC (2) Lightning Design System (2) Lightning Feature (2) Live Agent (2) Metadata (2) PD II (2) Price Book (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) VS Code (2) Virtual Event (2) ant (2) basic (2) chatter (2) coding (2) communication (2) configuration (2) console (2) controller (2) documentation (2) dreamforce (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Activity Timeline (1) Advanced Currency (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) AppExchange (1) Arrow (1) Article (1) Asynchronous Apex (1) Batch (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Compare (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) CumulusCI (1) Custom Metadata (1) Custom Object (1) Custom Permission (1) Customer (1) Dated Exchange Rate (1) Decorator Design Pattern (1) Dev Hub (1) Development (1) Diwali (1) EDA (1) ESLint (1) Education Cloud (1) Email (1) FSC (1) Function (1) Future (1) Global Gathering (1) Goals (1) Guest Access (1) Guest Profile (1) Guest User Sharing Rule (1) Guide (1) HEDA (1) Higher Education (1) Household (1) Husky (1) IDE (1) Ideas (1) Improvement (1) KPIs (1) Knowledge Management (1) Large Data Volume (1) LastModifiedDate (1) Manage Currencies (1) Manual Sharing (1) Metrics (1) Multi Currency (1) New (1) New Feature (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Permission Set (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Platform Developer II (1) Presentation (1) Prettier (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) Queueable (1) QuickReference (1) Related records (1) Reports (1) Retrieve (1) Role Hierarchy (1) SAL (1) SFDX (1) Salesfor (1) Salesforce Advisor Link (1) Salesforce Labs (1) Salesforce Optimizer (1) SalesforceDx (1) Schedule (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Spring 20 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) Timeline (1) Unauthorized Access (1) User License (1) Users (1) Validation Rule (1) Web (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) actionFunction (1) actionPoller (1) actionRegion (1) actionSupport (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Popular Posts

Total Subscribers

Total Pageviews

Contact Me

Name

Email *

Message *