Category: javascript

I’m building a React Native app with Expo and using a custom LocationModal component that opens when an arrow icon is clicked. However, I’m encountering two persistent errors:

I’m a computer engineer student. I’m looking for a project idea for this summer.
i do HTML/CSS , python, a little bit of java script and c++.
if u could help to to find a idea for a project i would love that. something not too hard to do but valuable.

please I’m so open for ideas.
since this community has a lot of potential, i would like your help.
thank you for your time.

Subject: FullCalendar: Optimize eventDidMount for “More Events” in Week View

I’m using FullCalendar with vanilla JavaScript. I’m utilizing the eventDidMount function to style events, specifically by adding images to them.

The problem arises when a user has a large number of events (e.g., 500 events in a weekly view). In this scenario, Chrome attempts to download all event images upfront, leading to significant RAM consumption and performance issues.

My goal is to optimize eventDidMount so that it only processes visible events initially. When the “+X more” button is clicked, I’d like the hidden events for that specific day to then have their images added. This approach should significantly improve performance.

I attempted to implement this by adding the following check at the beginning of my eventDidMount function:

if (info.el.closest('.fc-more-popover')) {
    return;
}

However, this only prevented images from being added to non-visible events. It didn’t trigger the image addition when the +X more button was clicked, because the eventDidMount function isn’t called again for those already-mounted-but-hidden events.

How can I modify my eventDidMount function or implement another strategy to achieve this lazy loading of event images when the +x more button is activated?

I have a simple program to show realtime postview counts. But in firebase, it says Your security rules are defined as public, so anyone can steal, modify, or delete data in your database. Even every night it sends me an email in gmail about this warning. What is the solution?

If I change rules, it do not show or count postviews, and do not work. Actually I have set it up in my blogger blogspot website to count post views.

HTML Code:

<span class='post-view' data-id='11220'>
<span class='view-load' id='postviews'><span> 
views
</span>

Here is my Javascript code to show postviews:

document.addEventListener("DOMContentLoaded", function() {
    var pvin = "tbt-postview-counter";
    if (!pvin) return console.error("Firebase URL not found!");
    let s = document.createElement("script");
    s.src = "https://cdn.firebase.com/js/client/2.3.2/firebase.js";
    s.onload = () => {
        $(".post-view[data-id]").each((_, el) => {
            const $el = $(el);
            const id = $el.attr("data-id");
            const $counter = $el.find("#postviews").addClass("view-load");
            const dbRef = new Firebase(`https://${pvin}-default-rtdb.firebaseio.com/pages/id/${id}`);
            dbRef.once("value", snap => {
                const data = snap.val() || {
                    value: 0,
                    url: location.href,
                    id: id
                };
                $counter.removeClass("view-load").text(data.value);
                if (document.getElementById("real-post")?.contains(el)) {
                    data.value++;
                    dbRef.child("value").set(data.value);
                }
            });
        });
    };
    document.body.appendChild(s);
});

Here is my rules:

{
  "rules": {
    ".read": true,
    ".write": true,
  }
}

I’m using langgraph.js to create a simple chatbot.

When the session has ended I’d like to be able to delete the thread but I haven’t been able to find any way to do this in the docs.

     this.graph = new StateGraph(AssistantState)
            .addNode('route_node', this.routeNode.bind(this))
            .addNode('init_node', this.initNode.bind(this))
            .addNode('agent', this.agentNode.bind(this))

            .addEdge(START, 'route_node')
            .addConditionalEdges('route_node', async (state) => state.route)

            .addEdge('init_node', END)
            .addEdge('agent', END)

            .compile({ checkpointer: new MemorySaver() })

Any ideas how this is done? Thanks!

first and foremost, my apologies.

