javascript – Page 2593 – Blancer.com Tutorials and projects

Bugs with rolly.js implementation on Astro v4 Project

I don’t have to much experience working with Astro v4 framework, so i actually trying to work with it while i’m learning how to use it. Obviously i experimented a couple of bugs or errors but all of this i fixed successfully, although this isn’t the case.

I’m trying to add the rolly.js implementation, but when the importation finally work “successfully”, it come with some bugs.

in this case, looks like the rolly.js package is excluding the styles that have relation with the background, as the image background as the elements that have some styles for the background. That means the mix-blend-mode property, and as i mentioned it, the background-image property. But the entire website works good, except for that.

This is how should looks like
expectation

box

This is how actually looks like
reality

box-showed

Lastly, this is what i trying to do:

<script>
   import rolly from "rolly.js";

   const r = rolly({
      view: document.querySelector(".app"),
      native: true,
      // other options
   });
   r.init();
</script>
<div class="app">
   <Cursor />
   <div data-scene>
      <slot/>
   </div>
</div>

Chatbox does NOT work, after translation from Javascript to Pyscript

I had a chatbox in HTML created based on Javascript. Now I am trying to translate the Javascript code to Pyscript, to better streamline the data analytics tools. However, after the translation, the chatbox does not work properly. I have posted both Pyscript and Javascript versions of code for comparison.

Could you please let me know what is wrong with the Pyscript code? Thanks.

The .html file with a pyscript based chatbox (i.e., the code after translation) is as follows. After clicking the “Send” button, nothing happens. It is supposed to display the question in one line, and the answer in the following line.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <!-- PyScript CSS and JS -->
  <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.3/core.css"/>
  <script type="module" src="https://pyscript.net/releases/2024.1.3/core.js"></script>
</head>
<body>
  <div id="contents">
    <div class="post">
      <br><br><br><br>
      <p>
        Post your question here. The answer will be returned in the next row. 
        <div id="chatbox">
          <div id="messages"></div>
          <input type="text" id="userInput" placeholder="Type a message...">
          <button id="sendButton">Send</button>
        </div>
        <py-script>
          from js import document
      
          def send_message(event):
              input_element = document.getElementById("userInput")
              message = input_element.value.trim()
              if message:
                  messages_container = document.getElementById("messages")
                  new_message = document.createElement("div")
                  new_message.textContent = message
                  messages_container.appendChild(new_message)
                  input_element.value = ""  # Clear input field
                  messages_container.scrollTop = messages_container.scrollHeight  # Scroll to the bottom
      
                  # Simulated response
                  response = document.createElement("div")
                  response.textContent = "The response should be displayed here."
                  messages_container.appendChild(response)
                  messages_container.scrollTop = messages_container.scrollHeight  # Scroll to the bottom again
      
          send_button = document.getElementById("sendButton")
          send_button.addEventListener("click", send_message)
        </py-script>
      </p>
    </div>
  </div>
    
</body>
</html>

The Javascript version of the code works well. The code is as follows.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="contents">
    <div class="post">
      <br><br><br><br>
      <p>
        Post your question here. The answer will be returned in the next row. 
        <div id="chatbox">
          <div id="messages"></div>
          <input type="text" id="userInput" placeholder="Type a message...">
          <button onclick="sendMessage()">Send</button>
      </div>
      <script>
          function sendMessage() {
              var input = document.getElementById("userInput");
              var message = input.value.trim();
              if (message !== "") {
                  // Post question here.
                  var messagesContainer = document.getElementById("messages");
                  var newMessage = document.createElement("div");
                  newMessage.textContent = message;
                  messagesContainer.appendChild(newMessage);
                  input.value = ""; // Clear input field
                  messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to the bottom
                  // Post anwer here. 
                  var newMessage = document.createElement("div");
                  newMessage.textContent = "The response should be displayed here.";
                  messagesContainer.appendChild(newMessage);
                  input.value = ""; // Clear input field
                  messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to the bottom
              }
          }
      </script> 
      </p>
    </div>
  </div>
    
</body>
</html>

parse-git-diff ライブラリの使い方がわからない

electronを使用して、git commitしたコードの差分(diff)を解析し、json形式に表示するアプリを開発している。それには、parse-git-diffというライブラリが不可欠なのですがうまく動かず困っています。

ドキュメント

上記がparse-git-diffのドキュメントですが、

const result = parseGitDiff('... git diff ...');

(‘…git diff…’)に何を入力していいかわからないのです。
git コマンドを入れるのか？

const result = parseGitDiff('git diff');

結果は、

{ type: 'GitDiff', files: [] }

該当fileを入れるのか？

const result = parseGitDiff('main.js');

結果はやはり'{ type: ‘GitDiff’, files: [] }’

ターミナルでは正常に動くgit コマンド

const result = parseGitDiff('git diff 1dd35**..48a63**');

