Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Hash abuse: avoiding server side processing

    About the erratic code layout for this example...

    The following is true across all modern browsers:
    The public at large never validates your web page. It's up to you to make sure your page is constructed and validates properly.

    What happens when you don't build code that validates? The browser is free to interpret your code in a non-compliant way, and does so.
    The interesting part is, the browser will still interpret the code.
    In other words - if it can, the browser will display the content as a web page, irregardless of the structure errors.

    In the example below, the code uses well-formed principles, but completely ignores structure rules.

    Note the multiple blank lines at the top of the document. The lack of proper structure tags (missing document declaration, html and head tags).
    style and script blocks appearing haphazardly through-out the document (before and after the body and outside of any declared structure).
    The title tag is on the last line of the document (The title is still interpreted properly).

    The example does contain a body tag, which must be included to build a DOM fragment that is easily accessible via JS.


    ---------------------------------------------------------------------------------

    Using the YouTube WebPlayer in a web page.

    1) Add the call to load the WebPlayer script located at: 'http://webplayer.yahooapis.com/player.js'

    2) Add links to the YouTube pages that hold the videos you want to show in the player.

    That's it. Easy.

    ---------------------------------------------------------------------------------

    What the example code below does:

    The example avoids server-side processing by using url option and hash arguments.

    Each page of this small app offers the user a set of video links to choose from.
    Each link will play the associated video inside the in-page WebPalyer.

    A selection list of albums is created, using the albums object, that holds all the data for the collection of video albums.
    An album is just a collection of related links.

    Choosing an option in the selection list triggers a page reload to display the selected album links.


    Here are a couple of PROs and CONs for the technique used to make the page pass option and hash arguments to itself.
    PRO: Simple to set up. No server side processing required.
    CON: Requires JS, and Forget about SEO: htaccess settings can hide the URL arguments, but the content requires processing a spider will ignore.


    The code below is a complete (trivial) web app. No html needs to be added.
    Code:
    
    
    <style type="text/css">
    body {background:#ddd;}
    .contain {float:left;padding:10px;}
    option {font-size:1.4em;}
    a, select {font-size:1.2em;}
    .contain, select {background:#666;}
    a, option {color:#fff;}
    a, .contain {white-space:nowrap;}
    .text {padding-left:20px;}
    option, a, select, h2, .text {font-family:Verdana,Geneva,sans-serif;}
    </style>
    
    <script type='text/javascript'>
    
    // replace the albums content with the videos you use.
    var albums = {
    	"JavaScript":{
    		name:"JavaScript",
    		"vids":[
    			{"yt":"ljNi8nS5TtQ","song":"Intro to JS and DOM","tags":"dom","cat":"mr"},
    			{"yt":"_RRnyChxijA","song":"Build a JS Game Enigine","tags":"engine","cat":"mr"},
    			{"yt":"0LKDImgRfrg","song":"Best Practice JS Libs","tags":"best","cat":"mr"},
    			{"yt":"hQVTIJBZook","song":"JS Good Parts","tags":"best","cat":"mr"},
    			{"yt":"4mf_yNLlgic","song":"Console Power User","tags":"crocford","cat":"mr"},
    			{"yt":"4rlbTVkyJc4","song":"Google IO widget","tags":"console","cat":"mr"},
    			{"yt":"O1YjdKh-rPg","song":"Google IO App Love","tags":"widget","cat":"mr"},
    			{"yt":"mHtdZgou0qU","song":"Speed up JS","tags":"communicate","cat":"mr"},
    			{"yt":"EuELwq2ThJE","song":"Dont make me click","tags":"speed","cat":"mr"}
    		]
    	},
    	"CSS":{
    		"name":"CSS",
    		"vids":[
    			{"yt":"iCEwJh47lcA","song":"CSS layout techniques","tags":"CSS","cat":"mr"},
    			{"yt":"m9vijdlau6Y","song":"CSS beautiful interfaces","tags":"CSS","cat":"mr"}
    		]
    	},
    	"Cage the Elephant":{
    		"name":"Cage the Elephant",
    		"vids":[
    			{"yt":"HKtsdZs9LJo","song":"No rest for the wicked","tags":"wicked","cat":"mr"},
    			{"yt":"v27TRan1SBI","song":"Shake me down","tags":"shakedown","cat":"mr"},
    			{"yt":"DPgWNuUkuA8","song":"In one ear","tags":"ignore","cat":"mr"},
    			{"yt":"iT4Y2JleWrQ","song":"Back against the wall","tags":"defense","cat":"mr"},
    			{"yt":"TmHZDpvtppU","song":"Around my head","tags":"zombie","cat":"mr"},
    			{"yt":"S0tsm0EhCJM","song":"In one ear","tags":"crazy","cat":"mr"}
    		]
    	},
    	"Primus":{
    		"name":"Primus",
    		"vids":[
    			{"yt":"TOdo7dhvSwg","song":"Mr Kringle","tags":"circus","cat":"mr"},
    			{"yt":"aYDfwUJzYQg","song":"Wynonas big brown beaver","tags":"cowboy","cat":"mr"},
    			{"yt":"953PkxFNiko","song":"My name is mud","tags":"lincoln","cat":"mr"},
    			{"yt":"kY7jSesdxl0","song":"Lacquer head","tags":"bobbit","cat":"mr"},
    			{"yt":"LBQ2305fLeA","song":"Jerry was a race car driver","tags":"race","cat":"mr"}
    		]
    	},
    	"White Stripes":{
    		"name":"White Stripes",
    		"vids":[
    			{"yt":"0J2QdDbelmY","song":"Seven nation army","tags":"army","cat":"mr"},
    			{"yt":"5roz5-wdjBg","song":"Icky thump","tags":"thump","cat":"mr"},
    			{"yt":"XRDi67G0Siw","song":"Fell in love with a girl","tags":"love","cat":"mr"},
    			{"yt":"gLESpHrtvxs","song":"Hardest button to button","tags":"button","cat":"mr"},
    			{"yt":"QKntY8WkNYQ","song":"Blue orchid","tags":"orchid","cat":"mr"},
    			{"yt":"03YUgHAshSo","song":"Ball and biscut","tags":"biscut","cat":"mr"},
    			{"yt":"YLmIlVJYEtw","song":"You Don't Know What Love Is","tags":"confused","cat":"mr"},
    			{"yt":"DodG8IcnOZk","song":"The Denial Twist","tags":"denial","cat":"mr"}
    		]
    	},
    	"System of a Down":{
    		"name":"System of a Down",
    		"vids":[
    			{"yt":"CSvFpBOe8eY","song":"chop suey","tags":"pale","cat":"mr"},
    			{"yt":"iywaBOMvYLI","song":"Toxicity","tags":"satin","cat":"mr"},
    			{"yt":"LoheCz4t2xc","song":"Hypnotize","tags":"woman","cat":"mr"},
    			{"yt":"5vBGOrI6yBk","song":"Sugar","tags":"brandi","cat":"mr"},
    			{"yt":"zUzd9KyIDrM","song":"BYOB","tags":"mississippi","cat":"mr"}
    		]
    	},
    	"Manson":{
    		"name":"Manson",
    		"vids":[
    			{"yt":"Ypkv0HeUvTc","song":"Beautiful people","tags":"facelift","cat":"mr"},
    			{"yt":"QUvVdTlA23w","song":"Sweet dreams","tags":"nightmare","cat":"mr"},
    			{"yt":"4kQMDSw3Aqo","song":"This is the new s#!%","tags":"subliminal","cat":"mr"},
    			{"yt":"Rl6fyhZ0G5E","song":"Personal Jesus","tags":"religion","cat":"mr"},
    			{"yt":"GKkiCFOE-Ic","song":"Disposable teens","tags":"watse","cat":"mr"}
    		]
    	},
    	"Fiona Apple":{
    		"name":"Fiona Apple",
    		"vids":[
    			{"yt":"FFOzayDpWoI","song":"Criminal","tags":"bad girl","cat":"mp"},
    			{"yt":"NbxqtbqyoRk","song":"Fast as you can","tags":"cruelty","cat":"mp"},
    			{"yt":"L9Wnh0V4HMM","song":"Sleep to dream","tags":"dreams","cat":"mp"},
    			{"yt":"kjfTDDAstig","song":"Extrodinary machine","tags":"machine","cat":"mp"},
    			{"yt":"8uf1n1wUfxE","song":"Why try to change me now","tags":"change","cat":"mp"},
    			{"yt":"uiuk0z8dzXo","song":"First taste","tags":"taste","cat":"mp"},
    			{"yt":"hKA1tVb4u0g","song":"Pale September","tags":"pale","cat":"mp"},
    			{"yt":"NXSXJph707I","song":"Sullen girl","tags":"sullen","cat":"mp"},
    			{"yt":"lAVsiW4nyjo","song":"Better version of me","tags":"better","cat":"mp"},
    			{"yt":"69p6DI8_fPs","song":"The child is gone","tags":"child","cat":"mp"},
    			{"yt":"DQGy9xIrn7w","song":"Slow like honey heavy with mood","tags":"honey","cat":"mp"},
    			{"yt":"r4yWcFsItN0","song":"Carrion","tags":"carrion","cat":"mp"}
    		]
    	},
    	"Mix1":{
    		"name":"Mix1",
    		"vids":[
    			{"yt":"CdncFjqKcxg","song":"The Golden Age","tags":"age","cat":"mp"},
    			{"yt":"h2WtCs5Kre4","song":"Around the Bend","tags":"bend","cat":"mp"},
    			{"yt":"NbxqtbqyoRk","song":"Fast as you can","tags":"cruelty","cat":"mp"},
    			{"yt":"L9Wnh0V4HMM","song":"Sleep to dream","tags":"dreams","cat":"mp"},
    			{"yt":"EkwD5rQ-_d4","song":"Possum Kingdom","tags":"killer","cat":"mp"},
    			{"yt":"xh-5FI21s6M","song":"Jane says","tags":"jane","cat":"mr"},
    			{"yt":"bz6k2aWwVYU","song":"Stop","tags":"go","cat":"mr"},
    			{"yt":"_9BGLtqqkVI","song":"Hash Pipe","tags":"drugs","cat":"mr"},
    			{"yt":"HL_WvOly7mY","song":"Beverly Hills","tags":"rich","cat":"mr"}
    		]
    	},
    	"Edgar Cruiz":{
    		"name":"Edgar Cruiz",
    		"vids":[
    			{"yt":"8izzBxyHmT8","song":"Live and Let Die","tags":"live","cat":"ma"},
    			{"yt":"0JXNsu2P5Uk","song":"Pink Panther","tags":"Clouseau","cat":"ma"},
    			{"yt":"YhHkm56sn2E","song":"Oye Como Va","tags":"Oye","cat":"ma"},
    			{"yt":"Sb32jtO_fBc","song":"Finger Style Guitar","tags":"guitar","cat":"ma"},
    			{"yt":"SLX7YcLYVLA","song":"Hotel California","tags":"hotel","cat":"ma"},
    			{"yt":"FDFWtzWUE1M","song":"Bohemian Rhapsody","tags":"rhapsody","cat":"ma"},
    			{"yt":"i75eQJ7saws","song":"Dream On","tags":"dream","cat":"ma"},
    			{"yt":"SnSbTqUiGz4","song":"In the Mood","tags":"frisky","cat":"ma"}
    		]
    	},
    	"Pomplamoose":{
    		"name":"Pomplamoose",
    		"vids":[
    			{"yt":"7UCm6uyzNE8","song":"Angry Birds","tags":"birds","cat":"mp"},
    			{"yt":"9xMCNmUaGko","song":"Mr Sandman","tags":"sandman","cat":"mp"},
    			{"yt":"f-4ZwiW1cPs","song":"Mrs Robinson","tags":"robinson","cat":"mp"},
    			{"yt":"OvYZMqQffQE","song":"My Favorite Things","tags":"favorites","cat":"mp"},
    			{"yt":"oIr8-f2OWhs","song":"Single Ladies","tags":"ladies","cat":"mp"},
    			{"yt":"pNM8g5ZZN0Y","song":"Deck the Halls","tags":"halls","cat":"mp"}
    		]
    	}
    };
    
    </script>
    <script type='text/javascript'>
    
    // The code below is left in-line in the global space to simplify analysis
    
    //fill array with the album names you want the user to see in the selection list. e.g. hide White Stripes, Manson
    var mnames=["JavaScript","CSS","Mix1","Cage the Elephant","Primus","System of a Down","Fiona Apple","Edgar Cruiz","Pomplamoose"];
    
    //grab the album index to display from URL - comes in as hash (type errors unhandled)
    //set default index value to 0
    var band = window.location.hash||"#q=0";
    band = parseInt(band.replace(/#q=/,""));
    
    // return the document name with extension, minus trailing optional arguments
    function getdocname(){
    	var fn = document.location.href;
    	var fne = (fn.indexOf("?") == -1)?fn.length:fn.indexOf("?");
    	return fn.substring(fn.lastIndexOf("/")+1, fne);
    }
    
    // reload the page with the chosen album index as an optioanl hash argument, 
    // avoid caching issues by attaching a random value as an optional argument
    function gotosite(n){
    	var doc = getdocname().replace(/#q=.+/,"") + "?r="+Math.floor(Math.random()*10000);
    	window.location= doc + "#q="+n;
    }
    
    // use the list of albums and the albums object to create a slection list
    function makeRefs(n){
    	var s = "<select onchange='gotosite(this.selectedIndex)'>"
    	for(var i=0;i<mnames.length;i++){
    		if(i==n)
    			s+="<option value='"+mnames[i]+"' selected='selected'>"+mnames[i]+"</option>";
    		else
    			s+="<option value='"+mnames[i]+"'> "+mnames[i]+" </option>";
    	}
    	document.getElementById("mopts").innerHTML = s;
    }
    
    // use the selected index to create the video links for the page
    function makeLinks(n){
    	var s = "";
    	for(var i=0;i<albums[n].vids.length;i++)
    		s += "<div class='contain'><a href='http://www.youtube.com/watch?v="+albums[n].vids[i].yt+"'>"+albums[n].vids[i].song+"</a></div>";
    	document.getElementById("mlinks").innerHTML = s;
    }
    
    </script>
    
    
    <!-- the YouTube WebPlayer call is here -->
    <script type='text/javascript' src='http://webplayer.yahooapis.com/player.js'></script>
    
    
    <!-- the body is for a DOM fragment -->
    <body>
    
    <h2 id="vidTitle"></h2>
    <span id="mopts"></span> <span class='text'>The WebPlayer is in the lower left corner. Either click a link, or click the arrow below.</span>
    <div id="mlinks"></div>
    
    </body>
    
    <script>
    
    makeRefs(band);
    makeLinks(mnames[band]);
    document.getElementById("vidTitle").innerHTML = mnames[band];
    </script>
    
    
    <title>YT Player, Hash Abuse</title>

    This code works properly in all modern browsers
    Last edited by rdspoons; 08-27-2012 at 02:12 AM.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by rdspoons View Post
    [I]

    What happens when you don't build code that validates? The browser is free to interpret your code in a non-compliant way, and does so.
    that's why you should use the html5 doctype: all browsers follow the same html5 quirks routine, so your janky code is consistently rendered in a standard way.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Adding <!doctype html> to an unstructured document tells the browser to try to interpret the document in a standards complient way.

    Add this style to the page below or above the title.
    Code:
    <style type="text/css">
    a {
    	background:lightgray;
    	padding:.2em;
    	padding-left:1em;padding-right:1em;
    	border-radius:.2em .6em .2em .6em;
    	/* for old safari 4 beta */
    	-webkit-border-top-left-radius:.2em;
    	-webkit-border-top-right-radius:.6em;
    	-webkit-border-bottom-left-radius:.6em;
    	-webkit-border-bottom-right-radius:.2em;
    	color:black;
    	text-decoration:none;
    }
    a:hover {
    	color:white;
    	background:black;
    }
    </style>
    - the native select element always depends on browser

    No doctype on unsctrucured document: ff, chrome, safari, opera all display similar content but choose own guttering as expected.
    ie ignores extended css rules (border-radius)

    Adding doctype html to an unstructured document:
    ff, chrome, safari, opera all display similar content and guttering.
    ie chokes on css a:hover

    The janky code is a dual demonstration of using url arguments to implement state, along with what modern browsers do if the document has no standard structure.

    This not an advocatiion for structureless documents, it's just a means to observe the current behavior of browsers when a document has no standard structure.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •