Jay Soo

We were having trouble at work with our OpenID login. When a user tried to sign in with an openid.org URL, openid4java would try an YadisException.

After trying other OpenID RPs like StackOverflow or Disqus, it seems it’s not a common problem for most people. So I started digging through the openid4java source code, and I found a solution for this.

In the YadisResolver.discover method, the retrieval of the XRDS document fails (HTTP 404). Yes, this is openid.org’s fault, but it’s still not satisfactory for us to not support it. Below is my edit to the method to make it work (starting at line 252)

if (result.getXrdsLocation() != null)
{
    try {
        retrieveXrdsDocument(result, maxRedirects, serviceTypes);
    } catch (YadisException e) {
        _log.debug("XRDS retrieval failed, trying GET");
        result = retrieveXrdsLocation(yadisUrl, true, maxRedirects, serviceTypes);
        if (result.hasEndpoints()) {
            result.setXrdsLocation(url, OpenIDException.YADIS_INVALID_URL);
        } else {
            throw e;
        }
    }
}

 I also made a repo on github for this, which also includes a download for the JAR file.: https://github.com/jaysoo/openid4java-openidorgfix.

 Launched two more websites: Toki Underground and The Queen Vic. Both are restaurants on H Street in Washington D.C., and both were designed by Alexis Thornlow.

I used DragDealer for Queen Vic’s menu section, which is a JavaScript library I have known for a while but never got to really use it. Since iPhone doesn’t support scroll bars in elements with overflow: auto, some JS solution was needed and DragDealer was ideal for that.

I have been using a lot of CSS3 in my projects this past year. CSS3 makes it much easier to implement design elements such as rounded corners, non-native fonts, etc.

The only problem with the CSS3 approach is that support for it differs among the major browsers. In most cases, it’s just a matter of using different vendor prefixes (-webkit vs. -moz vs -o). Internet Explorer (IE 6-8) though, is a whole other story.

Luckily, there are a few work arounds for getting your CSS3 styles to work in IE.

border-radius, box-shadow, text-shadow

Thanks for Remiz Rahnas for providing a way to easily support three very widely used CSS3 properties. Grab the ie-css3 script from this page, and simply add behavior: url(ie-css3.htc) in your styles. It’s that easy. :)

@font-face

Use the Font Squirrel @font-face generator to create cross-browser and optimized font formats and stylesheet. You can also browse through their collection of font packs to see if you can find what you’re looking for. The IE support goes all the way back to IE 4, so there should be no reason to not use embedded fonts. 

transform: rotate(…)

Let’s say you need to rotate an element 30 degrees clockwise using CSS3.

In Chrome and Safari you will use -webkit-transform: rotate(30deg). In Firefox you will use -moz-transform: rotate(30deg). In Opera you will use -o-transform(30deg). Easy right?

But what about IE? Some websites recommend using the rotation filter property. This property only allows for four rotations: 0, 90, 180, and 270 degrees. Well, that sucks right?

The good news is that IE supports matrix transformations, and rotation is just a linear transformation. I found this useful calculator online that allows you to input the degree, and it will spit of the matrix values along with the corresponding CSS – the rules you want are filter and -ms-filter.

opacity

To get opacity to work in IE, use the alpha filter.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 6,7 */
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 8 */

 The opacity value ranges from 0 to 100, where 0 is invisible and 100 is full opacity.

gradient

Use the proprietary gradient filter.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
    startColorstr='#cccccc', endColorstr='#ffffff');

The GradientType can be 0 for horizontal or 1 for vertical. Notice that you can only specify linear gradients.

I’m happy to announce the launch of Kissette’s website: kissette.com. The design was done by Sandra (of Kissette), while I worked on the web stuff. This is the first website I’ve built with HTML5 in mind. The audio players on the website are fully functional on the iPhone and iPad (via the <audio> tag). Some notable JavaScript libraries I used:

• Sound manager 2: adds audio to to your site by using <audio> or Flash for fallback. No Flash interface in either case.
• html5shiv: Force Internet Explorer to recognize HTML5 elements.
• Modernizr: Adds classes to the <html> elements to allow you to target specific browser features in your stylesheets.

I’m using jaysoo.ca now. I’m not sure if it’ll be the domain I primarily use, but it makes sense since it’s my username for many websites (github, hacker news, etc.).

Also, I helped my dad launch his company’s website over at enguda.ca. It’s running on Python and Django on the server-side, and jQuery in browser-land.