Author: Blancer

How does the Dawn theme update the cart drawer when adding a product via a custom button? [closed]

I am working with the Dawn theme in Shopify and currently developing a Shopify app. As part of this app, I want to add a Quick Buy Me button on the product page.

When the customer clicks this button, the product should be added directly to the cart drawer, similar to how the product page native “Add to Cart” button works in Dawn.

Could someone explain how the Dawn theme handles cart drawer updates when the “Add to Cart” button is clicked, and how I can replicate the same behaviour for my custom button?

Is there a custom event in the Dawn theme that I can use to update the cart drawer when triggering it from my custom button?

What I expected:
I expected the cart drawer to refresh and display the newly added product, the same way it does when using Dawn’s built-in Add to Cart button.

What’s the best service to upload images to and later get via an API call for display in a web app? [closed]

I’m working on a simple website for a client’s business. They want to be able to upload images whenever they want and have them show up on the website. I figure I’ll need to use some kind of API for this. I’ve looked around for options. Imgur costs $500/month to allow this, which is far out of my client’s budget. Google API would require a user to sign in to their Google account every time to get images they upload to their Google Drive, and that’s not what I have in mind for the user experience. I just want my client to be able to put images in a place somewhere and have my app load those images onto a webpage.

Validating CSS property value in JS without browser and synchronously [closed]

There is an application, using Node.JS inside, that evaluates my Javascript code.

I want to check from this code, whether a string is a valid value for a CSS property. (“Valid” according to the most recent standard of W3C — any regularly updating source/library is fine).

Since my Javascript code is not executed by a browser (and I cannot just try setting the value to an element), my first approach was sending a request with the following CSS:

.test
{
    ${cssProperty}: ${cssValue};
}

to https://jigsaw.w3.org/css-validator and look, what it returns (if ${cssValue} is not valid for ${cssProperty}, the service returns an error).

Unfortunately, the application cannot process results of any async functions / requests.

Is there a regularly updated JS library or npm module with a CSS validator? Not just a list of predefined values, but a parser of colors etc. Is caniuse-lite a suitable tool for the task? (I cannot find any examples of its using).

Full width navigation menu with shadcn UI or radix primitives

I have tried all day to get the NavigationMenu component in both Radix and Shadcn to span the full screen viewport width but to no avail. I have used every trick imaginable including the “left-0 -translate-x-1/2” (using tailwind utilities here) trick and even the NavigationMenuViewport component that was recently added but still no luck, every time the results aren’t consistent and the drop-down content overflows the page.

I realized it is because the content are constrained to the boundaries of the NavigationMenuList. Any help on achieving this reliably?

This is what I’m trying to build (below is a screenshot of the Flowbite MegaMenu template)
flowbite mega menu

How can I get this to prompt the user WHERE to save the file?

I’ve implemented the following on an editable page, that allows the user to save their changes (it’s kind of like a very specialized tiddlywiki)

function saveWebpage() {
// Get the full HTML of the page
  const htmlContent = '<!DOCTYPE html>n' + document.documentElement.outerHTML; 
// Create a Blob from the HTML content
  const blob = new Blob([htmlContent], { type: 'text/html' }); 
// Create a URL for the Blob
  const url = URL.createObjectURL(blob); 
// Create a temporary anchor element
  const a = document.createElement('a'); 
  a.href = url;
// Set the desired filename for the downloaded file
  a.download = 'StatblockDatabase.html'; 
// Append the anchor to the document body (necessary for click)
  document.body.appendChild(a); 
// Programmatically click the anchor to trigger download
  a.click(); 
// Remove the temporary anchor
  document.body.removeChild(a); 
// Release the object URL
  URL.revokeObjectURL(url); 
}

In Chrome, the browser prompts for where to save the file.
But in other browsers (Edge, Opera, Firefox), it automatically saves it to the user’s default download folder.
All 3 of these browsers, if you ‘Ctrl-S’, will prompt you where to save, what to name the file, etc.

