Blancer.com Tutorials and projects – Page 27 – Freelance Projects, Design and Programming Tutorials

onPointerOver and onPointerOut detect all child elements

The problem is that I have onPointerOver and onPointerOut triggered on each child element, but I need it to be on a common group, because then the component is re-rendered too often.

There is a group here, and now when I move the mouse cursor, the component is redrawn many times, I want my state to change only 1 time when I move the mouse cursor and move it away.

This is changing, but the fact is that my head consists of many InstancedMesh, and it turns out that this state changes for each square that my head consists of.

How do I make this work only for the entire group, that is, so that when I hover the cursor, it only reacts to the entire group, and not to individual squares?

    <group
      position={position}
      onPointerOver={(e) => {
        e.stopPropagation();  
        handlePointerOver(e); 
      }}
      onPointerOut={(e) => {
        e.stopPropagation();
        handlePointerOut(e);
      }}
    >
      <Head scale={scale} isVisibleGrid={isVisibleGrid} position={scaledPosition(0, 24, 0)} />

    </group>

  const handlePointerOver = (e: ThreeEvent<PointerEvent>) => {
    setIsVisibleGrid(true);
    e.stopPropagation();
  };

  const handlePointerOut = (e: ThreeEvent<PointerEvent>) => {
    setIsVisibleGrid(false);
    e.stopPropagation();
  };

mapBox autofill sessionToken usage?

I have searched through the documents, but found nothing specific to the address autofill property sessionToken. Does anyone have reference information that includes the behavior, lifecycle and related functions for the property?

I have a prototype using the property along with accessToken, but not sure if it is actually correctly operating as designed.

function initAutocomplete() {
            const autofill = document.querySelector('mapbox-address-autofill');
            //const minimap = document.querySelector('mapbox-address-minimap');
            autofill.accessToken = ACCESS_TOKEN;
            autofill.sessionToken = 'testsession-token'
            //minimap.accessToken = ACCESS_TOKEN;
            autofill.addEventListener('retrieve', (event) => {
                const featureCollection = event.detail;
                if (!featureCollection || !featureCollection.features.length) {
                    minimap.feature = null;
                    return;
                }
                mapboxfeature = featureCollection.features[0];
                //minimap.feature = feature;
                fillInAddress();
            });
            
        }

What are the benefits of Next.js Server Actions, and why should I use them instead of client-side API calls?

I am working on a Nextjs web application. I am using server actions for fetching data and submitting forms using rest apis in java spring boot. It works great. However, I have a few doubts in my mind and I noticed a couple of drawbacks as well.

For server action, they do not show up in network tab. So, for manual QA it is not possible to see what is being sent to server and what is being returned.

How much of a difference will it make if I ditch server actions and stick with client api calls?

I would appreciate a detailed answer to help me understand this.

How do I change file pathing after installation?

I am taking a course on react and after installing the dependancies, one of the first tasks is to run npm start. However I think i’m running into a pathing issue, but am unaware of how to fix it.

daynenhinckley@Daynens-MacBook-Pro ~ % npm start
npm error code ENOENT
npm error syscall open
npm error path /Users/daynenhinckley/package.json
npm error errno -2
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/Users/daynenhinckley/package.json'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: /Users/daynenhinckley/.npm/_logs/2025-01-04T01_03_23_571Z-debug-0.log

this is the log of what I get when I run the code. I’m still learning how to set up pathing but I’m not sure how to reconfigure pathing to go where I want after it’s set up. Any help is appreciated.

Disabling a JavaScript function when the device is offline

what can I do to make this function not work and give a warning when the device is offline? I would appreciate your help.

Code:

