Blancer.com Tutorials and projects

Go easy on me – I don’t spend a lot of time in javascript. Plus I’m having a hard time explaining my situation to be able to look for solutions that may already exist.

I work for a healthcare organization that uses a service called Healthwise to provide medical library content for our website. Healthwise provides their content via an API that outputs full HTML code, including CSS and Javascript. I have successfully connected to the API and can display content from it on a test server.

To get that content displayed within my production website, I have to feed it in via Javascript. This is where I’m running into problems. My Javascript pulls in the HTML and CSS just fine. But any Javascript from the API is not working, whether it’s a linked file or inline code.

I considered grabbing the Javascripts from the API and calling them directly from my Javascript. But the files and inline code all change depending on the content the API is serving. So short of downloading and calling EVERY script they have every time, which I know would be horrible practice, there’s no way for me to do that. How can I get my Javascript to accept and run the Javascript provided by the API?

I’m currently working on a JavaScript application and I have a div that uses two pseudo-elements (::before and ::after). I’ve set background images on both pseudo elements using CSS.

I want to change the background images of those pseudo elements dynamically when a certain event happens in JavaScript.

As far as I know we can’t directly select or manipulate pseudo-elements like ::before or ::after using JavaScript, so instead I’m targeting the main element itself. How can I change the background images of the pseudo-elements using JavaScript?

If anyone knows a good way to do this, I’d really appreciate the help.

I’m getting a An unknown error has occurred. when using fetchAuthSession() from aws-amplify/auth

fetchAuthSession() is console logging {"_h": 0, "_i": 0, "_j": null, "_k": null}

const uploadImage = async (img_1) => {

  try {

    await fetchAuthSession();
    console.log(fetchAuthSession())

    await uploadData({ path: `public`, data: img_1, }, { accessLevel: 'guest', contentType: 'image/jpeg' });
    // Upload the image
    console.log("Iamge uploaded")

  } catch (error) {
    console.error(error);
  }
};

I am working on a small STEM project that helps kids learn about the Solar System. For development, I am using PHP, CSS, SQL, jQuery, and AJAX.

Currently, I have an SQL query that generates three random buttons below a search bar, and the search functionality is working fine. My issue arises when I attempt to collect the planet ID values for storage in local storage. While I can successfully do this with Vanilla JS (see Script1.js), the jQuery code I’ve written only collects the value from the first button generated (see Script2.js).

Can anyone help identify the issue? It would be greatly appreciated!

PHP code

JS Code

Vanilla JS results via console

JQuery results via console

Nodemailer has been running fine for 3+ years on this web app.

Just renewed the certificate today with certbot and now the app crashes every time it tries to send an email.

Never had this issue before.

I’m using Gmail SMTP – I have tried generating a new app password with no luck.

Any ideas? New Gmail update I missed?

Error: Connection timeout
    at SMTPConnection._formatError (/home/USERNAME/apps/APPNAME/node_modules/nodemailer/lib/smtp-connection/index.js:807:19)
    at SMTPConnection._onError (/home/USERNAME/apps/APPNAME/node_modules/nodemailer/lib/smtp-connection/index.js:793:20)
    at Timeout.<anonymous> (/home/USERNAME/apps/APPNAME/node_modules/nodemailer/lib/smtp-connection/index.js:237:22)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7) {
  code: 'ETIMEDOUT',
  command: 'CONN'
}

I am trying to post a website to GH pages that works on my localhost

Code

I checked the case, and I am trying to do this myself. There are 3d elements in it with two .js files, I suspect that is the issue. Thanks for your help

I checked the case and copy pasted directly from the localhost. I am not experienced with GH pages. I followed the tutorial and troubleshooting guide as well as I could

I’m trying to build a package, and for that I using rollup

const config: RollupOptions[] = [
    {
        input: "./index.ts",
        output: [
            {
                dir: "dist/cjs",
                format: "cjs",
                sourcemap: true,
                preserveModules: true,
                preserveModulesRoot: ".",
                exports: "named",
            },
            {
                dir: "dist/esm",
                format: "esm",
                sourcemap: true,
                preserveModules: true,
                preserveModulesRoot: ".",
            },
        ],
        plugins: [
            peerDepsExternal() as InputPluginOption,
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            terser(),
        ],
        external: ["react"],
    },
    {
        input: "./index.ts",
        output: {
            dir: "dist/types",
            format: "es",
            preserveModules: true,
            preserveModulesRoot: ".",
        },
        plugins: [dts()],
    },
];

In the index.ts file I have imported and then exported some methods from useFetch.ts and useGraphQL. But the issue is when I build it with rollup -c --bundleConfigAsCjs --configPlugin typescript. It only created index.js. But nothing with the actual code from useFetch.js or useGraphQL.js.

