Blancer.com Tutorials and projects

I’m converting a large set of JavaScript files into Typescript and the result will run in the browser. I few years ago I got this all working with require.js and the module format AMD but now I’m reading that’s deprecated. What is the current thinking about how to do this? StackOverflow recommended some other posts which were many years old. Bonus points if I can obfuscate the JavaScript file(s).

Thanks, Dennis

Uses:

python = “^3.12.7”
selenium = “^4.30.0”

Initialize variable “driver”:

from time import sleep
from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.support import expected_conditions as ec
from selenium.webdriver.support.select import Select
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By


driver = webdriver.Chrome()
driver.get('https://www.instagram.com/')
sleep(3)

#   *   *   *
#   Sign in code here
#   *   *   *

#  chose user account for example:
driver.get('https://www.instagram.com/geeks_for_geeks/followers/')
sleep(3)

driver.find_element(By.PARTIAL_LINK_TEXT, 'followers').click()
print('4')

#  set followers pop-up list to new variable (i checked three XPATH based on the page code source, see img below):
#  pop_up_window = driver.find_element(By.XPATH, '/html/body/div[4]/div[2]/div/div/div[1]/div/div[2]/div/div/div/div/div[2]/div/div/div[3]')
#  pop_up_window = driver.find_element(By.XPATH, '/html/body/div[4]/div[2]/div/div/div[1]/div/div[2]/div/div/div/div/div[2]/div/div/div[3]/div[1]')
pop_up_window = driver.find_element(By.XPATH, '/html/body/div[4]/div[2]/div/div/div[1]/div/div[2]/div/div/div/div/div[2]/div/div/div[3]/div[1]/div')

then i uses few difference variants for try to scroll down:

1st. – uses ActionChains from selenium.webdriver.common.action_chains:

num_chains = 10
for _ in range(num_chains):
    print('=========== Chains Start =================')
    ActionChains(driver).send_keys(Keys.END).perform()

2nd. – uses javascript:

v2.1

while True:
    driver.execute_script("arguments[0].scrollTop = arguments[0].scrollHeight", pop_up_window)
    sleep(2)

v2.2

while True:
    driver.execute_script('arguments[0].scrollTop = arguments[0].scrollTop + arguments[0].offsetHeight;', pop_up_window)
    sleep(2)

v2.3

num_chains = 10
followers_step = 10
for _ in range(num_chains):
   driver.execute_script("arguments[0].scrollTop = arguments[1]", pop_up_window, followers_step)
   followers_step += followers_step
   sleep(3)

finally i get followers pop-up window by which i should make scroll down but the slider for scrolling to the right doesn’t appear and the user-list does not scroll, on the output i always get the same result that was immediately opening at followers pop-up list (noticed that when the scrolling process starts – the closing button is highlighted always):

and I always get the same result without scrolling:

p.s.: answers: this and this – already discussed at stackoverflow did not help

I have an SVG filter file in /filters/filter.svg that contains a SVG filter with ID filter-id.

