Mapboxgl breaks when I change django language in settings

Basically my code works well when language in django settings.py is set to “en-us”
But when I try to change it I get:

Uncaught Error: Invalid LngLat object: (NaN, NaN)
at new Ha (lng_lat.js:39:19)
at Function.convert (lng_lat.js:142:20)
at Rr.setLngLat (marker.js:337:31)
at dodaj_marker ((indeks):282:37)
at (indeks):296:9

I’m changing lang because I need to get months in different language, but how does it affect mapbox?
Is there any mapbox language variable I have to edit in order to get it working ?

Retrieving image_url from json server into quizzes

I am building a Quiz app. Initially, the quiz app did not have image_url. But now I want to add some image quizzes. I have also added a key-value pair for the image_url in my JSON object. But I am still unable to retrieve these images into my quiz app.

I am adding my code sandbox here to help you guys understand my problem. There is a db.json file but I am running it on a JSON server to retrieve the data.

Search for a term from an input field and reset it if the is no value, problem with words with more than two character (delay function included)

I built an input field to search on my questions and answers page some keywords. The system that I built is more than that because it also opens and closes the div with the answer (both from the input and from different other HTML tags), but I’m focusing on the input field.

First my code and then my problem:

  const searchfaq = $('#text-search');
  const searchtarget = $(".nodisplay");
  const htmltochange = searchtarget.map( function () {
    return $( this ).children().find('p').html();
  }).get();

  function delay(callback, ms) {
    var timer = 0;
    return function() {
      var context = this, args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        callback.apply(context, args);
      }, ms || 0);
    };
  }
  
  searchfaq.keyup(delay(function (e) {
    let val = $(this).val().toLowerCase();
    searchtarget.hide();
    searchtarget.prev().children('.minus').removeClass('rotate');

    searchtarget.each(function(index) {
      let text = $(this).html().toLowerCase();
      let paragraph = $(this).children().find('p');
      let otherparagraph = searchtarget.children().find('p');

      if(text.indexOf(val) != -1) {
        $(this).show();
        $(this).prev().children('.minus').addClass('rotate');
        var re = new RegExp(val, 'gi');
        paragraph[0].innerHTML = htmltochange[index].replace(re, `<mark>$&</mark>`);
      }
      if( val.length === 0 ) {
        paragraph[0].innerHTML = htmltochange[index];
        $(this).hide();
        searchtarget.prev().children('.minus').removeClass('rotate');
      }
    });

  }, 500));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lazyblock-faq-search">
  <h1>Frequently Asked Questions</h1>
  <form _lpchecked="1">
    <input id="text-search" type="text" aria-label="search-for-answers" placeholder="Search for answers">
  </form>
</div>

<div class="lazyblock-faq">
  <div class="row">
    <aside class="col-md-3">
      <ul class="sticky-top">
        <li class="active">
          <a href="#chapter-1">Chapter 1</a>
        </li>
        <li class="">
          <a href="#chapter-2">Chapter 2</a>
        </li>
      </ul>
    </aside>
    <div class="question-and-answer col-md-9">
      <h2 id="chapter-1">Chapter 1</h2>
      <div class="single-faq">
        <h3>This is a question</h3>
        <div class="icon-faq">
          <span class="minus">+</span>
          <span class="plus">–</span>
        </div>
        <div class="nodisplay collapse" style="display: none;">

          <div class="lazyblock-content " id="content-extra-Z2cLmzB">
            <div class="row">
              <div class="col-md-12">
                <p>This is the answer</p>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="single-faq">
        <h3>This is a question 2</h3>
        <div class="icon-faq">
          <span class="minus">+</span>
          <span class="plus">–</span>
        </div>
        <div class="nodisplay collapse" style="display: none;">

          <div class="lazyblock-content " id="content-extra-ZhBtAi">
            <div class="row">
              <div class="col-md-12">
                <p>This is the answer 2</p>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="single-faq">
        <h3>Question 3 ?</h3>
        <div class="icon-faq">
          <span class="minus">+</span>
          <span class="plus">–</span>
        </div>
        <div class="nodisplay collapse" style="display: none;">

          <div class="lazyblock-content " id="content-extra-ZPm3XU">
            <div class="row">
              <div class="col-md-12">
                <p>This is the answer 3</p>
              </div>
            </div>
          </div>

        </div>
      </div>
      <h2 id="chapter-2">Chapter 2</h2>
      <div class="single-faq">
        <h3>This is a question 4</h3>
        <div class="icon-faq">
          <span class="minus">+</span>
          <span class="plus">–</span>
        </div>
        <div class="nodisplay collapse" style="display: none;">

          <div class="lazyblock-content " id="content-extra-1sQXGa">
            <div class="row">
              <div class="col-md-12">
                <p>This is just a test for question 4</p>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="single-faq">
        <h3>This is a question 5</h3>
        <div class="icon-faq">
          <span class="minus">+</span>
          <span class="plus">–</span>
        </div>
        <div class="nodisplay collapse" style="display: none;">

          <div class="lazyblock-content " id="content-extra-ZioRKT">
            <div class="row">
              <div class="col-md-12">
                <p>This is just a test for question 5</p>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="single-faq">
        <h3>This is a quesition 6 and it has a weird layout</h3>
        <div class="icon-faq">
          <span class="minus">+</span>
          <span class="plus">–</span>
        </div>
        <div class="nodisplay collapse" style="display: none;">

          <div class="lazyblock-content " id="content-extra-2fxKyB">
            <div class="row">
              <div class="col-md-12">
                <p>This is just a test for question 6</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

