Blancer.com Tutorials and projects

I have been using sendSignInLinkToEmail for Firebase Authentication to send link to login to email. Recently Dynamic Link URLs got deprecated. Hence I have switched to PROJECT_NAME.firbaseapp.com for linkDomain and use https://PROJECT_NAME.firbaseapp.com for sendSignInLinkToEmail actionCodeSettings value in @react-native-firebase/auth plugin.

But, instead of using the sent actionCodeSettings Object, it uses Dynamic Link within the project.

To verify, I created a new project and used the default domain and GoogleService-Info file for iOS. It works fine with the same setup.

Why is the old project forcing the Dynamic link to be added to the link in the email?

How can I make the old project send the link with PROJECT_NAME.firbaseapp.com instead of the old dynamic link?

I have tried to use actionCodeSettings as follows, but it fails:

const actionCodeSettings = {
    handleCodeInApp: true,
    url: "https://PROJECT_NAME.firbaseapp.com",
    iOS: {
      "com.project.bundleid",
    },
    linkDomain: "PROJECT_NAME.firbaseapp.com"
}

I created a new project, hosted the default domain and it works as expected.

I created a separate component, then added it to the routes array, then I ran the url and saw that the component still rendered in as usual without having to declare that component in any ngModule.Is it true that when rendering a component using routes, there is no need to declare that component in ngModule?

//app-routing.module.ts


        import { NgModule } from '@angular/core';
        import { RouterModule, Routes } from '@angular/router';
        import { LoggerComponent } from './no-stand-alone/logger.component';
        import { NoStandAlone1Component } from './no-stand-alone/no-stand-alone-1/no-stand-alone-1.component';
        import { NoModuleComponent } from './no-module/no-module.component';
        
        const routes: Routes = [
          {
            path: "no-module",
            component: NoModuleComponent
          }
        ];
        
        @NgModule({
          imports: [RouterModule.forRoot(routes)],
          exports: [RouterModule]
        })
        export class AppRoutingModule { }

------------------------------------------------------------------------------------
    //no-module.component.ts
    
    
    import { Component } from "@angular/core";
    
    @Component({
      standalone: false,
      selector: "app-no-module",
      template: `<h1>active no module</h1>`,
      styles: []
    })
    export class NoModuleComponent{}

I created a separate component, then added it to the routes array, then I ran the url and saw that the component still rendered in as usual without having to declare that component in any ngModule.

//app-routing.module.ts


        import { NgModule } from '@angular/core';
        import { RouterModule, Routes } from '@angular/router';
        import { LoggerComponent } from './no-stand-alone/logger.component';
        import { NoStandAlone1Component } from './no-stand-alone/no-stand-alone-1/no-stand-alone-1.component';
        import { NoModuleComponent } from './no-module/no-module.component';
        
        const routes: Routes = [
          {
            path: "no-module",
            component: NoModuleComponent
          }
        ];
        
        @NgModule({
          imports: [RouterModule.forRoot(routes)],
          exports: [RouterModule]
        })
        export class AppRoutingModule { }

------------------------------------------------------------------------------------
    //no-module.component.ts
    
    
    import { Component } from "@angular/core";
    
    @Component({
      standalone: false,
      selector: "app-no-module",
      template: `<h1>active no module</h1>`,
      styles: []
    })
    export class NoModuleComponent{}

I have a parent div whose height can vary based on window vertical resize. That parent div needs to employ overflow-y:scroll for sought functionality. The parent div contains 8 child divs of various fixed heights positioned vertically, with first and last child having a CSS height of 70vh in order to be able to scroll the 6 vertical middle-positioned child divs (6pack) all the way to the top or bottom of parent div.

Now, I want the parent div to dynamically scroll the 6pack to the exact location where my mouse enters the parent div via mouseenter event (not mousemove), making certain that the bottom of the 6pack doesn’t go lower than the bottom of parent div, and the top of the 6pack doesn’t go higher than the parent top.

The code below is as close as I could get, one problem, among others, is the current vertical scroll direction being opposite of what it should be:

const parentElement =
document.getElementById(‘parentContainer’);

parentElement.addEventListener(‘mouseenter’, (event) => {

var mouseYRelativeToParent = parentElement.getBoundingClientRect().y + event.clientY;

parentElement.scrollTop = mouseYRelativeToParent;

});

