Category: javascript

I have my own calendar component that always renders three months at a time, each containing 6 weeks, each containing 7 days. Each day has a touchable-opacity, that sets the selected day of the calendar component. That adds up to a lot of views to re-render on every day change. The day components are memoized and shouldn’t re-render unless the day was selected.

I used flipper to diagnose the render times. On react-native 0.66.5, the entire render took around 50ms on 0.73.1 it took over 500ms. I haven’t changed anything else in the code.

I have a Razor page that takes dates as input and displays the dates that have been entered in a table.

To input the date, I use <input type="date" /> which MDN states:

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-MM-dd.

This works as described, showing the date in the User’s choice date format. I can even change my Windows settings, reload the page, and see what I set it to.

The trouble comes from trying to convert the yyyy-MM-dd dates I have stored to the user selected format.

I have tried managing the display format at the server with C# date.ToShortDateString() which looked right on localhost, but displayed the CultureInfo from the server when I deployed to Dev.

I have also tried managing the display format as a last step with JavaScript date.toLocaleDateString() which seems to just pick the standard MM/dd/yyyy for en-US.

This is 2023, the browser knows what the user has selected, it is using with the <input>. How can I format my dates the same? (Preferably without extra libraries that are no longer supported.)

I have a large mp4 video, this video may be up to 1GB
The video is on a second site that is not the original site, and I am contacting it via
video tag

<video>
<source label="fullHD" type="video/mp4" src="http://example.com/video.mp4">
Your browser does not support the video tag.
</video>

But I noticed that it takes a long time to download and even when downloading
When I change the cursor to a second time, it takes time to download the clip. Can I?
Broadcast video through js or Jquery? or streaming from php but how?
Note that the video is not on the server on my site, but on other servers
I cannot download the video. I just want to broadcast the video from the host servers to my servers directly without downloading.

Tried using HLS with ffmpeg but to no avail
ffmpeg to download the entire video and convert it to .ts
I also tried DASH, but the same result. Can you suggest me a solution?
Suppose it is impossible to upload the video to the site’s servers

I am working on making a chrome extension that shows info about text when you double click on it. I want to have the user double click on text and it will show a popup under the selected text. The popup will need to be able to access what the selected text is.

Here is my code so far:
manifest.json:

{
    "manifest_version": 3,
    "name": "Language Practice",
    "description": "A extension to help the user to learn a new language.",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": [
                "js/contentscript.js"
            ]
        }
    ]
}

contentscript.js:

document.body.ondblclick=function() {
    // what do I put here?
};

I’m Java developer, but I wanna be full-stack dev. I decide which framework is better to combine with Spring framework in Java, React or Angular?
Thanks for all advice.

Let’s say I have a vue component:

import {foo} from 'path';
export default {
  data() {
    return {
      inputValue: "",
    };
  },

How can I create imported JavaScript function that takes an inputValue, modifies it, and then returns the updated state of the inputValue to the vue component?

I tried passing the inputValue as a parameter to the function foo(), changing its value inside the function, and returning it, but I got an undefined value.

I’m creating an external function because modifying inputValue is just a small part of the function, and I don’t want my code to become cluttered.

var x = [1, 2, 3, 4, 5];
var y = [...x];
console.log(x);
console.log(y);
console.log(typeof(x));
console.log(typeof(y));
console.log(x == y);
console.log(x === y);

[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]
object
object
false
false

Why are the last two lines not True?

There should not be any whitespace between the three. If col 1 is shrinked or expanded, col 3 should remain fixed, only col2 should change. Same applies for the other two divs.

In my case resizing one column, alters all three columns.

I want to be able to save the values of the checkboxes and have the already checked ones displayed as checked even after I go back to the previous page and again to the next page. In all cases, I do not want the checked boxes to disappear. Here is what I have written as for the HTML code:

<style>
    .add-margin {
        margin-top:10px !important;
    }
</style>
<div>
    <div ng-init="loaded()" ng-class="{'add-margin': descriptionsAvailable}" class="checkbox-inline" ng-repeat="opt in options track by $index">
        <label style="direction:ltr;">
            <input ng-disabled="answer['none']" class="save-cb-state" type="checkbox" ng-model="answer[opt]" ng-true-value="true" ng-false-value="false" name="checkbox-answer-input" display= "inline-block", style = "width: 15px; padding: 0; margin: 0; position: relative; top: 0px; align-items: center;">
            <span>{{opt}}</span><br/>
            <span><i>{{descriptions[$index]}}</i></span>
        </label>
      </div>

</div>

Here is the JavaScript code:

function() {
  // variable to store our current state
  var cbstate;

  // bind to the onload event
  window.addEventListener('load', function() {
    // Get the current state from localstorage
    // State is stored as a JSON string
    cbstate = JSON.parse(localStorage['CBState'] || '{}');

    // Loop through state array and restore checked
    // state for matching elements
    for(var i in cbstate) {
      var el = document.querySelector('input[name="' + i + '"]');
      if (el) el.checked = true;
    }

    // Get all checkboxes that you want to monitor state for
    var cb = document.getElementsByClassName('save-cb-state');

    // Loop through results and ...
    for(var i = 0; i < cb.length; i++) {

      //bind click event handler
      cb[i].addEventListener('click', function(evt) {
        // If checkboxe is checked then save to state
        if (this.checked) {
          cbstate[this.name] = true;
        }

    // Else remove from state
        else if (cbstate[this.name]) {
          delete cbstate[this.name];
        }

    // Persist state
        localStorage.CBState = JSON.stringify(cbstate);
      });
    }
  });
})();

