WNAS

Yes, the iPad is going to be available in the Netherlands in July. As a developer I want to have one as soon as possible of-course, so I can test my stuff on it.

The big question now is, should I get one in june in the UK when I'm there for Web Directions @media, or should I wait a full month. Available in july will probably mean the end of july...

And in case you have been hiding under a rock, here is the keynote announcing the iPad.

Some interesting comments Opera's product analyst Phillip Grønvold on the future of flash. I think they are right, flash has it's place. But it's usage for video for example is an excellent example of what you should use HTML5 for nowadays.

"But flash as a video container makes very little sense for CPU, WiFi battery usage etcetera – you can cook an egg on [devices] once you start running Flash on them and there's a reason for that."

Don't get me wrong, flash is great for some stuff, but I even see it for building webforms ( with openLazlo ) and that is just plain stupid.

The best line I think was:

"But at Opera we say that the future of the web is open web standards and Flash is not an open web standards technology"

Opera joins in Jobs v Flash argument | News | TechRadar UK: ""

Here are some random lines I decided to be the most striking ones.

• Overall, it's just a deeply, deeply frustrating and inconsistent experience.
• .. and the phone only updates every 15 non-user-adjustable minutes. Sometimes less!
• No app store, no IM client, no games, no calendar... not even visual voicemail or some carrier-hitched GPS app.
• While using the One and Two we found ourselves consistently confused or surprised by how many bad little interface problems there
• We'll chalk the better performance up to that heavily controlled sync schedule (once every 15 minutes at the most).
• If you're going to shell out this kind of money each month, it would be foolish to even consider these devices given the much, much better options out there.
• In the end, we're left with two orphan devices
• On the One, it's usually good for taking a picture after a firm press, but sometimes there's no reaction at all, while on the Two, it tends to focus in and out and then never snap a photo.

Microsoft Kin One and Two review -- Engadget: ""

After dark, the dirty work at Disneyland begins - latimes.com: "'When I started on Disneyland, my wife used to say, ‘But why do you want to build an amusement park? They're so dirty.' I told her that was just the point; mine wouldn't be,' the founder said at the time."