A better working version in javascript or jquery, with detailed comments on how parts of code work, would be most helpful.

I have been making this Mario game in code.org (https://studio.code.org/projects/gamelab/B_18jUO_N-7_hPk2UId900XjDJNQEcwIe0V-ey_P7FI)
But there is an error in this piece of code

for (
  var o = Math.round(mario.x / 24) - 2;
  o < Math.round(mario.x / 24) + 2;
  o++
) {
  for (
    var l = Math.round(mario.y / 24) - 2;
    l < Math.round(mario.y / 24) + 2;
    l++
  ) {
    if (collidableBlocks[o][l] != undefined) {
      mario.collide(collidableBlocks[o][l]);
    }
  }
}

The error is “r.size is not a function” on the line where Mario is actually colliding with the block.

Can somebody help me out?

I am building a simple web page but I cannot get the menu button to trigger, not even in the console.

document.addEventListener("DOMContentLoaded", () => {
  const openMenuBtn = document.getElementById("menuBtn");

  openMenuBtn.addEventListener("click", () => {
    console.log("Clicked");
  });
});

<img
id="menuBtn"
src="https://placehold.co/100x100"
alt="Three horizontal black lines stacked vertically representing a menu icon, simple and modern design on a transparent background"
/>

I am just getting nothing.

I have tried wrapping the scrip in a DOM Content Loaded event listener, and put the script HTML tag just before the closing body tag and added defer to ensure that the the content is loaded first in the DOM. Its probably something really basic I just cant see it.

I am attempting to sort an array by the 2nd element [1]. If the second element matches, use the 3rd element [2] to break the tie. My current attempt is correctly sorting by the second element, however, it is not sorting correctly based on the 3rd element when the 2nd elements match.

The following is my current code and attempt to do this.

let inputArray = [["p1",3,71.75],["p10",3,76.75],["p15",1,66.5],["p17",0,58.5],["p29",3,68],["p3",3,79],["p32",0,49],["p7",0,0],["p9",3,86.5]];

const sortedArray = [...inputArray].sort((a,b) => {
if(a[1] === b[1]) {
return b[2] - a[2];
} else {
return b[1] - a [1];
}
});

The results I am getting are:

sortedArray: [["p9",3,86.5],["p3",3,79],["p1",3,71.75],["p10",3,76.75],["p15",1,66.5],["p29",3,68],["p17",0,58.5],["p32",0,49],["p7",0,0]]

The results I expect are:

sortedArray: [["p9",3,86.5],["p3",3,79],["p10",3,76.75],["p1",3,71.75],["p29",3,68],["p15",1,66.5],["p17",0,58.5],["p32",0,49],["p7",0,0]]

I’m experiencing an issue with my WebSocket service in my React application.

When I try to send the initial data using ws.send(initialData), it sometimes succeeds, but other times it doesn’t. The connection state from ws.onopen always shows as OPEN.

If I add a 100ms delay before sending the data, it works consistently. Since ws.send is not asynchronous, I can’t await it.

What am I overlooking, and what am I doing wrong?

ws.onopen = async (event) => {
    console.log("[ WEBSOCKET ] Successfully connected.");
        
    await new Promise(resolve => setTimeout(resolve, 100)); // Needs to be here -- needs to be fixed later :/
    ws.send(initialData);
};

This is my onmessage:

ws.onmessage = (event) => {
    console.log("[ WEBSOCKET ] Data recived");

    let parsed: any;
    try {
        parsed = JSON.parse(event.data);
    } catch (error) {
        redirectToErrorPage({ title: "Issue with WebSocket connection", message: `Invalid JSON: ${event.data}`, offerSupport: true });
    }
        
    const data: WebSocketType = parsed;
    if (data.statusCode !== StatusCodes.OK) {
        redirectToErrorPage({ title: "Issue with WebSocket", message: event.data, offerSupport: true });
    }
        
    if (onMessage) onMessage(parsed);
        
    resolve(ws);
};

My data looks like this:

[
  {
    "ts": 123456,
    "data": [
      {
        "id": 1,
        "name": "Alice",
        "active": true,
        "favoriteColor": "blue"
      },
      {
        "id": 2,
        "name": "Bob",
        "active": false,
        "favoriteColor": "green"
      },
      {
        "id": 3,
        "name": "Charlie",
        "active": true,
        "favoriteColor": "red"
      },
      {
        "id": 5,
        "name": "Eve",
        "active": true,
        "favoriteColor": "red"
      }
    ]
  },
  {
    "ts": 789012,
    "data": [
      {
        "id": 4,
        "name": "Diana",
        "active": false,
        "favoriteColor": "yellow"
      },
      {
        "id": 6,
        "name": "Frank",
        "active": true,
        "favoriteColor": "yellow"
      }
    ]
  },
  {
    "ts": 345678,
    "data": [
      {
        "id": 7,
        "name": "Grace",
        "active": false,
        "favoriteColor": "pink"
      },
      {
        "id": 8,
        "name": "Henry",
        "active": true,
        "favoriteColor": "teal"
      },
      {
        "id": 9,
        "name": "Ivy",
        "active": false,
        "favoriteColor": "brown"
      }
    ]
  }
]

and the aim is to get similar data structure but just get unique “sub”-objects by property. For example property would be favoriteColor then Eve/Charlie and Diana/Frank would be removed.

I have a Google Sheet with two ‘Apps Scripts’ associated with it ‘Control’ & ‘Action’.

In the Control Apps script, under certain conditions, I want it to run the Action script.

Is this possible? If so how?

I thought something like the below would have worked, but throws up an ‘ReferenceError: Action is not defined’ error.

  Action();// Run the separate Apps Script called Action

Please let me know where I’m going wrong.

My data looks like this:

[
  {
    "ts": 123456,
    "data": [
      {
        "id": 1,
        "name": "Alice",
        "active": true,
        "favoriteColor": "blue"
      },
      {
        "id": 2,
        "name": "Bob",
        "active": false,
        "favoriteColor": "green"
      },
      {
        "id": 3,
        "name": "Charlie",
        "active": true,
        "favoriteColor": "red"
      },
      {
        "id": 5,
        "name": "Eve",
        "active": true,
        "favoriteColor": "red"
      }
    ]
  },
  {
    "ts": 789012,
    "data": [
      {
        "id": 4,
        "name": "Diana",
        "active": false,
        "favoriteColor": "yellow"
      },
      {
        "id": 6,
        "name": "Frank",
        "active": true,
        "favoriteColor": "yellow"
      }
    ]
  },
  {
    "ts": 345678,
    "data": [
      {
        "id": 7,
        "name": "Grace",
        "active": false,
        "favoriteColor": "pink"
      },
      {
        "id": 8,
        "name": "Henry",
        "active": true,
        "favoriteColor": "teal"
      },
      {
        "id": 9,
        "name": "Ivy",
        "active": false,
        "favoriteColor": "brown"
      }
    ]
  }
]

and the aim is to get similar data structure but just get unique “sub”-objects by property. For example property would be favoriteColor then Eve/Charlie and Diana/Frank would be removed.

I have a Header Component with a search bar. When I type something on the search bar, it should create a new array by filtering another. The original array contains some attributes, but the important one is “categoria” (category, in English). So if the attribute contains the searched value, it should add it to the list. But for some reason, it’s not working, even when the filter returns true.

Here’s what I did:

// The list contains 100 objects, but I only show 5 to make the question shorter"
const contactos = [
  {
    id: 1,
    nombre: 'David Sánchez',
    email: 'david.sá[email protected]',
    telefono: '+34 607 452 956',
    direccion: 'Calle 21, Madrid',
    categoria: 'Amigo'
  },
  {
    id: 2,
    nombre: 'Javier Martín',
    email: 'javier.martí[email protected]',
    telefono: '+34 689 232 272',
    direccion: 'Calle 69, Bilbao',
    categoria: 'Trabajo'
  },
  {
    id: 3,
    nombre: 'Elena Pérez',
    email: 'elena.pé[email protected]',
    telefono: '+34 687 646 684',
    direccion: 'Calle 99, Valencia',
    categoria: 'Conocido'
  },
  {
    id: 4,
    nombre: 'Miguel Jiménez',
    email: 'miguel.jimé[email protected]',
    telefono: '+34 653 850 666',
    direccion: 'Calle 65, Zaragoza',
    categoria: 'Amigo'
  },
  {
    id: 5,
    nombre: 'Sofía Gómez',
    email: 'sofía.gó[email protected]',
    telefono: '+34 636 615 705',
    direccion: 'Calle 47, Bilbao',
    categoria: 'Conocido'
  },
]

And the component is like so:

// There are more imports, like useContext and so, but I don't use them in the problem.

import contactos from "../constants/contactos";

function HeaderComponent() {

    const searchCategory = (e) => {

        const search = e.target.value.toLowerCase().trim();
        const newList = contactos.filter((item) => {
            item.categoria.toLowerCase().includes(search)
        });

        console.log(newList);
    }

    return (
        <header>
            <div className="header-content">
                <div className="logo">
                    <i className="fa-solid fa-database"></i>
                    <span>MyOwnPage</span>
                </div>
                <div className="search-container">
                    <input type="search" className="search-input" placeholder="Search what you're looking for" onChange={(e) => {searchCategory(e)}}/>
                    <button className="search-button">Search</button>
                </div>
                <div className="user-actions">
                    <Link className="actions-link" to={'./'}>Log In</Link>
                    <Link className="actions-link" to={'./'}>Sign Up</Link>
                </div>
            </div>
        </header>
    )
}

The problem is that newList is empty. When I console.log the array, it only shows:
[]. But if I console.log item.categoria.toLowerCase().includes(search) it shows ‘true’, so it should return the item to the new array.

I even try this in a JS online site and it works, but it doesn’t seem to work here. Also tried removing trim(), which shouldn’t make a difference, but it still doesn’t work.

And the list is imported correctly. If I use console.log(contactos) it shows the correct list.

Why is it not working?

Example:

const contactos = [{  id: 1,  nombre: 'David Sánchez',  email: 'david.sá[email protected]',  telefono: '+34 607 452 956',  direccion: 'Calle 21, Madrid',  categoria: 'Amigo'},{  id: 2,  nombre: 'Javier Martín',  email: 'javier.martí[email protected]',  telefono: '+34 689 232 272',  direccion: 'Calle 69, Bilbao',  categoria: 'Trabajo'},{  id: 3,  nombre: 'Elena Pérez',  email: 'elena.pé[email protected]',  telefono: '+34 687 646 684',  direccion: 'Calle 99, Valencia',  categoria: 'Conocido'},{  id: 4,  nombre: 'Miguel Jiménez',  email: 'miguel.jimé[email protected]',  telefono: '+34 653 850 666',  direccion: 'Calle 65, Zaragoza',  categoria: 'Amigo'},{  id: 5,  nombre: 'Sofía Gómez',  email: 'sofía.gó[email protected]',  telefono: '+34 636 615 705',  direccion: 'Calle 47, Bilbao',  categoria: 'Conocido'},]

const search = 'Trabajo';
const newList = contactos.filter((item) => {
    item.categoria.toLowerCase().includes(search)
});

console.log(newList);

I am working on opening model on hover and while I am working with opening model on hover it is working but I need to add feature onClick event. Also here after adding onClick when I open pop model on hover and click the trigger it will create a bugs that close and open the pop up model. How can I solve the issue?

I prefer answer on typescript but plain js is also ok.

const [openMenuRowId, setOpenMenuRowId] = useState<string | null>(null);
const [isClickMode, setIsClickMode] = useState(false);
  
const dropdownRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (!openMenuRowId) return;
  const handleClickOuside = (event: MouseEvent) => {
    if (
      dropdownRef.current &&
      !dropdownRef.current.contains(event.target as Node)
    ) {
      setOpenMenuRowId(null);
      setIsClickMode(false);
    } else {
      setIsClickMode(true)
    }
  };

  document.addEventListener("mousedown", handleClickOuside);
  return () => document.removeEventListener("mousedown", handleClickOuside);
}, [openMenuRowId]);

  menuButtonClick={() => {
    setIsClickMode(true)
    if (openMenuRowId === row.id) {
      setOpenMenuRowId(null)
    }
  }}    
  menuButtonMouseEnter={() => {
    if (!isClickMode) {
      setOpenMenuRowId(row.id);
    }
  }}
>