Blancer.com Tutorials and projects

When I am focus in one input box and then click
Below the following number, the number automatically goes up in two input boxes. I tried a lot but couldn’t. I wrote many condition but could not. please someone Expart JavaScript help me.

let li = document.querySelectorAll("li");
let inputField = document.querySelector(".inputField");
let inputField2 = document.querySelector(".inputField2");
li.forEach((li) => {
  li.addEventListener("click", () => {
    inputField.value += Number(li.innerHTML);
    inputField2.value += Number(li.innerHTML);
  });
})

<div class="ul">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<input class="inputField">
<input class="inputField2">

I’m building a cute desktop calculator app using Electron.js and I’m trying to set a custom app icon. I’ve added the icon using theiconproperty in the BrowserWindow and also included the .icns file in the build config for packaging. It works, but I noticed something strange on macOS:

The app icon looks like a flat square instead of having a nice, rounded mask or glossy effect like native macOS apps. It kind of looks out of place in the Dock and in the App Switcher.

My questions are:

1. What’s the correct way to set the app icon for macOS using Electron?
2. Is there a way to get that native rounded/glossy mask effect macOS apps have?
3. Do I need to apply a specific mask or transparency when designing the .icns file?
   Would really appreciate any tips or examples if someone’s gone through this before. Thanks!

In the following code, the query params throws an error when additional property is added but in body it does not to do so. I am currently using elysia version 1.3.0.
I currently have bun version 1.2.17

.post("/test", ({query, body}) => {return body}, {
        query: t.Object(
          {},
          {
            additionalProperties: false,
            error: () => ({
              message: "Unexpected property found in query parameters.",
            }),
          }
        ),
        body: t.Object(
          {
            name: t.String(),
            description: t.String(),
          },
          {
            additionalProperties: false,
          }
        ),
      })

In elysia version 0.8.15 this worked but in the latest version it did not work. I cannot find why this is not working currently.

I’m trying to implement a native counter module in React Native’s new bridgeless architecture (RN 0.79) but keep getting RCTTurboModule not found errors.

My Implementation
iOS Module (Counter.swift)
swift

import Foundation
import React

@objc(Counter)
class Counter: NSObject, RCTTurboModule {
private var count = 0
@objc var bridge: RCTBridge!

    @objc
    func increment(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
        count += 1
        resolve(count)
    }
    
    @objc
    func decrement(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
        if count == 0 {
            let error = NSError(domain: "CounterErrorDomain", code: 200, 
                userInfo: [NSLocalizedDescriptionKey: "Cannot decrement below zero"])
            reject("ERROR_COUNT", "count cannot be negative", error)
        } else {
            count -= 1
            resolve(count)
        }
    }
    
    @objc
    func getInitialCount() -> Int {
        return 0
    }

}

TypeScript Interface (NativeCounter.ts)
typescript

import { TurboModule, TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
increment(): Promise<number>;
decrement(): Promise<number>;
getInitialCount(): number;
}

export default TurboModuleRegistry.getEnforcing<Spec>('Counter');

Error
text
RCTTurboModule not found
Troubleshooting Attempts
Cleaned all caches:

bash

cd ios
rm -rf ~/Library/Caches/CocoaPods
rm -rf Pods
rm -rf ~/Library/Developer/Xcode/DerivedData
pod deintegrate
pod setup
pod install

Added to Podfile:

ruby

pod 'React-RCTTurboModule', :path => '../node_modules/react-native/Libraries/TurboModule'

Verified:

React Native 0.79.3

Xcode 16.2

CocoaPods 1.14.3

Questions
Is RCTTurboModule still the correct protocol in RN 0.79’s bridgeless mode?

What’s missing in my module implementation?

Are there additional header files required?

//
//  counterApp-Bridging-Header.h
//  counterApp
//
//  Created by Apple on 26/06/25.
//
#import <React/RCTBridgeModule.h>
#import <React/RCTTurboModule.h>

Is there a neat way to map the output of Math.atan2 to another range while keeping the result still in [-180°, 180°], as if the calculation does not start from the positive X-axis (rightwards = 0°), but from any given angle?

This question has a similar gist, but it only concerned a particular solution.

IMO, the method of Math.atan2 is fairly quirky, because it does not align with cartographical convention to calculate azimuth angles, which should start from positive Y-axis (or upwards) instead. However, tweaking the mathematics behind arctan isn’t obviously a good choice; I believe that mapping the output angle should be better.

My finding is, you need to classify the angles into at least 2 categories in order to ensure the result to be in the range of [-180°, 180°]. I know that rotate() can handle results out of this range and no rounding is needed. However, I was asking a way to let the output stay in that range.

For instance, an output of a 30-degree-clockwise shifted Math.atan2 should look like this:

