Category: javascript

I need a little explanation of how Vite JS works on the build.

I’ll tell you what it’s about.
I have a project with a CSS, images and JS folder in the resources folder. I also have a vendors folder where I have various JS and CSS libraries as well as fonts and images.
App.js

import './bootstrap';

import.meta.glob([
    '../vendors/common/fonts/**',
    '../vendors/common/images/**',
    '../vendors/common/webfonts/**',
]);

// JS
import '../js/script.js';
import '../js/slider-script.js';

// JS LIB
import '../vendors/bootstrap/js/bootstrap.bundle.min.js';
import '../vendors/wow/wow.js';
import '../vendors/owl-carousel/owl.carousel.min.js';

// CSS LIB
import '../vendors/bootstrap/css/bootstrap.css';
import '../vendors/fontawesome/css/all.min.css';
import '..//vendors/animate/animate.min.css';
import '../vendors/youtube-popup/youtube-popup.css';
import '../vendors/icomoon/style.css';
import '../vendors/owl-carousel/owl.carousel.min.css';
import '../vendors/owl-carousel/owl.theme.default.min.css';
import '../css/style.css';

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from '@rollup/plugin-inject';
import path from "path";

export default defineConfig({
    build: {
        assetsInlineLimit: 0,
    },
    plugins: [
        inject({
            jQuery: "jquery",
            "window.jQuery": "jquery",
            $: "jquery"
        }),
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        })
    ]
});

I can’t understand why when I run npm run build I get problems in the console:

The folder of build :
enter image description here

And here are the errors when I launch the build. I’d like the fonts and images in the vendors folder to be added to the assets during the build, but it doesn’t work.

[plugin:inject] rollup-plugin-inject: failed to parse /home/www/laralve10/resources/vendors/youtube-popup/you
tube-popup.css. Consider restricting the plugin to particular files via options.include

[plugin:inject] rollup-plugin-inject: failed to parse /home/www/laralve10/resources/vendors/icomoon/style.css
. Consider restricting the plugin to particular files via options.include

[plugin:inject] rollup-plugin-inject: failed to parse /home/www/laralve10resources/css/style.css. Consider r
estricting the plugin to particular files via options.include

[plugin:inject] rollup-plugin-inject: failed to parse /home/www/laralve10/resources/vendors/fontawesome/css/a
ll.min.css. Consider restricting the plugin to particular files via options.include

for the rest everything is ok, images are built in the asset folder with css and js

✓ 85 modules transformed.
public/build/assets/banner-one-shape-1-D9OP_mXl.png

I haven’t created an images folder in public. Is this compulsory? Is it also possible to create an images sub-folder in assets so that the images can be inserted on their own?

I am sending a pdf and title form data from a react frontend to Django REST backend. Im doing this using [email protected].

SendForm.js (form data prints fine before send)

            const formDataToSend = new FormData();
            formDataToSend.append('title', formData.title); 
            formDataToSend.append('pdf_file', formData.pdf_file);

            console.log(formDataToSend.get('title'), formDataToSend.get('pdf_file'))

            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'X-CSRFToken': Cookies.get('csrftoken')
                },
            }

            const response = await axios.post(`${process.env.REACT_APP_API_URL}/api/posts/create-post/`,
                formDataToSend,
                config 
                );

This returns this error from the backend

Bad Request: /api/posts/create-post/
[02/Mar/2024 19:15:46] "POST /api/posts/create-post/ HTTP/1.1" 400 28

The part I dont understand is, when sending from postman it works fine. Below are the requests, the main difference to me looks like the request Content-Length. Ive tried various other ways of sending it using axios but cant figure it out.

Broken Axios Request

