DEV Community: Nikhil karkra

The Developer’s Guide to the 2026 Salesforce AI Revolution: Beyond the CRM

Nikhil karkra — Sun, 11 Jan 2026 13:43:46 +0000

The Salesforce AI Revolution: Why "Internal Only" Agents are a Thing of the Past. The conversation around Salesforce AI is changing. In 2026, the real winners aren't just building agents for internal users; they are deploying them directly onto external websites to meet customers where they live.

If you are a developer or architect, the ability to break out of the "Salesforce Walled Garden" is the most valuable skill you can add to your toolkit this year.

The Paradigm Shift

We’ve all seen the demos of AI helping employees inside the Service Console. But the true ROI for businesses happens when that same AI intelligence is embedded into:

Public-facing WordPress sites
Custom React/Next.js applications
Client portals and E-commerce storefronts

Why "Deployment" is the New "Development"

Knowing how to prompt an AI is easy. Knowing how to securely deploy it to a third-party domain is where the real challenge lies. The market is currently starving for professionals who understand:

Cross-Platform Security: Managing CORS, CSP, and Trusted Sites to ensure your agent actually loads.
Identity & Context: Ensuring the AI knows exactly who it's talking to, even outside of Salesforce.
Agentic Action: Building agents that don't just "talk," but execute real-world business logic via external triggers.

Don't Just Build—Deploy

As the ecosystem shifts toward Agentforce, being the person who can say, "I can put our Salesforce AI on any website we own," makes you indispensable. It moves you from a "System Admin" mindset to an AI Solutions Architect mindset.

I’ve spent months documenting the end-to-end process of bridging the gap between Salesforce metadata and external web environments. I’ve turned those insights into a streamlined, marketing-to-deployment masterclass.

🚀 Level Up Your Salesforce Career

If you’re ready to stop watching demos and start launching live AI Agents on the web, join me in my latest deep-dive course:

Build & Deploy Salesforce AI Agents to External Websites

Building a Real-Time Project with LWC OSS and LWR

Nikhil karkra — Mon, 10 Jul 2023 11:24:24 +0000

Building a Real-Time Project with LWC OSS and LWR

Are you ready to take your Lightning Web Component skills to the next level? Look no further! Salesforcetroop is thrilled to announce the launch of our brand new course, "Building a Real-Time Project with LWC OSS and LWR." In this comprehensive course, we will dive deep into the world of Lightning Web Components (LWC) and explore how LWC OSS extends their capabilities beyond Salesforce.

Unleash the Power of LWC OSS

LWC OSS opens up a world of possibilities for developers by enabling them to create standalone web applications and integrate with other platforms. With this course, you'll discover how to leverage the full potential of LWC OSS and build real-time projects that will impress both your clients and peers.

What You'll Learn

Our course is designed to provide you with a hands-on learning experience, equipping you with the knowledge and skills necessary to build powerful web applications. Here are some key topics we'll cover:

Introduction to LWC OSS and its benefits
Setting up your development environment
Building reusable Lightning Web Components
Integrating LWC OSS with salesforce lead form
Implementing real-time functionality with Lightning Web Runtime (LWR)
Deploying and hosting your LWC OSS application

Exclusive Discount for Early Birds

To celebrate the launch of our course, we're offering an exclusive discount for the first 5 days! Use coupon code "LWCOSS" during checkout to unlock this limited-time offer. Don't miss out on this opportunity to enhance your web development skills and stay ahead of the curve.

Enroll now: Building a Real-Time Project with LWC OSS and LWR

Join Us on this Learning Journey

We understand the importance of continuous learning and staying updated with the latest technologies. By joining our course, you'll be part of a supportive community of like-minded developers, all eager to grow their expertise in Lightning Web Components.

Hurry! The discount is only available for a limited time. Don't miss your chance to boost your skills and unlock exciting opportunities in web development. Enroll now and embark on this exciting learning journey with Salesforcetroop.

Let's build real-time projects with LWC OSS and take your web development skills to new heights! 💪

Build 7 Real-Time Salesforce(LWC) Projects

Nikhil karkra — Sun, 08 Jan 2023 06:34:40 +0000

The salesforce market is looking for a skilled resource, but developers need to gain practical skills in LWC. This course will help anyone who wants to practice LWC or is looking for a job but needs to showcase the projects.

AVAIL 58% off from the below URL

https://www.udemy.com/course/zero-to-hero-with-real-time-salesforcelwc-projects/?couponCode=LWC_PROJECTS

In this course, we will build 7 projects that can be used in your day-to-day life.

BMI Calculator App
Alarm Clock App
Currency Converter App
Weather App
Employee Survey App
Note-taking App
Personal Portfolio

Fix - Github password authentication was removed issue - MacOS/Windows

Nikhil karkra — Sat, 14 Aug 2021 06:42:04 +0000

GitHub removed the Support for password authentication on August 13, 2021, and now we have to use a personal access token instead.

For MAC OS

Click on the Spotlight icon (magnifying glass) on the right side of the menu bar. Type Keychain access then press the Enter key to launch the app - In Keychain Access, search for github.com -- Find the internet password entry for github.com-- Edit or delete the entry accordingly - You are done

For Windows OS

Go to Credential Manager from Control Panel - Windows Credentials - find git:https://github.com - Edit - On Password replace with your Github Personal Access Taken -- You are Done

Video

Steps to create a personal access token

