Rocket

Sat 13. January 2024 | 2024-01-13

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

Rename React component

Sat 13. January 2024 | 2024-01-13


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

defaultValue=src/components/

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

cd $location

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

cd $currentName

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

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

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

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

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

        echo
        echo "rename files and folders"
        echo

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

        cd ..

        mv $currentName $newName/
    fi
fi

vscode

webstorm

vim

IDE functionalities deactivated by Vim

Sat 13. January 2024 | 2024-01-13

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

Webstorm IdeaVim

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

VSCode's Vim

Fuzzy finder
Search?
Search in files?

npm link

npm link refuses to go away | clear npm cache

Sat 06. January 2024 | 2024-01-06

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

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

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

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

cli

Clean node modules cache

Sat 06. January 2024 | 2024-01-06

Remove changes made to node_modules!

Remove ~/.npm

Delete node_modules

Reinstall

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

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

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

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

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

Useful snippets

Webstorm IdeaVim

VSCode's Vim

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