MathML is supported server-side in several wiki platforms I regularly deal with (such as Confluence and MediaWiki), and it has always been an important requirement for support from my colleagues in the science community who do any kind of math research (but second place to LaTeX). This is the first time I’ve seen it supported in a major browser platform though. The mathematics community will be very interested in this sort of thing, and I expect at some point in the future we’ll just be embedding MathML into markup and publishing it rather than having to rely on a server-side library to parse it. Yea! I know it sounds more geeky than usual, but this is pretty cool in my book – especially from an applications perspective.

The only thing more geeky about downloading WebKit nightly builds is getting excited over new XML functionality. Also slightly related: both SVG and HTML5 canvas will be supported in IE9, making it doable in all modern browsers when that finally gets released and older versions become rarely used. It will become an increasing trend to represent data in these formats, natively in markup, rather than relying on 3rd party server-side libraries or plugins. Standards eventually win, usually…

Anyway it looks fabulous. Used the Piano Black theme by mono-lab, and hacked it up good at Open Web Camp for the mobile audience. Try it on iPhone or Android.

Yingwen has quite a growing studio. With her better students now winning competitions, she’s building up quite a demand for piano lessons. Most of her piano students come from Danville and San Ramon, particularly from the Blackhawk and Windemere areas, but some drive an hour or more for lessons now. Crazy… Check her out at yingwenlewis.com

Get it as a CSS file and view it in your favorite code editor:

walkthrough.css

Or preview here:


/*
The first thing we need is a media query and to add
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
to the head:
*/
@media only screen and (max-device-width:480px) {
/*
For starters, note the two divs #wrapper and #contents.
Let's use those to create our structural layout and
fold back in some of those design elements.
*/
#wrapper {
background:url(img/back2.png) no-repeat center top;
margin-top:-1em;
}
#contents {
text-align:left;
width:95%;
margin:0 auto;
}
/*
Now, let's style the main navigation buttons. First, we
will use inline-block to give block-like behavior to the
buttons but retain width based on the content. Then we set
the color, font size, and floating, and add a bit of box
shadow.
*/
.menu a {
display:inline-block;
background-color:#000;
float:left;
font-size:14px;
padding:1em 0.95em;
border-left:1px solid #888;
-webkit-box-shadow:0px 1px 5px #222;
}
/*
We can now use border-radius to style the left and right
buttons instead of image files:
*/
.first_menu a {
border-bottom-left-radius:6px;
border-left:none;
margin-left:2px;
}
.menu li:last-child a {
border-bottom-right-radius:6px;
}
/*
What if we flip to Landscape? There's a media query for
that:
*/
@media screen and (orientation:landscape) {
.first_menu a {
margin-left:78px;
}
}
/*
Now we can style the body content. #middle-contents is
the main containing block. We can use the background image
from the main stylesheet, but alternately we can use rgba
backgrounds to get finer control. Add border radius and box
shadow for depth.
*/
#middle-contents {
/* background:url(img/side.png) repeat-y;*/
background-color:rgba(0,0,0,0.3);
padding:1em;
border-radius:10px;
-webkit-box-shadow:0px 1px 6px #000;
box-shadow:0px 1px 6px #000;
font-size:1.2em;
margin-bottom:1em;
}
/*
Let's style the banner text and have some fun with it using
web fonts. Here's a font we'll pull in, using TTF and SVG formats.
Sadly, the vendors have many opinions on the solution, but
FontSquirrel can help sort it out.
*/
@font-face {
font-family:'Lobster';
src: url('Lobster_1.3-webfont.ttf') format('truetype'),
url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
}
#logo a {
display:block;
text-align:center;
padding-top:12px;
font-family:Lobster, sans-serif;
font-size:2.7em;
text-shadow:0px 2px 4px #000;
}
#logo h1 {
font-family:Lobster, sans-serif;
text-align:center;
font-size:1.5em;
}
/*
The float is creating a spacing issue. We can fix that
with a clear:
*/
#header { clear:both; }
/*
We are getting close. Now on to the bottom of the page.
The #comments section is too wide. We need to reset it:
*/
#comments {
width:100%;
}
#comments textarea, #comments input {
width:93%;
margin-bottom:0.5em;
padding:0.5em;
font-size:1.2em;
border:1px solid #000;
border-radius:6px;
}
/*
That input button could be nicer:
*/
#comments input.button {
display:block;
width:80%;
margin:0 auto;
height:2.5em;
padding:0.5em;
}
/*
Now we have something that looks like it was meant for a
mobile device. Let's wrap this up by making the final
links look like tap-friendly buttons:
*/
#right-col a {
display:block;
padding:0.5em;
font-size:1.3em;
font-weight:bold;
text-align:center;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#666666), to(#666666), color-stop(.5,#333));
border:1px solid #000;
border-radius:20px;
margin-bottom:0.4em;
}
/*
Maybe those final link items were over the top.
Let's restore them to inline links:
*/
#copyrights a {
display:inline;
margin:0;
padding:0;
font-size:small;
border:none;
background-image:none;
}
}
/*
Now add some HTML5: Add placeholder="I think..." to the textarea in
comments.php, line 191.
Add input types to email and url fields.
Finish with atouch icon: <link rel="apple-touch-icon" href="piano.png"/>
(Note to attendees: I forgot to add the piano.png file to my project files.
But this works otherwise!)
*/


These are amazing animals. Same level of awe as when I was a kid…

First of all, the Gluten Free in SD website is a fantastic resource and should be your first stop when organizing your trip. There’s a ton of good resources pointed out on the website, and things are indicated with latest dates that things were confirmed. This was the site I used to look up restaurants with gluten-free options, and to know what to expect when walking into theme parks and other tourist attractions.

Last winter break we headed down for four nights at the Coronado Bay Resort. This is a good place to stay, because the restaurant there is excellent for handling gluten free options. The breakfast buffet had gluten free muffins every morning, which were great by the way, and the chef was able to explain what was safe to eat from the menu and cook things special order. We had dinner here several times on this trip, just because the restaurant was handling the gluten-free requirements so well. If you’re headed to the theme parks, eat a big breakfast here because the theme parks mostly don’t have much to offer.

Sea World, The San Diego Zoo, and the San Diego Wild Animal Park didn’t have many things to eat that were gluten-free, but there were fruit items, nuts, and chips to be found—enough to tide one over for the day if not staying too long, at least until dinner. The great exception to the theme park scene in San Diego for gluten free options was Legoland, which had gluten-free hot dog and hamburger buns at most of the tray service food booths. When I had inquired about getting a hamburger with a gluten-free bun, the nice person taking my order clearly had been trained well in protocol for handling such requests, but she had also obviously never had such a request before. She was good about it and checked thoroughly, and she made sure I stayed at the window so I didn’t have to hang out on the side of the building for a long wait not knowing what was going on. The burger was terrible, just like everyone else’s. Mmmmm….

San Diego has a number of excellent restaurants with gluten-free menus or options. Our first stop in our December trip was to Del Mar Rendezvous, a chinese restaurant with a dedicated gluten-free menu and knowledgeable staff. We had the Beef Chow Fun and Kung Pao Chicken, both of which were excellent. The chow fun was done with flat fettuccine-like rice noodles that were quite wide and worked very well.

After our Legoland trip in December, we went to Claim Jumper in Carlsbad. Not bad, but they did bring my plate out with a big giant piece of bread on it when I had specified that I was ordering gluten-free from the menu and reminded them to ensure that no bread or whatnot was to come into contact with my food. Our waiter, who wasn’t the one returning with our food, was horrified and started making a scene when he left our table to go fix it, which was fun to watch. A freshly-prepared plate came back soon, sans gluten, and all was well.

This past weekend, we were down in San Diego again to help my aunt get some of her paintings appraised at the Antique Roadshow. The paintings weren’t worth a fortune or anything, but we found some more excellent restaurants to eat at:

Our first dinner stop was to Uno’s Chicago Grill. Uno’s was the scene of Yingwen’s and my first date together back when we were student’s at New England Conservatory, and we haven’t been to one since the last Uno’s locations left San Francisco several years ago. I knew they had a new gluten-free pizza on a dedicated menu, but by now I’m actually sick of gluten-free pizza. There’s plenty of it in the Bay Area now – and I still had half an unconsumed pizza left in my refrigerator back home! I tried the stuffed chicken instead, and ordered a Redbridge to go with it. Delicious, actually.

The following evening, after convincing my two aunts on this trip to watch our kids so Yingwen and I could have a date, we went to Ki’s Restaurant in Cardiff-by-the-Sea. This spot had a beautiful view overlooking the ocean and the setting sun, and we had prime seats. Ki’s sports a dedicated gluten-free menu that is quite extensive, and I ordered spring rolls as an appetizer and the Jidori chicken breast entree. The atmosphere here was clearly more laid back California style than your usual restaurant, which I appreciated, and the vegetables tasted as if they were picked within minutes—really fresh and delicious. Watching the sunset go down with a couple good glasses of Shiraz and Yingwen’s pint ‘o Mai Tai was a great way to spend the evening together.

We finished off our dining experience in San Diego at BJ’s Brewhouse, which has a good gluten-free menu. Of course they had a pizza option, and I gave in and ordered one since they have been getting rave reviews. They were out of Redbridge, but wine always works well in these situations and is actually the preferred choice these days. My pizza came ordered with pepperoni, bacon, sausage, artichoke hearts, green peppers, and mushrooms. Toppings-wise, local favorites such as Extreme Pizza and Pennini’s in Moraga win, but the crust was certainly pretty good.

Well that’s it for my San Diego roundup. I love this town!

http://christianbaroni.me/?page=downloads

(Found via http://twitter.com/flyosity/status/15798736074.)

This will be important for iPhone apps but even more important down the road (in my opinion) for web apps that have custom icons associated with them. If you’d like to learn more about this technique, full instructions for creating a custom desktop iPhone icon for a web page or web app are right here in Jonathan Stark’s excellent go-read-this-now book on building web apps with HTML, CSS, and JavaScript:

http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932602

The gist of which is essentially you are creating a 57 x 57 icon and then adding one of the two following HTML lines to identify it:

The first option inherits the glossy light effect and corner radius from the iPhone OS. The 2nd one does not, so you have to handle corner radius and any desired light effects manually. iPad icons use 72 x 72 pixel resolution. I’m not sure yet, but I’m betting the new OS will have something closer to the 72 px size. Anyone know the answer?

I’ve since come to my senses. I love books – the binding, the texture of fine paper, the fact that it doesn’t require a battery or power cord, and even the smell are all plusses in my book. Books have been around a long time, and they’re here to stay. Ebooks are just another channel of distribution for such content, and I believe that both have their place in the modern era.

However, for academic research papers, I think we can safely kill the paper. Particularly, I think it should all begin moving towards the EPUB format. I read a lot of academic papers in my work, and I find myself wishing that more of this stuff were published as EPUBs. In contrast to my love of books above, I think academic research would largely be much better served in a purely electronic format. It’s already going that way from the reader’s point of view, right?

Typically, when academic papers get published electronically, the format of choice is PDF. Or in earlier days, PostScript. If you’re lucky, someone had the foresight to publish their paper as HTML. The advantage of a flexible format such as HTML is that you can resize the fonts. Text can flow. It’s easier to get a clean copy of a text or data segment out of HTML than it is from PDF for quoting in one’s own paper, because copying from PDF tends to yield horrific line break issues and other artifacts on the clipboard.

PDF is, I’m sorry to say, hard to read on smaller screens. PDF expects paper, and refuses to reflow itself into smaller screen sizes such as an iPhone or Android device form factor. It barely passes on the 1024 x 768 iPad screen. Anything smaller, such as most ebook readers, is going to be unacceptable. Having to zoom in and scroll left to right to read one line of text at a time on a mobile device is not what anyone would call a user-friendly reading experience.

EPUB by contrast works great on mobile devices. Using the Stanza reader on iPhone is quite comfortable. iBooks on the iPad platform is a joy to use.

After reading this tweet by Dave Gutelius today, I was reminded of how much I hate printing out all my academic papers in preparation for travel. Flying is reading time, and printing this stuff out and stuffing it in my backpack is time consuming, a waste of paper, and added weight that I don’t want to carry.

Stuffing those papers onto my iPad and using GoodReader is a step in the right direction. But still, all too often the PDFs are formatted for paper, not for screen, and I am still cursing the format. PDF usually assumes letter-sized or A4-sized paper, and most ebook readers have physically far smaller screen sizes. Far better I think to start providing EPUB options for academic research, so that folks like me who need ginormous fonts and such can read with greater ease.

Or, should it just go to straight HTML? At that point, papers might even be able to add a little functionality to the electronic reading experience – change variables in information graphics, show rendered 3D representations of models, and so on. EPUB doesn’t support anything fun like HTML5 DOM handling or Flash, although CSS3 might work depending on the EPUB reader’s implementation. Either way, PDF ain’t fitting the bill ebook readers, and I think this sort of format will be far more important in the coming months and years as ebook-capable mobile devices become more and more commonplace.

The original blog was a hand-rolled PHP/MySQL app, before Michael insisted that I upgrade to WordPress. It was actually a fun little SQL mapping exercise to get my old posts integrated into WordPress’ format, and I’m amazed it worked as well as it did, all things considered.

If you’re wondering what San Bei Ji means, there’s a fine article about it on Wikipedia.

三杯雞好吃!