Site upgrade mark 2

Ive decided to update the index to a static work in progress. Eventually I want a system of Postcards for each Artwork/Project. For my own site I’m only interested in supporting browsers I actually use: Firefox/Chrome. In Chrome/Safari I’m making use of 3D transforms to animate the postcards flipping. In Firefox it simply cuts straight to the other side, crude but its obvious that it has “flipped”.

The “flip” will occur if JavaScript is disabled on :hover after js enhancement the :hover rules are removed from the Postcards.css stylesheet via the DOM and the animation happens when the class ‘flipped’ is toggled.

I decided that the back of the postcard would have no rotation on  x/y as it makes it easier to read and the font behaves in Firefox and Safari the font can look a bit chunk on some angles the text in Firefox would jump up and down as if aligned to a jagged line, Chrome does a really nice job – I really need to start using it more than Firefox, hard to break the habit but Firefox still doesn’t support 3D transforms lest time I checked.

A lot of the pics I had on Flickr gotz deleted by mistake so there’s a few pages of empty images :( – Will work on fixing but too tired now :P

Tags:
Posted in Miscellaneous | No Comments »

Adding html5 capability to WordPress

There are two techniques that I find useful for making the WordPress content editor html5 capable. The first is to replace the default wpautop filter for the_excerpt & the_content with Nicolas Gallagher’s html5autop filter.

The second is to allow html5 tags and attributes in tinyMCE otherwise the tags would be removed when switching between html view, yes you can just use the code view permanently which seems to be a favorite “solution” offered by many developers whenever there’s an issue with the WYSIWYG but I for one would much rather use the WYSIWYG any day to coding in a crappy textarea. As one guy mentions in Nicholas’ comments you can add tinyMCE settings via the tiny_mce_before_init WordPress filter. So I did this:

function extend_valid_html5($init) {
	// Standard attributes
	$atts = 'role|accesskey|class|contenteditable|contextmenu|dir|draggable|hidden|id|item|itemprop|lang|spellcheck|style|subject|tabindex|title';
	$html5Elements = array(
		'article[#|cite|pubdate]',
		'aside[#]',
		'audio[#]',
		'canvas[#]',
		'command[#]',
		'datalist[#]',
		'details[#]',
		'figure[#]',
		'figcaption[#]',
		'footer[#]',
		'header[#]',
		'hgroup[#]',
		'mark[#]',
		'meter[#]',
		'nav[#]',
		'output[#]',
		'progress[#]',
		'section[#]',
		'summary[#]',
		'time[#|datetime]',
		'video[#]'
	);
	if(!isset($init['extended_valid_elements'])) {
		$init['extended_valid_elements'] = '';
	}
	$init['extended_valid_elements'] .= str_replace('#',$atts,implode(',',$html5Elements));
	return $init;
}

add_filter('tiny_mce_before_init', 'extend_valid_html5');

NB: Needs more attributes I’m just going to add them when I need them for now.

Nicholas adds his filter to the themes function.php file but I placed both filters into a html5support.php plugin which just sits there activated making the filters available, that way I can have multiple themes and not bother writing it into every themes function.php file.

Tags:
Posted in Miscellaneous, Web Devlopment | No Comments »