POST /api/posts/create-post/ HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 280
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryZWvOJOP8DWxLqAIC
Cookie: csrftoken=KpiB3K4gLN4gT3GsnPLfP9eBpOcwJ1Sb; sessionid=hgq77mclr8rynznly95gx40vjaj07cor
Host: localhost:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
X-CSRFTOKEN: KpiB3K4gLN4gT3GsnPLfP9eBpOcwJ1Sb
sec-ch-ua: "Chromium";v="122", "Not(A:Brand";v="24", "Google Chrome";v="122"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

Working Postman Request

Content-Type: multipart/form-data; boundary=--------------------------998229612431930001760561
X-CSRFToken: E5khHlkBQgTXXhWhosEKtX2LOx1o8z2s
User-Agent: PostmanRuntime/7.36.3
Accept: */*
Postman-Token: c5e3e2f7-aaeb-4a16-a4da-d6f0e99e691b
Host: 127.0.0.1:8000
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cookie: csrftoken=E5khHlkBQgTXXhWhosEKtX2LOx1o8z2s; sessionid=yvwjf72zx1ymw78uxb4p10dli5pu1wxo
Content-Length: 560891

Axios Configs

import axios from 'axios';

axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.withCredentials = true;
axios.defaults.credentials = 'same-origin';
axios.defaults.withXSRFToken = true
export default axios;

All other axios requests in my project work fine, although none use FormData(). Ive browsed various forumns that all include it in the post request the same way as I do here and it works for them.

I would like to scrape the marathon results from the link (call it page A): https://www.marathon.tokyo/2023/result/index.php

Suppose I choose the ‘Marathon Men’ in the first option and then search, I get to the following webpage showing the results (call it page B):

When I click the names, I then get to the result of each individual athlete (page C):

My question is, how to get from page A to page C? I have no problems scraping the data I want from page C. The problem is getting from page A to B, obtain all the URLs pointing to the individual result entry (page C), and then navigate to page C.

To get from page A to page B, I have something like the following:

from selenium import webdriver
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

url = 'https://www.marathon.tokyo/2023/result/index.php'

driver = webdriver.Chrome()
driver.get(url)

options = driver.find_elements(By.TAG_NAME, "option")

for option in options:
    if 'Marathon Men' in option.text:
        print(option.text)
        option.click() # click on the option 100
        break

It does automatically select the correct option (Marathon Men), but I don’t know how to click the ‘search’ button.

To get from page B to C, I try the following code while at page B:

raw_links = driver.find_elements(By.XPATH, '//a [@href]')
for link in raw_links:
    l = link.get_attribute("href")
    print("raw_link:{}".format(l))

And I get the following output:

raw_link:javascript:page(2);
raw_link:javascript:page(3);
raw_link:javascript:page(4);
# and so on

Again, the problem is I don’t know how to convert those to clickable URLs and navigate to them.

Any help to get me started would be greatly appreciated.

I have 4 elements with a class of either x-control-ui or y-control-ui:

<div class="x-control-ui">x-control: <output id="x-control-output"></output></div> 
<input type="range" min="-4" max="4" step="0.1" value="0" class="param x-control-ui" id="x-control">

<div class="y-control-ui">y-control: <output id="y-control-output"></output></div> 
<input type="range" min="-4" max="4" step="0.1" value="0" class="param y-control-ui" id="y-control">

Using the [attribute*="value"] selector works as expected, selecting them all:

document.querySelectorAll("[class*='-control-ui']")
NodeList(4) [div.x-control-ui.hidden, input#x-control.param.x-control-ui.hidden, div.y-control-ui.hidden, input#y-control.param.y-control-ui.hidden]

but if I change *= to $=, using the [attribute*="value"] selector, then no elements are selected:

document.querySelectorAll("[class$='-control-ui']")
NodeList []

even though though both classnames end in control-ui.

The same behaviour is observed in up-to-date Chrome and Firefox. I have checked the docs in MDN and consulted other sources, and all seem to indicate that the $= operator should select elements whose specified attribute (in this case, class) ends with the given text.

I have tried modifying the selector in various ways, to no avail.
What am I missing?

When you paste text from Excel into ckeditor 5, the editor formats its styles. Despite the fact that when Excel is closed, the text is inserted well (the second screen, without formatting), but when it is open it is not (the first screen).

Excel copies its styles to the clipboard, and ckeditor 5 chooses to paste the style that is convenient for it. How to avoid text formatting?

Without the PasteFromOffice plugin and without shift + crtl + v.
More precisely, how could one intuitively press crtl + v, and the text would be inserted without formatting?

enter image description hereenter image description here

I’m currently working on a project where I’m using Three.js to create portals displaying different images. I’m encountering difficulty displaying two separate images in two different portals. One image is located at src/App/Assets/HighTop.jpeg for portal one, and the other image is at src/App/Assets/FRB.jpeg for portal two.

I’ve tried using THREE.TextureLoader() to load textures asynchronously, but I’m still unable to display both images correctly.

Here’s a simplified version of my code structure:

// ModalContentProvider.js

import * as THREE from 'three';

export default class ModalContentProvider {
    constructor() {
        // Define modal content
        this.modalContents = {
            portalOne: {
                imageUrl: '/App/Assets/HighTop.jpeg'
            },
            portalTwo: {
                imageUrl: '/App/Assets/FRB.jpeg'
            }
        };
    }

    async createMeshForPortal(imageUrl) {
        const texture = await this.loadTexture(imageUrl);

        // Create a plane geometry
        const geometry = new THREE.PlaneGeometry(/* dimensions */);

        // Use the texture on a material
        const material = new THREE.MeshBasicMaterial({ map: texture });

        // Create and return the mesh
        return new THREE.Mesh(geometry, material);
    }

    loadTexture(url) {
        return new Promise((resolve, reject) => {
            const textureLoader = new THREE.TextureLoader();
            textureLoader.load(
                url,
                resolve, // Success callback
                undefined, // Progress callback
                reject // Error callback
            );
        });
    }
}

