git rename most recent commit
git commit --amend -m "an updated commit message" |
git remove local stale branches which already deleted remotely
git fetch --prune origin |
React theme brakepoints
xs: Extra small devices (less than 600px)sm: Small devices (600px and up)md: Medium devices (900px and up)lg: Large devices (1200px and up)xl: Extra large devices (1536px and up)
<Box sx={(theme) => ({ textAlign: 'center', [theme.breakpoints.up('md')]: { textAlign: 'left' }, })} > TEXT </Box> |
theme.breakpoints.up(‘md’) means @media (min-width: 900px)
So, the above code will set the textAlign to left for screen sizes greater than 900px.
Javascript match prefix
const hostname = "www.someaddress.com" console.log(!!hostname.startsWith('www.') ? 'matching' : 'not matching') |
Next.js usePathname(), useParams(), useSearchParams() in new App Router
'use client' import {usePathname, useParams, useSearchParams} from "next/navigation"; // folder structure: app/team/[teamName]/page.tsx // url: http://localhost:3002/team/something?query=mine /* Expected output: Pathname: /team/something Params: something SearchParams: mine */ export default function Page() { let queryResult: string | null | undefined = null // params dataset placeholder let params: Record<string, string | string[]> | null const pathName = usePathname() params = useParams() const searchParams = useSearchParams() queryResult = searchParams?.get('query') return ( <> <div><span>Pathname: </span>{pathName}</div> <div><span>Params: </span>{params?.teamName}</div> <div><span>SearchParams: </span>{queryResult}</div> </> ) } |
Nextjs 13.4 location of config files
PROJECT_FOLDER/package.json – configuration of installed packages and their versions
“next”: “^13.2.4” – check nextjs installed version here
PROJECT_FOLDER/tsconfig.json – Typescript configuration
PROJECT_FOLDER/.eslintrc.json – EsLint configuration
PROJECT_FOLDER/postcss.config.js – PostCSS configuration
PROJECT_FOLDER/next.config.js – NextJS configuration
PROJECT_FOLDER/tailwind.config.ts – Tailwind configuration
What 3 dots does in React or Typescript
Three dots {…props} decompiles array and used to merge an array with individual variables
const linkProps = {
...props,
...(customname === true ? { passHref: true } : {})
}
git reset single file
git reset -- path/to/file git checkout -- path/to/file |
React js no console
/* eslint-disable no-console */
console.log(yourtext)
/* eslint-enable no-console */ Ssh saving private key passphrase
ssh-add and press [Enter] |
Enter passphrase for /path/to/.ssh/id_rsa: |
Identity added |