if (adType == Sdkmanager.AD_REWARDED)
    Website2APK.showInterstitialAd();
{

error: FirebaseError: Firebase: No Firebase App ‘[DEFAULT]’ has been created – call initializeApp() first (app/no-app)

I am building a web app using firebase local emulation. I have firebase authentication working but I’m getting errors that don’t make sense when trying to query my database.

Here is the relevant testing code:

import { initializeApp, getApps } from 'firebase/app';
import { getAuth, connectAuthEmulator, signInWithEmailAndPassword, signOut } from 'firebase/auth';
import { executeQuery, getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { getStudentByemail, connectorConfig } from '@firebasegen/default-connector';

let fbApp = null;
let dConnect = null;
let fbInitialized = false;

async function fetchFbConfig() {
  try {
    const response = await fetch('http://localhost:5001/<project-name>/us-central1/getApiKey');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const fbConfig = await response.json();
    return fbConfig;
  } catch (error) {
    console.error('Error fetching Firebase config:', error);
  }
}

// Initialize Firebase with the fetched config
fetchFbConfig()
  .then(fbConfig => {
    if (!fbConfig) throw new Error('Failed to fetch Firebase config');

    // Initialize Firebase only if it hasn't been initialized already
    if (!getApps().length) {
      fbApp = initializeApp(fbConfig);
      const auth = getAuth(fbApp);

      connectAuthEmulator(auth, "http://127.0.0.1:9099");

          console.log('Initializing DataConnect...');
          dConnect = getDataConnect(connectorConfig);

          if (!dConnect) throw new Error('dataConnect not initialized');

          connectDataConnectEmulator(dConnect, 'localhost', 9399);
          dConnect.setInitialized();
          fbInitialized = true;

          window.GetStudentByemail = async function(_email) {
            if (!fbInitialized || !dConnect) {
              throw new Error('Firebase/DataConnect not initialized');
            }
            console.log('GetStudentByemail function activated with ', _email);
            try {
              const query = getStudentByemail({ email: _email });
              console.log('Query:', query);
              const qryRef = await executeQuery(dConnect, query);
              
              return new Promise((resolve, reject) => {
                qryRef.onSnapshot(
                  snapshot => resolve(snapshot.data()),
                  error => reject(error)
                );
              });
            } catch (error) {
              console.error('GetStudentByemail error:', error);
              throw error;
            }
          };
          
          window.signInUser = function(email, password, callback) {
            if (!fbInitialized) {
              console.error('Firebase not initialized');
              callback(false);
              return;
            }

            signInWithEmailAndPassword(auth, email, password)
              .then((userCredential) => {
                if (userCredential.user.emailVerified) {
                  console.log('User signed in:', userCredential.user);
                  callback(true);
                } else {
                  console.error('Email not verified.');
                  signOut(auth);
                  callback(false);
                }
              })
              .catch((error) => {
                console.error('Error signing in:', error.code, error.message);
                callback(false);
              });
          };

          window.signInUser("<email>", "<password>", async function(isLoggedIn) {
            if (isLoggedIn) {
              try {
                  console.log('fetchStudentData function activated with ', "<email>");
                  const studentData = await window.GetStudentByemail("<email>");
                  console.log('Fetched student data:', studentData);
                } catch (error) {
                  console.error('Error fetching student data:', error);
                }
            } else {
              console.log('User not logged in.');
            }
          });
    }
  })
  .catch((error) => {
    console.error('Error initializing Firebase:', error);
  });

The console log is:

Initializing DataConnect... index.js:35:18
User signed in: Object <> index.js:76:26
fetchStudentData function activated with  <email> index.js:93:26
GetStudentByemail function activated with  <email> index.js:48:20
GetStudentByemail error: FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

The error is being thrown on the line

const query = getStudentByemail({ email: _email });

in the function GetStudentByemail. The query getStudentByemail give the correct response when called from within the data connection execution terminal in VSCode and is present and correct in the SDK.

Obviously the firebase app is created because the user is signed in and dataConnect is also correctly initialised, so the only thing that makes sense is if the execution of the promise preceeds the initialisation of the firebase app. I’ve read about promises being executed from a different queue (microtasks) that maybe causing this error, but I’m lost and clutching at straws and even if this is the case I have no idea how to solve.

Please excuse any incorrect terminology, I’m not a programmer so I’m very much out of my depth here.

Any help would be greatly appreciated.

useState rerenders bindings increment when key added to object but not removed

I’m running a bunch of generated checkboxes through useState as a generic object, eg:

const [stuff, setStuff] = useState(() => {
  // do stuff to get saved stuff.
  // assume very basic format of { uuid: boolean, uuid: boolean, ... }
  return theStuff
}

The stuff is then fed to the UI by child components that uses the stuff, eg:

{stuff.map((thing, i) => (
  <Fragment key={i}>
    <input
      type="checkbox"
      id={thing}
      name={thing}
      checked={stuff[thing] || false}
      onChange={() => handleChanges(thing)}
    />
  </Fragment>
)};

Now when one of the few hundred checkboxes is created and one/many get checked I just throw the state object mentioned in the first snippet. This works great, updates the state on the screen re-renders and also updates the values and re-renders on other sibling components so I can display like counts of selected etc.

export const handleChanges = (thing) => {
  setStuff((prevStuff) => ({
    ...prevStuff,
    [thing]: !prevStuff[thing]
  }));
}

The Problem
It may be in handleChanges I assume my learning curve on React lifecycle handling is hurting me because:

It will update the used values in sibling components when I ADD to the object, but not when I REMOVE from the object.
If I handle the change by way of a delete stuff.uuid then it WILL update the values used on the sibling components both ways…but it does not update the checked state of the checkbox.

Hope this isn’t too verbose, but I can’t seem to find how to have setState update both when adding and removing from the object on the sibling components. This while keeping the state object a nice clean object of only the uuid’s selected.

Save and/or Apply Background Image on click

This question is not how to add Background Images, it is how to have it save the setting once the option has been selected, so after the page is refreshed or page is changed it remembers the choice.

I have made it so my background changes on click, however it does not save the theme and actually apply change after leaving the page or refreshing.

1.Is there anyway to apply it to the original code? if so I would really like help on how to do so.

if not

2.What changes would I need to make to have the NEW JS work with what I have now?

Extra Challenge:

(I only want it to affect the profile page and settings page and not the full website)

I Would really appreciate the help I don’t mean to sound terrible.

Down below are links to the Codepens.

1.This is my original code I used to be able to change background:https://codepen.io/Elixble/pen/RwzZaWB

2.This is the code I’ve tried to implement but have gotten confused/lost on how to get it to work with what I have:https://codepen.io/Elixble/pen/KwPyyVY

I will also show the code below.

1.Working code but DOES NOT save

(HTML)

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

<body id="Background">
  <div id="SettingsBox">
    <div>

      <div class="Embers" data-class="Embers-Theme-Card-Gradient" onclick="myFunction(this)">
        <h1>Embers</h1>

        <div class="mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <div class="Darkmode-Theme-Card" data-class="Darkmode-Theme-Card-Gradient" onclick="myFunction(this)">
        <h1>Darkmode</h1>

        <div class="mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</body>

JS

function myFunction(obj) {
  $('body#Background').removeClass().addClass($(obj).data('class'));
}

CSS

body {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position: absolute;
  margin: auto;
}

.Embers-Theme-Card-Gradient{
  background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
  position:relative;
}

.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position:relative;
}

.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
  position:relative;
}

.Embers {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 6.5deg;
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  left: 29%;
  bottom: 80%;
}

.Embers> :where(h1,
p) {
  background: rgba(221, 221, 221, 0.432);
  margin: 0;
  padding: 0.5rem;
}

.mouse-position-tracker {
  position: absolute;
  inset: 0;
}

.mouse-position-tracker>div {
  position: absolute;
  width: calc(100% / 3);
  height: calc(100% / 3);
  z-index: 2;
}

.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
  --rotateX: var(--angle);
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
  --rotateX: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
  --rotateX: var(--angle);
  --rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
  --rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
  --rotateX: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: var(--angle);
}


/* 1st, 4th, 7th */

.mouse-position-tracker>div:nth-of-type(3n - 2) {
  left: 0;
}


/* 2nd, 5th, 8th */

.mouse-position-tracker>div:nth-of-type(3n - 1) {
  left: calc(100% / 3);
}


/* 3rd, 6th, 9th */

.mouse-position-tracker>div:nth-of-type(3n) {
  right: 0;
}


/* 1-3 */

.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
  top: 0;
}


/* 4-6 */

.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
  top: calc(100% / 3);
}


/* 7-9 */

.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
  bottom: 0;
}


/* general styling */

 :root {
  --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Embers {
  cursor: pointer;
}

.Darkmode-Theme-Card {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 5deg;
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  left: 10%;
  bottom: 80%;
}

.Darkmode-Theme-Card > :where(h1, p) {
    background: rgba(221, 221, 221, 0.432);
    margin: 0;
    padding: 0.5rem;
  }
  
  .mouse-position-tracker {
    position: absolute;
    inset: 0;
  }
  
  .mouse-position-tracker > div {
    position: absolute;
    width: calc(100% / 3);
    height: calc(100% / 3);
    z-index: 2;
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
    --rotateX: var(--angle);
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
    --rotateX: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
    --rotateX: var(--angle);
    --rotateY: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
    --rotateY: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
    --rotateX: calc(var(--angle) * -1);
  }
  
 .Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: var(--angle);
  }
  
  /* 1st, 4th, 7th */
  .mouse-position-tracker > div:nth-of-type(3n - 2) {
    left: 0;
  }
  /* 2nd, 5th, 8th */
  .mouse-position-tracker > div:nth-of-type(3n - 1) {
    left: calc(100% / 3);
  }
  /* 3rd, 6th, 9th */
  .mouse-position-tracker > div:nth-of-type(3n) {
    right: 0;
  }
  
  /* 1-3 */
  .mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
    top: 0;
  }
  
  /* 4-6 */
  .mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
    top: calc(100% / 3);
  }
  
  /* 7-9 */
  .mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
    bottom: 0;
  }
  
  /* general styling */
  :root {
    --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
      0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
      0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
      0px 37px 80px rgba(0, 0, 0, 0.07);
  }

  .Darkmode-Theme-Card
  {
    cursor:pointer;
  }

