Useful JavaScript Tips — Dark Mode and Slices

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.

Checking for Dark Mode in Browsers

We can check for dark mode in browsers using the matchMedia method.

For instance, we can write:

window.matchMedia('(prefers-color-scheme: dark)').matches

We can also attach a listener to listen for mode changes.

For instance, we can write:

window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', event => {
    if (event.matches) {
      //dark mode
    } else {
      //light mode
    }
  })

event.matches matches dark mode before running the if block.

Check if an Element is a Descendant of Another

We can check if an element is a descendant of another by using the parentNode property.

For instance, we can create a function that traverses the DOM tree to check if an element has the given node.

We can write:

const isDescendant = (el, parent) => {
  let child = el;
  while (child = child.parentNode) {
    if (child === parent) {
      return true
    }
  }
  return false
}

We have a function that takes el an parent which are DOM elements.

Then we use a while loop to loop to traverse from child , which starts with el and traverse up the tree by assigning the parentNode property value to child .

Then inside the loop, we check if they’re the same element with === .

If there’s no element up the tree that equals parent then we return false .

Therefore, if we have the following HTML:

<div>
  <p>
    foo
  </p>
</div>

Then the following logs true :

const p = document.querySelector('p');
const div = document.querySelector('div');
console.log(isDescendant(p, div))

On the other hand, if we have:

<div>

</div>

<p>
  foo
</p>

Then the same code would log false .

Remove the First Character of a String in JavaScript

To return a new string with the first character of the original one removed, we can use the slice method.

For example, we can write:

const text = 'foo'
const shortened = text.slice(1);

Then shortened would be 'oo' .

Remove the Last Character of a JavaScript String

Removing the last character of a JavaScript string is a bit harder.

But we can use the slice method to do it.

For instance, we can write:

const text = 'foo'
const shortened = text.slice(0, -1);

We pass in a second argument with the end index of the slice.

The last index isn’t included in the returned string.

-1 means the last index of the string. Negative indexes go from right to left.

So -2 would be the second last index, -3 the 3rd last and so on.

Therefore, shortened would be 'fo' .

Add Text to an HTML Canvas

We can add text to an HTML canvas by using the fillText method of the canvas context.

Given that we have the following canvas:

<canvas width="300" height="300"></canvas>

We can write the following to add some text:

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
context.fillText('hello world', 100, 100);

fillText ‘s 1st argument is the text itself.

The 2nd and 3rd arguments are the x and y coordinates of the point which to start drawing the text in pixels.

Divide an Array in Half

We can divide an array in half by using the Math.ceil and slice methods.

For instance, we can write the following:

const list = [1, 2, 3, 4, 5, 6, 7, 8];
const half = Math.ceil(list.length / 2);
const firstHalf = list.slice(0, half);
const secondHalf = list.slice(-half);

slice returns a new array, so we can use it to slice it according to the start and end indexes we give them.

half is the index of the halfway point.

If half is used as the end index of the slice, it’s excluded. If it’s used as the starting index, then it’s included.

So firstHalf has entries from the first to the one before the one with index half .

And secondHalf has entries from index half to the end.

Therefore, firstHalf would be [1, 2, 3, 4] .

And secondHalf is [5, 6, 7, 8] .

Conclusion

We can check dark mode in browsers with matchMedia .

Also, we can extract parts of a string or an array with slice .

We can use the parentNode property to get the parent of a DOM element.