Tag: html

bash: create HTML with automatic -scripts- and -links-

I was frequently writing small projects, or test projects, and found myself just needing an index.html hull with a number of links to various local js files and css files, as well as cdn based libraries.

Here’s a bash command I wrote that will create a local index.html file and search through all of the arguments provided to the command to automatically insert js or css files by name, or cdn libraries by partial match. Obviously you could add any number of match criteria to the script. Note: you will need to manually update the cdn addresses for library version numbers as time goes on.

By default it partial matches for backbone, underscore, jquery, d3, and the usual suspects.

Usage:> makehtml anyjsfile.js anycsfile.css underscore backbone d3 partialmatchkey partialmatchkey…etc

#!/bin/bash

FILE="index.html"

touch $FILE
echo "<!DOCTYPE html>" > $FILE
echo "<HTML lang="en">" >> $FILE
echo "<HEAD>" >> $FILE
echo "<meta charset="UTF-8">" >> $FILE

function addCSS() {
  str=$1;
  echo "<LINK rel=\"stylesheet\" href=\"$str\">" >> $FILE
};
function addJS() {
  str=$1;
  echo "<SCRIPT src=\"$str\"></SCRIPT>" >> $FILE
};

lowerString=1

function toLower()
{
   local __word=$1
   local __len=${#__word}
   local __char
   local __octal
   local __decimal
   local __result

   for (( i=0; i<__len; i++ ))
   do
      __char=${__word:$i:1}
      case "$__char" in
         [A-Z] )
            printf -v __decimal '%d' "'$__char"
            printf -v __octal '%03o' $(( $__decimal ^ 0x20 ))
            printf -v __char \\$__octal
            ;;
      esac
      __result+="$__char"
   done
   lowerString="$__result"
};

for thing in $@; do
  if [ $FILE = $thing ]; then
    continue;
  fi

  toLower $thing

  if [[ $lowerString == *".css"* ]]; then
    echo "add css"
    addCSS $lowerString
    continue
  fi
  if [[ $lowerString == *".js"* ]]; then
    echo "add js"
    addJS $lowerString
    continue
  fi
  if [[ $lowerString == *"bootstrap"* ]]; then
    addCSS "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
    continue
  fi
  if [[ $lowerString == *"jquery"* ]]; then
    addJS "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
    continue
  fi
  if [[ $lowerString == *"angular"* ]]; then
    addJS "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
    continue
  fi
  if [[ $lowerString == *"three"* ]]; then
    addJS "https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"
    continue
  fi
  if [[ $lowerString == *"webfont"* ]]; then
    addJS "https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"
    continue
  fi
  if [[ $lowerString == *"backbone"* ]]; then
    addJS "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
    continue
  fi
  if [[ $lowerString == *"underscore"* ]]; then
    addJS "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
    continue
  fi
  if [[ $lowerString == *"d3"* ]]; then
    addJS "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"
    continue
  fi

done

echo "</HEAD>" >> $FILE
echo "<BODY>" >> $FILE
echo "<p>===============<p>" >> $FILE
echo "<p>CONTENT OF PAGE<p>" >> $FILE
echo "<p>===============<p>" >> $FILE
echo "</BODY>" >> $FILE
echo "</HTML>" >> $FILE

js: the requestAnimationFrame() game loop

Historically, web/js based apps had to basically set their own “loop” using setInterval or setTimeout. There’s actually not a huge downside to using those, except when framerate becomes an issue. So now we can use requestAnimationFrame(). It has a number of uses, but the simplest is just to have it handle the entire game loop.

Essentially RAF calls a callback function every time the interpreter can come up for air. This combined with tracking the delta in time between frames can allow you to handle changes in framerate more smoothly.

In the implementation below calling myGame.actionLoop() calls recurse(), which then has requestAnimationFrame call the recurse loop repeatedly. I’ve broken the specific game logic out into the function var doThisEveryFrame just to clearly illustrate the effect.

myGame.actionLoop = function() {
    var lastFrameTime;
    var deltaT;
    var lowEnd = 1;
    var highEnd = 160;

    var doThisEveryFrame = function(timeDiff){
      myGame.updatePhysics(timeDiff);
      myGame.updateLogic(timeDiff);
      myGame.renderChangesToScreen();
    };

    function recurse( thisFrameTime ) {
        window.requestAnimationFrame(recurse);
        thisFrameTime = thisFrameTime && thisFrameTime > 5000 ? thisFrameTime : window.performance.now();
        lastFrameTime = lastFrameTime || thisFrameTime;
        deltaT = thisFrameTime - lastFrameTime;

        if (deltaT >  highEnd){
          deltaT = highEnd;
        }
        if(deltaT > lowEnd){
          doThisEveryFrame(deltaT);
          lastFrameTime = thisFrameTime;
        }
    }
  recurse();
};