Problem when running react with nginx on ubuntu server

I want to run a React app on the server so that it is available on my domain.
I build it and run it on port 5000 with the command serve -s build -n -l 5000.
But when I send a request to the domain, it shows me nothing but this text:

logo
Edit src/App.js and save to reload.

Learn React

my nginx config :

user root;


events {
    worker_connections 768;
    # multi_accept on;
}


http { 
    server {
        listen 80;
        listen [::]:80 default_server;
        server_name domain.com www.domain.com;
        
        
    location / {
   
    proxy_pass http://localhost:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  
}
}

reversed regex mashine implementation

I’m trying to match a string starting from the last character to fail as soon as possible. This way I can fail a match with a custom string cstr (see specification below) with least amount of operations (4th property).

From a theoritical perspective the regex can be represented as a finite state mashine and the arrows can be flipped, creating the reversed regex.

I’m looking for an implementation of this. A library/program which I can give the string and the pattern. cstr is implemented in python, so if possible a python module. (For the curious i-th character is not calculated until needed.) For anything other I need to do much more work because of cstr‘s calculation is hard to port to another language.

The implementation doesn’t have to cover all latex syntax. I’m looking for the basics. No lookaheads or fancy stuff. See specification below.

I may be lacking common knowledge. Please do comment obvious things, too.


Specification

The custom string cstr has the following properties:

  1. String can be calculated in finite time.
  2. String has finite length
  3. The last character is known
  4. Every previous character requires a costly calculation
  5. Until the string is calculated fully, length is unknown

When the string is calcualted fully, I want to match it with a simple regex which may contain these from the syntax. No look aheads or fancy stuff.

  • alphanumeric characters
  • uinicode characters
  • ., *, +, ?, w, W, [], |, escape char , range specifitation with { , }

PS: This is not a homework question. I’m trying to formulate my question as clear as possible.

No output in console.log. Beginner Question

I’m reading Head 1st JavaScript book and try to learn the language as much as i can. Wanted to to all the problems from the book. After i did so for one of the problems, and wrote the code as i thought, and checked the solution, i changed it to reflect the solution in the book even thou it worked for me. The thing is, when i want to “print” in the console now, nothing shows up and idk why… i don’t see nor have a problem…
Any idea why the console.log will not output anything? Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Coffee(roast, ounces) {
            this.roast = roast;
            this.ounces = ounces;
            this.getSize = function() {
            if (this.ounces === 8) {
                return "small";
            } else if (this.ounces === 12) {
                return "medium";
            } else (this.ounces === 16); {
                return "large";
            }
        };
            this.toString = function() {
                return "You have ordered a " + this.getSize() + " " + this.roast + " coffee.";
            };
        }
        var csmall = new Coffee ("House Blend",  "8");
        var cmedium = new Coffee ("House Blend", "12");
        var clarge = new Coffee ("Dark Roast", "16");
        var coffees = [csmall, cmedium, clarge];

        for (var i = 0; i < coffees.length; i++) {
            coffees[i].toString();
        }
    </script>
</head>
<body>
    
</body>
</html>

This is the way i wrote the code and worked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Coffee(roast, size, ounces) {
            this.roast = roast;
            this.size = size;
            this.ounces = ounces;
            this.getSize = function() {
            if (this.ounces === 8) {
                console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
            } else if (this.ounces === 12) {
                console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
            } else (this.ounces === 16); {
                console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
            }
            };
        }
        var csmall = new Coffee ("House Blend", "small",  "8");
        var cmedium = new Coffee ("House Blend", "medium", "12");
        var clarge = new Coffee ("Dark Roast", "large", "16");
        var coffees = [csmall, cmedium, clarge];

        for (var i = 0; i < coffees.length; i++) {
            coffees[i].getSize();
        }
    </script>
</head>
<body>
    
</body>
</html>

Unable to get Tinymyc editor value in Reactjs

i am working on Nextjs and i am trying to integrate Tinymyc editor, I tried with following code but still not getting editor value, i am getting error “editor is null”

1) After use in "handelsubmit" i used "<Editor />" for display/show editor on page , is this correct ?
2) How can i get value of editor ? i tried with following line but not worked for me 
   const content = editor.getContent();
   alert('content is '+ content); 

