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

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

explorer.exe .

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

Content editable

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

In browser console:

document.body.contentEditable = true

why not multiple BrowserRouters

why not use multiple browserrouters

React Router error - 
    Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
    at Router (/vendors-node_modules_restart_hooks_esm_useForceUpdate_js-node_modules_restart_hooks_esm_usePr-cdac26.iframe.bundle.js:6709:103)
    at renderWithHooks (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:38091:27)
    at mountIndeterminateComponent (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:41855:13)
at beginWork (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:43368:16)
    at beginWork$1 (/vendors-node_modules_storybook

Drew Reese - . There becomes an issue when you start nesting routers within routers, or rather it's the routing contexts within other routing contexts. The contexts of "outer" routers are unaware of what nested "inner" routers have handled.

https://stackoverflow.com/questions/67175039/is-it-possible-to-have-multiple-browserrouter-in-react-app

scriptedalchemy - Dont think you want have multiple browser routers. Youd want to use switch or something else. Only hosts should implement browser router, and only once. Usually I have a standalone wrapper that has like a mini shell for each app. Then I federate the inner component. So browser router stays on the shell layer

nebarf - Single source of truth: having a single "component" updating the browser history brings a lot of flexibility (e.g. it could really help in case you're gradually migrating a legacy system following the strangler pattern).

https://github.com/module-federation/module-federation-examples/issues/1986

update Python Conda environment

Lag et nytt conda environment med nyeste python versjon