javascript – Page 2917 – Blancer.com Tutorials and projects

Popup shows refuse to connect, when I click EDGE extension icon

I want to display popup in my laptop EDGE browser in a specific url. Popup should be displayed as view like mobile phone browser or like mobile mode view.
Everything I implemented but popup shows “refuse to connect” when I click extension icon.

manifest.json:

{
  "manifest_version": 3,
  "name": "Example",
  "version": "1.0",
  "description": "An Extension that popup to example.com",
  "permissions": ["activeTab"],
  "action": {
  "default_popup": "popup.html"
 },
"background": {
"service_worker": "backgroundext.js"
},
"icons": {
"16": "icons/c16.png",
"32": "icons/c32.png",
"48": "icons/c48.png",
"128": "icons/c128.png"
}
}

popup.html:

<!DOCTYPE html>
<html>
<body>
  <iframe id="myFrame" src="https://www.example.com" style="display:none"></iframe>
</body>
<script src="backgroundext.js"></script>
</html>

backgroundext.js:

document.addEventListener('DOMContentLoaded', function() {
  var myFrame = document.getElementById('myFrame');
  myFrame.style.display = 'block';
});

Error:
[![refuse to connect][1]][1]

  [1]: https://i.stack.imgur.com/Daumr.png

I have 2 entries, I want to duplicate them and send them as an array, but only 1 data is sent, the data I duplicate does not go

My code is as follows:

<div id="maddeContainer">
    <!-- İlk Madde Başlığı ve Açıklaması -->
    <div class="form-row mt-1">
        <div class="form-group col-4 m-0">
            <label for="email" class="col-form-label s-12"><i class="icon-envelope-o mr-2"></i>Madde Başlığı</label>
            <input name="madde_t[]" placeholder="Madde Başlığı" class="form-control r-0 light s-12" type="text">
        </div>
        <div class="form-group col-4 m-0">
            <label for="roll1" class="col-form-label s-12">Madde Açıklaması</label>
            <textarea name="madde_d[]" placeholder="Madde Açıklaması" class="form-control r-0 light s-12" type="text"></textarea>
        </div>
        <div class="form-group col-2 mt-4 pt-2">
            <button class="btn btn-danger" type="button" onclick="deleteMadde()"><i class="icon icon-delete"></i>Satır Sil</button>
        </div>
        <div class="form-group col-2 mt-4 pt-2">
            <button class="btn btn-success" type="button" onclick="addNewMadde()"><i class="icon icon-plus-circle"></i>Yeni Ekle</button>
        </div>
    </div>
</div>
<script>
    let maddeCounter = 1;

    function addNewMadde() {
        maddeCounter++;

        // Yeni Madde Container oluştur
        var newMaddeContainer = document.createElement('div');
        newMaddeContainer.className = 'form-row mt-1';

        // Yeni Madde Başlığı
        var newMaddeTitle = document.createElement('div');
        newMaddeTitle.className = 'form-group col-4 m-0';
        newMaddeTitle.innerHTML = '<label for="email" class="col-form-label s-12"><i class="icon-envelope-o mr-2"></i>Madde Başlığı</label>' +
            '<input name="madde_t[]" placeholder="Madde Başlığı" class="form-control r-0 light s-12" type="text">';

        // Yeni Madde Açıklaması
        var newMaddeDescription = document.createElement('div');
        newMaddeDescription.className = 'form-group col-4 m-0';
        newMaddeDescription.innerHTML = '<label for="roll1" class="col-form-label s-12">Madde Açıklaması</label>' +
            '<textarea name="madde_d[]" placeholder="Madde Açıklaması" class="form-control r-0 light s-12" type="text"></textarea>';

        // Yeni Ekle Butonu
        var newButtonDelete = document.createElement('div');
        newButtonDelete.className = 'form-group col-2 mt-4 pt-2';
        newButtonDelete.innerHTML = '<button class="btn btn-danger btn-remove" type="button" onclick="deleteMadde()"><i class="icon icon-delete"></i>Satır Sil</button>';

        var newButton = document.createElement('div');
        newButton.className = 'form-group col-2 mt-4 pt-2';
        newButton.innerHTML = '<button class="btn btn-success" type="button" onclick="addNewMadde()"><i class="icon icon-plus-circle"></i>Yeni Ekle</button>';

        // Yeni eklenen alanları, sayfaya ekleyin
        newMaddeContainer.appendChild(newMaddeTitle);
        newMaddeContainer.appendChild(newMaddeDescription);
        newMaddeContainer.appendChild(newButtonDelete);
        newMaddeContainer.appendChild(newButton);

      document.getElementById("maddeContainer").appendChild(newMaddeContainer);
    }
