Category: javascript

I want to create a website where the user can draw on a sprite on a 16×16 pixel grid of one colour, and this can be converted to a binary number, where each digit is a pixel in the image (0 is empty and 1 is colour). The binary number is stored on the database and read again later to generate an image from that binary number to be drawn on a canvas.

At the moment, I am struggling to figure out how to convert a string of binary digits into the 16×16 pixel sprite to be drawn on the canvas. How would I go about doing this?

When calling window.getComputedStyle(root,null).getPropertyValue('--fs-xl'), it gives me the actual property value of --fs-xl, which is clamp(2.5rem, 10vw, 4rem).

So I was wondering if maybe there is a method that returns the actual pixel value used by the browser.

$(document).ready(() => {
  const root = document.documentElement;
  let paddingInline = window.getComputedStyle(root, null).getPropertyValue('--fs-xl');
  console.log(paddingInline);
})

:root {
  --fs-xl: clamp(2.5rem, 10vw, 4rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Using Nuxt 3, I’m switching from my “login” layout to my “admin” layout.

This works great except for one thing: When switching layouts, there are few milliseconds where the “admin page content” can be seen displayed within the “login” layout. This means I can see my “Admin homepage” displayed in the previous “login” layout.

I can clearly see this desync in the devtools using the performance tab, very clearly when throttling the CPU.

This is espacially annoying because this produces content flashes.

No data fetching is involved. I do not use animations.

Why does this happen? How can I properly handle layout changing?

I tried the following code to handle the layout change to no avail:

preloadComponents(['admin']).then(() => {
          setPageLayout('admin');
          return navigateTo(this.localePath('/admin'));
        });

Here are snippets of the codebase:

app.vue

<template>
  <NuxtLayout :name="layoutName">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">

function setLayout(fullPath: string) {
  switch (true) {
    case !!fullPath.match(/^/w{2}/admin/g):
      layoutName.value = 'admin';
      break;
...
  }
}

watch(() => route.fullPath, setLayout, {immediate: true});

</script>

login.vue / admin.vue

<template>
  <div class="container-fluid px-0">
    <div>
      <div class="row">
         ...
      </div>
      <div class="container login-container">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

It used to be simple but it’s becoming quite annoying. Ok, so I used to get this working in expo sdk 51

// app/index.jsx

import { useEffect, useState } from 'react';
import { useNavigation } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default async function Orders() {
  const navigation = useNavigation();
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    navigation.setOptions({ title: 'Orders' });
  }, [navigation]);

  useEffect(() => {
    fetchOrders();
  }, [orders]);

  async function fetchOrders() {
    const res = await fetch(
      process.env.BACKEND_API_URL + '/api/orders'
    );
    const data = await res.json();
    setOrders(data);
  }

  return (
    <View style={styles.container}>
      <Text>Orders {JSON.stringify(orders)}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

With expo 52, I get this weird error “A component was suspended by an unchained promise”.

Making requests to the backed used to be simple but I can’t find a single example that works on expo.dev docs. Can someone help? I am using the new expo router btw

I am trying to capture a screenshot through my app. It works correctly for the ‘Entire Screen’ option, but for anything selected in the window or Chrome Tab, then the focus doesn’t return to my tab after a screenshot.

const handleCameraClick = async (e) => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: 'always',
        displaySurface: 'window',
      },
      audio: false,
    });
    
    const video = document.createElement('video');
    video.srcObject = stream;
    video.onloadedmetadata = () => {
      video.play();
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      stream.getTracks().forEach((track) => track.stop());
      video.srcObject = null;
      canvas.toBlob((blob) => {
        const file = new File([blob], 'screenshot.png', {
          type: 'image/png',
        });
        setFiles([file]); // setting state in react
      }, 'image/png');
    };
  } catch (err) {
    console.error('error capturing screen:', err);
  }
};

FYI: claude.ai has the same functionality and it works there.

Can you help me achieve that?