https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token

Steps performed while Creating Starter Kit for Javascript development

Nikhil karkra — Wed, 21 Jul 2021 11:07:44 +0000

Benefits of Starter kit

Reduce decision fatigue by standardizing a long list of agreed tools, patterns and practices
Right thing becomes automatic
Codifies the best practices learned
Rapid feedback by quick testing, linting and compilation erros
Automated checklist to avoid common mistakes

Below is the Starter kit Link that I have build

https://github.com/karkranikhil/nik-js-starter-kit-2021

Editors and configuration

We have the following options to choose from

[x] Visual Studio Code
[ ] WebStrom
[ ] Brackets
[ ] Atoms
[ ] etc

We choose the editor based on the following points
1) Modern JavaScript Syntax support

Autocompletion
Report usnused/invalid imports
Automated Refactoring tool like rename or extract functions 2) Framework intelligence -like built-in node debugging 3) Built-in terminal
Having a terminal built in gives you a single window for everything 4) Rich plugins Ecosystem 5) Cost effective

Automated Formating

[ ] Prettier - it automatically format your code on save
[x] EditorConfig - It helps you to maintain consistent coding styles between different editors and IDEs.

Note** - In editorConfig file we specify how editor should handle common settings like tabs vs spaces, indent size, line feeds, charsets and whitespaces.

** Plugin installed in vscode after adding the file .editorconfig is mentioned below
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Package Manager

We have the following options to choose from

[x] npm
[ ] Yarn
[ ] Bower
[ ] JSPM
[ ] Jam
[ ] volo

npm is the larget package manager in the workd with over 1 million packages.

Security Scanning by npm

Audits are built into npm that gives us the warning message if there is a known vulnerability in a package

npm audit --fix

Development web server

We have the following options to choose from

[x] Express
[ ] http-server
[ ] Webpack dev server
[ ] Browsersync

We configure our webserver so it's aautomatically started as a part of our development process and open our application so we can review our results immedietly on browser.

We are choosing server that's focused on javascript local development, highly configurable and powerful

http-server	Express	webpack dev server	Browsersync
Ultra-simple	Comprehensive	Built in to web server	Dedicated IP for sharing work on LAN
Single command serves current directory	Highly Configurable	Serves form memory	All interactions remain in sync
No configuration	Production gradeProduction grade	includes hot reloading	Great for cross-device testing
-	Can run it everywhere	Integrate with gulp, webpack etc	-

Sharing work with url

If you want to quickly share your work on the public web so your client can review your work in progress without paying anything

We have the following options to choose from

[x] localtunnel
[ ] ngrok
[ ] Surge
[ ] Vercel

localtunnel	ngrok	vercel	Surge
Easily share work on your local machine	Secure tunnel to your local machine	quickly deploy Node.js to cloud	Quickly host static files to public URL
npm install localtunnel -g	require additional setup to achive extra power	Each time you deploy, you're assigned to a new unique URL	Extreme simple, Surge publishes your static files to their services and then serves them to public url
`npm install localtunnel -g`, `lt --port 3000 --subdomain nik`	Sign up, `install ngrok`, install authtoken, start your app, ./ngrok http 80	`npm install -g vercel`, create start script, vercel	`npm install -g surge`, surge

Surge and Vercel is permanent solution, you don't have to keep your machine open until people to see your work in progress but surge only supports static fiels.

Vercel also support node js projects

Note** we are using localtunnel

npm install localtunnel -g
lt --port 3000 --subdomain nik

After running above command you will get the
url

Automation tools

We have the following options to choose from

[x] npm scripts
[ ] Grunt
[ ] Gulp

npm scripts are declared in the script section of your package.json file. With npm scripts you can directly leverage all the power of operating system command line.

npm scripts also offer convention based hooks for running other scripts before and after your scripts

Transpiling

We have the following options to choose from

[x] Babel
[ ] TypeScript
babel
Write standardized JS
Leverage full JS Ecosystem
Use experimental features earlier
No type defs, annotation required
typescript
Enhanced Automcomplete
Enhanced readability
Safer refactoring
Additional non standard featires
It has own complier but we can use babel to compile TypeScript

@babel/preset-env

This package is a smart preset that compiles our JS down to run in all recent browsers

Babel Configuration Styles

-- Using .babelrc --

Most common approach in which we place this file at the root dorectory of the project
not npm specific
Easier to read since isolated

-- Using package.json --

One less file in your project
"babel":{} need to add this in package.json

  "targets":">0.25%, not dead"

above config tells babel, to support all browser used by more that .25% people that are still officially supported by their creator

Modules formats

We have different type of modules formats

[x] ES6 Modules
[ ] CommonJS (CJS)
[ ] UMD (Universal Module Definition)
[ ] AMD (Asynchronous Module Definition)
[ ] IIFE (Immediately-invoked function expressions)
ES6 modules are standardized
Cleaner, Easy to read, improved autocomplete
intelligent refactoring
Tree Shaking - dead code elimination
Named imports and Default exports

CommonJS doesn't work in web browser aand so we need to bundle npm packages into a format that the browser can consume

Bundling

We use bundler to package any JavaScript into a single file or seperate file.

We have different type of modules formats

[x] Webpack
[ ] Rollup
[ ] Parcel
[ ] Snowpack

- [ ] Browserify