</script>

I duplicated and filled the inputs 3 times, but the data comes like this:

input

When I print the data I entered into the inputs with the dd command, it gives the following output. The first value in the inputs comes, but the other values do not. I did the same codes in another project, but it works with the same codes.

"madde_t" => array:1 [▼
    0 => "dsadsa"
  ]
  "madde_d" => array:1 [▼
    0 => "dasdsa"
  ]

my project is a laravel project.

MUI: make button with link look like normal button

I have a button to download a file with a filename. To do that I wrote this:

<Button
  color='primary'
  href=`/apiproxy/objects/${id}/subobjects`
  LinkComponent={React.forwardRef((props, ref) => <Link {...props} type='text/csv' download={`object_${id}_subobjects.csv`} ref={ref} />)}
/>

The resulting button looks the same as my other buttons which don’t have href attribute (also with color='primary'), but on hover its text changes colour to blue, unlike with the other buttons, where it stays white.
What would be the best way to make it styled the same as other buttons? I can specify &:hover text colour to white, but that will break when theme changes the text colour of other buttons.

Is there a way to change the Link component to make it styled the same as other buttons, or if not, what in the palette do buttons use as their hover text colour so that I can set it to that?

React Router v6 and Redux/toolkit

have just learned React router v6 and API layers but am finding it difficult to use it with Redux toolkit, like using those auto generated hooks from RTK Query which starts with use and ends with either mutation or Query e.g ‘useGetUsersQuery’.

And another thing is authentication, Redux/toolkit attaches the token to every request and handles token expiration and fallback requests, but with the new react-router v6 am failing to accomplish that in loaders before the page renders.

Please help.

How to I accomplish that with loaders and actions cause I can’t use hooks in loaders either

How to align arrows rotation in OpenLayers?

I am trying to build an arrow track on the OpenLayers library. I used as a basis the code proposed in OpenLayers examples with drawing an arrow picture for each track segment. But the following problem appears when building the track:

Example of track with arrows

The arrows can look in the wrong direction at all, where the track is pointing. Probably, the reason is that there are small shifts of the track (GPS inaccuracy) and the arrow drawing falls on this inaccuracy.

Is it possible to somehow align the arrows with respect to the neighboring lines so that they are aligned?

new VectorLayer({
    source: trackVectorSource,

    // Below style code for arrows draw
    style: (feature, resolution) => {
        const geom = feature.getGeometry()
        const styles = [
            new Style({
                stroke: new Stroke({
                    color: 'rgba(0,119,255,0.76)',
                    width: 4
                })
            })
        ]

        // This is a variable that specifies the number of lines that will be skipped before the arrow is output (to avoid Christmas tree look like)
        const initialSkipCount = resolution / 32
        let skipCount = initialSkipCount
        console.log(skipCount)

        // Segments iterator
        geom.forEachSegment((start, end) => {
            if (skipCount > 0) {
                skipCount--
                return
            }
            skipCount = initialSkipCount

            // Calculate arrow rotation
            const dx = end[0] - start[0]
            const dy = end[1] - start[1]
            const r = Math.atan2(dy, dx)
            styles.push(
                new Style({
                    geometry: new Point(start),
                    image: new Icon({
                        src: '/path/to/track-arrow.png',
                        width: 14,
                        anchor: [0.75, 0.5],
                        rotateWithView: true,
                        rotation: -r
                    })
                })
            )
        })
        return styles
    }
})

