Forem: Anthony Oyathelemhi

Add Auto-logout To A React App

Anthony Oyathelemhi — Sat, 13 Nov 2021 20:40:55 +0000

TL;DR

const logoutTimerIdRef = useRef(null);

useEffect(() => {
  const autoLogout = () => {
    if (document.visibilityState === 'hidden') {
      const timeOutId = window.setTimeout(logoutUser, 5 * 60 * 1000);
      logoutTimerIdRef.current = timeOutId;
    } else {
      window.clearTimeout(logoutTimerIdRef.current);
    }
  };

  document.addEventListener('visibilitychange', autoLogout);

  return () => {
    document.removeEventListener('visibilitychange', autoLogout);
  };
}, []);

Let's take a look at what is going on in this code

When the component that contains this code mounts, we set an event listener to watch for when the page visibility changes, i.e. when the user leaves or comes back to the tab, and calls autoLogout
The autoLogout function checks whether the page is hidden or visible
If the page is hidden, we set a timer to log the user out after 5 minutes
If the page is visible, we clear the timer that was previously set
We return a cleanup function to remove the event listener before the component is unmounted

For brevity, I omitted the logoutUser function definition, which is out of the scope of this post

Why `useRef` And Not `useState`

You can achieve the same thing with useState, and the only reason I'm not doing that is because setting a state value causes a re-render. While this is not an issue most of the time, it can be a problem when you have some other logic that runs on every update, a la componentDidUpdate

I've put up 2 Codesandbox playgrounds to demonstrate this. The first one uses useState and the second uses useRef. I've set both to auto logout after 10 seconds. If you leave this page and come back, you will notice that the render count in the first one increases by one each time, but the second one remains at 1

The Basics: JavaScript Set

Anthony Oyathelemhi — Sun, 03 Oct 2021 15:59:54 +0000

Set is one of a handful of Data Structures built into the JavaScript language. It is similar to the Array in that is it used to store a a collection of data with one key difference, it doesn't allow duplicate entries.

You rarely ever see Set used in the wild compared to other Data Structures, and that's not by chance. It has a very limited set of APIs, making it less suitable for most use cases. As a matter of fact, other than ensuring uniqueness of data, it doesn't seem like it has much use.

Let's take a look at how to create and use Sets

Creating a Set

var uniqueData = new Set()

Unlike Array and Object which have reserved characters for creating a new instance, there is only one way to create a Set, and that is by using the new Set() constructor

The Set() constructor take 0 or 1 argument which MUST be an iterable or an Array-like value (String, Array). In more technical terms, the argument must implement the iterator protocol

// All valid ways to create a set ✅
var uniqueList = new Set()
var uniqueList = new Set(undefined)✅
var uniqueList = new Set([1, 2])✅
var uniqueList = new Set("12")✅

// Number, Boolean, and Object, are not valid arguments ❌
var uniqueData = new Set(1)
var uniqueData = new Set({})
var uniqueData = new Set(false)

Set Operations

Add

var uniqueList = new Set()
uniqueList.add(2)

The add() method, like the name suggests, is used to add an item to a set. It accepts any type of value, and returns the set, including the newly added item. If the item already exists, add() does nothing and just returns the set unchanged. Because the add() method returns the set, you could chain multiple add() methods

uniqueList.add(3).add(4)

or other set methods

uniqueList.add(3).delete(3)

Delete

var uniqueList = new Set()
uniqueList.add(1)

uniqueList.delete(1) // deletes 1 from the set

delete() removes an item from a set if it exists, and does nothing otherwise. It returns true if the item was deleted successfully and false if the item doesn't exist in the set

Has

var uniqueList = new Set()
uniqueList.add(1)

uniqueList.has(1) // true
uniqueList.has(2) // false

.has() checks for the occurrence of an item within a set. It returns true or false depending on whether the item exists

Clear

var uniqueList = new Set()
uniqueList.add(1)
uniqueList.add(2)

uniqueList.clear() // removes both 1 and 2

.clear() deletes every item from a set

Keys, Values