#SettingsBox
{
  position:relative;
  height:850px;
  width:1400px;
  background-color:rgba(0, 0, 0, 0.25);
  border-radius:20px;
  box-shadow: -5px 5px 15px #111a;
  margin:auto;
  top:10%;
}

2.NOT Working (Same HTML and CSS)
(HTML)

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

<body id="Background">
  <div id="SettingsBox">
    <div>

      <div class="Embers" data-class="Embers-Theme-Card-Gradient" onclick="myFunction(this)">
        <h1>Embers</h1>

        <div class="mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <div class="Darkmode-Theme-Card" data-class="Darkmode-Theme-Card-Gradient" onclick="myFunction(this)">
        <h1>Darkmode</h1>

        <div class="mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</body>

JS

let Embers = localStorage.getItem( 'Embers' )
const themeSwitch = document-getElementById ('Background')

const enableEmbers = () =› {
document.body.classList.add ('Embers')
localStorage setItem( 'Embers', 'active')
}

const disableEmbers = () => {
document. body. classList. remove( 'Embers')
localStorage setItem( 'Embers', null)
}

themeSwitch. addEventListener ("click", () => {
Embers !== "active" ? enableDarkmode() : disableDarkmode()
({

CSS

body {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position: absolute;
  margin: auto;
}

.Embers-Theme-Card-Gradient{
  background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
  position:relative;
}

.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position:relative;
}

.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
  position:relative;
}

.Embers {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 6.5deg;
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  left: 29%;
  bottom: 80%;
}

.Embers> :where(h1,
p) {
  background: rgba(221, 221, 221, 0.432);
  margin: 0;
  padding: 0.5rem;
}

.mouse-position-tracker {
  position: absolute;
  inset: 0;
}

.mouse-position-tracker>div {
  position: absolute;
  width: calc(100% / 3);
  height: calc(100% / 3);
  z-index: 2;
}

.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
  --rotateX: var(--angle);
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
  --rotateX: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
  --rotateX: var(--angle);
  --rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
  --rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
  --rotateX: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: var(--angle);
}


/* 1st, 4th, 7th */

.mouse-position-tracker>div:nth-of-type(3n - 2) {
  left: 0;
}


/* 2nd, 5th, 8th */

.mouse-position-tracker>div:nth-of-type(3n - 1) {
  left: calc(100% / 3);
}


/* 3rd, 6th, 9th */

.mouse-position-tracker>div:nth-of-type(3n) {
  right: 0;
}


/* 1-3 */

.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
  top: 0;
}


/* 4-6 */

.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
  top: calc(100% / 3);
}


/* 7-9 */

.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
  bottom: 0;
}