I apply this filter in an HTML5 canvas by using context.filter = “url(/filters/filter.svg#filter-id)”; and it works.

However, the filter gets loaded every time it is used, which happens a lot since I have to constantly animate many individually filtered images in the canvas.

What is the best way, using Javascript only, to cache the filter file once, then retrieve the filter from cache every time it is used, instead of having it loaded again?

It would be preferable that the filter not be embedded or even declared in the HTML file that loads the canvas, since there are actually many filters stored in the filters folder and used simultaneously, to keep the whole process cleaner and more dynamic.

Some basic sample code showing how to cache and retrieve would be highly appreciated.

I have a website displaying live data using uplot, because of its low resource usage even with many points per second being added. The issue is that I want the newest datapoint to have a big red point on it so it ‘traces’ the line. My opts section for the u plot looks like this:

const opts = {
    title: "Live-Data",
    width: window.innerWidth * 0.65,
    height: window.innerHeight * 0.8,
    cursor: {
        drag: { setScale: false },
        sync: { key: 'shift' },
    },
    scales: {
        x: { time: true },
        y: { auto: true}  
    },
    series: [
        {},  
        {
            label: "Sensor 1 (mm)",
            stroke: "blue",
            value: (u, v) => v == null ? null : v.toFixed(2) + " mm"
        },
        {
            label: "Sensor 2 (mm)",
            stroke: "red",
            value: (u, v) => v == null ? null : v.toFixed(2) + " mm"
        }
    ],
    axes: [
        {
            scale: "x",
            grid: { show: true },
            values: (u, vals) => vals.map(v => new Date(v).toLocaleTimeString())
        },
        {
            scale: 'y',
            values: (u, vals, space) => vals.map(v => v.toFixed(2) + " mm"),
            grid: { show: true }
        }
    ]
};

But I haven’t found a way to add a point that also disappears (I guess that is the logical for a tracing point) when a new data point is added.

Thanks for any help

I am trying to create a blackjack game. This is the shuffling and dealing part of the game. The deck array contains all the 52 cards of the deck (suits for the cards will be added).
This array is passed into the shuffle function which uses the Fisher Yates shuffle algorithm.

let deck = [{face:'2',value:2},{face:'3',value:3},{face:'4',value:4},{face:'5',value:5},{face:'6',value:6},{face:'7',value:7},{face:'8',value:8},{face:'9',value:9},{face:'10',value:10},{face:'J',value:10},{face:'Q',value:10},{face:'K',value:10},{face:'A',value:10,value2:11,value3:1},{face:'2',value:2},{face:'3',value:3},{face:'4',value:4},{face:'5',value:5},{face:'6',value:6},{face:'7',value:7},{face:'8',value:8},{face:'9',value:9},{face:'10',value:10},{face:'J',value:10},{face:'Q',value:10},{face:'K',value:10},{face:'A',value:10,value2:11,value3:1},{face:'2',value:2},{face:'3',value:3},{face:'4',value:4},{face:'5',value:5},{face:'6',value:6},{face:'7',value:7},{face:'8',value:8},{face:'9',value:9},{face:'10',value:10},{face:'J',value:10},{face:'Q',value:10},{face:'K',value:10},{face:'A',value:10,value2:11,value3:1},{face:'2',value:2},{face:'3',value:3},{face:'4',value:4},{face:'5',value:5},{face:'6',value:6},{face:'7',value:7},{face:'8',value:8},{face:'9',value:9},{face:'10',value:10},{face:'J',value:10},{face:'Q',value:10},{face:'K',value:10},{face:'A',value:10,value2:11,value3:1}]
let userHand = []
let dealerHand = []
function shuffle(array) {
    let currentIndex = array.length;
  
    // While there remain elements to shuffle...
    while (currentIndex != 0) {
  
      // Pick a remaining element...
      let randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
  
      // And swap it with the current element.
      [array[currentIndex], array[randomIndex]] = [
        array[randomIndex], array[currentIndex]];
    }
  }
  
shuffle(deck)
console.log(deck)

function deal(){
    userHand.push(deck.shift()); // Removes and gives first card
    dealerHand.push(deck.shift()); // Removes and gives second card
    userHand.push(deck.shift()); // Removes and gives third card
    dealerHand.push(deck.shift()); // Removes and gives fourth card
    console.log(userHand, dealerHand)
    console.log(deck)
}
deal()

The deal function is where I’m having problems. The goal is for the card at index[0] of the shuffled deck to be taken out and added to the userHand array. Then the next card at index [0] to be added to dealerHand array, until user and dealer have 2 cards each.

Instead, this is not happening. Instead of deck.shift() removing the index[0] obj from the deck, it removes an object at a random index and adds it to the userHand/dealerHand arrays.

I have this math application that’s supposed to help me improve in my understanding of functions and their graphs but unfortunately I know but too little programming skills to help me get the job done.

I can pretty much get the screen and the grid with X and Y axis to display but when I touch my phone through Expo Go (I’m on VS Code) nothing shows (not a single point or curve).

I’ve tried ChatGPT, Copilot and bolt.new but nothing worked so far.

import React, { useState, useRef, useEffect } from 'react';
import { View, Text, StyleSheet, Dimensions, PanResponder, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Line, Circle } from 'react-native-svg';
import Animated, { useAnimatedStyle, withSpring, useSharedValue } from 'react-native-reanimated';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

// Liste des fonctions mathématiques disponibles
const FUNCTIONS = [
  { name: 'f(x) = x', formula: (x: number) => x },
  { name: 'f(x) = -x', formula: (x: number) => -x },
  { name: 'f(x) = x²', formula: (x: number) => x * x },
  { name: 'f(x) = x³', formula: (x: number) => x * x * x },
  { name: 'f(x) = exp(x)', formula: (x: number) => Math.exp(x) },
  { name: 'f(x) = 1/x', formula: (x: number) => (x !== 0 ? 1 / x : NaN) }, // Avoid division by zero
  { name: 'f(x) = ln(x)', formula: (x: number) => (x > 0 ? Math.log(x) : NaN) }, // Avoid log of non-positive numbers
];

// Dimensions de l'écran
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

// Paramètres pour le quadrillage
const GRID_SIZE = 20; // Nombre de lignes/colonnes dans le quadrillage
const SCALE = 40; // Échelle pour convertir les coordonnées

export default function PracticeScreen() {
  // État pour les fonctions mélangées
  const [shuffledFunctions, setShuffledFunctions] = useState(FUNCTIONS);

  // Index de la fonction mathématique actuellement sélectionnée
  const [currentFunction, setCurrentFunction] = useState(0);

  // Points tracés par l'utilisateur
  const [points, setPoints] = useState<{ x: number; y: number }[]>([]);

  // Indique si l'utilisateur est en train de dessiner
  const [drawing, setDrawing] = useState(false);

  // Temps restant pour le round (en secondes)
  const [timeLeft, setTimeLeft] = useState(120); // 2 minutes

  // Score de l'utilisateur (utilise Reanimated pour les animations)
  const score = useSharedValue(0);

  const [showCorrectCurve, setShowCorrectCurve] = useState(false);

  // Timer pour gérer les rounds
  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          clearInterval(interval); // Arrête le timer quand le temps est écoulé
          endRound(); // Termine le round
          return 0;
        }
        return prev - 1; // Diminue le temps restant
      });
    }, 1000); // Décrémente toutes les secondes

    return () => clearInterval(interval); // Nettoie le timer quand le composant est démonté
  }, []);

  // Fonction pour terminer un round
  const endRound = () => {
    setShowCorrectCurve(true); // Affiche la courbe correcte
    Alert.alert('Round terminé', `Votre score : ${Math.round(score.value)}`);
    setPoints([]); // Réinitialise les points
    setCurrentFunction((prev) => (prev + 1) % shuffledFunctions.length); // Passe à la fonction suivante
    setTimeLeft(120); // Réinitialise le timer
  };

  // Style animé pour le score (agrandit le texte si le score est élevé)
  const scoreStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: withSpring(score.value > 80 ? 1.2 : 1) }],
    };
  });

  // Gestion des interactions tactiles (PanResponder)
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true, // Active le PanResponder au début du toucher
      onPanResponderGrant: () => {
        setDrawing(true); // Commence le dessin
        setPoints([]); // Réinitialise les points pour un nouveau tracé
        setShowCorrectCurve(false); // Cache la courbe correcte
      },
      onPanResponderMove: (_, gestureState) => {
        if (drawing) {
          const { moveX, moveY } = gestureState;
          const canvasX = moveX - SCREEN_WIDTH / 2; // Décalage pour centrer sur l'axe X
          const canvasY = SCREEN_HEIGHT / 2 - moveY; // Décalage pour centrer sur l'axe Y

          const newPoint = { x: canvasX / SCALE, y: canvasY / SCALE }; // Convertit en coordonnées du graphe
          setPoints((prev) => [...prev, newPoint]);
        }
      },
      onPanResponderRelease: () => {
        setDrawing(false); // Arrête le dessin
        if (points.length >= 5) {
          setShowCorrectCurve(true); // Affiche la courbe correcte
          calculateScore(); // Calcule le score après le tracé
        }
      },
    })
  ).current;

  // Fonction pour calculer le score
  const calculateScore = () => {
    if (points.length === 0) {
      score.value = 0; // No points, score is 0
      return;
    }
  
    const actualPoints = points.map((p) => ({
      x: p.x,
      y: shuffledFunctions[currentFunction].formula(p.x),
    }));
  
    const distances = points.map((p, i) => {
      const actualY = actualPoints[i]?.y; // Ensure the point exists
      if (actualY === undefined || isNaN(actualY)) return Infinity; // Avoid errors
      return Math.abs(p.y - actualY);
    });
  
    const avgDistance = distances.reduce((a, b) => a + b, 0) / distances.length;
    const newScore = Math.max(0, 100 - avgDistance * 20);
    score.value = newScore;
  };

  // Fonction pour dessiner le quadrillage
  const renderGrid = () => {
    const lines = [];

    // Lignes verticales
    for (let x = -GRID_SIZE; x <= GRID_SIZE; x++) {
      lines.push(
        <Line
          key={`v-${x}`}
          x1={x * SCALE + SCREEN_WIDTH / 2}
          y1={0}
          x2={x * SCALE + SCREEN_WIDTH / 2}
          y2={SCREEN_HEIGHT}
          stroke="#e0e0e0"
          strokeWidth="1"
        />
      );
    }

    // Lignes horizontales
    for (let y = -GRID_SIZE; y <= GRID_SIZE; y++) {
      lines.push(
        <Line
          key={`h-${y}`}
          x1={0}
          y1={y * SCALE + SCREEN_HEIGHT / 2}
          x2={SCREEN_WIDTH}
          y2={y * SCALE + SCREEN_HEIGHT / 2}
          stroke="#e0e0e0"
          strokeWidth="1"
        />
      );
    }

    // Axe X
    lines.push(
      <Line
        key="x-axis"
        x1={0}
        y1={SCREEN_HEIGHT / 2}
        x2={SCREEN_WIDTH}
        y2={SCREEN_HEIGHT / 2}
        stroke="#ff0000"
        strokeWidth="2"
      />
    );

    // Axe Y
    lines.push(
      <Line
        key="y-axis"
        x1={SCREEN_WIDTH / 2}
        y1={0}
        x2={SCREEN_WIDTH / 2}
        y2={SCREEN_HEIGHT}
        stroke="#ff0000"
        strokeWidth="2"
      />
    );

    return lines;
  };

  // Fonction pour afficher les points tracés par l'utilisateur
  const renderPoints = () => {
    return points.map((point, index) => (
      <Circle
        key={index}
        cx={point.x * SCALE + SCREEN_WIDTH / 2} // Convert to screen coordinates
        cy={SCREEN_HEIGHT / 2 - point.y * SCALE} // Convert to screen coordinates
        r="4" // Point size
        fill="#6366f1" // Point color
      />
    ));
  };

  const renderFunctionCurve = () => {
    const step = 0.1; // Step size for precision
    const path: { x: number; y: number }[] = [];
  
    for (let x = -GRID_SIZE; x <= GRID_SIZE; x += step) {
      const canvasX = x * SCALE + SCREEN_WIDTH / 2;
      const canvasY = SCREEN_HEIGHT / 2 - shuffledFunctions[currentFunction].formula(x) * SCALE;
  
      path.push({ x: canvasX, y: canvasY });
    }
  
    return path.map((point, index) => {
      if (index === 0) return null; // Skip the first point
      const prevPoint = path[index - 1];
      return (
        <Line
          key={`curve-${index}`}
          x1={prevPoint.x}
          y1={prevPoint.y}
          x2={point.x}
          y2={point.y}
          stroke="#10b981" // Curve color
          strokeWidth="2"
        />
      );
    });
  };

  console.log('Points:', points);

  return (
    <GestureHandlerRootView style={styles.container}>
      <SafeAreaView style={styles.container}>
        {/* En-tête avec le nom de la fonction, le score et le timer */}
        <View style={styles.header}>
          <Text style={styles.functionText}>
            {shuffledFunctions[currentFunction]?.name || ''}
          </Text>
          <Animated.Text style={[styles.score, scoreStyle]}>
            Score: {Math.round(score.value)}
          </Animated.Text>
          <Text style={styles.timer}>Temps restant : {timeLeft}s</Text>
        </View>

        {/* Zone de dessin */}
        <View style={styles.canvas} {...panResponder.panHandlers}>
          <Svg height="100%" width="100%">
            {renderGrid()} {/* Quadrillage */}
            {renderPoints()} {/* Points tracés par l'utilisateur */}
            {showCorrectCurve && renderFunctionCurve()} {/* Courbe correcte */}
          </Svg>
        </View>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

// Styles pour les composants
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  header: {
    padding: 20,
    alignItems: 'center',
  },
  functionText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000',
    marginBottom: 10,
  },
  score: {
    fontSize: 20,
    color: '#6366f1',
    fontWeight: 'bold',
  },
  timer: {
    fontSize: 18,
    color: '#ff0000',
    marginTop: 10,
  },
  canvas: {
    flex: 1,
    backgroundColor: '#ffffff',
    borderRadius: 20,
    margin: 20,
    overflow: 'hidden',
  },
});

