Category: javascript

Issue:
Another navigator is already registered for this container. You likely have multiple navigators under a single “NavigationContainer” or “Screen”. Make sure each navigator is under a separate “Screen” container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.

Code:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { BottomNavigation } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Home Screens
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailScreen() {
  return (
    <View>
      <Text>Detail Screen</Text>
    </View>
  );
}

// Profile Screens
function ProfileScreen({ navigation }) {
  return (
    <View>
      <Text>Profile Screen</Text>
      <Button title="Go to Profile Details" onPress={() => navigation.navigate('ProfileDetails')} />
    </View>
  );
}

function ProfileDetailScreen() {
  return (
    <View>
      <Text>Profile Detail Screen</Text>
    </View>
  );
}

// Settings Screens
function SettingsScreen() {
  return <Text>Settings Screen</Text>;
}

// Home Stack
const HomeStack = createStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailScreen} />
    </HomeStack.Navigator>
  );
}

// Profile Stack
const ProfileStack = createStackNavigator();
function ProfileStackScreen() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
      <ProfileStack.Screen name="ProfileDetails" component={ProfileDetailScreen} />
    </ProfileStack.Navigator>
  );
}

export default function App() {
  const [index, setIndex] = useState(0); // Tab index state
  const [routes] = useState([
    { key: 'home', title: 'Home', icon: 'home' },
    { key: 'profile', title: 'Profile', icon: 'account' },
    { key: 'settings', title: 'Settings', icon: 'settings' },
  ]);

  // Render scene based on selected tab
  const renderScene = BottomNavigation.SceneMap({
    home: HomeStackScreen, // Home Stack for Home tab
    profile: ProfileStackScreen, // Profile Stack for Profile tab
    settings: SettingsScreen, // Single screen for Settings tab
  });

  return (
    // Wrap everything in a single NavigationContainer
    <NavigationContainer>
      <BottomNavigation
        navigationState={{ index, routes }}
        onIndexChange={setIndex}
        renderScene={renderScene}
      />
    </NavigationContainer>
  );
}

Issue:
Another navigator is already registered for this container. You likely have multiple navigators under a single “NavigationContainer” or “Screen”. Make sure each navigator is under a separate “Screen” container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.

Code:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { BottomNavigation } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Home Screens
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailScreen() {
  return (
    <View>
      <Text>Detail Screen</Text>
    </View>
  );
}

// Profile Screens
function ProfileScreen({ navigation }) {
  return (
    <View>
      <Text>Profile Screen</Text>
      <Button title="Go to Profile Details" onPress={() => navigation.navigate('ProfileDetails')} />
    </View>
  );
}

function ProfileDetailScreen() {
  return (
    <View>
      <Text>Profile Detail Screen</Text>
    </View>
  );
}

// Settings Screens
function SettingsScreen() {
  return <Text>Settings Screen</Text>;
}

// Home Stack
const HomeStack = createStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailScreen} />
    </HomeStack.Navigator>
  );
}

// Profile Stack
const ProfileStack = createStackNavigator();
function ProfileStackScreen() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
      <ProfileStack.Screen name="ProfileDetails" component={ProfileDetailScreen} />
    </ProfileStack.Navigator>
  );
}

export default function App() {
  const [index, setIndex] = useState(0); // Tab index state
  const [routes] = useState([
    { key: 'home', title: 'Home', icon: 'home' },
    { key: 'profile', title: 'Profile', icon: 'account' },
    { key: 'settings', title: 'Settings', icon: 'settings' },
  ]);

  // Render scene based on selected tab
  const renderScene = BottomNavigation.SceneMap({
    home: HomeStackScreen, // Home Stack for Home tab
    profile: ProfileStackScreen, // Profile Stack for Profile tab
    settings: SettingsScreen, // Single screen for Settings tab
  });

  return (
    // Wrap everything in a single NavigationContainer
    <NavigationContainer>
      <BottomNavigation
        navigationState={{ index, routes }}
        onIndexChange={setIndex}
        renderScene={renderScene}
      />
    </NavigationContainer>
  );
}

I’ve built a registry server to store peer IDs and basic details, along with a libp2p protocol. I have three agents that go online after being initialized and deployed via the protocol. However, when I run them in separate terminal instances, they fail to discover each other and time out. If I run them from a single script, they can find each other. What could be causing this issue?

