Category: javascript

I have component A, and once we land on PAGE A, I am opening other website link in same tab. now when i am pressing back button on other website . its navigated to PAGE A. but component is not rendering. and api is not getting called again.

i have already used useLocation hook to detect the location change. its working in localhost but not working on deployed application.

i also added logs , but logs are not showing/triggering.

  const location = useLocation();

  useEffect(() => {
    initiateKYC();
  }, [location]);

I’m not sure if i have a fundamental misunderstanding of doughnut charts.

I’m looking to render a doughnut chart with 1 data point (we’ll call this datapoint ‘completed_A).

The full circumference of the doughnut should be total_A.

if total_A == 360 and completed_A == 180, the chart should look similar to this:

This works fine, the problem being that when completed_A is a smaller value such as 20, the chart appears to render off center and extremely zoomed in:

Is there a way to render this as if there is still a full 360 degrees?

import { Chart } from "chart.js/auto";

const DoughnutChart = {
  mounted() {
    const ctx = this.el;

    const data = {
      labels: ["Overall Yay", "Overall Nay"],
      datasets: [
        {
          backgroundColor: "#ffcd8c",
          data: [20],
          circumference: 20,
        },
      ],
    };

    const options = {
      maintainAspectRatio: false,
      cutout: "90%",
      plugins: {
        legend: {
          display: false,
        },
      },
    };

    new Chart(ctx, {
      type: "doughnut",
      data: data,
      options: options,
      plugins: [filterToolTips],
    });
  },
};

export default DoughnutChart;

RFC6265 said that

If the server omits the Path attribute, the user agent will use the “directory” of the request-uri’s path component as the default value.

Though it talks about the Set-Cookie thing, it also applies to the document.cookie API. To verify this, one can open new tab on Chrome and type “https://github.com/pulls/review-requested”. Once the webpage finished loading, open the dev console, type the following code and enter:

document.cookie = "mycookie=114514"

The application tab in dev console shows that the cookie is created with the path “/pulls”, which is exactly what is mentioned in RFC6265. But it seems to be a little complicated if SPA is involved (though github is indeed written in react). Let’s follow the steps:

1. Open a new tab to github.com. You’d better delete the cookie above.
2. In order to change url to “https://github.com/pulls/review-requested” without reloading, click the pull request button on the top-right, and then click the button with text “Review requests”.
3. Type document.cookie = "mycookie=114514" in dev console and check the value in the application tab.

At this time, the cookie is created with the root path “/”, even if Chrome’s address bar is filled with https://github.com/pulls/review-requested .

That seems to differ from RFC6265. I have tried it on Firefox, which behaves the same as Chrome. I can’t figure out the following questions:

1. How is the missing path attribute of a cookie is computed or handled in a browser?
2. Are there any articles that document the way path of cookie is computed?

We’ve recently run Google lighthouse for one of our sites and noticed that it is complaining about a deprecated API, namely PayPal’s SDK JS which we use to display their payment buttons.

I probably haven’t had enough coffee today but I can’t see an updated version / URL of this javascript file and we’re not hosting it locally, instead getting it directly from source.

https://www.paypal.com/sdk/js?currency=GBP&commit=false&components=messages,buttons,funding-eligibility&enable-funding=paylater&disable-funding=card,credit&client-id=xxx

Any suggestions as to what we’re doing wrong or is it a false positive? I feel I’m missing something really obvious!

Ed

I want when i click on a custom close icon and it will be triggered uploadcare delete icon to remove uploaded file only from UI don’t want to use uploadcare api to removed.

I want when i click on a custom close icon and it will be triggered uploadcare delete icon to remove uploaded file only from UI don’t want to use uploadcare api to removed.
currently when i click on delete icon then its triggered below code and then removed

window.addEventListener("LR_REMOVE", () => {
        setFileName('');
        setUploadId('');
        const updatedCardsArr = _.filter(contex`your text`tArr, (item) => item.title !== fileName)
        setContextArr(updatedCardsArr);
    });

