DEV Community: Kamesh Sethupathi

Compressing and Decompressing User Permissions with JavaScript

Kamesh Sethupathi — Wed, 03 Jan 2024 17:34:07 +0000

User permissions are an essential part of any application’s security model. One major use case for compressing and decompressing user permissions is to include the compressed permissions in an authentication token.

When a user login and obtained the access token, you can attach their permissions to the token.

Compressed: 3963n
Decompressed: 
{
  forms: [1, 2, null, 4],
  users: [5, 6, 7, null],
  archive: [9, 10, 11, 12],
}

Don't sell the sugar, sell the empty bag

Kamesh Sethupathi — Tue, 26 Dec 2023 02:03:02 +0000

My father runs a grocery store, and running a grocery store is not as easy as it looks. There are a lot of business tactics and meticulous calculations behind it.

Grocery stores are the most common business you can see nearby, they’re everywhere, and so competition is very high.

Sugar, oil, and tomato 🍅. The three killer products in any grocery store which they sell for zero margin.

These three items are essential for any household, and everyone uses them as a measuring gauge about how much margin a shop places on products they sell. Also, it has loyalty tactics too.

Continue Reading in my blog

Product Manager Bible : A 101 Guide to Successful Product Management - A Beginner's Journey

Kamesh Sethupathi — Fri, 08 Dec 2023 13:24:07 +0000

In this blog, we’ll navigate the exciting world of product management together, focusing on straightforward tips to set sail on a successful journey. This one-page bible for Product Manager encapsulates key principles, strategies, and mindsets essential for a successful product management journey.

1. Be Curious about Everything

Let's kick things off with a big dose of curiosity. Curiosity is like a treasure map in product management.
Wonder about your users, market trends, and what your competitors are up to.
It's not rocket science; it's about being genuinely interested in what makes your users tick.

.
> 🤔 Ask questions about users, market trends, and competitors.

Click Here to Read More

Common Mistakes in a Developer's Early Journey

Kamesh Sethupathi — Sun, 12 Nov 2023 16:51:21 +0000

Most developers, especially in their early stages, tend to focus on quick, hacky solutions to get things done. While this approach facilitates learning, it becomes problematic when stuck in this cycle.

Detecting and Adapting to Device Types in React with Custom Hooks through matchMedia api

Kamesh Sethupathi — Mon, 06 Nov 2023 03:32:00 +0000

In the world of web development, creating responsive and adaptive user interfaces is crucial. Ensuring that your website or web application looks & functions well across various devices, from mobile phones to desktop computers, is a basic requirement.

import { useState, useEffect } from 'react';


