Blancer.com Tutorials and projects

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!

I’m currently learning JavaScript and trying to build a simple SoundCloud clone. I’m using WaveSurfer.js for audio waveform visualization, but I’ve run into a couple of issues:

Problem 1: Double playback

Originally, I used a single element with audio.play() to control playback. After integrating WaveSurfer, when I click “play”, the track plays twice — once via audio.play() and once via WaveSurfer’s internal playback.
Should I fully replace my audio logic with WaveSurfer’s API (e.g. .play() / .pause()), or is there a way to keep my custom audio element and just use WaveSurfer for visualization?

Problem 2: All waveforms play together

On my profile page, I list multiple tracks (e.g. 3 songs), each with their own waveform.
I initialize WaveSurfer like this:

const ws = WaveSurfer.create({
  container: el,
  backend: 'MediaElement',
  media: audio,
  waveColor: '#ccc',
  progressColor: '#ff5500',
  height: 60,
  responsive: true,
  barWidth: 2,
});

But when I click to play one song, all waveforms start playing at the same time.
I suspect it’s because they’re all linked to the same element. How can I isolate playback so that only one waveform plays when clicked?

I’m using JavaScript-based page preloading (like PJAX) to avoid full reloads and keep music playing across pages. It works great — the audio continues — but the waveform visualization disappears after switching pages.

  function loadPage(event, url) {
    event?.preventDefault();
    fetch(url)
      .then(res => res.text())
      .then(html => {
        const doc     = new DOMParser().parseFromString(html, 'text/html');
        const content = doc.getElementById('main-content');

        document.getElementById('main-content').innerHTML = content.innerHTML;
        document.body.className                          = doc.body.className;
        document.querySelector('.parent').className      = doc.querySelector('.parent').className;
        window.history.pushState({}, '', url);

        initMusic();  
      });
  }

  window.addEventListener('popstate', () =>
    loadPage(null, location.pathname)
  );

Also im using only one audio element in base.html and example of wavesurfer.js in my profile.html

<div class="waveform" data-src="{{ item.audio_file.url }}" id="waveform-{{ forloop.counter }}"></div>

document.addEventListener('DOMContentLoaded', () => {
  const waveformElements = document.querySelectorAll('.waveform');

  if (waveformElements.length === 0) return;

  const audio = document.getElementById('player');

  waveformElements.forEach((el) => {
    const src = el.dataset.src;

    const ws = WaveSurfer.create({
      container: el,
      backend: 'MediaElement',
      media: audio,
      waveColor: '#ccc',
      progressColor: '#ff5500',
      height: 60,
      responsive: true,
      barWidth: 2,
    });

    ws.load(src);
    window.wavesurfers = window.wavesurfers || {};
    window.wavesurfers[src] = ws;
  });
});

Any advice or best practices would be greatly appreciated!

I tried initializing WaveSurfer with the same element using the MediaElement backend. I expected it to display the waveform and control playback for each track individually. I also tried preloading pages using JavaScript to keep the music playing across pages.
However, when I play one track, all waveforms start playing at once. Also, after switching pages, the waveform disappears even though the audio keeps playing.

i use react native version 0.80 react-native-maps. don’t work in this. version and give me screen red and text error is. : Unimplemented component

I am creating a quiz application for a shcool project, but I’m having trouble with just this one part:

checkAnswerButton.addEventListener('click', () => 
{
    const currentQuestion = questions[currentQuestionIndex];
    const selectedOption = optionsElement.querySelector('.selected');
    if (selectedOption) {
        const selectedAnswer = selectedOption.textContent;
        selectAnswer(selectedAnswer);
        };
    }
);

I am trying to make it so that when this button is pressed, it will highlight the correct answer. However, it’s currently not working and I am not sure why.