After many attempts to remedy this, I finally figured out the issue was with the font being used in this field. For some reason, the ‘dot’ character that is usually used could not be used by IE, even though it’s actually present in the font and my font-stack provided a good few alternatives just in case there might be any issues. So, I added one simple rule to my CSS and it fixed the issue:

input[type="password"] {
	font-family: sans-serif;
}

I will be adding this to all projects from now on, and so should you.

Here’s an example:

View it on BrowserStack

Check out this Pen!

On a technical note, I used the brilliant Entypo icon font but also added to it because it lacked a couple of icons. I added a Pinboard logo, a Codepen logo and the new Github logo.

Fix it

Go to the ‘Network’ tab (in dev tools), right click and select ‘Clear browser cache’, then close any open files in the ‘Sources’ tab. Now, refresh the page and that’s it – source maps updated!

1.

2.

Let me know if that worked for you, or if there’s another way to fix this issue.

TL;DR

This is my ‘recipe’ for staying on top of web development trends, the focus is on Javascript, HTML, CSS, Responsive Web Design and Accessibility. Grab the full list of links here:
pinboard.in/u:MrMartineau/t:on-staying-current/

Podcasts

Javascript Jabber

A weekly javascript podcast presented by Joe Eames, Merrick Christensen, Jamison Dance and Charles Max Wood. They recently featured a show which gave me the idea for this blog post, their’s was purely javascript-based. Shows are typically over an hour long and focus on one topic; the discussions are very useful for gaining a high level understanding of a particular subject making it easy to find out more afterwards. Each show is transcribed which make it very easy to find the site they might have been discussing during the show.

The Javascript Show

Another weekly javascript podcast; this time presented by Peter Cooper and Jason Seifer. Shows are typically 20 minutes long and usually feature a roundup of recent javscript news and plugin releases.

ShopTalk

A weekly show about front end web design, development and UX presented by Chris Coyier and Dave Rupert. I listen to this show sporadically but when I do I’m always impressed with the range of topics and in-depth understanding from all involved.

The Breakpoint with Paul Irish and Addy Osmani

From Google Developers Live comes a not-very-often podcast from some great developers, Paul Irish and Addy Osmani. This podcast usually delves into the Chrome devtools to help developers make their sites for performant.

HNPod

Hosted by Michael Mahemoff this podcast discussed the recent hot topics on Hacker News. The topics are always varied and the guests are always great. Each episode is approximately 50 minutes long.

Other notable podcasts:

• Fripfrap
• The Changelog
• The Gently Mad
• The Big Web Show
• Happy Monday

Twitter accounts

• @brad_frost – Brad Frost: Responsive web design guru
• @addyosmani – Addy Osmani: Chrome dev relations
• @paul_irish – Paul Irish: Chrome dev relations
• @codepo8 – Christian Heilmann: Mozilla Developer Evangelist
• @desandro – David Desandro: Designer at Twitter, creator of jQuey Masonry and Isotope
• @newsycombinator – Hacker News bot
• @mozhacks – Official Mozilla account for web developers
• @brendaneich – Brendan Eich: Inventor of Javascript
• @leaverou – Lea Verou: Developer Relations at the W3C
• @github_js – A news feed of JavaScript Github repos
• @simurai – Simon … (no idea what his last name is): CSS experimenter
• @lukew – Luke Wroblewski: Mobile guru
• @adactio – Jeremy Keith
• @csswizardry – Harry Roberts

I also maintain some Twitter lists:

• Javascript
• Front-end
• HTML
• CSS

News, Inspiration and Blogs

Codepen

Created by Chris Coyier, this site is like Dribbble but for front-end developers – I love it. It usually features cool demos and experiments with CSS and Javascript; keep checking it to see what can be done with the latest client-side code.

Dribbble

Dribbble is a smashing community for giving and receiving feedback on work-in-progress designs but also for research; you can search for buttons and get a inspiration for hundreds of different style.

A List Apart

The blog for people who make websites. It has been around for years and never fails to produce top notch content.

CSS Tricks

Chris Coyier’s popular blog about web development, not just CSS. He regularly writes in-depth about the minutae that you or I might overlook, the recent post on SVG is no exception.

Smashing Magazine

Extremely popular web design and development blog. There’s a constant stream of high quality content

HTML5 Rocks

Brilliant blog featuring in-depth articles into various cutting edge web technologies. Some of my favourite posts are the case studies, where the author inspects the code on a new website showing us how its done

Hacker News

General tech, startup and web development news

Designer News

The flipside to Hacker News. – for designers..

Decodering

Great little blog for news and developments, its always up-to-date (on average about 1 post per day) and often has links that no one else seems to find.

CSS Wizardry

This is Harry Roberts’ blog about CSS, responsive web design and other web topics.

Codrops

They always post cool, cutting-edge stuff.

Reddit

Check out: /r/javascript, /r/webdev, /r/html5, /r/css & /r/browsers. There are many more, just search Reddit.

Newsletters

Javascript Weekly

Curated by Peter Cooper of The Javascript Show fame, this weekly newsletter always produces great Javascript content. Have a look at the most recent (at time of writing) issue: javascriptweekly.com/archive/90.html

Web Design Weekly

‘Just pure awesome link to the best new and articles..’ – I agree. Subscribe now.

Links for light reading

Curated by Russ Weakley, this newsletter is a very reliable source of links to a wide range of web development and accessibility subjects. Have a look at the most recent (at time of writing) issue:“www.maxdesign.com.au/2013/03/05/some-links-403/”:http://www.maxdesign.com.au/2013/03/05/some-links-403/

HTML5 Weekly

Another weekly newsletter by Peter Cooper, this time focusing on HTML5 and its related technologies. Have a look at the most recent (at time of writing) issue: html5weekly.com/archive/78.html

Github Archive

Ever wondered what the most popular Github repos are? No, nor had I until I found this site.. Every day I get sent a list of all the top new and top watched repositories for the past 24 hours. The repositiories listed are not always front-end related but often are and I find this very useful because there’s always something that I haven’t seen before. Have a look at the most recent (at time of writing) issue: us5.campaign-archive1.com/?u=439aa16a39e4b10e0b65ff2ef&id=133998bbdb

Responsive Design Weekly

Responsive web design news and interviews.

Sidebar – The best design links, every day.

Started by Sacha Grief, Sidebar is a list of the 5 best design links of the day. But unlike a regular linkblog, it’s collaborative and manually curated by a couple great editors. I like it because of the breadth of content and styles.

CSS Weekly

A new addition to my ever-increasing list of newsletters, CSS Weekly, curated by Zoran Jambor, always produces interesting CSS content. Have a look at the most recent (at time of writing) issue: css-weekly.com/issue-49/

W3C Public Digest

Weekly digest of W3C news and trends

Jacob Nielson’s Alertbox

Jakob Nielsen’s articles about interface usability and website design. He is a highly regarded source for UX and his Alertboxes always delve into the heart of the matter.

No RSS love?

You might have noticed that I did not mention any RSS feeds here. The reason is because although I have a ridiculously organised Google Reader account, I just don’t check it often enough. If you are hankering after a bunch of RSS feeds to add to your reader, you’re in luck. Paul Irish has created 3 lists for you to import into your favourite reader, check them out here

Can you add to my list

Please let me know what you think of this list, is yours similar?

It is definitely a work in progress & there are still features I would like to add but I thought I should get a sense check from you guys to see if its worth pursuing.

As well as the usual grid, centred columns, source ordering & offsetting, I have added two features: Shunting & Splitting.

Shunts (demo link)

These are, typically, small columns on the end of a row that ‘shunt’ down to their own row when the viewport dimensions are reduced. The other columns in that row can then be resized to fill the leftover space from the shunted column.

Splits (demo link)

These are columns that sit beside each other on wider viewports but when the viewport dimensions are reduced, they stack on top of each other. This might seem like ‘normal’ responsive grid behaviour but the rest of the grid is still enforced (for want of a better word).

Both these things allow the layout to adapt in a more natural way, that traditionally has not been available to us.

By the way, Splits can be shunted too.

Caveat

I should caveat this by saying that there is lots more work to be done, I have repeated some code in different media-queries which I don’t want to do – I have big plans for this grid. I’m also not using CSS that only works in Chrome Canary, you can use this today if you wanted to.

Upcoming features

One feature that I would like to implement is to automatically name each media-query. I want to use javascript to find all the breakpoints & then store them in an array, then add a class to the body tag so I can change layout depending on how wide the viewport is. I like the idea of naming media-queries so I will explore the possibilities in the coming weeks.

If anyone has any thoughts, ideas or suggestions I would really appreciate it. Please fork it on Github too

• Demo site – http://mrmartineau.github.com/Choreographic-Grid/test.html
• All features on one page – http://mrmartineau.github.com/Choreographic-Grid/index.html

I would like to gather a collection of scripts/plugins/techniques to use when building a responsive site – things like carousels & image sliders – so that when I need a plugin for a particular purpose, I know which one has been user tested &, most importantly, vouched for.

Examples of the type of things I’m referring to could be: full-screen/full-width/fluid-width media (images, video), carousels, image sliders, image galleries, text resize/reflow, tabs, grid systems… you get the idea. These scripts should also have lean markup & good fallbacks should the not have javascript turned on.

Slideshow/Carousels

• 1. jQuery Slideshow
• 2. jQuery Cycle
• 3. Flex Slider

Frameworks/Boilerplates

• 1. Boost – my boilerplate framework which includes multiple css grids (1kb, Inuit etc) with responsive layouts
• 2. Skeleton framework – “A Beautiful Boilerplate for Responsive, Mobile-Friendly Development”
• 3. Bootstrap – Twitter’s toolkit
• 4. Less Framework – CSS grid framework
• 5. The Semantic Grid System – CSS grid using LESS
• 6. SimpleGrid

‘Media’ delivery

• 1. Sencha.io image delivery – resizes images on the fly depending on which device the user is using
• 2. Responsive Image – An Experiment with Mobile-First Images that Scale Responsively & Responsibly (info)

Browser compatibility

• 1. Respond.js – A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Needs more work to be useful in a responsive layout:

• 1. Galleria – image gallery script

I need your help & input

In order for this to be of any use, I need your input. Please comment with any links or suggestions etc so that we can begin to collate

Over the past few weeks I have been trying out the beta of Sublime Text 2, a cross-platform text editor for Windows, Linux & OS X. I am not going to give an in-depth review of the app, many people have done that before me, but suffice it to say, I love it & think you should check it out too. This post’s purpose is to help enhance your experience of it by providing info for extending & customising the app.

It should be known that I am a front-end developer so my suggestions will reflect that.

Plugins / Packages

1. Package Control by Will Bond

The first package (as they’re known in Sublime), you should install is Package Control. It makes installing, updating & keeping track of packages painless. To install this package, follow these instructions:

Copy & paste the following into the Sublime Text 2 console. This is accessed via the ctrl+` shortcut.

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

Note: please check the Package Control website for details prior to installing the package – as a rule, one should make sure they have the latest version of Sublime before installing.

Installing packages through ‘Package Control’

Bring up the Sublime prompt by pressing super+shift+p (super = Cmd (on Mac) or Windows (on PC)), start typing the word package & you should get a list of all the commands relating to installing, removing & managing packages. (Cheers Will)

Navigate to the ‘Package Control:Install Package’ item & hit enter, then browse the list & select the ones you want. After you paste the provided command into the console, you need to restart Sublime Text to finish the installation. Once Package Control is installed, future package installations are instantaneous.

2. SublimeCodeIntel

Code intelligence plugin ported from Open Komodo Editor. A definite must for any coder. Install this through ‘Package Control’

3. ZenCoding

Zen meets Sublime. Again, a definite must for any coder. Install this through ‘Package Control’.

4. HTML5 by me

I ported the HTML5 bundle from Textmate over to Sublime, this is the result. Install this through ‘Package Control’.

5. Placeholders by me

Lorem ipsum, dummy content, placeholder HTML. This little package has what you need. Install this through ‘Package Control’.

6. jQuery (incomplete) by me

Another port from a Textmate bundle, it is still a work in progress but does work & if anyone feels like lending a hand, I don’t mind. Download the source from Github & place the contents into a ‘jQuery’ folder in ‘/Application Support/Sublime Text 2/Packages’ (at least it is on a Mac!).

7. SublimeTagmatcher by pyparadigm

If you click inside the begin tag, it will highlight the end tag, and vice versa. Check out below.

8. Elastic Tabs Stops by adzenith

Incredibly useful plugin to make tabstops expand or shrink to fit their contents. (More info on elastic tab stops)

9. Increase/Decrease number by delta_value by rmaksim

Just look at the following images:

Installation tips: Download the script & put it into a folder called ‘RMaksimSublimeText2Solutions’ within your ‘Packages’ folder. Then open Sublime, the edit the ‘Key Bindings – User’

Now paste in the key bindings from the bottom of this page

Now restart Sublime. :)

10. SideBarEnhancements by tito

Just what you’ve always wanted, a vastly improved right-click menu for Sublime! Check the

This is my current setup for my Macs:

[
	{"id": "side-bar-files-open-with",
		"children":
		[
			// Espresso
			{
				"caption": "Espresso",
				"id": "side-bar-files-open-with-espresso",
				"command": "side_bar_files_open_with",
				"args": {
									"paths": [],
									"application": "Espresso.app",
									"extensions":"css" //open all even folders
								}
			},
			// CSS Edit
			{
				"caption": "CSS Edit",
				"id": "side-bar-files-open-with-cssedit",
				"command": "side_bar_files_open_with",
				"args": {
									"paths": [],
									"application": "CSSEdit.app",
									"extensions":"css" //any file with extension
								}
				},
			{"caption":"-"},
			// Browsers
			{
				"caption": "Chrome",
				"id": "side-bar-files-open-with-chrome",
				"command": "side_bar_files_open_with",
				"args": {
									"paths": [],
									"application": "Chrome.app",
									"extensions":"html|php"  //any file with these extensions
								}
			},
			{
				"caption": "Firefox",
				"id": "side-bar-files-open-with-firefox",
				"command": "side_bar_files_open_with",
				"args": {
									"paths": [],
									"application": "Firefox.app",
									"extensions":"html|php"  //any file with these extensions
								}
			},
			{"caption":"-"},
			// Photoshop
			{
				"caption": "Photoshop",
				"id": "side-bar-files-open-with-photoshop",
				"command": "side_bar_files_open_with",
				"args": {
									"paths": [],
									"application": "Adobe Photoshop CS5.app",
									"extensions":"psd|png|jpg|jpeg|gif"  //any file with these extensions
								}
			},
			// Preview
			{
				"caption": "Preview",
				"id": "side-bar-files-open-with-preview",
				"command": "side_bar_files_open_with",
				"args": {
									"paths": [],
									"application": "Preview.app",
									"extensions":"psd|png|jpg|jpeg|gif"  //any file with these extensions
								}
			},
			{"caption":"-"},
			// Textmate
			{
				"caption": "Textmate",
				"id": "side-bar-files-open-with-textmate",
				"command": "side_bar_files_open_with",
				"args": {
									"paths": [],
									"application": "Textmate.app",
									"extensions":"html|php|js"  //any file with these extensions
								}
			},
			// Coda
			{
				"caption": "Coda",
				"id": "side-bar-files-open-with-coda",
				"command": "side_bar_files_open_with",
				"args": {
									"paths": [],
									"application": "Coda.app",
									"extensions":"html|php|js"  //any file with these extensions
								}
			}
		]
	}
]

More packages:

1. Will Bond, creator of the ‘Package control’ package has a bunch of other very useful packages one can install, my favourite being the Alignment package: wbond.net/sublime_packages/
2. github.com/Seldaek/sublime-plugins
3. Javascript Formatter – Beautify your shizzle
4. Case Conversion – Convert word to snake, camel, or pascal case
5. Prefixr – Uses the prefixr.com API to add all the various vendor prefixes & code for CSS3 – Install through Package Control
6. “GotoRecent”: – Plugin that adds a panel to reopen recently closed (deactivated) files by pressing ctrl+e (PC) or super+e (OSX) – Install through Package Control
7. BufferScroll Buffer Scroll is a simple plugin which remembers and restores the scroll and cursor positions, also the selections and foldings states – Install through Package Control
8. “AlternativeAutocomplete”: This plugin adds an autocompletion command to Sublime Text 2 that acts similarly to TextMate – Install through Package Control
9. Open Include This plugin will try to open on Sublime Text file paths found on selections when pressing “ALT+D” – Install through Package Control
10. Clipboard History Keep a history of your clipboard items. Let you paste them back in, as needed. ctrl-alt-v (PC) or ctrl-alt-super-v (OSX) – Install through Package Control
11. SaneSnippets Snippets optimized for humans, not robots – Install through Package Control
12. Sublime Text Github organisation

Keyboard Shortcuts

Most of the above plugins rely on keyboard shortcuts & it’s not always totally clear how these are handled. I add mine to my user’s Key Bindings (found by opening the file in Sublime’s prefs – ‘Key Bindings – User’). For example, here is mine in it’s entirety:

[
	{ "keys": ["super+."], "command": "close_tag" },
	{ "keys": ["super+alt+shift+a"], "command": "alignment" },
	{ "keys": ["super+alt+ctrl+a"], "command": "alignment" },
	{ "keys": ["alt+up"],  "command": "inc_dec_number", "args": { "delta": 1} },
	{ "keys": ["alt+down"], "command": "inc_dec_number", "args": { "delta": -1} },
	{ "keys": ["super+up"],  "command": "inc_dec_number", "args": { "delta": 10} },
	{ "keys": ["super+down"], "command": "inc_dec_number", "args": { "delta": -10} },
	{ "keys": ["ctrl+shift+c"], "command": "convert_to_utf8" },
	{ "keys": ["super+shift+alt+u"], "command": "UrlQuoteSelection" },
	{ "keys": ["super+shift+alt+c"], "command": "CloseTagCommand" },
	{ "keys": ["super+shift+t"], "command": "open_recent_files" },
	{ "keys": ["ctrl+alt+forward_slash"], "command": "google_it" },
	{ "keys": ["super+shift+8"], "command": "pep8_check" },
	{ "keys": ["super+."], "command": "spaces-to-tabs" },
	{ "keys": ["escape"], "command": "alternative_autocomplete", "context":
	  [
		{ "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
		{ "key": "overlay_visible", "operator": "equal", "operand": false }
	  ]
	},
	{ "keys": ["shift+escape"], "command": "alternative_autocomplete", "args": {"cycle": "previous"}, "context":
	  [
		{ "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
		{ "key": "overlay_visible", "operator": "equal", "operand": false }
	  ]
	},
	{ "keys": [""], "command": "bufmod_apply_function" },
	{ "keys": [""], "command": "bufmod_decorate"},
	{ "keys": ["super+shift+c"], "command": "color_pick" },
	{ "keys": ["ctrl+shift+b"], "command": "insert_snippet", "args": {"contents": "${TM_COMMENT_START/s*$//} ==${1/./=/g}==${TM_COMMENT_END/^s*(.+)/ $1/}\n${TM_COMMENT_START/s*$//} = ${1:Banner} =${TM_COMMENT_END/^s*(.+)/ $1/}\n${TM_COMMENT_START/s*$//} ==${1/./=/g}==${TM_COMMENT_END/^s*(.+)/ $1/}"}}
]

These are used by a variety of plugins & can be changed to whatever you like.

Also, I just found a pretty neat snippet used to create Textmate-style comment blocks. Paste this into your ‘Key Bindings – User’ file (as I have already done above).

{ "keys": ["ctrl+shift+b"], "command": "insert_snippet", "args": {"contents": "${TM_COMMENT_START/s*$//} ==${1/./=/g}==${TM_COMMENT_END/^s*(.+)/ $1/}\n${TM_COMMENT_START/s*$//} = ${1:Banner} =${TM_COMMENT_END/^s*(.+)/ $1/}\n${TM_COMMENT_START/s*$//} ==${1/./=/g}==${TM_COMMENT_END/^s*(.+)/ $1/}"}}

The comment banner looks like this:

<!--  ==========  -->
<!--  = Banner =  -->
<!--  ==========  -->

Syntax Themes

Textmate themes are compatible with Sublime. My favourite is called Made of Code. Here are a few links to download some others:

1. github.com/antlong/Textmate-Themes
2. textmatetheme.com

Customising Sublime’s UI skin

The default UI is okay, but it leaves a lot to be desired. This is remedied by installing Soda , an app ‘skin’ which features dark & light variants depending on your preference. This can be installed through the ‘Package Control’ package.

Get a new app icon

The current Sublime Text icon leaves a lot to be desired also as you can see by the image at the top of this post, especially on a Mac. Thankfully a few kind souls have taken charge & designed their own for us to use.

High-res version of original by Kronuz

Download & info

New design by Nate Beaty

Download

Cheat sheet

There was no real cheat sheet to be found so I have created a basic (read: incomplete) one on Google docs – I basically just went through the default key bindings document & pulled out all the important ones that I wanted to remember. Anyone with the link can edit the document & I encourage you all to please help me compile a list & all the key shortcuts etc so I can then create a prettier version. Check it out here

Links & useful info

1. I suggest you download the latest beta version at sublimetext.com/dev, I have never had any problems with it, & fingers crossed, neither should you.
2. sublimetext.com/forum/ – Sublime’s support forums are brilliant & very active.
3. Sublime Text Help
4. martinaspeli.net/articles/sublime-text-2-for-zope-and-plone
5. delicious.com/martineau/SublimeText2. My saved links on Delicious pertaining to Sublime
6. martinaspeli.net/articles/sublime-text-2-for-zope-and-plone. Useful blog post about working with Sublime.

I’m sure I have missed something or other, if I remember it, I will update this post.

Creating the AppleScript

Open up AppleScript Editor (Script Editor for pre-Snow Leopard users) in /Applications/Utilities and paste this script in:

delay 150 --150 seconds == five minutes
tell application "Mail"
	launch
end tell

This sets a 5 minute delay & tells Mail.app to launch (if it isn’t already) after it. If you need to add more apps, rinse & repeat. See below:

delay 150 --150 seconds == five minutes
tell application "Mail"
	launch
end tell
tell application "Twitter"
	launch
end tell
tell application "Skype"
	launch
end tell
tell application "MAMP"
	launch
end tell

Save/compile this script & save it somewhere on you machine as a script, I saved mine as ‘LoginApps.scpt’ in the Applications folder.

Make sure it loads on startup

If you’ve installed the Mac OS X dev tools, you can use the Property List Editor that’s included with them, or you can use a text editor (as it’s XML). Create the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>Name</key>
	<dict>
		<key>Label</key>
		<string>LoginApps</string>
		<key>OnDemand</key>
		<false/>
		<key>ProgramArguments</key>
		<array>
			<string>osascript</string>
			<string>/Applications/LoginApps.scpt</string>
		</array>
		<key>KeepAlive</key>
		<false/>
	</dict>
</dict>
</plist>

Save this in ~/Library/LaunchAgents/LoginApps.plist. Then when you log in, your AppleScript will be run, though it will not provide an icon on the dock, which would allow you to cancel.

Extending & Improving

If you think there are improvements to be made, please feel free to comment below so we can make this better. Twitterer @firedev & I had a brief conversation about the need for an actual app to do this job exclusively. If you’re a dev & fancy having a go, let me know, I’d love to be apart of it..

Spread the word

I think this is a useful & fairly easy solution to quite a common problem. If you know anyone that may benefit from this, please send them this way. :-)

Thanks

Of course I could not have done anything without the supreme knowledge of Scott on Super User – he basically did the entire thing… :-)

Among other things, BOOST uses the ‘mobile-first’ methodology coined by Luke Wroblewski (find out more, please read the excellent post ‘Mobile First’ at http://www.lukew.com/ff/entry.asp?933). It uses the reset from the HTML5 Boilerplate, a bunch of stuff from Inuit.css.

Grids

There are a number of different grid options to choose from: the 1kbgrid, the Tiny Fluid Grid & the grid used in Inuit.css.

Inspiration & thanks

• The HTML5 Boilerplate
• Inuit.css
• 320 and Up
• Formalize

Find out more

To find out more, please download a copy of the framework on Github

Kind of NSFW but the video is crazy & the music is brilliant!

I designed the site, the branding, coded the site & shot all the photos that you see with the exception of the actual bike shots; those were taken by the legend Julian Marshall.

If you live in London & are thinking about getting a bike, I urge you to check-out a Soho Fixed bike. To stay up-to-date with bike releases & info you can follow @sohofixed on Twitter, become a fan on Facebook or signup to the list in the footer of the site.

Technical notes

The site is built on Textpattern & as any self-respecting front-end developer should, I used a bunch of the new HTML[5] a sprinkling of CSS3 around the site.

Header & Nav

The header & nav has an animated background. I used webkit’s keyframe animation, see code for it below:

@-webkit-keyframes bg-slide {
	0% { background-position: left top;
	}
	25% { background-position: right center;
	}
	50% { background-position: left bottom;
	}
	75% { background-position: right 70%;
	}
	100% { background-position:left top;
	}
}
header {
     -webkit-animation: bg-slide 25s 2 ease-in;
}

Nav hover effect

It is so simple but looks great; on hover, I increased the letter-spacing (notice the different easing on hover & mouse out), here’s the code:

nav a {
-webkit-transition: all .4s ease-in;
   -moz-transition: all .4s ease-in;
	 -o-transition: all .4s ease-in;
		transition: all .4s ease-in;
}
nav a:hover {
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
	 -o-transition: all .4s ease-out;
		transition: all .4s ease-out;
}
nav a:hover {
		background-color: rgba(255,255,255,0.7);
		letter-spacing: 10px;
}

Bike listing hover effect

For those browsers with support for CSS3 3d tranformations, I used a rather splendid flipping effect that. View it here by hovering over the bike thumbnails.

If you don’t have an up-to-date browser, go get one, or you can watch this screencast of the effect:

And that about wraps things up. Please visit the site & have a browse-around, I’d love to hear any thoughts you guys may have.

Behold the Cloze creator

Try it out yourself at martineau.tv/cloze/ & if you think it can be improved, I welcome your suggestions.

Also, I should thank a kind Stack Overflow user for giving me a hand creating this.

How?

Simply include jQuery & the Lettering.js plugin in your page & then add this jQuery script:

$(document).ready(function() {
    $("p").lettering('words');
    $("p span:nth-child(5n+5)").css({visibility:'hidden'});
});

The fiddle

Below you can see an embedded version of my findings, to view a full version go to jsfiddle.net/mrmartineau/K9aBA/embedded/result/ or try editing it yourself at jsfiddle.net/mrmartineau/K9aBA/

I decided to test this new property to see if any browsers supported it.

Results

Safari 5.0.3: No Support
Chrome 7.0.517.44: Support for block-level elements – Yay!
Opera 11: No support (and no support for CSS multi-columns)
Firefox 3.6.13: No support

All tests have been carried out on a Mac, I haven’t been able to test any Windows versions of these browsers, so please let me know if you have any results & I will update this post.

The fiddle

Below you can see an embedded version of my findings, to view a full version go to jsfiddle.net/mrmartineau/zebbm/embedded/result/ or try editing it yourself at jsfiddle.net/mrmartineau/zebbm/

Download them at the Textgarden

Prometheus Theme v0.9 download
Stung Theme v0.9 download

Following on the Coda theme, I thought I’d share my Seestyle setup, which is basically the Blackboard theme, from Textmate, with a few tweaks.

These tweaks take inspiration from Jason Robb’s Coda Seestyles where PHP code colours are warm & HTML code is cooler.

PHP-HTML Seestyle

HTML Seestyle

CSS Seestyle

Javascript Seestyle

jQuery Seestyle

XML Seestyle

Actionscript Seestyle

Download

The seestyles are now hosted on Github, click here to visit the repository & download these HTML5 Coda Clips now

Installation

To install, navigate to the Colours tab in Coda’s preferences, choose the relevant syntax mode then click the import button to import the specific style. You will need to do this for each syntax mode so rinse & repeat the previous instructions.

Many of these clips have been lifted from the brilliant HTML5 Boilerplate & I credit them fully for that. I have added some Coda bookmark comments (which look like <!-- !CSS --> ) to help you navigate your code.

If you are looking for the download link, scroll to the bottom of the article to find it..

Basic HTML5 Page Structure – html5⇥

A vanilla page.

<!DOCTYPE html>   
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<!--[if IE]><![endif]-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="keywords" content="" />
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width; initial-scale=1.0">
	<!-- !CSS -->
	<link rel="stylesheet" href="css/style.css?v=1">
	<!-- Uncomment if you are specifically targeting less enabled mobile browsers
	<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">  -->
	<!-- !Modernizr - All other JS at bottom -->
	<script src="js/modernizr-1.5.min.js"></script>
</head>
<!-- !Body -->
<body>
	<div id="container">
		<header>
			<ul id="nav">
				<li><a href="#nowhere" title="Home">Home</a></li>
				<li><a href="#nowhere" title="About">About</a></li>
				<li><a href="#nowhere" title="Services">Services</a></li>
				<li><a href="#nowhere" title="Contact">Contact</a></li>
				<li><a href="#nowhere" title="Pellentesque">Pellentesque</a></li>
				<li><a href="#nowhere" title="Aliquam">Aliquam</a></li>
				<li><a href="#nowhere" title="Morbi">Morbi</a></li>
			</ul><!-- /#nav  -->
		</header><!-- /header -->		
		<section id="main">		
		</section><!-- /main -->		
		<footer>
		</footer><!-- /footer -->
	</div><!--!/#container -->
	<!-- !Javascript - at the bottom for fast page loading -->
	<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
	<script src="js/plugins.js?v=1"></script>
	<script src="js/script.js?v=1"></script>
</body>
</html>

HTML5 Boilerplate Head

Taken almost completely from the HTML5 Boilerplate, but with added coda bookmark comments

<!DOCTYPE html>   
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<!--[if IE]><![endif]-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="keywords" content="" />
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width; initial-scale=1.0">
	<!-- !CSS -->
	<link rel="stylesheet" href="css/style.css?v=1">
	<!-- Uncomment if you are specifically targeting less enabled mobile browsers
	<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">  -->

Header – header⇥

<header>
</header>

Footer – footer⇥

<footer>
</footer>

Section – section⇥

<section>
</section>

Article – article⇥

<article>
</article>

Aside – aside⇥

<aside>
</aside>

Example article

<article>
	<header>
		<hgroup>
			<h1>Title</h1>
			<h2>Subheading</h2>
			<p><time class="dtstart" datetime="1992-01-12"> January 12th, 1992</time></p>
		</hgroup>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<aside>
		<blockquote cite="http://example.com/facts">
			<p></p>
		</blockquote>
	</aside>
	<footer>
		<p>By Zander Martineau</p>
	</footer>
</article>

Video with fallback – video⇥

<video autobuffer autoloop loop controls>
	<source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_400p.ogg" type='video/ogg; codecs="theora, vorbis"' />
	<source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_480p.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
	<object type="video/ogg" data="/media/video.oga" width="320" height="240">
		<param name="src" value="/media/video.oga">
		<param name="autoplay" value="false">
		<param name="autoStart" value="0">
		<p><a href="/media/video.oga">Download this video file.</a></p>
	</object>
</video>

Audio with fallback – audio⇥

<audio autobuffer autoloop loop controls>
	<source src="/media/audio.oga">
	<source src="/media/audio.wav">
	<object type="audio/x-wav" data="/media/audio.wav" width="290" height="45">
		<param name="src" value="/media/audio.wav">
		<param name="autoplay" value="false">
		<param name="autoStart" value="0">
		<p><a href="/media/audio.wav">Download this audio file.</a></p>
	</object>
</audio>

HTML5 Form – form⇥

Contains most of the various new input types

<form id="form_id" name="form_name" action="" method="post">
	<div>
		<label for="name">Name </label>
		<input type="text" name="Name" id="name" placeholder="Name" required/>
	</div>
	<div>
		<label for="upload">Upload </label>
		<input type="file" name="Upload" id="first" />
	</div>
	<div>
		<label for="email">Email </label>
		<input type="email" name="Email" id="email" placeholder="Email" />
	</div>
	<div>
		<label for="url">Url </label>
		<input type="url" name="Url" id="url" placeholder="Url" />
	</div>
	<div>
		<label for="tel">Tel </label>
		<input type="tel" name="Tel" id="tel" placeholder="+441234 5678 90" />
	</div>
	<div>
		<label for="number">Number </label>
		<input type="number" name="number" id="number" placeholder="1234567890" />
	</div>
	<div>
		<label for="date">Date </label>
		<input type="date" name="date" id="date" placeholder="20-09-2010" />
	</div>
	<div>
		<label for="datetime">Date/Time </label>
		<input type="datetime" name="datetime" id="datetime" placeholder="2010-10-15 T00:00Z" />
	</div>
	<div>
		<label for="range">Range </label>
		<input type="range" name="range" id="range" min="0" max="20" step="2" value="6"/>
	</div>
	<div>
		<label for="radio">Radio: </label>
		<input type="radio" name="radio" id="radio_one" value="one">One<br />
		<input type="radio" name="radio" id="radio_two" value="two">Two</p>
	<div>
		<label for="checkbox">Checkbox: </label>
		<input type="checkbox" name="checkbox" id="checkbox_one" value="checked">Check 1<br />
		<input type="checkbox" name="checkbox" id="checkbox_two" value="checked">Check 2<br />
	</div>
	<div>
		<label for="select">Select: </label>
		<select name="select" id="select">
			<option value="alpha">Alpha</option>
			<option value="beta" selected>Beta</option>
		</select>
	</div>
	<div>
		<label for="multiselect">MultiSelect: </label>
		<select name="multiselect" id="multiselect" multiple="multiple" size="2">
			<option value="gamma">Gamma</option>
			<option value="delta">Delta</option>
			<option value="epsilon">Epsilon</option>
			<option value="zeta">Zeta</option>
		</select>
	</div>
	<div>
		<label for="textarea">Textarea: </label>
		<textarea name="textarea" id="textarea" rows="5" cols="30">Text</textarea>
	</div>
	<div>
		<input type="submit" name="submit" value="submit" />
	</div>
</form>

Address – address⇥

<address>
</address>

Figure – figure⇥

<figure>
	<img src="http://placehold.it/350x150&text=Placeholder+image" >
	<figcaption>explanatory caption</figcaption>
</figure>

Time – time⇥

<time datetime="1992-01-12"> January 12th, 1992</time>

Time (simple)

<time>2010-04-07</time>

Mark – mark⇥

<mark></mark>

Link Prefetch – prefetch⇥

<link rel="prefetch" href="/images/chart.png">

Prev/Next/Search Links – prev⇥

<link rel="next" href="/page2.html">
<link rel="prev" href="/page1.html">
<link rel="search" href="/search">

Canvas with fallback – canvas⇥

<canvas id="my-first-canvas" width="360" height="240">
	<p>No canvas support? Have an old-fashioned image instead:</p>
	<img src="http://placehold.it/350x150&text=Placeholder+image">
</canvas>

Hgroup – hgroup⇥

<hgroup>
	<h1></h1>
	<h2>Subheading</h2>
</hgroup>

HTML5 Boilerplate .htaccess

Download here
Textpattern threw a hissy fit when I tried to embed it… :(

html5doctor.com Reset Stylesheet – reset⇥

I added the last selector to the reset because I always use it.

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
nav ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle }
label, input[type=button], input[type=submit], button { cursor: pointer }

These are not HTML5 but they come from the Boilerplate file & are very useful.

PNG Fix – png⇥

<!--[if lt IE 7 ]>
	<script src="js/dd_belatedpng.js?"></script>
	<script>
		DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images
	</script>
<![endif]-->

Asynchronous Google Analytics – ga⇥

<!-- Asynchronous Google Analytics: mathiasbynens.be/notes/async-analytics-snippet -->
<script>
	var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
	(function(d, t) {
		var g = d.createElement(t),
				s = d.getElementsByTagName(t)[0];
		g.async = true;
		g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		s.parentNode.insertBefore(g, s);
	})(document, 'script');
</script>

Download

The clips are now hosted on Github, click here to visit the repository & download these HTML5 Coda Clips now

Please let me know what you think & if you think they can be improved in any way. I know there are a few new tags missing – progress & meter for example – but I rarely need them; say the word & I’ll add them in..

Via Svpply

Original info found on the Facebook dev forums written by AgentZigzag: http://forum.developers.facebook.net/viewtopic.php?pid=256565

In a nutshell, Facebook have in their wisdom decided to combine 3 interactions into one. These interactions are:

1. Like (as in: like a status, like a photo, etc.)
2. Become a fan (as in join a page for a product, person or service)
3. Share (as in post a link to your wall etc.)

For some reason no-one at Facebook thought it would be confusing to suddenly start calling all these things “like”. “Like” on Facebook is now context sensitive and depends on where you are and what your looking at.

To take the original 3 interactions in this new context:

1. Like = Like
   1. You can still “like” the status’ of friends etc same as ever.
2. Become a fan = Like
   1. Become a fan is now like. If you are looking at a product/service/person page (e.g. http://www.facebook.com/Starbucks) “like” means to add that page to your Info tab on your profile.
   2. If you have your own website and you want to enable visitors to “like” an associated Facebook page you can use this tool: http://developers.facebook.com/docs/reference/plugins/like-box
   3. You simply find your Facebook page id, set your dimensions and generate the code.
3. Share = Like (& still share)
   1. The share function is where you post something from outside Facebook to your Facebook profile. Where share gets confusing is that Facebook have also decided “share” can be called “like”. They are two slightly different things but both fulfill the same basic function. You put them on a site external to Facebook and when someone clicks on them it will post the URL of the host page to their Facebook profile.
   2. You can find the code to create a “share” button here:
      http://www.facebook.com/share/
   3. And the code for a “like” button here: http://developers.facebook.com/docs/reference/plugins/like

Difference between SHARE & LIKE

Like is for pages
Share can be for pages but is more powerful and can be used for media (e.g. videos)

Conclusion

I know its confusing. But basically its best to think of it like this.

To have people become a fan (and therefore received updates) from your website to a Facebook page use a LIKE BOX
http://developers.facebook.com/docs/reference/plugins/like-box

To have people be able to click on something on your website and have a news item post to their wall about that page you use a SHARE WIDGET
http://www.facebook.com/share/

Or you can achieve the same result as a share button using a LIKE BUTTON
http://developers.facebook.com/docs/reference/plugins/like

Not cool Mister Ateş

The idea came from Neven Mrgan’s brilliant HTML5 Watch

Contributing yourself

Because I will not always be able to find all the latest CSS3 happenings, there is a submissions page which I would love everyone to use & will only help the site grow. But, if you think you can go one-step further than this and would like to help contribute to the site on a more regular basis, please email me about it and I will setup an author account for you.

So, go on visit CSS3 Watch now

Scoundrels Album Tracks by scoundrels

To skip all the explanation and view these icons in their entirety, click for the demo

CSS3

These icons use lots of CSS3, border-radius being the most obvious but also rotation, gradients and transform (for when an icon is hovered over).

Size?

These icons needed to be functional and useful for the web, so all dimensions are em-based so that all you have to do to change the size of the icon is just change the font-size of their containing element.

Disclaimer

I’m sure its obvious but just to be clear, these icons will not work very well in Internet Explorer.

RSS

My first idea was simply an RSS icon, it seemed easy enough and indeed it was. I created a two variations, one with the traditional orange background and one without.

Heart

Made with just two spans rotated at opposite angles.

iPhone

With a big dose of inspiration from the brilliant Helveticons icon set, I created this iPhone icon. Three spans within one container div.

Microphone

Easily the most interesting icon to code, this icon uses a few more elements than any of the others.

Block

A simple div with a rotated span within.

Triangle

One div that make uses borders to create the illusion of a triangle.

Disc, Target & Mini Target

Can & upright can

Variations on the disc and target icons; I found it quite interesting to see what happens when you changes the dimensions of their containers. If it was wider, I think the Can could be used quite effectively as a button.

Eye

Without a doubt, my favourite of all the icons, it only uses one container and a span within. I had initially tried to use one span for the larger circle shap, two spans for each of the points and another for the ‘pupil’ of the eye. I quickly realised that this was not needed and instead created a box with two very rounded corners, then I rotated it 45 degrees and inserted the inner span for the pupil. Neat huh?

An interesting discovery or maybe just my incompetence..

I tried these icons out on an iPhone and found a peculiar problem, it seems the iPhone cannot handle particularly large rounded corners, take a look at the screengrab to the left to see what I mean. Does anyone know why or if I have made an error? Please enlighten me.

I do intend on exploring this idea further, but I would love to know what everyone’s thoughts and suggestions are; can these be impoved or created using less code..?

Click for the demo

New York is invaded by 8-bit creatures

See more of these poster over at Dutch Uncle’s website

CSS3, Please! The Cross-Browser CSS3 Rule Generator

http://css3please.com/
Developed by Paul Irish and Jonathan Neal, this tool is incredibly easy to use.

CSS Border Radius

http://border-radius.com/
Developed by Jacob Bijani, the Creative Director for Tumblr.

@font-face Generator by Font Squirrel

http://www.fontsquirrel.com/fontface/generator
A very hand tool for creating proper @font-face code. Font Squirrel also provide a huge library of free-to-use fonts with @font-face code included.

CSS3 Generator

http://css3generator.com/
Developed by Randy Jensen this tool has a bunch of different generators for creating CSS3 code. This tool can create multi-column code

Western Civilisation’s Text Stroke, Text Shadows, Box Shadows, Transforms & Gradients Generators

http://westciv.com/
Western Civilisation creators of the CSS code editor, Style Master have created no less than 4 tools for generating CSS3 code.

The Text Stroke tool

http://westciv.com/tools/textStroke/index.html

The Text Shadow tool

http://westciv.com/tools/shadows/index.html

The Transforms tool

http://westciv.com/tools/transforms/index.html

The Linear Gradients tool

http://westciv.com/tools/gradients/index.html

The Radial Gradients tool

http://westciv.com/tools/radialgradients/index.html

The Box Shadow tool

http://westciv.com/tools/boxshadows/index.html

CSS3 Gradient Generator

http://gradients.glrzad.com/
Developed by Damian Galarza this tool also creates the code required for CSS3 gradients.

Please let me know if I have missed any, and also what you think of the list.

Via Minimali.st

via MXVLTR

The aim for these themes was to make the admin area much quicker and simpler to navigate and I won’t deny that wanted to make it look prettier too with the help of the brilliant, Glyphish icons. The themes are compatible with Textpattern 4.2.0+, they use a sprinkling of jQuery and CSS3 to make the admin experience that much nicer.

Theme details

The themes use some nice CSS rounded corners

Stung theme with Textpattern’s trademark #FFCC33 colour

New navigation layout with separate View Site and Logout buttons:

If you happen to have 8 or more items in your extensions tab, the menu design changes to accommodate them:

Download the themes

Prometheus

Stung

How the heck do I use them?

So you like these themes but don’t know how to install them, I suggest downloading and installing Stef Dawson’s amazing smd_admin_themes, then using the built in theme installer in the amd_admin_themes extensions pane.

I’d love to know what you think of them or if you have any suggestions for future updates.

Not sure if there’s any infinite scroll support though… gotta look into that.

The main plugin page info and download is at http://j.mp/cTt9Mp but the demos are at the link above.

There’s a bunch of jQuery animations, CSS 3 transforms, canvas and HTML5 making it a pleasure to behold and as a learning device – shall be scouring the source for weeks!

I’m officially jealous.

If you want to get your own upside-down or otherwise (✿.com / ♫♫.com) domain name then head on over to John Sutherland’s blog post, How to register an International Domain Name for instructions on how to do it. I also highly recommend domainsite.com for buying these domain names, they’re super cheap!

This looks good, the first article is live and I recommend you all subscribe to the site.

Check it.

I urge you to check it out.

A FULL-CG animated piece that tries to illustrate architecture art across a photographic point of view where main subjects are already-built spaces. Sometimes in an abstract way. Sometimes surreal.

Check it out

I would love to know what you all think, please have a look at the site and leave a comment below.

Check it out here

TwoUp also has a bigger brother, SizeUp that allows you to not only split your windows 50/50, but in quarters and more besides.

PS. This is just a personal recommendation, I have not been asked to write this.

Enjoy

This tech is HTML5 and Javascript that, among other things: hides the iPhone’s address bar; allows for fixed-positioned toolbars that never budge from the top when you scroll and most importantly, sets its own scrolling friction coefficient, allowing you to fling long lists similar to how you would do in your iPhone’s contact list. We have been unable to do these things, until now.

Illinoize is a free remix tape put together by Montreal-based producer Tor, sampling songs from multi-instrumentalist and indie hero, Sufjan Stevens. Tracks are sampled from his 2005 LP Illinoise, as well as 3 of his other albums, ‘A Sun Came’, ‘Seven Swans’ and ‘Songs for Christmas’, blending Sufjan Steven’s acoustic guitar, piano and horns with MC’s Aesop Rock, Big Daddy Kane, Gift of Gab (Blackalicious), C.L. Smooth, Outkast, Brother Ali, and Grand Puba. Click here to visit the download page

In my opinion, the best bit was the section on Japanese Macaques, who live in sub-zero conditions for much of the year and, to combat these freezing conditions, like to bathe in a volcanic hot spring.

These are just a few images I have found, the first is taken straight from the BBC programme.

To find out more about this incredible series, please visit: http://www.bbc.co.uk/programmes/b00lbpcy

If you still use the first version, I highly recommend upgrading to this version, because the plugin has had many improvement, such as multiple width columns and it no longer inserts extra code for it to work.

Head on over to David’s site, http://desandro.com/resources/jquery-masonry to check it out.

The ads all feature a doctored image of a current world leader – so that they look about ten years older – apologising from the future (2020 to be precise) saying, “I’m sorry. We could have stopped catastrophic climate change… We didn’t.”

“It’s an apology from the future aimed at putting pressure on – and just maybe making these world leaders think twice about the consequences of their action or inaction now,” explains the writer of the ads Toby Cotton of new agency Arc Communications.

“The brief from Greenpeace International was simple,” he continues, “to put pressure on world leaders to create a fair and binding agreement at Copenhagen.”

Here is a selection of the ads in situ in Copenhagen airport featuring Nicolas Sarkozy (France), Gordon Brown, (UK), Stephen Harper (Canada) and Luiz Inacio Lula da Silva (Brazil)…

Via Creative Review

Please visit Stefan Dziallas’ awesome portfolio at iconwerk.de

An homage to the Neutra typeface inspired by the song Poker Face by Lady GaGa.

• A : apple.com/
• B : balsamiq.com/
• C : chesstwit.com/
• D : delicious.com/
• E : expressionengine.com/
• F : forum.textpattern.com/
• G : glyphish.com/
• H : happycog.com/
• I : informationarchitects.jp/
• J : jquerystyle.com/
• K : kitsunenoir.com/blog/
• L : linklinecrew.com/
• M : martineau.tv/
• N : new.myfonts.com/
• O : ohmedia.ca/
• P : patterntap.com/
• Q : quirksmode.org/
• R : rathersplendid.net/
• S : sam.brown.tc/
• T : textpattern.org/
• U : undergroundproducts.com/
• V : vanmelick.com/
• W : welovetxp.com/
• X : xboxsam.com/
• Y : youtube.com/
• Z : zachklein.com/

Checkout all the Build Conference presentations on their Vimeo page

The family includes: Droid Serif, Droid Sans and Droid Mono (a great typeface for coding) and the license is pretty unrestrictive, which is awesome!

Download: latest Droid Font Family from GitHub (TAR.GZ of TTF) (2.7 MB)

Via Daring Fireball

At the weekend I bought a print, it’s now at the printer’s and should be ready in a week or two. To buy your own, visit the Concrete Hermit shop

Disclaimer: This shot was taken with my iPhone.

No. 5, graphical score animation, allegro

Check out the rest of the pieces of graphical on YouTube

My favourite bit is that there’s a plugin for Coda for it. Download on github

Zen Coding on Google Code

Here’s a quick look at what can be done:

It was the best game viewing I have ever seen, obviously a completly different experience to somewhere like the Serengeti for example, where there are wide open plains filled with thousand of animals, the Selous was better, in my opinion, because of the variety of wildlife, the landscape and the fact that Alice could sunbathe on the boat when we were on the river.

On our first day, we saw 4 of the Big Five: Lion, Elephant, Buffalo and Leopard – Rhino’s are not indigenous to the area so we never saw any.

A lone Carmine Bee-Eater

By the way, our trip was superbly organised by the folks at Tanzania Odyssey, I highly recommend them if you’re thinking of going on Safari in Tanzania.

A selection of the top 100 quotes from The Wire, the greatest TV show ever made.

Via Matthew Buchanan

Stacks need not be exclusively used in the dock, you can have them on any page of your iPhone’s Springboard as well. When a stack has more than 5 items, it changes layout and instead, uses a grid layout as seen in the example below.

The results of my labour can now be seen on the UK at http://www.weightwatchers.co.uk/plan/www/tools.aspx . Looking at it though, I think they really need to do a better encoding job because the film looks very pixellated. The rest of the films have not yet been published so I will update this post when I have more to show.

For the Australian website, I also localised over 20 short cookery how-to films, with subjects ranging from cutting Asparagus correctly to deglazing a pan – exciting stuff, I know!

It was my first proper stint using After Effects and I have to say that I loved it, especially the effect that makes any image appear 3-dimensional.

The basic premise is that you play a game of Chess on the ChessTwit website against a mutual “friend” of yours from Twitter. Twitter is used to notify you and your opponent of any happenings on the site, for example, if its your turn or if someone has challenged you.

The site is so simple to use and great fun, even for a non-chess player like myself and I’m not trying to trick you, I am shocking at Chess, go on, challenge me on ChessTwit.

I dare you.

The default themes that come preinstalled with Twhirl are not brilliant so I thought I’d have a stab at it.

Here’s what I came up with:

Click here to download the theme file: zander.xml

Instructions for changing theme:

Mac:

Exit Twhirl if you have it open already.

Find your Twhirl app wherever you’ve installed it on your system (Usually the Applications folder). Right-click the app and click on ‘Show Package Contents’

Once the new folder opens, navigate to: ‘Contents > Resources > colorschemes and move the ‘zander.xml’, that you downloaded, into the ‘colorschemes’ folder.

PC

Exit Twhirl if you have it open already.

Move the ‘zander.xml’, that you downloaded, into C:/Program Files/twhirl/colorschemes folder

Mac & PC

Now open Twhirl, go to your Account Manager / Colors , and select ‘Zander’ as you new theme.

Enjoy!

You can now browse a very basic, mobile version of this site at martineau.tv/mobile and use it a kind of interactive business card for me.

Please, if you’re on the iPhone, create a new webclip icon by adding the page to your Home Screen.

Go over there and check it out, I would love to know what you think.

I also have a Nikon D70 and a Canon Powershot S70

It should be finished within a week or so, check back soon to see the result.

The site is now live, please visit www.morganthrift.com.

syn·es·the·sia syn·aes·the·sia (sĭn‘ĭs-thē‘zhə)

n.
A condition in which one type of stimulation evokes the sensation of another, as when the hearing of a sound produces the visualization of a color.

A sensation felt in one part of the body as a result of stimulus applied to another, as in referred pain.

The description of one kind of sense impression by using words that normally describe another.

Meet Nick Sambrato. He runs a print shop in Orlando, Florida called Mama’s Sauce.

Nick isn’t a very smart guy. At a time in history when the print industry is pouncing from one space-age technological advancement to the next, Nick has decided to take a giant leap backwards into the industrial revolution.

Meet the Kluge letterpress. An 2,000 pound, cast iron, electric powered monstrosity of vacillating rods, giant spinning wheels and pneumatic hoses. The Kluge is Nick’s weapon of choice in his battle against the future.

So why does Nick use the Kluge? A clearly outdated, cumbersome and obsolete machine? The same reason any craftsman uses any tool: for the quality of the finished product. A letterpress offers a tangible, three-dimensional look and feel to the printed image that no other technology can replicate.

Let Nick take you on a trip back in time as he runs through the process of turning an ordinary piece of paper stock into work of art.

The (obvious) twist is that all the sites featured use jQuery in one way or another; either for tabs, DOM Manipulation, animation, ajax or for any other reason.

The site also uses a few bits of jQuery itself, just to make it a bit more of a pleasurable experience to browse, I would really be interested on people’s opinions of these.

Please visit it and browse through all the Gallery, the Plugin Directory and the Tutorials Section

Cheers

As the code used for html emails is still quite basic, so that all possible email programs can read them well, and I did not want to risk using a javascript based obfuscator I had to use the mailto syntax when usually I would use a great mac app called Enkoder (you can also use their online form).

The MailTo command can do more than enter a single e-mail address in the “Send To” field while activating your e-mail program.

Notes

“ “ (beginning and ending double quotes) are necessary if any spaces are used

Mailto parameter should be preceded by “?” for the first or only parameter and “&” for second and subsequent parameter.

Some examples, with actual HTML Code included, follow:

Simple MailTo
<a href="mailto:mailto@rathersplendid.net">Simple MailTo</a>

MailTo with Multiple Recipients
<a href="mailto:mailto@rathersplendid.net,MAILTO@RATHERSPLENDID.NET">MailTo with Multiple Recipients</a>

MailTo with Subject
<a href="mailto:mailto@rathersplendid.net?subject=Comments from MailTo Syntax Page">MailTo with Subject</a>

MailTo with a Copy
<a href="mailto:mailto@rathersplendid.net?cc=MAILTO@RATHERSPLENDID.NET">MailTo with a Copy</a>

MailTo with a Blind Copy
<a href="mailto:mailto@rathersplendid.net?bcc=MAILTO@RATHERSPLENDID.NET">MailTo with a Blind Copy</a>

MailTo with message already started in Body...
<a href="mailto:mailto@rathersplendid.net?body=I am having trouble finding information on ">I am having trouble finding information on</a>

MailTo with multiline message in Body.
<a href="mailto:mailto@rathersplendid.net?body=The message's first paragraph.%0A%0aSecond paragraph.%0A%0AThird Paragraph.">

NOTE: Use “%0A” for a new line, use “%0A%0A” for a new line preceded by a blank line.
Features may be used in any combination

MailTo with Subject, a Recipient, a Copy and a Blind Copy
<a href="mailto:mailto@rathersplendid.net?subject=MailTo Comments&cc=MAILTO@RATHERSPLENDID.NET&bcc=MAILTO@ratherRSPLENDID.NET">

All of the above – MailTo with Subject, CC, BCC and a few Body lines.
<a href="mailto:mailto@rathersplendid.net?subject=MailTo Comments&cc=MAILTO@RATHERSPLENDID.NET&bcc=MAILTO@RATHERSPLENDID.NET&body=The message's first paragraph.%0A%0aSecond paragraph.%0A%0AThird Paragraph.">

Remember to use only one ? (question mark), when providing multiple entries beyond e-mail address.

Something else to remember is that you should not use any ampersands (&) in you subject or body copy as it will break the code and your code will render incomplete. Something I learnt the hard way.

Check out these links for great mac apps

The brilliant Open Source Mac

From MacTipsAndTricks.com

• Top 100 Essential Mac Applications
• Apps for being an efficient user
• 20 Essential Mac OS X Apps For Bloggers

From Maclife.com

• The 30 Best Mac Apps You’ve Never Heard Of

From Mac.Appstorm.net

• 8 Time saving ebay apps
• 12 Mac Apps for Running a Freelance Business
• 35 Absolutely Essential Mac Apps

From ChrisPirillo.com

• Top 100 Mac Apps

From Diatomic design

• 35+ Useful Mac Apps and Utilities

OS X I Use This

I know there are probably quite a lot of repetition within these links, but in amongst them you will definitely find some gems.

If you think I’ve missed something, please let me know by commenting and I’ll add it to the list.

Also, I have one or two projects up my sleeve scheduled for release during next month so watch out and wait for all the spam I’ll be sending you about them…

My tute for the CSS Tricks jQuery Start/Stop Slider was just published on Txp Tips

We are a collective of freelance web designers and developers hoping to make the web a better place by providing accessible, standards compliant web sites.

Why would anyone need this?

Designers could get a lot of use out of this service if they want to provide a way to get the designs built without having to do it themselves. They may not know the code, or even, they may not know the ins and outs of how to set up a content management system and that is where <txp:coder /> steps in.

Executives would also benefit hugely from out service; they may have a site that is currently un-editable without hiring their web designer to do make any changes. <txp:coder /> can change this all, we can convert your existing site into a Textpattern powered site, making it incredibly easy for you to add, amend or update your current site by yourself without having to hire anyone to do it.

More info

If you need any more information, please vist the <txp:coder /> website; it explains the process in detail and should answer any question that you may have.

So please, if you or anyone you know, might benefit from our services, head on over to txpcoder.com

I did not need to do this move, but in the interest of a shorter url and a much better email address, I thought it was needed.

Why .tv?

I chose the .tv domain for two reasons; firstly, I have been designing a fair few sites for people and organisations in the film industry; and secondly, it was one of very few top level domains still available. .am was still available and I seriously considered buying it as my initials are AM. but I thought .tv was better as it was more widely known.

I’m sure my friends and family will hate the fact that I have another email address, but they’ll have to get used to it.

Head on over to martineau.tv to check out my work

Let me know what you think

I usually go one step further than the ‘vanilla’ SSB as I convert them to a MenuExtraSSB (in the File menu of your newly created SSB app) so that they appear in the menubar at the top of my screen. This means they’re always available without having to switch apps.

Why is this important?

I find it particularly useful for reference sites like Sitepoint’s CSS and HTML reference or the TextBook when I’m creating a Textpattern site.

Here’s my (not exhaustive) list of the best and most useful SSB’s and their URL’s

Web Development:

• http://reference.sitepoint.com/html – Sitepoint HTML Reference
• http://reference.sitepoint.com/css – Sitepoint CSS Reference
• http://textbook.textpattern.net/ – The Textpattern TextBook
• http://projectdeploy.org/ – Deploy (For rapid deployment of a small site)
• http://html-ipsum.com/ – HTML Ipsum
• http://thresholdstate.com/articles/4312/the-textile-reference-manual – Textile Reference

General

• http://www.bbc.co.uk/iplayer/ – BBC iPlayer (I usually listen to the radio)
• http://www.google.com/reader/ – Google Reader
• http://www.twitter.com – Twitter
• http://keyboardr.com/ – Keyboardr

As I said before, you could have Gmail and Facebook, but I do not.

I will keep updating this post when I find more

Please suggest any more for this list

To my joy, while searching for a jquery slideshow thingy, I found that Chris Coyier of CSS Tricks had created a perfect example of what I wanted, enter the Start/Stop Slider

It all looked great until I quickly remembered that his example is built with hardcoded images and content – how would I modify it so that it pulled recent projects from my portfolio section?

Here’s How

You will first need to read Chris’ article because you will be using all his code as a base and modifying here for Textpattern. You will need his CSS and Javascript files before you start this tutorial.

Step 1:
I first created a form, called ‘home_slideshow’, so that I could use an article_custom tag to call the recent projects.

The home_slideshow form’s content was this:
<div id="slide-<txp:rvm_counter />" class="slide"> <h2><txp:permlink><txp:title /></txp:permlink></h2> <p><txp:excerpt /></p> <txp:permlink><txp:zem_article_thumb limit=1/></txp:permlink> </div><!--close slide -->

and the article tag, on my home page template was:
<txp:article_custom form="home_slideshow" limit="6" pgonly="1" section="portfolio" sort="Posted desc" />

This tag is calling the last 6 articles from my portfolio section.

Let me explain what’s happening so far
In the home_slideshow form I have created a div,with an id of slide-?, you may notice that there’s proprietary plugin code in there. I needed to increment each div’s id by one, whilst always beginning at 1, so I found the rvm_counter plugin (from one of Textpattern’s core contributors, Ruud van Melick ) which, in fact needed to be modified, to enable me to create the suitable incrementing that I needed.

Step 2: Modifying the rvm_counter plugin, you need to do this
I found that, whilst this plugin worked as stated, it actually kept on incrementing on each page refresh, but I needed it to ALWAYS begin at 1. I had a quick search on the Textpattern Support Forum and quickly found out what needed to be done.

You need to install the original plugin, and then edit it in the Plugin preferences by replacing the entire code. Click here to download the replacement code at the PHP Pastebin

You may also see that I use the zem_article_thumb plugin, this is so I can limit the number of article images, to one, as I have up to 5 sometimes.

Step 3: Finito!

See, simple huh? Apart from the relative annoyance of editing the rvm_counter plugin code, I think this tutorial, along with the CSS Tricks tute is great for giving your site a fresh look.

[EDIT] I forgot to post the link to my finished version of this, head on over to my portfolio site to see it

Let me know if this helped

These are not exhaustive, but in essence there were 2 design revisions before the final design you see now.

Design 1: Let’s call it the Rainbow design

The Home Page

The Genre Page – a list of films in each genre

The Individual Film Page

Ben did not like this design, I think the Rainbow was a little too distracting and everything else, a little too busy.

Design 2: Big Buttons

The Home Page

The Genre Page – a list of films in each genre

The Individual Film Page

Again, Ben thought there was still better to be found – simplification was the key. From this design I created what you now see today, a site where the films are centre stage without distractions from the interface.

I have to say though, that my favourite was the Rainbow designs. I could have developed that into a great site – maybe I’ll resurrect it for another site…

What do you think?

Ben is a London based Director of Photography and is a showcase of all his brilliant work.

Please head on over there and check it out and let me know what you think.

Pizza Express keep emailing me with their special offers ; two-for-one and £10 set menu etc. These deals usually only let you enter your information once, unless you have more than one email address, in which case, you can have more.

This little gem only needs you to enter your email once, and when that’s done you can edit the page and print out their voucher as many times as you like.

Here’s the trick:
When you’ve arrived at the voucher page that needs to be printed, don’t close your browsers window after it done, copy and paste this code over the in place of the current url.

Code: javascript:document.body.contentEditable=‘true’;%20document.designMode=‘on’;%20void%200

or, even better, copy the bookmarklet below to your bookmarks and whenever you’re on a page that needs editing, click it and voila – instant editable pages!

Bookmarklet => Edit Website Content Script

So, instead of this:

It should be like this:

You are now able to edit your name at the bottom of the voucher as many times as you like. But don’t close the window otherwise you’ll have to enter your email in again.

This code can be used on any web page, so if another voucher works in the same way, get stuck in and take them for all their worth! Also, let me know if this trick works elsewhere, I haven’t tested it much.

All I wanna do is drag the bleeding pinpoint in iPhoto’s Places!! Does anyone know how it’s done?

[EDIT – 5 minutes later] Of course I have now worked out how to do it. For anyone in the dark, you will need to add a ‘New place…’ and drag the pinpoint when the new, bigger map appears…what a muppet.

Bloody love the new iLife ’09! iPhoto’s faces is brilliant, only asking if my face was in fact another, female, friend of mine… Oh dear.

My mac, an ageing Power-Mac G5 Quad 2.5, is used mostly for my work but I also use it for everything else – photos, movies and music etc.. Leopard has almost everything you could need, if you’re just doing standard stuff, but not everything, and in this post I will show you what you can get, mostly for free, for you Mac.

Apps I can’t live without:

Quicksilver

Quicksilver is quite simply the best time-saver ever.

I use it to do many things, but mainly to open programs up. Using a keyboards shortcut, I set mine to ⌘-Spacebar (the shortcut that by default calls Apple’s Spotlight, I have changed this one to Ctrl-Spacebar) I can type the name of a program and, using the keyboard, select the app that I want to open. I click enter and it opens it up. I use it so often, that I don’t hardly use the dock anymore.

I know I’m not too good at explaining, so if you want more detailed instructions for Quicksilver click here

Path Finder ($39.95)

Path Finder is a much better version of Apple’s Finder. With one windows open, you can have multiple tabs to browse your files, and in the most recent version, you can split the viewer so you can copy/move files in between folders easily. It’s features are far more extensive, they are extremely useful and would be a great asset on your system.

Video Apps:

I watch a lot of video, whether they be movies or TV shows, I often find that Quicktime simply can’t handle the wealth of video codecs that are out there.
These two will are all you need:

VLC (FREE)

VLC, in my opinion, is the best video player for the mac, it plays anything that you’ll ever come across.

Perian Quicktime Plugin (FREE)

Perian, as it says on their website, is a “swiss-army knife for Quicktime” meaning that with it installed, you should also be able to play almost any video you come across.

With these two installed you should never have any problems.

Downloading and Torrenting Apps:

Transmission (FREE)

The simplest and best torrenting app in my opinion. Make sure you check the ‘Blocklist’ tickbox in the Peers tab to ‘Prevent known bad peers from connecting’, it’ll keep you a little more secure when you’re downloading stuff.

Xtorrent

This app is similar to Frostwire in that you can search within it, but it uses torrents instead of the actual file, so if the file is big, e.g. a movie, it will download a lot faster.

Do not pay for this. Unless you really want to.
I have a workaround that bypasses the 1 hour time limit. When you have found a torrent and it has started downloading, go to the Xtorrent menu and click on ‘Quit’, a message should appear asking if you meant to quit or not, at this point do nothing, leave it.

The timer, if all goes to plan, will have paused itself, that it, until you click cancel again if you need to use the app.

Frostwire (FREE)

This is like the p2p apps of yesteryear, it’ll search for anything and you can download it, providing it’s on other people’s systems.

Random Apps:

This section covers all the miscellaneous apps that you may need, from Facebook importers to Flickr uploaders, you’ll want these apps.

AddressBookSync (FREE)

If you use facebook, and you have an iPhone, or any other phone for that matter. Open up this app, login to facebook when it asks you and it will save all your ‘Friends’ contact details, their birthdays and their current profile pic to Address Book and iCal.

Adium

The instant messaging swiss-army knife. You can use loads of different Im accounts (MSN, AOL, GTalk, even Facebook) and be logged in at the same time.

MassReplaceIt (FREE)

A small app that use regularly to find and replace very specific things in text, html, css, php, javascript or any other kind of text based file.

Skype

If you haven’t heard of it, you’ve been living in a cave. It is a great VOIP (internet telephone) and many people use it.

Browsers and their plugins:

Safari is my browser of choice on the mac, it is brilliant and more importantly, fast. Here are a few plugins that make Safari, and your experience of the internet, a lot better:

1Password ($39.95)

One of the best apps on my mac, it stores all my passwords, internet or otherwise, and can auto-fill web forms with a few clicks. Just buy it, you won’t regret it – it’ll pay for itself by being so useful. Oh, and it syncs perfectly with the iPhone using it’s own iPhone app

Glimmerblocker (FREE)

The best (that I’ve found) popup blocker for the mac. Just install it and leave it to do its thing.

Fluid

This app is great! Fluid creates site specific browsers (SSB) from any website that you want – Facebook, Gmail even BBC iplayer.

I use this to listen to internet radio while I work. I opened Fluid, typed in bbc iplayer’s url and created a SSB for the BBC iplayer. The next thing I did was to convert the newly created iplaye app to a ‘MenuExtra SSB’ which means that when it opens, it will be placed in the menubar, not the dock, for easy retrieval.

It sounds a bit complicated, but once you get the hang of it, you’ll have MenuExtra SSB’s for everything. Read the how-to on the Fluid website

Firefox (FREE)

There’s only one major contender to Safari for the mac and that’s Firefox. I have it on my system just in case a problem arises with Safari, which is pretty rare, it has been known though.

Utilities

SuperDuper! Backup App ($27.95)

I use SuperDuper! to backup my entire hard-drive (make a clone of it) everyday. I have had disasters before where I lost masses of data, photos, music and video but more importantly, work. It not free (well part of it is, you want/need the paid-for features), but it’s cheap. Buy it.

Links of interest:

Open Source Mac

There maybe a tonne that i have missed, so I will keep editing this post to add more stuff. That’s it for now though.

Does anyone have a suggestions?

Also, please checkout my website design portfolio , maybe I can help you out…

I’m getting married tomorrow. I simply can’t wait for it. To be married to Alice is a dream come true.

It is still evolving and the design may change, but I seriously recommend saving the bookmark or RSS feed so you can keep up on a different side of current affairs.

I’m getting married very close to Christmas and there’s loads to be done, which I, seemingly, am managing to not do much of. This is all about to change, I gotta get VISA’s for the honeymoon, organise guests, seating plans, get my suit, get my shoes, rangle the ushers, reign in the two best men (I couldn’t choose) and loads more. I wouldn’t have it any other way, and can’t wait to get married and spend the rest of my life with my beautiful fiance, Alice.

A little more about work:

Tommy needed his site in a hurry, he had a mention in British Vogue’s November Issue, in the Secret Address Book supplement and needed the site ready before November 6th. With only a couple of weeks from concept to inception it was always a tall order, but we did it, with a little jQuery trickery and some lovely photos taken by Tommy himself, the site is different, quirky and unlike the ‘standard’ chef’s website’s. The site needed to made updateable (if that’s a word) by Tommy and so was built with Textpattern.

Steve’s site began in December 2007 with the initial meeting and enthusiasm to get the site done quickly…It was only just finished last week due to Steve’s work commitments, he couldn’t supply the clips and wealth of information until quite recently.

The site is built using the awesome ExpressionEngine, a CMS that has almost unlimited possibilities and one which was perfect for Steve to edit of update if he wanted without knowing the ins and outs of html and css.

And I need some more work

It goes without saying that everyone needs more work, but I actually do. I am looking for a few projects to get my teeth stuck into before Christmas and the wedding. If you have any thoughts, maybe a friend / colleague needs a website designed or even updated, please don’t hesitate to contact me.

I just wanted to say that I have just started work on Tommy Wrey’s new site tommywrey.com

At the moment there’s just a placeholder, but in the coming weeks, all will be revealed. All I can say is that he’s a very talented chef and that you should watch out for him…

It features examples of his work in a simple but appealing way.

You can also check it out in my portfolio

I have now decided to focus fully on my web design business and to give up my other career as an focus puller for film and television. To that end, my site needed to be updated, restructured and re-thoughtout. I have separated my blog from my business site, rathersplendid.net is now just the blog and zandermartineau.com is for my work. They are very closely linked and share the same design, but not colour scheme (let me know what you think).

My personal sites tend to evolve, so this may not be it’s final incarnation, I normally get itchy feet and change it about once a year, so don’t get too attached.

They are small, london based, property finance advisors. They do Mortgages , Bridging Finance , Insurance and also a great Residential Mortgage calculator plus a whole lot more. Check them out if you are moving or buying soon.

Check them out at arcandco.co.uk

Play it, wait for about 1 minute, 6 seconds and listen. It’s bloody brilliant!

I found a link pointing to the Opera website where the article in question has disappeared, fortunately for us the Internet Archive comes to the rescue

This is the article in question:

Making Wii-friendly pages

By Mark ‘Tarquin’ Wilton-Jones · 30 May, 2007

Overview

Web Specifications

The Wii game console by Nintendo has a Web browser that uses the Opera 9 display engine. It supports most Web technologies supported by Opera 9 for desktop, including HTML, XHTML, XML, WML, RSS and Atom, CSS, XSLT, SVG, and JavaScript except designMode, contentEditable, and Audio. It does not support FTP, NNTP, IRC, XHTML+Voice, or widgets.

For details, see the complete list of supported specifications.

Display

Web pages are displayed using a virtual screen size that is 800 pixels wide with varying height, using tv or screen media. The display can be zoomed by the user.

Interaction

The browser uses a controller similar to a mouse. It also has an on-screen keyboard that has very limited key event detection. However, the controller offers some additional buttons to provide extra possibilities.

Read more about the Wii remote.

Windows

The browser uses a single window that cannot be resized, and allows a maximum of one additional pop-up to be open at any time.

Plug-ins

The browser supports Flash 7 as the only plug-in.

Introduction

The Wii is a game console whose defining characteristic is its motion sensitive controller; the Wii remote. The Wii also has a Web browser called the Internet Channel that the user can download, and although it looks quite different from its desktop cousin, the browser is Opera. The Wii output is displayed using a regular television screen, which would normally be a very poor device for displaying Web pages, so the browser has several features suited to displaying Web pages on a television screen. In most cases it will work with Web sites without any changes, but you may want to make various enhancements for Wii users to give them the best possible experience with your site.

The Wii browser is based on the Opera 9 display engine, so apart from some small differences relating to its interface, the browser’s HTML, CSS, and scripting capabilities (including XMLHttpRequest/AJAX) are the same as Opera 9 for desktop.

Most Web pages are designed to fit on a desktop computer screen, whose size may be 800 pixels wide by 600 pixels high, or 1024 by 768, or higher. Television screens are usually much smaller, with those used in North America being the lowest standard resolution; 720 by 486 pixels, which may be reduced to less than 550 pixels wide due to the inefficiencies of the television. With the Wii browser, however, this low resolution is generally not a problem.

How Opera displays Web pages on Wii

Instead of reformatting the page to attempt to make it fit on the screen, Opera on Wii lays the page out as if it was using a virtual screen 800 pixels wide. The height of the virtual browser window changes depending on various settings, but can be between 376 and 660 pixels high. The page is then scaled down to fit inside the display of the user’s television. If the page needs more than the size of the virtual browser window, then the user can scroll in whichever direction is needed, to see the rest of the page.

With a good quality television, most Web pages can be used and read like this (although it can be a little difficult). In some cases it may not be comfortable enough for reading, however, so the page can be zoomed to read the parts that the user is interested in. Zoom is available either as manual, where the user can zoom in or out as much as they want, or as automatic. The automatic zoom is adaptive, in that it will work out what part the user is interested in, based on where they point the controller, and it will attempt to zoom in the right amount to fit that content inside the width of the television display.

This has limits at each end of the scale: If the desired content is too wide, over 640 pixels, all of it cannot be displayed when zooming. If the desired content is too narrow, under 250 pixels, then it will not be possible to zoom in enough to make that content fit perfectly inside the display. In the first case, the browser will zoom in to a nominal value, and the user will have to scroll sideways to see the rest of the content. In the second case, some of the surrounding content will also be shown.

The Wii remote

Since the Wii has only one main controller (the secondary controller does not make much sense in a Web environment), it has to perform all the user interaction with the page using that controller. This means that the Wii remote sometimes functions as a mouse, and sometimes as a keyboard.

As long as it is pointing at the television, it is a mouse. Wherever the user points the remote, the mouse cursor will point. When the user presses the A button, it is the same as clicking the left mouse button. When the remote stops pointing at the television, it becomes a minimal keyboard. Pressing the A button then is the same as pressing the Enter/Return key on a keyboard.

Scrolling the page is normally done with the trigger button. This works as a panner, in the same way as middle-clicking the mouse would work on desktop, except that it only scrolls as long as the user holds down the button. The page will scroll in whichever direction the user points on the screen. The user can also scroll using the directional control on the controller, with the added benefit that this can also scroll within scrollable parts of the individual page. However, if possible, you should avoid using framesets, inline frames, and elements with scrolling overflow, as they require the user to use a scrollbar or directional control, instead of the normal panner mechanism.

The user can also use button combinations to perform common actions, to allow normal functionality if the toolbar is hidden. These are done by holding the B button, and pressing one of the other buttons on the Wii remote. Key combinations are available for the +, -, up, down, left, and right keys, performing the functions Forward, Back, Reload, Open Favorites, Search, and Web Address respectively.

The virtual browser window

The Wii can be used in normal (4:3) or widescreen (16:9) mode, if the television supports widescreen. The browser toolbar can be set to always display, to automatically hide, or to toggle when the user presses a button. The user can also change the width of the display, to compensate for the inefficiencies of their particular television.

Depending on the display width the user has set, the widescreen settings, and whether or not the toolbar is set to hide, the visible area of the page can be anywhere between 376 pixels and 660 pixels high. Specifically, the following ranges of heights indicate whether the toolbar is set to always display, and whether widescreen mode is being used:

The following JavaScript automates detection of these settings; note that the settings can be changed after the page has loaded:

var toolbar, widescreen, tempheight = window.innerHeight; if( tempheight >= 376 && tempheight <= 420 ) { toolbar = true; widescreen = true; } else if( tempheight >= 452 && tempheight <= 496 ) { toolbar = false; widescreen = true; } else if( tempheight >= 500 && tempheight <= 560 ) { toolbar = true; widescreen = false; } else if( tempheight >= 600 && tempheight <= 660 ) { toolbar = false; widescreen = false; }

Also note that properties such as screen.height should be avoided as they relate to a virtual screen size, not the actual size of the screen, or the space used by the virtual browser window.

Page addresses and forms

As the Wii is not designed to be a desktop computer, it does not use a traditional keyboard. Instead, it uses an on-screen keyboard that is displayed in place of the Web page. The on-screen keyboard offers a fairly complete set of keys, but it is nowhere near as fast to type with as a regular keyboard. The user needs to point the Wii remote at the letter and press a button. There is a word completion option that the user can enable, but it can only complete words in the user’s chosen language, as well as some common top level domain names. It cannot show a list of previously visited addresses, so it is not possible to modify these.

Writing uppercase characters requires an extra button press to enable uppercase mode. Some characters, such as those with accents, require searching through an extra set of available characters. Some characters cannot be typed at all, such as the Welsh w-with-circumflex character, Polish L-with-stroke character, Arabic characters, and so on. There is also no copy/paste functionality, so writing the characters near the input to allow the user to copy them into it is not an option.

Long page addresses take long to type. Addresses that mix uppercase and lowercase characters require additional key presses to enable or disable uppercase. Addresses that use accented characters are particularly laborious. As an example, the following page address is very awkward to type:

www.example.com/2007/20/01/{Touche}?id=17+om

The following page address is much more convenient: example.com/touche

This extends to forms as well. When filling in a form, it helps if the form can provide as much of the information as possible. For example, if a certain form field is always expected to begin with “http://”, then it will help to have this as the default value of the input. Do not force the user to type if they do not have to. In some cases, pages demand that the user fill in a form field even if that form field is not really essential. This means the user has to put the effort into typing when they should not have to, and it may be enough to put Wii users off filling in the form at all.

Some input types can be used in place of simple text inputs. If an input expects one of a certain selection of values, you could use a SELECT input. In addition, like Opera 9 on desktop, Opera on Wii supports Web Forms 2.0. This means that in many cases, the amount of typing required can be reduced by using a native input. Take, for example, a form field that represents a date. Traditionally, a normal text input would be used:

<input type="text" name="somedate">

However, you could also use the date input type for this, and Opera will then present the user with a calendar where the date can quickly be selected:

Browsers that do not understand Web Forms 2.0 will display a normal text input instead, meaning users do not see any difference between the two inputs, while Opera users will be given a convenient date control. See the demonstration.

Note that forms have two further limitations. Firstly, the file input type is not available, and will always be disabled. This means that it is not possible to upload files. Secondly, the way the keyboard works means that it is not possible to submit a form by pressing the return key. If the form is designed to be submitted, you should always provide a submit button or image input, and not rely on the user being able to press their return key to submit the form.

Browsing history

In order to minimize resource usage, Opera on Wii is limited to a maximum of six history entries for the main window, and six for any pop-up. This means that in the browser window, the user can use the back button a maximum of five times to see previous pages in their browsing history.

If a visitor is likely to follow links more than that depth into your site, and they want to return to the main index page of your site, they will have to find a link to it, or type it in again. It is not possible for them to see or modify a list of their visited history, and they also cannot modify the address of the displayed page in order to minimize typing. Typing is, of course, unwelcome, so it is best to ensure that each page they might visit has an obvious link back to the index page, or at least to a section index which in turn links back to the main index.

Special CSS considerations

Opera on Wii is a television browser, and by default, it will use tv media. However, since the majority of sites do not cater for tv media, it will revert to using screen media if no stylesheets specifically for tv exist. Since it is designed to behave like a desktop browser, this allows it to work well with the majority of sites, but allows you to give it specific styles as a television browser if you think that it needs them. Note that the tv media support is based on continuous media only, and it is not possible to use paged media features.

In accordance with the CSS specification, when Opera is applying tv media, it will use only that one media type, and will not combine tv and screen media at the same time. If you intend to style a page using tv media, you cannot use screen media for the main styling and then override just a few styles in tv media, because Opera will just use the tv media content, ignoring the screen media content. Instead, you should either style the page for Opera on Wii completely in tv media, or make sure the main parts of your stylesheet apply to all media types, then apply overrides using a specific tv media section.

The user can optionally enable Opera’s Small Screen Rendering, but unlike Opera Mobile, it will act on screen media, and will ignore handheld.

Usefully, Opera on Wii also supports CSS 3 media queries, allowing you to adapt your site’s layout to suit the display resolution that Opera uses. The media queries will work with the virtual browser window size used by Opera, so width is 800, and height is whatever the current virtual browser window heigh is.

If your page’s design is unusable when the browser window is resized to 800 by 376, it will not work on Opera on Wii (hint; use Opera on desktop and set the preference Tools > Preferences > Advanced > Browsing > Show Web page dimensions in title bar). However, assuming that you use CSS to define your layout, you can use media queries to define a different layout for different sized browser windows. For example, if your design cannot be used when the browser window is 900 pixels wide or less, you can define different styles for smaller spaces like this:

#nav { float: left; } ... @media all and (max-width: 900px) { #nav { float: none; } }

If you organize the layout of your page into columns, it can help to make sure that each column is less than 640 pixels wide. This will ensure that the automatic zoom can perform optimally, to allow the user to read the content without having to repeatedly scroll sideways.

There are also some other considerations that need to be made for television screens. In general, they do not cope well with high contrast, which can cause the colors to shimmer badly and bleed into each other, and the rest of the screen display to become washed out. In general, it is best to try to avoid high contrast on television displays, but in particular, avoid large areas of bright red. This means, for example, that a bright red block should not be put next to a white block.

See the color bleeding demonstration (warning; demonstration can be uncomfortable to look at on some displays).

Note that since Opera on Wii uses tv media if it is provided, you can use that media type to give it a different style sheet.

Fonts

Only two fonts are available on Wii; a generic sans-serif font called “Wii NTLG PGothic” and a monospace font called “Wii NTLG Gothic”. These are visually almost identical, but the monospace version has the letter spacing adjusted slightly to maintain the same width for each letter. As a result, it generally does not matter what font your page attempts to use, because Opera on Wii will always end up using the same sans-serif font, and will look the same as if you attempt to use any other font. The fonts can be displayed in normal, bold, small-caps, and at different sizes, but not italic.

The fonts contain all characters from the ASCII character set, basic accented Latin characters, basic Greek characters, most Japanese characters, most Simplified Chinese characters, a large number of Traditional Chinese characters, common Cyrillic characters, and some of the more popular symbols. Characters from most other scripts are not available, such as Devanagari, Arabic, and Hangul. Some of the less common characters from available character sets are also not provided, such as those used by Hungarian or Welsh. If characters are not available in the font, a placeholder square will be displayed where that character would have appeared.

Special JavaScript considerations

JavaScript is perhaps the part that exposes the most differences between Opera on desktop and Opera on Wii.

As with CSS, JavaScript will see the virtual browser window size, not the actual television resolution: window.innerWidth, and similar properties, such as document.body.clientWidth, will all be 800. window.innerHeight and similar properties, such as document.body.clientHeight will all give the height of the virtual browser window. Properties such as screen.height cannot be used.

However, it is in the interaction with the interface that most of the differences lie. Since the browser remains always full-screen, windows cannot be resized. Pop-ups are supported, but replace the opening page, are displayed maximized, and cannot be resized. The opening page is hidden behind the pop-up, and the user can return to it by using the Back button. It is not possible to open more than one pop-up at a time, so if one pop-up opens another pop-up, it will replace the first pop-up.

Advertisements are particularly bad for this, so the pop-up blocker is used, and set to block unwanted pop-up windows. If your site makes use of pop-ups, you should make sure that they are only opened on request (such as when the user clicks a link), never open more than one at once, and make sure that the pop-ups do not open at the same time a new page is loaded in the opening window.

The screen size can also produce some limitations. In particular, DHTML menus can be a problem if they contain too many items. They can be unreadable if text is small, and when the user zooms in to see better, they may extend beyond the screen size. Because the scrolling also requires the same controller, the menu items can become very difficult to access, as they may close when the user tries to scroll to see the bottom.

Because of the limitations of the keyboard interaction, Opera on Wii cannot support designMode or contentEditable, used for creating rich text editing controls. Most scripts that provide these controls will detect if the browser supports them, and can show a normal textarea instead. Support for rich text editing can be detected using this code:

if( typeof(document.designMode) != 'undefined' || typeof(document.body.contentEditable) != 'undefined' )

Event detection

When the Wii remote is being used as a mouse, it fires the same events as a normal mouse would do, such as mouseover, mousemove, and mousedown, with the exception that it cannot fire the dblclick event. There is no equivalent to the right mouse button, so custom context menus cannot be used.

Many pages, and in particular games, make use of key detection. They check when the user presses a key, and run some script when that happens. Most of these pages will also work with a mouse, but some pages may still need keyboard interaction. It is not possible to use the on-screen keyboard except within a text input. The on-screen keyboard cannot pass any key events back to the page. This also means that it is not possible for the user to use modifier keys such as Shift, Ctrl, or Alt while clicking on the page.

The only key events that can be detected are those that are sent by the Wii remote buttons. Some of these perform functions that cannot be detected, but most can be detected and used by scripts. The keyCode properties of the events are not the same as the equivalent keys used by desktop, where available, because they perform the functions of desktop key combinations, not single keys. The keyCode property for these keys are as follows:

Directional control up/down/left/right
175/176/178/177 – normal keyboard uses 38/40/37/39 for arrow keys
Button A (normal select button)
13 – only functions as a key while the mouse cursor is not being used, otherwise it is left mouse button
Button B (trigger, used for panning)
171
+ and – (zoom in and out)
174 and 170
Button 1 (toggle display of toolbar)
172
Button 2 (toggle small screen rendering)
173

If the user uses a key combination, such as B+Up, these will be seen as two separate key events, but the sequence of keydown and keyup should show that a combination was used. Note that this pattern will only work if the associated keypress events are cancelled.

The keypress event can and should be cancelled if you wish to use key events to override the normal behavior of the buttons. For example, if you wish to use the directional control to provide directional response in a game, you can detect the key presses of those buttons, and use them instead of normal arrow keys. However, those buttons will attempt to scroll around the page. Either return false from the keypress event handler function, or use the preventDefault method of the event object, to prevent the scrolling. Of course, it is important to make sure that the scrolling is not actually needed by the user before you prevent it.

document.onkeypress = function (e) {<br> if( e.keyCode 175 || e.keyCode 38 ) {<br> moveup(); return false; } else if( e.keyCode 176 || e.keyCode 40 ) { movedown(); return false; } else if( e.keyCode 178 || e.keyCode 37 ) { moveleft(); return false; } else if( e.keyCode 177 || e.keyCode 39 ) { moveright(); return false; } //allow other keys to work return true; };

Note that button 1 can be detected, but its keypress event cannot be cancelled.

Images and plug-ins

Opera on Wii has the same image capabilities as Opera on desktop. This includes JPEG, GIF, PNG (with alpha transparency), BMP, ICO, SVG 1.1 basic, and scripted canvas. If your images display correctly in Opera 9 on desktop, then they should also work on Wii. With plug-ins, however, there are some significant limitations. Only one plug-in is currently available for Wii, and that is the Adobe Flash Player 7 plug-in. Opera on Wii does not have any download capability, so the user cannot download extra plug-ins on request. The wmode=“transparent” attribute is not supported, so plug-in content that is supposed to be transparent should not be made to overlap other content, as it will obscure it.

The Wii has a processor with performance that is less than half that of most desktop machines, and with about one tenth of the available RAM. As a result, it can have trouble with Web pages that attempt to display hundreds of images, or large Flash movies. In particular, streaming video players written for Flash can have problems with buffering, as they quickly use up the available memory.

Most Flash games, however, work well enough, as they are not so demanding on memory. However, it is important to note that the same restrictions apply to keyboard interaction as for JavaScript. This means that games that need the user to be able to press the space key, for example, will not work. Flash also has very limited Wii remote button detection. It can only see the mouse pointer and left mouse button click.

It is possible to detect the Wii remote buttons using JavaScript, but since communicating between JavaScript and plug-ins normally needs Java for LiveConnect, and Java is not available on Wii, this means that JavaScript cannot directly communicate the button presses to the Flash movie.

There you go, it was a lot I know, but pretty useful I think for the minority that actually use this browser regularly.

As I said before, I did not write this article, I am merely reproducing it for reference, it was originally published on the Opera Dev website

Go on the website and you can be Sweded as well. I know it’s stupid and I look like a tool, but what the heck..

Just go and rent it.

Mail is great, it’s simple for what I need and does it all well, except for a few minor things and these can be rectified or enhanced by the use of a plugin. There are a ton of these and they’re all Leopard compatible, unless otherwise stated.

My favourites:

• SpamSieve – Spam filter (Commerical) In my opinion, it’s the best out there.
• Related Mail – Displays related messages to viewed email (beta)
• Attachment scanner – Avoid the embarrassment of missing attachments
• Mail Unread Menu – Menubar app that notifies you of any new mail
• Mail Followup – Allows you to compose (and then send) a quoted version of the original message to all of the original recipients, keeping the To, Cc and Bcc addresses exactly as they appeared in the original message.
• Letterbox – It rearranges the interface into three vertical columns.

And the rest:

• OMiC – If you deal with a lot of Microsoft Outlook winmail.dat files, this is for you (Commercial)
• Mailboxer – Automatically makes Smart Mailboxes for your address book contacts
• Event Maker”:http://www.mamooba.com/EventMaker – Event Maker allows you to create normal and all-day events and To Dos from a selected message in Mail.app or from scratch using quick launch scripts
• HTTPmail – Hotmail and MSN access for Apple Mail
• MailTags – Tag you messages with keywords
• Mail Attachments Iconizer 2.0 – Toggle icon view for image attachments
• Growl Mail – Mail plug-in for growl notification system
• WideMail – Provides wide-format view option
• MiniMail – Process mail from a tiny window (commercial)
• Eudora Mailbox Cleaner – Eudora to Apple Mail migration tool
• EagleFiler – File your mail and other things (commerical)
• MailAppetizer – Email notification (beta)
• MailTemplate – Templates system for emails
• DockStar – Lets you keep track of email in various accounts and folders, RSS feeds, Notes, and To Do items with customizable badges in the Mail icon, menu bar, Dashboard, and even in a Screen Saver.

If you want to find more tips and tricks, head on over to http://www.hawkwings.net/ it is a blog all about Mail

What do you think?

Here are the results:

My beautiful fiance, Alice in our hallway

Smooth criminal Morgan

Alice being naughty

Have you ever needed to find a website/company/band name and had the idea of what you wanted, but just couldn’t find the perfect word(s)? I know I have, and, recently while doing just such a search I stumbled upon a great dictionary website, the Onelook Reverse Dictionary . Please head on over there and check it out, it’s darn useful.
P.S. it does come up with some rather interesting (read crazy) results!

Need gig tickets in the UK, check out Gigs and Tours

Have you had enough with ebay? Why not try Telebid . Its a new style of bidding website; one where as the auction time decreases, you bid using your credit, and each time you bid, the price of the item goes up along with the time. The auctions are won by the person who was last to bid before the timer runs out, and of course the auctions tend to go on for bloody ages! Try it

MacLorem generates that great placeholder copy that we all love to use. It is freely available from the developer’s website

Erat, illum feugait, amet lobortis vulputate ex enim delenit molestie dignissim praesent blandit ea, exerci dolore blandit lorem, vel praesent quis sit eum esse eros crisare. Molestie vel augue autem quis ut facilisis dolore duis autem, veniam dolore qui. Tation nisl vero vel, odio vel elit quis amet aliquip dolore ullamcorper, blandit et iusto, ut nisl. Qui nisl tincidunt vulputate blandit vel ut in facilisi elit facilisi ad in praesent. Aliquip eum vel quis augue iusto velit nonummy nibh nonummy, te dolore facilisis laoreet crisare duis molestie ex erat velit. Euismod autem tation augue eu nostrud illum nostrud.

These stills are all taken with my Nikon D70 with either my 18-70mm or my 70-300mm lens, they are a few of the literally tens that I took and the only ones worth showing off. Let me know what you think..

Ski Holiday: £200 ish
Aviators: £80
Old 80’s Ski Jacket: £12
Receiving absolutely no weird looks for this brilliant get-up: Priceless!

Please check out more photos on my Flickr account

Just in case you wanted to know, I’m the tall guy in the stripy shirt on the left.

Here’s a video of the same thing recorded on my crappy stills camera…

And here are a few shots from the concerts…

During Fix You:

And during “In My Place”… I think

Red Fort Guard, originally uploaded by ambhoare

What do you reckon?

There’s a great album showing Blighty circa 1890

There’s another album called Defining Moments

Check out the site and delve into the cornucopia of old images

The Holga in all it’s plastic glory!

The kind of images these cameras create – not one of mine..

Expect to see loads of my experiments on the site…

Unfortunately, after hours of hunting, this is the best copy of the print that I been able to find

Grayson also has other prints that can be viewed by clicking here

The Turner prize winning pottery I spoke of earlier:

Village of Penians, 2001

My buddy James

Clouds rolling over the peaks

Looking up the lift

Ski Tracks

A lone boarder

Ski Tracks Deux

Please check out more photos on my Flickr account

Or you can check it out here

Suffice it to say, on Wednesday morning I woke up with a bout of The Delhi Belly!!! I was unable to do any filming and was bedridden for the next few days; I received some medical help and I was almost fine by our return flight on the Friday…

Lucky me I know!

This is where we were:

View Larger Map