const useDeviceType = () => {
  const [deviceType, setDeviceType] = useState(null);

  // Define constants for media queries
  const MEDIA_QUERIES = {
    MOBILE: '(max-width: 767px)',
    TABLET: '(min-width: 768px) and (max-width: 1023px)',
    LAPTOP: '(min-width: 1024px) and (max-width: 1439px)',
    DESKTOP: '(min-width: 1440px)',
  };

  useEffect(() => {

👉 READ MORE

The Pitfalls of Blindly Following Hierarchy Trends in Startups

Kamesh Sethupathi — Mon, 30 Oct 2023 17:45:00 +0000

Today I could see many startups adding fancy hierarchies to their system. Adding layers of unnecessary hierarchy due to the hype just others doing it will ruin the business rather than benefiting in the longer run.

Starting an Adventure: Exploring Startups, Coding, and More

Kamesh Sethupathi — Mon, 30 Oct 2023 17:43:08 +0000

Hello! I’m Kamesh Sethupathi, and I’m super excited to welcome you to my own website. I’ve been a frontend developer for 5 years, and I’ve worked with cool companies like Zoho and TestSigma. My journey in tech has been fascinating, and I’m eager to share what I’ve learned with you.

On this site, I’ll talk about various stuff, like coding, making cool things, and the world of startups and businesses. I want to show you what’s up in the tech world and maybe inspire you.

https://kamesh.xyz/posts/adventure-begins/

🧠 Thoughts - a self-hosted microblogging web app for teams and groups

Kamesh Sethupathi — Thu, 25 Nov 2021 18:42:18 +0000

🧠 Thoughts - a self-hosted microblogging web app for teams and groups

Share your ideas, thoughts, and feelings. Let your team and group know what's up.
Lightweight, easy to use, and free.
For startups 🚀, teams and groups.

✨ Features

✍🏻 Share your thoughts, ideas, and feelings.
🔔 Get notified when someone shares, comments, or likes your thoughts.
💖 Like and share your view on others thoughts, ideas, and feelings.
#️⃣ hashtags, mentions, and links.
🧠 Share Ideas and get validated.
✅ Polls and Forms.
📝 Write your thoughts in Markdown as Blogs.

👩🏻‍💻Tech Stack

💻 Node.js
📦 Feathers.js
📦 MongoDB
🆚 vue.js

Installation ( Under construction, once ready you could )

⬇️ Download the latest release from GitHub
📦 Run npm install to install dependencies
🔌 Run the app with npm start

Follow

👁 Watch and 💖 star this repo to get notified
https://github.com/git-kamesh/thoughts

WebPack Loader vs Plugin

Kamesh Sethupathi — Sun, 14 Nov 2021 10:54:46 +0000

WebPack : Loader VS Plugin

Though there are couple of bundler available for javascript, Webpack steals the heart of most javascript developers.
The reason is obviously due to its vast ecosystem of loaders and plugins, which extend its core bundling functionality.
Even senior developers get confused between the purpose of loader and plugin. This article is for you if you dont want to be one of them.

CLICK HERE TO READ MORE

KReact: Building your own React & Virtual DOM

Kamesh Sethupathi — Sun, 24 Oct 2021 16:56:53 +0000

In this blog we will build a library similar to react and understand how react works internally. This blog is written in a way that even if you don't know react or want to learn the internal working of react, you would definitely find it useful.

Link to the GitHub Repository: https://github.com/git-kamesh/kReact

Reach me

💬 Ask me about Frontend and Backend Technologies
📫 How to reach me: Twitter @kamesh_koops

[REQ] Requirements & Use-cases : What we want to build?

[COMPONENT] Able to split complicated UI's into smaller reuseable components (Button, DropDown, ImageSlider, etc ).
[JSX] Able to write HTML template in JavaScript itself. Lets call this JSX.
[LOGIC] JSX should allows to embed JavaScript expressions and logically controlled .
[PROPS] Able to pass data/information to component from outside, lets call this props.
[STATE] Component can have its own data/information without passing to it from outside, lets call this state.
[RE-RENDER] Whenever props or state gets modified, the changes should be reflected to the UI automatically. Lets call this re-render.
[PREVENT] Should be explicitly able to prevent re-render whenever required.
[LIFE-CYCLE] Know components life-cycle events like,
- [1] before component mounted into DOM (birth of component)
- [2] after component mounted into DOM
- [3] component's props gets changed
- [4] before component is updated
- [5] after component is updated
- [6] before component is unmounted from the DOM (death of component)
[DOM-OPERATION] Should handle DOM operations itself.
[DIFF] On re-render should find difference between the old DOM and new Virtual DOM, and only update that part to DOM. Lets call this patch.

Lets understand

Before jumping, we have to understand few things/concepts like React, DOM, Virtual DOM, JSX, Components, State, JSX Transpiler, Reconsiliation.
- Don't know? don't worry we will see it here itself.

React

React is a component based UI library.
Component can be anything like Button, DropDown, ImageSlider, PasswordInput, etc.
Here, components are building blocks of UI and will respond to data change.
Components allows reusability thus providing development speed, consistancy, seperation of concern, easy to maintain and unit testable.
Also alows both,
- Building an entire application (or)
- Part of an application/Feature.

DOM

DOM stands for Document Object Model
Its an object representation of the parsed HTML document
We could update the dom through DOM APIs (e.g: )
When an DOM object is updated, browser run two expensive operations
- Reflow - Calculates dimension and position of every element and its children.
- Repaint - Determines visual changes (like color, opacity, visibility) and applies them.

Virtual DOM

Virtual DOM is nothing but an lightweight in-memory javascript object representation of the actual DOM.
It basically mimics as an actual DOM.

JSX

const element = <h1 className="clrR">Hello, world!</h1>;

The above tag syntax is neither a string nor HTML. It is JSX.
JSX stands for JavaScript XML. It is used to define our virtual DOM.
Just like HTML used for buildinng actual DOM, JSX is used for building virtual DOM.
JSX in most simple word is how React allows us to write HTML in JavaScript.
JSX is a syntax extension for JavaScript and it is not valid JavaScript, web browsers cant read it directly.
So, if JavaScript files contains JSX, that that file will have to be transpiled. That means that before the file gets to the web browser, a JSX compiler will translate any JSX into regular JavaScript.
After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
The above JSX example will be compiled smiliar to below.

React.createElement('h1', { className: 'clrR'}, 'Hello, world!');

Components

Reconsiliation

Whenever component's state or props gets updated, the component gets re-rendered and builds a new virtual DOM.
Then react runs the diffing algorithm to calculate what changes should be applied to real DOM. This process is know as reconsiliation.

Terms to understand

Rendering: Process of converting virtual dom into dom
Mounting: Process of injecting rendered dom into target dom
Patching: Process of comparing the virtual dom and actual dom, updating the nodes which are changed

Theories over lets play with code 😍

Rendering Logic

render(vnode, parent):
      IF vnode IS class component:
         CREATE NEW INSTANCE FOR component --> componentInstance
         GENERATE component VNODE BY INVOKING componentInstance.render() --> VNode
         RENDER VNODE BY PASSING VNODE INTO render FUNCTION --> DOMNode
     ELSE IF vnode IS function component:
         GENERATE VNODE BY EXECUTING vnode --> VNODE
         RENDER VNODE BY PASSING VNODE INTO render FUNCTION --> DOMNode
     ELSE IF vnode IS OBJECT:
         CONVERT vnode OBJECT INTO DOMNode
         RECURSIVELY APPLY render FUNCTION on vnode children
         ASSIGN PROPS AS DOMNode attributes 
         MOUNT DOMNode ON parent
     RETURN DOMNode

Patching Logic

patch(dom, vnode, parent):
     IF dom AND vnode DIFFED:
         RENDER vnode --> DOMNode
         REPLACE dom WITH DOMNode

Full source code

Link to the GitHub Repository: https://github.com/git-kamesh/kReact

Follow me on twitter: @kamesh_koops

export class Component {
    constructor( props = {}) {
        this.props = props;
        this.state = null;
    }

    setState(nextState) {
        const isCompat = isObject(this.state) && isObject(nextState);
        const commitState = ()=> this.state = isCompat? Object.assign({}, this.state, nextState) : nextState;
        const prevState = isObject(this.state)? Object.assign({}, this.state) : this.state;

        if( runHook(this, 'shouldComponentUpdate') && this.base ) {
            runHook(this, 'componentWillUpdate', this.props, nextState);
            commitState();
            patch(this.base, this.render());
            runHook(this, 'componentDidUpdate', this.props, prevState);
        } else commitState();
    }

    static render(vnode, parent) {
        if( isClassComponent(vnode) ) {
            let instance = new vnode.type( combineChildrenWithProps( vnode ) );
            runHook(instance, 'componentWillMount');
            instance.base = render( instance.render(), parent);
            instance.base.instance = instance;
            runHook(instance, 'componentDidMount');
            return instance.base;
        } else return render( vnode.type(combineChildrenWithProps( vnode )), parent );
    }

    static patch(dom, vnode, parent=dom.parentNode) {
        if (dom.instance && dom.instance.constructor == vnode.type) {
            runHook(dom.instance, 'componentWillReceiveProps', combineChildrenWithProps( vnode ) );
            dom.instance.props = combineChildrenWithProps( vnode );
            return patch(dom, dom.instance.render(), parent);
        } else if ( isClassComponent(vnode.type) ) {
            const newdom = Component.render(vnode, parent);
            return parent ? (replace(newdom, dom, parent) && newdom) : (newdom);
        } else if ( !isClassComponent(vnode.type) ) return patch(dom, vnode.type( combineChildrenWithProps( vnode ) ), parent);
    }
}

export const createElement = (type, props, ...children ) => ({ type, props: props || {}, children });

export function render(vnode, parent) {
    if( isObject(vnode) ) {
        let dom = isFunction(vnode.type) ? Component.render(vnode, parent) : document.createElement( vnode.type );
        vnode.children.flat(1).map((child)=> render(child, dom));
        !isFunction(vnode.type) && Object.keys(vnode.props).map((key)=> setAttribute(dom, key, vnode.props[key]));
        return mount( dom, parent );
    } else return mount( document.createTextNode(vnode || ''), parent );
}

function patch(dom, vnode, parent=dom.parentNode) {
    if( isObject(vnode) ) {
        if( isTextNode(dom) ) return replace( render(vnode, parent), dom, parent );
        else if( isFunction(vnode.type) ) return Component.patch( dom, vnode, parent);
        else {
            let dom_map = Array.from(dom.childNodes) // Build a key value map to identify dom-node to its equivalent vnode
                .reduce((prev, node, idx)=> ({...prev, [node._idx || `__${idx}`]: node}), {});

            vnode.children.flat(1).map((child, idx)=> {
                let key = (child.props && child.props.key) || `__${idx}`;
                mount( dom_map[key]? patch(dom_map[key], child, dom) : render(child, dom) );
                delete dom_map[key]; // marks dom-vnode pair available by removing from map
            });

            Object.values(dom_map).forEach(element => { // Unmount DOM nodes which are missing in the latest vnodes
                runHook( element.instance, 'componentWillUnmount');
                element.remove();
            });

            !isFunction(vnode.type) && Object.keys(vnode.props).map((key)=> setAttribute(dom, key, vnode.props[key]));
        }
    }
    else if( isTextNode(dom) && dom.textContent != vnode ) return replace( render(vnode, parent), dom, parent );
}

function setAttribute(dom, key, value) {
    if( key.startsWith('on') && isFunction(value) ) delegateEvent(dom, key, value);
    else if( key == 'ref' && isFunction( value ) ) value( dom );
    else if( ['checked', 'value', 'className', 'key'].includes(key) ) dom[key=='key'? '_idx' :key] = value;
    else dom.setAttribute(key, value);
}

// Utils
const isFunction = ( node ) => typeof node == 'function';
const isObject = ( node ) => typeof node  == 'object';
const isTextNode = ( node ) => node.nodeType == 3;
const replace = (el, dom, parent)=> (parent && parent.replaceChild(el, dom) && el);
const mount = (el, parent)=> parent? parent.appendChild( el ) : el;
const isClassComponent = ( node ) => Component.isPrototypeOf( node.type );
const runHook = (instance, hook, ...args) => isFunction(instance && instance[hook]) ? instance[hook]( ...args) : true;
const delegateEvent = (dom, event, handler)=> {
    event = event.slice(2).toLowerCase();
    dom._evnt = dom._evnt || {};
    dom.removeEventListener(event, dom._evnt[ event ]);
    dom.addEventListener(event, dom._evnt[ event ] = handler);
}
const combineChildrenWithProps = ({ props, children })=> Object.assign({}, props, { children });

Reach me

💬 Ask me about Frontend and Backend Technologies
📫 How to reach me: Twitter @kamesh_koops

iNotesPress - WordPress Note Taking plugin for teams

Kamesh Sethupathi — Sun, 10 Oct 2021 14:58:31 +0000

iNotesPress - WordPress Note Taking plugin for teams

A Noteworthy and the most beautiful note taking plugin for WordPress.
Notes for resources like Posts / Pages / Attachments / Woo Products.

Possible usecases which you might experience,

Add notes
Share what you and your team need to remember.
Share thoughts and opinions
Do reviews
Link references
List future roadmaps

Technologies & Tools used

WordPress - Open-source content management system written in PHP. Includes a plugin architecture and a template system.
Rollup - JavaScript bundler which compiles small pieces of code into something larger and more complex, such as a library or application.
Preact - For building user interfaces and UI components. Fast 3kb React alternative.
SASS - CSS preprocessor. Helps to keep things organised. Enables you to use things like variables, nested rules, inline imports and more.
Buble - The blazing fast, batteries-included ES2015 compiler.
Lodash - JavaScript utility library.
redux-zero - A lightweight state container based on Redux.

How to Use ?

Download zip https://github.com/k4m35h/iNotesPress
Move this source code to the wp-content\plugins\ folder of WordPress and extract.
Run npm install to install JS dependencies
Run npm build to build JS bundle.
Go to plugins sections in wordpress and activate the plugin.

If you liked my work, why not give me a star in github 😉

kamesh sethupathi