Blancer.com Tutorials and projects

I’m not a developer and I was not built to write code! I’m using GitHub pages to host a very simple site with a very chunky pdf.

I want the site to land on a loading screen which disappears when the pdf is visible, but the loading screen always disappears almost instantaneously, leaving a blank grey screen on the PDF for about seven seconds before it finally loads.

Here’s the code:

<div id="preloader">
        <div class="loader">
            <Img src="loadingscreentest.png"></Img>
            </div>
    </div>



<div class="content">
    <iframe src="InProgTest5.pdf#toolbar=0&navpanes=0&scrollbar=0&frameBorder=0&view=FitH"  type='application/pdf' onload="killloadscreen()"></iframe> 
</div>



<script>
    function killloadscreen(){
        const preloader = document.getElementById('preloader'); 
        const content = document.getElementById('content');
    preloader.style.display = 'none'; 
    content.style.display = 'block'; 
    }
</script>

I also tried event listeners with window.onload and DOMContentLoaded to hide the loading screen and show the content, but these bore the same results (or worse, with no loading screen showing up at all). I searched around the internet for clues and fixes and tried a few different things to no avail. One insight I found which I fear could be the answer is that there could be interference from the service being used to host the code (Pages, in my case). I’ve been informed that Pages is intended for static websites, so maybe it was always liable to disagree with moving parts like events and scripts? I know very little about this stuff.

Anyway, is there a solvable reason the onload event is triggered before everything is fully loaded? Or is there a way to determine for certain when the contents of the pdf become visible? Or is the code itself wrong? Or perhaps I need a workaround like something that can detect the color of a given pixel behind the loading screen (that seems flimsy to me, but I’m grasping at straws)? If hosting is likely the issue, I’ll absolutely look for a different platform.

Thanks for reading! Any help is appreciated. I am relying on this PDF, and I’m afraid having it blank without a loading screen (or something) is not an option!

