jQueryUI buttonsets have a UX problem

jQueryUI is much less popular these days, but it is still used widely. Other UI frameworks have solved many of the shortcomings with it, but switching over to Bootstrap or some other UI framework isn’t always the best option. One thing I have noticed is the buttonsets which can be used to style checkboxes and radio buttons are problematic.  Especially so if you are using a custom (not glossy) theme! It simply isn’t clear what state the buttons are in sometimes.

See the default widget demos for an example:

Icons can help with this but the jQueryUI icons are another sore spot of the framework, and implementing even those icons on buttonsets to indicate button state can be a bit tricky.

A very little custom css seems to go a long way though!

I tested this on a few different OSes and browsers just in case the unicode icon thing might be a problem but it seemed to work well. Even if that were an issue, using a custom font or other content in the content value should work.

Flattr this!

Firefox Propaganda

Overall I think people don’t understand propaganda well, and this leads to the perpetuation of bad journalism among other things. I could go on about that, but suffice it to say there is propaganda out there in the tech press and other places concerning web browsers. I don’t really get the reasoning behind why there is propaganda regarding web browser software… A little, just not well enough to articulate or go into here. Anyway may as well add my voice to the noise.

Reasons I continue to use Firefox as my primary browser.

  1. It is decent software that is constantly improving. On the whole, in numerous practical benchmarks and measures it compares well with Chrome, IE and Safari. Meaning there is no obvious or sweeping practical reasons that serve as justification to sacrifice ideologically superior software.
  2. Ideologically superior software?! Firefox is open source AND the only major browser with development driven by an open community facilitated by a non-profit organization. Consider why companies like Google, Microsoft and Apple may want you to use their browser; why they even make web browser software at all… They do not have your interests in mind, at least not primarily. Their primary interests are necessarily those of the businesses and shareholders who profit from you in some form or another. The fact that their source code is open or that their development happens within public view doesn’t diminish the significance of this fact.
  3. The focus of Mozilla being the interest of their users leads to innovative and interesting projects that stand to directly improve the experience of web users.
    1. Rust: a new language that focuses on concurrency and memory safety. This has more potential to benefit users than the languages and platforms advanced by the other browser vendors. Dart, Go, Swift, .NET, etc. They are all interesting, and not bad or anything, but their primary directions and focuses all seem to revolve around solving business and development problems rather than end user problems specifically.
    2. ASM.JS: making code, especially gaming code, blazing fast in the browser. This vastly expands the scope of products that could be delivered though the web browser reducing the reliance on particular OS’s or vendor specific app stores to deliver such products and services.
    3. FirefoxOS: a whole mobile OS that uses the web platform as the development framework and the web itself as the app distribution model! Mobile OS’s have notoriously delivered a relatively poor web experience preferring ‘Native’ Apps and the App Store model for distribution each for various reasons, but some aspects of this model are inferior and detrimental to users experience comparatively speaking.
    4. Shumway, Firefox’s Sync and WebRTC implementations, PDF.js, OculusRift/3D support, etc…
  4. The focus of Mozilla being the interest of their users leads to standards that tend to center around the benefit to web users and developers in general rather than specific features or functionality that some company or companies perceive as important for their products/users/developers.
  5. A few particular features that may or may not be replicated in options or add ons for other browsers:
    1. Firefox Sync: Passwords, history, bookmarks, settings, etc shared between devices, including mobile versions, in a way that remains completely private! Actually, it looks like Chrome supports a form of this now, but it is opt in. By default Google will be able to see all your data unencrypted. (and that makes sense according to their business model, so I wouldn’t expect that to change.)
    2. Just in time tab loading: I like to have my browser open with tabs in state it was when I closed it. This is convenient for me. However there is usually no need to load the content, and start playing videos or whatever might be on those tabs, until I switch to it for the first time. Besides avoiding annoying videos starting to play on some unfocused tab the just in time option keeps memory, battery, and network uses lower in many cases while improving the start-up experience. It is a small thing that makes a significant difference. Apart from some technical challenge that makes it much more difficult than it would seem to be I genuinely can’t see why the other browsers wouldn’t decide to implement this.
    3. Firefox Hello/built in WebRTC tool: The new chat feature bundled with Firefox just floors me. No sign in or pre-agreed upon shared service is necessary between you and whomever you want to video chat with! Just share a link and go!

Recently there was a post going around about switching back to Firefox from Chrome. Even though it is in favor of Firefox in this instance it is this sort of ‘journalism’ that I find disappointing.

Flattr this!

Grails and Spine.js decoupled development setup

