-
When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
-
Always use fewer utility classes when possible. For example, use
mx-2
instead ofml-2 mr-2
and don't be afraid to use the simplerp-4 lg:pt-8
instead of the longer, more complicatedpt-4 lg:pt-8 pr-4 pb-4 pl-4
. -
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use
block lg:flex lg:flex-col lg:justify-center
instead ofblock lg:flex flex-col justify-center
to make it very clear that the flexbox utilities are only applicable at the
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Bun is now officially supported and these environments variables are no longer needed. Keeping this gist for legacy purposes. | |
# SKIP_DEPENDENCY_INSTALL=true | |
# UNSTABLE_PRE_BUILD=asdf install bun latest && asdf global bun latest && bun i |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const SECONDS_PER_YEAR = 365.25 * 24 * 60 * 60; | |
const BLOCKS_IN_A_YEAR = SECONDS_PER_YEAR / 14; | |
/** | |
* Formula source: http://www.linked8.com/blog/158-apy-to-apr-and-apr-to-apy-calculation-methodologies | |
* | |
* @param interest {Number} APY as percentage (ie. 6) | |
* @param frequency {Number} Compounding frequency (times a year) | |
* @returns {Number} APR as percentage (ie. 5.82 for APY of 6%) | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* -------------------------------------------------------------------------- */ | |
// All Bootstrap 4 Sass Mixins [Cheat sheet] | |
// Updated to Bootstrap v4.5.x | |
// @author https://anschaef.de | |
// @see https://github.com/twbs/bootstrap/tree/master/scss/mixins | |
/* -------------------------------------------------------------------------- */ | |
/* | |
// ########################################################################## */ | |
// New cheat sheet for Bootstrap 5: |
Inspired by dannyfritz/commit-message-emoji
See also gitmoji.
Commit type | Emoji |
---|---|
Initial commit | 🎉 :tada: |
Version tag | 🔖 :bookmark: |
New feature | ✨ :sparkles: |
Bugfix | 🐛 :bug: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
(c) by Thomas Konings | |
Random Name Generator for Javascript | |
*/ | |
function capFirst(string) { | |
return string.charAt(0).toUpperCase() + string.slice(1); | |
} | |
function getRandomInt(min, max) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This set of mixins allows you to create margin and padding classes dynamically. | |
// In html, you would specify <div class="mr20-xs">Content</div> to give you margin-right: 20px | |
// It is based on the responsive capabilities of Bootstrap. <div class="mr20-sm"> would give you | |
// 20 pixels of right margin on screens small and larger. | |
// Mixin control | |
// .make-margins(@breakpoint, @size, @decrement) | |
// @breakpoint: To be used with Bootstrap. Must supply breakpoints: xs, sm, md or lg |