And for this reason when I try to import it as a dependecy it installs. But when I try to import any method, it fails. How can I resolve this issue?

I’m trying to loop through an array of car data and create an array of Car objects using a forEach loop. Then, I want to display each car in the appropriate section of the page depending on whether it is “safetied” or not.

Here’s my Car class:

class Car {
    constructor(manufacturer, model, year, vin, safetied) {
        this.manufacturer = manufacturer;
        this.model = model;
        this.year = year;
        this.vin = vin;
        this.safetied = safetied;
   }

    get outputString() {
        return `${this.manufacturer} ${this.model} ${this.year} with ${this.vin}`;
    }
}

My car data is in a separate file, cardata.js, and looks like this:

let carData = [];
carData.push(["Cadillac","DeVille",1993,"1FTEW1CM7CK070304",true]);
// ... and many more entries in this same array format

Here’s the logic I originally used in parta.js:

let cars = [];

carData.forEach(car => {
    const newCar = new Car(car.manufacturer, car.model, car.year, car.vin, car.safetied);
    cars.push(newCar);
});

But this gave me undefined values or didn’t work as expected.

I’m trying to query the next item in my firestore database when a user clicks on a button but it seems I still don’t understand their documentation. I actually need help in understanding how it actually works. I have spent a lot of time reading their documentation on pagination but it still does not work for me. this is how I try to do it in my code

   async function onNextOrder ()  {

  const first = firebase.firestore().collection('order').doc('requests').collection('pending')
  .orderBy('createdAt')
  .limit(1); 
const snapshot = await first.get();

const last = snapshot.docs[snapshot.docs.length - 1];

const next = firebase.firestore().collection('order').doc('requests').collection('pending')
  .startAfter(last.data().createdAt)
  .limit(1);

  
  next.get().then((snapshot) => {
    let items = snapshot.docs.map(doc => {
      const data = doc.data();
      const id = doc.id;

return{id, ...data }
})
console.log(...items)
  })
  
}

when the button is clicked nothing happens and it’s as if the query is not been called.

I want to create an input field that, while typing, auto-completes the first suggestion starting with the typed text, and also filters a dropdown list to show only options containing the typed substring.

My code correctly filters the dropdown suggestions list, but it doesn’t highlight the typed substring. Also, it doesn’t append the remaining characters of the first match after the typed text, so I can’t accept the suggestion with a Tab key.

I started implementing it in Vue, and this is how far I’ve gotten:

(In my code, the word “App” doesn’t get completed with the “le” in the placeholder; and although the suggestions list works perfectly, it doesn’t highlight the “app” part in the two matching options like in the previous working example screenshot.)

const { createApp, ref, computed } = Vue

const app = createApp({
  setup() {
    const query = ref('')
    const items = [
      'Apple',
      'Banana',
      'Orange',
      'Pineapple',
      'Grapes',
      'Strawberry',
      'Blueberry',
      'Raspberry',
      'Peach',
      'Plum'
    ]
    const filteredItems = ref([])

    // Filtering items based on the user input
    const onInput = () => {
      const minLength = 1 // Minimum length of input for suggestions
      if (query.value.length >= minLength) {
        filteredItems.value = items.filter(item =>
          item.toLowerCase().includes(query.value.toLowerCase())
        )
      } else {
        filteredItems.value = []
      }
    }

    // When an item is selected from the list
    const selectItem = (item) => {
      query.value = item
      filteredItems.value = [] // Hide suggestions after selection
    }

    return {
      query,
      items,
      filteredItems,
      onInput,
      selectItem,
    }
  }
})

app.mount('#app')