Webpack bundles more than just JS
Webpack offers a huge ecosystem of loaders so you can easily so we can instruct webpack to intelligently handle html, CSS, Images, fonts, etc
Webpack includes built in hot-reloading web server
Webpack serve files from memory which speeds up the development builds and automatically updates
code spliting

Sourcemaps

Sourcemaps map the bundled, transpiled and minified code back to orignal source.

Linting

Linters are so powerful that they can catch many errors at compile time.

Linters programmatically enforce consistency and provide raapid feedbaack to catch error during development.
Example - Curly braces position, trailing commas, Global variable, stop eval etc.
Linter avoid mistakes like Overwriting functions, assignment in conditional, Extra parenthesis

We have the following options to choose from

[x] Eslint
[ ] JSLint
[ ] JSHint

ESlint Decisions

Config format
WHich built in rules
warning or errors
Which plugins
Use preset instead

Config format

.eslintrc.js - export and object containing configuration
.eslintrc.yaml - define configuration structure
.eslintrc.yml - define configuration structure
.eslintrc.json - define configuration structure in JSON format
.eslintrc - deprecated
package.json - create eslintConfig property in package.json

warning vs erros

warning can continue development, caan be ignored
erros breaks the build and can't be ignored

eslint plugins

https://github.com/dustinspecker/awesome-eslint

Use a preset

ESlint comes with lot of logical defaults that save you a lot of time. We can use an existing set of rules like airbnbs, xo etc

Note
ESLint doesn't watch files

eslint-watchis a npm packages that adds file waatch

Note
ESLint doesn't supports experimental feature for that we have to use babel-eslint

Testing

Unit testing focus on testing of single function or module in an automated fashion.
Unit tests often asserts that a certain function return an expected value when past certain parameters
Unit tests mock out external dependencies like APIs database calls, and fiile system interactions so the results are fast and deterministic

Unit Testing Decisions

Framework
Assertion Library
Helper LIbraries
Where to run test
Where to places test
When to run tests

We have the following options to choose from Frameworks

[x] Mocha
[ ] Mocha
[ ] Jasmine
[ ] QUnit
[ ] Ava
[ ] Jest

I aam using MOchaa because it's popular, mature, flexible and large ecosystem of support

We have the following options to choose from Assertion library

[x] Chai
[ ] Should.js
[ ] expect

We have the following options to choose from Helper library

[x] JSDOM - simulate the browser's DOM and also run DOM-related tests without a browser
[ ] Cheerio - jQuery for Server
[ ] expect

Where to RUN TEST

[x] In-memory DOM - JSDOM (lightweight alternative to headless chrome)
[ ] Browser - Karma, Testem
[ ] Headless Browser - A browser that doesn't have a visible user interface

Where to put test files

[x] Alongside - keep in same folder, Easy import, provides clear visibility
[ ] Centeralized - Less confusion in src folder, too much path confusions

Where should our Unit test run

[x] On Hit Save - Rapid feedback, Facilitates TDD, increase test visibility

Continuous Integration

When your team commits code it's handy to confirm immediately that the commit works as expected when on another machine that's what a CI server is for.

CI server catches the number of potentials mistakes like
- Forgot to commit new files
- forgot to update package.json
- commit doesn't run cross platform
- Node version conflicts
- Bad merge
- Didn't run tests
- etc.

Continuous Integration Server

Run automated build
Run your tests
Check code coverage
Automated deployment

We have the following options to choose

[x] Travis CI - Linux based
[ ] Appveyor - Windows based
[ ] Jenkins
[ ] circle CI
[ ] Semaphore
[ ] SnapCI

Travis and Jenkins are the most popular solution but Travis is the hosted solution and with jenkins you have to host your CI server your own

HTTP Calls

Every Javascript application we build today makes HTTP Calls

We have the following options to choose

[ ] http - Node
[ ] request - Node
[ ] XMLHttpRequest - Browser
[ ] $.Ajax - Browser
[x] Fetch - Browser
[ ] isomorphic-fetch - run both on Node & Browser
[ ] xhr - run both on Node & Browser
[ ] Axios - run both on Node & Browser
[ ] SuperAgent - run both on Node & Browser

Mocking HTTP Calls

It means that you can recieve consistently instantaneous responses.

Helps in rapid prototyping
Helps to keep the work up and running when services are down
Work offline

We have the following options to choose

[ ] Nock
[ ] Static JSON
[x] JSON server
[ ] api-mock
[x] JSON Schema faker

Generate Random Data

faker.js
chance.js
randexp.js

Demo App

Directory structure and file naming
Framework usafe
Testing
Mock API
Automated deployment

Production Build

Minification to speed page loads
Sourcemaps to support debugging in production
Dynamic HTML to handle prooduction-specific concerns
Cache busting to ensure user recieve latest code on deployment
Bundle splitting to ensure users don't have to download the entire application when just part of changes
Error logging to see bugs in productions

Minification

It is used to speed up the page load and save bandwidth
Shortern varibale and function names
removes comments
removes whitespaces and new lines
Dead code elimination/Tree shakig
Debug via sourcemap

Dynamic HTML

Reference bundles automatically
Handle dynamic bundle name
inject production only resources

Bundle Splitting

Speed initial page load
Avoid re-loading all libraries

Cache Busting

This mean after someone downloads your javascript file they won't make another HTTP request for that file up to one year

Save HTTP requests
force request for latest version

Error logging

[x] track.js

