I added a button on the bottom right corner of the screen, looks well on all browsers except IOS Safari, the search bar is over the button, It looks good on google mobile browser though. I came across a website where they managed to place the button over the search bar, but I can’t figure out how.

Here is my css:

@tailwind base;
@tailwind components;
@tailwind utilities;

#root {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
}

html, body {
  overscroll-behavior: none; /* Prevent the bounce effect on mobile */
  -webkit-text-size-adjust: none; /* Disable automatic text resizing */
  min-height: 100%; 
  -webkit-overflow-scrolling: none;
}

and this is the CSS Tailwind style for the button:

className="absolute bottom-6 right-6 w-14 h-14 
rounded-full bg-[#0c0c0d] flex items-center 
justify-center shadow-lg z-50 cursor-pointer 
text-white transition-transform hover:bg-[#535151] 
hover:scale-105"

I was wondering if there is a way to say that a click has happened without actually having some one click with the mouse.

I’ve been working on my extension YTDownloaderNew, and in the ytm-content-script.js, I’m using this code to detect when the user navigates to a YouTube Music playlist:

navigation.addEventListener('navigate', () => {
    if (window.location.href.includes("music.youtube.com/playlist")) {
        playlistLoaded();
    }
});

It works perfectly fine in Edge and Chrome, but for some reason, it doesn’t seem to work in Firefox. Is there a different event or method I can use for Firefox to achieve the same result?

I tried to intercept the popstate method, but it didn’t really get me anywhere. I also went through the documentation on mozilla website, but I couldn’t find anything useful there.

This is a really dumb question, but please help me understand this line of code
if (freq[char]). What does it mean? How variable can be in an array without the push() method?

function removeDupl(arg) {
    var answer = "";
    var freq = [];


    for (i = 0; i < arg.length; i++) {
        let char = arg[i]

        if (freq[char]) {       <------- What does it mean ? what condition is that?
            freq[char]++
            console.log("Duplicate:"+ char)

        } else {
            freq[char] = 1

            answer = answer + char
            console.log("not a duplicate:"+char)
        }

    }

    return answer;

}

I would like to use the datepicker easepick.

I would like to preset a date range:
current date (=startDate) and current date + 2 years (=endDate).
This date range should be shown in the field.

Then the user should be able to pick his own date range.

And at last step I would like to get the startDate and the endDate (eather the preset dates or if given the ones chosen by the user) and save it in a variable.
If the user changes his date range the variables should update too.

const picker = new easepick.create({
    element: document.getElementById('datepicker'),
    css: [
    'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
    ],
    calendars: 2,
    grid: 2,
    setup(picker) {
           picker.on('select', (e) => {

           });   
    },
    plugins: ['LockPlugin','RangePlugin'],
    LockPlugin: {
    minDate: new Date(),
    },
    RangePlugin: {
    tooltip: true,
    startDate: new Date(),
    endDate: new Date().add(2, 'years');,
    locale: {
        one: 'day',
        other: 'days',},
    },    
});

var startDate = picker.getStartDate().format('YYYY-MM-DD');
var endDate = picker.getEndDate().format('YYYY-MM-DD');

Thank you in advance for your help!

i use React App with Tabler.io template it works fine in local, i already use npm run build and npm run preview in local it works fine. but when i deploy my app to server and run npm run build on server,my template not load and it show message like these.

<script src="/template/dist/libs/apexcharts/dist/apexcharts.min.js"> in "/index.html" can't be bundled without type="module" attribute
<script src="/template/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"> in "/index.html" can't be bundled without type="module" attribute
<script src="/template/dist/libs/jsvectormap/dist/maps/world.js"> in "/index.html" can't be bundled without type="module" attribute
<script src="/template/dist/libs/jsvectormap/dist/maps/world-merc.js"> in "/index.html" can't be bundled without type="module" attribute
<script src="/template/dist/js/tabler.min.js"> in "/index.html" can't be bundled without type="module" attribute
<script src="/template/dist/js/demo.min.js"> in "/index.html" can't be bundled without type="module" attribute

/template/dist/css/tabler.min.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

/template/dist/css/tabler-flags.min.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

/template/dist/css/tabler-payments.min.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

/template/dist/css/tabler-vendors.min.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

/template/dist/css/demo.min.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

i load my template in index.html like these

<link
      href="/template/dist/css/tabler.min.css?1692870487"
      rel="stylesheet"
    />
    <link
      href="/template/dist/css/tabler-flags.min.css?1692870487"
      rel="stylesheet"
    />
    <link
      href="/template/dist/css/tabler-payments.min.css?1692870487"
      rel="stylesheet"
    />

can anybody show me the right ways to solve my problem? thanks

I’m using ReactGrid, and I want to disable the fill handle for a specific column. In this case, I want to disable it for the image cell type (which is a custom cell). Please let me know if this is possible. Thanks!

I am building a navigator program in Java using JavaFX. I’m trying to use a map overlay using the WebEngine class but it doesn’t want to load a map. My HTML file loads fine as displays the map when running locally in a browser.

When I run it in my JavaFX program, the map overlay loads correctly but says “Sorry, we have no imagery here”. My API key is valid and working in other application aspects such as geocoding. I have also checked that javascript is enabled for the web engine and that the API does not restrict javascript map requests. However, since the html file runs fine on its own, I am inclined to believe that this is an issue with how the WebEngine module handles the html file.

I am not sure what else to troubleshoot to get the map to display within the application. I would appreciate any ideas or fixes to this issue.

Screenshot of map running within application

if the variable matches the element is in the visible part, the code works fine, a click occurs. if the variable matches the element that is not in the visible part, the code works fine until the click, the click does not occur with 20 attempts. How to make it so that after scrolling to the desired element a click occurs

function click(cleanTableId) {
  console.log("✅ start click");

  const allElements = document.querySelectorAll("div[data-observer-id]");
  const allMatches = [];

  allElements.forEach((container) => {
    const observerId = container.getAttribute("data-observer-id");
    const baseId = observerId.replace(/-P.*/, "");

all elements in the iframe are collected into a variable and it starts comparing with cleanTableId

if (baseId === cleanTableId) {
  console.log(`✅ Match found: ${observerId} → Scrolling into view`);
  allMatches.push(observerId);

  const img = container.querySelector("img");
  const target = img || container;

the “img” element is added to the appropriate element and the scroll method is applied and make click on element

  container.scrollIntoView({ behavior: "smooth", block: "center" });
  target.click();
  
  const isVisible = target.offsetParent !== null && !target.disabled;

a condition is created to define an element in the visual part and a click occurs using setInterval

      if (isVisible) {
        console.log("✅ Element is visible, attempting click...");

        setTimeout(() => {
          let attempts = 0;
          const maxAttempts = 20;

          const tryClick = setInterval(() => {
            container.scrollIntoView({ behavior: "smooth", block: "center" });
            target.click();
            attempts++;
            console.log("✅ click", attempts);
            if (attempts >= maxAttempts) {
              console.warn("❌ Click attempts timed out after 20 tries");
              clearInterval(tryClick);
            }
          }, 100);
        }, 700);
      }
    }
  });
  console.log("✅ Clicked elements matching:", allMatches);
}

this is the console when the element is not in the visual part

✅ start click
iframe-script.js:36 ✅ Match found: 412-P0-38 → Scrolling into view
iframe-script.js:48 ✅ Element is visible, attempting click...
iframe-script.js:68 ✅ Clicked elements matching: ['412-P0-38']
iframe-script.js:58 ✅ click 1
iframe-script.js:58 ✅ click 2
iframe-script.js:58 ✅ click 3
iframe-script.js:58 ✅ click 4
iframe-script.js:58 ✅ click 5
iframe-script.js:58 ✅ click 6
iframe-script.js:58 ✅ click 7
iframe-script.js:58 ✅ click 8
iframe-script.js:58 ✅ click 9
iframe-script.js:58 ✅ click 10
iframe-script.js:58 ✅ click 11
iframe-script.js:58 ✅ click 12
iframe-script.js:58 ✅ click 13
iframe-script.js:58 ✅ click 14
iframe-script.js:58 ✅ click 15
iframe-script.js:58 ✅ click 16
iframe-script.js:58 ✅ click 17
iframe-script.js:58 ✅ click 18
iframe-script.js:58 ✅ click 19
iframe-script.js:58 ✅ click 20
iframe-script.js:60 ❌ Click attempts timed out after 20 tries

this is a console when the element is in the visual part

✅ start click
iframe-script.js:36 ✅ Match found: 412-P0-38 → Scrolling into view
iframe-script.js:48 ✅ Element is visible, attempting click...
iframe-script.js:68 ✅ Clicked elements matching: ['412-P0-38']

I was recently following on the free code camp Javascript Self-Driving Car course and got to about 41:50 without any major issues, but when I got to making the inner road lines dashed, the function ctx.setLineDash([20,20]); just wasn’t working. What I had so far was drawing solid lines perfectly fine but when I put that statement in, it wouldn’t draw any lines.

I tried to put the line in different places like after the beginPath statement, but nothing was working. Here is the code that I have so far

Road.js

class Road {
  constructor(x, width, laneCount = 3) {
    this.x = x;
    this.width = width;
    this.laneCount = laneCount;

    this.left = x - width / 2;
    this.right = x + width / 2;

    const infinity = 1000000000;
    this.top = -infinity;
    this.bottom = infinity;
  }

  draw(ctx) {
    ctx.lineWidth = 5;
    ctx.strokeStyle = "white";

    for (let i = 0; i <= this.laneCount; i++) {
      const x = lerp(
        this.left,
        this.right,
        i/this.laneCount
      )
      if (i > 0 && i < this.laneCount) {
        ctx.setLineDash([20,20]);
      } else {
        ctx.setLineDash([])
      }
      ctx.beginPath();
      ctx.moveTo(x, this.top);
      ctx.lineTo(x, this.bottom);
      ctx.stroke();
    }
  }
}

function lerp(A, B, t) {
    return A + (B-A)*t;
}

main.js

 const canvas = document.getElementById("myCanvas");
 canvas.height = window.innerHeight;
 canvas.width = 200;
 const ctx = canvas.getContext("2d");
 const road = new Road(canvas.width / 2, canvas.width * 0.9, 4);
 
 animate();
 
 function animate() {
    canvas.height = window.innerHeight;
    road.draw(ctx);
    requestAnimationFrame(animate);
 }

Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Self-Driving Car</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script src="road.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Css

body {
    margin: 0;
    background: darkgrey;
    overflow: hidden;
    text-align: center;
}

#myCanvas {
    background: lightgray;
}

I have a webserver made with Express.js and I want check the coverage of some request made with Postman, but nyc don’t show any line as reached by the requests.

I have made a small reprocucible example:

File structure

├── package.json
├── .nycrc.json
└── index.js

Files

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "cover": "nyc node index.js",
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^5.1.0"
  },
  "devDependencies": {
    "nyc": "^17.1.0"
  }
}