I am making a ‘Team’ section for a website, and I have a div containing 4 cards arranged horizontally in a row; each card has a team member’s image, name, role, and a ‘Read Bio’ button. When a ‘Read Bio’ button is pressed on any of the cards, a div appears below it, containing the full bio of that team member, like this. I want the div to expand from the top down, and in doing so, push the elements below it smoothly downwards to make room for it. Right now, the Advisory Board heading is jumping downwards instead of moving smoothly downwards. I am using React and Framer Motion.

I want the effect to be very similar to the expanding bios in this website:
https://www.centific.com.cn/zh-hans/our-leadership

const menuVars = {
    // animation specifications
};

<div className={styles.cardWrapper}>
    <div className={styles.cardsContainer}>
      {founders.map((member) => (
        <Card/>
      ))}
    </div>

    <AnimatePresence>
      {activeBio && (
        <motion.div
          key={activeBio}
          variants={menuVars}
          initial="initial"
          animate="animate"
          exit="exit"
          className={styles.bioContainer}
          style={{
            top: bioPosition?.top,
            transformOrigin: "top",
          }}
        >

         ...

    </AnimatePresence>

<div className={styles.sabInfoDiv}>
        <div className={styles.heading}>Advisory Board</div>
        <p className={styles.sabInfo}>
          Bla Bla Bla
        </p>
      </div>

(activeBio and bioContainer are both useState hooks that I have not shown in the code)

How can I access the div which is currently clicked, when all the divs have the same name? innerNote contains the text of each note. Each note is made up of a parent div and a child div (innerNote), which are created dynamically.

When I have multiple notes and click on the edit icon of a single note and save changes, all the notes get added with the same text. Is there a way I can edit the text of only the clicked div rather than all the divs?

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
let text = '';
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');

add_btn.addEventListener('click', () => {
  textArea.value = '';
  createNote.style.display = 'block';
})

close.addEventListener('click', () => {
  createNote.style.display = 'none';
})

create.addEventListener('click', () => {
  let note = document.createElement('div');
  note.className = 'note';
  
  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  text = textArea.value;
  innerNote.textContent = text;
  
  let edit = document.createElement('i');
  edit.className = 'fa-solid fa-edit';
  
  let del = document.createElement('i');
  del.className = 'fa-solid fa-trash';
  
  if (!textArea.value) {
    return;
  } else {
    note.appendChild(innerNote);
    note.appendChild(edit);
    note.appendChild(del);
    container.appendChild(note);
    createNote.style.display = 'none';
    note.style.display = 'block';
    edit.addEventListener('click', () => {
      textArea2.value = text;
      editNote.style.display = 'block';
    })
    
    editBtn.addEventListener('click', () => {
      let currentDiv = innerNote;
      currentDiv.textContent = textArea2.value;
      editNote.style.display = 'none';
    })
    
    del.addEventListener('click', () => {
      container.removeChild(note);
    })
  }
});

closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
})

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 600px;
  width: 890px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}

.add:hover {
  background-color: #f1f1f1;
}

.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.heading {
  margin-top: 16px;
  font-size: 32px;
}

textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}

.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}

.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}

.create-btn,
.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}

.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
}

.fa-solid.fa-edit {
  margin-left: 94px;
}

.fa-solid.fa-trash {
  margin-left: 30px;
}

.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }

  .add {
    margin-left: 20%;
  }

  .create-note {
    left: 0%;
    width: 374px;
  }

  .note {
    margin-left: 70px;
    overflow-y: clip;
  }

  .inner-note {
    padding-top: 20px;
  }

  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class="container">
  <div class="add">
    <i class="fa-solid fa-plus"></i>
  </div>
  <div class="create-note">
    <h1 class="heading">New Note</h1>
    <textarea name="" id="" placeholder="Enter your note..."></textarea>
    <button class="create-btn">Create Note</button>
    <button class="close-btn">Close</button>
  </div>
  <div class="edit-note">
    <h1 class="heading">Edit Note</h1>
    <textarea name="" id="" class="textarea2"></textarea>
    <button class="edit-btn">Edit Note</button>
    <button class="close-btn2">Close</button>
  </div>