Using a piece of code from this OL example:

map.on('singleclick', function (evt) {
  document.getElementById('info').innerHTML = '';
  const viewResolution = /** @type {number} */ (view.getResolution());
  const url = wmsSource.getFeatureInfoUrl(
    evt.coordinate,
    viewResolution,
    'EPSG:3857',
    {'INFO_FORMAT': 'text/html'},
  );
  if (url) {
    fetch(url)
      .then((response) => response.text())
      .then((html) => {
        document.getElementById('info').innerHTML = html;
      });
  }
});

map.on('pointermove', function (evt) {
  if (evt.dragging) {
    return;
  }
  const data = wmsLayer.getData(evt.pixel);
  const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

I am trying to get info from a single WMS layer (also multiple layers) on hover instead of using ‘singleclick’. Here it is the current code for this:

let layers;
let pixel;

map.on('pointermove', function (evt) {
  if (evt.dragging) {
    return;
  }
  //const data = ?????.getData(evt.pixel);
  //const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
  //map.getTargetElement().style.cursor = hit ? 'pointer' : '';

  let pgPattern = "_pg";
  const layers = map.getAllLayers().filter(function (layer) {
    return layer.get('name');
  });
  const viewResolution = (view.getResolution());
  let url;
  let mygeojson;
  layers.forEach(function (layer, i, layers) {
    if (layer.getVisible() && layer.get('name').match(pgPattern)) {
      url = layer.getSource().getFeatureInfoUrl(
        evt.coordinate,
        viewResolution,
        'EPSG:4326',
        {'INFO_FORMAT': 'geojson'},
      );
    }
    if (url) {
      fetch(url)
      .then((response) => response.json())
      .then((mygeojson) => {
        if (mygeojson && mygeojson.features.length > 0) {
          const pixel = map.getEventPixel(evt.originalEvent);
          info.style.left = pixel[0] + 'px';
          info.style.top = pixel[1] + 'px';
          info.style.visibility = 'visible';
          info.innerText =
            "id_estacion: "+mygeojson.features[0].properties.id_estacion +"n"+
            "muestreo: "+mygeojson.features[0].properties.muestreo +"n"+
            "descripcion_abordo: "+mygeojson.features[0].properties.descripcion_abordo;
        }
      })
    }
  })
});

map.getTargetElement().addEventListener('pointerleave', function () {
  info.style.visibility = 'hidden';
});

I am stuck about how to solve the erratic behavior of the pointer after info is retrieved from the WMS layer (ie. hover on features of WMS layer).

How could I adapt the code to solve this? Here an image of the problem:

I’m currently developing a project utilizing React Router v7 framework where I need to implement protected routes. While I’ve successfully implemented the protection mechanism, I’m encountering an issue where the protected page’s layout briefly flashes before the redirect occurs. I want to prevent this behavior by ensuring the redirect happens before any page rendering takes place. Below are my route.jsx and protected.jsx implementations:

import { Outlet, useNavigate } from "react-router";
import { useDispatch } from "react-redux";
import { getTokenFromCookie } from "./tokenServices";
import { setOpenAuthModal } from "../redux/slices/authSlice";

const ProtectedRoute = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const token = getTokenFromCookie();

  useEffect(() => {
    if (!token) {
      dispatch(setOpenAuthModal());
      navigate("/");
    }
  }, [token, dispatch, navigate]);

  return token ? <Outlet /> : null;
};

export default ProtectedRoute;

import { index, layout, prefix, route } from "@react-router/dev/routes";

export default [
  layout("./layouts/AppLayout.jsx", [
    index("routes/home/route.jsx"),
    route("/support", "routes/support/route.jsx"),
    route("/rooms/:villaId", "routes/room/route.jsx"),
    route("/archive/:cityName", "routes/archive-city/route.jsx"),

    layout("./services/auth/ProtectedRoute.jsx", [
      route("/profile", "routes/profile/dashboard/route.jsx"),
      route("/wallet", "routes/wallet/route.jsx"),
      route("/invite-friends", "routes/invite-friends/route.jsx"),
      route("/trips", "routes/trips/route.jsx"),
      ...prefix("/comments", [
        index("routes/comments/route.jsx"),
        route("/register/:vilaId", "routes/profile/registerComment/route.jsx"),
      ]),

      ...prefix("/host", [
        route("/profile", "routes/host/dashboard/route.jsx"),
        ...prefix("/comments", [
          index("routes/host/comments/route.jsx"),
          route(
            "/:commentId",
            "routes/host/comments/residenceHostComments/route.jsx",
          ),
        ]),
        route("/list-of-resisdence", "routes/host/listOfResisdence/route.jsx"),
        route("/statistics", "routes/host/statistics/route.jsx"),

        // layout("./services/auth/ProtectedReservationHost.jsx", [
        layout("./layouts/hostRegistration/HostRegistrationLayout.jsx", [
          ...prefix("/residence-registration", [
            route(
              "/specifications",
              "routes/host/residence-registration/specifications/create/route.jsx",
            ),
            route(
              "edit/specifications/:registrationId",
              "routes/host/residence-registration/specifications/edit/route.jsx",
            ),
            route(
              "edit/rooms/:registrationId",
              "routes/host/residence-registration/rooms/route.jsx",
            ),
            route(
              "edit/images/:registrationId",
              "routes/host/residence-registration/images/route.jsx",
            ),
            route(
              "edit/facilities/:registrationId",
              "routes/host/residence-registration/facilities/route.jsx",
            ),
            route(
              "edit/neighborhood/:registrationId",
              "routes/host/residence-registration/neighborhood/route.jsx",
            ),
            route(
              "edit/rules/:registrationId",
              "routes/host/residence-registration/rules/route.jsx",
            ),
            route(
              "edit/prices/:registrationId",
              "routes/host/residence-registration/prices/route.jsx",
            ),
            route(
              "edit/documents/:registrationId",
              "routes/host/residence-registration/documents/route.jsx",
            ),
          ]),
        ]),
        // ]),
      ]),

      layout("routes/reservation/route.jsx", [
        route(
          "reservation/checkout/:reserveId",
          "routes/reservation/check/route.jsx",
        ),
        route(
          "reservation/payment/:reserveId",
          "routes/reservation/payment/route.jsx",
        ),
        route(
          "reservation/delivery/:reserveId",
          "routes/reservation/delivery/route.jsx",
        ),
      ]),
    ]),
  ]),
  // layout("./services/auth/ProtectedRoute.jsx", [
  //   route("/invoice/reserve/:reserveId", "routes/invoice-reserve/route.jsx"), // ✅ Invoice route here
  // ]),
];

I have a txt file that is on my PC, that txt file gets updated every time a new song plays in my media player. I need a way to sync this txt file somewhere where I can access it over the internet from a website using javascript, but it needs to remain synced to the one on my PC.

Is there any service that can allow me to sync the txt file and have a url that can publicly read the raw text from the file?

I’d like to take the synced text, convert it to a string, and update that every 30 seconds or so on my own website.

I have a large number of SVG files that represent frames of a bar chart race animation. I’ve uploaded a sample of these files here:
https://easyupload.io/69jzns

I want to merge them into a single animated SVG file and set a specific FPS (frames per second) for the animation. Each SVG file should act as one frame in the final animated SVG.

I’ve tried the following tools but couldn’t achieve the desired result:

• https://github.com/astraw/svg_stack
• https://github.com/btel/svg_utils
• https://github.com/DannyBen/victor
• http://www.imagemagick.org/Usage/montage/

What tool or method can accomplish this? Any help would be appreciated!

I’m trying to add a some code that will show the correct answer if the incorrect one have been selected, is this possible if so can someone please show / guide me on how to do this.

as you can see from the attached photo when a incorrect answer is selected you are not able to view the correct one you just move on, how could i change this to either automatically show the correct answer or add a “check answer button”

my code is;

const questions = [
    {
        question: "What is a checkout score for 156?",
        answers: [
            {text: "T19, T19, D20", correct: false},
            {text: "T20, T20, D20", correct: false},
            {text: "T20, T14, D16", correct: false},
            {text: "T20, T20, D18", correct: true}
        ]
    },
    {
        question: "How many world titles does Michael van Gerwen have?",
        answers: [
            { text: "5", correct: false },
            { text: "1", correct: false },
            { text: "0", correct: false },
            { text: "3", correct: true }
        ]
    },
    {
        question: "What is the highest possible checkout in darts?",
        answers: [
            { text: "180", correct: false },
            { text: "170", correct: true },
            { text: "160", correct: false },
            { text: "150", correct: false }
        ]
    },
    {
        question: "Who won the PDC World Championship on their debut appearance in 2018?",
        answers: [
            { text: "Nathan Aspinall", correct: false },
            { text: "Glen Durrant", correct: false },
            { text: "Rob Cross", correct: true },
            { text: "Dimitri Van Den Bergh", correct: false }
        ]
    },
    {
        question: "Which player is nicknamed Bully Boy?",
        answers: [
            { text: "Nathan Aspinall", correct: false },
            { text: "Joe Cullen", correct: false },
            { text: "Jonny Clayton", correct: false },
            { text: "Michael Smith", correct: true }
        ]
    },
    {
        question: "Which player is known for his intense stare at the dartboard and aggressive celebrations?",
        answers: [
            { text: "Adrian Lewis", correct: false },
            { text: "Gerwyn Price", correct: true },
            { text: "Jonny Clayton", correct: false },
            { text: "Danny Noppert", correct: false }
        ]
    },
    {
    question: "What is the standard height from the floor to the bullseye in professional darts?",
    answers: [
        { text: "5 feet 4 inches", correct: false },
        { text: "6 feet", correct: false },
        { text: "4 feet 10 inches", correct: false },
        { text: "5 feet 8 inches", correct: true }
    ]
},
{
question: "In professional darts, what is the “Madhouse”?",
answers: [
    { text: "Missing three darts at double 1", correct: false },
    { text: "Needing double 1 to win", correct: true },
    { text: "Scoring three consecutive busts", correct: false },
    { text: "Hitting only single 5s in a turn", correct: false }
    ]
},
{
    question: "What is the minimum number of darts needed to win a game of 501?",
    answers: [
        { text: "12", correct: false },
        { text: "6", correct: false },
        { text: "15", correct: false },
        { text: "9", correct: true }
        ]
    },
    {
        question: "Phil Taylor won a record 16 World Championships. In which year did he win his first title?",
        answers: [
            { text: "1990", correct: true },
            { text: "1995", correct: false },
            { text: "1992", correct: false },
            { text: "1998", correct: false }
            ]
        },

]

const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");

let currentQuestionIndex = 0;
let score = 0;


/**
 * Resets the quiz by setting the question index and score to their original values (0). 
 * Hides the "Next" button and prepares it for the next question, and then displays the first question. 
 * This function ensures the quiz starts fresh and is ready for the user.
 */

function startQuiz() {
    currentQuestionIndex = 0; // Resets the question index to start from the first question.
    score = 0; // Resets the score to 0 for a new quiz session.
    nextButton.innerHTML = "Next"; // Sets the button text to "Next".
    nextButton.style.display = "none"; // Hides the button until an answer is selected.
    nextButton.onclick = nextQuestion; // Sets the button to call the nextQuestion function when clicked.
    showQuestion(); // Calls the showQuestion function to display the first question.
}

/**
 * Displays the current question and its answers, setting up the UI for user interaction.
 * 1. Clears previous question and answers using `resetState()`.
 * 2. Retrieves and displays the current question with its number.
 * 3. Loops through each answer, creating a button for each:
    - Sets button text, adds styling, and appends it to the container.
 * 4. If the answer is correct, adds a `data.correct` attribute.
 * 5. Adds a click event listener to each button to trigger `selectAnswer`.
 */

function showQuestion() {
    resetState(); // Clears the previous question and answers
    let currentQuestion = questions[currentQuestionIndex]; // Gets the current question
    let questionNo = currentQuestionIndex + 1; // Sets the question number
    questionElement.innerHTML = questionNo + ". " + currentQuestion.question; // Displays the current question number and text
    
    currentQuestion.answers.forEach(answer => { // Loops through answers and creates a button
        const button = document.createElement("button"); // Creates a new button element
        button.innerHTML = answer.text; // Sets the button text to the answer text
        button.classList.add("btn"); // Adds the "btn" class to the button for styling
        answerButtons.appendChild(button); // Appends button to the answer container
 
        if (answer.correct) { // If the answer is correct, set a data attribute
            button.dataset.correct = answer.correct;
        }

        button.addEventListener("click", selectAnswer); // Adds an event listener to the button to call selectAnswer when clicked
    });
}

/**
 * Resets the screen by hiding the "Next" button and clearing the answer buttons.
 * 1. Hides the "Next" button so it’s not visible.
 * 2. Removes all the answer buttons from the screen.
 */

function resetState() {
    nextButton.style.display = "none"; // Hides the "Next" button
    while (answerButtons.firstChild) {
        answerButtons.removeChild(answerButtons.firstChild); // Removes all child elements from the answer container
    }
}

/**
 * Runs when the user picks an answer.
 * 1. Checks if the answer is right.
 * 2. Adds a "correct" or "incorrect" class to the button.
 * 3. Updates the score if the answer is right.
 * 4. Shows the "Next" button to move to the next question.
 */

function selectAnswer(e) { 
    const selectedBtn = e.target;
    const isCorrect = selectedBtn.dataset.correct === "true"; // Checks if the selected answer is correct

    if (isCorrect) {
        selectedBtn.classList.add("correct"); // Adds "correct" class to the button for styling
        score++; // Increases the score if the answer is correct
    } else {
        selectedBtn.classList.add("incorrect"); // Adds "incorrect" class to the button for styling
    }
    
         // Disable all buttons after an answer is selected
    const allButtons = answerButtons.querySelectorAll("button");
    allButtons.forEach(button => button.disabled = true);



    nextButton.style.display = "block"; // Display "Next" button once an answer is selected
}

/**
 * Goes to the next question or wraps up the quiz if you're out of questions.
 * - If there are more questions, it shows the next one.  
 * - If you're done, it displays your final score and a "Restart" button.  
 * - Clicking "Restart" reloads the page so you can play again.  
 */

function nextQuestion() {
    currentQuestionIndex++; // Move to the next question

    if (currentQuestionIndex < questions.length) { // If there are more questions
        showQuestion(); // Show the next question
    } else {
        questionElement.innerHTML = `Quiz Finished! Your score: ${score}/${questions.length}`; // Displays the final score
        answerButtons.innerHTML = ""; // Clears any remaining answer buttons
        nextButton.innerHTML = "Restart"; // Sets the button text to "Restart"
        nextButton.style.display = "block"; // Shows the "Restart" button
        nextButton.addEventListener("click", () => { // Adds an event listener to restart the quiz
            window.location.reload(); // Reloads the page to restart the quiz
        } );
    }
}

nextButton.onclick = startQuiz; // Starts the quiz when the page loads

startQuiz();

is anyone able to help or point me in the right direction please?

I’m building a Next.js application using the App Router and I’m having trouble accessing route parameters from parent components that are higher in the routing hierarchy.
My route structure:

app/page.tsx (Root page)

app/layout.tsx (Root layout)

app/[category]/page.js (Category-specific layout)

I need to access the [category] dynamic parameter from either app/page.tsx or app/layout.tsx`, which are strictly server components.

For example, if the user navigates to /products/electronics, I want to be able to access the value electronics in my root layout or page, but I’m not sure how to do this with server components since these parameters only exist when that segment of the URL is accessed.

I am creating a browser extension using WXT
I have set up the basic styles for popup.html and now i was trying to create a element from the dom using the extension. In order to do that i have written up a very basic js code which creates a video element (This is to test if it actually works and to my surprise i got an error saying “document is not defined”). So after debugging for a while i found out that we cannot access dom or storage related stuffs from background worker. In order to get access to these we would have to do so by using content script.

So, then i started digging into implementing an approach where i can create an element using content script of the extension but i cant seem to wrap my head around it.

For you guys:

# popup.html
      const [tab] = await browser.tabs.query({ active: true, currentWindow: true })
      if (!tab?.id) throw new Error("No tab found!")
      console.log("tab ", tab)


      const resp = await browser.tabs.sendMessage(tab.id, "to_content_script")
      console.log("resp ", resp)

# background.ts
import { browser } from "wxt/browser";

export default defineBackground(() => {
console.log("background worker initialized")
}

# content.ts
export default defineContentScript({
  matches: ["*://*/*"],

  async main() {
    console.log("content script initialized")
  },
}); 

CURRENT PROBLEM: the content script never actually initialized, no matter what i do.
I tried sending an message from popup.html to content.ts file where i was listening for the message.
I also tried sending a message from popup.html to background.ts(This worked), then from background.ts to content.ts file, where this didnt worked.

# wxt.config.ts
import { defineConfig } from 'wxt';

// See https://wxt.dev/api/config.html
export default defineConfig({
  extensionApi: 'chrome',
  srcDir: 'src',
  modules: ['@wxt-dev/module-react'],
  runner: {
    startUrls: ["https://wxt.dev"],
  },
  manifest: {
    version: "0.0.1",
    permissions: ["activeTab", "tabCapture", "tabs", "webRequest", "scripting"],
    host_permissions: ["<all_urls>"],
    background: {
      service_worker: "background.ts",
      type: "module"
    },
    content_scripts: [
      {
        "matches": ["<all_urls>"],
        "js": ["content-scripts/content.js"]
      }
    ],
    content_security_policy: {
      extension_pages: "script-src 'self'; object-src 'self';",
    },
    web_accessible_resources: [
      {
        resources: ["*"],
        matches: ["<all_urls>"],
      },
    ],
  }
});

TL/DR: How to display each glyph from a font file using some parsing method that shows all of the characters.

I am trying to build a glyph viewer for one of several fonts I want to show on a page.

Currently I have this codesandbox (this is cramped so there is a full page version here)

Here is my JS:

import opentype from "opentype.js";
const htmlElem = document.querySelector("html");

const fontPath = "/src/resources";

const fontMap = (fontName) => {
  const url = `${fontPath}/${fontName}`;
  const buffer = fetch(url).then((res) => res.arrayBuffer());

  buffer.then((data) => {
    const wrapper = htmlElem.querySelector(".characters ul");
    const font = opentype.parse(data);
    const glyphs = font.glyphs.glyphs;
    for (const [key, value] of Object.entries(glyphs)) {
      if (value.name !== null) {
        const template = `<li>${value.name}</li>`;
        wrapper.insertAdjacentHTML("beforeend", template);
        console.log(value);
      }
    }
  });
};

fontMap("Calluna-Regular.otf");

When I log each glyph I get quite a lot of data about the element, however I want to know how to access it on the page using the correct property.

Currently trying to access item.name which works fine for ‘A’, ‘B’, ‘C’ etc, but numbers are named in full ‘one’, ‘two’, etc. And punctuation marks, I guess name makes sense.

I tried adding a prefix to output as html entities, like <li>&${value.name};</li> but of course that will prefix the standard ‘A’ with an ‘&’.

Is there a universal way to parse each character and use some encoding to display each item on the page? Hex maybe but not transform the simple characters. The other thing I wondered is whether certain glyphs have particular properties that distinguish them. I think the unicode property is the only one I can access that will help me.

Also in this font the letter ‘A’ has unicode: 64 in the mapping but the universal unicode character for ‘A’ is U+0041 (or is that already converted using some system), I don’t know if this is some peculiarity of the font file.

Any help greatly appreciated.