TrackJS makes finding and fixing client-side errors simple.

choose logging serve based on the following points

provide bettwe metadata like stack trace, previous action, custom api for enhanced tracking
Notification & integration
Analytics and filteriing
pricing

Seperate UI and API

Simple, low risk and ui only deploy
Seperate teams and sperates concerns
Scale back-end separately
UI hosting is cheap and handling is easy independently

Cloud hosting

[] AWS
[ ] Azure
[X] Heroku - Used for API
[ ] Firebase
[x] Surge - used for UI
[ ] Netlify
[ ] Heroku

NASA Mission Control Deno Project

Nikhil karkra — Wed, 22 Jul 2020 00:10:15 +0000

If you are learning Deno. Somi Jaiswal has built the NASA mission control project using Denojs. It's really interesting to see people are growing so fast in the Deno world.

https://www.linkedin.com/posts/somi-jaiswal-1931174a_deno-deno-learning-activity-6691392113403400192-3B_n

Below is the demo of the app

Why to use Deno?.

Nikhil karkra — Fri, 19 Jun 2020 04:18:20 +0000

What is Deno?

Deno is a simple, modern, and secure runtime environment for Javascript and Typescript that uses V8 engine and builds with Rust Programming language.

Like any other language, it is used to build backend services or Application Programming interfaces(API) which are used in Web and Mobile applications. It is also used for communicating the database, sending an email, or storing a file on the server.

so, the question is Why Deno.

Below are the features that makes the difference.

1. Easy

Deno is Easy to get started
No need for prior knowledge
Really amazing for prototyping and agile development.

2. Fast, Reusable and Scalable

Deno is useful for creating a superfast application.
It is highly reusable and scalable
faster requests speed and response time

3. Save time

Deno save time in development
40% percent of fewer lines of code
40% fewer files
It has many Built-in utilities like dependency inspector, Deno formatter, and so on...

Reference - https://news.ycombinator.com/item?id=18058571

4. Secure by default

No file or network or environment access unless you have enabled it.

5. No Package manager

In Deno, you don't have to install big node_modules
When you called the library which you need it automatically cached on the file system.

6. Typescript

It Supports TypeScript out of the box.
If you know TypeScripe you can become easily full stack developer

References
https://deno.land/
https://dev.to/somijaiswal23/building-blocks-of-deno-3f2

Dashboard to track the Coronavirus Disease (COVID-19) Statistics using the Lightning Web Component.

Nikhil karkra — Tue, 17 Mar 2020 00:58:40 +0000

Hi Guys!! I have built a dashboard with a real-time API(of COVID-19) in Salesforce Playground using the Lightning web component.

Below is the design that I have built.

Demo

COVID-19 Global Cases Tracking Using LWC

Tutorial

I have recorded the video so that you guys can follow and build the awesome stuff. In this tutorial, you will learn how to build a dashboard using lightning web components. we are going to use the following topics

Data Binding
Component lifecycle
Third-party API Integration
Looping
Filtering
Charts - Highcharts
Tables
SLDS inbuilt CSS classes 9Custom CSS
Event handlers
getters

Code and Demo

GITHUB - https://github.com/karkranikhil/COVID-19-Dashboard-using-lwc
PLAYGROUND - https://developer.salesforce.com/docs/component-library/tools/playground/r03Vo4p4/3/edit

Face recognition using JavaScript

Nikhil karkra — Fri, 14 Feb 2020 08:04:45 +0000

Face detection is one of the most common applications of Artificial Intelligence. The use of Facial detection has increased in the last couple of years.

Face-api.js has brought a JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core API

In this tutorial, we will build the face recognition app that will work in the Browser. From the face, we will predict the Emotion, Gender, and age.

The output of this app will look as shown below.

Project Step

Step1 - Create a folder called `face-recognition`

Under the face-recognition folder create the following folder structure

All folders are self-explanatory except models. That I will cover in going forward.

Step2 - download the `face-api.min.js`

Download the face-api.min.js code from the following URL and paste it inside the js/face-api.min.js file.

https://raw.githubusercontent.com/karkranikhil/face-recognition-using-js/master/js/face-api.min.js

Step3 - download the modal files

Models are the trained data that we will use to detect the feature from the face.
Download the files from the following URL and placed them inside the models folder.

https://github.com/karkranikhil/face-recognition-using-js/tree/master/models

Step4 - Let's built the `index.html` file.

In index.html file we importing the style.css for styles, face-api.min.js for processing the model data and extracting the features and main.js where we will write our logic.
Inside the body tag we are creating a video tag to get the face, result-container for showing the emotion, gender, and age.

Place the below code inside the index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Face recognition App</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>Face recognition in the browser using Javascript</header>
    <div class="container">
      <video id="video" height="500" width="500" autoplay muted></video>
    </div>
    <div class="result-container">
      <div id="emotion">Emotion</div>
      <div id="gender">Gender</div>
      <div id="age">Age</div>
    </div>

    <script src="./js/face-api.min.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>

Step5 - Let's built the `main.js` file.

Inside the main.js file we are using promise.all to load the models to the face API. once the promise is resolved then we are calling the startVideo method that starts the streaming. Below are the methods used for this demo