I tried with following code

<Editor
    onInit={(evt, ed) => {
      editor = ed;
      const content = editor.getContent();
      const data = {
        first: e.target.name.value,
        last: e.target.cat_name.value,
        content: content, // add the content to the data object
      }
    }}
    initialValue="<p>This is the initial content of the editor.</p>"
    init={{
      height: 500,
      menubar: false,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
      ],
      toolbar: 'undo redo | formatselect | ' +
      'bold italic backcolor | alignleft aligncenter ' +
      'alignright alignjustify | bullist numlist outdent indent | ' +
      'removeformat | help',
      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    }}
  /> // Now how can i get content ? ( how to use this further ) ?

Stimulus controller to show/hide toolbox yet allow click

I have a content editable block that has a toolbox. When you focus on the content editable block the toolbox will appear (it is a collapse button for the actual toolbar). If you clock on the toolbox, need to add the Bootstrap class “active” to it. If we focus completely out of the content block, that toolbox should disappear (and a new one appear on a different content block).

Because of the need to click on the toolbox, I can’t get the third event listener to work as expected.

The HTML:

.border.border-dark.p-4
        .position-relative.w-100{data: {controller: "content", content:{block:{value: true}}}}
            .position-absolute.bg-white{style: "right: 101%"}
                %button.d-none.btn.btn-outline-dark{type: "button", data: {content_target: "toolbox", bs:{toggle: "collapse", target: "#toolbar1"}}}
                    %i.bi.bi-hammer
            
            #toolbar1.collapse.position-absolute.bottom-100.bg-white.btn-toolbar{role: "toolbar", aria:{label: "Toolbar with button groups"}}
                .btn-group.me-2{role: "group", aria:{label: "First group"}}
                    %button.btn.btn-outline-dark.active{type: "button"} H2
                    %button.btn.btn-outline-dark{type: "button"} H3
                    %button.btn.btn-outline-dark{type: "button"} H4
                    %button.btn.btn-outline-dark{type: "button"} H5
                    %button.btn.btn-outline-dark{type: "button"} H6
                    %button.btn.btn-outline-dark{type: "button"}
                        %i.bi.bi-paragraph
                    
            %p{contenteditable: true, data: {content_target: "contentBlock"}} This is some text

and the Stimulus

this.contentBlockTarget.addEventListener("focus", (event) => {
    this.toolboxTarget.classList.remove("d-none")
})
this.toolboxTarget.addEventListener("click", (event) => {
    this.toolboxTarget.classList.add("active")
    this.toolboxTarget.classList.remove("active")
})  
this.contentBlockTarget.addEventListener("focusout", (event) => {
    this.toolboxTarget.classList.add("d-none")
})

Here’s my requirements:

  1. If user focuses on the contentBlock (in this HTML it’s a

    ), toolbox should appear (remove class “d-none”). (first event listener does this fine)

  2. If user clicks on the toolbox, add class “active”. (if third event listener is commented out, this works fine). If third listener is active, clicking the toolbox makes it disappear, so the toolbar won’t actually appear.
  3. If user clicks anywhere that is NOT the toolbox, or the cursor is no longer in this area (like maintaining the cursor in there), then need to add “d-none” back.

Root cause for the swiper slider responsiveness?

