Category: javascript

Q: where we can watch anime free.

ANS:we can Watch donghua, chineseanime, comicanime and more on chineseanimes.org

Watch free animes on chineseanimes.org. watch free and also share with your friends. watch togather with your friends.

Me and a group of friends are trying to create a 3D customization and visualization web app for watches as a university project and are faced with the problem of how can we pass a customized( in color and material ) 3D model to an AR viewer on mobile phones and how to track the passed model to the wrist of the user ?

For context we have made the watch customizer frontend using React-three-fiber and are confused on what to use for AR implementation with wrist tracking of user .
We have looked into Mediapipe’s hand tracking but unsure how to combine it with our frontend app and display the watch model in AR?
We have also thought of using unity or unreal engine for the AR part but that makes the build of the application device specific and we are trying to avoid that.

I am doing the daily question 1235 in leetcode.

I’ve written a correct solution using recursion:

var jobScheduling = function (startTime, endTime, profit) {
    let indices = startTime.map((_, i) => i).sort((a, b) => startTime[a] - startTime[b]);

     startTime = indices.map(i => startTime[i]);
     endTime = indices.map(i => endTime[i]);
     profit = indices.map(i => profit[i]);

    const recurse = (i, startTime, endTime, profit) => {
        if (i >= startTime.length) { return 0 }
        var noTake = recurse(i + 1, startTime, endTime, profit)
        var shiftEnd = endTime[i]
        var localProfit = profit[i]
        while (startTime[i] < shiftEnd) {
            i++
        }
        var take = recurse(i, startTime, endTime, profit)
        return Math.max(noTake, take + localProfit)
    }
    return recurse(0, startTime, endTime, profit)
};

But this fails when the input size gets too large because of repeated operations. So I’ve tried to optimise the program by using dp:

var jobScheduling = function (startTime, endTime, profit) {
    let indices = startTime.map((_, i) => i).sort((a, b) => startTime[a] - startTime[b]);

    startTime = indices.map(i => startTime[i]);
    endTime = indices.map(i => endTime[i]);
    profit = indices.map(i => profit[i]);

    var dp = new Array(startTime.length).fill(Infinity)

    const recurse = (i, startTime, endTime, profit) => {
        if (i >= startTime.length) { return 0 }
        if (dp[i] != Infinity) {
            return dp[startTime[i]]
        }
        var noTake = recurse(i + 1, startTime, endTime, profit)
        var shiftEnd = endTime[i]
        var localProfit = profit[i]
        while (startTime[i] < shiftEnd) {
            i++
        }
        var take = recurse(i, startTime, endTime, profit)
        dp[startTime[i]] = Math.max(noTake, take + localProfit)
        return dp[startTime[i]]
    }

    return recurse(0, startTime, endTime, profit)
};

But now suddenly the answer is now coming out incorrect, usually quite a bit larger. Any idea why this is?

I wanted to know how to fetch these individual images from this API which has the same name “file_path”? I have tried multiple methods, but none seem to be working…

<div class="others">
<div class="pImg">
<img src="${image_path + image.profiles[1[file_path]]}" alt="">
</div>
<h3>xxx</h3> 
</div>

