post

npm link

cli

npm link library

Sat 06. January 2024 | 2024-01-06

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

post

cli

Clean node modules cache

Sat 06. January 2024 | 2024-01-06

Remove changes made to node_modules!

Remove ~/.npm

Delete node_modules

Reinstall

post

react

javascript

Bootstrap scrollspy react

Sat 06. January 2024 | 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

typescript

javascript

cli

Convert all JS files in folder to TS

Mon 01. January 2024 | 2024-01-01

for f in *.js; do mv -- "$f" "${f%.js}.tsx"; done

https://unix.stackexchange.com/questions/19654/how-do-i-change-the-extension-of-multiple-files

post

process

cli

Quit Caddy process

Mon 25. December 2023 | 2023-12-25

sudo caddy stop

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

Try: sudo ps -eaf | grep -i caddy
Try: sudo -s (Enter sudo shell)
1. caddy stop
2. exit

post

webstorm

vscode

neovim

pros-and-cons

autohotkey

fordeler/ulemper med VSCode/Webstorm/Neovim

Mon 25. December 2023 | 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
tabs lagres og restoreres basert på hvilken branch du er på. Du kan bytte mellom to stk. og ha forskjellig sett av tabs lagret permanent på dem.

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

diffview.nvim krasher av og til
- når man åpner den (får error melding)
- når man går tilbake i historikken (fryser fast av og til)
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.
cit fungerer ikke på <></>
dat fungerer ikke på self closed tags

post

vscode

webstorm

Folder templates / file and code templates for VS Code and Webstorm

Mon 25. December 2023 | 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

art

ascii

Folder icons structure

Mon 25. December 2023 | 2023-12-25

📂my-component-library
+┣━ 📂lib
+┃ ┗━ 📜main.ts
┣ 📂public
┣ 📂src
…

post

vite

css

Generate CSS module classnames in Vite

Fri 08. December 2023 | 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 `${file}_${name}`;
      }
    }
  },
});

post

webstorm

wsl

ubuntu

bash

mac

Open Webstorm from terminal (Windows + WSL & Mac)

Fri 08. December 2023 | 2023-12-08

WSL

.bashrc

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

Usage: Run webstorm in terminal

Mac

.zshrc

webstorm() {
#   open "/Applications/WebStorm.app" .
    open -na "WebStorm.app" --args "$@"
}

Usage: Run webstorm . in terminal

Docs WSL & Mac

https://www.jetbrains.com/help/webstorm/working-with-the-ide-features-from-command-line.html

post

process

cli

List & kill processes

Fri 08. December 2023 | 2023-12-08

List processes

find program that uses port: 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

vscode

cli

prettier

IDE bruker ikke prettierrc

Fri 08. December 2023 | 2023-12-08

Prøv å kjøre npx prettier filenamepath --writefør du formatterer i webstorm/VSCode

Useful snippets

Start

See if npm link works

If stuff doesn't update in app, try

If app cant find css

Reference

HTML

with data attributes ✔

with JS ❌

With JS ✔

React

With data attributes ❌

With JS 1: ✔

With JS 2 ❌

VS Code

Cons

Webstorm

Pros

Cons:

Neovim

Pros

Cons

VScode - Folder templates

Webstorm - File and Code Templates

WSL

Mac

Docs WSL & Mac

List processes

All

One specific port

Kill process

By name

By PID

By port