And here’s how I’m attempting to use it:

// Wherever you're setting up your scene

import ModalContentProvider from './ModalContentProvider.js';

const modalContentProvider = new ModalContentProvider();

// Create mesh for portal one
modalContentProvider.createMeshForPortal('/App/Assets/HighTop.jpeg')
    .then(mesh => {
        // Add mesh to the scene or manipulate it as needed
        scene.add(mesh);
    })
    .catch(error => {
        console.error('Error loading texture for portal one:', error);
    });

// Create mesh for portal two
modalContentProvider.createMeshForPortal('/App/Assets/FRB.jpeg')
    .then(mesh => {
        // Add mesh to the scene or manipulate it as needed
        scene.add(mesh);
    })
    .catch(error => {
        console.error('Error loading texture for portal two:', error);
    });

Despite my efforts, I’m unable to display both images in the different portals. I suspect there might be an issue with how I’m using the THREE.TextureLoader() or how I’m structuring my code.

Any insights or suggestions on how to correctly display both images in separate portals using Three.js would be greatly appreciated. Thank you!

I would want to sort the values in multiple variables and still be able to call on the variable’s names (value1)

      var value1 = 4
      var value2 = 3
      var value3 = 5
      var value4 = 1
      var value5 = 2
      //This are the values that I want to sort//

How would I be able to sort these variables and still be able to call them using their names (value1)

Any help on this situation would be appreciated.

Can you also include an explanation of the code, I would be grateful.

I’m learning how to use websocket and the socket.io library. I am creating a test 2d online game. In the game, the user controls a ball, the communication scheme is as follows:

Client (game.js):

• Sends a message "new player" to the server, if a new player is connected, transmits socket.id
• Sends a message "movement" to the server, if the player presses/unpresses the control keys, sends the object of the pressed keys of the form { up: boolean, down: boolean, right: boolean, left: boolean, ID: socket.id }.
• When receiving the message "state" should render all players connected to the game, but for some reason it does not happen (I see only myself in the game).

Server (server.js):

