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

joyrexus

Sans jQuery

Events

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

eegrok

from: http://www.meandmark.com/keycodes.html
with some additions from people in the comments, thanks :)
Virtual Keycodes for the Mac QWERTY Layout

Keycodes are in hexadecimal. A blank entry means either there is no key assigned to that keycode or I was unable to find the assigned key.

Keycode    Key
0x00        A
0x01        S
0x02        D

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

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"

# edit all commit messages 
git rebase -i --root

# clone all your repos with gh cli tool
gh repo list --json name -q '.[].name' | xargs -n1 gh repo clone

getaaron

• Call 1-800-829-1040
• Press 1 for English (or other language as desired)
• Press 2 for personal tax
• Press 1 for form / tax history
• Press 3 for other
• Press 2 for other
• Ignore 2 SSN prompts till you get secret other menu
• Press 2 for personal tax
• Press 3 for other
• Wait for agent!

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:

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

faressoft

DOM Performance

• How the browser renders the document
  • Receives the data (bytes) from the server.
  • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
  • Turns tokens into nodes.
  • Turns nodes into the DOM tree.
• Builds CSSOM tree from the css rules.

dcleao

NPM Commands, Scripts, Life-cycle Phases

The following describes the behaviour of several npm commands, particularly w.r.t. the scripts that are run in each, for NPM version 6.5.0.

npm build <other-package-folder>

1. npm run preinstall
2. link binaries (node-gyp)
3. for each bin command in other package: