Resize divs with default size risizing window

I have seen similar topic with answers about size in % or vh, but its a bit different.
I have a set of different plots with sizes 900×600 by default using this CSS:

.chartbox {
    display: flex;
    flex-wrap: wrap;
    background-color: DodgerBlue;
    justify-content: space-around;
}
.chart {
    background-color: #f1f1f1;
    width: 900px;
    height: 600px;
    margin: 10px;
    position: center;
}

how it looks

And I want them to resize automaticly when the window is resizing (or there is a small screen)
Im using charts from ECharts, with js code smth like:

var myChart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
    ]
};

myChart.setOption(option)

I tried to use % and vh to .chart height and width, but they conflict with default size.
I tried to use max-width and max-height without width and height, but charts do not appear (mb its a ECharts feature).
I expect the following:

  1. if 3 charts 900×600 can fit the screen then place them
  2. else if 3 charts 600×400 can fit the screen then place them
  3. else if 2 charts 900×600 can fit the screen then place them
  4. else if 2 charts 600×400 can fit the screen then place them
  5. else if 1 charts 900×600 can fit the screen then place it
  6. else if 1 charts 600×400 can fit the screen then place it
  7. else resize as it possible

I have create my first project using JavaScript, It’s a Pomodoro Clock, I am learning JavaScript, is it a good code or not [closed]

Description:
I recently completed my first JavaScript project, a Pomodoro clock, without relying on tutorials. I’d like feedback on my code to improve my skills further. Here’s a detailed overview of how I implemented it:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pomodoro Clock</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">

    <div class="app-title">
      <div class="double-line"></div>
      <p>Pomodoro Clock</p>
      <div class="double-line"></div>
    </div>

    <div class="adjustment-div">

      <div class="break-length-div">
        <p class="heading">Break Length</p>
        <div class="value-adjustment">
          <button class="minus">-</button>
          <div class="minutes"></div>
          <button class="plus">+</button>
        </div>
      </div>

      <div class="session-length-div">
        <p class="heading">Session Length</p>
        <div class="value-adjustment">
          <button class="minus">-</button>
          <div class="minutes"></div>
          <button class="plus">+</button>
        </div>
      </div>

    </div>

    <div class="session">
      <div class="heading">
        Start
      </div>

      <div class="time">
        00:00
      </div>
    </div>

    <div class="controls">

      <div class="reset-button">
        <button>Reset</button>
      </div>

      <div class="start-button">
        <button>Start</button>
      </div>

    </div>

    <div class="remarks">
      Designed based on a pen by <u>Edd Yerburgh</u> and code by <u>Crying Wolfe</u>
    </div>

  </div>
  <script src="main.js"></script>
</body>

</html>

The CSS of the clock

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #0e9aa7;
  font-family: sans-serif;
  height: 100%;
  margin: 0;
  padding-top: 40px;
  display: flex;
  justify-content: center;
}