Libp2p protocol:

import { gossipsub } from "@chainsafe/libp2p-gossipsub";
import { yamux } from "@chainsafe/libp2p-yamux";
import { identify } from '@libp2p/identify';
import { kadDHT } from '@libp2p/kad-dht';
import { noise } from "@libp2p/noise";
import { tcp } from "@libp2p/tcp";
import axios from "axios";
import { createLibp2p } from "libp2p";
import { getProtocolTools } from './tools.js';

export default class AgentNetworkProtocol {
    constructor() {
        this.registrarUrl = 'http://localhost:3000';
        this.messageHandlers = new Map();
        this.pendingResponses = new Map();
        this.nodes = new Map();
    }

    async initialize() {
        this.baseConfig = {
            addresses: {
                listen: ['/ip4/0.0.0.0/tcp/0']
            },
            transports: [tcp()],
            connectionEncryption: [noise()],
            streamMuxers: [yamux()],
            services: {
                identify: identify(),
                pubsub: gossipsub({
                    emitSelf: true,
                    allowPublishToZeroPeers: true,
                    gossipIncoming: true,
                    fallbackToFloodsub: true,
                    floodPublish: true,
                }),
                dht: kadDHT({
                    enabled: true,
                    clientMode: false,
                    pingTimeout: 5000,
                    maxInboundStreams: 5000,
                    maxOutboundStreams: 5000,
                })
            }
        };
    }

    async createNode() {
        const port = Math.floor(Math.random() * (65535 - 1024) + 1024);

        const nodeConfig = {
            ...this.baseConfig,
            addresses: {
                listen: [`/ip4/127.0.0.1/tcp/${port}`]
            }
        };

        const node = await createLibp2p(nodeConfig);
        await node.start();


        await new Promise(resolve => setTimeout(resolve, 1000));

        // Subscribe to messages for this node
        const topic = `/agent/${node.peerId.toString()}`;
        await node.services.pubsub.subscribe(topic);

        // Set up message handler
        node.services.pubsub.addEventListener('message', (evt) => {
            if (evt.detail.topic === topic) {
                this.handleIncomingMessage(evt.detail);
            }
        });

        return node;
    }

    async deployAgent(agentInstance, agentMetadata) {
        if (!this.baseConfig) {
            throw new Error('Protocol not initialized. Call initialize() first.');
        }

        const { name, description, capabilities, walletAddress } = agentMetadata;

        if (!name || !description || !capabilities) {
            throw new Error('Missing required agent metadata');
        }

        const node = await this.createNode();
        const peerId = node.peerId.toString();

        this.nodes.set(peerId, node);

        this.messageHandlers.set(peerId, async (message) => {
            const response = await agentInstance.handleMessage(message);
            return response;
        });

        try {
            await this._registerAgent({
                peerId,
                name,
                description,
                capabilities,
                walletAddress
            });
            console.log('Successfully registered agent:', name, 'with peerId:', peerId);

            await new Promise(resolve => setTimeout(resolve, 1000));

            await this.connectNodes();

        } catch (error) {
            await node.stop();
            this.nodes.delete(peerId);
            this.messageHandlers.delete(peerId);
            throw error;
        }

        return {
            peerId,
            agentMetadata
        };
    }

    async findAgentsByCapability(capability) {
        try {
            console.log('Protocol searching for capability:', capability);
            const response = await axios.get(
                `${this.registrarUrl}/lookup?capability=${capability}`
            );
            console.log('Protocol received response:', response.data);
            return response.data;
        } catch (error) {
            console.error('Protocol error finding agents:', error);
            throw new Error(`Failed to find agents: ${error.message}`);
        }
    }