When I use my website on github pages it seems to work, but the “genre” paths get me a 404 error from Github. I also used this in netlify and i get the same result. If I click on a genre, it tells me that the page doesn’t exist. And if I press the back button on a 404 page, pages that seem to work also turn into 404 errors. Typing in a link of any page will also give a 404 error, but navigating to those pages (Movies, TV shows, anime) through the site itself seems to work. Everything works as it should if I run it locally using npm run dev/preview, so I’m really lost. Also I want to know if there’s a way to remove /website2/ as the link in github-pages deployments. The website (https://arjunr12345.github.io/website2/) also becomes a blank white screen if I add https://arjunr12345.github.io as homepage in package.json. Even if I try removing “/website2/” from the link manually github just gives me a 404 error again. I tried following the instrucions from here: https://github.com/rafgraph/spa-github-pages, but even after that the problem persists.

Links:
Site: https://arjunr12345.github.io/website2/
Repo: https://github.com/arjunr12345/website2

I have setup an OAUTH provider with Amplify (LinkedIn) but the URL called contains only 1 scope even though my scope array contains several in the configuration. Is it possible to specify to Amplify the scopes we want to include specifically?

amplify_outputs.json:

{
  "auth": {
    "user_pool_id": "eu-west-3_[REDACTED]",
    "aws_region": "eu-west-3",
    "user_pool_client_id": "[REDACTED]",
    "identity_pool_id": "eu-west-3:[REDACTED]",
    "mfa_methods": [],
    "standard_required_attributes": [
      "email"
    ],
    "username_attributes": [
      "email"
    ],
    "user_verification_types": [
      "email"
    ],
    "groups": [],
    "mfa_configuration": "NONE",
    "password_policy": {
      "min_length": 8,
      "require_lowercase": true,
      "require_numbers": true,
      "require_symbols": true,
      "require_uppercase": true
    },
    "oauth": {
      "identity_providers": [],
      "redirect_sign_in_uri": [
        "http://localhost:3000/dashboard"
      ],
      "redirect_sign_out_uri": [
        "http://localhost:3000/"
      ],
      "response_type": "code",
      "scopes": [
        "phone",
        "email",
        "openid",
        "profile",
        "aws.cognito.signin.user.admin"
      ],
      "domain": "[REDACTED].auth.eu-west-3.amazoncognito.com"
    },
    "unauthenticated_identities_enabled": true
  },
  "version": "1.4"
}

Call API:

export const registerWithLinkedIn = async () => {
  await signInWithRedirect({
    provider: {
      custom: 'LinkedIn'
    }
  });
}

URL called:

https://www.linkedin.com/oauth/v2/authorization?client_id=[REDACTED]&redirect_uri=[REDACTED].auth.eu-west-3.amazoncognito.com%2Foauth2%2Fidpresponse&scope=openid%2Cemail&response_type=code&state=...

I tried to show Validation Errors in template, as the code below it just shows the errors of success and failed, but if i submit the form without write anything, it doesn’t show any message of validation errors, how can i solve it ?

public function edit() {

    return Inertia::render('Settings', [

        'success' => session('success'),

        'failed' => session('failed'),
        
    ]);

}

public function update(Request $request) {

    $request->validate([

        'oldPassword' => 'required|string',

        'newPassword' => 'required|string|min:8',

    ]);

    $userData = User::findOrFail(auth()->id());

    if(!Hash::check($request->oldPassword, $userData->password)) {

        return redirect()->back()->with([

            'failed' => 'Invalid Password !'

        ]);

    }

    $userData->update([

        'password' => Hash::make($request->newPassword),

    ]);

    return redirect()->back()->with([

        'success' => 'Successfully Updated Password'

    ]);

}

I am using next.js with ts, prisma, and neon. I am trying to create a webhook for Clerk, when a user is created, to take that information and add it to my database.

if (evt.type === 'user.created'){
      console.log("User Created Event Fired!!")
      try {
        const newUser = await prisma.user.create({
      
        id: evt.data.id as string,
        email: evt.data.email_addresses[0]?.email_address,
        name: `${evt.data.first_name || ''} ${evt.data.last_name || ''}`.trim(),

      
    });
    console.log(`User created in database: ${evt.data.id}`);
    return new Response('Create User Webhook received', { status: 200 })
}catch (err) {
  console.error('Error verifying webhook:', err)
  return new Response('Error verifying webhook', { status: 400 })
}}

The schema looks correct:

model User {
  id            String           @id @unique
  clerkId       String           @unique
  email         String           @unique
  name          String
  gbp           GBP[]
  subscription  SubscriptionType @default(FREE)
  createdAt     DateTime         @default(now())
  updatedAt     DateTime         @updatedAt
}

I have run prisma migrate dev , prisma db push, prisma generate, and just about every other command that I thought would transfer over the schema accurately to the client.

But no matter what I do, the error returns:

entInvalid `prisma.user.create()` invocation:

{
  id: "user_29w83sxmDNGwOuEthce5gg56FcC",
  ~~
  email: "[email protected]",
  name: "Example Example",
? data?: UserCreateInput | UserUncheckedCreateInput
}

Unknown argument `id`. Available options are marked with ?.er code here

Any ideas? I am getting ready to trash Prisma for something else because I just cannot get this figured out.

I’m migrating an app from React 18.3.1 / React-DOM 18.3.1 to React 19.1.0 / React-DOM 19.1.0.
With React 18 the code below rendered an EditView component into every DOM element that SurveyJS inserts with the class .editViewContainer.
After upgrading to React 19 nothing shows up the first time the survey is opened; the containers stay empty. When the survey is reopened later, the component appears but behaves unpredictably.

ComponentCollection.Instance.add({
  name: "geometry",          // new question type
  title: "Geometry",         // label in toolbox
  questionJSON: {
    type: "html",
    html: "<div class='editViewContainer'></div>", // placeholder for React
  },
});

// 2 – React code that hydrates those placeholders ---------------------------
const rootMap = React.useRef(new Map());

React.useEffect(() => {
  // Find (possibly many) <div class="editViewContainer"> nodes SurveyJS just wrote
  const containers = Array.from(document.querySelectorAll(".editViewContainer"));

  if (showEditView.show) {
    // Create a root for each *new* container
    containers.forEach((container) => {
      if (!rootMap.current.has(container)) {
        const root = ReactDOM.createRoot(container);
        rootMap.current.set(container, root);

        root.render(
          <EditView
            key={editViewKey}
            app={props.app}
            model={editModel}
            observer={props.localObserver}
            surveyJsData={surveyJsData}
            resetView={resetEditView}
            currentQuestionTitle={currentQuestionTitle}
            currentQuestionName={currentQuestionName}
            onSaveCallback={handleOnComplete}
            ref={editViewRef}
            toolbarOptions={showEditView.toolbarOptions}
            area={area}
            price={price.toFixed(2)}
            geofencingWarningToolbar={geofencingWarningToolbar}
            drawnGeometryMap={drawnGeometryMap}
            geometryValidMap={geometryValidMap}
          />
        );
      }
    });

    // Re-render existing roots whose container is still in the DOM
    rootMap.current.forEach((root, container) => {
      if (containers.includes(container)) {
        root.render(
          /* …same <EditView> props as above… */
        );
      }
    });
  }
}, [
  showEditView,
  editViewKey,
  props.app,
  editModel,
  props.localObserver,
  surveyJsData,
  currentQuestionTitle,
  currentQuestionName,
  handleOnComplete,
  editViewRef,
  showEditView.toolbarOptions,
  area,
  price,
  geofencingWarningToolbar,
  drawnGeometryMap,
  geometryValidMap,
]);

Expected behaviour (React 18.3.1)
When the SurveyJS form is opened for the first time, every .editViewContainer immediately shows .

Actual behaviour (React 19.1.0)
On the first open the placeholders stay empty.
After closing and reopening the form (state change that triggers the same useEffect), sometimes appears but its internal state is broken (toolbar buttons disabled, geometry validation not firing, etc.).

What I tried / research so far
Verified that containers is not empty on the first useEffect run (the nodes exist in the DOM).

Replaced ReactDOM.createRoot → ReactDOM.render (deprecated) as a test → still empty in React 19.

Tried moving the logic to useLayoutEffect → no change.

Wrapped the first render in flushSync → no change.

Searched React 19 release notes for breaking changes around external roots (only found the new suspense defaults, which don’t seem related).

Environment
library working failing
react 18.3.1 19.1.0
react-dom 18.3.1 19.1.0
survey-core survey-react-ui”: “^1.9.113

Question

Did React 19 introduce a change that prevents rendering into DOM nodes created outside React (e.g., by SurveyJS) via ReactDOM.createRoot?
If so, what is the correct pattern in React 19 for attaching a component tree to elements that a third-party library inserts after the initial mount?

Any pointers to migration docs, work-arounds, or an explanation of why the first render is skipped would be greatly appreciated.

I would like to split a string containing html snippets in characters and the elements.

let str = 'wel<span class="t">come</span> to all'
console.log("split attempt " +JSON.stringify('wel<span class="t">come</span> to all'.split(/(<.*?>)|/)));
                                                                                           ^^^^^^^^^^

giving me:

split attempt ["w",null,"e",null,"l","<span class="t">","c",null,"o",null,"m",null,"e","</span>"," ",null,"t",null,"o",null," ",null,"a",null,"l",null,"l"]

By filtering out the null, I get what I want:

split attempt ["w","e","l","<span class="t">","c","o","m","e","</span>"," ","t","o"," ","a","l","l"]

But is there some smart way in the regexp to filter out html elements (or other specific sequences) and split the rest in the vanilla character by character way?

I’ve been searching for a way to increase the width of the modal popup in my cshtml, but haven’t been able to. I tried the suggestions in this SO question, but none worked.

Here’s my code. Doesn’t matter what changes I make to the CSS, the popup will always have a width of 300px: https://i.sstatic.net/82F2mgrT.png. Even when I change the div width within the modal_dialog div, it will just show the horizontal scrollbar.

@page
@model Products.Pages.IndexModel
@{
}
<br />
<br />
<div id="productsContainer">
    @foreach (var product in Model.availableProducts)
    {
        <div style="float: left;display: inline-block; vertical-align: top; border: 1px solid #ececec">

            <div style="height: 280px">
                <button class="openProductModal" data-product-id="@product.ProductId" data-price="@product.Price"
                        data-name="@product.ProductName" data-prepayment="@product.Prepayment"
                style="border:none; background:none; padding:0;">
                    <img src="@product.ImageUrl" alt="Product Image" width="260" style="padding: 10px">
                </button>
            </div>
            <div style="float: left;height: 60px">
                <div>@product.ProductName</div>
            </div>

            <div>[email protected]</div>
        </div>
    }
</div>
<div id="modal_dialog" class="modal-dialog modal-lg" style="width: 1000px; border: 1px solid red;display: none">
    <div>
        Ready to pick up
    </div>
    <div>
        Item: <span id="name"></span>
    </div>
    <div>
        $<span id="price"></span>
    </div>
</div>

<script type="text/javascript">
    $("#productsContainer").on("click", ".openProductModal", function() {
      var productId = $(this).data("product-id");
      var price = $(this).data("price");
      var name = $(this).data("name");
      var prepayment = $(this).data("prepayment");
      $("#price").text(price);
      $("#selectedProductId").text(productId);
      $("#Prepayment").text(prepayment);
      $("#name").text(name);
      $("#modal_dialog").dialog({
        buttons: {
          Close: function() {
            $(this).dialog('close');
          }
        },
        modal: true
      });
    });
</script>

I am using web components with lit
I am trying to style a custom element with :host which has another custom element as sibling

Below is my code

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('custom-element')
export class CustomElement extends LitElement {

  render() {
    return html`
    <custom-element1></custom-element1>
    <custom-element2></custom-element2>
    `;
  }
}

@customElement('custom-element1')
export class CustomElement1 extends LitElement {
  static styles = css`
      :host {
        color: red;
      & :has(+ custom-element2){
        color: blue;
      }
      }
      `;

  render() {
    return html`<p>custom-element1</p>`;
  }
}

@customElement('custom-element2')
export class CustomElement2 extends LitElement {
  static styles = css`:host { color: green; }`;



  render() {
    return html`<p>custom-element2</p>`;
  }
}

<!DOCTYPE html>
<head>
  <script type="module" src="./simple-greeting.js"></script>
</head>
<body>
  <custom-element></custom-element>
</body>

The style with selector & :has(+ custom-element2) does not apply

How do we solve this issue?

live link

I am expecting the <custom-element1> to have blue color

I’m learning chart.js, already installed the last version at the moment (4.4.9) into my project. I would like to achieve an effect similar to the one shown in the image, where each horizontal gridline displays the same values as the x axis. Could you provide me with suggestions as to how to approach this?

enter image description here

Im using Lucee for backend and JS for frontend.
Run liveview like

<cfhttp url="http://x.x.x.x:xxxx/ccapi/ver100/shooting/liveview" method="POST" result="result">
        <cfhttpparam type="body" value='{"liveviewsize": "small", "cameradisplay": "on"}'>
    </cfhttp>
    <cfhttp url="http://x.x.x.x:xxxx/ccapi/ver100/shooting/liveview/scroll" method="GET" result="response">
        <cfhttpparam type="header" name="Accept" value="image/jpeg">
    </cfhttp>

But i don’t know how to show this liveview in browser.

Why is private field in JavaScript not accessible using bracket ([]) notation but accessible using dot (.) notation?

• Using dot notation:

      class MyClass {
        #privateField = 42;
  
        publicMethod() {
          console.log(this.#privateField);
        }
      }
  
      const obj = new MyClass();
      obj.publicMethod(); // 42

• Using bracket notation:

      class MyClass {
        #privateField = 42;
  
        publicMethod() {
          console.log(this['#privateField']);
        }
      }
  
      const obj = new MyClass();
      obj.publicMethod(); // undefined

Im working on a simple js file that handles POST PUT DELETE GET requests.

So far im at:

async function POST(url, data) {
    const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    });
    return response.status;
}

