Miscellaneous Downloads.

"You're entering the vicinity of an area adjacent to a location. The kind of place where there might be a monster, some kind of weird mirror. These are just examples, it could also be something much better. Prepare to enter, The Scary Door."
Futurama "A Head in the Polls" (2ACV03)

Favicons: a mysterious iconic symbol of the internet.

In late 2014 I investigated favicons. the little image you have next to the name of the page, and discovered that unlike a lot of other key foundations of websites this one was not exactly easy to decipher. especially with the addition of mobile browsing. I therefore endevoured to find a "catch all" system of displaying the correct sized favicon without demanding too much bandwith or load time. heres what i came up with

<!-- Terms of Use: This work (favicons-setup-full_2016_revision8)  is distributable modified or unmodified
	for non-commercial purposes and with attribution to the original creator. -->
<!-- Favicon.ico must be in ROOTDIR of domain/sub-domain -->
<!-- Chrome for Android 192x: -->
<link rel=" icon" sizes="192x192" href="/touch-icon-192x192.png">
<!-- iPhone 6 Plus with 3× display 180x: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-180x180-precomposed.png">

<!-- iPad with 2× display - iOS ≥ 7 152x: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png">

<!-- iPad with 2× display - iOS ≤ 6 144x: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png">

<!-- iPhone with 2× display - iOS ≥ 7 120x: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png">

<!-- iPhone with 2× display - iOS ≤ 6 114x: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">

<!-- iPad mini, first and second-generation iPad (1× display) on iOS ≥ 7 76x: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png">

<!-- iPad mini, first and second-generation iPad (1× display) on iOS ≤ 6 72x: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">

<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices 57×: -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">

<!-- Chrome, Safari, Firefox (Desktop) Etc. 32x -->
<link rel="icon" href="/favicon.png">

<!-- IE Only -->
<!--[if IE]><link rel="shortcut icon" href="/favicon.ico"><![endif]-->
<!-- IE 10 Windows 8 Tiles 144x -->
<meta name="msapplication-TileColor" content="#00cea0">
<meta name="msapplication-TileImage" content="/tileicon.png">

<!-- Manifest + Colour-->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">

manifest.json

{
	"name": "Bouncebag",
	"icons": [
		{
			"src": "\/touch-icon-192x192.png",
			"sizes": "192x192",
			"type": "image\/png"
		}
	],
	"theme_color": "#ffffff",
	"display": "standalone"
}

browserconfig.xml

<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/mstile-150x150.png"/>
      <TileColor>#00aba9</TileColor>
    </tile>
  </msapplication>
</browserconfig>

favicons-setup-full_2016_revision8 is a heavily researched favicon setup to have full compatability with less demand on icon load times and server.

Most browsers will assign to correct icon using this setup. Some quirks in some obscure browsers are unavoidable. (I tried to fix some, but it is impossible to fix all browser quirks.) Some obscure browsers will download a much larger/smaller version of icon than needed, but all browsers /should/ display an favicon that is close to/at the correct size. If your browser does not display a favicon/tileicon, let me know on the Contact Page

In the latest version I have added a new browser config and manifest Along with a 150x150 icon. The two additional files give IE/Edge and Android the information for when you link the webpage as a Windows Tile/Android App.

Only the manifest file needs to be listed in the HTML, the browser config is picked up automatically by IE/Edge. the new browser config will overwrite the older 144x144 image in most instances, apart from some edge cases, mostly with IE10 and Windows 8.

A simplified fully compatible version (All browsers (IE5 to the modern day) displaying a favicon) is favicons-setup-min_2014_revision3, it has fewer lines of code, but more demand on icon load times and server.

<!-- Terms of Use: This work (favicons-setup-min_2014_revision3)  is distributable modified or unmodified
	for non-commercial purposes and with attribution to the original creator. -->
<!-- Favicon.ico must be in ROOTDIR of domain/sub-domain -->
<link rel=" shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png">

Both these setups will display an image in almost all browsers (I have tested both on mobile devices (iOS, Android and Windows) and on desktops.)

The min setup only requires one .ico file and a 152x152 png icon.
The full setup requires various sizes majority of which are .png files. (you can use .gif for some, however .png is recommend as it decreases the amount of browser issues)
The requirements are:

• 192x192 .png Icon for Google Chrome for Android (Later Android phones) + Optional Manifest JSON
• 180x180 .png Apple iPhone 6 Plus with 3× display
• 152x152 .png Apple iPad with 2× display - iOS ≥ 7 152x
• 150x150 .png Microsoft Windows Tile + Browser Config XML
• 144x144 .png Apple iPad with 2× display - iOS ≤ 6
• 144x144 .png Microsoft Internet Explorer 10, Windows 8 Tile, it also needs a background colour declaring.
• 120x120 .png Apple iPhone with 2× display - iOS ≥ 7
• 114x114 .png Apple iPhone with 2× display - iOS ≤ 6
• 76x76 .png Apple iPad mini, first and second-generation iPad (1× display) on iOS ≥ 7
• 72x72 .png Apple iPad mini, first and second-generation iPad (1× display) on iOS ≤ 6
• 57x57 .png Apple non-Retina iPhone, iPod Touch, and Android 2.1+ devices
• 32x32 .png Chrome, Safari, Firefox (Desktop) Etc. This is utilised most widely outside of IE and small screen Safari.
• One .ico file, preferably with at least a 16x16, 32x32 and 48x48 packed in the favicon.ico file. Used only for Internet Explorer browsers Pre IE 10. If using the min setup I recommend a 64x64 packed within the ico aswell.

It is recommend that you keep the naming convention I have used (for some of the files it is a requirement.) It is also essential that the favicon.ico is stored in either the domain or sub-domain root of the page using the icon (where the browser will automatically search for it as a fall back if it cannot process any of the other code, only browsers that will do this are early versions of Internet Explorer and similarly aged web browsers).

The file sizes are due to the number of uses. the larger icons are used as page shortcuts on tablets and mobiles, therefore they are required to be large to present a clear, well formed image of your website.

The unfortunate thing about this full setup is that no matter how strict the coding, there will be some browsers that will not display the correct icon.

However I believe it is the most comprehensive way of displaying icons correctly, especially for mobile browsing.

//Simple function that returns true on 1st day of the 0th (js) month. (January)
// Also returns true on 25th day of the 11th JS month (December)
//
//It is used here to display a New Year's greeting message as well as a Xmas Day one
// that includes the year as well.
// Date = 1. Month = 0
// Date = 25. Month = 11
//
// For example for the 17th of march to display a message true
// (month == 2 && date == 17) in Javascript january = 0, december = 11
//
// Terms of Use: This work (NewYear.js) is licensed under
// Creative Commons Attribution-NonCommercial-ShareAlike 4.0 License.
// It is attributed to Lewis Wright, owner of www.bouncebag.com .
function newYear() {
    var d = new Date();
    var m = new Date();
    var y = new Date();
    var date = d.getUTCDate();
    var month = m.getMonth();
    var year = y.getFullYear();
    var greeting;
    if (month == 0 && date == 1) {
        greeting = "<br />Happy New Year " + year + "!";
    } else if (month == 11 && date == 25) {
        greeting = "<br />Merry Christmas " + year + "!";
    } else {
        return false;
    }
    document.getElementById("newyear").innerHTML = greeting;
}

var d = new Date();
document.getElementById("copy-right").innerHTML = "© Lewis Wright - " + d.getFullYear();

<p id="copy-right">
	© Lewis Wright - 2023
</p>
					

<script>
	var d = new Date();
	document.getElementById("copywright").innerHTML = "© Lewis Wright - " + NumerisRomanis(d.getFullYear());
</script>
					

 const idList = ["demo","demo2","demo3", "demo4"];
 idList.forEach(runList);
 

function runList(id) {
 const elem = document.getElementById(id);
 
 //can look at any computed css of the current element
 const allComputedStyles = elem.computedStyleMap();
 
 for (const [prop, val] of allComputedStyles) {
  //Gets background colour for contrast ratio.
  if (prop == 'background-color') {
   
   let bgcolour = val; //array
   var rgb = bgcolour.toString(); //'rgb(rrr, ggg, bbb)' string
   
  } //END if background-colour
 } //END for loop
 
 rgb = rgb.split(/\(([^)]+)\)/)[1].replace(/ /g, ''); //rrr,ggg,bbb string
   
 //Map RGB values to variables
 var r = parseInt(rgb.split(',')[0], 10),
     g = parseInt(rgb.split(',')[1], 10),
     b = parseInt(rgb.split(',')[2], 10),
     a;
 //If RGBA, map alpha to variable (not currently in use)
 if (rgb.split(',')[3] !== null) {
   a = parseInt(rgb.split(',')[3], 10); 
 }
        
 // r, g, b, a, all as ints. alpha not used.
   
 //Calculate contrast of color (standard grayscale algorithmic formula)
 var contrast = (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000;
 
 //Set colour of text of the element either white or black depending on bg contrast.
 //console.log ("Colour Contrast: ID:", id, " RGB:", rgb, " Contrast:", contrast, "/128");
 //return (contrast >= 128) ? elem.style.color = 'black' : elem.style.color = 'white'; 
 return (contrast >= 128) ? elem.classList.add("black") : elem.classList.add("white"); 
} //End Func

//#RRGGBB
function hexToRGB(hex) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    return "rgb(" + r + ", " + g + ", " + b + ")";
}