KevinTCoughlin

Jekyll & Liquid Cheatsheet

A list of the most common functionalities in Jekyll (Liquid). You can use Jekyll with GitHub Pages, just make sure you are using the proper version.

Running

Running a local server for testing purposes:

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

function getWatchers(root) {
  root = angular.element(root || document.documentElement);
  var watcherCount = 0;
 
  function getElemWatchers(element) {
    var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
    var scopeWatchers = getWatchersFromScope(element.data().$scope);
    var watchers = scopeWatchers.concat(isolateWatchers);
    angular.forEach(element.children(), function (childElement) {
      watchers = watchers.concat(getElemWatchers(angular.element(childElement)));

KevinTCoughlin

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>

KevinTCoughlin

/usr/bin/plutil -convert xml1 -o - ~/Library/Safari/Bookmarks.plist | grep -E  -o '<string>http[s]{0,1}://.*</string>' | grep -v icloud | sed -E 's/<\/{0,1}string>//g'

KevinTCoughlin

Direct links to free Springer maths books (pdf versions)

duplicates = multiple editions

A Classical Introduction to Modern Number Theory,Kenneth IrelandMichael Rosen

A Classical Introduction to Modern Number Theory,Kenneth IrelandMichael Rosen

A Course in Arithmetic,Jean-Pierre Serre

KevinTCoughlin

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },

  "plugins": ["react"],

  "ecmaFeatures": {

KevinTCoughlin

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()

KevinTCoughlin

<!-- You can change the parent around to whatever you normally use -->
<style name="DebugColors" parent="Theme.AppCompat">

    <!-- System colors -->
    <item name="android:windowBackground">@color/__debugWindowBackground</item>

    <item name="android:colorPressedHighlight">#FF4400</item>
    <item name="android:colorLongPressedHighlight">#FF0044</item>
    <item name="android:colorFocusedHighlight">#44FF00</item>
    <item name="android:colorActivatedHighlight">#00FF44</item>