JS “tricks” good or not (part 6)

Hello friends,

According to the current update situation, Covid is still around us but my JS tips series is still getting longer And today I continue to share with you some of the “good tricks” I have collected. The article is located in my JSTips series, follow the series so that I can learn or contribute not only knowledge but also upvotes.

[JS tips series] JS “tricks” thought not good or not

The tricks in this period … I don’t know how to categorize them. Let’s see!

1. Detect user switching tabs on the browser

Opening with a “trick” is quite interesting (with all you know, it does not count ), if using JS for a long time without knowing this “game” (like me), I think I should take a look at it.

JS allows us to detect whether the user is focusing on our tab or when they minimize the browser window. This is highly applicable such as stopping / playing music when users are not using / using tabs. Or run ads counting seconds before allowing users to download, for example, stop counting seconds when users switch to another tab, and continue counting when users are on our site (force them to see ads. ).

This is done quite simply like this, pure JS always:

And the results we get will be very wonderful as follows:

Bonus a little more, in addition to the way I picked it up, there are many different ways for you to check this as document.hidden for example:

The result is the same as above:

2. Detect browser size

This second tip is still a “detection” tip, says it detects a browser size for dread, but is not really the case ?. The procedure is also very simple, and after looking at this code, you will understand why the browser size is not detected correctly:

That’s it, it only returns results for each screen has a max or min size that we set, this is a media query like that css. And the console will produce the following result:

Let’s write a demo function to perform the check:

3. Light / dark mode detection of the operating system

Recently, dark mode has been favored by many users, it is almost an essential part of some “darkism” – from system dark mode, application. dark mode, web dark mode, … So there are many websites that also generate two interfaces: light mode and dark mode to suit the trend.

And of course the default light / dark mode of the web will be displayed according to the mode of the OS or browser. So this tip helps you to detect the light or dark mode of the operating system, helping us to display the default light / dark mode for our website.

As with the previous one, the procedure is similar in this procedure, but we will use prefers-color-scheme :

And when written as a function, the result will be:

4. Get the file extension

The trick is to simply get the file extension that we already know the name of the file. Assuming we have the demo.txt file, the extension will be txt .

Very simple, right? But in this last tip we will have a comparison between the ways that we are going to list below.

4.1 Using regex

Regex is something … pretty confusing no matter what the popular programming language, and in this section, too:

The result when using this method with several tests is as follows:

4.2 Using split method

This way is the way most of us will think of when asked this problem, simply use the available split() and retrieve the last element of the resulting array:

But it doesn’t seem to work perfectly in some cases

4.3 Using the slice method, lastIndexOf

Disadvantages of the above two solutions will be overcome by using slice() and lastIndexOf() plus a little trick as follows:

Everything is okay, isn’t it! But what does this function do?

• The String.lastIndexOf(".") Method will return the last position where the “.” appears, if not then it will return -1. You all know that right !?
• In case the file names are 'filename' and '.hiddenfile' , String.lastIndexOf(".") Will return -1 and 0 respectively, so (filename.lastIndexOf(".") - 1 in these 2 cases will give -2 and -1. Shift operator >>> will convert -1 to 4294967295 and -2 to 4294967294. Pay close attention, this is “a little trick” that I mentioned up there.
• Then the String.prototype.slice() will get the file extension based on the index we calculated above. If the index exceeds the length of the string, it will return the empty string ""

4.4 Compare

I have tested some ways to compare how they run, the results are as follows (tested on Chrome 81.0.4044 / Windows 10 version 1909 build 18363.778):

Conclude

Concluding this article with 3 tips on “discovery” and one last tip to get the file extension. I hope these tips bring some interest as well as helpful for you. Thank you for taking the time to read through the end, see you in the following articles.

Thank you!

Reference:

• jstips.co
• Medium