Blancer.com Tutorials and projects

I’m an experienced JavaScript developer looking to expand my skill set by learning a new programming language. My goal is to future-proof my career and position myself for higher-paying job opportunities. I’m not targeting any specific domain at the moment, but I want to choose a language that is in high demand, offers strong career prospects, and will continue to be relevant and in demand in the future.

I’m currently considering Go, Python, or Java. I’d really appreciate any suggestions, thoughts, or insights that could help me make an informed decision.

I have two blocks that are in the parent.
The first is a block with a button inside, which is absolutely positioned and is located in the lower right corner of the second block and when pressed, it scrolls to the very bottom. The second block is scrollable content.

<div class="parent">
  <div class="btn-to-bottom">
  </div>
  <div class="scrollable-content">
  </div>
</div>

If the user hovers the mouse over the button and turns the wheel, then the second block does not scroll, can this be fixed?
And preferably without adding to the second deltaY block

I recently updated my app from ember 3.16 to ember 5.12 and have started seeing a weird issue.
My component has started using template from the parent component is it extending.

I am using co-located template in my app

password-with-generator
       |
       ---- component.js
       ---- template.hbs

And the code is as follows
component.js

import {computed, get, set} from '@ember/object'
import {alias} from '@ember/object/computed'
import PasswordInput from 'internal-bunsen/components/inputs/password'
import _ from 'lodash'
import layout from './template'

export default PasswordInput.extend({

  layout,

  showGeneratePassword: computed('disabled', 'options.policyRules',
    // logic
    ).readOnly(),

  init () {
    this._super(...arguments)

    set(this, 'layout', layout)
  },

  actions: {
    generatePassword () {
     //logic
    }
  }
})

template.hbs

{{log 'my template'}}
<div>My template</div>

But after upgrading to ember 5.12, instead of picking this template, template from PasswordInput is used (which is also using classic syntax and colocated tempalate, index.js and index.hbs)

I have tried removing layout from component and couple other things, but nothing works with new ember.
I can’t update it to use glimmer component as I still need PasswordInput’s functionality which I can update.

Is there any way to achieve old functionality?

How do i run batch from the web locally?
I’m trying to kill a process locally (sas.exemy own file) but from web.

So I’ve been learning asp.net core and razor, and it’s been awesome. I finally created the div structure bound to my sql data, and that was pretty cool.

My next step is to display a modal popup when I click on one of the divs generated in the foreach loop.

I added the input button just before the foreach, and the modal popup is displayed. When I try to implement this within the divs created in the @foreach, the popup doesn’t show.

What am I doing wrong? The references to the jquery css and js libraries are in _Layout.cshtml.

As an additional mini-question: how can I make the background darker when the modal popup is shown?

    @page
    @model Products.Pages.IndexModel
