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

• 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

• 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

• 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,\n    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 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