Creating state-selectors in utility-first CSS
This is how libraries like Tailwind CSS can use prefixes like `hover:` and `focus:` to apply styles to pseudo classes.
Read full articleExtracting floats from strings
JavaScriptAll snippets in this category →
Posted on August 26, 2020To get all float values from a sentence, we can first find them with a regular expression and then map over the matches with parseFloat.
// matches all integer or decimal substrings, like “69” or “4.20”
const numbersRegexp = new RegExp(/\d+(\.\d+)?/, "g")
// finds all numbers matching the expression and transforms them to numbers
const getFloatsFrom = (string) => string.match(numbersRegexp).map(parseFloat)
getFloatsFrom("Put the 16 cupcakes in the oven (at 180°C) for 1.5 hours.")
// ⇒ [16, 180, 1.5]// matches all integer or decimal substrings, like “69” or “4.20”
const numbersRegexp = new RegExp(/\d+(\.\d+)?/, "g")
// finds all numbers matching the expression and transforms them to numbers
const getFloatsFrom = (string) => string.match(numbersRegexp).map(parseFloat)
getFloatsFrom("Put the 16 cupcakes in the oven (at 180°C) for 1.5 hours.")
// ⇒ [16, 180, 1.5]// matches all integer or decimal substrings, like “69” or “4.20”
const numbersRegexp = new RegExp(/\d+(\.\d+)?/, "g")
// finds all numbers matching the expression and transforms them to numbers
const getFloatsFrom = (string) => string.match(numbersRegexp).map(parseFloat)
getFloatsFrom("Put the 16 cupcakes in the oven (at 180°C) for 1.5 hours.")
// ⇒ [16, 180, 1.5]// matches all integer or decimal substrings, like “69” or “4.20”
const numbersRegexp = new RegExp(/\d+(\.\d+)?/, "g")
// finds all numbers matching the expression and transforms them to numbers
const getFloatsFrom = (string) => string.match(numbersRegexp).map(parseFloat)
getFloatsFrom("Put the 16 cupcakes in the oven (at 180°C) for 1.5 hours.")
// ⇒ [16, 180, 1.5]Continue reading
The nullish-coalescing operator
We can provide default values for variables in a way that respects “real” values that are still falsy.
Read full articleClamping values in an array
When your data can contain “outliers” that are clearly unintentional, you can clamp them to all fall within the same valid range.
Read full articleCounting months from zero
When is June the fifth month of the year? When JavaScript is involved, of course. In JavaScript, January is the zero-th month.
Read full articleUsing non-alphanumeric characters in CSS
Libraries like Tailwind CSS use special characters in their class names. We can use them in our own classes by escaping them.
Read full articleMapping array values with constructors
Combining the map function on arrays and type constructors allows us to quickly map values from one type to another.
Read full article