Here’s the issue: I want to change the text color of all .navbar__menu-link elements to black (#000) when the page scrolls. However, only the first link (Home) changes color — the others stay white and become invisible against the background.

HTML

<ul class="navbar__menu-list">
  <li><a href="#" class="navbar__menu-link">Home</a></li>
  <li><a href="#" class="navbar__menu-link">About</a></li>
  <li><a href="#" class="navbar__menu-link">Diensten</a></li>
  <li><a href="#" class="navbar__menu-link">Projecten</a></li>
  <li><a href="#" class="navbar__menu-link">Reviews</a></li>
  <li><a href="#" class="navbar__menu-link">Contact</a></li>
</ul>

CSS

.navbar {
  background-color: transparent;
  transition: background-color 0.3s ease-in-out;
}

.navbar.navbar--scroll {
  background-color: #fff;
}

.navbar__menu-link {
  color: #fff; /* default is white */
}

Javascript

window.addEventListener("scroll", function () {
  const navbar = document.querySelector(".navbar");
  const navbarLink = document.querySelector(".navbar__menu-link");

  if (window.scrollY > 0) {
    navbar.classList.add("navbar--scroll");
    navbarLink.style.color = "#000"; // only affects the first link
  } else {
    navbar.classList.remove("navbar--scroll");
  }
});

What I’ve tried:
I understand now that querySelector only grabs the first matching element. But I’m not sure how to fix this so that all .navbar__menu-link elements update their color on scroll.

Question:
How can I change the color of all .navbar__menu-link elements to black when scrolling down the page?

Thanks in advance!

Here’s a problem that I don’t understand; it may be related to the shadow root (or the grid) but I must set the height (to for eg. to 0, see the commented property in the CSS) for min-height to apply to the inner grid.

I observe this behavior in Safari/Chrome/Brave/Firefox/Edge on macOS (I still didn’t test on Linux/Windows for the moment).

customElements.define( "my-component",
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode:'open'});
      this.shadowRoot.append(document.getElementById('my-component-template')
        .content
        .cloneNode(true));
    }
  }
);

<my-component></my-component>
<template id="my-component-template">
  <style>
    :host {
      display: inline-block;
      box-sizing: border-box;
      border: 1px solid black;
      min-width: 64px;
      min-height: 64px;
      /* height: 0; */
    }
    .container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 10%;
      width: 100%;
      height: 100%;
      .element1, .element2 {
        width: 100%;
        height: 100%;
      }
      .element1 { background-color: cyan; }
      .element2 { background-color: black; }
    }
  </style>

  <div class="container">
    <div class="element1"></div>
    <div class="element2"></div>
  </div>
</template>

What could be the inherent reason for that to happen ?

The snippet below has an iframe with fixed-resulution content inside. The parent div may change size and I need this iframe to change along with it.

<div id="outer">
  <iframe id="inner" width="640" height="512" src="https://lowresnx.inutilis.com/player.php"></iframe>
</div>

A follow up on this question

My use case entails having a sticky element, and transforming it to a more compact/truncated form when it gets “stuck” at the top of the scroll area.

There are a number of working methods for firing an event when an element is “stuck” explained in the linked question, however, with or without using the IntersectionObserver method, there is a semi-expected bug when the fired event changes the height of the sticky element. It can cause an infinite loop / deadlock as scrollTop adjusts when the sticky element shrinks which causes the IntersectionObserver to fire again and again in a stutter, or it just tends to reset the scroll position.

Is there a method to change a sticky element when it is stuck, that does not produce this bug?

// get the sticky element
const stickyElm = document.querySelector('header')

const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle('isSticky', e.intersectionRatio < 1),
  {threshold: [1]}
);

observer.observe(stickyElm)

body{ height: 200vh; font:20px Arial; }

section{
  background: lightblue;
  padding: 2em 1em;
}

header{
  position: sticky;
  top: -1px;                       /* ➜ the trick */

  padding: 1em;
  padding-top: calc(1em + 1px);    /* ➜ compensate for the trick */

  background: salmon;
  transition: .1s;
}

/* styles for when the header is in sticky mode */
header.isSticky{
  font-size: .8em;
  opacity: .5;
}

header.isSticky span, header.isSticky br{
  display: none;
}

<section>Space</section>
<hr>
<header><span>Wide Content</span><br><span>Wide Content</span><br><span>Wide Content</span><br><span>Wide Content</span><br><span>Wide Content</span><br><span>Wide Content</span><br>Sticky Header<br><span>More Content</span><br><span>More Content</span><br><span>More Content</span><br><span>More Content</span><br><span>More Content</span></header>
<hr>
<section>Space</section>
<hr>
<section>Space</section>
<hr>
<section>Space</section>

I’m creating a glass-morphism progress bar made of 10 stacked slices, each with its own
backdrop-filter: blur().
It renders perfectly on desktop Chrome/Edge, but on high-DPR mobile
screens (Safari iOS 17, Chrome Android 120) thin un-blurred lines appear
between the slices.

Expected

A seamless vertical blur gradient (no visible boundaries).

Actual

Horizontal 1-px seams / gaps between slices on mobile & tablet viewports

Minimal reproducible example

<div class="blur-container">
  <!-- 10 slices -->
  <div class="slice" style="--i:0; --blur:10px"></div>
  <div class="slice" style="--i:1; --blur:9px"></div>
  <div class="slice" style="--i:2; --blur:8px"></div>
  <!-- …repeat to --i:9 -->
</div>

<style>
.blur-container{
  position:relative;
  width:280px;height:60px;border-radius:30px;overflow:hidden;
  --layers:10;
}
.slice{
  position:absolute;inset:0;
  top:calc(var(--i)*(100%/var(--layers)));
  height:calc(100%/var(--layers));
  background:rgba(102,102,102,.25);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
</style>

What I’ve tried

• Setting heights in vh, px, and fr (grid) – seams persist.
• Overlapping slices by 1 px hides seams but softens edges, which the
  designer rejects.

Question

How can I remove these seams without using visible overlaps?

Environment: React 18, Chrome 120 (Android), Safari 17 (iOS), DPR 2–3.

I’ve created a code that works when I have it in one function but since I’m trying to improve my skills, I really wanted to stick to following the SOLID principles and made sure everything is separated from one another. But unfortunately my code stopped working when I did that.

This is my code right now, but basically if I put getpriority, addTodoItem, and saveTodoItem together it works. I understand that the problem is that the function is either running immediately before users can even click a button so the value is defaulted at null or too late that everything runs before it could be called. I just cannot get where I should call getPriority(). Also just for clarrification, my low high and med are buttons

function createTodoList(title, description, dueDate, priority, haveFinished, project, todoList){
    const newTodo = new Todo(title, description, dueDate, priority, haveFinished, project);
    todoList.push(newTodo);
    localStorage.setItem("todoList", JSON.stringify(todoList));
}

function addTodoItem(todoList){
    const {title, description, dueDate, project} = getNewTodoValues();
    const priority = getPriority()();

    if(priority == null){
        alert("Set a priority for your to-do item");
    }

    else{
        createTodoList(title, description, dueDate, priority, "false", project, todoList);
    }
}

function getPriority(){
    let priority;
    const low = document.getElementById('low');
    const high = document.getElementById('high');
    const med = document.getElementById('med');

    low.addEventListener("click", () =>{
        priority = "low";
    })

    med.addEventListener("click", () =>{
        priority = 'medium';
    })

    high.addEventListener("click", () =>{
        priority = "high";
    })

    return () => priority;
}

function stylePriorityButton(){
    const low = document.getElementById('low');
    const high = document.getElementById('high');
    const med = document.getElementById('med');

    low.addEventListener("click", () =>{
        med.classList.remove("button-selected");
        high.classList.remove("button-selected");
        low.classList.add("button-selected");
    })

    med.addEventListener("click", () =>{
        low.classList.remove("button-selected");
        high.classList.remove("button-selected");
        med.classList.add("button-selected");
    })

    high.addEventListener("click", () =>{
        low.classList.remove("button-selected");
        med.classList.remove("button-selected");
        high.classList.add("button-selected");
    })
}

function saveTodoItem(todoList){
    const saveButton = document.querySelector(".save-todo");
    saveButton.addEventListener("click", (event) =>{
        event.preventDefault();
        addTodoItem(todoList);
    })
}

function getNewTodoValues(){
    const title = document.getElementById("todo-title").value;
    const description = document.getElementById("todo-description").value;
    const dueDate = document.getElementById("todo-due").value;
    const project = document.getElementById("todo-project").value;

    return{title, description, dueDate, project};
}

I’m using the docker project to run Supabase locally. I’ve already made a .override file and successfully integrated Google login with it.

I’m not quite sure how to configure the webhook, AWS SNS and how to test it locally.

services:
  auth:
    environment:
      GOTRUE_EXTERNAL_GOOGLE_ENABLED: ${ENABLE_GOOGLE_SIGNUP}
      GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
      GOTRUE_EXTERNAL_GOOGLE_SECRET: ${GOOGLE_CLIENT_SECRET}
      GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: http://localhost:8000/auth/v1/callback
      # more config things in here?

I’d like to configure a HTTP webhook like localhost:3000/api/test, not sure how to proceed with the Docker file. Are there any examples or does anyone know how to do this?

below is my file script.js

import { Api } from "./Api";

const api = new Api({
  baseUrl: "https://around-api.en.tripleten-services.com/v1",
  headers: {
    authorization: "108a1d3a-8c4c-4f08-a442-d334675c987c",
    "Content-Type": "application/json"
  }
});

api.getInitialCards().then((cards) => {
  console.log(cards)
})

this is my Api.js

export class Api {
  constructor({ baseUrl, headers }) {
    this._baseUrl = baseUrl;
    this._headers = headers;
  }

  getInitialCards() {
    return fetch(`${this._baseUrl}/cards`, {
      headers: this._headers,
    }
  ).then(res => res.json())
  }
}

im trying to properly set up this api but im having issues with the fetch request

I’m trying to fetch data from the Star Wars API using fetch() and async/await. Here’s my code:

const starWarsGang = async () => {
    const res = await fetch("https://swapi.info/api/people/1");
    const data = res.json(); // Expecting JSON here
    console.log(data);

    const res2 = await fetch("https://swapi.info/api/people/2");
    const data2 = res2.json(); // Expecting JSON here too
    console.log(data2);
};
starWarsGang();

But instead of printing the actual data, console.log(data) and console.log(data2) both output:

Promise { }
I thought res.json() would return the parsed JSON object.
Why is this happening?
What’s the correct way to get the data?

Using async and await
Searching similar errors, but still not sure where I went wrong

I’m encountering multiple issues regarding scanning in my React web application.

I want to pick orders in my application and when selecting a orderline, an input gets focused. This input needs to catch a pasting event of my hardware scanner to scan trace codes. The devices I’m using are: Urovo DT50 (Android 11, 12 and sometimes 13) and P8100P Tablet (Android 10).

Now my input has default inputmode=none and when selecting an orderline, it gets inputmode=numeric for a couple of milliseconds, this causes the keyboard to trigger and the scanner knows where to paste.

This solution works okay, but it is not great. You can see the keyboard popping up and go and it just isn’t very user friendly. And sometimes the input is selected, but just won’t receive the paste from the scanner (like 1 out of 20 times). Or after clicking like 5 orderlines and triggering the keyboard multiple times the paste event finally occurs in the input.

My ideal solution is clicking an orderline and scanning instantly, without the need of a visible input and especially no keyboard being visible. The keyboard popup is very intrusive and the end user doesn’t need one.

Other things I have tried to achieve my ideal solution:
Scanning with option without pasting from clipboard, this doesn’t work well.
Another thing I’ve tried is having an Input that is not visible and without the keyboard triggering. But devices with higher Android versions seem to be harsher with pasting.

Here are my settings in ScanWedge:

• Triggering mode: Trigger release or Time-out
• Outputmode: Intent output
• Clipboard: true
• Editor text mode: Append

A trace code looks like: 2024000240 (plain text) and sometimes I’m scanning a GS1-barcode or EAN-code.

My page contains a lot of code, so I’ll try to get some snippets:

  const [barcodeInput, setBarcodeInput] = useState("");
  const [selected, setSelected] = useState(null);
  const [needsKeyboard, setNeedsKeyboard] = useState(null);
  const barcodeInputRef = useRef(null);

  // Code for making input scannable.
  useEffect(() => {
    if(isNotNull(selected)){
      showKeyboard();
    }
  }, [selected]);

  // Code for checking the scan value.
  useEffect(() => {
    if (isNotNull(selected) && !isOpen) {
      if(positionRegex?.test(barcodeInput)){
        scanPosition(rule);
      }
      else if(barcodeInput.length >= 12 && barcodeInput.length <= 14 && isValidEAN(barcodeInput)){
        scanEan(rule);
      }
      else if(barcodeInput.length >= 8 && barcodeInput.length <= 16){
        scanTracecode(rule);
      }
      else if (barcodeInput.length > 16) {
        scanGs1(rule);
      }
    }
  }, [barcodeInput]);

  // Function for showing the keyboard for a short period of time.
  // This causes Android to think it can paste text on a keyboard (for scanning).
  async function showKeyboard(){
    function timer(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    setNeedsKeyboard(true);
    await timer(25);
    setNeedsKeyboard(false);

    barcodeInputRef?.current?.focus({
      preventScroll: true
    });
  }

  <TextInput 
    readOnly={selected === null} 
    style={{ whiteSpace: "nowrap", width: '100%', padding: 7.5 }} 
    onChange={(e) => setBarcodeInput(e.target.value)} 
    ref={barcodeInputRef} 
    radius="sm" 
    inputMode={needsKeyboard ? "numeric" : "none"} 
    value={barcodeInput} size="md" 
    classNames={{ input: 'input' }} 
    placeholder={t('Scan iets...')} 
  />

Thank you in advance and if things aren’t clear please ask me for more information!