The code works in this way. The user will insert a string in the input field and the word will be searched inside the div with the class ‘no-display’, precisely in its HTML (I had to specify it because, in the original code, the particular div will have HTML inside, not just text).

The code works with two caveats:

  1. I had to add a delay function because, for some reason, without it that would work only for the first two characters, then it won’t be able to find any other word.

  2. Connect to problem 1, if you tried to insert another value (string) in the input field, it won’t reset correctly in a sense that, it won’t be able to find any different word. Let’s take this example: I will insert the word test, then if I tried to delete a word from that, (string tes) it will still wrap it the word in the mark tag. But then, if I will add it again the character T at the end, it won’t find the divs with the word test, the code will fail.

  3. Also, before resetting to the initial value (val.length === 0) I will see every word wrapped in a tag.

Is it a bug or am I missing something?

how to fetch auth token from salesforce api using nodejs and where to pass?

So I am trying to get the auth token and authenticate salesforce api endpoint

where i try to use axios and fetch

i made a function to get post it to the api end point to get the response
sample response is

{
  "access_token": "00DR00000008oBT!AQwAQCPqzc_HBE59c80QmEJD4rQKRRc1GRLvYZEq...",
  "instance_url": "https://MyDomainName.my.salesforce.com",
  "id": "https://login.salesforce.com/id/00DR00000008oBTMAY/005R0000000IUUMIA4",
  "token_type": "Bearer",
  "issued_at": "1513887500425",
  "signature": "3PiFUIioqKkHpHxUiCCDzpvSiM2F6//w2/CslNTuf+o="
}

Link for salesforce api
https://developer.salesforce.com/docs/atlas.en-us.api_iot.meta/api_iot/qs_auth_access_token.htm

then i am trying to pass the auth to get the token and fetch to the endpoint to authenticate

and API gave below example on how to approach

The access_token field in the response contains the access token value. API clients pass the access token in the Authorization header (Authorization: Bearer access_token) of each request.

Use the instance_url field value in the response as the Salesforce instance URL in your REST API resource URIs (for example, instance_url/services/data/v42.0/iot/orchestrations).

can anyone give there peace of mind on how to further solve the problem to finish authentication ?

const auth = ()=>{
    

    axios.post (`${endpoint}/services/oauth2/token`,{
    body:`grant_type = password&client_id=${clientId}&
    client_secret=${clientSecret}&
    username=${username}&
    password=${password}`,
    headers: {
        "Authorization": 'Basic' + Buffer.from(`${client_Id}:${clientSecret}`).toString('base64'),
        "Content-Type": "application/x-www-form-urlencoded",
    }
})
.then(res => res.json())
.then(json => {
    console.log('fetching token')
    console.log(res)
    return json;
}).catch(error => console.log(error));

return [res.access_token, res.instance_url];
}


const salesforce=( res)=>{

    const token = auth(config);

    const instanceToken =token[0];
    const instance_url= token[1];

    return fetch(`{}`)
    

}

Get current date and go back in time 30 days or certain amount of time [duplicate]

So I’m trying to build a filter that searches the date ranges, and I’m trying to get the date of today and the date before 30 days, so the search by default would be in this case for example: FROM 11-03-2022 TO 11-04-2022, and I don’t know how to get the current date – 30 days.

const from = ?
const to = new Date().toISOString().slice(0, 10)
// then those values I'm adding to input type date with on change events

How do I use Vimeo oEmbed API in nodejs?

I am working on a react web application that can upload videos to Vimeo and retrieve them when required. I am able to successfully upload the video privately. I am using the hide from Vimeo privacy setting and embed on specific domains option. On uploading the video I want to receive an embeddable iframe string from the backend server so that I can display the video in my react app.
The oEmbed API provided on Vimeo API reference page is working in postman. But when I try to get it through nodejs string I get the following error:

