Kamlesh Chandnani kamleshchandnani

## Is it too early to build a Design System.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              2 stars
            
          
                kamleshchandnani
                / Is it too early to build a Design System.md
            
            
              Last active
              August 2, 2023 16:41
            
          
    Is it too early to build a Design System?

The Start

This is an interesting question and a very common question that all of us have. That's also because we are part of the industry or better way to put it is culture where things move at fast pace and everyone is just hustling and build products at a rocket speed. It's fine there's nothing against it. But there are certain principles that remains constant regardless of the speed we are building products. One such thing is Design System
Let's go one step backward from where we started and break them in sequence of events

We start with the idea of building an amazing and beautiful product
We start putting down our thoughts about our product by defining the flows a.k.a defining the User experience of our product.
Until now things were just black and white so to add some charm to our product what we do next is we start by defining some colors for our product which also help us think about brand colors so people can relate to our product instantly.


## gatsby-node.js
// gatsby-node.js in my project root
/**
* So this shows up the index field in the graphiql explorer but when queried returns null
* even though this is present in my mdx field. Seems like I need to define the resolver somewhere
* but couldn't connect the dots
*/
exports.createSchemaCustomization = ({ actions, schema }) => {
  const { createTypes } = actions;
  createTypes(`type BlogPost implements Node @nodeInterface {
      date: Date @dateformat

## securing-passwords.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                kamleshchandnani
                / securing-passwords.md
            
            
              Created
              September 27, 2019 08:46
            
              
                Securing passwords
              
          
    Securing passwords

Securing passwords is the most crucial thing when it comes to web security since if your passwords are compromised your information will be at risk.
The What?

So man in the middle attack is quite often when it comes to web security and especially while dealing with passwords between a client and the server. This attack is basically before a request reaches the server someone can spoof in between and steal the information and later uses it to replay the action and thus getting access to the victim's sensitive information.
The How?

Let's talk about how passwords are compromised.

Assume if you are storing the passwords in plain texts in your database and if the attacker gets the password from the request before it reaches the server he can replay the actions since the passwords were plain texts.
If you encrypt it on client side the attacker can read the hashing algorithm on the client since everything in JavaScript can be exposed.


## CSRF-attack.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              2 stars
            
          
                kamleshchandnani
                / CSRF-attack.md
            
            
              Created
              September 27, 2019 08:01
            
              
                CSRF Attack
              
          
    CSRF

So let's discuss about CSRF
The What?

CSRF stands for Cross Site Request Forgery. It's a kind of attack that mostly happens by compromising users cookies and perform an action which a user didn't intend to.
The How?


Imagine there's an attacker by the name Kamlesh and the Victim by the name Shankar.
Now Kamlesh wants to to do a malicious bank transaction from Shankar's account to his own account. Let's take HDFC bank for an example here.
To begin with Kamlesh logs on to his own HDFC bank account and then navigates to transactions page and clicks on view page source and copies the amount transform html form. Assume this is what a typical form looks like

<html lang="en">

  
## bundling-design-systems.md

      
              1 file
            
          
              5 forks
            
          
              2 comments
            
          
              25 stars
            
          
                kamleshchandnani
                / bundling-design-systems.md
            
            
              Last active
              September 21, 2023 03:43
            
          
    Bundling Design Systems/Component Libraries

First of all you need to decide who will be your target consumers based on the following:


They have the same environment(webpack config, babel config) setup as you where you built your design system(this is mostly possible if you use monorepos/same configs where all the teams share the same environment).


They don't have the same environment which is the case when you work in bigger teams and you want to distribute your design system as any other npm package which is already built and can be used directly.


If your use case falls under case no. 1 then you can just compile the source babel src -d build and leave the bundling to the consumer projects tools(webpack/rollup)

  
## async-defer-module.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                kamleshchandnani
                / async-defer-module.md
            
            
              Created
              June 20, 2019 16:59
                — forked from jakub-g/async-defer-module.md
            
              
                async scripts, defer scripts, module scripts: explainer, comparison, and gotchas
              
          
    <script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.
This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.
If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!
Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

  
## git-recover-branch.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              3 stars
            
          
                kamleshchandnani
                / git-recover-branch.md
            
            
              Created
              March 16, 2019 12:38
                — forked from jbgo/git-recover-branch.md
            
              
                How to recover a git branch you accidentally deleted
              
          
    UPDATE: A better way! (August 2015)

As pointed out by @johntyree in the comments, using git reflog is easier and more reliable. Thanks for the suggestion!
 $ git reflog
1ed7510 HEAD@{1}: checkout: moving from develop to 1ed7510
3970d09 HEAD@{2}: checkout: moving from b-fix-build to develop
1ed7510 HEAD@{3}: commit: got everything working the way I want
70b3696 HEAD@{4}: commit: upgrade rails, do some refactoring


## amp-cors.js
import logger from 'utils/logger';

const allowedOrigins = [
  __CONFIG__.hostUrl,
  `${__CONFIG__.hostUrl.replace('-', '--').replace('.', '-')}.cdn.ampproject.org`,
  `${__CONFIG__.hostUrl}.amp.cloudflare.com`,
  'https://cdn.ampproject.org',
];

const corsMiddlewareAmp = (req, res, next) => {

## amp-carousel.jsx
import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import GalleryContainer from './GalleryContainer';

const ampCarousel = [{
  async: '',
  'custom-element': 'amp-carousel',
  src: 'https://cdn.ampproject.org/v0/amp-carousel-0.1.js',
}];

## amp-img.jsx
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const styles = {
  borderRadius(props) {
    if (props.shape === 'bluntEdged') {
      return props.theme.borderRadius;
    }
    if (props.shape === 'sharpEdged') {
	// gatsby-node.js in my project root
	/**
	* So this shows up the index field in the graphiql explorer but when queried returns null
	* even though this is present in my mdx field. Seems like I need to define the resolver somewhere
	* but couldn't connect the dots
	*/
	exports.createSchemaCustomization = ({ actions, schema }) => {
	const { createTypes } = actions;
	createTypes(`type BlogPost implements Node @nodeInterface {
	date: Date @dateformat
	import logger from 'utils/logger';

	const allowedOrigins = [
	__CONFIG__.hostUrl,
	`${__CONFIG__.hostUrl.replace('-', '--').replace('.', '-')}.cdn.ampproject.org`,
	`${__CONFIG__.hostUrl}.amp.cloudflare.com`,
	'https://cdn.ampproject.org',
	];

	const corsMiddlewareAmp = (req, res, next) => {
	import React from 'react';
	import PropTypes from 'prop-types';
	import { Helmet } from 'react-helmet';
	import GalleryContainer from './GalleryContainer';

	const ampCarousel = [{
	async: '',
	'custom-element': 'amp-carousel',
	src: 'https://cdn.ampproject.org/v0/amp-carousel-0.1.js',
	}];
	import React from 'react';
	import styled from 'styled-components';
	import PropTypes from 'prop-types';

	const styles = {
	borderRadius(props) {
	if (props.shape === 'bluntEdged') {
	return props.theme.borderRadius;
	}
	if (props.shape === 'sharpEdged') {