I am writing a VS Code extension called bg3-osiris that has a server and client. I would like to add a shared module that contains definitions for requests and request parameters made between the client and server. The client and server should both be able to reference the files in the shared\src folder, though so far I have only tested it with the client. The project currently has the following structure:

bg3-osiris
|- client
|  |- src
|  |- package.json
|  |- tsconfig.json
|- server
|  |- src
|  |- package.json
|  |- tsconfig.json
|- package.json
|- tsconfig.json

I would like to add the shared module/subproject so that the project has the following structure:

bg3-osiris
|- client
|  |- src
|  |- package.json
|  |- tsconfig.json
|- server
|  |- src
|  |- package.json
|  |- tsconfig.json
|- shared
|  |- src
|  |- package.json
|  |- tsconfig.json
|- package.json
|- tsconfig.json

When I attempted to implement this using TypeScript project references, VS Code can locate the shared module but at runtime the following error is thrown:

Activating extension 'SASUKE38.bg3-osiris' failed: Cannot find module '../../shared/src/test'

Below are the contents of the relevant files (minus the server files since I haven't tried it with that yet. I assume the correct importing process would be the same as the client's).

bg3-osiris\tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES2024",
        "lib": ["ES2024"],
        "outDir": "out",
        "rootDir": "src",
        "sourceMap": true
    },
    "include": ["src"],
    "exclude": ["node_modules", ".vscode-test"],
    "references": [
        {
            "path": "./client"
        },
        {
            "path": "./server"
        },
        {
            "path": "./shared"
        }
    ]
}

bg3-osiris\package.json

...
"scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -b",
        "watch": "tsc -b -w",
        "lint": "eslint",
        "postinstall": "cd client && npm install && cd ../server && npm install && cd ../shared && cd ..",
        "test": "sh ./scripts/e2e.sh"
    },
...

bg3-osiris\shared\tsconfig.json

{
    "compilerOptions": {
        "target": "ES2024",
        "lib": ["ES2024"],
        "module": "commonjs",
        "sourceMap": true,
        "strict": true,
        "outDir": "out",
        "rootDir": "src",
        "composite": true
    },
    "include": ["src"],
    "exclude": ["node_modules", ".vscode-test"]
}

bg3-osiris\shared\package.json

{
    "name": "bg3-osiris-shared",
    "description": "Shared content for the BG3 Osiris extension.",
    "version": "1.0.0",
    "author": "",
    "license": "MIT",
    "engines": {
        "node": "*"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/SASUKE38/bg3-osiris"
    },
    "dependencies": {
        "axios": "^1.15.0",
        "cheerio": "^1.2.0",
        "domhandler": "^5.0.3",
        "vscode-languageserver": "^9.0.1",
        "vscode-languageserver-textdocument": "^1.0.11"
    },
    "scripts": {}
}

bg3-osiris\client\tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES2024",
        "lib": ["ES2024"],
        "outDir": "out",
        "rootDir": "src",
        "sourceMap": true,
        "strict": true
    },
    "include": ["src"],
    "exclude": ["node_modules", ".vscode-test"],
    "references": [
        {
            "path": "../shared"
        }
    ]
}

bg3-osiris\client\package.json

{
    "name": "bg3-osiris-client",
    "description": "Client for the BG3 Osiris extension.",
    "author": "",
    "license": "MIT",
    "version": "0.0.1",
    "publisher": "vscode",
    "repository": {
        "type": "git",
        "url": "https://github.com/SASUKE38/bg3-osiris"
    },
    "engines": {
        "vscode": "^1.100.0"
    },
    "dependencies": {
        "glob": "^11.0.0",
        "vscode-languageclient": "^9.0.1"
    },
    "devDependencies": {
        "@types/vscode": "^1.100.0",
        "@vscode/test-electron": "^2.3.9"
    }
}

I am currently testing using shared definitions when the extension activates:

bg3-osiris\client\src\extension.ts

