Category: javascript

We are using Instagram’s Graph API and have implemented a webhook to listen for media shared in Direct messages. When someone shares a post via Direct, the webhook sends us an event payload that contains only an asset_id (e.g., a CDN media identifier).

However, we are unable to find a way to map this asset_id back to the original post (i.e., the media object or permalink on Instagram). We’ve looked through the Instagram Graph API documentation but couldn’t find a way to resolve an asset_id to a media ID or any useful metadata.

What we have:

A webhook event triggered when a user shares a post via Direct message.

The payload includes something like: “asset_id”: “17890012345678901”

What we want:

Find the original post ID or permalink using the asset_id.

What we’ve tried:

Searching through Instagram Graph API endpoints with media IDs and user tokens.

Checking if asset_id is queryable via /media or /media/{media-id}.

Looking for debugging tools or mappings via Meta for Developers portal.

Is there any way to reverse-lookup or resolve an asset_id to its corresponding Instagram post using Instagram Graph API or other official tools?

when I write this code answer wilL be 3,

Var gameLevel=1;
Var gameLevel=2;
 Var gameLevel=3;
alert("your game level is: " + gameLevel);

and when I write same problem without Var then again answer same,

Var gameLevel=1;
gameLevel=2;
gameLevel=3;
alert("your game level is: " + gameLevel);

can anyone answered me what has been happening here?

I am testing a schema (draft 2020-12) and data with the JSON Schema validator and I am wondering why the data is valid.
The test succeeds because the “contains” property is satisfied.

But when I am trying to invalidate the data with the first item of the first nested arrays, the test still succeeds because the item is not counted. Shouldn’t it be counted?

It is counted when both string have 5 chars and then the test fails, but not if only one string has 5 chars as below.

Below the schema and the data that passes the test and fails when all strings have 5 characters. Shouldn’t it fail now as 3 strings have 5 characters?

{
    "$schema": "https://json-schema.org/draft/2020-12/schema",
    "properties": {
        "array": {
            "type": "array",
            "items": {
                "items": {
                    "items": {
                        "properties": {
                            "c": {
                                "properties": {
                                    "d": {
                                        "maxLength": 6,
                                        "type": "string"
                                    }
                                },
                                "type": "object"
                            }
                        },
                        "type": "object"
                    },
                    "type": "array"
                },
                "type": "array"
            },
            "maxContains": 2,
            "contains": {
                "items": {
                    "items": {
                        "properties": {
                            "c": {
                                "properties": {
                                    "d": {
                                        "minLength": 5,
                                        "type": "string"
                                    }
                                },
                                "type": "object"
                            }
                        },
                        "type": "object"
                    },
                    "type": "array"
                },
                "type": "array"
            }
        }
    },
    "type": "object"
}

[
    [
        [
            {
                "c": {
                    "d": "abcd"
                }
            }
        ],
        [
            {
                "c": {
                    "d": "abcde"
                }
            }
        ]
    ],
    [
        [
            {
                "c": {
                    "d": "abcde"
                }
            }
        ]
    ],
    [
        [
            {
                "c": {
                    "d": "abcde"
                }
            }
        ]
    ]
]

Bonjour,

je suis en pleine reconversion professionnel et j’aimerais m’orienté vers le développement back-end. J’ai 22ans et je suis cariste magasinier de base donc rien avoir et j’ai un bac pro dans la menuiserie. J’avais aucune connaissance en informatique avant de vraiment m’informé et de ce fait, je ne sais pas vraiment par où commencé. Je sais toujours pas quel langage choisir, java, python, javascript ou autre. En sachant que je suis en autodidacte et que je compte utilisé l’ia copilot comme mentor quand je serais bloqué. Si vous pouvais m’aidé avec une roadmap et m’aidé à choisir un langage je vous serais très reconnaissant

Defining the optional prop, although we may want to unify the undefined and null to something one, user can pass any of undefined or null.

If user will specify null, Vue will not emit any warnings because Vue considers the null as optional value:

// === vue-facing-decorators version
import {
  ComponentBase as VueComponentConfiguration,
  Vue as VueComponent,
  Prop as VueProperty,
} from "vue-facing-decorator";