I noted that there is a discontinuity at -180°/180° in this mapping method, which caused most of the problem here. A small two-way conditional is probably sufficient to solve this problem, but is there any simple way to achieve this result (of any given rotate angle θ) without using any conditionals?

A visual depiction. Any coordinates that fall into the purple overlapping area need a different way to calculate.

Here is a short code I once used to solve this problem.

Context: the code’s intention was to get a rough latitude & longitude coordinate after the user clicks inside a circle representing Earth. The guide map on it was rotatable, but to change the orientation of the map image would affect too much other stuff, so I wanted to find a simple way to process the output, regardless of in which direction the map was placed on the Earth panel. I have removed some irrelevant code here.

earth.addEventListener('click', function (e) {

            // The coordinates of the point of click within the circle is retrieved as (clickX, clickY).
            
            // If the final angle is positive, offset it with 180°. Otherwise offset it with -180°. Notice that it is a specific case.

            let longitude = Math.atan2(clickY, clickX) * 180 / Math.PI;

            if (longitude <= 0) {
                longitude = (-180 - longitude);
            } else {
                longitude = (180 - longitude);
            }

            console.log("Longitude: " + longitude);
}

If the offset was 30°, and we try to achieve the effect of the table above, the code should be written instead like:

if (longitude <= -150 && longitude > -180) {
    longitude = (longitude - 30);
} else {
    longitude = (longitude + 330);
}

Obviously, if we don’t need the result to be within [-180°, 180°], the if-else was unnecessary at all. But for this case, are there any better ways?

I have created a website with profiles for each person of a business. For some reason on the third profile (Lucas) the image is not loading on the live page. It loads perfectly fine when I open the files locally.

Code for the index file:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="Never Scared Tattoo - The Best Tattoo Shop In The Valley">
        <meta name="author" content="">
        <meta property="og:image" content="images/NeverScaredLogo.black.png.png">
          <meta name="og:image" content="images/NeverScaredLogo.black.png.png">

        <title>Never Scared Tattoo</title><meta property="og:image" content="URL_OF_YOUR_IMAGE.jpg">
        <link rel="icon" href="images/favicon.ico" type="image/x-icon">

        <!-- CSS FILES -->        
        <link rel="preconnect" href="https://fonts.googleapis.com">
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

        <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@300;500&display=swap" rel="stylesheet">

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <link href="css/bootstrap-icons.css" rel="stylesheet">

        <link href="css/css_colors_and_style.css" rel="stylesheet">
<!--

-->
    </head>
    
    <body>

        <div class="container-fluid">
            <div class="row">

                <button class="navbar-toggler d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <nav id="sidebarMenu" class="col-md-4 col-lg-3 d-md-block sidebar collapse p-0">

                    <div class="position-sticky sidebar-sticky d-flex flex-column justify-content-center align-items-center">
                        <a class="navbar-brand" href="index.html">
                            <img src="images/Never.Scared.Logo.White.No.Background.png" class="logo-image img-fluid" align="">
                        </a>

                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a class="nav-link click-scroll" href="#section_1">Home</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link click-scroll" href="#section_2">Our Story</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link click-scroll" href="#section_3">Services</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link click-scroll" href="#section_4">Price List</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link click-scroll" href="#section_5">Contact</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                
                <div class="col-md-8 ms-sm-auto col-lg-9 p-0">
                    <section class="hero-section d-flex justify-content-center align-items-center" id="section_1">

                            <div class="container">
                                <div class="row">

                                    <div class="col-lg-8 col-12">
                                        <h1 class="text-black mb-lg-3 mb-4"><strong>Never <em>Scared <em>Tattoo</em></strong></h1>
                                        <p class="text-black"><b>Be Bold, Break Through</b></p>
                                        <br>
                                        <a class="btn custom-btn smoothscroll mb-2" href="#section_2">About Us</a>

                                        <a class="btn custom-btn smoothscroll mb-2" href="#section_4">Our Prices</a>
                                    </div>
                                </div>
                            </div>

                            <div class="custom-block d-lg-flex flex-column justify-content-center align-items-center">
                                <img src="images/tattoo-gun.jpg" class="custom-block-image img-fluid" alt="">

                                <h4><strong class="text-white">Hurry Up! Get a tat, change your life.</strong></h4>

                                <a href="#booking-section" class="smoothscroll btn custom-btn custom-btn-italic mt-3">Book a tat</a>
                            </div>
                    </section>


                    <section class="about-section section-padding" id="section_2">
                        <div class="container">
                            <div class="row">

                                <div class="col-lg-12 col-12 mx-auto">
                                    <h2 class="mb-4">Meet Our Artists</h2>

                                    <div class="border-bottom pb-3 mb-5">
                                        <p>Where bold ink meets fearless creativity. Located in Spokane Valley, we specialize in custom tattoos, clean lines, and good vibes. Whether it's your first piece or your next masterpiece, our experienced artists bring your vision to life. Walk-ins welcome!</p>
                                    </div>
                                </div>
 
 
                                    <h6 class="mb-5">Meet Artists</h6>

                                        <div class="col-lg-5 col-12 custom-block-bg-overlay-wrap me-lg-5 mb-5 mb-lg-0">
                                            <img src="images/Nessa.Port.jpg" class="custom-block-bg-overlay-image img-fluid" alt="">

                                            <div class="team-info d-flex align-items-center flex-wrap">
                                                <p class="mb-0">Denessa</p>

                                                <ul class="social-icon ms-auto">
                                                    <li class="social-icon-item">
                                                        <a href="https://www.facebook.com/Denessahoskinstattooanddesign/" class="social-icon-link bi-facebook">
                                                        </a>
                                                    </li>

                                                    <li class="social-icon-item">
                                                        <a href="https://www.instagram.com/denessa_hoskins/?hl=en" class="social-icon-link bi-instagram">
                                                        </a>
                                                    </li>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div class="col-lg-5 col-12 custom-block-bg-overlay-wrap me-lg-5 mb-5 mb-lg-0">
                                            <img src="images/Danni.Port.New.png" class="custom-block-bg-overlay-image img-fluid" alt="">

                                            <div class="team-info d-flex align-items-center flex-wrap">
                                                <p class="mb-0">Dani</p>

                                                <ul class="social-icon ms-auto">
                                                    <li class="social-icon-item">
                                                        <a href="https://www.facebook.com/share/16fuRZFtca/?mibextid=wwXIfr" class="social-icon-link bi-facebook">
                                                        </a>
                                                    </li>

                                                    <li class="social-icon-item">
                                                        <a href="https://www.instagram.com/itsdani0325/#" class="social-icon-link bi-instagram">
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="col-lg-5 col-12 custom-block-bg-overlay-wrap mt-lg-5 mb-5 mb-lg-0">
                                            <img src="images/Lucas.New.Port.jpg" class="custom-block-bg-overlay-image img-fluid" alt="">

                                            <div class="team-info d-flex align-items-center flex-wrap">
                                                <p class="mb-0">Lucas</p>

                                                <ul class="social-icon ms-auto">
                                                    <li class="social-icon-item">
                                                        <a href="https://www.facebook.com/share/1CP8F9Po1C/?mibextid=wwXIfr" class="social-icon-link bi-facebook">
                                                        </a>
                                                    </li>

                                                    <li class="social-icon-item">
                                                        <a href="https://www.instagram.com/lucaskirk__official/#" class="social-icon-link bi-instagram">
                                                        </a>
                                                    </li>
                                                    
                                                    <li class="social-icon-item">
                                                        <a href="https://snapchat.com/t/eLSa3A9x" class="social-icon-link bi-snapchat">
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </h6>
                            </div>
                        </div>
                    </section>

                    <section class="featured-section section-padding">
                        <div class="section-overlay"></div>

                        <div class="container">
                            <div class="row">

                                <div class="col-lg-10 col-12 mx-auto">
                                    <h2 class="mb-3">Flash Sale!</h2>

                                    <p>July 10 - 14</p>

                                    <strong>Starting At $20 Per Tattoo</strong>
                                </div>

                            </div>
                        </div>
                    </section>

                    <section class="booking-section section-padding" id="booking-section">
                    <div class="container">
                        <div class="row">

                            <div class="col-lg-10 col-12 mx-auto">
                                <form action="#" method="post" class="custom-form booking-form" id="bb-booking-form" role="form">
                                    <div class="text-center mb-5">
                                        <h2 class="mb-1">Book an appointment</h2>

                                        <p>Please fill out the form and we get back to you</p>
                                    </div>

                                    <div class="booking-form-body">
                                        <div class="row">

                                            <div class="col-lg-6 col-12">
                                                <input type="text" name="bb-name" id="bb-name" class="form-control" placeholder="Full name" required>
                                            </div>

                                            <div class="col-lg-6 col-12">
                                                <input type="tel" class="form-control" name="bb-phone" placeholder="Phone Number" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required="">
                                            </div>
                                        
                                            <div class="col-lg-6 col-12">
                                                <input class="form-control" type="time" name="bb-time" value="18:30" />
                                            </div>

                                            <div class="col-lg-6 col-12">
                                                <select class="form-select form-control" name="bb-branch" id="bb-branch" aria-label="Default select example">
                                                    <option selected="">Select Branches</option>
                                                    <option value="Hair">Coming Soon</option>
                                                    <option value="Nails">Coming Soon</option>
                                                    <option value="Piercing">Coming Soon</option>
                                                    <option value="Tattoo">Tattoo</option>
                                                </select>

                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <input type="date" name="bb-date" id="bb-date" class="form-control" placeholder="Date" required>
                                            </div>

                                            <div class="col-lg-6 col-12">
                                                <input type="number" name="bb-number" id="bb-number" class="form-control" placeholder="Number of People" required>
                                            </div>
                                        </div>

                                        <textarea name="bb-message" rows="3" class="form-control" id="bb-message" placeholder="Comment (Optionals)"></textarea>

                                        <div class="col-lg-4 col-md-10 col-8 mx-auto">
                                            <button type="submit" class="form-control">Submit</button>
                                                <form action="[email protected]" method="post" enctype="text/plain"/>
                                        </div>
                                    </div>
                                </form>
                        </div>
                    </div>
                </section>


                    <section class="price-list-section section-padding" id="section_4">
                        <div class="container">
                            <div class="row">

                                <div class="col-lg-8 col-12">
                                    <div class="price-list-thumb-wrap">
                                        <div class="mb-4">
                                            <h2 class="mb-2">Price List</h2>

                                            <strong>Starting at $80</strong>
                                        </div>

                                        <div class="price-list-thumb">
                                            <h6 class="d-flex">
                                                Tattoos
                                                <span class="price-list-thumb-divider"></span>

                                                <strong>$80 + Artist Rate</strong>
                                            </h6>
                                        </div>

                                        <div class="price-list-thumb">
                                            <h6 class="d-flex">
                                                Coming Soon
                                                <span class="price-list-thumb-divider"></span>

                                                <strong>$0.00</strong>
                                            </h6>
                                        </div>

                                        <div class="price-list-thumb">
                                            <h6 class="d-flex">
                                                Coming Soon
                                                <span class="price-list-thumb-divider"></span>

                                                <strong>$0.00</strong>
                                            </h6>
                                        </div>

                                        <div class="price-list-thumb">
                                            <h6 class="d-flex">
                                                Coming Soon
                                                <span class="price-list-thumb-divider"></span>

                                                <strong>$0.00</strong>
                                            </h6>
                                        </div>

                                        <div class="price-list-thumb">
                                            <h6 class="d-flex">
                                                Coming Soon
                                                <span class="price-list-thumb-divider"></span>

                                                <strong>$0.00</strong>
                                            </h6>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-12 custom-block-bg-overlay-wrap mt-5 mb-5 mb-lg-0 mt-lg-0 pt-3 pt-lg-0">
                                    <img src="images/NeverScaredLogo.black.png.png" class="custom-block-bg-overlay-image img-fluid" alt="">
                                </div>

                            </div>
                        </div>
                    </section>


                <section class="contact-section" id="section_5">
                    <div class="section-padding section-bg">
                        <div class="container">
                            <div class="row">   

                                <div class="col-lg-8 col-12 mx-auto">
                                    <h2 class="text-center">Shop Information</h2>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="section-padding">
                        <div class="container">
                            <div class="row">

                                <div class="col-lg-6 col-12">
                                    <h5 class="mb-3"><strong>Contact</strong> Information</h5>

                                    <p class="text-white d-flex mb-1">
                                        <a href="tel: 120-240-3600" class="site-footer-link">
                                            Phone Number 
                                            Coming Soon
                                        </a>
                                    </p>

                                    <p class="text-white d-flex">
                                        <a href="mailto:[email protected]" class="site-footer-link">
                                            [email protected]
                                        </a>
                                    </p>

                                    <ul class="social-icon">
                                        <li class="social-icon-item">
                                            <a href="https://www.facebook.com/profile.php?id=61577609136230" class="social-icon-link bi-facebook">
                                            </a>
                                        </li>
            
                                        <li class="social-icon-item">
                                            <a href="https://www.instagram.com/neverscared_tattoo/profilecard/?igsh=MXhocHp1c3pwbnk4eg==" class="social-icon-link bi-instagram">
                                            </a>
                                        </li>
                                        
                                        <li class="social-icon-item">
                                            <a href="https://www.tiktok.com/@neverscared0?_t=ZP-8xSK6ZuKFiw&_r=1" class="social-icon-link bi-tiktok">
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="col-lg-5 col-12 contact-block-wrap mt-5 mt-lg-0 pt-4 pt-lg-0 mx-auto">
                                    <div class="contact-block">
                                        <h6 class="mb-0">
                                            <i class="custom-icon bi-shop me-3"></i>

                                            <strong>Open Daily <p> 10am - 8pm </p> Sun - Sat</strong>

                                            <span class="ms-auto"></span>
                                        </h6>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-12 mx-auto mt-5 pt-5">
                                    <iframe class="google-map" src="https://www.google.com/maps/embed/v1/place?q=never%20scared%20tattoo%20spokane%20valley&key=AIzaSyBUFOVejFi8fXcLWvuAIHBq10nj35kinyQ" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                </div>

                            </div>
                        </div>
                    </div>
                </section>

                <footer class="site-footer">
                    <div class="container">
                        <div class="row">

                            <div class="col-lg-12 col-12">
                                <h4 class="site-footer-title mb-4">Our Branches</h4>
                            </div>

                            <div class="col-lg-4 col-md-6 col-11">
                                <div class="site-footer-thumb">
                                    <strong class="mb-1">Spokane Valley</strong>

                                    <p>1708 N Vista Rd, Spokane Valley, WA, 99212</p>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-11">
                                <div class="site-footer-thumb">
                                    <strong class="mb-1"></strong>

                                    <p></p>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-11">
                                <strong class="mb-1"></strong>

                                <p></p>
                            </div>
                        </div>
                    </div>

                    <div class="site-footer-bottom">
                        <div class="container">
                            <div class="row align-items-center">

                                <div class="col-lg-8 col-12 mt-4">
                                    <p class="copyright-text mb-0">Copyright © 2036 Never Scared Tattoo </p>
                                </div>

                                <div class="col-lg-2 col-md-3 col-3 mt-lg-4 ms-auto">
                                    <a href="#section_1" class="back-top-icon smoothscroll" title="Back Top">
                                        <i class="bi-arrow-up-circle"></i>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                </footer>
            </div>

        <!-- JAVASCRIPT FILES -->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/click-scroll.js"></script>
        <script src="js/custom.js"></script>

    </body>
</html>

I have tried the following…

• Changing the image to a new image
• Checking to ensure the name of the image is correct
• Checking to ensure the path to the file is correct

When building my electron app with electron-builder after running npm run electron:build, the internal script always calls the hardcoded path /usr/bin/python. On my Apple Silicon Mac, this Python path is missing, causing the build to fail or behave incorrectly. I want to force the build to use my preferred Python at /opt/homebrew/bin/python3. It is actually where my python is. But whatever I did I could not change the address electron builder is referring to.

What I tried:

• Setting the DMGBUILD_PYTHON env variable to point to my Python — no effect.
• Editing config or build scripts — but the path is hardcoded inside the package.
• Creating a symlink at /usr/bin/python pointing to my Python — this didn’t work even after disabling system protection (SIP), which is unsafe.
• Manually patching the hardcoded path in the package’s code — works but gets overwritten on reinstall.

My project was working fine, but after I went to sleep and came back, it simply doesn’t work anymore. I tested it with 4G and it also gave an error I ran tests on EXPO GO, BUILD DEV BY EAS, and BUILD DE PRODUÇÃO BY EAS, and without success, the problem persists I offer any script to help solve this problem

I tested on different networks and different cell phones.

I also tried the SHA approach, but without success.

{

  "name": "estudae",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "start": "expo start",

    "android": "expo run:android",

    "ios": "expo run:ios",

    "web": "expo start --web"

  },

  "dependencies": {

    "@expo/vector-icons": "^14.1.0",

    "@google/generative-ai": "^0.24.1",

    "@react-native-async-storage/async-storage": "2.1.2",

    "@react-native-community/datetimepicker": "8.4.1",

    "@react-native-community/slider": "4.5.6",

    "@react-native-masked-view/masked-view": "^0.3.2",

    "@react-navigation/bottom-tabs": "^7.3.17",

    "@react-navigation/native": "^7.1.14",

    "@react-navigation/native-stack": "^7.3.18",

    "@react-navigation/stack": "^7.4.2",

    "buffer": "^6.0.3",

    "docx": "^9.5.1",

    "expo": "~53.0.12",

    "expo-av": "~15.1.6",

    "expo-blur": "~14.1.5",

    "expo-calendar": "~14.1.4",

    "expo-camera": "~16.1.8",

    "expo-clipboard": "~7.1.4",

    "expo-dev-client": "~5.2.2",

    "expo-document-picker": "~13.1.6",

    "expo-file-system": "~18.1.10",

    "expo-haptics": "^14.1.4",

    "expo-image-picker": "~16.1.4",

    "expo-linear-gradient": "~14.1.5",

    "expo-mail-composer": "^14.1.4",

    "expo-media-library": "~17.1.7",

    "expo-print": "~14.1.4",

    "expo-sharing": "~13.1.5",

    "expo-speech": "~13.1.7",

    "expo-status-bar": "~2.2.3",

    "expo-system-ui": "^5.0.9",

    "firebase": "^11.9.1",

    "mammoth": "^1.9.1",

    "metro": "^0.82.0",

    "metro-config": "^0.79.1",

    "metro-core": "^0.79.1",

    "metro-resolver": "^0.79.1",

    "metro-source-map": "^0.79.1",

    "metro-transform-worker": "^0.79.1",

    "moti": "^0.30.0",

    "react": "19.0.0",

    "react-native": "0.79.4",

    "react-native-circular-progress-indicator": "^4.4.2",

    "react-native-confetti-cannon": "^1.5.2",

    "react-native-draggable-flatlist": "^4.0.3",

    "react-native-gesture-handler": "~2.24.0",

    "react-native-paper": "^5.14.5",

    "react-native-reanimated": "~3.17.4",

    "react-native-safe-area-context": "5.4.0",

    "react-native-screens": "~4.11.1",

    "react-native-svg": "15.11.2",

    "xlsx": "^0.18.5"

  },

  "devDependencies": {

    "@babel/core": "^7.20.0",

    "@babel/plugin-transform-class-properties": "^7.27.1",

    "@babel/plugin-transform-private-methods": "^7.27.1",

    "@babel/plugin-transform-private-property-in-object": "^7.27.1",

    "metro-react-native-babel-preset": "^0.77.0"

  },

  "private": true

}

