Removing duplication with higher-order functions
Are you calling the same function many times with near-identical parameters? Hide that repetition in a higher-order function for more readability.
Read full articleCreating state-selectors in utility-first CSS
Libraries like Tailwind CSS provide prefixes like hover: or focus: to style pseudo-selectors. A class of hover:bg-red-500 will only turn a background red when hovering over an element, for example.
We can do the same by adding the pseudo-class both to the beginning and end of our selector. Escaping the first colon also makes it part of the selector’s name.
<style>
.focus\:yellow:focus {
background: yellow;
}
.hover\:orange:hover {
background: orange;
}
</style>
<button class="focus:yellow hover:orange">
Yellow on focus, orange on hover
</button><style>
.focus\:yellow:focus {
background: yellow;
}
.hover\:orange:hover {
background: orange;
}
</style>
<button class="focus:yellow hover:orange">
Yellow on focus, orange on hover
</button><style>
.focus\:yellow:focus {
background: yellow;
}
.hover\:orange:hover {
background: orange;
}
</style>
<button class="focus:yellow hover:orange">
Yellow on focus, orange on hover
</button><style>
.focus\:yellow:focus {
background: yellow;
}
.hover\:orange:hover {
background: orange;
}
</style>
<button class="focus:yellow hover:orange">
Yellow on focus, orange on hover
</button>Continue reading
Quickly removing values from an array
Instead of removing elements from an array one by one, we can modify the array itself to clear it in one operation.
Read full articleRewriting switch statements to lookup objects
If a switch-statement only serves to map a key to a value, we can use an object to do the same in fewer lines of code.
Read full articleGetting the intersection of two arrays
We can combine filter and includes to find which elements exist in both of two given arrays.
Read full articleFiltering arrays to unique values
Arrays can contain the same value many times, while sets cannot. We can filter an array to unique values by using this difference.
Read full articleThe nullish-coalescing operator
We can provide default values for variables in a way that respects “real” values that are still falsy.
Read full article