Category: javascript

I have been trying to implement the ‘light preset’ from https://particles.js.org/ but i can’t somehow manage to get the onHover effect working. The shapes are appearing just fine but the onHover is not triggering at all and I don’t know why. I tried copying the json script to the website’s codepen demo and the code works fine so i assume that the problem is within my Vue Project. I tried npm i tsparticles/vue3 and tsparticles/slim and the problem still persists.

Below is my Vue Template Code

<template>
  <div>
    <vue-particles
      id="tsparticles"
      @particles-loaded="particlesLoaded"
      :options="particleOptions"
    />
  </div>
</template>

Below is the code block for the onHover and light mode ( the code is from tsParticles )

onHover: {
        enable: true,
        mode: "light",
        parallax: {
          enable: false,
          force: 2,
          smooth: 10,
        },
      },

light: {
        area: {
          gradient: {
            start: {
              value: "#3b5e98",
            },
            stop: {
              value: "#17163e",
            },
          },
          radius: 1000,
        },
        shadow: {
          color: {
            value: "#17163e",
          },
          length: 2000,
        },
      },

I tried re-installing all packages, tried modifying the script a bit, tried different approaches to implement tsParticles but nothing seems to work. The only problem now is just the onHover effect not working, the shapes are showing and is fine.

In the following code:

class Foo {
  #a;
  #b = 123;
  c = 3.14;

  tellYourself() {
    console.log("OK the values are", JSON.stringify(this));
  }
}

const foo = new Foo();

foo.tellYourself();

Only this is printed:

OK the values are {"c":3.14}

Is there a way to print out all properties automatically, including the private ones?

(meaning if there are 25 private variables, print all of them out automatically, instead of specifying them one by one?).

• Delete modal –>

• • • • • •         <div id="deleteModal" class="hidden fixed flex top-0 left-0 w-full h-full items-center justify-center bg-black bg-opacity-50">
            

• • • • • •             <div class="bg-white p-5 rounded-lg text-center">
            

• • • • • •                 <h2 class="mb-4">Are you sure you want to delete?</h2>
            

• • • • • •                 <button id="confirmDelete" class="mr-2 px-4 py-2 bg-yellow-400 hover:bg-yellow-500 text-white rounded">Yes</button>
            

• • • • • •                 <button id="cancelDelete" class="px-4 py-2 bg-gray-300 text-black rounded">No</button>
            

• • • • • •             </div>
            

• • • • • •         </div>
            

• • • • • •     <script>
            

• document.getElementById(‘deleteButton’).addEventListener(‘click’, function() {
• document.getElementById(‘deleteModal’).classList.remove(‘hidden’);

• • • • • •       });
            

• document.getElementById(‘cancelDelete’).addEventListener(‘click’, function() {
• document.getElementById(‘deleteModal’).classList.add(‘hidden’);

• • • • • •       });
            

• document.getElementById(‘confirmDelete’).addEventListener(‘click’, function() {
• Handle the deletion here
• console.log(‘Deleting…’);

• • • • • •       });
            

• • • • • •     </script>
            

