Blancer.com Tutorials and projects

I’m trying to wrap my head around how to use the Web Audio API. I’m building a simple EQ Google Chrome extension to help EQ some bad-sounding audio I listen to on YouTube and elsewhere.

There’s a quirk about the API, I’m not fully understanding. I’ve read the documentation and still don’t understand something fundamental –

Why is that with the Gain Node, you can create an instance of it two ways- one, using the factory method on the audio context, and the other with the new GainNode() syntax.

Do other audio nodes have this option? Or just the Gain node? If so, why just the gain node, and not the EQ per se?

✅ const gain = window._audioCtx.createGain();
✅ const gainNode = audioContext.createGain();

Works!

❌ const EQ = window._audioCtx.createEQ();
✅ const EQ = new BiquadFilterNode(window._audioCtx);

I have a MutationObserver to perform some logic as DOM elements are being added. At the end I need to disconnect the observer. That decision is itself based on whether a certain element exists or not. If the loadingElement no longer exists in the DOM, that’s when I need to disconnect the observer. But is it safe to do this inside the MutationObserver function?

    const targetElement = document.querySelector('div.serviceRequest');

    // Create a MutationObserver
    const observer = new MutationObserver(function(mutationsList) {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                updateSubmenuWhenScrolling();
            }
            // TODO: If a certain element is no longer found, need to disconnect
            // let loadingElement = document.querySelector('div.loading');
            // if (!loadingElement) {
            //    observer.disconnect(); // ???
            // }
        }
    });

    // Configure the observer to watch for child list changes in the subtree
    const config = { childList: true, subtree: true };

    // Start observing the target element
    if (targetElement) {
        observer.observe(targetElement, config);
    }

I have a Three.js scene where I animate a Rubik’s-cube–style object by “zooming out” (scaling it down) and I’d also like it to drift toward the top-right corner of the viewport as it shrinks. Right now the scaling works perfectly, but any translation I apply to the scene or the camera has no visible effect.

Link to my code
https://github.com/Osman-bin-nasir/Portfolio

Tried translating the scene

Tried panning the camera by capturing its initial position and then updating each frame

I have a Shiny app where when one input is changed, I want other inputs to update. In the example I’ve provided below, I have a autonumericInput() with a starting value of 1. There’s also an actionButton(), and clicking on this button is supposed to update the autonumericInput() in 3 ways:

1. Change the value from 1 to 10. (which works)
2. Change the number of decimal places displayed from 2 (the default starting value) to 0. (also works)
3. Change the color of the font from red to black. (doesn’t work!)

Upon clicking the actionButton, the value in the autonumericInput should go from 1.00 to 10, along with a text color change. But the color change not working makes me think that the style update isn’t being acknowledged for some reason. Any idea why?

Example code:

library(shiny)
library(shinyWidgets)

server = function(input, output) {
  
  shiny::observeEvent(input$button, {
    
    # This is where the update happens. The value and decimal places get updated,
    # but not the text color.
    shinyWidgets::updateAutonumericInput(
      inputId = "test",
      value = 10,
      options = list(
        decimalPlaces = 0,
        style = "color: black;"
      )
    )
    
  })
  
}

ui = function() {
  
  # This is how the app loads, and all styling works just fine.
  shiny::fluidPage(
    shiny::actionButton(inputId = "button", label = "Press Me"),
    shinyWidgets::autonumericInput(
      inputId = "test",
      label = NULL,
      value = 1,
      style = "color: red;"
    )
  )
    
}

shiny::shinyApp(ui = ui, server = server)

I’ve also messed around with font-size & various other style-related CSS options within the updateAutonumericInput() call, but none are applied when I click the actionButton().

In following schema:

const mySchema = z.object(
  {
    key1: z.string().nonempty(),
    key2: z.record(z.unknown()).optional(),
    key3: z.string().optional(),
  },
  { error: (iss) => (Array.isArray(iss.input) ? 'custom message' : undefined) }
)
.strict();

When schema is given an array I would like to receive a custom message, and if it is not an array or not an object the standard error message, “expected object, received …”.

I do not understand why but when safe parsing a variable which holds an array the schema returns “expected error, received array” instead the custom message.

Any help would be much appreciated.

