I’m speaking at Iowa Code Camp Fall 2015

I’m excited to announce I will be speaking at Iowa Code Camp on December 5th in Ankeny, Iowa on Responsible Responsive Web Design.

I’ll be discussing how you can design a website responsibly and delivery a consistent user experience to users on small and large screen devices. I’ll also talk about how to decrease your website’s page size quickly and effectively to make your website load fast even on the slowest of connections. We’ll also cover using the newest HTML specifications even on browsers that do not have native support.

Opening/Editing Sharepoint documents in Chrome

If you’re like most people you don’t use Internet Explorer for any of your web browsing needs unless you’re required to. Thankfully most websites are compatible with most browsers and those instances are few and far between. If you use Sharepoint though, you know most activities function much better when you use Internet Explorer and some functionality is not available.

For example if you want to edit a document clicking the EDIT button gives you an error saying it cannot find the appropriate program to edit with. Thankfully I stumbled across an “edit in browser” option. When viewing a document click on the “…” which brings up a pop up. From there click on “…” again and you will see an Edit in Browser option. Not all functionality is available when you do this, but for most quick edits this will work excellent.


Increasing heap size for a Grails application

I had been running into a lot of issues with Grails running out of heap space on my computer and finally found a solution. In the Grails command line documentation is mentions you can set a maximum heap space when you run grails through the command line. I would keep forgetting to set this and have to restart the app.

export GRAILS_OPTS="-XX:PermSize=128m -XX:MaxPermSize=512m -Xms256m -Xmx512m"
grails run-app

I knew that had to be an easier way, so I created an Environment Variable called GRAILS_OPTS and set the value to

-XX:PermSize=128m -XX:MaxPermSize=512m -Xms256m -Xmx512m -server

Now these settings are used anytime I run grails.

Fixing ESPN FantasyCast being broken in Chrome

This is the 2nd year in a row that ESPN has had a bug in their Fantasy Cast website so it does not render properly in Chrome. If your page looks like this, it’s broken. The good news is it’s easy to fix with a simple bookmarklet.



Simply create a bookmark with this as the url

javascript:(function(){$('#real .progame-list').css("width", "101%");})()

and click on it to fix the page. Once clicked the page will look like this, which is much more user friendly.


Creating a bookmarklet to log a user in

As someone who is continually logging into an internal website while writing code I knew there had to be a better way than entering my username and password 100 times a day. To complicate this I’m also alternating between users with different admin rights, access, etc and remembering multiple usernames and passwords can be tedious. The solution? Create a bookmarklet that fills out the elements on the screen and clicks the submit button. I wouldn’t recommend you use this for anything other than an internal only application, but if you want to store your password in plain text in your bookmarks that are probably synced between computers go right ahead :).

You’ll need to inspect the DOM and get the ID values of the username, password and form to make this work. What you do is set the dcoument into a variable get your element by the ID and set the value to your username. The same goes for the password. If you’re having trouble getting this to work make sure your input fields have ID and you have the case typed in correctly.

  var d=document;

Simple copy and paste the above code into the url field of a bookmark and you’ll be saving multiple seconds daily.

Showing all hidden elements on a page using jQuery

I’ve been working on a large browser compatibilty project which involves also giving the page a facelift to bootstrap. We’re mostly modifying XML which creates the markup and there are a few pages with a lot of rules that hide element based on certain scenarios and hitting those scenarios became very tedious when we were already 98% sure the page would work. The divs are hidden on the page and aren’t just not generated server side. The elements are hidden both by adding a class of hidden and by using display:none.

I ended up writing a bookmarklet that runs through all the elements in the DOM and removes the style attribute and removes the hidden class from all elements. This isn’t being used anywhere other than on a developers machine, so efficiency wasn’t the goal here. The goal was to show all hidden elements to make sure they’re being styled correctly. They’re being styled with classes, so that’s why removing the style attribute was an easier option.

Here’s the jQuery code