(Via .http://daringfireball.net/)

After a few years on Habari, I stumbled upon Marsedit again. And with the help of one plugin I got it working. So now I am off to see it is as good for Habari as it was on Wordpress.

So what's new in version 3.0?

All new Rich Text Editor: No HTML Required

The rich editor offers an alternative to MarsEdit's beloved HTML text editor. While you are writing your blog posts you can style text, arrange images, create lists and more without using HTML code.

I am not so sure if I like this, as I love my HTML...

Updated HTML Editor with Advanced Syntax Highlighting

For those who prefer straight HTML we've added beautiful new syntax highlighting with different colors for attributes, keywords and tag structure, to make it easy to spot syntax errors at a glance.

Support for WordPress Pages

MarsEdit now lets you download, edit, and create Page entries on WordPress blogs. Now you can manage your blog and your permanent site pages from the same comfortable interface.

This I don't need for now, but am sure to find useful in future projects...

Support for Custom Fields

For WordPress and other blogs that implement the WordPress API, you can configure custom fields in MarsEdit to customize the post editing interface.

iPhoto, Aperture and Lightroom Integration.

Browse your media collections to find the perfect photo for your post. When you attach an image, MarsEdit lets you specify the size, name, and alternative text in one easy step.

Scheduled Media Attachments

With scheduled media attachments you can compose your posts with rich media even when completely offline. When you are ready to publish, the images or other media files are uploaded to your blog and inserted into the post.

A small script I wrote to do pagination, sorting and zebra-striping of a list.

As you can see we start of with a ;, in case some sloppy programmer forgot to add it to the end of his function. Than as a first, we set our namespace as the first thing to do as we don't want to pollute the global namespace. The function is being set as a revealing module pattern.

;var pagination = function () {

We start with an object literal named config to contain the common variables, stuff we use more than once. These variables are private to this function only...

	var config = {
		// default amount to be shown
		defAm : 15,
		// radio buttons for sorting
		sort : $('#sort input[type="radio"]'),
		sortFirst : $('#sort input[type="radio"]:first'),
		// several common classes
		hidden: 'hidden',
		sorted : 'sorted',
		active : 'active'
	};

We than initiate the function, this is the only thing we make public at the end of this function.

	var init = function ( t ) {
		// check the first radio, just in case ( to avoid problems )
		config.sortFirst.attr('checked','checked');
		// get the visible li's
		var amountSort = $( t +' li:visible').length;
		// go to the view function.
		view(t,amountSort);
		// go and initialize the sorting function...
		sort(t);
		// as a last thing we get and initiate the script to handle the history stuff.
		$.getScript('js/jquery.ba-hashchange.min',back(t));
	};

We first start with hiding the list items that need not be shown, the next pages so to speak... When we have done that, we go and build the paging stuff..

	var view = function ( t,amountSort ) {
		// hide all of the li's other than the ones on the first page.
		$(t+' li').removeClass('even');
		$(t+' li:visible:even').addClass('even');
		// substract 1 to get the correct amount to be shown...
		$(t+' li:visible:gt('+(config.defAm-1)+')').addClass( config.hidden );
		// go to paging.
		paging(t,amountSort);
	};

We build the paging stuff and make it work.

	var paging = function ( t,amountSort ) {
		// first we clean up all of the old pagination
		$('.pagination').remove();
		// we than get the amount of pages
		var nr = ((amountSort - ( amountSort % config.defAm ))/config.defAm)+1;
		// build the paging ul before the sort radiobuttons
		$('#sort').before('<ul class="pagination"></ul>');
		// loop through the pages, with the cool guy loop
		for ( var i = -1; ++i < nr;){
			// append a li with an a to the ul.pagination for each page
			// and fill it with the correct number
			$('ul.pagination').append('<li><a href="#">'+(i+1)+'</li');
		}
		// make visible that there is an active page.
		$('ul.pagination li:first-child a').addClass( config.active);
		// if we click on a pagination link
		$('ul.pagination a').click( function (e) {
			// get the correct page to show
			// note the ,10) this makes sure we can't slip into octal mode...
			var link = parseInt( $(this).text(),10);
			showHide( t, link);
			// now we need to enable the back button...
			// we do this by setting the location for the hash tag plugin.
			window.location = window.location.toString().split('#')[0] + '#pagination' +link;
			// we stop the default action of the (fake) pagination link...
			return false;
		});
	};

This function is wat we use to do the showing and hiding. Note the nice and short :) jQuery selector at the bottom.

	var showHide = function (t,link) {
		// remove the active class
		$('ul.pagination li a').removeClass( config.active );
		// make the clicked one active
		$('ul.pagination li:nth-child('+(link)+') a').addClass( config.active );
		// show all of the li's
		$(t + ' li').removeClass( config.hidden );
		// hide all of the li's not on the correct 'page'
		// :) notice the nice and short jquery selector...
		// it's like this: t = the overall container list.
		// in there we find the li's without the class sorted = li:not(.sorted)
		// either before the number being calculated = :lt('+(link-1)*(config.defAm)+'),
		// note that the number comes from the object literal in config and is therefore easily altered.
		// or after that = '+t + ' li:not(.sorted):gt('+link*(config.defAm-1)+')')
		// and add a class to them...
		// this class also comes from config as I use it more than once..
		$(t+' li:not(.sorted):lt('+(link-1)*(config.defAm)+'), '+t+' li:not(.sorted):gt('+((link*config.defAm)-1)+')').addClass(config.hidden);
		console.log('lt = '+(link-1)*(config.defAm)+' | gt = '+(link*(config.defAm)))
	}

Here we do the sorting, by checking a radio button, gettings it's value and using that to show list items with that class and hiding others.

	var sort = function ( t ) {
		// on change
		config.sort.change( function () {
			// remove all of the sorted and hidden classes, thus making all li's visible
			$(t+' li').removeClass( config.sorted );
			$(t+' li').removeClass( config.hidden );
			// get the value of the radio that is checked.
			var v = $(this).val();
			// if we selected a filtering option
			if( !(v == 'nofilter')){
				// hide all of the not chosen li's
				$(t+' li:not(.'+v+')').addClass( config.sorted );
			}
			// go to the view function
			// the two arguments are the list and the amount of visible li's (before paging)
			view( t,$( t +' li:visible').length );
		});
	};

This small function utilize the hashchange plugin to make the back buttons work when we page through the pages

	var back = function (t) {
		$(window).bind( 'hashchange', function(e) {
			var hash = location.hash || '#pagination1';
			showHide( t, hash.split('pagination')[1]);
		//	alert('movement...');
		});
	};

Here we make the init function public.

	return {
		init: init
	};
}();