• When receiving the message "new player", stores in the players object the coordinates of the connected player: [socket.id from the client]: {x: number, y: number}
• When receiving the message "movement", changes the coordinates of the player in the players object according to the keys pressed.
• Sends a "state" message to the client every 16,67 milliseconds.

game.js code:

var socket = io();

socket.on("connect", function () {
  socket.emit("new player", socket.id);

  const canvas = document.getElementById("gameCanvas");
  const ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const gridSize = 50;
  const playerSize = 20;
  const speed = 25;

  let playerX;
  let playerY;

  let movement = {
    up: false,
    down: false,
    left: false,
    right: false,
    shift: false,
    ID: socket.id
  };

  function drawGrid() {
    let colorIndex = 0;
    for (let x = 0; x < canvas.width; x += gridSize) {
      for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.fillStyle = "green";
        ctx.fillRect(x, y, gridSize, gridSize);
      }
    }
  }

  function drawPlayer() {
    if (!playerX) return;
    if (!playerY) return;
    
    ctx.beginPath();
    ctx.arc(playerX, playerY, playerSize, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
  }

  function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  function updateCamera() {
    if (!playerX) return;
    if (!playerY) return;
    const cameraX = canvas.width / 2 - playerX;
    const cameraY = canvas.height / 2 - playerY;
    ctx.translate(cameraX, cameraY);
  }

  function update() {
    clearCanvas();
    updateCamera();
    drawGrid();
    drawPlayer();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
  }

  function handleKeyPress(event) {
    switch (event.key) {
      case "a":
        movement.left = true;
        break;
      case "d":
        movement.right = true;
        break;
      case "w":
        movement.up = true;
        break;
      case "s":
        movement.down = true;
        break;
      case "Shift":
        movement.shift = true;
        break;
    }
  }

  function handleKeyRelease(event) {
    switch (event.key) {
      case "a":
        movement.left = false;
        break;
      case "d":
        movement.right = false;
        break;
      case "w":
        movement.up = false;
        break;
      case "s":
        movement.down = false;
        break;
      case "Shift":
        movement.shift = false;
        break;
    }
  }

  window.addEventListener("keydown", handleKeyPress);
  window.addEventListener("keyup", handleKeyRelease);

  function gameLoop() {
    update();
    requestAnimationFrame(gameLoop);
    socket.emit("movement", movement);
  }

  window.addEventListener("resize", () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    update();
  });

  gameLoop();

  socket.on("state", function (players) {
    clearCanvas();

    playerX = players[socket.id]?.x;
    playerY = players[socket.id]?.y;
    ctx.fillStyle = "yellow";

    for (var id in players) {
      if (id === socket.id) continue;
      var player = players[id];
      ctx.beginPath();
      ctx.arc(player.x, player.y, playerSize, 0, 2 * Math.PI);
      ctx.fill();
    }
  });
});

server.js code:

let express = require('express');
let http = require('http');
let path = require('path');
let socketIO = require('socket.io');
let app = express();
let server = http.Server(app);
let io = socketIO(server);
let port = 5000;

app.set('port', port);
app.use('/static', express.static(__dirname + '/static'));

app.get('/', function (request, response) {
    response.sendFile(path.join(__dirname, 'index.html'));
});

server.listen(port, function () {
    console.log('Starting server on port: ' + port);
});

var players = {};
io.on('connection', function (socket) {
    socket.on('new player', function (ID) {
        players[ID] = {
            x: 959,
            y: 496.5
        };
    });
    socket.on('movement', function (data) {
        var player = players[data.ID] || {};
        if (data.left) {
            if (data.shift) {
                player.x -= 7.5
            } else {
                player.x -= 15;
            }
        }
        if (data.up) {
            player.y -= 15;
        }
        if (data.right) {
            if (data.shift) {
                player.x += 7.5
            } else {
                player.x += 15;
            }
        }
        if (data.down) {
            player.y += 15;
        }
    });
});
setInterval(function () {
    io.sockets.emit('state', players);
}, 1000 / 60);