Some websites and applications, such as Spotify and SoundCloud, generate unique embed links when sharing a song or video. These embeds are more than just static content; they allow users to play the media directly.

For example, here’s an image of Spotify’s embed:

I attempted to create a basic embed using the tag, but I want something more functional and dynamic, like the ability to play the track or video directly from the embed. Does anyone have suggestions for implementing this with custom functionality (e.g., custom player controls)?

Any help or libraries to explore would be appreciated!

How can I combine my individual chrome extensions easily as a unified extension?

Since I couldn’t do I tried to ask Chatgpt but I didn’t get accurate answers as it was trying what I was doing, combining manifests, etc.Here is a sample of my extensions structure:structure of the extensions

I am trying to draw chart in Google line chart in web app, functionality of the chart is

• On loading the page Chart should display with data “All”.
• On drop down selection chart have to be updated with selected values.

After test deployment, I am getting the error in the browser

First column must be a domain column

Not sure where I am messing around 🙁

Here is my App script function

function draw_chart(){
  var ss = SpreadsheetApp.openById('XXXXXXX');
  var metrics_sheet = ss.getSheetByName('sheet1');
  var lastrow = metrics_sheet.getLastRow();
  var lastcolumn = metrics_sheet.getLastColumn();
  var values = metrics_sheet.getRange("A1:X").getValues();
  /* Find Last Index of the Non Blank cells */
  const range = metrics_sheet.getRange("A1:X"+lastrow).getValues();
  var index_values  = lastrow - range.reverse().findIndex(c=>c[0]!='');
  var temp = "A1:X"+index_values;
  var values = metrics_sheet.getRange(temp).getValues();
  var chart_dt = JSON.stringify(values); 
  Logger.log(chart_dt);
  return chart_dt;
}

Above function gives the output like

[["city","date","volume"],
["All","2022-04-30T18:30:00.000Z",492],
["All","2022-05-31T18:30:00.000Z",406],
["All","2022-06-30T18:30:00.000Z",924],
["All","2022-07-31T18:30:00.000Z",902],

["san fran","2023-04-30T18:30:00.000Z",613],
["san fran","2023-05-31T18:30:00.000Z",233],
["san fran","2023-06-30T18:30:00.000Z",593],
["san fran","2023-07-31T18:30:00.000Z",306],

["chicago","2022-04-30T18:30:00.000Z",989],
["chicago","2022-05-31T18:30:00.000Z",735],
["chicago","2022-06-30T18:30:00.000Z",497],
["chicago","2022-07-31T18:30:00.000Z",663]]

My Script for drawing and filtering the charts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    <script src="https://www.gstatic.com/charts/loader.js"></script>    
    <script type="text/javascript">    
      google.charts.load('current',{'packages':['corechart']});
      google.charts.setOnLoadCallback(drawchart);
         

      function drawchart(){
        window.alert('Inside Draw Chart func');
        google.script.run.withSuccessHandler(displaychart).chart_draw();        
      }

      function get_filter_city(){                
        google.script.run.withSuccessHandler(filter_data).draw_linechart();             
      }       

      function filter_data(city_data){
        let city_select = document.getElementById("city").value;
    let f_city_data = city_data;        

        //Filter for regions
        if(city_select==""){
          city_select = city_data.slice(0);
        }else{          
          filterbyregion = f_city_data.filter(city_data => city_data.city === city_select);          
        }     
      }

      function displaychart(c_data1){
        var datatable = new google.visualization.DataTable();
        datatable.addColumn('string','date');
        datatable.addColumn({type:'string',role:'annotation'});        
        datatable.addColumn('number',id:'pat');

        var rows = [];

        for(var i=0;i<c_data1.length;i++){          
          var curr_element = c_data1[i];
          var e_date = new Date(curr_element[1]);

          rows.push([curr_element[0],curr_element[1],curr_element[2]]);
        }
        datatable.addRows(rows);                      

      //Setting Chart Options
      var options={
        title: 'Sales Volume'        
      };

      // Draw our chart passing some options
      var chart = new google.visualization.LineChart(document.getElementById('chart_container'));
      chart.draw(datatable,options);
      }
      </script>

