Dan Farrow

Having used Zsh with Oh My Zsh for all my command line needs for some time I was delighted to discover Oh My Zsh’s zsh_stats command which gives a nice summary of the top 20 most frequently used shell commands.

Here’s my top 20 – what’s yours? Or perhaps you have already stopped reading?

 1    2235  20.3998%   g
 2    1388  12.6689%   l
 3    787   7.18328%   npm
 4    747   6.81818%   cd
 5    391   3.56882%   vi
 6    305   2.78386%   t
 7    294   2.68346%   cat
 8    257   2.34575%   sudo
 9    247   2.25447%   which
10    214   1.95327%   git
11    152   1.38737%   ssh
12    143   1.30522%   vagrant
13    137   1.25046%   rm
14    127   1.15918%   man
15    121   1.10442%   node
16    104   0.949252%  todo
17    102   0.930997%  mv
18    93    0.84885%   grep
19    93    0.84885%   docker
20    92    0.839723%  pwd

(g is an alias for git, l is an alias for ls -al and t is an alias for todo.sh)

Silly that cd is number 4 when Oh My Zsh doesn’t even require it…

[UPDATE] cat has recently overtaken t. Stay tuned command stat fans!

After a friend described yesterday’s effort as “…terrifying… like being at a rave with a disintegrating Edvard Munch” I decided to make a more agreeable version

See the Pen Zdog agreeable smiley by Dan Farrow (@squarebracket) on CodePen.

I’ve been having fun trying out David DeSandro‘s ace javascript pseudo-3D animation library Zdog.

<canvas style="display: block; margin: 40px auto;" class="zdog-canvas" width="480" height="480"></canvas>

			// create illo
			const illo = new Zdog.Illustration({
			  // set canvas with selector
			  element: '.zdog-canvas',
			  scale: 2.5,
			});

			const faceGroup = new Zdog.Group({
  				addTo: illo
			});

			// face
			const face = new Zdog.Hemisphere({
			  addTo: faceGroup,
			  diameter: 180,
			  color: '#ee3',
			  fill: true,
			});

         const face2 = new Zdog.Hemisphere({
           addTo: faceGroup,
           diameter: 180,
           scale: { z: -1 },
           color: '#ff5',
           fill: true,
         });

			// left eye
			const eyeLeft = new Zdog.Ellipse({
			  addTo: faceGroup,
			  diameter: 30,
			  translate: { x: 40, y: -10, z: 50 },
			  rotate: { y: -0.5 },
			  scale: { x: 0.65 },
			  color: '#333',
			  fill: true,
			});

			// right eye
			const eyeRight = eyeLeft.copy({
			  translate: { x: -40, y: -10, z: 50 },
			  rotate: { y: 0.5 },
			});

			// mouth
			const mouth = eyeLeft.copy({
			  diameter: 30,
			  // stroke: 10,
			  translate: { y: 40, z: 40 },
			  rotate: { x: -0.5 },
			  scale: { x: 3 },
			  color: '#333',
           // fill: false,
			});

			// update & render
			// illo.updateRenderGraph();

			let i = 0.1,
				y = 0.005;

			function animate() {
			  // rotate illo each frame
			  // illo.rotate.x = Math.sin(i) * 4.5;
			  i += 0.05;
			  illo.rotate.y = Math.sin(i);
			  illo.rotate.z = Math.cos(i) * 0.5;
			  illo.rotate.x = Math.cos(y+=0.005) * 1.2;
			  illo.updateRenderGraph();
			  mouth.scale.y = Math.cos(i);
			  // animate next frame
			  requestAnimationFrame( animate );
			}

			// start animation
			animate();

I was thinking of those transparent bouncy balls with things inside them.

Also I used CodePen’s prefill embed feature to embed the pen here and it worked a treat!

CERN’s 30th anniversary of the World Wide Web was held on my 48th birthday. The web has been around for my entire adult life, to the day!

Writing complex mod_rewrite redirection rules with .htacess can lead to a downwards spiral of frustration, paranoia and utter bewilderment.

Today I’m working on a particularly tricky scenario so I decided to get more methodical about it.

Here’s a summary of the workflow I’ve been using. I have to remind myself to be deliberately slow and methodical – if I get impatient and rush ahead I’m much more likely to miss something unexpected and end up going in circles.

My setup uses a locally installed Apache server and the Firefox Selenium IDE plugin:

• Make a new directory in the server root, to keep everything in one place, with an index.php echoing some debugging info:
  

  <?php
  File: <?= __FILE__ ?>
  Script name: <?= $_SERVER[ 'SCRIPT_NAME' ] ?>
  Request URI: <?= $_SERVER[ 'REQUEST_URI' ] ?>
  Query string: <?= $_SERVER[ 'QUERY_STRING' ] ?>
  Cookie check: <?= $_COOKIE[ 'myCookie' ] ?>
• Break the task up into a list of manageable blocks e.g.
  1. Set a cookie
  2. Append flag to URL if cookie is present
  3. If flag present remove it and set query string
• Make directories named after each block e.g.
  • /set-a-cookie
  • /append-flag-to-url-if-cookie-is-present
  • /if-flag-present-remove-it-and-set-query-string
• Each directory contains an .htaccess file and index.php
• Put a comment at the top of each .htaccess identifying the block it addresses e.g. # set-a-cookie. That way when you start copying & pasting you can keep track of what each block does
• The index file simply pulls in the root index.php:
  

  <?php require( '../index.php' );
• Make a new Selenium test suite and begin constructing a test case for the first block. These tests are generally pretty simple: open a URL and check that the location is redirected as expected.
• Remember to test for multiple scenarios such as requests for:
  • with trailing slashes
  • without trailing slashes
  • with query strings
  • index.php
  • static files
• Start working on the .htaccess file, running the tests each time you make a change. Once a block is working move to the next one
• Repeat until done

Work slowly and try not to make too many changes at once. mod_rewrite may seem like voodoo but don’t let it give you the heebie-jeebies!

It’s quite unprofessional, let alone embarrassing, to post some test content on a development site only to discover you’re actually in the wrong tab and you just posted to the live site.

To avoid this I use the Stylish Add-on for Firefox to inject custom CSS into live sites I’m working on.

For example, I have the following rule for touretteshero.com:

@-moz-document domain("www.touretteshero.com") {
   html {
      border-left: 30px solid red !important; 
   }
}

The result is that, in my browser, the live site has a hard-to-ignore red border that acts as a clear visual reminder:

Update

Since writing this I’m working with four distinct versions of the site: local development, remote development, remote live and remote legacy (backup of the previous version).

I’ve refined my Stylish rules accordingly to add a custom footer for each. The new rule for the live site is:

@namespace url(https://www.w3.org/1999/xhtml);

@-moz-document domain("www.touretteshero.com") {
  body::after {
    z-index: 99999;
    line-height: 40px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #fff;
    background: #800;
    content: "live";
    left: 0;
    position: fixed;
    bottom: 0;
 }
}

which looks like this:

Whereas the local development version looks like this:

Red = Caution, Green = Go!