{“id”:1204,”profiles”:[{“aspect_ratio”:0.666,”height”:1600,”iso_639_1″:null,”file_path”:”/AhQMyQ10kz5g8Y3Fp54GPhgDxQS.jpg”,”vote_average”:5.362,”vote_count”:29,”width”:1066},{“aspect_ratio”:0.666,”height”:920,”iso_639_1″:null,”file_path”:”/4XvEI2AgZ7bNOy1z2Nx8LcwLnTM.jpg”,”vote_average”:5.36,”vote_count”:27,”width”:613},{“aspect_ratio”:0.667,”height”:1200,”iso_639_1″:null,”file_path”:”/yexB6Dt0XMtECazfqWbDkMCcjOA.jpg”,”vote_average”:5.238,”vote_count”:19,”width”:800},{“aspect_ratio”:0.667,”height”:2400,”iso_639_1″:null,”file_path”:”/oasXvk3um0eJ9p0EMGgwKhH4Jtp.jpg”,”vote_average”:5.22,”vote_count”:13,”width”:1600},{“aspect_ratio”:0.667,”height”:561,”iso_639_1″:null,”file_path”:”/pahtuRDpaopvO6rH1RYS2omrO8L.jpg”,”vote_average”:5.218,”vote_count”:30,”width”:374},{“aspect_ratio”:0.667,”height”:3000,”iso_639_1″:null,”file_path”:”/hjE8oE8Ik1GSMdtm0keDDNbhI5V.jpg”,”vote_average”:5.206,”vote_count”:9,”width”:2000},{“aspect_ratio”:0.667,”height”:1740,”iso_639_1″:null,”file_path”:”/h13yvG0tRNMTAwciQXxYmQWdYW8.jpg”,”vote_average”:5.2,”vote_count”:24,”width”:1160},{“aspect_ratio”:0.667,”height”:2100,”iso_639_1″:null,”file_path”:”/idAw9JFj4pjOvHfKod3BUynfy0Y.jpg”,”vote_average”:5.194,”vote_count”:22,”width”:1400},{“aspect_ratio”:0.667,”height”:1200,”iso_639_1″:null,”file_path”:”/8WLhiZvxNFd0DtsBkPZ8VgRi8I.jpg”,”vote_average”:5.19,”vote_count”:5,”width”:800},{“aspect_ratio”:0.667,”height”:3000,”iso_639_1″:null,”file_path”:”/2HAWAWNUJih1ZiKWSvWCJRJpBY2.jpg”,”vote_average”:5.19,”vote_count”:5,”width”:2000},{“aspect_ratio”:0.667,”height”:2048,”iso_639_1″:null,”file_path”:”/nSLFpy6eniQIfYZMsepvMJoZ1Lr.jpg”,”vote_average”:5.19,”vote_count”:5,”width”:1365},{“aspect_ratio”:0.666,”height”:2005,”iso_639_1″:null,”file_path”:”/4TpeHc8fwciP5UgmdQ1fcProKCk.jpg”,”vote_average”:5.172,”vote_count”:16,”width”:1336},{“aspect_ratio”:0.667,”height”:450,”iso_639_1″:null,”file_path”:”/weN7EwAEvnweLMRcMYwui4k92r3.jpg”,”vote_average”:5.128,”vote_count”:6,”width”:300},{“aspect_ratio”:0.666,”height”:1024,”iso_639_1″:null,”file_path”:”/mjD4SkMq4oMaTmUy8nzINC8QrXw.jpg”,”vote_average”:5.068,”vote_count”:7,”width”:682}]}

In an HTML document say you have multiple linked JavaScript files, one of which being <script src="javascript_1.js"></script> Is there a way to regulate when this code can run if there are event listeners in the code? A way to remove it after a requirement is met using if statements? Would there then be a way to reinstate the code at a later period?

I’m not sure how to go about this or what the correct syntax would be if I did try something.

Can someone suggest me a better way of matching a year in a string between the provided ranges.

Any insight will be appreciated.

Example String

let str = 'Document created in 1999';
let str1 = 'Document created in 2000';
let str2 = 'I was created in 2001';

I’m looking for a right overall mid-layer/backend tech solution for a consumer app
(mobile/website) with potentially large number of users. I’m not new to technology and
the space butnot up to date with the latest and greatest, so have a few questions given
what’s currently out there.

While the solution needs to be scalable (no interest in re-architecting in near future),
it doesn’t have to be extravagantly costly solution. It needs to be something I can
get developed myself with right expertise (I myself do have enough tech expertise to
understand and manage). What I’m looking for is recommendations for the latest tech to
use or request to be used since I haven’t dealt with it in a while.

Here’re the rough top-level requirements –

• Offsite hosting with combination of Tomcat / … / Java / MySql hosted on
  AWS kind of platform (Tomcat and MySql preferred) but not sure about middle “…”
  layer. Is Angular JS or Node JS with Spring the right way to go?

• Layer between front end app and Tomcat (Angular JS or Node JS)??

• Website to accomodate functionality with session concept (like cart) but not
  necessarily timeout like bank logins, but rather Amazon like where I can come back later and still login without having to enter credentials. What’s the right tech to use?