HTML code

    <select id="city">
      <option value="All">All</option>
      <option value="san fran">san fran</option>
      <option value="chicago">chicago</option>
     </select>
     <button id="srch_btn" onclick="get_filter_city()"> Search </button> 
     <div id="hell" class="chart_container"></div>

I am working on a website that features a map with different locations to that open additional information on click.

The site works well on desktop, but on mobile the site refreshes until the following error appears “a problem repeatedly occurred”. I have done several tests and I realized it happens when I use the custom L.divIcon but I don’t see anything wrong there.

const locations = [
              {
          "key" : "aquarium",
          "title" : "aquarium",
          "time" : "present",
          "lat" : "52.4986179",
          "lon" : "13.4165594",
        },
              {
          "key" : "andenbuch",
          "title" : "andenbuch",
          "time" : "present",
          "lat" : "52.4889454",
          "lon" : "13.4029223",
        },
              {
          "key" : "poropati",
          "title" : "Poropati",
          "time" : "present",
          "lat" : "52.4804748",
          "lon" : "13.4464375",
        }];

for (let index = 0; index < locations.length; index++) {
        marker = L.marker([locations[index].lat, locations[index].lon], {
          icon: L.divIcon({
            className: `marker marker-category-${locations[index].time}`,
            html: `
              <div class="pin"></div>
              <div class="title">${locations[index].title}</div>
            `
          }),
        }).addTo(map).on('click', () => { openModal(locations[index].key) });
      }

I have tried reorganizing the code, when I removed the divIcon and used the default marker it worked, but I need a custom marker.

Whenever I refresh any page on my create-react-app static build(npm run build), I get a blank page.
When checking source, I can see that I got 200 OK from index.html but the page content is just empty. the HTML contains nothing but imports and etc, no content.

However, a Hard-Refresh (CTRL+SHIFT+F5), everything refreshes and works as expected.
I tried various solutions found on the web, spent over 10 hours on this and I’m just lost. any ideas would be appericiated

Here’s my App.JS

function App() {
    return (
        <>
            <Router>
                <AccessibleNavigationAnnouncer/>
                <Switch>
                    <Route path="/login" component={Login}/>
                    <Route path="/app/*" component={Layout}/>

                    <Redirect exact from="/" to="/login"/>
                </Switch>
            </Router>
        </>
    )
}

package.json

...
  "homepage": "https://blahblah.com/",
...

.htaccess

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Here’s my serving logic (runs on Node)

const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

P.S: The site is hosted on a shared hosting of Namecheap. if that matters somehow

My react web app has over 2000 blocks that created by svg path.

Users can select the blocks they need and merge them to a large block.

The sides of selected blocks must be adjacent.

The problem is I have no idea how to handle irregular block like A0+A1+A2+A4 in snippet.

const data = Array.from({ length: 9 }).map((_, i) => ({
  id: `A${i}`,
  x: (i % 3) * 300,
  y: Math.floor(i / 3) * 300,
  p: [{ node: "L", x: 300, y: 0 },{ node: "L", x: 300, y: 300 },{ node: "L", x: 0, y: 300 }]
}));
const expectResult = [
  {
    id: "A0", x: 0, y: 0,
    p: [{ node: "L", x: 900, y: 0 },{ node: "L", x: 900, y: 300 },{ node: "L", x: 600, y: 300 },{ node: "L", x: 600, y: 600 },{ node: "L", x: 300, y: 600 },{ node: "L", x: 300, y: 300 },{ node: "L", x: 0, y: 300 }],
  },
  {
    id: "A3", x: 0, y: 300,
    p: [{ node: "L", x: 300, y: 0 },{ node: "L", x: 300, y: 300 },{ node: "L", x: 600, y: 300 },{ node: "L", x: 600, y: 600 },{ node: "L", x: 0, y: 600 }],
  },
  {
    id: "A5", x: 600, y: 300,
    p: [{ node: "L", x: 300, y: 0 },{ node: "L", x: 300, y: 600 },{ node: "L", x: 0, y: 600 }],
  },
];

