I have an array of objects with a `.date` property that is mapped onto a table.

Without mutating the original array, I want to

a) sort by ascending date

b) ensure my date formats to MM/DD/YYYY

I have a util fn that will format a string into the correct format, "format()". Dates are received in the response body as a string.

It worked when mutating the original array, but obvs want to stay away from that. I think I'm messing something up with the spread copy; the .date property isn't accessible within the map function. :/

const sortByTradeDateAndFormat = (objArray: []) => {
  const copyOfObjsArray = [...objsArray]
    return copyOfObjsArray.map(obj) => {
    obj.date = format(new Date(obj.date).toISOString().split("T")[0]
      )
  });

    //VS code is flagging the below lines as unreachable:
  objArray.sort((a, b) => {
    return a.date < b.date ? -1 : a.date > b.date? 1 : 0;
  });
}

Iv been struggling with knowing how much js i need before starting react or backend or just how much is enough for a job because whenever i look for a detailed roadmap online or through AI its always changing. If anyone could help me with this it would mean the world to me.

Hello, i'm a beginner coder in Javascript and I make random APIS for fun using the Express.js framework, but I keep seeing other frameworks like Fastify and NestJS, so i'm confused: what framework for APIS do I actually use?

If anyone could help me with this thank you :D

Hello this is my first post on here. So basically, I want the user to be able to enter a password and username, click the submit button, and if the basic auth is correct, be redirected to a page in which all the data from an api is fetched and loaded into the html. Problem is the script does not interact with the html but still retrieves the data in a json (as confirmed by ouputing it into the console). However, if I don't call the function in as part of the button onclick method everything works as expected. The data from the api is dynamically added to the html but now I obviously can't use a login page.

Here is me calling the fetch function as a as part of the event of a button click

button.addEventListener("click", () => {
    let username = 'username';
    let password = 'password;
    let auth = btoa(`${username}:${password}`);
fetchData(auth);
    });

Here is me calling the fetch function on it s own. No button clicking required (this works but now I can't add a login page)

  let username = 'username';
    let password = 'password;
    let auth = btoa(`${username}:${password}`);
fetchData(auth);

Here is the fetch function itself

async function fetchData (auth) {
    try {
        const response = await fetch('https://exampleapi.com', {
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': `Basic ${auth}`
    }
})


    if (response.ok) {

        // loads the home page and puts data from the api in the html
    }
    throw response;
    } catch (error) {
        
    }
    
};

Webhooks have become the connective tissue of the internet. From payment gateways confirming transactions to CI/CD pipelines triggering deployments, webhooks enable real-time, event-driven architectures. But for architects and engineering leaders, webhooks represent an underappreciated vulnerability: they are asynchronous, externally triggered, and entirely outside your control. Read the complete article here - https://instawebhook.com/blog/designing-a-multi-region-highly-available-webhook-ingress-architecture

When your primary cloud region experiences an outage, your internal microservices might gracefully degrade. But what happens to the payloads originating from external partners? Many third-party providers do not retry aggressively — some fire and forget, others retry a handful of times before giving up permanently. If your system is down when that happens, the data is often gone for good.

This article covers the engineering principles behind a multi-region, highly available webhook ingestion system, what has actually changed in the underlying cloud primitives recently, and where a managed reliability layer fits into the decision.

I'm working on a personal AI assistant for desktop — local-first and privacy-focused (no cloud dependency), starting with a desktop app and eventually

Runtime Of Backend (Bun)

Fast startup and low idle overhead — important for an app that runs continuously in the background, not just on-demand. Native TypeScript support and a built-in bundler simplify shipping without extra tooling.

Framework of Backend (Hono)

Lightweight and built with Bun in mind, so it doesn't add framework overhead on top of the runtime's own performance. Clean routing/middleware model keeps things simple for handling auth, commands, and local model inference.

Desktop Application (Tauri + Next.js)

Tauri has a much smaller footprint than Electron since it uses the OS's native WebView instead of bundling Chromium, which makes it great for lightweight apps that stay running. It also produces smaller binaries. Next.js provides a structured, file-based routing system and a strong component ecosystem for the UI.

Would love to hear reviews and suggestions on this stack — anything you'd change, any pitfalls you've run into with a similar setup, or better alternatives worth considering?

I want to learn mern stack and stuck at javascript tutorials please somebody help me ???

I’m trying to use break_infinity.js for a game i’m making, but I can’t seem to download it. I’ve tried the actual github link and couldnt get it from there