.list-group-item {
  cursor: pointer;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <!-- Input Field -->
        <div>
          <input
            v-model="query"
            type="text"
            class="form-control"
            placeholder="Search fruits..."
            @input="onInput"
          />
        </div>
        
        <!-- Suggestions List -->
        <ul v-if="filteredItems.length > 0" class="list-group mt-2">
          <li
            v-for="item in filteredItems"
            :key="item"
            class="list-group-item"
            @click="selectItem(item)"
          >
            <span>{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

I have two pie charts (inner and outer), and they have two data with the same name.

Example:

series: [
                    {
                        name: 'Warnings',
                        size: '90%',
                        innerSize: '80%',
                        dataLabels: {
                            enabled: false,
                        },
                        data: [
                            {
                                name: 'warning',
                                y: warning,
                                color: 'yellow',
                            },
                            {
                                name: 'acknowledged',
                                y: acknowledgedWarnings,
                                color: 'grey',
                            },
                        ],
                    },
                    {
                        name: 'Errors',
                        size: '63%',
                        innerSize: '75%',
                        dataLabels: {
                            enabled: false,
                        },
                        data: [
                            {
                                name: 'error',
                                y: error,
                                color: 'red'
                            },
                            {
                                name: 'acknowledged',
                                y: acknowledgedErrors,
                                color: 'grey',
                            },
                        ],
                    },
                ],

The thing is, I want to merge ‘acknowledged’ data in my legend. I kinda understand how to handle this from itemClick but I also need to hide one of ‘acknowledged’ from legend. And I didn’t find any ways.. not in formatter, not with any flags

Thank you for any help.

When we set INLINE_RUNTIME_CHUNK=FALSE in the environment variables, it doesn’t seem to work. However, when we add it to the package.json file under the build section, it works as expected. Can someone explain why this happens and provide a solution?

“build”: “set INLINE_RUNTIME_CHUNK=false npm run env-based-updates && react-scripts build”

I’m a freelance front-end developer trying to settle on a consistent naming convention for state classes in my projects (e.g., toggling visibility or interactivity of elements like modals, overlays, and menus). I’ve been debating between a few options:

1. .show: Used by Bootstrap for components like modals and collapse (e.g., .modal.show { display: block; }). It feels like a verb (an action), which makes me wonder if it’s ideal for describing a state.
2. .visible: An adjective that clearly describes a state (“it’s visible”), often tied to visibility toggling (e.g., overlays).
3. .open: Another adjective, feels natural for interactive components like modals or menus (“it’s open”).

I noticed Bootstrap sticks with .show for showing elements, paired with JavaScript methods like show() and hide(). Here’s a simple example of how I’m toggling a modal with these options:

<!-- Using .show (Bootstrap style) -->
<div class="modal">Modal Content</div>
<button onclick="toggleShow()">Toggle</button>

<!-- Using .visible -->
<div class="modal">Modal Content</div>
<button onclick="toggleVisible()">Toggle</button>

<!-- Using .open -->
<div class="modal">Modal Content</div>
<button onclick="toggleOpen()">Toggle</button>

<script>
  // .show
  function toggleShow() {
    document.querySelector('.modal').classList.toggle('show');
  }

  // .visible
  let isVisible = false;
  function toggleVisible() {
    isVisible = !isVisible;
    const modal = document.querySelector('.modal');
    modal.classList.toggle('modal--visible');
    modal.classList.toggle('modal--hidden');
  }

  // .open
  let isOpen = false;
  function toggleOpen() {
    isOpen = !isOpen;
    const modal = document.querySelector('.modal');
    modal.classList.toggle('modal--open');
    modal.classList.toggle('modal--closed');
  }
</script>

<style>
  .modal{display: none}
  .show { display: block }
  .modal--visible { display: block; }
  .modal--open { display: block; }
</style>

This confuses me because:
Shouldn’t a class name represent a state (e.g., .visible, .open) rather than an action (.show)?

Why didn’t Bootstrap go with something like .visible or .open instead? Is there a specific reason or history behind .show?

I’m torn between:
Using .show everywhere for simplicity (one term for all components).

Using .visible and .open for clarity (specific states for specific purposes).

What’s the reasoning behind Bootstrap’s choice of .show? Are there best practices or conventions I should follow for my own projects? I’d love to hear your thoughts—especially from those who’ve worked with Bootstrap or built their own naming systems. Examples or references to discussions would be great too!

We would like to implement the paste command from a menu (so that it is executed when the user selects “Edit -> Paste”). But for this we need to access the document element that was active before clicking the menu. How do we achieve this?

With this code, the menu item gets overwritten. This shows that the paste command basically works, but not at the right place.

const doPaste = () => {
  document.activeElement.text = navigator.clipboard.readText()
}

I’m trying to create a chocolate droplet animation on a website, positioned just below the navigation header. When the start page loads, I want chocolate-like droplets to form from nothing and in the end, hang in a pendant shape. The size of each droplet should reflect the number of posts in each category.

For example, if the site has the following categories and post counts:

• Food: 4 posts
• Car: 10 posts
• Flower: 2 posts
• Animal: 8 posts

Then the Car droplet would be the largest, and the Flower droplet the smallest.

I’ve been trying to understand how to form the pendant shape using formulas related to surface tension. I referred to the following sources:

• https://en.wikipedia.org/wiki/Surface_tension#Water -> B. Water dripping from a tap
• Measurement of surface and interfacial tension using pendant drop
  tensiometry -> 3. Theory(p.g. 229)
• example image

However, I’m still having trouble understanding the formulas and how to apply them in a web animation.

Could you help me implement this? Or, if there’s a simpler way to create this kind of droplet animation—perhaps without relying on complex formulas—I’d be happy to hear your suggestions!

Thanks in advance!