JavaScript tips

• Not enough contrast for red text on a white background

  Chrome says there is not enough contrast in my headings of red text on an white background

  I use the 'audit' feature of the 'developer tools'

• Viewport

  I add a 'viewport' 'meta' tag to make my web pages adapt to mobiles:

  <meta name="viewport" content="width=device-width, initial-scale=1">

• Reponsive images

  I make my images respond to different screen sizes by adding:

  img {
      max-width: 100%;
      height: auto;
  }

  I also remove the 'width' and 'height' for each image

• Centre an element

  to centre a 'fixed' positioned element, say 'left: 50%' and give 'margin-left' a value of minus half the element width

  You do a similar thing vertically with 'top' and 'margin-top'

• No small fonts on mobiles

  it seems you cannot use font sizes less than the default to be mobile friendly, according to the 'audit' checks in Chrome

• Can't use clip-path with a gradient background

  you cannot use 'clip-path' in CSS, with a gradient for the background

  It seems you can with SVG

• Duplicate points from 'clippy' tool

  I seem to get duplicate points in the CSS generated by the 'clippy'' tool

• Give clip-path a name

  give your 'clip-path' a descriptive name

  You cannot tell what they are otherwise

• snowflake Unicode symbol

  there is a snowflake symbol in Unicode

  This symbol is useful for snowfall animations.

  The symbol has been in Unicode for a long time

• Banner in bottom right of screen

  my free web hosting provide, '000webhost.com', puts a banner in the bottom right corner of the screen

  This banner obscures part my animations.

  The computers in my library put a clock in the bottom-right of the screen too

• Percent sizes in 'translate'

  you can use percent sizes in a 'translate' transform

  For example: 'translate3d(100%,0,0)'

• Percentage size in 'translate' is not of parent

  in a 'translate' transform, a percentage size relates to the size of the element not its parent

• FTP down at free hosting provider

  I could not upload files to '000webhost.com' for a week

  There was a problem with the 'ftp'.

  Windows7 has an 'ftp' program. I type 'ftp' at the 'start' menu

• Bug gives duplicate input fields on Chrome

  I had a bug, but Chrome carried on, creating duplicate 'input' fields

  I found the bug by looking at the console in the 'developer tools'

• Competition for 1k JavaScript

  there is a competition for javascript programs under 1k in size

• chrome://gpu

  enter 'chrome://gpu' to get details of the GPU

• Older smiley in Unicode drawn as lines

  the older, lower numbered, smiley emojis in Unicode are drawn as lines, and are not painted on Apple devices

• Emojis for someone raising their hands are women

  the Unicode emojis for a person raising their hands, show a woman on Apple devices

• Giving up on sound downloads

  I had almost given up on people downloading the sound files

  Instead I directed people to the online game which has all the sound. Then people started downloading the sound

• Set variable to null to free memory

  I set variables to 'null' that are big objects to free up the memory

  Examples are the variables that persist in the module pattern

• Page of credits aays where code comes from

  my web page of 'credits' or 'acknowledgments' is a good way of remembering where bits of code came from

• Make a note where code comes from

  if you take a piece of code from elsewhere then make a note of where it came from, so you can add it to your credits

• Can't use CSS animations on 'spans'

  it seems you cannot use CSS animations on 'span' elements

• Strobe effects from animation of sun rays

  I felt queasy doing an animation of the rays of the sun

  I remembered you can have fits looking at strobe lighting.

  I made the rays bigger with light colors like the background. I turn the rays very slowly

• List of names gets third-party link

  my first real link comes from a University in Namibia and the link is to my list of first names

  I had almost given up on the list. The list does not have much to do with my game

• Creating an SVG with GIMP for animation

  I create an SVG with 'GIMP', so I can animate the drawing of the letters with 'stroke-dashoffset'

  I use the 'Text to Path' option in the 'Layer' menu. In the 'Path' tab on the 'Layer' dialog, I right click and choose 'Export Path'. I have an old copy of 'GIMP'

• Converting 'skew' to 'matrix3d'

  It was not hard to use the 'matrix3d' transform

  I adapted examples on the Web.

  I want to do a 'skew' on the 'x' axis as a 3D transform to run on the GPU

• Centering items with 'flex' layout

  you can use a 'flex' layout to centre an item vertically and horizontally

• Shorthand CSS 'animation' property

  it is easier to set the shorthand 'animation' CSS property in JavaScript rather than setting 'animation-duration' etc

  You could set constant animation properties in a stylesheet and dynamic properties in JavaScript, but I found this too complicated

• Make a 'todo' list when prototyping

  if I make a prototype then I make a list of things to tidy up when finished

• No outline on link selected with access key on IE

  with Internet Explorer, if you select a link with an access key and the link has 'text-description' set to 'none', then sometimes no outline appears on the link

  the outline reminds you to press 'enter' to activate the link

• Exception in 'promise' when play sound and no user interaction

  in Chrome, I get an exception (in the 'promise') when I play a sound before the user has clicked anything

  This code traps the exception:

  var playPromise = audioElement.play();
  
  if (playPromise !== undefined) {
      playPromise.then(null).catch(null);
  }

  But my old Konqueror browser will not compile this code.

  I will fix the problem by only playing the sound on a click

• Restarting CSS animation on Firefox

  I could not restart a CSS animation on Firefox. The HTML was fixed

  One solution is to have 2 identical 'keyframes' with different names and alternate between the 'keyframes'.

  Another solution is to 'clone' the HTML and remove the original HTML.

  Setting the element's 'offsetWidth' to itself did not work

• Dynamic CSS animations

  I had a lot of fun adding CSS animations (and transitions). It is easy to make them dynamic:

  var stylesheet = document.createElement('style');
  stylesheet.innerHTML = 'keyframe ...';
  
  var headElement = document.getElementsByTagName('head')[0];
  headElement.appendChild(stylesheet);

• Finding bugs needs much skill

  finding a bug in an old piece of code can take just as much skill as writing new code

• 'Humble' programming

  I try to be 'humble' when writing code

  I am a pretty average programmer, nothing special

• Starting with simple CSS animations

  some of my early animations seem quite crude now. But they were a step towards the more complex ones I do now

• Learning from other people's animations

  I have learnt a lot by looking at the code when doing 'mash-ups' of other people's animations

• Run W3C link checker serveral times

  I run the 'W3C link checker' several times, as new problems with links are reported as I fix the problems

• Variable without 'var' is global

  if you do not put 'var' before a variable when you first set it, it will be global

• Can declare variable anywhere

  you can declare variables anywhere in a function, unlike the original 'C' language

• Variable inside 'for' loop is visible in enclosing function

  if you declare a variable inside a for/while loop or 'if' block, it is visible in the enclosing function. This is different from the 'C' language where the variable is private to the block

  For example, I declare variables inside a 'for' loop like this:

  for (var i = 0; i < len; i++) { }

  But this is a bit misleading as the variable is available outside the loop. It might be simpler to just declare the variable at the top of the function.

  It may be slightly quicker for the JavaScript interpreter if you put all your variable definitions at the top of each function

• Object properties do not need to be defined

  a JavaScript variable has to defined before you can use its value, but an object property that is not previously defined has an 'undefined' value

• Put global variables into objects

  I seem to end up with lots of global variables.

  I wish I had grouped them together into several objects

• Objects are just key-value pairs

  simple objects are just pairs of keys and values stored in a hash. For example:

  var myObject = { name1 : value1,
                   name2 : value2,
                   func1 : function () { alert('hi'); } };

  The values can be function definitions

• Classes in JavaScript

  a class in JavaScript is just a normal function definition where you set up properties with 'this' variables. You create an instance of a class with the 'new' operator. For example:

  function Play(aim)
  {
      this.aim = aim;
      ...
  }
  
  var play = new Play(playAim);

  The instance is an object with a list of key/value pairs just like simpler objects.

  Again, 'this' variables can be function definitions. However, you can share the functions between instances of a class by adding them to the class's prototype:

  Play.prototype.setPhrase = function (phrase)
  {
      this.phrase = phrase;
      ...
  }
  
  play.setPhrase('hello world');

  Here 'prototype' means a sort of template for the class. At run-time if the instance does not have a variable defined, the JavaScript interpreter will look in the instance's class's prototype.

  The 'this' context variable given to an instance of a class is again just a simple object with a list of key/value pairs.

  You can add plain class variables to a class's prototype too

• Have to clone an object manually

  you have to clone an object by hand.

  However, there is a 'cloneNode()' function for copying HTML fragments via the Document Object Model (DOM)

• Objects are references

  objects are references:

  you always deal with references to objects (i.e. 'pointers') rather than the objects themselves. For example, objects are passed by reference into functions as parameters.

  JavaScript uses garbage collection for objects. Apparently browsers use a 'mark and sweep' method rather 'reference counting' as counting has trouble handling circular references.

  Arrays are objects in this respect. It is thought to be quicker to to create an array like "var a = ['a', 1]"rather than using "var a = new Array('a', 1)". I think the two are equivalent now - maybe they were not in the early days of JavaScript.

  (Note that saying "var a = new Array(1)" just creates an array with one empty element)

• Extending built-in objects

  you can extend built-in objects like Array():

  you can add new member functions and variables to built-in objects (classes) such as Array. For example:

  Array.prototype.myFunction = function () { };

  But, when you go through the elements of an associative array with 'for (element in array) { }' , your new member functions and variables will be included. (By an 'associative' array, I mean an array with indexes that are not numeric.)

  You can exclude these by testing the type of the element with 'typeof' or 'instanceof', or by using the 'hasOwnProperty()' method. I add the prefix 'my' to the name of these member functions

• Add 'toString' function to your classes

  consider adding a toString() function to your classes (objects):

  you can add a 'toString()' member function to your classes to show the values of their instances nicely. For example:

  myClass.prototype.toString =
      function() { return '(' + this.a + ', ' + this.i + ')'; }

  If the instances are in an array, JavaScript will show each instance nicely in a list.

  This is useful when debugging, in alert messages and writing trace output

• Arrays faster than creating class objects

  creating new instances of class objects may take time, so sometimes I just use an array with maybe several different datatypes. For example:

  phrases[3] = [ 1, "hello world" ];

• Functions as variables

  functions are variables:

  functions can be assigned to variables, for example:

  function f() { alert('hi'); }
  var r = f;

  You can also say:

  var r = function () { }

  If you have put a reference to a function in a variable, you can call the function by simply adding brackets (e.g. '()') after the variable name, for example: 'r();'.

  But, if you put a reference to an object method in a variable, then when you call the method by adding brackets after the variable, the method will not have the 'this' variable available.

  Of cource, you can also use 'call()' and 'apply()' to call functions.

  Saying 'var f = new Function()' is thought to be slower than saying 'var f = function () { };'

• Functions inside functions

  you can have functions inside functions:

  But, in an object method, inner functions do not have the 'this' variable available to them. 'this' refers to the object. To get around this, I set a variable 'that' to be 'this' in the outer function, i.e. 'var that = this', and use 'that' in the inner function instead.

• Using prototypes for inheritance

  JavaScript uses prototypes for inheritance.

  It is really about getting JavaScript to look for variables in other classes. There are other languages that use prototypes. There are some good explanations on the web.

  I have not used inheritance much with JavaScript. Prototypes are not easy to understand. Also the extra lookups for variables it involves is the sort of thing that might slow JavaScript down.

  I did use prototypes where I had different sets of program options based on a normal set of options:

  var normal = {};
  var n = normal;
  
  function Quiet() {}
  Quiet.prototype = normal;
  var quiet = new Quiet();
  var q = quiet;
  
  n.joins = 50;
  
  n.leaves = 30;
  q.leaves = 15;

  Here, at runtime, if the interpreter cannot find a 'quiet' option in the set of 'quiet' settings, it looks for a value in the 'normal' settings. So, the value of 'q.joins' is 50. I have read that the 'new' operator as used here was only added to JavaScript to please people used to normal inheritance.

  Before I came across prototypes, I used the 'superclass' property of objects. Browsers seem to support it. It is like normal inheritance and much easier but goes against the spirit of JavaScript.

• Closures

  JavaScript has closures. A closure is a function within another function that can hold onto variables it can see after the outer function has finished. It is best to read about this on the web

• Time when closures keep values of variable

  a function inside another function, used as a closure, keeps the values of variables in the outer function at the time that the outer function exits

  I hoped the closure would keep the values each time I stored a reference to the closure.

  For example:

  function of()
  {
      var x = 1;
      function inf() { alert(x); }
      var ret = inf;
      x = 2;
      return ret;
  }
  var r = of();
  r();

  results in an alert box showing '2'

• Closures keep variable values across function calls

  to get a variable that keeps its value across different calls to a function, you can use a closure rather than a global variable

  For example:

  var f = function()
      {
          var v;
       
          function c()
          {
          }
       
          return c;
      }();

• Good explanation of closures on 'stackoverflow'

  there is a good explanation of closures on Stack Overflow

• Everything waits until a function finishes

  you do not need to do much locking.

  JavaScript will ignore your mouse clicks, and code starting after a timeout, until your current functions finish. I do sometimes use locks to hold onto control during pauses and animations.

  Conveniently, the sequence of testing a value and setting a value is therefore always atomic.

  I read that the designer of JavaScript did not like the complications of multi-threaded programming.

  Read more about this on the web

• Most things stop for an 'alert' box

  when you make JavaScript show an alert box, your JavaScript program completely stops. All threads of execution freeze

• My locking only works because JavaScript is single-threaded

  locking is a bit complicated if the computer can switch between processes at any instruction

  My locking only really works because JavaScript is single threaded

• Single-threaded model works well with asynchronous API's

  JavaScript runs your code until it is complete. This works well with asynchronous API's

• Function arguments not passed in are 'undefined'

  if you do not supply all the arguments to a function, they are just set to 'undefined'

  So you can test if optional arguments are given by seeing if they are not 'undefined' rather than checking 'arguments.length'

• Call functions with 'apply' and 'call'

  you can give varying arguments to a function with the built-in functions 'apply()' and 'call()'. For example:

  myFunction.apply(this, arrayOfArguments);
  
  myFunction.call(this, parameter1, parameter2);

  The first argument is the 'context': an object in which you would like to look up variables in

• Use an object for function parameters

  if you have many optional parameters to a function, you can make them properties of an object and pass the object through to the function instead. For example:

  params = { player : 1, number : 45 };
  myFunction(params);

  However, I find it sometimes simpler to pass a long list of parameters, with a 'null' value for any optional parameters that are not used.

• No named parameters

  JavaScript does not have named parameters like:

  'myFunction( number => 45, player => 1 );'

• Passing function arguments to another function

  if you want to pass the arguments of the current function to another function you can say:

  otherFunction.apply(this, arguments);

  where 'arguments' is the built in array of function arguments;

• Use closure with 'setTimeout'

  it is probably neater and quicker to use a reference to a function as the first parameter of setTimeout().

  Otherwise you have to pass a JavaScript statement as a string and therefore convert all parameters to strings. This makes it difficult to pass objects (which are references) as parameters to a function. Also the JavaScript interpreter has less idea what is in the statement string as opposed to a function reference.

  Internet Explorer does not let you pass pass parameters at the end of setTimeout but you can if you use a closure to do this. For example:

  function btmp(param)
  {
      var localVar;
           
      function callNext()
      // a closure - holds onto local variables after 
      // outer function has finished
      {
          nextFunc(param, localVar);
      }
           
      ...
      setTimeout(callNext, 5000);
      ...
  }

• Passing parameters to functions without parameters

  you can pass parameters to functions that do not take parameters. For example:

  func() { }
  func(1, 'a', 7);

  You can get at the parameters with the 'arguments' object. You can also pass more paramters to a function than it needs

Originally JavaScript interpreters seem to have done little optimisation. Of course, they do not have much time to do this and obviously the code has not been compiled and therefore optimised beforehand. I tried out some tips I found in books and on the Internet with varying results:

• Put values of globals into local variables

  using local variables to store the values of global variables when you use them repeatedly.

  This seems good style but I did not notice any difference in performance. And how far do you go? Should I put constant values defined globally at the top of the program back down in the code itself?

  A related tip is to put the results of some DOM functions into local variables as referring to them repeatedly apparently re-executes them in case the DOM has changed

• Use decrement operator in 'while' loop

  using 'while(i--) {}' when possible, combining the decrement and test.

  I found that if this form was not obvious to use then it took too much time to think about and interrupted my flow of writing code

• Put constants outside 'for' loops

  moving constants outside loops and repeated functions.

  For example, try not to code something obviously bad like:

  var a = [1,2,3];
  for (var i = 0; i < a.length; i++) { }

  as the length is evaluated each time through the loop

• Check once for browser features

  checking just once for features that vary between browsers.

  For example, finding where you click the mouse by using either 'event.target' or 'event.srcElement'

• Avoid function calls in loops with many iterations

  not having too many sub-functions if they are small, to avoid the overhead of the function call, like compilers 'inline' code.

  similarly, avoiding function calls within a loop that repeats many times

• Shorten variable names and remove whitespce

  removing spaces and comments, and shortening names.

  I use 'tr -s' to reduce multiple spaces to one space (mainly indentation), and a little perl to remove comments. Just doing this reduces the size of the page by about half and the page loads much quicker. I leave in newlines as this makes it easier to find bugs.

  Some programmers use short variable and function names. I use sed and simple perl to shorten mine. I make use of my own coding style, for example I always indent global definitions by eight spaces. The program did not seem much quicker, but the size of the page is about 25% smaller.

  I wrote my own scripts rather than using one of the 'minimizing' utilities generally available because I did not completely trust them. Also writing the scripts gave me something to do whilst I was testing my game. I also use my scripts to completely remove some debugging code.

The following ways of coding may also slightly speed up the parsing of you code:

• Say 'window.alert'

  it may be a little quicker to say 'window.alert()' rathen than just 'alert()'

• Put semicolons after statements

  it is easy to forget to put semicolons after statements as newlines will often do the job.

  However the JavaScript interpreter may parse the code quicker if you put semicolons in

• Expressions across lines

  if you code something like:

  msg = x +
        y;

  rather than:

  msg = x
        + y;

  then it may help the JavaScript interpreter to parse your code faster as newlines can end statements

• Define variable and functions above where they are used

  variables and functions do not have to be defined in the code above where they are used. But JavaScript may parse your code quicker if they are defined above.

  Of course, variables have to be defined before they are used as the program runs

• Split string rather than use 'replace'

  instead of using the 'replace' function with a regular expression, I can sometimes just concatenate the parts of the string with the replacements

• Faster if larger code

  trying to write faster if larger code works well for me

• Using scripts to replace constants

  my 'mimimising' scripts replace some variables that are constants with their values

  I mark variable that are constants with a comment after the definition of the variable.

  I use 'Perl' to generate 'sed' scripts which are a bit slow

• Removing whitespce in stylesheets

  my 'mimimising' scripts put stylesheets all on one line and remove most spaces in the CSS

  Some CSS needs spaces, for example: 'border: 1px solid red'

• Harder to replace constant expressions

  it seems much harder to replace 'constant expressions' with their values rather than replacing just constants

• Miminising prototype definitions

  you can 'minimise' many statements like: 'obj.prototype.f = {}' by saying 's = obj.prototype' and 's.f = {}'

• Minimising array 'arguments'

  you can 'minimise' the 'arguments' array by saying 'var a = arguments' and using 'a[1]' etc

  This is a bit slower as a variable is declared.

  I also say 'var _ = this'

• Mininimising use of 'undefined'

  you can 'minimise' the use of 'undefined' by declaring 'var u' and using 'u' instead of 'undefined'

• Use common functions

  a good way to 'minimise' your code is to have lots of common functions

  Unfortunately, I tend to copy and paste code

• Use results of assignment

  you can shorten 'a = 1; b = 1' to 'a = b = 1'

• Shorten typeof undefined test

  you can shorten 'typeof e === "undefined"' to 'e === undefined' if the variable 'e' exists

• WebKit 'just in Time' compiler

  I read that 'WebKit' has a 'Just in Time' compiler that optimises the JavaScript code

• My function with short name for 'setTimeout'

  I have common functions with short names for 'setTimeout' and 'alert'

• '(v === true)' to '(v)'

  I changed 'if (v === true)' to 'if(v)', and 'if (v === false)' to 'if (!v)' if possible

• Variables '$' and '$$' used by libraries

  the variable names '$' and '$$' are used by common libraries but '$a' to '$z' are not

  You can shorten variable names to names like '$a'

• My 'getElementById' wrapper

  my common 'getElementById' caches a reference to the document:

  var $_ = function()
           {
               var d = document;
    
               function gebi(element)
               {
                   return d.getElementById(element);
               }
    
               return gebi;
           }();

• Replacing 'true' with '1'

  you can reduce the size of the code by replacing 'true' and 'false' with '1' and '0'

• Warnings from Google's Closure Compiler

  the online 'Google Closure Compiler' with the 'advanced' option gives lots of warnings when I add functions to the prototype of Array, String etc

  I also get warnings when I use properties that are not listed in the constructor of their object.

  I also get warnings if I do not have a JSDoc '@constructor' comment above my constructors

