HTML

with data attributes :heavy_check_mark:

<!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 :x:

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

<!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 :x:

not working at all

With JS 1: :heavy_check_mark:

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

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

Content editable

2023-10-22

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

In browser console:

document.body.contentEditable = true

Convert React Prop Types to TS type annotations

2023-10-22

For filer i mappe hvis navn er "pages":

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

https://github.com/mskelton/ratchet

funker ikke på destructured props, da

1

:interrobang: :page_facing_up: :no_entry: DISPATCHER IS NULL - på hybel tenant app med og npm link common - ERROR UPDATE -> HOW TO FIX

First off: Toggle av og på det kommenterte nedenfor. Restart server mellom hver gang

// const path = require('path');
/** @type {import('next').NextConfig} /
const nextConfig = {
// webpack: {
//   alias: {
//     react: path.resolve('./node_modules/react'),
//   },
// },
async rewrites() {
return [
// Rewrite everything else to use pages/index
{
source: "/:path",
destination: "/",
},
];
},
};
module.exports = nextConfig;

Second: prøv

# i app
rm package-lock.json
rm -rf node_modules
npm i
# i library prosjektet
npm link ../../app/node_modules/react # <--- nødvendig
npm run build # <--- nødvendig
# i app
npm link @library/package
^C
npm run dev

2

Kan ikke brue react hooks i react component library? Får du dispatcher is null? Eller noe a la cannot use usestate of null?

Da er det sikkert noe multiple react-versjoner greier som er trøbbelet. Du kan fikse dette ved å legge til react og react-dom som peerDependencies i library's package.json

"peerDependencies": {
"bootstrap": ">=5.2.3",
"react": "$react",
    "react-dom": "$react"
},

Eller fjern package-lock.json, node_modules og reinstaller alle packages

Eleventy stuff

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

eleventy.js

Return specific post

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

Return first 5 posts

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

Use functions as children

2023-10-22

Hvordan kan man lage et komponent som exposer en dataverdi som parent kan få tak i?

I.e. hvordan kan ChildComponent her gjøre dette lov?

          <ChildComponent>
            {({idFromChild}) => {
              return (
                <Button
                  href={`link/to/${idFromChild}`}
                >
					click here
                </Button>
              );
            }}
          </ChildComponent>

Slik:

export const ChildComponent = ({id}) => {
  return (
    <div>
      {children({
        id: id,
      })}
    </div>
  );
};

Delete all branches listed by `git branch -a`

2023-10-22

Færre antall branches i code completion suggestion når du skriver git checkout feat-[Tab].

Slett alle branches som ikke finnes på remote:

git fetch -p (prune)

Install Neovim

2023-10-22

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

HTML/JSX forskjell

2023-10-22

class -> className
for -> htmlFor
how to set default value for <select>
onchange -> onBlur
<br>, <hr> -> <br/>, <hr/> (all elements must have closing tag / be self closing)

Usage with long nested keys

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

fordeler/ulemper med VSCode/Webstorm/Neovim

2023-10-22

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
- TS bruker tid på å slå inn
- unused variables (eslint?) bruker også tid...
- code suggestions/completions bruker også litt tid...
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)
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

Cons:

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

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

Ivareta git historikk ved file renaming

2023-10-22

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

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

git mv mycoolclass.cs myCoolClass.cs

eller

git mv layout/CardList common/List

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

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

Kommentarer:

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

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

Convert all JS files in folder to TS

2023-10-22

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

Links

https://codesandbox.io/dashboard/recent

VS Code snippet

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

Syntax highlighting i Nano commit diff

2023-10-22

nano ~/.nanorc

sett inn

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

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

farger i git commit vinduet!

preserve aspect ratio for Nextjs images

2023-10-22

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

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

Hvis ting i library ikke oppdatere seg på appen gjennom npm run build så kan du prøve å restarte app serveren. npm run dev altså EDIT 16.08.23 Dette er tredje gangen dette skjer og jeg er fortsatt helt overrasket ov uvitende om hva jeg skal gjøre når jeg ser det EDIT 27.09.2023 EDIT EDIT EIDT EDIT EDIT EDIT EDIT kan hende du må npm unlinke hele library-et også legge det til igjen først

Oh my bash adding missing code completions

2023-10-22

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

Ohmybash

2023-10-22

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

Installasjon

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

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

Velge theme

nano ~/.bashrc

OSH_THEME="agnoster"

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

Reload:

. ~/.bashrc

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

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

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

skaffe nødvendige font icons

evt. se på agnoster-zsh-theme

last ned Hack-fonten

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

Sette WSL til å bruke riktig font

Åpne WSL
høyreklikk toppmeny, velg 'properties'
velg "Hack" fonten

ubuntu-omb

Sette VS Code til å bruke riktig font

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

vscode-omb

Erstatte user @ hostname

...Med kun hostname:

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

Eller hva det skal være:

prompt_segment black default "P"

image (9)

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

image (8)

Git bash merknader

Får du permission denied ved git add .?

Kjør VS Code som administrator

Får du

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

ved git commit (-v)

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

open explorer from terminal

2023-10-22

explorer.exe .

PHP White screen

2023-10-22

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

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

Quit Caddy process

2023-10-22

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

Rename React component

2023-10-22

# 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/stories/default/ read -e -p "Where is component located? (default: $defaultValue): " location location=${location:-$defaultValue} read -p "Enter component name you want to rename: " currentName componentPath=$location/$currentName index=$componentPath/index.ts component=$componentPath/$currentName.tsx story=$componentPath/$currentName.stories.tsx stylesheet=$componentPath/$currentName.module.css if [[ $currentName != "" ]]; then filesInThatFolder=$(cd $componentPath && ls) echo echo "This will affect:" echo "---- folder -----" echo $componentPath echo echo "---- files -----" echo $filesInThatFolder echo read -p "Enter new name: " newName if [[ $newName != "" ]]; then # update code sed -i "s/$currentName/$newName/g" $index sed -i "s/$currentName/$newName/g" $component sed -i "s/$currentName/$newName/g" $story sed -i "s/$currentName/$newName/g" $stylesheet

# rename files and folder mv $component $componentPath/$newName.tsx mv $story $componentPath/$newName.stories.tsx mv $stylesheet $componentPath/$newName.module.css mv $componentPath $location/$newName/ fi fi

show commit hash

2023-10-22

Vise kort commit hash

git rev-parse --short HEAD

SSH-keys

2023-10-22

Hvordan opprette og bruke

Github

Fint for å slippe å skrive inn brukernavn og passord hver eneste gang

ssh-keygen

Generating public/private rsa key pair.
Enter file in which to save the key (/home/paalss/.ssh/id_rsa):

[Enter]

...
Your public key has been saved in /home/paalss/.ssh/id_rsa.pub
...

cat /home/paalss/.ssh/id_rsa.pub

ssh-rsa <Hererenlanghashcode> paalss@Asus-VivoBook

Gå til Add new ssh keys
Lim inn ssh-rsa <Hererenlanghashcode>

Resten er rett frem

https://docs.oracle.com/en/cloud/cloud-at-customer/occ-get-started/generate-ssh-key-pair.html

Blir du spurt om username og password (PAT) ved `git push`?

Da bruker du sannsynligvis HTTPS:

Slik bytter du til SSH:

git remote set-url origin git@github.com:paalss/<repo>.git

Bitbucket

https://peter-whyte.com/setup-ssh-keys-in-wsl/

eval $(ssh-agent -s) && ssh-add ../pw_bitbucket

Personal Access Token for http https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token Kan brukes til authentication i stedet for passord

https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

eller:

ssh-add ~/.ssh/github_pw

table of contents with IntersectionOvserver (not perfect)

2023-10-22

useScrollSpy.ts

import { useEffect, useRef, useState } from "react";
export function useScrollSpy(ids: string[]) {
const [activeId, setActiveId] = useState();
const observer = useRef();
useEffect(() => {
const elements = ids.map((id) => document.getElementById(id));
observer.current?.disconnect();
elements.forEach((heading) => {
if (heading) {
observer.current?.observe(heading);
}
});
observer.current = new IntersectionObserver(
(entries) => {
console.group("executing intersectionobserver callback");
entries.forEach((entry) => {
if (entry?.isIntersecting) {
console.log(entry.target.id, "is intersecting");
setActiveId(entry.target.id);
}
});
console.groupEnd();
},
{ rootMargin: "0% 0% -80% 0%", threshold: 0.1 }
);
return () => observer.current?.disconnect();
}, [ids]);
return activeId;
}

TableOfContents.tsx

import React, { useEffect, useState } from "react";
import classes from "./TableOfContents.module.css";
import { useScrollSpy } from "@/hooks/useScrollSpy";
interface TableOfContentsProps {
isLoading: boolean;
}
export type heading = { text: string | null; id: string };
export const TableOfContents = ({ isLoading }: TableOfContentsProps) => {
const [headings, setHeadings] = useState<heading[]>([]);
const activeId = useScrollSpy(headings.map(({ id }) => id));
useEffect(() => {
if (!isLoading) {
const elements: heading[] = Array.from(
document.querySelectorAll("h3")
).map((element) => ({ text: element.textContent, id: element.id }));
setHeadings(elements);
}
}, [isLoading]);
return (
<div
className={</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classes<span class="token punctuation">.</span>root<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> d-none d-lg-block sticky-with-gutter list-group small</span><span class="token template-punctuation string">}
>
<nav>
{headings.map((heading) => {
const maybeActive = activeId === heading.id ? "active" : "";
return (
<li key={heading.id}>
<a
className={</span><span class="token string">list-group-item list-group-item-action </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>maybeActive<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">}
href={</span><span class="token string">#</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>heading<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">}
>
{heading.text}
</a>
</li>
);
})}
</nav>
</div>
);
};

Task warrior (CLI todo app)

2023-10-22

Installer på Ubuntu (WSL)

sudo apt-get install taskwarrior

https://taskwarrior.org/download/

Oppstart

task version

yes for å lage config file (.taskrc)

Bruk

📍 Legg til task

task add bla bla bla bla

📌 - med priority

task priority:H add bla bla bla bla

📅📃 List opp alle tasks

task next

next kan sløyfes

✔ Gjennomfør task nr X

task X done

❌ 🗑 Slett

task X delete

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

💬🗨 Se og rediger alle detalljer

task X edit

🗃 Opprett i prosjekter

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

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

Interessant

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

Test storybook krasj

2023-10-22

krasjer npm run test-storybook ? Får du error-meldinger som folk på internettet sier betyr at du har gått tom for RAM?

Prøv:

kjør _pre-merge-request.sh i wsl-terminalen?
prøv noe av det som blir foreslått her: https://github.com/storybookjs/storybook/issues/12348

update Python Conda environment

2023-10-22

Lag et nytt conda environment med nyeste python versjon

Webstorm sin VSCode Gitlens compare working dir with branch

2023-10-22

View > show status line
view > show status line widgets > BRANCH
ÅPNE MENY NEDE TIL HØYRE

why not multiple BrowserRouters

2023-10-22

why not use multiple browserrouters

React Router error - 
    Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
    at Router (/vendors-node_modules_restart_hooks_esm_useForceUpdate_js-node_modules_restart_hooks_esm_usePr-cdac26.iframe.bundle.js:6709:103)
    at renderWithHooks (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:38091:27)
    at mountIndeterminateComponent (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:41855:13)
at beginWork (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:43368:16)
    at beginWork$1 (/vendors-node_modules_storybook

Drew Reese - . There becomes an issue when you start nesting routers within routers, or rather it's the routing contexts within other routing contexts. The contexts of "outer" routers are unaware of what nested "inner" routers have handled.

https://stackoverflow.com/questions/67175039/is-it-possible-to-have-multiple-browserrouter-in-react-app

scriptedalchemy - Dont think you want have multiple browser routers. Youd want to use switch or something else. Only hosts should implement browser router, and only once. Usually I have a standalone wrapper that has like a mini shell for each app. Then I federate the inner component. So browser router stays on the shell layer

nebarf - Single source of truth: having a single "component" updating the browser history brings a lot of flexibility (e.g. it could really help in case you're gradually migrating a legacy system following the strangler pattern).

https://github.com/module-federation/module-federation-examples/issues/1986

Prosjekt som bruker WSL? Hvordan bytte til Git Bash

2023-10-22

Hvordan bytte fra wsl til git bash i et prosjekt

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

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

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

WSL

npm cache verify
delete node_modules
npm cache clean --force

Git bash

npm rebuild
lukk VS Code og åpne som Admin
npm i
npm start

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

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

HTML

with data attributes :heavy_check_mark:

with JS :x:

With JS :heavy_check_mark:

React

With data attributes :x:

With JS 1: :heavy_check_mark:

With JS 2: :x:

1

:interrobang: :page_facing_up: :no_entry: DISPATCHER IS NULL - på hybel tenant app med og npm link common - ERROR UPDATE -> HOW TO FIX

2

Eleventy stuff

eleventy.js

Usage with long nested keys

VS Code cons

Webstorm

Pros

Cons:

Neovim

Pros

Cons

Links

VS Code snippet

Installasjon

Velge theme

skaffe nødvendige font icons

Sette WSL til å bruke riktig font

Sette VS Code til å bruke riktig font

Erstatte user @ hostname

Git bash merknader

Github

Blir du spurt om username og password (PAT) ved git push?

Bitbucket

Installer på Ubuntu (WSL)

Oppstart

Bruk

Interessant

Blir du spurt om username og password (PAT) ved `git push`?