const App = () => {
  return (
    <div>
      original
      <svg width="100%" viewBox="-100 -100 1200 1200">
        {data.map((d) => (
          <Booth key={d.id} d={d} />
        ))}
      </svg>
      expected result after merge by selected blocks
      <svg width="100%" viewBox="-100 -100 1200 1200">
        {expectResult.map((d) => (
          <Booth key={d.id} d={d} />
        ))}
      </svg>
    </div>
  );
};

const drawPath = (path) => path.map((p) => (p.node === "L" ? `${p.node}${p.x} ${p.y}` : `${p.node}${p.x1} ${p.y1} ${p.x2} ${p.y2} ${p.x} ${p.y}`)).join("") + "Z";

const Booth = ({ d }) => {
  return (
    <g key={d.id} id={d.id} transform={`translate(${d.x},${d.y})`}>
      <path stroke={"black"} fill="none" strokeWidth={1} d={`M0 0${drawPath(d.p)}`} />
      <text y={150} fontSize={80}>
        {d.id}
      </text>
    </g>
  );
};
ReactDOM.createRoot(document.getElementById("app")).render(<App />);

body {
  margin: 0;
  padding: 0;
}

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin="true"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin="true"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin="true"></script>
<div id="app"></div>

I tried to use min and max to calculate the new block’s shape, but it can’t handle irregular block.

const data = Array.from({ length: 9 }).map((_, i) => ({
  id: `A${i}`,
  x: (i % 3) * 300,
  y: Math.floor(i / 3) * 300,
  p: [
    { node: "L", x: 300, y: 0 },
    { node: "L", x: 300, y: 300 },
    { node: "L", x: 0, y: 300 },
  ],
}));

const areas = [
  { id: "A0", blocks: ["A0", "A1", "A2", "A4"] },
  { id: "A3", blocks: ["A3", "A6", "A7"] },
  { id: "A5", blocks: ["A5", "A8"] },
];
const mergeBlock = (blocksData) => {
  const filter = [];
  return blocksData
    .map((d1) => {
      const area = areas.find((d2) => d1.id === d2.id);
      const pos = blocksData.filter((d) => area && area.blocks.includes(d.id)).map((d) => ({ x: d.x, y: d.y }));
      const x = pos.length > 0 ? Math.min(...pos.map((d) => d.x)) : d1.x;
      const y = pos.length > 0 ? Math.min(...pos.map((d) => d.y)) : d1.y;
      const w = pos.length > 0 ? Math.max(...pos.map((d) => d.x)) - x + 300 : d1.w;
      const h = pos.length > 0 ? Math.max(...pos.map((d) => d.y)) - y + 300 : d1.h;
      filter.push(...(area ? area.blocks.filter((d) => d !== d1.id) : []));
      return {
        ...d1,
        x,
        y,
        p: [
          { node: "L", x: w, y: 0 },
          { node: "L", x: w, y: h },
          { node: "L", x: 0, y: h },
        ],
      };
    })
    .filter((d) => !filter.includes(d.id));
};

const App = () => {
  return (
    <div>
      <svg width="100%" viewBox="-100 -100 1200 1200">
        {mergeBlock(data).map((d) => (
          <Booth key={d.id} d={d} />
        ))}
      </svg>
    </div>
  );
};

const drawPath = (path) => path.map((p) => (p.node === "L" ? `${p.node}${p.x} ${p.y}` : `${p.node}${p.x1} ${p.y1} ${p.x2} ${p.y2} ${p.x} ${p.y}`)).join("") + "Z";