• Mobile app (native or not) witho no session timeout for mobile (e.g. Venmo) i.e. verify
  first time, but no re-login required even if phone is rebooted. (Not sure how it
  works if phone is replaced. (Re-login requirement ok from website).

• If the mobile app developed as cross platform web app, then behavior same as website
  mentioned above (What tech to use to develop such a cross platform mobile app?)

• What will work best for native mobile apps from backend API kind of view?

Any recommendations on overall architecture? I think I prefer following kind of concept
except for the “???” pieces where I’m not sure.

<Web/Mobile> –> Frontend underlying piece (???) –> Backend Layer (Spring/Tomcat???) –> MySql

Thank you in advance.

PS: I’ve thought of Angular JS / Tomcat / MySql solution based on stateless protocol but am not sure if it’s the right solution in terms of scalability and other requirements such as some session management and stickyness of login requirements.

I am working in react.js. I have button with onClick event. After click -> reload page and after reload want show some component bar on page.
Problem is that after reload that component doesn’t show.
How can I achieve this behavior ?

  const checkout = () => {
    setIsModalOpen(!isModalOpen)

    window.location.reload()

    toast.success("Thank you for your purchase!", {
      position: "top-center",
      autoClose: 4000,
      theme: "dark",
    })
  }

I have application created in react and i am using socket.io-client library for Connection.
When i am trying to deploy my app on prod the socket is not connecting.

Here is my frontend socket config:-
const socket = io.connect(socketBaseUrl, { extraHeaders: { "Access-Control-Allow-Origin": "*", }, transports: ["websocket", "polling"], // I need to use websocket (not polling) });

enter image description here

I have tried many different ways but no success.

• transports: [“polling”] -> working fine in prod
• transports: [“websocket”, “polling”] -> not working when i first add websocket

Is there something which i have missed?

I am pretty new to ReactJS and I am doing some experiment to learn it more properly. Currently, I am converting a html/css/javascript template into ReactJS. What I previously used to do is to simply put the external css and js files in the index.html file itself, like this:-

<head>
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/boxicons.css"/>
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/fontawesome.css"/>
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/flag-icons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
    <script src="%PUBLIC_URL%/admin-template/assets/vendor/js/script1.js"></script>
    <script src="%PUBLIC_URL%/admin-template/assets/vendor/js/script2.js"></script>
</body>

But then I realize two things:-

1. It is not the right thing to do.
2. If I have to use multiple templates, like one for the admin panel
   and one for the front end side, I can simply put all the css, js,
   etc. in the index.html like this. Since ReactJS is a single page
   application, there is a high chance that putting all css, js, etc.
   in the index.html file will cause a major clash/conflict among the
   external files.

So I discovered this approach.

import { useEffect } from 'react';

function PreLoginHeaderScript() {

    useEffect(() => {    
        var baseUrl             = process.env.REACT_APP_PUBLIC_URL;

        // CSS //        
        const cssBoxIcon        = document.createElement('link');
        cssBoxIcon.id           = 'boxicon-css';
        cssBoxIcon.href         = baseUrl + 'admin-template/assets/vendor/fonts/boxicons.css';
        cssBoxIcon.rel          = 'stylesheet';
        cssBoxIcon.type         = 'text/css';
        
        // Scripts //
        const scriptHelper   = document.createElement('script');
        scriptHelper.id      = 'helper-script';
        scriptHelper.src     = baseUrl + 'admin-template/assets/vendor/js/helpers.js';
        scriptHelper.async   = true;

        if (!document.getElementById('boxicon-css')) {
            // loading css in the head
            document.head.appendChild(cssBoxIcon);
        }
        if (!document.getElementById('helper-script')) {
            // loading script at the end of the body
            document.body.appendChild(scriptHelper);
        }
    }, []);
    
}

export default PreLoginHeaderScript;

This approach is working like a charm. The result is like this:-

<head>
    ---------------------
    ---------------------
    <link rel="stylesheet" type="text/css" href="http://localhost:5052/admin-template/assets/vendor/fonts/boxicons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
    <script src="http://localhost:5052/admin-template/assets/vendor/js/helpers.js"></script>
</body>

However, I want to make it more refined by using the stack/push concept of Laravel in it. In laravel, one can declare stacks like this:-

<head>
    ---------------------
    ---------------------
    <link rel="stylesheet" type="text/css" href="{{asset('admin-template/assets/vendor/fonts/boxicons.css')}}"/>
    @stack('css')
</head>
<body>
---------------------
---------------------
---------------------
---------------------
    <script src="{{asset('admin-template/assets/vendor/js/helpers.js')}}"></script>
    @stack('script')
</body>

Now if someone wants to push external css files in the stack ‘css’, he just need to use the LOC like this:-

@push('css')
    <link rel="stylesheet" type="text/css" href="{{asset('admin-template/assets/vendor/fonts/flagicons.css')}}"/>
@endpush

Similarly, to put external javascript file, one can do like this

@push('script')
    <script src="{{asset('admin-template/assets/vendor/js/misc.js')}}"></script>
@endpush

As such, the resultant html comes like this:-

<head>
    ---------------------
    ---------------------
    <link rel="stylesheet" type="text/css" href="http://localhost/test-laravel/admin-template/assets/vendor/fonts/boxicons.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/test-laravel/admin-template/assets/vendor/fonts/flagicons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
    <script src="http://localhost/test-laravel/admin-template/assets/vendor/js/helpers.js"></script>
    <script src="http://localhost/test-laravel/admin-template/assets/vendor/js/misc.js"></script>
</body>

The difference is that in document.head.appendChild(cssBoxIcon); or document.body.appendChild(scriptHelper); the css/scripts are appended just before the ending of the or tags. But the Laravel stack/push method allows one to push css or scripts at any position where the stack with the provided name has been defined.

How can I do this in ReactJS?

This is my modal

<div id="fileModal" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">{{trans('core.adddata')}}</h4>
                </div>
                <div class="modal-body" id="info">
                    {{-- Add name Field --}}
                    <div class="form-group">
                        <label for="name">{{trans('core.name')}}</label>
                        <input type="text"  class="form-control" id="name" name="name" placeholder="Enter name">
                    </div>
    
                    {{-- Add file Field --}}
                    <div class="form-group">
                        <label for="file">{{trans('core.file')}}</label>
                        <!-- <input type="file" class="form-control" id="file" name="file" require> -->
                        <input type="file"  class="form-control" id="file" name="file">
                    </div>
    
                </div>
                <div class="modal-footer">
                <button type="button" class="btn dark btn-outline" id="cancelfileBtn">{{trans('core.btnCancel')}}</button>
                <button type="button" data-dismiss="modal" class="btn blue" id="saveFiledata">{{trans('core.btnSave')}}</button>
    
                </div>
            </div>
        </div>
    </div>

This is my js code

function saveFiledata() {
    try {

        // Open the modal
        $('#fileModal').modal('show');

        // Clear previous error messages
        $('.validation-error').remove();

        // Attach a click event handler to the "Save" button
        $('#saveFiledata').off().on('click', function (e) {
            // Validate fields before making the AJAX request
            e.preventDefault();

            var name = $('#name').val();
            var fileInput = $('#file');

            // console.log('Before AJAX - name:', fileInput);


            // Check if files property exists and has a length greater than 0
            var fileName = fileInput.val();

            // Log the files directly
            console.log('Before AJAX - name:', name);
            console.log('Before AJAX - files:', fileInput[0].files);

            // Clear validation errors
            $('.validation-error').remove();

            // Validate quantity
            if (!name) {
                console.log('Name validation error - Name is required');
                $('#name').after('<span style="color:red;" class="validation-error">Name field is required *</span>');
            }

            // Validate file
            if (!fileName) {
                console.log('File validation error - File is required');
                $('#fileModal #file').after('<span style="color:red;" class="validation-error">File is required *</span>');
            } else {
                // Additional file type validation
                var allowedExtensions = /.(jpeg|jpg|png|pdf|doc|docx|xls|xlsx)$/i;
                fileName = fileInput[0].files[0].name;

                if (!allowedExtensions.test(fileName)) {
                    console.log('File validation error - Invalid file type');
                    $('#fileModal #file').after('<span style="color:red;" class="validation-error">Invalid file type. Allowed types: jpeg, jpg, png, pdf, doc, docx, xls, xlsx *</span>');
                }
            }




            // Check if any validation errors exist
            if ($('.validation-error').length > 0) {
                return;
            }

            console.log('File Name:', fileName);

            console.log('Validation passed. Proceeding with AJAX request...');

            // Make an AJAX request here
            var url = "{{ route('admin.ajax_component_file_data') }}"; // Replace 'your.ajax.route' with your actual route name
            var token = "{{ csrf_token() }}";

            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    '_token': token,
                    'name': name,
                    'file': fileName,
                  
                    // Add other data as needed
                },
                success: function(response) {
                    // Handle the response as needed
                    console.log('AJAX request successful:', response);

                    if (response && response.status === 'success') {
                        // Clear individual form fields
                        $('#name').val('');
                        $('#file').val('');

                        // Close the modal after AJAX request success
                        $('#fileModal').modal('hide');

                        Swal.fire({
                            title: 'Data Saved Successful!',
                            text: 'Your Form data has been Saved successfully.',
                            icon: 'success',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK',
                            // ... (additional Swal settings if needed)
                        }).then((result) => {
                            // ... (additional logic after successful checkout)
                            setTimeout(() => {
                            console.log('Form cleared successfully.');
                            location.reload();
                        }, 100); 
                        });
                       
                    } else if (response && response.status === 'error') {
                        // Handle the case where checkout is not allowed
                        // ... (additional logic for error handling)
                    } else {
                        // Handle other response cases
                        console.error('Unexpected response from server:', response);
                        // ... (additional logic for unexpected responses)
                    }
                },
                error: function(error) {
                    console.error('AJAX request error:', error);
                    // ... (additional logic for AJAX error handling)
                }
            });
        });

        // Attach a click event handler to the "Cancel" button
        $('#fileModal').on('click', '#cancelfileBtn', function (e) {
            // Clear validation errors
            $('.validation-error').remove();
            // Close the modal
            $('#fileModal').modal('hide');
        });

        // Prevent the modal from closing if there are validation errors
        $('#fileModal').on('hide.bs.modal', function (e) {
            if ($('.validation-error').length > 0) {
                e.preventDefault();
            }
        });

    } catch (error) {
        console.error('Error:', error);
    }
}