</div>

I have Child.vue that draws to canvas. From Parent.vue, I want to be able to change various props of Child.vue, then run its render() function for a redraw.

The problem is when I run handleClick() in Parent.vue, the props for Child.vue have not finished propagating before the render() function is called. This is ascertained by clicking a second time and getting the redraw, and/or by using the hack of adding a delay before calling the render function. Like so:

// Poor person's fix using a delay.
const delay = (ms:number) => new Promise(res => setTimeout(res, ms))
const handleClick = async () => {
  color.value = 'blue'
  size.value = 50
  await delay(10)
  childRef.value?.render()
}

In my real app, I have many more props that will change before calling render(). Sometimes only one changes, sometimes five, sometimes two, etc… Never the same ones.

Is there a proper way to solve this race condition?

<!-- Child.vue -->
<script setup lang="ts">
  import { onMounted, useTemplateRef } from 'vue'

  interface Props {
    color?: string
    size?: number
  }

  const {
    color = 'red',
    size = 10,
  } = defineProps<Props>()

  const canvasRef = useTemplateRef('canvas-ref')
  let canvas:HTMLCanvasElement
  let ctx:CanvasRenderingContext2D

  onMounted(() => {
    canvas = canvasRef.value as HTMLCanvasElement
    ctx = canvas.getContext("2d") as CanvasRenderingContext2D
    render()
  })

  const render = () => {
    ctx.clearRect(0, 0, 100, 100)
    ctx.fillStyle = color
    ctx.fillRect(0, 0, size, size)
  }

  defineExpose({ render })
</script>

<template>
  <canvas ref="canvas-ref" :width="100" :height="100"></canvas>
</template>

<!-- Parent.vue -->
<script setup lang="ts">
  import Child from './Child.vue'
  import { ref, useTemplateRef } from 'vue'

  const childRef = useTemplateRef('child-ref')

  const color = ref()
  const size = ref()

  const handleClick = () => {
    color.value = 'blue'
    size.value = 50
    childRef.value?.render()
  }
</script>

<template>
  <Child
    :color=color
    :size=size
    ref="child-ref"
  />
  <button @click=handleClick>button</button>
</template>

npm start

[email protected] start
react-scripts start

i ｢wds｣: Project is running at http://192.168.1.4/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:UsersNavyaDesktopExpenseTrackerclientpublic
i ｢wds｣: 404s will fallback to /
Starting the development server…
Failed to compile.

./node_modules/react-router-dom/dist/index.mjs
Module not found: Can’t resolve ‘react-router/dom’ in ‘C:UsersNavyaDesktopExpenseTrackerclientnode_modulesreact-router-domdist’
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat ‘C:DumpStack.log.tmp’

I was tring to m ake an expsense amager in react but this is the error i am facing plase solve it asap!!!!

I have very limited knowledge of JavaScript. Trying to script my IoT device with the help of a known LLM, I boiled down my issues to this:

let testArray = [3, 1, 2];
print("Does sort exist?", typeof testArray.sort);  // Should print "function"

returning:

Does sort exist? undefined

So it looks like Shelly’s version of JavaScript (Espruino, according to this) does not have .sort on arrays. Printing the type of testArray gives array, not Array.

It looks to me that scripting from within this Shelly device is going to be frustrating, as it seems not to follow a recent standard version of JavaScript.

Do I misunderstand something? Is there something I can do to make my Shelly Pro 1 sort an array?

I am using the java script jsTree library and need to use a node.id as a parameter in the Ajax url call to get children and load them into the current node. I found an example which looks like it is exactly what i need but when i run it does not execute at all. Ive gone through examples and cant find anything else that suits my need. The documentation is very cryptic to work out. I referred to :

