Category: JavaScript

Categories
Vue Answers

How to Get the Window Size Whenever it Changes in a Vue.js App?

white seal on soil

Sometimes, we want to get the window size whenever it changes in a Vue.js app.

In this article, we’ll look at how to get the window size whenever it changes in a Vue.js app.

Get the Window Size Whenever it Changes in a Vue.js App

To get the window size whenever it changes in a Vue.js app, we can add resize event listener to window when the component is mounting.

For instance, we write:

<template>
  <div id="app">{{ width }} x {{ height }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { width: window.innerWidth, height: window.innerHeight };
  },
  created() {
    window.addEventListener("resize", this.onResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize(e) {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    },
  },
};
</script>

to call window.addEventListener in the created hook.

We use the onResize method as the resize event listener.

In the destroyed hook, we call window.removeEventListener to remove the event listener.

In onResize and the data methods, we get the width of the window with window.innerWidth .

And we get the height of the window with window.innerHeight .

Now when we resize the window, we should see the numbers change on the screen since we added width and height to the template.

Conclusion

To get the window size whenever it changes in a Vue.js app, we can add resize event listener to window when the component is mounting.

Categories
JavaScript Answers

How to Apply the ESLint no-unused-vars Rule to a Block of JavaScript Code?

photo of seals

Sometimes, we want to apply the ESLint no-unused-vars rule to a block of JavaScript code.

In this article, we’ll look at how to apply the ESLint no-unused-vars rule to a block of JavaScript code.

Apply the ESLint no-unused-vars Rule to a Block of JavaScript Code

To apply the ESLint no-unused-vars rule to a block of JavaScript code, we can wrap the code block that we want to apply the rule to with /* eslint-disable no-unused-vars */ and /* eslint-enable no-unused-vars */ respectively.

For instance, we write:

/* eslint-disable no-unused-vars */

let x;
//...

/* eslint-enable no-unused-vars */

to wrap the code that we want the rule to apply with the comments.

Therefore, the no-unused-vars rule will only apply to the block that are wrapped by the comments.

Conclusion

To apply the ESLint no-unused-vars rule to a block of JavaScript code, we can wrap the code block that we want to apply the rule to with /* eslint-disable no-unused-vars */ and /* eslint-enable no-unused-vars */ respectively.

Categories
JavaScript Answers

How to Add Weeks to a Date Using JavaScript?

closeup photo of swimming rodent

Sometimes, we want to add weeks to a date using JavaScript.

In this article, we’ll look at how to add weeks to a date using JavaScript.

Add Weeks to a Date Using JavaScript

To add weeks to a date using JavaScript, we can use the getDate method to get the date of the month.

Then we can add the number of weeks multiplied by 7 and pass that to setDate .

For instance, we write:

const numWeeks = 2;
const dt = new Date(2021, 1, 1);
dt.setDate(dt.getDate() + numWeeks * 7);
console.log(dt);

to add 2 weeks to Feb 1, 2021.

We call setDate with dt.getDate() + numWeeks * 7 add 14 days to the date returned by dt.getDate .

setDate will automatically calculate the correct date no matter how the dates are added.

Therefore dt is:

Mon Feb 15 2021 00:00:00 GMT-0800 (Pacific Standard Time)

according to the console log.

Conclusion

To add weeks to a date using JavaScript, we can use the getDate method to get the date of the month.

Then we can add the number of weeks multiplied by 7 and pass that to setDate .

Categories
JavaScript Answers

How to Get a High-Resolution Timestamp with JavaScript?

three brown beavers standing on wooden surface

Sometimes, we want to get a high-resolution timestamp with JavaScript.

In this article, we’ll look at how to get a high-resolution timestamp with JavaScript.

Get a High-Resolution Timestamp with JavaScript

To get a high-resolution timestamp with JavaScript, we can use the window.performance.now or window.performance.webkitNow methods.

For instance, we write:

let getTimestamp;
if (window.performance.now) {
  getTimestamp = () => {
    return window.performance.now();
  };
} else {
  if (window.performance.webkitNow) {
    getTimestamp = () => {
      return window.performance.webkitNow();
    };
  } else {
    getTimestamp = () => {
      return new Date().getTime();
    };
  }
}

console.log(getTimestamp());

We can use window.performance.now if it’s available with:

if (window.performance.now) {
  getTimestamp = () => {
    return window.performance.now();
  };
}

We set getTimestamp to a function that returns the timestamp from window.performance.now .

Otherwise, we set getTimestamp to a function that returns the timestamp from window.performance.webkitNow .

And if that’s not available, we set getTimestamp to a function that returns the timestamp from the getTime method.

Conclusion

To get a high-resolution timestamp with JavaScript, we can use the window.performance.now or window.performance.webkitNow methods.

Categories
JavaScript Answers

How to Determine Scroll Direction without Actually Scrolling in JavaScript?

two gray animals on ground

Sometimes, we want to determine scroll direction without actually scrolling in our JavaScript app.

In this article, we’ll look at how to determine scroll direction without actually scrolling in our JavaScript app.

Determine Scroll Direction without Actually Scrolling in JavaScript

To determine scroll direction without actually scrolling in our JavaScript app, we can listen to the wheel event to see which direction the mouse wheel is moving.

For instance, we write:

window.addEventListener('wheel', (event) => {  
  if (event.deltaY < 0) {  
    console.log('scrolling up');  
  } else if (event.deltaY > 0) {  
    console.log('scrolling down');  
  }  
});

to add the wheel event listener to window with window.addEventListener .

In the event handler callback, we check if event.deltaY is less than 0.

If it is, we know we’re scrolling up with the mouse wheel.

And if event.deltaY is bigger than 0, then we know we’re scrolling down with the mouse wheel.

Conclusion

To determine scroll direction without actually scrolling in our JavaScript app, we can listen to the wheel event to see which direction the mouse wheel is moving.