Creating utility classes with Sass
When creating Tailwind CSS-like utility classes, we can use Sass’ loops to save a lot of repetition.
Read full articleHiding repetition with helper functions
JavaScriptAll snippets in this category →
Posted on June 19, 2020Have to use a function over and over, but one or more of its parameters are always the same? Improve readability by creating a function that hides that repetition.
// Repeating "en_US" every time is tedious and prone to typos.
const title = translate("app.title", "en_US")
const slogan = translate("app.slogan", "en_US")
const action = translate("app.action", "en_US")
// While "translate" takes two parameters, this function only takes one. It
// returns the result we would get if we called `translate` with "en_US".
const translateEN = key => translate(key, "en_US")
// When we call our new function, we no longer need to write "en_US".
const title = translateEN("app.title")
const slogan = translateEN("app.slogan")
const action = translateEN("app.action")// Repeating "en_US" every time is tedious and prone to typos.
const title = translate("app.title", "en_US")
const slogan = translate("app.slogan", "en_US")
const action = translate("app.action", "en_US")
// While "translate" takes two parameters, this function only takes one. It
// returns the result we would get if we called `translate` with "en_US".
const translateEN = key => translate(key, "en_US")
// When we call our new function, we no longer need to write "en_US".
const title = translateEN("app.title")
const slogan = translateEN("app.slogan")
const action = translateEN("app.action")// Repeating "en_US" every time is tedious and prone to typos.
const title = translate("app.title", "en_US")
const slogan = translate("app.slogan", "en_US")
const action = translate("app.action", "en_US")
// While "translate" takes two parameters, this function only takes one. It
// returns the result we would get if we called `translate` with "en_US".
const translateEN = key => translate(key, "en_US")
// When we call our new function, we no longer need to write "en_US".
const title = translateEN("app.title")
const slogan = translateEN("app.slogan")
const action = translateEN("app.action")// Repeating "en_US" every time is tedious and prone to typos.
const title = translate("app.title", "en_US")
const slogan = translate("app.slogan", "en_US")
const action = translate("app.action", "en_US")
// While "translate" takes two parameters, this function only takes one. It
// returns the result we would get if we called `translate` with "en_US".
const translateEN = key => translate(key, "en_US")
// When we call our new function, we no longer need to write "en_US".
const title = translateEN("app.title")
const slogan = translateEN("app.slogan")
const action = translateEN("app.action")Continue reading
Getting the last element from an array
Until we get a native method on the array prototype itself, we can write a helper to get the last element in an array.
Read full articleFetching data asynchronously in useEffect
To asynchronously fetch data in a React component using hooks, we can define and then call an asynchronous function inside of useEffect.
Read full articleGetting properties from objects that match a condition
Since array methods like filter and map return an array themselves, we can chain them one after the other.
Read full articleCombining arrays pairwise
“Zipping” refers to taking the values in two arrays and combining them into a single array of value pairs.
Read full articleDestructuring values returned by functions
By destructuring the return value of a function, we can take out only the values we need without having to assign the result to an object first.
Read full article