jquery ‘otherable’ widget

HTML select boxes are limited in their usefulness. Often, for quickly filling in forms I need something like a select, but with an other option that allows me to specify the other value. There are various ways I have seen this solved, but I have one I have worked out that I like quite a bit.

Here is a simplistic demo of a transforming select/text input on jsBin

Other ways you could solve it:

  1. Have a separate value to capture the other value. Bonus if you only show that field after ‘other’ value has been chosen, and hide it and clear it if they re-chose with the select… it can be a bit of a chore to keep it all strait and you have to deal with two distinct parameters on the back end as well.
  2. No select, rather some sort of autocomplete on a text input. Works! And only 1 value to deal with on backend, keeping APIs simple. But, not as friendly for users. Free recall is more work with lower accuracy. Plus you probably want to avoid keyboard use on mobile when possible if you are going for speed.
  3. Complicated custom select widget using JavaScript. These can work, and can look nice, but the code for them is bloated and fragile. HTML select works pretty well on mobile. Attempted JavaScript mimics tend not to.

 

Flattr this!

Spreadsheet exports

Spreadsheets as a data export format are just horrible, but clients seem to consistently request it. ButIDontWannaItJustFeels…ComeON!! don’t you know we have a beautiful REST JSON API?!

Sigh…

Okay so at least there is Apache POI to help out.

I made a couple simple utility methods that take a Map of data and either turns it into a spreadsheet or fills in a spreadsheet that you feed it. Not enough code to make into a github project or plugin, but a Gist? yeah sure – here ya go! Maybe you’ll find it useful.

https://gist.github.com/aeischeid/373f9bf68f179027b3f5

As is, it outputs .xls files and you could use the output to render a spreadsheet file. You can also easily make this .xlsx but it requires including a couple more large POI jars.

 

Flattr this!

trying out zsh and oh-my-zsh on ubuntu

Using the terminal all day I figured I should ‘sharpen the axe’ a bit. I have played around with configuring bash, but mostly I don’t know what I am doing in that .bashrc file. I tried a few ways to get the terminal tab titles to be something shorter so they would actually be usefull for example. no luck there. Tried customizing the prompt to include git status if I was in a git repo. Got that one to sorta work, but screwed up some other stuff in the process…

Noticed zsh is a alternative that has a vocal fan base, thought I’d see if it lived up to the hype. I’ve been using it for a couple months now but so far I think I like it, and I am sure I have only scratched the surface of what it is capable of. which was probably true of bash as well…

Anyway, installing isn’t to hard, but not very obvious so I thought I would document how I did it to see if anyone wanted to chime in on how I did it wrong, or possibly would find it usefull.

First install zsh package from Software Centere or using apt-get install zsh
Use bash terminal one last time to install oh-my-zsh (https://github.com/robbyrussell/oh-my-zsh)
open edit>profile preferences in the terminal menu
on the second tab ‘Title and Command’ check ‘Run custom command instead of my shell’ and enter ‘zsh’ in the text input.
Restart Terminal
Viola!

edit .zshrc as desired.

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!

SSH tunneling in Ubuntu

I wanted to work with a PostgreSQL DB remotely with PgAdmin, but I didn’t really want to figure out how to allow the DB to accept external connections in a secure way. Since I have SSH access this should be very doable. I have seen co-workers use putty for SSH tunneling before, and had previously used Putty on Ubuntu to copy that, but setting up my Natty workstation I figured there had to be a more native way to do it. Of course I could do tunneling straight from the command line. If I could ever remember the steps for it that approach would work great. Instead I found a tool called Gnome SSH Tunnel Manager (gSTM) and installed that from the Ubuntu repos. It is pretty straight forward to configure if you understand the concept of tunneling, which I only barely do, so I needed a little help getting set up, but after that it is dead simple.

  1. Install gSTM and start it up.
  2. Click ‘Add’ for a new tunnel bookmark, and name it.
  3. Add IP and user login for remote machine.
  4. Leave port and privatekey as default (unless you know what they are used for in which case you probably know what to put in there).
  5. In the port redirection section click ‘Add’, a new dialog will appear.
  6. Type is ‘local’.
  7. ‘Port’ is the port on your local machine you want to assign the tunnel to (I did 5666).
  8. ‘To host’ can be set to ‘localhost’.
  9. ‘To Port’ is the port used on the remote machine. default PostgreSQL is 5432.
  10. Click ‘OK’ and all the settings are done for gSTM so click ‘OK’ again to close the settings dialog.
  11. Highlight new tunnel, and click ‘Start’ – it should prompt you for the ssh password.
  12. Ta-da!
  13. Now use pgAdmin, or  another application to connect to the DB at localhost:5666 (or whatever port you set in step 7 above..).

Now I just need to make sure my tunnel is running in order to have access to the DB locally. Very cool! Probably where I got most confused was with the ‘To host’ and ‘To port’ settings, the wording seems backwards. Is that just me?

Flattr this!

Customizing The Ubuntu Terminal

The Obvious:

With a terminal open select Edit -> Profile Preferences.

In here you can set background color, transparency, font, font-size, text colors and more.

A couple not-quite obvious things I like to do.

Uncheck the ‘show menubar by default in new terminals’ – it just isn’t very useful and a right click in the terminal gives you some of those options anyway and if what you need is not there you can easily bring back the menubar from there.

Increase the number of scrollback lines – personally I at least double it to 1024 lines as Grails errors are long and ugly and that is the framework I spend a lot of my time working with. Your mileage may vary.

Advanced:

The .bashrc file in your home directory is where extra configuration options lie.

Colors:

Ubuntu disables the prompt being a different color. but simply uncomment the proper line in .bashrc and you’ll undo that. Look in the vicinity of line 36-40. The comment says the goal is to avoid distraction… just doesn’t make sense to me. A colored prompt helps me distinguish certain pieces of text from others, so for me, it is essentially the opposite of a distraction helping me focus on the pieces I need to read from the pieces I don’t.

Aliases:

Many Linux command line gurus expect “ll” or certain other common aliases to work. Uncomment a couple more lines in Ubuntu’s .bashrc file and they will. Look in the vicinity of line 80-83.

you’ll also see just a couple lines down:

# Alias definitions.
# You may want to put all your additions into a separate file like
# ~/.bash_aliases, instead of adding them here directly.
# See /usr/share/doc/bash-doc/examples in the bash-doc package.
if [ -f ~/.bash_aliases ]; then
. ~/.bash_aliases
fi
So if you’d like to add extra aliases create a .bash_aliases file and fill it in. Sweet right?!

Flattr this!

Grails active page navigation menu

A Common feature found in many CMS’s or web-apps is a navigation menu with a highlighted active page, or the parent of the current page in a hierarchy. The trick is getting the proper element with an added CSS class of ‘selected’ or ‘active’. There are a number of ways to do this, but I just found a new way to do it in Grails using a Sitemesh’s pageProperty.

In my main layout gsp I have the nav menu

 
  

then in the head section of a view gsp’s where I want the appropriate element to have a ‘selected’ or ‘active’ class. I include:

    

Then in the css have something to deal with the applied class:

  #mainMenu li > a.selected { .... }

Pretty simple! I don’t know if this is very efficient in terms of performance. I can think of other ways to do this with Javascript, or params passed from the controller, but I wanted to find something that used Sitemesh as that seemed like the component that ought to handle this sort of feature. So while this is working for me, and gives a pretty good level of control, I am still wondering if it is really the ‘right’ way to do it.

For a more comprehensive explanation of Sitemesh in Grails visit this blog.

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!

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!