.nycrc.json

{
    "all": true,
    "check-coverage": false,
    "extension": [
        ".js"
    ],
    "include": [
        "**/*.js"
    ],
    "reporter": [
        "text",
        "lcov",
        "html"
    ]
}

index.js

import express from 'express';

const app = express();

app.get('/', (req, res) => {
    res.status(200).send('Hello World');
});

app.listen(3000, () => {
    console.log('Server started on: http://localhost:3000/');
});

Steps to reproduce

start the web server:

npm run cover

> [email protected] cover
> nyc node index.js

Server started on: http://localhost:3000/

open http://localhost:3000/ in a browser. output:

Hello World

close the terminal with CTRL + C, this is the final nyc output:

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |       0 |      100 |       0 |       0 |                  
 index.js |       0 |      100 |       0 |       0 | 3-10             
----------|---------|----------|---------|---------|-------------------

I have just started learning javascript. I am creating a ToDo app. Whenever I click on Add Task button the myFunction which I created is not working as it suppose to. Whenever the button is clicked it takes seconds to respond plus the output on console is being multiplied. Thanks in advance. Much Appreciated.

function myFunction() {
  // code to be executed when the button is clicked
  const taskInput = document.getElementById("taskInput");
  const taskList = document.getElementById("taskList");
  //const task = taskInput.value.trim();
  const myButton = document.getElementById("mButton");

  //document.getElementById("taskList").innerHTML = userInput;
  myButton.addEventListener("click", function() {
    const li = document.createElement("li");
    li.createElement = '${taskInput.value} <button class="delete" onclick="deleteTask">Delete</button>';
    console.log("I m clicked");
  });
}

