Want to create a project on Extraction of auto generated subtitles with Java

I want to build a project that extracts auto-generated captions from a YouTube link, and I plan to use Java for this project. I’ve completed my core Java studies and want to learn additional topics while working on this project. Could you provide a step-by-step guide for successful completion? Also, is this project a good choice, or are there other better project ideas I should consider?

Well I have tried to search on net but cannot find any thing
Do you guys know any good place where I can study this

Vercel Custom Domain Not loading

I have a website that was deployed to Vercel, for months now it has been working properly up until today, the custom domain stopped loading and gives me the browser error This site can’t be reached but then the vercel default domain still keeps working properly and loading the website. I didn’t make any changes to the DNS configuration settings and I cross checked, its still properly configured.

Please I’m stranded and out of options, my business is suffering, can someone kindly help me with how I can go about solving the issue?

Thanks!

CSS style applying to element but styles not working? [closed]

This is probably going to be a really silly mistake I can’t spot,

Anyhow, I have a css class called ‘star’ I am applying to a div with ‘setAttribute()’, this can be seen applied to the div in Inspector. However, the styles under ‘.star’ aren’t applying to it I don’t think.. mostly my animation which isn’t appearing. I’ve checked in the inspector and I cannot see the styles listed or overwritten anywhere. However, the other two classes I apply work (fas and fa-star).

note, I am using angular and have placed this code outside of the components class – is this correct? Should it be inside the class?

SCSS:

 .star::before {
    text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 50px #fff;
  }
  
  .star {
    position: absolute;
    left: -20px;
    animation: animate 5s linear forwards;
  }
  
  @keyframes animate {
    0% {
      transform: translateX(0) rotate(0deg);
      opacity: 1;
    }
  
    60% {
      opacity: 1;
      
    }
    80% {
      opacity: 0.5;
    }
  
    100% {
      transform: translateX(100Vw) rotate(360deg);
      opacity: 0;
    }
  }

My JS/TS:

function stars() {

   let e = document.createElement("div");
   const parent = document.getElementById("header-bg");

   let parent_height = 0;
   if (parent){
     parent_height = parent.offsetHeight;
   }

   e.setAttribute("class", "fas fa-star star");

   if (parent){parent.appendChild(e);};
   e.style.top = Math.random() * + parent_height + "px";
   e.style.position = "relative";
   e.style.color = "#ffffff";

   let duration = Math.random() * 3;

   const array=[6, 8, 10, 12]
   e.style.fontSize = array[Math.floor(Math.random() * array.length)] + "px";
   e.style.animationDuration = 10 + duration + "s";
   setTimeout(function () {
     if (parent){parent.removeChild(e);};
   }, 10000);
 }

setInterval( () => {
   stars();
 }, 500);

Inspector:
enter image description here

How to pass the value of a javascript variable to a golang function using html template

I have a GO web application that is using the html templating feature. I am attempting to encrypt the user’s password before it is submitted in a form. The steps to accomplish this are:

  1. Use javascript to capture the raw value passed by the user in the input field
  2. Call the Go encrypt function provided the in the Go template which takes in a password parameter that returns an encrypted value.
  3. The newly encrypted value should then be forwarded as the new password value to the POST form value.

However as the listed steps are being executed the expected output is incorrect. Instead of encrypting the value of the input, it encrypts the variable name as shown below.

username: mass 
encrypted: ABZT7a7K+l7uMu2ZMq/K8ucyJKwdq0TVTmKlShBLo40iPeA3U2Pm9oTCCw==
decrypted:  ' + raw_val + '

So how do I get the javascript value passed into the encrypt function as opposed to the variable name being passed in ? I am not very familiar with javascript, so either I am concatenating the strings incorrectly or I could be trying the impossible but I am not aware.

Below is the html source code I have in the template.

<!DOCTYPE html>
<html>
<head></head>
<title>Buy Bot</title>
<body>
  <form name="login" action="/login" method="POST" onsubmit="encrypt()">
    <div>
    <label for="username">username:</label>
    <input id="username" type="text" name="username" placeholder={{.KycInfo}} required>
    <div>
    </br>
    <div>
    <label for="password">password:</label>
    <input id="password" type="password" name="password" placeholder="password" required>
    </div>
    </br>
    <div>
      remember me <input id="rememberme" type="checkbox" name="rememberme">
    </div>
    </br>
    <div>
    <input type="submit" value="login">
    </div>
  </form>