$(function() {
  $("body *").each(function() {

Here’s the bookmarklet. You can simply create a new bookmark with this as the URL and click it to show the hidden elements.

javascript:(function(){$(function(){$("body *").each(function(){$(this).removeAttr("style"),$(this).removeClass("hidden")})})})()

Add, edit or delete sudo users using putty/bash

To add, edit or delete sudo users in putty/bash do the following

  1. Type visudo and press enter.
  2. Navigate using the arrow keys to where you want to edit.
  3. Press insert to enter edit mode.
  4. Make your changes. It is very important that you use tabs and spaces correctly.
  5. Press esc to exit edit mode.
  6. Type :wq and press enter. I remember this command as “write quit”

This is a pretty simple process, but very easy to forget when you only make changes sporadically.

Cross browser compatible numbers only textbox

While working on a browser compatibility project recently I ran into an issue where using an onkeypress attribute on an input field was firing when using the left and right arrows keys and the delete button. This functionality differs from how IE and Chrome work, so the old code that used to be IE only compatible wouldn’t let a user do anything except type numbers (Good!) and use the backspace (Bad!). The users needed to be able to use arrow keys and the delete button in Firefox.

Since we’re only supporting the latest browsers, IE 11, Chrome, Safari and Firefox, We thought using an input with type=”number” was a good solution, but it adds awful looking up/down arrow buttons in the field and it actually doesn’t do anything to prevent letters from being entered, so that was obviously out.

We tried countless regEx patterns but finally settled on the following which lets you use all arrow keys and the delete key, but still only allows you to enter numbers into the text field. Big thanks to Scott Busche for coming up with the correct regEx

$('.numbersOnly').keyup(function() {
var pattern = new RegExp(/\D/);
var validString = $(this).val().replace(pattern, '');
if ($(this).val() !== validString) {

Rather than calling a function on key press however we decided to add a specific class to these fields and handle the result with a jQuery selector. The downside to this function is that you are actually allowed to type letters and special characters and they will show up for a millisecond, but they will be removed from the input box.

If anyone has anything that works better and is compatible on all the latest browsers I’d love to hear your solution.

Websphere unable to check if application exists

I’m still fairly new to Websphere, but this seemed like a pretty common problem someone would have and I couldn’t find anything that properly explained the issue to me. I was running into an issue where WebSphere kept saying it was unable to check if application exists when it was being deployed. I thought initially this was a permissions problem, so I fooled around with permissions but had the same issue. If you scroll down a ways on the stack trace it says

insufficient or empty credentials

I double checked my configuration in Hudson/Jenkins and testing the connection worked fine, so I continued searching for other solutions. There are literally 3 search results on google for “unable to check if application exists” and 0 results on bing. Most of the other articles I found offered no help. Eventually I circled back around and decided to look at the access level my user had in WebSphere. Turns out it wasn’t listed as a user! I’m still not sure how testing the connection in Hudson worked but I wasn’t listed as a user in WebSphere. I checked this half a dozen times just to make sure I wasn’t mistaken.

To add a user in WebSphere

  1. Users and Groups
  2. Administrative user roles
  3. Select the Administrator role
  4. Enter the user to search for
  5. Use the arrow to move the user to the Mapped to role box
  6. Click OK
  7. Click Save

Step 7 is super important because it requires an additional save than most programs do and I find myself forgetting to do the second confirmation too often. After you’ve added the appropriate permissions redeploy your ear and you should be all set.

Full stack trace of the error I was getting

[INFO] No custom module-to-server mappings found -- using default configuration.
com.insertcompanynamehere.websphere.deployment.client.DeploymentException: Unable to check if application exists 'NewBusiness'
at com.insertcompanynamehere.websphere.deployment.client.was61.DeploymentManager.applicationExists(DeploymentManager.java:265)
at com.insertcompanynamehere.websphere.deployment.WebsphereDeploymentTask.execute(WebsphereDeploymentTask.java:59)
at com.insertcompanynamehere.hudson.plugin.WebSphereDeploymentBuilder.perform(WebSphereDeploymentBuilder.java:194)
at hudson.tasks.BuildStepMonitor$3.perform(BuildStepMonitor.java:45)
at hudson.model.AbstractBuild$AbstractBuildExecution.perform(AbstractBuild.java:761)
at hudson.model.AbstractBuild$AbstractBuildExecution.performAllBuildSteps(AbstractBuild.java:721)
at hudson.model.Build$BuildExecution.post2(Build.java:183)
at hudson.model.AbstractBuild$AbstractBuildExecution.post(AbstractBuild.java:670)
at hudson.model.Run.execute(Run.java:1743)
at hudson.model.FreeStyleBuild.run(FreeStyleBuild.java:43)
at hudson.model.ResourceController.execute(ResourceController.java:89)
at hudson.model.Executor.run(Executor.java:240)
Caused by: com.ibm.websphere.management.exception.AdminException:
at com.ibm.websphere.management.application.AppManagementProxy.proxyInvoke(AppManagementProxy.java:189)
at com.ibm.websphere.management.application.AppManagementProxy.checkIfAppExists(AppManagementProxy.java:266)
at com.insertcompanynamehere.websphere.deployment.client.was61.DeploymentManager.applicationExists(DeploymentManager.java:263)
... 11 more
Caused by: javax.management.JMRuntimeException: ADMN0022E: Access is denied for the checkIfAppExists operation on AppManagement MBean because of insufficient or empty credentials.
at com.ibm.ws.management.connector.soap.SOAPConnectorClient.handleAdminFault(SOAPConnectorClient.java:948)
at com.ibm.ws.management.connector.soap.SOAPConnectorClient.invokeTemplateOnce(SOAPConnectorClient.java:916)
at com.ibm.ws.management.connector.soap.SOAPConnectorClient.invokeTemplate(SOAPConnectorClient.java:682)
at com.ibm.ws.management.connector.soap.SOAPConnectorClient.invokeTemplate(SOAPConnectorClient.java:672)
at com.ibm.ws.management.connector.soap.SOAPConnectorClient.invoke(SOAPConnectorClient.java:658)
at com.ibm.ws.management.connector.soap.SOAPConnectorClient.invoke(SOAPConnectorClient.java:480)
at $Proxy43.invoke(Unknown Source)
at com.ibm.ws.management.AdminClientImpl.invoke(AdminClientImpl.java:224)
at com.ibm.websphere.management.application.AppManagementProxy.proxyInvoke(AppManagementProxy.java:183)
... 13 more
Build step 'IBM WebSphere v8.0 Deployment' changed build result to FAILURE
Finished: FAILURE

Enabling offline mode in Google Chrome

In April and May I was traveling every other week for work and to keep myself occupied I would open a bunch of articles in chrome on my phone to read them on the plane. Much to my chagrin the first time I did this about half the articles were automatically reloaded by chrome and I wasn’t able to read them because I didn’t have an internet connection. I started trying to fix this by looking for a way to disable the setting that would reload tabs, but was unsuccessful. What I did find was an option to reload an article from the cache if you were offline.

Simply type chrome://flags into your address bar and find the Enable Show Saved Copy Button setting.

Enable Show Saved Copy Button Mac, Windows, Linux, Chrome OS, Android setting.
When a page fails to load, if a stale copy of the page exists in the browser cache, a button will be presented to allow the user to load that stale copy. The primary enabling choice puts the button in the most salient position on the error page; the secondary enabling choice puts it secondary to the reload button. #show-saved-copy

You can enable this setting as a primary or secondary button. Primary will enable this setting as the most noticeable option when you’re offline and secondary will make it the secondary option to reloading the page.

Before I found this setting I stumbled upon Pocket which is a much better option for saving articles overall, but won’t help you recall a webpage you visited earlier. The other downside to pocket is it’s much easier to forget about than an open tab and you’ll probably let articles sit in their forever before you read them.