DEV Community: BaasMurdo

Some JS Weirdness

BaasMurdo — Tue, 19 Sep 2023 19:10:40 +0000

In reality, the seemingly strange behavior from Javascript could be an entire series of posts.
Before we get ahead of ourselves, let us start small and point out a couple of interesting Javascript behaviors.

baNaNa

"b" + "a" + +"a" + "a"; // -> 'baNaNa'

This is an old-school joke in JavaScript, but remastered. Here's the original one:

"foo" + +"bar"; // -> 'fooNaN'

💡 Explanation:

The expression is evaluated as 'foo' + (+'bar'), which converts 'bar' to not a number.

---------------------------------------------

`NaN` is not a `NaN`

NaN === NaN; // -> false

💡 Explanation:

The specification strictly defines the logic behind this behavior:

If Type(x) is different from Type(y), return false.

If Type(x) is Number, then

If x is NaN, return false.

If y is NaN, return false.

… … …

— 7.2.14 Strict Equality Comparison

Following the definition of NaN from the IEEE:

Four mutually exclusive relations are possible: less than, equal, greater than, and unordered. The last case arises when at least one operand is NaN. Every NaN shall compare unordered with everything, including itself.

— “What is the rationale for all comparisons returning false for IEEE754 NaN values?” at StackOverflow

---------------------------------------------

It's a fail

You would not believe it, but …

(![] + [])[+[]] +
  (![] + [])[+!+[]] +
  ([![]] + [][[]])[+!+[] + [+[]]] +
  (![] + [])[!+[] + !+[]];
// -> 'fail'

💡 Explanation:

By breaking that mass of symbols into pieces, we notice that the following pattern occurs often:

![] + []; // -> 'false'
![]; // -> false

So we try adding [] to false. But due to a number of internal function calls (binary + Operator -> ToPrimitive -> [[DefaultValue]]) we end up converting the right operand to a string:

![] + [].toString(); // 'false'

Thinking of a string as an array we can access its first character via [0]:

"false"[0]; // -> 'f'

The rest is obvious, but the i is tricky. The i in fail is grabbed by generating the string 'falseundefined' and grabbing the element on index ['10'].

More examples:

+![]          // -> 0
+!![]         // -> 1
!![]          // -> true
![]           // -> false
[][[]]        // -> undefined
+!![] / +![]  // -> Infinity
[] + {}       // -> "[object Object]"
+{}           // -> NaN

Brainfuck beware: JavaScript is after you!
Writing a sentence without using the Alphabet — generate any phrase using JavaScript

---------------------------------------------

Minimal value is greater than zero

Number.MIN_VALUE is the smallest number, which is greater than zero:

Number.MIN_VALUE > 0; // -> true

💡 Explanation:

Number.MIN_VALUE is 5e-324, i.e. the smallest positive number that can be represented within float precision, i.e. that's as close as you can get to zero. It defines the best resolution that floats can give you.

Now the overall smallest value is Number.NEGATIVE_INFINITY although it's not really numeric in a strict sense.

— “Why is 0 less than Number.MIN_VALUE in JavaScript?” at StackOverflow

20.1.2.9 Number.MIN_VALUE

Making a percentage-based scroll to the top indicator

BaasMurdo — Mon, 18 Sep 2023 17:29:47 +0000

This is a fairly simple thing to get done once you know how.
At the time that I first encountered this, I was very curious as to how this would work and how I would go about implementing this.

So here is what I did
First, I had to determine how far I had scrolled & how far I still needed to scroll to reach the end of the page.

To do this I added a function that would use either the document.docmentElement or the document.body depending on which had a value.

Then a little bit of math
I then did a calculation in shorthand which is hard to read so I will write it out a bit better here.

(document.documentElement.scrollTop || document.body.scrollTop) / (document.documentElement.scrollHeight|| document.body.scrollHeight) - document.documentElement.clientHeight) * 100;

This is not much of an improvement over the Codepen version, but it is a lot more readable.

