MathML+WebKit

Aug 19th, 10 / 1 Comment

If you’re the kind of person who likes to download WebKit nightly builds to tinker with emerging features (and who isn’t?), then you’ll be interested to try out MathML support which is now turned on by default.

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! :D 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…

, , , , , ,

Relaunch of Yingwen’s website

Aug 10th, 10 / 0 Comments

I finally got around to finishing the upgrades on Yingwen’s piano teaching website last Sunday. Talk about taking one’s time…

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

, , , , , , , , ,

Cheatsheet from today’s Open Web Camp “Refactoring for Mobile” talk

Jul 17th, 10 / 2 Comments

For the Open Web Camp attendees, here’s my cheatsheet from the Refactoring for Mobile talk I gave today at Stanford:

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!)
*/

Condor

Jun 17th, 10 / 2 Comments

This is the second time I’ve seen a live California Condor. The first time I barely remember – I was maybe 7 or 8 years old, and I had a fuzzy photo from the San Diego Zoo that I took myself. There were several in this part of the San Diego Wild Animal Park, and this one was posin’ for the camera:

California Condor

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

, , , ,

A gluten-free tourist in San Diego

Jun 13th, 10 / 0 Comments

I have had a couple of awesome trips as a gluten-free gastronaut into San Diego County this past year. San Diego has some excellent restaurants, and here are some things I experienced that should be of some interest to the celiac community at large when planning things:

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!

, , , ,