KevinTCoughlin

Using *:empty to Troubleshoot Your CSS
Nicole Ramsey is a freelance developer for An Event Apart and QA Lead for Modern Tribe. She still views source when possible, wishes she could remember all shortcuts without a cheat sheet, and fusses with her dotfiles more than is necessary. Here, she shares a CSS troubleshooting tip:

One of the simplest, but most useful, tools in my QA toolkit is the *:empty pseudo selector. This selector affects elements that contain either nothing or only an HTML comment. Caveats: This won’t catch elements if there is whitespace and it will false-positive catch <img> elements.

Example

*:empty {border: 5px solid red;}

<p>Awesome content</p>

KevinTCoughlin

• $_ - returns the value of the most recently evaluated expression.
• $0-4 - Last five DOM elements inspected or last five JS heap objects
• $(selector) - alias for document.querySelector()
• $$(selector) - alias for document.querySelectorAll()
• $x(path) - array of DOM elements that match the XPath expression (e.g "//p[a]")
• clear() - clear console
• copy(object) - copy object to clipboard
• debug(function) - debugger invoked and breaks inside the function
• dir(object) - object-style listing of all specified objects properties, alias for console.dir()
• getEventListeners(object) - returns the event listeners on an object

KevinTCoughlin

$_ returns the value of the most recently evaluated expression. $0-4 - Last five DOM elements inspected or last five JS heap objects $(selector) alias for document.querySelector() $$(selector) alias for document.querySelectorAll() $x(path) array of DOM elements that match the XPath expression (e.g "//p[a]") clear() copy(object) debug(function) // debugger invoked and breaks inside the function dir(object) object-style listing of all specified objects properties, alias for console.dir() getEventListeners(object)

KevinTCoughlin

• http://stackoverflow.com/questions/31168708/invalidating-all-http-caches-in-angular
• http://stackoverflow.com/questions/17059569/how-to-refresh-invalidate-resource-cache-in-angularjs
• https://docs.angularjs.org/api/ngResource/service/$resource
• http://stackoverflow.com/questions/28498588/understanding-angularjs-resource-isarray-property

KevinTCoughlin

• https://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/
• https://developers.google.com/web/tools/chrome-devtools/memory-problems/
• https://docs.google.com/presentation/d/1wUVmf78gG-ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub?start=false&loop=false&delayms=3000&slide=id.g31ec7af_0_58
• http://stackoverflow.com/questions/19621074/finding-javascript-memory-leaks-with-chrome

KevinTCoughlin

import _ from 'lodash';
import { $state } from 'ui-router';

function launchHelper(state, params, ctrlKey, options) {
  if (ctrlKey) {
    const url = $state.href(state, params, _.defaults(options, { absolute: true }));
    window.open(url);
  } else {
    $state.go(state, params, options);
  }

KevinTCoughlin

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

KevinTCoughlin

(function() { 
  var CSSCriticalPath = function(w, d, opts) {
    var opt = opts || {};
    var css = {};
    var pushCSS = function(r) {
      if(!!css[r.selectorText] === false) css[r.selectorText] = {};
      var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
      for(var i = 0; i < styles.length; i++) {
        if(!!styles[i] === false) continue;
        var pair = styles[i].split(": ");

KevinTCoughlin

    c = checkout
    d = diff
    ds = diff --staged
    l = log --all --graph --oneline --decorate
    s = status --short --branch
    g = grep --break --heading --line-number
    ff = merge --ff-only
    puff = pull --ff-only
    purr = pull --rebase
    mnc = merge --no-ff --no-commit

KevinTCoughlin

module.exports = () => return "Hello World";