How & when should I trigger this function
I added an event listener on the scroll on the window & that would then trigger the final function to either show or hide the scroll to the top indicator.
The event listener I added looks like this:

window.addEventListener("scroll", function() { const svgElement = document.getElementsByClassName('progress-circle')[0] svgElement.firstElementChild.style["stroke-dashoffset"] = percentage(getScrollPercent(), 307.919); }, false)

As seen here the final function would return a number that I can then use to set the stroke-dashoffset of the SVG, sure that makes sense.

soooooo what is the 307.919 for?

Well, I don't know, if someone reading this does know and can explain it in more Layman's terms, please leave a comment and I will adjust this part and you will have my thanks.
The way I go to this is just playing around with the values and this worked without issue so I kept it in.

This function would then go on to take these two values and do a calculation to determine if the page has been scrolled and by how much compared to the total available y-axis to scroll.

var t = totalValue - (totalValue * (percent / 100));

If this resulting number is larger than 0 but smaller than 306, then the indicator will come into view in the bottom right-hand corner.
Otherwise, it will fade away.

Finishing touches
All I really had to do now was to make everything comically large so that nothing was missed.
Add in a simple animation or two.
Last but not least, to make the page scroll to the top nice and smooth once the indicator has been clicked & here is how I did that:
document.getElementById('wrap').addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); });

Codepen Below
Please feel free to go through the Codepen below, check the code, and play around. This was more a proof of concept to satisfy my curiosity and I would advise a lot of testing before using this in a production environment.

JS detect mobile device

BaasMurdo — Mon, 25 Jul 2022 11:31:00 +0000

Hey there all! I guess this is kinda like my Hello world of writing posts, so don't be too harsh 😄

Disclaimer

I am not claiming this is the best way & I wouldn't call it the most complete way to check if a device is a "popular-ish" mobile device. But it is simple and should work correctly for the most part. (If you do see/find an issue, please feel free to let me know) Last but not least, I did not come up with this. I found it and will share a link here if and when I find the post again.

Introduction

Firstly, if you want to apply styles to something depending on actual screen sizes. (my opinion) Use the built-in CSS media queries, very reliable once you understand them.

The use case for this would be more if you want certain functionality to only trigger on a mobile or a desktop.

Now that I have that out of the way, here is the solution and a minor explanation after.

var agentDetails = navigator.userAgent;

function isMobile() {
  if(/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agentDetails) ) {
    // Hit here if the device is a "popular-ish" mobile device
  } else {
    // Hit here if the device is  NOT a "popular-ish" mobile device
  }
}

Explanation

Ok so let's start dissecting this...

The first line var agentDetails = navigator.userAgent gets the user agent data for the browser used.

In short, this gets the Platform, Security, OS-or-CPU, Localization, revision-version-number relavent to the current device. (at time of writing)
This will contain the info we want to see and will be the White text in the Codepen below.

The second important part is the if() statement. The string in the if() has a / at the start and a /i at the end (the /i at the end, just makes it case-insensitive) & is delimited by pipes ("|").
This creates a regular expresion of the string. (This could be an entire other series 😅)

The reason we make it a regular expression is so that we can use the .test() method against it which "executes a search for a match between a regular expression and a specified string." you can read more about it here

So if the user agent data returns for instance:
"Mozilla/5.0 (iPad; CPU OS 15 5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"

This would be an iPad, so it would return true as the string we are checking (user agent) & the regular expression both contain the word iPad.

Conclusion

I think that is it, as promised here is the Codepen I created, it's not fancy, it's not pretty, but it works.
As seen in the user agent documentation, this info can be altered by the user or third-party apps. So beware, results may vary.

DEV Community: BaasMurdo

Some JS Weirdness

baNaNa

💡 Explanation:

NaN is not a NaN

💡 Explanation:

It's a fail

💡 Explanation:

Minimal value is greater than zero

💡 Explanation:

Making a percentage-based scroll to the top indicator

JS detect mobile device

Disclaimer

Introduction

Explanation

Conclusion

`NaN` is not a `NaN`