Finne prog med port

Relatert

• list processes: https://useful-snippets.netlify.app/posts/list-processes/

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/

Prosjekt som bruker WSL? Hvordan bytte til Git Bash

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

Convert React Prop Types to TS type annotations

For filer i mappe hvis navn er "pages":

npx jscodeshift -t https://mskelton.dev/ratchet.ts pages/**/*.{ts,tsx}

https://github.com/mskelton/ratchet

funker ikke på destructured props, da

Kule porteføljer

• https://gregives.co.uk/ (bilde av fyren som byttes ut etter musebevegelser, slik at det ser ut som han ser på musepekeren!!)
• https://brittanychiang.com/ (et kult design som mange har stjålet koden til)
• https://lynnandtonic.com/
• https://lynnandtonic.com/archive/2020/
• https://ashleighsimonelli.co.uk/ (innovativt, koselig og terminal UI)
• https://pehaa.com/ (stilig typografi, stilig scroll-effect som gør alt skrått)
• https://arsalanshakil.github.io/ (stilig typografi, scroll styling)
• https://gherciu.github.io/portfolio/ (veldig levende desgin. innhold som virkelig popper frem. Nydelig design)
• https://danny-garcia.com/ (kul boblebakgrunn)
• https://sarah.dev/ (roseorigimai lignende greier som blir helt forvridd når man hoverer-over blomstene)
• https://www.ilithya.rocks/ (råstilig flygende 3d-tekst og 3d-objekter)
• https://jolienhoop.com/ (kul reaktiv bakgrunn!!!)
• https://www.dalelarroder.com/ (rå oppstilling av tekst, stilig mus-effekt i bakgrunnen)
• https://gabrielthecode.com/ (stilig bg med firkanter, skrå linjer. Unikt, men fortsatt oversiktlig. Men litt lang loading på siden)
• https://ahmedzougari.netlify.app/ (squiggly effect på profilbilde ved hover)
• https://vivek9patel.github.io/ (linux UI)
• https://www.abdusamad.uz/ (stilig navigasjon med ctrl + k)
• https://yodkwtf.com/ (skøy bg, oversiktlig og stilig)
• https://www.hafidziti.dev/ (fine inngangs-animasjoner på elementer, ikke for sakte, som mange av de andre animasjonene er)
• https://developer-portfolio-1hanzla100.vercel.app/ (helt rå animasjoner)
• https://harshgoel.me/ (steam hover card aktig-effekt på project cards)
• http://v1.kaisermann.me/ (arbeidspult UI)
• https://turnerj.com/ (fin gradient effect ved hover)
• https://garvnanwani.netlify.app/ (en fryd å se på. som å se i et magasin. fin typografi)
• https://nachocaiafa.com.ar/ (woooooooooooooooooooooooooooooooowww!!! Ser akkurat ut som en nettside for et spill eller noe)
• https://j471n.in/ (veldig fine inngangsanimasjoner, alt kommer sammen veldig pent)
• https://jayantgoel001.github.io/ (Ganske stilige inngangsanimasjoner. Har også en slags vtuber person? veldig unikt)
• https://moustapha.me/ (wooooooooooooow! animasjonene, designet, logoen)
• https://romanisthere.github.io/ (man tegner på bakgrunnen og det er et visittkort der som automatisk utfyller teksten sin)
• https://iantrent.com/
• https://karkipramesh.com.np/ (stilig bakgrunn av en wireframe-skjelett-3d-kule som roterer)
• https://jahir.dev/
• https://leewarrick.com/ (litt fine animasjoner)
• https://louayhamada.com/ (code editor UI)
• https://matteolobello.com/ (en sirkel som følger musepekeren, og når den komme rover lenker, så forvandles den til en firkant som markerer hele det lenkede ordet. Stilig, unikt)
• https://mayank0255.github.io/ (pent design. Godt håndtert scroll hijjacking)
• https://maramsaiharsha.netlify.app/ (litt gøy, bare)
• https://migu.es/ (elementer i designet popper fram)
• https://nicovanzyl.com/portfolio
• https://olepetterstokke.no/
• https://olaolu.dev/
• https://ogaston.com/ (flygeanimasjon på twitter-fuglen!!)
• https://bluexguardian.com/
• https://pazindushane.github.io/ (veldig proft utseende. UI og animasjoner spiller så godt sammen)
• https://priya180975.github.io/portfolio/ (kul minimalistisk stil, tør å bruke grid)
• https://www.juliacodes.com/
• http://danielsternlicht.com/
• https://www.pirhoo.com/
• https://evander.vercel.app/
• https://kuldar.com
• https://robertandradejr.dev/
• https://fossheim.io/