Say we have a div with some text “Guided Helicopter Tours” as an example. Say the text is positioned to the bottom-left of a div 150h x 100w, whose width requires a word-wrap. The goal is to get it to break so orphans only exist for the top most line.

Normal wrapping :

"Guided Helicopter
Tours"

vs. what we want

"Guided
Helicopter Tours"

I’ll have no control over the titles, so I can’t hardcode <br>s or know how it will flow for any given device – any ideas?

I am trying to release a program to our IIS Server, but I keep getting TS2307 Error at this stage in the pipeline:

• task: VSBuild@1
  inputs:
  solution: ‘$(solution)’
  msbuildArgs: ‘/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:DesktopBuildPackageLocation=”$(build.artifactStagingDirectory)WebApp.zip” /p:DeployIisAppPath=”Default Web Site”‘
  platform: ‘$(buildPlatform)’
  configuration: ‘$(buildConfiguration)’

I am not familiar with typescript and just want to push this up so others can view it. Is there any way I can accomplish this or solve these issues so I can push the program up?

I have read other posts on this error and tried to implement their solutions but to no success

HTML

<dialog id="dialog-1" class="dialog">
<button class="close" autofocus>×</button>
<p>Thank you!</p>
</dialog>
<button class="button open">Click Here</button>

<dialog id="dialog-2" class="dialog">
<button class="close" autofocus>×</button>
<p>Thank you!</p>
</dialog>
<button class="button open">Click Here</button>

JS

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");
showButton.addEventListener("click", () => {
dialog.showModal();
});
closeButton.addEventListener("click", () => {
dialog.close();
});

Only the first dialog found on the page opens when clicked, but each respective dialog should open/close independently when interacted with.

I’m new to ASP.NET and JavaScript. I just want to show a simple JavaScript alert when I click an ASP.NET button.

Here’s what I have:

<asp:Button ID=”btnClickMe” runat=”server” Text=”Click Me” />

How can I make it show a message like “Hello!” when clicked?

Thanks!

(question raised as an assigment requirement)

I’m building a full-page slider using the Swiper library.

It works great, but I’m struggling with scroll behavior management at the end of the slider on desktop.

My requirements for desktop are:

• Control the slider with mouse wheel and touchpad events
• Force users to view each slide completely before allowing further scrolling
• When reaching the final slide, release scroll control to resume normal page scrolling
• When scrolling back up to the slider, reactivate the custom scroll behavior

The main issue is with how Swiper’s releaseOnEdges option handles scroll event release. The scroll is either completely blocked or released immediately upon reaching the last slide.

This creates problems with touchpad users (which I must support) on Windows and macOS. The touchpad’s momentum scrolling continues after reaching the last slide, causing users to jump from the first slide directly to the middle of the page when releaseOnEdges is enabled. Interestingly, this issue doesn’t occur on Ubuntu.

Here’s a CodeSandbox demonstrating the issue:

https://codesandbox.io/p/sandbox/swiper-mousewheel-control-forked-dn5jwg?file=%2Findex.html%3A81%2C32

What I tried:

• Intercepting the scroll event previously triggered by swiper with the touchpad
  -> Can’t intercept a previously triggered event, or didn’t find how
• Setting the window scroll position when getting to the last slide
  -> No effect
• removing the releaseOnEdges options, and add a native event listener on wheel (the scroll will be blocked on the slider element unless swiper is disabled, based on what I saw) at the last slide after the transition has finised (slideChangeTransitionEnd) + add a set a timeout to try to absorb the touchpad momentum
  -> no effect, the event is triggered directly and the scroll event goes on

I may have missed a configuration option, or there might be a way to properly halt the scroll event at the last slide before releasing control back to the page. However, I haven’t found a solution yet.

Any suggestions would be greatly appreciated!

Thanks!

I’m trying to fetch Instagram data using a hashtag search.
For each result, I need the following fields:

Username

Followers count

Image URL

Likes

Comments

It’s for development/testing purposes.

✅ If anyone has a working solution, even if it’s a paid one with a free tier or a scraping approach, please let me know.

Thanks in advance!

I’ve checked some APIs on RapidAPI, but most of them are either limited or outdated.

I am developing my kibana plugin. I coded some tests which I can run in local easily like this:

TMPDIR=$HOME/tmp TEST_BROWSER_HEADLESS=0 yarn test --functional-test --testConfigFile ./test/functional/config.js