/* general styling */

 :root {
  --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Embers {
  cursor: pointer;
}

.Darkmode-Theme-Card {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 5deg;
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  left: 10%;
  bottom: 80%;
}

.Darkmode-Theme-Card > :where(h1, p) {
    background: rgba(221, 221, 221, 0.432);
    margin: 0;
    padding: 0.5rem;
  }
  
  .mouse-position-tracker {
    position: absolute;
    inset: 0;
  }
  
  .mouse-position-tracker > div {
    position: absolute;
    width: calc(100% / 3);
    height: calc(100% / 3);
    z-index: 2;
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
    --rotateX: var(--angle);
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
    --rotateX: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
    --rotateX: var(--angle);
    --rotateY: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
    --rotateY: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
    --rotateX: calc(var(--angle) * -1);
  }
  
 .Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: var(--angle);
  }
  
  /* 1st, 4th, 7th */
  .mouse-position-tracker > div:nth-of-type(3n - 2) {
    left: 0;
  }
  /* 2nd, 5th, 8th */
  .mouse-position-tracker > div:nth-of-type(3n - 1) {
    left: calc(100% / 3);
  }
  /* 3rd, 6th, 9th */
  .mouse-position-tracker > div:nth-of-type(3n) {
    right: 0;
  }
  
  /* 1-3 */
  .mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
    top: 0;
  }
  
  /* 4-6 */
  .mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
    top: calc(100% / 3);
  }
  
  /* 7-9 */
  .mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
    bottom: 0;
  }
  
  /* general styling */
  :root {
    --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
      0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
      0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
      0px 37px 80px rgba(0, 0, 0, 0.07);
  }

  .Darkmode-Theme-Card
  {
    cursor:pointer;
  }

#SettingsBox
{
  position:relative;
  height:850px;
  width:1400px;
  background-color:rgba(0, 0, 0, 0.25);
  border-radius:20px;
  box-shadow: -5px 5px 15px #111a;
  margin:auto;
  top:10%;
}

How to Use GraalVM to Execute JavaScript Code Making REST Calls Using Java?

I’m trying to use GraalVM to execute JavaScript code that makes a REST call using Java. Below is the code I am working with:

JavaScript Code:

import axios from "axios";
const API_URL = "https://jsonplaceholder.typicode.com/posts";
const fetchPosts = async () => {
try {
const response = await axios.get(API_URL);
console.log("Posts:", response.data);
} catch (error) {
console.error("Error fetching posts:", error);
}
};
// Call the function
fetchPosts();

Bundled JavaScript using es bundle
Java Code to Execute the ES Bundled Code:

public static void main( String[] args )
{
String jscode = null;
try {
jscode = new String(Files.readAllBytes(Paths.get("/tmp/main.js")));
} catch (IOException e) {
throw new RuntimeException(e);
}
try (Context context = Context.create()) {
Value value = context.eval("js", jscode);
value.execute();
}
}

pom.xml:

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<graaljs.version>24.1.1</graaljs.version>

<dependency>
  <groupId>org.graalvm.polyglot</groupId>
  <artifactId>polyglot</artifactId>
  <version>${graaljs.version}</version>
</dependency>
<dependency>
  <groupId>org.graalvm.polyglot</groupId>
  <artifactId>js</artifactId>
  <version>${graaljs.version}</version>
  <type>pom</type>
</dependency>
<dependency> <!-- all tools we include in Oracle GraalVM -->
  <groupId>org.graalvm.polyglot</groupId>
  <artifactId>tools</artifactId>
  <version>${graaljs.version}</version>
  <type>pom</type>
</dependency>


<dependency>
  <groupId>junit</groupId>
  <artifactId>junit</artifactId>
  <version>3.8.1</version>
  <scope>test</scope>
</dependency>

When I run the above code, I encounter the following error:

Error fetching posts: AxiosError: There is no suitable adapter to dispatch the request since :
adapter xhr is not supported by the environment
adapter http is not available in the build
adapter fetch is not supported by the environment

Could someone please help me figure out how to properly use GraalVM to execute JavaScript code that makes a REST call in Java?

Thank you in advance!

How can I create hyperlinkOrPicture column types on SharePoint Lists with Microsoft Graph API or Sharepoint API?

Background

I am working on a script in JavaScript that generates new columns for a given Sharepoint List. I have been referencing the Graph API which defines the column types and what should be present in the payload for the POST requests to create new columns. To format the request I have referred to the following: https://learn.microsoft.com/en-us/graph/api/list-post-columns?view=graph-rest-1.0&tabs=http.

The following code from my script that is working for almost all types: (text, dateTime, boolean, choice, currency, etc…)

const graphApiUrl = `https://graph.microsoft.com/v1.0/sites/${siteId}/lists/${listId}/columns`;
const response = await fetch(graphApiUrl, {
    method: "POST",
    headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": "application/json",
    },
    body: JSON.stringify(graphPayload),
});

if (!response.ok) {
    const errorDetails = await response.text();
    logError(`Failed to create column "${field.name}": ${response.statusText}nDetails: ${errorDetails}`);
    return; 
}