MEST UKONVENSJONELLE PORTEFØLJER

• https://lynnandtonic.com/ (viewport resizing zoomer inn og ut)
• https://mutuku.me/ (et digert bilde av et maleri pluss litt tekst under)
• https://moritzkornher.de/ (spesiell navigasjon verden ikke har sett maken til)
• Terminal-baserte porteføljer
  • https://ashleighsimonelli.co.uk/ (veldig bra utført)
  • https://lizlam.github.io/ (funker ikke å skrive noe, da)
• https://jayantgoel001.github.io/ (det er en V-tuber greie nede til venstre???)
• https://leonardoliveira.com/ (dameansikt i bakgrunnen. Når dyu er på en underside åpnes øynene hennes og pupillene følger musepekeren)
• https://sirlisko.com/ (et slags spill i header)
• https://www.banguismv.me/ (VELDIG unik navigasjon)
• https://jasonrubenste.in/
• https://bluexguardian.com/index.html
• http://danielsternlicht.com/
• https://www.youandigraphics.com/

eleventy stuff

Eleventy stuff

• https://glitch-hello-eleventy.glitch.me/ glitch has web editor for markdown with preview
  • https://glitch.com/edit/#!/classy-zesty-bird?path=README.md%3A1%3A0
• https://github.com/kohrongying/11ty-blog-starter has a create bash script

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

Install Neovim (Ubuntu)

https://github.com/paalss/nvim/blob/master/docs/neovim-install.md

i18next

Usage with long nested keys

const { t } = useTranslation("translation", {
  keyPrefix: "long.nested.keys",
});

Ivareta git historikk ved file renaming

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

Links

Links

• Git & lazygit
  • https://git-how.com/
  • https://git-scm.com/book/en/v2
• Vim
  • https://vimdoc.sourceforge.net/htmldoc/
  • https://vimhelp.org/
  • https://profkuperman.com/help/vim/home.html
  • learningvimthehardway
    • $MYVIMRC edit & source - https://learnvimscriptthehardway.stevelosh.com/chapters/07.html
    • execute normal! - https://learnvimscriptthehardway.stevelosh.com/chapters/29.html
  • Learn vim the smart way
  • https://www.vimfromscratch.com/articles/using-git-from-vim
  • https://vimtricks.com/
• Neovim
  • https://vonheikemen.github.io/learn-nvim/
• html
  • autocomplete html.spec.watwg.org
• fontawesome list
• https://codesandbox.io/dashboard/recent

log variable with key

VS Code snippet

  "Print variable to console": {
    "scope": "javascript,typescript",
    "prefix": "logvar",
    "body": "console.log('$1', $1)"
  }

Neovim Luasnippet

se nvim lua snippets for inspirasjon

Syntax highlighting i Nano commit diff

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!

Quick test Netlify

https://app.netlify.com/drop

build the site, eg. _site

Drag and drop the build folder

Somehow this is 10 000% easier than deploying on github pages.

See this deployed before it expires: https://singular-peony-86185b.netlify.app/

preserve aspect ratio for Nextjs images

https://stackoverflow.com/questions/66845889/next-js-image-how-to-maintain-aspect-ratio-and-add-letterboxes-when-needed

<div
  style={{
    position: "relative",
    width: "566px",
    height: "425px",
  }}
>
  <Image
    src={currCommit.image.url}
    alt="Current Image"
    layout={"fill"}
    style={{objectFit: "cover"}}
  />
</div>

Oh my bash adding missing code completions

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

Ohmybash

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

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

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"

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

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

fordeler/ulemper med Windows/MacOS

mislikte/misliker med mac:

1. man må ha app store account og derav også registrere bankkort for å oppdatere OS. (Tror denne er utdatert)
2. Finder (filutforsker) sorterer filtyper helt alfabetisk i stedet for å putte mapper over alt annet dette kan endres i innstillinger nå
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 dette er også mulig nå!
4. kryss og minifiser og det er på feil side, dessuten er knappene veldig små
   1. dette bryr jeg meg ikke noe om lenger. fungerer helt greit å bruke tastatursnarveier
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)
   1. samme her