// firebaseConfig.js

import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';

import { initializeApp } from "firebase/app";

//@ts-ignore

import { getReactNativePersistence, initializeAuth } from 'firebase/auth';

import { getFirestore } from "firebase/firestore";

import { getStorage } from 'firebase/storage';



const firebaseConfig = {

  apiKey: "",

  authDomain: "",

  projectId: "",

  storageBucket: "",

  messagingSenderId: "",

  appId: "", 

  measurementId: ""

};





const app = initializeApp(firebaseConfig);



export const auth = initializeAuth(app, {

  persistence: getReactNativePersistence(ReactNativeAsyncStorage),

});

export const db = getFirestore(app);

export const storage = getStorage(app);

I have implemented a system in my Kodular app to securely load PDFs from a private Supabase bucket, using the Play Integrity API for verification. I would be grateful for a review of my block logic to ensure it’s correct.

My Process:

1. The app calls WebViewer1.Evaluate JS to execute a function in a local HTML file.
2. The JavaScript gets a Play Integrity token and fetches a signed URL from my Cloudflare Worker.
3. The Worker returns a JSON string (e.g., {"status":"success", ...}).
4. The JavaScript uses window.AppInventor.setWebViewString() to send this JSON string back to the app.
5. I expect to handle this response in the When Web_Viewer1.WebViewStringChange event to parse the JSON and load the PDF.

Is my logic of triggering Evaluate JS and then handling the response in WebViewStringChange correct? I want to confirm if this is the proper way to implement this flow before I move to live testing.

Thank you for your expertise.

I’m experiencing syntax errors when trying to modularize a Google Apps Script HTML project using the standard include() pattern with HtmlService.createHtmlOutputFromFile().getContent(). The issue appears to be related to how the HTML service processes included files as templates rather than raw content.

Problem Description
I have a working Google Apps Script web app that uses modern ES6+ JavaScript syntax (arrow functions, const/let, template literals, destructuring, etc.). The code works perfectly when written directly in the main index.html file, but breaks when I try to extract it to separate modules using the recommended include pattern.

Current Setup
Code.gs:

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate()
    .setTitle("My App")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- This works fine -->
  <?!= include('my-module') ?>
</body>
</html>

The Problem
When I create a separate file my-module containing ES6 syntax:

my-module:

 <script>
// This breaks when included
const myFunction = () => {
  console.log("Arrow function");
};

const myObj = { a: 1, b: 2 };
const { a, b } = myObj;  // Destructuring

const template = `Template literal ${a}`;
</script>

I get syntax errors like:

Uncaught SyntaxError: Failed to execute ‘write’ on ‘Document’: Unexpected token ‘;’

