Now this is really good for us real web craftsman and women. Real knowledge of your field once again proves itself against frameworks. How much I loved the demos of jQtouch at last weeks @media ( or #wdx as it is called now ), I still think that using a library or a framework isn't the thing to do for speed. So Ipad and Iphone development will create a new demand for good old hand coders.

"Don’t rely on frameworks or what standards zealots tell you. In our case, a highly trimmed HTML page, with inline CSS, just some pure JavaScript without a framework and using the capabilities of the target platform (iPad) as much as possible allows for a lean page that loads almost instantly, caches well and works great offline. Yes, we could have used JavaScript and CSS frameworks, but sometimes less is more (and remember, you don’t need all the cross-browser heavy lifting that frameworks do for you)."

(Via Thomas Fuchs.)

Please check this out, my friend Gerben just uploaded his 5th free font

Find them over here: FontStruct | gspace | FontStructions. To demo one of them, the 'Klonk Narrow' I used fontsquirel to construct me the different webfonts and the css.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

There is no lower case yet, but he is working on it...

Update

And to celebrate all of these design skills, Gerben has just joined us at Front end heroes. Go and check out his profile...

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

Just some CSS3 fun I had this morning on twitter.

h1 ~ div > p span[title^='bo'] strong:last-child { 
	color: red;
}

span[title$=foo] strong:first-child { 
	font-style:italic;
}

span:not([title^='dd']) { 
	font-size:2em;
}

If you feel like it I would like to see the html in the comments...