Already tried to make a common variable that stored the “approximate” average angle, but it made the arrows look mostly one way.

React icons are not resolved

Failed to compile.

Module not found: Error: Can't resolve 'react-icons/ai' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'
ERROR in ./src/components/Navbar.jsx 5:0-57
Module not found: Error: Can't resolve 'react-icons/ai' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Navbar.jsx 6:0-49
Module not found: Error: Can't resolve 'react-icons/io' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Navbar.jsx 7:0-50
Module not found: Error: Can't resolve 'react-icons/ri' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Navbar.jsx 8:0-42
Module not found: Error: Can't resolve 'react-icons/fa' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 6:0-48
Module not found: Error: Can't resolve 'react-icons/io' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 7:0-40
Module not found: Error: Can't resolve 'react-icons/fa' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 8:0-56
Module not found: Error: Can't resolve 'react-icons/hi' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 9:0-50
Module not found: Error: Can't resolve 'react-icons/ti' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 10:0-49
Module not found: Error: Can't resolve 'react-icons/ci' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 12:0-49
Module not found: Error: Can't resolve 'react-icons/pi' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 13:0-44
Module not found: Error: Can't resolve 'react-icons/md' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 14:0-49
Module not found: Error: Can't resolve 'react-icons/lu' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 16:0-41
Module not found: Error: Can't resolve 'react-icons/fi' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 17:0-72
Module not found: Error: Can't resolve 'react-icons/io5' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

ERROR in ./src/components/Sidebar.jsx 19:0-30
Module not found: Error: Can't resolve './Body.jsx' in 'C:UsersjananOneDriveDesktopdukaannishyansrccomponents'

webpack compiled with 15 errors

i gave all these commands but still i receive these errors idk
install npm i react-icons

npm install
npm update
npm install @react-icons/all-files –save
npm install react-icons –save

any one please help me how to correct this error. this happens everytime ..

nested array typescript type

    type FixedArray<T, D extends number> = Array<T> & {
        length: D
    }

    type NestedArrays<T> = Array<T | NestedArrays<T>>

type FixedArray<T, D extends number> = Array<T> & {
    length: D
}

const a: FixedArray<FixedArray<FixedArray<number, 2>, 2>, 3> = [
    [
        [1, 2],
        [1, 2],
    ],
    [
        [1, 2],
        [1, 2],
    ],
    [
        [1, 2],
        [1, 2],
    ],
]

I’ve never been able to get the array length to be automatically inferred from the child elements

why the content of iframe is zoom out and zoom in during the resizing of the webpage?

in my webpage, formally the ads are showing and the ads are setted up the code by a iframe and also I tried once a inspect and then resizing the webpage and that is maximize and minimize the webpage(and that is inspect webpage move resize up and resizing down)., my whole webpage is changing their aspect ratio of their suitable maximize and minization of the webpage. And the ads are only showing abnormal during the resizing (like zoom in during resizing up and zoom out during resizing down).(ads are in a iframe of a html code).

i try a meta tag and media queries and not I had a exact correction.

Alert after modal page closed APEX 23.1

How can I alert a text when the close button (X) of modal dialog pressed ?

Note : I can’t use dialog closed event because I want to press the X button of modal page not the cancel button !

How do I retrieve and join() an array that is stored in a ?

The array is the result of a user interaction. The joined string will be displayed in another . I can’t get it to work. Thank you in advance for your help.

The array is the result of an user interaction. I can’t get it to work. Help, please.

<body>

  <script type="text/javascript">
     var storedArray = document.getElementById("myStoredARRAY").innerHTML;      

alert(storedArray);     
    
     var joinedQuote = storedArray.join("");
        
alert(joinedQuote);
        
  </script>
    
     myStoredARRAY
     <div id="myStoredARRAY">[,'B','x','f','b']</div>