</body>
</html>

<script  
  type="text/javascript">
  function encrypt(){
    var raw_val = document.getElementById("password").value
    console.log("password: ",raw_val)
    let encrypted = '{{.Encrypt "' + raw_val + '"}}'
    console.log("encrypted: ",encrypted)
    document.login.password.value = encrypted;
    return true;
  } 
</script>

Create an array of objects using the different values from an object

I’m trying to creacte an array of objects from a single object using the keys and values form a single object, for example, I have this object

const family = {
ARMANDO: 45,
KIRI: 39,
JOSH: 12,
MARCUS: 79,
NAMI: 1,
MARIA: 77,
ARIEL: 2,
PETER: 1,
}

And I would like to convert it in an array of objects

const family = [
    {ARMANDO: 45},
    {KIRI: 39},
    {JOSH: 12},
    {MARCUS: 79},
    {NAMI: 1},
    {MARIA: 77},
    {ARIEL: 2},
    {PETER: 1},
    ]

I’m trying to find a way to do it and looking for tutorials but couldn’t find anything like this.

sessionStorage not displaying values in wanted input fields

I’ve been building a website with Webflow, and we ask participants to register to online classes.
I’ve built a 3 step form (step 1, personal info / step 2 billing info / step 3 a review of the order).
A dev friend of mine gave me a demo snippet to properly use sessionStorage and store the entries from steps 1 & 2 then display them in step 3.
It was not working well, so I added some DOMlistener code, and it actually worked well.
1 month later, I didnt touch anything, but it doesn’t work anymore, and I’ve been trying to fix it, but for the love of me, I just cant.

Here is the current code:

<script> 
  document.addEventListener('DOMContentLoaded', function() { 
    const btnAttNext = document.getElementById("btn-att-next"); 
    const btnBillNext = document.getElementById("btn-bill-next");   
    btnAttNext.addEventListener("click", storePersonalInfo); 
    btnBillNext.addEventListener("click", storeBillingInfo);
    
    function storePersonalInfo() {
      // Stocker les informations personnelles dans sessionStorage
      var personalInfo = {};
      personalInfo.designation = document.getElementById("att-designation").value;
      personalInfo.firstname = document.getElementById("att-firstname").value;
      personalInfo.lastname = document.getElementById("att-lastname").value;
      personalInfo.indicative = document.getElementById("att-indicative").value;
      personalInfo.phone = document.getElementById("att-phone").value;
      personalInfo.email = document.getElementById("att-email").value;
      personalInfo.title = document.getElementById("att-title").value;
      personalInfo.company = document.getElementById("att-company").value;
      sessionStorage.setItem('personalInfo', JSON.stringify(personalInfo));
    
      // Passer à l'étape 2
      document.getElementById("regform-step1").style.display = "none";
      document.getElementById("regform-step2").style.display = "block";
    }
    
    function storeBillingInfo() {
      // Stocker les informations de facturation dans sessionStorage
      var billingInfo = {};
      billingInfo.companyadd = document.getElementById("bill-companyadd").value;
      billingInfo.zipcode = document.getElementById("bill-zipcode").value;
      billingInfo.city = document.getElementById("bill-city").value;
      billingInfo.country = document.getElementById("bill-country").value;
      billingInfo.designation = document.getElementById("bill-designation").value;
      billingInfo.firstname = document.getElementById("bill-firstname").value;
      billingInfo.lastname = document.getElementById("bill-lastname").value;
      billingInfo.indicative = document.getElementById("bill-indicative").value;
      billingInfo.phone = document.getElementById("bill-phone").value;
      billingInfo.email = document.getElementById("bill-email").value;
      billingInfo.title = document.getElementById("bill-title").value;
      sessionStorage.setItem('billingInfo', JSON.stringify(billingInfo));
    
      // Passer à l'étape 3
      document.getElementById("regform-step2").style.display = "none";
      document.getElementById("regform-step3").style.display = "block";
    
      // Afficher le récapitulatif
      displaySummary();
    }
    
    function displaySummary() {
      // Récupérer les informations stockées et les afficher
      var personalInfo = JSON.parse(sessionStorage.getItem('personalInfo'));
      var billingInfo = JSON.parse(sessionStorage.getItem('billingInfo'));
    
      var summary = `
            console.log("Displaying PersonalInfo:", PersonalInfo);
            console.log("Displaying BillingInfo:", BillingInfo);
    
            document.getElementById("rev-att-designation").value = PersonalInfo.designation;
            document.getElementById("rev-att-firstname").value = PersonalInfo.firstname;
            document.getElementById("rev-att-lastname").value = PersonalInfo.lastname;
            document.getElementById("rev-att-indicative").value = PersonalInfo.indicative;
            document.getElementById("rev-att-phone").value = PersonalInfo.phone;
            document.getElementById("rev-att-email").value = PersonalInfo.email;
            document.getElementById("rev-att-title").value = PersonalInfo.title;
            document.getElementById("rev-att-company").value = PersonalInfo.company;
      document.getElementById("rev-bill-companyadd").value = BillingInfo.companyadd;
            document.getElementById("rev-bill-zipcode").value = BillingInfo.zipcode;
            document.getElementById("rev-bill-city").value = BillingInfo.city;
            document.getElementById("rev-bill-country").value = BillingInfo.country;
            document.getElementById("rev-bill-designation").value = BillingInfo.designation;
            document.getElementById("rev-bill-firstname").value = BillingInfo.firstname;
            document.getElementById("rev-bill-lastname").value = BillingInfo.lastname;
            document.getElementById("rev-bill-indicative").value = BillingInfo.indicative;
            document.getElementById("rev-bill-phone").value = BillingInfo.phone;
            document.getElementById("rev-bill-email").value = BillingInfo.email;
            document.getElementById("rev-bill-title").value = BillingInfo.title;
      `;
      document.getElementById("summary").innerHTML = summary;
    }
    
    function readOnly() {
        document.getElementById("rev-att-designation").readOnly = true;
        document.getElementById("rev-att-firstname").readOnly = true;
        document.getElementById("rev-att-lastname").readOnly = true;
        document.getElementById("rev-att-indicative").readOnly = true;
        document.getElementById("rev-att-phone").readOnly = true;
        document.getElementById("rev-att-email").readOnly = true;
        document.getElementById("rev-att-title").readOnly = true;
        document.getElementById("rev-att-company").readOnly = true;
        document.getElementById("rev-bill-companyadd").readOnly = true;
        document.getElementById("rev-bill-zipcode").readOnly = true;
        document.getElementById("rev-bill-city").readOnly = true;
        document.getElementById("rev-bill-country").readOnly = true;
        document.getElementById("rev-bill-designation").readOnly = true;
        document.getElementById("rev-bill-firstname").readOnly = true;
        document.getElementById("rev-bill-lastname").readOnly = true;
        document.getElementById("rev-bill-indicative").readOnly = true;
        document.getElementById("rev-bill-phone").readOnly = true;
        document.getElementById("rev-bill-email").readOnly = true;
        document.getElementById("rev-bill-title").readOnly = true; 
        }
    
    function submitToServer() {
      // Récupérer toutes les informations stockées
      var personalInfo = JSON.parse(sessionStorage.getItem('personalInfo'));
      var billingInfo = JSON.parse(sessionStorage.getItem('billingInfo'));
    
      var clientData = {
        ...personalInfo,
        ...billingInfo,
      };
    
      fetch('https://your-hubspot-api-endpoint.com/createClient', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(clientData)
      })
      .then(response => response.json())
      .then(data => {
        alert("Client créé avec succès !");
      })
      .catch(error => {
        console.error('Erreur:', error);
      });
    }
</script>

The goal is to go from this enter image description here

to this enter image description here

with the previous entries displayed in the read-only input fields in step3.

Scrollbar issues – html/css and tailwindcss

I want to have a page that consums the full height of the browser window. I have a navbar on top and then the main content is split into a list of cards on the left (which should be scrollable), and a map on the right side (which should consume the full height minus the navbar and should NOT be scrollable.

Problem: the entire page (so also the map) is scrollable – it looks like as much scrollable as the navbar’s height.

<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
<div class="h-screen bg-yellow-400">
  <div class="py-8">
    my navbar
  </div>
  <div class="flex h-full">
    <div class="w-2/5 h-full flex flex-col gap-6 justify-start items-center overflow-y-scroll p-8 bg-blue-400">
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
    </div>
    <div class="w-full h-full bg-red-400">map</div>
  </div>
</div>

Converting CJS Module to ECMAScript when export contain an arrow function

On Server Application Structure documentation page of Socket.io, two methods are presented to use modules for better code clarity. Those modules are CommonJS.

I managed to translate the first to ESM, but the syntax of the second one blocks me, with the (io) => containing multiple functions.

As a reference, here is the code :


index.js

const httpServer = require("http").createServer();
const io = require("socket.io")(httpServer);

const { createOrder, readOrder } = require("./orderHandler")(io);
const { updatePassword } = require("./userHandler")(io);

const onConnection = (socket) => {
  socket.on("order:create", createOrder);
  socket.on("order:read", readOrder);

  socket.on("user:update-password", updatePassword);
}

io.on("connection", onConnection);


orderHandler.js

module.exports = (io) => {
  const createOrder = function (payload) {
    const socket = this; // hence the 'function' above, as an arrow function will not work
    // ...
  };

  const readOrder = function (orderId, callback) {
    // ...
  };

  return {
    createOrder,
    readOrder
  }
}

What is your solution to translate those two files and keeping the same one-line clarity as :

socket.on("user:update-password", updatePassword);

Also, is there a specific terminology about this kind of export orderHandler.js ? (like something called “an arrowed object” or “topped class level export”)

I searched on Node.js documentation, without success.

With the help of AI, I managed a result, but the code became way less elegant (but still working).

blazor popup positioning in dynamic table

I’m working on a Blazor application where I need to position a popup close to a button in a dynamically generated table. The table is populated with data coming from the backend. One of the columns displays a series of tags. When there are more than 4 tags, I want to display a “+n tags” element. Hovering over this element should display a popup right next to it.

I’m trying to achieve this without using JavaScript, purely with Blazor. However, the following code isn’t working as expected, especially for rows lower down in the table. The popup appears with an increasing offset as I go further down the table.
Thanks
Here is the Blazor code I’m using:

I expect the popup to always be close to the right line trigger. It’s working for some lines, but there’s an increased offset lower down on the table

Building a performant local media library in React Native

I am building a local media browser with React Native. For simplicity’s sake, let’s say my use case is recreating the UX of the default iOS Photos app. My app has additional functionality, but these are the relevant attributes I’m concerned with:

  1. All media is local to the device, and there may be a large number of media items.
  2. The app loads quickly, with minimal perceptible delay before photos are displayed and interactable
  3. Photos from any date are accessible without additional loading
  4. Scroll performance is smooth, with no additional loading when scrolling quickly

Here is a git repo with a minimal example app showing my current approach. It’s extremely simple, consisting of only 2 components (App and Gallery). It requests Media Library access, loads all local photos (up to 100k), and displays them in a FlashList. You can scroll the list or press “back to top.”

I’m testing on an iPhone 15 Pro, which has ~25k photos. The initial fetch takes about 1 second. When scrolling rapidly, you’ll see stale images briefly before the correct ones get loaded. The issue is more pronounced when pressing the “back to top” button. It more or less works, but it’s not as performant as the native Photos app.

Using the new architecture doesn’t seem to make much difference, nor does switching between expo-image and react native’s image. If I pass a recyclingKey prop to ExpoImage, I’ll see blank squares instead of stale images, which doesn’t seem better.

Is the difference entirely accounted for by React Native’s inherent overhead? Or is there some other way to improve this while still using RN? If the only way to improve it would be to write my own native components, what might that structure look like, assuming I want to keep the rest of the app in RN, the images need to be interactive, etc?

Note: I am aware of pagination, loading spinners, etc. Those would be a viable approach, but are a different UX from what I’m trying to achieve.

Camera not showing Meshes without controls.update();

I am working on a project and facing an issue with the camera. I had orbit controls set up during development, but now when I’m testing things, I removed the controls.update() from the tick function so the camera rotates as set up in the animation, animation done using GSAP. But I am only seeing a black screen, until i start scrolling, then everything renders. But when I put back the controls.update everything renders normally, but then the camera doesn’t rotate as intended.
Any help would be appreciated.

Something to note though: At a point in the animation, I have the scene background change. That is rendering, I can see it. But not the rest, until i scroll.

I tried camera.updateProjectionMatrix() in the animation loop. But it did not work.
I tried keeping the controls but setting them to disabled while updating it in the animation loop. It rendered the scene, but the rotation got messed up, it didn’t follow the animation.

navigator.sendBeacon() different behaviors

I have two servers(machines) on which a Java application is hosted in each one of them.

In this Java app,a jsp is calling another jsp as below,

navigator.sendBeacon(demo.jsp);

But when accessing the app in one of these servers, it’s giving 403 Unknown error, whereas the other app(clone) works fine in the other server.

What could be the reason ?
How is the server config affecting this ?

Should I Separate Configurations into Multiple JSON Files for Better Performance in a DataTable? [closed]

I’m working on a web application that uses multiple data tables on the same page. Each data table accepts a JSON file as a prop. The JSON file contains a list of objects, and each object has a config property.

Currently, all configurations are included directly within each object in the same JSON file.

I am considering separating the config property into separate JSON files that each object would reference.

My main concern is about performance. If each object in the data table JSON file points to a separate configuration JSON file, could this cause performance issues when multiple data tables are loaded on the same page?

Would it be better to keep all configurations within the same JSON file, or should I separate them for some other reason (e.g., maintainability, readability)?

What I’ve Tried or Considered:

Keeping all configurations within the same JSON file for simplicity.

Separating configurations into individual JSON files for each object to potentially reduce file size and improve maintainability.

Questions:

What are the performance implications of referencing multiple JSON files compared to having all configurations in a single file?

Are there best practices for managing configurations in this scenario?

Any advice or insights would be greatly appreciated!

YouTube are blocking auto clickers on ads skips

I developed an extension to automatically skip Youtube ads. For years it worked fine, but today I ran a Firefox web-ext run and the extension is not working anymore.

The problem it seems that Youtube are blocking my clicks by javascript.

On my normal browser and on Google Chrome it’s working just fine, but that is an A/B test. To those who get the new layout the extension is not working. I saw some other Google extensions that have people complaining that the extension was working but not anymore.

You can run the test when an ad is shown and the skip button is available, run:

document.querySelector('div.video-ads button.ytp-skip-ad-button, div.video-ads button.ytp-ad-skip-button-modern').click();

This would click on the skip button, but if you are on the new A/B test, it does not work. I tried everything I could think of. No luck with the clicking.

There is somebody that are having this issue with their extension too?
Does somebody know how to avoid this block?

Is It possible to read and define HLS stream key by a vriable instead of stream.key file?

I encrypted an MP4 video file FFMPEG. That gave me a playlist manifest file (namely stream.m3u8), a key file (namely stream.m3u8.key) and some .ts files. I used code below to play stream.m3u8 file and it worked

<head>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.4.1/video.min.js"></script>
</head>
<body>
    <video id="example-video" class="video-js vjs-default-skin" controls="controls" width="640" height="360">
       <source src="./stream.m3u8" type="application/x-mpegURL" />
    </video>
    <script>
        var player = videojs('example-video');
    </script>
</body>

After I tried to use input and select file attributes and I tried code below

<html>
    <head>
        <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
        <script src="https://vjs.zencdn.net/7.4.1/video.min.js"></script>
    </head>

    <body>
        <label for="input">Choose a video file to process:</label>
        <input type="file" id="input" name="input_video">
        <p id="demo"><p/>
        <video id="video" class="video-js vjs-default-skin" width="320" height="240" controls style="display: none;">
            <source id="vid" type="application/x-mpegURL" />
        </video>
    </body>
    
    <script>
        document.getElementById("input").addEventListener("change", function() {
          var media = URL.createObjectURL(this.files[0]);
          
          var vid = document.getElementById("vid");
          vid.src = media;
          
          var video = document.getElementById("video");
          video.style.display = "block";
          video.play();
          
          document.getElementById("demo").innerHTML = vid.src;
          
          var player = videojs('video');
          //player.play();
        });
    </script>

</html>

The code above can read stream.m3u8 playlist file but can not read “key file” because the location of key file is define in stream.m3u8 itself.
enter image description here

When I browse the stream.m3u8 file and try to play, the play window shows the duration (by seconds) but tries and tries and tries to play but can not play. This shows that it can not recall key file.
enter image description here

I believe that if I define key file location out of manifest file, for example inside JavaScript code this problem will be solved.
HOW CAN I DEFINE KEY FILE LOCATION OUT OF PLAYLIST FILE?