const Booth = ({ d }) => {
  return (
    <g key={d.id} id={d.id} transform={`translate(${d.x},${d.y})`}>
      <path stroke={"black"} fill="none" strokeWidth={1} d={`M0 0${drawPath(d.p)}`} />
      <text y={150} fontSize={80}>
        {d.id}
      </text>
    </g>
  );
};
ReactDOM.createRoot(document.getElementById("app")).render(<App />);

body {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin="true"></script>
<div id="app"></div>

I researched for a few days how to convert an MP3 voice-over to an animated lip synced character video, like Adobe character animation. I like 2d animations.

I found crazytalk tool to create such animations offline. I am looking for a javascript/python library which can compile an animation and produce a video. Or an easy approach to implement such a library.

Event capturing as in Event Capturing/Bubbling, not event-handlers.

I have a web-application where the user can create visualization elements within a div.
In one example the user created a div that’s clickable and has a hover-event, but is a sibling to, and displayed on top of, elements that have context-menu events on them.

The user still wants these context-menu events to work, as they open a context-menu that enables value-specific behaviour.

This causes trouble since I can’t seem to find a way to imitate the way the browser fires off events.
What I want to do is handle right-click events in the ‘editor’ and if the cursor position overlaps another of the children of the ‘editor’, recursively re-dispatch the event on all elements directly below the cursor.
Creating events and dispatching them manually only causes them to bubble up, not propagate down.

I also cannot disable pointer-events on the user’s div, as their events would stop working.
Even if I did in the instant the button is clicked, I still need to be able to re-run the browser’s event programmatically so that the elements below are also affected by it.

My application only knows of the editor itself and the elements outside; everything within is dynamically assembled by the user.
This means I cannot find the text-element by id and bubble the events upwards.

The following snippet shows an example of the current state.
Because of the elements in the sibling div being nested, simply dispatching an event on the sibling itself doesn’t work.

let editor = document.getElementById("editor");
editor.oncontextmenu = e => {
  // Skip opening the browser context-menu.
  e.preventDefault();

  for (let i = 0; i < editor.children.length; i++) {
    let currentChild = editor.children[i];
    if (currentChild == e.target) {
      // Avoid executing the event on the element that received it.
      continue;
    }

    let currentRect = currentChild.getBoundingClientRect();
    if (currentRect.left < e.offsetX &&
      currentRect.top < e.offsetY &&
      currentRect.right > e.offsetX &&
      currentRect.bottom > e.offsetY) {

      // Problem here is that the new event is only sent to the sibling, not further down to the texts.
      // Since the text boxes have context menu event, not the sibling, this won't do anything.
      // I would preferrably like to just re-execute the right-click while the browser calculates the destination.
      // The current way requires every layer to have this custom logic in 'oncontextmenu',
      // which is not possible in my scenario.
      let ev = new MouseEvent('contextmenu', {
        screenX: e.screenX,
        screenY: e.screenY,
        clientX: e.clientX,
        clientY: e.clientY,
        ctrlKey: e.ctrlKey,
        shiftKey: e.shiftKey,
        altKey: e.altKey,
        metaKey: e.metaKey,
        button: e.button,
      });
      currentChild.dispatchEvent(ev);
    }
  }
}

let header = document.getElementById("header");
document.onmousemove = e => {
  header.innerHTML = 'Header text<br/>x: ' + e.pageX + '<br/>y: ' + e.pageY;
}

#header {
  padding: 25px;
  border: 1px solid black;
}

#editor {
  position: relative;
}

.sibling {
  position: absolute;
  background-color: red;
  border: 5px solid blue;
  opacity: 0.3;
  width: 250px;
  height: 250px;
  top: 50px;
  left: 75px;
}

.me {
  position: absolute;
  opacity: 0.3;
  width: 300px;
  height: 300px;
  top: 25px;
  left: 50px;
  border: 5px solid black;
}

.me:hover {
  border-color: red;
  background-color: green;
}