index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script src="/socket.io/socket.io.js"></script>
    <script src="static/game.js"></script>
</body>
</html>

I can’t understand what exactly the problem is. I think I have configured websocket communication correctly. But still, when a few people enter the game, they do not see each other in the game for some reason.

Game preview (the red ball is a player):

Image

I was practicing a lesson about modal windows from one video course and noticed one feature: I had an “onscroll” event running when I scrolled to the end of the page and after closing the modal window, this event refused to fire further, so at first I did not understand why the author was writing logic for a single trigger of this event.

That’s why it became interesting for me to figure this out. As I noticed, the page height is exactly 4264px. When the event is triggered for the first time, the condition “window.Scrollly + document.documentElement.clientHeight” gives us 4264px, but when triggered again, this value already equals 4263.8, which is not enough to fulfill the condition. As I understand it, this is due to the overflow change in the body element.

I decided to fix this and started rounding this value up, but I ran into another problem: now, when I reopen the modal window when scrolling to the bottom, it becomes impossible to close it at all.
When you click on the cross to close it, an inscription is displayed twice in the console that the scroll event was triggered and the condition was also satisfied, although overflow=hidden at this moment and I would not be able to trigger this event in any way anymore.
But if I write any character inside the tag located in the popup modal window, then I can safely close the modal window and it no longer pops up from this event until I scroll down the page again.
I also noticed that “set timer” type solutions don’t work and this event is triggered twice again.
Why is this happening?
code section: https://i.stack.imgur.com/3q2mK.png

full project (the problem starts at 97th line in script.js): https://github.com/sevabek/tt/tree/main/%D1%80%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F%20%D1%82%D0%B0%D0%B1%D0%BE%D0%B2

I did a little reasrch but couldent find much on this so I came here to ask. Can you get console data with vanilla JavaScript and if so how?

I orginally tried by trying to use console.trace() and putting methods and stuff together but that didnt work.

I would like to be able to get err data from the console and stuff.

In this Typescript Demo if autoplay is commented out, the sound does not play, and I am expecting it to since play() is called:

const mp3: string = `https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3`;

var sound = new Howl({
//  autoplay: true,
  loop: true,
  volume: 100,
  format: ['mp3'],
  src: [mp3],
});
sound.play();

Any ideas?

Can someone please point me at the relevant documentation (or provide the answer) to the question “Is it a browser-manufacturer supported, and/or standards-compliant, to impersonate a native Javascript event given they can always be distinguished by the IsTrusted attribute?”

Example, I want to comvert ARIA-compliant Spacebar and Return keyboard events into a native INPUT event so that a consumer of my custom-element will be able to just concentrate on INPUT events.

Yes, creating a “custom:checked” event works well, but if it is supported I’d like to stick with “INPUT”.

I’m having a hard time trying to make my project run on the front and back end. Its basically my resume composed of different html pages. The main page hosts the titles of the roles which are supposed to act as links to other html files that act as other pages and go in depth about the details about each role. However, while those links have worked before, when I try to have the project run through Visual Studio Code, the links don’t work for some reason as well as the external CSS file. There’s some embedded CSS in the file already, but I’m trying to use the external CSS file to work for all of the html files including different parts of the main one. Does anyone know of a solution for this?
(I tried to include the CSS lines above, but the stack overflow says that its unformatted for some reason).

<!DOCTYPE html>

<html>
<head>
    
<title> Michael Brima's Resume </title>


<link rel="stylesheet" href="stylesheet.css">



</head>

<body class="white">
<h1 class="underline"> Michael Brima </h1>
<img src="Michael N Brima - Professional Photo - 1699760209321.jpg" title="Michael N. Brima" alt="Michael N. Brima">
<br>
<br>
<label for="Education"> <b>Education:</b> </label>
<br>
<br>
<b> Bachelor’s Degree of Science in Industrial Engineering </b> &nbsp&nbsp&nbsp&nbsp May 2021
<br>
<i> University of Massachusetts Amherst, Amherst, MA </i>

</p>

<p> <b> Bachelor’s Degree of Business Administration in Accounting </b> &nbsp&nbsp&nbsp&nbsp In Progress
<br>
<i> Fitchburg State University, Fitchburg, MA  </i>
</p>
<label for="MyWebsites"> <b> My Websites: </b> </label>
<br>
<br>
<a href="https://www.linkedin.com/in/mustapha-brima-ba65111ab">
-My Linkedin Page </a>

<br>
<br>

<label for="WorkExperience"> <b> Work Experience: </b> </label>
<p> (Click on each Role to view details.) </p>
<br>

<table>

<td style="background:purple; Padding:20px 20px 20px 20px; border: white 2px solid;"> <a href="C:UsersChrisOneDriveDocumentsDATA SCIENCEMy Resume ProjectROLEACCOUNTSPAYABLECLERK.html">
- &nbsp&nbspAccounts Payable Clerk &nbsp May 2023 - August 2023 </a> </td>

</table>
<br>
<br>

<table>

<tr>
    <th> Contractor (Complete Staffing Solutions) </th>
    <th> Contractor (Robert Half) </th>
    <th> Contractor (KBW Financial Staffing) </th>
</tr>

<tr>
    <td style="font-size:20px"> (October 2020 - January 2022) </td>
    <td style="font-size:20px"> (October 2021 - October 2022) </td>
    <td style="font-size:20px"> (October 2022 - May 2023) </td>
</tr>

<tr>
    <td style="background:yellow; Padding:20px 20px 20px 20px; border: white 2px solid;"> <a href="C:UsersChrisOneDriveDocumentsDATA SCIENCEMy Resume ProjectROLEDATAENTRYCLERK1.html">
- &nbsp&nbspData Entry Clerk - Trans Core &nbsp </a> </td>
    <td style="background:green; Padding:20px 20px 20px 20px; border: white 2px solid;"> <a href="C:UsersChrisOneDriveDocumentsDATA SCIENCEMy Resume ProjectROLEACCOUNTINGCLERK.html">
- &nbsp&nbspAccounting Clerk - Cumberland Farms Corporate &nbsp </a> </td>
    <td style="background:lime; Padding:20px 20px 20px 20px; border: white 2px solid;"> <a href="C:UsersChrisOneDriveDocumentsDATA SCIENCEMy Resume ProjectROLEBILLINGSPECIALIST.html">
- &nbsp&nbspBilling Specialist - DPS Group Global&nbsp </a> </td>
</tr>

<tr>
    <td> </td>
    <td style="background:cyan; Padding:20px 20px 20px 20px; border: white 2px solid;"> <a href="C:UsersChrisOneDriveDocumentsDATA SCIENCEMy Resume ProjectROLEDATAENTRYCLERK2.html">
- &nbsp&nbspData Entry Clerk - Heywood Hospital &nbsp  </a> </td>
    <td style="background:orange; Padding:20px 20px 20px 20px; border: white 2px solid;"> <a href="C:UsersChrisOneDriveDocumentsDATA SCIENCEMy Resume ProjectROLEBSPECIALIST&BOASSOCIATE.html">
- &nbsp&nbspBilling Specialist & Business Operations Associate - Toast, Inc. &nbsp  </a> </td>
</tr>

<tr>
    <td> </td>
    <td style="background:red; Padding:20px 20px 20px 20px; border: white 2px solid;"> <a href="C:UsersChrisOneDriveDocumentsDATA SCIENCEMy Resume ProjectROLEBOOKKEEPER.html">
- &nbsp&nbspBookkeeper - Rudy, Cassidy, and Foster LLC &nbsp  </a> </td>
    <td> </tr>