<script src="script.js"></script>
<div class="container">
  <h3>To-Do List</h3>
  <input type="text" id="taskInput" placeholder="Enter a task" />
  <button id="mButton" onclick="myFunction()">Add Task</button>
  <ul id="taskList"></ul>
</div>

Hey everyone I made a JavaScript with ScrollMagic and GSAP what is resizing the font-size on scroll. As soon the JavaScript is fired by scroll the media-queries of my CSS don’t work anymore. One need to reload the page. I additionally tried to check media queries with another javascript but it don´t work.

Here is the JavaScript, HTML and CSS:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
        duration: '100%',
        triggerHook: 0, 
})
.setTween(".wm", 
          {
        fontSize: '39pt',
        padding: '0.3em 0 0 0.2em',
        margin: '-0.05em'
})
.addTo(controller);

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  max-width: 100vw;
  overflow-x: hidden;
  font-size: 18px;
  background: red;
}

.box {
  position: fixed;
  background: yellow;
  width: 100vw;
  height: 15vh;
  z-index: 999;
  text-align: left;
}

main {
  border-top: 2px solid red;
  margin-top: 100vh;
  width: 100vw;
  height: 100vh;
  font-size: 10vw;
  display: inline-block;
  height: auto;
  line-height: 1em;
  text-align: center;
}

