My carousel with react-bootstrap has no active items

I am using react-bootstrap to create a carousel, but all of the carousel items are disabled.

function Project({ href, title, img, description }) {
    return (
        <Carousel.Item className="work-carousel-item">
            <img className="d-block w-100" src={img} alt={title}/>

function Work() {
    return (
        <section id="work">
            <Carousel class="mt-5">
                <Project href="#" title="Example 1" img={ImgVkMeshShaderExample} description="I'm a description"/>
                <Project href="#" title="Example 1" img={ImgVkMeshShaderExample} description="I'm a description 2"/>


I tried the official example like they did on the website, and its not working. Any ideas whats going wrong?

How can I write these scripts in head so that they don’t crush?

I really need your help because I have always loaded scripts at the end of the body tag but I have to insert them in head and after I added Scroll Reveal it caused me problems because at 375px you can no longer see a part of navbar which is managed by “script.js”. I tried using “defer” on it, but it doesn’t work. Can you help me?

/* Navbar - change on scroll */
const nav = document.querySelector("nav");
const sectionOne = document.querySelector(".hero-section");

const sectionOneOptions = {
    rootMargin: "-200px 0px 0px 0px"

const sectionOneObserver = new IntersectionObserver(function(
) {
  entries.forEach(entry => {
    if(!entry.isIntersecting) {
    } else {


/* Hero - text animation */
let typed = new Typed(".auto-type", {
    strings: ["Developer.", "Freelancer."],
    typeSpeed: 150,
    backSpeed: 150,
    startDelay: 900,
    loop: true

/* Progress bar - scroll animation */
let elements_to_watch = document.querySelectorAll(".watch");

// callback
let callback = function(items) {
    items.forEach((item) => {
        if(item.isIntersecting) {

        } /*else {

// observer 
let observer = new IntersectionObserver(callback, { threshold : 0.5 } );

// apply
elements_to_watch.forEach((element) => {

/* Porfolio isotope and filter */

 /* Easy selector helper function */
const select = (el, all = false) => {
    el = el.trim()
    if (all) {
      return [...document.querySelectorAll(el)]
    } else {
      return document.querySelector(el)

/* Easy event listener function */
const on = (type, el, listener, all = false) => {
    let selectEl = select(el, all)

  if (selectEl) {
    if (all) {
      selectEl.forEach(e => e.addEventListener(type, listener))
    } else {
        selectEl.addEventListener(type, listener)

  window.addEventListener('load', () => {
    let portfolioContainer = select('.portfolio-container');
    if (portfolioContainer) {
      let portfolioIsotope = new Isotope(portfolioContainer, {
        itemSelector: '.portfolio-item',
        layoutMode: 'fitRows'

      let portfolioFilters = select('.portfolio-flters li', true);

      on('click', '.portfolio-flters li', function(e) {
        portfolioFilters.forEach(function(el) {

          filter: this.getAttribute('data-filter')
      }, true);


/* Glightbox */
// Initiate portfolio lightbox   
const portfolioLightbox = GLightbox({
    selector: '.portfolio-lightbox'

//Initiate portfolio details lightbox 
const portfolioDetailsLightbox = GLightbox({
    selector: '.portfolio-details-lightbox',
    width: '90%',
    height: '90vh'

/* Form - Email JS*/

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation =, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
        } else {
      }, false);
  }, false);

function sendEmail() {
  emailjs.sendForm('service_b7zg4dy', 'template_8ccl4fd', '.needs-validation')
    .then(function() {
      document.getElementById("messageSuccess").style.display = "block";
      setTimeout(function() {
      }, 3000);
    }, function(error) {
      console.error('Failed to send email:', error);

function resetForm() {
  var form = document.querySelector('.needs-validation');
  document.getElementById("messageSuccess").style.display = "none";

/* Copyright */
function updateCopyrightYear() {
    var d = new Date();
    var currentYear = d.getFullYear();
    document.getElementById("year").innerHTML = currentYear;

/* Scroll to top button */
const scrollTopBtn = document.querySelector(".scrollToTop-btn");

window.addEventListener("scroll", function(){
    scrollTopBtn.classList.toggle("active", window.scrollY > 500);

ScrollReveal().reveal('.reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600});

ScrollReveal().reveal('.left-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'left'});

ScrollReveal().reveal('.right-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'right'});

ScrollReveal().reveal('.top-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'top'});

ScrollReveal().reveal('.zoom', { duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 200, scale: 0.65});
<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8" />
    <title>Personal Portfolio | Alessandra Casole </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Alessandra Casole" />
    <meta name="description" content="Esplora il mio portfolio professionale online, le mie abilità, i progetti che ho realizzato e come contattarmi. Scopri come posso aiutarti a raggiungere i tuoi obiettivi attraverso le mie competenze."/>
    <meta property="og:title" content="Alessandra Casole | Personal Portfolio"/>
    <meta property="og:description" content="Esplora il mio portfolio professionale online, le mie abilità, i progetti che ho realizzato e come contattarmi. Scopri come posso aiutarti a raggiungere i tuoi obiettivi attraverso le mie competenze."/>
    <meta property="og:image" content="./assets/img/og-image.jpg"/>
    <meta property="og:url" content="URL della tua pagina"/>
    <meta property="og:type" content="profile"/>

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/img/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon-16x16.png" />
    <link rel="icon" href="./assets/img/favicon.ico" type="image/x-icon" />
    <link rel="manifest" href="./assets/img/site.webmanifest" />

    <!-- Bootstrap v.5.2.3 -->
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />

    <!-- Font Awesome v.6.2.1 -->
    <link rel="stylesheet" href="" />

    <!-- Glightbox -->
    <link rel="stylesheet" href="" />

    <!-- Swiper -->
    <link rel="stylesheet" href="" />

    <!-- CSS -->
    <link rel="stylesheet" href="./assets/css/style.css" />

    <!-- Scripts -->

    <!-- Bootstrap -->
    <script defer src="[email protected]/dist/js/bootstrap.bundle.min.js"

    <!--Text Animation -->
    <script defer src=""></script>

    <!-- Isotope layout -->
    <script src=""></script>

    <!-- Glightbox -->
    <script src=""></script>

    <!--Swiper -->
    <script src=""></script>

    <!-- Email JS -->
    <script defer src="[email protected]/dist/email.min.js"></script>

    <!-- Scroll Reveal -->
    <script src="[email protected]/dist/scrollreveal.min.js"></script>

    <!-- JS -->
    <script defer src="./assets/js/script.js"></script>

D3 Line Chart, Change x axis from temporal value to categorial value

I am trying to generate a line chart where the X axis values are a string. In the example that D3 has the X axis is a date. How can I change the format of the X axis based on the example that D3 shows.

D3 example of a Line Chart

LineChart = // Copyright 2021 Observable, Inc.
// Released under the ISC license.
function LineChart(data, {
  x = ([x]) => x, // given d in data, returns the (temporal) x-value
  y = ([, y]) => y, // given d in data, returns the (quantitative) y-value
  defined, // for gaps in data
  curve = d3.curveLinear, // method of interpolation between points
  marginTop = 20, // top margin, in pixels
  marginRight = 30, // right margin, in pixels
  marginBottom = 30, // bottom margin, in pixels
  marginLeft = 40, // left margin, in pixels
  width = 640, // outer width, in pixels
  height = 400, // outer height, in pixels
  xType = d3.scaleUtc, // the x-scale type
  xDomain, // [xmin, xmax]
  xRange = [marginLeft, width - marginRight], // [left, right]
  yType = d3.scaleLinear, // the y-scale type
  yDomain, // [ymin, ymax]
  yRange = [height - marginBottom, marginTop], // [bottom, top]
  yFormat, // a format specifier string for the y-axis
  yLabel, // a label for the y-axis
  color = "currentColor", // stroke color of line
  strokeLinecap = "round", // stroke line cap of the line
  strokeLinejoin = "round", // stroke line join of the line
  strokeWidth = 1.5, // stroke width of line, in pixels
  strokeOpacity = 1, // stroke opacity of line
} = {}) {
  // Compute values.
  const X =, x);
  const Y =, y);
  const I = d3.range(X.length);
  if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]);
  const D =, defined);

  // Compute default domains.
  if (xDomain === undefined) xDomain = d3.extent(X);
  if (yDomain === undefined) yDomain = [0, d3.max(Y)];

  // Construct scales and axes.
  const xScale = xType(xDomain, xRange);
  const yScale = yType(yDomain, yRange);
  const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0);
  const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat);

  // Construct a line generator.
  const line = d3.line()
      .defined(i => D[i])
      .x(i => xScale(X[i]))
      .y(i => yScale(Y[i]));

  const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", [0, 0, width, height])
      .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

      .attr("transform", `translate(0,${height - marginBottom})`)

      .attr("transform", `translate(${marginLeft},0)`)
      .call(g =>".domain").remove())
      .call(g => g.selectAll(".tick line").clone()
          .attr("x2", width - marginLeft - marginRight)
          .attr("stroke-opacity", 0.1))
      .call(g => g.append("text")
          .attr("x", -marginLeft)
          .attr("y", 10)
          .attr("fill", "currentColor")
          .attr("text-anchor", "start")

      .attr("fill", "none")
      .attr("stroke", color)
      .attr("stroke-width", strokeWidth)
      .attr("stroke-linecap", strokeLinecap)
      .attr("stroke-linejoin", strokeLinejoin)
      .attr("stroke-opacity", strokeOpacity)
      .attr("d", line(I));

  return svg.node();

My Configuration of the Line Chart

    let chartTitles = document.getElementById('chart-title').innerHTML = 'Line Chart';
    let chartColor = '#d13c4b';
    let chartHeight = 500;
    let chartWidth;
    let yAxisLabel = "↑ Daily close ($)";
    let statusValues = [{status: 'PHA', value: phaCat},
                        {status: 'Local', value: localCat},];
    chart = LineChart(statusValues, {
        x: d => d.status,
        y: d => d.value,
        width: chartWidth,
        height: chartHeight,
        color: chartColor,
        yLabel: yAxisLabel

Total cost number – NaN

I have a website and there is a shopping cart. I can put stuff in there. There is also an item counter in this basket, but there was one problem. Now I need to find the cost of items added to the cart through the console. But when you try to do this, the console returns NaN.

const cartWrapper = document.querySelector('#check');

window.addEventListener('click', function(event) {
  if ('data-cart')) {

    const card ='.dlg-modal')

    //Собираем данные
    const productInfo = {
      imgSrc: card.querySelector('.gui__pizzablock').getAttribute('src'),
      title: card.querySelector('.productTitle').innerText,
      price: card.querySelector('.priceTitle').innerText,
      description: card.querySelector('.gui__description').innerText,
      counter: card.querySelector('[data-counter]').innerText,

    const itemInCart = cartWrapper.querySelector(`[data-id="${}"]`);

    if (itemInCart) {

      const counterElement = itemInCart.querySelector('[data-counter]')
      counterElement.innerHTML = parseInt(counterElement.innerHTML) + 1;

    } else {

      const cartItemHTML = `<div class="item__block">

            <div data-id="${}">

               <img class="img__rubb" src="${productInfo.imgSrc}">
               <p style="margin: -73px 100px">${productInfo.title}</p>
               <p class="description__rubb" style="margin: 81px 100px">${productInfo.description}</p>
               <hr class="hr__rubb">
               <p style="margin: 70px 15px"><span class="amount__price">${productInfo.price}</span>руб.</p>
               <!--               <div class="items__control" data-action="minus">-</div>-->
               <div  class="counter__rubb">
                  <div  class="counter__rubb_text">
                     <a class="minus__plus__rubb" style=" -moz-user-select: none; display: inline-flex;   font-size: 21px" data-action="minus">-</a>
                     <div style="display: inline-flex; cursor: default; -moz-user-select: none;  " data-counter>${productInfo.counter}</div>
                     <a class="minus__plus__rubb" style=" -moz-user-select: none; display: inline-flex; font-size: 21px;" data-action="plus">+</a>

               <div class="buy__rubb">
               <div class="buy__rbb__boxes">
                  <p style="margin: 1% 3%; display: inline-flex">1 товар</p>
                  <p style="margin: 1% 30.5%; display: inline-flex">0&nbsp;руб.</p>
                  <hr class="hr__rubba">
                  <p style="margin: 1% 3%; font-size: 16px; display: inline-flex">Сумма заказа</p>
                  <p style="margin: 1% 22.5%; display: inline-flex">0&nbsp;руб.</p>
                  <div class="btn__rubb__podval">
                  <a href="#" class="btn__rubb">К&nbsp;оформлению&nbsp;заказа</a>
      cartWrapper.insertAdjacentHTML('beforeend', cartItemHTML)


function calcPrice() {
  const cartItems = document.querySelectorAll('.item__block')

  let totalPrice;
  cartItems.forEach(function(item) {
    const amount = item.querySelector('[data-counter]');
    const price = item.querySelector('.amount__price');

    const currentPrice = parseInt(amount.innerHTML) * parseFloat(price.innerHTML);
    totalPrice = totalPrice + currentPrice
<div data-id="999" id="check" class="dlg-modal dlg-modal-fade" style="background: #f3f3f3; width: 790px; height: 100%; left: 100%">
  <div class="item__block__container">
    <div data-cart-empty class="emptyContainer">
      <div class="emptyBlock">
        <img class="emptyBlock" src="notfinedCart.svg" style="">

        <h2 class="emptyBlock">Empty!</h2>
        <p class="emptyBlock"><br>Oh!!!<br>Cart empty:(<br>Select something</p>


Note: I open cart with popup

If you do not put everything in a variable, then there are no errors.

Full page fade centered loader

so i’m relatively new to programing,and i wanted to create a loader that whenever the page loads or refreshes it shows a centered loading animation that greys out and fades the entire page then all goes back to normal when the page fully loads.

i managed to get everything else working except centering the animation and fading/greying the page. idk if i’m missing something really obvious but i’ve searched everywhere and i didn’t quite get what i wanted.

here’s the html

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>S&B Clothes</title>
    <link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">

<body id="body">


  <nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
    <div class="container-fluid">
      <a class="navbar-brand" href="index.html">
        <img src="logo/logo_svg.svg" class="rounded" id="navbar_logo">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#men_women">
        <div class="container_menu" onclick="menu(this)">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
      <div class="collapse navbar-collapse" id="men_women">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <button type="button" class="btn" onclick="women_index_fn()" id="navbar_men">Women</button>
            <vr class="vr"></vr>
          <li class="nav-item">
            <button type="button" class="btn" onclick="children_index_fn()" id="navbar_women">Children</button>
          <vr class="vr"></vr>
        <li class="nav-item">
          <button type="button" class="btn" onclick="men_index_fn()" id="navbar_children">Men</button>
      <div class="input-group rounded">
        <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
        <button type="button" class="btn rounded" id="src_btn">Search</button>
        <button class="btn" id="user_btn" onmouseover="change_img_user()" onmouseout="change_img_user_2()">
          <img src="Icons/user-white.png" id="user_btn_ico"/>
        <button class="btn" id="favorite_btn" onmouseover="change_img_fav()" onmouseout="change_img_fav_2()">
          <img src="Icons/favorite-white.png" id="favorite_btn_ico"/>
        <button class="btn" id="shop_cart_btn" onmouseover="change_img_cart()" onmouseout="change_img_cart_2()">
          <img src="Icons/shopping-cart-white.png" id="shop_cart_ico"/>


  <div class="preloader" id="ld">
    <div class="box">
      <div class="box__inner">
        <div class="box__back-flap"></div>
        <div class="box__right-flap"></div>
        <div class="box__front-flap"></div>
        <div class="box__left-flap"></div>
        <div class="box__front"></div>
    <div class="box">
      <div class="box__inner">
        <div class="box__back-flap"></div>
        <div class="box__right-flap"></div>
        <div class="box__front-flap"></div>
        <div class="box__left-flap"></div>
        <div class="box__front"></div>
    <div class="line">
      <div class="line__inner"></div>
    <div class="line">
      <div class="line__inner"></div>
    <div class="line">
      <div class="line__inner"></div>
    <div class="line">
      <div class="line__inner"></div>
    <div class="line">
      <div class="line__inner"></div>
    <div class="line">
      <div class="line__inner"></div>
    <div class="line">
      <div class="line__inner"></div>

here’s the js

window.addEventListener("load", function()
  var loader = document.getElementById("ld"); = "none";

all the css i’ve done so far is just loader style and coloring nothing really related to positioning.

i tried putting my loader in a container and centering that but it didn’t work out as planned and the navbar didn’t get greyed out

thank you all

Allow other websites use my photos through Javascript

I want to create a Javascript system or something like that which let other websites use photos from my website for free, but I want to be able to add an advertisment on their page.

I can make it through an iframe I guess:

<iframe src="<?php echo $embedCode; ?>" width="100%" height="690"frameborder="0" scrolling="no" allowfullscreen></iframe>

This should be the code other websites may use to print photos on their website. Any ideas how may I accomplish something like this?

Is escape enough to prevent sql injection?

const mysql = require('mysql2');
const con = mysql.createConnection({
  host: "****",
  user: "****",
  password: "****",
  database: "****"
app.get('/:userId', function(req, res) {
      if(req.params.userId.match(/^[0-9]+$/) != null){
        con.query("select * from users where user_id = "+con.escape(req.params.userId), function (err, result, fields) {
        if (err || result[0] == null){
          res.status(404).send('The page was not found');
        res.render('pages/index', {
        console.log("The user entered letters and/or special characters");
          res.status(404).send('The page was not found.');

I want to prevent sql injection, is checking for special characters + escape enough to provide high level security?
I didn’t find much documentation on how escape works, that’s why I’m asking

Some events not shown in month view- fullcalendar

I’m using fullcalendar to draw events in month view. Events are sorted based on ‘eventType’.
day max events is set to ‘3’.
the problem is some days in April are not showing any events (or less than the dayMaxEvents), and shows +5 more.
I tried to figure out why this is happening, and I think it’s because these five events start in a previous day and this day drew ‘3’ events only (based on sorting), leaving these extending till a certain day hidden.

calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [CustomViewPlugin],
    locale: 'en',
    contentHeight: 1000,
    views: {
        year: {
            type: 'year',
            dayMaxEventRows: 3,
            duration: { years: 1 },
            titleFormat: { year: 'numeric', month: 'long', day: '2-digit' }

        week: {
            contentHeight: 650,
            dayMaxEvents: 10,
            dayHeaderFormat: { weekday: 'long' }

        dayGridMonth: {
            contentHeight: 1270,
            dayMaxEvents: 3,
            dayHeaderFormat: { weekday: 'long' }


    initialView: 'year',
    timeZone: 'UTC',
    eventClick: function (info) {

        let event = info.event;

    events: function (info, callback, errorcallback) {
        //event source here

    eventOrder: "eventType,-duration",
    eventOrderStrict: true,
    eventContent: function (info) {
        //event content here

    fixedWeekCount: false,
    showNonCurrentDates: true


I want a way to always draw events up to dayMaxEvents even the day isn’t the start day.
events not shown example

how to make a rotatable globe like github [closed]

Can someone tell me how the github globe were made that is in the bottom of the welcome page? Because I viewed the code and it was a mp4 video and I can’t figure out how they made it so you can rotate it.enter image description here

I tried using three js but it takes too long to load because the code is too long, and I want it to load quickly.

Cursor Resize on scroll bar of div

The Html div with cursor resize and scroll auto:

<div style="cursor:ew-resize;border-color:red;height:200px; max-height:150px;overflow:scroll;">
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

The div is displaying the cursor with resize option. But when the scroll bar is visible, the resize cursor is showing inside the scroll bar. How to show the resize cursor outside border of vertical scroll bar.

I have tried using with no luck:

.scrollable { 
  cursor: ew-resize; 

Please provide your suggestions. Thanks.

To stop a video from playing on any webpage

I am trying to add a button in my chrome extension that pause and play any video from playing on that current webpage. Nothing seems to work


  button {

    height: 30px;

    width: 100px;

    font-size: 14px;


<button id="pause-button">Pause Video</button>


  document.getElementById("pause-button").addEventListener("click", function() {

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {


        code: "var videos = document.getElementsByTagName('video'); for (var i = 0; i < videos.length; i++) { videos[i].pause(); }"





Doesn’t seem to work

I need a fix for a validation that is always on when toggle switch is enabled

This validation works by inputting auto limits in a field. One requirement is to includeUmbrella with a BIPD limit. The other requirement is that each auto limit policyLimitUMBI and policyLimitUIMBI must be 500 to toggle the switch to includeUmbrella. The validation message is always on when the validation meets the requirements and if it does not meet. I open to any suggestions.

uninsuredMotoristLimit: Yup.string()
‘You must have 500K per occurrence of UM/UIM to add excess UM to umbrella’,
function (value, { options: { context } }) {
if (!value || value === ‘0’) {
return true;

          const {
            autoCoverage: { policyLimitUMBI, policyLimitUIMBI },
          } = context;

          const canAddUM =
            canAddUmbrellaUMUIM({ policyLimitUMBI, policyLimitUIMBI, state }) && offerExcessUM[state];

          return includeUmbrella ? canAddUM : true;

I am expecting that when the requirements are not met then the validation message doesn’t appear.

deno secure random secret/token

I am looking to generate session secrets and session signatures for a server in deno what is your opinion on the following code?

import { encode } from '[email protected]/encoding/hex.ts';
const secret = new TextDecoder().decode(encode(crypto.getRandomValues(new Uint8Array(64))));

Schedule Web MIDI Events with precision using WAAClock lib

I have read and implemented in the past something similar to what Chris Wilson described in his article “A Tale of Two Clocks”:

I recently found WAAClock which in theory implements the same principle:

I’m working on a MIDI Web App and I want to send MIDI Clock Messages, which requires precise scheduling. I wrote this post in WebMidiJS forum (an amazing lib I’m using in my Project):

Essentially this is my code:

const BPM_ONE_SECOND = 60;

let context = new AudioContext();
let clock = new WAAClock(context);

const calculateClockDelay = bpm => BPM_ONE_SECOND  / bpm /  PULSES_PER_QUARTER_NOTE; 

const startMidiClock = bpm => {

    clock.callbackAtTime(function () {
        WebMidi.outputs.forEach(outputPort => outputPort.sendClock({}));
    }, 0).repeat(calculateClockDelay(bpm));`

const stopMidiClock = () =>  clock.stop();

As described in that posts, I CANNOT get the event to happen with high precision. I see the BPM Meter to slightly DRIFT. I tried sending MIDI Clock from a DAW and the timing is perfect.

I’m using ZERO as tolerance in the clock.callbackAtTime function.

  • Why Do I see this drift/ slight scheduling error?
  • Is there any other way to schedule a precise repeating MIDI event with WAAClock?
  • Is WAAClock capable of precise scheduling as with Chris Wilson’s technique?

Thanks a lot!
Danny Bullo

Nested Loops checking for Adjacent Object Groups

I’m working on a function to Merge cells in Excel and I’m struggling with the “nested” loop portion.

My goal is basically to have row lines go from left to right, so for example, in the below screenshots, you can see that the “Type” column is identical values, but there are 3x “merge areas” due to the column B having different values.

As it stands, my code works and detects an “overlap”, but it always merges the entire “2nd range”. This 2nd range needs to basically be re-checked for overlaps so that it too doesn’t overlap.

Example Data:

enter image description here

Desired Output:

enter image description here

Current Output:

enter image description here

Here is my code, note there might be some custom functions and/or stuff that is related to Excel that isn’t 100% necessary, but the “context” should be clear hopefully from the code. If needed to trim down more or clarify, let me know via comments!

You can see my attempt at the “nested loop” is commented out via /* & */ and the “sorta working” code is below that //Second Merge - This containers further overlaps and needs another nested loop/check

var ws = context.workbook.worksheets.getActiveWorksheet();
var Used_Rng_And_Props = await Ranges.Get_Used_Rng_And_Props(context, ws)

var Merges_Arr_Of_Objs = []
var Merges_Obj = {}
for (var column_index = 0; column_index < Used_Rng_And_Props.columnCount; ++column_index) {
    for (var row_index = 0; row_index < Used_Rng_And_Props.rowCount; ++row_index) {
        var val = Used_Rng_And_Props.values[row_index][column_index]
        if (row_index + 1 < Used_Rng_And_Props.rowCount) {
            var next_val = Used_Rng_And_Props.values[row_index + 1][column_index]
        } else {
            var next_val = null
        if (val == next_val) {
            for (var merge_check_row_index = row_index + 1; merge_check_row_index < Used_Rng_And_Props.rowCount; ++merge_check_row_index) {
                var merge_check_row_index_val = Used_Rng_And_Props.values[merge_check_row_index][column_index]
                if (merge_check_row_index_val != val || merge_check_row_index == Used_Rng_And_Props.rowCount - 1) {
                    if (merge_check_row_index == Used_Rng_And_Props.rowCount - 1 && val == Used_Rng_And_Props.values[Used_Rng_And_Props.rowCount - 1][column_index]) {
                        var rng_row_count = merge_check_row_index - row_index + 1
                    } else {
                        var rng_row_count = merge_check_row_index - row_index
                    var rng_start_row_index = row_index
                    var rng_end_row_index = row_index + rng_row_count - 1
                    var rng = ws.getRangeByIndexes(rng_start_row_index, column_index, rng_row_count, 1)

                    var Col_Letter = await Ranges.Get_Col_Letters_From_Index(column_index)
                    var obj = Merges_Obj[Col_Letter]
                    if (obj == undefined) {
                        Merges_Obj[Col_Letter] = {}
                        obj = Merges_Obj[Col_Letter]
                        obj[0] = {}
                        obj[0]['start'] = rng_start_row_index
                        obj[0]['end'] = rng_end_row_index
                    } else {
                        var int = Object.keys(obj).length
                        obj[int] = {}
                        obj[int]['start'] = rng_start_row_index
                        obj[int]['end'] = rng_end_row_index
                    if (column_index > 0) {
                        var overlap_merge_bool = false
                        var Col_Letter = await Ranges.Get_Col_Letters_From_Index(column_index - 1)
                        var column_index_merges_obj = Merges_Obj[Col_Letter]
                        if (column_index_merges_obj != undefined) {
                            var keys = Object.keys(column_index_merges_obj)
                            for (var ki = 0; ki < keys.length; ++ki) {
                                var obj = column_index_merges_obj[ki]

                                var merge_start_row_index = obj['start']
                                var merge_end_row_index = obj['end']
                                if (rng_end_row_index > merge_start_row_index && rng_end_row_index > merge_end_row_index && row_index < merge_end_row_index) {
                                    console.log('overlap merge:')
                                    console.log('row_index:' + row_index + " column_index:" + column_index + " merge_check_row_index:" + merge_check_row_index)
                                    console.log('rng_end_row_index:' + rng_end_row_index)
                                    overlap_merge_bool = true
                                    ki = keys.length + 1
                        if (overlap_merge_bool == false) {
                            await Format_Merged_Area(context, rng)
                        } else {
                            //First Merge - This is good
                            var first_merge_rng_row_count = merge_end_row_index - row_index + 1
                            var first_merge_rng_row_end_index = row_index + first_merge_rng_row_count - 1
                            console.log('first_merge_rng_row_count:' + first_merge_rng_row_count + " first_merge_rng_row_end_index:" + first_merge_rng_row_end_index)
                            rng = ws.getRangeByIndexes(row_index, column_index, first_merge_rng_row_count, 1)
                            await Format_Merged_Area(context, rng)


                            var keys = Object.keys(column_index_merges_obj)
                            for (var ki = 0; ki < keys.length; ++ki) {
                                var obj = column_index_merges_obj[ki]
                                var merge_start_row_index = obj['start']
                                var merge_end_row_index = obj['end']
                                if (ki + 1 <= keys.length) { //Not correct>? Fixed by Undefined Check
                                    var next_obj = column_index_merges_obj[ki + 1]
                                    if (next_obj != undefined) {
                                        if (next_obj['end'] > rng_end_row_index - merge_end_row_index) {
                                            var second_merge_rng_row_count = rng_end_row_index - next_obj['start'] // + 1
                                            console.log('second_merge_rng_row_count:' + second_merge_rng_row_count)
                                            var start_row = next_obj['start'] //+ 1
                                            console.log('start_row:' + start_row)
                                            rng = ws.getRangeByIndexes(start_row, column_index, second_merge_rng_row_count, 1)
                                            await Format_Merged_Area(context, rng)


                            //Second Merge - This containers further overlaps and needs another nested loop/check
                            console.log('merge_end_row_index:' + merge_end_row_index)
                            var second_merge_rng_row_count = rng_end_row_index - merge_end_row_index
                            rng = ws.getRangeByIndexes(merge_end_row_index + 1, column_index, second_merge_rng_row_count, 1)
                            await Format_Merged_Area(context, rng)

                    } else {
                        await Format_Merged_Area(context, rng)

                    row_index = merge_check_row_index - 1
                    merge_check_row_index = Used_Rng_And_Props.rowCount + 1