結果'{ type: ‘GitDiff’, files: [] }’

ドキュメントのように’a/newfile.md’と’b/newfile.md’を作成。

const result = parseGitDiff('diff --git a/newfile.md b/newfile.md');

結果'{ type: ‘GitDiff’, files: [] }’

色々、git コマンドやファイルを入れてみたのですが良い結果が得られず、どなたかparse-git-diffをお使いになられた方、助言をお願いします。

os:mac m1
node: v18.0.0
parse-git-diff: ^0.0.15

How do I exclude an exported JS file in Node.JS

I have a Node.JS library package (Let’s call it OasisLib) which has a file named TypeGenerator.ts. The exact logic of what happens in the file immaterial. But This needs to access a files in filesystem while building the project. So, we used let fs = require('fs') to write some additional files to file system.

This OasisLib needs to be used in two different Node.JS modules.

OasisUI – This is a react application
OasisLibExtension – This is another NodeJS library other team has to be able to implement and in here we need to use TypeGenerator that is defined in OasisLib to generate additional files during build.

So, the OasisLib is used in both a UI package and a non-UI package and the TypeGenerator in base library package is only needed in extension library during build time. We have exported TypeGenerator in library package by adding it as an export in index.ts.

However, when I’m running the UI package we are getting following error on homepage of UI.

ERROR in ../OasisLib/dist/src/gen/TypeGenerator.js 48:15-28
Module not found: Error: Can't resolve 'fs' in '/Volumes/Code/OasisLib/src/OasisLib/dist/src/gen'

So, the JS file is being compiled even though I’m not using that file in UI package.

Here is what I’m trying to figure out. Is there any way to export TypeGenerator from OasisLib module so that I can use it in LibExtensions package but not cause issues in UI package?

Alternatively can I exclude a specific file when starting ui react application.

I tried adding following to OasisUI but this didn’t solve the issue.

"exports": {
    "../OasisLib/dist/src/gen/TypeGenerator.js": {
      "ignore": true
    }
  },
  "browser": {
    "fs": false
  }

Mouseleave event doesn’t seem to work on closing sub menu in Typescript

I am trying to close a submenu with a “mouseleave” event however it does not seem to be working. Here’s my code. It’s driving me crazy 🙂 I simply want the menu to close when you go outside of it. Part of the navigation with the menu is below. Please let me know if you have any ideas. Thanks

const NavigationMenu = () => {
    const mobile_icon = document.getElementById("mobile-icon") as HTMLElement;
    const mobile_menu = document.getElementById("mobile-menu") as HTMLElement;
    const mobile_menu_bg = document.getElementById(
      "mobile-menu-background",
    ) as HTMLElement;
    const hamburger_icon = document.querySelector(
      "#mobile-icon i",
    ) as HTMLElement;
    const toggleDiscover = document.getElementById(
      "toggleDiscover",
    ) as HTMLElement;
    const toggleTools = document.getElementById("toggleTools") as HTMLElement;
    const nav_arrow_discover = document.querySelector(
      ".nav-arrow.discover",
    ) as HTMLElement;
    const nav_arrow_tools = document.querySelector(
      ".nav-arrow.tools",
    ) as HTMLElement;
    const discover = document.getElementById("discover") as HTMLElement;
    const tools = document.getElementById("tools") as HTMLElement;

    toggleDiscover.onclick = function () {
      discover.classList.toggle("show");
      nav_arrow_discover.classList.toggle("rotate");
    };

    toggleTools.onclick = function () {
      tools.classList.toggle("show");
      nav_arrow_tools.classList.toggle("rotate");
    };

    toggleDiscover.addEventListener("mouseleave", (event) => {
      tools.classList.toggle("show");
      console.log("firing"); /*this fires but it's not really working*/
    });

    function openCloseMenu(): void {
      mobile_menu.classList.toggle("block");
      mobile_menu.classList.toggle("active");
      mobile_menu_bg.classList.toggle("bg-black/60");
    }

    function changeIcon(): void {
      hamburger_icon.classList.toggle("fa-xmark");
    }

    mobile_icon.addEventListener("click", openCloseMenu);
    hamburger_icon.addEventListener("click", changeIcon);
 
};

export default NavigationMenu;

