Content editable
Sun 29. October 2023 | 2023-10-29https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
In browser console:
document.body.contentEditable = true
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
In browser console:
document.body.contentEditable = true
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.
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
Lag et nytt conda environment med nyeste python versjon
sudo apt-get install taskwarrior
https://taskwarrior.org/download/
task version
yes
for å lage config file (.taskrc)
📍 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/
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={`${classes.root} d-none d-lg-block sticky-with-gutter list-group small`}
>
<nav>
{headings.map((heading) => {
const maybeActive = activeId === heading.id ? "active" : "";
return (
<li key={heading.id}>
<a
className={`list-group-item list-group-item-action ${maybeActive}`}
href={`#${heading.id}`}
>
{heading.text}
</a>
</li>
);
})}
</nav>
</div>
);
};
Vise kort commit hash
git rev-parse --short HEAD
echo "<pre>";
ini_set('display_errors', 'On');
ini_set('html_errors', 0);
Skal kanskje være ini_set('html_errors', 'On');
?
For å få vinduet til venstre, må man først hover'e over den knøttlille grønne knappen, vente et kvart sekund og så klikke.
Man kan forresten legge til egen app shortcut, så lenge man vet hva man skal gjøre (må følge en tutorial)
Men det er jo nesten ingen tastastursnarveier igjen!
https://www.paulsahner.com/posts/window-movement
Hvordan starte med ohmybash, velge theme og laste ned nødvendig font icons
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
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
evt. se på agnoster-zsh-theme
last ned Hack-fonten
"terminal.integrated.fontFamily": "Hack",
https://stackoverflow.com/questions/37895501/display-issue-with-oh-my-zsh-agnoster-theme#answer-38475948...Med kun hostname:
prompt_context() {
if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then
prompt_segment black default "$USER"
fi
}
Eller hva det skal være:
prompt_segment black default "P"
prompt_segment black default "%(!.%{%F{yellow}%}.)$USER"
skal visstnok også funke, men jeg får bare slik tekst da:
Får du permission denied
ved git add .
?
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)
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-wisource /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
<div
style={{
position: "relative",
width: "566px",
height: "425px",
}}
>
<Image
src={currCommit.image.url}
alt="Current Image"
layout={"fill"}
style={{objectFit: "cover"}}
/>
</div>
build the site, eg. _site
Drag and drop the build folder
Somehow this is 10 000% easier than deploying on github pages.
See this deployed before it expires: https://singular-peony-86185b.netlify.app/