remarkablemark

How to add an image to a gist

1. Create or find a gist that you own.
2. Clone your gist (replace <hash> with your gist's hash):

   # with ssh
   git clone git@gist.github.com:<hash>.git mygist
   
   # with https
   git clone https://gist.github.com/<hash>.git mygist

remarkablemark

{
  "version": "1.2.3",
  "scripts": {
    "get-version": "awk -F'\"' '/\"version\": \".+\"/{ print $4; exit; }' package.json"
  }
}

remarkablemark

{
  "version": "1.2.3",
  "scripts": {
    "get-version": "node -p \"require('./package').version\""
  }
}

remarkablemark

{
  "version": "1.2.3",
  "scripts": {
    "get-version": "jq -r .version package.json"
  }
}

remarkablemark

{
  "version": "1.2.3",
  "scripts": {
    "get-version": "echo $npm_package_version"
  }
}

remarkablemark

JavaScript Classes - ES5 vs ES6

An example that shows the difference between creating a JavaScript class and subclass in ES5 and ES6.

Reference

remarkablemark

Links:

• Blog post
• Repl.it

remarkablemark

function checkBoundaryCollision(image) {
  var hasCollision = false;
  // left or right collision
  if (position.x < 0 || position.x + image.width > width) {
    velocity.x *= -1;
    hasCollision = true;
  }
  // top or bottom collision
  if (position.y < 0 || position.y + image.height > height) {
    velocity.y *= -1;

remarkablemark

function draw() {
  background('#111');
  var image = images[imageIndex];
  var hasCollision = checkBoundaryCollision(image);
  if (hasCollision) {
    imageIndex++;
    if (imageIndex + 1 > images.length) {
      imageIndex = 0;
    }
    image = images[imageIndex];

remarkablemark

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
}