morewry

/*
# Responsive Design Utilties

A few Sass functions and mixins helpful for responsive designs including a function to convert between CSS measurement units and a respond-to media query mixin that supports comma-separated "or" queries.

*/
// ---------------------------------------

// ---------------------------------------
/*

morewry

// ---------------------------------------
/*

## Set / Get

http://cdpn.io/hgLal


*/
// ---------------------------------------

morewry

/*
# Convert Units (function)

TODO: Description

*/
// ---------------------------------------

@function convert-units ( $length, $as: rem, $root: 16, $ppi: 96 ) {
  $unit: unit($length);

morewry

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// Prototypal inheritance in Sass
// Disclaimer: might be totally contrived and useless...
// “It’s not about the destination, but the journey.”

// New operator

morewry

// A named buffer. Will append to existing content captured there.
// The buffer can be accessed via get-capture("foo") or @emit "foo".
@capture "foo" {
  @media screen {
    .asdf {
      .qwerty {
        /* This is a comment */
        color: red;
      }
    }

morewry

# http://codepen.io/morewry/pen/pvLxPV

# manually create touch event
touchStartOn = (el, x = 0, y = 0) ->
  try
    e = document.createEvent('TouchEvent')
    e.initTouchEvent("touchstart", true, true)
  catch err
    try
    	e = document.createEvent('UIEvent')

morewry

AngularJS Directive Attribute Binding Explanation

When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.

1. Raw Attribute Strings

   <div my-directive="some string" another-param="another string"></div>

morewry

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.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

morewry

Currently considering https://github.com/webdriverio/webdrivercss

---

Core Goals:

• Can test in up-to-date versions of all major browsers
• Can test on up-to-date versions of all major OSes
• Can test in IE9 (because Bootstrap v4 will support IE9+)
• Don't want to have to setup/maintain our own cluster of VMs running all the necessary OSes (and all the versions of Windows)
• Workflow for management of reference/baseline/norm screenshots

morewry

#!/bin/sh
enter_directory(){
	if [ "$PWD" != "$PREV_PWD" ]; then
		PREV_PWD="$PWD";
		if [ -e ".nvmrc" ]; then
			nvm use;
		fi
	fi
}