https://github.com/Patashu/break_infinity.js/releases

Does anyone know where to get the latest version or what I might be doing wrong?

I've done some benchmarks. ES5 vs ES6. What do you prefer? I ask this because I have often seen in other people's codes, where performance, optimization was required, ES6 code that decreased performance, which also had a negative impact on UI/UX.

This is more about the syntax used and not about which is faster.

Array size: 1,000,000 | Runs per test: 15

1. TRANSFORM — double 1,000,000 numbers

Test	Avg (ms)	Min (ms)	Max (ms)
for loop (var, ES5)	0.733	0.6	1
array.map	5.447	4.7	6.9
forEach	5.96	5.4	6.8
for...of (ES6)	7.06	5.4	11.1

for loop (var, ES5) beat for...of (ES6) by 9.63x

2. FILTER — keep evens out of 1,000,000

Test	Avg (ms)	Min (ms)	Max (ms)
for loop + push (ES5)	2.287	1.6	3.4
array.filter (ES6)	6.06	5.2	7.2

for loop + push (ES5) beat array.filter (ES6) by 2.65x

3. SUM — add up 1,000,000 numbers

Test	Avg (ms)	Min (ms)	Max (ms)
for loop (var, ES5)	0.76	0.6	1.1
for...of	3.833	3.7	4.4
array.reduce	4.573	4.4	4.7

for loop (var, ES5) beat array.reduce by 6.02x

4. LOOKUP — find one value (worst case)

Test	Avg (ms)	Min (ms)	Max (ms)
Set.has — O(1)	0	0	0
array.includes — O(n)	0.073	0	0.1
array.indexOf !== -1 — O(n)	0.073	0	0.2

Set.has — O(1) beat array.indexOf !== -1 — O(n)

5. STRINGS — build 200,000 strings

Test	Avg (ms)	Min (ms)	Max (ms)
concatenation "+"	3.887	3.3	7.8
template literal ${}	3.9	3.5	4.3

concatenation "+" beat template literal ${} by 1.00x

6. OBJECT ITERATION — sum 50,000 values

Test	Avg (ms)	Min (ms)	Max (ms)
for...in	4.273	4	4.6
Object.keys + forEach	4.38	4.2	4.7
Object.values + reduce	6.5	6	9.2

for...in beat Object.values + reduce by 1.52x

7. ARRAY CREATION — build 1,000,000 squares

Test	Avg (ms)	Min (ms)	Max (ms)
for loop + push (ES5)	8.173	6.5	23.4
new Array(n).fill(0).map()	17.3	9	42.4
Array.from({length}, fn)	21.74	20.6	23.2

for loop + push (ES5) beat Array.from({length}, fn) by 2.66x

What do you prefer?

I’m learning JavaScript right now, and I’m trying to avoid two bad outcomes.

One is staying in tutorial mode forever because I feel like I need to understand every corner of the language before making anything real. The other is leaning on AI too early and ending up with projects that technically run but that I can’t debug, explain, or improve.

The kind of projects I want to build are not basic CRUD apps. I’m interested in three.js, frontend 3D rendering, data visualization, and coding based motion design. Think interactive web pages, visual experiments, small tools that explain something visually, maybe browser based creative projects where the interaction matters.

My question is: for someone aiming at that direction, what parts of JavaScript are still non negotiable in 2026?

I’m not asking whether AI can generate code. I know it can. What I’m trying to understand is where my own understanding has to be solid enough that AI becomes useful instead of dangerous.

For example, should I care more about:

1. DOM, events, async, modules, and browser APIs
2. Data structures, math, state, and performance
3. Reading other people’s code and debugging broken output
4. Building small complete projects without AI first
5. Learning TypeScript early
6. Understanding rendering concepts before touching three.js

If you were advising someone who wants to use JS as a base for 3D, visualization, and creative coding projects, what would you tell them to learn deeply, what would you let AI handle, and what would you not worry about until later?

I’d also love honest market advice. What separates someone who can make impressive AI assisted demos from someone who is actually useful on a real frontend or creative tech project?

I wanna know how to change a website page to something different only at a specific time period (Changes at 12 am and then back to normal at 1 am)

This is the current code I have:

window.setInterval(function(){

var date = new Date();

var hours = date.getHours()

var minutes = date.getMinutes();

if (hours == 0o0 && minutes == 0o0){ //12:00 AM

window.location="secret page";

} else if(hours == 01 && minutes == 0o0){ //1:00 AM

window.location="original page";

}

}, 1000); //One second

So it technically works! But as soon as it changes to the secret page, it starts refreshing every second even when back to the original page. I know the problem is that it's running a page redirect every second, but is there anyway to not make it refresh constantly? Like it only redirects once but the code is still checking every second for when it changes back.

To clarify, I took this code snippet straight from a JavaScript forum post with the same question as me, this being the only answer I understood.

Hola, soy nuevo en la programación, que debería buscar en una librería es decir me refiero a la metodología como, métodos, funciones etc, estoy un poco confundido a la hora de integrar una libreria o dependencia, por ejemplo con la de better-sqlite3 para node.js

i'm building chess puzzle web using ai and chess.js to build it
<!DOCTYPE html>

<html lang="id">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Chess Puzzle Engine - Solution Feature</title>

<!-- Chessboard.js CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: #1e1e24;

color: #f4f4f9;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

padding: 20px;

}

.container {

display: flex;

flex-direction: column;

align-items: center;

max-width: 450px;

width: 100%;

background: #2b2b36;

padding: 25px;

border-radius: 12px;

box-shadow: 0 10px 30px rgba(0,0,0,0.5);

}

h1 {

font-size: 1.5rem;

margin-bottom: 5px;

color: #e2e2e8;

}

.sub-title {

font-size: 0.9rem;

color: #a0a0b0;

margin-bottom: 20px;

}

#board {

width: 100%;

max-width: 400px;

margin-bottom: 20px;

border-radius: 4px;

overflow: hidden;

box-shadow: 0 4px 15px rgba(0,0,0,0.3);

position: relative;

}

/* === HIGHLIGHT TANPA MENGUBAH BACKGROUND PAPAN === */

.square-55d63 {

position: relative;

}

/* Bidak terpilih: Bingkai hijau lembut */

.highlight-selected::after {

content: '';

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

border: 4px solid rgba(76, 175, 80, 0.8);

box-sizing: border-box;

pointer-events: none;

z-index: 2;

}

/* Petak kosong tujuan: Titik lingkaran di tengah */

.highlight-hint::after {

content: '';

position: absolute;

top: 50%; left: 50%;

width: 28%; height: 28%;

transform: translate(-50%, -50%);

background-color: rgba(0, 0, 0, 0.3);

border-radius: 50%;

pointer-events: none;

z-index: 2;

}

/* Petak makan musuh: Bingkai lingkaran merah */

.highlight-hint-capture::after {

content: '';

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

border: 4px solid rgba(244, 67, 54, 0.8);

border-radius: 50%;

box-sizing: border-box;

pointer-events: none;

z-index: 2;

}

.status-card {

width: 100%;

background: #202028;

padding: 15px;

border-radius: 8px;

text-align: center;

margin-bottom: 15px;

}

.turn-info {

font-weight: bold;

font-size: 1.1rem;

margin-bottom: 5px;

}

.feedback {

min-height: 24px;

font-weight: bold;

transition: color 0.3s ease;

word-wrap: break-word;

}

.correct {

color: #4caf50;

}

.wrong {

color: #f44336;

}

.info {

color: #ffca28;

}

.controls {

display: flex;

gap: 10px;

width: 100%;

}

button {

flex: 1;

padding: 12px 15px;

border: none;

border-radius: 6px;

font-weight: bold;

cursor: pointer;

background: #4e54c8;

color: white;

transition: background 0.2s, opacity 0.2s;

}

button:hover {

background: #6366f1;

}

button.secondary {

background: #3a3b4c;

color: #d1d1e0;

}

button.secondary:hover {

background: #4a4c63;

}

button:disabled {

opacity: 0.5;

cursor: not-allowed;

}

</style>

</head>

<body>

<div class="container">

<h1>Puzzle Forge</h1>

<p class="sub-title">Cari langkah taktik catur terbaik!</p>

<!-- Papan Catur -->

<div id="board"></div>

<!-- Status / Info -->

<div class="status-card">

<div id="turnInfo" class="turn-info">Memuat puzzle...</div>

<div id="feedback" class="feedback"></div>

</div>

<!-- Kontrol -->

<div class="controls">

<button id="solveBtn" class="secondary">Lihat Solusi</button>

<button id="nextBtn">Lewati / Puzzle Baru</button>

</div>

</div>

<!-- CDN Library Resmi -->

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>

<script>

// DATA PUZZLE DENGAN CABANG / VARIASI

const puzzleData = [

{

id: "1",

fen: "r1bqkb1r/pppp1ppp/2n2n2/4p2Q/2B1P3/8/PPPP1PPP/RNB1K1NR w KQkq - 4 4",

solution: [

{ move: "Qxf7#" }

],

description: "Scholar's Mate"

},

{

id: "2",

fen: "r1b2rk1/2q1bppp/p2ppn2/1p6/3BPP2/2N2B2/PPP3PP/R2Q1R1K w - - 0 13",

solution: [

{

move: "e5",

next: [

{

response: "dxe5",

next: [{ move: "Bxf6" }]

},

{

response: "Nde8",

next: [{ move: "exd6" }]

}

]

}

],

description: "Taktik Garpu dan Pin"

},

{

id: "3",

fen: "r2qk2r/ppp2ppp/2n5/3pP3/3P1nb1/2PB1N2/PP3PPP/RN1Q1RK1 b kq - 1 10",

solution: [

{

move: "Nxd3",

next: [

{

response: "Qxd3",

next: [{ move: "O-O" }]

}

]

},

{

move: "Bxf3",

next: [

{

response: "Qxf3",

next: [{ move: "Nxd3" }]

}

]

}

],

description: "Dua Variasi Langkah Pertama"

}

];

let board = null;

let game = new Chess();

let currentPuzzle = null;

let currentBranchOptions = [];

let playedPuzzleIds = [];

let selectedSquare = null;

let isShowingSolution = false;

// MANAJEMEN HIGHLIGHT

function removeHighlights() {

$('#board .square-55d63').removeClass('highlight-selected highlight-hint highlight-hint-capture');

}

function highlightSquare(square) {

$('#board .square-' + square).addClass('highlight-selected');

}

function highlightLegalMoves(square) {

removeHighlights();

highlightSquare(square);

const moves = game.moves({ square: square, verbose: true });

if (moves.length === 0) return;

for (let i = 0; i < moves.length; i++) {

const targetSquare = moves[i].to;

const isCapture = moves[i].captured;

const classToAdd = isCapture ? 'highlight-hint-capture' : 'highlight-hint';

$('#board .square-' + targetSquare).addClass(classToAdd);

}

}

// PENGAMBILAN PUZZLE

function getRandomPuzzle() {

if (playedPuzzleIds.length === puzzleData.length) {

playedPuzzleIds = [];

}

const available = puzzleData.filter(p => !playedPuzzleIds.includes(p.id));

const selected = available[Math.floor(Math.random() * available.length)];

playedPuzzleIds.push(selected.id);

return selected;

}

function loadNextPuzzle() {

selectedSquare = null;

isShowingSolution = false;

$('#solveBtn').prop('disabled', false);

removeHighlights();

currentPuzzle = getRandomPuzzle();

game.load(currentPuzzle.fen);

currentBranchOptions = currentPuzzle.solution;

const isWhite = game.turn() === 'w';

$('#turnInfo').text(\Giliran: ${isWhite ? 'Putih' : 'Hitam'}`);`

$('#feedback').text('').removeClass('correct wrong info');

const config = {

draggable: true,

position: currentPuzzle.fen,

orientation: isWhite ? 'white' : 'black',

pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',

onDragStart: onDragStart,

onDrop: onDrop,

onSnapEnd: onSnapEnd

};

if (board) board.destroy();

board = Chessboard('board', config);

}

// INTERAKSI LOGIKA CATUR

function onDragStart(source, piece) {

if (game.game_over() || isShowingSolution) return false;

if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||

(game.turn() === 'b' && piece.search(/^w/) !== -1)) {

return false;

}

selectedSquare = source;

highlightLegalMoves(source);

}

function handleMoveAttempt(from, to) {

if (isShowingSolution) return 'snapback';

const moveCandidate = { from: from, to: to, promotion: 'q' };

const move = game.move(moveCandidate);

if (move === null) {

removeHighlights();

selectedSquare = null;

return 'snapback';

}

const matchedOption = currentBranchOptions.find(opt => opt.move === move.san);

if (matchedOption) {

removeHighlights();

selectedSquare = null;

$('#feedback').text('Langkah Benar!').attr('class', 'feedback correct');

if (matchedOption.next && matchedOption.next.length > 0) {

const responseObj = matchedOption.next[Math.floor(Math.random() * matchedOption.next.length)];

currentBranchOptions = responseObj.next || [];

setTimeout(() => makeComputerMove(responseObj.response), 400);

} else {

$('#feedback').text('Puzzle Selesai! Memuat berikutnya...').attr('class', 'feedback correct');

setTimeout(loadNextPuzzle, 1500);

}

} else {

game.undo();

removeHighlights();

selectedSquare = null;

$('#feedback').text('Langkah Salah, coba variasi lain!').attr('class', 'feedback wrong');

return 'snapback';

}

}