@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ type: String })
  protected readonly label?: string | null;

}
 
// === Vue options API version
export default {
  props: {
    label: {
      type: String,
      required: false
    }
  }
};

The isNonEmptyString will not prevent the null because Vue will recognize the null as omitted property and will not execute the validator:

import { isNonEmptyString } from "@yamato-daiwa/es-extensions";


// === vue-facing-decorators version
@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ validator: isNonEmptyString })
  protected readonly label?: string | null;

}


// === Vue options API version
export default {
  props: {
    label: {
      validator: isNonEmptyString,
      required: false
    }
  }
};

But if Vue considers the null as omitted property, why it does not substitute it when default specified?!

import { isNonEmptyString } from "@yamato-daiwa/es-extensions";


// === vue-facing-decorators version
@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ type: [ String, Array ], default: (): ReadonlyArray<string> => [] })
  protected readonly mainSlotWrapperAdditionalCSS_Classes!: ReadonlyArray<string> | string | null;


}

// === Vue options API version
export default {
  props: {
    mainSlotWrapperAdditionalCSS_Classes: {
      type: [String, Array],
      default: () => []
    }
  }
};

So, no way to prevent the null? We need to check each optional prop for both undefined and null or write the computed for these props? Too many routines for 202Xs, I want something more cleaner but doing all of this works.

You should use the TypeScript!!!

I am using, but TypeScirpt is NOT the solution of this problem because it works before executing of the script while Vue’s validation at the time of script execution. Same about React’s prop-types which has been deprecated as if TypeScript will validate props during the script execution instead.

The checking of the props during the script execution is important because:

1. Component user could use JavaScript instead of TypeScript
2. I know that in average company the development is executed chaotically with tens of TypeScript errors, even the notification of TypeScript has not been set well.

I have a problem with my web source code. I have made sure that the site is accessed via https and camera access permission is granted. However, the barcode scan display does not appear and only displays a white blank. I tried to access it via chrome on android.

This is my code

    <?php
$satuan_list = ['pcs', 'dus', 'pack', 'ball', 'renteng'];
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Form Input Barang</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light py-4">
<div class="container">
  <h2 class="text-center mb-4">Form Input Barang</h2>

  <form action="save_barang.php" method="POST" enctype="multipart/form-data" class="bg-white p-4 rounded shadow">
    <div class="mb-3">
      <label class="form-label">Nama Barang</label>
      <input type="text" name="nama_barang" class="form-control" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Kode Gudang</label>
      <input type="text" name="kode_gudang" class="form-control" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Vendor Penyedia</label>
      <input type="text" name="vendor" class="form-control" required>
    </div>

    <div class="mb-4">
      <label class="form-label">Foto Barang</label>
      <input type="file" name="foto" class="form-control" accept="image/*" capture="environment">
    </div>

    <?php foreach ($satuan_list as $satuan): ?>
    <div class="border rounded p-3 mb-4">
      <h5 class="mb-3">Satuan: <?= ucfirst($satuan) ?></h5>
      <input type="hidden" name="satuan[]" value="<?= $satuan ?>">

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Stok (<?= $satuan ?>)</label>
          <input type="number" name="stok_<?= $satuan ?>" class="form-control">
        </div>

        <div class="col-md-4">
          <label class="form-label d-flex justify-content-between">
            <span>Barcode (<?= $satuan ?>)</span>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="startScanner('barcode_<?= $satuan ?>')">Scan</button>
          </label>
          <input type="text" name="barcode_<?= $satuan ?>" id="barcode_<?= $satuan ?>" class="form-control barcode-input">
        </div>

        <div class="col-md-4">
          <label class="form-label">Harga Eceran</label>
          <div class="input-group">
            <span class="input-group-text">Rp.</span>
            <input type="number" step="0.01" name="harga_eceran_<?= $satuan ?>" class="form-control">
          </div>
        </div>

        <div class="col-md-4">
          <label class="form-label">Harga Grosir</label>
          <div class="input-group">
            <span class="input-group-text">Rp.</span>
            <input type="number" step="0.01" name="harga_grosir_<?= $satuan ?>" class="form-control">
          </div>
        </div>

        <div class="col-md-4">
          <label class="form-label">Min. Pembelian Harga Grosir</label>
          <input type="number" name="min_grosir_<?= $satuan ?>" class="form-control">
        </div>

        <?php if ($satuan != 'pcs'): ?>
        <div class="col-md-4">
          <label class="form-label">Isi per <?= $satuan ?> (pcs)</label>
          <input type="number" name="isi_per_pcs_<?= $satuan ?>" class="form-control">
        </div>
        <?php endif; ?>
      </div>
    </div>
    <?php endforeach; ?>

    <div class="d-grid gap-2">
      <button type="submit" class="btn btn-primary">Simpan Barang</button>
      <a href="list_barang.php" class="btn btn-secondary">Lihat Daftar Barang</a>
    </div>
  </form>

  <!-- Modal Scanner -->
  <div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Scan Barcode</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup" onclick="stopScanner()"></button>
        </div>
        <div class="modal-body">
          <video id="preview" autoplay muted playsinline style="width: 100%; border: 1px solid #ccc; border-radius: .5rem;"></video>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal" onclick="stopScanner()">Tutup</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/@ericblade/[email protected]/dist/quagga.min.js"></script>

