jmacqueen

A basic Grunt configuration for working with the Bones Wordpress Starter theme. To be expanded! Compiles and compresses Sass and uses rsync to update the local installation of Wordpress for testing so I can keep my MAMP installation free of extraneous files...and simply FTP over the final result if it checks out without putting uneccessary node_modules or .scss files on the server by mistake. This was pretty much put together because I kept mistakenly FTPing over my .sass-cache files like an idiot.

For this to work, the theme in development lives in 'src' inside the project directory so node_modules, .sass-cache, gruntfile.js, package.json and src are all together in the top-level directory.

project folder
  .sass-cache
  gruntfile.js
  node_modules
 package.json

jmacqueen

CSS animations are typically far more processor efficient than Javascript animations. Far more clever people than I have spent a lot of brainpower optimizing the animations natively in the browser. Whenever possible, I defer to their expertise.

The animation in use is a simple scale transform:

	@keyframes pulsar {
		from {
			fill: red;
		}
		to {

fill: red;

jmacqueen

I have a particular interest in organizing graph layouts. This is a deliberately messy random starting point to experiment with organizational techniques.

If you want to interact with these D3.js gists without downloading them yourself, replace https://gist.github.com with http://bl.ocks.org to go to Mike Bostock's excellent website for running D3.js gists.

jmacqueen

Using the random node and link generator, I wanted to play with some scaling options to get a feel for what the values all mean. Here we have some basic HTML5 sliders to set ranges. Sorry old IE users. I didn't feel like busting out jQueryUI.

Gravity acts to pull all of the nodes into the center of the view.

Charge is the force acting in between the individual nodes. The Charge Scaling slider applies a proportional weighting to each node based on the number of links it has. Set at 0, all nodes have the default charge of -30.

The Node Scaling adjusts the size of the individual nodes proportional to the number of links it possesses.

Node scaling is very handy in identifying major influencers (the most highly connected) in the graph. Increasing the gravity and charge scaling together help impose greater structure to the graph display.

jmacqueen

Adding some collision detection makes the graph cleaner at a wider variety of settings. But notice that the conflict between collision detection, gravity pulling nodes together and links attempting to limit distance can create some unusual behavior at extreme values. The loners need a little space to escape :-)

There's some light refactoring going on here. The random node generation code now uses d3.range to generate an array of numbers and then map on top of that to create the node objects themselves. A similar approach is used for the links, too.

The collision detection code was lifted from here with minor tweaks to account for my node scaling.

If you want to interact with these D3.js gists without downloading them yourself, replace https://gist.github.com with http://bl.ocks.org to use Mike Bostock's excellent website for running D3.js gists.

jmacqueen

Click on a grey box to zoom deeper into the tree. Click on the orange box at the top to back out a level.

Adapted from the man himself. I believe in standing on the shoulders of giants.

jmacqueen

// jQuery-free form values
// Should work in IE9+

var frm = document.querySelector('form'); // Must return containing form

var valueHash = Object.keys(frm.elements).slice(frm.elements.length + 1).reduce(function(a,key){
  var elm = frm.elements[key];
  if(elm.type !== "checkbox" || elm.type == "checkbox" && elm.checked !== false) {
    a[key] = elm.value;
  }

jmacqueen

alignItems     : 'stretch'    # default: 'stretch'
alignContent   : 'stretch'    # default: 'stretch'
flexDirection  : 'row'        # default: 'row'
flexWrap       : 'wrap'       # default: 'nowrap'
justifyContent : 'flex-start' # default: 'flex'-start'

refreshFrequency: false

command: "echo"

jmacqueen

/* jshint esversion: 6 */

// Two strings enter...one string leaves
const longerString = (a,b) => {
  if (a.length > b.length) { return a; }
  return b;
};

// The longest possible match from the beginnning of the strings is returned
const stringHeadMatch = function(a,b) {

jmacqueen

command: '/usr/local/bin/docker ps --format "{{.ID}}\t{{.Image}}\t{{.Command}}\t{{.Ports}}\t{{.Names}}"'

refreshFrequency: 5000

render: (output) -> """
    <table>
      <thead>
        <tr>
          <th>Container Id</th>
          <th>Image</th>