Knowing what input type you’ve received is hugely important in JavaScript, which is a big reason for Flow and TypeScript’s rise. One such case where it’s useful to know what an object represents is if the input is a string or a React element.

To detect if an object is a React element, you can use React.isValidElement(obj):

// Add a wrapping DIV if the content isn't a React element// PropTypes.oneOfType([PropTypes.string, PropTypes.element])
render() {
const { content } = this.props
React.isValidElement(content)) ?
content :
<div class="text-message">{content}</div>
}

I really like that React.isValidElement allows us to create flexible elements that accept React elements or strings; hugely useful in generic components like modals, alerts, and everywhere else!

--

--

The UUID identifier has been used in programming since the days a baby-faced David Walsh became a professional software engineer. My first exposure to UUIDs was via a ColdFusion app I inherited and … the less we say about that the better. In any event, I was recently surprised to see that JavaScript has the ability to create UUIDs.

Developers can use the native JavaScript crypto library to generate a UUID:

crypto.randomUUID() // '5872aded-d613-410e-841f-a681a6aa8d8b'
crypto.randomUUID() // 'fe6c7438-a833-4c7c-9ea3-cdc84ef41dfc'
crypto.randomUUID() // 'e47a03d4-5da3-4451-a2c1-265de99cc2c1'
crypto.randomUUID() // '04cdadeb-0228-43db-85dc-ce7e960a6cde'

It’s important to remember that the UUID is not guaranteed to be unique, though the probability of repetition is incredibly low. I look forward to exploring the window.crypto API further to see what other cool things we can do!

--

--

Dark mode has seemingly become the desired visual mode for websites and mobile apps alike. Dark mode is easier on the eyes, especially for those like me who like to burn the midnight oil by coding and reading tutorials. Unfortunately not all websites offer dark mode, so it’s up to me to remedy the situation.

Though it’s not a true “dark mode”, you can use CSS’ filter to create dark mode of your own:

html {
filter: invert(1);
}

Inverting colors completely via 1 will make that light-themed website much more comfortable on your eyes. It's important to realize that developers shouldn't consider this a long-term solution, as it's a quite lazy remedy and doesn't lend well to branding.

--

--