What I’ve Discovered

• ES6 works in main file: The same code works perfectly when written directly in index.html
• ES5 works in modules: Using var, function declarations, and avoiding arrow functions works in included files
• Template processing suspected: The errors suggest the HTML service is processing the included files as Apps Script templates, interpreting {} and => as template syntax
• Recent issue: This wasn’t a problem when the project was smaller and everything was in one file

What I’ve Tried

• Using <?= include('file') ?> (printing scriptlet)
• Using <?!= include('file') ?> (force-printing scriptlet)
• Different file extensions
• Wrapping content in different HTML tags

Questions

• Is this expected behavior? Does HtmlService.createHtmlOutputFromFile().getContent() always process files as templates?

• Is there a workaround to include raw JavaScript files without template processing?

• Why does ES6 work in the main file but not in included files, even though Apps Script supposedly supports ES6 now?

• Are there alternative patterns for code modularization in Google Apps Script HTML projects that don’t have this limitation?

The project has grown large enough that keeping everything in one file breaks my development workflow, but the syntax restrictions make modularization painful.

i want to make something like this one: https://monogrid.com/about
blue glow with mousemove and animated text “MONOGRID”
it’s a cool effect with background animation
Help pls with code

It was too hard for me
I have no any ideas how to do it

let x=1;