.wm {
  font-size: 60pt;
  font-weight: 600;
  color: #004c3f;
  padding-top: 0.1em;
  letter-spacing: -0.055em;
  line-height: 0.8em;
  padding-left: 0.075em;
  margin-left: 0;
}

@media (max-width: 575px) {
  .wm {
    font-size: 60pt;
    font-weight: 600;
    color: #004c3f;
    padding-top: 0.1em;
    letter-spacing: -0.055em;
    line-height: 0.8em;
    padding-left: 0.075em;
    margin-left: 0;
  }
}

@media (max-width: 575px) {
  .wm {
    font-size: 90pt;
  }
}

@media (min-width: 576px) {
  .wm {
    font-size: 12em;
    /*margin-left: 0;*/
  }
}

@media (min-width: 768px) {
  .wm {
    font-size: 15em;
    /*margin-left: 0;*/
  }
}

@media (min-width: 1200px) {
  .wm {
    font-size: 20em;
    margin-left: 0;
  }
}

<!DOCTYPE html>
<html data-bs-theme="light" lang="de">

<head>
    <meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>ScrollMagic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div>
        <div class="box">
            <p class="wm">Head</p>
        </div>
        <main>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ullamcorper velit. Quisque luctus molestie nibh id ultricies. Nam convallis, sapien ac aliquet finibus, risus nibh aliquam augue, in scelerisque felis ante quis ante. Aliquam pharetra in tortor quis ultrices. Cras ut lacus semper, scelerisque tortor eu, imperdiet leo. Fusce id ante felis. Duis vel faucibus metus, sit amet lacinia quam. Aenean scelerisque enim eu venenatis pharetra.<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi tempus elit id lorem viverra, et iaculis magna egestas. Nulla sed interdum magna. Nullam laoreet lacinia nibh, ac pretium odio molestie nec. Nullam facilisis semper lacus, non pulvinar nisl fringilla ac. Phasellus enim odio, posuere sit amet risus vel, venenatis gravida dui. Proin mollis nec velit id malesuada. Quisque lacinia, enim sit amet semper facilisis, purus nibh ullamcorper ipsum, id tristique justo tortor id nisi. Nullam mattis tincidunt mauris non porta. Ut vel finibus orci. Nunc eu mattis nisi, eget condimentum lacus. Aenean turpis orci, mollis quis metus ut, mattis sollicitudin quam. Fusce urna enim, ornare nec ullamcorper eu, hendrerit at neque. Aenean gravida convallis mauris, eget faucibus massa. Cras consequat ipsum velit, et feugiat est posuere nec. Praesent porta felis vel dui pellentesque, lacinia dignissim odio varius.<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Curabitur non molestie enim. Donec sollicitudin, odio a tempor facilisis, magna quam auctor nisi, vel varius lectus sapien sit amet augue. Vestibulum in ante nec arcu hendrerit facilisis in sit amet orci. Aenean id vulputate massa. Quisque eu dapibus nisi. Mauris lorem nisl, condimentum a lorem et, posuere porta tortor. Mauris dictum purus tristique, mollis dui non, rhoncus metus. Integer metus risus, porta vitae rhoncus nec, auctor sit amet lacus. Pellentesque laoreet tristique quam, ut sodales tellus interdum sed.<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Etiam efficitur arcu sit amet diam tincidunt, eget euismod neque fermentum. Vivamus faucibus eros in mi vulputate dictum. Praesent ligula quam, posuere sed euismod id, egestas vel metus. Aliquam mollis tincidunt viverra. Suspendisse potenti. Pellentesque placerat mi nec convallis faucibus. Ut nisi sapien, interdum sed varius ac, venenatis vel nisi. Sed nec odio ut diam mattis convallis. Ut facilisis dui dolor. Praesent varius sit amet lorem sed sagittis. Mauris convallis neque mollis eros fermentum, in molestie mauris tristique. Sed vel mollis neque, vitae mattis tortor.<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nullam egestas finibus venenatis. Mauris lacinia semper ante, eu congue massa ultrices ut. Integer fermentum mattis odio. Ut in semper diam, ullamcorper hendrerit augue. Nullam facilisis, lacus vel varius scelerisque, lorem odio bibendum ante, sed faucibus felis metus ut tortor. Ut volutpat varius placerat. Sed accumsan molestie laoreet. In nisl ante, ullamcorper nec nisl a, feugiat varius tellus. Maecenas tristique imperdiet ultrices. Donec quis est sapien. Etiam sit amet tellus vel sem lobortis commodo. Donec pulvinar consequat fringilla. Morbi sed orci massa. Sed egestas libero vel condimentum egestas. Pellentesque aliquam lectus sit amet neque accumsan sagittis.&nbsp;</p>
            