<script>
let activeInput = null;
const scannerModal = new bootstrap.Modal(document.getElementById('scannerModal'));

function startScanner(inputId) {
  activeInput = document.getElementById(inputId);
  scannerModal.show();

  if (Quagga.running) {
    Quagga.stop();
  }

  console.log("Mulai inisialisasi scanner...");

  Quagga.init({
    inputStream: {
      type: "LiveStream",
      constraints: {
        facingMode: "environment"
      },
      target: document.querySelector('#preview')
    },
    decoder: {
      readers: ["ean_reader", "code_128_reader", "upc_reader"]
    }
  }, function(err) {
    if (err) {
      console.error("Gagal inisialisasi Quagga:", err);
      alert("Tidak bisa akses kamera: " + err.message);
      return;
    }
    console.log("Scanner berhasil dijalankan!");
    Quagga.start();
  });
}

function stopScanner() {
  if (Quagga.running) {
    Quagga.stop();
  }
}

Quagga.onDetected(result => {
  if (!result || !result.codeResult || !result.codeResult.code) return;

  const code = result.codeResult.code;
  if (activeInput) {
    activeInput.value = code;
    stopScanner();
    scannerModal.hide();
  }
});
</script>
</body>
</html>

and I also attached the display via the Android Chrome web

I’m trying to build a function that takes a string as a parameter and return the character or characters that appear the most in the that string.
I have tried the code below but it only returns an array with the keys. I want to return someone like that: e appears 4 times and b appears 4 times in case both of them have the max value.

Below is my code and how I started:

const frequentChar = str =>{
    let count = {}
    for(let char of str.replace(/s/g, '')){
        if(count[char]){
            count[char] +=1
        }else{
            count[char] = 1
        }
    }
    const result = Object.keys(count).filter(x => {
        return count[x] == Math.max.apply(null, Object.values(count));
    });
    console.log(result);
}
frequentChar(text)

I have a client component that fetches the list of project and a dialog box that creates a project but I cant update the project list unless I have to do a manual refresh on the browser.

The flow is:

1. navigating to project page should fetch the project list. (working)
2. submitting the dialog form should create a project. (working)
3. after submitting dialog should close. (working)
4. after closing the dialog box, it should refetch or query the project page again. (not working)

solutions that Ive tried:

1. calling revalidatePath('/projects') this wont work because the project page is client component.
2. calling redirect('/projects') (I don’t know why).
3. tried calling window.location.reload(): inside the server component won’t work to.

project page code:

"use client";

import React from "react";
import {DataTable} from "./dataTable";
import {columns} from "./columns";
import {getProjectLists} from "@/app/api/projectActions";
import {useQuery} from "@tanstack/react-query";
import {Button} from "@/components/ui/button";

const ProjectPage = () => {
  const {data, isError, isLoading, error, isSuccess} = useQuery({
    queryKey: ["projects"],
    queryFn: () => getProjectLists(1, 10),
  });

  console.log("data", data);

  if (isLoading) {
    return <div className="text-center">Loading...</div>;
  }

  return (
    <div className="w-4/5 mx-auto py-10">
      {data && <DataTable columns={columns} data={data} />}
      <Button>
        {/* (This should something like infinite scroll. check react-query for code) */}
        Load More
      </Button>
    </div>
  );
};

