Archive for the ‘Web Development’ Category

MathML+WebKit

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…

iPhone icons

Here are some lovely PSDs available for download; excellent for picking apart how to create great iPhone icons:

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?

Doll up your tabular data

In the science realm, we are often confronted with having to look at a dizzying number of flat tables representing experimental data. It wouldn’t hurt to spend a little time thinking about how that information is displayed in it’s native format. And often when we see tables that are ‘nice’, they are rendered as an image, thereby shielding wary and hapless internet searchers from all of the rich and informative data contained therein. I’m often asked to provide feedback on these things, so I was pleased to find a little tutorial with some nice examples of styling tables using CSS3 that I can throw out there. Here you go!

Pimp Your Tables with CSS3 | Codrops

Quick tip for using TextMate with Confluence

If you like using TextMate for all your code editing needs, and are using the Confluence wiki platform, and you have TextMate set to work as an external editor in Cocoa apps (such as Safari), then this little bit of know-how may come in handy:

Confluence wiki markup looks suspiciously like Textile. In fact, yes, it is officially based on Textile markup. So if you are editing wiki markup in TextMate, set the language of the document to Textile and you’ll get all the nice color coding and formatting tools.

Best of all, the Function pop-up menu will find all your headings (h2., h3., etc.) and organize them into an indented menu for you, making long documents much easier to navigate.

In defense of the vendor prefix

PPK has written a thoughtful post titled CSS vendor prefixes considered harmful, and in it he outlines the case of why browser vendors should cease use of the vendor prefix condition.

I sympathize with the case, but the very opening example we have a problem: border-radius. When varying corner values are involved, vendor implementation consistency breaks down:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 30px;
-webkit-border-bottom-right-radius: 40px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 30px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 20px;

I’d say vendor prefixes are an unfortunate but necessary construct until things are a bit more solidified – at the very least between browser vendors, and ultimately as written in a W3C recommendation.

What I think is important though is that developers do include the expected latest draft code of CSS3 at the end of their declaration blocks. Shipping code, both from the vendor perspective as well as the web developer perspective speaks volumes. If IE is going to drop vendor prefixes and is going with the latest draft examples, then good on ‘em.