• Quote properties to stop being renamed by Google's Closure Compiler

  with the online 'Google Closure Compiler' with the 'advanced' option, you need to quote properties that you do not want renamed

  For example: o['p'] or { 'p' : 3 }. The latter allow you to use reserved words

  Another example is where I had 'document.formName.radioGroupName[radioIndex]'

• Google's Closure Compiler can't optimise 'RegExp'

  the online 'Google Closure Compiler' with the 'advanced' option says it cannot optimise regular expressions where I use the global 'RegExp' object

  I use 'RegExp' to get parts of a match in the '$1', '$2' properties

  So I use the 'match' function instead and the parts from the elements of the returned array

• Pretty print output of Google's Closure Compiler

  the 'Google Closure Compiler' has an option to 'pretty print' its output which makes debugging easier

• Online Google Closure Compiler

  I use the online 'Google Closure Compiler' at: 'closure-compiler.appspot.com', but you can run the Java program

  The online compiler is no longer available in 2025.

• Changes made by the Google Closure Compiler

  the 'Google Closure Compiler' replaces 'undefined' with 'void 0'

  'void' evaluates an expression and returns 'undefined'. You used to be able to give 'undefined' a different value as it was a global variable.

  The 'Closure Compiler' also:

  1. replaces 'true' with '!0' and 'false' with '!1'

  2. replaces 'if' statements with '&&' and '||' and '? :'. For example, 'if (t) { f(); g(); }' becomes 't && (f(), g())'

  3. uses the comma operator to combine statements often in the conditions of a 'for(;;)' loop, or ending with a condition

  4. combines assignments to be like 'a = b = c = !1'

  5. changes 'if (v > 3)' to 'if (3 < v)'

  6. replaces 'while (true)' with 'for(;;)'

  7. changes 'var a = 3; var b;' with 'var a = 3, b;'

  8. replaces an early 'return' from a function with a conditional expressed with the '? :' operator or an 'if' statement

  9. may inline functions that are inside another function. The 'advanced' option also inlines separate functions

  10. changes 'if (a == 0 || a == 2) { f(); }' to 'a != 0 && a != 2 || f();'

  11. changes 'if (a) { f(); } if (b) { f(); }' to 'if (a || b) { f(); }'

  12. changes '10000' to '1E4'

  13. changes ['Jean','Joan', ... 'Vera'] to 'Jean Joan Vera'.split(' ')

  14. shortens the names of local variables. The 'advanced' option also shortens the names of global variables and properties of objects

  Unfortunately, the 'Closure Compiler' with the 'advanced' option sometimes removes local copies of references to global objects, so I use the 'simple' option

• Google's Compiler reduces the size of my game by a quarter

  the online 'Google Closure Compiler' with the simple option reduces the size of my game by 25 %, and with the advanced option by 35%

  I run the 'Closure Compiler' on the results of my own shortenings

• Google's Closure Compiler makes my game hang

  my game sometimes hangs when minimised with the 'Google Closure Compiler'

  The game hangs when I press a button to show a new screen.

  So I do not use the 'Closure Compiler'

• Google's Closure Compiler give an error with missing array element

  the online 'Google Closure Compiler' with the 'advanced' option set gives an error for '[1,2,]'

• Google's Closure Compiler doesn't shorten HTML and CSS class names

  the 'Google Closure Compiler' does not shorten HTML 'id' and CSS 'class' names

• Modified JSMin

  I modified 'JSMin' to leave in newlines and not add a blank line at the start

  My browser just gives the line number when there is an error

• Perl version of 'packer' doesn't shorten names of local variables

  the Perl version of the 'packer' minifier does not shorten local variables as the online version does

• Buggy shortening of variables names with 'packer'

  the author of the 'packer' minifier says the option to shorten variables may be a bit buggy

• Use keys to copy and paste into 'packer'

  I use keys to copy and paste when I give a large script to the 'packer' minifier

• Too large for Google's online Closure Compiler

  the 'online Google Closure Compiler' gives an error when I try to compile the JavaScript from my game which is about 0.7 megabtyes

• Google recommends 'simple' option of Closure Compiler

  people seem to recommend using the 'simple optimizations' of the 'Google Closure Compiler' which shortens local variable names and shortens function parameters

• 'packer' reduces size of my game by 17%

  the 'packer' minifier, with the 'shorten local variables' option, reduces the size of my (already minimised) game by 17%

• Replace array.push and Math.min and Math.max

  it may be quicker to say 'a[a.length] = v' rather than 'a.push(v)' where 'a' is an array

  Also it may be quicker to write the code yourself rather than use 'Math.min' and 'Math.max'

• UglifyJS reduces size of my game by 22%

  the 'UglifyJS' minifier reduces the size of my game by 22% over and above my own minifying

  the 'packer' minifier, with the 'shorten local variables' option, reduces the same code by 17%

• UglifyJS makes my game faster

  the 'UglifyJS' minifier seems to make my game run faster

  'UglifyJS' rewrites the code, making much use of the 'comma' operator to combine statements

  'UglifyJS' reduces the size of the JavaScript in my game by 27% over and above my own minifying

• UglifyJS replaces '\u00A0' with control code

  the 'UglifyJS' minifier seems to maybe change a '\u00A0' code into the actual control code

• UglifyJS does not shorten globals

  the 'UglifyJS' minifier does not shorten the names of global variables

  You are not meant to use globals.

  So I put the whole script in a self-executing anonymous function.

  I had a problem where I passed a string, containing a call to a function, to 'setTimeout'. The JavaScript interpreter looked for a global function. I now pass a reference to a closure (an inner function) to 'setTimeout'

• UglifyJS turns 'true' into '!0'

  the 'UglifyJS' minifier turns 'true' to '!0', 'false' to '!1' and 'undefined' to 'void 0'

I found 'JSHint', the static code analyser, to be very useful. It is more flexible than 'JSLint' on which it is based. As an example, 'JSLint' stops when it comes to places where I declare variables inside 'for' loops, for example: 'for (var i = 0; i < 3; i++)'. 'JSHint' pointed out that:

• JSHint shows statements without a semicolon at end

  I had forgotten to end many statements with a semicolon.

  In particular I had used the form 'obj.prototype.func = (){}' but missed off the semicolon at the end

• JSHint shows undeclared variables

  I had sometimes forgotten to declare variables as local variables with a 'var', leaving them to be global variables which might be slower to look up

• JSHint shows variable re-declared

  I had defined variables more than once in functions with multiple 'var' statements

• JSHint shows variables declared after use

  I had declared some classes (objects) and variables below where they were used in the source file.

  Sometimes I had something like:

  function func() {
      function subFunc() { i = 3; }
      var i;
  }

  where it might be slightly better to declare the variable 'i' at the start of the outer function

• JSHint shows up '==' and '!='

  I still occasionally used '==' and '!=' rather than '===' and '!=='.

  The former may convert its arguments to a different type leading to subtle errors

• JSHint shows expressions badly broken across lines

  I had sometimes coded something like:

  var msg = 'hello' +
             + 'world

• JSHint wants 'hasOwnProperty' with 'for in'

  it expects you to restrict the results of 'for in' statements by using the 'hasOwnProperty()' method.

  I was just worried about my extensions to the built-in 'Array' type being returned with the values of associative arrays and so just checked to see if the values had the 'function' type

• JSHint shows where falling through 'switch' statements

  it did not like me sometimes letting code 'fall through' 'case' statement in 'switch' blocks

• JSHint wants 'default' at end of 'switch'

  it warned me when I put the 'default' statement of a 'switch' block in the middle of other 'case' statements

• JSHint warnings about variables declared in 'if'

  it would say I was using a variable 'out of scope' when I declared it in an 'if' block and later used it in a similar 'if' block

/*jshint maxerr: 500 */

/*jshint maxerr:1000, funcscope:true, laxcomma:true, forin:false, 
 noempty:false, elision:true, nonstandard:true, laxbreak:true, 
 strict:false , browser:true, devel:true */

• JavaScript uses garbage collection

  the memory a JavaScript variable uses does not always seem to be freed immediately when the variable is not longer used

  this may be because JavaScript uses garbage collection

• my browser 'thrashes' when out of memory

  when my browser's JavaScript interpreter is out of memory, it cannot seem to start up the garbage collector to free memory that is no longer used

  then my Linux system 'thrashes', spending almost all its time swapping processes from memory to disk and back

• Internet Explorer 'hangs' when out of memory

  when it runs out of memory, Internet Explorer seems to just 'hang' and Windows® says 'the application is not responding'

  this happens when there are too many JavaScript variables or too many HTML elements on the page

• my browser creates unseen parts of page

  my browser seems to create all the parts of a page even though you need to scroll down to see them

  my browser appears to run out of memory because of all the off-screen parts

• Use === and !==

  I like to be precise and use '===' and '!==' to test equality as then the types have to be the same. I had a nasty bug with values being implicitly converted to true or false

• 'splice' removes array element

  you can remove an element from an array with splice. For example:

  array.splice(index, 1); // remove item at index

  usually the built-in array functions on arrays return a new array

• arr.length = 0 clears array

  you can clear out an array by saying:

  array.length = 0

• Associative arrays are like objects

  associative arrays are like objects and vice versa:

  arrays with indexes that are not numbers are like objects and do not support all the Array object's functionality. For example, associative arrays do not have a 'length' and you cannot get the nth element by saying 'assocArray[n]'. You can go through the elements of an associative array with the 'for in' statement:

  for (var key in assocArray) {
      value = assocArray[key];
  }

  You can get the value in an object using array notation. For example:

  var n = 'name';
  var value = object[n];

  is the same as:

  var value = object.name

  And so:

  assocArray['key']

  can be written as

  'assocArray.key'

  Maybe this is all because the JavaScript interpreter stores arrays and objects as hashes

• new Object

  you can use JavaScript's internal 'Object' class directly rather than using associative arrays at all.

  For example:

  var o   = new Object();
  var o2  = {};
   
  o[123]  = 3;
  o2[456] = 4;

• Numeric arrays are stored in a hash

  I have read that numeric arrays are stored by key like a hash rather than as a series of values and can naturally be sparse

• Arrays of arrays

  you can have arrays of arrays like multi-dimensional arrays.

  For example:

  var a = [];
  var aa = a['k'] = [];
  aa.push(3);
  alert(a['k'][0]); // shows '3'

• 'push' takes multiple parameters

  you can pass multiple parameters to the array 'push', 'unshift' and 'concat' functions

• Use objects or prototypes for scripts

  some people like to put all of their script into an object.

  One reason is that it avoids name classes with libraries.

  For example:

  var myscript = {
      get : function () { },
      put : function () { },
      ary : [ 1, 2, 3]
  }

  I find it easier to create classes (objects) and add member functions to their prototoypes and then create an instance of a class at the start (with 'new'). For example:

  function Game() { this.v = 3; }
  Game.prototype.set = function() { }
  var game = new Game();

• Self-executing anonymous functions

  something like this can be a bit puzzling at first:

  ( function() { alert('hi'); } )();

  it just defines an anonymous function and runs it.

• Classes

  you can have class variables and functions (sort of), like:

  function myClass () {}
  
  myClass.v = 3;
  alert(myClass.v);
  myClass.f = function () { alert('hi'); }
  myClass.f();

• I use 'on'event' handlers

  I find it easier to use the traditional on'event' handlers like 'onclick' as in:

  HTMLElement.onclick = clickfunction;

  They work on the most browsers. Events 'bubble up' when you use the traditional event handlers.

  Some browsers prefer to 'capture' events from the outside in. Read more about this on the web

• Miss events when move mouse fast

  if you quickly move the mouse, JavaScript may only fire events on the page element the mouse settles on and may miss events on elements the mouse passes over

• Right clicks

  you can capture right clicks.

  You can read about this on the web.

  I use an element's 'onmousedown' handler where I check if the 'event.button' attribute has a value of 2

  I stop the normal right-click context menu appearing by calling 'event.preventDefault()' on my Konqueror browser. However, on Internet Explorer I have to set up a 'oncontextmenu' handler to return false.

  I do not know what happens if your mouse has just one button

• Avoid 'computed' values

  I avoid getting 'computed' values of style values of HTML elements, as this can be a bit slow, differs between browsers and may not work at all in particular browsers

• Use 'try catch' to continue from errors

  I use 'try catch' exception handling blocks to continue when JavaScript finds an error as a script runs.

  An example is when you try to read 'event.target' when there is no current event and the 'event' object has the value 'undefined'

  You cannot catch errors which the JavaScript interpreter finds when it first loads a script, such as simple syntax errors.

  The scope of a 'catch try' block ends when you pause with the 'setTimeout()' function.

  I had a bug which I could not replicate so I put the likely bits of code in 'try catch' blocks

• 'onchange' event may not fire

  the 'onchange' action on a HTML text input element may not always fire.

  For example, on my browser if you move the mouse away and hide the input element before clicking elsewhere the 'onchange' action may not fire

  My crude solution is to add a 'onmouseout' action which calls the 'onchange' code and have this code check to see if the input element's value has changed by storing the old value

• I avoid libraries

  JavaScript libraries such as 'prototype.js' take a few seconds to load on my old PC.

  I learnt a lot by coding things myself. Writing animations yourself is fun as you can see the results right away

• Put script at end of 'body'

  the page displays quicker if you put your script at the end of the HTML 'body'.

  However, I put the 'noscript' message in the document header so it appears first in a text browser

• Look at page with a text browser

  it really is a good idea to look at your page in a text browser like 'lynx'

• Numbers are floating point

  I understand that all numbers are stored as floating point numbers in JavaScript and that there is no integer type

• Bit operators are slow

  I have read that the bit manipulation operators in JavaScript can be slow.

  This may be because the floating point numbers have to be converted to integers and then converted back

• No error from divide by zero

  dividing a number by zero gives the value 'Number.POSITIVE_INFINITY' and does not cause an error

• NaN

  if you pass a string to the functions 'parseInt()' or 'parseFloat()' that does not represent a number, the functions return a number value that converts to a string as 'NaN'. This does not raise an error.

  You do not seem to be able to compare the return value to 'Number.NaN', maybe because one NaN may not be the same as another. You can use the built-in function 'isNaN()' to do this

  One way to test if a variable is 'NaN' is to test if 'x != x'

• 'parseInt' takes second 'base' parameter

  the function 'parseInt()' really takes a second parameter - the 'radix' or number base, e.g. 10 or 16

  The 'toString()' function on a number also takes a number base as a parameter

• Round with 'toFixed'

  you can round a number with the 'num.toFixed(precision)' function

• Evaluating expression a || b || c

  the expression 'a || b || c' evaluates to the first of 'a' then 'b' and then 'c', which is not an empty string (', ""), 0, null, false or 'undefined'

• No brackets for 'typeof'

  you do not need to put brackets around the arguments to the 'typeof' and 'instanceof' operators.

  It is really 'typeof v' not 'typeof(v)'

• 'const' does not work in all browsers

  the 'const' keyword does not work in all browsers.

  I understand that it is not in the current JavaScript standard. It may have originated in the early Netscape browsers and may continue in current Mozilla-based browsers. It is not easy, and may be impossible, to make sure a variable does not change its value

• 'for (var i=0,j=0;' is 2 variable declarations

  I think saying 'for (var i = 0, j = 0; i < 3; i++) {}' creates a variable ''j''.

  I believe JavaScript does not see the comma between the ''i'' and ''j'' as the comma operator but as part of a long 'var' definition. I understand the comman operator is almost bottom in the order of precedence of operators.

  I get confused because in the 'C' language if you say 'for (i = 0, j = 0; i < 3; i++) {}', then 'i = 0' and 'j = 0' are like two statements

• 'getDate'

  you use the 'getDate()' function to get the day of the month from a JavaScript date

• Missing array element like '[1,,3]'

  if you miss out an element in a list of array elements, e.g. 'a = [1,,3]', then you get an element with a value of 'undefined'

• Quicker to parse '/* */' comments

  I read somewhere that it may be quicker for the JavaScript interpreter to parse C style '/* */' comments rather than C++ '//' ones!

  However, you can just strip out all the comments when you 'minimise' your code using utilities that remove spaces, shorten variable names and more

• Do not use same name for global and local variables

  it really is a bad idea to use the same name for a global variable as for a local variable inside a function.

  It makes it more difficult to write a simple 'minimizing' script.

  I also had trouble when using the same variable name in an inner-function as the enclosing function

• Shortening built-in function names

  you can shorten built-in function names like this:

  Array.prototype.p = Array.prototype.push

  I do not change the source code but make the changes in my 'minimising' scripts.

• Cannot extend HTML objects with Internet Explorer

  on Internet Explorer (version 8.0), if you add a function to the prototype of 'Object' then you can not use the function on the 'document' object, but you can on the 'Math' object

  On my browser it works on both.

  I have read that Internet Explorer (IE) does not allow you to extend HTML elements through their 'prototype'. I understand that IE generally handles HTML elements a little differently to objects of the JavaScript language

• 'Math.f = Math.floor'

  saying:

  Math.f = Math.floor

  acts the same as:

  Math.prototype.f = Math.prototype.floor

  Both see the 'this' instance variables

• Errors from minimising with missing semicolons

  if you forget to end statements with semicolons and rely on newlines then you will get syntax errors if your 'minimising' utility combines lines

• Do not use 'caller' property

  I have read that it is best not to use the 'caller' property of functions

  Using it makes it difficult for JavaScript to optimise your code by 'inlining' the functions.

  I put the name of the function in a variable at the top of most functions and use this for debugging. I pass this through as a parameter when calling some functions. I remove most of these variable in my 'minimising' scripts

  You can find out other ways to help the optimiser by reading about the new 'strict mode' for JavaScript

• Use typeof objectProperty === 'undefined'

  some programmers say that it is better to use:

  typeof objectProperty === 'undefined'

  rather than:

   objectProperty === undefined

  because:

  • you can confusingly create a variable called 'undefined', or give a value to JavaScript's 'undefined' variable

  • you can use the first version with simple JavaScript variables that are not set

  Also notice that:

  null == undefined

  is true, as JavaScript treats a null value quite like an undefined one

• Hoisting variables

  if you declare a variable in the middle of a function, JavaScript actually declares the variable at the start of the function

  For example:

  alert(v === undefined);
  
  if (false) {
      var v = 3;
  }
  
  alert(x);

  alerts 'true' and then 'reference error'.

  Some call this 'hoisting'

• Scalar parameters as references in objects

  you can pass scalar parameters by reference to a function by putting them inside an object. For example:

  var obj = {};
  
  function func(param) { param.v = 3; }
  
  obj.v = 5;
  
  alert(obj.v); // gives 5
  func(obj);
  alert(obj.v); // gives 3

• Add properties to numeric arrays

  you can add properties to numeric arrays. For example:

  var a = [1,2,4];
  a.count = a.length;
  alert(a[2] + ', ' + a.count);

• 'concat' array

  to append an array to another array you can say:

  array = array.concat(anotherArray)

  sometimes I mistakenly just write:

  array.concat(anotherArray)

• Use numeric codes

  I try to use numeric codes rather than string values

  Before I did this, I used tests like "aim === 'house'"

• Inheritance with prototypes is quicker

  it may be quicker to use 'protoypes' to do inheritance rather than copying the properties as some libraries do

• No response when click a button

  sometimes my browser does not respond when I click on an HTML button and the browser is busy

  At first, I thought it was a problem with my game, but there may be a problem with my browser or my windowing system

• Array 'push' returns length

  the 'push' method of arrays returns the length of the array

  I had a problem when I thought 'push' returned the array

• Array is an object

  the 'typeof' of an array is 'object'

  I thought it might be 'array'

• Assignment is an expression

  an assignment is an expression

  You can say:

  i = j = 3;

• Set expiry date to delete cookie

  to delete a cookie, I set the expiry date to the first second of 1st Jan 1970

  Unix timestamps start at 1970.

  Setting the expiry date to a a few days ago might not delete the cookie if the user has set the time wrong

• See page load errors on Internet Explorer

  with Internet Explorer, if the page does not load because there are errors in the JavaScript, then you can find out more by double-clicking the warning icon in the left corner of the status bar of the browser

• Delete all array elements

  you can delete all the elements of an array with 'arr.splice(0, arr.length)'

• Array 'push' returns length

  you can get the new length of the array from the return value of 'push()'

• Check if key in array

  you can test if an array has a value with a given key with 'if (key in arr)'

• Convert to string

  you can convert something to a string with 'String(something)'

• Dojo uses new Array

  part of the Dojo code uses 'new Array()'. People seem to recommend using '[]'

  The Dojo code also uses the 'with' statement and puts 'var' declarations in 'for' loops (e.g. 'for (var i = 0; i < l; i++)'. People recommend against using these too

• Convert numbers to bases

  you can convert numbers to different bases by giving the base as a parameter of 'toString()'

• Return value of 'splice'

  you can use the return values of 'splice()' to get a range of elements from an array

• 'getElementById' return null for invalid element

  the function 'document.getElementById' returns 'null' if the 'id' does not refer to a HTMLelement

• Loop labels

  you can label loops and use 'break' and 'continue' with labels to jump out of nested loops

• No error if delete bad object property

  you do not get an error if you 'delete' a property of an object and the property does not exist

• Dojo has 2 letter variable names

  the Dojo code has some variable names that are just 2 letters. This does make the code smaller

  My minimising scripts use about 6 characters when they shorten my long variable names. In the future, I will use more variable names that are single letters

• Error if delete button property in IE

  Internet Explorer 6 and 7 give an error if I delete a property I added to a button

• 'cloneNode' doesn't copy events listeners

  the 'cloneNode' function does not copy event listeners such as 'onclick'

• 'cloneNode' is fast

  the 'cloneNode' function seems surprisingly fast

• 'getElementsByTagName' works on any element

  you can use 'getElementsByTagName' on any HTML element

  'getElementById' only works on the 'document' node

• getBoundingClientRect

  a quick way to get the position on the screen of a HTML element is to use the 'getBoundingClientRect' function. This works on Internet Explorer and the latest Firefox browsers

• Disable stylesheet

  you can turn off a stylesheet with something like:

  document.styleSheets[2].disabled = true

• User agent 'Opera/9.8' for Opera/10

  the Opera browser, after version 10, has a 'user agent' string that says 'Opera/9.8'

  The developers of Opera thought that 'Opera/10' might be confused with 'Opera/1'.

  Opera 15 uses the 'Webkit' render. Previously Opera used its own 'Presto' renderer

• Missing semicolon error

  if you shorten:

  o.prototype.f = function() { }
  var x

  to:

  o.prototype.f = function() { }var x

  you get an error without a semicolon before the 'var'

• 'char' is reserved word

  I used 'char' as the name of a variable but 'char' used to be a reserved word

  The 'Google Closure Compiler' pointed this out. Browsers do not give an error. The reserved words used to include: 'int', 'long', 'float' and 'double'. ECMAScript Edition 5 has much fewer reserved words than ECMAScript Edition 3

• global variables are properties of 'window'

  there is a 'global' 'this' variable, which refers to the 'window' object

  For example:

  function t() {}
  this.t();

  Also 'global' functions like 'parseInt' seem to be properties of the 'window' object

• Keys of associative array are strings

  the keys of an associative array seem to be converted to strings

• 'mousedown' enables 'click' event

  if the 'mousedown' event changes the part of the page that is under the cursor, then a following 'click' event will fire on the new part of the page under the cursor

• KHTML CSS attribute name in JavaScript

  the browser-specific CSS attribute '-khtml-border-radius' becomes 'KhtmlBorderRadius' when used in JavaScript

• Hard to identify 'Safari' from UA string

  it seems hard to identify the Safari browser as both the words 'Safari' and 'AppleWebKit' appear in the 'userAgent' string of other 'WebKit' browsers like Chrome

• Delay after change CSS rule

  when I dynamically change a CSS rule on my old browser, the browser takes a few seconds to redraw the page

• Changing CSS rule with JavaScript

  changing a CSS rule with JavaScript was simpler than I thought

  For example,

  if (document.styleSheets[0].cssRules) {
      crossrule=document.styleSheets[0].cssRules;
  } else if (document.styleSheets[0].rules) {
      crossrule=document.styleSheets[0].rules;
  } 
    
  firstRule = crossrule[0];
  firstRule.style.color = 'red';

  changes the first rule of the first stylesheet

  My game changes over 25 CSS rules

• 'mouseover' fires on iPad and iPhone

  on the iPad and iPhone, it seems that when you touch the screen, the 'onmouseover' event is fired

  I read that the CSS ':hover' event also fires

• 'innerHTML' changes values inside

  if you set the 'innerHTML' value of a page element, then the values change of any elements inside the 'innerHTML', even if you just say "innerHTML += 'x'"

• IE error if 'input' 'type' is 'number'

  Internet Explorer 8 gives an error if you set the 'type' of an 'input' element to 'number' to get a 'spinner'

  The 'Modernizr' library does this

• 'alert' shows 'href' of link

  if you use 'alert' to show the value of a link, then the alert shows the value of the 'href' attribute

• No number spinner in IE

  if you try to get a 'spinner' in Internet Explorer 10 by setting an input element's 'type' to 'number', then the type is set but no 'spinner' appears just the normal text box

• Test for tablets

  the test for mobile phones on the 'detectmobilebrowser.com' website does not include tablets. The 'about' section of the website says how to test for tablets

• Test for mobile phones

  the test for mobile phones on the 'detectmobilebrowser.com' website is essentially:

  (function(a,b)
  {
      if(
         /(android|bb\d+|meego).+mobile
           |avantgo|bada\/|blackberry| ... |phone)|xda|xiino/i
             .test(a)
         ||
         /1207|6310|6590| ...  |your|zeto|zte\-/i
             .test(a.substr(0,4))
   
      ) window.location=b
  }
  )
  (navigator.userAgent||navigator.vendor||window.opera,
   'http://detectmobilebrowser.com/mobile');

  This is an anonymous function with two tests on the 'userAgent'. If the tests succeed then the address in the browser is changed to a website

• Apple window.Touch

  Apple touch screen devices have a 'window.Touch' object

• CSS media queries in JavaScript

  you can use the results of CSS 'media queries' in JavaScript like this:

  <style type="text/css">
      @media touch-enabled, -webkit-touch-enabled, -moz-touch-enabled,
             -o-touch-enabled), -ms-touch-enabled
      {
          #touchTest { top:9px; position: absolute }
      }
  </style>
  
  <script type="text/javascript">
        testdiv = document.createElement('div'),
        testdiv.id = 'touchTest';
  
        document.body.appendChild(testdiv);
  
        touchMediaRuleHasEffect = testdiv.offsetTop === 9;
  
        document.body.removeChild(testdiv);
  </script>

