Sat 06. January 2024 | 2024-01-06

Maybe unlink package?

npm unlink @scope/package

clear / swap out cache on either project

npm install --cache /tmp/empty-cache

restart all servers

try uninstalling globally and reinstalling dependency:

sudo npm rm --global @scope/library

npm rm --global @scope/library

npm ls --global @scope/library

npm uninstall @scope/library

npm i @scope/librayr@latest --save-exact

try deleting package.json

try restarting servers???

post

react

javascript

typescript

create context

Sat 06. January 2024 | 2024-01-06

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 -- */}

post

npm link

npm link library

Sat 06. January 2024 | 2024-01-06

See if npm link works

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

If stuff doesn't update in app, try

Restart app's dev server
Try as suggested in response from npm cache clean:

npm install --cache /tmp/empty-cache

Then restart app dev servers

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

If app cant find css

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

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

Reference

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

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

post

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

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

Quit Caddy process

Mon 25. December 2023 | 2023-12-25

sudo caddy stop

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

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

Cons:

LSP code suggestion på 'npm link'-ed library funker ikke!
settings og 'file and code templates' kan resettes av seg selv!!
kan ikke slå av auto-save helt
litt slow, generelt
- slow project panel update
  - og ingen 'refresh'-button
  - man må KLIKKE på filene for at ting skal begynne å oppdateres
- typescript linting
ingen search history i "search in all files"
kan ikke lime inn i terminal med høyre museklikk
terminal
- return to normal mode legger igjen en grønn markør og usynliggjør tegnet som er bak markøren
- ctrl backspace sletter ikke ord for ord (som i vanlig terminal, altså)
Esc by default returnerer markøren tilbake til editoren. Litt plagsomt når du holder på med vim i terminalen
babysitter og prøver å gjøre git-operasjoner for deg (kan enkelt slås av)
- spør om du vil stage
- spør om du vil npm install
~~Man kan ikke hitte "format" og så få single quotes til double quotes i JSON~~
hvordan lage tastatursnarvei for en enkelt bokstav?? (curly braces = shift alt 8)
Kan ikke duplisere linje over caret!! HVORFOR????????????
- Mulig jeg må bruke Vim her
- Eller autohotkey/autokey
~~Man MÅ markere hele comment block for å uncommente~~
Toggle comment flytter markøren ett hakk ned. Og det er ingen måte å fikse det på
By default masse overwhelming squiggly lines og symboler over alt
- squiggly lines for eslint prettier stuff
vanskelig å se om en fil er lagt til / endret / fjernet i source control (commit) panel

Neovim

Pros

kan bestemme selv hvordan lsp / code suggestion/completion skal funke
- man kan bestemme at nedover-knappene ikke navigerer i listen, men flytter cursor nedover
vim motions funker alltid, i motsetning til vim addon i VS Code

Cons

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

post

vscode

webstorm

Folder 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

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

open windows Webstorm from WSL

Fri 08. December 2023 | 2023-12-08

.bashrc-file

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

Useful snippets

npm link refuses to go away | clear npm cache

create context

npm link library

See if npm link works

If stuff doesn't update in app, try

If app cant find css

Reference

Clean node modules cache

Bootstrap scrollspy react

HTML

with data attributes ✔

with JS ❌

With JS ✔

React

With data attributes ❌

With JS 1: ✔

With JS 2 ❌

Convert all JS files in folder to TS

Quit Caddy process

fordeler/ulemper med VSCode/Webstorm/Neovim

VS Code

Cons

Webstorm

Pros

Cons:

Neovim

Pros

Cons

Folder templates for VS Code and Webstorm

VScode - Folder templates

Webstorm - File and Code Templates

Folder icons structure

Generate CSS module classnames in Vite

open windows Webstorm from WSL