Blancer.com Tutorials and projects

I’m developing a small web-based calculator tool (a financial or estimation calculator) that performs real-time calculations using JavaScript on the frontend. However, as the logic has grown, I’ve started offloading some operations to a lightweight backend API (Node.js + Express).

The challenge I’m facing:

• Sometimes, calculations lag when multiple users hit the tool simultaneously.

• API responses are fast locally but become slower when deployed online.

• I’ve tried implementing local caching using localStorage on the frontend and simple in-memory caching with Node.js on the backend, but I’m not sure if this is the best approach.

• I also tested asynchronous calculation batching using Promises to reduce response time, but it didn’t help much under concurrent load.

I’d love some advice on:

1. What’s the most efficient way to handle repeated calculations — browser-side caching, service workers, or something like Redis?

2. Should I shift more logic back to the frontend and reduce server hits?

3. Any best practices for keeping such tools lightweight while maintaining accuracy and responsiveness?

I was expecting smoother performance and faster responses when multiple users accessed the calculator at the same time, but the lag still appears randomly — especially when API calls stack up.

I need use API of Czech Cadastre, but in console I see Error.

This is my code in javascript:

const url = 'https://api-kn.cuzk.gov.cz/api/v1/Parcely/Vyhledani'
const api_key=''

async function getData() {
    const response = await fetch(url)
    const data = await response.json()
    console.log(data)
}

getData()

From console:

script.js:5 
 GET https://api-kn.cuzk.gov.cz/api/v1/Parcely/Vyhledani 401 (Unauthorized)
getData @   script.js:5
(anonymní)  @   script.js:10

How to live website that made in vue js and using json-server for fake api.

How to live website that made in vue js and using json-server for fake api . mostly website live in vercel but here i use json-server , this is main issue , i don’t know how to live it .

I want to use an implementation of Ion JavaScript library in my Java application with a JSP frontend.

If I add:

<script type="text/javascript" src='<c:url value="https://path/to/library/assets/ion/v6/stable/extensions/require/loader.js"/>?_=<c:url value="${cacheBuster}"/>'></script>

to the JSP page I’m looking to use it on, the below feature works correctly and I can see the library in the page sources in my Developer Tools.

<div class="m-card m-card-notification m-card-notification--warn" role="status" data-module="m-card-close" data-notification-description="close icon">
    <div class="m-card-content">
        <div class="m-card-content__inner">
            <p>Some text here.</p>
        </div>
    </div>
</div>

Long term, however, I may wish to use this library in different parts of the UI, so I’d like to place this in a more suitable location. Again, when I load the page, can see the library in the page sources in my Developer Tools but the ‘X’ icon that should appear and hide the div if clicked does not load. It should appear with the addition of data-module="m-card-close" Do I need to include the <script> above in every page I want to use some feature from this library or is there a cleaner way to do this?

In a B/S architecture system, the backend is written in Node.js and uses Multer to handle file uploads, and the frontend is an Android application written in Java. If the frontend gets photo data from the camera as a byte[] (YUV), transforms it to JPEG form’s byte[], wraps it to multipart/form-data, and sends it to the backend, can Multer correctly recognize this uploaded file and save the picture successfully?

The code in Android is like this:

public void login(String account,, byte[] photoYUVBytes, final LoginCallback callback) {
        RequestBody accountBody = account != null ? RequestBody.create(MediaType.parse("text/plain"), account) : null;
        MultipartBody.Part photoPart = null;
        if (photoYUVBytes != null) {
            Camera.Size size = MainFragment.getPreviewSize();
            byte[] photoBytes = yuvToJpeg(photoYUVBytes,size.width,size.height);
            RequestBody photoBody = RequestBody.create(MediaType.parse("image/*"), photoBytes);
            photoPart = MultipartBody.Part.createFormData("photo", "face.jpg", photoBody);
        }

        Call<LoginResponse> call = loginApi.login(accountBody, photoPart);
        call.enqueue(new Callback<LoginResponse>() {
            @Override
            public void onResponse(Call<LoginResponse> call, Response<LoginResponse> response) {
                if (response.isSuccessful() && response.body() != null) {
                    callback.onSuccess(response.body());
                } else {
                    callback.onError(...);
                }
            }
        });
    }

and the backend code is like this:

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/'); // store catalog
    },
    filename: function (req, file, cb) {
        const ext = path.extname(file.originalname) || '.jpg'; 
        cb(null, `${Date.now()}${ext}`);
    }
});
const upload = multer({ storage: storage });
router.post("/login", upload.single("photo") , async (req, res) => {...}

I’ve built a React project using Vite, and I’m working on improving SEO and link previews.
I’m using React Helmet to dynamically update the meta title and description based on the current route. When I check in the browser, the title and meta tags update correctly in the dev tools.
However, when I share the link on WhatsApp (or any social media), the preview always shows my home page’s title and description, not the ones set for the specific route.

I’ve added all the required Open Graph tags, but it still doesn’t work.

Verified meta tags in browser (they update dynamically)

Added og:title, og:description, og:image, and og:url

Used React Helmet

Deployed the app (so it’s not a localhost issue)

I’m using Framer Motion in a React project, but ESLint gives me a false positive:

‘motion’ is defined but never used even though I’m using <motion.div> in JSX.

Here is my code

I have used motion as <motion.div> still eslint is giving error ->

How would we go about disabling a spinner that is shown until 2 seconds of 3 videos in use by a site has been loaded using the video progress event and buffered property?

I’m making school calendar web site.
but web site design isn’t perpect in my mind.
I want to change web design.
but I don’t know how change web design.
can you advise mt web site design

this is my first web site design
but this design is dull in color
thus I want to change color of web site and ui
this is my second web site design
I changed color of web site but this isn’t perpect my mind and I don’t know changing ui

I have a youtube playlist embedded in an iframe and was hoping to use the playlist index to cycle through an array of titles on-screen (i.e. when the next video starts playing, the next item in the array will show). Is this possible? What am I doing wrong? Apologies in advance because I’m very new to JS… this might be gibberish but I felt like I was on to something.

var myArray = ["song 1", "song 2"];

var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

 function onPlayerReady(event) {
    console.log(Array.from(document.querySelectorAll('.ytd-playlist-video-list-renderer #video-title')).map((el) => {return el.textContent.trim()}).sort().join("n"))

  var Number = 
function(){
     player.getPlaylistIndex();
};
  var print = document.getElementById('print');
print.innerHTML = myArray[Number];
    }