6. savner muligheten til å raskt forvandle vindu til å oppta halvparten av skjermen det er mulig nå!
7. fullscreen-uten-å-ta-bort-dock er upraktisk man trenger ikke bruke denne fullscreen varianten
8. På Mac XAMPP versjonen må man aktivt mounte xampp/lampp-mappa. Slitsomt
   1. bruker ikke dette programmet mer
9. launchpad (listen over alle appene) 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. ja, det er litt fjollete, men det blir man vandt til
12. 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
13. Man kan ikke trykke fn + esc for å slå på og av funksjonstaster
14. 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 man kopierer camera raw file derfra så blir de til jpg når man limer dem inn! Jeg trenger å åpne i Finder!

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

Clean node modules cache

Remove changes made to node_modules!

Remove ~/.npm

Delete node_modules

Reinstall

npm link library

Start

tror det er viktig å uninstalle @scope/library først?

• npm link in library
• npm link @scope/library in app

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 server

Maybe try this on the app side

• npm unlink @scope/library
• npm link @scope/library

Maybe also try this on the library side

• npm unlink @scope/library
• npm link

I don't think it's necessary to uninstall library from node modules.

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

Useful information about npm link and cleaning up and stuff, see README!: https://github.com/jasonsturges/vite-typescript-npm-package

create context

https://react.dev/reference/react/createContext

context.ts

import {createContext} from 'react';
export interface ContextProps {
darkTheme: boolean;
}
export const AppContext = createContext<ContextProps>({
darkTheme: true,
});

App

