Tim and Andrew

Super powers and Tits Akimbo! Oh, I do like seeing my microfiction RSS feeds wake in the foggy dawn and cast about, noses into the rising wind, mad and bright as raptors.

90% of the links I send to the team mailing list at work are sourced from Daring Fireball, though

Standard boilerplate about not necessarily buying everything in the article I’m about to link, but:

“Comments, at least on popular websites, aren’t conversations. They’re cacophonous shouting matches.”

Yes, yes, infinite yes. It’s an iron rule. I know they drive pageviews, but if your business model relies on sacrificing the level of discourse to achieve pageviews, you’re in a bad business.

I, of course, have cleverly routed around this problem by never becoming popular, but this is the reason I’ll never turn on the comments on this blog or Ommatidia. (I honestly can’t remember why they’re on at the CHK, but that website is not a sole proprietorship.) The technology of blog comments is a net negative for the human race. If you want to talk publicly about a blog article, do it in your goddamn blog.

iPhone icon gloss overlay in pure CSS

As part of a Not Very Secret Project, I’ve been poking around at how the iPhone picks and generates icons for sites that you bookmark to your home screen (I only learned about Apple touch icons earlier this afternoon). Apparently, unless you specify otherwise, it applies a glossy overlay to that icon when it gets clipped out.

A lot of people seem to hate that gloss, but there are some ways out there to replicate it, mostly using a PNG overlay. I thought it might be interesting to try and get the same effect using pure CSS (note that this probably won’t work if you’re reading this post via syndication; click through to the original to see it). I am indebted to Neven Mrgan’s PSD replication, which I used for comparison purposes.

So here’s a plain 57×57 touch icon:

And here it is with the gloss, which is put together with Webkit and Mozilla border-radius and CSS gradients:

It’s not perfect–browsers don’t let you specify blending modes for shadows and highlights, and the antialiasing on gradients is still a little wonky–but it works at least as well as an image overlay, and now I get to feel superior for doing it with code instead of sprites.

The CSS in question:

 #glossy-icon {
	width: 57px;
	height: 57px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	background-image: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700, 
		from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
		color-stop(10%, rgba(255,255,255,0.2)),
		color-stop(10.5%, rgba(140,140,140,0.2)),
		color-stop(13%, rgba(140,140,140,0)),
		color-stop(13.7%, rgba(255,255,255,0)),
		color-stop(17%, rgba(255,255,255,1))), url(http://www.xorph.com/images/ba-icon.png);
	background-image: -moz-radial-gradient(28.5px -47px 45deg, circle farthest-side, 
		rgba(255,255,255,1) 0%, 
		rgba(255,255,255,0.2) 72%, 
		rgba(140,140,140,0.3) 74.5%, 
		rgba(140,140,140,0) 85%,
		rgba(255,255,255,0) 95%,
		rgba(255,255,255,1) 160%), url(http://www.xorph.com/images/ba-icon.png);
}

Monica and Sumana came to visit! In the same week! It was a very full week, but I am still very fortunate to have had both my pretend big sisters come see me. I got to meet a nontrivial fraction of the Geek Feminism crew and attend the Beard Team USA National Beard and Mustache Championships, of which, yes, pictures will forthcome. Now: to sleep until August.