export default ProjectPage;

I’m still new to react-query so I don’t have a clue. I tried using the refetch method won’t work it will do a infinite call.

this wont work

if(isSuccess) {
 refetch();
}

I’m not sure if I’m missing something on react-query.

I have an API APP route

app/api/resthistoryserv/route.ts [folder structure]

The call is being made like this:

const res = await fetch(
          `/api/resthistoryserv?client_id=ASDFASFDDFASD')}`
        );

/api/resthistoryserv?client_id=ASDFASFDDFASD

The call goes through but it doesn’t have the query params.

App route code:

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams;
    console.log('nextUrl:', request.nextUrl);
    console.log('All received parameters:',   Object.fromEntries(searchParams.entries()));

    console.log('CLIENTID', searchParams.get('client_id'));
.....
}

This is what comes back when I try to print them:

nextUrl: NextURL {
  [Symbol(NextURLInternal)]: {
    url: URL {
      href: 'https://localhost:3000/api/resthistoryserv',
      origin: 'https://localhost:3000',
      protocol: 'https:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api/resthistoryserv',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    },
    options: { headers: [Object], nextConfig: undefined },
    basePath: '',
    domainLocale: undefined,
    defaultLocale: undefined,
    buildId: undefined,
    locale: undefined,
    trailingSlash: false
  }
}
All received parameters: {}
CLIENT ID null

I had multiple ag grid tables rendering on different pages, but the the rows weren’t loading at one point and it just said “loading” in the table. I reloaded the page and now no tables on any of my pages are there at all, not even the box.

Here’s a picture just for clarification:

I made a copy of the code with everything simplified way down and it still doesn’t render, here’s my simplified code.

import React from 'react'
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const Kanban = () => {
  return (
    <div className="ag-theme-alpine" style={{ height: 500, width: 1000}}>
      <AgGridReact rowData={{'a':'b'}} columnDefs={{field:'a'}}/>
    </div>
  )
}

export default Kanban

I have a client app that makes a fetch request to a server running at port 3333, however I get this error when I access the site after using port forwarding.

Access to fetch at 'http://localhost:3333/' from origin 'https://sdnxn5zx-3000.euw.devtunnels.ms' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

even after running locally I still get errors

Access to fetch at 'http://localhost:3333/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and here is what my server file has in it

const express = require("express");
const app = express();
const cors = require("cors");

app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    headers: ["Content-Type", "Authorization"],
    maxAge: 84600,
  })
);
app.use((request, response, next) => {
  response.setHeaders({
    "Access-Control-Allow-Origin": "http://localhost:3000",
    "Access-Control-Allow-Credentials": true,
    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
    "Access-Control-Allow-Headers": "Origin, Content-Type, Accept",
  });
});

app.get("/", (request, response) => {
  response.json("Successful");
  console.log("Hello World");
});
app.listen(3333, () => {
  console.log("Server is running on port 3333");
});

function t(..._a) 
{
    console.log("t says:", _a[0] === a);    // Output:  t says: true
}

function v([..._a]) 
{
    console.log("v says:", _a === a);       // Output:  v says: false
}

const a = [{}, {}, {}];
t(a);
v(a);

What’s the exact mechanism, at memory level, that makes destructuring “[…_a]” create an isolated copy, while rest parameters “…_a” expose the original array to mutation?

why isn’t “[…_a]” equal to “_a[0]”?

Queria saber se é uma boa retornar o dado atualizado no backend pro front

return res.json({
   msg: "Usuário atualizado com sucesso!",
   usuario: usuarioAtualizado,
});

Mais ou menos assim, para que no front, ele não precise atualizar todo o elemento, somente o que foi atualizado ou adicionado

I’m receiving the array of JSON objects pasted below from an API call, and would like to reformat it in javascript so that I have a new/simplified array of JSON objects that include:
the attributes in Object1 (just those from ID through City), and the attributes that are in the ‘parent’ object (attributes from q1_response through Notes). I expect I could do with a loop, but was hoping for something more efficient and straightforward.