.values() returns an Iterator that we can use to loop over the values in the Set. Not to be confused with the implementation of Object.values(object) which returns an Array

var uniqueList = new Set()
uniqueList.add(1)
uniqueList.add(2)

for (var value of uniqueList.values()) {
  console.log(value) //
}

// 1
// 2

.keys() has the exact same functionality of .values() and is basically just an alias

Entries

.entries() returns an Iterator just like .values(), with the only difference being that it returns a two-element Array for every iteration. But since Sets have no keys, the value just gets repeated twice. So what's the point you ask? Apparently it's solely > to keep the API similar to the Map object

var uniqueList = new Set()
uniqueList.add(1)
uniqueList.add(2)

for (var value of uniqueList.entries()) {
  console.log(value) //
}

// [1, 1]
// [2, 2]

The JavaScript Comma Operator

Anthony Oyathelemhi — Thu, 02 Sep 2021 09:02:30 +0000

Comma(,) in JavaScript is mostly used to 'join' other things, like values and expressions. In this usage, the ECMAScript specification refers to it as an Elision. Some examples of this usage include, defining/passing multiple arguments to a function, adding items to arrays/objects, and 'one line' variable declarations

Like other symbols in JavaScript, it has another use, as an operator. When used in an expression, it returns the right-most value (or the value of the last expression in the sequence)

Let's test this out. Type the following into your browser console or any JavaScript runtime environment

var two = 2

two++, two
// 3

You should see 3 returned in the terminal. No surprises there since the compound expression is read from left to right, and all individual expressions will be evaluated before returning the value of the final expression

It's hard to imagine where this could really be useful other than writing shorter lines of code, which could be hard to understand for some people

If you can think of some clever use of the Comma operator, please let me know in the comments

References and More Reading

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator
https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#prod-Elision

The Basics: JavaScript Addition Operator (+)

Anthony Oyathelemhi — Mon, 30 Aug 2021 07:55:53 +0000

One of the uses of the plus (+) symbol in JavaScript is to perform addition of two values. It can either perform numeric addition, as you'd expect, but also string concatenation.

This is pretty standard in most programming languages. Let's take a brief look at both usages

Numeric addition

console.log(15 + 5) // 20

The code above logs 20 to the console. Straightforward

String concatenation

console.log('Hello' + ' ' + 'World') // Hello World

We get "Hello World" as the output, which is the result of appending "Hello", a blank space (" "), and "World". Again, straightforward

It wouldn't be JavaScript if things were this black and white now would it? That was rhetorical

How JavaScript decides which operation to perform (the spec)

Since the addition operator can be used to do two things, the JS engine needs to somehow decide which one of the two to perform.
This is well documented in the ECMAScript Spec but may not be easy to understand for most people. I have read it so you don't have to. In summary:

If any of the operands is a string, perform string concatenation, otherwise perform addition

Testing the rule

To force numeric addition, you can use the build-in Number() constructor to coarse both operands to numbers. Similarly, you can use String() to force concatenation

NOTE: apply caution when using Number(value) to convert values. If value isn't 'number-like', it will return NaN, which is something that deserves it's own blog post

Boolean addition, sort of

Remember how I said it could only do numeric addition or string concatenation? That remains true. However, you can use any type whatsoever and the JS engine will try to convert the type to either number or string, before performing the operation

Why does the engine decide to convert the boolean values to numbers and not string? You might ask. To rephrase the rule

If both operands are not strings, convert the operands to numbers and perform a numeric addition

Unsurprisingly, Number(false) returns 0, and Number(true) returns 1

If you just started learning JavaScript and you've gotten this far, first of all, Good job! You can stop here because the next section might confuse you even more

Non-Primitive Addition

Up on till now, we've only looked at adding primitive values, three of seven in JavaScript. Since JavaScript is a loosely typed language, there's nothing stopping us from doing this

[] + {}
7 + []
{} + ""

The JavaScript engine has to first convert all operands to Primitive types, then decides whether to perform string concatenation or numeric addition. Let us expand on the summary I provided at the beginning of this blog post to understand what's going on.

