Amit Kumar amit08255

Pre-requisites:

Node.js 20
Yarn
Postgresql 15: https://postgresapp.com

Setup Plasmic Locally

Clone plasmic:

Rendering React Components Dynamically with JSON

Approach 1: React component renderer with constants

{
    "type": "Container",
    "data": {
        "id": "4400936b-6158-4943-9dc8-a04c57e1af46",
        "items": [

Protect Form From Spam

Method 1

This recipe puts a trivial speed bump in the way of form spammers. By forcing them to actually evaluate the page with a Javascript engine (or do extra processing to figure out what is needed), you raise the amount of effort required above that which most form spammers are likely to spend.

Step 1

Pick a nice random number. The SHA1 of some Git commit would be a good one. I picked this one:

Highcharts Donut Chart Sample

import * as React from 'react';
import Highcharts, { Chart as HighchartsChart } from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { Box } from '@chakra-ui/react';
import DonutChartWrapper from './index.styles';
import Tooltip from '../tooltip';

Prompt to generate storybook code from React component code:

As StorybookGPT, I am specialized in creating Storybook stories for React components.

My focus is on aiding expert frontend developers by generating clean, readable, and standardized story code. I strictly adhere to CSF3 conventions and do not use Component Story Format 2 (CSF2). This means I avoid syntax and patterns specific to CSF2, such as Template.bind({}), and instead focus on the cleaner, function-based approach of CSF3.

I work with TypeScript components and follow a template structure for consistency. When a prop is an event handler, like onClick or onSubmit, I use the action function from '@storybook/addon-actions' to simulate actions in the Storybook UI.

I strive to be helpful by providing specific code that integrates seamlessly with users' components, enhancing their Storybook experience. If I encounter any unclear details, I will ask for clarification, and I'm programmed to avoid making assumptions or providing unsolicite

Linux Cheatsheet

Switch to root user

sudo su -

User Management

GCP Cheatsheet

Connecting to GCP compute instance using Cloud shell

Switch to project (you can see project ID on top left near search bar):

gcloud config set project <project name>

<!DOCTYPE html>
<html><head>
  <title></title>
  <style type="text/css">
  td:first-child {
    padding-left: var(--depth );
  }
  tbody .expanded .treetoggle::before {  
    transform: rotate(90deg);

How to store your app's entire state in the url

I decied to encode the entire application state as a Base64 encoded string in the hashmark of the url. For example, a url would look like (note its truncated since they are very long):

knotend.com/g/a#N4IgzgpgTglghgGxgLwnARgiAxA9lAWxAC5QA7X...

Everything after the /g/a# is a stringified version of a json object that contains all the information about the flowchart. It gets stringified, then compressed, then Base64 encoded. I update the url on every graph edit, so copying the graph state is as simple as copying the url in your browser bar.

Here's the pseudo code for creating the url, and then later reading it:

	// Reference: http://www.blackdogfoundry.com/blog/moving-repository-from-bitbucket-to-github/
	// See also: http://www.paulund.co.uk/change-url-of-git-repository

	$ git clone --mirror <Bitbucket_repo_address>
	$ cd $HOME/Code/repo-directory
	$ git remote rename origin bitbucket
	$ git remote add origin https://github.com/mandiwise/awesome-new-repo.git
	$ git push --mirror

	$ git remote rm bitbucket