Now it is getting more complicated I want to run those tests in a Docker. I have a Dockerfile running kibana with my plugin working well. Then I try to run this bash script

cd plugins/my-plugin
CHROME_OUTPUT=$(npx @puppeteer/browsers install chrome@136)
npx @puppeteer/browsers install chromedriver@136
TEST_BROWSER_BINARY_PATH=$(echo "$CHROME_OUTPUT" | grep -oE '/.*chrome-linux64/chrome')
cd -

sudo apt install -y 
  default-jre 
  chromium-chromedriver

yarn es snapshot &
(NODE_OPTIONS="--max-old-space-size=4096" yarn start --no-base-path >startup.log &) &&
  while ! grep -q "Kibana is now available" "startup.log"; do
    echo "Pattern not found, checking again..."
    tail startup.log
    sleep 10
  done

TAGS=$1

if [ -z "TAGS" ]; then
  TMPDIR=$HOME/tmp TEST_BROWSER_BINARY_PATH=$TEST_BROWSER_BINARY_PATH TEST_BROWSER_HEADLESS=1 yarn --cwd plugins/my-plugin test --functional-test --testConfigFile ./test/functional/config.js
else
  TMPDIR=$HOME/tmp TEST_BROWSER_BINARY_PATH=$TEST_BROWSER_BINARY_PATH TEST_BROWSER_HEADLESS=1 yarn --cwd plugins/my-plugin test --functional-test --testConfigFile ./test/functional/config.js --tags "$TAGS"
fi

yarn test is running

node /home/.../kibana/scripts/functional_test_runner.js --config /home/.../my-config.js

Here is my-config.js

export default async function ({ readConfigFile }) {
  const functionalConfig = await readConfigFile(
    require.resolve(`${REPO_ROOT}/test/functional/config.base`)
  );

  const baseConfig = functionalConfig.getAll();
  return {
    // Inherit Kibana function test config
    ...baseConfig,
    services: {
      ...baseConfig.services,
      dataGridHelper: DataGridHelperService,
    },
    security: {
      ...baseConfig.security,
      disableTestUser: true,
    },
    servers: {
      kibana: {
        protocol: 'http',
        hostname: 'localhost',
        port: 5601,
        auth: 'elastic:changeme',
        username: 'elastic',
        password: 'changeme',
      },
      elasticsearch: {
        protocol: 'http',
        hostname: 'localhost',
        port: 9200,
        username: 'elastic',
        password: 'changeme',
        auth: 'elastic:changeme',
      },
    },
    testFiles: [require.resolve('./tests')],
    browser: {
      type: 'chrome',
    },
    uiSettings: { defaults: undefined },
    junit: {
      enabled: true,
      reportName: 'Table actions UX/UI Integration Tests',
    },
    screenshots: {
      directory: `${__dirname}/screenshots`,
    },
    snapshots: {
      directory: `${__dirname}/snapshots`,
    },
    failureDebugging: {
      htmlDirectory: `${__dirname}/failure_debug/html`,
    },
  };
}

So like I said in local on my machine it is working no problem but in my Docker container I have this error (actually it is in Jenkins):

 debg KIBANA_CI_STATS_CONFIG environment variable not found, disabling CiStatsReporter
 debg Loading config file from test/functional/config.js
 debg Loading config file from ../../test/functional/config.base.js
 debg Loading config file from ../../test/common/config.js
 debg Only running suites which are compatible with ES version 9.0.2
 debg randomness seed: 1750946212975
 debg [webdriver] Creating session
 warn Failure while creating webdriver instance
 warn SessionNotCreatedError: session not created: probably user data directory is already in use, please specify a unique value for --user-data-dir argument, or don't use --user-data-dir
          at Object.throwDecodedError (/home/.../kibana/node_modules/selenium-webdriver/lib/error.js:523:15)
          at parseHttpResponse (/home/.../kibana/node_modules/selenium-webdriver/lib/http.js:524:13)
          at Executor.execute (/home/.../kibana/node_modules/selenium-webdriver/lib/http.js:456:28)
          at processTicksAndRejections (node:internal/process/task_queues:95:5)
          at Executor.<anonymous> (prevent_parallel_calls.ts:49:14) {
        remoteStacktrace: '#0 0x5c1f64bff7fa <unknown>n' +
          '#1 0x5c1f646a3e90 <unknown>n' +
          '#2 0x5c1f646ddcfb <unknown>n' +
          '#3 0x5c1f646d9a3f <unknown>n' +
          '#4 0x5c1f64729c15 <unknown>n' +
          '#5 0x5c1f64729136 <unknown>n' +
          '#6 0x5c1f6471b013 <unknown>n' +
          '#7 0x5c1f646e7b3b <unknown>n' +
          '#8 0x5c1f646e87a1 <unknown>n' +
          '#9 0x5c1f64bc4b9b <unknown>n' +
          '#10 0x5c1f64bc8a8a <unknown>n' +
          '#11 0x5c1f64bac912 <unknown>n' +
          '#12 0x5c1f64bc9604 <unknown>n' +
          '#13 0x5c1f64b9174f <unknown>n' +
          '#14 0x5c1f64bed678 <unknown>n' +
          '#15 0x5c1f64bed856 <unknown>n' +
          '#16 0x5c1f64bfe666 <unknown>n' +
          '#17 0x73e869214ac3 <unknown>n'
      }

