Debug in Pycharm

Top right drop-down menu:

Edit configurations

python interpreter:

place breakpoint (not in the template, click the left border)

--OK--

Debug 'name' (F5) (At least with VS Code keymap)

search for text appearance in a file's git history

Eg. Search for "use-query-params" in package.json's git history

git grep use-query-params $(git rev-list --all -- package.json) -- package.json

As a function in .bashrc/.zshrc-file

# search for word in a file's git history
# usage: filehistorysearch "use-query-params" package.json

filehistorysearch() {
  git grep $1 $(git rev-list --all -- $2) -- $2
}

graphql fetch using multiple IDs

fetch all related products from a list of products, and get results merged into one response!

const GET_RELATED_PRODUCTS = `
    query getRelatedProducts($url: [String!]) {
        products(filter: { url: { in: $url } }) {
            items {

            }
        }
    }
`

fetching just one product's related products

const GET_RELATED_PRODUCTS = `
    query getRelatedProducts($url: String!) {
        products(filter: { url: { eq: $url } }) {
            items {

            }
        }
    }
`

Test storybook krasj

krasjer npm run test-storybook ? Får du error-meldinger som folk på internettet sier betyr at du har gått tom for RAM?

Prøv:

• lukk alle andre programmer
• lukk IDE-en og kjør testen i wsl-terminalen?
• prøv noe av det som blir foreslått her: https://github.com/storybookjs/storybook/issues/12348

SSH-keys

Generate an SSH key pair

https://docs.gitlab.com/user/ssh/#generate-an-ssh-key-pair

ssh-keygen -t ed25519 -C ""

Add an SSH key to your GitLab account

https://docs.gitlab.com/user/ssh/#add-an-ssh-key-to-your-gitlab-account

linux

xclip -sel clip < ~/.ssh/id_ed25519.pub

verify that you can connect

https://docs.gitlab.com/user/ssh/#verify-that-you-can-connect

instance url for ssh

ssh -T git@gitlab.com

Hvordan opprette og bruke

Github / Gitlab

Create SSH-keys & upload to Gitlab

Fint for å slippe å skrive inn brukernavn og passord hver eneste gang

1. ssh-keygen

Generating public/private rsa key pair.
Enter file in which to save the key (/home/paalss/.ssh/id_rsa):

2. [Enter]

...
Your public key has been saved in /home/paalss/.ssh/id_rsa.pub
...

3. cat /home/paalss/.ssh/id_rsa.pub

ssh-rsa <Hererenlanghashcode> paalss@Asus-VivoBook

4. Gå til SSH-siden:

• Github: Add new ssh keys
• Gitlab: SSH keys SSH keys 2

5. Lim inn ssh-rsa <Hererenlanghashcode>

Resten er rett frem

https://docs.oracle.com/en/cloud/cloud-at-customer/occ-get-started/generate-ssh-key-pair.html

Blir du spurt om username og password (PAT) ved git push?

Da bruker du sannsynligvis HTTPS:

Slik bytter du til SSH:

git remote set-url origin git@github.com:paalss/<repo>.git

Bitbucket

https://peter-whyte.com/setup-ssh-keys-in-wsl/

eval $(ssh-agent -s) && ssh-add ../pw_bitbucket

Personal Access Token for http https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
Kan brukes til authentication i stedet for passord

https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

eller:

ssh-add ~/.ssh/github_pw

scroll behavior in different css-positions

Discovery:

Set position: fixed|avsolute on parent element, and you can choose between instant and smooth scroll-behaviors (scroll-behavior: initial|smooth)

But with position: sticky|relative|static you can't choose. You're stuck with smooth scrolling

open explorer from terminal

WSL

explorer.exe .

Mac terminal

open .

install multiple versions of same dependency

npm i bootstrap-toc@npm:bootstrap@5.1.3 --save-exact

npm i bootstrap@5.2.3 --save-exact

usage

const bootstrap = require("bootstrap-toc/dist/js/bootstrap.bundle.min.js");
new bootstrap.ScrollSpy(document.body, {
  target: "#scroll-nav",
  // give space for header
  offset: 100,
});

HTML/JSX forskjeller

• class -> className
• for -> htmlFor
• how to set default value for <select>
• onchange -> onBlur
• <br>, <img>, <hr> -> <hr/> (all elements must have closing tag / be self closing)
• select default value

JSX

• Må ha ett root element
• ekstra setup nødvendig i VS Code: syntaxhighlihgting og emmet support: Må legge til en javascriptreact ting i en innstillingsfil. Emmet virker stort sett.

Delete all branches listed by `git branch -a`

Færre antall branches i code completion suggestion når du skriver git checkout feat-[Tab].

Slett alle branches som ikke finnes på remote:

git fetch -p

(git fetch prune)

Også, sørg for å slette unødvendige tags

List tags

git tag

git tag -d tagName

Use functions as children

Hvordan kan man lage et komponent som exposer en dataverdi som parent kan få tak i?

I.e. hvordan kan ChildComponent her gjøre dette lov?

          <ChildComponent>
            {({idFromChild}) => {
              return (
                <Button
                  href={`link/to/${idFromChild}`}
                >
					click here
                </Button>
              );
            }}
          </ChildComponent>

Slik:

export const ChildComponent = ({id}) => {
  return (
    <div>
      {children({
        id: id,
      })}
    </div>
  );
};

dispatcher is null

Prøv å npm linke react

1

DISPATCHER IS NULL ved app med og npm link library

First off: prøv

# i app
rm package-lock.json
rm -rf node_modules
npm i
# i library prosjektet
npm link ../../app/node_modules/react # <--- nødvendig
npm run build # <--- nødvendig
# i app
npm link @library/package
^C
npm run dev

Second: Toggle av og på det kommenterte nedenfor. Restart server mellom hver gang

// const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  // webpack: {
  //   alias: {
  //     react: path.resolve('./node_modules/react'),
  //   },
  // },
  async rewrites() {
    return [
      // Rewrite everything else to use `pages/index`
      {
        source: "/:path*",
        destination: "/",
      },
    ];
  },
};

module.exports = nextConfig;

Kan ikke brue react hooks i react component library? Får du dispatcher is null? Eller noe a la cannot use usestate of null?

Da er det sikkert noe multiple react-versjoner greier som er trøbbelet. Du kan fikse dette ved å legge til react og react-dom som peerDependencies i library's package.json

"peerDependencies": {
"bootstrap": ">=5.2.3",
"react": "$react",
    "react-dom": "$react"
},

Eller fjern package-lock.json, node_modules og reinstaller alle packages