const responseData = await response.json();

Unfortunately, I am having an issue with the hyperlinkOrPicture columns… For instance the following combinations of payloads do not work:

// payload for hyperlink column
{ 
   name: 'URL', 
   hyperlinkOrPicture: { isPicture: false } 
}
// payload for picture column 
{
  name: 'Files (Image Files Only)',
  hyperlinkOrPicture: { isPicture: true }
}

The following error occurs:

ERROR: Failed to create column "URL": Bad Request
Details: {"error":{"code":"invalidRequest","message":"Invalid request","innerError":{"date":"2025-01-03T21:32:54","request-id":"ad66da6b-c273-409a-801c-aabe918c80e2","client-request-id":"ad66da6b-c273-409a-801c-aabe918c80e2"}}}

# similar for the second column

The above formatting comes from the documentation:

Research and Attempt at Solution

Bad Graph API Documentation

Before resorting to making a post on here, I did my best to research as much as possible: both from other posts, and Microsoft’s API documentation. I knew there was a possibility that the API documentation was missing something because the Graph documentation in particular for Lists related requests is very minimal in detail, and tends to just include examples without a thorough breakdown of all the fields that are necessary in the body of the requests. I noticed this when working on the second part of my script which was to insert items into the columns I generated.

Example: Inserting a new Item to a “choice” column type with multipleSelects enabled.

If we look at the documentation it is very minimal and does not provide any example for all possible fields: https://learn.microsoft.com/en-us/graph/api/listitem-create?view=graph-rest-1.0&tabs=http

I had to resort to another post that mentioned how to have this done.

Thus, I was hoping that something like this was the case for the hyperlinkOrPicture columns – which in the Sharepoint API are referred to as different types: https://learn.microsoft.com/en-us/previous-versions/office/sharepoint-csom/ee540543(v=office.15). It states that there is a ‘URL’ Field, with a value of 11, and a ‘File’ field with a value of 18. Clearly, there is a disconnect here and cause of confusion.

Using Sharepoint API Instead

After not finding anything on the Graph API documentation as to why hyperlinkOrPicture column type happens to be the only column type that is not being created properly, even though I am following the formatting, I decided to try the Sharepoint API. However, I have been having a difficult time setting that up and having an issue with the token that I am using. Even though I have Sites.FullControl.All Application Access, and have followed the instructions in this post from MicroSoft to setup app-only token access: https://learn.microsoft.com/en-us/sharepoint/dev/solution-guidance/security-apponly-azuread, by including a certificate to my registered app on azure, I am still getting an error that says the following:

ERROR: Failed to create SharePoint column "URL": Unauthorized
Unsupported app only token.

I am not sure why this is only an issue with SharePoint API when Graph API is working just fine with similar permissions.

I am using the following payload according to SharePoint API documentation to create the new column:

const isPicture = field.type === 'multipleAttachments';
const sharePointPayload = {
    __metadata: { type: "SP.Field" },
    Title: columnName,
    FieldTypeKind: 11,
    Required: false,
    EnforceUniqueValues: false,
    UrlFormat: isPicture ? 1 : 0, // 0 for Hyperlink, 1 for Picture
    Description: columnPayload.description,
};

Request is below…

const sharePointApiUrl = `${SITE_URL}/_api/web/lists(guid'${listId}')/fields`;

try {
    const response = await fetch(sharePointApiUrl, {
        method: "POST",
        headers: {
            Authorization: `Bearer ${sharePointAccessToken}`,
            Accept: "application/json;odata=verbose",
            "Content-Type": "application/json;odata=verbose",
        },
        body: JSON.stringify(sharePointPayload),
    });

    if (!response.ok) {
        const errorDetails = await response.text();
        logError(
            `Failed to create SharePoint column "${columnName}": ${response.statusText}n${errorDetails}`
        );
    }

    log(`SharePoint column "${columnName}" created successfully.`);

} catch (error) {
    logError(`Error creating SharePoint column "${columnName}": ${error.message}`);
}

I am not completely certain if the above is the correct payload for creating a hyperlinkOrPicture column type in SharePoint Lists. I would not be able to know since I am getting the previous error I mentioned with regard to the token.

If someone could come up with a solution by using just the Graph API, that would be the best; however, I would also like to know what I may be doing wrong in the setup process to have SharePoint API requests working.

Compare dependencies changes using two lock file

