Generate CSS module classnames in Vite

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

Open Webstorm from terminal (Windows + WSL & Mac)

WSL

.bashrc

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

Usage: Run webstorm in terminal

Mac

.zshrc

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

Usage: Run webstorm . in terminal

Docs WSL & Mac

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

List & kill processes

List processes

related

• find program that uses port: https://useful-snippets.netlify.app/posts/finne-prog-med-port/

All

sudo netstat -nlp | grep tcp

Sudo gives more info on process id & stuff

One specific port

sudo lsof -i:3000

sudo lsof -i:80
sudo lsof -i:443
sudo lsof -i:4173

Kill process

By name

killall -9 node

sudo killall -9 caddy related: https://useful-snippets.netlify.app/posts/quit-caddy-process/
sudo killall -9 http-server

By PID

eg: tcp6 0 0 :::3000 :::* LISTEN 1686/node
__________________________________^^______

killall -9 1686

By port

eg: tcp6 0 0 :::3000 :::* LISTEN 1686/node
________________^^________________________

sudo killall $(lsof -t -i:3000)

Eller med

fuser -k 3000/tcp

IDE bruker ikke prettierrc

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

Webstorm sin VSCode Gitlens compare working dir with branch

View > Appearance > show status bar
View > show status bar widgets > BRANCH
ÅPNE MENY NEDE TIL HØYRE > Velg branch du vil sammenligne med

Tech pronunciation

• Sql (S Q L / Sequel / Squeel )
• xampp (Shamp)
• Zsh (Zash)
• C# (See sharp, see hash)
• LaTeX (Lateck)
• Vite (French word for "quick", pronounced /vit/, like "veet")
• Deno ("Dino", ikke "Deno")
• JWTs (JSON Web Token, pronounced 'jot')
• Lua (pronounced LOO-ah)
• RKT (pronounced like a "rocket")

disable eslint prettier

.eslintrc

"prettier/prettier": 0,

nyttig for webstorm

Debug

In Python

raise ValueError("custom message")

• https://stackoverflow.com/questions/2052390/manually-raising-throwing-an-exception-in-python
• https://stackoverflow.com/questions/1156023/print-current-call-stack-from-a-method-in-code

In PyCharm

Top right drop-down menu:

Edit configurations

python interpreter:

<python environment=""></python>

place breakpoint (not in the template, click the left border)

--OK--

Debug 'name' (F5) (At least with VS Code keymap)

search for text appearance in a file's git history

Eg. Search for "use-query-params" in package.json's git history

git grep use-query-params $(git rev-list --all -- package.json) -- package.json

As a function in .bashrc/.zshrc-file

# search for word in a file's git history
# usage: filehistorysearch "use-query-params" package.json

filehistorysearch() {
  git grep $1 $(git rev-list --all -- $2) -- $2
}

graphql fetch using multiple IDs

fetch all related products from a list of products, and get results merged into one response!

const GET_RELATED_PRODUCTS = `
    query getRelatedProducts($url: [String!]) {
        products(filter: { url: { in: $url } }) {
            items {

            }
        }
    }
`

fetching just one product's related products

const GET_RELATED_PRODUCTS = `
    query getRelatedProducts($url: String!) {
        products(filter: { url: { eq: $url } }) {
            items {

            }
        }
    }
`

Test storybook krasj

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:

• lukk alle andre programmer
• lukk IDE-en og kjør testen i wsl-terminalen?
• prøv noe av det som blir foreslått her: https://github.com/storybookjs/storybook/issues/12348

SSH-keys

Generate an SSH key pair

https://docs.gitlab.com/user/ssh/#generate-an-ssh-key-pair

ssh-keygen -t ed25519 -C ""

Add an SSH key to your GitLab account

https://docs.gitlab.com/user/ssh/#add-an-ssh-key-to-your-gitlab-account

linux

xclip -sel clip < ~/.ssh/id_ed25519.pub

verify that you can connect

https://docs.gitlab.com/user/ssh/#verify-that-you-can-connect

instance url for ssh

ssh -T git@gitlab.com

Hvordan opprette og bruke

Github / Gitlab

Create SSH-keys & upload to Gitlab

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

1. ssh-keygen

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

2. [Enter]

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

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

ssh-rsa <Hererenlanghashcode> paalss@Asus-VivoBook

4. Gå til SSH-siden:

• Github: Add new ssh keys
• Gitlab: SSH keys SSH keys 2

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