while (x!=5){
  x+=1;
  return console.log(x);
  };

do {
 x+=1;
 return console.log(x);
 } while (x<5);

for (y=0; y<5; y+=1){
  return console.log(y);
};

// In the console, outputs only 1

Once I removed return from the while statement the do while statement ran.

Note this is not within a function or method.

I’m using Google Apps Script to generate a bar chart that visualizes year-over-year changes across multiple columns. The script successfully plots the values and correctly sets the X-axis for the “Year.” However, the chart legend is missing the expected labels—it’s showing only the color swatches without any titles (e.g., “Column 1”, “Column 2”, etc.).

The code runs without any errors, and the chart appears otherwise accurate. How can I modify the script to ensure that legend titles are displayed correctly for each data series?

Google Sheets Visual:

JS Code (Apps Script):

function createYoYBarCharts() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const lastRow = sheet.getLastRow();

  const titlesToReplace = ["YoY $ Change", "YoY % Change"];

  // === Remove ONLY the charts with matching titles
  const existingCharts = sheet.getCharts();
  existingCharts.forEach(chart => {
    const options = chart.getOptions();
    const title = options && options.get("title");
    if (titlesToReplace.includes(title)) {
      sheet.removeChart(chart);
    }
  });

  // === Helper to build chart using full rectangular range
  function buildChart(title, fullRangeA1, anchorCell) {
    const chart = sheet.newChart()
      .asColumnChart()
      .setTitle(title)
      .addRange(sheet.getRange(fullRangeA1)) // full rectangular block
      .setPosition(anchorCell.getRow(), anchorCell.getColumn(), 0, 0)
      .setOption("legend", { position: "top" })
      .setOption("hAxis", { title: "Year" })
      .setOption("vAxis", { title: title.includes('%') ? 'Change (%)' : 'Change ($)' })
      .setOption("isStacked", true)
      .setOption("useFirstRowAsHeaders", true)
      .setOption("useFirstColumnAsDomain", true)
      .build();

    sheet.insertChart(chart);
  }

  // === Calculate number of data rows (non-empty years in J7:J)
  const dataStartRow = 7;
  const dataHeaderRow = 6;
  const yearCol = sheet.getRange("J7:J").getValues();
  const numDataRows = yearCol.filter(row => row[0] !== "").length;
  const dataEndRow = dataStartRow + numDataRows - 1;

  // === 1. YoY $ Change Chart
  const dollarRange = `J${dataHeaderRow}:O${dataEndRow}`;
  const anchor1 = sheet.getRange(`J${dataEndRow + 2}`);
  buildChart("YoY $ Change", dollarRange, anchor1);

  // === 2. YoY % Change Chart
  const percentRange = `Q${dataHeaderRow}:V${dataEndRow}`;
  const anchor2 = sheet.getRange(`Q${dataEndRow + 2}`);
  buildChart("YoY % Change", percentRange, anchor2);
}

