DEV Community: shivamkapasia0

InboxHire – AI-Powered Job Application Tracker Using Emails + Postmark

shivamkapasia0 — Mon, 26 May 2025 16:58:44 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

I built InboxHire, a personal AI-powered job application assistant that helps job seekers track and manage their job applications automatically—just by forwarding their application emails.

No more copy-pasting details into spreadsheets or forgetting which company emailed you what. InboxHire listens to your email (via Postmark), extracts structured data using Gemini AI, and organizes everything in a sleek dashboard.

🎯 Purpose

Lets face it — being a job seeker these days is basically a full-time job... without the paycheck.

You are probably juggling applications across every corner of the internet:

🔗 LinkedIn – Where "Open to Work" becomes a lifestyle.
🔥 Naukri.com – Where you uploaded your resume once... and they still email you daily.
✨ Shine.com – Because job hunting needs a little sparkle.
🌍 Turing – For when you want to work remotely from your couch... in sweatpants.
🏢 Company Career Pages – Each one with its own password requirements and CAPTCHA puzzles.
📋 Job Boards – A digital forest of listings (and you're the squirrel).
📬 Direct Applications – Bold move. Respect. Hope someone actually reads it.

You are everywhere. And thats exactly why we're building tools to help you keep your sanity (and maybe even land your dream job in the process).

This multi-platform approach creates several challenges:

Scattered Applications: Your applications are spread across different platforms, making it difficult to maintain a centralized view
Missed Follow-ups: Without a unified system, it's easy to miss important follow-ups or deadlines
Inconsistent Tracking: Each platform has its own way of tracking applications, leading to inconsistent data
Time Management: Manually tracking applications across platforms is time-consuming and error-prone
Lack of Analytics: Without centralized data, it's difficult to analyze your application patterns and success rates

InboxHire solves these challenges by:

Automatically capturing application confirmations from your email
Centralizing all your applications in one dashboard
Providing smart notifications for follow-ups
Offering comprehensive analytics on your application journey
Saving you time and reducing the mental load of job hunting

Demo

🔗 Watch the full demo video here: Loom Video

Code Repository

📘 Documentation & Overview: GitHub Repository

shivamkapasia0 / inbox-hire

📬 InboxHire – Effortless Job Application Tracker

📚 Table of Contents

✨ Overview

InboxHire is an innovative job application tracking system that leverages Postmark's inbound email parsing capabilities and Google's Gemini AI to automatically organize and manage your job applications. Never miss a follow-up or deadline again!

🎥 Demo & Screenshots

Demo Video

Watch the demo on Loom

Click the image above to watch the demo video

App Screenshots

Home Page

Applications Page

🎯 Motivation (a.k.a. Why We're Even Doing This)

Lets face it — being a job seeker these days is basically a full-time job... without the paycheck.

You are probably juggling applications across every corner of the internet:

🔗…

View on GitHub

How I Built It

🔧 Stack

Framework: Next.js
AI Engine: Gemini 2.0 Flash via Google Generative AI API
Email Provider: Postmark Inbound Webhooks
UI Kit: Tailwind CSS
Storage: Local JSON (emails.json) — no database needed

Here's how the prototype works (powered by Postmark, Gemini AI, and pure hackathon energy):

📩 Email Received – You apply for a job. An email lands in your inbox. The journey begins.
🛠️ Postmark Jumps In – Our loyal sidekick, Postmark's inbound email API, catches the email and hands it over like a pro.
🤖 Gemini AI Extracts the Good Stuff – Company name, job title, application date — all pulled out faster than you can say "Dear Hiring Manager."
🗂️ New Entry Created – A shiny new application appears on your dashboard like magic.
📊 Analytics Updated – Your charts get a new data point. You're basically an Excel wizard now.
🔔 You Get Notified – Because what's the point of automation if it doesn't humblebrag with a notification?

┌─────────────────┐     ┌─────────────────────┐     ┌──────────────────┐
│                 │     │                     │     │                  │
│  Incoming Email │────▶│  Inbound Email API  │────▶│   Gemini AI      │
│  (Postmark)     │     │  (Webhook Handler)  │     │  (Gemini 2.0)    │
│                 │     │                     │     │                  │
└─────────────────┘     └─────────────────────┘     └──────────────────┘
                                                             │
                                                             ▼
┌─────────────────┐     ┌─────────────────────┐     ┌──────────────────┐
│                 │     │                     │     │                  │
│  Real-time      │◀────│  Data Storage       │◀────│  Keyword         │
│  Updates        │     │  (emails.json)      │     │  Matching        │
│  (Dashboard)    │     │                     │     │  (Fallback)      │
│                 │     │                     │     │                  │
└─────────────────┘     └─────────────────────┘     └──────────────────┘

Flow Description:
1. Email received via Postmark webhook
2. Inbound Email API processes and validates the email
3. Gemini AI extracts key information (status, company, role, etc.)
4. If AI fails, Keyword Matching provides fallback analysis
5. Processed data is stored in emails.json
6. Real-time updates are pushed to the dashboard

For Detailed Overview Please visit : https://github.com/shivamkapasia0/inbox-hire

Credits

Built with Next.js
Email processing by Postmark
AI powered by Google Gemini

Tired of Messy Bookmarks? Try BookMyTabs — Sleek, Smart, and in Beta! 🌟

shivamkapasia0 — Mon, 28 Apr 2025 07:21:20 +0000

Introducing BookMyTabs 🚀: Effortless, Beautiful Bookmark Management

Managing browser bookmarks has always been a challenge — messy folders, hard-to-find links, and almost zero personalization.

That's why I built BookMyTabs — a modern, feature-rich Chrome extension designed to help you organize your bookmarks like never before.

✨ Why Choose BookMyTabs?

BookMyTabs isn't just another bookmark manager.

It’s built with speed, simplicity, and a gorgeous dark theme at its core.

Whether you're a developer, a student, or just someone who loves staying organized, BookMyTabs will upgrade your daily browsing experience.

🔥 Key Features

📚 Effortless Bookmark Organization

Organize your bookmarks into custom categories that actually make sense — no more endless, confusing folders.

🏷️ Color-Coded Tagging System

Easily tag your bookmarks with custom color labels to filter and find them faster.

🔍 Lightning-Fast Search

Instantly find any saved page with a powerful, built-in search feature.

⭐ Favorite Your Important Bookmarks

Star your most valuable bookmarks for one-tap access when you need them the most.

🎨 Sleek, Dark-Themed Interface

Enjoy a modern and eye-friendly UI, perfect for day or night browsing.

💾 Private, Local Storage Using IndexedDB

Your data stays safe, private, and local — no cloud uploads or data leaks.

📱 Fully Responsive Design

BookMyTabs works beautifully across desktops, tablets, and mobile devices.

🔄 Real-Time Updates

Experience a smooth and instant UI — your bookmarks update the moment you add, edit, or organize them.

🚀 Getting Started is Easy!

Install BookMyTabs from the Chrome Web Store.
Start organizing your bookmarks in style.
Enjoy a faster, cleaner, and more organized browsing experience!

🧪 Beta Notice

BookMyTabs is currently in Beta!

While I’ve worked hard to build a stable experience, there may still be minor bugs or quirks.

Your feedback is incredibly valuable in helping shape future updates! 🚀

💬 I'd Love Your Feedback!

I'm actively looking for ways to improve BookMyTabs.

Please feel free to:

Leave a review 🌟
Share feature suggestions 💡
Report any bugs 🐛 you encounter.

Your support and ideas mean the world!

Stay organized. Stay efficient. Stay awesome.

Go ahead and try BookMyTabs today! 🚀

PermiForce: Permit.io X azureDevops

shivamkapasia0 — Sun, 27 Apr 2025 12:48:10 +0000

This is a submission for the Permit.io Authorization Challenge: Permissions Redefined

🚀 PermiForce: The Missing Security Layer for Azure DevOps PRs 🔐

Sick of unwanted PRs and unauthorized code slipping into your critical branches? Take back control!

Meet PermiForce — your bulletproof PR gatekeeper! 🔥

Built for the Permit.io Authorization Challenge, PermiForce brings fine-grained, role-based PR approvals directly into your Azure DevOps pipelines.

✅ Dynamic Permission Checks

✅ Real-Time Policy Enforcement

✅ Environment-Specific Controls (QA, UAT, Prod)

✅ Audit Trail for Full Compliance

✅ Low-Code Dynamic Integration with Azure Pipelines

🔐 Powered by Permit.io, PermiForce locks down your CI/CD like never before.

🛠️ What I Built

PermiForce transforms static pipeline permissions into dynamic, intelligent access control — enforcing "who can approve", "where they can deploy", and "when" based on real-time roles and policies.

Key Features:

Role-Based Access Control (RBAC): Enforces permissions based on user roles, preventing unauthorized deployments.
Dynamic Policy Enforcement: Utilizes Permit.io's policy engine to evaluate permissions in real-time.
Environment-Specific Controls: Differentiates access rights across environments (e.g., QA, UAT, Prod).
Integration with Azure DevOps: Seamlessly integrates with Azure DevOps pipelines for automated enforcement.

📝 Comparison: Azure DevOps vs. Permit.io

Feature	Azure DevOps	Permit.io
Granular Access Control	❌ Limited	✅ Fine-grained PR-level control
Role-Based Access	✅ Basic	✅ Advanced (Custom Roles)
Audit Trails for Approvals	❌ Limited	✅ Full audit trail & visibility
Real-Time Permission Validation	❌ Delayed	✅ Instant validation via API
Compliance Reporting	❌ Complex	✅ Simple & automated reports

Why Permit.io?

Azure DevOps lacks precise, dynamic PR-level access control.
Permit.io fills the gap by providing granular role-based permissions, streamlined compliance tracking, and enhanced security for DevOps workflows.

👥 User Roles and Permissions

Role	Permissions	Users	Branch Access
👨‍💻 Developer	- `CREATE_QA_PR` - Cannot approve any PRs	- alice@permiforce.com - bob@permiforce.com	✅ Can create PRs to QA ❌ Cannot create PRs to UAT ❌ Cannot create PRs to PROD
👨‍💼 Team Lead	- `CREATE_UAT_PR` - `APPROVE_QA_PR` - `APPROVE_UAT_PR`	- carol@permiforce.com	✅ Can create PRs to UAT ✅ Can approve QA/UAT PRs ❌ Cannot create/approve PROD PRs
👨‍💼 Release Manager	- `APPROVE_PROD_PR` - `APPROVE_QA_PR` - `APPROVE_UAT_PR` - `CREATE_PROD_PR` - `CREATE_QA_PR` - `CREATE_UAT_PR`	- shivamsfdc.work@gmail.com	✅ Full access to all branches ✅ Can create PRs to any branch ✅ Can approve any PR

🧾 Detailed Permission Matrix

🧪 Testing the System

To test, I created USER_NAME variable to simulate different users but these can be dynamic through azure pipelines as well.

Test as Developer

   # Set pipeline variable
   user_name: alice@permiforce.com
   # Expected Results:
   - Can create PR to QA ✅
   - Cannot create PR to UAT ❌
   - Cannot create PR to PROD ❌

Test as Team Lead

   # Set pipeline variable
   user_name: carol@permiforce.com
   # Expected Results:
   - Can approve QA/UAT PRs ✅
   - Cannot approve PROD PRs ❌
   - Cannot create QA PRs ❌

Test as Release Manager

   # Set pipeline variable
   user_name: shivamsfdc.work@gmail.com
   # Expected Results:
   - Can approve all PRs ✅
   - Can create PRs to any branch ✅

🎥 Demo

🔗 Watch the full demo video here: Loom Video

The demo showcases:

Setting up the Variable Group to securely store the Permit.io API key.
Creating a PR and triggering the pipeline.
A quick walkthrough of Permit.io policies.
Simulating PR access checks using different users (e.g., alice-dev).
Observing how PR approvals are enforced based on user roles.

Note: This project is for demonstration purposes only. The Permit.io policy server is locally hosted; therefore, the pipeline won't function as intended without the local server setup.

📂 Project Repository

📘 Documentation & Overview: GitHub Repository

shivamkapasia0 / PermiForce

PermiForce is a sophisticated Pull Request approval system that integrates Azure DevOps with Permit.io's fine-grained permission control. It ensures that only authorized personnel can approve and merge code changes into protected branches, maintaining code quality and security.

PermiForce: Azure DevOps PR Approval System with Permit.io

Note: This project is a submission to the Permit.io Authorization Challenge on dev.to. It demonstrates the implementation of fine-grained authorization using Permit.io in a real-world DevOps scenario.

🏆 Winner - Permit.io Authorization Challenge

We are proud to share that this project is one of the winners of the Permit.io Authorization Challenge hosted on DEV!

📰 Official Announcement: DEV.to Winners Post

Thank you to Permit.io and the DEV community for organizing the hackathon and recognizing our work!

View on GitHub

🛠️ Pipeline YAML Files: Azure DevOps Repo

dev.azure.com

Important: The GitHub repository contains comprehensive documentation and architectural details. The actual pipeline YAML configurations are maintained in the Azure DevOps repository.

🛤️ My Journey

As a Salesforce developer, I've often encountered challenges where CI/CD pipelines lack granular permission controls. Traditional setups allow any developer to push changes to critical environments, posing significant risks.

Through this project, I aimed to:

Enhance Security: Implement a system where only authorized roles can approve and deploy changes.
Leverage Policy-as-Code: Utilize Permit.io to define and enforce access policies dynamically.
Improve Workflow: Streamline the deployment process while maintaining strict access controls.

Challenges Faced:

Integrating Permit.io with Azure DevOps pipelines.
Simulating different user roles within the pipeline.
Handling API call failures gracefully within YAML scripts.

Key Learnings:

The power of combining policy-as-code with CI/CD pipelines.
Advanced YAML scripting techniques in Azure DevOps.
The importance of dynamic access control in modern DevOps practices.

🔐 Using Permit.io for Authorization

To implement dynamic, fine-grained access control in our Azure DevOps pipelines, we integrated the Permit.io Node.js SDK. This approach allowed us to perform real-time permission checks based on user roles and actions, ensuring that only authorized personnel can create or approve pull requests (PRs) to specific environments.

🚀 Integration Steps:

SDK Installation: We began by installing the Permit.io SDK in our project:

   npm install permitio

SDK Initialization: In our pipeline scripts, we initialized the SDK using our Permit.io API token:

   const { Permit } = require('permitio');

   const permit = new Permit({
     token: process.env.PERMIT_API_KEY,
     pdp: 'http://localhost:7000', // URL of the local PDP (Policy Decision Point)
   });

Note: The PERMIT_API_KEY is securely stored in Azure DevOps variable groups.

User Context Capture:

The pipeline captures the user_name of the individual initiating the PR. This information is crucial for evaluating permissions.
Permission Check:

Before proceeding with PR creation or approval, the pipeline invokes the check method:

   const decision = await permit.check(user_name, action, resource);

user_name: Email of the user initiating the action.
action: The action being attempted (e.g., create, approve).
resource: The target environment (e.g., qa, uat, prod).

Decision Enforcement: Based on the response:

If decision.allow is true, the pipeline proceeds.
If decision.allow is false, the pipeline halts, and an error message is displayed.

This integration ensures that PR operations are strictly governed by the defined policies in Permit.io, enhancing security and compliance in our CI/CD workflows.

Here is the link to our permit-server.js

Thank you for exploring PermiForce! 🚀

Update: I had accidentally submitted this post from another account "shivamkapasia" earlier. It’s now correctly published here from my main Dev.to account "shivamkapasia0". Thanks for understanding!

Please do visit for Documentation & Overview: GitHub Repository

A special thanks to the Permit.io and dev.to teams for organizing this challenge and providing a platform to innovate in the realm of CI/CD security.

🚀 Why I Switched from VSCode to CursorAI for Salesforce Development & Personal Projects

shivamkapasia0 — Sun, 05 Jan 2025 06:04:41 +0000

A s developers, we’re always striving for ways to code smarter, faster, and more efficiently. After using VSCode for years, I recently made the switch to CursorAI—and wow, what a difference it’s made! Whether it’s Salesforce development or my personal projects, CursorAI has been a game-changer. Let me explain why this tool is miles ahead of the competition and how it’s saving me HOURS every day.

⚡ AI-Driven Code Suggestions That Actually Make Sense

Salesforce development can be complex—Apex classes, Lightning Web Components, and custom integrations require thoughtful coding and precision. CursorAI understands the context of your project and gives smart, intuitive code suggestions. It doesn’t just autocomplete—it knows what you need, based on the problem you’re solving.

In Salesforce, where precision is key, CursorAI’s contextual AI helps me avoid the time spent hunting for the right syntax or solution. It learns from my coding patterns and grows smarter as I work, making suggestions that feel natural and spot-on. This level of personalized assistance? Unmatched by any other tool, including ChatGPT.

🔥 Save Hours on Debugging and Fixing Errors

Let’s be real—debugging is a pain. CursorAI makes it easy by instantly identifying issues and offering potential fixes. With Salesforce, I deal with complex Apex logic that can be a headache to debug, but now I can fix problems in minutes instead of hours.

Before switching to CursorAI, tasks like debugging Apex classes and troubleshooting LWCs often took me 4-5 hours. Now, I can do the same work in just 1 hour, thanks to CursorAI’s instant error handling and suggestions.

⏱️ One Hour for What Used to Take 8

On my personal projects outside Salesforce, CursorAI has been equally transformative. Writing complex algorithms or setting up large applications used to take 8 hours of my day. Now, with CursorAI’s fast AI assistance, I can complete those same tasks in under 1 hour. It’s like having a personal coding assistant that doesn’t tire out.

The AI’s ability to understand your code and offer tailored solutions is what speeds up my workflow. It’s not just code completion—it’s code evolution.

👥 Effortless Code Reviews and Collaboration

If you’re collaborating with a team or working in an open-source environment, CursorAI shines with its auto code reviews. It provides actionable feedback, suggests refactors, and ensures your code is clean and follows best practices.

What I love most is how seamless it is for collaboration—whether you’re reviewing a teammate’s code or working on your own, CursorAI brings intelligent insights right to your editor.

🚀 Final Thoughts: Why CursorAI is the Future of Coding

Switching from VSCode to CursorAI has been one of the best decisions I’ve made for both my Salesforce projects and personal work. The speed, intelligence, and contextual understanding that CursorAI brings to the table is unmatched. Tasks that would have taken me 8 hours can now be done in just 1 hour, and the quality of my work has improved.

If you’re still on the fence, I highly recommend giving CursorAI a try. It’s more than just an IDE—it’s an AI-powered coding assistant that’s making development faster and more efficient for thousands of developers. Trust me, once you try it, you’ll wonder how you ever lived without it.

💬 Let’s Talk!

Have you tried CursorAI yet? How has it changed your coding workflow? Drop a comment below and let’s discuss how AI is shaping the future of software development! 👇

🚀 My First Chrome Extension: Export & Import Salesforce Dependent Picklist Values with Ease! 🎉

shivamkapasia0 — Sat, 28 Dec 2024 12:07:23 +0000

Hey, Dev Community! 🙌

I’m thrilled to share my very first Chrome extension that aims to simplify working with Salesforce dependent picklists. Introducing Salesforce Dependent Picklist Exporter & Importer! 🛠️

Why I Built It:
As a Salesforce user, I know how tricky it can be to manage dependent picklist values—whether exporting them for analysis or importing them into Salesforce. To make life easier, I built a tool that does both!

What it Does:
• Export dependent picklist values from Salesforce directly into a CSV file.
• Import CSV values back into Salesforce, saving you time and hassle when dealing with large data sets.
• Streamlines your workflow with easy-to-use functionality.

How It Works:
1. Export: Log in to Salesforce, click the extension icon, and export the picklist values to a CSV file.
2. Import: If you have a CSV file with new picklist values, simply import them back into Salesforce through the extension.

No more manual copy-pasting or headaches managing picklist values! 🚀

👉 Check out the extension here: Salesforce Dependent Picklist Import/Export

Why You’ll Love It:
• Simplicity: Just install the extension and start exporting/importing values with a click.
• Efficiency: No more tedious manual entry or handling—automate the process.
• Free to Use: A straightforward tool to make Salesforce management a breeze, without any hidden charges.

I’m excited to hear your feedback and any suggestions for improvements. Let’s make it even better together! 🚀

salesforce #chrome #development

Var, Let, and Const

shivamkapasia0 — Sun, 16 Jan 2022 09:28:01 +0000

var vs let vs const

In this article, we'll discuss var, let and const with respect to their scope, use, and hoisting.
In javascript, you can create/declare variables using keywords var, let and const.

Lets see the differences between these keywords to have a better understanding of what to use when.

Scope

Scope essentially means where these variables are available for use.

There are two types of scopes in JS:

Function Scope: Visibility is limited to the function.

 function scopeFn() {  
   var num = 10;   
   console.log(num); //prints 10  
   }   
  console.log(num); // ReferenceError: num is not defined

 function scopeFn() {  
   var num = 20;   
   if (true) {   
     var num = 100;   
     console.log(num); //prints 100  
     }  
   console.log(num); //prints 100  
 }   
   console.log(num);  // ReferenceError: num is not defined

Block Scope: Visibility is limited to the block of code.

let num = 20;
 if (true) {   
     let num = 10;   
     console.log(num); //prints 10  
 }   
 console.log(num); // prints 20

Now, that we have idea of scope. We can discuss the scope of var, let and const.

var declarations are function scoped.
let declarations are block scoped.
const declarations are block scoped. ## Redefining and Redeclaring feature

A variable declared using ‘var’ can be redefined and even redeclared anywhere throughout its scope.

var x = 30;  
 console.log(x); //prints 30  
 x = "Hi"; //redefining or re-assigning (works without any error)  
 console.log(x); //prints "Hi"

 var y = 10;  
 console.log(y); //prints 10  
 var y = "Hello"; //Redeclaring (works without any error)  
 console.log(y) //Prints "Hello"

A variable declared using ‘let’ can be redefined within its scope but cannot be re-declared within its scope.

let x = 11;  
console.log(x); //prints 11  
x = "IB"; //works without any error  
console.log(x); //prints "IB"

let y = 12;  
console.log(y); //prints 12  
let y = "Scaler"; // error: Identifier y has already been declared

let z = 13;  
if(true){  
 let z = "Fun"; //works without any error as scope is different.  
 console.log(z) //prints "Fun"  
}  
console.log(z) //prints 13

A variable declared using ‘const’ cannot be redefined or re-declared within its scope.

const x = 10;  
console.log(x); //prints 10  
x = 11; // error: Assignment to constant variable.

const y;  
y = 2; //error

const z = 12;  
console.log(z) //prints 12  
const z= 13; // error: Identifier 'y' has already been declared

Note : Every const declaration must be initialized at the time of declaration.

Hoisting

Hoisting is a mechanism where variables and function declarations are moved to the top of their scope before code execution.

console.log(x); // prints undefined  
var x = 100;  
console.log(x); //prints 100

Variables declared using var are hoisted to the top of their scope and initialized with a value of undefined(special type).
Variables declared using let are hoisted to the top of their scope but are not initialized with any value.
Variables declared using const are hoisted to the top of their scope but are not initialized with any value.

console.log(x); // prints undefined  
var x = 100;  
console.log(x); //prints 100

console.log(y); //Reference error  
let y = 200;  
console.log(y); //prints 200

console.log(z); //Reference error  
const z = 300;  
console.log(z); //prints 300

Summary:

var declarations are globally scoped or function scoped while let and const are block scoped.
var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
While var and let can be declared without being initialized, const must be initialized during declaration.

Now we have understood the main difference between let, var and const.

Let's predict the output for the following code in the comments:

var x = 100;
{
    var x = -100;
}
let y = x;
{
    let y = 200;
}
console.log(y);

Got any question or additions? Please let me know.

Thank you for reading :)

Generate Badges for your awesome Markdown

shivamkapasia0 — Sun, 31 Oct 2021 11:25:01 +0000

Generating badges for your markdown is pretty simple, i've made a tool that can generate badges for your markdown.

Simply visit : https://shivamkapasia-developer-edition.ap16.force.com/Badges4Me/s/

Use

Just write select logo name and color and your badge will be instantly ready and just copy the code by pressing the icon right to the badge and paste into your markdown.

you can simple tap copy to clipboard icon under the icon and simply paste it in your markdown.
just like below badge.

You can also visit the repo : https://github.com/shivamkapasia0/Github-Badge-Generator

Run JS directly from the browser

shivamkapasia0 — Sun, 31 Oct 2021 08:35:52 +0000

Hey folks!

Sometimes when working on large project we need to check if this piece of code will work what it says or not and we can't debug in our project as it will take time to debug, In this case some dev use online js compiler or other editors/IDE but you can run javascript directly from your browser and also save code for your future use.

Step 1 : Right click in browser and click on inspect.
Step 2 : Click the Sources tab to open the Sources panel. The Page pane usually opens by default.

Step 3 : Click the Snippets tab to open the Snippets pane. You might need to click More Tabs >> in order to access the Snippets option.

Open the Snippets pane

The Snippets pane lists your Snippets. When you want to edit a Snippet, you need to open it from the Snippets pane.

press Control+Enter or Command+Enter (Mac).

Rename Snippets

Open the Snippets pane.
Right-click the Snippet name and select Rename.

Delete Snippets

Open the Snippets pane.
Right-click the Snippet name and select Remove.

More details on snippets here.

What's your thought on this ?

View Github Repo Without Downloading in a Structured Manner!

shivamkapasia0 — Sun, 31 Oct 2021 06:24:52 +0000

Hey folks!

I'm back with a time-saving tip, We all know that we can view our Github Repo code on GitHub but it is not convenient at all we have to move back and forth to view the code properly. So here is a simple trick to simply view your code in a structured manner without having to download the entire repo.
Go to any github repo like:
https://github.com/shivamkapasia0/Github-Badge-Generator
and add 1s in between github and .com and your link would become like https://github1s.com/shivamkapasia0/Github-Badge-Generator

and hit enter to see the magic.

Note: This is not officialy supported by github. so it would be recommended to use this only on public repos.

what's your thought on this ?

String To Array In One Line : JavaScript

shivamkapasia0 — Sun, 31 Oct 2021 05:43:31 +0000

Hey folks!
we can easily convert String into an array by using spread operator (...) :

const string = 'Shivam Kapasia';
const array = [...string];
console.log(`${array}`); // S,h,i,v,a,m, ,K,a,p,a,s,i,a

Note : The array will also include space, but if you don't want to store space in array first remove space from string then use spread operator.

What’s your preferred way to convert string into an array ?

Swap two variables without a 3rd : JavaScript

shivamkapasia0 — Sun, 31 Oct 2021 04:50:39 +0000

Destructuring assignment

Destructuring assignment (a feature of ES2015) lets you extract items of an array into variables.

let firstName = 'Shivam', secondName = 'Kapasia';
[firstName, secondName] = [secondName, firstName];
console.log('firstName: ' + firstName); // Kapasia
console.log('secondName: ' + secondName); // Shivam

you can also swap two arrays like :

let array1 = [1,2,3], array2 = [3,4,5];
[array1, array2] = [array2, array1];
console.log(`${array1}`); // 3,4,5
console.log(`${array2}`); // 1,2,3

I like the destructuring approach because it’s short and expressive: swapping is performed in just one statement. It works with any data type: numbers, strings, booleans, objects,arryas etc.

I recommend swapping variables using a destructuring assignment for most of the cases.

What’s your preferred way to swap variables?

Lwc -> Apex : Salesforce

shivamkapasia0 — Sun, 24 Oct 2021 12:48:37 +0000

# Call Apex Methods Imperatively

Call Apex Methods Imperatively is very simple :

1. Import Apex Method in js file like below format :

import apexMethodName from  '@salesforce/apex/Namespace.ApexClassName.MethodName';

example :

import getAccountList from  '@salesforce/apex/AccountHelperClass.getAccountList';

2. Call Apex Method as per your choice like below:
Here we are not passing any param to apex:

import { LightningElement, track } from  'lwc';
import getAccountList from  '@salesforce/apex/AccountHelperClass.getAccountList';
export  default  class  IterationComp  extends  LightningElement {
@track accountList = [];
@track error;
 loadAccountListData() {
 // here we are not sending any params to apex.
 // but if apex method requires params then,
 // we can pass like getAccountList({paramName : valueToPass})
 // instead of  getAccountList()
        getAccountList() 
            .then(result => {
                this.accountList= result;
            })
            .catch(error => {
                this.error = error;
            });
    }
}

In above js code we have made a function loadAccountListData() inside this we are calling our apex method getAccountList from our Apex class AccountHelperClass and storing result in our accountList variable.

Imperative way basically uses promise to return the data and if any error occurs, it will be catch by our catch block.

We are calling our apex method in js function, so that we can reuse it by calling the this.loadAccountListData() function in any other js function. so we need to just call this.loadAccountListData to call the apex if we want to, or you can simple use getAccountList() function in other function.

Apex Class : In Imperative way, the cacheable=true is not required and thus it gives the ability to mutate the data inside apex method. But we can use it.

public class AccountHelperClass {
    @AuraEnabled
    public static List<Account> getAccountList() {
        return [SELECT Id, Name FROM Account ];
    }
}

Passing params to apex : Suppose if apex require params to be passed like below apex method:

public class AccountHelperClass {
    @AuraEnabled
    public static List<Account> getAccountList(String searchKey) {
        String key = '%' + searchKey + '%';
        return [
            SELECT Id, Name FROM Account WHERE Name LIKE :key WITH LIMIT 10
        ];
    }
}

So our js code would become like below :

import { LightningElement, track } from  'lwc';
import getAccountList from  '@salesforce/apex/AccountHelperClass.getAccountList';
export  default  class  IterationComp  extends  LightningElement {
@track accountList = [];
@track error;
 loadAccountListData() {
 let key = 'shivam';
        getAccountList({searchKey : key}) 
            .then(result => {
                this.accountList= result;
            })
            .catch(error => {
                this.error = error;
            });
    }
}

we can call loadAccountListData() function on onclick()in html or if you want to call apex when the components load you can simply call in connectedCallBack() function.

Calling Apex on Loading of Component :

To get data from apex whenever components load we can simply use connectedCallback() like below :

import { LightningElement, track } from  'lwc';
import getAccountList from  '@salesforce/apex/AccountHelperClass.getAccountList';
export  default  class  IterationComp  extends  LightningElement {
@track accountList = [];
@track error;

// it runs whenever components loaded into DOM
connectedCallback() { 
    this.loadAccountListData();
}

 loadAccountListData() {
 let key = 'shivam';
        getAccountList({searchKey : key}) 
            .then(result => {
                this.accountList= result;
            })
            .catch(error => {
                this.error = error;
            });
    }
}

Keep following lwc series for upcoming blogs on lwc components,