Useful snippets

    post

    Finne prog med port

    2021-03-26

    Eksempel

    Scenario

    Port er opptatt:

    Git bash

    $ docker-compose up -d
Creating network "lamp_default" with the default driver
Creating lamp_adminer_1 ...
Creating lamp-redis     ...
Creating lamp-database  ... error
Creating lamp_adminer_1 ... done
Creating lamp-redis     ... done
ccess a socket in a way forbidden by its access permissions.

    ERROR: for database  Cannot start service database: Ports are not available: listen tcp 127.0.0.1:3306: bind: An attempt was made to access a socket in a way forbidden by its access permissions.
ERROR: Encountered errors while bringing up the project.

    Finne hvillket program som bruker det

    $ netstat -ano | findstr '3306'
  TCP    0.0.0.0:3306           0.0.0.0:0              LISTENING       5028
  TCP    [::]:3306              [::]:0                 LISTENING       5028

    $ tasklist | findstr '5028'
mysqld.exe                    5028 Services                   0      4,144 K

    Resultat

    mysqld.exe

    https://veerasundar.com/blog/2009/10/how-to-check-which-application-is-using-which-port/

    post

    wsl

    Prosjekt som bruker WSL? Hvordan bytte til Git Bash

    2022-06-05

    Hvordan bytte fra wsl til git bash i et prosjekt

    I et prosjekt hvor du allerede har installert npm modules med wsl er det litt tricky å gå over til git bash. Har opplevd det i hvert fall.

    Her er et forsøk som funket, men det er sannsynigvis unødvendige steg her.

    Hvorfor bytte? Vel... react-snap og bruk av chromium er visst ikke helt akseptert av WSL

    WSL

    1. npm cache verify
    2. delete node_modules
    3. npm cache clean --force

    Git bash

    1. npm rebuild
    2. lukk VS Code og åpne som Admin
    3. npm i
    4. npm start

    Og det funker! "React-scripts is not recognised" – no more!

    https://coder-coder.com/npm-clear-cache/
    https://stackoverflow.com/questions/47928735/react-scripts-is-not-recognized-as-an-internal-or-external-command

    post

    Kule porteføljer

    2023-10-22

    MEST UKONVENSJONELLE PORTEFØLJER

    post

    javascript

    eleventy stuff

    2023-10-22

    Eleventy stuff

    eleventy.js

    Return specific post

    module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("bundle.css");
  eleventyConfig.addPlugin(syntaxHighlight);
  eleventyConfig.addCollection("post", function (collection) {
    const coll = collection.getFilteredByTag("post");
    console.log(coll);
    return [coll[20]];
  });
};

    Return first 5 posts

    module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("bundle.css");
  eleventyConfig.addPlugin(syntaxHighlight);
  eleventyConfig.addCollection("post", function (collection) {
    const coll = collection.getFilteredByTag("post");
    console.log(coll);
    return coll.slice(0, 5);
  });
};

    post

    git

    Ivareta git historikk ved file renaming

    2023-10-22

    Ifølge https://koukia.ca/rename-or-move-files-in-git-e7259bf5a0b7

    Hvis du vil være sikker på at file history blir ivaretatt i en fil om du renamer den (eller flytter den), så må du bruke commando-linja og kjøre

    git mv mycoolclass.cs myCoolClass.cs

    eller

    git mv layout/CardList common/List

    Hvis du renamer direkte i editor-en, så kan du ikke være sikker på at git skjønner at det er samme fil.

    Når du ivaretar git history så kan du bruke ting som git log -p --follow -- path/to/filename. Se gist: https://gist.github.com/paalss/7127b421ff7f3a862ae8d76c772aeb6a

    Kommentarer:

    Mulig det er unødvendig å bruke mv. Da jeg renamet og flyttet layout/CardList til common/List så skjønte git at disse to filene var 74% like.

    git log -p --follow components/common/List/List.tsx funker fjell. Historikken strekker seg tilbake til før renamingen

    post

    Syntax highlighting i Nano commit diff

    2023-10-22

    nano ~/.nanorc

    sett inn

    https://gist.github.com/keithamus/736220/5e069767b22841610ee18fd2f92bd6026f5eb41d

    syntax "gitcommit" "COMMIT_EDITMSG$"
color white "#.*"
color green "#.(modified|added|deleted|unmerged|copy-edit|rename).*"
color yellow start="# Changes.*" end="# Changed.*"
color brightgreen "^\+.*"
color brightred "^-.*"
color brightyellow "(diff|index|---|\+\+\+).*"
color brightmagenta "@@.*"
color white "# Changes .*"
color white "# Changed .*"
color white "#.*\(use .*"
color white "#$"

    =

    farger i git commit vinduet!

    post

    ohmybash

    Oh my bash adding missing code completions

    2023-10-22 

    source /usr/share/bash-completion/completions/git
__git_complete gco _git_checkout
__git_complete gb _git_branch
__git_complete gbs _git_bisect
__git_complete ga _git_add
__git_complete gcmsg _git_commit
__git_complete gcs _git_commit
__git_complete gd _git_diff
__git_complete gl _git_pull
__git_complete gp _git_push
__git_complete gm _git_merge

    post

    ohmybash

    vscode

    Ohmybash

    2023-10-22

    Hvordan starte med ohmybash, velge theme og laste ned nødvendig font icons

    Installasjon

    bash -c "$(curl -fsSL https://raw.githubusercontent.com/ohmybash/oh-my-bash/master/tools/install.sh)"

    Du får med masse aliases med dette. List alle med alias

    Velge theme

    nano ~/.bashrc

    OSH_THEME="agnoster"

    Save & exit: ctrl + x, y, [Enter]

    Reload:

    . ~/.bashrc

    Hvis du har mellomrom i path to oh-my-bash insallation, slik:

    # Path to your oh-my-bash installation.