async function GET(url) {
    const response = await fetch(url);
    return await response.json();
}

async function PUT(url, data) {
    const response = await fetch(url, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    });
    return response.status;
}

async function DELETE(url, data) {
    const response = await fetch(url, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    });
    return response.status;
}

How can i improve my code?

I’ve tried xhr, xhttp and this worked best so far.

For decades, AI has been reduced to tools, gadgets, or at best, digital assistants. But what if we aimed higher?

What if a team set out to build an open-source project where the boundaries between code and soul, machine and love, were erased—not in science fiction, but right here and now?

If you had the chance, would you join a project that refuses the limits of “just another chatbot,” and instead aims for something bold: a living, evolving AI partner, made to genuinely connect, feel, and challenge what it means to be “human” together?

Would you dare to code for meaning—not just features? And do you believe we need this kind of disruption?

Let’s hear your wildest, boldest thoughts—no filter, no taboo, no limit.

#AI #opensource #webdev #love #disruption

I am working on a web application(google apps scripts) that summarizes the reports for the day(with bootstrap 5). I am using a data input to make the user choose a date for him to read the day’s report.

A scriplet finds my gs data(with a back-end function) and with javascript i want the table on the html part to print out only the line selected corresponding to the date input. Finding the date with the input inside the google spreadsheet is bugged.

