Skip to content

Instantly share code, notes, and snippets.

View amit08255's full-sized avatar

Amit Kumar amit08255

23 followers · 0 following
View GitHub Profile
@amit08255
amit08255 / highcharts.md
Created December 12, 2023 19:50
highcharts custom legends with hover and click effects in React

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';
@amit08255
amit08255 / gpt.md
Created December 7, 2023 00:48
GPT prompt collection

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
@amit08255
amit08255 / Migrate bitbucket to github
Last active September 6, 2023 18:02 — forked from mandiwise/Update remote repo
Transfer repo from Bitbucket to Github
// 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
@amit08255
amit08255 / linux.md
Last active November 12, 2023 22:03
Linux Cheatsheet

Linux Cheatsheet

Switch to root user

sudo su -

User Management

@amit08255
amit08255 / gcp-cheatsheet.md
Last active June 17, 2023 07:07
GCP Cheatsheet

GCP Cheatsheet

Connecting to GCP compute instance using Cloud shell

  1. Switch to project (you can see project ID on top left near search bar):
gcloud config set project <project name>
@amit08255
amit08255 / gist:4c45b86f42078fd5ed95a36c94991613
Created April 23, 2023 11:08
Vanilla JavaScript Tree Table 
<!DOCTYPE html>
<html><head>
  <title></title>
  <style type="text/css">
  td:first-child {
    padding-left: var(--depth );
  }
  tbody .expanded .treetoggle::before {  
    transform: rotate(90deg);
@amit08255
amit08255 / url_state.md
Created February 23, 2023 18:03
How to store your app's entire state in the url

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:

@amit08255
amit08255 / typescript.md
Last active February 19, 2023 17:54
TypeScript Cheatsheet

TypeScript Cheatsheet

Extracting and reusing return type of a function

declare function f1(): { a: number; b: string };
 
type T0 = ReturnType<() => string>;
type T1 = ReturnType<(s: string) => void>;
type T2 = ReturnType&lt;() =&gt; T&gt;;
@amit08255
amit08255 / html5-form-validations.md
Created January 13, 2023 11:06
HTML5 Form Validation Tricks

HTML5 Form Validation Tricks

Disable submit button if any input HTML5 validations failed

form.validated-forms:invalid {
  button[type="submit"]:not(:disabled) {
    opacity: 0.5;
    pointer-events: none;
 }
@amit08255
amit08255 / react-hydration.md
Created January 5, 2023 08:27
Fix React Hydration Errors

Fix React Hydration Errors

Remove content from initial render (WORKS BEST)

export default function NoFirstRender({ theDate }) {
	const [hydrated, setHydrated] = React.useState(false);
	React.useEffect(() => {
		// This forces a rerender, so the date is rendered
 // the second time but not the first