Using Grails as the API server for a spine app and Spine.js as a front end framework has been going well. My Spine app has up till now lived in the web-apps directory of my Grails app. After living with this arrangement for a while I started to realize how separating the two even further would have many all-around advantages. Decoupling code makes new projects easier to manage by isolating versioning, testing, deployment/release for example.

In production environments this sort of setup isn’t all that uncommon, you let Apache or something like it serve static image, js or css files and use mod_jk or some proxy setup to pass the rest on to Java app server like Tomcat.

My setup is a little different in that I want to serve html and js and have to make sure all relative links still work for ajax API requests, and locally there is a cross domain issue if you try to simply work from files in the browser and make calls to Grails running on Tomcat

Long story short; to get my decoupled dev setup here is what I did:

  1. Install Apache
  2. Get it running
  3. Set up virtualhost that will proxy appropriate requests to Grails (need mod_proxy_http)
  4. Add alias definitions for Spine apps

Steps one and two are relatively standard stuff. On Ubuntu it is trivially easy. (sudo apt-get install apache2)

Step 3 was new to me. Searching turned up a good starting point on that, but simply proxy isn’t what I really needed. That brings us to step 4. I needed some interceptors (Alias’) for my spine apps, so that relative links still played nice. For example, I wanted ‘http://localhost/grailsApp/spineApp/’ to direct to my Spine app, while links within the spine app like ‘../api/book/5’ were handled by Grails. an old forum post contained the nugget I was looking for.

Basicially this is what I needed inside of my virtualhost block:

ProxyPass /grailsApp/spineApp !
Alias /grailsApp/spineApp /path/to/spineApp/on/fileSystem

ProxyRequests Off
ProxyPreserveHost On

ProxyPass /grailsApp http://127.0.0.1:8080/grailsApp
ProxyPassReverse /grailsAPp http://127.0.0.1:8080/grailsApp

Grails config will have to change to handle redirects and such in grails controllers, that setting is normally in grails-app/conf/Config.groovy