What could I have forget in the config.js or in the bash script

I’m needing to put a pixel on our WordPress site for Follow Up Boss.

I installed WPcode, copied the code Follow Up Boss gave me, pasted it in, applied it to my site wide header, priority 10, but it’s not working. Below is the snippet of code they gave:

<!-- begin Widget Tracker Code -->
<script>
(function(w,i,d,g,e,t){w["WidgetTrackerObject"]=g;(w[g]=w[g]||function()
{(w[g].q=w[g].q||[]).push(arguments);}),(w[g].ds=1*new Date());(e="script"),
(t=d.createElement(e)),(e=d.getElementsByTagName(e)[0]);t.async=1;t.src=i;
e.parentNode.insertBefore(t,e);})
(window,"https://widgetbe.com/agent.js",document,"widgetTracker");
window.widgetTracker("create", "WT-MEUEPSGZ");
window.widgetTracker("send", "pageview");
</script> 
<!-- end Widget Tracker Code -->

I’m building a dynamic UI engine in Angular (v15+) where I need to load different components at runtime based on configuration. These components each have different @Input() and @Output() properties.

What I’m trying to achieve:

Render multiple dynamic components using ViewContainerRef.createComponent()

Bind @Input() values dynamically (even though each component has different inputs)

Subscribe to @Output() events generically

Cleanly destroy or replace components when needed

    const componentConfigs = [
        {
            component: ButtonComponent,
            inputs: { label: 'Click Me' },
            outputs: { clicked: () => alert('Button clicked') },
        },
        {
            component: CardComponent,
            inputs: { title: 'Card Title', content: 'Lorem ipsum' },
            outputs: { selected: data => console.log(data) },
        },
    ];

    loadComponent(config) {
      const componentRef = this.container.createComponent(config.component);

     // How to set `@Input()` and bind `@Output()` safely?
    }

My Questions:

How can I dynamically bind arbitrary @Input() and @Output() properties using createComponent()?

Is there a type-safe or generic way to handle components with different input/output contracts?

What’s the best practice for cleaning up subscriptions from @Output() when destroying components?

This seems like a common requirement in CMS-style systems or dynamic form builders. Most examples show how to dynamically load one static component, but I’m looking for a flexible pattern that supports many components with unique bindings.

I am getting the following error in next js

⨯ Error: 401 status code (no body)
at u.generate (.next/server/chunks/765.js:1:340449)
at ac.makeStatusError (.next/server/chunks/765.js:1:373620)
at ac.makeRequest (.next/server/chunks/765.js:1:374560)
at async o (.next/server/chunks/606.js:127:9282)
at async u (.next/server/chunks/606.js:127:8187)
at async A (.next/server/app/(home)/api/route.js:139:58546) {

There are no problems with server actions, api(s), Auth or anything else to the best of my knowledge.

The npm run dev works fine, but with npm run build, and then start this error occurs.

Major technologies being used in project(may or may not be related to the error): Prisma with Supabase Postgres, Next js, WorkOS Authkit, Dodo Payments API.

After npm run build and then npm run start, evrything works fine, but this error occurs and for some reason when on a VPS with dokploy, the Auth and Prisma don’t even work.