• 'catch(e)' on my browser

  my browser gives a parse error if you say:

  try { } catch() { }

  rather than:

  try { } catch(e) { }

  You do not need to declare 'e' as a local variable

• Test for touch

  the test for touch in the 'Modernizr' library seems to say that the Chrome browser on Windows 7 and Internet Explorer 9 support touch

• Threads bugs

  what seems to be bugs with my browser may be bugs with the 'threads' library the browser uses

  I have had other problems with 'threads'. I built my Linux system from the source files.

  The bugs with my browser seem to be where global variables are shared by different 'threads' started by 'setTimeout()'

• Right-click on touch-screens

  it seems you cannot replace the normal right-click menu on phones and tablets with your own

  On touch-screen devices it seems a right-click is a 'long press' or a 'double tap' (pressing with two fingers at once)

• CSS rules with many selectors from JavaScript on IE

  on Internet Explorer 8, when you access CSS rules from Javascript, rules with many 'selectors' appear as many individual rules, e.g. '#a, #b { color : blue }'

• 'createTextNode' versus 'innerHTML'

  with 'createTextNode' you do not need to turn '<' into '<' and '>' into '>' as you do if you set 'innerHTML'

• Cannot rotate orientation of iPad

  I cannot rotate the orientation of the iPad

  An article on the web says to set 'document.body.orient' to 'portrait' or 'landscape' but this does not seem to work

• Don't use 'window.open'

  I read that it is best not to use 'window.open' as this may confuse users or be blocked by the browser

• 3000 'div' elements

  I have an animation that creates 3000 'div' elements

• Clicking either side of table caption

  clicking either side of the 'caption' of a table seems to be like clicking on the table

• window.Touch

  if 'window.Touch' was defined it used to mean you had an iPhone or iPad but now Chrome defines it

• Page width and height includes scrollbars

  on my browser, it sometimes seems the page width and height include any scrollbars

• Setting CSS attribute to invalid value

  it seems that if you set a CSS attribute to an invalid value then the old value is still there

  Internet Explorer 8 gives an error which you can trap with a 'try catch' statement

• 'clip' CSS attribute on IE8

  I remove the 'clip' CSS attribute on Internet Explorer 8 by setting the attribute to 'inherit'

  On Internet Explorer 8, setting the 'clip' attribute to an empty string gives an error. Setting the attribute to 'auto' seems to set the clipping to the width and height of the element. This also happens on my Konqueror browser. But, I want to move parts of the element outside of it by giving the parts a 'relative' position.

  Using 'removeAttribute' does not seem to have any effect. Setting the 'right' and 'bottom' 'clip' parameters to high values does not work, sometimes leaving a blank screen

• IE reference to span in array bug

  I have a problem with Internet Explorer 8 where I create a span which holds other bits of HTML. I put a reference to the span in an array. I then append the span to the page. I clear the element which contains the span by setting 'innerHTML' to ''. Now the reference to the array does not point to anything

• Do not put 'getElementById' in common function

  I do not put 'getElementById' in a function with a short name like 'prototype.js' does with '$'

  I think calling a function is slower

  I put a reference to 'document' in a local variable when there are lots of calls to 'getElementById'

• Hiding mail address

  I hide a mail address by having the letters as numbers in the parameters to the 'String.fromCharCode' function

• 'cssFloat' for 'float' in JavaScript

  to set the CSS attribute 'float' from JavasSript, you may need to set the 'cssFloat' attribute or 'styleFloat' attribute (on Internet Explorer)

  'float' may be a reserved word in JavaScript

• Old browser crashes changing style rule

  my browser crashes when the attribute of a CSS rule is changed from JavaScript

  The rule applies to about 100 HTML elements. My browser crashes after the rule has been changed a few times

• Check for 'MozTransform' not '-moz-transform'

  you check for 'MozTransform' not '-moz-transform' 'in' the 'style' object of an HTML element

  Also it is 'msTransform'.

  On Chrome, '-webkit-transform' works

• Checking if browser supports CSS attribute value

  the way to test if the browser supports a value of a CSS attribute is to first see if the 'style' object of an HTML element has the attribute and then see if when you set the value then the value is there afterwards

• Style object only has specific properties

  on my browser, you can test if 'KhtmlBorderRadius' or '-khtml-border-radius' are 'in' the 'style' object of an HTML element, but the 'style' object only has the more specific properties like 'border-top-right-radius'

• IE debugger slow to load source

  the debugger with Internet Explorer 8 takes a few minutes to load a large script of 3.5 megabytes

• Value of invalid number is empty string

  the 'value' of a 'number' input field is the empty string when the field has an invalid value

  Maybe the browser does not want to store an invalid value

• IE says invalid number field is valid

  on Internet Explorer 11, the 'valid' property of the 'validity' object is 'true' for a 'number' field with a value like 'k9'

  On Chrome and Firefox the 'valid' property is 'false'

• Browsers store out-of-range values in number field

  the browser will store values in a 'number' field where the value is outside the 'min', 'max' and 'step' attributes of the field

  The 'validity' object of the field has 'rangeUnderflow', 'rangeOverflow' and 'stepMismatch' properties for these

• 'true = false' works?

  the following code works on Internet Explorer and Safari on Macs but not Chrome or Firefox (both on Windows) as of July 2014:

  if (isIPad) {
      true = false;
  }

  I have read that the 'V8' JavaScipt engine in Chrome turns the Javascript code into machine code

• Script check for missing semi-colons

  I check for missing semi-colons, at the end of function definitions set by adding to the prototype of an object, using my editor 'vi' with a pattern search '^        }$'

  I do this before releasing a new version

• Use objects not associative arrays

  Google's style guide says not to use associative arrays, but to use objects

• Page not updated when change 'span'

  I had a bug where a change to one of the 'span' elements in a 'div' was not reflected on the screen

  This was on my old Konqueror browser and Internet Explorer 8.

  I solved this by putting the 'span' in its own 'div'

• Copying 'arguments' object

  I tried to copy the 'arguments' object with: '[].concat(arguments)' but I got just one element - the 'arguments' object

  Instead you can say 'Array.prototype.slice.call(arguments)' or '[].slice.call(arguments)'. This may stop some optimisations with the V8 JavaScript engine of Chrome.

  If the argument to the 'concat()' method of the 'Array' object is not a true array but an array-like object such as 'arguments' then 'concat()' adds its argument as a single element.

  The 'call' syntax makes 'arguments' the object on which the 'slice()' is made, so 'arguments' is the 'this' object for 'slice'.

  The 'slice()' method of arrays is often used to make a copy of an array.

  You can change the elements of 'arguments' which may change the value of the function parameters

• Declare variable in 'for in'

  if you say 'for (prop in obj)' then you need to declare 'prop' as a local variable otherwise 'prop' will be a global variable

• Local variable same name as function parameter

  if you give a local variable the same name as a parameter to the function then the variable and parameter seem to be the same thing

• No click if page moves

  sometimes I click on a button, but the JavaScript moves the screen up before the JavaScript pauses and takes the click, so the button is not pressed

  This is with my old Konqueror browser on Linux

• Hard to save cookies on Chrome running locally

  with Chrome, it is difficult to save cookies when running an HTML page locally rather than on a website

• No 'Web Storage' if running locally

  'Web Storage' does not work on Chrome if the page is local, like cookies

• Hard to set 'focus' on mobile Safari

  on mobile Safari, it is hard to set 'focus' on an 'input' element except from a user's tap

• Javascript error at end of script

  if I miss off the '}' in an 'if' statement then I get an error at the end of the script

• Hide title if set to ''

  if you set the title of an HTML element to '' (an empty string) then if the tip is showing then the tip is hidden, but not on Internet Explorer 8

• 'filter' property not keep value

  on Interner Explorer 10 and 11 and most other browsers, there is a 'filter' property on the style object of an HTML element, but the element does not retain the value of the 'filter' property if the property is set

• Check if CSS property supported

  to check to see if a CSS attribute is support by a browser, see if the attribute is defined and then set a valid value and see if the attribute retains the value

• 'createTextNode' rather than 'innerHTML'

  you can have tags like '<b>' in text if you use 'createTextNode()' rather than setting the 'innerHTML'

• 'cloneNode' of page is slow

  my animation that uses 'cloneNode' to make copies of most of the page is slow on an iPad but fine on a Galaxy Tab running Android

• Get text of 'span' with 'firstChild.data'

  you can get the text in a 'span' with 'firstChild.data' This does not turn '>' into '>' as using 'innerHTML' does

• 'clearTimeout' not work on IE

  with Internet Explorer 8, 'clearTimeout' did not seem to work when I moved away from the browser window

• Table border not in 'offsetLeft

  on Chrome, the border of a table does not seem to be included in the 'offsetLeft' of a table cell

  On Internet Explorer 11, the border is included.

• 'getBoundingClientRect'

  one way to get the position of an element is by using the function 'getBoundingClientRect' on modern browsers

• Suprising 'offsetParent'

  the 'offsetParent' of an HTML element may not be the parent of the element

  For example, the 'offsetParent' of a table cell is the table not the row

• Mark element with dummy CSS class

  you can mark an element in the HTML by adding a dummy rule name to the 'class' attribute of the HTML

  If you add a dummy attribute to the HTML element in the HTML then the attribute does not seem to show up in the JavaScript unless you use the 'getAttribute()' function

  Adding your own attributes to the HTML may make the HTML invalid

• Borders of table rows

  borders within table rows are not part of the rows

  For example, an 'onmouseover' event on the row does not fire when the mouse is over the borders between cells

• 'false || undefined'

  the expression 'false || undefined' gives 'undefined' not false

• Code for arrays is smaller than objects

  I use arrays rather than objects as the code is smaller: there are no names of properties and no constructors

• Choosing cursive fonts

  a good article on the web suggests the following for a cursive font:

  font-family: 'Lucida Handwriting', 'Monotype Corsiva', Zapfino,
               'URW Chancery L', 'Courier New', Courier, monospace;

  This avoids using 'Comic Sans MS' and has fonts for Windows, Mac and Linux

• Chain 'replace'

  you can chain several 'replace()' functions together like:

  r = s.replace(/a/g, 'x').replace(/b/g, 'y');

• Add '+' to convert string to number

  you can convert a string to a number by adding a unary plus sign like:

  n = +s;

• Automatic semicolon insertion

  sometimes JavaScript will insert a semicolon into valid code

  In the example below a semicolon is inserted after the 'return' statement so the function returns 'undefined'

  function btmp()
  {
      return
          3;
  }

  A semicolon may not be actually be added but the JavaScript interpreter will parse the code that way.

  The rule is there so that a 'return' can be terminated by a newline and the following line can be a fresh expression.

  Also there cannot be a newline between an expression and the postfix operators '++' and '--', between a 'break' or 'continue' statement and a following label, and between a 'throw' and its exception

• Optional name for closure

  you do not need to name a closure if you just return it like:

  function btmp()
  {
      return function () { return 3; }
  }

  However the name may be useful for debuggers

• Global variable is in 'window' object

  a global variable 'g' appears as 'this.g' globally and 'window.g'

  The 'this' object is the enclosing function or global environment

• Immediately Invoked Function Expression

  the following is called an 'Immediately Invoked Function Expression' an 'IIFE', or 'iffy':

  (function() { alert('iife'); })();

• Add 'toString' to your objects

  you can add 'toString()' and 'valueOf()' functions to simple objects like:

  o = { toString: function() { return 'toStr'; },
        valueOf: function() { return 3; } };

• The expression '!!v'

  the expression '!!v' turns 'v' into a 'true' or 'false' value

• Handle optional arguments with '||'

  you can handle optional arguments to a function by saying:

  o = a || 'default'

  rather than:

  a === undefined ? 'default' : a"

  if the empty string and 'null' are to be changed to a default value

• Checking for missing function parameters

  with optional arguments to be a function, if you check whether the value of an argument is 'undefined' rather than checking the length of the arguments then you also handle the case where the argument is given as 'undefined'

• ';;;' is a valid statement

  ';;;' is valid code - it is just three empty statements

• Minimum delay for 'setTimeout'

  there may be a minimum delay of 4 milliseconds for the 'setTimeout()' function when calls to this function are nested The minimum delay may be longer due to the operating system taking time to change threads or processes

• JavaScript design pattern book

  a good book about design patterns with JavaScript is 'Learning JavaScript Design Patterns' by Addy Osmani

  You can read it for free

• Example of 'module' pattern

  an example of the 'Module' pattern is:

  var Module = (function () {
   
      var _privateArray = [];
   
      var _privateMethod = function () {
      };
   
      var publicMethod = function (e) {
          _privateMethod();
          _privateArray.push(e);
      };
   
      return {
          publicMethod : publicMethod
      }
   
  })();

  The 'Module' pattern lets you have private methods and variables. The functions inside the module are closures

  I adapted this example from a good article

• Example of 'observer' pattern

  an example of the 'Observer' pattern is:

  var Observable = function() {
      this.subscribers = [];
  }
   
  Observable.prototype = {
      subscribe: function(callback) {
          this.subscribers.push(callback);
      },
      unsubscribe: function(callback) {
          var i, len = this.subscribers.length;
    
          for (i = 0; i < len; i++) {
              if (this.subscribers[i] === callback) {
                  this.subscribers.splice(i, 1);
                  return;
              }
          }
      },
      publish: function(data) {
          var i, len = this.subscribers.length;
    
          for (i = 0; i < len; i++) {
              this.subscribers[i](data);
          }
      }
  };
    
  var Observer = function (data) {
      alert(data);
  }
   
  var observable = new Observable();
  observable.subscribe(Observer);
  observable.publish('hi');

  I took this example from an article on the web

• Example of 'publish and subscribe' pattern

  a simple example of the 'Publish and Subscribe' pattern is:

  var EventBus = {
      topics: {},
   
      subscribe: function(topic, listener) {
          if(!this.topics[topic]) this.topics[topic] = [];
          this.topics[topic].push(listener);
      },
   
      publish: function(topic, data) {
          var topicListeners = this.topics[topic];
          if (!topicListeners) return;
          var countTopicListeners = topicListeners.length;
          if (countTopicListeners < 1) return;
          var i;
          var listener;
          for (i = 0; i < countTopicListeners; i++) {
              listener = topicListeners[i];
              listener(data || {});
          }
      }
  };
  EventBus.subscribe('foo', alert);
  EventBus.publish('foo', 'Hello World!');

  I adapted this example from an article on the web

• Free JavaScript patterns book

  I found a free copy of 'JavaScript Patterns' by Stoyan Sefanov on the web

  But it is now gone

• Naming convention for globals

  I would put a 'g' at the start of the names of my globals If I was starting again

• Array 'push' returns length

  the 'push' method of arrays returns the new length of the array

• Expression 'x >>> 0'

  the expression 'x >>> 0' gives 'x' or zero if 'x' is undefined

• IndexedDB data can be saved locally

  it seems that with 'IndexedDB' you can save data locally with Chrome when running an HTML page locally rather than on a website

  It seems you cannot save data with Chrome with cookies or 'Web Storage' when running an HTML page locally

• See IndexedDB in Chrome 'developer tools'

  you can see the contents of 'IndexedDB' databases on Chrome under the 'Resources' option of the 'Developer tools'

  To get to the 'Developer tools' click on the three bars in the top right and choose 'More tools'

• Use 'complete' event with IndexedDB

  with 'IndexedDB', 'to determine if a transaction has completed successfully, listen to the transaction's complete event rather than the success event of a particular request, because the transaction may still fail after the success event fires'

  This is from the Recommendation of the 'W3C'.

  Requests have 'success' events whereas transactions have 'complete' events

• IndexedDB error objects

  'IndexedDB' error objects have 'name' and 'message' properties

• IE does not support IndexedDB locally

  Internet Explorer 11 does not support 'IndexedDB' if the webpage is accessed through the 'file://' protocol

  Apparently Edge does support this