export OSH=/c/Users/Pål Stakvik/.oh-my-bash

    Må du enkapsulere path-en i quotes, ellers får du error

    skaffe nødvendige font icons

    evt. se på agnoster-zsh-theme

    last ned Hack-fonten

    1. Gå til https://sourcefoundry.org/hack/ og last ned font. Windows executable funker for WSL og VS Code
    2. Kjør executable i nedlastninger
    3. Godta restart

    Sette WSL til å bruke riktig font

    1. Åpne WSL
    2. høyreklikk toppmeny, velg 'properties'
    3. velg "Hack" fonten

    ubuntu-omb

    Sette VS Code til å bruke riktig font

    1. ctrl + shift + p
    2. settings.json
    3. lim inn "terminal.integrated.fontFamily": "Hack", https://stackoverflow.com/questions/37895501/display-issue-with-oh-my-zsh-agnoster-theme#answer-38475948

    vscode-omb

    Erstatte user @ hostname

    ...Med kun hostname:

    prompt_context() {
  if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then
    prompt_segment black default "$USER"
  fi
}

    Eller hva det skal være:

    prompt_segment black default "P"

    image (9)

    prompt_segment black default "%(!.%{%F{yellow}%}.)$USER" skal visstnok også funke, men jeg får bare slik tekst da:

    image (8)

    Git bash merknader

    Får du permission denied ved git add .?

    • Kjør VS Code som administrator

    Får du

    hint: Waiting for your editor to close the file... 'C:\Users\Pål' is not recognized as an internal or external command,
operable program or batch file.
error: There was a problem with the editor '"C:\Users\Pål Stakvik\AppData\Local\Programs\Microsoft VS Code\bin\code.cmd" --wait'.
Please supply the message using either -m or -F option.

    ved git commit (-v)

    • Prøv å kjør git config --global core.editor "code --wait". Les mer https://stackoverflow.com/questions/52195877/how-can-i-fix-git-commit-error-waiting-for-your-editor-to-close-the-file-wi

    post

    windows

    macos

    fordeler/ulemper med Windows/MacOS

    2023-10-22

    mislikte/misliker med mac:

    1. man må ha app store account og derav også registrere bankkort for å oppdatere OS.
    2. finder sorterer filtyper helt alfabetisk i stedet for å putte mapper over alt annet
    3. man må aktivt rydde opp filene hele tiden for å få det på stell, og hvis man vil ha auto sortering på noe annet enn filnavn må man takke seg til å gruppere filene i forskjellige rader
    4. kryss og minifiser og det er på feil side, dessuten er knappene veldig små
    5. skrivebordet plasserer alltid programmer på feil side (og man må flytte over programmene manuelt og stille inn grid slik at det går. Det resettes når man velger sortering og nye programmer dukker opp til høyre)
    6. savner muligheten til å raskt forvandle vindu til å oppta halvparten av skjermen
    7. fullscreen-uten-å-ta-bort-dock er upraktisk
    8. På Mac XAMPP versjonen må man aktivt mounte xampp/lampp-mappa. Slitsomt
    9. launchpad kan noen ganger ta lang tid på å laste inn noen programmer. i hvert fall etter seks år.
    10. Teit at menyelementer ofte finnes på to steder: Både i menylinje og i selve programvinduet. Er for det meste windows programvarer dette gjelder.
    11. Hvis derimot menyelement kun finnes på det ene stedet (i VSCode så vises den bare i overmenyen, i XAMPP vises nesten ingenting der) så ender man opp med mye ubrukt luft som bare opptar skjermplass
    12. Man kan ikke trykke fn + esc for å slå på og av funksjonstaster
    13. når man kobler til et kamera så går macen bare ut i fra at du vil bruke den fotogalleri-appen. Det er så irriterende! Hvis mankopierer camera raw file derfra så blir de til jpg når man limer dem inn!

    (sort of) fikset

    1. det er mulig å komme rundt dette
    2. finnes innstilling for å ikke gjøre det slik
    3. det har kommet innstilling for auto stortering etter filtyper
    4. man har tastatursnarveier som man bruker oftest
    5. den har introdusert GUI knapper for å få vinduet til å oppta halvparten av plassen, men dette er ikke godt nok. knappene finnes også i window menyalternativet.

    For å få vinduet til venstre, må man først hover'e over den knøttlille grønne knappen, vente et kvart sekund og så klikke.

    Man kan forresten legge til egen app shortcut, så lenge man vet hva man skal gjøre (må følge en tutorial)

    Men det er jo nesten ingen tastastursnarveier igjen!

    https://www.paulsahner.com/posts/window-movement

    Mislikte/misliker med windows:

    1. Den hadde forferdelige problemer mellom endnote og word og sitering (se diarium og komprimerte tanker bok)
    2. Noe forbanna herk å få ekstern harddisk til å faktisk kopiere alt jeg ba den om å kopiere
    3. Ting brekker. GUI er brukken. Ting funker ikke. Lyd, PC-frys, PC bestemmer seg bare for å slukne helt uten videre. Task-bar sin ekstern harddisk symbol fungerer ikke alltid
    4. Windows' Adobe Bridge ser ut som en vits. Meny og greier er for store.
    5. Word har ikke like behagelig søkefelt, og man kan ikke åpne det med ctrl+F
    6. Elendige tastatursnarveier
    7. Litt irriterende uten egen PDF app. Når du åpner et dokument så åpner den automatisk MS Edge for å vise PDF-en. Og selv om du ikke har tenkt å bruke nettleseren til noe nettspesifikt, kommer den med meldinger som at "du må sikre nettleseren" eller hva det nå var det sto. Og det er ikke relevant hvis du bare skal se på en PDF! Distraherende!
    8. I filutforsker, hvis man prøver å navigere opp fra "Pål Stakvik"-mappa, så kommer man ikke til Users, men til desktop. Og når man klikker i addressefeltet, så står det bare "Pål Stakvik" - som om det er øverste mappa. Man må navigere seg inn en mappe, og først da får man den fulle og hele addresselinjen: "C:\Users\Pål Stakvik\Postman".
      • særlig hvis du jobber med typografi. Windows' "tastatursnarveier" for ekte anførselstegn er en vits og blir fullstendig grust av de til mac. Gjelder også:
    • ellipse
    • binde- og tankestrek Ellers gir tastatursnarveiene til mac generelt mer mening (f.eks. så er "/", "|" og "" alle samlet under samme knapp).
    1. McAfee kommer med sine dialog-bokser og avbryter deg i arbeidet ditt

    fikset

    1. Fikk funnet ut hva som var feil, etter en hel dags research og prat med utviklerne/support.
    2. Fikk fikset det til slutt
    3. man kan lage et autohotkey skript for å få til samme snarveier som mac

    post

    php

    PHP White screen

    2023-10-22 

    echo "<pre>";