faceapi.detectSingleFace method - detectSingleFace utilize the SSD Mobilenet V1 Face Detector. You can specify the face detector by passing the corresponding options object. To detect the multiple faces replace the detectSingleFace with detectAllFaces
withFaceLandmarks method - It is used for Detecting 68 Face Landmark Points
withFaceExpressions method - This method Detect all faces in an image + recognize facial expressions of each face and return the array
withAgeAndGendermethod - This method Detect all faces in an image + estimate age and recognize gender of each face and return the array

Replace the following code to the main.js

const video = document.getElementById("video");
const isScreenSmall = window.matchMedia("(max-width: 700px)");
let predictedAges = [];

/****Loading the model ****/
Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
  faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
  faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
  faceapi.nets.faceExpressionNet.loadFromUri("/models"),
  faceapi.nets.ageGenderNet.loadFromUri("/models")
]).then(startVideo);

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => (video.srcObject = stream),
    err => console.error(err)
  );
}

/****Fixing the video with based on size size  ****/
function screenResize(isScreenSmall) {
  if (isScreenSmall.matches) {
    video.style.width = "320px";
  } else {
    video.style.width = "500px";
  }
}

screenResize(isScreenSmall);
isScreenSmall.addListener(screenResize);

/****Event Listeiner for the video****/
video.addEventListener("playing", () => {
  const canvas = faceapi.createCanvasFromMedia(video);
  let container = document.querySelector(".container");
  container.append(canvas);

  const displaySize = { width: video.width, height: video.height };
  faceapi.matchDimensions(canvas, displaySize);

  setInterval(async () => {
    const detections = await faceapi
      .detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceExpressions()
      .withAgeAndGender();

    const resizedDetections = faceapi.resizeResults(detections, displaySize);
    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

    /****Drawing the detection box and landmarkes on canvas****/
    faceapi.draw.drawDetections(canvas, resizedDetections);
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);

    /****Setting values to the DOM****/
    if (resizedDetections && Object.keys(resizedDetections).length > 0) {
      const age = resizedDetections.age;
      const interpolatedAge = interpolateAgePredictions(age);
      const gender = resizedDetections.gender;
      const expressions = resizedDetections.expressions;
      const maxValue = Math.max(...Object.values(expressions));
      const emotion = Object.keys(expressions).filter(
        item => expressions[item] === maxValue
      );
      document.getElementById("age").innerText = `Age - ${interpolatedAge}`;
      document.getElementById("gender").innerText = `Gender - ${gender}`;
      document.getElementById("emotion").innerText = `Emotion - ${emotion[0]}`;
    }
  }, 10);
});

function interpolateAgePredictions(age) {
  predictedAges = [age].concat(predictedAges).slice(0, 30);
  const avgPredictedAge =
    predictedAges.reduce((total, a) => total + a) / predictedAges.length;
  return avgPredictedAge;
}

Step6 - Let's Add the style to the app.

Replace the style.css with the following code.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  background: #2f2f2f;
  width: calc(100% - 33px);
}

canvas {
  position: absolute;
}
.container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.result-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.result-container > div {
  font-size: 1.3rem;
  padding: 0.5rem;
  margin: 5px 0;
  color: white;
  text-transform: capitalize;
}
#age {
  background: #1e94be;
}
#emotion {
  background: #8a1025;
}
#gender {
  background: #62d8a5;
}
video {
  width: 100%;
}
header {
  background: #42a5f5;
  color: white;
  width: 100%;
  font-size: 2rem;
  padding: 1rem;
  font-size: 2rem;
}

Step7 - Let's run the app by the live server or `http-server`

Once you run the app you will see the following output.

you can run the app deployed by me, using the following URL
https://face-recognition.karkranikhil.now.sh/

Reference

https://github.com/justadudewhohacks/face-api.js/
GITHUB - https://github.com/karkranikhil/face-recognition-using-js

GraphQL - React Apollo with Demo

Nikhil karkra — Fri, 31 Jan 2020 03:54:05 +0000

I have built a basic Employee management application using React Apollo. It takes a lot of time for me to understand the terminologies used in react apollo. so, I thought of sharing some common methods and terms of Graphql apollo with you.

Below is the demo of my app

You can checkout my code here

Final Output of the Demo

Component View of the App

Key React-apollo Terminologies used in the demo

`HttpLink`

HTTP Link takes an object with some options on it to customize the behavior of the link. If your server supports it, the HTTP link can also send over metadata about the request in the extensions field.

import { HttpLink } from "apollo-link-http";
const link = new HttpLink({
  uri: "http://localhost:1234/"
});

`ApolloClient`

The Apollo Client constructor takes a small number of options, of which two are required.
1. link - Apollo Client requires an Apollo Link to serve as the network layer.
2. cache - The second required argument for using Apollo Client is an instance of an Apollo Cache. The recommended cache is the apollo-cache-inmemory which exports an { InMemoryCache }

//client.js
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";

const link = new HttpLink({
  uri: "http://localhost:1234/"
});

const cache = new InMemoryCache();
const client = new ApolloClient({
  link,
  cache
});
export default client;

`ApolloProvider`

It is a component that leverages React's Context API to make a configured Apollo Client instance available throughout a React component tree.

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ApolloProvider } from "@apollo/react-hooks";
import client from "./client";
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
<ApolloProvider client={client}>
      <App />
</ApolloProvider>
    , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

`gql`

JavaScript template literal tag that parses GraphQL queries into an abstract syntax tree (AST)