Error: {“error”:”The requested page couldn’t be found.”}
at IncomingMessage. (C:Usersprithnode_modulesvimeolibvimeo.js:164:19)
at IncomingMessage.emit (node:events:402:35)
at endReadableNT (node:internal/streams/readable:1343:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
status code
404
headers
{
connection: ‘close’,
‘content-length’: ’49’,
server: ‘nginx’,
‘content-type’: ‘application/vnd.vimeo.error+json’,
expires: ‘Sun, 10 Apr 2022 20:00:04 GMT’,
‘cache-control’: ‘private, no-store, no-cache’,
‘strict-transport-security’: ‘max-age=31536000; includeSubDomains; preload’,
‘request-hash’: ‘8fa895fc’,
‘x-bapp-server’: ‘api-v22576-6dhrr’,
‘x-vimeo-dc’: ‘ge’,
‘accept-ranges’: ‘bytes’,
via: ‘1.1 varnish, 1.1 varnish’,
‘fastly-original-body-size’: ‘0’,
date: ‘Mon, 11 Apr 2022 08:00:04 GMT’,
‘x-served-by’: ‘cache-iad-kiad7000087-IAD, cache-maa10229-MAA’,
‘x-cache’: ‘MISS, MISS’,
‘x-cache-hits’: ‘0, 0’,
‘x-timer’: ‘S1649664004.146166,VS0,VE292’,
vary: ‘Accept,Vimeo-Client-Id’
}

This is my code:

vimeo_embed.js

let Vimeo = require('vimeo').Vimeo;

const USER_ID = "USER_ID"
const USER_SECRET = "USER_SECRET"
const USER_TOKEN = "USER_TOKEN"

let client = new Vimeo(USER_ID, USER_SECRET, USER_TOKEN);

client.request({
    method: 'GET',
    path: '/app/oembed.json/',
    query: {url: 'https%3A//vimeo.com/xxxxxxxx'}
},function (error, body, status_code, headers) {
    if (error) {
      console.log('error');
      console.log(error);
    } else {
      console.log('body');
      console.log(body);
    }
   
    console.log('status code');
    console.log(status_code);
    console.log('headers');
    console.log(headers);
  });

I am not clear about why this error is thrown. I have verified that the authentiction is working.
Please help me.

Error TypeError: undefined is not an object (evaluating ‘verifier.verify’)

After I click my touchableopacity I created in react native the button redirects to this function below, and when executed the function returns an error stating Error TypeError: undefined is not an object (evaluating 'verifier.verify') I don’t understand why I am receiving this problem as I copied the code from the Firebase website https://firebase.google.com/docs/auth/web/phone-auth?authuser=0&hl=en#set-up-the-recaptcha-verifier. Thank you in advance for any answers!

function phoneSignIn(phoneNumber, navigation){
  // phoneNumber is a string ex: +11111111
  let appVerifier = window.recaptchaVerifier;
  signInWithPhoneNumber(auth, phoneNumber, appVerifier)
  .then((confirmationResult) => {
    window.confirmationResult = confirmationResult;
    navigation.navigate('Verification Code');
  }).catch((error) => {
    console.log("Error " + error);
    //returning error here
  });
}

JEST – check if objects array is a subset of another array

Using JEST I want to test if an array of objects is a subset of another array.

I want to test the following:

const users = [{id: 1, name: 'Hugo'}, {id: 2, name: 'Francesco'}, {id: 3, name: 'Carlo'}];
const subset = [{id: 1, name: 'Hugo'}, {id: 2, name: 'Francesco'}];

expect(users).toContain(subset)

I’ve tried the following:

describe('test 1', () => {
  it('test 1', () => {
    expect(users).toEqual(
      expect.arrayContaining([
        expect.objectContaining(subset)
      ])
    )
  });
});

But this is not correct since objectContaining doesn’t accept array as param … it works only if subset is a single object.

Manifest V3 extension: background’s ServiceWorker does not unload after sending message to popup

With manifest V3, the background’s Service Worker will unload (being inactive) after idling for 30 seconds. When I send a runtime message from popup to background without any further actions, after 30 seconds, the background’s Service Worker is unloaded like usual. But when I send a runtime message from background to popup, it is not unloaded when idling anymore until it is forcefully unloaded by 5 minutes.

After it is forcefully unloaded by 5 minutes cap, when the popup is triggered again, message is not successfully passed anymore.

Here are the test codes (no special permissions):
manifest.json

{
    "manifest_version": 3,
    "name": "Test sw-pp msg",
    "version": "1.0.0",
    "action": {
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "activeTab"
    ],
    "host_permissions": [
        "http://*/*",
        "https://*/*"
    ]
}

popup.js

const lblStatus = document.getElementById('lblStatus');

// send test message from popup to background -> OK
chrome.runtime.sendMessage('to-background', (res) => {
    if (chrome.runtime.lastError) {
        lblStatus.textContent = 'Error';
    } else {
        lblStatus.textContent = 'OK';
    }
});

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg == 'to-popup') {
        lblStatus.textContent = 'Message from background to popup';
        sendResponse(1);
    }
});