In a project that is broken but no changes in my source code, I suspect something changed in my dependency tree.

I have both lock file, I have tried to do like this:

grep 'version:' yarn.lock > yarn-versions.txt
grep 'version:' yarn-old.lock > yarn-old-versions.txt
diff yarn-versions.txt yarn-old-versions.txt

And this is the result of the diff:

❯ diff yarn-versions.txt yarn-old-versions.txt
156d155
<   version: 0.0.0-use.local
317c316
<   version: 0.6.5
---
>   version: 0.6.2
319c318
<   version: 0.6.5
---
>   version: 0.6.2
321c320
<   version: 0.6.5
---
>   version: 0.6.2
323c322
<   version: 0.6.5
---
>   version: 0.6.2
325c324
<   version: 0.6.5
---
>   version: 0.6.2
327c326
<   version: 0.6.5
---
>   version: 0.6.2
329c328
<   version: 0.6.5
---
>   version: 0.6.2
331c330
<   version: 0.6.5
---
>   version: 0.6.2
843d841
<   version: 9.1.0
1079d1076
<   version: 6.4.2
1181c1178
<   version: 2.22.17
---
>   version: 2.22.12
1673d1669
<   version: 1.1.1
1676d1671
<   version: 4.0.2
1854d1848
<   version: 1.8.2
1970d1963
<   version: 0.2.10

Not very easy to read, I must be not the first one to have this need.

I use yarn 4.3.1, how can I know all dependencies that have been modified/added/deleted?

Comapre dependencies changes using two lock file

In a project that is broken but no changes in my source code, I suspect something changed in my dependency tree.

I have both lock file, I have tried to do like this:

grep 'version:' yarn.lock > yarn-versions.txt
grep 'version:' yarn-old.lock > yarn-old-versions.txt
diff yarn-versions.txt yarn-old-versions.txt

And this is the result of the diff:

❯ diff yarn-versions.txt yarn-old-versions.txt
156d155
<   version: 0.0.0-use.local
317c316
<   version: 0.6.5
---
>   version: 0.6.2
319c318
<   version: 0.6.5
---
>   version: 0.6.2
321c320
<   version: 0.6.5
---
>   version: 0.6.2
323c322
<   version: 0.6.5
---
>   version: 0.6.2
325c324
<   version: 0.6.5
---
>   version: 0.6.2
327c326
<   version: 0.6.5
---
>   version: 0.6.2
329c328
<   version: 0.6.5
---
>   version: 0.6.2
331c330
<   version: 0.6.5
---
>   version: 0.6.2
843d841
<   version: 9.1.0
1079d1076
<   version: 6.4.2
1181c1178
<   version: 2.22.17
---
>   version: 2.22.12
1673d1669
<   version: 1.1.1
1676d1671
<   version: 4.0.2
1854d1848
<   version: 1.8.2
1970d1963
<   version: 0.2.10

Not very easy to read, I must be not the first one to have this need.

I use yarn 4.3.1, how can I know all dependencies that have been modified/added/deleted?

Can I reference form state from outside form using PrimeVue Forms

I’m trying to use PrimeVue Forms and I have validation working using Valibot (though I think this question is agnostic of what validation framework I’m using).

In my template, I have the following:

    <Form
      v-slot="form"
      :initialValues="location"
      :resolver
      @submit="formSubmit"
      class="h-full flex flex-col justify-between"
    >
      <!-- Form -->
      <div class="flex flex-col overflow-auto gap-4">
        <!-- Details  -->
        <Panel :header="label('details')">
          <div class="flex flex-col gap-4">
            <!-- Name  -->
            <div class="flex flex-col">
              <IftaLabel>
                <InputText name="name" type="text" placeholder="" fluid />
                <label>{{ label("floor_name") }}</label>
              </IftaLabel>
              <div class="text-xxs text-right mt-1" v-if="form?.name?.invalid">{{ form.name.error?.message }}</div>
            </div>
          </div>
        </Panel>
      </div>
      <!-- Footer -->
      <div class="safe bottom mt-4">
        <div class="flex gap-2 justify-between">
          <div></div>
          <div class="flex gap-2">
            <Button icon="fa-sharp fa-light fa-xmark" :label="label('discard')" severity="warn" @click="discard(form)" />
            <Button icon="fa-sharp fa-light fa-floppy-disk" :label="label('save')" type="submit" :disabled="!form.valid" />
          </div>
        </div>
      </div>
    </Form>

