Skip to content

Instantly share code, notes, and snippets.

View fasterv410's full-sized avatar
🏓
Focusing

Thiraphat Yotharak fasterv410

🏓
Focusing
View GitHub Profile
@Hebilicious
Hebilicious / cloudflare-pages-bun.env
Last active April 10, 2024 01:01
Cloudflare Pages and Bun
# 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
@sterlu
sterlu / Savings APR-APY conversion.js
Created February 24, 2020 14:54
Convert between APR & APY yearly returns
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%)
*/
@sandren
sandren / tailwind.md
Last active April 26, 2024 12:37
Tailwind CSS best practices

Tailwind CSS best practices

Utility classes

  1. 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!

  2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

  3. 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 of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

@anschaef
anschaef / bootstrap-4-sass-mixins-cheat-sheet.scss
Last active April 12, 2024 08:49
Bootstrap 4 Sass Mixins [Cheat sheet with examples]
/* -------------------------------------------------------------------------- */
// 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:
@parmentf
parmentf / GitCommitEmoji.md
Last active May 6, 2024 18:30
Git Commit message Emoji
@tkon99
tkon99 / name.js
Last active April 19, 2024 14:38
Random Name Generator for Javascript
/*
(c) by Thomas Konings
Random Name Generator for Javascript
*/
function capFirst(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function getRandomInt(min, max) {
@brandonferens
brandonferens / margin-padding.less
Last active June 25, 2023 13:43
LESS Dynamic Margin and Padding Classes
// 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
@kevin-smets
kevin-smets / iterm2-solarized.md
Last active May 7, 2024 09:29
iTerm2 + Oh My Zsh + Solarized color scheme + Source Code Pro Powerline + Font Awesome + [Powerlevel10k] - (macOS)

Default

Default

Powerlevel10k

Powerlevel10k