popup.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="lblStatus" style="padding: 2em; font-size: 2em;"></div>
    <script src="popup.js"></script>
</body>

</html>

background.js

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
  if (msg == 'to-background') {
    console.log('Message from popup to background');
    sendResponse(1);

    /* Test sending message from background to popup
    - The first time the message is sent, the background's service worker may still be unloaded like usual
    - The second,... time the message is sent, the background's service worker is not unloaded anymore.
    - Without below code, the background's service worker is unloaded like usual
    */
    setTimeout(() => {
      chrome.runtime.sendMessage('to-popup', (res) => {
        if (chrome.runtime.lastError) {
          console.log('ERR');
        } else {
          console.log('OK');
        }
      });
    }, 2000);
  }
});

So I wonder what is the correct way to send message from background to popup (or options,…) in Manifest V3 extension?

NativeStackNavigator React Native – bottomTabNavigator

I want to make a simple bottom tab navigator, but I keep getting the same error…

Error: Element type is invalid: expected a string (for built-in components)
 or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

I know the imports are correct, because when I use another Navigator the LoginScreen does work… Any ideas?

import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import LoginScreen from "../screens/LoginScreen";

const Tabs = () => {
    const Tab = createBottomTabNavigator;

    return(
        <Tab.Navigator>
            <Tab.Screen name="LoginScreen" component={LoginScreen}/>
        </Tab.Navigator>
    );
}

export default Tabs;

How to handle browser`s go back action in front and back end separation project`s pagination? [duplicate]

Usually we use www.foodoc.com?page=1 to get HTML. So if I jump to page=3 from page=1. Browser`s go back button can do a good job of fulfilling our expectations.

But if I use AJAX to do pagination. All things were being done by javascript. User click browser`s go back, every thing will be gone. This user will go back to the other page before he reached this page.

So, is there any solution can help me to solve this situation?

Adding Images Dynamically into Swiper JS not working

I have a page where images need to showed in slider.

// Initializing the Swiper
var swiper = new Swiper(".mySwiper", {
    loop: true,
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    autoplay: {
        delay: 1000,
        disableOnInteraction: false,
    },
    watchSlidesProgress: true,

});

var swiper2 = new Swiper(".mySwiper2", {
    loop: true,
    spaceBetween: 10,
    autoplay: {
        delay: 1000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    thumbs: {
        swiper: swiper,
    },
});

$("body").keydown(function (e) {
    if (e.keyCode == 37) { // top
        swiper.slidePrev();
    }
    else if (e.keyCode == 39) { // bottom
        swiper.slideNext();
    }
});


let image_list = ["https://swiperjs.com/demos/images/nature-1.jpg", "https://swiperjs.com/demos/images/nature-2.jpg", "https://swiperjs.com/demos/images/nature-3.jpg", "https://swiperjs.com/demos/images/nature-4.jpg", "https://swiperjs.com/demos/images/nature-5.jpg", "https://swiperjs.com/demos/images/nature-6.jpg", "https://swiperjs.com/demos/images/nature-7.jpg",
"https://swiperjs.com/demos/images/nature-8.jpg",
"https://swiperjs.com/demos/images/nature-9.jpg",
"https://swiperjs.com/demos/images/nature-10.jpg"]
// Adding Images
for (i = 0; i < image_list.length; i++) {
    let div = '<div class="swiper-slide"><img src="' + image_list[i] + '" alt=""/></div>';
    $("#large-img").append(div);
    $("#small-img").append(div);
}
/* SWIPER JS */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    height: 10rem;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper2 {
    height: 27rem;
    width: 100%;
}

.mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />


<div class="container-fluid" style="padding: 0;">
    <div class="row g-0 justify-content-center mt-5">
        <div class="col-md-12">
            <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
                <div class="swiper-wrapper" id="large-img">
                    <!-- Images coming from the backend through javascript -->
                </div>

                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>

            </div>

            <div thumbsSlider="" class="swiper mySwiper">
                <div class="swiper-wrapper" id="small-img">
                    <!-- Images coming from the backend through javascript -->
                </div>
            </div>

        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

When I am adding the Images Dynamically through the javascript into the HTML template, the SWIPER doesnt work. I am actually passing the media url of the image in the img.src attribute as I am using Django as the backend. No matter from where you pass the image url, it doesnt work.