[
    {
        "attributes": {
            "type": "Survey",
            "url": "/xxxx/data/xxxx/xxxx/xxxxx/axxxxxxxxxx"
        },
        "Object1": {
            "attributes": {
                "type": "Incident",
                "url": "/xxxx/data/xxxx/xxxx/xxxxx/bxxxxxxxxxx"
            },
            "Id": "aaabbb00001",
            "Survey_Version": "V2.0",
            "Incident_type": "Call",
            "CreatedDate": "2025-04-24",
            "Service_Responded": true,
            "City": "Houston"
        },
        "q1_response": "Example q1 response",
        "q2_response": false,
        "q3_response": false,
        "Notes": "Example notes"
    },
    {
        "attributes": {
            "type": "Survey",
            "url": "/xxxx/data/xxxx/xxxx/xxxxx/axxxxxxxxxx"
        },
        "Object1": {
            "attributes": {
                "type": "Incident",
                "url": "/xxxx/data/xxxx/xxxx/xxxxx/bxxxxxxxxxx"
            },
            "Id": "aaabbb00002",
            "Survey_Version": "V1.0",
            "Incident_type": "Call",
            "CreatedDate": "2025-04-26",
            "Service_Responded": true,
            "City": "Dallas"
        },
        "q1_response": "Example q1 response",
        "q2_response": true,
        "q3_response": false,
        "Notes": "Example notes"
    }
]

Desired outcome:

[
    {
        "Id": "aaabbb00001",
        "Survey_Version": "V2.0",
        "Incident_type": "Call",
        "CreatedDate": "2025-04-24",
        "Service_Responded": true,
        "City": "Houston",
        "q1_response": "Example q1 response",
        "q2_response": false,
        "q3_response": false,
        "Notes": "Example notes"
    },
    {
        "Id": "aaabbb00001",
        "Survey_Version": "V2.0",
        "Incident_type": "Call",
        "CreatedDate": "2025-04-24",
        "Service_Responded": true,
        "City": "Houston",
        "q1_response": "Example q1 response",
        "q2_response": false,
        "q3_response": false,
        "Notes": "Example notes"
    }
]

I tried various versions of filter and reduce, but didn’t get the desired result.

I am using React Native and Expo to write a typescript app. I’m trying to add auth through firebase, but I am running into errors. Here is my firebaseConfig:

// firebaseConfig.ts
import { initializeApp } from 'firebase/app';
import { initializeAuth } from 'firebase/auth';

import { getFirestore } from 'firebase/firestore'; // if you're using Firestore

const firebaseConfig = {...};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = initializeAuth(app, {});

I have also tried importing @firebase/auth and I have tried using getAuth() to no avail.

I am able to login and create accounts successfully on web, but on mobile/mobile simulator, I keep getting the following error for multiple files:

 WARN  Route "./login.tsx" is missing the required default export. Ensure a React component is exported as default.
 ERROR  Error: Component auth has not been registered yet, js engine: hermes
 WARN  Route "./signup.tsx" is missing the required default export. Ensure a React component is exported as default.

My login.tsx has a default export:

import { useState } from 'react';
import { router } from 'expo-router';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '@/firebaseConfig'; 
...

export default function LoginPage() { ...}

I am using the following dependencies:

  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-async-storage/async-storage": "^2.1.2",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "date-fns": "^4.1.0",
    "expo": "^53.0.0",
    "expo-blur": "~14.1.4",
    "expo-constants": "~17.1.5",
    "expo-font": "~13.3.1",
    "expo-haptics": "~14.1.4",
    "expo-linking": "~7.1.4",
    "expo-router": "~5.0.5",
    "expo-splash-screen": "~0.30.8",
    "expo-status-bar": "~2.2.3",
    "expo-symbols": "~0.4.4",
    "expo-system-ui": "~5.0.7",
    "expo-web-browser": "~14.1.6",
    "firebase": "^11.7.3",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-native": "0.79.2",
    "react-native-gesture-handler": "~2.24.0",
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.10.0",
    "react-native-web": "^0.20.0",
    "react-native-webview": "13.13.5"
  },