A simplified version of what the runtime does under the hood

function add(leftValue, rightValue) {
  var leftPrimitive = toPrimitive(leftValue)
  var rightPrimitive = toPrimitive(rightValue)

  if (typeof leftPrimitive === 'string' || typeof rightPrimitive === 'string') {
    return String(leftPrimitive) + String(rightPrimitive)
  } else {
    return Number(leftPrimitive) + Number(rightPrimitive)
  }
}

And here we define the toPrimitive function

function toPrimitive(value) {
  if (typeof value === 'object') {
    let primitiveOptionOne = value["valueOf"]();
    let primitiveOptionTwo = value["toString"]();

    if (typeof primitiveOptionOne !== 'object') {
      return primitiveOptionOne
    } else if (primitiveOptionTwo !== 'object') {
      return primitiveOptionTwo
    }

    // otherwise we'll end up in an endless loop
    throw new TypeError('Cannot convert object to primitive value')
  } else {
    return value
  }
}

In simple English

Convert both Operands to their primitive types by calling the built-in ToPrimitive abstract operator
If any of the primitives in the previous step is a string, do string concatenation, otherwise continue
Convert both Operands to numbers and perform numeric addition

Based on what we've learned so far, we can make the following deductions

3 + 3 ==> Number(3) + Number(3) ==> 6

"Hello" + 3 ==> String("Hello") + String(3) ==> "Hello3"

7 + [] ==> String(7) + String([]) ==> "7"

[] + {} ==> String([]) + String({}) ==> "[object Object]"

{} + "4" ==> String({}) + String("4") ==> "[object Object]4"

false + 2 ==> Number(false) + Number(2) ==> 2

true + 3 ==> Number(true) + Number(3) ==> 4

To test that the JS engine does in fact call toValue() within the toPrimitive() call, open a new browser terminal (or head to playcode.io/new) and run the following code

// DO NOT TRY THIS AT HOME
Object.prototype.valueOf = () => 5

console.log({} + 4) // 9

Unsurprisingly, we get 9, yay!

Got questions, suggestions, head over to the comment section let's have a chat

References

https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-applystringornumericbinaryoperator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition

The Little Known CSS Unit

Anthony Oyathelemhi — Mon, 23 Aug 2021 01:00:20 +0000

As a Frontend Developer, it is sometimes humbling to know just how much you don't know about the basic building blocks of the web.

The amount of tools and techniques available to us is A LOT! So it's no surprise we often just pick whatever solves our immediate problem and call it a day

Let's take a look at one of those rarely used tools, the CH CSS unit.

CH Unit Definition

According to the spec

A CH unit is the advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it. (The advance measure of a glyph is its advance width or height, whichever is in the inline axis of the element.)

Translation: One CH is equal to the space one zero character occupies for a given font. So if we write 00, that's 2ch.

All Characters Are Not Equal

Notice how the definition specifically mentions "0" (zero)? That's important because not all characters in a font are equal (except for monospaced fonts e.g. Courier)

Now that we know what the ch unit is, let's consider where it might be appropriate to use it

Usage

I asked this question on Twitter before writing this blog post

// Detect dark theme var iframe = document.getElementById('tweet-1429512658336763907-378'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1429512658336763907&theme=dark" }

It's no surprise people suggested using some sort of line break approach, even the source of the image, the nextjs site, uses <br> tags to create the markup

This approach works for static content but cannot be used for dynamic content, at least not without JavaScript

I've created a simple example to show how we can use max-width to achieve this by setting the value to the maximum number of characters we want to appear on one line.

Pros

Suitable for dynamic content
Better than using px or other units for paragraph width
The appearance doesn't change when the font size changes

Cons

It can be a pain counting the number of characters
Size can be off for Proportional fonts (non-monospaced), which is the vast majority of fonts

Another scenario where the ch unit might make sense to define width is a fixed-width text input (e.g. year input - 4ch)

Conclusion

The ch unit is certainly not what you want to use in most cases, but it really shines where it makes the most sense, character measurement