Miscellaneous Downloads.


Music


"Jazz men don't only listen to jazz"
Thomas Bangalter, LA Times, c.2011
Songs etc. I've thrown together on Audacity.

Creative Commons Licence
This work by Lewis Wright is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Based on a work at http://bouncebag.com.
Permissions beyond the scope of this license may be available at Here.


  • Supposedly all I listen to is "Daft bloody Punk" so here's something I threw together on audacity to show I don't just listen to Daft Punk. All these songs released before Daft Punk was formed in 1994.
  • No# Tracklist:
    • 1Layla - Eric Clapton
    • 2Born to be Wild - Steppenwolf
    • 3Hit the Road Jack - Ray Charles
    • 4Baba O'Riley - The Who
    • 5(Purple Haze) - Jimi Hendrix
    • 6The Chase - Giorgio Moroder
    • Download



  • A mixture of songs in a 19 second mix styled after "On/Off" by Daft Punk (2005, Human After All)
  • No# Tracklist:
    • 1On/Off - Daft Punk
    • 2Charlie - The Phantom's Revenge ("It's always sunny in Philadelphia")
    • 3Jump Around - House of Pain
    • 4Master of Puppets - Metallica
    • 5Nymphae Song - Le Knight Club
    • 6Jerry's Breakdown - Antoine Dufour and Tommy Gauthier
    • 7Genesis - Justice
    • 8Together - Together ("Pleasantville")
    • 9Feels So Good - Brand Nubian

    • Download
    • 2015 remaster of 2012 original.




Favicons: a mysterious iconic symbol of the internet.


Updated September 2016 to include new information

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

CODE:










































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

browserconfig.xml
CODE:


  
    
      
      #00aba9
    
  

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.

CODE:



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.





Displaying New Year and Christmas Day every year using JavaScript.


I was re-learning some basic JavaScript and came across time codes and date stamps, my original idea was to use maths in JavaScript to get the new year by milliseconds, then i discovered that simply knowing the month and date would be good enough to get it to only display on a date of my choosing.
The month of "0" is January, all months in JavaScript are numerically from 0-11 instead of 1-12. this script should work with any month and any day inputed, including 29th of febuary, which would only display once every leap year

Creative Commons Licence
"NewYear.js" by Lewis Wright is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Based on a work at http://bouncebag.com.
Permissions beyond the scope of this license may be available at Here.

CODE:
//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 = "
Happy New Year " + year + "!"; } else if (month == 11 && date == 25) { greeting = "
Merry Christmas " + year + "!"; } else { return false; } document.getElementById("newyear").innerHTML = greeting; }

It is useful for pulling up a custom greeting for birthdays, events and anniversaries.

Download

To see this script in action Click here
The linked file displays "TEST" on most days of the year. On New Years day (01/01/YYYY) displays "Happy New Year YYYY!" and on Christmas Day (25/12/YYYY) displays "Merry Christmas YYYY!" replace YYYY with the year.






Displaying a up to date copyright notice with hidden JavaScript.


Using this simple script you can display a copyright or year inclusive notice without having others see the code in the "Inspect Element" as it writes over itself.

Creative Commons Licence
"Inner Copyright writing Javascript Script (Year Display)" by Lewis Wright is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Based on a work at http://bouncebag.com.
Permissions beyond the scope of this license may be available at Here.

CODE:

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

The above Javascript code would be wrapped in a script tag inside an element with id="copy-right" which to the inspect element explorer would appear like this

CODE:

                    

This code would write "© Lewis Wright - 2015" in the year 2015., for other years it would automatically detect the year and post it.

As the script is held within the HTML element it overwrites it will be hard to detect this script when using browser side element inspectors.

Download
The code, both HTML and Javascipt are contained in the .txt file.


Romanising the numerals in the copyright.


Using this simple script you can display a copyright or year inclusive notice, with Roman numerals, without having others see the code in the "Inspect Element" as it writes over itself. It uses a roman numeral converter

CODE:

			
			
CODEPEN:

See the Pen Roman Numerals as DateTime JS by L Wright (@Bouncebag) on CodePen.



Webfont
Webfont


Factorio logo as an Icon Font.


CODE:
@font-face {
	font-family: 'factorico';
	src:url('factorico.eot');
	src:url('factorico.eot#iefix') format('embedded-opentype'),
		url('factorico.ttf') format('truetype'),
		url('factorico.woff') format('woff'),
		url('factorico.svg#factorico') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="factorico-"], [class*=" factorico-"] {
	font-family: 'factorico';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.factorico-1:before {
	content: "\e60d";
}

CODE:


Download




Back to Top