input[type=”bullshit”]

I hear by declare a new input type:

input[type=”bullshit”]

You can use it NOW.

try it and use it in your projects :). Copy & paste below…

< input
	type="bullshit"
	required>

html5 Alphabet

a - article
b - bold
c - CSS
d - details
e - em
f - fuck IE6
g - google
h - h-group
i - italic
j - Javascript
k - konquerer, the source of all things
l - longdesc may it rest in peace
m - microformats
n - nav
o - object
p - pattern
q - q
r - required
s - select
t - time
u - u
v - valid
w - wbr
x - xhtml
y
z - z-index

best practices

After the first presentation and a workshop, I gave out a bunch of tips and best practices for front end development.

html5 presentation

a presentation I gave to a bunch of java developers on html5

A simple Regexp explained for myself

moved to wnas.nl

Prevent IOS from zooming onfocus / take 2

Vasilis, maybe this could work…

$('input, select').bind('focus blur',function(e){
			var scale = 1.0;
			if(e.type == 'blur'){ scale = 10; }
			$('meta[name=viewport]').attr('content','width=device-width,initial-scale=1,maximum-scale='+scale);
		});

Mathias (again) optimised this:

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
  $viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=1' + (event.type == 'focus' ? '.' : '') + '0');
});

Protecting Life?

Glad I don’t live in that country, the only fear I have is that we will follow them. Like we do with a lot of other things…

“They want to ‘protect life’ so much that they have written into the bill a new amendment that would override the requirement that emergency room doctors save every patient, regardless of status or ability to pay.  The law would carve out an exception for pregnant women; doctors and hospitals will be allowed to let pregnant women die if interventions to save them will kill the fetus.”

(Via www.rhrealitycheck.org .)

better footer

old footer:

<div id="ft">
	<div class="logo">
		<a title="onehippo.com" href="http://www.onehippo.com">
		  <img src="<hst:link path="/images/logo-hippo.png"/>" alt=""/>
		</a>

		<p>Hippo © 2010</p>

		<p>
		  <hst:link var="termsLink" path="${termsPath}"/>
		  <a href="${termsLink}" title="Terms & Conditions">Terms & Conditions</a>
		</p>
	</div>
	<div class="yui-gb" id="ft-nav">
		<div class="yui-u first">
			<h3>SERVICE</h3>
			<hst:include ref="service"/>
		</div>
		<div class="yui-u">
			<h3>SECTIONS</h3>
			<hst:include ref="sections"/>
		</div>
	</div>
	<img id="ft-image" src="<hst:link path="/images/ft-leaf.png"/>" alt="" />
</div>

By simply cutting out everything that looks presentational, after all html is about content and structure not presentation, we get:

<footer>
	<a title="onehippo.com" href="http://www.onehippo.com">Hippo</a>
	<p>Hippo © 2010</p>
	<p>
	  <hst:link var="termsLink" path="${termsPath}"/>
	  <a href="${termsLink}" title="Terms & Conditions">Terms & Conditions</a>
	</p>
	<section>
		<h3>SERVICE</h3>
		<hst:include ref="service"/>
	</section>
	<section>
		<h3>SECTIONS</h3>
		<hst:include ref="sections"/>
	</section>
</footer>

Proper frontend code for hippo

I am currently nerding out with hippo 7 and see some stuff that can be improved in the front end department. stay tuned..

comicize

Just to make the web a better place!

var comic = function(){
	var conf = {
		cn : 'comic'
	},	init = function(){
		$(document).keydown(function (e) {
			if(e.which == 67) {
				$('body').toggleClass( conf.cn );
				return false;
			}
		});
	};
	return {
		init:init
	}
}();

comic.init();