WNAS

input[type="bullshit"]

Mon, 14 Nov 2011 14:38:18 +0100

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

Sat, 15 Oct 2011 12:18:39 +0200

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

Wed, 08 Jun 2011 09:51:12 +0200

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

Bestpractices nl

View more presentations from Wilfred Nas

html5 presentation

Wed, 08 Jun 2011 09:49:48 +0200

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

Html5 nl

View more presentations from Wilfred Nas

A simple Regexp explained for myself

Wed, 18 May 2011 12:02:00 +0200

moved to wnas.nl

Prevent IOS from zooming onfocus / take 2

Mon, 09 May 2011 09:50:01 +0200

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?

Sat, 05 Feb 2011 10:26:16 +0100

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

Fri, 28 Jan 2011 11:11:23 +0100

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

Fri, 28 Jan 2011 11:08:35 +0100

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

comicize

Tue, 11 Jan 2011 15:38:57 +0100

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();

From iPhone to Windows Phone 7 « carpeaqua by Justin Williams

Wed, 05 Jan 2011 20:28:58 +0100

Strange, nothing more I can say. In the netherlands, I can send an sms message to any phone and can expect them to read it. On older phones it get’s read to you…

“SMS: Like Android prior to Froyo, Windows Phone 7 will not let you send an SMS to any phone number that is not labeled ‘mobile’. This is insane if you know anyone who carries both a work and a personal cell phone like my brother. I label my brother’s personal iPhone as ‘home’ and his work provided Blackberry as ‘work’ so I can remember which phone to text during the week. Neither one of those will show up in the Messaging app or as textable in his People hub profile.”

(Via carpeaqua by Justin Williams.)

Christmas cards 2.0

Thu, 09 Dec 2010 13:55:52 +0100

Here is a very nerdy christmas to you all in advance:

data:image/jpg;base64,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

VS-JS Javascript Snippets examples

Fri, 19 Nov 2010 13:34:02 +0100

VS-JS Javascript Snippets examples: “Examples of VS-JS Javascript Snippets”

Extending jQuery’s selector capabilities – James Padolsey

Fri, 19 Nov 2010 13:23:44 +0100

Extending jQuery’s selector capabilities – James Padolsey: “”

android vs ios

Mon, 04 Oct 2010 00:14:19 +0200

“Actually, it’s worse than cheap. It’s free. They don’t even have to take it to dinner.”

(Via macalope.)

js patterns example

Tue, 14 Sep 2010 09:35:50 +0200

Proper namespacing with a bad and a good way to declare var’s all in one go. The first one is an accident waiting to happen…

// define a namespace
var nameSpace = (function() {
	var a,b,c;
	
	a = function () {
		//
	};
	b = 'x';
	c = function () {
		alert(b)
	};
	d = function () {
		// d = global
	}
	
	var config = {
		// object literal for commonly used shizzle
		foo:'bar'
    // a , between var's keeps 'm apart.
	},	init = function () {
		// make public
		doStuff();
	},	doStuff = function () {
		alert(config.foo);
	};  // end with a semi colon and you're safe.
	return {
		init:init
	}
})();// selfinvoking function

nameSpace.init();

The Secret Diary of Steve Jobs : We do not care about Android

Mon, 09 Aug 2010 16:59:50 +0200

In three years, maybe less, Android will be way bigger than us. And we’ll have the better business.

The Secret Diary of Steve Jobs : We do not care about Android: “”

Redraw problem in ie 7

Tue, 03 Aug 2010 11:48:00 +0200

I got me the strangest problem in IE7, when scrolling a button out of view and than scrolling back, the button got some strange stripes. These disappear when you hover over the button, causing a redraw. Anybody seen this before?

The code for the button is pretty straight forward, a button with a span inside to use ‘sliding doors’ for the backgroundimages. I have been using this for a while and have never seen anything like this.

If you have a solution, or know what is happening here, please let me know on twitter.

Update

The problem only occurs when you scroll down, so that the button slides upwards out of view. It does not happen when you scroll up…

It also only seems to affect the span inside the button…

HTML code

<button><span>text on button</span></button>

CSS code

/* BUTTONS */
		
button { 
	border: 1px solid transparent; /*1px border solves redraw problem */
	padding: 0;
	cursor: pointer;
	overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
	border: none;  /* overrides extra padding in Firefox */
}

/* OPTIONAL BUTTON STYLES for applying custom look and feel: */		
.button { 
	padding: 0 14px 0 0; 
	margin-right:5px; 
	font-size:12px; 
	text-align: center; 
	background: url(img/buttons-sprite.png) no-repeat right -28px; 
}

/* IE makes the background of the button shift when pushing the button */
*:first-child+html button.active {
	background-position: right -86px;
}

.button span {
	display:inline-block;
	padding: 3px 0 0 26px; 
	height:20px; 
	background: transparent url(img/buttons-sprite.png) no-repeat 0 0; 
	color:#fff; 
}

Solution

The solution I found was applying a transparent 1pixel border around the button… So adding this:

border: 1px solid transparent;

Solves my redraw Issue, strange….

One last espresso before catching the train to, first Deventer...

Wed, 14 Jul 2010 09:36:32 +0200

One last espresso before catching the train to, first Deventer and then Berlin.

fun with css transform

Tue, 11 May 2010 21:59:00 +0200

Just some fun I had with css3 on wnas.nl.

article section img { 
	-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(2deg);
	-o-transform: rotate(2deg);
}
article section:nth-child(even) img { 
	-webkit-transform:rotate(2deg);
	-moz-transform:rotate(-2deg);
	-o-transform: rotate(-2deg);
}

Actual code a bit different, but this is for clarity…