im getting the undefined output in the console like this Before AJAX – name: swamy deshetty
1:1401 Before AJAX – files x : undefined
1:1414 File validation error – File is required how to solve this issue how to get the file data from the file input into the js please help me to complete this task!..

I am building an offline electron js react js and express js application. but the issue is when I build the app and extract the asar file all the code gets exposed including express js.

How can I protect express js code. How others are building offline applications with electron js. I have been searching for the solution since a week.

I tried react only but ittt does not support direct connection to the database without the backend.

so is there any way to protect backend code from electron or express and how apps like vyapar, WhatsApp, slack manage this security. ???

const docker = new Dockerode()

const exec = docker.getExec("id")

const execStream = await exec.start({
    hijack: true,
    stdin: true,
    Tty: true,
})

// This will throw EPIPE error
execStream.write("echo testn")

When I write into the exec stream it will just throw EPIPE error

Is there any way to write command to an already running shell?

I have successfully made changes to a page in my app, pushed it to Git without any issues. However, when attempting to deploy the website on the Vercel platform, I encountered the following error: “Invalid project directory provided, no such directory: /vercel/path0/run?”. How can I resolve this issue and successfully deploy my website on Vercel? Any insights or suggestions would be greatly appreciated.
next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  trailingSlash: true,
  output: 'export',
  staticPageGenerationTimeout: 1000,
  serverRuntimeConfig: {
    PROJECT_ROOT: __dirname,
  },
  images: {
    domains: [
      'res.cloudinary.com',
      'avatars.githubusercontent.com',
      'lh3.googleusercontent.com',
      'www.instagram.com',
    ],
  },
}

This is the error I am facing on Vercel

If you want any more information. Kindly let me know.

I want to display an array elements in my Vuejs template.

I am getting data from API, formatting them into an associative Array with a function and then trying to display in the template.

When i try to access the first element which is “name”, with this code :

{{ this.info.name }}

I get the error :

Uncaught (in promise) TypeError: Cannot read properties of null
(reading ‘name’)

But when i try this at the exact same place in code :

{{ this.info }}

I can see that array is defined :

{ "name": "B3", "call": "about", "G": "H" }

Also, I get the right data when i try to console log in my mounted() component function :

console.log(this.info.name)

For info, the Object type when doing in the mounted() function :

console.log(this.info)

is :

Proxy(Object) {name: 'B3', call: 'about', G: 'H'}

What is wrong in the way I am trying to access data getting me this error ?