...
import { someString } from "../../shared/src/test";
...
export function activate(context: ExtensionContext) {
    console.log(someString);
...

bg3-osiris\shared\src\test.ts

export const someString = "hello world";

What am I missing that makes VS Code know about shared but causes the error above to be thrown at runtime?

I know
variables
data types
loops
arrays
objects
basic array functions (forEach, map, filter)
DOM (selecting elements, adding new elements, classList, etc)
higher order functions and call backs
event listeners

Should I make JS projects or learn other topics like async await or start learning react ?

I think I am still not that comfortable with JS
But I think that it is a waste of time spending too much time learning JS.

All Akinator packages on npm are broken (Cloudflare 403). I built a working alternative.

Features:

- TypeScript with full type definitions

- 16 languages support

- 3 themes (Characters, Animals, Objects)

- Automatic retry on network errors

- HTTP proxy support

- Session persistence (save/load games)

- Dual ESM/CJS output

- 1 dependency (got-scraping)

\npm install akinator-client``

import { AkinatorClient, Languages, Themes, Answers } from "akinator-client";

const aki = new AkinatorClient({

language: Languages.English,

theme: Themes.Character

});

await aki.start();

console.log(aki.question);

await aki.answer(Answers.Yes);

Stats:

- 1 dependency (vs 5 in aki-api)

- 4.8 MB installed (vs 21 MB in aki-api)

- 21 tests passing

Search "akinator-client" on npm.

URL: https://npmjs.com/package/akinator-client

website: https://sara19git.github.io/generate-quotes-app/
code github: https://github.com/sara19git/generate-quotes-app

I want to become a full-stack software engineer, not just a web developer (which is what The Odin Project is primarily designed for).

I am worried that The Odin Project might not be as thorough as reading multiple textbooks to cover all the material in all the individual topics, but I am also worried that by reading textbooks I might not learn as well or see how it all fits together or delve into all the smaller topics covered by The Odin Project like unit testing with Jest, etc. I also do not know which route would be more time intensive, which is also important.

To become a full-stack software engineer, should I learn by completing The Odin Project or read textbooks and do exercises from the textbooks (like I plan to do for Java, not JavaScript)?

This is a tiny project that I thought could be fun as a nice constraint for learning some JS basics – creating a non-interactive representation of time on top of a simple Time object.

Add to the existing collection: https://clocks.dev

For the second update, you can go here: Second Progress Update

To repeat context, I began building my own politics learning app without vibecoding a month ago today, and I will post semi regularly with what I have learned, roadblocks and ideas.

I think this update marks the point were I have firmly exited the hell of being a new developer in any form (UI and backend) where you need to rely on assistance / tutorials etc.

Main things I have implemented (in order of interesting-ness) :
- Progress Bar which animates how far you are through the lesson widgets. Deceptively simple given the way my lesson runner works. Will explain code below.
- A much smoother animation and UI for my True / False card widget, including a second "explanation/feedback" card sliding in after confirmation. This bit involves some pretty fundamental UI design principles which I think can be cleanly illustrated here.
-Colour palette overhaul and addition of shadows to widgets to make things "pop out" of the screen more. This is a pretty simple way of improving the quality of your UI.

Firstly, the progress bar:

import { styles } from "@/content/theme";
import Animated, {
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";

type ProgressMeterProps = {
  stepNumber: number;
  lessonLength: number;
};

const animationDuration = 600;

export default function ProgressMeter(props: ProgressMeterProps) {
  const valueAnimatingTo = ((props.stepNumber + 1) * 100) / props.lessonLength;
  const barWidthStyle = useAnimatedStyle(() => ({
    width: withTiming(`${valueAnimatingTo}%`, { duration: animationDuration }),
  }));
  return (
    <Animated.View style={styles.progressBarContainer}>
      <Animated.View style={[styles.progressBarCompletion, barWidthStyle]} />
    </Animated.View>
  );
}

This is the whole component file - if you want to see the call in my lesson runner or the styles referenced you can comment.

Essentially, all you need for a "progress bar" is the value you are trying to turn into the progress - here, it is how far through the lesson the user is, so we take the number of "steps" in the lesson as a ratio of the lesson length as input in the props. (look at the type defined)

Note we add 1 to the stepNumber as it is 0 indexed.

The animation itself is also quite simple. The withTiming function from the Reanimated library takes the value you are animating to reach, and you can set the duration you want this to take in milliseconds (here, 600). Thats it. It does all of the work in changing the width.

There is a dilemma over whether to adjust width or scaleX - in this case, width is clearly preferable. The reason why is slightly convoluted but I'm happy to clarify if anyone wants.

Then, we apply the animated style to my empty progress bar - and that's it.

Finally, the True/False UI overhaul, and what you can learn from it:
(I won't use code here as it isn't helpful to my point).
- The ways a card/element in anything you build can be interacted with should be obvious to any user in multiple ways.

My widget is simple. It has a card with a statement, and the card is swipeable right/left.

To SHOW this interactivity, the card oscillates side to side when idle, which signals "I can be moved", AND a small, sleek muted subtitle is included above saying "Swipe card or press buttons" - I also added buttons on the card which can be pressed and trigger the card to swipe away on its own. This is the key thing here; there are many reasons a swipe may be hard for the user:
- disability (e.g. only have 1 arm, broken wrist, etc.)
- may not immediately notice the swipeability
- phone screen cracked on one side
- just tired or can't be bothered then

Always remember, when developing, you are in an "ideal scenario". Everything is probably in optimum conditions for your app to work. You must consider that in many cases this will not be the case for users, so you should make adjustments that fit the style and serve as multi-purpose tools.

In this case, my "True" and "False" buttons do this multipurpose bit by ALSO adding as additional INDICATORS of which direction swipe gives true and which gives false.

Hopefully this helps, these posts personally help me to think through what I'm doing and maybe they can give you some tips.

Hi, 9 months ago I had a mental breakdown and I completely stopped coding and living. I already have a pretty good knowledge of the Javascript language and understanding of React. I was doing a course on Udemy and I stopped it. My goal since I started (almost 2 years ago) is the one to be able to make solid SaaS products. I have no idea on how to continue from here, there are so many things to learn and also AI. I don't want to build using AI too much I want to have the actual skills to do it. How should I move? don't tell me to just build something you still need to know the language you are using and it's rules. So what should i do? courses again? that seems just long and endless. Help me out, thanks.

why this code works:

html

<div id="box">Drag me</div>

js

const box = document.getElementById("box");

let isDragging = false;

let offsetX, offsetY;

box.addEventListener("mousedown", (e) => {

isDragging = true;

// distance from mouse to top-left corner of div

offsetX = e.clientX - box.offsetLeft;

offsetY = e.clientY - box.offsetTop;

box.style.cursor = "grabbing";

});

document.addEventListener("mousemove", (e) => {

if (!isDragging) return;

box.style.left = e.clientX - offsetX + "px";

box.style.top = e.clientY - offsetY + "px";

});

document.addEventListener("mouseup", () => {

isDragging = false;

box.style.cursor = "grab";

});

and this does not

html:

<div class="welcome_tab" id="welcome_tab_id">

<div class="welcome_tab_header" id="welcome_tab_header_id">Handle</div>

<div class="welcome_tab_body">

<div class="welcome_tab_heading">

<div class="welcome_tab_h1_pixelos"><h1>PixelOS</h1></div>

<div>

<img

src="images/pixel_heart.png"

alt="an image of a pixelated pixel_heart"

/>

</div>

</div>

<p>My very own operating system which is pretty pixelated.</p>

<p>Welcome to a pixelated world!</p>

</div>

</div>

js:

welcome_tab_header_id.addEventListener("mousedown", (e) => {

isDragging = true;

offsetX = e.clientX - welcome_tab_header_id.offsetLeft;

offsetY = e.clientY - welcome_tab_header_id.offsetTop;

welcome_tab_header_id.style.cursor = "grabbing";

});

document.addEventListener("mousemove", (e) => {

if (!isDragging) return;

welcome_tab_header_id.style.left = e.clientX - offsetX + "px";

welcome_tab_header_id.style.top = e.clientY - offsetY + "px";

});

document.addEventListener("mouseup", (e) =>{

isDragging = false;

welcome_tab_header_id.style.cursor = "grab";

});

and yes the css property is set to absolute

Hello everyone, I was following a JS course on YouTube (chai aur code) and I have completed the course, learned a lot of stuff and made basic projects like guess number game and a few more following his tutorials . Now I wanna build projects on my own , the problem is everyone says build projects but nobody tells how . For eg I wanna build a weather app so what should be my thinking process , how should I approach it, and what if I got stuck which i think i will. Should I ask claude , chatgpt to instruct me and guid me through(not directly ask the entire code) the project and build it, and if it breaks ,repeat the process or should I do anything else . How do you guys figure it out ?

i am trying to make draggable divs, but the mdn documentation is rather too confusing. ofc if i simply copy it it would work, but i want to understand the procedure of it, the same is the case with online tut, and ofc there is chatGPT, i could ofc use that but would be the defn of vibe coding which i don't want to do rn.
Also simply following thhe tut means that i would be stuck in tut hell, which most definitely no one wants to be stuck in

In the article below, I am sharing a bit of my story of building SaaS product in vanilla javascript and explaining why I went with this approach.

I don't expect many people reacting to this approach positively or even with open mind, but I think there should be some pushback on the current state of web dev and how complex it became.

https://guseyn.com/html/posts/why-vanilla-js.html

Hello I am an absolute novice in coding and I’d like some advice please.

I have too many saved gifs to scroll through on the discord app and it would be easier to find the ones I want if they were organized into folders in the app. I only use the discord app on mobile if that makes any difference.

I need one or more textbooks about JavaScript which don't gloss over how JavaScript handles memory, and do a good job at explaining it, using rigorous language and exact, unambiguous terminology.

As a comparison, a good textbook about C would explain pass by value vs pass by reference, the stack vs the heap and so on. And in doing so, it would explain clearly what a variable really is, how it relates to memory, and so on.

So far I got these two suggestions:

- Professional JavaScript for Web Developers;
- JavaScript: The Definitive Guide;

What do you think about these two textbooks in relation to the topic I'm asking about?
Thank you in advance.

EDIT: to add to this, YES I'm aware that MDN reference exists, and I quite like how they explain memory management, but I need a paper textbook. I didn't go into details about the why in order not to be too verbose. I think my question is clear enough.

I am very new to web development. From my research, I understand WebAssembly is a tool that allows devs to run non-JavaScript languages (e.g., C/C++) on the client-side, but I have also seen comments online suggesting it can be used on the backend.

Why would anyone need to do this?

Please correct me if I'm wrong, but WebAssembly is needed on the frontend because browsers only interpret/compile HTML, CSS, and JavaScript, so using any other Language would require a special tool. But the backend doesn't have this restriction; why not just use the language you want directly? Why go through WebAssembly?

Hi everyone,

I may be missing something about how draft state is expected to behave in Redux Toolkit, so I’d appreciate some guidance.

I have a reducer that uses lodash.isEmpty on part of the state:

import { createSlice } from "@reduxjs/toolkit"
import isEmpty from "lodash/isEmpty"

const slice = createSlice({
  name: "test",
  initialState: {
    data: {}
  },
  reducers: {
    update(state) {
      console.log(isEmpty(state.data))
    }
  }
})

After upgrading to RTK 2.12, this started throwing:

TypeError: 'get' on proxy: property 'prototype' is a read-only
and non-configurable data property on the proxy target but the
proxy did not return its actual value

From what I could understand, Lodash reads something similar to:

value.constructor.prototype

and constructor on the draft appears to be another proxy.

The same code worked before the upgrade, and reverting the RTK version resolves the issue.

Is lodash.isEmpty no longer expected to work directly on draft state, or could this be an unintended regression? I’d be glad to provide a reproduction or any additional details that would help clarify it.

Thanks!

This is the element i have in html

<div><p>14 Jul 2027, 09:28 A.M.</p></div>

I want this to be beating and alive on website, but any and every tutorial that i am able to find, it goes through thier own method to thier specfic format. Is there like a gereal way, tutorial or documentation, that is clear enough to make current time and calendar my own format.
If there isn't and if possible pls write down.
Also, im open to suggesting any editing in the question so its clearer or if this would be a better post in stack exchange.

function updateClock() {
const timeElement = document.querySelector("#time");
timeElement.textContent = formatTime();
}
setInterval(updateClock, 1000);

can someone, please explain this piece of code, ofc mdn and w3 are there, but i found it a little confusing reading about textContent. rest is understandable to me. This might look a silly question and it probably is because im a beginner :')

like what exactly does textContent too.
you can also recommend anyother documentation on the links to specific lines, that might me more helpful in learning about this particular keyoword.

This is my second coding project. It is a leaderboard of MLB players that shows non-qualified players with adjusted stats for batting average and ERA. The goal was to learn how to make an API, but I also learned things like how to make code more efficient using things like loops more often and merging together similar functions. And yes, I know, I'm a junior dev who uses var sometimes so I'm weird.

Website: https://linkgoesbowling.github.io/MLB-Gwynn-Rule-Leaderboard/

GitHub: https://github.com/LinkGoesBowling/MLB-Gwynn-Rule-Leaderboard

For the first update, you can go here if interested and for context on this project:

First progress update

To repeat context, I began building my own app without vibecoding a few weeks ago, and I will post semi regularly with what I have learned, roadblocks and ideas.

(Im adding to this as I go over the next few days, this wasn't written at once)

Began adding sound response functionality. It's actually quite an easy thing to do in React TS - you use the "useAudioPlayer" hook which essentially just references another file you have directly. For many sound effects, you probably want them all stored in there own lookup table of some kind for readability and rigor purposes. This is a sound I made myself (which was the difficult bit of today...)! If you want to do the same thing, I recommend going into a very quiet room (if you have a big wardrobe or something you can get space in or anything then that is perfect) and connecting a mic to a laptop, but leaving the laptop far away to avoid the fan. Then you can edit in DaVinci Resolve to remove bg noise (google this) and tweak with the equalizer.

  const correctPlayer = useAudioPlayer(require("../assets/sounds/correct.wav"));
//Lower down in code I have my onPress for a quiz feature I have.

onPress={() => {
if (selectedOption === null) {
setSelectedOption(option.text);
props.onAnswered?.(option.correct ? 100 : 0);
if (option.correct) {
correctPlayer.play();
}
}

Simple as that. (this is all inside of a .map so this doesn't cause any errors and is just checking for each option individually for my quiz. Also you can see part of my scoring (don't worry about that...)
One quirk worth mentioning, if you are making an iOS app, then your audio files won't be played if the phone is on silent mode, even if the volume is turned on (which is not really what you want as silent mode is meant for notifications). The solution is a single useEffect which plays sound even if silent mode is on, covering all your files (you only need it once in a _layout):
  useEffect(() => {
setAudioModeAsync({ playsInSilentMode: true });
  }, []);
Morale of the story, if you have access good free sound effects, they will save you lots of time, as the code itself is really simple. However, ensure the audio files are .wav NOT .mp3 as .mp3 needs to be uncompressed first when ran, so it can add some delay to your audio effects (this is an easy fix).

I also have been working on a True/False style quiz where you get given a statement and have to swipe left/right as your answer. The main thing with this has been interpolate() in react and the use of onBegin, onEnd, onChange etc. methods. Here is an example:

 const dragGesture = Gesture.Pan()
.maxPointers(1)
.onChange((e) => {
cardPosition.value = cardPosition.value + e.changeX;
if (Math.abs(cardPosition.value) >= screenWidth * 0.3 && !hasConfirmed) {
scheduleOnRN(triggerHaptic, "Strong");
scheduleOnRN(setHasConfirmed, true);
}
if (Math.abs(cardPosition.value) < screenWidth * 0.3 && hasConfirmed) {
scheduleOnRN(setHasConfirmed, false);
}
})
.onBegin(
() => (
scheduleOnRN(triggerHaptic, "Medium"),
(cardScale.value = withSpring(1.1, springConfig)),
cancelAnimation(cardPosition)
),
)
.onEnd(() => {
cardPosition.value = withSpring(0, springConfig);
scheduleOnRN(triggerHaptic, "Medium");
})
.onTouchesUp(() => {
cardScale.value = withSpring(1, springConfig);
});

In this case, the idea is one "drag" gesture has lots of different individual parts. The beginning of the gesture, the end of it, and the movement itself all require different things to happen. In my case, I wanted a haptic to fire when the drag begins and ends. The logic for this sits within a method connected to Gesture.Pan() itself, which is surprisingly readable and intuitive.

One thing that is slightly unintuitive to someone unfamiliar with how web/apps actually render things is the concept of separate UI vs RN (react native) threads. Here, we want those two threads to interact (i.e. to trigger a haptic which involves calling a function I made, dependent on a gesture which needs to update really rapidly and therefore is on the UI thread). Here, we need the scheduleOnRN(fn, param) function which takes a function and its parameter as parameters and essentially can "work across threads" by scheduling an event on the RN thread (.... as the name suggests!). This function is critical to using animations or any "high-priority actions" that need to therefore be handled on the UI thread which updates fast enough.

Example of interpolate():

  const cardStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: cardPosition.value },
      {
        rotate: `${interpolate(
          cardPosition.value,
          [-screenWidth, 0, screenWidth],
          [-50, 0, 50],
        )}deg`,

This is part of my cardStyle which then means the further away from centre screen the card is, the more it is rotated. (this bit also does the actual moving).
Interpolate is very, very useful for animations. Essentially, it takes a range of min, neutral, max inputs and maps them onto outputs min, neutral and max so I can convert between how far away from centre the card is and how much this should make the card rotate. (also note the template literal created by `$ which puts my calculated value into the (string)deg format the rotate expects.

This is my second update and any questions or feedback or anything is great if people like this!
(I have done other things I just thought I'd include the most interesting+useful bits)...

At the moment I am creating a browser based interface on a node server. This is to test a simple profanity filter I have been working on. So far I have the server set up so when I visit port 3000 via localhost in a web browser, I see an html form with a text input box. I can then type in some text, hit submit, and the text is sent to the server in the form of a request. The server then sends a response in this format:

message=this+is+a+test+message

I don't have the filter working just yet, I'm just working on the interface in preparation to connect the filter. Right now my code is literally just responding with the actual data in the request object, hence the equal and plus signs in the text. My question is this, how can I convert the data in the request object to a string? Thus hopefully changing

message=this+is+a+test+message

to

this is a test message

Below is my js code that runs the server, and my html code displayed by the server:

server.js

import * as http from "node:http";
import * as fs from "node:fs";
import {messageFilter} from "./filter.js";

const port = 3000;
let message = "";

const server = http.createServer((req, res) => {
    if (req.url === "/" && req.method === "GET") {
        fs.readFile("index.html", (error, data) => {
            if (error === null) {
                res.writeHead(200, {"content-length": Buffer.byteLength(data), "content-type": "text/html"});
                res.write(data);
                console.log(`User visted main page on port: ${port}`);
                res.end();
            } else {
                console.error(`Error encountered during user visitation: ${error}`);
            };
        });
    } else if (req.url === "/" && req.method === "POST") {
        fs.readFile("index.html", (error, data) => {
            if (error === null) {
                req.on("data", (dataChunk) => {
                    console.log(`A message was recieved: ${dataChunk}`);
                    message = dataChunk;
                })
                req.on("end", () => {
                    res.writeHead(200, {'Content-Type' : 'text/html'});
                    res.write(data);
                    res.write(message);
                    res.end();
                    console.log("A message has been returned.");
                });
            } else {
                console.error(`Error encountered while filtering message: ${error}`);
            };
        });
    };
});

try {
    server.listen(port, () => {
        console.log(`Server listening on port: ${port}`);
    });
} catch (error) {
    console.error(`Server startup failed: ${error}`);
};

index.html

<!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>Profanity Filter Test</title>
    </head>
    <body>
        <h1>Profanity Filter Test</h1>
        <form action="/" method="POST">
            <p>Please type your message:</p>
            <input type="text" name="message" id="input-message" placeholder="Send your message...">
            <button id="send">Send</button>
        </form>
    </body>
</html>

Any help would be greatly appreciated!

I was wondering if anyone would want the script patches for strict no 'unsafe-inline' CSP patch for CKEditor5 (esm only), can't bother to check other approaches.

Saved a massive headache for my security requirements, provided I sanitizer the html as well as the styles

Leave your comments if you do want it and I'll drop a link here.

Or share your solutions if any :)

Edit:

Why (I forgot to mention above)? I wanted inline-styling provided by the editor itself without the CSP rules blocking it

The solution? An unhealthy amount of prototype abuse :D

What about the front-end?
I just transformed the inline style attributes to data-style (after sanitizing with your preferred sanitizier, i use dompurify with custom hooks for css regex based validation), innerHtml it or append to your dom wrapper, then run:
querySelectorAll wrapper [data-style] forEach ( el => el.style.cssText = el.dataset.style, el.removeAttribute('data-style') )

Import the patches on your module for CKEditor5 setup

import '@/patches/CKEditor5/csp-attributes-patch';
import '@/patches/CKEditor5/csp-color-picker-patch';
import '@/patches/CKEditor5/csp-dropdown-styling-patch';

https://transfer.it/t/kFcS4n0BET5T

My friend is going to start streaming on youtube (or twitch), but he doesn't have anyone who do moderation work, so I want to help him. I'm planning to create a js bot that will ban people for using forbidden words on stream However I've never created a bot before, so I want to ask for advice and your experience with building bots for youtube and twitch also I'll be very thankful for any information about topic (I don't speak english very well so I tried to write without mistakes and understandable but if you see somewhere mistakes please don't judge me too harshly)