https://stackoverflow.com/questions/66245069/pass-parameters-through-ajax-call-ajax-url

My code that fetches the initial data works but executes the same code when expanding a node. I need the current node being expanded to have its id appended to the url to fetch its children. My current code is as follows :

$('#SimpleJSTree').jstree({
    'core': {
        'data': {
            'url': "http://10.0.0.101:8080/portal/rest/portal/repo/1/jsTreeBranch/2/",
            'data': function (node) {
                console.log("LOAD DATA");
                console.log("node : " + node);
                for(var i in node){
                    console.log(i + " : " + node[i]);
                }
                return {'id': node.id};
            }
        }
    }
});

but this means that every time i expand a node it just calls this default but I need to be able to include the currently expanded nodes id and use it in the url to fetch its children. The code that I referred to in the other question is pseudo code which the author admitted to. But how do i make this functional with my intended purpose. The code is as follow :

$('#SimpleJSTree').jstree({
    "plugins": ["themes", "json_data", "ui"],
    "json_data": {
        "ajax": {
            "type": 'GET',
            "url": function (node) {
                console.log(node);
                var nodeId = "";
                var url = ""
                if (node == -1) {
                    url = "http://10.0.0.101:8080/portal/rest/portal/repo/1/jsTreeBranch/2/";
                } else {
                    nodeId = node.attr('id');
                    url = "http://10.0.0.101:8080/portal/rest/portal/repo/1/jsTreeBranch/" + nodeId + "/";
                }
                console.log(url);
                return url;
            },
            "success": function (new_data) {
                console.log(new_data);
                return new_data;
            }
        }
    }
});

How could this be made functional. As I said the documentation is extremely confusing to get things to work. The above pseudo code is exactly what i am trying to achieve. It would be greatly appreciated if someone can help. The version i am using is :

cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js

Regards and thanks in advance.

Working on a chrome extension that only works on specific urls and want the pinned icon to show disabled/greyscale when not on a matching page. When on a matching page it should go back to the normal full color icon. I’ve done this before using declarative content and v2 of manifest, but I can’t seem to get it working with version 3. I think it may be disabling/enabling because it doesn’t seem to trigger outside of the site, but it doesn’t change visual ever. Bonus if we can change the title when it enables/disables.

manifest.json

{
  "name": "Wheel of MatchPlay",
  "description": "Wheel of Names creation for MatchPlay tournaments",
  "version": "0.1.0",
  "manifest_version": 3,
  "permissions": [
    "storage",
    "declarativeContent",
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "*://wheelofnames.com/*",
    "*://app.matchplay.events/*"
  ],
  "action": {
    "default_state": "disabled",
    "default_title": "not a matchplay tournament",
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png",
      "48": "icons/icon-48.png",
      "128": "icons/icon-128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}

background.js

// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
chrome.runtime.onInstalled.addListener((details) => {

    chrome.storage.sync.set({
        MATCHPLAY_KEY,
        WHEEL_KEY,
    });

    // if details.reason === chrome.runtime.OnInstalledReason.INSTALL
    // chrome.runtime.openOptionsPage();

    // Page actions are disabled by default and enabled on select tabs
    chrome.action.disable();

    // replace all rules...
    chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
        // with a new rule...
        chrome.declarativeContent.onPageChanged.addRules([
            {
                // That fires when a page's URL is matchplay tournaments
                conditions: [
                    new chrome.declarativeContent.PageStateMatcher({
                        pageUrl: {
                            hostEquals: 'app.matchplay.events',
                            // pathPrefix: '/tournaments'
                        },
                    })
                ],
                // And show's the extension's action
                actions: [
                    new chrome.declarativeContent.ShowAction()
                ],
            }
        ]);
    });
});

