Web design tips & tricks plus anything else I want to talk about…

We were recently tasked with updating the name of a company on various pages of a large content managed website. This task could’ve taken quite some time and I found myself thinking how easy it would be if the site were static and I could do a simple find and replace or search and replace.

I started doing this by hand… until my brain engaged and I realized how easy it would be to do with a simple MySQL query. Using MySQL’s built in replace function I wrote the following query to do a string replace operation that replaces old_string with new_string for all occurrences within a particular column.

UPDATE table_name SET column_name = replace(column_name, 'old_string', 'new_string');

This was a quick and painless way to update a large data set.

I have seen countless instances around the web where people are using the letters of the alphabet to sort a large recordset, in fact, I have even done it before but it has been ages since that project and I had forgotten exactly how I accomplished it.

Today I working on a project where I need to sort through a large number of manufactures for a particular customer. They wanted them sortable by clicking on a the first letter of the manufacturers name.

For the English alphabet, my solution was quite simple. By using the MySQL LIKE statement and filtering out everything after 1 letter I was able to quickly and efficiently find matches for a particular letter. The example below shows a sample query assuming we are sorting by the letter A.

SELECT * FROM table_name WHERE column_name LIKE 'a%'

I also found this solution works well for numbers and other symbols. Unfortunately, in my case the client wanted all items that start with any number grouped into a single result set because there was a small number of those items. Essentially, we I needed to do a MySQL select statement that captured all items that started with any number and return those manufacturers. After doing some noodling I came up with a solution that works quite well:

SELECT * FROM table_name WHERE column_name RLIKE '^[0-9]+'

This regular expression will capture any number 0-9 and include it in the result set. This strategy could amended with different regular expression to fine tune the data selected.

I was working on an older website today and ran into a problem I hadn’t faced before. I needed to modify a complex Javascript based slideshow, that was written several years ago so that it would automatically rotate between slides without user interaction. This slideshow works well but has no methods I can use to configure its functionality. I looked through the code and it was not structured in a way that I could easily modify its functionality without a substantial amount of code and testing. I decided the easiest solution would be to set a timeout that would trigger a programatic click of the next button allowing the slideshow to operate unmodified.

Until today, I had never had to trigger a click with standard Javascript. I have done it a few times using the jQuery trigger() method but jQuery was not included on this older website.

Example of triggering a click using the jQuery trigger method:


I did some experimentation and discovered that this can be achieved using plain Javascript quite easily. The following code triggers a click on an element with the id of test by calling the onClick() method programmatically:


This simple bit of code will get the element with the id of test and then will simulate a click on that element. Enjoy!

google_drive_logo_3963At our office we love Google Drive. We use it to store just about everything. Since migrating to Google Drive we have been incredibly happy with the service. Our users can now access important information from any computer and they are not confined to our office location or VPN. That said, we have had one major problem we had a great deal of difficulty resolving. For some reason, several of our users have had problems with Google Drive silently crashing on a very regularly, almost hourly basis. Other users have had no problems at all. For many, this issue has been maddening, and after hours of research we were unable to find a solution online for our problem so we have been living with it for quite some time. We have even gone as far as considering moving to Dropbox or another solution to solve this problem.

It turns out, the real problem was we were struggling to see the pattern. As we figured out the pattern the problem was easy to solve:

Our revelation came when we realized that for some uses Google Drive was installed under the computers administrative account and for other users it was installed as an administrator under their account. This happened based on the era in which the computer was setup and dependent on which administrator configured the computer. It appears that while Google Drive will function to a limited degree if the software is added under the administrator account something within the operating system causes Google Drive to crash regularly. We discovered that if we were to uninstall Google Drive and then reinstall it when signed in under the account for the Google Drive user, Google Drive ran smoothly without crashing. Victory! Now back to work.

If you are involved in web design, mobile app design, or software design in any capacity this is a must watch documentary.


The 18 minute “Connecting” documentary is an exploration of the future of Interaction Design and User Experience from some of the industry’s thought leaders. As the role of software is catapulting forward, Interaction Design is seen to be not only increasing in importance dramatically, but also expected to play a leading role in shaping the coming “Internet of things.” Ultimately, when the digital and physical worlds become one, humans along with technology are potentially on the path to becoming a “super organism” capable of influencing and enabling a broad spectrum of new behaviors in the world.

Kayla and I decided to take a quick trip to Las Vegas right after Christmas. Check out some of our photos.

Every year since Kayla and I got married we have attended the Life Center Married Couples Retreat. The Life Center Married Couples retreat is a weekend long event put on by Life Center church in Spokane. This year, we traveled to Whitefish Montana and stayed at the beautiful Lodge at White Fish Lake. We had a great time, learned a lot, and got some good weather that allowed us to do some exploring. Here are some photos I took while on the adventure:

Kayla and I were recently staying in the Mukilteo area for her friend Ashley’s wedding. The bridal shower was on Friday afternoon and the wedding was on Saturday. Since we had to spend a couple nights in the area, I decided to surprise Kayla and make a weekend vacation out of our trip. A couple summers ago on our cruise to Alaska we got to go on whale watching tour and Kayla loved it. I knew she would be excited to go again so I booked a tour with Island Adventures out of Anacortes WA. We were lucky enough to have some good weather and an excellent time. Check out the photos below:

Below are a few family photos snapped at Kayla’s niece Mya’s 3rd birthday party. We had a lot of fun at the party with all the kids and family. Even more fun than that, immediately following the birthday party I got to go on a ride along with my brother-in-law Adam who is a Moses Lake Police Officer. We were on night shift and had all kinds of exciting adventures. I probably should have been a police office instead of a web developer… it is far more exciting.

When presented with this problem, my first instinct was to look through the PhoneGap API documentation to see if I could find a way to interact with the internal phone system. After reviewing the documentation, I wasn’t able to find the desired solution, so, I started thinking of other ways to solve this problem. After some contemplation, I realized PhoneGap runs using the UIWebView browser, which, is more or less Safari without a back button. This led me to my solution, I realized I could use the same methodology I would use with a mobile website to create the click-to-call buttons inside of my PhoneGap app.

The solution I came up with was to use the tel: URI-scheme that is found in most mobile web browsers including: iOS, Android, WebOS, Symbian, and Internet Explorer. Using this, I was able to create a simple HTML link using the following syntax:

<a href=="tel:8009229999">(800) 922-9999</a>

This link when clicked will trigger the internal phone system either from a browser or from within PhoneGap to initiate a call to (800) 922-9999. I haven’t yet tested this strategy with PhoneGap on non iOS devices but I anticipate it should work in most if not all cases. I can say it working splendidly on the iOS app I currently have in development.