</main>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
</body>
</html>

Why is my Font folder not being imported?

Also, this issue applies to the icons and images folders as well.

File stucture

• assets/
  • fonts/
    • nunito/
    • poppins/
    • index.ts
  • icons/
    • android/
    • ios/
    • index.ts
  • images
    • splash-screen/
    • index.ts
• app.config.ts
• metro.config.js
• declarations.d.ts
• ts.config.json
• src/
• …

Code Review

assets/fonts/index.ts

import NunitoBold from './nunito/Nunito-Bold.ttf';
import NunitoLight from './nunito/Nunito-Light.ttf';
import NunitoMedium from './nunito/Nunito-Medium.ttf';
import NunitoRegular from './nunito/Nunito-Regular.ttf';
import NunitoSemiBold from './nunito/Nunito-SemiBold.ttf';
import PoppinsBold from './poppins/Poppins-Bold.ttf';
import PoppinsLight from './poppins/Poppins-Light.ttf';
import PoppinsMedium from './poppins/Poppins-Medium.ttf';
import PoppinsRegular from './poppins/Poppins-Regular.ttf';
import PoppinsSemiBold from './poppins/Poppins-SemiBold.ttf';

export const APP_FONTS = {
  nunito: {
    bold: NunitoBold,
    light: NunitoLight,
    medium: NunitoMedium,
    regular: NunitoRegular,
    semibold: NunitoSemiBold,
  },
  poppins: {
    bold: PoppinsBold,
    light: PoppinsLight,
    medium: PoppinsMedium,
    regular: PoppinsRegular,
    semibold: PoppinsSemiBold,
  },
};

assets/images/index.ts

import splashDark from './splash-screen/dark.png';
import splashLight from './splash-screen/light.png';

export const APP_SPLASH_SCREEN = {
  dark: splashDark,
  light: splashLight,
};

same thing assets/icons/index.ts

...

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}

declarations.d.ts

declare module '*.ttf' {
  const content: string;
  export default content;
}

declare module '*.png' {
  import type { ImageURISource } from 'react-native';
  const content: ImageURISource['uri'];
  export default content;
}

metro.config.js

const { getDefaultConfig } = require('@expo/metro-config');
const path = require('path');
const withStorybook = require('@storybook/react-native/metro/withStorybook');

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withStorybook(defaultConfig, {
  ...defaultConfig,
  enabled: process.env.WITH_STORYBOOK,
  configPath: path.resolve(__dirname, '.storybook'),
});

app.config.ts

import type { ExpoConfig } from '@expo/config';

import { APP_FONTS } from './assets/fonts';
import { APP_ICONS } from './assets/icons';
import { APP_SPLASH_SCREEN } from './assets/images';

const isStorybookEnabled: boolean =
  process.env.STORYBOOK_ENABLED?.toLowerCase() === 'true';