However, when I go back to the previous page, the previously checked boxes are unchecked. This holds true as well when proceeding to the next page again.

I have a list of ranges where depending on the cell value, a checked checkbox (Completada) or an unchecked checkbox (No completada) should be inserted.

The problem I have is that the script places checkbox in the entire list of ranges, it does not ignore empty cells or cells that do not contain those specific values.

It’s probably a very slight problem, but I can’t fix it.

This is my actual code:

function checkboxVistaMensual_comparacion() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const targetSheet = ss.getSheetByName('Calendario');  // Hoja Destino

  var rangesCheckbox = targetSheet.getRangeList(['F6:F98', 'I6:I98', 'L6:L98', 'O6:O98', 'R6:R98', 'U6:U98', 'X6:X98']);
  var rangesCheckboxVal = rangesCheckbox.getRanges();
  
  var c = 'Completada';
  var nc = 'No completada';

  var valores = []
  rangesCheckboxVal.forEach((row)=> {

    if ( row.valueType == SpreadsheetApp.ValueType.CHECKBOX ) return;
    if ( row == '' ) return;

    if ( row == c ){
      valores.push(c);
    } else {
      if ( row == nc ){
      valores.push(nc);
      }
    }

  })  

  rangesCheckbox.insertCheckboxes(c, nc);
}

im creating a Product linding page (single product page) with react but when loading the navbar component

it couses the componint’s assists to load from wrong path for examble product page path is (/product/:id)
the navbar component will go (/product/:id/assist name ) to get the assist witch will not load the assist
because that is not the right path for the asities.
the exists on the (./assist name )

app.js file

function App() {
  return (
    <Router>
      <Container>
        <Routes>
          <Route path="/"  element={<Home />} />

          <Route path="/login" element={<Login />} />
          <Route path="/checkout" element={<Checkout />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/address" element={<Address />} />
          <Route path="/payment" element={  <Payment />  } />
          <Route path="/addproduct" element={<AddProduct />} />
          <Route path="/teast" element={<FirebaseUpload />} />
          <Route path="/teast2" element={< Uploadfile2/>} />
          <Route path="/teast3/:id" element={< Empty/>} />
          <Route path="/products/:id" element= {<SingleProductPage/>} />
          <Route path="/orders" element={<Orders />} />
        </Routes>
      </Container>
    </Router>
  );
}

single product page
that has’s the (/product/:id) path

function SingleProductPage() {

 
  const [ {ReducerProducts , basket},dispatch] = useStateValue();
  console.log("Rproduct>>>>>>>",ReducerProducts[0].Data)
  console.log("basket>>>>>>>",basket)

   const {id} = useParams()
  let  product = ReducerProducts[0].Data ; 

 const THEproduct =  product.find(Prod => Prod._id === id) ;

   console.log("product>>>>>",product);
   console.log("productID>>>>>",THEproduct  );
  return (
    

    <div id="single-Container">
      
      <Navbar/>
     
      single page

    </div>
    



    )
}

when im on (/) path or any other path

when im on (/product/:id) path

I have the following parent component:

const Details = ({ processing, toProcess, deepDiving }) => {
const [ddFile, setDdFile] = useState(null)

if (!deepDiving)
    return <Summary {...{ processing, toProcess, setDdFile }} />
else
    return <DeepDive {...{ ddFile }} />
}

in component DeepDive, I have a useEffect() function:

const DeepDive = ({ ddFile: file }) => {
const db = read(file)
const [ary, setAry] = useState([])

useEffect(() =>
    async function add() { ...

    }, [file]
)


return <table>
    <tbody>
        <tr><th>Name</th><th>Rank</th></tr>
        {ary.map((m, i) => <DeepDiveRow key={i} {...{ m }} />)}
    </tbody>
</table>
}

The state variable deepDiving is initially false, rendering the child Summary in the parent component. When deepDiving is set to true, then the DeepDive child component is rendered, but its useEffect is not called. When deepDiving is set back to false, then DeepDive’s useEffect is then executed(!), even though it had been previously rendered but is now not visible in the parent component.

Note that if I change the second argument of useEffect from [file] to [], I get the same result.

I’m trying to use the useLocation hook in my component:

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { connect } from 'react-redux';
import { useNProgress } from '@tanem/react-nprogress';
import type { PayloadAction } from '@reduxjs/toolkit';

import type { AppState } from '@/store/app';
import { uiActions } from '@/store/reducers/ui';

import EDProgressBarView from './EDProgressBar.view';

interface IPropsFromState {
    readonly isProgressBarVisible: boolean;
}

interface IPropsFromDispatch {
    readonly closeProgressBar: () => PayloadAction;
}

interface IProps extends IPropsFromState, IPropsFromDispatch {}

const EDProgressBar: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
    const { animationDuration, isFinished, progress } = useNProgress({
        isAnimating: props.isProgressBarVisible,
        incrementDuration: 200,
    });

    const location = useLocation();

    useEffect(() => {
        props.closeProgressBar();
    }, [location]);

    return (
        <EDProgressBarView
            animationDuration={animationDuration}
            isFinished={isFinished}
            progress={progress}
        />
    );
};

EDProgressBar.displayName = 'EDProgressBar';
EDProgressBar.defaultProps = {};

const mapStateToProps = (state: AppState) => {
    return {
        isProgressBarVisible: state.ui.isProgressBarVisible,
    };
};

export default connect(mapStateToProps, {
    closeProgressBar: uiActions.closeProgressBar,
})(React.memo(EDProgressBar));

And I place this component here:

import React, { Suspense, useMemo } from 'react';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';

import EDNotification from '@/ui/EDNotification';
import EDProgressBar from '@/ui/EDProgressBar';

import RouterBuilder from './App.router';

interface IProps {
    readonly isAuthenticated: boolean | null;
}

const AppView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
    const routes = useMemo(() => {
        return RouterBuilder(props.isAuthenticated);
    }, [props.isAuthenticated]);

    return (
        <Suspense fallback={null}>
            <RouterProvider router={createBrowserRouter(routes)} fallbackElement={null} />

            <div id="backdrop-root" />
            <div id="overlay-root" />

            <EDNotification />
            <EDProgressBar />
        </Suspense>
    );
};

AppView.displayName = 'AppView';
AppView.defaultProps = {};

export default React.memo(AppView);

So then I get an error:

Uncaught Error: useLocation() may be used only in the context of a <Router> component.

But I don’t understand how can I do such thing if RouterProvider component does not accept any children of something like a component to inject it.
I need this EDProgressBar component to exist in the application regardless of the active route. I need it to exist in every page.

How can I do so?

I am trying to set up a serverless function on vercel, which uses Google Vision OCR to annotate the images. I am able to successfully do it locally but having a hard time figuring out how to add the GOOGLE_APPLICATION_CREDENTIALS on Vision OCR. I have stored the full service-key.json file in an environment called GOOGLE_APPLICATION_CREDENTIALS but that did not do anything.

Here is a brief overview of the code:

import vision from '@google-cloud/vision';
const vision = vision.ImageAnnotatorClient();
const analyze = async (req, res) => {
   const [result] = await client.textDetection(req.body.image);
   res.send(result)
} 

I have tried using google-auth-library and printing out an auth token so that I could call the Google REST API but that did not work either

I am trying to remove line breaks from a string that only begin with a specific character and am having trouble finding a solution. In my scenario I’m am trying to remove all line breaks where the line starts with a quotation mark. Heres an example:

Input:

const str = `
    Test
    "How" +
    "Can" +
    "I" +
    Do This?
`;

Desired Result:

const desiredResult = `
    Test
    "How" + "Can" + "I"
    Do This?
`;     

I’ve only been able to find a way to remove all line breaks. Still unable to find a solution to only remove them if a conditional is met.