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 utility classes with Sass
Sass’ @each-loop can create many similar CSS-classes without having to type them out. We can use that to create our own utility-first classes like they use in Tailwind CSS. By looping over a dictionary, we can create blocks like text-xs, text-sm, text-md, and so on in one go.
$font-sizes: (
"xs": 1.2rem,
"s": 1.6rem,
"m": 2.0rem,
"l": 3.2rem,
"xl": 4.8rem
);
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}
/*
.font-size-xs { font-size: 1.2rem; }
.font-size-s { font-size: 1.6rem; }
.font-size-m { font-size: 2.0rem; }
.font-size-l { font-size: 3.2rem; }
.font-size-xl { font-size: 4.8rem; }
*/$font-sizes: (
"xs": 1.2rem,
"s": 1.6rem,
"m": 2.0rem,
"l": 3.2rem,
"xl": 4.8rem
);
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}
/*
.font-size-xs { font-size: 1.2rem; }
.font-size-s { font-size: 1.6rem; }
.font-size-m { font-size: 2.0rem; }
.font-size-l { font-size: 3.2rem; }
.font-size-xl { font-size: 4.8rem; }
*/$font-sizes: (
"xs": 1.2rem,
"s": 1.6rem,
"m": 2.0rem,
"l": 3.2rem,
"xl": 4.8rem
);
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}
/*
.font-size-xs { font-size: 1.2rem; }
.font-size-s { font-size: 1.6rem; }
.font-size-m { font-size: 2.0rem; }
.font-size-l { font-size: 3.2rem; }
.font-size-xl { font-size: 4.8rem; }
*/$font-sizes: (
"xs": 1.2rem,
"s": 1.6rem,
"m": 2.0rem,
"l": 3.2rem,
"xl": 4.8rem
);
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}
/*
.font-size-xs { font-size: 1.2rem; }
.font-size-s { font-size: 1.6rem; }
.font-size-m { font-size: 2.0rem; }
.font-size-l { font-size: 3.2rem; }
.font-size-xl { font-size: 4.8rem; }
*/Continue reading
Padding strings
We no longer need to install dependencies to pad a string with characters to the left or right of it.
Read full articleExtracting complex logic to named functions
Putting complex logic into a function increases code readability. By giving that function a descriptive name, it can explain what is happening in it.
Read full articleSorting arrays by object properties
We can pass an array to JavaScript’s sort function to sort an array of objects by one of their properties.
Read full articleMapping over objects
With this helper function, we can map over objects and change each of their values like we would do with arrays.
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 article