@{
}
<input type="button" id="btnModalPopup" value="Modal Popup before foreach loop" />
<br />
<br />
@foreach (var product in Model.availableProducts)
{

    <div style="float: left;display: inline-block; vertical-align: top>
        <div>
            <input type="button" id="btnModalPopup" value="Modal Popup in foreach loop" />
            @* <input type="image" src="@product.ImageUrl" id="btnModalPopup" alt="Submit" width="240" height="240"> *@
        </div>
        <div style="float: left;height: 60px">
            <div>@product.ProductName</div>
        </div>

        <div>[email protected]</div>
    </div>
}
<script type="text/javascript">
    $("#btnModalPopup").on("click", function () {
        $("#modal_dialog").dialog({
            title: "jQuery Modal Dialog Popup",
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
    });
</script>
<div id="modal_dialog" style="display: none">
    Modal panel popup
</div>

In JavaScript, Object inherits properties through the prototype chain.

Example :

// Parent Function
function Person(name, age) {
  this.name = name;
};

Person.prototype.hello = function() {
  console.log(`Hello ${this.name}`);
}

// Child Function
function Employee(name, company) {
  this.name = name;
  this.company = company;
}

// Inheriting from Person's prototype
Employee.prototype = Object.create(Person.prototype);

// Method on Employee prototype
Employee.prototype.profile = function() {
  console.log(`${this.name} is working in ${this.company}.`);
};

// Create an instance of Employee
const emp = new Employee('Alpha', 'Google');

// Now, Employee can access both Employee's and Person's methods
emp.hello(); // Method from Person
emp.profile(); // Method from Employee

Query : What if we modify the prototype chain in weird ways?

Example :

function Person(name) {
  this.name = name;
}

Person.prototype.hello = function() {
  console.log(`Hello ${this.name}`);
};

const alpha = new Person('Alpha');

console.log(alpha.constructor === Person); // Retuning true
console.log(alpha.constructor === Object); // Returning false

// Modifying the prototype chain.
Person.prototype = { hello: function() { console.log("Hello!"); } };

const beta = new Person('Beta');
console.log(beta.constructor === Person); // Retuning false
console.log(beta.constructor === Object); // Returning true

Why it is behaving differently ? As a workaround do we need to restore the constructor property on the prototype after modifying it ?

Today I was playing around with prototypical inheritance when I came across this problem statement.

Need to produce packets exchange with hardware device via com port, in c, c++ – is not a problem with types of vars like int/uint with binary length, but in js – all variables is signed.

Device request:

[ 0x0A, 0xC7, 0xAC, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xE2, 0xAF ]

Device answer:

[ 0xFE, 0x9A, 0xAC, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xA4, 0x9B ]

32 byte per packet, where 0x00 – is filled data, send data – no problem:

something.write(new Uint8Array(packets.request))

all fine.

Device answer parse – in js – problems with encoding received data, its received as encoded text, not as binary data.

Example to repeat:

let bytes = new Uint8Array(packets.answer);
let text = new TextDecoder('ascii').decode(bytes);

console.log(bytes);
console.log(text);
console.log(text.getBytes());
console.log(text.split("").map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join(' '));

Outputs:

Uint8Array(32) [254, 154, 172, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 164, 155, buffer:
ArrayBuffer(32), byteLength: 32, byteOffset: 0, length: 32,
Symbol(Symbol.toStringTag): ‘Uint8Array’] þš¬ ¤›
(32) [254, 353, 172, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 164, 8250] fe 161 ac 00 00 00 00 00
00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 a4
203a

We all knows about ascii and <= 0x7F, but what happens with.. see “device answer” bytes, 0xFE – is displayed as 254 – ok, but at same time 0x9A -> 353 ?!, and same fun with 0xA4 at end of answer – 164, and 9B – 8250

Next example:

let x = [ 0x7E, 0x7F, 0x80, 0x81, 0x82 ];
let bytes = new Uint8Array(x);
let text = new TextDecoder('ascii').decode(bytes);

console.log(bytes);
console.log(text);
console.log(text.getBytes());
console.log(text.split("").map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join(' '));

Output:

Uint8Array(5) [126, 127, 128, 129, 130, buffer: ArrayBuffer(5),
byteLength: 5, byteOffset: 0, length: 5, Symbol(Symbol.toStringTag):
‘Uint8Array’] (5) [126, 127, 8364, 129, 8218] 7e 7f 20ac 81 201a

Need to produce packets exchange with hardware device via com port, in c, c++ – is not a problem with types of vars like intuint with binary length, but in js – all variables is signed)

device request:
[ 0x0A, 0xC7, 0xAC, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xE2, 0xAF ]

device answer:
[ 0xFE, 0x9A, 0xAC, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xA4, 0x9B ]

32 byte per packet, where 0x00 – is filled data, send data – no problem:

something.write(new Uint8Array(packets.request)) – all fine

device answer parse – in js – problems with encoding received data, its received as encoded text, not as binary data

example to repeat:
let bytes = new Uint8Array(packets.answer);
let text = new TextDecoder(‘ascii’).decode(bytes);

console.log(bytes);
console.log(text);
console.log(text.getBytes());
console.log(text.split("").map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join(' '));

outputs:

Uint8Array(32) [254, 154, 172, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 164, 155, buffer:
ArrayBuffer(32), byteLength: 32, byteOffset: 0, length: 32,
Symbol(Symbol.toStringTag): ‘Uint8Array’] þš¬ ¤›
(32) [254, 353, 172, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 164, 8250] fe 161 ac 00 00 00 00 00
00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 a4
203a

yyyep, we all knows about ascii and <= 0x7F, but what happens with.. see “device answer” bytes, 0xFE – is displayed as 254 – ok, but at same time 0x9A -> 353 ?!, and same fun with 0xA4 at end of answer – 164, and 9B – 8250 q[O,o]p

next example:

let x = [ 0x7E, 0x7F, 0x80, 0x81, 0x82 ];
let bytes = new Uint8Array(x);
let text = new TextDecoder('ascii').decode(bytes);

console.log(bytes);
console.log(text);
console.log(text.getBytes());
console.log(text.split("").map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join(' '));

output:

Uint8Array(5) [126, 127, 128, 129, 130, buffer: ArrayBuffer(5),
byteLength: 5, byteOffset: 0, length: 5, Symbol(Symbol.toStringTag):
‘Uint8Array’] (5) [126, 127, 8364, 129, 8218] 7e 7f 20ac 81 201a

what a magic! 🙂

i am trying to make a simple program with basic html and javascript to get used to firebase, where i fill up a form and press a button to send its information to the database. I can send the data to fireplace if i keep the await outside of any function, it fills my database on load. But whenever i try to get it inside of a function so the button can call it, it gives me a
@firebase/firestore: Firestore (11.7.1): WebChannelConnection RPC 'Write' stream 0x80362b6e transport errored. Name: undefined Message: undefined
error.

i know this error message can be seen when you dont have (default) as the name of your database, but i do have it, it works whenever i leave the await all by itself.

If any of you would be kind enough to help me solve this problem, here is all my code (i know having everything in 1 file is messy and the structure is bad, it is a test) and the database info is censored for obvius reasons.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Almacen proteco</title>

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

    <style>
        .hidden {
            display: none;
        }
    </style>


</head>

<body>
    <div id="app">

        <form id="creaArticulo">
            <input type="text" id="nombre">
            <input type="text" id="talla">
            <input type="text" id="cantidad">
            <button id="buttonArticulo">Nuevo articulo</button>
        </form>

    </div>



    <script src="https://www.gstatic.com/firebasejs/11.7.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/11.7.1/firebase-firestore-compat.js"></script>


    <script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.7.1/firebase-app.js";
        import { getFirestore, doc, setDoc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/11.7.1/firebase-firestore.js";
        // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries

        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: "**",
            authDomain: "**",
            projectId: "**",
            storageBucket: "**",
            messagingSenderId: "**",
            appId: "**"
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

        //my code

        async function nuevoArticulo() {
            await setDoc(doc(db, "cities", "LA3"), {
                name: "Los Angeles 3",
                state: "CA",
                country: "USA"
            });
        }


        document.getElementById('buttonArticulo').addEventListener("click", nuevoArticulo);

    </script>


</body>

</html>
  

i had a working implementation of the google drive api.

Now stopped working and I get following error logged in the browser’s console:

GET https://content.googleapis.com/discovery/v1/apis/drive/v3/rest?pp=0&fields=kind%2Cname%2Cversion%2CrootUrl%2CservicePath%2Cresources%2Cparameters%2Cmethods%2CbatchPath%2Cid&key=581000403558-9bno5mqs81fu452qearbqjkrl24jrqln.apps.googleusercontent.com 502 (Bad Gateway)
$h @ cb=gapi.loaded_0?le=scs:169
h @ cb=gapi.loaded_0?le=scs:169
ai @ cb=gapi.loaded_0?le=scs:170
(anonymous) @ cb=gapi.loaded_0?le=scs:170
d @ cb=gapi.loaded_0?le=scs:128
b @ cb=gapi.loaded_0?le=scs:124
trumbowyg.clouddrive.google.min.js:45 gAPI initialization failed with following error: gapix.client.GapiClientError: API discovery response missing required fields.

The code i use to initialize the gapi is:

window.WaXCode.gAPI.onload    = () => {
            console.log('gAPI Loaded.');
            // #region Check for API Key.
            try         { var apiKey = jQuery.trumbowyg.XC.CloudStorage.Browser.refTrumbowyg.o.plugins.WaXCode_OnlineStorage_Google.clientID ;}
            catch( X )  {
                console.error('Google / Drive - API Key not available (is the "Google / Drive (cx_editor)" - TypoScript included in your template?). Unable to initialize Google Drive. Internal: ');
            
                throw X ;}
            // #endregion Check for API Key.
            // #region Load gAPI.
            gapi.load('client', async () => {
                try {
                    await gapi.client.init({
                        apiKey          : apiKey,
                        discoveryDocs   : ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']});
                
                    gAPI_Initialized = true ;}
                catch( X ) { console.log('gAPI initialization failed with following error: ' + X );}
            // #endregion Load gAPI.
        });}

Google Cloud Console show that everything is fine with the API-Key etc.

Can’t figure out what the problem is.

Any ideas?

I’m working on a Three.js project where I apply a decal to a GLB model surface using DecalGeometry. I’ve already got functionality for moving the decal by dragging it across the model surface.

I want to add rotation and scaling to the decal, any ideas how to do that?

i have created this manifest file

{
  "name": "AI-Email Replyer",
  "description": "AI powered email reply generatr",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Email Writer Assistant"
  },
  "permissions": ["storage", "activeTab"],
  "host_permissions": [
    "http://localhost:8080/*",
    "https://mail.google.com/*"
  ],
  "content_scripts": [
    {
      "js": ["content.js"],
      "matches": ["https://mail.google.com/*"],
      "css": ["content.css"],
      "run_at": "document_start"

    }
  ],
  "web_accessible_resources": [
    {
      "resources": [ "icons/*" ],
      "matches": [ "https://mail.google.com/*" ]
    }
  ]
}

and in content.js

console.log("AI content script loaded here");

still after loading the extension in chrome browser it not printing any thing in console ( i am checking the console of gmail site only)

what mistake i have done??