Roman’s blog

A Java applet runs in a 100% pure java fantasy world, neatly enclosed in its rectangular real estate. Putting code in a page makes sense if you can control that page; doing your little masturbatory stuff, alone in your tiny square box makes no sense. That’s why javascript made it and java didn’t: javascript acknowledged that the game was about getting intimate with the page, and getting your hands covered with slimy tag soup.

Reddit comment by fab13n on Joel’s article “Strategy Letter VI”

User Interface:

• Bumptop Prototype [youtube.com]
• Jeff Han on TED Talks [youtube.com]
• Information Software and the graphical Interface [worrydream.com]
• Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles [hubel.sfasu.edu]

Miscellaneous:

• Why I quit my 6-figure job: [menshealth.com]
• Many English words have Latin roots, but what are the roots of Latin? [straightdope.com]
• Flight patterns [users.design.ucla.edu]

Elliote’s notes on Architecture & Design World:

In Ivar Jacobsen’s lunch keynote he reveals that he’s pretty much given up on large, all-encompassing “processes” like RUP. He’s now advocating picking and choosing from a grab-bag of individual “practices”, which is what most shops were doing anyway.

Elliote’s notes on EBay scaling issues: Ebay has gone through three major changes in their architecture. The first version was based on Perl, the second on C++/IIS (ISAPI.dll) now it’s Java.
OSCON 2007 Presentation papers [conferences.oreillynet.com]
OSCON Presentation on AJAX Performance: Performance Javascript mantra: Be lazy, be responsive, be pragmatic, be vigilant.

Web browsers are more like mobile phones than desktops. Limited, flimsy, temperamental platform being stretched beyond its initial design goals. But everyone’s got one, so it’s still the best place to be.

http://odftoolkit.openoffice.org: An effort to open OpenOffice APIs to non UI-driven applications, like document generation or conversion (think of PDF!)

Originally Javascript was intended for “enhancing” static web-pages with dynamic behaviour and was therefore positioned as an HTML extension for a long time. This is also reflected by Javascript documentation on the web; Naturally the target audience is the web-developer and almost every introduction puts Javascripts into HTML context, failing to explain underlying language concepts. Douglas Crockford is one of the few who tackles Javascript as a programming language.

• Douglas Crockford’s Javascript
• Video: The Javascript Programming Language
• Video: Advanced Javascript

Also helpful:

• ECMAScript Language Specification
• JavaScript Reference
• Core JavaScript 1.5 Guide - MDC
• Core JavaScript 1.5 Reference - MDC
• JavaScript - MDC

If you want to style buttons in your web-application you inevitably end up with the <button> HTML element. There are alternatives: CSS’ing your <input type=submit> tag, using prerendered (!) images with <input type=image>, using links instead of form elements, etc. However if you want a flexible button layout without compromising the browser’s submit mechanics, then <button> should be the right thing, you’d think.
The “value proposition” goes like this: You can put any valid HTML inside the button element, for example background images or more spohisticated: a table with images for rounded corners on both sides and a stretching text-aligning middle AND it should behave like <input type=submit>. Nice! Ok and now to reality, welcome to “Button hell”.

• <button> is broken in IE: And I mean it. Actually it is so broken that you’ll need hefty workarounds to get it working at all. Here’s why:
• IE submits all button’s in your form: Yes! I mean what were they thinking? To clarify: You have three different buttons in your form, e.g. “save”, “delete” and “insert”. If you press one of them all corresponding values will be submitted! Which acutally means you can’t decide which button was clicked on the server side. One workaround would be to use hidden submit fields which are being filled by the button’s onclick handler.
• IE button submits innerHTML: You might be tempted to believe that the “value” attribute holds the actual submit value. Actually this is what W3C says. Not in IE: In all circumstances the body of the <button> element will be submitted, that is: all your HTML code (escaped of course). If you submit via GET you will ultimately hit IE’s URI limit. This is a longstanding bug since IE5+ that eventually gets addressed in IE7.
• IE stretches your buttons: Actually IE does this on all buttons not only those generated by the <button> tag. Why is this a problem? Well you use the button tag to style it according to your needs, which actually means you will disable the border of the original button and replace it with you images for example. However behind the scenes IE stretches the button proportionally to the enclosed text, only you can’t see the real dimensions any more! You will however see erratic paddings to your neighbour elements and wonder why the hell you cant right-align your buttons with your form. Thank god there’s a workaround.
• Different paddings on browsers, Firefox nasty: Just as you think, you’ve everything under control, you open your form in another browser and start to scream again. See here for the details. Note the firefox behaviour:
  

  3px padding left and right, and 1px padding top and bottom appears to be added even when zero padding is applied. (Thus the user can never remove the padding completely. Buttons may also appear larger than expected.)

  Which acutally means you will not be able to right-align a image style button with your form in Firefox. It cost me hours to find out that the only workaround is to put the button content into a <div> or <table> and then apply negative 3px margins on that container.