Is there any way I can add functionality to trigger THAT behavior?

Stuck With Meta Tags Rendering Of My React Application

I have my application built in with React + Vite` in JavaScript.

I use React v19 meta tags which don’t need helmet are working perfectly fine

Then I used React snap, but problem is none of the meta tag is visible in page source in inspect element I can see meta tags.

So web crawlers who execute JavaScript (only Google) can crawl it perfectly but others who not execute JavaScript can’t crawl it

I want a solution which will render full page perfectly with meta tags dynamically in page source without JavaScript.

I have used react-helmet react-snap, don’t give me advise to switch to SSR.

How to validate JSON structure from API response before processing in JavaScript?

I’m working with a third-party API that occasionally returns malformed JSON responses. Before I parse and process the data in my JavaScript application, I want to validate that the JSON structure is correct to avoid runtime errors.

What I’ve tried:

  • Using JSON.parse() with try-catch, but this only catches syntax errors, not structural validation
  • Manual property checking, but this becomes unwieldy with nested objects

What I’m looking for:

  • A way to validate JSON schema/structure before processing
  • Ideally something that works client-side for security reasons
  • Should handle nested objects and arrays

Example of the API response I need to validate:

{
  "users": [
    {
      "id": 123,
      "name": "John",
      "email": "[email protected]"
    }
  ],
  "meta": {
    "total": 1,
    "page": 1
  }
}

Implementing a search function with Desandro’s Masonry

I’ve used this css-tricks article to add a search function to my page; it searches for images using the alt text and hides any images that don’t match the query. I’m also using Desandro’s Masonry to display my images. Everything works, technically, but since I’m only hiding the images themselves and not the div element containing them, there’s large amounts of empty space between the images when the user inputs a search query.

I want the divs containing each image to be hidden so the images the user actually searches for will be displayed at the top.

I’ve tried an if/else function to hide the divs if the images were hidden, but I couldn’t figure out how to make it work with the keyup delay (that’s another part of the css-tricks search function). I’ve also tried switching the querySelectorAll from ‘.image’ to ‘.grid-item’, but this breaks the masonry (images will appear in a single column rather than in a cascading grid).

JavaScript

Promise.all(Array.from(document.images).filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() => { var elem = document.querySelector('.grid');
    var msnry = new Masonry( elem, { 
      // options
    itemSelector: '.grid-item', columnWidth: 210, gutter: 10, horizontalOrder: true}); 
    }); 
    
    
    
    let boxes = document.querySelectorAll('.image')
    
    function liveSearch() {
        let search_query = document.getElementById("searchbox").value;
    
        for (var i = 0; i < boxes.length; i++) {
            if (boxes[i].getAttribute('alt').toLowerCase()
                .includes(search_query.toLowerCase())) {
                boxes[i].classList.remove("is-hidden");
            } else {
                boxes[i].classList.add("is-hidden");
            }
        }
    }

    let typingTimer;
    let typeInterval = 500;
    let searchInput = document.getElementById('searchbox');
    
    searchInput.addEventListener('keyup', () => {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(liveSearch, typeInterval);
    });

HTML

<label for="searchbox"><b>⌕</b></label>
<input type="search" id="searchbox" placeholder="Search...">

<script src="/scripts/masonry.pkgd.min.js"></script>
<div class="grid">

<div class="grid-item"><img class="image" src="/images/img1.png" alt="type1" style="width:210px;"></div>
            
<div class="grid-item"><img class="image" src="/images/img2.png" alt="type2" style="width:210px;"/></div>
            
<div class="grid-item"><img class="image" src="/images/img3.png" alt="type1" style="width:210px;"></div>

CSS

#searchbox {
  width: 300px;
  color: #ffffff;
  background-color: #000000;
  border-radius: 4px;
  padding: 5px;
}

.is-hidden { display: none; }

    
.grid-item {
  width: 210px; 
  margin-bottom: 10px;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

Here’s an example of what’s happening on JSFiddle

I would prefer a solution in vanilla JS if possible.

How to create persistent, programmatically-controlled content tags in PDF in Adobe Reader/Pro

What I’m trying to achieve:

  • Tag user-selected text in PDFs with unique IDs
  • Navigate to any tag programmatically using its ID
  • Extract the text content within tag boundaries
  • Prevent users from easily deleting tags through Acrobat’s UI
  • Send/receive tag data to/from an external server using API’s
  • Preferably integrate it with a react app

Specific questions:

Is there a way to create truly hidden markers/tags in PDFs that are only accessible via API but invisible to users in all Acrobat panels?
Can PDF Structure Tags be manipulated via JavaScript, or do they require C++ SDK? If JavaScript supports them, how?
What’s the recommended approach for integrating a React UI within an Acrobat plugin? Is CEF (Chromium Embedded Framework) the only option?
How can I protect annotations/tags from user deletion while maintaining programmatic access? Is there an event I can intercept?

Environment:

Adobe Acrobat Pro DC (2021 or later)
Acrobat JavaScript API (preferred) or C++ SDK if necessary

Currently the best option I could find is PDF embed API and in that using annotations.
Any guidance on the best approach or alternative PDF objects I should consider?

Creation of the PIN button in the chrome extention’s popup so that it won’t close automatically

I’m working on a custom Chrome extension and I need some help implementing a “pin” button in the extension’s popup header. The idea is that when the pin button is clicked, it should keep the popup window open, even if the user clicks outside of it.

Right now, as with most Chrome extensions, clicking anywhere outside the popup causes it to close. I’d like to override or prevent that default behavior using the pin button, similar to how pinned popups stay open.

I’ve attached a screenshot to better illustrate what I’m trying to achieve.
If you could guide me on how to implement this or share any relevant JavaScript or suggested mechanisms.

Please guide me about this how can it be done

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Extension Popup</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      width: 800px;
      height: 600px;
      box-sizing: border-box;
      overflow: hidden;
    }

    .header {
      background-color: #d4aa29;
      color: white;
      padding: 16px;
      position: relative;
      font-size: 28px;
      font-weight: bold;
    }

    .pin-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 40px;
      height: 40px;
    }

    .content {
      padding: 30px;
    }

    .instruction {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 30px;
      max-width: 600px;
      line-height: 1.5;
    }

    .popup-box {
      border: 2px solid blue;
      padding: 40px;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
      width: fit-content;
    }

    .arrow {
      position: absolute;
      top: 70px;
      right: 90px;
      width: 250px;
      height: 0;
      border-top: 4px solid blue;
      transform: rotate(-30deg);
      transform-origin: right;
    }

    .arrow::after {
      content: "";
      position: absolute;
      right: -5px;
      top: -7px;
      width: 0;
      height: 0;
      border-left: 10px solid blue;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
  </style>
</head>
<body>

  <div class="header">
    Extention Header
    <img class="pin-icon" src="https://img.icons8.com/ios-filled/50/000000/pin.png" alt="Pin Icon" />
  </div>

  <div class="arrow"></div>

  <div class="content">
    <div class="instruction">
      I have to apply this extension pin here<br>
      which when clicked it would prevent<br>
      the extension's popup window from closing.
    </div>

    <div class="popup-box">
      Content of the popup goes here
    </div>
  </div>

</body>
</html>

Highcharts timezone options

I am trying to understand how the timezone option in time works. The API page links to a jsfiddle with two different charts using distinct time zones. The charts seem to have no difference regarding their axis labels and data tooltip. So, my question is: what does timezone actually do?

I changed the original demo code to add a new chart with different time zone and also added a call to time.dateFormat() method for each chart and log the result in the console. There, I can see different outputs that respect the time zones defined for each chart.

Here’s the link to the jsfiddle: https://jsfiddle.net/pofd3sLh/1/

Sample code of one of the charts:

Highcharts.chart("container2", {
  title: {
    text: "New York time",
  },

  time: {
    timezone: "America/New_York",
  },
  xAxis: {
    type: "datetime",
  },

  series: [
    {
      data: [
        29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
        95.6, 54.4,
      ],
      pointStart: "2017-01-01",
      pointInterval: 36e5,
    },
  ],
})

Why i cant delete user’s account from firebase authentication using firebase functions?

I tried to delete user’s account from firebase authentication using firebase functions, but it throws me an error.

Error type: The email address is improperly formatted.

index.js (firebase Functions)——-

const functions = require("firebase-functions");
const admin = require("firebase-admin");

admin.initializeApp();

exports.deleteUserByEmail = functions.https.onCall(async (data, context) => {
  console.log("Raw data received:", data);

  // Always read email safely
  const email = data.emailuser;

  // if (!email) {
  //   console.error("No valid email provided.");
  //   return {success: false, error: "No valid email provided."};
  // }

  console.log("Parsed email for deletion:", email);

  try {
    const userRecord = await admin.auth().getUserByEmail(email);
    await admin.auth().deleteUser(userRecord.uid);
    return {success: true, message: `Deleted user ${email}`};
  } catch (error) {
    console.error("Error deleting user:", error);
    return {success: false, error: error.message};
  }
});

deleteUser.js (Frontend)———–

 const handleDelete = async (docid, emailuser) => {

    if (!emailuser || typeof emailuser !== "string") {
    console.error("Invalid email provided to handleDelete:", emailuser);
    return;
  }

  const confirmDelete = window.confirm('Are you sure you want to delete this student?');

  if (confirmDelete) {
    const deleteUserByEmail = httpsCallable(functions, "deleteUserByEmail");

 
      // Try to delete from Firebase Auth first
      const result = await deleteUserByEmail({ emailuser });
     if (result.data.success) {  
        alert(`Student deleted successfully. ${result.data.message}`);
        setshowArchivemodal(false);
      } else {
        // Handle function failure
        console.error("Function returned error:", result.data.error);
        // alert(`Error: ${result.data.error}`);
      }
      setshowArchivemodal(false);
      
    //delete from firestore---------------
    
        await deleteDoc(doc(firestore, "students", docid));

    
  }
};

Framework i used: React js

I want to delete user’s account from the firebase authentication using firebase function

Audio Output Device Getting and Selection

I am working on a video conferencing solutions web app and I am having issues while fetching the audio output devices on mobile browsers.

  • I am able to get audio output devices on laptop browsers using useMediaDeviceSelect from livekit and I get the list of all the available output devices like, Default Speakers, Bluetooth Earphones etc.
  • But In mobile, it just shows “Default” and doesn’t list all the audio output devices connected to my mobile.

How can I get the list of the audio output devices on mobile? and how can I switch them? Even if the solution is non livekit.

I have tried getting audio output devices using navigator function of browser as well.

const useSpeakerDevices = () => {
    const [speakerDevices, setSpeakerDevices] = useState([]);
  
    const getSpeakerDevices = useCallback(async () => {
      if (!navigator.mediaDevices?.enumerateDevices) return [];
      const allDevices = await navigator.mediaDevices.enumerateDevices();
      return allDevices.filter(device => device.kind === "audiooutput");
    }, []);
  
    useEffect(() => {
      (async () => {
        const audioDevices = await getSpeakerDevices();
        setSpeakerDevices(audioDevices);
      })();
    }, [getSpeakerDevices]);
  
    return speakerDevices;
  };

But this also had the same output, I just get to see “Default” on mobile browser and not all the output devices connected to my mobile.

But I am able to get and select audio input devices easily using the same method on mobile.

Display information box when hovering over Info icon

I’m working on a project where I need to display a little information box when I hover over the i icon (PhInfo). We currently use Vuejs and Vuetify for most styling. What’s the best way to get this result?

<v-col>
  <div>
    <strong> user info </strong>

    <PhInfo class="ml-3" :size="20" />
  </div>
</v-col>