</body>

Understanding the bundles, lib, lib-esm and iife folders

Some libraries/frameworks when build/prepare the application for publishing.

They generate a folder structure in the dist folder with the folders: bundles, lib, lib-esm or iife.

Here’s the first question: What is the purpose of these folders?

Reading about it, I understood that the outputs are generated in this folder structure for greater compatibility of use. But I can’t say with absolute certainty if this is really the case (It’s impressive the number of posts/tutorials that say you must and how to generate these folders, but don’t explain why).

Now, the second question: How does the project that imports this package know which folder structure to use? Example: How does a browser know that it has to use the bundles folder and not lib-esm? Or, how does Nodejs know that it has to use lib and not lib-esm?

Finally, thinking about using Typescript and debugging the package. The last question: When the package is published (production environment), should the type definition files and source maps be included in the output? If so, where should they be generated? In bundles? Lib? Lib-esm? In all folders?

How do I link one array index to another array index that is being generated randomly? Javascript

Im trying to make a simple webpage that shows random quotes. These are in Russian. I also want to show the translation in a separate box. The quotes are being picked at random. How do I link the index of the first array to the correct corresponding index position of the second array?

Please see my code. Im new to coding so any advice is welcome.

let quotes = [
    "Вчера на вечеринке мы весело провели время", "Я начал здесь работать три года назад",
    "Вчера был худший день в моей жизни", "Когда-то у меня был щенок по кличке Шарик", "Все выходные шёл дождь", "Могли бы вы повторить это, пожалуйста?", "Как долго вы изучаете русский?",
    "На каком языке вы предпочитаете говорить?", "Можете посоветовать хорошую книгу на русском?"
]

let translation = ["Yesterday at the party , we had a great time.", "I started working here three years ago.", "Yesterday was the worst day of my life.",
    "I used to have a puppy named Sharik.", "It rained all weekend.", "Could you please repeat that?", "How long have you been studying Russian?",
    "In which language do you prefer to speak?", "Can you recommend a good book in Russian?"

]


function newQuote() {
    let randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById("quoteDisplay").innerHTML = quotes[randomNumber]

};

VSCode automatically adds a comment on save

I am working on a website in VSCode and whenever I save a file, it automatically adds a comment at the top of the document. It does it in both HTML, CSS and Javascript files.

I don’t know what is causing it?

I use Prettier as formatter but I can’t find any information on this online.

I tried looking in my .settings file, but the only thing that appears there is editor.formatOnSave: true. I also tried looking it up online but I can’t find anything like this anywhere.

when integrating mathType top of tinymce I got error

I want to integrate mathType top of tinymce for creating formulas for both maths and chemistry.

I am using plugin like this:
external_plugins: { tiny_mce_wiris: ‘https://www.wiris.net/demo/plugins/tiny_mce/plugin.js’ },
toolbar: [ ‘undo redo preview’,
‘tiny_mce_wiris_formulaEditor’,
‘tiny_mce_wiris_formulaEditorChemistry ‘,
‘blocks fontfamily fontsize ‘,
‘bold italic underline strikethrough blockquote codesample codeformat subscript superscript |
image table |
align lineheight |
checklist numlist bullist indent outdent |
emoticons charmap |
removeformat’ ],

I am getting error like this

Uncaught TypeError:

tinymce.create is not a function
at plugin.js:1:1068526your text
at plugin.js:1:1076185
at plugin.js:1:1076189

want to create a functionality to generate formulas

A non-serializable value was detected in an action (redux-toolkit)

In the payload of the action in the store, I store the downloaded file with the File type, which will then pass verification in the saga

  const form = new FormData();
 
   if (privateKey && privateKey instanceof Blob) {
     const blob = new Blob([privateKey], { type: 'multipart/form-data' });
     form.append('privateKey', blob);

and then send to backend

every time after downloading a file there is an error in the console

enter image description here

How can I fix it?
disabling the serializable-check – for me it’s not good idea