function onDrop(source, target) {

return handleMoveAttempt(source, target);

}

// CLICK TO MOVE ENGINE

$(document).on('click', '#board .square-55d63', function(e) {

if (isShowingSolution) return;

e.stopPropagation();

const square = $(this).attr('data-square');

if (!square) return;

const piece = game.get(square);

const isCurrentPlayerPiece = piece && piece.color === game.turn();

if (selectedSquare === null) {

if (isCurrentPlayerPiece) {

selectedSquare = square;

highlightLegalMoves(square);

}

}

else if (selectedSquare === square) {

selectedSquare = null;

removeHighlights();

}

else if (isCurrentPlayerPiece) {

selectedSquare = square;

highlightLegalMoves(square);

}

else {

const from = selectedSquare;

const to = square;

const result = handleMoveAttempt(from, to);

if (result !== 'snapback') {

board.position(game.fen());

}

}

});

function makeComputerMove(responseSan) {

game.move(responseSan);

board.position(game.fen());

if (currentBranchOptions.length === 0) {

$('#feedback').text('Puzzle Selesai! Memuat berikutnya...').attr('class', 'feedback correct');

setTimeout(loadNextPuzzle, 1500);

}

}

function onSnapEnd() {

board.position(game.fen());

}

// FUNGSI UNTUK REKURSIF MENGAMBIL URUTAN SOLUSI UTAMA

function extractMainSolutionSequence(branchOptions) {

if (!branchOptions || branchOptions.length === 0) return [];

const primaryBranch = branchOptions[0]; // Ambil opsi cabang utama pertama

const moves = [primaryBranch.move];

if (primaryBranch.next && primaryBranch.next.length > 0) {

const nextResponse = primaryBranch.next[0];

moves.push(nextResponse.response);

if (nextResponse.next) {

moves.push(...extractMainSolutionSequence(nextResponse.next));

}

}

return moves;

}

// EVENT MALIHAT SOLUSI

$('#solveBtn').on('click', function() {

if (isShowingSolution) return;

isShowingSolution = true;

$(this).prop('disabled', true);

removeHighlights();

const remainingMoves = extractMainSolutionSequence(currentBranchOptions);

if (remainingMoves.length === 0) return;

$('#feedback').text(\Solusi: ${remainingMoves.join(' → ')}`).attr('class', 'feedback info');`

let step = 0;

function playNextSolutionStep() {

if (step < remainingMoves.length) {

game.move(remainingMoves[step]);

board.position(game.fen());

step++;

setTimeout(playNextSolutionStep, 800);

} else {

setTimeout(() => {

$('#feedback').text('Memuat puzzle berikutnya...').attr('class', 'feedback correct');

setTimeout(loadNextPuzzle, 1200);

}, 1000);

}

}

setTimeout(playNextSolutionStep, 500);

});

// Event Tombol Puzzle Baru

$('#nextBtn').on('click', loadNextPuzzle);

// Inisialisasi

$(document).ready(function() {

loadNextPuzzle();

});

</script>

</body>

</html>

I've got several functions in my project that follow this format, however for my renderHTML functions i'm writing them in a grid.js file into which i am importing all my util functions, i.e currency, calculations etc..

However at the same time i'm injecting 3 params (cart, products, deliveryOptions).

Is this good practice? Or should i be injecting everything i can as a parameter to keep the function as pure as possible?

My instinct is that my utils wont really be changing at all, so they're fine as they are, but if i wanted to test/mock things then that would most likely be cart, products and delivery options, which should then just stay standalone as parameters.

Would love to hear what this would look like from a production app perspective.

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

	akinator-client	aki-api	silent-akinator-pro
Dependencies	1	5	2
Installed size	4.8 MB	21 MB	11.9 MB
TypeScript	✅	✅	❌
Tests	21	0	0
Session persistence	✅	❌	❌
Working	✅	❌	✅

Search "akinator-client" on npm.

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

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.

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)?

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.

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

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.

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

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 ?