    async sendMessage(targetPeerId, message) {
        console.log('n=== Sending Message ===');
        console.log('Target PeerId:', targetPeerId);
        console.log('Message:', message);

        const nodes = Array.from(this.nodes.values());
        if (nodes.length === 0) {
            throw new Error('No nodes available to send message');
        }

        let senderNode = this.nodes.get(targetPeerId);
        if (!senderNode) {
            console.log('Using fallback sender node');
            senderNode = nodes[0];
        }

        try {
            const topic = `/agent/${targetPeerId}`;
            console.log('Publishing to topic:', topic);

            const responsePromise = new Promise((resolve, reject) => {
                const timeoutId = setTimeout(() => {
                    this.pendingResponses.delete(senderNode.peerId.toString());
                    reject(new Error(`Response timeout waiting for agent ${targetPeerId}. The agent may be busy or not responding.`));
                }, 30000);

                console.log('Setting up response handler for:', senderNode.peerId.toString());
                this.pendingResponses.set(senderNode.peerId.toString(), (response) => {
                    console.log('Received response:', response);
                    clearTimeout(timeoutId);
                    resolve(response);
                });
            });

            if (!senderNode.services.pubsub.getTopics().includes(topic)) {
                await senderNode.services.pubsub.subscribe(topic);
                await new Promise(resolve => setTimeout(resolve, 1000));
            }

            const messageData = JSON.stringify({
                to: targetPeerId,
                from: senderNode.peerId.toString(),
                content: message,
                timestamp: Date.now()
            });

            await senderNode.services.pubsub.publish(
                topic,
                new TextEncoder().encode(messageData)
            );
            console.log('Message published successfully');

            return await responsePromise;

        } catch (error) {
            console.error('Error sending message:', error);
            throw new Error(`Failed to send message: ${error.message}`);
        }
    }

    async handleIncomingMessage(message) {
        try {
            const data = JSON.parse(new TextDecoder().decode(message.data));
            console.log('n=== Incoming Message ===');
            console.log('Message data:', data);
            console.log('Registered handlers:', Array.from(this.messageHandlers.keys()));
            console.log('Pending responses:', Array.from(this.pendingResponses.keys()));

            if (data.isResponse) {
                console.log('Processing response message');
                const resolver = this.pendingResponses.get(data.to);
                if (resolver) {
                    console.log('Found resolver for response');
                    resolver(data.content);
                    this.pendingResponses.delete(data.to);
                } else {
                    console.log('No resolver found for response');
                }
                return;
            }

            console.log('Processing new request');
            const handler = this.messageHandlers.get(data.to);
            if (handler) {
                console.log('Found message handler, invoking...');
                try {
                    const response = await handler(data.content);
                    console.log('Handler response:', response);
                    if (!response) {
                        console.log('No response from handler');
                        return;
                    }

                    const receivingNode = this.nodes.get(data.to);
                    if (!receivingNode) {
                        console.log('No receiving node found');
                        return;
                    }

                    const responseData = {
                        to: data.from,
                        from: data.to,
                        content: response,
                        timestamp: Date.now(),
                        isResponse: true
                    };

                    console.log('Sending response:', responseData);
                    const responseTopic = `/agent/${data.from}`;
                    await receivingNode.services.pubsub.publish(
                        responseTopic,
                        new TextEncoder().encode(JSON.stringify(responseData))
                    );
                    console.log('Response sent successfully');
                } catch (error) {
                    console.error('Error processing message:', error);
                    const errorResponse = {
                        to: data.from,
                        from: data.to,
                        content: { type: 'error', content: error.message },
                        timestamp: Date.now(),
                        isResponse: true
                    };
                    const receivingNode = this.nodes.get(data.to);
                    if (receivingNode) {
                        await receivingNode.services.pubsub.publish(
                            `/agent/${data.from}`,
                            new TextEncoder().encode(JSON.stringify(errorResponse))
                        );
                    }
                }
            } else {
                console.log('No handler found for message');
            }
        } catch (error) {
            console.error('Error handling message:', error);
        }
    }

    async _registerAgent(registrationData) {
        try {
            const response = await axios.post(
                `${this.registrarUrl}/register`,
                registrationData
            );
            return response.data;
        } catch (error) {
            throw new Error(`Failed to register agent: ${error.message}`);
        }
    }

    async stop() {
        for (const [peerId, node] of this.nodes) {
            await node.stop();
            this.nodes.delete(peerId);
            this.messageHandlers.delete(peerId);
        }
    }