//queries.js
import gql from "graphql-tag";
export const ALL_EMPLOYEES_LISTS = gql`
  query AllEmployeeLists {
    employees {
        name
        id
        role
        createdAt
        img
        employer
    }
  }
`;
export const CREATE_EMPLOYEE = gql`
  mutation createEmployee($newEmployee: NewEmployeeInput!) {
    addEmployee(input: $newEmployee) {
        name
        id
        role
        createdAt
        img
        employer
    }
  }
`;
export const UPDATE_EMPLOYEE = gql`
  mutation updateEmployeeData($updateEmployee: updatedEmployee!) {
    updateEmployee(input: $updateEmployee) {
        name
        id
        role
        createdAt
        img
        employer
    }
  }
`;
export const DELETE_EMPLOYEE = gql`
  mutation deleteEmployeeData($deleteEmployee: EmployeesId!) {
    deleteEmployee(input: $deleteEmployee) {
        id
    }
  }
`;

`useQuery`

The useQuery React hook is the primary API for executing queries in an Apollo application. To run a query within a React component, call useQuery and pass it a GraphQL query string. When your component renders, useQuery returns an object from Apollo Client that contains loading, error, and data properties you can use to render your UI.

import { useQuery } from "@apollo/react-hooks";
const { data, loading, error} = useQuery(ALL_EMPLOYEES_LISTS);

`useMutation`

The useMutation React hook is the primary API for executing mutations in an Apollo application. To run a mutation, you first call useMutation within a React component and pass it a GraphQL string that represents the mutation. When your component renders, useMutation returns a tuple that includes:

A mutate function that you can call at any time to execute the mutation
An object with fields that represent the current status of the mutation's execution like update, variables, etc.

import { useMutation } from "@apollo/react-hooks";
const [deleteEmployeeData, deleteReponse] = useMutation(DELETE_EMPLOYEE);

`update` in useMutation

update function used to update the cache after a mutation occurs. Syntax as shown below.

update(cache,mutationResult })

`readQuery` & `writeQuery`

The readQuery method enables you to run GraphQL queries directly on your cache.
If your cache contains all of the data necessary to fulfill a specified query, readQueryreturns a data object in the shape of your query, just like a GraphQL server does.
If your cache doesn't contain all of the data necessary to fulfill a specified query, readQuerythrows an error. It never attempts to fetch data from a remote server.
writeQuery - This method is used to write arbitrary data to the cache. If you reload your environment, these changes will disappear.

Below is the example of useMutation with update method

const [createEmployee] = useMutation(CREATE_EMPLOYEE, {
    /***Updating the local cache****/
    update(cache, { data: { addEmployee } }) {
      const data = cache.readQuery({ query: ALL_EMPLOYEES_LISTS }); 
      cache.writeQuery({
        query: ALL_EMPLOYEES_LISTS, // query to update
        data: { employees: [addEmployee, ...data.employees] }
      });
    }
  });

Basic optimistic UI using `optimisticResponse`

Let's say we have an "Add employee" mutation, and we want the UI to update immediately when the user submits the mutation, instead of waiting for the server response.
The main way to get GraphQL data into your UI components with Apollo is to use a query, so if we want our optimistic response to update the UI, we have to make sure to return an optimistic response that will update the correct query result
Here's what this looks like in the code:

/***Employee Create Methods ****/
  const onSubmit=(input)=>{
    console.log(input)
    createEmployee({
      variables: { newEmployee: input },
      optimisticResponse: {
        __typename: "Mutation",
        createEmployee: {
          __typename: "Employee", // return type of mutation
          id: Math.floor(Math.random() * 1000) + "",
          name: input.name,
          role:input.role,
          createdAt:Date.now(),
          employer: input.employer,
          img: "https://via.placeholder.com/300"
        }
      }
    });
  }

Feel free to comment if any doubt or any issue with the code.

Git board - A dashboard build using React in two days from scratch.

Nikhil karkra — Mon, 20 Jan 2020 00:22:53 +0000

Introduction

I always want to build an application that has a dashboard. I decided to start building the dashboard using the GitHub API. I started the project called git-board which is is a dashboard for the top 100 repositories based on GitHub Stars.

Final Design

Home page
Dashboard

Technical approach

1) Create the base app using create-react-app
2) create two pages home page and dashboard page. The home page is the landing page that lists down the top 100 repositories. The dashboard page is the main page that shows the detailed view of the selected repository.
3) First created a Header component that is different based on the route as shown below

3) Use the fetch API to fetch the data from the Github API
4) In home page list down the top 100 repositories in card format with their logo, name, and description as shown below

5) Build a search box for filtering out the repository as shown below

6) on click of the card, we are navigating to the dashboard page and passing down the selected repo owner name and name.

7) In the dashboard page, we have created the grid using the flexbox based on our design

8) I have used the canvasjs charting library for visualization. Based on the types of a chart I have to build a component like BarChart, columnChart etc.

9)In the dashboard page, I have used the multiple GitHub API using the promise.all. Based on the data render the respective chart.

10 The final output of the dashboard is similar to as shown below.

Demo Video

Resource

If you like my work please give a star as an appreciation on my GitHub repository.

Github - https://github.com/karkranikhil/git-board
App URL - https://git-board.karkranikhil.now.sh/

Multiple worksheets in excel using Lightning web component

Nikhil karkra — Mon, 13 Jan 2020 13:24:28 +0000

The original article is written on Salesforce Lightning Web

