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

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

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

$disable-magic-sprite-selectors: true;
$icons-inline: true;
$icons-sprite-base-class: "%icons-sprite";
$icons-layout: smart;
$icons: sprite-map("icons/*.png");
@import "icons/*.png";

@each $img in sprite-names($icons) {
  %icon-#{$img} {
		@extend %icons-sprite;

morewry

// Pass in a starting view and match comparison
function findView ( startView, searchFn ) {
	var resultView,
	viewSearch = function ( curView ) {
		curView.getView( function ( nestedView ) {
			if ( searchFn( nestedView ) ) {
				resultView = nestedView;
			}
			else {
				viewSearch( nestedView );

morewry

# http://stackoverflow.com/questions/10314907/getting-a-list-of-files-in-sass-compass
require File.join(File.dirname(__FILE__), 'listfiles.rb')

morewry

@echo off
setlocal enabledelayedexpansion

REM
REM PngOutBatch
REM
REM Nic Jansma - nic@nicj.net
REM
REM Runs a PNG through PngOut multiple times at different block sizes.  Shows the
REM file-size savings during and at the end.

morewry

# we have a separate build process that strips comments & minifies, so I use production mode here to generate the styleguide
project_path = File.dirname(__FILE__) + "/"
utils_dir = "utilities/"
utils_path =  project_path + utils_dir
output_style = (compiletype == :production) ? :expanded : :nested

# callback - on_stylesheet_saved
on_stylesheet_saved do |filename| 
	if File.exists?(filename)
		if (compiletype == :production)

morewry

/*
# Convert Units (function)

TODO: Description

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

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

morewry

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

## Set / Get

http://cdpn.io/hgLal


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