• DELETE employees
• Router::post(‘/hr/employees/delete’, function () {

• • • • • • $db = Database::getInstance();
            

• • • • • • $conn = $db->connect();
            

• • • • • • $idToDelete = $_POST['id'];
            

• • • • • • $query = "DELETE FROM employees, employment_info, account_info, salary_info, tax_info, benefit_info WHERE id = :id";
            

• • • • • • $stmt = $conn->prepare($query);
            

• • • • • • $stmt->execute([':id' => $idToDelete]);
            

• Execute the statement

• • • • • • $stmt->execute();
            

• • • • • • $rootFolder = dirname($_SERVER['PHP_SELF']); header("Location: $rootFolder/hr/applicants");
            

• • • • • • });`

Formkit autoanimate doesn’t work on my list.

My main.js:

import { createApp } from 'vue';
import App from './App.vue';
import './styles/app.css';
import components from '@/components/UI';
import router from '@/router/index.js';
import store from '@/store';
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'

const app = createApp(App)

components.forEach(component => {
  app.component(component.name, component)
})

app
  .use(autoAnimatePlugin)
  .use(router)
  .use(store)
  .mount('#app');

List:

<div v-auto-animate>
  <HospitalItem
    v-for="hospital in hospitals"
    :key="hospital._id"
    :hospital="hospital"
    @delete-hospital="deleteEmit"
  >
  </HospitalItem>
</div>

Please help me fix this

I am new to React native i have a problem withe the expo DocumentPicker for some reason the DocumentPicker does not select any file, and it always shows that Selected Document: None

import React, { useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import * as DocumentPicker from "expo-document-picker";

export default function App() {
  const [document, setDocument] = useState(null);

  const pickDocument = async () => {
    const result = await DocumentPicker.getDocumentAsync({ type: 'application/pdf' });
    if (result.type === "success") {
      setDocument(result);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Selected Document: {document ? document.name : "None"}
      </Text>
      <Button title="Pick a file" onPress={pickDocument} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
  },
  paragraph: {
    marginTop: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
  },
});

I am making a simple chat app website in Socket.io. But emit method not working in client.
when i do on and emitting event from client it doesn’t do on function
here is client html body code :

<body>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button>Send</button>
  </form>

  <script src="/socket.io/socket.io.min.js"></script>
  <script>
    const socket = io();

    socket.on("chat", (msg) => {
      console.log(msg);
    });

    socket.emit('chat', 'hello');
  </script>
</body>

and this server file content:

const express = require("express");
const { createServer } = require("node:http");
const { join } = require("node:path");
const { Server } = require("socket.io");

const app = express();
const server = createServer(app);
const io = new Server(server);

app.get("/", (req, res) => {
  res.sendFile(join(__dirname, "index.html"));
});

io.on("connection", (socket) => {
  console.log("a user connected");
});

server.listen(4001, () => {
  console.log("server running at http://localhost:4001");
});

I have this canvas component, i want to seprate these sections using an arrow that goes circular, is there any way i can achieve this using lineTo.

https://codesandbox.io/p/sandbox/clever-wind-dg868y
this is what i currently have

I tried move and lineTo but it’s not working for different sections in the canvas

my home screen showing like this
i have used react navigation and my status bar is coming inside background image but not the bottom button which comes on my android device

import { View, Text, StyleSheet, Image, Animated } from 'react-native';
import { useWindowDimensions, TouchableOpacity } from 'react-native';
import React, { FC, useEffect, useState } from 'react';
interface SliderSwiperProps {
item: any;
}
const SliderSwiper: FC<SliderSwiperProps> = ({ item}) => {
const { width } = useWindowDimensions();
return (
<Image source={item.image} style={styles.image} />
);
};
export default SliderSwiper;
const styles = StyleSheet.create({
image: {
flex: 1,
justifyContent: 'center',
resizeMode: 'cover',
width: '100%',
},
});

[1]

This is new to me and Im trying to learn so my terminology and code may be not be the best :).

I have code like below. createCustomer adds row to a table. My intention is if missing data then dont call the db function.

    try {
      if (!username || 
        !password || 
        !email || 
        !firstname || 
        !lastname || 
        !phone_number||
        !role) {
        next({
          name: "MissingCustomerDataError",
          message: "Required Field - username, password, email, firstname, lastname, phone_number"
        });
        // throw new RouteError({
        //     name: "MissingCustomerDataError",
        //     message: "Required Field - username, password, email, firstname, lastname, phone_number"
        //   });
      }
   ...(some more code)
      const cust = await createCustomer({ 
        username, 
        password, 
        email, 
        firstname, 
        lastname, 
        phone_number, 
        role, 
        address });

I would expect next(…) to “next” out of this logic and onto my error handler which I have attached after this route, but it still calls the db function. If I use throw it does seem to get out of this logic and into the catch block. Shouldnt next also leave this try block and move on? I think Im missing something conceptually.
Thanks

For the moment we are migrating from an old system using javascript for both backend and frontend code that is stored in a database and that code is interpreted by an external hidden api so we don’t know the engine that executes it.

Since the new stack is based on java we thought about transpiling those javascript scripts into java classes and then code the remaning engine and needed methodes for it to run.

The problem is that there is no transpiler as far as I know from javascript to Java.

PS: the code to be converted is relatively simple with basic loops, if and function calls there is no inheritance.

the solution I though about is:

• generate javascript AST with @babel
• transform that AST into another one compatible with a java parser
• use the compatible AST to generate java code (I couldnt find any library that does this)

I am currently making a chrome extension that looks for all the email addresses on a webpage and then highlights them to make them more visible. I was following a video that guided me on the script that searches for the emails but am not sure how to actually highlight them.

This is the code I have so far, but like I mentioned previously, I’m not quite sure how to proceed with it.

function scrapeEmailsFromPage() {
    
    const emailRegEx = /[w.=-]+@[w.-]+.[w]{2,3}/gim;

    
    let emails = document.body.innerHTML.match (emailRegEx);
}```

This is my App.js code in react