Downloading the table data in Excel sheet is easy but downloading the multiple table data in multiple worksheets of Excel is quite challenging. To achieve this in LWC we need to follow the following steps

Download the xlsx.js

I have done some modifications in the xlsx.js to make it compatible with salesforce lightning. So, use the following link and download

https://gist.githubusercontent.com/karkranikhil/5d9db87139cac952c6b37a6828d855bc/raw/35b846a516456614830e284f05523f0696bc6845/xlsx.full.min.js

Add the xlsx.js to static resources

Create a folder with name xlsx and put the filexlsx.full.min.js in it. Zip the folder and upload it to the Static resources as shown below.

Create lightning web component - xlsxDemo

Create a LWC with name xlsxDemo and add the following code to the xlsxDemo.js file.

In the below code we have used the two apex methodgetContactLists && getAccountLists to get the data from contact and account table respectively.
Within the connectedCallback lifecycle hook we have called the getContactLists && getAccountLists and using promise resolved them.
We have stored the contact list headers in this.contactHeader and data in this.contactData
Similarly, Store the account list headers in this.accountHeader and data in this.accountData
Using this.xlsFormatter method to create the array of tables data and array of header. Also, using the this.workSheetName List which contains the list of worksheet names.

<!--xlsxDemo.js-->
import { LightningElement, track } from "lwc";
import getContactLists from "@salesforce/apex/ContactController.getContactLists";
import getAccountLists from "@salesforce/apex/AccountController.getAccountLists";
export default class XlsxDemo extends LightningElement {
  @track xlsHeader = []; // store all the headers of the the tables
  @track workSheetNameList = []; // store all the sheets name of the the tables
  @track xlsData = []; // store all tables data
  @track filename = "nikhil_demo.xlsx"; // Name of the file
  @track accountData = []; // used only for storing account table
  @track contactData = []; // used only for storing contact table

  connectedCallback() {
    //apex call for bringing the contact data  
    getContactLists()
      .then(result => {
        console.log(result);
        this.contactHeader = Object.keys(result[0]);
        this.contactData = [...this.contactData, ...result];
        this.xlsFormatter(result, "Contacts");
      })
      .catch(error => {
        console.error(error);
      });
    //apex call for bringing the account data  
    getAccountLists()
      .then(result => {
        console.log(result);
        this.accountHeader = Object.keys(result[0]);
        this.accountData = [...this.accountData, ...result];
        this.xlsFormatter(result, "Accounts");
      })
      .catch(error => {
        console.error(error);
      });
  }

  // formating the data to send as input to  xlsxMain component
  xlsFormatter(data, sheetName) {
    let Header = Object.keys(data[0]);
    this.xlsHeader.push(Header);
    this.workSheetNameList.push(sheetName);
    this.xlsData.push(data);
  }

   // calling the download function from xlsxMain.js 
  download() {
    this.template.querySelector("c-xlsx-main").download();
  }
}

Replace the following code in xlsxDemo.html file

In xlsxDemo.html we are calling the xlsxMain component. In c-xlsx-main component, we are passing the xlsHeader, filename, workSheetNameList and xlsData which is the header of the excel sheet, name of the excel sheet, worksheet names and excel sheet data respectively.
Created a download button on click of which downloading of excel sheet will trigger
Created the Account and Contact table using for:each loop

<template>
  <div class="margin-bottom-2rem">
    <lightning-card title="XLSX multi worksheet" icon-name="custom:custom14">
      <div class="slds-m-around_medium">
        <button onclick={download} class="btn success">Download</button>
        <!--xlsxMain component calling-->
        <c-xlsx-main
          header-list={xlsHeader}
          filename={filename}
          worksheet-name-list={workSheetNameList}
          sheet-data={xlsData}
        ></c-xlsx-main>
      </div>
      <div class="container">
        <!--Account Table-->
        <div class="child-container">
          <h1>Account Table</h1>
          <table>
            <tr>
              <template for:each={accountHeader} for:item="header">
                <th key={header}>{header}</th>
              </template>
            </tr>
            <template for:each={accountData} for:item="item">
              <tr key={item.Id}>
                <th>{item.Id}</th>
                <th>{item.Name}</th>
                <th>{item.Phone}</th>
                <th>{item.NumberOfEmployees}</th>
              </tr>
            </template>
          </table>
        </div>
        <!--Contact Table-->
        <div class="child-container">
          <h1>Contact Table</h1>
          <table>
            <tr>
              <template for:each={contactHeader} for:item="header">
                <th key={header}>{header}</th>
              </template>
            </tr>
            <template for:each={contactData} for:item="item">
              <tr key={item.Id}>
                <th>{item.Name}</th>
                <th>{item.Phone}</th>
                <th>{item.Email}</th>
                <th>{item.Title}</th>
                <th>{item.Id}</th>
              </tr>
            </template>
          </table>
        </div>
      </div>
    </lightning-card>
  </div>
</template>

Replace the following code in xlsxDemo.js-meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="xlsxDemo">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Create lightning web component - xlsxMain

In this component we will write our logic for downloading the excel with multiple worksheet.
In this component first will include the file xlsx.full.min.js from the static resources *We have used the loadScript to upload the xlsx.full.min.js to the component using the renderedCallback lifecycle hook.
In this component, we need to replace xlsxMain.js code with the following code rest all file remain as it is.
@api download method get called once the download button clicked on the screen.