• You will need browser-specific CSS: As ugly it is, you will end up with conditionally included style-sheets to address the padding problems above…

Summing up the amount of work I needed to fight through the problems above, I would say it cost me a week of time and approx. 2500 hairs of my scalp.

Some new pictures of Romina here (opens in new window). As you can (hopefully) see I experimented with an Javascript based slideshow. I found the following free, ready-to-use implementations: HighSlide, Thickbox, Lightbox, Greybox and Smoothgallery. I used Smoothgallery because it works with standardscompliant markup and is relatively easy to set up. Hacked up a small script for generating the gallery. I first tried to embed the gallery in the blog post, but got some sideeffects with the layouting. Furthermore I would have to include the Javascripts in the php-header of the wordpress theme, which of course decreases load time. So, although not a fan of “popups” I decided to use them for those mini-galleries.

Just upgraded to Wordpress 2.0.6 because of security issues. The upgrade was easy as always: Just copy the new files over the old ones, request an upgrade page, finished. Everything works as before: plugins, themes, etc. Fine piece of software.

Finally had some time for a new theme. I switched from the default Kubrick layout by tweaking the CSS and some of the PHP sources. I’m by no means a CSS expert but during the whole thing I learned quite a bit:

• Prefer paddings for spacing instead of margins especially for elements like headings and lists. Margins tend to obscure your layout since you can never be sure if a neighbour element’s margin pushes you around. Set 0px margins explicitely to avoid browser defaults.
• Don’t make something inline what is normally block (e.g. for preventing line-breaks between a heading and a smaller caption). This will catch you just behind the next corner.
• Beware of the IE “Double margin bug”. What a PITA, cost me an hour!
• Use floats for your sidebar, don’t do tables.
• Fonts have very different sizes for the same “Point size”. This is expressed by the so called aspect ratio. Problem should be solved by the font-size-adjust CSS property which unfortunately isn’t implemented across various browsers.
• The X11 base font equivalent to “Georgia” is “Utopia” not “Times New Roman”.
• Keep your CSS simple. Browser quirks WILL byte you. Restrain from dirty CSS hacks, even if they’re well documented.
• Use browsershots.org for cross-browser/cross-platform testing.

As for the layout itself: I switched to a serif font (Georgia) for readability reasons. Don’t use Times for this prupose as it renders badly on computer screens. The content area is now emphasized by having a dark surrounding. I used grey instead of pure black since latter would mean too high contrast and hurts the eye. Finally I streamlined the look for various pages. The main page, archives and detail page now all have a sidebar. This is for consistency, the original layout switched to a “wide-content” layout.

Well, rumors are over, they’ve done it. Here some quicklinks:

• Sun relicenses Java under GPL (theserverside.com)
• Sun Open-Sources Java Implemenentations (artima.com)
• Java ist Open Source (heise.de)
• Java is Free (tbray.org)

• fastUtils (fastutil.dsi.unimi.it) Another enhancment library for Java collections like Javalution (see also earlier post). Released under LGPL.
• mg4j (mg4j.dsi.unimi.it) “Managing Gigabytes for Java”. A libary for creating reverse indices. Similar to Lucene although a more lowlevel approach. Read about the differences here. Released under LGPL.

Surfing around:

• Removing features from the Java SE platform (blogs.sun.com)
• The JVM as an (Un)Common Language Runtime (www.artima.com)
• Strongtalk has gone fully Open Source! (www.strongtalk.org): Now that’s interesting. Did you know that Sun bought and locked away a strongly typed VM-based Smalltalk variant in the mid-90’s?
• Subreddits (sub.reddit.com)
• How often do you visit reddit (www.tezaa.com)
  
• T.E.D.D.Y. Converts 2D Images into 3D (techeblog.com): WOW!
  
• Raw Shooter bought by Adobe (www.pixmantec.com): This makes me kind of sad… Raw Shooter products will be discontinued while Adobe will incorporate RS technology into something called “Lightroom”. Read here for more information.