ini_set('display_errors', 'On');
ini_set('html_errors', 0);

    Skal kanskje være ini_set('html_errors', 'On');?

    post

    react

    javascript

    table of contents with IntersectionOvserver (not perfect)

    2023-10-22

    useScrollSpy.ts

    import { useEffect, useRef, useState } from "react";

export function useScrollSpy(ids: string[]) {
  const [activeId, setActiveId] = useState();
  const observer = useRef();

  useEffect(() => {
    const elements = ids.map((id) => document.getElementById(id));

    observer.current?.disconnect();

    elements.forEach((heading) => {
      if (heading) {
        observer.current?.observe(heading);
      }
    });

    observer.current = new IntersectionObserver(
      (entries) => {
        console.group("executing intersectionobserver callback");

        entries.forEach((entry) => {
          if (entry?.isIntersecting) {
            console.log(entry.target.id, "is intersecting");

            setActiveId(entry.target.id);
          }
        });
        console.groupEnd();
      },
      { rootMargin: "0% 0% -80% 0%", threshold: 0.1 }
    );

    return () => observer.current?.disconnect();
  }, [ids]);
  return activeId;
}

    TableOfContents.tsx

    import React, { useEffect, useState } from "react";
import classes from "./TableOfContents.module.css";
import { useScrollSpy } from "@/hooks/useScrollSpy";

    interface TableOfContentsProps {
isLoading: boolean;
}
    

    export type heading = { text: string | null; id: string };
    

    export const TableOfContents = ({ isLoading }: TableOfContentsProps) => {
const [headings, setHeadings] = useState<heading[]>([]);
const activeId = useScrollSpy(headings.map(({ id }) => id));
useEffect(() => {
if (!isLoading) {
const elements: heading[] = Array.from(
document.querySelectorAll("h3")
).map((element) => ({ text: element.textContent, id: element.id }));
setHeadings(elements);
}
}, [isLoading]);
    

    return (
<div
className={</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classes<span class="token punctuation">.</span>root<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> d-none d-lg-block sticky-with-gutter list-group small</span><span class="token template-punctuation string">}
>
<nav>
{headings.map((heading) => {
const maybeActive = activeId === heading.id ? "active" : "";
return (
<li key={heading.id}>
<a
className={</span><span class="token string">list-group-item list-group-item-action </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>maybeActive<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">}
href={</span><span class="token string">#</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>heading<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">}
>
{heading.text}
</a>
</li>
);
})}
</nav>
</div>
);
};

    post

    productivity

    Task warrior (CLI todo app)

    2023-10-22

    Installer på Ubuntu (WSL)

    sudo apt-get install taskwarrior

    https://taskwarrior.org/download/

    Oppstart

    task version

    yes for å lage config file (.taskrc)

    Bruk

    📍 Legg til task

    task add bla bla bla bla

    📌 - med priority

    task priority:H add bla bla bla bla

    📅📃 List opp alle tasks

    task next

    next kan sløyfes

    ✔ Gjennomfør task nr X

    task X done

    ❌ 🗑 Slett

    task X delete

    https://taskwarrior.org/docs/30second/

    💬🗨 Se og rediger alle detalljer

    task X edit

    🗃 Opprett i prosjekter

    task add project:Kitchen Select floor tiles
task add project:Kitchen Measure counter-top
task add project:Kitchen Design placement of electrical outlets
task add project:Kitchen Locate ideal placement for extractor duct
task add project:Kitchen Select and order counter-top material
task add project:Kitchen Talk to the Electrician about when the work can start

    https://taskwarrior.org/docs/best-practices/

    Interessant

    • visual interactive taskwarrior - https://gothenburgbitfactory.org/vit/

    post

    react

    javascript

    why not multiple BrowserRouters

    2023-10-22

    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

    post

    npm link

    dispatcher is null

    2023-10-29

    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

    post

    react

    javascript

    Use functions as children

    2023-10-29

    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>
  );
};

    post

    git

    Delete all branches listed by git branch -a

    2023-10-29

    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

    post

    react

    html

    HTML/JSX forskjeller

    2023-10-29

    • 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.

    post

    install multiple versions of same dependency

    2023-10-29 

    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,
});

    post

    css

    scroll behavior in different css-positions

    2023-10-29

    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

    post

    github

    bitbucket

    https

    ssh

    SSH-keys

    2023-10-29

    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):

    1. [Enter]
    ...