</table>
<br>
<br>
<label for="TechnicalSkills"> <b> Technical Skills: </b> </label>
<p> (Click on each link to view skills aquired at each role.) </p>

<iframe frameorder="1" width="200" height="200" 
    src="CHOICEDEFAULT.html" name="ouriframe" id="ouriframe">
    Do you see this?
</iframe> <br />

<div class="skillstyle">
<a href="DATAENTRYCLERK1SKILLS.html" target="ouriframe"> Data Entry Clerk (Transcore)</a>
</div>
<br>
<div class="skillstyle">
<a href="BOOKKEEPERSKILLS.html" target="ouriframe"> Bookkeeper (Rudy, Cassidy, and Foster, LLC)</a>
</div>
<br>
<div class="skillstyle">
<a href="DATAENTRYCLERK2SKILLS.html" target="ouriframe"> Data Entry Clerk (Heywood Hospital)</a>
</div>
<br>
<div class="skillstyle">
<a href="ACCOUNTINGCLERK.html" target="ouriframe"> Accounting Clerk (Cumberland Farms Corporate)</a>
</div>
<br>
<div class="skillstyle">
<a href="BS&BOASKILLS.html" target="ouriframe"> Billing Specialist / Business Operations Associate Skills (Toast, Inc.)</a>
</div>
<br>
<div class="skillstyle">
<a href="BS2SKILLS.html" target="ouriframe"> Billing Specialist (DPS Group Global Inc.)</a>
</div>
<br>
<div class="skillstyle">
<a href="ACCOUNTSPAYABLECLERKSKILLS.html" target="ouriframe"> Accounts Payable Clerk (Gordon's Fine Wines and Liquors)</a>

</div>

</body>
</html>

Some background:

I perform a modicum of experimentation on what some might call “the edge”.

I test multiple JavaScript runtimes and browsers, nightly and development versions.

During these tests, in the domain of Native Messaging, it became clear that STDIO is not specified nor standardized at the programming language level. I had not really thought about that until I got there.

Node.js, Deno, Bun, QuickJS, txiki.js, et al. are not attempting to conform to any standard because no standard exists.

I cobbled together some JavaScript source code that can be run in node, deno, bun environments. I won’t deal with which is faster using essentially the same source code, save for implementation details of what is and is not a WHATWG stream. The results of such a test are left to the developer, if interested.

const runtime = navigator.userAgent;
const buffer = new ArrayBuffer(0, { maxByteLength: 1024 ** 2 });
const view = new DataView(buffer);
const encoder = new TextEncoder();
const { dirname, filename, url } = import.meta;

let readable, writable, exit, args, cwd;

if (runtime.startsWith("Deno")) {
  ({ readable } = Deno.stdin);
  ({ writable } = Deno.stdout);
  ({ exit } = Deno);
  ({ args } = Deno);
}

if (runtime.startsWith("Node")) {
  const { Duplex } = await import("node:stream");
  ({ readable } = Duplex.toWeb(process.stdin));
  ({ writable } = Duplex.toWeb(process.stdout));
  ({ exit } = process);
  ({ argv: args } = process);
}

if (runtime.startsWith("Bun")) {
  readable = Bun.stdin.stream();
  writable = new WritableStream({
    async write(value) {
      await Bun.write(Bun.stdout, value);
    },
  }, new CountQueuingStrategy({ highWaterMark: Infinity }));
  ({ exit } = process);
  ({ argv: args } = Bun);
}

const hostdir = args.at(-2).slice(0, args.at(-2).lastIndexOf("/"));


if (runtime.startsWith("Bun") || runtime.startsWith("Node")) {
  process.chdir(hostdir);
  cwd = process.cwd();
}

if (runtime.startsWith("Deno")) {
  await Deno.chdir(hostdir);
  cwd = Deno.cwd();
}

function encodeMessage(message) {
  return encoder.encode(JSON.stringify(message));
}

async function* getMessage() {
  let messageLength = 0;
  let readOffset = 0;
  for await (let message of readable) {
    if (buffer.byteLength === 0) {
      buffer.resize(4);
      for (let i = 0; i < 4; i++) {
        view.setUint8(i, message[i]);
      }
      messageLength = view.getUint32(0, true);
      message = message.subarray(4);
      buffer.resize(0);
    }
    buffer.resize(buffer.byteLength + message.length);
    for (let i = 0; i < message.length; i++, readOffset++) {
      view.setUint8(readOffset, message[i]);
    }
    if (buffer.byteLength === messageLength) {
      yield new Uint8Array(buffer);
      messageLength = 0;
      readOffset = 0;
      buffer.resize(0);
    }
  }
}

async function sendMessage(message) {
  await new Blob([
    new Uint8Array(new Uint32Array([message.length]).buffer),
    message,
  ])
    .stream()
    .pipeTo(writable, { preventClose: true });
}

try {
  await sendMessage(encodeMessage([{ dirname, filename, url }, { cwd }, ...args]));
  for await (const message of getMessage()) {
    await sendMessage(message);
  }
} catch (e) {
  exit();
}

/*
export {
  args,
  encodeMessage,
  exit,
  getMessage,
  readable,
  sendMessage,
  writable,
};
*/

What I’m interested in is how you would write out the specification for STDIO, reading STDIN, writing to STDOUT and processing STDERR, in JavaScript?

Given some JavaScript source code that works in bun, node, deno standalone, how would you write the specification?

E.g.,

Let global stdin be a ReadableStream …
…
Let global stdout be a WritableStream …

If … throw …

Thanks.

I am in the VI semester of Computer Science and Econometrics, which means it’s time to start working on my final project. The university’s requirement for it in this field of studies is that it must include both an IT and statistical/data modeling component. Since I work with web development on a daily basis (mainly Laravel and Vue), I would like to adapt my skills to my final project.

I have come up with two ideas:

The first one involves creating an application similar to an e-visit system, such as scheduling online appointments for a clinic (web development – IT part), where we collect patient data and generate reports (statistics) based on it. Sample data to collect includes:

• Patient’s age
• Gender
• Place of residence (village, city up to 10,000 inhabitants, city up to 100,000 inhabitants, city up to 250,000 inhabitants, larger city)
• Type of visit (consultation, examination, vaccination, etc.)
• Type of health insurance (public, private)
• Presence of chronic diseases
• Type of doctor/specialist for whom the appointment is scheduled
• Number of people in the patient’s household
• Number of previous visits to the clinic per year
• Whether the patient uses healthcare services in other facilities
• Preferred method of payment for the visit
• Number of registered cases of a specific disease in a specified geographic area
• Frequency of occurrence of specific symptoms or ailments among patients
• Patient’s choice of communication channels (phone, email, mobile application)
• Frequency of using paper vs. electronic prescriptions
• Number of cases of emergency medical visits vs. scheduled appointments
• Preferred method of receiving test results (in person, online)
• Questions about dietary habits
• Impact of environmental factors on the health of patients
• Level of accessibility of medical services in different geographic areas

I’m a bit concerned about calculating statistical data.
I found a library that has several functions related to statistics, but since I’ve never dealt with writing such solutions, I’m not sure if the idea of such an application is realistic.

My second idea is to compare React and Vue in terms of performance. The concept would be to create, for example, an internet forum, using Laravel + Inertia as the backend, so that creating the front end in Vue and React would be based on exactly the same backend and routing system, with the only difference being the frontend – which is what I’m really interested in. The question I have in this case is what exact parameters of these frameworks can be measured and with what tools? Do regular dev tools + React/Vue tools provide all the data that would be worth considering in such an analysis?

Of course, by asking this question, I don’t intend to extract a ready-made recipe for the final project; it’s more about getting an overview of the topic. I would also be happy to hear other ideas for combining web development and statistics.