<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web Design</title>
	<atom:link href="http://patjack.co.uk/feed/" rel="self" type="application/rss+xml" />
	<link>http://patjack.co.uk</link>
	<description>Patrick Robertson</description>
	<lastBuildDate>Sun, 21 Feb 2010 10:02:11 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Mac OS X Dock Resource Folder</title>
		<link>http://patjack.co.uk/mac-os-x-dock-resource-folder/</link>
		<comments>http://patjack.co.uk/mac-os-x-dock-resource-folder/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 22:50:08 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Apps]]></category>
		<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[os x]]></category>
		<category><![CDATA[snow leopard]]></category>

		<guid isPermaLink="false">http://patjack.co.uk/?p=304</guid>
		<description><![CDATA[We all know that we should back up all the time, especially if we&#8217;re going to go tinkering with OS X&#8217;s insides.
Seeing someone had accidentally messed up their dock resources folder (found in /System/Library/Core Services/Dock.app/Contents/Resources) I posted  in the macrumors forums with a download link for the folder in question.
A year or so later I [...]]]></description>
			<content:encoded><![CDATA[<p>We all know that we should back up all the time, especially if we&#8217;re going to go tinkering with OS X&#8217;s insides.<br />
<img src="http://patjack.co.uk/wp/wp-content/uploads/2009/12/dock.png" alt="dock icon" title="dock" width="128" height="128" class="aligncenter size-full wp-image-331" />Seeing someone had accidentally messed up their dock resources folder (found in /System/Library/Core Services/Dock.app/Contents/Resources) I posted  in the <a href="http://forums.macrumors.com" target="_blank">macrumors forums</a> with a download link for the folder in question.<br />
A year or so later I removed the file from my hosting, only to be bombarded with emails and PMs from others who&#8217;d done exactly the same thing &#8211; who&#8217;d have thought it!</p>
<p>Below you can find a link to the dock resources folder for Snow Leopard.</p>
<p>I&#8217;ve been asked for Leopard and other OS X versions of the folder. If you have these then do email them to me so I can add them here!</p>
<p>Snow Leopard: <a href="http://patjack.co.uk/files/SL_dock_resources.zip">resources.zip</a></p>
<p>And for the future?</p>
<h2><strong>Always make a backup!</strong></h2>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/mac-os-x-dock-resource-folder/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Toggling Caffeine with Quicksilver to keep your Mac awake</title>
		<link>http://patjack.co.uk/toggling-caffeine-and-keeping-your-mac-awake/</link>
		<comments>http://patjack.co.uk/toggling-caffeine-and-keeping-your-mac-awake/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 22:46:41 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Apps]]></category>
		<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[applescript]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[os x]]></category>
		<category><![CDATA[quicksilver]]></category>

		<guid isPermaLink="false">http://patjack.co.uk/?p=317</guid>
		<description><![CDATA[
Caffeine is a tiny little app that keeps your Mac awake when needed; be it when you&#8217;re watching a video (for some reason, Adobe Flash doesn&#8217;t keep your Mac awake), reading something off your screen, or anything else.
It sits in the menu bar waiting to be summoned when needed, and dismissed just as easily.

Being the [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-320" title="Caffeine" src="http://patjack.co.uk/wp/wp-content/uploads/2009/12/caffeine.png" alt="Caffeine" width="133" height="121" /></p>
<p><a href="http://lightheadsw.com/caffeine/">Caffeine</a> is a tiny little app that keeps your Mac awake when needed; be it when you&#8217;re watching a video (for some reason, Adobe Flash doesn&#8217;t keep your Mac awake), reading something off your screen, or anything else.</p>
<p>It sits in the menu bar waiting to be summoned when needed, and dismissed just as easily.</p>
<p><img class="alignright size-full wp-image-322" title="Quicksilver" src="http://patjack.co.uk/wp/wp-content/uploads/2009/12/com.blacktree.Quicksilver.png" alt="Quicksilver" width="48" height="48" /></p>
<p>Being the lazy type I am (thanks to the inevitable <a href="http://qs0.blacktree.com">Quicksilver</a>, dragging the mouse over to this corner to click the icon is just too much work. Below is an applescript which I run from Quicksilver with 3 key presses (I could set it as a trigger if I really wanted) and it switches it on or off, or even opens it if it&#8217;s not running.</p>
<p><code>tell application "System Events"<br />
if exists (process "Caffeine") then<br />
tell application "Caffeine"<br />
if active is false then<br />
turn on<br />
else<br />
turn off<br />
end if<br />
end tell<br />
else<br />
tell application "Caffeine" to activate<br />
end if<br />
end tell</code></p>
<p>This will launch the app if it&#8217;s not running. If it is running it&#8217;ll check to see if your Mac is on Caffeine (i.e. if it&#8217;s turned on) and carry out the required action.</p>
<p>This is all possible thanks to Caffeine being scriptable. It&#8217;s always great when developers add applescript support as well as others to their apps &#8211; it makes the Mac experience that bit more cosy.</p>
<p>You can download the applescript <a href="http://patjack.co.uk/files/caffeine.tgz">here</a><br />
I&#8217;ve even added the right icon to the script <img src='http://patjack.co.uk/wp/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>All that needs doing is setting up a trigger in Quicksilver, or placing it in<br />
<code>~/Library/Application Support/Quicksilver/PlugIns/Extra Scripts.qsplugin/Contents/Resources/ExtraScripts</code>.</p>
<p>Done!</p>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/toggling-caffeine-and-keeping-your-mac-awake/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Toggle Keyboard Viewer in Snow Leopard 10.6</title>
		<link>http://patjack.co.uk/toggle-keyboard-viewer-in-snow-leopard-10-6/</link>
		<comments>http://patjack.co.uk/toggle-keyboard-viewer-in-snow-leopard-10-6/#comments</comments>
		<pubDate>Thu, 10 Dec 2009 10:50:47 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Mac OS X]]></category>

		<guid isPermaLink="false">http://patjack.co.uk/?p=296</guid>
		<description><![CDATA[Ever since upgrading to Snow Leopard, one function I&#8217;ve missed is the ability to toggle the Keyboard Viewer on and off with an applescript.
It looks like Apple modified the Keyboard Viewer utility for Mac OS X 10.6 (or a possible tablet, who knows&#8230;) and the old applescripts don&#8217;t work.

I&#8217;ve finally come across a method for [...]]]></description>
			<content:encoded><![CDATA[<p>Ever since upgrading to Snow Leopard, one function I&#8217;ve missed is the ability to toggle the Keyboard Viewer on and off with an applescript.<br />
It looks like Apple modified the Keyboard Viewer utility for Mac OS X 10.6 (or a possible tablet, who knows&#8230;) and the old applescripts don&#8217;t work.<br />
<img src="http://patjack.co.uk/wp/wp-content/uploads/2009/12/keyboard_veiwer-1024x437.jpg" alt="" title="keyboard_veiwer" width="512" height="219" class="aligncenter size-large wp-image-370" /><br />
I&#8217;ve finally come across a method for getting this to work in Snow Leopard again, although it&#8217;s not as easy as it was in Leopard, and it seems to be as slow as hell to open.</p>
<p>Check out Nicholas Riley&#8217;s tiny app (only 6 lines of custom code!) that fixes this:<br />
<a href="http://github.com/nriley/keyboardViewer">http://github.com/nriley/keyboardViewer</a> (<a href="http://cloud.github.com/downloads/nriley/keyboardViewer/keyboardViewer-1.0.zip">download</a>)</p>
<p>Once that&#8217;s downloaded and installed (you need to go into terminal and move it, or just navigate to /usr/local/bin/ and paste it there), you can then use the applescript listed on the App&#8217;s homepage to get it working in applescript.<br />
<code><br />
tell application "System Events"<br />
if exists (process "Keyboard Viewer") then<br />
click process "Keyboard Viewer"'s window 1's buttons whose subrole is "AXCloseButton"<br />
else<br />
do shell script "/usr/local/bin/keyboardViewer"<br />
end if<br />
end tell<br />
</code></p>
<p>I have modified this slightly, as the &#8216;click process&#8217; part of the applescript uses a deprecated method (Apple&#8217;s own fault) and could become obsolete at any point. I just used a simple killall command in its place</p>
<p><code><br />
tell application "System Events"<br />
if exists (process "Keyboard Viewer") then<br />
do shell script "killall KeyboardViewer"<br />
else<br />
do shell script "/usr/local/bin/keyboardViewer"<br />
end if<br />
end tell<br />
</code></p>
<p>And now, my trusty Cmd + Optn + Ctrl + K Quicksilver trigger is back!</p>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/toggle-keyboard-viewer-in-snow-leopard-10-6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iTunes &#8211; &#8216;Random&#8217; Shuffle &amp; Recently Unplayed</title>
		<link>http://patjack.co.uk/itunes-random-shuffle-recently-unplayed/</link>
		<comments>http://patjack.co.uk/itunes-random-shuffle-recently-unplayed/#comments</comments>
		<pubDate>Thu, 26 Nov 2009 22:23:20 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Apps]]></category>
		<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[itunes]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[os x]]></category>
		<category><![CDATA[shuffle]]></category>
		<category><![CDATA[snow leopard]]></category>

		<guid isPermaLink="false">http://patjack.co.uk/?p=273</guid>
		<description><![CDATA[Listening to music whenever at my Mac, I&#8217;ve come to realise iTunes shuffle doesn&#8217;t actually shuffle as you might expect.
That is, it&#8217;s not completely random. Tracks are selected based on skip count and play count.
If you&#8217;ve skipped a track a few times, it&#8217;s less likely to be played in shuffle mode than those with a [...]]]></description>
			<content:encoded><![CDATA[<p>Listening to music whenever at my Mac, I&#8217;ve come to realise iTunes shuffle doesn&#8217;t actually shuffle as you might expect.<br />
That is, it&#8217;s not completely random. Tracks are selected based on skip count and play count.<br />
If you&#8217;ve skipped a track a few times, it&#8217;s less likely to be played in shuffle mode than those with a higher play count.</p>
<p>Now, in need of some kind of method to make sure ALL of my tracks get played (I had some un-played from over a year ago because of iTunes&#8217; lack of shuffling) I set up my own custom smart playlist to sit alongside the &#8216;Recently Played&#8217; playlist.</p>
<h3>Recently Unplayed</h3>
<p>This is a fairly simple filter that does what it says on the tin.</p>
<p>I set up the filter as below:</p>
<div id="attachment_281" class="wp-caption aligncenter" style="width: 510px"><img src="http://patjack.co.uk/wp/wp-content/uploads/2009/11/filter.jpg" alt="My Recently Uplayed Playlist" title="Smart Playlist Filters" width="500" height="240" class="size-full wp-image-281" /><p class="wp-caption-text">My Recently Uplayed Playlist</p></div>
<p>
The last 3 filters just get rid of the junk and make sure it&#8217;s only music. You must make sure &#8216;Live updating&#8217; is ticked.</p>
<p>Now, I can listen to my music on a 40 day or so (for me) rota, with about 50 songs in my playlist at any one time; and this playlist is still on shuffle so it&#8217;s never the same <img src='http://patjack.co.uk/wp/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> <br/><br />
If you&#8217;re thinking &#8216;but I like the way iTunes works. I don&#8217;t want to listen to the tracks I&#8217;ve skipped!&#8217;, then my reasoning would be DELETE THEM!</p>
<p>Hope this helps someone&#8230; it took me a while and a bit of searching to find out that iTunes (and apparently iPods as well) don&#8217;t really have a random shuffle.</p>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/itunes-random-shuffle-recently-unplayed/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Wild Camping in France</title>
		<link>http://patjack.co.uk/wild-camping-france/</link>
		<comments>http://patjack.co.uk/wild-camping-france/#comments</comments>
		<pubDate>Wed, 07 Oct 2009 18:36:04 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[camping]]></category>
		<category><![CDATA[france]]></category>

		<guid isPermaLink="false">http://tyddynadda.co.uk/design/?p=232</guid>
		<description><![CDATA[Wild camping is one of those things that many people want to do, but are scared of trying as they don&#8217;t know what to expect.
It doesn&#8217;t help that the internet is bare (for once!) of information on the matter, and there don&#8217;t seem to be any guides or tips &#8211; probably because it&#8217;s &#8216;technically&#8217; illegal.


Having [...]]]></description>
			<content:encoded><![CDATA[<p>Wild camping is one of those things that many people want to do, but are scared of trying as they don&#8217;t know what to expect.<br />
It doesn&#8217;t help that the internet is bare (for once!) of information on the matter, and there don&#8217;t seem to be any guides or tips &#8211; probably because it&#8217;s &#8216;technically&#8217; illegal.
</p>
<p>
Having wild-camped with my sister and friend for the first time in France for 2 weeks, this summer (&#8216;09) I&#8217;m fairly clued up as to the dos and don&#8217;ts and also a lot less scared as to what might happen!
</p>
<h3>
Here&#8217;s a recap of my experiences;<br />
</h3>
<h4 style="padding-left:30px;">Camping Spots</h4>
<p><span style="color:#006600;font-style:bold;padding-left:50px;">The Good</span></p>
<ul class="uls">
<li>Picnic (or Pique-nique in French) spots</li>
<p>These are generally quite easy to find, and often offer great camping spots with benches for cooking / eating and sometimes toilets! Most of the times we followed a picnic sign we ended up in a secluded spot that was generally quiet after 20h00.</p>
<li>Lakes &#038; Other geographical features</li>
<p>Tying in with the idea of picnic spots, these areas generally have a fair number of picnic spots. If not, then lakes and other large geographical features tend to be away from built up areas and offer spectacular places to camp for the night.<br />
<div id="attachment_388" class="wp-caption aligncenter" style="width: 199px"><a href="http://patjack.co.uk/wp/wp-content/uploads/2009/10/SNC13444.jpg"><img src="http://patjack.co.uk/wp/wp-content/uploads/2009/10/SNC13444-189x300.jpg" alt="Don&#039;t worry about the signs" title="Don&#039;t worry about the signs" width="189" height="300" class="size-medium wp-image-388" /></a><p class="wp-caption-text">Don't worry about the signs</p></div></p>
<li>Forests &#038; Forest Track</li>
<p>Another good one here, as there&#8217;s shelter and they&#8217;re often pretty close to life so you&#8217;re not stuck out in the middle of nowhere. You do need to look out for signs of activity though! A busy forest being cut for logging is not good (see below!)</p>
<li>Farmers!</li>
<p>We only ever did this once and it turned out well. If you&#8217;re ever stuck, just go knock on someone&#8217;s door (hopefully you can speak the language!) and ask if you can camp or if they know of anywhere to go. We did this one night and were directed to a nunnery &#8211; the best camping spot we found!
</ul>
<div id="attachment_387" class="wp-caption aligncenter" style="width: 234px"><a href="http://patjack.co.uk/wp/wp-content/uploads/2009/10/SNC13920.jpg"><img src="http://patjack.co.uk/wp/wp-content/uploads/2009/10/SNC13920-224x300.jpg" alt="Camping at the nunnery" title="Camping at the nunnery" width="224" height="300" class="size-medium wp-image-387" /></a><p class="wp-caption-text">Camping at the nunnery</p></div>
<p><span style="color:#ff0000;font-style:bold;padding-left:50px;">The Bad</span></p>
<ul class="uls">
<li>Tracks or People&#8217;s driveways</li>
<p>Yes, as stupid as it might sound this did happen. You&#8217;d probably think &#8220;who in their right mind would camp next to someone&#8217;s house, on their land?&#8221; and the answer would be <strong>YOU</strong>, if light was fading, you were hungry and just wanted somewhere to sleep.</p>
<li>Anywhere showing recent signs of activity</li>
<p>We came across these spots a few times. Vineyards, forests with logging going on are all not good! This is really only relevant for places you *shouldn&#8217;t* really be. Picnic spots show signs of activity, but are generally accepted for camping.
</ul>
<p>
This brings up the important point that <strong>you shouldn&#8217;t leave it too late to start looking for camping spots</strong>. We did several times, and it mostly meant an uncomfortable night&#8217;s sleep (although it did pay off once, leading us to a nunnery!)
</p>
<h4 style="padding-left:30px;">Transport</h4>
<p>Now we did all of this with a trusty 306 <strong>car</strong> and it would have been hell without it.<br />
I guess you could do it on foot, but it would make life a lot more difficult &#8211; if you found yourself in a dodgy area with dusk approaching you&#8217;d be stuffed.</p>
<h4 style="padding-left:30px;">Accommodation &#038; Cooking</h4>
<p>We invested in <strong>Quechua</strong> (from Decathlon) pop-up tents which, after 2 weeks of setting up camp at dusk and leaving at dawn were a godsend (literally take 10 seconds to put and AND down!). I&#8217;d recommend these tents to anybody who&#8217;s camping anywhere; they&#8217;re cheap and extremely cheerful.<br />
<br />
We also bought a portable gas stove &#8211; not one of the cheap screw-on tops for gas canisters, but the more sturdy black-box gas stoves for ~£12.99.<br />
<br/>One of the Campingaz CP250 gas cartridges (long, tall and thin) would last about 3-4 hours of cooking, just over a week.<br />
Incase you&#8217;re worried. These CP250 gas cartridges, as well as other CP206bp cartridges can be bought in France, and I guess most of Europe.
</p>
<h4 style="padding-left:30px;">Facilities</h4>
<p>Generally, we didn&#8217;t have many problems with being smelly or dirty &#8211; we&#8217;d stay in a campsite every few days to clean up, or go to a beach and wash. In France there&#8217;s almost always a shower at the beach.
</p>
<h3>Outcome</h3>
<p>I&#8217;d recommend wild-camping to anyone. You won&#8217;t get pestered by the law enforcers as long as you&#8217;re tidy and quiet.<br />
It&#8217;s a great experience, and best of all &#8211; it&#8217;s <strong>free</strong>!</p>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/wild-camping-france/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Toggle screensaver password applescript</title>
		<link>http://patjack.co.uk/toggle-screensaver-password-applescript/</link>
		<comments>http://patjack.co.uk/toggle-screensaver-password-applescript/#comments</comments>
		<pubDate>Fri, 28 Nov 2008 17:17:29 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[applescript]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[os x]]></category>
		<category><![CDATA[quicksilver]]></category>
		<category><![CDATA[screensaver]]></category>
		<category><![CDATA[snow leopard]]></category>

		<guid isPermaLink="false">http://tyddynadda.co.uk/design/?p=77</guid>
		<description><![CDATA[This doesn&#8217;t seem to be working on Snow Leopard. I&#8217;ll look into this and hopefully make a new post!
Recently, I&#8217;ve been looking for a script to toggle my screen-saver password for my MacBook.
While out and about I want to make sure my Mac is safe from stray fingers by making sure a password is required [...]]]></description>
			<content:encoded><![CDATA[<h2 style="color:#ff0000">This doesn&#8217;t seem to be working on Snow Leopard. I&#8217;ll look into this and hopefully make a new post!</h2>
<p><p>Recently, I&#8217;ve been looking for a script to toggle my screen-saver password for my MacBook.<br />
While out and about I want to make sure my Mac is safe from stray fingers by making sure a password is required before waking, but when at home or in university there&#8217;s no need for this extra layer of protection.
</p>
<p>
Searching the web I found absolutely nothing, except a few scripts that were old and broken.</br><br />
The only solution; I decided to write my own. You can download the applescript <a href='http://tyddynadda.co.uk/design/files/script.zip' title='Toggle Screen-saver Password script'>here</a> in zip form, or view the script in your browser <a href="http://tyddynadda.co.uk/design/files/Toggle-Screensaver-Password.txt">here</a>. (Warning &#8211; it&#8217;s not the easiest thing to read!)</p>
<p>This applescript toggles the screen-saver password, and then displays a growl notification telling you whether the password has been enabled or disabled &#8211; handy if you&#8217;ve pressed it one time too many and you&#8217;re not sure if your screen is locked or not!<br />
</br><br />
If you don&#8217;t have growl installed I suggest you download it now from <a href="http://growl.info">here</a>!
</p>
<p>
If you&#8217;d prefer not to use growl, then just delete the two blocks of code between the <code><br />
tell application "GrowlHelperApp"<br />
</code> and the next <code><br />
end tell<br />
</code></p>
<p>
I used quicksilver (download it <a href="http://code.google.com/p/blacktree-alchemy/downloads/list">here</a> if you haven&#8217;t already!) to create a trigger that means I only have to press a few keys to toggle the password. Works great!
</p>
<h2 style="color:#ff0000">*** Update ***</h2>
<p>
If you&#8217;ve downloaded this script and it isn&#8217;t working, it&#8217;s probably because you have different settings in your system preferences to me. To find out what yours are open up script editor (found in Applications/Applescript) and run this script <code></p>
<p>tell application "System Events"<br />
	tell security preferences<br />
		get properties<br />
	end tell<br />
end tell</p>
<p></code><br />
Hopefully you&#8217;ll get a message in the &#8216;result&#8217; log at the bottom of the script editor. The details in here should match the details on the 3rd line which starts with <code><br />
if get properties is {require....<br />
</code> except for the first item which should stay as <code><br />
require password to wake:true,<br />
</code>
</p>
<p>Enjoy <img src='http://patjack.co.uk/wp/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<h2 style="color:#ff0000">*** Note ***</h2>
<p><p>
If you&#8217;re logged into a non-admin account, this will ask you for the password every time. Annoying, but hopefully bearable!</p>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/toggle-screensaver-password-applescript/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Preloading images with css</title>
		<link>http://patjack.co.uk/preloading-images-with-css/</link>
		<comments>http://patjack.co.uk/preloading-images-with-css/#comments</comments>
		<pubDate>Thu, 25 Sep 2008 07:03:02 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://tyddynadda.co.uk/design/?p=71</guid>
		<description><![CDATA[The order in which images load when viewing a website fis always a tricky thing to get right. Usually, if you have any sort of javascript gallery for viewing images, these images will load first (as javascript normally loads first). This is always a pain if the main layout images have not yet loaded &#8211; [...]]]></description>
			<content:encoded><![CDATA[<p>The order in which images load when viewing a website fis always a tricky thing to get right. Usually, if you have any sort of javascript gallery for viewing images, these images will load first (as javascript normally loads first). This is always a pain if the main layout images have not yet loaded &#8211; you&#8217;ll get the javascript gallery appearing with none of the layout images.</p>
<p>There are plenty of solutions out there to set the order of image loading, and most solutions use javascript. Now to me, this is like trying to fight fire with fire; solving the problem of certain javascript images loading first with yet more javascript. But what&#8217;s wrong with javascript, surely a little more won&#8217;t harm anyone.<br />
Well, javascript means more work for the client&#8217;s computer and makes loading times (only a fraction) slower. Also, if you&#8217;re not that familiar with javascript, is can be quite daunting to keep adding this.object(); and that.var=10; to your code.</p>
<p>I&#8217;ve come up with a far simpler and easier method to solve the problem using only valid CSS and good old HTML.</p>
<p>My trick uses the <strong>display:none;</strong> style.</p>
<p>What you need to do is add the img tag:</p>
<div class="code"><code>&lt;img src="images/my_image.jpg style="display:none;" alt="My brilliant image" /&gt;</code></div>
<p>straight after the opening &lt;body&gt; tag. This will be the first thing your browser picks up, meaning it should be the first thing your browser loads (even though it&#8217;s not displayed!) Now when the image crops up again later on in the source, it will have already been loaded into the cache and can be displayed instantly.</p>
<p>A simple, valid, cross-browser compliant solution.</p>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/preloading-images-with-css/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Matt Berry&#8217;s &#8216;Get a Mac&#8217; ad</title>
		<link>http://patjack.co.uk/get-a-mac/</link>
		<comments>http://patjack.co.uk/get-a-mac/#comments</comments>
		<pubDate>Tue, 09 Sep 2008 11:05:32 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[comedy]]></category>

		<guid isPermaLink="false">http://tyddynadda.co.uk/design/?p=32</guid>
		<description><![CDATA[Snuff Box is another great comedy from British comedian Matt Berry and Yankee Rich Fulcher. If you&#8217;re into The Mighty Boosh then you&#8217;ll love this as well.
While watching one of the episodes, I think I may have come across what could (and should) be Apple&#8217;s next TV ad.

Note: Clip may contain some swearing and violence. [...]]]></description>
			<content:encoded><![CDATA[<p>Snuff Box is another great comedy from British comedian Matt Berry and Yankee Rich Fulcher. If you&#8217;re into The Mighty Boosh then you&#8217;ll love this as well.<br />
While watching one of the episodes, I think I may have come across what could (and <i>should</i>) be Apple&#8217;s next TV ad.
</p>
<p style="padding:10px 0 0 40px"><b>Note: Clip may contain some swearing and violence.<br /> Snuff Box is not for the faint hearted!</b></p>
<div style="padding: 10px 0 0px 20px">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="285" width="450"><param name="src" value="http://tyddynadda.co.uk/design/wp/wp-content/uploads/get_a_mac.mov"><param name="autoplay" value="false"><param name="type" value="video/quicktime" height="285" width="450"><embed src="http://tyddynadda.co.uk/design/wp/wp-content/uploads/get_a_mac.mov" height="285" width="450" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"><br />
<span style="font-style: italic;">Duration: 52s;   File size: 4.7Mb</span>
</div>
<p></object></p>
<p>Unfortunately there&#8217;s only ever been one series of Snuff Box, which was broadcast in Feb 2006. But the good news is that it was released on DVD on June 16, 2008.<br />
<a href="http://en.wikipedia.org/wiki/Snuff_box">Here&#8217;s</a> the wiki article, <a href="http://www.imdb.com/title/tt0775400/">here&#8217;s</a> the IMDb entry, and you can buy it from Amazon.co.uk <a href="http://www.amazon.co.uk/Snuff-Box-Michael-Cumming/dp/B00153NOR2?ie=UTF8&#038;tag=firefoxbrowser-21&#038;s=dvd&#038;qid=1220959215&#038;sr=8-1">here</a>.</p>
<hr />
<h3>Making the Movie</h3>
<p>For those of you who might be interested; the ad was (obviously!) made on a Mac using Final Cut Pro. </p>
<p>It was compressed using Compressor, and Apple&#8217;s default &#8216;H.264 800Kbs Streaming&#8217; setting. The change I had to make was to the height and width, because the Snuff Box movie clip was in 16:9 aspect ratio whereas the default for Apple&#8217;s setting is 4:3 aspect ratio.</p>
<p>The background &#8216;Get a Mac&#8217; music was downloaded from <a href="http://www.gscottolson.com/weblog/2007/08/07/apple-ad-music/">this</a> blog, the Snuff Box clip came from Episode 5 of Series 1 (about 10 minutes in) and the final picture of an iMac came from Apple&#8217;s own advert.</p>
<p>Putting them all together was simple enough, except the original &#8216;Get a Mac&#8217; music was too short so I had to loop it a few times so that it would end the same time as the clip did.</p>
<p>
Final Cut Pro is pretty easy to use, and there&#8217;s always Google if you&#8217;re completely stumped.
</p>
<h2>A few things worth mentioning;</h2>
<ul>
<li>I imported the section I wanted from the Snuff Box episode by opening it in Final Cut Pro, setting the Mark in and Mark Out points (shortcuts &#8216;i&#8217; and &#8216;o&#8217; respectively) then dragging the clip to my new Final Cut Pro project.</li>
<li>I managed to remove the black lines (at the top &#038; bottom) from the Snuff Box clip by changing the height in the sequence&#8217;s setting after importing. To do this just right click / CMD click the sequence (usually called &#8216;Sequence 1&#8242;), clicking &#8216;Settings&#8230;&#8217; and changing the dimensions under the general tab.</li>
<li>Reducing the volume of the background music was done by double clicking it in the timeline and reducing the level to around -15dB.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/get-a-mac/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://tyddynadda.co.uk/design/wp/wp-content/uploads/get_a_mac.mov" length="4729184" type="video/quicktime" />
		</item>
		<item>
		<title>Integrating thickbox with imageflow</title>
		<link>http://patjack.co.uk/integrating-thickbox-with-imageflow/</link>
		<comments>http://patjack.co.uk/integrating-thickbox-with-imageflow/#comments</comments>
		<pubDate>Tue, 05 Aug 2008 07:07:05 +0000</pubDate>
		<dc:creator>Patrick</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[imageflow]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[thickbox]]></category>

		<guid isPermaLink="false">http://tyddynadda.co.uk/design/?p=4</guid>
		<description><![CDATA[Update: Modified to work with version 1.2 of imageflow
- a simple hack
If you already use thickbox on your site, there&#8217;s a simple way to integrate it with the ImageFlow script by Finn Rudolph.
Step 1
Make sure you have the thickbox.js, jquery.js and thickbox.css scripts uploaded to your server, and referenced in the head of your web [...]]]></description>
			<content:encoded><![CDATA[<h2 style="color:#FF0000;">Update: Modified to work with version 1.2 of imageflow</h2>
<h2>- a simple hack</h2>
<p>If you already use thickbox on your site, there&#8217;s a simple way to integrate it with the <a href="http://imageflow.finnrudolph.de/">ImageFlow</a> script by Finn Rudolph.</p>
<h2>Step 1</h2>
<p>Make sure you have the thickbox.js, jquery.js and thickbox.css scripts uploaded to your server, and referenced in the head of your web page.</p>
<div class="code"><code>&lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript" src="js/thickbox.js"&gt;&lt;/script&gt;<br />
&lt;link rel="stylesheet" type="text/css" href="styles/thickbox.css" media="screen" /&gt;</code></div>
<h2>Step 2</h2>
<p>Change the longdesc attribute for each image in the imageflow div to:</p>
<div class="code"><code>javascript:tb_show( 'caption',  'images/image.jpg', 'slideshow1' )</code></div>
<p>where &#8216;caption&#8217; is the caption of the image and &#8216;images/image.jpg&#8217; is the URL of the image. Unfortunately the &#8217;slideshow1&#8242; &#8211; gallery option doesn&#8217;t seem to work with this implementation. I&#8217;m looking into it, but in the mean time if you have any ideas let me know!</p>
<p><!-- Note: the imageGroup option can be left blank if you do not want thickbox to add the images to a group. Setting it  will allowing you to click prev / next while in thickbox to scroll through your images. --></p>
<h2>Step 3</h2>
<p>Small CSS fixes: Open thickbox.css, and change the z-index of #TB_window to  10200 (higher than 10002). The z-index of the #scrollbar and #slider in imageflow.css are 10001 and 10002 respectively. #TB_window must have a z-index higher than both of these.</p>
<p>Change the z-index of #TB_overlay to 10199. This is to make sure the (grey) background is on top of the slider and scrollbar as well.</p>
<p><del datetime="2009-12-15T09:31:56+00:00">You also need to change the &#8216;img&#8217; style in imageflow.css.<br />
Open it up and find</del></p>
<div class="code"><code><del datetime="2009-12-15T09:31:56+00:00">img {<br />
position:absolute;<br />
top:0px;<br />
border:none;</del><br />
}</code></div>
<p><del datetime="2009-12-15T09:31:56+00:00">add</del></p>
<div class="code"><code>#images</code></div>
<p><del datetime="2009-12-15T09:31:56+00:00">just before it.<br />
</del><del datetime="2009-12-15T09:31:56+00:00">This will also save you any trouble in the future, because if you have other images on your web page, then having imageflow define the styles for all images is not a good idea!</del><br />
Finn has updated his CSS removing this slip!</p>
<h2>Step 4</h2>
<p>There is no step 4 <img src='http://patjack.co.uk/wp/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /><br />
You can preview my hack <a href="http://patjack.co.uk/design/websites/">here</a></p>
<p>OR &#8211; to make your life even easier &#8211; you can download the whole package <a href="http://patjack.co.uk/files/imageflow1.2_thickbox">here</a> [88Kb]</p>
]]></content:encoded>
			<wfw:commentRss>http://patjack.co.uk/integrating-thickbox-with-imageflow/feed/</wfw:commentRss>
		<slash:comments>29</slash:comments>
		</item>
	</channel>
</rss>