• Example of storing data with IndexedDB

  Here is a simple example of storing data with 'IndexedDB':

  var dbName = 'britishbingo';
  var dbVersion = 1;
  var storeName = 'settings';
  var keyName = 'cookie';
   
  var myIndexedDB = window.indexedDB || window.webkitIndexedDB ||
                    window.mozIndexedDB; 
   
  if (myIndexedDB) {
      alert('support idxdb');
  } else {
      alert('not support idxdb');
  }
   
  function createStore(db)
  {
      if(!db.objectStoreNames.contains(storeName)) {
          db.createObjectStore(storeName, { keyPath : 'name' });
      } else {
          alert('database already contains store: ' + storeName);
      }
  }
   
  function alertEventError(prefix, event) {
      var eventTargetError = event.target.error;
      alert(prefix + ': ' + eventTargetError.name + ': ' + 
                            eventTargetError.message);
  }
   
  var openRequest = myIndexedDB.open(dbName, dbVersion);
   
  openRequest.onsuccess = function(event) {
   
      try {
   
   
          var db = event.target.result;
   
          var trans = db.transaction( [ storeName ], 'readwrite');
          var store = trans.objectStore(storeName);
          var putRequest = store.put({ name : keyName, value : 'opt:val'});
          putRequest.onsuccess = function() {
              alert('store: success');
          }
          putRequest.onerror = function(event) {
              alertEventError('store err', event);
          };
   
      } catch(e) {
          alert('openRequest.onsuccess: excep: ' + e); 
      }
  };
   
  openRequest.onupgradeneeded = function(event) {
   
      try {
   
          var db = event.target.result;
          createStore(db);
   
      } catch(e) {
          alert('openRequest.onupgradeneeded: excep: ' + e); 
      }
  };
   
  openRequest.onerror = function(event) {
      alertEventError('open err', event);
  };

• Example of getting data from IndexedDB

  Here is a simple example of getting data from 'IndexedDB':

  var myIndexedDB = window.indexedDB || window.webkitIndexedDB ||
                    window.mozIndexedDB; 
  
  if (myIndexedDB) {
      alert('support idxdb');
  } else {
      alert('not support idxdb');
  }
   
  var dbName = 'britishbingo';
  var storeName = 'settings';
  var keyName = 'cookie';
   
  function alertEventError(prefix, event) {
      var eventTargetError = event.target.error;
      alert(prefix + ': ' + eventTargetError.name + ': ' + 
                            eventTargetError.message);
  }
   
  var openRequest = myIndexedDB.open(dbName);
   
  openRequest.onsuccess = function(event) {
   
      try {
   
          alert('openRequest.onsuccess: start');
   
          var db = event.target.result;
   
          var trans = db.transaction( [ storeName ], 'readonly');
          var store = trans.objectStore(storeName);
          var getRequest = store.get(keyName);
          getRequest.onsuccess = function(event) {
              alert('data is ' + event.target.result.value);
          };             
          getRequest.onerror = function(event) {
              alertEventError('get err', event);
          };
   
      } catch(e) {
          alert('openRequest.onsuccess: excep: ' + e);
      }
  };
   
  openRequest.onerror = function(event) {
      alertEventError('open err', event);
  };

• References to objects are 'true'

  references to objects are treated as 'true' in boolean expressions

  I thought a reference with an address of zero might be 'false'

• Book: JavaScript The Definitive Guide

  It is worth reading 'JavaScript The Definitive Guide' by David Flanagan. But it is not an easy read

  It may be best if you know most of it already.

  It is more of a reference guide.

  There are free copies in PDF format available on the web, although these may be pirated. I borrowed it from my local library.

• Checking if the size of text-area has changed

  the 'resize' event does not fire on 'text-areas'

  You can use 'mouseup' and check if the size has changed.

  On Firefox, you can double-click to return the 'text-area' to its original size. I use 'setTimeout' with a small delay on the 'dblclick' event to check if the size of the 'text-area' has changed

• 'delete' of IndexedDB not work

  I could not get the 'delete' method of an IndexedDB database to work

  It seems to abort the transaction

• 'open' of IndexedDB hangs

  the 'open' method an an IndexedDB database may sometimes hang after the 'deleteDatabase' method

• IndexedDB in Chrome 'Developer tools'

  with Chrome, the values for an IndexedDB database shown in the 'Resources' option of the 'Developer tools' settings do not update immediately

• Bad to use 'for in' with array

  some say it is bad practice to use a 'for in' loop with an array

  It may be slow going up the prototype chain.

  You will get back any objects that you have added to the prototype of 'Array'.

  The array elements may not come out in order

• Defining functions as variables

  some people always define functions as variables

  For example: 'var f = function(){}'.

  This emphasises that functions are just another object.

  Also this avoids functions being 'hoisted' to the top of the script.

• Remove the styling from button

  if you style a button and remove the style by setting the 'border' to '' then the button does not go back to the default '3D' style.

  The button now has a simpler '2D' look.

  To get around this, add or remove a CSS class. Put the styling in the CSS class

• Advantage of 'innerHTML' for help text

  if you use 'innerHTML' to set help text then you can have tags to set color, set italic and include lists with bullets

• Graphs made with HTML

  graphs render surprisingly quickly when drawn just with HTML

  Tool tips are easier and the graphs show on old bowsers

• Cannot use object references as keys in hash

  you cannot really use references to objects as the keys of a hash

  JavaScript stores the same string representation for all objects

• Passing number by reference to a function

  you can pass a number by reference to a function by putting the number in an object

  For example: 'n = { value : 3 }; f(n)'

• 'atan2' better than 'atan'

  the 'atan2' function may be better than 'atan'

  You give 'atan2' values for 'y' and 'x' separately, so 'atan2' can return a larger range of angles

  There is a good explanation on 'stackoverflow.com'

• Edge's user agent string

  the 'user agent' string used by Edge looks much like Chrome's but with 'Edge' at the end

• File API best with 'input' of type 'file'

  the 'File API' is mainly used to manipulate files selected by the user with an 'input' HTML element of type 'file'

  You cannot read (or write) any file

• Styling a 'file' 'input' field

  it is hard to style an 'input' field of type 'file'

  One way is to hide the field and click an associated 'label' which activates the field. You can style the 'label' making it look like a button.

  I use a button with an 'onclick' event that fires 'click' on the 'file' input field.

  Use an 'onchange' event on the 'file' input field to copy the file name to a visible area.

  You cannot set the value of a 'file' input field

• Using 'window.location' to check if online

  I use 'window.location' to tell if my game is being played online

  'window.location' starts with 'file://' if offline versus 'http://' or 'https://' if online.

  Internet Explorer adds 'file://' if you just start the address with a drive letter such as 'D:'

• I could not hide an 'option' tag in a 'select' tag by setting 'display' to 'none'

  I had to remove the 'option' tag

• Tip on 'canvas'

  when I drew a pie chart with 'canvas', I spent a lot of time on the tip that appears when the mouse hovers over each segment of the pie

  The browser just tells me the position of the cursor on the whole 'canvas'

• Using 'isNan' to test for a number

  you can use 'isNan' to test if the whole of a string is a decimal number

  'parseFloat' just checks if the first part of a string is a number.

  You can also say '+s' and you will get 'NaN' if the whole of the string 's' is not a decimal number

• Getting a random number in a range

  to get a random number between 1 and 10 you can write:

  Math.ceil(Math.Random() * 10)

  I was writing:

  Math.floor(Math.Random() * 10) + 1

• Common function to get random number in range

  I wish I had written a common function to get a random number in a range

• Removing outline from link

  one way to remove the outline that the browser adds to a link when you click on the link, is to call the 'blur' function of the link in a 'click' event handler

• Regular expression bug with number and %

  I had a bug with a regular expression to match a number followed by a percent symbol:

  /\b\d+(\.\d+)?(%)?\b/g with $&

  The '%' was not included in the match. It seems the last word boundary '\b' matches the '%'.

  I used this regular expression instead:

  /\b(\d+(\.\d+)?(%)?)(\W|$)/g with $1 and $4

  Note that I now capture the last word boundary as it is included in the match '(\W|$)' unlike '\b'. I am using the regular expression with 'replace'

• 'setTimeout' not accurate

  'setTimeout' is not accurate to the nearest milliseond

  'setTimeout' may have to wait for the browser and operating system to do other things

• Reserved words as keys of array

  I had a bug where I stored the score in an array keyed by the name of the user. If the user gives a name of 'length' then my code fails on the line 'scores["length"] = scoreObject'

  If the name of the user is 'pop' then the line 'scores.pop()' will fail.

  I should use an object not an array but I get the same problem

• Variable values in closure

  I called a function that was within a function, when the 'transitionend' event fired. The inner function acted as a closure 'holding onto' the variables of the outer function. But the event sees the 'values' the variables had when the outer function finished, but not when the event was set up

• Dynamically creating 'keyframes'

  you can dynamically create 'keyframes' for CSS animations

  Create a 'style' HTML element, attach it to the 'head' element, and set the content of the 'style' with 'innerHTML'

• Hex shorter than Unicode

  you can write the character '\\u00A0' as the shorter '\\xa0'

• Browsers may not include invalid CSS rules

  browsers may not include CSS rules they do not recognise in the array of rules in the DOM

  I found some browser-specific rules to style sliders were not included

• CSS transitions run despite 'alert'

  with Chrome, an 'alert' box stops a CSS animation, but lets a CSS transition continue

• No CSS transition when element first shown

  If you show an HTML element and then immediately apply a CSS transition, then the transition may not show

  You may need to force the browser to repaint the element. I query a property like 'offsetWidth' and have a short timeout

• When removing styling on sliders in Firefox

  with sliders on Firefox, when I remove my styling, the slider is a bit small

  I fix this by hiding the slider for a short time, then showing the slider, making it be repainted

• Safari will not do a 360 degree turn

  Safari and Internet Explorer will not do a 360 degree turn with 'rotate3d'. Chrome does

  The maths in the specification mean it should not work.

  You can use a '2D' rotate instead.

  Alternatively, I used 4 'divs' within each other, each rotated 90 degrees after a delay with 'rotate3d'.

  You can say '1turn' rather than '360deg'

• One letter variable for 'this'

  if I am using the 'this' variable a lot in a function then I assign 'this' to a one letter variable and use that

  This helps with minifying the code.

  I do the same with the 'arguments' variable

• Dynamic HTML not difficult

  dynamic HTML is not as difficult as it looks.

  I got away with only using these functions: childNodes(), hasChildNodes(), firstChild(), lastChild(), nextSibling(), previousSibling(), createElement() createTextNode(), appendChild(), insertBefore(), replaceChild() and removeChild()

• Faster to create a text element than 'innerHTML'

  it is more precise and maybe faster to create a text element and append it rather than setting 'innerHTML' to a string: for example:

  textElement = document.createTextNode('hello');
  element.appendChild(textElement);

  You can set an element's innerHTML to a much wider variety of tags and text

• Do not keep on appending to 'innerHTML'

  it is better to build up a string in a local variable and then assign it to a DOM element. Don't code something like this:

  element.innerHTML += 'value: ';
  element.innerHTML += i;
  element.innerHTML += ', ';
  element.innerHTML += j;

• Indenting HTML adds text elements

  remember that neatly indenting your HTML adds text elements which can get in the way when your are going through the document tree. You might like to squash up the HTML

• 'input' elements do need to be in a 'form'

  'input' HTML elements do not have to be in a 'form' element

• Create 'input' elements dynamically

  with text input HTML elements, you can avoid being asked whether you want to commit your changes by creating the elements dynamically

• 'input' elements do not inherit font size

  you have to change HTML 'input' elements font-sizes on the input elements themselves - they will not change with any of their container's font-sizes

• Radios and checkboxes do not change size on old browser

  on my browser, Linux KDE's Konqueror, the radio buttons and checkboxs do not change size at all

• Old browser adds space around 'input' boxes

  my browser, Konqueror, adds on a certain amount of space around text input boxes regardless of my CSS settings. Internet Explorer does not do this

• Decimal not hex for color values

  I use decimal color values in 'rgb(red, green, blue)' format rather than hexadecimal ones.

  I usually have to think about what hexadecimals values are. I have not had any problems doing this with Internet Explorer or Konqueror

• Manual transparency

  you can of course do transparency yourself - just take a (weighted) average of the red, green and blue values separately.

  Older browsers such as Internet Explorer 6 may not support an 'opacity' setting, particularly if set dynamically

• Use JavaScript variables not DOM properties

  getting information from the DOM may be slower than storing it in JavaScript variables.

  For example, remembering whether or not an HTML element is shown, with its style display set to be 'block'.

  I am not sure if adding your own properties to HTML elements is better or not than storing them in global variables

• Use 'ems' or percent sizes

  if you size HTML elements in 'ems' or percents it is easy to do shrink and expand animations by just changing the overall container's font-size. I seldom set sizes in pixels.

• Look at 'innerHTML' if debugging

  if you are changing the page dynamically, you can look at a containing block's 'innerHTML' to see what is happening

• Remember page scrolling if absolute position

  remember that the user can scroll through the page

  When you position a HTML element absolutely, add the amount scrolled. I use the value of 'window.pageYOffset' and where this not defined (such as on Internet Explorer) I use the property 'document.body.scrollTop'

• JavaScript won't redraw until script finishes

  JavaScript won't redraw the screen until the script finishes or you pause with setTimeout() or setInterval()

• JavaScript animations are slow

  you cannot do really slick and fast animations with simple JavaScript and dynamic HTML without the browser becoming unresponsive or maybe missing out steps.

  You need to pause, maybe for longer than 50 milliseconds, to let the browser handle your mouse clicks and refresh the screen.

  I had to pause for more than half a second when repeatedly shrinking the page in an animation by changing the font-size of a top-level 'div' element.

  You could try using the 'canvas' element, but I am not sure if Internet Explorer supports it

• Outlines

  it is best not to try to stop the browser putting outlines around links, button and form input elements when they have the focus.

  After all, it is an accessibility feature to show where you are when, for example, you are using keys rather than the mouse.

  Anyway, when I tried I could not completely get rid of the outlines. For example, moving around with the tab key between elements in a form would cause the browser to start showing outlines

• htmlFor

  to set the 'for' property of a HTML 'label' in JavaScript, you set the 'htmlFor' property.

  Otherwise JavaScript confuses this with the 'for' loop keyword.

  My browser lets you use 'for' in the 'setAttribute()' function for this but Internet Explorer does not

• IE bug with 'display: none'

  in one case with Internet Explorer (v8.0), setting the style property 'display' to 'none' on a 'div' HTML element does not hide the 'div'.

  To get round this, I remove the 'div' from its parent.

  The parent had a 'relative' position. The 'div' was offset with 'top' and 'left' style settings. The 'div' was put behind its parent with a 'z-index' value

• 'resize' event on 'window' fires often

  the 'onresize' event of the 'window' object fires more often than just when you resize the browser window

  For example, the event fires when scrollbars appear when the page is too big

• window 'resize' event not fire when change text size from menu

  the 'window.onresize' event may not fire when you change the text size using the menus of the browser

  I check every few seconds to see if the size of an element on the page has changed using 'setTimeout'.

  I have read on the web that you can also use 'custom events' to do this

• 'float' container of 'float'

  If a container is not set to 'float' when its items are set to 'float' then the container will not have much 'offsetWidth' or 'offsetHeight'

• Item selected with 'select' list in IE

  with a 'select' list and Internet Explorer 8, if you refresh the page, then the selected option is not the option with the 'selected' attribute, but is the last option selected before refreshing

  So, I set the 'selected' attribute with JavaScript

• Comment closing tags

  put a comment after closing tags that are far away from the opening tags

  For example: '</div> <!-- page -->'

• Put caption of image in HTML

  it is best to put the caption of an image in the HTML and not in the image itself

  If the caption is in the image then the file size of the image may be larger

• 'date' attribute of 'time' tag removed

  the 'pubdate' attribute of the 'HTML5'time' element was removed from the specification

• Outliner in W3C HTML validator

  the W3C HTML 'validator' has an option to show an HTML5 outliner

  The validator can also show the hierarchy of headings

• No backslashes in URL

  you cannot have backslashes in a 'file' URL

• 'className' for 'class' in JavaScript

  in JavaScript you set an HTML element's 'className' not 'class' to add the element to a CSS stylesheet class.

  Also remember that you set the 'className' on the HTML element and not in the elements 'style' object

• Add CSS class rather than set properties

  when you want to set many style attributes of an element at once I have read that it is quicker to put them in a class and add it to an element rather than individually setting the attributes on the element's style object.

  Actually my browser does not redraw the screen each time a style attribute is changed.

  You can, of course, use the built-in string function 'replace()' to remove the class later

• Set 'display: none' not "innerHTML = ''"

  it is best to hide elements by setting their style.display = 'none' rather than just setting their innerHTML = '' as Internet Explorer seems to sometimes still leave a space for them.

• CSS value not set is ''

  a CSS style attribute that is not set has a value of '', an empty string. To get rid of one of your style settings, set it to ''

  Properties of HTML elements like 'class' and 'title' have values of the empty string ('') if not set

• Float container of floated elements

  you need to float the container of floated HTML elements for it to actually visually contain them on the screen

  Another way around this is to set the 'overflow' CSS attribute of the container to 'auto'.

  Another way around this is to add a '<br>' tag as the last element in the container and maybe give the '<br>' tag a style of 'clear: both'

• Give width for floated elements

  floated HTML elements can be squashed up if you do not specify a width

• Old browser's float bug

  if you have 3 'div' HTML elements (''a'', ''b'', and ''c'') one after the other and all styled as 'float: left' then if ''b'' has 'clear: left' then on my old Konqueror 4.3 browser they appear as:

  a
  b c

  whilst on Internet Explorer (IE), they appear as:

  a c
  b

  I can get IE to look like my browser by putting ''b'' and ''c'' in a new 'float'ed 'div' and moving the 'clear: left' onto it

• Position 'relative' and 'absolute'

  you can position a HTML element absolutely in relation to its container if you set the container display style to be 'relative'

• Not all symbols supported on IE

  not all the symbols in the list of HTML entities are supported in everyone's browser

  I found that the mathematical symbol of a cross in a circle does not work on a friend's Internet Explorer. The copyright symbol works fine though

• Light colors are white

  light colors appear as white on some computers

• Access keys

  I set 'accessKey' values on some links and input buttons so that a user can press keys rather than the mouse.

  On Internet Explorer you press the 'Alt' key together with the access key to click a button. For a link this gives it the focus and you can press the 'Return' key to follow the link. On my browser you press the 'Ctrl' key followed by an access key.

  Access keys can be letters or numbers.

  I had to change some elements to be links so I could give them access keys. This means an outline can appear.

  I have read that access keys are less popular now as the key combinations can conflict with shortcuts used by screen readers.

  If you use letters for access keys then they will override the keyboard shortcuts used by Internet Explorer. For example, 'Alt + F' will no longer select the 'File' menu. On my browser you have to focus somewhere on the page before you can use an access key, so this is less of a problem.

  I have read that there is an informal standard for common access keys.

  On Internet Explorer you may need to show the access key combinations in labels, list them all, or somehow underline their letters in the labels. On my browser when you press the 'Ctrl' key it shows all available access keys.

• Squash 'spans' together

  I have to squash up the HTML when I give each letter of a word a different color.

  If I put each letter in a separate 'span' tag, the browser seems to add spaces between the letters unless I put the 'span' tags right next to each other in the HTML on one line with no spacing. Unfortunately the HTML is then difficult to read

• Validate HTML and CSS regularly

  check your HTML and CSS regularly with the 'W3C' 'validators'.

  Don't leave it until you are finished like I did!

• Spacing bugs

  I had a problem where the HTML,

  'hello,
      world'

  is rendered as

  'hello,world'

  with no spaces ater the comma.

  This happens in both Internet Explorer and my browser.

  I fixed the problem by adding a space after the comma

• Set the character set

  specify the character set of your page with, for example:

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">

• Rainbows

  rainbows look nice. I create them with lots of 'div' elements 'floated' together

• Stop line breaks with  

  you can put ' ' (non-breaking space) between the words in a link to stop the link being split across lines

• Selected option in 'select' is last chosen on IE8

  with a 'select' list and Internet Explorer 8, if you refresh the page, then the selected option is not the option with the 'selected' attribute, but is the last option selected before refreshing

  So, I set the 'selected' attribute with JavaScript

• Minimising HTML removes spaces

  if you 'minimise' your HTML and turn something like:

  '<input>
  <input>'

  into:

  '<input><input>'

  then the browser no longer shows a space between the input boxes

• Hidden radio buttons cause strange layout on IE6

  on Internet Explorer 6, some radio buttons, when hidden with 'display: none', cause other radio buttons below to be strangely laid out

  I fix this by removing and re-creating the first radio buttons when needed

• Width and height of 'td'

  some old browsers do not seem to apply the 'width' and 'height' you set for 'td' elements

• 'title' tip only shown briefly on IE8

  on Internet Explorer 8, the 'title' of HTML elements only shows for a few seconds

  I made the 'title' too long and there was not enough time to read it

• Checking number spinners' values

  number 'spinners' only seem to check your input against the 'min', 'max' and 'step' values of the 'spinner' when you submit a form

• 'height' of 'td'

  the height of a 'td' element in a table does not always seem to be the height you set