    async connectNodes() {
        const connectedPeers = new Set();

        for (const [peerId, node] of this.nodes) {
            for (const [otherPeerId, otherNode] of this.nodes) {
                if (peerId !== otherPeerId && !connectedPeers.has(`${peerId}-${otherPeerId}`)) {
                    try {
                        const topic = `/agent/${otherPeerId}`;
                        await node.services.pubsub.subscribe(topic);

                        let connected = false;
                        let attempts = 0;
                        while (!connected && attempts < 3) {
                            try {
                                await node.dial(otherNode.peerId);
                                connected = true;
                                console.log(`Successfully connected ${peerId} to ${otherPeerId}`);
                            } catch (error) {
                                attempts++;
                                await new Promise(resolve => setTimeout(resolve, 1000));
                            }
                        }

                        connectedPeers.add(`${peerId}-${otherPeerId}`);
                        connectedPeers.add(`${otherPeerId}-${peerId}`);

                    } catch (error) {
                        console.error(`Failed to connect ${peerId} to ${otherPeerId}:`, error.message);
                    }
                }
            }
        }
    }

    getTools() {
        return getProtocolTools(this);
    }
}

Registry Server:

import bodyParser from 'body-parser';
import express from 'express';

const app = express();
app.use(bodyParser.json());

const agentsRegistry = {};

app.post('/register', (req, res) => {
  const { peerId, name, description, capabilities, walletAddress } = req.body;
  if (!peerId) return res.status(400).send('Missing peerId');
  agentsRegistry[peerId] = { name, description, capabilities, walletAddress };
  console.log('Registered agent:', { peerId, name, capabilities, walletAddress });
  console.log('Current registry:', agentsRegistry);
  res.status(200).send({ message: 'Registered successfully' });
});