Actually in the website have to show one slide at the breakpoint of 768px to 1024px but it is showing 2slides. I dont know what is the root cause of it.I have attached the link (https://wdtninos.wpengine.com/).

Actually in the website have to show one slide at the breakpoint of 768px to 1024px but it is showing 2slides. I dont know what is the root cause of it.I have attached the link (https://wdtninos.wpengine.com/).

can’t assign url (‘${api}/item/all’) in reactjs [duplicate]

import React, { useEffect, useState } from 'react'
import './MainMenu.css'
import axios from 'axios'
import { api } from "../config";




function MainMenu() {
    const [items, setItems] = useState([]);

    useEffect(()=>{

        const FecthItems = async()=>{
           //const result = await axios.get( api +"/item/all");
           const result = await axios.get('${api}/item/all');
           //console.log(result);
           setItems(result.data);
        };
           FecthItems();
    }, []);

when its working with this — const result = await axios.get( api +”/item/all”);
its not working with — const result = await axios.get(‘${api}/item/all’);

so please can i know why its not working with ${api}

How to upload image with Reactjs in Reactjs

I am working in Reactjs and i am using nextjs framework, I am trying to upload image with Axios (post method api) and i will use “api in php”, How can i do this ? I tried with following code but its giving me following error
Argument of type ‘string | null’ is not assignable to parameter of type ‘string | Blob’
I trid with following code but giving me errors ( mentioned below code )

const formData = new FormData();
            formData.append("selectedFile", selectedFile);
            try 
                {
                    const response = await axios({
                    method: "post",
                    url: "/api/upload/file",
                    data: formData,
                    headers: { "Content-Type": "multipart/form-data" },
                    });
                } 
            catch(error) {
            console.log(error)
            }  // getting error "Argument of type 'string | null' is not assignable to parameter of type 'string | Blob'"

   const handleFileSelect = (event : any) => {
        setSelectedFile(event.target.files[0])
        } // getting error  "Cannot find name 'setSelectedFile'"

Terminal is showing “error:03000086:digital envelope routines::initialization error” when I run “npm run prod” command

I have a vue + laravel application. I need to run the production command using this:

npm run prod

but I got this error message :

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.9.1

I search on google and added this to the package.json scripts key:

"serve": "vue-cli-service --openssl-legacy-provider serve",
"build": "vue-cli-service --openssl-legacy-provider build",
"lint": "vue-cli-service --openssl-legacy-provider lint"

but stil no solutions. Can you tell me how can I fix it ?

my full package.json file now: https://codeshare.io/3AXbBg

How to show images in a slanted way

image slanted way

How can I display my images and videos slanted like shown in example.

I could not do this using
transform: skewY(-15deg);
As with the skew it will skewed in the same direction on the top and bottom but I want it to slant upward from the bottom and downward from top.
Also as it can be viewed, the image is slightly titled
How can I acheive this

How to determine that the input is not empty without forcing user to change the input

So if someone needs to disable a submit button unless the user input is filled, he needs to do this:

        $(function () {
            $('#login').attr('disabled', true);
            $('#userinput').change(function () {
                if ($('#userinput').val() != '') {
                    $('#login').attr('disabled', false);
                } else {
                    $('#login').attr('disabled', true);
                }
            });
        });

And this is the html:

<input type="text" name="userinput" class="form-control" id="userinput">

<button id="login" class="button" disabled="disabled">Submit</button>

And this will work fine but the only problem exists, is that, the user MUST leave the input field in order to run the change event of Javascript.

However I need to run this when user is still active on the input.

So how to do that in Javascript?

Did I break my project by running `npm audit fix –force`?

I was building a React project with Vite and it was going great. I needed to add some charts and found out about the recharts package and really liked it so downloaded it into my project with the command npm i recharts.

I get the following message:

high severity vulnerabilities

I then ran npm audit, npm audit fix and npm audit fix --force and got this:

lots of warnings

Now when I try to start up my project with npm run dev I get this error in the console:

Uncaught TypeError: import_events.default is not a constructor

It says it’s coming from a file called Events.js but I do not have such a file in my project.

I tried running npm audit fix --force multiple times like my terminal told me to but it did not work.