chrome.action.onClicked.addListener(async (tab) => {
    const tabId = tab.id;
    chrome.action.disable(tabId);
    chrome.action.setBadgeBackgroundColor({ tabId, color: '#f00' });
    chrome.action.setBadgeText({ tabId, text: '...' });

    // TODO -- do something about not having keys?

    // load the data and create the wheel
    const [_, tid] = tab.url.match(/tournaments/(d+)/);
    const tournament = await loadTournamentData(MATCHPLAY_KEY, tid);
    const wheelPath = await createWheelForTournament(WHEEL_KEY, tournament, { skipUsers: [MATCHPLAY_SELF_USER_ID]});

    // open the wheel in a new tab
    const wheelTab = await chrome.tabs.create({
        active: true,
        index: tab.index + 1,
        openerTabId: tab.id,
        url: `https://wheelofnames.com/${wheelPath}`
    });

    chrome.action.setBadgeText({ tabId, text: '' });
    chrome.action.enable(tab.id);
});

I have this problem. I tried all the ways you all said but I still get the value in the empty controller.

Please help me

I’m building a rich-text-editor component in vue using lexical and taking a lot of inspiration from the lexical-playground that is using the react plugins and trying to convert them where needed.

I stumbled upon a bug in my implementation when creating lists, styling and formatting was not applied and got that fixed using the code from “registerList“.

One thing that still differs from my component and the lexical playground is that in the playground <li> elements has applied inline-styles (an example where this is needed is to get different sizes on list bullets or different colors etc.). I’ve searched best I could in the lexical repo but cant seem to find where in the code this is happening…

I think I could solve this with a custom styled ListItemNode but I would much rather dont have to do that.

Anyone that knows how this is done in the playground?

the outline / border on my map

I am using angular 18.2.3
and while i am using leaflet map into my page. and retrive map from url and clicked on my shapeareas in the map. it show this weird shape map only in chrome. but why is this happening i don’t figure out.

this. is my map generation code in dashboard.component.ts:

this.map = L.map('map_dashboard', {
        center: [23.743356, 90.244998],
        zoom: 7.3,
        minZoom: 7.3,
        maxZoom: 8.3,
        zoomSnap: 0.1,
        wheelPxPerZoomLevel: 100
      });

      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
        maxZoom: 18,
        attribution: '<span>&copy;  <a href="http://www.rimes.int"> RIMES </a>'
      }).addTo(this.map);
      this.mapService.getAdm1Map().subscribe((res:any)=>{
        this.layerGroup.clearLayers()
        let layer = L.geoJSON(res, {
          style: (feature) => (
            color: "#000000",
            weight: 1,
            opacity: 1,
            fillOpacity: 1,
            fillColor: "#b03131",
            stroke: true
          ),
          onEachFeature: function onEachFeature(features, layer) {
            let location = features.properties;
            let tooltipContent = '<table class="table table-striped table-hover m-0 p-0"><tbody>';
            if (location.ADM3_EN) {
              tooltipContent += '<tr class="table-light"><td class="mb-0">Upazila</td><th class="mb-0">' + location.ADM3_EN + '</th></tr>';
            }
            if (location.ADM2_EN) {
              tooltipContent += '<tr class="table-light"><td class="mb-0">Division</td><th class="mb-0">' + location.ADM2_EN + '</th></tr>';
            }
            if (location.ADM1_EN) {
              tooltipContent += '<tr class="table-light"><td class="mb-0">District</td><th class="mb-0">' + location.ADM1_EN + '</th></tr>';
            }
            if (location.ADM0_EN) {
              tooltipContent += '<tr class="table-light"><td class="mb-0">Country</td><th class="mb-0">' + location.ADM0_EN + '</th></tr>';
            }

            tooltipContent += '</tbody></table>';
            layer.bindTooltip(tooltipContent);
          }
        }).addTo(this.layerGroup)
        this.layerGroup.addTo(this.map)
        this.map.flyToBounds(layer.getBounds())
      })

html:

 <div class="template-demo">
     <div id="map_dashboard" style="height: 750px; width: 100%; border: none"></div>
 </div>

Can anyone tell me what am i missing here?