I know I’m missing something with the rotation of the inside cover when the book is “clicked on” to open, but I am not seeing it.

The expectation is that when the book is clicked on, the following happens:

1. The cover of the book mirrors across the Y-axis
2. The first page is shown on the right with an border that resembles the background of the back cover.
3. The inside cover is shown as a solid cover that matches the background color of the front cover.
4. The pages then flip across the Y-axis

All in all I am trying to get a 3D Animation of a book opening when it is clicked on by the user.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opening Book with GSAP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f4f8;
            overflow: hidden;
        }

        .font-serif {
            font-family: 'Playfair Display', serif;
        }

        /* The scene is the 3D space for the book */
        .scene {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            perspective: 2500px;
        }
        
        /* The wrapper handles positioning and can be clicked */
        .book-wrapper {
             position: relative;
             cursor: pointer;
        }

        /* The book container holds all the 3D pieces */
        .book {
            width: 350px;
            height: 500px;
            position: relative;
            transform-style: preserve-3d;
        }
        
        /* The front cover, which will flip open */
        .front-cover {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform-origin: left center; 
            transform-style: preserve-3d;
            z-index: 10;
        }
        
        .cover-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 0.5rem;
            background-color: #4a3a32;
        }

        .cover-face-front {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        /* The inside of the cover matches the outside */
        .cover-face-back {
            background-color: #4a3a32; 
            transform: rotateY(-180deg);
        }

        /* Crease styles */
        .cover-face-front::before,
        .cover-face-front::after {
            content: '';
            position: absolute;
            top: 0;
            height: 100%;
            width: 2px;
            background-color: rgba(0, 0, 0, 0.2);
            box-shadow: 1px 0 5px rgba(0,0,0,0.35);
        }

        .cover-face-front::before {
            left: 31px;
        }
        
        .cover-face-front::after {
            left: 35px;
        }
        
        /* NEW: This is the actual back cover board */
        .back-cover {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #4a3a32;
            border-radius: 0.5rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            z-index: 1;
        }

        /* The static page block that sits on top of the back cover */
        .pages {
            position: absolute;
            width: calc(100% - 1rem);
            height: calc(100% - 1rem);
            top: 0.5rem;
            left: 0.5rem;
            background-color: #f3f0e9;
            border-radius: 0.25rem;
            z-index: 5;
        }
        
        /* Styles for the flipping pages */
        .flipping-page {
            position: absolute;
            width: calc(100% - 1rem);
            height: calc(100% - 1rem);
            top: 0.5rem;
            left: 0.5rem;
            background-color: #fdfaf2;
            transform-origin: left center;
            border-radius: 0.25rem;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1) inset;
            border-right: 1px solid #e0d9cd;
            z-index: 6;
        }

        /* Decorative elements */
        .cover-design {
            border: 4px double #d4af37;
            width: 100%;
            height: 100%;
            border-radius: 0.25rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1rem;
            color: #d4af37;
        }
        .cover-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.75rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
        }
        .cover-author {
            margin-top: 1.5rem;
            font-size: 1.125rem;
            font-style: italic;
            border-top: 1px solid rgba(212, 175, 55, 0.5);
            padding-top: 1.5rem;
        }

    </style>
