Web Design
How To > Create XHTML DivX, QuickTime & Flash Players
Look. I am sick of every people making something, and then making a really sloppy way to use it. If you go to youtube or googlevideo they give you this “embed” code. The Embed tag DOES NOT VALIDATE. I write my code by hand and don’t want it to be sloppy. So when I wrote Rip-Off Theater I didn’t want to have all my players using some clunky Embed crap when there are perfectly good ways to do it using Object instead.
I made the DivX code based on a Quicktime hack I did. Basically I am putting 2 objects on. One for IE and another one for Firefox etc.. To make IE not be stupid you need to use some css to tell it to not display both objects.
I figure If you are reading an article on XHTML I figure you need me to tutor you through the process. You just want the bloody code:
<!-- Start CSS Code -->
<style type="text/css"><br/>/* hides the second object from all versions of IE */<br/>* html object.mov {display: none;}<br/>/* displays the second object in all versions of IE apart from 5 on PC */<br/>* html object.mov/**/ {display: inline;}<br/>/* hides the second object from all versions of IE >= 5.5 */<br/>* html object.mov {display/**/: none;}<br/></style>
<!-- End CSS Code -->
<!-- Start XHTML Divx Web Player -->
<object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab" height="" width="">
<param name="src" value="">
<param name="custommode" value="Stage6">
<object type="video/divx" data="inserturl" class="stupidie" height="" width="">
<param name="src" value="">
<param name="custommode" value="Stage6">
No video? Get the DivX Web Player for <a href="http://download.divx.com/player/DivXWebPlayerInstaller.exe">Windows</a> or <a href="http://download.divx.com/player/DivXWebPlayer.dmg">Mac</a>
</object>
<!-- End XHTML Divx Web Player -->
<!-- Start XHTML Quicktime -->
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="" width="">
<param name="src" value="inserturl">
<param name="controller" value="true">
<param name="autoplay" value="true">
<param name="scale" value="tofit">
<object type="video/quicktime" data="inserturl" class="stupidie" height="" width="">
<param name="autoplay" value="true">
<param name="scale" value="tofit">
<param name="controller" value="true">
Sorry, shit happens... download quicktime from apple.com/quicktime
</object>
</object>
<!-- End XHTML Quicktime -->
<!-- Start XHTML Flash -->
<object type="application/x-shockwave-flash" data="inserturl" height="" width="">
<param name="movie" value="inserturl"><param name="FlashVars" value="playerMode=embedded">
</object>
<!-- FYI, that super small flash code works on everything from youtube / swf's / all other movie sites...-->
<!-- End XHTML Flash -->
</object>
UPDATE: 7/29 - Fixed this post. It wasn’t displaying the code and was messing up the rest of the blog. Seems wordpress is stupid and doesn’t by default recognize the “<code>” atribute
How To > Use .htaccess to screw over a hotlinking asshole
Ok, so with my page it’s not just images people try to link to, it’s entire pages. Why? Because a lot of them look pretty damn good as stand alone pages and are just much easier to work with inside iframes.
So I saw this guy in my statistics that was hotlinking directly to my Sega Genesis and Nintendo pages. Well that really pissed me off because it took me a LOT of time to put those bloody games on there. If you want the NES on your page, you can download it yourself. If you want the Sega Genesis on your page, well there you are kind of screwed, since it is licensed and the guys who made it promised me updates and then disappeared like a fart in the wind. Anyways, this is getting off the subject.
I looked around and only saw ways to prevent hotlinking to image files, pages seemed a little more obscure. So I figured I would write it up. We will use the asshole who did it to me as an example.
RewriteEngine on # I had this on earlier in my htaccess, but if you didn’t you will need to add it to rewrite anything.
#RewriteCond %{HTTP_REFERER} ^http://([^/]+\.)?baddomain1\.com [NC,OR] #Uncomment this line if you have more than 1 asshole linking to you, and copy it if you have several.
RewriteCond %{HTTP_REFERER} ^http://([^/]+\.)?aw3bo\.net [NC] #This says look to aw3bo.net (NC = Non case sensitive)
RewriteRule \.(php|htm)$ http://www.thesmartass.info/hotlink.html [R,L] #This says if he links to my pages to force him to my hilarious hotlink page..
Basically my actual pages are never named anything but php or htm, so this will make all my actual pages that he links to force him to see my hotlink page. Be careful, I screwed this part up at first… All requests coming from his site asking for .php or .htm are getting redirected.. So you have to name your file extension you link to something different. I eventually went with .html
It’s much more entertaining than sending them to just an image. Originally my hotlink page did a meta refresh after 10 seconds, but then I noticed that my page still looks good even in a tiny frame since the images are proportional etc… So I removed that for just an old fashion giant link under the probably offensive image.
You can modify the rule where it says php|htm to add additional extensions by adding more pipes jpg|gif|png etc.. But if you redirect an image make sure that you are redirecting them To an image…
Some other nasty things you can do to the people you dislike in .htaccess include:
#Redirect IP’s Somewhere Else
RewriteEngine on
RewriteCond %{REMOTE_ADDR} 2.21.1.19 [OR]
RewriteCond %{REMOTE_ADDR} 70.200.40.157
RewriteRule /* http://www.uglypeople.com [L]
#Just straight up block users from accessing the site… not quite as fun but still useful
deny from 80.76.55.21
deny from .spammers.com
allow from all
UPDATE 7/16: People seem to keep doing this. Stop it Mo-Fo’s… I have been researching the .htaccess more and have found a way to simplify the rewrites to use a lot less code, and much less confusing syntax.
#Hotlinking Assholes
RewriteCond %{HTTP_REFERER} (aw3bo|spotlightarcade) [NC]
RewriteRule \.(php|htm)$ http://www.thesmartass.info/hotlink.html [R,L]
Notice that now I have 2 different sites listed, separated by a pipe and inside (). That’s it. I don’t need to put the exact syntax or even the .com’s etc.. anymore… If you are refered to me by a site with that info, you get zapped to my screw you / meatspin page.
UPDATE 7/19: Here’s a rule I just changed. I have been adding TONS of rules to prevent overall nasty people from being on my site. Now I had these guys redirecting to “-” but that just sends them to my 403 page… Screw that, Instead I have decided that from now on I shall be updating my rule to link to the most recent hotlinker. So all of my crappy traffic will get sent to the people who are trying to steal traffic from me to begin with. Below is the current rule, remember there are countless RewriteCond before the actual rule, if you try to add this rule without a condition you will send all your traffic there…
#sends all my shitty traffic to most recent hotlinker
RewriteRule /* http://www.spotlightarcade.info/sega/ [L]
Return to The SmartAss DOT Info
Safari 3 Beta for the PC
As a Web Developer I am bloody thrilled that Apple has just released Safari 3 Public Beta for the PC!!!! I don’t have a mac and can’t test my websites on mac. I knew that would be changing soon since I am buying an iPhone which comes with safari built into it, however testing on a 3.5″ screen is not the same as testing on a big ass monitor.
I am pleased to say that virtually my entire site works right off the nut in safari with no changes. Even the new work in progress design loads fast and runs like a champ. The java applets didn’t seem to launch the games in them, but it seems like it should be able to, so if I tinker with the object code a bit it will probably work, also this is a beta… and that was the only thing that didn’t load. The browser actually passes the acid2 test which basically mean it’s a bloody standard compliant browser (Microsoft take note)
Upon install it worked with flash and embedded windows media (yeah i was surprised too). It imported my bookmarks from all of my other browsers. It has tabs etc… One thing that did annoy me was that you can only resize your browser window from the lower right corner. This is stupid if you want to be on a PC since I am used to stretching my windows from all corners!!!! Still, minor annoyances aside, it worked great.
Am I telling you to switch from Firefox to Safari? Hell no, It does look like if you use IE all the time that it might be worth looking into switching, however there is no add-on system to this like there is in Firefox where anybody can develop for it. This is what makes Firefox the superior browser and will continue to hold it’s reign for the foreseeable future.
How To > Fix Firefox Cache Problems (& also my artwork button)
Some of you probably come to this site often enough that you would like to be able to click the artwork changer button. In Internet Explorer it works perfect all the time and I thought with the release of Firefox 2.01 that it fixed the problem. However I have since determined that it was just my own settings that made it work.
I spent some time today figuring out which setting caused it to work. Below is the answer:
Open a new tab, in address bar type: about:config and hit enter.
In filter box type browser.cache.memory.enable
If something shows up make sure it is set to false, if nothing shows up, right click in blank space and choose: New > Boolean then type browser.cache.memory.enable > false (type in if no choice given).
Exit browser, and open page, and artwork pallet will work.
Why this works and what else this might fix. For some reason firefox ignores browser rules where people have told the webpage to specifically NOT cache itself. I know I am not the only web designer who has found this frustrating and there is a lot of forum posts on the internet dealing with people trying to make caching work, however this is the only real fix I have found that works 100% of the time.
I browsed around and found no speed loss after turning this on. In fact while doing this I noticed that my browser.cache.disk.enable was set to false, which is why I sites I had been going to were loading every image 1 by 1 instead of the same image loading several times. You might want to check to make sure that is set to True as well. I assume mine got turned off during some web development session to make it less annoying to refresh all the time.
All is good now, hope this helps you enjoy this and other sites more.
Lipsum Anyone?
Confused? If so this post is not for you, but if you are a site/layout designer than perhaps you will find this very helpful.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempus. Cras est. Vestibulum sapien. Donec pretium, nunc eu malesuada interdum, lorem augue luctus nisl, eget nonummy elit ante in nisi. Sed tincidunt tristique tellus. Integer arcu. Pellentesque feugiat suscipit justo. Etiam justo. Fusce tellus. In hac habitasse platea dictumst. Donec cursus, diam a vulputate tincidunt, pede diam mollis dolor, in congue pede sapien id velit. Nulla vitae libero.
Proin sollicitudin cursus libero. Curabitur facilisis metus vel nisi. Aliquam nec turpis ut ligula mollis mollis. Praesent est. Aliquam non nisi at tortor tempor facilisis. Duis pulvinar aliquet tortor. Suspendisse justo. Nam dignissim, libero quis consequat sagittis, nulla urna interdum diam, ut tempor pede massa eu quam. Suspendisse erat dui, vestibulum vitae, luctus ac, blandit id, libero. Nunc orci. Donec posuere. Nullam non ante ac quam congue feugiat. Nulla aliquam nisi eu risus. Curabitur scelerisque odio vitae est. Duis fringilla. Etiam sem est, rutrum non, rhoncus ac, vulputate vulputate, mauris. Vestibulum ut lorem. Maecenas tristique purus.
Nunc a nisi ut urna adipiscing eleifend. Nulla nulla purus, suscipit sit amet, hendrerit in, placerat at, quam. Vestibulum imperdiet sem. Vivamus tempor varius lorem. Nulla facilisi. Vivamus porttitor dui vitae lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi nulla felis, commodo sed, tincidunt eu, porttitor ac, lacus. Pellentesque eros erat, tempor a, lacinia vitae, laoreet in, magna. In ullamcorper, urna nec ultrices porta, tortor erat luctus diam, quis dignissim urna mauris vel ligula. Proin scelerisque justo commodo turpis. Donec id erat. Donec velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eu lectus. Aliquam erat volutpat. Etiam dignissim lectus vel odio. Nullam auctor ullamcorper odio. Suspendisse euismod.
Nunc viverra aliquet augue. Sed quis lacus id diam lobortis elementum. Duis libero magna, interdum id, lacinia id, molestie non, pede. Sed sed purus vitae risus imperdiet vestibulum. Duis ipsum. Sed et magna quis diam egestas ultricies. Fusce eget justo. Sed varius aliquet est. Pellentesque dictum eleifend felis. Ut faucibus vehicula massa. Maecenas sollicitudin, lacus quis porta condimentum, odio dui tristique dui, quis mollis sapien purus id ligula. Etiam odio augue, vestibulum ac, mollis ut, fermentum quis, sapien. Fusce diam massa, condimentum eu, tincidunt sit amet, pretium vestibulum, nulla.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id nulla. In molestie tincidunt eros. Praesent velit erat, dictum sed, tempus ut, auctor id, leo. Aenean vestibulum convallis justo. Nulla elit. Curabitur lacus. Vestibulum congue felis at lacus. Nunc convallis auctor dui. Duis tincidunt lobortis mauris. Cras suscipit suscipit arcu. Suspendisse imperdiet. Etiam erat.
Pellentesque orci dolor, malesuada nec, tincidunt vel, accumsan id, neque. Etiam vestibulum faucibus arcu. Aenean ut nisi. Sed scelerisque convallis nisl. Aliquam dignissim nonummy orci. Ut eros orci, convallis in, cursus sed, accumsan quis, odio. Donec bibendum velit at lorem cursus consequat. Quisque et sem sed quam auctor pulvinar. In hac habitasse platea dictumst. Nam sodales urna vel nisl.
Sed in nunc eu leo tristique venenatis. Sed et risus. Nam vel libero. Pellentesque magna risus, pulvinar non, vestibulum nec, condimentum ut, metus. Aliquam erat volutpat. In justo purus, facilisis a, condimentum vitae, pellentesque in, purus. Curabitur interdum, nulla a gravida luctus, massa enim tempor nunc, a gravida pede lacus eget erat. Suspendisse dui. Nam quis nisl. Aenean consequat, leo in venenatis aliquam, metus odio convallis sem, a aliquam sem ligula ac dolor. Proin arcu orci, egestas mollis, volutpat nec, ultricies eget, nisi. Maecenas lectus nisl, volutpat eget, mattis quis, lobortis auctor, purus. Vestibulum venenatis tortor sit amet turpis. Nulla blandit massa. Nulla pharetra nisi a erat. Aliquam turpis.
Maecenas mi mi, tempor vel, dictum in, molestie nec, augue. Vivamus augue ligula, porta quis, laoreet eu, ultricies venenatis, felis. Vivamus nulla lacus, semper sit amet, luctus eu, cursus nec, libero. Nulla erat quam, lobortis non, luctus ac, pellentesque in, elit. Mauris sapien. Vestibulum dui leo, condimentum non, aliquam nec, porttitor a, mauris. Sed a tellus. Donec tristique. Proin at enim vitae urna adipiscing condimentum. Phasellus nulla lectus, tincidunt vel, commodo ut, molestie id, elit. Vivamus et ligula. Suspendisse sed quam. Sed sit amet eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut gravida nisl id augue. Nam enim. In mattis sapien sit amet justo.
Vivamus sed nunc a sem varius aliquet. Etiam et leo. Donec aliquam urna at turpis gravida sollicitudin. Cras ultrices magna ac enim. Sed condimentum placerat leo. Aliquam erat volutpat. Fusce facilisis risus id nisl. Mauris velit odio, feugiat nec, pulvinar eget, ultrices vel, tellus. Fusce rhoncus felis sit amet quam. Suspendisse vitae mauris vel risus congue interdum. Nulla sit amet nisi a felis posuere posuere. Duis aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ultricies pede vitae tortor. Duis sit amet quam fermentum odio pharetra scelerisque.
Curabitur in ligula ut neque sagittis pharetra. Proin molestie ultricies mi. Vestibulum quis purus. Vestibulum mollis urna a velit. Proin dapibus pede. Cras tempor lacus ut eros. Nam ligula elit, vestibulum id, convallis non, auctor vitae, ante. Nam elit tortor, placerat id, rutrum non, ullamcorper adipiscing, lacus. Praesent commodo congue odio. Vivamus lobortis nunc vitae ante. Aenean tempor justo at mauris. Vivamus diam. Donec fermentum tempus ipsum.
Article Author: The Smartass
Source: Lipsum