Category: javascript

When adding a position: fixed on-scroll on my navbar the DOM throws the error: [Violation] Forced reflow while executing JavaScript took ms, on every scroll event. From my understanding (and Googling) this means there is layout thrashing everytime a scroll event happens due to new calculation.

My question is; is this a problem? I can’t really crack the code of how to improve it to remove the violation, hence why I wanted to hear if this is ‘standard’ behaviour when working with scroll offsets.

The code I’m using is below:

document.addEventListener('DOMContentLoaded', function() {
    
  window.addEventListener('scroll', addPositionFixed);

  var navbar = document.getElementById("navbar");

  var sticky = navbar.offsetTop;

  function addPositionFixed() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky");
    } else {
      navbar.classList.remove("sticky");
    }
  }
})

I’m a beginner at javascript and learn a lot by looking already written code.

Some large javascript projects I’ve looked at have minified code and when expanding it it’s not very readable.

almost all variables and functions are just defined by a letter looping trough the alphabet i.e a b c, aa, bb, cc and so on, also no commenting.

Out of curiosity is this a coding style or is there a tool that you use to optimize the code with?

seems hard to maintain such a project.

I am using the following code to download a static pdf file

const downloadPDF = (req, res, next) => {
    const fileLoc = `output.pdf`;
    var filename = path.basename(fileLoc);
    var mimetype = mime.lookup(fileLoc);
    var stat = fs.statSync(fileLoc);
    res.setHeader('Content-Type', mimetype);
    res.setHeader('Content-Length', stat.size);
    res.setHeader('Content-disposition', 'attachment; filename=' + filename);
    return res.download(fileLoc);
}

the file becomes corrupted after download. What might be causing the issue ?

Is there a way to connect queued_Dr to upcoming_appointments by using all_appointments

What would be the best approach to this problem?

var queued_Dr = ["Dr.Salazar",["Dr.Connors","Dr.Johnson"],"Dr.Pearson"]


upcoming_appointments =
[  
     {"DOB":"01-27-2002","name":"Judy, W." ,"PCD":"Dr-S"}
    ,{"DOB":"08-15-1995","name":"John, V." ,"PCD":"Dr-C"}
    ,{"DOB":"07-05-1992","name":"David, C.","PCD":"Dr-S"}
    ,{"DOB":"01-15-2002","name":"Anna, S." ,"PCD":"Dr-J"}
    ,{"DOB":"01-15-2002","name":"Jeff, D." ,"PCD":"Dr-P"}
]


all_appointments = 
{
    "0": ["Dr-S","New York","Dr.Salazar"],
    "1": ["Dr-C","Austin","Dr.Connors"],
    "2": ["Dr-J","Austin","Dr.Johnson"],
    "3": ["Dr-S","New York","Dr.Salazar"],
    "4": ["Dr-P","San Juan","Dr.Pearson"],
    "5": ["Dr-J","Austin","Dr.Johnson"]
}

Goal Output

"Dr.Salazar" -> "Dr-S"
["Dr.Connors","Dr.Johnson"] -> "Dr-C" or "Dr-J"
"Dr.Pearson"] -> "Dr-P"

I’m making a simple site for a project, and i want to redirect player to a login page if the token is expired, but I’m not really sure how to do it properly, here’s what I’ve tried, im using react-jwt to check the token

function App() {

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100vh'}}>
      <Navbar/>
      <div style={{display:'flex', flex:1}}>
        <Routes>
          <Route path="/login" element ={<LoginForm/>} />
          <Route path="/signUp" element ={<SignUpForm/>} />
          <Route path="/addMovie" element= {<AddMovie/>} />
          <Route path="/" element={isExpired(localStorage.getItem('token') ? <FilmList/> : <LoginForm/> )} />
          <Route path="/details" exact element ={<MovieDetails/>} />
        </Routes>
      </div>
    </div>
  );
}

or something like

<Route path="/" 
render={props=>{
  if(isExpired(localStorage.getItem('token'))){
    return <Navigate to='/login'/>;
  }
  return <FilmList/>
}}
/>

The first one just returns nothing, and the second one gives a warning in console:

Matched leaf route at location “/” does not have an element. This
means it will render an with a null value by default resulting in an
“empty” page.

Is there a way to make it work ?

I’m looking for a way to add a chart to my excel file that is generated by a react app (the kind of chart that you can insert normally in MS Excel and is dependent on some cell values, not an image of a chart)

currently I’m using Kendo-UI to export excel, but I’m open to changing it to any other library that also works fine with excel formats and styles,

this is an example of the result I need:

any recommendation or workaround is appreciated

I have a div which is wrapped in a Link tag in NextJS. Within the div I have a row of components which are buttons. When I click one of these buttons, they do what they should do, but the Link tag also gets fired from the parent div and we navigate to another page. I have added e.stopPropagation() to the event handlers of the buttons, but it’s not making any difference. Can anyone see what I’m doing wrong, please?

The parent component:

<Link href={{
    pathname: `/...`,
    query: { 
        var:var 
    },
}}>
    <div>
    ...
        <div className="flex flex-row">
            <Button1/>
            <Button2/>
        </div>
    </div>    
</Link>

A child button component:

async function handleClick(e) {
    e.stopPropagation()
    ...
}

<button onClick={handleClick}>
...
</button>

I have also tried adding adding the stopPropagation to the onClick as such:

<button onClick={(e) => e.stopPropagation(), handleClick}>
...
</button>

Why is the click still bubbling up to the parent Link, please?

Started coding yesterday and all i know how to use is hide and show functions but so far ive managed to build a very pretty checkout system. On my basic knowledge. But its so many elements to show and hide so I would like to learn how to save a function so the code becomes very short effective simple and light.

---

Id like to save this whole part of code beneath to be saved, so I can just call on it later so something like;

---

export function StopLineBottom_viewportEnter(event) { “function close checkout” }

---

The code I would like to save and recall later:

export function StopLineBottom_viewportEnter(event) {    

$w("#Glass").hide("");    
$w("#CheckoutBox1").hide("");   
$w("#Galasky").hide("");
$w("#PreviewBox").hide("");
$w("#GalaskyStarlight").hide("");
$w("#ProductPreview").hide("");
$w("#Price").hide("");
$w("#Address1").hide("");
$w("#Line1").hide("");
$w("#Country").hide("");
$w("#Line2").hide("");
$w("#City").hide("");
$w("#Line3").hide("");
$w("#Address2").hide("");
$w("#Line4").hide("");
$w("#PostalCode").hide("");
$w("#Line5").hide("");
$w("#Name").hide("");
$w("#Line6").hide("");
$w("#Number").hide("")
$w("#Line7").hide("");
$w("#CheckoutButton").hide("");
$w("#CheckoutBox2").hide("");
$w("#PaymentProviders").hide("");
$w("#CloseButtonIcon").hide("");
$w("#CloseButtonHitbox").hide("");
}

This question was asked before: Trouble understanding what happens during javascript for loop
but the asker didn’t get the right answer and so did I. I learn C++ and Python earlier so I get familiar with loop but when I practing this code:

let text = "";
let i;
for(i=0; i<5; i++)
{text += "The number is " + i + " ";}
document.write(text);

the output is totally different to what I expected. I visited W3schools but I can’t find the answer
https://www.w3schools.com/js/js_loop_for.asp

https://www.w3schools.com/js/tryit.asp?filename=tryjs_loop_for_om3

I expected the output is “” because text can’t be changed but the code prints out: “The number is 0 The number is 1 The number is 2 The number is 3 The number is 4”. My question is why the print executes in the loop though the print is outside the loop? Thank you very much!

I have a requirement to build knowledge graph UI using Angular. I wanted to achieve something like the below image:

Please suggest how can I get started with it. Also, if there is any third party apps to achieve this using angular.

I want to store my redis data to MySQL.
My Redis data array, and each data is object.

This is what I try, but cannot save to MySQL correctly.

if (redis_headline != null) {

var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "redistest"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected to MySQL!");
});

// redis isi
for (i = 0; i < redis_headline.length; i++) {

  var sql = "INSERT INTO `desc` (first_name, last_name, email, phone) VALUES ('" + redis_headline[i].first_name + "','" + redis_headline[i].last_name +"','" + redis_headline[i].email + "','" + redis_headline[i].phone + "')";

  con.query(sql, function (err) {
  if (err) throw err;
  console.log("record inserted");
  });

  client.flushdb( function (err, succeeded) {
  console.log(succeeded + ' flush redis'); // will be true if successfull
  });

  // var datas = 
  // console.log(redis_headline[i]);
}} else {}

** For example, here, when I click the button, I will have one more component, it means it will have new data, so I want to gather all info into one array.

<Child v-for="count in btnNumber" :key="count" @showData="getElements" />

<v-btn
  color="primary"
  elevation="10"
  class="space"
  large
  @click="duplicateEl"
  >Add Categ & Key</v-btn
>
v-btn
      color="secondary"
      elevation="13"
      class="btnEl"
      dark
      large
      @click="getResult"
      >Save Data</v-btn

** This getting data in my child element using Emit

methods:{
               getElements(emitPayload) {
              this.selectedChildCategory = emitPayload.selectedCateg;
              this.selectedChildKey = emitPayload.selectedKey;
              this.selectedChildLanguage = emitPayload.selectedLang;
              this.selectedChildContent = emitPayload.selectedCon;
        }
    }
 duplicateEl() {
  this.btnNumber++;
}

I am a new of Angular. I created header, footer and sidebar. And I was create dashboard component if I use in this dishoard component its works good. So it is working in component. then I created a module for employee. if i use Header Footer Sidebar in this employee module means its shows error

1. If ‘app-header’ is an Angular component, then verify that it is part of this module.
2. If ‘app-header’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

1

src/app/employee/list-employee/list-employee.component.ts:5:16
  5   templateUrl: './list-employee.component.html',
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component ListEmployeeComponent.


Error: src/app/employee/list-employee/list-employee.component.html:2:1 - error NG8001: 'app-sidebar' is not a known element:
1. If 'app-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'app-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <app-sidebar></app-sidebar>

src/app/employee/list-employee/list-employee.component.ts:5:16
5 templateUrl: ‘./list-employee.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ListEmployeeComponent.

Error: src/app/employee/list-employee/list-employee.component.html:514:9 – error NG8001: ‘app-footer’ is not a known element:

1. If ‘app-footer’ is an Angular component, then verify that it is part of this module.
2. If ‘app-footer’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

514
~~~~~~~~~~~~

src/app/employee/list-employee/list-employee.component.ts:5:16
5 templateUrl: ‘./list-employee.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ListEmployeeComponent.

Please help me to sort out this error.

Prevent mongoDB to save duplicate email

 UserSchema.path('email').validate(async(email)=>{
   const emailcount = await mongoose.models.User.countDocuments({email})
   return !emailcount
 }, 'Email already exits')

May this help ur question…
worked for me..
use in user model.
refer for explaination
THANKS…

I need to create a JavaScript function for the below requirements. I need to get every week day date list. If you know nodeJs package tell me that. Thank you for your attention.

Example - 
 2022-01-03
 2022-01-04
 2022-01-05
 2022-01-06
 2022-01-07

 2022-01-10
 2022-01-11
 2022-01-12
 2022-01-13
 2022-01-14 
 ..........
 ..........
 until year-end

like this pattern (only Monday to Friday)