.container {
  width: 100vh;
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-title {
  display: flex;
  align-items: center;
}

.double-line {
  height: 5px;
  width: 200px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

.app-title p {
  color: white;
  font-size: 26px;
  font-weight: bold;
  padding: 0 15px 0 15px;
}

.adjustment-div {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.break-length-div,
.session-length-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  width: 130px;
}

.break-length-div .heading,
.session-length-div .heading {
  color: white;
  font-size: 15px;
  font-weight: 600;
}

.value-adjustment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  width: 90%;
}

.minus,
.plus {
  background: transparent;
  height: 30px;
  width: 30px;
  color: #3db9c5;
  border: 1px #3db9c5 solid;
  border-radius: 3px;
  cursor: pointer;
}

.minus:hover,
.plus:hover {
  color: #2dd6e6;
  border-color: #2dd6e6;
}

.value-adjustment .minutes {
  background-color: white;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.session {
  margin-top: 30px;
  height: 280px;
  width: 280px;
  border-radius: 50%;
  border: 5px solid #3db9c5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}

.session .heading {
  font-size: 26px;
  font-weight: bold;
  position: absolute;
  top: 60px;
}

.session .time {
  font-size: 76px;
  font-weight: bolder;
  margin-top: 40px;
}

.controls {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin-top: 30px;
  width: 200px;
}

.start-button button,
.reset-button button {
  width: 80px;
  height: 30px;
  background: transparent;
  color: white;
  border: 2px solid #3db9c5;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

.start-button button:hover,
.reset-button button:hover {
  border-color: #2dd6e6;
}

.remarks {
  margin-top: 40px;
  color: #80e4eb;
}

This is my JavaScript

console.log("Happy Coding, with Pomodoro Timer!");

const break_time_adjustments = () => {
  // Getting all elements to set the length of Break
  const increase_break_time_button = document.querySelector(
      ".break-length-div .value-adjustment .plus"
    ),
    decrease_break_time_button = document.querySelector(
      ".break-length-div .value-adjustment .minus"
    ),
    break_time_value = document.querySelector(
      ".break-length-div .value-adjustment .minutes"
    );

  // Performing Operations on the elements
  let break_time = 5;
  break_time_value.innerHTML = break_time;

  // Getter function to retrieve the current brake time
  const get_break_time = () => break_time;

  // Setter funtion to set the update the break time and display it
  const set_break_time = (new_time) => {
    break_time = new_time;
    break_time_value.innerHTML = break_time;
  };

  // Increasing the length of Break
  function increase_break_time() {
    set_break_time(break_time + 5); // Increasing the break time by 5
  }

  increase_break_time_button.addEventListener("click", increase_break_time);

  // Decreasing the length of Break
  function decrease_break_time() {
    if (break_time <= 0) {
      break_time = 0;
    } else {
      set_break_time(break_time - 5); // Decreasing the break time by 5
    }
  }

  decrease_break_time_button.addEventListener("click", decrease_break_time);

  return { get_break_time, set_break_time };
};

const { get_break_time, set_break_time } = break_time_adjustments();

break_time_adjustments();

const session_time_adjustments = () => {
  // Getting all elements to set the length of a session
  const increase_session_time_button = document.querySelector(
      ".session-length-div .value-adjustment .plus"
    ),
    decrease_session_time_button = document.querySelector(
      ".session-length-div .value-adjustment .minus"
    ),
    session_time_value = document.querySelector(
      ".session-length-div .value-adjustment .minutes"
    );

  // Performing Operations on the elements
  let session_time = 25;
  session_time_value.innerHTML = session_time;

  // Getter function to retrieve the current session time
  const get_session_time = () => session_time;

  // Setter function to update the session time and display it
  const set_session_time = (newTime) => {
    session_time = newTime;
    session_time_value.innerHTML = session_time;
  };

  // Increasing the length of Session
  function increase_session_time() {
    set_session_time(session_time + 5); // Increasing length of Session time by 5
  }

  increase_session_time_button.addEventListener("click", increase_session_time);

  // Decreasing the length of Session
  function decrease_session_time() {
    if (session_time <= 0) {
      session_time = 0;
    } else {
      set_session_time(session_time - 5); // Decreasing length of Session time by 5
    }
  }

  decrease_session_time_button.addEventListener("click", decrease_session_time);

  // Return getter and setter functions
  return { get_session_time, set_session_time };
};

const { get_session_time, set_session_time } = session_time_adjustments();

// Initializing a variable to store session interval id
let session_interval_id;

const update_time = (session_duration) => {
  // Getting elements to update the Time
  const Time = document.querySelector(".time");
  const heading = document.querySelector(".session .heading");
  heading.innerHTML = "Session";

  let minutes = session_duration;
  let seconds = 0;

  // Updating Time

  const timer = setInterval(() => {
    if (minutes === 0 && seconds === 0) {
      clearInterval(timer); // Stop the timer when it reaches 0
      break_time(get_break_time()); // Start the break
      // break_time(1); // For testing
      return;
    }

    if (seconds === 0) {
      minutes--;
      seconds = 59;
    } else {
      seconds--;
    }

    Time.innerHTML = `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
  }, 1000);

  session_interval_id = timer;

  return timer;
};

// Initializing a varibale to store break time interval id
let break_interval_id;

const break_time = (break_duration_time) => {
  //Getting elements to start break time
  const Time = document.querySelector(".time");
  const heading = document.querySelector(".session .heading");
  heading.innerHTML = "Break";

  // Starting Break time
  let break_duration = break_duration_time;
  let minutes = break_duration;
  let seconds = 0;

  const break_timer = setInterval(() => {
    if (minutes === 0 && seconds === 0) {
      clearInterval(break_timer); // Stop the timer when it reaches 0
      update_time(get_session_time());
      // update_time(1); // For Testing
      return;
    }

    if (seconds === 0) {
      minutes--;
      seconds = 59;
    } else {
      seconds--;
    }

    Time.innerHTML = `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
  }, 1000);

  break_interval_id = break_timer;

  return break_timer;
};

const start = () => {
  // Getting elements to start the clock
  const start_button = document.querySelector(".controls .start-button button");

  // Flag to check if previous session is already running
  let is_session_running = false;

  // Starting the clock
  function start_clock() {
    if (is_session_running) {
      clearInterval(session_interval_id); // Clearing previous session
      clearInterval(break_interval_id); // Clearing previous break
    }

    update_time(get_session_time());
    // update_time(1); // For Testing
    is_session_running = true;
  }

  start_button.addEventListener("click", start_clock);
};

start();

const stop = () => {
  // Getting Elements to stop the clock
  const reset_button = document.querySelector(".controls .reset-button button");
  const heading = document.querySelector(".session .heading");
  const Timer = document.querySelector(".session .time");

  // Adding funcionality to stop button
  function reset_the_timer() {
    clearInterval(session_interval_id);
    clearInterval(break_interval_id);
    heading.innerHTML = "Start";
    Timer.innerHTML = "00:00";
  }

  reset_button.addEventListener("click", reset_the_timer);
};

stop();

Key Features:

Modularization: I modularized my code by breaking it down into functions for adjusting break and session times, updating the time display, starting the session, and stopping/resetting the clock. This approach promotes code reuse and maintainability.

Event Handling: Event listeners are used to handle user interactions, such as increasing/decreasing break and session times, starting the clock, and resetting it, making the application interactive and user-friendly.

Error Handling: I implemented basic error handling to ensure that session and break times do not become negative and are capped at a minimum of 0.

Functionality: The Pomodoro clock alternates between session and break periods based on user-defined times, providing a functional and intuitive experience.

Request for Feedback:
I would appreciate feedback on the overall structure and readability of my code, as well as suggestions for optimization and improvement. Additionally, any advice on best practices or alternative approaches would be valuable for my learning journey.

Thank you for your time and assistance!

CSS not applied to an “input” field added by jQuery within a Symfony 6 form

I am a bit confused and I am not very familliar with CSS/JS.
I try to dynamically add an “input” field to my form in order to add an author of a document.
Adding the field technically works as it takes a text and upload it in the database.
Yet the added “input” field with jQuery does not take the CSS properties of the webpage. The field 1 should look like the field 0.

CSS Issue

I checked in the web dev tool and indeed the css elements are different for the two input fields.

 comparison

Although the classes are identical to the two input fields, the applied css is different.
So that’s why i am confused. There must be something else managing the css of the input field so I guess the parent with pseudo-element maybe. Moreover I read here that JS cannot work with pseudo-element or that we have to use other ways.

Sorry If I ask a stupid question but is my issue really with pseudo-elements ? And if yes, is it possible to update the styling with the newly added element or is my issue completely different than I think ?

How to change arrow size using react-sigma library?

I am trying to change graph’s edge arrow size in React application using react-sigma library. Arrow size is so small that it is very hard to see it without zooming in. It seems that changing minArrowSize attribute in SigmaContainer settings does not work anymore in v2, it only worked in v1.

I have seen this answer https://stackoverflow.com/a/74287630/23819306 that might be helpful but I am not sure how to implement it in my React application. It seems that library code is being edited but I am only importing that library in my code. How to implement changes to react-sigma library?

This is code of my main component if it helps:

import React, { useState } from 'react';
import { SigmaContainer } from "@react-sigma/core";

import data from '../../newData.json';
import MyGraph from '../MyGraph/MyGraph';

export default function GraphRepresentation() {
  const [hoveredNode, setHoveredNode] = useState(null);
  const [pathData, setPathData] = useState(null);
  const [filters, setFilters] = useState({
    paths: {},
    nodes: {},
    edges: {},
    options: { explicitEdges: false, extraNodes: false, globalMode: true },
    explicitEdges: {},
    overlappingEdges: {}
  });

  return (
    <SigmaContainer
      style={{ height: "100vh", width: "100vw" }}
      settings={{
        defaultEdgeType: "arrow",
        zIndex: true
      }}
    >
      <MyGraph data={data} onGraphReady={(data) => {
        setFilters(data.filters);
        setPathData(data.pathData);
      }} />
      <Controls />
      <Panels filters={filters} setFilters={setFilters} pathData={pathData} />
      <Controllers hoveredNode={hoveredNode} setHoveredNode={setHoveredNode} filters={filters} />
    </SigmaContainer>
  );
};

Main tab doesn’t retain authenticated state after authenticating user in popup window using Laravel Socialite

I am working on a project with TALL Stack where I implemented OAuth2 using Laravel Socialite package. Initially, I made a simple link with the redirect uri. This approach works fine and the user gets authenticated with google seamlessly and gets redirected to the intended route. Currently I want to have the Google OAuth2 authentication page to open in a popup window and once the user is authenticated, the popup window closes then the main tab or window redirects the user to the intended route after authentication. The problem I am facing now is, the user gets authenticated within the popup window and the window closes after authentication. However, the main window does not retain the authenticated state of the user. As a result, the redirection doesn’t occur. Let me also mention that this only happens the first time the user gets authenticated. Once you authenticate the user subsequently, the redirection occurs within the popup window and the popup doesn’t close automatically. This indicates that the user actually get’s authenticated but only within the popup and not the main tab or window.

This is the link for redirecting to the OAuth2 page

<a href="javascript:void(0);" onclick="openOAuthPopup()" class="w-full py-3 md:py-5 rounded-2xl border-2 border-green-500 hover:border-2 hover:border-green-700 flex justify-center items-center">
  <img class="w-6 mx-3" src="{{ asset('images/google.png') }}" alt=""> Sign up with Google
</a>

In the JS, I open the pop up window for OAuth2 authentication then listen for an event from the popup window for a successful authentication and then redirect the user to the dashboard.

function openOAuthPopup() {
     var popup = window.open('/auth/redirect', 'popup', 'width=700, height=700');

     // Listen for messages from the popup
     window.addEventListener('message', function(event) {
     if (event.origin !== "{{ url('/') }}") // Replace with your domain
         return;

         if (event.data === 'authenticated') {
             window.location.href = '/dashboard';
         }
     }, false);
}

Below is the php method for handling the callback

public function callback(): View
    {
        $googleUser = Socialite::driver('google')->stateless()->user();
        //Handle user registration or login
        ...

        return view('livewire.auth.oauth_callback');
    }

Within the view livewire.auth.oauth_callback, I had simple script that sends a message to the opener window and then closes the popup window.

// When the popup loads this view, send a message to the opener window
window.onload = function() {
      window.opener.postMessage("authenticated", "{{ url('/') }");
      window.close(); // Close the popup window
}

I don’t know if this has got anything to do with session. My config/session.php has everything in default.

What I’m I doing wrongly? Also, is there a better approach to this?

How do i logout the user logged in using socialte if he logs in from another browser?

I have implemented socialite login using Google and LinkedIn. My requirements are that I need to have the user only be able to login from one device at a time, so in case the user logs in using another device the first logged in device will be logged out.

I have two types of users, ones that login using a normal sign up process and the ones that use Socialite login. If a user has used the same email on a normal sign up and he wants to login using google or linked-in his account will be the same.

I have two tables one for admins and one for users as well, and two different models.

If my user signs in using his username and password I managed to make it work using the following code:

In session.php

    'expire_on_close' => true,

In CustomDatabaseSessionHandler.php

<?php

namespace AppExtensions;

use IlluminateContractsAuthGuard;
use IlluminateContractsContainerBindingResolutionException;
use IlluminateSessionDatabaseSessionHandler;

class CustomDatabaseSessionHandler extends DatabaseSessionHandler
{

    /**
     * Add the user information to the session payload.
     *
     * @param array $payload
     * @return $this
     * @throws BindingResolutionException
     */
    protected function addUserInformation(&$payload): static
    {
        if ($this->container->bound(Guard::class)) {
            info(($this->user() ? get_class($this->user()) : null));
            $payload['userable_type'] = $this->user() ? get_class($this->user()) : null;
            $payload['userable_id'] = $this->userId();
        }

        return $this;
    }

    /**
     * Get the currently authenticated user's ID.
     *
     * @return mixed
     * @throws BindingResolutionException
     */
    protected function user(): mixed
    {
        return $this->container->make(Guard::class)->user();
    }
}

In AppServiceProvider

        Session::extend('custom-database', function ($app) {
            $table = $app['config']['session.table'];
            $lifetime = $app['config']['session.lifetime'];
            $connection = $app['db']->connection($app['config']['session.connection']);

            return new CustomDatabaseSessionHandler($connection, $table, $lifetime, $app);
        });

Changed the SESSION_DRIVER in .env to ‘custom-database’

Created a LoginListener with the following code:

<?php

namespace AppListeners;

use IlluminateSupportFacadesDB;

class LoginListener
{
    /**
     * Create the event listener.
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     */
    public function handle(object $event): void
    {
        $user = $event->user;
        DB::table('sessions')->where('userable_id', $user->id)->where('userable_type', get_class($user))->delete();
    }
}

I have added the following to services.php

    'google' => [
        'client_id' => env('GOOGLE_CLIENT_ID'),
        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
        'redirect' => env('APP_URL') . '/oauth/google/callback',
    ],
    'linkedin-openid' => [
        'client_id' => env('LINKEDIN_CLIENT_ID'),
        'client_secret' => env('LINKEDIN_CLIENT_SECRET'),
        'redirect' => env('APP_URL') . '/oauth/linkedin_openid/callback',
    ],

My problem is whenever i close the browser it’s not logging out, and whenever i am logging in using another device it’s not logging out, this problem is happening only when using the socialite login.

PHP – Exporting database records directly into CSV file

I am trying to export a dataset of rows into a csv/txt file with a single query as explained here or here, by executing a Laravel PHP script on a WSL environment with no root user.

The issues I found are the same as mentioned in those posts, but I can’t get my mind into solving it.

When first executing a similar SQL query into MySQL like:

SELECT * INTO OUTFILE "/tmp/activities_export.csv" FIELDS TERMINATED BY "," LINES TERMINATED BY "n" FROM posts;

I receive

Error Code: 1. Can’t create/write to file ‘tmpposts.csv’ (Errcode: 2 – No such file or directory)

Whatever the directory is (I’ve tried with plenty of them) except for the MySQL default directory, which I won’t have access to once deployed.

The file exists and is empty, so I guess it’s the same permissions issue, so far I check:

  • show grants shows GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' WITH GRANT OPTION
  • SHOW VARIABLES LIKE "secure_file_priv"; which returns null
  • GRANT FILE ON *.* TO 'root'@'localhost'; (As a test) and results are the same, no changes.
  • I tried executing the PHP script with root user, same results.

Any ideas what is missing or what steps are to be done?

When using DOMPDF to download pdf, page shown blank

When download DOMPDF using jquery ajax in WordPress php.The pdf downloaded but page its blank.

below code file is generatepdf.php

generatepdf file

test.php

Generate PDF


    $(document).ready(function() {
        $('#generatePdfButton').click(function() {
            // Make an AJAX request to generate.php
            $.ajax({
                url: 'generatepdf.php',
                type: 'GET',
                success: function(response) {
                    // Handle success
                    var blob = new Blob([response], { type: 'application/pdf' });
                    var url = window.URL.createObjectURL(blob);
                    var link = document.createElement('a');
                    link.href = url;
                    link.download = 'test.pdf';
                    link.click();
                    window.URL.revokeObjectURL(url);
                },
                error: function(xhr, status, error) {
                    console.error('Failed to generate PDF:', error);
                    // Optionally, display an error message to the user
                }
            });
        });
    });



Generate PDF

I want to render html properly when call jquery ajax to download pdf.

Positioning for sliders and canvas

I’m having difficulties with positioning my sliders correctly.
I also can’t seem to make the vertical-slider work(the slide head won’t move).

My Codes:

var hSlider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = hSlider.value;

//Vertikal slider

const vSlider = document.getElementById("vertSlider");

vSlider.addEventListener("input", function() {

  console.log("Slider value:", this.value);

});

//Bunch of variables

var canv =

  document.getElementById("canvas");

var ctx = canv.getContext("2d");

var x = 0;

var y = 0;

var w = canv.width;

var h = canv.height;

var r = 100;

var g = 0;

var b = 50;

const rz = 50;

hSlider.min = 0

hSlider.max = w - rz;

//At the start: load the rectangle

ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

ctx.fillRect(0, 0, 50, 50);

//Move rectangle function

function draw() {

  ctx.clearRect(0, 0, w, h);

  ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

  ctx.fillRect(x, y, rz, rz);

  x = hSlider.value;

}

//Start moving

hSlider.oninput = function() {

  output.innerHTML = this.value;

  setInterval(draw, 30);

}
.myCanvSlide {
  display: flex;
}

.vertical-slider {
  height: 350px;
  align-items: center;
  float: left;
}

.horizontal-slider {
  width: 350px;
  float: left;
}

.canvas {
  border: 1px solid #000000;
  width: 350px;
  height: 350px;
  float: left;
}

.vSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 100%;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.vSlider:hover {
  opacity: 1;
}

.vSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.vSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.hSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.hSlider:hover {
  opacity: 1;
}

.hSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.hSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
<body>

  <div class="myCanvSlide">

    <!--Vertikal slider, to the right of the canvas-->

    <div class="vertical-slider">

      <input type="range" min="1" max="100" value="1" class="vSlider" id="vertSlider">

    </div>

    <!--Canvas for animations and such-->

    <canvas id="canvas" class="canvas" width="300" height="300" style="border:1px solid #000000;">

  </canvas>

    <!--Horizontal slider, under canvas-->

    <div class="horizontal-slider">

      <input type="range" min="1" max="100" value="1" class="hSlider" id="myRange">

    </div>

  </div>

  <script src="script.js"></script>

</body>

I have tried without the myCanvSlide div, and I tried switching around the float / clear tags in the CSS code.
My other issue is that the vertical slider doesn’t work. I should be able to move the slide head up and down but it’s just stuck in the middle.

deviceorientation alpha is wrong every time I turn off my screen

On an Android phone (in Chrome), I’m able to print the alpha orientation of the device with this simple event listener.

window.addEventListener("deviceorientation", function(event) {
   document.querySelector("#my-div").innerHTML = "Alpha: " + parseInt(event.alpha)
})

This works well, and I can see the value going from 0 to 360 as I’m spinning in my chair.

The problem: When I turn off and back on my screen, the value of alpha is offset by the angle I rotated the device during while the device was off. e.g. If I turned the screen off while alpha was 45° and I spin in my chair by 180 deg, when I turn my screen back on the value of alpha will still be around 45 and will keep being off by 180°.

Weird observation: If I open Google Maps, I can see the dot representing my position being gray for something like 2 seconds, then it turns back blue with the alpha angle pointing the real value. Going back to Chrome, the alpha value is now the same as in Google Maps, meaning the offset as been cleared somehow.

Any idea why the alpha value is wrong every time I turn the screen off?

NextJS 14 SSE with TransformStream() sending messages in a single response

I am trying to implement SSE in NextJS 14 to update the user while processing some data.
Since the data is provided by the user, it needs to be a POST request, so I can’t use EventSource but have to use fetch().

I got the client side working like this:

"use client";

import { useState } from "react";

export default function Home() {
    const [message, setMessage] = useState("");

    async function onClick() {
        const response = await fetch("/api/test2", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({}),
        });

        const reader = response.body?.getReader();
        if (!reader) return;

        let decoder = new TextDecoder();
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            if (!value) continue;
            const lines = decoder.decode(value);
            const text = lines
                .split("n")
                .filter((line) => line.startsWith("data:"))[0]
                .replace("data:", "")
                .trim();

            setMessage((prev) => prev + text);
        }
    }

    return (
        <div>
            <button onClick={onClick}>START</button>
            <p>{message}</p>
        </div>
    );
}

For the server side, by googling I found a code that works like this:

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest, res: NextResponse) {
    const { readable, writable } = new TransformStream();
    const writer = writable.getWriter();

    const text = "Some test text";

    let index = 0;
    const interval = setInterval(() => {
        if (index < text.length) {
            writer.write(`event: messagendata: ${text[index]}nn`);
            index++;
        } else {
            writer.write(`event: messagendata: [DONE]nn`);
            clearInterval(interval);
            writer.close();
        }
    }, 1);

    return new NextResponse(readable, {
        headers: {
            "Content-Type": "text/event-stream",
            "Cache-Control": "no-cache",
            Connection: "keep-alive",
        },
    });
}

The problem is that I need to send messages after some functions are done processing not in an interval.

Something like:

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest, res: NextResponse) {
    const { readable, writable } = new TransformStream();
    const writer = writable.getWriter();

    writer.write(`event: "start"ndata:"Process 1"nn`)
    processThatTakesTime();
    writer.write(`event: "done"ndata:"Process 1"nn`)

    writer.write(`event: "start"ndata:"Process 2"nn`)
    anotherProcess();
    writer.write(`event: "done"ndata:"Process 2"nn`)

    writer.close();

    return new NextResponse(readable, {
        headers: {
            "Content-Type": "text/event-stream",
            "Cache-Control": "no-cache",
            Connection: "keep-alive",
        },
    });
}