//xlsxMain.js
import { LightningElement, api } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import workbook from "@salesforce/resourceUrl/xlsx";
export default class XlsxMain extends LightningElement {
  @api headerList;
  @api filename;
  @api worksheetNameList;
  @api sheetData;
  librariesLoaded = false;
  renderedCallback() {
    console.log("renderedCallback xlsx");
    if (this.librariesLoaded) return;
    this.librariesLoaded = true;
    Promise.all([loadScript(this, workbook + "/xlsx/xlsx.full.min.js")])
      .then(() => {
        console.log("success");
      })
      .catch(error => {
        console.log("failure");
      });
  }
  @api download() {
    const XLSX = window.XLSX;
    let xlsData = this.sheetData;
    let xlsHeader = this.headerList;
    let ws_name = this.worksheetNameList;
    let createXLSLFormatObj = Array(xlsData.length).fill([]);
    //let xlsRowsKeys = [];
    /* form header list */
      xlsHeader.forEach((item, index) => createXLSLFormatObj[index] = [item])

    /* form data key list */
      xlsData.forEach((item, selectedRowIndex)=> {
          let xlsRowKey = Object.keys(item[0]);
          item.forEach((value, index) => {
              var innerRowData = [];
              xlsRowKey.forEach(item=>{
                  innerRowData.push(value[item]);
              })
              createXLSLFormatObj[selectedRowIndex].push(innerRowData);
          })

      });
    /* creating new Excel */
    var wb = XLSX.utils.book_new();

    /* creating new worksheet */
    var ws = Array(createXLSLFormatObj.length).fill([]);
    for (let i = 0; i < ws.length; i++) {
      /* converting data to excel format and puhing to worksheet */
      let data = XLSX.utils.aoa_to_sheet(createXLSLFormatObj[i]);
      ws[i] = [...ws[i], data];

      /* Add worksheet to Excel */
      XLSX.utils.book_append_sheet(wb, ws[i][0], ws_name[i]);
    }

    /* Write Excel and Download */
    XLSX.writeFile(wb, this.filename);
  }
}

Run your code

Deploy both the component to your org.
Edit your page where you want to show this component and it will take you to the app builder.
drag the xlsxDemo component listed under custom heading to the page and save it
Go back to the page and you will see the following output

Download the excel sheet with multiple worksheets

Once you click on the download button, excel sheet with name nikhil_demo.xlsx get's download
If you open the excel sheet you will see the following output

Point 1 in the above image represents the file name
Point 2 in the above image represents the worksheets name

DEV Community: Nikhil karkra

The Developer’s Guide to the 2026 Salesforce AI Revolution: Beyond the CRM

The Paradigm Shift

Why "Deployment" is the New "Development"

Don't Just Build—Deploy

🚀 Level Up Your Salesforce Career

Build & Deploy Salesforce AI Agents to External Websites

Building a Real-Time Project with LWC OSS and LWR

Building a Real-Time Project with LWC OSS and LWR

Unleash the Power of LWC OSS

What You'll Learn

Exclusive Discount for Early Birds

Join Us on this Learning Journey

Build 7 Real-Time Salesforce(LWC) Projects

Fix - Github password authentication was removed issue - MacOS/Windows

For MAC OS

For Windows OS

Video

Steps to create a personal access token

Steps performed while Creating Starter Kit for Javascript development

Benefits of Starter kit

Below is the Starter kit Link that I have build

Editors and configuration

Automated Formating

Package Manager

Security Scanning by npm

Development web server

Sharing work with url

Automation tools

Transpiling

Babel Configuration Styles

above config tells babel, to support all browser used by more that .25% people that are still officially supported by their creator

Modules formats

CommonJS doesn't work in web browser aand so we need to bundle npm packages into a format that the browser can consume

Bundling

- [ ] Browserify

Sourcemaps

Linting

ESlint Decisions

Testing

Unit Testing Decisions

Continuous Integration

Continuous Integration Server

HTTP Calls

Mocking HTTP Calls

Generate Random Data

Demo App

Production Build

Minification

Dynamic HTML

Bundle Splitting

Cache Busting

Error logging

Seperate UI and API

Cloud hosting

NASA Mission Control Deno Project

Why to use Deno?.

What is Deno?

Below are the features that makes the difference.

1. Easy

2. Fast, Reusable and Scalable

3. Save time

4. Secure by default

5. No Package manager

6. Typescript

Dashboard to track the Coronavirus Disease (COVID-19) Statistics using the Lightning Web Component.

Below is the design that I have built.

Demo

Tutorial

Code and Demo

Face recognition using JavaScript

Project Step

Step1 - Create a folder called face-recognition

Step2 - download the face-api.min.js

Step3 - download the modal files

Step4 - Let's built the index.html file.

Step5 - Let's built the main.js file.

Step6 - Let's Add the style to the app.

Step7 - Let's run the app by the live server or http-server

Reference

Step1 - Create a folder called `face-recognition`

Step2 - download the `face-api.min.js`

Step4 - Let's built the `index.html` file.

Step5 - Let's built the `main.js` file.

Step7 - Let's run the app by the live server or `http-server`

`HttpLink`

`ApolloClient`

`ApolloProvider`

`gql`

`useQuery`

`useMutation`

`update` in useMutation

`readQuery` & `writeQuery`

Basic optimistic UI using `optimisticResponse`