My question is this – can I reference the state of the form from JavaScript outside the scope of the form itself? For example, could I have a computed value that determines if the form is dirty or not? I’m using the following to determine if the form is dirty from functions called from the form, but can’t work out how to get field dirty states from outside the form.

const discard = async (form) => {
  console.log(
    "Dirty",
    Object.keys(form).reduce((result, key) => result || form[key].dirty === true, false)
  );
};

Are there any UI libraries built on top of shadcn-ui with extended components?

I am exploring the shadcn-ui library for my project and am impressed with its design and components. However, I am curious to know if there are any third-party UI libraries or component collections built on top of shadcn-ui that provide additional or extended components.

For instance, I am looking for components or features that are not currently part of the official shadcn-ui library.

Any suggestions or recommendations would be greatly appreciated. If you’ve used such libraries, please share your experience and let me know how well they integrate with shadcn-ui.

Error decrypting AES-encrypted text from file through stdin and pipe to stdout in Node.js

Let’s say we have a file named foobar.enc and a script called decrypt-from-stdin-to-stdout.js. the file foobar.enc contains an AES-encrypted text. This text is unencrypted as follows: “foobar”.

The script is being called in this way:

cat foobar.enc | node decrypt-from-stdin-to-stdout.js

Expected output on console should be: “foobar”
But it is “fooba” instead.

Im am working with Windows 10 Professional and Cygwin and Node v20.9.0. Another test with same input file and script on a native Debian system yields the same strange result.

So what is the problem with the script?
This is the script:

const crypto = require('crypto');
const zlib = require('zlib');


function createCipherKeyBuffer(passwordStr) {
  return crypto.createHash('sha256').update(passwordStr).digest();
}


const stdoutStream = process.stdout;
const stdinStream = process.stdin;

let decipherStream;
let initVectBufferCreated = false;


stdinStream.on('data', inputBuffer => {
  if (inputBuffer.length >= 16 && !initVectBufferCreated) {
    const initVectBuffer = inputBuffer.subarray(0, 16);
    initVectBufferCreated = true;

    const unzipStream = zlib.createUnzip();

    const cipherKeyBuffer = createCipherKeyBuffer('power237');
    decipherStream = crypto.createDecipheriv('aes256', cipherKeyBuffer, initVectBuffer);

    /*stdinStream.on('end', () => {
      console.error('stdinStream on end');
    });*/

    decipherStream.write(inputBuffer.subarray(16, inputBuffer.length));
    decipherStream
      .pipe(unzipStream)
      .pipe(stdoutStream);

  } else if (inputBuffer.length < 16) {
    console.error('input too small');
    process.exit(1);

  } else {
    decipherStream.write(inputBuffer);
  }
});

Some hints:

I know using passwords in source code is a bad habit. But this code is not for production purposes but only for test. I would just like to understand the main problem.

When I use a larger text like “foobarbazboz”, everything is working fine.
The file foobarbazboz.enc contains the encrypted text.

Calling like:

cat foobarbazboz.enc | node decrypt-from-stdin-to-stdout.js

This outputs (as expected):

“foobarbazboz”

This is the Base64-encoded data for the file foobar.enc:

9BoTOZenA+Ynw0m9/Qzqij9Wzw/VkkuVGXR/jm2+YneeQ08L75ylM6gk+EmhwYJE

And this is the Base64-encoded data for the file foobarbazboz.enc:

zKTsPq7wvdW7dxSj/tNTtC9R7sAvPhrBsgbFDcvSE7CgvGY7DWyBsDtroOh1gOVwUhCv3TbBCb8Ar+UU3DeDAw==

Since the both input files contains binary (encrypted) data and because I want to avoid external resources, I have decided to encode them with Base64 and print them here.
I am sorry for that circumstance. So please first decode the strings and write them to the test files mentioned above.

You can decode them like as follows:

echo "9BoTOZenA+Ynw0m9/Qzqij9Wzw/VkkuVGXR/jm2+YneeQ08L75ylM6gk+EmhwYJE" | base64 -d > foobar.enc

echo "zKTsPq7wvdW7dxSj/tNTtC9R7sAvPhrBsgbFDcvSE7CgvGY7DWyBsDtroOh1gOVwUhCv3TbBCb8Ar+UU3DeDAw==" | base64 -d > foobarbazboz.enc