Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I’m trying to find the last dot in a string (the string may have multiple dots).
Then, store everything that is before and after the last dot in separate variables.
So, text-1.text-2.text-3.text-4 would split into 2 parts like so: text-1.text-2.text-3 stored in a variable and text-4 stored in a another variable.
Based on other answers, I can only get the text after the last dot like so.
var var1 = "text1.text2.text3";
var result = var1.split('.').pop();
console.log(result);I am working on a project that requires me to preform real-time VAD and TTS on clients incoming audio on the server. Also preferably the data should be turned into a pydub’s AudioSegment for ease of use.
Here is what I came up with:
Client:
const socket = new WebSocket("ws://localhost:8000/audio")
const btn = document.getElementById("mic")
let stream, recorder, blobbed = null
const constraints = { audio: {
sampleRate: 16000,
channelCount: 1,
volume: 1.0,
echoCancellation: true,
noiseSuppression: true,
autoGainControl: true
}}
const options = {
mimeType: "audio/webm;codecs=opus",
}
const timeSliceMs = 3 * 1000
let toggle = false
function start_recorder() {
recorder.start(timeSliceMs)
}
function init_recorder() {
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
recorder = new MediaRecorder(stream, options)
recorder.ondataavailable = e => {
if (toggle) {
blobbed = new Blob([e.data], { "type": options.mimeType })
socket.send(blobbed)
}
}
recorder.onstart = e => {
btn.innerText = "ON"
}
recorder.onstop = e => {
btn.innerText = "OFF"
}
start_recorder()
})
.catch(() => { console.error("Couldn't get user media!") })
}
function btnSwitch(e) {
if (recorder == null) {
toggle = true
init_recorder()
} else {
toggle = !toggle
if (toggle) {
start_recorder()
} else {
recorder.stop()
}
}
}
btn.addEventListener("click", btnSwitch)
socket.addEventListener("message", e => {
let data = e.data
try {
data = JSON.stringify()
} catch (err) {
console.error("Server error!")
return
}
console.log(data)
})
function close() {
toggle = false
recorder.stop()
recorder = null
btn.removeEventListener("click", btnSwitch)
console.log("WS connection closed.")
}
socket.addEventListener("close", close)
socket.addEventListener("error", close)
Server:
from fastapi import FastAPI, WebSocket
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from pydub import AudioSegment
from webrtcvad import Vad
import speech_recognition as sr
import numpy as np
from io import BytesIO
app = FastAPI()
app.mount('/static', StaticFiles(directory='static', html=True), name='static')
@app.get("/audio")
def audio():
with open("audio.html", "r") as f:
html = f.read()
return HTMLResponse(html)
@app.websocket("/audio")
async def audio(connection: WebSocket):
await connection.accept()
pad = await connection.receive_bytes()
audio_segment = AudioSegment.from_file(BytesIO(pad), codec="opus", format="webm")
pad_len = len(audio_segment)
while True:
data = await connection.receive_bytes()
data = pad + data
audio_segment = AudioSegment.from_file(BytesIO(data), codec="opus", format="webm")
# Preforming VAD STT
-The obvious problem with my approach is that the JS MediaRecorder is intended to send the recorder audio in one big blob on the stop event and thus only provides the necessary metadata in the first batch of data so in the backend I need pad each subsequent segment with the first one and than slice it in half.
-This understandably isn’t ideal so I would like to find a different (probably more correct) way to do this.
I’m making a game where you can click on a block to reveal a letter. The blocks are animated with a “glowing” effect, where they change color by fading to white and back to the original color. This effect lasts 2 seconds and repeats infinitely.
When you hover the mouse on one of the blocks, the block becomes red. My problem is that, when the mouse goes away from the block, then the animation starts back from the beginning, and can become out of sync with the other blocks. Any idea to have the blocks animated in sync, independently of the mouse hovering?
Minimal reproducible example:
let grid = document.getElementById("grid");
for (i = 0; i < 4; i++){
let row = document.createElement("div");
row.className = "row";
for (j = 0; j < 4; j++){
let box = document.createElement("div");
box.className = "box";
box.classList.add("hoverable");
row.appendChild(box);
}
grid.appendChild(row);
}.box {
/*background-color: blue;*/
width: 50px;
height: 50px;
animation: fade 2s ease-in-out infinite;
border: solid 1px black;
}
.hoverable:hover {
background-color: red;
animation: 0;
}
.row {
display: flex;
flex-direction: row;
}
@keyframes fade {
0% { background-color: blue; }
50% { background-color: #FFFFFF; }
100% { background-color: blue; }
}<div class="grid" id="grid"></div>I am quite new to blazor/ web tech, not a proper c# programmer either. I have an issue with connecting my javascript code to the c# methods. I read the documenation etc and tried few different ways but cannot get it work. I get this errror
Loaded 8.52 MB resources from cache
Debugging hotkey: Shift+Alt+D (when application has focus)
Uncaught Error Error: Assertion failed - heap is currently locked
at Tt (localhost꞉44317/_framework/blazor.webassembly.js:1:47036)
at invokeDotNetFromJS (localhost꞉44317/_framework/blazor.webassembly.js:1:45338)
at invokeDotNetMethod (localhost꞉44317/_framework/blazor.webassembly.js:1:3485)
at invokeDotNetStaticMethod (localhost꞉44317/_framework/blazor.webassembly.js:1:3241)
at e.invokeMethod (localhost꞉44317/_framework/blazor.webassembly.js:1:1980)
at createPostcodeFromCoordinates (<eval>/VM46947987:254:29)
at <anonymous> (<eval>/VM46947987:6:29)
javascript side
function createPostcodeFromCoordinates(longitude, latitude) {
var result = DotNet.invokeMethod('cLib', 'createPostcodeFromCoordinates', longitude, latitude);
// var postcode = this.dotNetReference.invokeMethod("createPostcodeFromCoordinates");
// DotNet.invokeMethod('cSharpLibraries', 'createPostcodeFromCoordinates', longitude, latitude)
// .then(result => {
// console.log(result);
// });
C#
public static string CreatePostcodeFromCoordinates(string longitude, string latitude)
{
// Many lines of logic...
return result;
}
Any ideas how I can fix it? This error message above with Uncaught Error Error: Assertion failed – heap is currently locked
is probably the best I managed. I was getting some other more weird messages but I think this is better! I don’t need anything async but happy to have it. Trying to keep the call as simple as possible. Plus the debugger is not working in Visual studio which may have helped to understand what goes wrong.
Thanks very much!
I am making a website for trains and I made a dropdown button for a button that when clicked displays all the trains on the website but for some reason on my tablet version the button just doesn’t work the first time its pressed but after that it’s ok. It’s really weird issue and I just don’t know what to do. I have absolutely no experience in JS and I have no time to learn it for this project but I really want to use it. On this image you can see that first is detected that the menu button that displays the navigation bar and then when I press the train-dropdown button it is being detected but still doesn’t fire the function
function TrainDropdown() {
const trainMenu = document.getElementById("trains");
trainMenu.classList.toggle("show");
console.log("TrainDropdown toggled:", trainMenu.classList.contains("show"));
}
function Menu() {
const navBar = document.getElementById("phone-nav-bar");
navBar.classList.toggle("show-nav-bar");
}
function MobileTrainDropdown() {
const trainElements = document.getElementById("tablet-trains");
if (trainElements.style.display === "none") {
trainElements.style.display = "flex";
} else {
trainElements.style.display = "none";
}
}
window.addEventListener("click", function (event) {
console.log("Window click detected on:", event.target);
// Close train dropdown if clicked outside the dropdown button
if (!event.target.closest('.dropdown-button')) {
const dropdowns = document.getElementsByClassName("train-elements");
for (let i = 0; i < dropdowns.length; i++) {
const openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
console.log("Closed train dropdown:", openDropdown);
}
}
}
// Close mobile nav menu if clicked outside menu button and nav bar
const navBar = document.getElementById("phone-nav-bar");
const menuButton = document.querySelector('.menu-button');
if (navBar && menuButton && !menuButton.contains(event.target) && !navBar.contains(event.target)) {
navBar.classList.remove("show-nav-bar");
console.log("Closed mobile nav menu.");
}
});body {
margin: 0;
}
/*top-bar properties*/
.top-bar {
display: flex;
align-items: center;
height: 10vh;
background-color: #A7C4FF;
}
.branding {
display: flex;
align-items: center;
}
.branding img {
height: 12vh; /* Set a fixed height for the logo */
width: auto; /* Maintain aspect ratio */
}
/*menu toggle properties*/
.menu-button {
display: none; /* Hidden on larger screens */
}
.mobile-phone-branding {
display: none; /* Hidden on larger screens */
}
/*navigation bar properties*/
.nav-bar {
display: flex;
flex: 1;
align-items: center;
margin-left: 10vw;
}
/*buttons*/
.nav-button, .dropdown-button{
width: 100%;
height: 8vh;
line-height: 8vh;
margin-right: 5px;
font-family: Unbounded;
font-size: 1vw;
text-align: center;
text-decoration: none;
background-color: #A7C4FF;
border: none;
border-radius: 40px;
transition: background-color 0.4s ease-in-out;
}
.nav-button:hover, .dropdown-button:hover{
background-color: #8FA9FF;
}
/*train-dropdown and all its children properties*/
.train-dropdown{
position: relative;
margin-right: 5px;
width: 100%;
}
.train-elements{
display: none;
width: 100%;
position: absolute;
top: 10vh;
background-color: #7f9dfd;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 0.8vw;
z-index: 1;
}
.train-elements a{
padding: 1em;
color: black;
text-decoration: none;
}
.train-elements a:hover{
background-color: #567dff;
}
.train-elements #first-element:hover{
border-top-left-radius: 0.8vw;
border-top-right-radius: 0.8vw;
}
.train-elements #last-element:hover{
border-bottom-left-radius: 0.8vw;
border-bottom-right-radius: 0.8vw;
}
#mobile-phone-train-button{
display: none;
}
/*Class that JS uses to show train-elements*/
.show{
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 1300px){
/*hiding nav-bar to save space and make it into a dropdown*/
.nav-bar{
display: none;
}
.menu-button{
display: flex;
height: 8.5vh;
width: 8.5vh;
justify-content: center;
align-items: center;
border-radius: 20px;
border: none;
background-color: #A7C4FF;
}
.menu-button img {
width: 3vw; /* Set a fixed width */
height: auto; /* Maintain aspect ratio */
max-width: none; /* Prevent scaling */
}
.menu-button:hover{
background-color: #8FA9FF;
}
/*button properties*/
.nav-button, .dropdown-button{
border-radius: 0;
background-color: #94b7ff;
}
.mobile-phone-nav-bar{
box-shadow: 8px 16px 16px 0px rgba(0,0,0,0.2);
background-color: #A7C4FF;
width: 300px;
position: absolute; /* Position below the top bar */
top: 10vh; /* Position below the top bar */
left: 0; /* Align to the left */
width: 300px; /* Full width */
display: none; /* Hidden by default */
}
/*train dropdown properties*/
.tablet-train-elements{
display: none;
width: 100%;
flex-direction: column;
position: absolute;
background-color: #7f9dfd;
}
.tablet-train-elements a{
padding: 12px 16px;
color: black;
text-decoration: none;
}
.tablet-train-elements a:hover{
background-color: #567dff;
}
/*hides the button i will be using for phone mode that
substitutes the dropdown button cause there is no space*/
#mobile-phone-train-button{
display: none;
}
/*a class JS uses to display the dropdown when pressing the button*/
.show-nav-bar{
display: flex;
flex-direction: column;
}
}<!DOCTYPE html>
<html lang="bg">
<head>
<!--meta data-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--tab view-->
<title>Железопътна страст</title>
<link rel="icon" href="assets/images/favicon.png">
<!--css files-->
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="topbar/topbar.css">
<!--google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Unbounded:[email protected]&display=swap" rel="stylesheet">
</head>
<script src="topbar/topbar.js" defer></script>
<body>
<!--the top bar-->
<div class="top-bar">
<div class="mobile-phone-branding">
<a href="index.html"><img id="logo" src="assets/images/logo.png" alt="Лого на влак"></a>
</div>
<div class="menu-toggle">
<button class="menu-button" onclick="Menu()"><img src="assets/images/menu.png"></button>
<div class="mobile-phone-nav-bar" id="phone-nav-bar">
<a class="nav-button" href="index.html">Начало</a>
<a class="nav-button" id="mobile-phone-train-button" href="#trains">Влакове</a>
<div class="tablet-train-dropdown">
<button onclick="MobileTrainDropdown()" class="dropdown-button">Влакове</button>
<div id="tablet-trains" class="tablet-train-elements">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a class="nav-button" href="#contacts">Контакти</a>
<a class="nav-button" href="#aboutme">Повече за мен</a>
</div>
</div>
<div class="branding">
<a href="index.html"><img id="logo" src="assets/images/logo.png" alt="Лого на влак"></a>
</div>
<div class="nav-bar">
<a class="nav-button" href="index.html">Начало</a>
<div class="train-dropdown">
<button onclick="TrainDropdown()" class="dropdown-button">Влакове</button>
<div id="trains" class="train-elements">
<a id="first-element" href="#">Link 1</a>
<a href="#">Link 2</a>
<a id="last-element" href="#">Link 3</a>
</div>
</div>
<a class="nav-button" href="#contacts">Контакти</a>
<a class="nav-button" href="#aboutme">Повече за мен</a>
</div>
</div>
</body>
</html>Currently when I hover over an item in the navbar, a horizontal drop-down menu opens like this (note the width of the drop-down menu):
I would like to widen the dropdown menu horizontally like in the next photo, but only desktop version. I would like the dropdown menu to be as wide as the container (the one that Bootstrap already uses with the container class) that I am already using in my navbar and that I will also use throughout the body of the site. In the photo I am inspecting the navbar with Chrome so as to highlight the navbar container to give you an idea of how wide I would like the dropdown menu to be.
Can you help me and show me how to get it? I have tried several attempts, but I failed.
style.css:
* {
box-sizing: border-box;
}
/* Navbar */
.navbar {
background-color: #000033;
padding: 0px 0; /* Imposta il padding verticale invece dell'altezza */
display: flex;
align-items: center;
position: relative;
z-index: 1000;
}
/* Stile logo e testo del brand */
.logo {
height: 80px;
margin-right: 10px;
}
.brand-text {
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
line-height: 1;
}
.fondazione {
font-size: 0.80em;
font-weight: normal;
letter-spacing: 0.28em;
}
.surname {
font-size: 2.4rem;
font-weight: bold;
letter-spacing: 0.05em;
}
/* Rettangolino colorato sotto le voci della navbar */
.navbar-nav .nav-link {
color: #ffffff;
margin-right: 10px;
padding: 0 10px; /* Gestisce lo spazio tra i link */
line-height: normal; /* Usa la line-height di default */
position: relative;
}
.navbar-nav .nav-link:hover::after {
content: '';
display: block;
width: 100%;
height: 3px; /* Altezza del rettangolo */
background-color: #459439;
position: absolute;
bottom: 0; /* Allineato al bordo inferiore */
left: 0;
z-index: 1000;
}
/* Rimozione della freccia dropdown */
.nav-link.dropdown-toggle::after {
display: none;
}
/* Dropdown orizzontale */
.dropdown-menu-horizontal {
display: none;
background-color: #000033 !important;
padding: 20px !important;
min-width: 100%;
border-radius: 0;
position: absolute;
left: 0;
top: 100%;
z-index: 9999;
}
.dropdown-item-horizontal {
color: #ffffff;
display: inline-flex;
align-items: center;
padding: 10px 20px;
margin-right: 30px;
white-space: nowrap;
}
.dropdown-item-horizontal img {
width: 50px;
height: 50px;
margin-right: 15px;
}
.dropdown-item-horizontal:hover {
color: #d4d4ff;
text-decoration: none;
}
/* Mostra il menu a tendina al passaggio del mouse */
.nav-item:hover .dropdown-menu-horizontal {
display: flex;
justify-content: space-around;
}
/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
.navbar-expand-md .navbar-nav .nav-link {
padding-top: 20px;
padding-bottom: 20px;
}
}
index.html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar con logo e link -->
<nav class="navbar navbar-expand-md navbar-dark mb-0">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="img/..." alt="Logo" class="logo">
<div class="brand-text">
<span class="fondazione">AAAAAAA</span>
<span class="surname">XXXX</span>
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
<div class="dropdown-menu dropdown-menu-horizontal" aria-labelledby="fondazioneDropdown">
<a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a>
<a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a>
<a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js:
document.addEventListener("DOMContentLoaded", function () {
const dropdowns = document.querySelectorAll(".nav-item.dropdown");
dropdowns.forEach(dropdown => {
dropdown.addEventListener("mouseenter", function () {
const menu = this.querySelector(".dropdown-menu-horizontal");
if (menu) menu.style.display = "flex";
});
dropdown.addEventListener("mouseleave", function () {
const menu = this.querySelector(".dropdown-menu-horizontal");
if (menu) menu.style.display = "none";
});
});
});
Currently when I hover over an item in the navbar, a horizontal drop-down menu opens like this (note the width of the drop-down menu):
I would like to widen the dropdown menu horizontally like in the next photo. I would like the dropdown menu to be as wide as the container (the one that Bootstrap already uses with the container class) that I am already using in my navbar and that I will also use throughout the body of the site. In the photo I am inspecting the navbar with Chrome so as to highlight the navbar container to give you an idea of how wide I would like the dropdown menu to be.
Can you help me and show me how to get it? I have tried several attempts, but I failed. Failed attempts
style.css:
* {
box-sizing: border-box;
}
/* Navbar */
.navbar {
background-color: #000033;
padding: 0px 0; /* Imposta il padding verticale invece dell'altezza */
display: flex;
align-items: center;
position: relative;
z-index: 1000;
}
/* Stile logo e testo del brand */
.logo {
height: 80px;
margin-right: 10px;
}
.brand-text {
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
line-height: 1;
}
.fondazione {
font-size: 0.80em;
font-weight: normal;
letter-spacing: 0.28em;
}
.surname {
font-size: 2.4rem;
font-weight: bold;
letter-spacing: 0.05em;
}
/* Rettangolino colorato sotto le voci della navbar */
.navbar-nav .nav-link {
color: #ffffff;
margin-right: 10px;
padding: 0 10px; /* Gestisce lo spazio tra i link */
line-height: normal; /* Usa la line-height di default */
position: relative;
}
.navbar-nav .nav-link:hover::after {
content: '';
display: block;
width: 100%;
height: 3px; /* Altezza del rettangolo */
background-color: #459439;
position: absolute;
bottom: 0; /* Allineato al bordo inferiore */
left: 0;
z-index: 1000;
}
/* Rimozione della freccia dropdown */
.nav-link.dropdown-toggle::after {
display: none;
}
/* Dropdown orizzontale */
.dropdown-menu-horizontal {
display: none;
background-color: #000033 !important;
padding: 20px !important;
min-width: 100%;
border-radius: 0;
position: absolute;
left: 0;
top: 100%;
z-index: 9999;
}
.dropdown-item-horizontal {
color: #ffffff;
display: inline-flex;
align-items: center;
padding: 10px 20px;
margin-right: 30px;
white-space: nowrap;
}
.dropdown-item-horizontal img {
width: 50px;
height: 50px;
margin-right: 15px;
}
.dropdown-item-horizontal:hover {
color: #d4d4ff;
text-decoration: none;
}
/* Mostra il menu a tendina al passaggio del mouse */
.nav-item:hover .dropdown-menu-horizontal {
display: flex;
justify-content: space-around;
}
/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
.navbar-expand-md .navbar-nav .nav-link {
padding-top: 20px;
padding-bottom: 20px;
}
}
index.html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar con logo e link -->
<nav class="navbar navbar-expand-md navbar-dark mb-0">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="img/..." alt="Logo" class="logo">
<div class="brand-text">
<span class="fondazione">AAAAAAA</span>
<span class="surname">XXXX</span>
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
<div class="dropdown-menu dropdown-menu-horizontal" aria-labelledby="fondazioneDropdown">
<a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a>
<a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a>
<a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js:
document.addEventListener("DOMContentLoaded", function () {
const dropdowns = document.querySelectorAll(".nav-item.dropdown");
dropdowns.forEach(dropdown => {
dropdown.addEventListener("mouseenter", function () {
const menu = this.querySelector(".dropdown-menu-horizontal");
if (menu) menu.style.display = "flex";
});
dropdown.addEventListener("mouseleave", function () {
const menu = this.querySelector(".dropdown-menu-horizontal");
if (menu) menu.style.display = "none";
});
});
});
у меня есть компонент для отправки нового поста на сервер. Я использую React TS react-hook-forms и yup. Мне нужно получать ref на оба инпута, которые я пытаюсь валидировать, поэтому я использую useControl и свой ref, при этом я получаю ошибку ‘ref’ is specified more than once, so this usage will be overwritten.ts(2783)
addPost.tsx(127, 13): This spread always overwrites this property.
const inputRef: React.RefObject<HTMLInputElement>
вот мой код
так я регистрирую
const {
register,
control,
handleSubmit,
formState: { errors },
} = useForm<IRequestPost>({
resolver: yupResolver(addPostSchema),
});
// Создаем useRef для input text
const inputRef = useRef<HTMLInputElement>(null);
// Используем useController для управления input text
const {
field: { ...inputProps },
fieldState: { error: inputError },
} = useController({
name: "text",
control,
defaultValue: "",
});
// Создаем useRef для input file
const fileInputRef = useRef<HTMLInputElement>(null);
// Используем useController для управления input file
const {
field: { ...fileInputProps },
fieldState: { error: fileInputError },
} = useController({
name: "attachments",
control,
defaultValue: [], // Или [], если attachments - массив
});
пара функций, где мне необходимо использовать свой ref
const divRef = React.useRef<HTMLDivElement>(null);
const addTagInPost = () => {
const inputValue = inputRef.current?.value.trim(); // Используем inputRef.current
if (inputValue) {
dispatch(onAddToTags(inputValue));
if (inputRef.current) {
// Используем inputRef.current
inputRef.current.value = "";
}
}
};
React.useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (divRef.current && !divRef.current.contains(event.target as Node)) {
setIsVisible(false);
} else {
setIsVisible(true);
}
};
document.addEventListener("click", handleClickOutside);
return () => {
document.removeEventListener("click", handleClickOutside);
};
}, [isVisible]);
остальной код компонента
return (
<div className={styles.root} ref={divRef}>
<form onSubmit={handleSubmit(onSubmit)}>
<div className={styles.text}>
<img src="src/assets/utilsIcon/userDefaultImg.svg" alt="" />
<input
type="text"
ref={inputRef} // тут возникает ошибка 'ref' is specified more than once, so this usage will be overwritten.ts(2783) addPost.tsx(127, 13): This spread always overwrites this property. const inputRef: React.RefObject<HTMLInputElement>
placeholder="Что нового?"
{...inputProps} // Передаем свойства от useController
/>
<div className={styles.added}>
<svg
onClick={() => fileInputRef.current?.click()} // Используем fileInputRef.current
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 555.073 555.073"
>
<g>
<path d="M60.629,498.186c37.387,37.388,98.22,37.388,135.607,0L300.852,393.57l74.56-74.56l19.554-19.553 c26.604-26.604,26.604-69.891,0-96.494l-14.462-14.462c-26.604-26.604-69.89-26.604-96.494,0L146.615,325.896 c-11.952,11.953-11.952,31.328,0,43.274c11.946,11.946,31.328,11.946,43.274,0l137.395-137.394c2.741-2.741,7.203-2.741,9.944,0 l14.462,14.462c2.742,2.741,2.742,7.203,0,9.945l-19.554,19.553l-74.56,74.56L152.962,454.911 c-13.525,13.525-35.533,13.525-49.058,0l-32.595-32.595c-13.525-13.525-13.525-35.533,0-49.058l21.322-21.322l179.493-179.493 l63.465-63.465c25.281-25.281,66.42-25.281,91.702,0l47.65,47.65c25.281,25.282,25.281,66.421,0,91.702L249.297,473.976 c-11.953,11.952-11.953,31.328,0,43.274c11.946,11.946,31.328,11.946,43.274,0l225.645-225.645 c49.144-49.144,49.144-129.107,0-178.251l-47.65-47.65c-49.144-49.144-129.107-49.144-178.251,0l-63.465,63.465L49.362,308.662 L28.04,329.984c-37.387,37.387-37.387,98.22,0,135.606L60.629,498.186z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 485 485">
<g>
<path d="M413.974,71.026C368.171,25.225,307.274,0,242.5,0S116.829,25.225,71.026,71.026C25.225,116.829,0,177.726,0,242.5 s25.225,125.671,71.026,171.474C116.829,459.775,177.726,485,242.5,485s125.671-25.225,171.474-71.026 C459.775,368.171,485,307.274,485,242.5S459.775,116.829,413.974,71.026z M242.5,455C125.327,455,30,359.673,30,242.5 S125.327,30,242.5,30S455,125.327,455,242.5S359.673,455,242.5,455z" />
<path d="M318.514,231.486c19.299,0,35-15.701,35-35s-15.701-35-35-35s-35,15.701-35,35S299.215,231.486,318.514,231.486z" />
<path d="M166.486,231.486c19.299,0,35-15.701,35-35s-15.701-35-35-35s-35,15.701-35,35S147.188,231.486,166.486,231.486z" />
<path
d="M242.5,355c-46.911,0-89.35-29.619-105.604-73.703l-28.148,10.378C129.329,347.496,183.08,38
5,242.5,385 s113.171-37.504,133.752-93.325l-28.148-10.378C331.85,325.381,289.411,355,242.5,355z"
/>
</g>
</svg>
</div>
</div>
{isVisible && (
<div className={styles.bottom}>
<input
type="file"
ref={fileInputRef} // тут возникает ошибка 'ref' is specified more than once, so this usage will be overwritten.ts(2783) addPost.tsx(159, 15): This spread always overwrites this property. const fileInputRef: React.RefObject<HTMLInputElement>
multiple
accept=".jpg,.jpeg,.png,.gif,.mp3,.mp4"
{...fileInputProps} // Передаем свойства от useController
/>
<div className={styles.options}>
<input type="text" placeholder="Тэги" {...register("tags")} />
<button onClick={() => addTagInPost()}>+</button>
</div>
<div className={styles.tags}>
{tags.map((item, index) => (
<AddTag text={item} key={index} />
))}
</div>
<button className={styles.submit}>Отправить</button>
</div>
)}
</form>
</div>
);
};
export default AddPost;
пробовал так же пользоваться register, но ошибка повторялась
I have compressed a file app.log file to app.log.br. what would be the mime type for this file. I cannot find a relevant type it in https://www.npmjs.com/package/mime-types
I am trying to upload this file to AWS S3, what should be the values for content-type and content-encoding?
I was wondering how do I use onDropObjectOnItem for vis timeline? The documentation seems to be very poor, as I’m using TypeScript. I’m trying to drag <span> elements into the timeline.
I’ve tried the official examples, but documentation is poor. I can’t provide the code I’m working on. However, this is the example that I’m working with visjs.github.io/vis-timeline/examples/timeline/other/…. The issue is that the JS code is not well documented and the official documentation does not assist either.
Here’s where I’m at:
onDropObjectOnItem: function(taskItem: HTMLElement, callback (taskItem as HTMLElement) => void) {
// Add item to timeline
this.timeline.add(taskItem);
console.log('Added item to timeline.');
callback(taskItem);
}
I am totally confused about a video streaming app I have been making for fun.
I have:
Should I be:
My server originally sent the mp4 files in chunks based on the range in headers. Now the .m3u8 files are already broken down into chunks of .ts.
I found someone online who lets you see the frontend code and I can tell that the client makes one request for a .m3u8 file and then in the network tab a series of .ts chunks are being sent back as well. So I can’t tell what the server is doing to make these chunks.
I might also be a little confused about how buckets really work but thats a different problem.
The frontend code is very basic React setup and this is all that’s needed to call a video:
const playerRef = useRef<HTMLVideoElement>(null);
const [hlsUrl, setHlsUrl] = useState(
'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
);
return (
<ReactHlsPlayer
playerRef={playerRef}
src={hlsUrl}
autoPlay={true}
controls={false}
width='60%'
height='auto'
/>
)
I tried sending it through the same system to send back an mp4 but it sent the m3u8 and then couldn’t send the .ts files
If it’s not too clear, I’m badly trying to ask how do people set up a server to work with streaming, hls and buckets all in one?
I don’t need code just guidance.
I am trying to dynamically re-enable all dates after previously restricting some dates using the enable settings.
However, I’ve come across an interesting workaround that involves setting _enable to undefined. This successfully made all dates selectable again, but it feels wrong.
Here’s the code snippet:
// Initialize Flatpickr
const picker = flatpickr("#datepicker", {
enableTime: false,
dateFormat: "Y-m-d",
});
// Enable only a specific range of dates
picker.set("enable", ["2023-11-01", "2023-11-10"]);
// Later, reset to make all dates selectable again
picker.set("_enable", undefined); // <-- This works, but feels like a hack
My Questions:
Why does using _enable work?
What is the “normal” or official way to re-enable all dates?
picker.set("enable", []); works, but sets everything to disabled (no enabled dates)picker.set("enable", undefinde); or picker.set("enable", null); with error:flatpickr:2 Uncaught TypeError: Cannot read properties of undefined (reading 'slice')
at he (flatpickr:2:35009)
at Object.set (flatpickr:2:37988)
at w.set (flatpickr:2:33474)
at HTMLButtonElement.<anonymous> (_display/:59:14)
Here is the full “working” demo on jsfiddle
In Firefox, if you do a search (find-in-page), the browser will add lines to the scrollbar for each search-result found to make it easier to see how many search-results there are and where in the page they are located, as seen in the screenshot.
Is this only part of the browser, or is it achievable by a webpage (CSS/JavaScript)? All I can find is information about generic customization of size and shape of the scrollbar, not about marks in the scrollbar.
If in App.vue I write it, works:
<a-entity
geometry="primitive: plane; width: 4; height: 0"
material="visible: false"
text="value: Extraño; color: blue; font: custom-msdf.json; font-image: custom-msdf.png; negate: false"
position="0 2 -2"></a-entity>
The letter ñ in the word “Extraño” is seen.
But if I create the entity in javascript, no:
const titleEntity = document.createElement('a-entity');
titleEntity.setAttribute('class', 'title');
titleEntity.setAttribute('geometry', 'primitive: plane; height: 0.02; width: 0.23');
titleEntity.setAttribute('material', 'visible:false');
titleEntity.setAttribute('position', '0 0.01 0.076');
titleEntity.setAttribute('rotation', '0 0 90');
titleEntity.setAttribute('negate', 'false');
titleEntity.setAttribute('text', `value:Extraño; font: custom-msdf.json; font-image: custom-msdf.png; negate: false`);
If I use:
titleEntity.setAttribute('text', `value:English;`);
Then, I can’t use Non-ASCII Characters
I’ve created a react SPA. But when I share the link, it neither generates the link preview nor the description & title. I used meta tags from metatags.io for preview but it didn’t work. This website is deployed at Vercel
In my index.html file, I added these meta tags:
<title>My website</title>
<meta name="title" content="My website" />
<meta name="description" content="Lorem ipsum dolor sit" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.mywebsite.io/" />
<meta property="og:title" content="My website" />
<meta property="og:description" content="Lorem ipsum dolor sit" />
<meta property="og:image" content="./favicon.png" />