</head>
<body>

    <div class="scene">
        <!-- The new wrapper handles positioning -->
        <div id="book-wrapper" class="book-wrapper">
            <!-- The book itself only handles 3D animations -->
            <div id="book" class="book">
                <!-- NEW: Added a dedicated back cover element -->
                <div class="back-cover"></div>
                <div class="pages"></div>
                <div class="flipping-page" id="page-3"></div>
                <div class="flipping-page" id="page-2"></div>
                <div class="flipping-page" id="page-1"></div>
                <div class="front-cover">
                    <div class="cover-face cover-face-front">
                         <div class="cover-design">
                            <h1 class="cover-title">About the Author</h1>
                            <p class="cover-author"></p>
                        </div>
                    </div>
                    <div class="cover-face cover-face-back"></div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Select the elements to animate
        const bookWrapper = document.getElementById('book-wrapper');
        const frontCover = document.querySelector('.front-cover');
        const flippingPages = gsap.utils.toArray('.flipping-page');

        // Set the default transform origin for the cover and pages
        gsap.set([frontCover, flippingPages], { transformOrigin: "left center" });

        // Create a GSAP timeline, paused by default
        const timeline = gsap.timeline({ paused: true });

        // Add animations to the timeline
        timeline
            // 1. Move the entire book wrapper to the right to center the spine
            .to(bookWrapper, {
                x: 175,
                duration: 1.2,
                ease: "power2.inOut"
            })
            // 2. Flip the cover open at the same time
            .to(frontCover, {
                rotationY: -180,
                duration: 1.2,
                ease: "power2.inOut"
            }, "<") // "<" starts at the same time as the previous animation
            // 3. Flip the pages with a stagger effect, starting slightly after the cover begins to open
            .to(flippingPages, {
                rotationY: -180,
                duration: 0.8,
                ease: "power1.inOut",
                stagger: 0.1
            }, "<0.2"); // "<0.2" starts 0.2s after the previous animation's start

        // Event listener to control the timeline
        bookWrapper.addEventListener('click', () => {
            if (timeline.reversed() || timeline.progress() === 0) {
                timeline.play();
            } else {
                timeline.reverse();
            }
        });
    </script>

</body>
</html>

Images: Before and after, respectively.

I am working on Angular 16 and have want to push event related data to backend system. For example when user clicks on button then will pass some information about the event.

I have two pages FirstPage and SecondPage and using Angular router to navigate between them. When FirstPage rendered it register all the events using javascript. Now user clicks on given link and land to SecondPage, URL changed to FirstPage to SecondPage.

But if user clicks the back button of browser, then initially I was expecting the document.load or window.load event will fire but it’s not. Now, If I am trying to get the element on the popstate event it giving me null. How can I get the element?

window.addEventListener("popstate", (event) => registerEvents(event));

window.addEventListener("load", (event) => registerEvents(event));

function registerEvents(e){
    console.log(e);
    let substanceBtn = document.getElementById("substance");
    console.log(substanceBtn)
    if(null != substanceBtn){
        console.log('1');
        substanceBtn.addEventListener("click", function(e){
            console.log(e.target);
        });
    }
}

First Page:
<nav class="navbar navbar-expand-lg navbar-light bg-light bg-primary" style="background-color: #e3f2fd !important;">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#" id="test" routerLink="/secondPage">Second Page</a>
            </li>
        </ul>
    </div>
</nav>
<router-outlet></router-outlet>

Second Page:

<div><h1>Substances</h1></div>

<div class="row">
    <div class="col-sm-1">Second Page</div>
</div>