environments {
development {
grails.serverURL = "http://localhost/grailsApp"
...

Flattr this!

Jan 2010 Ubuntu Browser Benchmarks

A follow-up of this.

Note: I am just comparing Javascript. This is no longer a good way to benchmark a whole browser, if it ever was… but it is just interesting to me, and gives one metric that is an important one.

Environment is Ubuntu 10.10 64bit on Core2Quad@2.66Ghz

Browser Version Sunspider result
Chromium 10.0.634.0 277.2ms +/- 1.8%
Midori 0.2.9 388.5ms +/- 1.0%
Epiphany 2.30.2 382.0ms +/- 2.4%
Opera 11.00 352.6ms +/- 1.8%
Firefox 3.6.14pre 1883.8ms +/- 2.6%
Swiftfox 3.6.12 1068.2ms +/- 2.3%
Firefox 4b10pre 283.6ms +/- 5.0%

All the browsers have advanced pretty well. Once Firefox 4 finally ships I’d say the playing field is pretty level for javascript performance in browsers on Linux. In real world usage I just don’t know that anyone would be able to distinguish a speed difference between the browsers when it comes to javascript. The next pieces browsers need to keep working on are HTML5 and CSS3 implementations, Hardware acceleration for 2D and 3D rendering, and additional browser features, like extensibility and ‘installable’ web apps.

As a web developer I am excited about where things are going, and how the web as a platform is advancing. Native (meaning native to the OS/Desktop environment) applications aren’t gone yet, and probably won’t be for a long time yet, but they are needing a better and better excuse to not move into the browser. What would be the benefit of that you ask? The same that Java Swing, Adobe AIR and others have tried to achieve. OS independence. You write it for Firefox according to defined standards and it should work on all browsers that implement the same standards on all the OS’s. That is a big deal! I think a couple prime candidates for proof of concept browser apps would be all the little games normally included in Ubuntu. Mines, Solitaire, Tetris clones etc. and maybe the social networking client like Gwibber. If only I had more time to play…

Update: I played some with Tetris in a browser idea

Flattr this!

layout testing – browser resizing

If you want to test a flexible or elastic site layout in Ubuntu you will be doing some window resizing. In MS Windows and Mac OSX window contents dynamically resize. It is a feature that makes it nice for seeing how CSS floats and positioning are behaving. I don’t know if it is a consequence of Compiz or what, but Ubuntu doesn’t do this be default. It only redraws the contents one you are finished resizing. Dynamic resizing is something you can enable in Ubuntu, though it is certainly not an area where Ubuntu shines.

To enable you will have to open CompizConfig Settings Manager (install it first if you don’t have it, obviously), open the “Resize Window” settings go to the “General” tab and from the “default  resize mode” drop down choose ‘normal’

You should now see window contents redrawn during the resize process, but chances are it is really laggy and crappy. To avoid the majority of this annoying crappiness on the rest of your desktop you can reset the default resize mode to rectangle or outline, and on the line that says “Normal Resize Windows” click the “+” icon. In the dialog that appears use the “grab” feature to pick the browser you want to have dynamic resizing on then click “add” to finish. That’s it! Close the settings Manager and you should be set.

UPDATE: A little more research turned up that this was in fact more an issue with Compiz. So I installed Compiz Fusion Icon , started that up and selected Metacity as the window manager. Dynamic resizing works in all the windows I tested and pretty fast/smooth. The downside is all my Compiz effects are gone, but it’s relatively easy to flip back and forth between Metacity and Compiz, so this is probably a better solution to this issue. I also noticed my javascript animations got much smoother with Compiz off.

Really if the only significant piece of compiz animation I would actually miss is the desktop switcher and zoom functionality.

Also, just tried it and this Metacity fix all goes away if you turn on Metacity’s compositioning feature as well. Compositioning is the problem, so it seems…

Flattr this!

2010 breakout year for Linux (as in Android)?

Yeah, i know not another “year of Linux” prediction. So lame, but eh, whats the harm really 🙂

I have been thinking for a while now that Android is really the up and coming platform. This article about the android market reaching the 20,000 app milestone seems to agree, but is pretty conservative about it. Things it doesn’t consider is that the Android Market is just one place that apps are released. Apps can be made available other ways, such as a simple download available on the web that you then drop onto your device, or accessed directly through specific URL’s.

Also in contrast to native apps there are web apps. Web-apps developed for iPhone’s mobile safari browser also run on other mobile webkit browsers like the one found on Android (and Palm’s WebOS) and vice-versa. There is no count on those that I know of, but they are definitely growing in numbers and I suspect their popularity will be increasing dramatically. Less platform lock in is a big draw for developers. Additionally, existing tools make developing mobile apps relatively easy. For example, Android benefits from already existing tools like JqTouch, xUI, iUI and others

Then there is the fact that Android is starting to show up on things other than phones, like e-readerstablets, and amazing looking reader-tablet hybrids

With 2010 just around the corner some people are sure to claim (yet again) that this will be the year for Linux to break out, and they might be right as 2010 is really shaping up to be a big year for Android.

Flattr this!

Install and Benchmark Firefox 3.6 beta – Whoa Epiphany!

If you don’t already have Ubuntu Tweak I recommend it. From there you can enable the development repos for Firefox development versions. Under Applications>Third-Party Sources. Otherwise you can do it strait from launchpad.

If you run the update manager Firefox 3.5.6pre will be installed, and Under Synaptic Firefox 3.6b3 and 3.7a1 will be available to install. I only tried installing 3.6. It wont overwrite your current install of FF, and I noticed I could even run two versions at the same time. In the applications menu “Firefox” will be replaced with Shiretoko (the code name for the 3.5 release) and Namoroka (the code name for 3.6) will now show up.

There are other more complete browser benchmarks out there, but I just wanted a quick rundown of how much of a performance improvement is coming with 3.6.

 

Browser Benchmarks

Ubuntu 9.10 – Nov 12th 2009 – Sunspider:

Epiphany 2.28 [w/WebKit] (64bit) – 580.2ms
Chromium 4.0.245.0 (64bit) – 583.2ms
Chromium 4.0.245.0 (on slower 32 bit system) – 616.2ms
Epiphany 2.28 [w/WebKit] (on slower 32 bit system) –  954.8ms
Firefox 3.6b3pre (on slower 32 bit system) – 1385.4ms
FF 3.5.5 (on slower 32 bit system) – 1642.8ms
Firefox 3.5.6pre (on slower 32 bit system) – 1677.0ms
Firefox 3.6b3pre (64bit) – 2084.2ms
Firefox 3.5.6pre (64bit) – 2755.8ms
Opera 10.01 (64bit) – 3701.4ms
Opera 10.01 (on slower 32 bit system) – 6089.0ms (yikes!)

For whatever reason FF does poorly on the sunspider test on my 64 bit machine. I switched this machine to 64 bit when I did a fresh install of Karmic. I have run previous tests on in it as 32bit and FF did better then. see old post. Surprisingly Epiphany won the race overall.

That inspired me to play with Epiphany just a bit and found out it can be customized to be a pretty slick browser! I found it has an inspector for web developers, automatically opens source (ctrl+U) in gedit, and in many way behaves very much like chrome. It opens fast, plays flash well, and the chrome can be stripped down so it wastes less screen space. For example if you turn off the status bar link URL’s show up in the bottom left corner just like in Chrome, a nice little touch. The unified address/search bar also serves as a progress bar like Safari used to/does(?). here’s a screenshot:

EpiphanyTweaked
Epiphany and web inspector looking good

Flattr this!

Chrome Frame – dirty trick to gain market share?

Big news in the web-development world. Could Chrome Frame be the death knoll of IE6?

The primary company I work for has an old style Java app that was designed specifically for IE6. It has since been opened up to Firefox as well, but other browsers are still locked out. In one sense I am excited about Chrome Frame because it might mean we get to drop official support for IE6 sooner. In another sense I feel like Google might be playing a dirty underhanded trick to force sites that support IE to also support Chrome.

The scenario I envision goes like this: A unsuspecting and not-so-tech-savvy person is prompted on some site far far away to install the Chrome Frame plugin for IE. Seems innocent enough, so they do, and it works! all is well. Then at some point not so long after that they sign in to our application with no problem. Our browser sniffer doesn’t see anything amiss, just another IE user. Then potentially things start not working like they are used to. (i don’t know if this would happen, we don’t test Chrome/webkit since we don’t support it…). they get stuck enough or frustrated enough that they call our support staff for help, and after some time spent trying to understand what is happening we have to say either, “sorry, we don’t support IE with plugins like that,” or, “sorry, that is a bug and we need to fix it.” Both options make us look bad to paying customers.

Google’s motivations supposedly include making life easy for developers, and I think for the most part Chrome Frame will achieve that. It is just one more reason that I won’t bother to test/support old IE browsers a number of sites I work on. However, I think the whole, “we want to help developers”, and, “we want to advance the web” is more marketing spin. Not to say it’s untrue that they want those things too, but Google is a company and companies usually have less altruistic motives.

Because of Google Frame companies like the one I work for are now forced to consider if we will support Chrome. That means for companies who have sites that were built specifically for IE, life just got harder. Ultimately supporting Chrome would be a good thing since it would basically mean a much more standards compliant site – something that is definitely one of the companies goals. The answer to the question, ‘should we support Chrome?’ should be yes, It already was in fact, but before it was less of a priority. The benefit that Google gets for pushing this shift of priorities is that the one more hurdle to Chrome gaining browser share is dismantled. Greater market share in their browser arena means a more prominent platform for their services, and that affects the bottom line. This perspective makes Google seem less likable to me. On the other hand, Google really is advancing web standards which opens the doors that much wider to any other standards compliant browsers, and I do like that…

Flattr this!

browser benchmarking

been a while since I did this sort of thing. I was curious how things were coming along with Firefox 3.6 alpha (the one that shows up as ‘unknown’ in the graph), and the latest Opera release candidate. I wonder if it would slow Chromium down if I enabled the flash plugin… I think a few extra plugins for firefox 3.5.2 might be what is slowing it down compared to 3.5.0, but I don’t really want to go through the trouble of turning them off and on again.

Here are my results for the Sunspider benchmark:

  • FF3.6a – 1758.4ms
  • FF 3.5.2 – 1849.6ms
  • Opera10RC – 5361.2ms
  • Chromium4 – 726.6ms

and for the Peacekeeper benchmark:

browserTest

Flattr this!

IE6 or IE7 on Jaunty with Wine

IE6 (Internet Explorer 6)  is dying and with every month that goes by I give less and less effort to supporting it, but IE7 is still relatively popular. I have been relying on other machines to test IE7 but that gets kinda old. Running Windows in virtual environment or dualbooting have been other ways I have tried to solve the problem of testing Microsoft’s troublesome browsers. Today I managed to figure out a relatively simple way of getting IE7 running with Wine on Ubuntu 9.04.

The first step is to go to the Wine download page which will walk you through installing the latest Wine.  For me it was 1.1.26.

You will also want to get winetricks.

Here is where it gets just a little technical. I tried a couple different methods and this is way I finally got things to work.

  1. From a terminal, navigate to where you downloaded the winetricks file and type “sh winetricks”.
  2. In the window that appears check the box for “ie6” and click OK.
  3. Follow the prompts for the IE6 installer.
  4. Test IE6 by opening Applications->Wine->Browse C:/ Drive … Program Files->Internet Explorer — right click on “IEXPLORE.EXE” and select “open with ‘Wine…'” .

IE6scrnsht

Getting IE6 running is just a preliminary step that I found to be necessary in order to get to IE7. If you wanted to stop here you could. If you are on a 32bit version of Juanty you can go farther and get IE7 running – I wasn’t able to get it running on 64bit systems:

  1. download IE7.
  2. Close any running IE windows.
  3. Right click on the .exe and select “open with ‘Wine…'”
  4. Follow the prompts as per a normal windows install except that you should uncheck the updates option
  5. start IE7 the same way you previously started IE6

Screenshot here…

Have fun!!!

Flattr this!