const Context2 = Context as React.Context<ContextProps>;
return (
<AppContext2.Provider value={{darkTheme: false}}>
{/* -- content -- */}

npm link refuses to go away | clear npm cache

If you mistakenly forget to unlink, you can manually clean up artifacts from yarn or npm.

For npm, the link command creates global packages which can be removed by executing:

sudo npm rm --global "mylib"

• https://github.com/jasonsturges/vite-typescript-npm-package

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

2. 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???

IDE functionalities deactivated by Vim

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?

Rename React component

# 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

Rocket

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

Compass TODO

GitHub

• https://github.com/SwitchbackTech/compass

Docs

• https://docs.compasscalendar.com/
  • https://docs.compasscalendar.com/docs/getting-started/install

Prod

• https://app.compasscalendar.com/login

search replace slash in Vim

To search replace the following:

</b>:

to:

:</b>

You can use another separator.

Example using # instead of /:

:8,27s#</b>:#:</b>

Vim, Ideavim and webstorm keyboard shortcuts

https://useful-snippets.netlify.app/posts/vim/

Webstorm keyboard shortcuts

• Show error ctrl F1

Copy paste ignore delete register

How to paste using the yank register instead of delete register

"0p

Or skip delete register with black hole:

"_d

https://stackoverflow.com/questions/11993851/how-to-delete-not-cut-in-vim

IDE vim shortcut override settings

Setup

Install IdeaVim plugin

Setup ctrl Q for toggling Vim on/off

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

Zed

{
  "context": "Editor && !menu",
  "bindings": {
    "ctrl-f": "buffer_search::Deploy",      // vim default: page down
    "ctrl-c": "editor::Copy",               // vim default: return to normal mode
    "ctrl-x": "editor::Cut",                // vim default: decrement
    "ctrl-v": "editor::Paste",              // vim default: visual block mode
    "ctrl-a": "editor::SelectAll",          // vim default: increment
    "ctrl-y": "editor::Undo",               // vim default: line up
    "ctrl-t": "project_symbols::Toggle",    // vim default: go to older tag
    "ctrl-o": "workspace::Open",            // vim default: go back
    "ctrl-s": "workspace::Save",            // vim default: show signature
    "ctrl-b": "workspace::ToggleLeftDock"   // vim default: down
  }
},

https://zed.dev/docs/vim#restoring-common-text-editing-and-zed-keybindings

OS registry pasting not working

If shift right mouse click in insert mode doesn't paste anything, try exiting and re-entering Neovim again

Vim

https://vim.rtorr.com/

• Delete word
  • n
    • daw
• "Ctrl Backspace" sletting
  • i
    • Ctrl w
• HTML attribute code omni-completion
  • Ctrl x
  • Ctrl o
• Return to last opened window (buffer)
  • Ctrl 6
• Indent line
  • i
    • Ctrl t / Ctrl d
  • v
    • mark selection
    • < / >
    • . to repeat
• Telescope - open selected result in new...
  • tab Ctrl t
  • vertical split Ctrl v
  • horizontal split Ctrl x
• Open help pages in new tab
  • Telescope help_tags -> Ctrl t
  • :tab h lualine
• Seach replace all
  • telescope
  • ctrl Q to add results to quick fix list
  • :cdo s/blaba/blaba/g
• Fuzzy search note: https://useful-snippets.netlify.app/posts/fuzzy-search/
• Marks
  • Add mark: m[bokstav]
  • Navigate away
  • Return to mark: '[bokstav]
• Go to definition gd
  • IdeaVim: might need to ctrl click the regular way on beforehand
• Ideavim: surround with delimeters https://stackoverflow.com/questions/48438208/how-to-surround-a-line-with-parentheses-in-intellij-ideavim
• Go back to where you where you came from ctrl o
• Save all files wa
• Show definition (eg. typescript) K -> vim.lsp.buf.hover()
• Go to next error
  • IdeaVim: https://stackoverflow.com/questions/21018400/ideavim-in-intellij-is-there-a-shortcut-to-goto-next-error
  • :x to exit
• delete until delimeter dt* https://stackoverflow.com/questions/10658230/how-to-delete-until-end-of-delimiter
• delete including delimeter da*
• search replace incl. slash https://useful-snippets.netlify.app/posts/search-replace-slash-in-vim/
• more stuff in https://github.com/paalss/nvim/blob/master/README.md
• Change content of html <li>foo</li> -> citbar -> <li>bar</li>

Tmux

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

Move windows

Move to index

Ctrl b . 2 

... Flere løsninger ...

https://superuser.com/questions/343572/how-do-i-reorder-tmux-windows

Upgrade Ubuntu in terminal

https://ubuntu.com/server/docs/upgrade-introduction

sudo apt update
sudo apt upgrade

Repeatedly run same command

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

Neovim WSL copy to Windows system clipboard

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

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

bash redirect input/output

• Stdin 0< or <
• Stdout 1 or >
• Stderr 2>

Uninstall node & reinstall with nvm

Node uninstall

sudo apt-get remove nodejs
sudo apt-get remove npm

Kanskje:

sudo apt autoremove

rm -rf ~/.npm
rm -rf ~/.node

https://stackoverflow.com/questions/32426601/how-can-i-completely-uninstall-nodejs-npm-and-node-in-ubuntu

Confirm uninstallation

node --version

Nvm install

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

https://www.nvmnode.com/guide/download.html

Quit WSL

Reopen

nvm install 24

Latest Node version: https://nodejs.org/en/download

nvm use 20

Confirm version

node --version

Neovim reference manual - clipboard

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:

lazygit issues

• 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

Vim read path commands

Vim read path commands

Print path til project

:pwd

Print path til åpen vim buffer

:echo expand('%:p')

skaffe tillatelse til mappe

sudo chmod 0775 -R mappe/

Zip linux

Unzip file

which unzip

sudo apt-get install unzip

unzip file.zip

Unzip file (tar)

cd ~/.local/bin
tar xzvf nvim-linux-x86_64.tar.gz # extract
rm nvim-linux-x86_64.tar.gz  
ln -s ./nvim-linux-x86_64/bin/nvim ./nvim # create symbolic link

Fra https://github.com/paalss/nvim/blob/master/docs/neovim-install.md

Undo soft reset

git reflog

copy hash (ex: 56e2f8f)

git checkout main/develop
git merge 56e2f8f

Check Ubuntu / wsl version

WSL ubuntu

lsb_release -a

Windows Command Prompt

wsl --version

Display boolean value in UI

<strong>Boolean value</strong>: <br/>

{String(booleanValue)}

Inspect open menu

import {ComboboxItem, NativeSelect, Select} from '@mantine/core';

<Select
id={'Flavor'}
onDropdownOpen={() => {
debugger;
}}
/>

Accept all --theirs for file during merge (ikke testet mye)

git ls-files -u | sed -n 's,3\t,0\t,p' | git update-index --index-info
git checkout-index -af

https://stackoverflow.com/questions/73388057/in-git-after-merging-some-files-i-want-to-accept-all-theirs-that-are-left-in?rq=3

Lazygit git log --all

Naviger til commits pane

Ctrl l

"Toggle show whole git graph"

https://github.com/jesseduffield/lazygit/issues/3845

Lazygit config

https://github.com/jesseduffield/lazygit/blob/master/docs/Config.md

git.showWholeGraph

Command used when displaying the current branch git log in the main window

branchLogCmd: git log --graph --color=always --abbrev-commit --decorate --date=relative --pretty=medium --

git.branchLogCmd

Regex & capture groups

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

Sublist in ordered list

1. Hovedpunkt
1. subpunkt
2. subpunkt2

1. Hovedpunkt
   1. subpunkt
   2. subpunkt2

https://markdownlivepreview.com/

Taskwarrior-tui

Install taskwarrior: https://useful-snippets.netlify.app/posts/taskwarrior/

Install Taskwarrior-tui

1. https://github.com/kdheepak/taskwarrior-tui/releases/tag/v0.26.3
2. Ubuntu/WSL: taskwarrior-tui-x86_64-unknown-linux-gnu.tar.gz
3. extract to WSL drive
4. Navigate to file
5. (chmod +x taskwarrior-tui)
6. Run ./taskwarrior-tui

Vim multiple cursors / gn

multi cursor addons

• https://github.com/mg979/vim-visual-multi
• https://plugins.jetbrains.com/plugin/19162-vimmulticursor ideavim

Vim gn

• https://medium.com/@schtoeffel/you-don-t-need-more-than-one-cursor-in-vim-2c44117d51db
• https://vimtricks.com/p/vim-find-next/

cgn: enter change mode for next occurence

1. / search for word
2. cgn change word
3. . repeat for next word

Search navigate stuff

• https://stackoverflow.com/questions/50097790/search-for-word-under-cursor-without-moving-the-cursor

wezterm pros&cons

pros

• enkel å confige, forståelige docs

cons

• kan ikke defaulte shell til bash?
• ctrl c stopper prosess selv i "visual" markering mode. WSL gjorde ikke det
• treg på windows drive... fordi den fortsatt buker wsl-ubuntu bash?

MSYS2

msys2.org

• Node: pacman -S mingw-w64-x86_64-nodejs: https://packages.msys2.org/packages/mingw-w64-x86_64-nodejs

Use MINGW64 app?

Autohotkey & replacements

Windows

Shift F1 to open http://localhost:5173/

script.ahk

+F1::Run "http://localhost:5173/"

pn1 to print 29090816894 (macro)

script.ahk

:*:pn1::29090816894 

keyboard shortcut to print characters

backtick (`) and tilde (~)

script.ahk

!1::SendText "``"
!2::Send "~ "

Mac

Shift F1 to open http://localhost:5173/

Shortcuts app

1. New shortcut
2. Open URL
3. Details > Run with: (type Shift F1)

Shortcut app may be closed

pn1 to print 11113306361

https://altitudemarketing.com/blog/text-macros-macos/

keyboard shortcut to print characters

backtick (`) and tilde (~)

.config/skhd/skhdrc

lalt - 1: skhd -t "\`"
lalt - 2: skhd -t "~"

Ctrl Shift d to print 11113306361

Follow same approach as printing current date: https://useful-snippets.netlify.app/posts/print-current-date/

SKHD links

• documentation: https://github.com/koekeishiya/skhd
• blog tutorial example: https://www.danielcorin.com/til/skhd/intro/

Open / switch to specific program

Windows AHK

• https://www.autohotkey.com/board/topic/107450-switch-to-or-open-application/
• https://superuser.com/questions/1106135/how-can-i-launch-an-application-with-a-keyboard-shortcut

Mac

• Shortcuts app?
• skhd?

Ascii tegn

─ │ ┐ ┘ ┌ └ ├ ┤ ┬ ┴ ┼
═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟ ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬

tmux config

Active colors

Window/tab bar

In version 3.3 use the answer in comment provided here by @AntK.

set-window-option -g window-status-current-style bg=red
In version 2.9 You should change this options to something like:

Active window title color

setw -g window-status-current-style fg=black,bg=white

https://unix.stackexchange.com/questions/210174/set-the-active-tmux-tab-color

Panel

https://stackoverflow.com/questions/4889724/how-can-you-tell-which-pane-in-tmux-is-focused

Rebasing

https://jvns.ca/blog/2023/11/06/rebasing-what-can-go-wrong-/

Toggle casing vim

Normal mode

g~iw # toggle

guiw # lowercase

gUiw # uppercase

Visual mode

u # lowercase

U # uppercase

Vim registers

Yank / delete to 's' register

prepend with "s

yank

"sy*

delete

"sd*

paste

"sp

insert mode:

<C-r>*

Vim save & quit

• Save & quit - :wq
• Save (if modified) & quit - ZZ. :x
• Force quit? - ZQ

https://vi.stackexchange.com/questions/5723/what-are-the-differences-between-wqcr-xcr-and-zz-when-exiting-vim

Bootstrap margin & padding (spacing)

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
• e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

https://getbootstrap.com/docs/5.3/utilities/spacing/#notation

File ownership

stat filename

or

ls -l

Change ownership

chmod o=rx filename

Revert changes introduced in old commit

Reverse apply changes from old commit

git checkout <commit-hash>
git log # copy previous commit hash
git diff <previous-commit-hash> > diff.patch
git checkout <main-or-up-to-date-branch>
git apply diff.patch --reverse

Create new commit that revert last commit

git revert <last-commit-hash>

Grep examples

Grep:

grep -4 \"peerDependencies\" node_modules/stylelint-config-standard-scss/package.json

Ripgrep:

rg peerDependencies

Accept your changes - rebase merge conflicts

<!--

git rebase -X theirs main

git rebase -X theirs develop -i

-->

git tag branch_before_rebase
git rebase -X theirs develop

• Manually compare current branch with branch_before_rebase
• Correct whatever needs to be corrected

Docker arguments

https://github.com/cypress-io/cypress-docker-images/tree/master/factory

compare branch with main

CLI

git diff main..HEAD # does not include uncommitted changes

git diff main..$(git branch --show-current) # does not include uncommitted changes

If MR author forgot to bring feature up to date with main.

Compare against main at the time when branch was created.

git diff $(git merge-base main HEAD) HEAD

git show $(git branch --show-current)

git branch --show-current is current branch

Lazygit

1. Highlight main branch
2. Shift w & hit enter
3. highlight the branch you want to compare with

Webstorm

1. GitToolBox? Should not be necessary I think

https://useful-snippets.netlify.app/posts/webstorm-compare-with-branch/

VS Code

1. Gitlens?

Neovim

1. Diffview

Yadm

https://yadm.io/

Add all yadm managed files

yadm add -u

Open Lazygit for Yadm

yadm enter lazygit

Unstage a file / remove from index

git restore --staged file-name.txt

tiled window margins

https://appleinsider.com/inside/macos-sequoia/tips/how-to-turn-off-the-gaps-in-macos-sequoias-window-tiling

margins (default):

set "no margins"

no margins:

Copy file from another branch

git checkout another-local-branch path/to/file.js

• https://stackoverflow.com/questions/2364147/how-to-get-just-one-file-from-another-branch

navigate git history

Go forward / List ancestry (later) commits

• https://stackoverflow.com/questions/6759791/how-do-i-move-forward-and-backward-between-commits-in-git

From HEAD (older commit) to main branch (up-to-date)

git log --reverse --ancestry-path HEAD^..main

• https://stackoverflow.com/questions/2263674/how-do-i-find-the-next-commit-in-git-child-children-of-ref

stuff

git checkout HEAD^ # back
git checkout HEAD@{1} # go to previous HEAD position

Jump to main component vim

Vim/Neovim

yank filename without extension to 'f'-registry

:let @f = expand('%:t:r')<CR>

search for "const [contents in 'f'-registry]"

:execute '/const ' . @f<CR>:nohlsearch<CR>

added together

:let @f = expand('%:t:r')<CR>:execute '/const ' . @f<CR>:nohlsearch<CR>

Ideavim

Copy file name to + register and search for it. Do not execute immediately () as CopyFileName also includes the file extension

:action CopyFileName<CR>/const <c-r>+

Fuzzy search

Telescope & Fzf.vim

More on Telescope: https://useful-snippets.netlify.app/posts/vim/

Fzf lua

Q for selecting all elements with fzf-lua:

config.defaults.keymap.fzf["ctrl-q"] = "select-all+accept"

From Lazyvim config: https://github.com/LazyVim/LazyVim/blob/main/lua/lazyvim/plugins/extras/editor/fzf.lua

Fzf use cases

Edit a file

nvim $(fzf)

Restore a file from another branch (here: main)

git checkout main $(fzf)

Run a specific test in Jest

npx jest --runTestsByPath $(fzf)

sh/bash/zsh parameter and if check

bash script.sh iii

if [[ "$1" == "iii" ]]; then
    echo "første parameter er iii"
else
    echo "første parameter er ikke iii"
fi

bash colors

GREEN='\033[0;32m'
RED='\033[1;91m'
RESET='\033[0m'

echo -e "${RED}Found errors:${RESET}" 

echo -e "${GREEN}Success!${RESET}" 

https://gist.github.com/JBlond/2fea43a3049b38287e5e9cefc87b2124

Regular Colors

Bold

Underline

Background

High Intensity

Bold High Intensity

High Intensity backgrounds

Reset

other styles

echo -e "\e[1mbold\e[0m"
echo -e "\e[3mitalic\e[0m"
echo -e "\e[3m\e[1mbold italic\e[0m"
echo -e "\e[4munderline\e[0m"
echo -e "\e[9mstrikethrough\e[0m"
echo -e "\e[31mHello World\e[0m"
echo -e "\x1B[31mHello World\e[0m"

Bashe i en container

bash entry i docker-compose

service-name:
    stdin_open: true
    tty: true

Exec bash i Dockerfile / docker run:

• https://codesignal.com/learn/courses/diving-deeper-into-images-containers/lessons/explore-interactive-container-mode-with-docker
• https://www.baeldung.com/ops/docker-interactive-after-script

Start interactive shell on container:

docker run -it?

Already running container:

docker exec -it [container-name] /bin/bash

Cd to windows C-drive from WSL

cd /mnt/c/Users/Pål Stakvik

UV python

Docs: https://docs.astral.sh/uv/

Install Python version: https://docs.astral.sh/uv/getting-started/features/#python-versions

uv python install <version>

Uninstall python version

uv python uninstall <version> 

Initialize project

uv init

Set correct python version in .python-version

(re)-build venv

uv venv

Updates .venv files

Activate venv environment

source .venv/bin/activate

deactivate

Install dependencies from requirements.txt

uv pip install -r requirements.txt

Install one single dependency

uv python add <package> 

Run package command

uv run <command> 

Disable AI autocomplete

You can find all plugin settings at Preferences -> Editor -> General -> Code Completion -> Machine Learning-Assisted Completion -> Enable Full Line suggestions section.

https://plugins.jetbrains.com/plugin/14823-full-line-code-completion/documentation

Snippets

VScode ...

Jetbrains - Live templates

live templates

(remove hyphens)

{-% for $ITEM$ in $LIST$ %-}
  $END$
{-% endfor %-}

console.log("$VAR$", $VAR$)

Neovim - luasnippets / iabbrev ...

se neovim config

git reset soft | remove last commit and move code to working dir

git reset --soft HEAD~1

prepush / git hooks

To activate pre-push, rename .git/hooks/pre-push.sample to .git/hooks/pre-push

Example script:

GREEN='\033[0;32m'
RED='\033[1;91m'
RESET='\033[0m'
branch_name="$(git branch --show-current)"
allowed_branch_name="my-branch"
if [ "$branch_name" != "$allowed_branch_name" ]; then
echo "Current branch: ${RED}${branch_name}${RESET}"
echo "Allowed branch: ${GREEN}${allowed_branch_name}${RESET}"
echo
echo "You can't push directly to this branch."
exit 1
fi

Insert the current branch into the top of the pre-push file

sed -i "" "s&An example&$(git branch --show-current)\n# An example&" .git/hooks/pre-push

Replace "An example" with current branch \n # An example

Copy current branch to Mac clipboard

echo $(git branch --show-current) | pbcopy

From vim:

:!echo $(git branch --show-current) | pbcopy