Useful snippets

Folder icons structure

📂my-component-library
+┣━ 📂lib
+┃ ┗━ 📜main.ts
┣ 📂public
┣ 📂src
…

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 Pycharm

Top right drop-down menu:

Edit configurations

python interpreter:

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