import React, { useState } from "react";
import Button from "@mui/material/Button";
import Modal from "@mui/material/Modal";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import mermaid from "mermaid";

mermaid.initialize({ startOnLoad: true });

export default function Popup() {
  const [open, setOpen] = useState(false);
  

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const children = `sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
  `;

  React.useEffect(() => {
    if (open) {
      mermaid.contentLoaded();
    }
  }, [open]);

  return (
    <div>
      <Button variant="contained" onClick={handleClickOpen}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{
            height: "90%",
            width: "90%",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            bgcolor: "background.paper",
            border: "2px solid #000",
            boxShadow: 24,
            p: 4
          }}
        >
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Mermaid Diagram
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            <div className="mermaid" style={{ height: "70%", width: "70%" }}>
              {children}
            </div>
          </Typography>
        </Box>
      </Modal>
    </div>
  );
}

What i am trying to do is , on click of a button, i want to open a modal popup and i want to render the script inside modal. but initially when the modal opens, it is displaying the script as a string, and when it re-renders with the modal in open state, then it is rendering the script.
But my case is when the modal opens first time, at that time itself i want to render the script.How to achieve that?

1ST CODE VARIANT:

    let getLastDayOfMonth = function(year, month) {
        let date = new Date();
        date.setFullYear(year, month, 28);
        while (date.getMonth() === month){
            date.setDate(date.getDate() + 1);
        }
        date.setDate(date.getDate() - 1);
        return date.getDate();
    };
    alert(getLastDayOfMonth(2012, 1)); //29

2ND CODE VARIANT:

    let getLastDayOfMonth = function(year, month) {
        let date = new Date();
        date.setFullYear(year);
        date.setMonth(month);
        date.setDate(28);
        while (date.getMonth() === month){
            date.setDate(date.getDate() + 1);
        }
        date.setDate(date.getDate() - 1);
        return date.getDate();
    };
    alert(getLastDayOfMonth(2012, 1)); //not correctly

THE QUESTION:
Why does the 1st code work correctly but the second doesn’t alert correct day (if the month number = 1 it becomes March not Feb and idk why). Thanks!

With JS, it’s a known problem that b does not work well with strings containing special chars (JS engine believes chars like ç are word bondaries).

So I have this code:

"aaa aabb cc ccc abba".replace(/b((.)2+)b|(.)3+/g,"$1$3");

It correctly returns aaa ab cc ccc aba. However, if the input string has special chars, it does not work anymore, for example:

"ááá áább çç ççç ábbá".replace(/b((.)2+)b|(.)3+/g,"$1$3");

The code above returns á ább ç ç ábbá which is not expecetd, it should have been ááá áb çç ççç ábá.

So I decided I didnt want to use b anymore because I will only accept word boundaries as (space) and begginig/end of string (^ or $). So I tried this regex:

"ááá áább çç ççç ábbá".replace(new RegExp("(^| )((.)\3+)( |$)|(.)\5+","g"),"$1$2$4$5");

It returned ááá áb çç ç ábá which is almost correct, it should have returned ááá áb çç ççç ábá.

How can I make the last regex work without using lookheads, lookbehind, lookaround… Is there an easy fix to the last regex? Or, is there a fix to the b that makes b work as expected?

With one Subscriber, an async list showing all items from Observable, what is the most efficient way to temporarily filter results based on user provided search criteria as a string?

The component imports TokenService and the template subscribes to tokens: tokenService.tokens | async

// ./token.service.ts

@Injectable({
  providedIn: 'root'
})
export class TokenService {

  private tokens$ = new BehaviorSubject<Token[]>([]);

  readonly tokens = this.tokens$.asObservable();

  constructor() {
    this.getTokens();
  }

  filterTokens(q?: string) { ... }

  ...
}

The output should display a list of items with names loosely matching the provided search criteria. Provided the letter w (lower case) as input “Work” and “New” would display from a set of ['Work', 'Test', 'New'].

Passing the newly filtered values to the BehaviorSubject obviously makes the values unrecoverable unless cached elsewhere.

  filterTokens(q?: string): void { 
    this.tokens$.next(
      this.tokens$.getValue().filter(t => t.issuer.toLowerCase().includes(q.toLowerCase()))
    );
  }

The following method returns “Work” and “New” when passed tokenService.filterTokens('r') | async:

  filterTokens(q?: string): Observable<Token[]> {
    return this.tokens.pipe(
      map(tt => tt.filter(t => t.issuer.toLowerCase().includes(q.toLowerCase())))
    );
  }

This however, is not dynamic based on user input.