HTML

    <li class="mr-1 text-2xl hover:bg-gray-hover rounded-xl py-1">
            <span id="toggleDiscover">
              <a>Discover <i class="nav-arrow discover fa-solid fa-chevron-down fa-2xs ml-1  transition"></i></a>
            </span>

            <ul id="discover" class="first-letter:text-gray-800 w-full flex">
              <hr class="h-px mt-[1.5rem] w-full border-t-0.5 border-blue-dark relative" />
              <li class="mr-1 mt-0.5 text-2xl hover:bg-gray-hover rounded-xl hover:text-white py-1 flex items-center"><i class="fa-solid fa-house mr-0.75 ml-1.5"></i><.link navigate={~p"/discover?vertical=col-college-planning"} class="block text-2xl">College Planning</.link></li>
              <li class="mr-1 text-2xl hover:bg-gray-hover rounded-xl hover:text-white py-1 flex items-center"><i class="fa-regular fa-heart mr-1 ml-1.5"></i><.link navigate={~p"/discover?vertical=hsc-high-school"} class="block text-2xl">HS Success</.link></li>
              <li class="mr-1 text-2xl hover:bg-gray-hover rounded-xl hover:text-white py-1 flex items-center"><i class="fa-regular fa-heart mr-1 ml-1.5"></i><.link navigate={~p"/discover?vertical=careers"} class="block text-2xl">Careers</.link></li>
            </ul>
          </li>
          <!-- End Discover Dropdown -->

CSS

#discover {
  display: none;
}

#tools {
  display: none;
}

.nav-arrow.rotate {
  rotate: 180deg;
}

#discover.show,
#tools.show {
  display: block;
}

#discover.hide {
  display: none;
}

Showing.a contextual menu on hold on mobile

I have several thumbnails with a contextual menu tied to each one. On hold of a thumbnail on mobile, I want to show the respective contextual menu. Does anyone know how to trigger this “hold” effect on mobile? Is it using the click javascript event listener?

New Index after rotation

I have a dataset as following which requires a rotation. How can I have the new index value returned after rotating?

const shuffle = (data, startPoint) => {
    const shuffledData = [...data.slice(startPoint), ...data.slice(0, startPoint)];

    shuffledData.push(shuffledData[0]);

    return shuffledData
};

const data = [{"p": 0}, {"p": 1}, {"p": 2}, {"p": 3}];

const newData = shuffle(data, 2);

newData.map((d, i, r) => {
    d.newindex = i;

});

console.log(newData);

The desired output is below

[
  {
    
    "p": 2,
    "newindex": 0
  },
  {
    "p": 3,
    "newindex": 1
  },
  {
    "p": 0,
    "newindex": 2
  },
  {
    "p": 1,
    "newindex": 3
  },
 {
    
    "p": 2,
    "newindex": 4
  }
  
]

Strange behavior with link between HTML and Javascript files

I create

element in HTML file and want to change text thru Javascript.
I place function and function call in HTML file and it works.
Then I place the same script in Javascript file and it doesn’t work.
After going back and forth found something strange:
I can keep all script in JS fil, but MUST have function call in HTML file.
Any ideas?
Thanks.

function changeText(){
    document.getElementById("change").innerText = "bla";
}
changeText();

How to handle an late text in playwright

I’m trying to wait until text appears on certain element. My page is fully loaded but on one screen there is something like a “buffering”, informations on the element appears later, I don’t want to use page.waitForTimeout because it is “luck” depending, what if my timeout is too small etc. I want to wait for text to appear

My current state is

await expect(page.locator('my-locator')).toContainText('a')

It is working pretty well because letter “a” is in basically every single world and I want to find a solution to just wait for text to appears, nothing else, I just want my page to wait until that one element which is “buffering” shows fully, but I know there is a solution for it which I don’t know about, looking for help!

How does a browser know the hashvalue of a requested file?

So,I am learning javascript.And from my understanding script can have an attribute called integrity who value is a hash value.

<script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" </script>

From my understanding,the integrity attribute is used to check if the external source file is not corrupted or has been changed.

from where will I get the hashvalue that can used as the value of integrity attribute.

Why am I not able to access the meanings api?

