“Recreating the button” by Douglas Bowman is a great read. It shows how one can struggle with browser differences while trying to achieve visually-appealing effect using CSS.

Eliminating the background image sounds like a challenge, so I decided to try to make similar buttons using pure CSS. Goals:

• cross-browser (Firefox, IE6 and IE7, Webkit, Opera)
• smallest possible number of nested elements
• has to work with button and with any other HTML element (such as link or span)

To get three horizontal bands I decided to use thick (1em) borders for top and bottom colors and a background color for the middle one, so the height of element is very little (0.2em). Here’s the idea:

Here’s live demo page.

HTML structure:

using button element:
<button type="button"><span class="btn"><span>longer button text</span></span></button>

other elements:
<a href="#" class="btn"><span>button</span></a>

It was very hard to get button elements work with these CSS rules, so I decided to just remove borders and background from button elements, making them invisible. So there are two nested spans if you want to use button element, and ust one nested element for other uses.

Complete CSS:

button {
	background:transparent;
	cursor:pointer;
	padding:0;
	margin:0;
	border:0px solid transparent;
	overflow-x:visible;
}

.btn {
	display:inline-block;
	/* these three colors make button's pseudo-gradient background */
	border-top:1em solid #f9f9f9;
	background:#eee;
	border-bottom:1em solid #e3e3e3;
	border-left:none;
	border-right:none;
	color:#333;
	cursor:pointer;
	font: 12px/1 Arial, sans-serif;
	height:0.2em;
	padding:0;
	margin:0;
	text-decoration:none;
}

.btn span {
	display:block;
	height:2em;
	line-height:2em;
	margin-top:-1em;
	padding:0 3px;
	border:0.1em solid #000;
	border-color: #bbb #999 #999 #bbb;
}

button .btn {
	/* working around Gecko "unremovable" 3px padding bug */
	-moz-margin-start:-3px;
	-moz-margin-end:-3px;
}

* html .btn {
	overflow:hidden;
}

* html .btn span {
	width:1%;
	position:relative;
	white-space:nowrap;
	z-index:1;
}

* + html button {
	white-space:nowrap;
	overflow:visible;
}

/* some extra CSS for visual effects */

.primary {
	font-weight:bold;
}

.pill-l {
	margin-right:0px;
}

	.pill-l span {
		border-right-color:#777;
	}

.pill-c {}

	.pill-c span {
		border-left-color:#fff;
		border-right-color:#777;
	}

.pill-r {
	margin-left:0px;
}

	.pill-r span {
		border-left-color:#fff;
	}

.btn:hover, button:hover .btn {
	color:#000;
	background-color:#e3e3e3;
	border-top-color:#f0f0f0;
	border-bottom-color:#d9d9d9;
}

.btn:hover span, button:hover .btn span {
	border-color:#99CCFF !important;
}

button:focus .btn, button:active .btn, .btn:focus, .btn:active {
	border-top-color:#e3e3e3;
	border-bottom-color:#f9f9f9;
}

I guess I was subconsciously coining a new term–which I so rarely do–this time, combining crowd and cloud into something new. I think I like it, even if it is a bit artificial.
- Seth Godin

I’m not the first to declare feed bankruptcy so it’s not an original idea. I knew I’m gonna have to do this for a few months now, because the number of unread items in my bloglines skyrocketed from ~1.000 not so long ago to ~12.000 yesterday. These people at Mashable or Techcrunch write faster than I can read… ;)
This decision was easy because I wanted to try Google Reader instead of bloglines, so threre was a good motivation to just move my feed list from one reader to another, keeping the feeds and resetting the number of unread news.
And here’s the real point of this post: Google Reader rocks. Bloglines is a great service, especially the new beta version, but what Google Reader means for on-line feed readers can only be compared to what Gmail was to webmail market.
(Now I have to clean up my subscription list, so I won’t have to declare bankruptcy again next week)

I’ve been playing with my JSTAL and Helma+CouchDB – and it seems to work really well!
Here’s a short Helma code example:

app.addRepository("modules/jstal/jstal.js");
app.addRepository("modules/helma/Http.js");
app.addRepository("modules/core/JSON.js");

global.dbData =
helma.Http().getUrl('http://localhost:5984/test/_all_docs')
.content.parseJSON();

var template =
<ul xmlns:tal="http://xml.zope.org/namespaces/tal">
	<li tal:repeat="row dbData/rows">
		<em  tal:content="string: id = ${row/id}" />
	</li>
</ul>;

res.write( jstal(template).render() )

The recent Jaxer announcement makes me believe even more that JavaScript on the server may be The Next Big Thing this year.
I always wanted to use JS on the server, now there are many opportunities to do this. I have tried Helma and it feels great, but Jaxer has all that browser-related stuff like window object, DOM, CSS etc., so it may be the choice for front-end developers who want to start with server-side programming.

I used to write some PHP code before, and one of the best tools I used then was PHPTAL (implementation of Zope’s Template Attribute Language in PHP). I won’t elaborate why I like this template language (they did it), but it’s really really better than templates based on string replacing and concatenation (SMARTY, anyone?)

Some day I thought it would be great not only to use JS on the server, but add TAL template system to this toolbox, so I started to imlpement TAL specification in JS, using E4X (as I’m targetting mozilla-based environments).
My implementation isn’t complete yet, but I have started google project JSTAL – you’ll find more info on project wiki.

I don’t know if it works on Jaxer (because I’m waiting for Linux version), but it works well on other platforms that use Mozilla scripting engines (Helma, POW, Firefox2 and Rhino) so it should be OK. Please leave a comment if you gave it a try.

Here’s an example for you lucky Firefox 2 users: data and template code and rendering test, but remember that it’s meant to be used on the server, unless you target only Firefox users (or want to use it in a XUL Runner application).

This paper explores the idea that the universe is a virtual reality created by information processing, and relates this strange idea to the findings of modern physics about the physical world. The virtual reality concept is familiar to us from online worlds, but our world as a virtual reality is usually a subject for science fiction rather than science. Yet logically the world could be an information simulation running on a multi-dimensional space-time screen. (…) Modern information science can suggest how core physical properties like space, time, light, matter and movement could derive from information processing. Such an approach could reconcile relativity and quantum theories, with the former being how information processing creates space-time, and the latter how it creates energy and matter.

Very interesting paper – if you like when philosophy meets physics (quantum theory), go read it(pdf link)

[via boing-boing]