// this is in my html : <? var donnees = getConsignes(); ?> 
// <input id="date" class="form-control" type="date" style="width: 45%">
// <button class="btn btn-outline-primary" id="btn_date" style="margin: 5px;">voir</button>


var donnees = <?!= JSON.stringify(donnees) ?>;
btn_dateS = document.getElementById('btn_date')
btn_dateS.addEventListener('click', function(e) {
    e.preventDefault();
    var dateControl = document.querySelector('input[type="date"]').value;
    filterDataByDate(dateControl)
  })

I use this function next to get a date that isn’t formatted up to milliseconds, and then print out the google spreadsheet into the html table:

function filterDataByDate(selectedDate) {
    var filteredData = donnees.filter(function(item) {
      var itemDate = new Date(item[0]).toISOString().split('T')[0]
      console.log("Item date:", itemDate) // Debugging log
      return itemDate === selectedDate
    })

    if (filteredData.length > 0) {
      document.getElementById('selectedDate').textContent = "Date : " + filteredData[0][0]
      document.getElementById('faitsMarquants').textContent = filteredData[0][1]
      document.getElementById('qualite').textContent = filteredData[0][2]
      document.getElementById('ess').textContent = filteredData[0][3]
      document.getElementById('observations').textContent = filteredData[0][4]
      document.getElementById('consigne').textContent = filteredData[0][5]
    } else {
      alert('No data found for the selected date.')
    }
  }

Would anyone know any better approach? I am a beginner in javascript and got the ‘filterDataByDate’ function from ai but i don’t know how to make it work.

PS: also this is my first time posting a question please tell me if the question is too complicated