• Number spinner not supported by old Firefox

  at first, Firefox did not seem to support 'number' input fields and their spinboxes (as of January 2014)

• Short 'titles'

  a usability expert suggests 'title' attributes should not be more than 80 characters

  Also titles on links should mention the name of the website, and say if the link will open in a new tab or window

• Make form 'id' and 'name' attributes the same?

  some people think the 'id' and 'name' attributes of the 'form' HTML element should be the same

• HTML Tidy

  I use 'HTML Tidy' to find problems

  I use an online version where you can copy and paste or upload the code.

  'HTML Tidy' told me I had an unmatched 'div' tag and no 'summary' on tables used for layout

• Link with 'target' opens in new tab

  if you give a link a 'target' attribute then the link may open in a new tab or window

  If you click such a link more than once then the link opens in the same tab or window

• Use '<p>' not '<br>'

  it really is much better to use a '<p>' tag rather than a '<br>' tag

  I got a blank line maybe where my browser wrapped the line just before the '<br>' tag

• Put an 'h2' tag after a 'section' tag

  put a header tag, such as '<h2>', after the HTML5 '<section>' tag

• Finding broken links

  there are tools to find broken or 'dead' links

  I use an online tool

• HTML5 outliner

  I use an outliner to see the hierarchy of my HTML5 'sections'

• Escape '<' and '>'

  I sometimes put '<' and '>' characters in the content of my web page when I should use '&lt;' and '&gt;'

  The browsers do not mind though

• Use 'id' for link fragment

  it seems you should use an 'id' attribute not the 'name' attribute to identify the target of the fragment of a link (e.g. '#section')

• Opening links in new tabs

  some people say you should not open links in new tabs

  They say users lose control, you cannot use the 'back' button, and that some users do not understand tabs.

  Others say you should use new tabs for external links or for information that is not closely related.

  Most people agree that you could use a new tab for help information when filling in a form.

  You can use the 'target' attribute in HTML to open links in new tabs

• Curly quotes

  you should use 'curly' quotes to enclose what people say

  The HTML entities are '&ldquo;' and '&rdquo;'

  Some say you should use numbers rather than names for the entities as old browsers may not know the names. The entities for 'curly' quotes are '&#8220;' and '&#8221;'.

  The HTML entities were not translated when I created a text node. I had to set the 'innerHTML' of the HTML element. This trimmed off trailing spaces