I know what I'm lining up for, this summer...

After a long wait, it's finally being released into the app store. Opera mini brings many things to the iphone:.

• tabbed browsing

  Keep several pages open at the same time and easily switch between them using tabs – just as you would on your desktop computer. On touchscreen devices, visual tabs even allow you to see a preview of the open pages you can select.

• Integration with the desktop

  Save, edit and organize bookmarks into folders. Sophisticated bookmark management allows you to keep track of a large number of your favorite sites. Turning on Opera Link even allows you to keep your bookmarks synchronized across Opera on your other connected devices, like your computer, so you always have your links when you need them.

• speed

  Opera Mini uses only a tenth of the bandwidth of other browsers, compressing Web pages by up to 90%. On Opera Mobile, turning on Opera Turbo compresses data up to 80% or leave Opera Turbo off to get full Web site data, as you would on a PC.

But the most important thing it brings to the iphone is choice. We can now choose to use either safari and webkit. This in turn will turn up the heat for on one hand the webkit developers, as Opera will be challenging them as they are doing on the desktop. On the other hand, it's a challenge for us lazy web developers who were developing for mobile safari alone. We now have a different browser to deal with.

So the real winners are the users, who now will encounter websites that are being made not only for mobile webkit, but for multiple browsers. Thus making sure the web moves forward...

If you want to see what opera is capable of, see it's Standards support chart. If you're wondering why the rendering is a tad different, look at this.

logo wnas in data url

psst, one more way to get the logo without any images... And again, let's not worry about IE. They will get it right sooner or later...

Just to have some fun I tried to build a mockup of my logo in html, without images...

wnas logo in css3

I haven't done anything to make it work in IE and probably won't. If I do this, the logo will be an image in IE.

<em><i><span>wnas logo in css3</span></i></em>

I am still in doubt whether I should do this, as the css isn't exactly IE friendly. But for those of you who want to see it and maybe learn a thing or two, here is my code WITH explanations...

Code, with comments

We begin with the em that is our outer ring.

#homeTest {
	width: 98px;
	height: 98px;

We give it a width and height...

	float:left;

And we float it to the left to get it to accept a width and height.

	font-size: 1px

we hide the text in plain sight.

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

three different ways to say border-radius.

We now move onto the inner white circle.

#homeTest i {
	background-color: #fff;
	border: 1px solid #fff;

This one is the only one with different colors.

	height: 59px;
	width: 60px;

Set some width and height.

display: block;

A block accepts width and height as well.

	margin: 20px 19px 20px 20px;

Not quite symmetrically my logo is, hence the different margins...

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

And again border radius in three different accents

#homeTest i span {
	height: 36px;
	width: 36px;
	display: block;

width, height, yada yada...

	margin: 8px 9px 8px 8px;

Not quite symmetrically my logo is, it really isn't.

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

And again three different ways to say border-radius. This is getting annoying people...

	text-align: center;

Set text in center.

	color: #39c;
}

And let it blend into the background. At last we set the colors of the outer and very inner circle, as they are the same.

#homeTest, #homeTest i span {
	border: 1px solid #39c;
	background-color: #39c;
}

There you have it, my logo in a couple of lines of css. For IE I could just set up a background image and nullify the borders and background, but why bother...

Css explanation will be published tomorrow