```

I am trying to access the “meaning” from this api link, but every time it does not return anything? api link:https://api.dictionaryapi.dev/api/v2/entries/en/hello

<div class="word-img"></div>
<button class="word-btn">Click Here</button>

const WORD_URL = "https://api.dictionaryapi.dev/api/v2/entries/en/hello";
const word = document.querySelector(".word-img");
async function addNewWord() {
const promise = await fetch(WORD_URL);
const processedResponse = await promise.json();
let text = document.createElement("h1");

text.innerHTML = processedResponse.meanings.definitions.definition;
text.style.fontSize = "25px";
text.style.color = "blue";
word.appendChild(text);
console.log(text); }

document.querySelector(".word-btn").addEventListener("click", addNewWord);

Can’t get quokka.js working with TypeScript 5.x and ES Decorators

I’m trying to run quokka.js in VSCode against a simple TypeScript file with the following decorator:

function message<Input extends new (...args: any) => any>(msg: string) {
    return function (value: Input, context: ClassDecoratorContext) {
    // remaining code removed for brevity...

Here is the consuming class:

@message("Hello from the employee class")
export class Employee {
    public firstName: string;

So a couple of notes, this code does transpile using the tsc command, and the resulting transpiled .js file does work with quokka.js. However, if I run quokka.js on the TypeScript file itself (start on current file), quokka will fail with the following:

Quokka ‘Decorators.ts’ (node: v18.16.0, TypeScript: v5.3.3)
Failed to instrument scripts/typescript/Advanced/Decorators.js 47 |
var ESDecorators; 48 | (function (ESDecorators) {

49 | @message(“Hello from the employee class”)
| ^ SyntaxError: Unexpected character ‘@’ (49:4)

Notice it’s using TypeScript 5.3.3 shown in the error message which does work with ES Decorators. In fact I’ve used the following quokka.js configuration in package.json to ensure it’s using this version locally installed, and not using swc, babel, or anything else:

  "quokka": { 
    "ts": {
      "compiler": "typescript",
      "swc": false
    }
  }

With TypeScript 5.x+, you also don’t need the legacy experimentalDecorators flags turned on so the following is commented out in tsconfig.json:

// "experimentalDecorators": true,
// "emitDecoratorMetadata": true,

So just to level set, the code works, transpiles with the TypeScript compiler, and valid JavaScript is omitted. That indicates a syntactically correct code sample. The problem is only with quokka.js running the TypeScript file directly. Even though it’s using TypeScript 5.3.3 as displayed in the error, it cant understand the @ synatax of Decorators. My research has yielded nothing, and this should work. What do I need to do please to make this ES Decorator code work while running quokka.js?

why I get this null message when trying to use my guard?

enter image description here

As you can see in the uploaded image, I have everything good imported as it should be when using httpClient, but i get this error when going to the route where I use my guard.

ERROR NullInjectorError: NullInjectorError: No provider for _HttpClient!
    at NullInjector.get (core.mjs:4674:27)
    at R3Injector.get (core.mjs:5117:33)
    at R3Injector.get (core.mjs:5117:33)
    at injectInjectorOnly (core.mjs:3831:40)
    at Module.ɵɵinject (core.mjs:3837:42)
    at Object.AuthService_Factory [as factory] (auth.service.ts:8:25)
    at core.mjs:5239:43
    at runInInjectorProfilerContext (core.mjs:3644:9)
    at R3Injector.hydrate (core.mjs:5238:17)
    at R3Injector.get (core.mjs:5106:33)

My guard:

import { CanMatchFn } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { inject } from '@angular/core';

export const authGuard: CanMatchFn = (route, segments) => {
  const authService = inject(AuthService);
  if(authService.auth.id){
    return true;
  }
  return false;
};

The route I use it

    {
        path: 'heroes',
        loadChildren: () => import('./heroes/heroes.module').then(m => m.HeroesModule),
        canMatch: [authGuard]
    },

If I erase canMatch: [authGuard], then works fine, and it should be, because I have been using httpClient in my project before and everything worked fine

Facing Issue on connecting Android device to Android Studio of Remote Desktop via USB & Wi-Fi both

I am trying to connect Android Device to Android Studio foe Debugging App in Remote Desktop via USB and Wi-Fi. In both way i am facing issue, for USB it is not connecting to the Remote Desktop from my Local System. But device is connecting in Local system. And for Wi-Fi I have connected with the VPN to the same network of Remote Connection but in Android Studio it is asking for connecting same Wi-Fi while I am connected to the VPN.

Kindly tell me a way that I can connect my Android Device to the Android Studio of Remote Desktop from Local System.

I am trying to connect Android Device to Android Studio foe Debugging App in Remote Desktop via USB and Wi-Fi. I want to connect it.

How do I limit google streetview response to strictly google panoramas?

Is there any way for me to limit returned streetview pano’s to only google instances. I tried setting StreetViewSource.GOOGLE for sources but still keep getting an outdated, non google pano which is strange to me. I haven’t seen this being an issue until the recent changes that were introduced onto the map platforms

This is the lat lng that I am trying to access: 37.41229382514552, -79.19579734183662
It is resorting to shentel communications pano and not google, even though there is a more recent streetview pano available.

async function findNearestStreetView(location, radius) {
    const {StreetViewService, StreetViewPreference, StreetViewSource} = await google.maps.importLibrary("streetView");
    
    var streetViewService = new StreetViewService();

    // Setting options for Street View request
    var streetViewOptions = {
        location: location,
        radius: radius,
        sources: [StreetViewSource.GOOGLE], // Limiting searches to official Google collections
        preference: StreetViewPreference.NEAREST
    };

    streetViewService.getPanorama(streetViewOptions, function(result, status) {
        if (status === 'OK') {
            // Found an official Google panorama within the given radius
            panorama.setPosition(result.location.latLng);
            panorama.setPov({ heading: 0, pitch: 0 });
            // Optionally, you can send metadata to the server or handle it as needed
            sendMetadataToServer(result.location);
        } else {
            console.log('No Google Street View available within the specified radius.');
        }
    });
}