• Ellipsis in HTML and string

  remember to use the HTML entity for ellipsis ('&hellip;' rather than three dots

  There are HTML entities for common fractions and dashes

  I put the unicode value ('\u2026') in a JavaScript string to get an ellipsis in the 'value' attribute of a 'button' input field

• No full path for 'file' 'input'

  an 'input' HTML element of type 'file' does not show the full path of a local file on Chrome and Firefox, for security reasons

  Internet Explorer 11 does show the full path

• Curly quotes on Windows7

  'curly' opening and closing quotes are not curly on Windows7. They are straight, slanting in and out

• HTML minifier

  I tried an HTML minifier I found

  But it missed out a '</section>' tag when I ran the minifier on the these tips.

  The minifier reduces the size of the HTML by about 25%. But squeezing consecutive whitespace to one space reduces the size by 20%. I used the Linux 'tr -s' command.

  Shortening the CSS rule names reduced the size by another 5%. I used 'sed'.

  However, I learnt a lot about HTML from the related article

• 'D' access key used by Windows

  Internet Explorer uses the 'D' access key to go to the address bar

• Uppercase 'i' looks like bar

  I use a lowercase 'i' for the label of an access key as an uppercase 'I' looks like the vertical bar '|'

• Tab goes through fields not displayed

  on my old Konqueror browser, when you 'tab', you go to fields that are not displayed

  To stop this, I set these field to 'disabled'

• Access keys taken by Chrome

  with access keys on Chrome, 'Alt+E' and 'Alt+F' make the Chrome menu appear

  I have to press 'Alt' and 'Shift' and 'E' (or 'F') to get the access key

• Unicode transport symbols and emoticons

  there are symbols in Unicode for transport symbols and emoticons

  The helicopter symbol is not available with Chrome on Windows7.

  The symbols do not scale very well, if you increase the font size. You see steps at the edges not curves for larger sizes

• Id's and classes are quicker in CSS

  I read in a good book, 'Even Faster Web Sites' by Steve Souders, that the Firefox browser evaluates CSS rules from right to left.

  If you have, say, the rule:

  'form a { color: blue; }'

  Firefox checks every anchor to see whether it is in a form.

  The book suggests it is faster to use HTML element id's and classes in CSS rules rather than HTML tag names. Maybe this applies to other browsers

• Don't put '//' comments in CSS

  do not put JavaScript '//' comments in a stylesheet:

  my browser, Konqueror v4.3 with KHTML, does not report an error but sometimes ignores some of the CSS that follows the '//' comment.

  I tend to put '//' comments in the stylesheet when I am mainly writing JavaScript

• Underscores in HTML id's in IE

  Internet Explorer does not seem to recognise HTML element id's that start with an underscore in CSS rules.

  I think the HTML standard may disallow this too.

  I use underscores when shortening names in my 'minimising' script to avoid generating names that are the same as existing names

• No decimal places in 'rgb' color

  you cannot have decimal places in the numbers you use to set the color with an 'rgb(redNum, greenNum, blueNum)' format.

  For example, 'rgb(200.1, 0, 0)' is ignored

• Set to zero by default all margins and padding

  a good book I read suggested setting to zero by default all margins and padding with the following:

  * {
      padding: 0;
      margin: 0;
  }

  This worked well for me

• 'outset' or 'ridge' border

  using a 'border-style' of 'outset' or 'ridge' is a quick way to get a sort of 'shadow'

• Low font size

  Internet Explorer lets you use a 'font-size' as low as '15%'

• Drawing circles

  you can draw a circle or ellipse around a HTML element by using a 'border-radius' of about half the width or height of the element

• Underline links

  I decided to underline a link after reading the book "Don't Make Me Think" about the usability of web sites

• Bug with scrolling grey-out plane

  If you scroll down a greyed-out page created with the CSS 'width: 100%; height: 100%', then the grey scrolls up and away

  None of the fixes I found on the web work for me with Internet Explorer 8

• 'z-index' works for adjacent elements

  'z-index' values seem to work best when the HTML elements are close together in the document tree

• Comment above 'doctype' means 'quirks mode'

  putting comments above the 'document type declaration' makes Internet Explorer go into 'quirks' mode

  In 'quirks mode', Internet Explorer behaves as it did in very old versions. In 'quirks mode' the 'width' and 'height' of a HTML element includes the 'padding'. This is called the 'Internet Explorer box model bug'

  One simple way around this bug is to put the spacing in the 'margin' not the 'padding'

• 'box-sizing' 'border-box'

  setting 'box-sizing' to 'border-box' may fix some layout problems

  Remember to include any padding in the width and height

• Numbers in 'Georgia' font

  the 'Georgia' font on Microsoft Windows® has numbers with different heights

• 'clip' rectangle

  you can only specify a 'clip' rectangle on a HTML element with its 'position' given as 'absolute'

  The clipping seems quick.

  Internet Explorer before version 8 does not have commas between the sizes of the rectangle.

  On my old Konqueror browser, if you have not clipped the enclosing area, then bits of the element outside the clipped rectangle are still shown

  Internet Explorer 8 gives an error if you set the 'clip' property to an empty string with JavaScript. Setting 'clip' to its default of 'auto' does not seem to work in Internet Explorer 6, so I set the 'clip' to "rect('auto', 'auto', 'auto', 'auto')"

• Opacity in 'rgba' colour

  I use the opacity in the 'rgba' colours where setting the 'opacity' of a 'div' did not affect its background color in newer browsers

• Extra padding for buttons

  buttons in newer browsers sometimes look better with extra padding around the words

  The padding I add is:

  Browser	Side ('em')	Top/Bottom ('em')
  Internet Explorer 7 and before	0	0
  Internet Explorer 9 and after	0.5	0.2
  Webkit on MS Windows and Apple Mac	0.7	0.3
  Firefox on MS Windows	0.4	0.2
  Opera (Presto renderer before Webkit)	0.5	0.2
  Other	0.3	0

  Buttons on the Android browser do not seem to need any extra padding. The padding needed on browsers on Linux seems to vary

• Double-tap to see ':hover'

  I believe that if the ':hover' rules changes the layout of the page, then on a touch-screen you may have to tap again ('double-tap') so you can see the change in the layout before it disappears

• Scale up checkboxes and radios

  you can make checkboxes and radio buttons bigger with the 'transform: scale(2,2)' CSS property

  This works on Internet Explorer as far back as version 9.

  This does not seem to work on Chrome on Windows 8.1.

  The bigger checkboxes and radio buttons overwrite nearby elements of the page.

  I find it difficult to know where scaled-up 'text' and 'select' boxes are put, so I increase the font size

• '-khtml-' vendor prefix

  I forgot to include '-khtml-' in the vendor prefixes for CSS attributes

  I read that Webkit recognizes '-khtml-' as well as 'webkit'

• Obvious 'active' state

  I read that it is best to have an obvious 'active' state (maybe a colour) on buttons and links

  On a touch-screen it is not always clear if your press has had an effect

• Unclosed bracket bug

  I had a bug which was hard to find when I forgot to close an open bracket

• Buttons rather than CSS menus

  I am glad I used buttons rather than CSS menus as on touch-screens you may have to tap twice on the menus

• Space after the comma between Microsoft filters

  there needs to be a a space after the comma separating two Microsoft visual filters

  For example:

  filter: progid:DXImageTransform.Microsoft.
      Alpha(opacity=20), progid:DXImageTransform.Microsoft.
      gradient(GradientType=0, startColorstr=#cccccc,
          endColorstr=#000000)

• Bug with Microsoft filter gradient

  in one case, Internet Explorer 8 hangs when there is a gradient generated by a Microsoft visual filter

• Order of rules in stylesheet override order in HTML 'class'

  the last setting in the stylesheet takes precedence regardless of the order in which you specify rules in the HTML 'class' attribute

• Customising buttons on iPad or iPhone

  on an iPad or iPhone, buttons change from round to square if you give a 'linear-gradient'

• Gradients are quick

  the color gradient drawn with 'background: linear-gradient' seems to be generated very quickly

• Text shadow with Microsoft filters

  you can do 'text-shadow' in old versions of Internet Explorer with Microsoft's visual filters

  But the 'Shadow' filter leaves marks on the edges of letters

• Table cells gradient IE bug

  on Internet Explorer 8, if you give cells in a table a gradient with a Microsoft visual filter, then the gradient overwrites the borders of the cells

  To get round this, on the table I set the 'border-collapse' option to 'separate'. Now the 'border' is the spacing between cells, which shows through the background of the table

• Set width to '100%'

  setting the width of an HTML element to '100%' may stop the width of the element being taken from another element

• Shadows rotated with CSS 'transform'

  any box-shadow's are rotated when you rotate an HTML element with a CSS 'transform'

  I change the direction of the shadows to face the right way

• Rotating 'tbody' of table

  if you rotate the 'tbody' of a table then not all browsers show it correctly

• 'transform-origin'

  you can change the centre of the rotation with 'transform-origin'

• iPad page rotation bug

  on the iPad, if I rotate the page below the bottom of the page then there are black rectanges at the bottom right of the screen and the animation stutters (as of May 2014)

• Turning off red border on invalid fields

  you can turn off the red border around 'number' input fields which shows when the content is invalid by saying:

  :invalid {
      box-shadow: none;
  }

  For example, the red shows when a field has the 'required' attribute but has no value.

  I got the red border on Firefox when 'required' was not set and the content was valid

• 'span' overflow for tabs

  if I have a 'span' in a 'div' and I give the 'span' a large 'border-bottom' or 'padding-bottom' then the 'span' overflows below the 'div'

  I use this for my tabbed settings to set the color at the bottom of the tab index to the background color of the tab contents

  With Chrome on Windows, I have to set the 'border-bottom' to '2px'. For other browsers '1px' is enough

• 'dotted' border slower than 'solid'

  having a 'dotted' rather than 'solid' 'border-radius' for 90 balls noticeably slowed down the game

  I have read that 'border-radius' is worse for performance than 'box-shadow' and 'rotate' transforms

• Floated items leads to reflows

  lots of floated items may lead to more reflows of the page

• Rotated text around the 'y' axis disappears

  if you rotate some text around the 'y' axis with 'rotateY' then the text disappears

  The text has no depth

• Rotation around 'z' axis is 2D rotation

  a rotation around the 'z' axis with 'rotateZ' is just a rotation in 2 dimensions

• IE9 only supports 2D rotations

  Internet Explorer 9 seems to support rotations in 2 dimensions with 'rotateZ' but not rotations in 3 dimensions like 'rotateY'

• Set 'perspective' on parent

  to get several elements to share the same 'vanishing point', set the attribute 'perspective' on the parent element

• Can repeat CSS rule in HTML 'class' rule

  you can repeat the name of a CSS rule in the 'class' attribute of an HTML element

  This may simplify the JavaScript code

• Centre text vertically with a table

  you can centre text vertically by putting it in the cell of a table

  To centre horizontally, say 'text-align: center'.

  The cell height is a little bigger than '1em' on my old Konqueror browser even if I say 'line-height: 1' and 'cellspacing="0"' and 'cellpadding="0"'

• Drawing and rotating a cube

  you can draw a cube by: putting the sides in the same place with 'position: absolute', rotating the sides, and pushing the sides out half a width

  Here is the code I adapted from an article on the web:

  .cube {
    perspective: 1000px;
    transform-style: preserve-3d;
  }
  .face {
    position: absolute;
    font-size: 1000%;
    line-height: 1;
  }
  td {
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    border: 1px solid;
    opacity: 0.5;
    line-height: 1;
  }
  .front { transform: rotateY(0deg) translateZ(0.75em); }
  .back { transform: rotateX(180deg) translateZ(0.75em); }
  .right { transform: rotateY(90deg) translateZ(0.75em); }
  .left { transform: rotateY(-90deg) translateZ(0.75em); }
  .top { transform: rotateX(90deg) translateZ(0.75em); }
  .bottom { transform: rotateX(-90deg) translateZ(0.75em); }
  
  .cube { transform: translateZ(-0.75em); }
  ...
  <table class="face front" cellspacing="0" cellpadding="0">
    <tr> <td> f </td> </tr>
  </table>
  <table class="face back" cellspacing="0" cellpadding="0">
    <tr> <td> b </td> </tr>
  </table>
  ...

  When I rotate the cube as a whole, I do the rotation on each side. I got strange results when I did the rotation on the parent element containing the sides. Maybe rotating each side means the transforms have the same origin

  I use a large perspective (between 1750px and 3000px) for my cube

  'transform-style: preserve-3d' cascades 3D attributes like 'perspective' onto child elements, but not on Internet Internet Explorer 11

• Rotating a cube around the 'x' and 'y' axes

  a 'rotateX' 'transform' with a positive angle, rotates a cube vertically up and you see the front face, then the bottom, then the back and then the top

  a 'rotateY' 'transform' with a positive angle, rotates a cube horizontally, left-to-right, anti-clockwise, like in maths, and you see the front face, then the left, then the back and then the right

• Styling progress bar

  with IE11, you can just style the colors of an HTML progress bar and the bar looks very simple. With Firefox, you can just style the inner 'value' bar

  I drew my own progress bar using CSS like 'width: 30%'

• Order of rotations in 'transform' is significant

  setting the 'transform' attribute to 'rotateX(90deg) rotateY(90deg)' gives different results to 'rotateY(90deg) rotateX(90deg)'

  The second rotation acts on the results of the first rotation, like matrices in maths.

  When I rotate a cube, I put the cube rotation first and the faces rotation second

• Turning off 'perspective'

  I turn off 'perspective' by setting the attribute to zero as setting the attribute to the empty string ('') has no effect

• 'backface-visibility' with a cube

  you can use 'backface-visibility: hidden' to draw a solid cube

  This seems to do the 3D hidden line removal

• Cube disappears when rotated on iPad

  if I try to draw and rotate a cube on an iPad then the cube just disappears

• Hard to read small text on iPad

  on an iPad mini, with a font size set to 'smaller' than the default, then I have to look closer to read the words

• Small 'border-radius' looks like steps

  corners with a small 'border-radius' can look like steps

• Darkness of light background colors varies

  light background colours vary their darkness widely among the different computers I use

• Wide table caption

  a wide caption may make a table wider - the caption may not wrap

• Missing semi-colon in CSS means following rule ignored

  I had a bug where a missing semi-colon in the CSS caused the browser to ignore a following setting of the 'background-color' to a 'rgb' value

• 'id' CSS rule overrides 'class' rule

  a CSS rule referenced by the 'id' attribute of an HTML element, overrides a CSS rule referenced by the 'class' attribute of the same HTML element

• Later CSS rule overrides earlier

  a CSS rule later on the page overrides an earlier rule regardless of which order the rules are in within the 'class' attribute of an HTML element

• A little smaller font size is nice

  a font size a little smaller than the default looks nice and is easy to read, except on tablets and phones

• Table shadow over caption

  I have a table with a 'box-shadow' where the shadow is over the caption on Firefox but not Chrome or Internet Explorer 11

  I cannot reproduce this with a simple example

• Using 'border-bottom' for underlining

  I use a 'border-bottom' for underlining rather than 'text-decoration: underline' as the latter puts the line through the bottom of a letter 'g'

  However, I have to add extra space below the line with 'line-height: 150%' to stop the border touching the letters on the next line

• Centering image

  to center an image, say 'display: block', 'margin-left: auto' and 'margin-right: auto'

• 'display: inline-block' gives width

  I used 'display: inline-block' to give a width to an anchor in a 'span'

• Smaller font sizes

  A size of '90%' looks smaller and '70%' looks smaller still on Chrome, Internet Explorer 11 and Firefox on Windows7

• Stray '*/' in CSS means next line is ignored

  A stray '*/' in my CSS caused my browser to ignore the next line of code

• A 'position' of 'relative' may put elements above

  Giving an HTML element a 'position' of 'relative' may put the element above elements that come later in the HTML

• Bugs with 'border-collapse' on tables

  Internet Explorer does not let you use 'box-shadow' with a table where 'border-collapse' is set to 'collapse'

  One solution is to set 'border-collapse' to 'separate', set 'border-spacing' to '0', set 'border-right' and 'border-bottom' on all cells, 'border-left' on cells on the left edge of the table and 'border-top' on the top edge.

  Also browsers may not let you put round corners on a table where 'border-collapse' is 'collapse'.

  You might use the above solution and set 'border-radius' on the cells at the table corners with 'border-radius-top-left' and so on. But now any shadows on the table do not have round corners. Also the background of the table shows through at the corners.

  A better solution is to set 'border-left' and 'border-top' on all cells in table table. Then turn off 'border-top' on the top row and turn off 'border-left' on the left-most columns. Add a border to the table. Then set the same 'border-radius' to the table, and the table cells at the corners of the table as before. You need to set the 'border-radius' of the table cells otherwise the cells obscure the round corners of the table

• Good tips at W3C

  I found some good tips on the website of the World Wide Web Consortium

• Turning off IE filters

  it seems you can turn off the 'filter' attribute on old versions of Internet Explorer by saying 'filter:;'

  You can also say 'enabled=false' as a property of the gradient filter

• Default font is a 'serif' font

  the default font on browsers on Windows seems to be a 'serif' font. On my Konqueror browser on Linux the default font is a 'sans-serif' font

• Percents with 'text-shadow'

  using percent sizes with 'text-shadow' does not seem to work, but using 'ems' does

• Common fonts

  there is a good, but old, web page about fonts common to all browsers and operating systems

  There is a good, but old, discussion of common fonts in this article and comments

• Chrome runs animation each time element shown

  Chrome seems to run a CSS animation each time I hide and show the HTML element with the animation

  Firefox seems to run the animation just the first time the HTML element is shown

• IE shows animation only when name set

  Internet Explorer 11 seems not to show a CSS animation if the name of the animation is not set when the HTML element is made visible in the JavaScript code even if the screen is yet to be re-drawn

  One way round this, is to set a default value for the 'animation-name' in the CSS and override this in the JavaScript code

• 'text-shadow' and CSS animations on IE

  it seems you cannot use 'text-shadow' with CSS animations on Internet Explorer 11

• Table headers are bold

  browsers seems to make table headers bold, by default

• Set round corners on table cells

  it seems that to get round corners on a table row, you have to set the 'border-radius' on the table cells

• '-webkit-filter'

  Chrome defines the CSS 'filter' attribute but I had to set '-webkit-filter'

  This is on Windows7, May 2016

• 'blur' filter is my favourite

  the 'blur' CSS filter is my favourite

  A large 'drop-shadow' filter can be slow

• Gaps for 'border-radius' on 'text-area'

  if you use 'border-radius' with a 'text-area' then there may be gaps in the border around the corners of the scroll bar

• 'font-size' of tables

  the 'font-size' of a table may not be taken from the enclosing block

  Say 'font-size: inherit' to fix this.

  This may happen on old browsers or when in 'quirks' mode.

  The default stylesheet of the browser may have a value for 'font-size' for tables which you need to override

• Lose default look if style buttons

  if you change the border of buttons then you may lose the nice default look

  This also applies to input fields, text-areas, select boxes and so on

• Specify 'background' with 'background-image'

  it really is a good idea to specify a 'background' when you give a 'background-image'

  For example, my browser does not support 'linear-gradients'

• Lots of errors from CSS validator

  the W3C CSS 'validator' reports lots of errors where I use browser-specific prefixes and Internet Explorer's 'filters'

• Set 0% and 100% 'keyframe' values

  when animating 'box-shadow' on Internet Explorer 11, in the 'key-frame' you need to set values at '0%' and '100%' as well as '50%'

• Extra space for 'inline' 'header' tag

  Internet Explorer 11 adds extra space at the top of the page when the HTML5 'header' tag has a 'display' of 'inline'

  Maybe this happens on old versions of Internet Explorer.

  I do not want to use JavaScript and unknown tags are 'inline'.

  I just do not use a 'header' tag after the 'body' tag

• Smaller lowercase letters on some cursive fonts

  the cursive fonts 'Monotype Corsiva' and 'SnellRoundhand' have smaller lowercase letters than fonts of the same size

  'SnellRoundhand' is the default cursive font on iOS

• Wide 'Avantgarde' font on Chrome

  with the 'Avantgarde' font, Chrome sometimes breaks a single line of text into two lines

  This font is wider than normal

• 'fantasy' font on Firefox is 'sans-serif'

  the 'fantasy' font on Firefox on Windows 7 seems to be just 'sans-serif'

• Similar fonts on Windows and Mac

  'cssfontstack.com' has lists of fonts that look like the same font family on Windows and Mac

• Cursive fonts look smaller

  the Windows cursive font 'Monotype Corsiva' looks smaller than other fonts of the same size

  This also applies to other cursive fonts

• Default cursive font

  on an iPad the default cursive font is a handwritten one. On Windows, with Chrome and Firefox, the default is 'Comic Sans MS'. The default with Internet Explorer is not very cursive

• Give image 'width' and 'height'

  if you give an image a 'width' and 'height' then the browser will not reflow the page as the images are loaded

• Lose default look of buttons on iPad and Mac

  on an Apple Mac, if you set the 'background-color' of a button then the button loses its default look with round corners and the button becomes a rectangle

  On an iPad this does not happen. But if you set a 'linear-gradient' on an iPad then the buttons loses their default rounded look

• Slow 'box-shadow' animation on iPad

  a CSS animation using 'box-shadow' slowed down the game on an iPad

  I read that Safari on iOs uses hardware acceleration for 'transforms' but not 'transitions'

• Cursive fonts are wide

  cursive fonts are extra wide

  They are even wider than 'Avant Garde' fonts

• 'Zapfino' cursive font is tall

  the 'Zapfino' cursive font has very tall letters

  For example, the letter 'g' comes down a lot.

  This font may be the only cursive font on iOS

• Tabs in panels with 'margin-bottom: -1px'

  with tabbed panels, one way to get the tabs to overlap the panels is to pull up the panels with 'margin-bottom: -1px' on the tabs

  You can then set the color of the 'border-bottom' of the active tab to the color of the active panel.

  If you 'float' the tabs then they come out above the panels

• Color of 'crosshair' cursor

  the color of the 'crosshair' cursor seems fixed on Chrome and Internet Explorer. The color can get 'lost' in a similar background color

  Firefox seems to choose a color that contrasts with the background color

• Restarting CSS animation

  it is hard to immediately restart a CSS animation using 'keyframes'

  I clear the animation details from the HTML element, pause for a millisecond using 'setTimeout', and then set the animation details again

• 'uuencode -m' converts image to base64

  you can use the 'uuencode -m' command on Linux to convert an image to 'base64' format, for use with a 'data' URL

  I remove the headers and newlines

• Drawing a star

  I put one 'div' element inside another to draw a star with two triangles. It is simpler to dynamically create the stars this way than if you use ':before' or ':after'

  I put the outer 'div' in another 'div' with 'position' of 'absolute' to avoid content flowing round the 'relative' outer 'div'

• CSS animations stutter

  my CSS animations 'stutter' when a game is being played

  They pause every few seconds, for a fraction of a second, then jump to a later part of the animation.

  I use '3D' transforms to get the animation to run on the GPU.

  An animation of an old lady walking looks more natural with a 'stutter' than a bouncing ball.

  I do not get a 'stutter' when the animatons run by themselves

• 'clip-path' with 'polygon' shape

  the 'clip-path' attribute in CSS lets you create outlines of images with the 'polygon' shape

  The 'clippy' tool lets you trace out an image

• 'audio' and 'source' tags

  you play sound on the latest browsers by using the 'audio' and 'source' tags that are new with version 5 of the HTML standard

• 'bgsound' tag on Internet Explorer

  you can have sound on Internet Explorer version 8 and earlier by using the 'bgsound' tag.

  When you give a value to the 'src' attribute of this tag the sound begins to play (asynchronously). Any sound currently playing stops.

  I store how long each sound takes within the game. This data is quite large.

  I create a small version of the game which does not have the lengths of the sound

• Separators for path to sound file

  to play sound files held in a sub-directory you give a path with '/' separators not the '\' separators usually used by Microsoft® Windows

• SoX (Sound eXchange) tool

  the free 'SoX' (Sound eXchange) tool is good:

  • if you build the tool yourself you can convert sounds to the 'MP3' format by getting the 'LAME' (LAME Ain't an MP3 Encoder) and 'MAD' (MPEG audio decoder library) libraries.

    I think this works around the patent.

    There is a 'lame' program that converts files in 'wave' format to 'MP3'

    I had to get the 'Ogg Vorbis' libraries too

  • I used the 'pitch' effect to get a female voice from mine, and I used the 'echo' effect to make it sound like being in a bingo hall

• Shortening sounds with editor

  I shortened a few sounds by using a sound wave editor to reduce the silence between words and to cut out parts of the same pattern of sound

• Edit out peaks of sound

  I sometimes just cut out some peaks of sound like "t's"

• Smaller archives of just MP3 and Ogg files

  I offer separate archives of just 'MP3' files for Internet Explorer and Safari, and also just 'Ogg' files for the Firefox, Opera and Chrome browsers

  This reduces the size of the archives

• I use 'soxi' program to find length of sound

  I use the 'soxi' program that comes with 'SoX' to find out how long a sound takes to play

• Hold mic away from mouth

  I hold the microphone just in front of my chin.

  The sound is distorted if I hold the mic in front of my mouth

• Recording many sounds takes time

  recording sounds takes a long time

  The game has 6 different voices each saying the numbers from 1 to 90

• I use 'paste' and 'cut' with lists of 'SoX' caommands

  I use the Linux 'paste' and 'cut' tools a lot when working with big lists of 'sox' or 'soxi' commands and their results

• Record whole sentences not words

  it sounds better if you record whole sentences rather than individual words

• Add sounds as you develop

  it is probably better to add sounds as you develop the code

  Because I waited until the end, I had to split up some complex sentences into words and just play the sounds for each word

• Put sound files in sub-directories

  I put the sound files in directories named after the first letter of what is said

  This is like the 'terminfo' files in 'Unix'. I could have also created sub-directories named after the second letter of what is said

  An even better way might be to calculate a hash value from the letters in a phrase. I have lots of phrases that start with 'because'

• Shortening names of sound files

  I shortened long names of sound files by taking the first letter of words at the end of the name of the file

  (My sound files are named after the phrase they contain, with spaces converted to underscores)

• Different emphasis of phrases

  how you handle saying '22?' versus '22' is a problem

• Stopping distortion of microphone

  I sometimes put my fingers above and in front of the microphone

  This stops the distortion I get from holding the microphone close to my mouth.

  I still hold the microphone in front of my chin

• Large overall size of sound files

  The sounds files for the game take up a lot of space: a quarter of a gigabyte

  I have about 10,000 sound files

• Normalise sounds

  I should have used the 'normalise' function of my sound editor

  It scales up the sound, making the loudest part the maximum.

  But it won't work if I have a few large peaks of sound

• Long time to record phrases

  It takes me about an hour to record 50 phrases

• 'tar' overwrites existing file

  The 'unzip' program tells you if you are about to overwrite an existing file but the 'tar' program does not

• Playing sound pauses JavaScript animation

  my animation using JavaScript pauses a little before a sound is played

• Pauses between sounds

  I have a problem where there are pauses between sounds that should immediately follow each other

  I am not sure whether the problem is with my code or the browser.

  Part of the problem may be that when I test the game the sounds are on a slow memory stick

• Stopping sound from 'bgsound' tag

  interrupting someone talking by setting the 'src' attribute of the 'bgsound' HTML element to an empty string ('') sounds abrupt and not natural

• Sounds not compress much in archive

  when I create a compressed archive of sound files, the size is not reduced much

  MP3 and Ogg files are already compressed

• Sounds not downloaded much

  only a few people download the sounds for my game

  The files are large. Experts say people do not like sound on web pages

• Plan for a sore throat when recording sounds

  I forgot to plan for a sore throat, aircraft overhead and nearby drilling

• Sounds less clear after changing pitch and tempo

  using 'SoX's pitch and tempo effects makes the sound less clear

• Do not append 'audio' tag to body

  you do not seem to need to append an 'audio' HTML element to the body of the document when you create the 'audio' element dynamically with the 'createElement' function of JavaScript

  I did try appending the 'audio' tag to the body but with Internet Explorer 11 on Windows 7 the sound stopped working after playing lots of sounds

• Adjusting volume on Windows 7

  to adjust the volume on Windows 7, select the 'Windows Media Center' from 'All programs' in the start menu, and then click on 'Music' and use the '+' and '-' buttons on the bottom right

• Sound pauses with 'audio' tab on IE11

  if I use the 'audio' tag and lots of sounds then the game sometimes pauses for a few seconds with Internet Explorer 11 on Windows 7. Sometimes I do not hear any more sounds after the pause

  So I use 'bgsound' tag for all versions of Internet Explorer

• Sounds takes time to start

  the sounds sometimes take time to start on an old computer running Windows 7. This makes the sounds overlap

• Save target sound of link

  on Windows, if there is a link that plays a sound file then to save the sound, right-click on the link and choose 'Save target as'

• Missing sounds

  some sounds are missed out when using the 'bgsound' tag with Internet Explorer 11 on Windows7 and when using the 'audio' tag with Firefox on Windows7

  This may be because I have the sounds on a memory stick which is slow

  Chrome may look ahead with sounds whilst Firefox lags. This is from a comment on the web.

  Using 'sprites' may be one solution, where one file contains many sounds and you 'seek' around. This can be tricky

• Use sound events to debug sounds

  I used the events that fire on an 'audio' element to debug the sound

  These events fire for me in this order: 'play', 'waiting', 'loadstart', 'suspend', 'loadmetadata', 'loadeddata', 'canplay', 'playing', 'canplaythrough', 'ended'

  For example, I had a bug where I could not hear anything but I could see the browser loading and playing sounds

• Start next sound with 'ended' event

  I use the 'ended' event on the 'audio' element to start the next sound

  I have a timer that starts the next sound if the current sound cannot be loaded

• 'audio' tag waits if no sound file

  if a sound file does not exist then the 'audio' element seems to wait and does not fire an 'error' event

• Stopping sounds

  I tried stopping sounds by setting the 'muted' property of the 'audio' element to 'true'

  This seemed to fit in more than setting the 'src' attribute of the 'source' element to an empty string

  However it seems the 'muted' property may be ignored on mobile platforms

  An article on the Mozilla Developer Network says to pause the sound and set the 'currentTime' property to zero. On Chrome, it seems you have to also set the 'src' to an empty string

• Playing 'Ogg' sounds nn Firefox

  to play my 'Ogg' sounds with Firefox, I have to include a 'vorbis' codec

  I set the 'type' of the 'source' element to 'audio/ogg; codecs=vorbis'

• Quirks of sound on Android and iOS

  Android may only play sounds one at a time

  iOS may only play sounds from a 'user event'.

  I read this on the web.

  This refers to sounds played with the 'audio' tag

• 'soxformat' manual page

  there is a separate manual page 'soxformat' for how 'SoX' handles different audio formats

• mp3 files may be padded

  'mp3' files may be padded with silence at the start and end

  You can find out more on the web

  This may be due to overlapping frames.

  For example, if I convert a sound file in 'Wave' format to 'Ogg' and 'MP3' then the 'MP3' file has a longer duration

• Setting 'currentTime' when playing sounds on Firefox

  on Firefox, it seems you cannot just set the 'currentTime' and then call 'play()' on an 'audio' element

  Instead you may have to call 'load()' and have a callback on an event like 'loadedmetadata' which sets the 'currentTime' and calls 'play()'

• Sound files load quickly

  sound files load quickly: a 2 megabyte 'Ogg' or 'MP3' file loads in under a second

  The file is about 3 minutes of sound and is on a memory stick.

  I think sound sprites are for loading sounds over the internet

• Keep timings when combining sounds

  I kept the original timings of individual sounds by combining sounds in 'Ogg' format and then converting the result to MP3

• Firefox support for MP3

  Firefox now supports sound in 'MP3' format. Firefox needs the operating system, such as Windows, to provide an MP3 decoder

  Chrome supports MP3

• Location of sound file on Firefox

  On Firefox with 'Web Audio' and an 'audio' tag as a source, the sound file has to be next to the page or in a sub-directory below the page, if the sound file is a local file

• Trying to cache sounds

  I tried loading sounds into 'audio' tags at the start

  This only seems to load the first frame of sound.

  Internet Explorer still seems to miss out sounds.

  I even tried playing all the sounds at the start and holding onto the 'audio' elements

• 'play' sound into Web Audio

  I have to call the 'play' method on the 'audio' tag before putting the sound into 'Web Audio'

• Stopping sound from 'audio' tag

  I stop the sound when using 'Web Audio' and the 'audio' tag by stopping the 'audio' tag by setting the 'src' attribute of the 'source' tag to '' (the empty string)

  'Web Audio' on Firefox does not support the 'stop' method on a 'source' created from an 'audio' tag. My Firefox does not support the 'start' method either

• Chrome will not play local sound files

  Chrome will not play sounds with 'Web Audio' and the 'audio' tag if the sound files are on your computer rather than a website

  This may be a security feature as you can look inside sound files with 'Web Audio', and the 'audio' tag can load sounds from anywhere on your computer

• Do not need 'play' event with 'Web Audio'

  people say you need to route the sound into 'Web Audio' when an event like 'play' fires on the 'audio' tag, but this does not seem necessary

  My code looks like:

  var audioElement = document.createElement('audio');
   
  var oggSourceElement = document.createElement('source');
  oggSourceElement.src = oggFilename;
  oggSourceElement.type = 'audio/ogg; codecs=vorbis';
   
  var mp3SourceElement = document.createElement('source');
  mp3SourceElement.src = mp3Filename;
  mp3SourceElement.type = 'audio/mpeg';
   
  audioElement.appendChild(oggSourceElement);
  audioElement.appendChild(mp3SourceElement);
   
  audioElement.play();
   
  var myWindowAudioContext =
          window.AudioContext || window.webkitAudioContext;
   
  var audioContext = new myWindowAudioContext();
  var audioSource = 
          audioContext.createMediaElementSource(
                                          audioElement);
  audioSource.connect(audioContext.destination);

• Ajax and sounds

  my sounds play well if I use 'Web Audio' and load the sounds in with 'Ajax'

  Internet Explorer does not support 'Web Audio'. You cannot use 'Ajax' with local files.

  But sounds may take different times to load across the internet

  Firefox plays sounds fine if you load in sounds with the 'audio' tag and route the sounds into 'Web Audio'. So Firefox can load in local sounds fine

• 'ended' fires when stop sound

  the 'ended' event seems to fire when you 'stop' a source in 'Web Audio'

• 'range' sound header

  Firefox sometimes seems to add 'range' HTML headers when I load in MP3 sound files with 'Ajax'

  The request status returned is '206' for 'partial content'. Maybe Firefox just wants to load the first part of a sound file.

  So I try to override this by specifying my own range header of '0-'

• Finding out the type of a sound file

  to find out which type of sound file to load in with 'Ajax' with 'Web Audio', I load in a test sound file with an 'audio' tag with multiple 'source' children and look at the 'currentSrc' property of the 'audio' tag on the 'canplay' event with the 'muted' property set to 'true'

• Sounds play well with 'Web Audio' and 'Ajax'

  the sounds play perfectly for Chrome and Firefox with 'Web Audio' and 'Ajax' (to load in the sounds)

  Ajax only works for sounds on a website not stored locally

• Firefox will not decode 'MP3'

  Firefox with 'Web Audio' would not decode an MP3 file of music from 'bensound.com'

  I used my old 'SoX' utility to convert the file to 'Ogg' format and back. Firefox could then decode the new MP3 file

• Clear tune for background sound

  I found background music with a clear tune is best

  A 'samba' was too subtle

• Out of memory decoding 'Web Audio' on Firefox

  Firefox gave an 'out of memory' error when decoding songs with 'Web Audio'

  I use an 'Audio' HTML tag instead.

  'Web Audio' is for short sounds

• Chrome only plays sound on user interaction

  Chrome now only starts playing sound as part of a user interaction

  Chrome suspends the playing of sound when I create an 'AudioContext' to decode the sound when loading the page. I call 'resume' on the 'AudioContext' when the user presses a button to start a game

  You can play sounds later outside of a user interaction

• 'bensound' music not 'open source'

  I cannot put the music from 'bensound.com' on 'Sourceforge' because the music has a 'no derivative works' license

  'Sourceforge' wants its contents to have licenses that conform to the 'Open Source Definition' which says derived works must be allowed

• Unreliable web host is good place to test sound

  '000webhost.com' is a good place to test the error handling of playing sounds as '000webhost.com' is a little unreliable

• 'audio' tag quick to start playing

  a 2 minute file of music takes 3 seconds to load and start playing using 'Web Audio' and 'Ajax'

  The music takes 300 milliseconds to start playing using the 'audio' tag. Maybe the music starts playing before it is fully loaded

• Search ignores meta tags

  I understand that search engines now give little or no weight to the 'keywords' and 'description' 'meta' tags

  I did not quite believe the experts who say this, but it is evident in the results of Google's web crawler

• Portable Application Description (PAD)

  some web sites, which list scripts, programs and games for download, ask authors for the location of the related 'PAD' (Portable Application Description) file.

  The PAD file is in XML format and contains a description of the program and says where the program is, what operating systems the program run on and what category the program is in. An example is the PAD file of this Bingo game.

  The PAD file is useful even for websites that do not take PAD files, as the file holds in one place all the information you need to submit about your program.

  The PAD website tells you what can go in each tag. For example, you have to use specific operating system names and categories classes. The PAD website can also validate your PAD file.

  The 'Primary_Download_URL' tag wants the name of a installer, like those used on Microsoft® Windows. The file extension of the installer must come from a small list. I give the name of a zipped version of the HTML file of the game

  After adding the game's PAD file to the online repository, I got a few emails from download sites saying how good the game was and asking me to add a link to their site. I am not sure how genuine these sites are

  The official PAD repository and validator changed in 2013. They are now at 'appvisor.com'.

  You now use a GUI to enter the details of the PAD file and validate them. The GUI took me a bit of getting used to. The GUI does not completely work with Internet Explorer 8. You can import an old PAD file.

  The new validator found a few errors with my old PAD file. The PAD details are now checked by humans before they are added to the repository. They wanted me to put in a real postal address. A PAD file is generated which is now held on the 'appvisor' website. You still need to submit details of your PAD file to each download site.

  'Appvisor' encourages you to pay a little to have your program regularly 'certified' and to pay them to 'promote' your program to download sites and web directories.

  'Appvisor' says the standard size for a screenshot is 800 by 600 pixels

  The Appvisor website closed in 2024

• Bold announcement gives lots of downloads

  a bold announcement of an unusual feature attracted a lot of interest

  I posted on 'freecode.com': "World record set for 15,000 bingo players". Over 120 people looked at the game's page on 'freecode.com'. 20 of the people then visited the game's own site. (The game simulates the 15,000 players)

• Internet directories

  I could not get an entry into any internet directories for free

  I submitted an entry to the Open Directory Project but it did not appear. Maybe there are not enough volunteer reviewers.

• Bing uses README on SourceForge

  the Bing search engine seems to take its entries from the 'README' file in the downloads page of your project on 'Sourceforge'

  I had put details of the last release in the 'README' file

• Too many keywords in title

  putting too many keywords in the web page title may confuse the user, may not help the ranking of the page by search engines, and may look ugly

  I had: 'Free British Bingo, play against the computer, JavaScript'. It is now: 'British Bingo'.

• Google looks for links

  it is easy to forget that Google looks for high quality links to your site and places less importance on the content of your pages

• 2 months to get into results of search engines

  it took about 2 months for my website to appear in the results of search engines despite considerable efforts

  This is what some experts say, but I did not believe them

• 'webmaster' tools do not work with SourceForge

  I did not find the 'webmaster' tools of Google and Bing useful

  It was only just possible to prove I owned the my web site as it is within 'Sourceforge'. I added an 'id' file generated by the search engines as an attachment to my home page.

  I used a 'sitemap.xml' file to get the search engines to look at my 'tips' document but I cannot find the document in the search engine results.

  Yahoo uses the Bing 'webmaster' tools. I think the Yahoo search engine may now be Bing

• Add some style to your website

  maybe create a good website

  I have noticed that the reviews of Linux distributions on the 'distrowatch.com' website usually comment on the quality of the website of the distro.

  I read a good book that suggested going beyond the merely functional and adding a bit of style to your website.

  On 'Sourceforge' you cannot use your own stylesheets, but you can use the 'style' attribute of HTML elements to add colour or set the font size/style/font-weight and so on. You can also add your own HTML tables

• Visit your own websites

  click on links to your website, visit your entries in web directories and visit your articles and forum posts

  It seems like cheating but it helps

• here are some ideas for getting publicity:

  1. Announcing new versions

     I announce new versions:

     1. on the project's Sourceforge blog, with a title of 'Release Notes'

     2. by updating my 'PAD' entry on the 'appvisor.com' website

        The Appvisor website closed in 2024

  2. Add list of tips to forums

     I added 2 lists of tips to a JavaScript forum on the 'Sitepoint' website

  3. Writing articles

     I wrote an article of JavaScript tips for the 'ezinearticles.com' website. The 'Sitepoint' website would not publish it

     One or two people read it each week and half of them then visit the game's website

  4. Website with free scripts

     I submitted details of the game to sites that have free scripts to download

  5. Email release-notes to websites

     we emailed (or filled in contact forms for):

     1. Linux distributions and Linux gaming distributions

     2. old people's magazines and magazines related to the author's health problem. We found some of the magazines in the library. Most were local magazines

     3. selected PC magazines and computer gaming magazines, trying to avoid sending more than one email to the same publisher

     4. older women's magazines, men's gadget magazines and puzzle magazines, again trying to avoid mailing the same publisher twice

     5. national newspapers

     6. web sites which review bingo sites

     7. web sites which appear when you google 'free games'

        these sites really have 'Flash' games and games for mobile phones. They seem mainly aimed at young men

     8. web sites that are listed when you google 'bingo expert'

     9. 'social gaming' companies such as Zynga

     10. bingo sites

         one library I use blocks out bingo sites but another library does not

     We found the magazines in bookshops and supermarkets

     These emails generated almost no visits. The only good results were from a local support group and a national charity, both related to the author's health problem. They may have been a few visits from bingo sites. I think magazines must receive a lot of emails

  6. Free ads web sites

     I put some adverts on 'free ads' web sites. Some were rejected because they had a link to the game's website or because the game is free. I now say 'look for "british bingo" on sourceforge.com' rather than use a link

• Bing uses 'README' files

  the Bing search engine seems to take its entries from the 'README' file in the downloads page of your project on 'Sourceforge'

• Release often

  releasing often helps to draw attention to your project

• Writing a release note

  people recommend you write a release note or press release in three parts:

  1. a short summary of the changes. Perhaps less than 140 characters so it can be tweeted

  2. a brief description of your project, as the release note will be read away from you website

  3. a list of your changes, giving lots of detail

  Try to write sentences. Be consistent in using either English or American English, for example 'colour' or 'color'

• Write a fresh release note each time

  I start afresh when writing the release note each time and highlight different aspects of my game

  I once forgot to include a link to my website and another time I forgot to say the game was free

• Announcement on 'sitepoint' forum

  the 'sitepoint' forum did not allow me to post a general announcement when I registered. But after six months and two posts it did. Over 350 people read my announcement

• These tips are good material for for articles

  writing this list of tips gave me plenty of material for articles

  I originally meant to write an article for the 'Linux Gazette', but it stopped

• Peaks in number of downloads

  a graph of the frequency of downloads of the game shows regular peaks when a new release comes out, quickly falling after

  It looks a bit like a heartbeat.

  The challenge seems to be to get more downloads in the lean periods

• Write release notes as you go along

  it is easier to write the release notes as you make the changes

• Mainly mobile games on games websites

  websites with 'free games' have mostly 'Flash' and mobile games, which are perhaps targeted at young men

• Dismiss unfair criticism

  do not get upset if you get some unfair criticism of your work

  Just ignore it. Dismiss them as 'troll's'

• Be content with a small number of downloads

  you may have to be happy with a small number of active users

  About 15 people download each release. A book I read said blogging was the same. I still find it very satisfying that someone plays the game

• Number of views on web directories

  I wonder if when web directories say lots of people have looked at your entry that they really mean that a page with many entries including yours has been visited a lot

• Unexpectably at top of Google's search

  my website actually appeared on the first page of a Google search for 'british bingo', but only when I had almost given up on marketing the game and had gone back to writing the code

• Unsavoury download sites

  at the start, I put details of the game on lots of download sites. I don't now.

  Some of the download sites later had unsavoury ads or were blocked from the PC's in the library

• Keep a record of who you contact

  I find it useful to keep a record of who I contact so I do not do it twice

• Google manually ranks online gambling sites

  I read that someone at Google ranks the online gambling websites manually as some sites are scams

• Only contact people who might be interested

  Now, I only contact people if I come across someone who might be interested in the game when I am reading a newspaper or magazine, or when I am browing the web

• My entry in FSF directory considered spam

  Someone said my entry in the software directory of the 'Free Software Foundation' was 'spam' and 'Sourceforge' deleted my project

  When 'Sourceforge' restored my project, all the pages in the wiki were gone. I had not made backup copies

• Finding links to your website with Google

  you can find out from Google which websites link to or mention your website by searching for 'info:' followed by your website address

• Old list of download sites

  I found an old report on 'appvisor.com' that lists about a thousand download sites

  I tried to submit my game to them. Many of the sites were not working.

  This did not lead to an increase in downloads of my game

• Longer 'title' tag for online game

  I change the 'title' tag of the online version of my game to suit search engines

  The 'title' tag of the version for download is:

  British Bingo

  Whereas the online version has:

  Bingo: free 90-ball game in browser with sound - play by yourself

  The first 65 characters may be the most important. You can use dividers such as ':', '-', '>' and '|'. Remember to include lots of keywords

• Sitemap files

  I created XML Sitemap files for the directories of the online versions of my game

  I wanted search engines to crawl pages they seemed to be missing. I could also suggest the frequency at which the pages changed.

  Even now, google only has about half the entries in my Sitemap file in its index.

  Bing had not looked at my Sitemap file, a week after I submitted it

• Improving anchor text

  I changed the anchor text of one link to help search engines

  There were two links: one was 'play online', the other next door was 'also'. Now both are 'play online'. It seems anchor text is quite important to search engines

• Good chapters in SEO book

  I found three good chapters in the old first edition of the book 'The Art of SEO' by Eric Enge and others

  The good chapters are: 'Keyword Research', 'Developing an SEO-Friendly Website', and 'Creating Link-Worthy Content and Link Marketing'.

  I borrowed the book from my local library. I saw a free copy of the second edition on the web

• Cannot target Britain with Google's webmaster Tools

  the 'Webmaster Tools' of google will not let me target my website at Britain because the '.pn' domain used by 'freehostingeu.com' is for the Pitcairn Islands

• 'meta keywords' tag not used

  the 'meta keywords' tag is not used much by search engines

• Anchor text is important for search

  the text in anchors for links is important for search engines

• Entry in 'sitemap' for image

  I added an entry for a favourite image to my 'sitemap.xml' file

  But google did not add the image to its index

• Bing and JSON-LD

  Bing does not seem to recognise 'structured data' in JSON-LD format

  So I use the 'Microdata' format

• JSON-LD means IE asks to run scripts

  adding 'structured data' in 'JSON-LD' format makes Internet Explorer ask if you want to run scripts

  So I use the 'Microdata' format for pages without JavaScript

• Use 'site:' to see into Google's index

  you can use the 'site:' operator with google and Bing to see what is in their indexes for a web site

• Use 'meta' tag with Microdata

  you can use the 'meta' tag with 'Microdata' to add data that is not visible on the page

• Adding graphs to 'Flickr'

  I added some graphs to the 'Flickr' photo-sharing website

  Maybe someone will stumble upon the graphs and follow the links

  I do not think google follows the links

• Common Microdata

  I have some 'Microdata' common to my web pages. But if I do not reference part of the 'Microdata' with an 'itemref' then extra entities appear at the top level of the page

• Repeating properties in Microdata

  it seems you can repeat any property in 'Microdata'

  But this might confuse Google's search in some cases

• Adding Microdata takes time

  adding 'Microdata' takes a lot of time

• Microdata may attract more visitors

  adding 'Microdata' is a bit like programming and so maybe gives programmers an advantage in 'search' over marketing people who focus on getting links and advertising

  When I added 'Microdata', I got six times as many visitors to my website as normal, but this soon dropped off. Maybe the increase in visitors was for another reason such as a good review

• Google has own rules for Microdata

  Google search has its own rules for 'Microdata'

  But where Google has extra rules then maybe this means Google is going to use that part of 'Microdata'

  In particular, I understand Google search may show a 'rich card' in its results for your 'Organization' entity

• Using 'itemref' for repeated Microdata

  I used 'itemref' in 'Microdata' to define the properties of a 'Person' once and include the properties many times for 'author', 'publisher', 'funder' and so on

• Text becomes object with Microdata

  you can give some text instead of an object in 'Microdata' and you will get an object with the 'name' property set to the text

• Give lots of properties with Microdata

  it seems a good idea to give as many properties in 'Microdata' as you reasonably can

• Subtypes of entities in Microdata

  you can use subtypes of entities in 'Microdata' to give more detail

  I use the subtypes: 'WebApplication', 'WebPage', 'ScholarlyArticle', 'TechArticle' and 'Dataset'. These are subtypes of 'CreativeWork'

• 'mainEntityOfPage' with Microdata

  the 'mainEntityOfPage' property in 'Microdata' says that the entity that has this property is the 'main entity' for the given page

  There is detailed information about the related properties 'sameAs', 'about', and 'url' on the 'schema.org' website, but I found this difficult to follow

• Every page is a 'WebPage' with Microdata

  the 'schema.org' website says every webpage is implicitly a 'WebPage' entity in 'Microdata', but Google's structured-data testing tool does not show this

  So I gave a top-level 'div' HTML element 'itemscope' with an 'itemtype' of 'WebPage'. This 'div' contained most of the page

• Hierarchy of entities in Microdata

  there is a page showing the hiearchy of the types of entities in 'Microdata' at: 'schema.org/docs/schemas.html'.

• Can have several items in 'itemref' in Microdata

  you can specify several referenced items in an 'itemref' in 'Microdata' - separate each with a space

• JSON-LD is easier than Microdata

  I find the 'JSON-LD' examples in the 'schema.org' website easier to understand than the 'Microdata' examples

• Blog more

  I am going to write some more blogs on 'Sourceforge'

  Google search showed an old blog when I searched for 'javascript tips beckwith'

• libregamewiki.org

  a screenshot of my game on 'libregamewiki.org' comes quite high in google's rankings

  Google ranks a link to my game from 'libregamewiki.org' higher than download sites that have taken the 'PAD' file

• Google's search prefers JSON-LD to Microdata

  I have read that Google's search slightly prefers JSON-LD over 'Microdata'

• Google's 'rich cards'

  Google only adds 'rich cards' to its search results for a small number of entities such as 'Product'

  The 'Microdata' has to be top quality and you may have to wait af few weeks.

  Google can use other 'Microdata' to understand a page

• Multiple values go in an array with JSON-LD

  if you want multiple values for a property with JSON-LD then you put the values in an array

  With 'Microdata' you repeat the property

• Invisible 'meta' tags with Microdata

  I have read that Google search no longer minds if you add 'Microdata' with 'meta' tags outside of the visible content

• 'WebPage' and 'mainEntity' for JSON-LD

  one way of describing a web page with 'Microdata' is to have a 'WebPage' entity with a 'mainEntity' property describing the main topic of the page

  So the 'Microdata' for these tips in JSON-LD looks like:

  {
    "@context"        : "https://schema.org",
    "@type"           : "WebPage",
    "significantLink" : "https://sourceforge.net/projects/britbingo/",
    "mainEntity"      : {
      "@type"              : "TechArticle",
    ...

• Test regularly on IE

  it really is a good idea to test regularly on Internet Explorer if you are developing on another browser. Also test any clever feature on IE before going ahead.

  Where there is a difference, IE is surprisingly sometimes right according to the standards. IE has a debugger, so you can easily find any problems. IE also has a simple profiler which counts and times when functions are executed

• Debug information on a webpage

  I started off writing debug information at the bottom of the page. But after a while I did not look at it much and just added alerts showing the values of variables.

  I realised too late that it is best to use a common function to write out debug trace information.

  When there is a lot of debug information, the code I use becomes very slow in my browser. For example,

  if (debug) { dbg.innerHTML += fname + '(): loop: ' + 
                                numbersInOrderIndex + '<br/>'; }

  Maybe this is because a fresh copy of the debug listing is made each time something is added and the browser reformats the whole listing each time. It might be better to create a new text node each time and append it to the debug area

• Use a common function for errors

  I wish I had used a common function to show errors and used more user-friendly messages.

  Unfortunately, I just coded in alerts with quite technical messages like:

  alert(fname + '(): bad how: ' + howElementHidden);

• Keep data in JavaScript away from DOM

  it turned out to be a good idea to keep details of the players' boards in JavaScript data structures away from the boards' visual representation as HTML

  Maybe this is a bit like the Model View Controller (MVC) idea for Graphical User Interfaces

• Search for specific features

  there is lots of help on the web but it helps if you search for a specific JavaScript feature

• quirksmode.org

  I like the tutorials on the 'quirksmode.org' website

• Articles by Douglas Crockford

  I find articles by Douglas Crockford are particularly good for indepth explanations

• JavaScript is not like Java

  JavaScript really is not much like Java. JavaScript is rather like 'C' and does the usual 'C' things with constructs like:

  while ((c = getchar()) != EOF) {}

  Like 'C', JavaScript is a small language and it is easy to understand all of it, unlike 'C++'. JavaScript has some tricky features like prototypes just like 'C' has pointers

• Typing mistakes

  almost all my errors are typing mistakes

  Several times, I thought they were bugs in the browser or the JavaScript interpreter, but they were typos

• Free JavaScript guides

  I use the free JavaScript guides: 'the FieldCommander JavaScript Reference Guide' and 'Danny Goodman's' 'JavaScript and Browser Objects Quick Reference'

  The first is a bit old and maybe not on the web anymore. I use them because I work offline without an Internet connection and they can be downloaded

• I use 'vi' not a fancy editor

  you don't need a fancy editor or debugger.

  I used 'vi' and relied on brief error messages saying which line the problem was on.

  Your browser probably has a useful JavaScript debugger though.

  (In fact my browser, Konqueror, does have a debugger but I built my own Linux and I sometimes have a problem with threads which seems to make the debugger lock up)

• RCS

  I now check changes into RCS very frequently as I develop the game, partly in case I make a terrible mistake.

  RCS is, of course, a free Unix source control system.

  I have stored over 2000 revisions of the game so far!

  I also find RCS very useful for lots of others things, such as the website pages, 'minimising' scripts, articles and the 'PAD' file

• Making small changes while testing

  I find I can still make small changes to the game whilst I test it

• Testing to find bugs

  I remembered that the point of testing is to find bugs, so I try not to be too disappointed when I find bugs

• Fresh setup for testing

  when testing it may be best to start up your windows and browser afresh and not have anything big running in the background

  I had a bug where the game just stopped perhaps because there was not enough memory to start a new thread with the JavaScript 'setTimeout()' function

• Completely close browser

  other applications run faster if I completely close down my browser

• Combine animations

  it is nice to write animations so that they can be combined

  For example, the background might disappear as the foreground text expands

• Common loop for animations

  I managed to have a common loop to go through the steps of of each animation

• Animations with transparency are slower

  animations that have transparent elements seem quite slower

• Put a version number on web page

  put a version number somewhere on the web page so you know which version you are testing

  I even change the version when I am in the middle of making changes

• Browser screenshot tools

  you can use browser screenshot tools if you cannot test your web pages on other browsers

  There is the 'browsershots.org' web site

  The 'saucelabs.com' site lets you interact with your web page. This site gives unlimited time to free projects. In 2025, 'saucelabs.com' only offered a free 28-day trial.

• Use 'sourceforge' and 'saucelabs' testing tool

  you can test pages of HTML in the Chrome browser and the latest Internet Explorer browsers by using 'Sourceforge' and 'saucelabs.com'

  Make your page an attachment to a 'Sourceforge' page in your project's wiki. Click on the link for the attachment from 'saucelabs'. Then choose a browser from the 'Open with' box at the bottom of the screen

• I use my own documentation

  I actually use some of the documentation of the program myself

  I often refer to the list of the main functions in the game.

  I hardly ever read the detailed descriptions of the processing

• Playing game by itself helps testing

  the way the game can play itself continously was useful when finding bugs

• Focus on developing not releasing

  after a while, I focused on developing the game, and see making releases as a sideline

• Do not use personal email for developing

  I used a separate email address for the game that differs from my personal email address

• Putting 'sourceforge' items and directories in order

  I upload the last items first to the download page on 'Sourceforge'

  'Sourceforge' shows the most recent items first

  To get the directories in the right order in the file download area of 'Sourceforge', I add small files (called 'IGNORE') to the directories

• Backup by email

  I backup my work by emailing the game to myself

  This mean I have many versions saved.

  I save the sound files in the file storage area of 'GMX' mail. There seems to be a limit to the size of email attachments of about 50 megabytes

• Organising with till receipts

  I make notes on till receipts as I walk along or on the bus

  I organise them in an old envelopes

• Sourceforge better than Google

  I use 'Sourceforge' rather than Google because Google seemed more for several people working on a project

• Use HTML to format SourceForge pages

  Use HTML to format 'Sourceforge' pages

  I used 'Sourceforge's own formatting and then some of it stopped working

• Keep developing whilte testing

  I don't stop developing when I do the final testing for a release

  I branch the code. I find testing boring

• Unstable releases

  when I started I released some versions that were not fully tested as 'unstable' releases. I do not now

• Test paths through code

  it seems best to test each path through the code rather than just playing the game a lot

• Clicking buttons when alert box

  sometimes I think the game is ignoring my clicks on an HTML button when an 'alert box' is shown

• 2 free web hosting sites

  I found 2 websites that would host my game for free: '000webhost.com' and 'freehostingeu.com'

  Then it was easy to test my game in different browsers using 'saucelabs.com' which is free to Open Source projects. In 2025, 'saucelabs.com' only offered a free 28-day trial.

  Several other websites offering free hosting did not seem to completely work.

  Several other websites seem to force you to use their website templates or website creation tools.

  '000webhost.com' ' had my game 'under review' for several weeks until I raised a ticket with their helpdesk.

  'freehostingeu.com' was unavailable for a few days asking for a login

  After a year, '000webhost.com' now sometimes shows ads for its paid website hosting. These ads disappeared when I used the 'remove inactivity ads' option in the control panel

  '000webhost.com' adds a call to a script at the bottom of uploaded HTML files. I think this script show the adverts. The script seems to give an error on Internet Explorer 8. The script defines '$' which clashed with mine

  'freehostingeu.com' will not serve a page that contains 'bad' words

  With '000webhost.com' you can upload files as zip archives which are then automatically unzipped. '000webhost.com' does not seem to correctly handle my 'gzip' files

• Menus of 'freehostingeu.com' did not work with IE

  Internet Explorer 8 in my local library did not work with the new menus used by 'freehostingeu.com' at the end of 2013. The menus work fine now

  I get round this by using a session at 'saucelabs.com'

• Comment functions

  I would add a comment at the top of each function if I was writing the game again

  I would not comment the parameters of functions.

  To understand the code when I amend the code, I look at the code and put in 'alerts'. I do not look at the documentation much

• Review late-night coding

  I find it best to review afterwards any code I write late at night or early in the morning

• Shadows under boards

  getting the shadows under the boards right was quite difficult

• Slow alerts with 'saucelabs.com'

  the 'saucelabs' cross-browser testing tool is very slow at displaying JavaScript alert boxes

• Large log files when browser crashes

  the log files produced when my browser crashed almost filled up my disk

• No-one reports bugs

  no-one reported any bugs and no-one posted any messages to the forums I set up on 'Sourceforge'

• Do not set a date for a release

  I find it easier not to set a date for a new release but instead concentrate on the steps needed to get there

• Test to find bugs

  when testing, I try to find bugs rather than just confirming the program works

• Developing while testing

  testing seems a good time to start developing new features when there is no pressure

• Copy old code when make changes

  when I make a change, I usually look for a similar bit of code in the program to copy

• Turning off 'spam' filter

  I turn off the 'spam' filter on my mail account so I can get confirmations when I register for services on websites

• My 'responsive design'

  the way I do 'responsive design' is to develop and test on an old browser and then add features for new browsers

• Easy is not worth doing

  I have a saying: 'if it is easy then it is not worth doing'

• Popular changes first

  the changes I make first are the ones I think people will notice most

• Android 'user agent strings'

  on most Android devices, phones have the words 'android' and 'mobile' in the 'user agent string' sent by their browsers whereas tablets have 'android' but not 'mobile'

• Test on real iPad

  you need to test on a real iPad as well as a simulator

• Test at Apple store

  I test the game on the iPads at the local Apple store

• Slow scripts better than Closure Compiler

  my 'minimising' scripts create a file 10% smaller than the 'Google Closure Compiler'

  But my scripts take 45 minutes to run. The 'Closure Compiler' takes less than a minute

• IE 11 'user agent string'

  Internet Explorer 11 does not have 'MSIE' in its 'user agent' string.

  It has 'Trident/7.0; rv 11.0' instead

• Thinking on the bus

  I find that I do more if I think about it on the bus and then spend a couple of hours in the evening on it, rather than spending most of a Saturday or Sunday on it

• Clicking on a 'select' list

  you can click anywhere at the top of a 'select list' not just on the arrow on the right

• Free hosting

  only a few hosting providers seem to be free and show no ads

  Some of the registration pages do not seem to work or are similar to others.

  You may get a more reliable service if you show some ads

• Use 'alerts'

  I work on a copy of the game with lots of alerts which I remove when I make a release

• IE touch-screen 'user agent string'

  Internet Explorer adds the word 'Touch' to the 'user agent' string on a touch-screen running Windows 8 or later

  An example 'user agent' string is:

  Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0; Touch) like Gecko

• IE 'user agent string' on Saucelabs testing tool

  when testing with Internet Explorer on Windows 8 with the 'saucelabs' cross-browser testing tool, the 'user agent' string does not contain the word 'Touch', maybe because it is running on Windows Server

• Microsoft visual filters

  one way to make web pages look nice on Internet Explorer 8 is to use gradients generated by Microsoft visual filters

• Code the hard way

  I try to code the hard but better way rather than the easy but not so good way

• Look through code after minimised

  I look through the code after it has been 'minimised' to see if I can make it smaller

  This takes about an hour

• Similar variables names makes minimising harder

  if you have variables with similar names, then it makes the 'minimising' harder

  For example,

  var name;
  var nameValue;

• Reload page with 'saucelabs' testing tool

  you can see what your page first looks like better with the 'saucelabs' cross-browser testing tool if you reload the page after it is first shown

• Test for one hour

  I find it best to only do testing for one hour at a time

• Pay to put app on Apple App store

  to put an app on the Apple iOS App store you have to pay $99 a year to join Apple's developer program

• Observe people on bus using phones

  I observe how people sitting in front of me on the bus use their tablets and phones

• Test on Android at computer store

  I test the game on Android (and other) tablets at my local PCWorld store

  I also test on touch-screen Windows 8 computers there

• Android tablet differs from simulator

  my game looks better on a real Android tablet rather than than a simulator

  On the simulator, the words of the introduction are put in a narrow column rather than using the full width of the page

• Plan for being ill

  you need to plan for the developers being ill

  I fell ill just before a release

• Simulate a tablet in a browser

  you can roughly simulate a tablet on a PC by reducing the font size in the browser (or 'zoom-out') and narrowing the window

• Always bugs

  I think there are always bugs with most programs

• Using 'bc' to convert to hexadecimal

  I use the 'bc' program on Linux to convert colors to hexadecimal

  You say 'obase=16'

• Minimising scripts

  when I developed the game, I wrote scripts to shorten names in the code. Now I also just add to a list of substitutions

• Give lots of detail in release notes

  it is good to include a lot of detail in your release notes

  This is what people recommend. It also reminds you what you have done

• Testing on IE shows errors

  testing on Internet Explorer 8 picks up more JavaScript errors than my browser

• Test as you go along

  I find it useful to do lots of testing when I am developing rather than waiting until before I release a new version

• Googling for technical problems

  when I 'google' for a technical problem, I look for the results from the 'stackoverflow' website and the 'Mozilla Developer Network' website

• Serial CSS rules names cause problems for minimising

  if you make up CSS rule names in JavaScript from a root part and an index part on the end, then this may cause problems when you 'minimise' the code

  For example, if 'repeatFade1' and 'repeatFade2' are 'minimised' to different names like 'fhd434' and 'ghl756'

• Code a break out of an infinite loop

  it may be best to code a break out of any infinite loop after too many iterations

  I had a bug and I could not tell if the browser had hung repainting the screen or if my script was in an infinite loop

• Cannot see light grey in 'saucelabs' testing tool

  the 'saucelabs' cross-browser testing tool makes light grey elements seem almost invisible

• My browser leaks memory

  my Konqueror browser takes a long time to load a page if I have loaded the page a lot

  My browser takes up most of the free memory on my old computer.

  I have read that browsers leak memory

• Taking a screenshot on Windows

  to take a screenshot on Windows XP, press 'Ctrl+PrintScreen' and then paste the screenshot into Windows Paint

• Full disk causes bug in scripts

  the output of one of my 'sed' scripts, that I use in 'minimising' the game, was mixed up when the disk was nearly full

• Download site wants to be paid

  'Tucows', the download site, took 3 months to review my game and then rejected my game, saying the file extension was wrong ('bbingo.html.zip')

  'Tucows' really wants you to pay them (at least $60) to review your program

• End of 'freecode.com'

  'freecode.com' have frozen their website (as of July 2014)

• Highlighting parts of page

  constantly changing elements of a page can be just as attractive as shadows or gradients

  For example, in my game I highlight the numbers on the boards of players as the numbers are mentioned

• Frequent releases take time testing

  when I produce new versions every month, a lot of my time is spent testing and minimising (one or two weeks)

• Providing source of minimised code

  the 'Free Software Foundation' says that JavaScript code that is minimised is not Free unless the JavaScript says where the source code can be found

  The 'Free Software Foundation' suggests using a '@source: url' documentation tag

• Short GPL for JavaScript

  the 'Free Software Foundation' have a short version of the 'GNU General Public license (GNU GPL)' suitable for JavaScript

  Normally you have to include a copy of the 'GNU GPL'with your code

• Respect old code

  when maintaining code I find it best to treat the original code with respect

• Corrupt zip files on free hosting websites

  on '000webhost.com', zip files are corrupted when I upload them with the 'other', windows-like, file manager

• Library blocks free domain

  one public library I use, blocks you from using the 'net76.net' domain provided by '000webhost.com'

• Quiet when coding at night

  the early hours of the morning are a good time to program, as it is quiet

  But it can be cold

• Releasing a new versions has its own problems

  releasing a new version is just another step in developing, with problems and bugs to overcome (maybe with the hosting websites)

• Large files and free webhosting

  '000webhost.com' removes my large (4 megabyte) HTML files after a day or two. 'byethost.com' does the same and will not serve them. 'freehostingeu.com' will not let me upload large HTML files

• Chrome on iPad uses Safari renderer

  I read that Chrome on an iPad uses the Safari renderer

• More chances to win

  a game is more enjoyable if you can win

  Playing bingo with a few players is better than playing with lots of players

• JavaScript libraries and the GPL

  if you use the 'GNU General Public license (GNU GPL)' for a JavaScript library then it may mean that anyone using the library has to open source their code too

• Taking a break

  my 'secret weapon' when developing is taking a break and visiting a relative (who plays bingo)

• Zoom to change size of buttons

  changing the 'text size' or 'font size' on browsers does not change the size of buttons or input fields whereas using the 'zoom' option does

• Settings on browsers

  to get to the settings in Chrome, click on the icon in the top-right corner showing 3 small horizontal bars on top of each other

  On Firefox, clicking on these bars shows a menu with an 'Options' entry

  On Internet Explorer 11, clicking on the cog in the top-right corner shows a 'Tools' menu

• Making small changes when testing

  I still make changes, if they take no more than an evening, when I test before releasing a new version

  But sometimes I continue into the early morning

• Swipe does not fire 'click' on iPad

  on an iPad, a swipe does not fire the 'onclick' event

• Save details of errors

  copy and paste the words on the screen when you get an error or save a screenshot

• Double your estimates

  double your estimates of how long things will take

• Do not change 'minimised' version

  I used to make small changes to the 'minimised' version. Now I think it is best to do the 'minimising' every time I make a change

• Re-write code to find bugs

  re-writing code a different way is another way to fix or reveal bugs that are hard to find

• My game hangs occasionally

  my game very occasionally hangs on my old browser and has once hung on Internet Explorer 11

• Play your own game

  remember to play your game a lot if you are developing a game

• Leave room for cursor for tip

  remember to leave room for the image of the cursor if you are drawing a tip near the position of the mouse pointer

• Add a light border

  adding a light border to a region of light color makes the shape of the region stand out

• Test half an hour at a time

  I do the final testing half an hour at a time, with a longer break after an hour

• Get ideas for developments from testing

  you can get ideas for future developments when testing as well as finding bugs

• Take a break from testing

  when I am tired of testing, I get up and open the window or something, then come back and do some more testing

• Test just enough

  I try to test not too much and not too little

• Release after a few days without bugs

  I release a new version after 2 or 3 days of testing without finding a bug

• Make change without too much thinking

  sometimes it is easier to make a small change than it is to think about the change

• Go live as soon as testing ends

  when I have done the final testing, I try to go live as quickly as possible

• Sourceforge bug

  once when I tried to upload a new version to 'Sourceforge', I found that the developer tools were unavailable for a few days due to a storage problem

  The upload option was unavailable for 2 weeks

• Exiting 'vi' save memory

  reqularly quiting my editor ('vi') seems to save memory

• Lots of shadows, gradients and round corners

  my game looks best in Internet Explorer if I use a lot of shadows, color gradients and rounded corners

• Only a few views on Facebook

  I get a few visitors to my Facebook page

  I do not promote the page, so this is great

• Minimalist window manager

  I use a 'minimalist' window manager, 'aewm', on Linux to save memory

• Freehosting limitations

  I cannot upload an HTML file of just under a megabyte to 'byethost.com'

  I cannot login securely as browsers on Windows7 do not trust the certificate

• Group changes together

  I try to do changes together that relate to the same part of the code

• Comment out old code

  when I change code, I comment out the original code rather than removing the original code

  I remove the commented-out code just before I make a release

• 'download.cnet.com' is good

  'upload.com' seems a good download site

  It is part of 'CNet'

• Testing and re-working take time

  changes often take an evening to code, but a week to test, improve and get right

• Go straight to login page of free hosting site

  sometimes '000webhost.com' is slow to respond, so I search for '000webhost' and go straight to the login page for members

• Good book: 'Effective JavaScript'

  the book 'Effective JavaScript' by David Herman is a good intermediate book

  I borrowed it from a local library

• Get books from other libraries

  I look in the catalogue at my local library for books and reserve books from other libraries in the area which are then transferred to my library

• Changing 'rgb' colors to shorter hex

  I change colors in 'rgb' format to hexadecimal format to shorten the code a little

  I use this Perl code:

  s/rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)/sprintf("#%02x%02x%02x",$1,$2,$3)/eg;

• Learning while testing

  when doing the final testing, I find it is a good time to learn more about JavaScript

• Making small improvements during final testing

  when doing the final testing, I find I can still make small improvements to the code and minimising (minifying) scripts

• Browse my own webpages

  I browse my free websites once a week to stop the hosting providers thinking they are unused

• Three digit hexadecimal colors

  I change some colors in my CSS which are given as six hexadecimal digits to three hexadecimal digits to shorten the code a little

  For example, '#ffffff' becomes '#fff'.

  This shorthand is in the CSS specification. However it seems Internet Explorer 3 for Macs supported stylesheets but not the shorthand. Internet Explorer 3 dates from the later 1990's and probably would not run the JavaScript used in my game

  Some browsers do not support three digit hexadecimal colors as shorthand in HTML such as when specifying the 'bgcolor' of an element. This is because this shorthand is not in the HTML specification

  Three digit hexadecimal colors may not be supported in the 'filter' style attributes of Internet Explorer

• Leaving off leading zeroes in decimals

  you can shorten your code by leaving off leading zeroes in decimals

  For example, write '.5' not '0.5'

  But 'JSHint' complains saying a dot could be confused with the dot between an object and a property

• Free books on the web

  there are free copies of old technical books on the web in PDF format

  They are not usually the latest editions.

  I can find old O'Reilly books this way - sometimes new ones too.

  I just search with 'google'

  I got a piece of malware from one download site. It may be best just to follow direct links to PDF files

• Smashing Magazine

  'Smashing Magazine' is a website and newsletter with articles about advanced topics in web development

• Google Charts

  'Google Charts' is a JavaScript API to create charts and graphs

• Put version in string variable

  I put the identification strings of the version control system (e.g. '$Date$') in a string variable rather than in the comments as the comments are removed when the code is 'minimised'

• Release in parts

  you can put out a release in parts with maybe the essential code first and then the supporting documentation a day or two later

• Develop when testing

  I find it is good to continue developing when testing the last change

  Maybe I test better this way

• Book: JavaScript: the Good Parts

  'JavaScript: the Good Parts' by Douglas Crockford is a good book

  It is short but old. There are free copies on the web.

• Using 'xmodmap' to remap keys

  the 'w' key on my old keyboard does not always work, so I use 'xmodmap' in 'X Windows' to use the '#' key for 'w' with:

  xmodmap -e 'keysym  numbersign = w W'
  xmodmap -e 'keysym F1 = asciitilde'
  xmodmap -e 'keysym F2 = numbersign'

• 'gnuplot' draws good 3D graphs

  'gnuplot' draws good 3D graphs

• Book: Eloquent JavaScript

  'Eloquent JavaScript' is a good book

  I particularly liked the example projects

• Login bug for freehosting site

  on '000webhost.com', I cannot login through the home page. Instead I search for '000webhost' and choose the 'members' or 'login' page from the results

• Use '.csv' not '.txt' files on free hosting website

  '000webhost.com' does not seem to serve files with a '.txt' extension

  '000webhost.com' handles '.csv' files all right

• Not '99.8%' uptime on freehosting website

  '000webhost.com' claims '99.9%' uptime but a comment on their forum says they may say downtime is planned maintenance

  My website was not available for several days

• Put images in a sub-directory

  it really is best to put images in a sub-directory on the server

• Old book: HTML Utopia: Designing Without Tables Using CSS

  'HTML Utopia: Designing Without Tables Using CSS' by Rachel Andrew and Dan Shafer is a good old book

  I borrowed it from my local library but you might find it free online

• RCS 'mark' for release

  I remember the version of the source used for a release by making a RCS mark with 'rcs -n'

• Make quicker release if not perfect

  if you are happy to make a release that is not quite perfect then you can make it a lot quicker

• Developing while testing

  I tried not stopping developing whilst doing the final testing for a release. This worked quite well

  I did half an hour of testing at the end of the evening.

  I developed some 'Microdata' which did not affect the game

• No downloads for 'beta' release

  I created a 'beta' version before a release, but not many people downloaded it

• Give each web page a version

  one thing I learnt from using 'Microdata', is to give every web page a version

• Google prefers site at slower free hosting

  both Google search and Bing prefer my website at 'bbingo.eu5.net' (with 'freehostingeu.com') over the duplicate at 'bbingo.net76.net' (with '000webhost.com')

  This is despite the fact that 'bbingo.eu5.net' is slow to respond.

  I have duplicate websites in case one is not working

• Testing on iPads at Apple store

  I test on iPads at my local Apple store

  I go when it is busy, at weekends and bank-holidays. The staff do not pay much attention to me when it is busy

• IE ask whether to run scripts if local

  Internet Explorer only asks if you want to 'run scripts' if the page is on your computer

  If the page is on the web then Internet Explorer does not ask

• Changing domains on free hosting site

  one day, I could not access my free website at '000webhost.com'. I had to change domains.

  '000webhost.com' said I could use 'ftp' to download the files from the old domain and to upload files to the new domain. But 'ftp' is hard to use on the library computers I use for internet access. So I had to find the files on my computer at home and upload them. I could upload up to 20 files at a time when using the file dialog

• Aim I 'Agile'?

  I read a book about 'agile' projects. Am I 'agile'?

  • I focus on programming. I try to spend the least time on marketing, testing and releasing new versions

  • I sometimes program late into the night. 'Agile' projects try to work 35 hour weeks to stay fresh

  • I do not have automated testing. I test by playing my game a little every day. I get ideas for improvements

  • I do not 'refactor' code. I try to respect old code. There may be a reason for the way it works

  • I do not always work on the most important things. I can be more effective by working on related items. I can work on unimportant things that add depth. I can have some fun by working on things that interest me

  • I have a feature that I work on when I am waiting on something for the current change. 'Agile' programmers do one thing at a time

  • I write notes on pieces of waste card like the low-tech post-it notes and index cards that 'agile' developers use

  • I only spend a few hours a day programming. I do not spend the whole weekend programming. I have kept going for about seven years. This is like the sustainable 35 hour weeks that 'agile' teams aim for

  • I try to break developing into small steps that I can do in an evening. I try to leave the game in a working state overnight. 'Agile' developers do tasks that can be done in one day

  • I try to be polite and accomodating with 'Sourceforge' and the free hosting sites that I use. They may be unavailable for a few days or block my content, but I try to remember that they are free. 'Agile' teams try to collaborate with external suppliers

  • sometimes I may start working on another feature before I finish the final testing of what I am currently working on. For example, I may want to do the final testing in the library where I can use Windows browsers and have internet access

  The book is 'Agile Project Management for Dummies' by Mark C. Layton. I got the book from my local library

• TODO list

  I do not look at my 'TODO' list much

  The list slowly grows in size. I do related things or rely on my memory. I include the 'TODO' list with the source on 'Sourceforge'

• 'yuicompressor'

  the 'YUI Compressor' is a 'safe' minifier that does not change your code much

  It shortens local variable names.

  It shortens my JavaScript by 22% compared to 27% for 'UglifyJS'.

  This is over and above my own minimising and using 'JSMin'

• Online book: 97 Things Every Programmer Should Know

  the book '97 Things Every Programmer Should Know' is worth reading

  You can read it for free online

• Online book: Getting Real by 37signals

  I read 'Getting Real' by 37signals. Am I 'real'?

  • I changed my game to use curly quotes for speech. You would not notice the change. 37signals suggest being 'passionate' about your project

  • I tend to say 'we' when there is just me developing. But 37signals suggest being straight with your customers about your size

• W3C link checker

  the 'W3C link checker' points out links that have been 'redirected' and advises you to update the links

• Changing free domain at free webhosting site

  I had to change the free 'eu.pn' website domain I used at 'freehostingeu.com'

  The Pitcairn Islands said the 'eu.pn' domain was harming their reputation.

  I changed right away to 'mygamesonline.org'. I later changed to the shorter 'eu5.net'

• Free webhosting is not perfect

  using a free hosting provider such as '000webhost.com' is not perfect

  My game loads sounds in real time across the web. With '000webhost.com' there are sometimes delays or errors such as not finding a file or getting an incomplete file

• Don't panic with free webhosting

  you must not panic when using a free hosting provider

  I got a strange screen from '000webhost.com' part of which said I had exceeded my limit and had to upgrade. So I rashly upgraded to a paid account. Luckily, my debit card was declined. In fact, '000webhost.com' was not working properly and I could continue with my free account

• Delay after uploading to free webhosting site

  sometimes when I upload a file to '000webhost.com' there is a delay of over ten minutes before the file appears on the web server

• Making notes on pieces of cornflake boxes

  I write notes on bits from cornflake boxes

  But ink smudges on the glossy outside

• index.html

  you can refer to a webpage as a subdirectory on the web server if you put the page in the directory and call the page 'index.html'

• Releasing a beta version is a small step

  releasing a 'beta' version breaks a release into smaller steps, reducing stress and leaving something if I die

  I will try an 'alpha' release.

  Nobody downloaded my last 'beta' though

• Release over several days

  doing a release over several days lets you be more careful and fix mistakes

  You can have a good look at your entry at the download website before uploading the entry

• Testing in the library

  I do a bit of testing most days in the library. I develop at home

  This is a bit like running automated tests overnight

• Gnuplot is good at 3D charts

  Microsoft Excel is good at drawing pie charts. 'Gnuplot' is better at 3D charts

  Excel uses a constant scale for the 'depth' or 'z' axis: one stop for each row of data

• Read over posts on social media

  it is a good idea to read through your posts twice before sending

  Check URL's in a browser, write a draft first, and do not forget to publish the draft

• Emails from download sites are marked as 'spam'

  email messages from download and listings websites seem to go to the 'spam' folder of my 'gmx' mail account

• Adding swap space

  I sometimes run out of memory and swap space on my old computer running Linux

  I use the following to add more swap space:

  dd if=/dev/zero of=swap1 bs=1024 count=100k
  mkswap swap1
  swapon swap1

  Do not forget to run 'swapoff' before shutting down Linux

• Creating sprites from GIF's

  I create 'sprites' from GIF's from 'animatedImages.org'

  I separate the images using the 'layers' tool of 'GIMP'. I drag the images to new images. I use 'GIMP' to create a blank sprite. I use the 'combine' program from 'ImageMagick' to position the individual images on the sprite

• Replace image on 'flickr'

  on 'Flickr', you can update an image by replacing it

• Re-factoring

  're-factoring' may be where you produce a quick prototype and then later go back and tidy up the code

• Forget your worries

  doing some programming can take your mind off your worries

• 10 years in your spare time

  if you work on a game for 10 years in your spare time, maybe you get the same result as a small team working for 1 year full-time