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 articleTo 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]
This is how libraries like Tailwind CSS can use prefixes like `hover:` and `focus:` to apply styles to pseudo classes.
Read full articleWe can provide default values for variables in a way that respects “real” values that are still falsy.
Read full articleWhen your data can contain “outliers” that are clearly unintentional, you can clamp them to all fall within the same valid range.
Read full articleWhen is June the fifth month of the year? When JavaScript is involved, of course. In JavaScript, January is the zero-th month.
Read full articleLibraries like Tailwind CSS use special characters in their class names. We can use them in our own classes by escaping them.
Read full articleCombining the map function on arrays and type constructors allows us to quickly map values from one type to another.
Read full article