This code just sends all the messages in a single response, or even worse: closes the writer before even writing the messages to it.

I have tried adding “new Promise((resolve) => setTimeout(resolve, ms));” between them and all but nothing seemed to work.

  1. add a sleep function between the writes/close
  2. awaiting all the writes and close.
  3. turning them into a promise like
await new Promise<void>((resolve)=>{
    setTimeout(()=>{
        writer.write(`event: "start"ndata:"Process 1"nn`);
        resolve();
    ),100}
});

I am getting error in sql query ORA-01847: day of month must be between 1 and last day of month

 INSERT INTO MANPOWER.VIPBADGE ( 
           DOC_SRL, GRP_CD, DOC_TYPE, REC_TYPE, MV_MT, VESS_NAME, VESS_TYPE, IMO_NO, CALL_SIGN, REG_PORT, 
            AGENCY_FUN_CD, AGENCY_CD, EX_VESS_NAME, EX_CALL_SIGN, VESS_FLAG, SAT_ID, SATCOM_ID, FREE_BOARD, VESS_BLD_DT, VESS_BLD_PLACE,
            DT_OF_DELI, PERMANENT_VALIDTY, SHIP_REG_CERT_NO, SHIP_REG_VALDT, SAFETY_MGMT_CERT_NO, SAFETY_MGMT_CERT_VALDT, VESS_HT, ISPS_COMPL, CAP2_CERT, BEAM, 
           LOA, LBP, MAX_DRAFT, PARL_BODY_LN, BOW_TO_MANIFOLD, GRT, NRT, DWT, SUMMER_DEAD_WT, TEU_CAP, 
            SBT, REDU_GRT, VESS_OWN, EMAIL_ID, CLASSFN_SOCIETY, HULL_INS_COMP_NAME, HULL_INS_COMP_VALDT, ENGN_TYPE, NO_OF_ENGN, ENGN_POWER, 
            PROPULSION_TYPE, NO_OF_PROPELLERS, NO_OF_BAYS, NO_OF_ROWS_ON_DECK, HATCH_COVER_TYPE, NO_OF_HATCH, MAX_MAN_SPEED, BOW_THRUSTER, BOW_THRUSTER_NO, BOW_THRUSTER_POWER, 
           STERN_THRUSTER_NO, STERN_THRUSTER_POWER, BULBOUS_BOW, MMSI_NO, PORT_APPR, APPR_BY, APPR_DT, ACTION_FLAG, ENTRY_BY, ENTRY_DT ) VALUES ( 
           '8735910', 'VRD', 'VESPRO', 'N', 'MT', 'KDS TANKER 1', '153', '170224', '5778568', 'INMAA1', 'VA', '70009330', ' ', ' ', 'IN', ' ',
            ' ', '1', TO_DATE('01/01/2023','dd/MM/yyyy'), ' ', ' ', 'N', '6527849 ',  TO_DATE('31/12/2025', 'dd/MM/yyyy'), '7539234578', 
            TO_DATE('28/12/2025', 'dd/MM/yyyy'), ' ', 'Y', 'N', '30.00', '120.00', '100.00', '10.00', ' 90.000', ' ', '1000.0', ' 
            500.0', '1500.0', ' ', ' ', 'N', ' ', 'RAM ', ' ', ' ', ' ', '', 'DIESEL', '2', ' ', 'DIESEL', '2', ' ', ' ', ' ', '1', '14.0', 'Y', '2', 
           ' ', '2', ' ', 'N', ' ', 'INKKK1', ' admin001',TO_DATE('17/02/2025', 'dd/MM/yyyy'), 'Y', ' ADMIN',SYSDATE )

I have provided all the dates in correct format but still getting error : ORA-01847: day of month must be between 1 and last day of month Please explain me why ?

Notification.permission always return ‘denied’ on firefox [duplicate]

I have a problem with Push notifications only on Firefox.
It always return ‘denied’ when I am checking the permissions, even though they are granted and firefox shows me next to url tab that they are granted.

I have this problem on production (https).
On chrome and safari it works fine.
Have you ran on that issue and have a solution ?

PS. For example on old Firefox 79 it works perfectly fine.