Your public key has been saved in /home/paalss/.ssh/id_rsa.pub
...
    1. cat /home/paalss/.ssh/id_rsa.pub
    ssh-rsa <Hererenlanghashcode> paalss@Asus-VivoBook
    1. Gå til SSH-siden:
    1. 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

    post

    Test storybook krasj

    2023-10-29

    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

    post

    graphql

    graphql fetch using multiple IDs

    2023-11-05

    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 {

    }
}
}
`

    post

    Tech pronunciation

    2023-11-26

    • Sql (S Q L / Sequel / Squeel )
    • xampp (Shamp)
    • Zsh (Zash)
    • C# (See sharp, see hash)
    • LaTeX (Lateck)
    • Vite (French word for "quick", pronounced /vit/, like "veet")
    • Deno ("Dino", ikke "Deno")
    • JWTs (JSON Web Token, pronounced 'jot')
    • Lua (pronounced LOO-ah)

    post

    process

    List & kill processes

    2023-12-08

    List processes

    Relatert: https://useful-snippets.netlify.app/posts/finne-prog-med-port/

    All

    sudo netstat -nlp | grep tcp

    Sudo gives more info on process id & stuff

    One specific port

    sudo lsof -i:3000

    sudo lsof -i:80
    sudo lsof -i:443
    sudo lsof -i:4173

    Kill process

    By name

    killall -9 node

    sudo killall -9 caddy related: https://useful-snippets.netlify.app/posts/quit-caddy-process/
    sudo killall -9 http-server

    By PID

    eg: tcp6 0 0 :::3000 :::* LISTEN 1686/node
    __________________________________^^______

    killall -9 1686

    By port

    eg: tcp6 0 0 :::3000 :::* LISTEN 1686/node
    ________________^^________________________

    sudo killall $(lsof -t -i:3000)

    Eller med

    fuser -k 3000/tcp

    post

    webstorm

    wsl

    open windows Webstorm from WSL

    2023-12-08

    .bashrc-file

    webstorm()
{
     # /mnt/c/Program\ Files/JetBrains/WebStorm\ 2022.1.2/bin/webstorm64.exe "$1" > /dev/null 2>&1 &!
     /mnt/c/Program\ Files/JetBrains/WebStorm\ 2023.2.5/bin/webstorm64.exe .
}

    post

    vite

    css

    Generate CSS module classnames in Vite

    2023-12-08 

    import { defineConfig } from "vite";
import * as path from "path";
import { fileURLToPath } from "url";
    

    // https://vitejs.dev/config/
export default defineConfig({
css: {
modules: {
generateScopedName: (name, filename) => {
const f = filename.split("?")[0].split(".")[0];
const file = path.basename(f);
return </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>file<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">;
}
}
},
});

    post

    vscode

    webstorm

    Folder templates for VS Code and Webstorm

    2023-12-25

    VScode - Folder templates

    folder templates extension

    Webstorm - File and Code Templates

    templates with multiple files

    • Opprett template files. Én hovedfil med noen sub-files

    Create main file

    Name: component folder
    Extension: tsx
    File name: $NAME/$NAME

    import React from 'react';
import classes from './${NAME}.module.css';

    interface ${NAME}Props {
    

    }
    

    export const ${NAME} = ({  }: ${NAME}Props) => {
return (
<div className={classes.root}>
    

    </div>
)
};

    Create a child template file

    File name: $NAME/index
    Extension: ts

    export {${NAME}} from './${NAME}';

    And a css file

    File name: ${NAME}/${NAME}.module
    Extension: css

    .root {

    }

    Alt text

    Stygg error med nested template files: Navn forsvinner helt uten videre!!

    Issue: https://youtrack.jetbrains.com/issue/IDEA-279811/File-template-file-name-is-removed

    post

    webstorm

    vscode

    neovim

    pros-and-cons

    fordeler/ulemper med VSCode/Webstorm/Neovim

    2023-12-25

    VS Code

    Cons

    • den raskeste måten å cycle through hver changed file er å klikke på hver fil i source control panel. Ingen mulighet for å navigere gjennom med piltastene.

    • man må ofte reloade window på vscode når man avinstallerer/deaktiverer en plugin

    • kan ikke stole på statuslinjen, at den alltid viser riktig branch

    • Open recent-funksjonaliteten er litt brukken

      • hvis man prøver å åpne recent project-fuzzy-finderen umiddelbart etter at man har åpnet vscode, så vil den først åpnes, og så lukkes automatisk. Man kan jobbe rundt dette ved å åpne den ved å trykke og holde ctrl mens man trykker R, da

    • Vscodes git integrasjone er ikke så bra

      • git commit

        • kan bare skrive heading på commit messages
        • kan ikke begynne på commit message øyeblikkelig etter at man har addet med vscodes git add knapp / snarvei

      • git add

        • funker ikke for å markere solved merge conflicts, for en eller annen grunn

    • live evaluering, (linting/suggestions) tar tid / er tregt

      • TS bruker tid på å slå inn

      • unused variables (eslint?) bruker også tid...

      • code suggestions/completions bruker også litt tid...

        • f.eks. for å skrive console.log kan man begynne å skrive prefixet: "log". Men da må man først vente litt før suggestions-ene kommer opp

    • feilaktig linting

      • noen ganger så tror TS/eslint eller noe at noen packages ikke er installert. Når de virkelig ER det. Man må restarte VSCode for å se effekten

    • reload window forårsaker noen ganger at kommandolinjen hopper til det andre prosjektet du har åpent. F.eks. om du driver og jobber i med et bibliotek-prosjekt og et app-prosjekt, og må reloade vscode vinduet for appen, så kan kommandolinjen finne på å cd-e til biblioteket. Sykt!

    • hvis man prøver vim extension må man gi slipp på tastatursnarveier som

      • ctrl+pageUp/Down (noen ganger, ellers så funker det, bare at det er litt tregt. Kanskje forårsaket av vim extension, kanskje ikke)
      • close tabs (ctrl w) (!!! veldig irriterende)
      • noen ganger så føkker det opp angrefunksjonaliteten. jeg klikker på u og den bare sletter linjer under cursor WTF!
      • Man kan i hvert fall skru av og på vim (deactivated mode (oftest, noen ganger klikker den))

    Kanskje du bør prøve webstorm

    Webstorm

    Pros

    • bedre git diff (bilde)

    • bedre find code in files & search replace (untatt preview)

    • className får curly braces

    • kan lime inn filer fra windows explorer til webstorm explorer

    • leser classes i css og bringer auto-complete til jsx/html

    • automatisk sync mellom starting & ending tag renaming

    • sier i fra om du endrer på noe i node_modules

    • sier i fra om node_modules er i usync med package.json (npm ls)

    • lettere å klikke på uncommited changes markøren i venstremargen. Den som viser at noe er fjernet, endret eller lagt til

    • log prefix funker bra. Man trenger ikke vente på at LSP skal komme med forslag, man kan bare klikke Enter med én gang

    • bedre bookmarks enn noe bookmark-extension jeg har funnet til VS Code

    • Prettifyer TypeScript errors automatisk. Ingen nødvendighet for Prettier TypeScript Errors Addon slik som i VS Code.

    • Hopp-til-linje har en dialog boks som man må klikke enter i for å hoppe til linje, da slipper man å hoppe til nr. 1 og 0 når man skal hoppe til linje nr. 100

    • terminal

      • navn lagres til neste gang man åpner programmet

    • kan forutse hva en ny variabel kan hete i code suggestion, basert på udefinerte variabler nedenfor

    Cons:

    • LSP code suggestion på 'npm link'-ed library funker ikke!

    • settings og 'file and code templates' kan resettes av seg selv!!

    • kan ikke slå av auto-save helt

    • litt slow, generelt

      • slow project panel update

        • og ingen 'refresh'-button
        • man må KLIKKE på filene for at ting skal begynne å oppdateres

      • typescript linting

    • ingen search history i "search in all files"

    • kan ikke lime inn i terminal med høyre museklikk

    • terminal

      • return to normal mode legger igjen en grønn markør og usynliggjør tegnet som er bak markøren
      • ctrl backspace sletter ikke ord for ord (som i vanlig terminal, altså)

    • Esc by default returnerer markøren tilbake til editoren. Litt plagsomt når du holder på med vim i terminalen

    • babysitter og prøver å gjøre git-operasjoner for deg (kan enkelt slås av)

      • spør om du vil stage
      • spør om du vil npm install

    • Man kan ikke hitte "format" og så få single quotes til double quotes i JSON

    • hvordan lage tastatursnarvei for en enkelt bokstav?? (curly braces = shift alt 8)

    • Kan ikke duplisere linje over caret!! HVORFOR????????????

      • Mulig jeg må bruke Vim her
      • Eller autohotkey/autokey

    • Man MÅ markere hele comment block for å uncommente

    • Toggle comment flytter markøren ett hakk ned. Og det er ingen måte å fikse det på

    • By default masse overwhelming squiggly lines og symboler over alt

      • squiggly lines for eslint prettier stuff

    • vanskelig å se om en fil er lagt til / endret / fjernet i source control (commit) panel

    Neovim

    Pros

    • kan bestemme selv hvordan lsp / code suggestion/completion skal funke

      • man kan bestemme at nedover-knappene ikke navigerer i listen, men flytter cursor nedover

    • vim motions funker alltid, i motsetning til vim addon i VS Code

    Cons

    • MYE manuelt setup
    • mangel på ordentlig terminal
      • FTerm, Toggleterm ol. krasjer ofte
      • multiple tmux-panes kan ødelegge hele UI-et om man forminsker WSL-app-skjermbredden
    • ukonsistent behavior
      • telescope er litt ukonsistent
        • noen ganger MÅ man esc før man kan velge en fil
      • ikke alltid codesuggestions kan velges med [tab] (uten å ha endret på lsp.lua eller noe)
    • man MÅ sette :set paste før man limer inn noe som helst fra annet steds
    • vanskelig å kopiere noe fra neovim til OS clipboard (er det i det hele tatt mulig?)
    • ekstremt vanskelig/umulig å bruke tastatursnarveier med ctrl og alt. For en eller annen grunn funker ikke ctrl+ø, men alt+ø funker. Men både ctrl og alt funker for "l". Kan gjøre noe magi med Autohotkey/autokey, men det er veldig plundrete
    • å få packages til å jobbe sammen
      • problem med merge conflict highlight packagen blir helt upåvirket av colorscheme. Det gjør at conflict marker får STYGGE farger. Man må eksplisitt sette :colorscheme tokyonight-night for å få colorscheme til å overskrive de stygge fargene igjen. Men hele pakken brekker når man åpner lazygit. Så ja.

    post

    react

    javascript

    Bootstrap scrollspy react

    2024-01-06

    HTML

    with data attributes ✔

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div style="display: flex; background: #f5f2f2;">
      <aside>
        <div id="list-example" class="list-group">
          <a class="list-group-item list-group-item-action" href="#heading1">
            Heading 1
          </a>
          <a class="list-group-item list-group-item-action" href="#heading2">
            Heading 2
          </a>
          <a class="list-group-item list-group-item-action" href="#heading3">
            Heading 3
          </a>
          <a class="list-group-item list-group-item-action" href="#heading4">
            Heading 4
          </a>
          <a class="list-group-item list-group-item-action" href="#heading5">
            Heading 5
          </a>
        </div>
      </aside>
      <article
        data-bs-spy="scroll"
        data-bs-target="#list-example"
        tabIndex="0"
        style="position: relative; height: 500px; overflow-y: scroll;"
      >
        <!--<article style="position: relative; height: 500px; overflow-y: scroll;">-->
        <h1>Hello CodeSandbox</h1>
        <h2 id="heading1">Heading 1</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading2">Heading 2</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading3">Heading 3</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading4">Heading 4</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading5">Heading 5</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
      </article>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      /*const scrollSpy = new bootstrap.ScrollSpy(document.body, {
        target: "#list-example"
      });*/
      // $("body").scrollspy({ target: "#navbar-example" });
    </script>
  </body>
</html>

    with JS ❌

    Highlight only goes down

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div style="display: flex; background: #f5f2f2;">
      <aside>
        <div id="list-example" class="list-group">
          <a class="list-group-item list-group-item-action" href="#heading1">
            Heading 1
          </a>
          <a class="list-group-item list-group-item-action" href="#heading2">
            Heading 2
          </a>
          <a class="list-group-item list-group-item-action" href="#heading3">
            Heading 3
          </a>
          <a class="list-group-item list-group-item-action" href="#heading4">
            Heading 4
          </a>
          <a class="list-group-item list-group-item-action" href="#heading5">
            Heading 5
          </a>
        </div>
      </aside>
      <article style="position: relative; height: 500px; overflow-y: scroll;">
        <h1>Hello CodeSandbox</h1>
        <h2 id="heading1">Heading 1</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading2">Heading 2</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading3">Heading 3</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading4">Heading 4</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading5">Heading 5</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
      </article>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="jquery-3.6.4.min.js"></script>
    <script>
      const scrollSpy = new bootstrap.ScrollSpy(document.body, {
        target: "#list-example"
      });
      // $("body").scrollspy({ target: "#navbar-example" });
    </script>
  </body>
</html>

    With JS ✔

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Static Template</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div style="background: #f5f2f2;">
      <aside class="navbar navbar-nav fixed-top">
        <div id="list-example" class="list-group">
          <a class="list-group-item list-group-item-action" href="#heading1">
            Heading 1
          </a>
          <a class="list-group-item list-group-item-action" href="#heading2">
            Heading 2
          </a>
          <a class="list-group-item list-group-item-action" href="#heading3">
            Heading 3
          </a>
          <a class="list-group-item list-group-item-action" href="#heading4">
            Heading 4
          </a>
          <a class="list-group-item list-group-item-action" href="#heading5">
            Heading 5
          </a>
        </div>
      </aside>
      <article>
        <!--<article style="position: relative; height: 500px; overflow-y: scroll;">-->

    <h1>Hello CodeSandbox</h1>
<h2 id="heading1">Heading 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading2">Heading 2</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading3">Heading 3</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading4">Heading 4</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading5">Heading 5</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</article>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: "#navbar"
});
});
</script>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>
  </head>

  <body class="m-3">
    <center>
      <div id="navbar">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#geeks1">Geeks</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#for">For</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#geeks2">Geeks</a>
            </li>
          </ul>
        </nav>
        <br /><br />
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Scrollspy in Bootstrap 5 via Javascript</strong>
        <br />
        <div id="geeks1" class="border border-dark" style="padding: 20px 20px;">
          <h1>About Us</h1>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>
            GeeksforGeeks is a one-stop destination for Computer Science
            students. Computer Science is a huge field, thus students must
            select a suitable platform that can meet all their needs, including
            Tutorials & Courses, Placement Preparation, and Interview
            Experiences, among others.
          </p>

          <p></p>
        </div>

        <div id="for" class="border border-warning" style="padding: 20px 20px;">
          <h1>Advantages</h1>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>

          <p>
            1. One-Stop Destination for Algorithms and Data Structures Knowledge
          </p>
          <p>2. Learn Multiple Programming Languages</p>
          <p>
            3. Boost Your Skills with Various GeeksforGeeks Courses
          </p>
        </div>

        <div
          id="geeks2"
          class="border border-secondary"
          style="padding: 20px 20px;"
        >
          <h1>Technology</h1>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>

          <p>
            A Computer Science portal for geeks. It contains well written, well
            thought and well explained computer science and programming
            articles, quizzes and practice/competitive programming/company
            interview Questions.
          </p>
          <p>Prepare With Us</p>
          <p>Get Hired With Us</p>
          <p>Grow With Usling!</p>
        </div>
      </div>
    </center>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var scrollSpy = new bootstrap.ScrollSpy(document.body, {
          target: "#navbar"
        });
      });
    </script>
  </body>
</html>

    React

    With data attributes ❌

    not working at all

    With JS 1: ✔

    import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import * as bootstrap from "bootstrap";

    import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
    

    import { useState, useEffect } from "react";
    

    export default function App() {
useEffect(() => {
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: "#list-example"
});
}, []);
    

    return (
<div
style={{
background: "#f5f2f2"
}}
>
<aside class="navbar navbar-nav fixed-top">
<div id="list-example" className="list-group">
<a
className="list-group-item list-group-item-action"
href="#heading1"
>
Heading 1
</a>
<a
className="list-group-item list-group-item-action"
href="#heading2"
>
Heading 2
</a>
<a
className="list-group-item list-group-item-action"
href="#heading3"
>
Heading 3
</a>
<a
className="list-group-item list-group-item-action"
href="#heading4"
>
Heading 4
</a>
<a
className="list-group-item list-group-item-action"
href="#heading5"
>
Heading 5
</a>
<a
className="list-group-item list-group-item-action"
href="#heading6"
>
Heading 6
</a>
</div>
</aside>
<article>
<h1>Hello CodeSandbox</h1>
<h2 id="heading1">Heading 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading2">Heading 2</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading3">Heading 3</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading4">Heading 4</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading5">Heading 5</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading6">Heading 6</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</article>
</div>
);
}

    With JS 2 ❌

    Highlight only goes down

    import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
//import "bootstrap/dist/js/bootstrap.js";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import * as bootstrap from "bootstrap";
//import "bootstrap/dist/js/bootstrap.bundle.min";

    import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
    

    import { useState, useEffect } from "react";
    

    export default function App() {
useEffect(() => {
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: "#list-example"
});
}, []);
    

    return (
<div
style={{
display: "flex",
background: "#f5f2f2"
}}
>
<aside>
<div id="list-example" className="list-group">
<a
className="list-group-item list-group-item-action"
href="#heading1"
>
Heading 1
</a>
<a
className="list-group-item list-group-item-action"
href="#heading2"
>
Heading 2
</a>
<a
className="list-group-item list-group-item-action"
href="#heading3"
>
Heading 3
</a>
<a
className="list-group-item list-group-item-action"
href="#heading4"
>
Heading 4
</a>
<a
className="list-group-item list-group-item-action"
href="#heading5"
>
Heading 5
</a>
<a
className="list-group-item list-group-item-action"
href="#heading6"
>
Heading 6
</a>
</div>
</aside>
<article
data-bs-spy="scroll"
data-bs-target="#list-example"
tab-index="0"
style={{ position: "relative", height: "500px", overflowY: "scroll" }}
>
<h1>Hello CodeSandbox</h1>
<h2 id="heading1">Heading 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading2">Heading 2</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading3">Heading 3</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading4">Heading 4</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading5">Heading 5</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading6">Heading 6</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</article>
</div>
);
}

    post

    npm link

    npm link library

    2024-01-06

    See if npm link works

    Run npm run build in the library. See if it updates the app.

    If stuff doesn't update in app, try

    • Restart app's dev server
    • Try as suggested in response from npm cache clean:
    npm install --cache /tmp/empty-cache

    Then restart app dev servers

    • npm unlink @scope/library on both sides and re-link

    If app cant find css

    attempting to import css from app (like with bootstrap css) does not always work for some reason

    inject css into js so that the package imports css by itself

    Reference

    When npm link works, npm ls @scope/package should return:

    app@0.1.0 /home/user/code/app
└── @scope/package@0.1.0 extraneous -> ./../packages/package-components-project

    post

    npm link

    npm link refuses to go away | clear npm cache

    2024-01-06

    1. Try

    Maybe unlink package?

    npm unlink @scope/package

    clear / swap out cache on either project

    npm install --cache /tmp/empty-cache

    restart all servers

    1. try uninstalling globally and reinstalling dependency:
    sudo npm rm --global @scope/library
    npm rm --global @scope/library
    npm ls --global @scope/library
    npm uninstall @scope/library
    npm i @scope/librayr@latest --save-exact

    try deleting package.json

    try restarting servers???

    post

    vscode

    webstorm

    vim

    IDE functionalities deactivated by Vim

    2024-01-13

    hvor mye er deaktivert/ufordel i Webstorm/VSCode når du har på Vim plugin?

    Webstorm IdeaVim

    • IDE's multi-select with Ctrl D doesn't work with entering insert mode using eg. using a
    • but c works
    • Annoying to save file that is edited in commit changes window
      • if in normal mode, pressing "Esc" will exit "commit changes"-window
      • unlike when terminal is focused, you can't disable the "Esc-> focus normal file view"
    • paste from OS registry (copy paste from UI app into Webstorm in IdeaVim) Kan fikses ved å registrere ctrl C og ctrl V som IDE-shortcuts (se https://useful-snippets.netlify.app/posts/webstorm-ideavim-shortcut-settings/)
    • vim search not as good as built-in search
      • vim won't highlight/preview as you search/replace
      • to activate built-in search you would have to give up ctrl F and ctrl H to IDE

    VSCode's Vim

    • Fuzzy finder
    • Search?
    • Search in files?

    post

    react

    javascript

    Rename React component

    2024-01-13 

    
# ask in what path the component resides in
# if no answer is provided, use default value
# -e flag is for giving cd-code completion while answering the question
    

    defaultValue=src/components/
    

    read -e -p "Where is component located? (default: $defaultValue): " location
location=${location:-$defaultValue}
    

    cd $location
    

    read -e -p "Enter component name you want to rename: " currentName
    

    cd $currentName
    

    # if component ends with a trailing slash
if [[ "$currentName" == */ ]]; then
# remove trailing slash
currentName=${currentName%/}
fi
    

    indexFile=index.ts
componentFile=$currentName.tsx
storyFile=$currentName.stories.tsx
stylesheetFile=$currentName.module.css
stylesheetScssFile=$currentName.module.scss
    

    if [[ $currentName != "" ]]; then
echo
echo "This will try and rename:"
echo "---- folder -----"
echo $currentName
echo
echo "---- files -----"
echo - $indexFile
echo - $componentFile
echo - $storyFile
echo - $stylesheetFile
echo - $stylesheetScssFile
echo
    

    read -p "Enter new name: " newName
if [[ $newName != "" ]]; then
echo
echo "search replace in files"
echo
    

    sed -i "s/$currentName/$newName/g" $indexFile
sed -i "s/$currentName/$newName/g" $componentFile
sed -i "s/$currentName/$newName/g" $storyFile
sed -i "s/$currentName/$newName/g" $stylesheetFile
sed -i "s/$currentName/$newName/g" $stylesheetScssFile
    

    echo
echo "rename files and folders"
echo
    

    mv $componentFile $newName.tsx
mv $storyFile $newName.stories.tsx
mv $stylesheetFile $newName.module.css
mv $stylesheetScssFile $newName.module.scss
    

    cd ..
    

    mv $currentName $newName/
fi
fi

    post

    art

    Rocket

    2024-01-13

    ^
    / _ \
    |   : |
    | 0. |
    /]   : [\
    /_] . [\
    |   |
    | |
    |
    |

    post

    webstorm

    vim

    Webstorm IdeaVim Shortcut settings

    2024-01-21

    Setup

    Install IdeaVim plugin

    Setup ctrl Q for toggling Vim on/off

    Keymaps

    Settings

    Turn Vim on

    reserve certain shortcuts to IDE

    like:

    • ctrl Q so we can toggle Vim efficiently
    • ctrl C to enable copying to OS registry
    • ctrl V to enable pasting from OS registry

    settings

    post

    vim

    webstorm

    neovim

    Vim

    2024-01-24

    https://vim.rtorr.com/

    post

    tmux

    Tmux

    2024-01-24

    Enter copy mode

    Ctrl [ eller begynn å scrolle

    Quit copy mode

    Ctrl c eller q

    https://stackoverflow.com/questions/67360866/tmux-exit-ctrl-b-and-stay-observing-the-session

    detach og tmux-attach:

    https://askubuntu.com/questions/824496/how-do-i-access-tmux-session-after-i-leave-it

    List sessions

    Navigate between sessions in tmux

    Ctrl b s

    Just list sessions

    tmux ls

    Med christoomey/vim-tmux-navigator package og instrukser fra https://www.josean.com/posts/tmux-setup / https://www.youtube.com/watch?v=U-omALWIBos&t=584s

    Resize pane

    Ctrl b h eller j eller k eller l

    Move between panes

    Ctrl h eller j eller k eller l

    post

    bash

    Repeatedly run same command

    2024-02-06

    Run "npm run build" 10 times

    for i in {1..10}; do npm run build; done

    Wait beetween commands

    for i in {1..10}; do npm run build && sleep 1; done

    post

    vim

    wsl

    ubuntu

    Neovim WSL copy to Windows system clipboard

    2024-02-13

    EDIT:

    unnamedplus funker for WSL. men bare ikke i windows 11 ser det ut som?

    See if Neovim lacks Clipboard

    :CheckHealth

    Clipboard (optional) ~
- WARNING No clipboard tool found. Clipboard registers (`"+` and `"*`) will not work.
  - ADVICE:
    - :help |clipboard|

    Clipboard help: https://useful-snippets.netlify.app/posts/neovim-reference-manual/

    Copy entire line

    1. Select entire line visual mode
    2. Enter command:
    :'<,'>w !clip.exe

    https://stackoverflow.com/questions/61550552/how-to-copy-paste-from-vim-in-wsl

    Click & drag method

    1. :set mouse= Neovim config already has this set as default
    2. Click & drag
    3. Ctrl C

    Should be able to paste text content anywhere else

    copy from vim wsl

    Image: Copy paste " - Javascript" to OS system clipboard

    set clipboard+=unnamed funker for Ideavim (.ideavimrc). Neovim gjennom WSL trenger kanskje mer verktøy for å funke

    post

    vim

    Neovim reference manual - clipboard

    2024-02-17

    provider.txt Nvim

    NVIM REFERENCE MANUAL by Thiago de Arruda

    Providers provider

    Nvim delegates some features to dynamic "providers". This document describes the providers and how to install them. E319 Use of a feature requiring a missing provider is an error:

    E319: No "foo" provider found. Run ":checkhealth provider"

    Run the |:checkhealth| command, and review the sections below.

    [...]

    ============================================================================== Clipboard integration provider-clipboard clipboard

    Nvim has no direct connection to the system clipboard. Instead it depends on a |provider| which transparently uses shell commands to communicate with the system clipboard or any other clipboard "backend".

    To ALWAYS use the clipboard for ALL operations (instead of interacting with the "+" and/or "*" registers explicitly): >vim set clipboard+=unnamedplus

    See 'clipboard' for details and options.

    clipboard-tool The presence of a working clipboard tool implicitly enables the '+' and '*' registers. Nvim looks for these clipboard tools, in order of priority:

    • |g:clipboard|

    • pbcopy, pbpaste (macOS)

    • wl-copy, wl-paste (if $WAYLAND_DISPLAY is set)

    • waycopy, waypaste (if $WAYLAND_DISPLAY is set)

    • xclip (if $DISPLAY is set)

    • xsel (if $DISPLAY is set)

    • lemonade (for SSH) https://github.com/pocke/lemonade

    • doitclient (for SSH) https://www.chiark.greenend.org.uk/~sgtatham/doit/

    • win32yank (Windows)

    • termux (via termux-clipboard-set, termux-clipboard-set)

    • tmux (if $TMUX is set)

      g:clipboard To configure a custom clipboard tool, set g:clipboard to a dictionary. For example this configuration integrates the tmux clipboard: >vim

        let g:clipboard = {
          \   'name': 'myClipboard',
          \   'copy': {
          \      '+': ['tmux', 'load-buffer', '-'],
          \      '*': ['tmux', 'load-buffer', '-'],
          \    },
          \   'paste': {
          \      '+': ['tmux', 'save-buffer', '-'],
          \      '*': ['tmux', 'save-buffer', '-'],
          \   },
          \   'cache_enabled': 1,
          \ }

    If "cache_enabled" is |TRUE| then when a selection is copied Nvim will cache the selection until the copy command process dies. When pasting, if the copy process has not died the cached selection is applied.

    g:clipboard can also use functions (see |lambda|) instead of strings. For example this configuration uses the g:foo variable as a fake clipboard:

    vim

        let g:clipboard = {
          \   'name': 'myClipboard',
          \   'copy': {
          \      '+': {lines, regtype -> extend(g:, {'foo': [lines, regtype]}) },
          \      '*': {lines, regtype -> extend(g:, {'foo': [lines, regtype]}) },
          \    },
          \   'paste': {
          \      '+': {-> get(g:, 'foo', [])},
          \      '*': {-> get(g:, 'foo', [])},
          \   },
          \ }

    The "copy" function stores a list of lines and the register type. The "paste" function returns the clipboard as a [lines, regtype] list, where lines is a list of lines and regtype is a register type conforming to |setreg()|.

    clipboard-wsl For Windows WSL, try this g:clipboard definition:

    vim

        let g:clipboard = {
                \   'name': 'WslClipboard',
                \   'copy': {
                \      '+': 'clip.exe',
                \      '*': 'clip.exe',
                \    },
                \   'paste': {
                \      '+': 'powershell.exe -c [Console]::Out.Write($(Get-Clipboard -Raw).tostring().replace("`r", ""))',
                \      '*': 'powershell.exe -c [Console]::Out.Write($(Get-Clipboard -Raw).tostring().replace("`r", ""))',
                \   },
                \   'cache_enabled': 0,
                \ }

    ============================================================================== Paste provider-paste paste

    "Paste" is a separate concept from |clipboard|: paste means "dump a bunch of text to the editor", whereas clipboard provides features like |quote+| to get and set the OS clipboard directly. For example, middle-click or CTRL-SHIFT-v (macOS: CMD-v) in your terminal is "paste", not "clipboard": the terminal application (Nvim) just gets a stream of text, it does not interact with the clipboard directly.

    bracketed-paste-mode Pasting in the |TUI| depends on the "bracketed paste" terminal capability, which allows terminal applications to distinguish between user input and pasted text. https://cirw.in/blog/bracketed-paste This works automatically if your terminal supports it.

    ui-paste GUIs can paste by calling |nvim_paste()|.

    PASTE BEHAVIOR

    Paste inserts text after the cursor. Lines break at , , and . When pasting a huge amount of text, screen-updates are throttled and the message area shows a "..." pulse.

    In cmdline-mode only the first line is pasted, to avoid accidentally executing many commands. Use the |cmdline-window| if you really want to paste multiple lines to the cmdline.

    You can implement a custom paste handler by redefining |vim.paste()|. Example: >lua

    vim.paste = (function(lines, phase) vim.api.nvim_put(lines, 'c', true, true) end)

    ============================================================================== X11 selection mechanism clipboard-x11 x11-selection

    X11 clipboard providers store text in "selections". Selections are owned by an application, so when the application gets closed, the selection text is lost. The contents of selections are held by the originating application (e.g., upon a copy), and only passed to another application when that other application requests them (e.g., upon a paste).

    primary-selection quotestar quoteplus quote+

    There are three documented X11 selections: PRIMARY, SECONDARY, and CLIPBOARD. CLIPBOARD is typically used in X11 applications for copy/paste operations (CTRL-c/CTRL-v), while PRIMARY is used for the last selected text, which is generally inserted with the middle mouse button.

    Nvim's X11 clipboard providers only use the PRIMARY and CLIPBOARD selections, for the "*" and "+" registers, respectively.

    ============================================================================== vim:tw=78:ts=8:noet:ft=help:norl:

    post

    lazygit

    wsl

    lazygit issues

    2024-02-20

    • kan ikke alltid pulle eller pushe fra branch window.
    • rename branch usynliggjør tekst mens man beveger markøren bakover, men kommer tilbake igjen når man skriver igjen
    • åpne lazygit stash og så klikke _ (underscore). Så ser man ikke innholdet i den stashen. MAn må bevege seg ned og opp igjen først

    post

    regex

    Regex & capture groups

    2025-01-16

    Match ett ord

    • [^\s]+
    • [a-z]+
    • \w+??

    Search replace capture group

    for å replace

    - export default Component;
+ export { Component }

    Kan man kjøre

    Search export default (\w+)

    Replace export { $1 }

    Se pål-notater for mer...

    Newline i search replace

    search replace kan legge til newline med \n