anschaef

/* -------------------------------------------------------------------------- */
// 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:

zcaceres

The Revealing Module Pattern in Javascript

Zach Caceres

Javascript does not have the typical 'private' and 'public' specifiers of more traditional object oriented languages like C# or Java. However, you can achieve the same effect through the clever application of Javascript's function-level scoping. The Revealing Module pattern is a design pattern for Javascript applications that elegantly solves this problem.

The central principle of the Revealing Module pattern is that all functionality and variables should be hidden unless deliberately exposed.

Let's imagine we have a music application where a musicPlayer.js file handles much of our user's experience. We need to access some methods, but shouldn't be able to mess with other methods or variables.

Using Function Scope to Create Public and Private Methods

xenozauros

function hexToHSL(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    r = parseInt(result[1], 16);
    g = parseInt(result[2], 16);
    b = parseInt(result[3], 16);
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;
    if(max == min){
      h = s = 0; // achromatic

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

AllThingsSmitty

##Sass Functions Cheat Sheet

1. RGB Functions
2. HSL Functions
3. Opacity Functions
4. Other Color Functions
5. List Functions
6. Map Functions
7. Selector Functions
8. String Functions

brandonsimpson

OSX How To: Uninstall native MySQL and install MariaDB via Homebrew

This is a short overview on how to completely remove any old mysql server installs in OSX and upgrade to MariaDB without conflicts. Things can get a bit weird when you have various old installs of MySQL server floating around, and utilizing homebrew to install and upgrade MariaDB as a drop in replacement for MySQL has worked well, especially if you're used to managing MySQL installs via yum in linux.

First: Backup Your Data!

Backup all of your current databases with mysqldump

This isn't a tutorial on backups, and there are many ways to do it. You should know how to backup your data anyway. For this example, we'll do a full backup of our InnoDB databases.

chrismccoy

# alias to edit commit messages without using rebase interactive
# example: git reword commithash message
reword = "!f() {\n  GIT_SEQUENCE_EDITOR=\"sed -i 1s/^pick/reword/\" GIT_EDITOR=\"printf \\\"%s\\n\\\" \\\"$2\\\" >\" git rebase -i \"$1^\";\n git push -f;\n}; f"

# git alias to tag and push a version
tagpush = "!f(){ t=${1#v}; git tag v$t && git push origin v$t; }; f"

# git alias to download single file from a repo in format of user/repo file
fetch-file = "!f() { out=\"${4:-$(basename \"$2\")}\"; if gh api \"repos/$1/contents/$2\" ${3:+-f ref=$3} --jq '.content' 2>/dev/null | base64 --decode > \"$out\" 2>/dev/null; then echo \"Downloaded $2 → $out\"; else echo \"Failed\"; rm -f \"$out\"; fi; }; f"

jedfoster

package-lock.json

joyrexus

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

IanLunn

/* sample cubic beziers */
linear = [0.250, 0.250, 0.750, 0.750];
ease = [0.250, 0.100, 0.250, 1.000];
easeIn = [0.420, 0.000, 1.000, 1.000];
easeOut = [0.000, 0.000, 0.580, 1.000];
easeInOut = [0.420, 0.000, 0.580, 1.000];

function reverseCubicBezier(cubicBezier) {
  return [
    1 - cubicBezier[2],