.nephew {
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  margin: 9px;
  padding: 5px;
  border: 1px solid white;
}

.cousin {
  color: yellow;
  align-content: center;
  text-align: center;
  margin: auto 0;
  height: 50%;
  width: 100%;
  border: 1px solid blue;
}

<header id="header">Header text<br/> x: ?<br/> y: ?</header>
<div id="editor">
  <div class="sibling">
    <div class="nephew">
      <div class="cousin">
        <div class="text" oncontextmenu="alert('context-menu on 'Value 1'')">Value 1</div>
      </div>
      <div class="cousin">
        <div class="text" oncontextmenu="alert('context-menu on 'Value 2'')">Value 2</div>
      </div>
    </div>
  </div>
  <div class="me" onclick="alert('clicked 'me'')" oncontextmenu="alert('context-menu on 'me'')"></div>
</div>

Same snippet in JSFiddle:
https://jsfiddle.net/7gnqsm51/9/

The project does not currently use JQuery, so I would prefer solutions without it.

how to fix this
i using
“@storybook/react”: “^8.2.9”,
“@storybook/react-vite”: “8.2.9”,
“vite”: “^4.4.0”,
“vite-tsconfig-paths”: “^4.3.1”,
“vitest”: “^1.3.1”
in the network tab in developer console I see the call:
GET http://localhost:6007/virtual:/@storybook/builder-vite/vite-app.js net::ERR_ABORTED 404 (Not Found)

-file main.ts

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-next',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  
};

export default config;

-file preview.tsx

import '@mantine/core/styles.css';
import React, { useEffect } from 'react';
import { addons } from '@storybook/preview-api';
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
import { MantineProvider, useMantineColorScheme } from '@mantine/core';
import { theme } from '../src/theme';

const channel = addons.getChannel();

function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
  const { setColorScheme } = useMantineColorScheme();
  const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');

  useEffect(() => {
    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
  }, [channel]);

  return <>{children}</>;
}

export const decorators = [
  (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
  (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
];

“I tried to run Storybook with Vite, but encountered a 404 error for the vite-app.js file, and couldn’t resolve it.”

I am facing an issue where the Google Ad Manager script provided to me works perfectly in my local development environment, but it does not run after deployment to my server. The browser console shows no errors or warnings in either case, but the ads are not loading on the deployed version.

What I’ve tried:

1. Verified that the same script works on local but not on production.
2. Checked the browser console for any errors or warnings—none are shown.
3. Verified that no ad blockers are interfering.
4. Ensured that the deployed environment matches the local environment in terms of configuration.
5. Tried inspecting network requests related to ads, but nothing unusual was found.

Environment Details:

• Local: [e.g., Windows/Mac, Browser (Chrome/Firefox/etc.)]
• Server: [e.g., Ubuntu/Debian, Apache/Nginx]

Additional Info:

• I have Build it using Docker and Tested it is working fine locally but not after deployment
• The script is included using standard HTML <script> tags.
• No CORS-related issues are appearing in the console.
• The website on the server is served over HTTPS, and SSL certificates are correctly installed.

Any insights or ideas on why the script isn’t running in production but works locally would be greatly appreciated!

Here is the Link

dev.startbazaar.pk

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 
    https://support.google.com/admanager/answer/1697712?hl=en&ref_topic=4390040&sjid=4107885407167616336-EU
  -->
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };
    googletag.cmd.push(function () {
      googletag.defineSlot('/28379801/Starbazaar728x90', [728, 90], 'div-gpt-ad-1725272785987-0')
        .addService(googletag.pubads());
      googletag.enableServices();
    });
  </script>
</head>

<body>
  <h1>Hello World</h1>
  <div id='div-gpt-ad-1725272785987-0' style='min-width: 728px; min-height: 90px;'>
    <script>
      googletag.cmd.push(function () { googletag.display('div-gpt-ad-1725272785987-0'); });
    </script>
  </div>
</body>

</html>