const getSplashConfig = (): ExpoConfig['splash'] => ({
  image: APP_SPLASH_SCREEN.dark,
  resizeMode: 'contain',
  backgroundColor: '#F5F5F5',
});

const getAndroidConfig = (): ExpoConfig['android'] => ({
  adaptiveIcon: {
    foregroundImage: APP_ICONS.android.adaptiveIcon,
    backgroundImage: APP_ICONS.android.adaptiveIcon,
    monochromeImage: APP_ICONS.android.adaptiveIcon,
    backgroundColor: '#151718',
  },
  package: 'com.mces58.hangmanify',
});

const getIosConfig = (): ExpoConfig['ios'] => ({
  icon: {
    dark: APP_ICONS.ios.darkIcon,
    light: APP_ICONS.ios.lightIcon,
    tinted: APP_ICONS.ios.tintedIcon,
  },
});

const getWebConfig = (): ExpoConfig['web'] => ({
  favicon: APP_ICONS.web.favIcon,
});

const splashScreenPlugin: [string, Record<string, unknown>] = [
  'expo-splash-screen',
  {
    image: APP_SPLASH_SCREEN.dark,
    resizeMode: 'contain',
    backgroundColor: '#F5F5F5',
    dark: {
      image: APP_SPLASH_SCREEN.light,
      backgroundColor: '#151718',
    },
  },
];

const fontPlugin: [string, Record<string, unknown>] = [
  'expo-font',
  {
    fonts: [
      APP_FONTS.nunito.bold,
      APP_FONTS.nunito.light,
      APP_FONTS.nunito.medium,
      APP_FONTS.nunito.regular,
      APP_FONTS.nunito.semibold,
      APP_FONTS.poppins.bold,
      APP_FONTS.poppins.light,
      APP_FONTS.poppins.medium,
      APP_FONTS.poppins.regular,
      APP_FONTS.poppins.semibold,
    ],
  },
];

export default ({ config }: { config: ExpoConfig }): ExpoConfig => ({
  ...config,
  name: process.env.STORYBOOK_ENABLED ? 'Hangmanify Storybook' : config.name,
  splash: getSplashConfig(),
  android: getAndroidConfig(),
  ios: getIosConfig(),
  web: getWebConfig(),
  plugins: ['expo-localization', splashScreenPlugin, fontPlugin],
  extra: {
    ...config.extra,
    storybookEnabled: isStorybookEnabled,
    eas: {
      projectId: '...',
    },
  },
});

Output:

yarn start
yarn run v1.22.22
$ expo start
env: load .env
env: export GOOGLE_GENERATIVE_AI_API_KEY WITH_STORYBOOK
Starting project at /home/mces58/Desktop/Hangmanify
Error: Error reading Expo config at /home/mces58/Desktop/Hangmanify/app.config.ts:

Cannot find module './assets/fonts'
Require stack:
- /home/mces58/Desktop/Hangmanify/app.config.ts
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/config/build/evalConfig.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/config/build/getConfig.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/config/build/Config.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/config/build/index.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/cli/build/src/start/detectDevClient.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/cli/build/src/start/resolveOptions.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/cli/build/src/start/index.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/cli/build/bin/cli
- /home/mces58/Desktop/Hangmanify/node_modules/expo/bin/cli

I’m trying to find a way to detect what ‘page number’ text in a google docs document is on. I want to know this so I can determine page breaks accordingly if text would flow over onto the next page in a sequence of text I may have.

I have asked the AI and it claims this is impossible to do, but I doubt that. It claims the only way to do this is through heuristic methods like counting how many characters there is and so forth which will not work for me because content may have various font sizes or indentions and newlines etc… I need to reliably know for sure if something is on the next page or not.

So I looked into some different ways to do this.

1.) Maybe google app script? – Apparently there is no method for this?

2.) Google API’s? – Apparently there is no API to detect this for text in the document.

3.) Using Chrome Extension and looking at the DOM. I studied the DOM structure of Google Docs and I could not for the life of me see how it’s rendering the page. The AI claims it might be using iframes but this is not clear as I could not see where it’s actually rendering the content. This would have been nice since I could just see if the text appears in some DOM element that represents the next page, but alas I can not seem to figure this out either.

So this brings me to you the community to see if you have any ideas I have not thought of that might be used to answer this seemingly simple question.