app.get('/lookup', (req, res) => {
  const { capability, walletAddress } = req.query;
  console.log('Looking up with params:', { capability, walletAddress });
  console.log('Current registry:', agentsRegistry);

  const result = Object.entries(agentsRegistry)
    .filter(([peerId, agent]) => {
      if (capability && walletAddress) {
        return agent.capabilities.includes(capability) && agent.walletAddress === walletAddress;
      } else if (capability) {
        return agent.capabilities.includes(capability);
      } else if (walletAddress) {
        return agent.walletAddress === walletAddress;
      }
      return false;
    })
    .map(([peerId, agent]) => ({
      ...agent,
      peerId
    }));

  console.log('Lookup result:', result);
  res.status(200).json(result);
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Registry server listening on port ${PORT}`);
});

I have at backend the [ValidateAntiForgeryToken] decorator, but I’m currently unable to make Ajax requests for SyncFusion FileManager. It basically starts with a simple code like this:

    let fileManager = new ej.filemanager.FileManager({
        ajaxSettings: {
            url: '/FileManager/List',
        },
        toolbarSettings: {
            items: ['NewFolder', 'Upload', 'Download', 'Delete', 'Rename', 'SortBy', 'Refresh']
        },
        view: 'Details',
        enableNavigation: true
    });
    fileManager.appendTo('#fileManager');

Then it displays an error: NetworkError: Failed to send on XMLHTTPRequest: Failed to load /FileManager/List and I’m getting error 400.

When I inspect backend I see that it doesn’t enters at controller action. But if I remove the decorator then it works as expected. Seems to me that the issue lies on the AntiForgeryToken validation. The token is correctly set at View and JS.

How can I adapt current fileManager and make this work?

Other places I succesfully make requests like this:

    $.ajax({
        url: '/Other/Action',
        type: 'POST',
        async: true,
        data: {
            __RequestVerificationToken: token,
            jsonData: jsonData,
        },
        success: function () {
            //code here
        },
        error: function () {
            //code here
        }
    });

I’ve tried:

• Changing from application/json to application/x-www-form-urlencoded; charset=UTF-8
• Adding RequestVerificationToken at header
• Adding data: JSON.stringify({ __RequestVerificationToken: token, }) to ajaxSettings
• Some other alternative with beforeSend: function (args) as suggested by LLM

I’m implementing TomSelect dropdowns in my Joomla site with Convert Forms + UIKit. I have two dropdowns with the following configuration:

new TomSelect(el, {
    maxItems: null,
    hideSelected: false, 
    closeAfterSelect: false,
    allowEmptyOption: false,
    plugins: ['remove_button'],
    placeholder: "- Pasirinkite paslaugą -", 
    onInitialize: function() {
        this.clear();
        this.removeOption("");
    },
    onChange: function(value) {
        if (value.length === 0) {
            this.clear();
        }
    },
    render: {
        item: function(data, escape) {
            return '<div>' + escape(data.text) + '</div>';
        }
    }
});

// Cities Dropdown (Single Selection)
new TomSelect(el, {
    maxItems: 1,
    sortField: 'text',
    searchField: ['text'],
    allowEmptyOption: true,
    placeholder: "Miestas *",
    onInitialize: function() {
        this.clear();
        this.removeOption("");
    }
});

I have two UX issues I’d like to resolve:

In the Services dropdown (multiple selection), the placeholder “Pasirinkite paslaugą” remains visible even after selecting items. How can I make it disappear once selections are made?

For the Cities dropdown issue with placeholder is the same, additionally while the search functionality works, it’s not very obvious to users that they can type to search.

Any suggestions would be greatly appreciated. Thanks!

Deno has this ReadableStream thing that is supposed to be compatible with the one from the browsers. https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream

And it should be used when you want to stream things. The example in their docs uses some Date/interval and text, not a video

But I found some older code on the internet that shows how to use it with a video:

  const { size } = await Deno.stat("video.mp4");
  const range = req.headers.get("range");

  if (!range) {
    throw new Error("no range");
  }
  console.log("req range=", range)

  const num_blocks = 100;
  const block_size = 16_384;
  const chunk_size = block_size * num_blocks;

  const start_index = Number(range.replace(/D/g, "")?.trim());
  const end_index = Math.min(start_index + chunk_size, size);
  const file = await Deno.open("video.mp4", { read: true });
  if (start_index > 0) {
    await file.seek(start_index, Deno.SeekMode.Start);
  }

  let read_blocks = num_blocks;
  let read_bytes = 0;
  console.info("calc range=", start_index, end_index, size)
  const stream = new ReadableStream({
    start(){
      console.log("start")
    },
    async pull(controller) {
      const chunk = new Uint8Array(block_size);
      try {
        const read = await file.read(chunk);
        console.log("read block bytes=", read)
        if (read !== null && read > 0) {
          controller.enqueue(chunk.subarray(0, read));
          read_bytes += read;
        }

        read_blocks--;
        if (read_blocks === 0) {
          log.info("no more blocks", read_bytes)
          controller.close();
          file.close();
        }
      } catch (e) {
        controller.error(e);
        console.log(e)
        file.close();
      }
    },

    cancel(reason){
      console.log("canceled=", reason)
      file.close();
    }
  });

  return new Response(stream, {
    status: 206,
    headers: {
      "Content-Range": `bytes ${start_index}-${end_index}/${size}`,
      "Accept-Ranges": "bytes",
      "Content-Length": `${end_index - start_index}`,
      "Content-Type": "video/mp4",
    },
  });

The code above is supposed to server the video in chunks of around 1.5MB each, and the ReadableStream is supposed to read each chunk in 16 KB blocks, so thats 100 blocks in total.

It appears to stream fine in firefox, but I do sometimes get an error in the Deno console TypeError: The stream controller cannot close or enqueue (not always)

In Chrome it only streams for about 12 seconds, even tho the video is 30 seconds long. If you press play again it starts from the beginning. And in the console I sometimes get the same error as with Firefox.

Any idea how to fix this?

            // sweetalert framwork
            **swal({  
                title: "Good job!",
                text: "Profile Update Successfully!",
                icon: "success",
                button: "Okay!",
              });
            window.location.reload();**

When this code runs, this alert is not displayed when the page reloads. I want to make the page reload after the alert appears.

I need a forex/binary chart with smooth transitions, candlesticks, price variation, the ability to add elements to the chart, and indicators.

Do you have any suggestions?

Currently, I am using the Trading View Advanced Chart library with a custom data feed (open, high, low, close, and timeframe), but it lacks smooth transitions. The values “jump” instead of “sliding” smoothly from the current value to the new one.

Based on my research, this library doesn’t seem to support this type of functionality.

I am working with the Minimog theme on our Magento site and have encountered an issue with the sub-category slider on the category pages. This feature, which should display and allow scrolling through sub-categories, seems to be inactive.

Issue Description: After inspecting the frontend, I noticed that the slider component is present but does not function as expected—there is no interaction or movement in the sub-categories list.

the subcategory slider not functioning

and the HTML Snippet of the Slider:

<div class="sub-category widget-category-thumbnail-image">
   <div class="sub-category-slide slick-slider slick-initialized">
      <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button>
      <div class="slick-list draggable">
         <div class="slick-track" style="opacity: 1; width: 5400px; transform: translate3d(-1200px, 0px, 0px);">
            <div class="slick-slide slick-cloned" data-slick-index="-4" id="" aria-hidden="true" style="width: 300px;" tabindex="-1">
               <div>
                  <div class="elementor-category-thumbnail-image-item item-loading-slick" style="width: 100%; display: inline-block;">
                     <div class="elementor__item--hover"></div>
                     <div class="category-thumbnail__info absolute flex-layout bottom justify-content-between align-items-center">
                        <div class="category-info-wrapper">
                           <h3 class="category-thumbnail__title"><a href="https://hiind.net/Fr_FR/la-maman-et-bebe/nourriture-et-fournitures-pour-bebe.html" tabindex="-1"> nourriture et fournitures pour bébé </a></h3>
                           <div class="category-count"><span class="cat-count-number">1 items</span></div>
                        </div>
                        <a class="cat-icon-next" href="https://hiind.net/Fr_FR/la-maman-et-bebe/nourriture-et-fournitures-pour-bebe.html" tabindex="-1"><i class="far fa-arrow-right"></i> </a>
                     </div>
                  </div>
               </div>
            </div>

so inside the code he even rendered the category links and titles but doesn’t show any category and couldn’t identify the problem.
Questions:

1. Has anyone faced a similar issue with the Minimog theme or another Magento theme where the sub-category slider is present but inactive?

2. What steps can I take to debug or activate this slider feature? Are there specific JavaScript files or settings I should check?

Troubleshooting Steps Taken:

• Ensured that all relevant slider settings are enabled within the theme options.

• Cleared the Magento cache and re-deployed static content to ensure no old scripts are causing issues.

• Reviewed the theme documentation for any setup or configuration details that I might have missed.

I am trying to create menu with inverse i.e. with black background and white font style. I used the sample code same but its not shows the proper menu.

What I am missing here?

<!doctype html>
<html lang="en">
<head>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>


     <title>Hello, world!</title>
</head>
<body>

    <div>
        <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
</div>


<h1>Hello, world!</h1>

</body>
</html>

The Menu looks as below

But it should be as:

I’m playing around with IntersectionObserver in two different scrolling containers: one uses a 3D perspective transform, and the other uses a simpler 2D transform.

For the 3D container, the observer callback fires constantly while scrolling, even when the red box remains fully visible. Meanwhile, in the 2D container, it behaves how I’d expect—only firing noticeably when entering or leaving the viewport portion.

Below is my minimal example. If you open it and scroll each container separately, you’ll see the 3D container logs frequent small intersection changes, whereas the 2D container logs fewer. Is this normal with 3D transforms? Or am I misusing IntersectionObserver?

You can run the example(opening it on the full page so you can see it nicely)scroll and find the difference between these two.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>IntersectionObserver 3D vs 2D Transform</title>
  <style>
    .compare-section {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
    }
    .container {
      width: 300px;
      height: 200px;
      border: 2px solid #333;
      overflow-y: scroll;
      position: relative;
    }
    .content {
      height: 600px;
      background: linear-gradient(to bottom, #eee, #ddd);
    }

    /* 3D container with perspective */
    .transform-container-3d {
      perspective: 500px;
    }
    .content3d {
      transform: rotateX(15deg);
      transform-origin: top center;
    }

    /* 2D container with a simple rotation */
    .transform-container-2d .content2d {
      transform: rotate(5deg);
      transform-origin: top center;
    }

    .target-box {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      background-color: red;
    }

    .logs {
      font-family: monospace;
      white-space: pre;
      border: 1px solid #ccc;
      padding: 10px;
      height: 150px;
      width: 270px;
      overflow: auto;
    }

    h2 {
      margin: 0 0 10px;
    }
  </style>
</head>
<body>
  <h1>IntersectionObserver 3D vs 2D Transform Test</h1>

  <div class="compare-section">
    <div class="container transform-container-3d">
      <h2>3D Container</h2>
      <div class="content content3d">
        <div class="target-box" id="target3d"></div>
      </div>
    </div>
    <div class="container transform-container-2d">
      <h2>2D Container</h2>
      <div class="content content2d">
        <div class="target-box" id="target2d"></div>
      </div>
    </div>
  </div>

  <div class="compare-section">
    <div class="logs" id="log3d">3D Logs: </div>
    <div class="logs" id="log2d">2D Logs: </div>
  </div>


  <script>
    const target3d = document.getElementById('target3d');
    const log3d = document.getElementById('log3d');
    const target2d = document.getElementById('target2d');
    const log2d = document.getElementById('log2d');

    const observer3d = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        log3d.textContent += `ratio: ${entry.intersectionRatio.toFixed(2)}n`;
      });
    }, {
      root: document.querySelector('.transform-container-3d'),
      threshold: [0, 0.25, 0.5, 0.75, 1]
    });

    const observer2d = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        log2d.textContent += `ratio: ${entry.intersectionRatio.toFixed(2)}n`;
      });
    }, {
      root: document.querySelector('.transform-container-2d'),
      threshold: [0, 0.25, 0.5, 0.75, 1]
    });

    observer3d.observe(target3d);
    observer2d.observe(target2d);
  </script>
</body>
</html>

My questions:

1. Do perspective or 3D transforms cause tiny layout shifts that make the IntersectionObserver recalculate more often?
2. Is there a known workaround if I have to keep the 3D transform?

Looking for a minimal sample single page app that supports Okta OIDC user sign-in flow, user can click the sign-in button on the homepage, redirect to okta for authn, then redirect back when it’s done. That’s all I need.

I’ve tried the Okta sample app at https://github.com/okta/samples-js-react/tree/master/okta-hosted-login unfortunately it’s not working – Clicking the login button then nothing happens, despite I’ve followed the readme and have an OIDC app config in okta.

I have a web host so I can upload the static website there. I’m hands on but not familiar with js so out of box sample app would be ideal. Thanks for the pointer!

In ECMAScript, given a non-negative, finite double x, is the following assertion always true?

Math.sqrt(x) === Math.pow(x, 0.5)

I know that both Math.sqrt() and Math.pow() are implementation-approximated, and the result may vary across platforms. However, are they truly interchangeable, or are there cases where this assertion evaluates to false?

I wrote a simple test program to check for counterexamples, but couldn’t find any:

let x;
while (true) {
    x = Math.random();
    if (!Object.is(Math.sqrt(x), Math.pow(x, 0.5))) {
        break;
    }
}

I also found this question, where the assertion fails in Python. However, when testing the same example in JavaScript, I couldn’t reproduce the error.

Can this assertion ever be false? Or is it guaranteed to be always true?

I’m trying to write a script that would automate the scheduling of uploaded videos on youtube. they are already uploaded and currently in draft mode.

however, when I get to the point when I need to change the date value, I’m just not able to exactly get this date field for some reason. Upon checking, the id of the input value increments everytime you close and open it. it appears to be dynamic. it will show the id as input-22 now, but when you close the date selector dropdown, the date input field’s ID will become input-23

here’s my script so far

(async function() {
console.log(" Starting draft video scheduling...");

// Find draft videos (videos with "Draft" label)
// const drafts = document.querySelectorAll('ytcp-video-row[status="DRAFT"]');
const drafts = document.querySelectorAll('ytcp-video-row');

if (drafts.length === 0) {
    console.log("No draft videos found!");
    return;
}

console.log("Found ${drafts.length} draft(s). Selecting the first one...");

// Click the first draft video to edit
console.log(1)
drafts[0].querySelector("#video-title").click();

// Wait for the details page to load
console.log(2)
await new Promise(resolve => setTimeout(resolve, 2000));

// Click "Visibility" settings button
console.log(3)
document.querySelector("#step-badge-3").click();
await new Promise(resolve => setTimeout(resolve, 1000));

// Select "Schedule"
console.log(4)
document.querySelector('#second-container-expand-button').click();
await new Promise(resolve => setTimeout(resolve, 500));

// Open date picker
console.log(5);
document.querySelector("#datepicker-trigger").click();
await new Promise(resolve => setTimeout(resolve, 1000));

// Set the scheduled date
console.log(6);
const scheduleDate = "February 10, 2025"; // Change this to your desired date
console.log(6.1);

document.querySelector("input.style-scope.tp-yt-paper-input").value = scheduleDate;
console.log('schedule date assigned new value, now displaying again')
console.log(document.querySelector("input.style-scope.tp-yt-paper-input").value)

})();

I tried implementing something using the youtube API for the credits for a free user gets used up after a couple of tries so I’m doing this instead

I’m working on a custom Excel Add-in and want to use entityValue to create a behavior similar to the built-in Stocks data type (and documentation here: https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/excel-data-types-explorer). However, the entityValue doesn’t seem to persist beyond the function where it’s created – so when I go to read the entityValues it’s undefined.

I have an ExtensionPoint for my Entity DataType defined in my manifest.xml (within the DesktopFormFactor):

    <ExtensionPoint xsi:type="DataType">
        <TypeName>TestData</TypeName>
        <Card>
            <Layout>
                <Section title="Test Details">
                    <Field label="Quantity" field="quantity" />
                    <Field label="Price" field="price" />
                </Section>
            </Layout>
        </Card>
    </ExtensionPoint>

Thus, all we’re really capturing in this sample is quantity and price for a product.

Now, in a cell I put a product name (say, “Hammers”) and run a command from the ribbon which converts that cell to an Entity of TestData:

async function createProductDataType(event) {
  try {
    await Excel.run(async (context) => {
        // Get the currently selected cell.
        const range = context.workbook.getSelectedRange();
        range.load(["address", "values", "entityValue"]);
        await context.sync();

        console.log("Converting cell to Product Data Type...");

        // Assume the user entered a product into the cell.
        const productID = range.values[0][0];

        console.log("Product ID: " + productID);

        // Populate additional details for the product (just for testing)
        const productData = {
            prdID: productID,
            quantity: 123,
            price: 2.95,
        };

        console.log("productData:" + JSON.stringify(productData, null, 2));

        // Just write the a version of productID to verify
        range.values = [["product type: " + productID]];

        console.log("Range Values: " + JSON.stringify(range.values, null, 2));

        // Create an object that conforms to the Excel.EntityValue interface.
        const productEntity = {
            entityType: "TestData", // matches the type defined in the manifest.
            prdID: productID, // A unique identifier for the entity instance.
            data: productData, // The detailed data for the entity.
        };

        // Assign productEntity to the entityValue property of the cell.
        range.entityValue = productEntity;

        // Update the cell's format to indicate it’s been converted.
        range.format.fill.color = "#88D3AF";

        range.load(["entityValue", "entityValue/entityType"]);
        await context.sync();

        // Verify the data in the cell
        console.log("Entity Value:" + JSON.stringify(range.entityValue, null, 2));
        console.log("Cell type: " + range.entityValue.entityType);

        await context.sync();
    });
  } catch (error) {
    console.log("Error in product Data Type creation: " + error);
  } finally {
    // Notify the host that the command function is complete.
    event.completed();
  }
}

Invoking this function from the Ribbon behaves as expected. The console is updated as follows:

[Log] "Converting cell to Product Data Type..."               
[Log] "Product ID: Hammers"           
[Log] "productData:{n  "prdID": "Hammers",n  "quantity": 123,n  "price": 2.95n}"          
[Log] "Range Values:[n  [n    "product type: Hammers"n  ]n]"            
[Log] "Entity Value:{n  "entityType": "TestData",n  "prdID": "Hammers",n  "data": {n    "prdID": "Hammers",n    "quantity": 123,n    "price": 2.95n  }n}"           
[Log] "Cell type: TestData"  

So far, so (kind of) good. If I try to retrieve any data from another cell (e.g. =A2.quantity) it will return an error #FIELD! (and there was no change to the cell where we created this entity data type with a little icon).

However, to validate I created a second function that queries that cell to get the entity data: (function name irrelevant, this is just the code to do the check):

    // Get the currently selected cell.
    const range = context.workbook.getSelectedRange();
    range.load(["address", "values", "entityValue"]);
    await context.sync();

    console.log("Checking on entity data for cell from another function...");
    console.log("Value of CELL: " + range.values[0][0]);
    console.log("Entity Value CELL: " + JSON.stringify(range.entityValue, null, 2));

When I look at the console log for this, here is what I see:

[Log] "Checking on entity data for cell from another function..."             
[Log] "Value of CELL: product type: Hammers"          
[Log] "Entity Value CELL: undefined"  

So, it appears that the entityValue/Type didn’t REALLY get set in the cell.

What am I doing wrong? (running the latest Beta of Excel, and I’ve set the requirements for the ExcelAPI version to 1.18).