Category Archives: Coding

05Feb/14

Pocket Joe Revisited: Joe evolves his PhoneGap skills

Pocket Joe UI Revisited Last week, we built a basic RSS reader, based upon an earlier experiment.  This week, I thought we would evolve the UI a little.  The UI uses jQuery Mobile now.

PhoneGap Build Page

Download it from the Google Play Store

Try the app in your browser  

So, you might be wondering where I’m going with all of this PhoneGap experimentation.  My goal is to crank out a PhoneGap app per week, during the month of February.  As with everything, practice makes perfect and I hope that a month of practice will make me reasonably good at this. Earlier today, I bought a Nokia Lumia 520.  Expect some Windows Phone versions to be published alongside the Android versions of these apps.

Want to check out the main HTML file from this app?  The source is available on GitHub.  Yes, I’m still using YQL. I’ll eventually create a proper dev environment for PhoneGap.

26Jan/14

Building a basic RSS App With PhoneGap Build

You may or may not remember our earlier experiments with building an RSS Reader in JavaScript.  I was curious how well it would work to reuse that experiment, to create a basic RSS reader.  I found a decent jQuery accordion to use for it.  It would not be a native UI for any device but it is good enough for this experiment.

 

 

ScreenShot of the Android version of 'Pocket Joe'You can see that this is a fairly basic app.

Just like last time, I fed the HTML app into PhoneGap Build and it generated the installers, based upon my github repo.

 

Try it within your browser

The PhoneGap Build Page (including installers)

 

Notes: I know that PhoneGap can handle RSS without having it first translated to JSON.  Keeping the YQL call there just made development easier.  Once I get a good local PhoneGap development environment set up, I am probably going to need to revisit this.

11Jan/14

First attempt at a mobile app, using PhoneGap Build

jsCalculator v0.02

For years, I have wanted to develop for Android but I haven’t gotten off my butt and done it.  I recently decided to force myself to explore development, using PhoneGap.  Today, I wrote a very basic proof of concept.  I have to admit that it was pretty easy.  I wrote the app using HTML, JS, and CSS, uploaded it to github, and built it on PhoneGap Build.  It is not pretty but it is very functional.

The next step is to build something that looks half marketable. 🙂

Github Link

Demo of the HTML/JS app

Installer Files (iPhone, Android, etc)

10Nov/13

How to convert decimal to unsigned binary in JavaScript

Ok, I do have to admit that this has limited value. I did this mostly as a thought experiment. I wanted to see how easy it would be to script the conversion from decimal to binary and back again, in JavaScript.

 

 

As you can see, the conversion from binary to decimal is much easier than decimal to binary. Before you ask, I do know that toString() can convert decimal to binary, octal, and hexadecimal but that would not have been as fun. 🙂

Live Demo

Edit: I updated BinaryToDecimal(). There was a significant flaw in it. After talking the problem over with Jeremy Streich, I also decided that this could be refactored to be much more simple. I’ll probably wait on writing a revision, though. I want to try hex and octal sometime soon and I’ll revisit this as part of that.

30Sep/13

Better living through database normalization

Database normalization is a process meant to reduce or eliminate data redundancy.  Typically, a normalized database exists in first normal form (1NF), second normal form (2NF), or third normal form (3NF).

First Normal Form

In order for a database to be in first normal form, your tables must not contain repeating groups of data.  Let’s look at a simple example.  In the table below, we are tracking basic contact information.  We have an ID, a first name, a last name, and the contact’s phone numbers.

Database table before 1NF

So, what wrong with this table?  Users can have more than one phone number, so we are storing multiple values within the “PhoneNumbers” column.  This means that our DBMS is storing multiple values as a single value and we have to manage the phone number values manually.  How can we better this?

Database table after 1NF normalization

In the above example, we placed phone numbers into their own table.  We connected the contacts to their phone numbers using the “ContactID” column. Notice that there are no duplicate rows and every row/column intersection contains exactly one value.

Second Normal Form

In order for a database to be in second normal form, it first must satisfy the conditions for first normal form.  In addition to that, all of it’s non-key attributes must be fully dependent upon it’s primary key.  Let’s look at a table that tracks the things our contacts are experts in.

Database table before 2NF normalization

You will notice in the above table that contacts #2 and #3 are experts in two things.  In the case of contact #2, he is an expert in PHP and Digital Design.  You will also notice that we keep repeating the facility where the contact is.  This was probably placed there to make it easy to find a ColdFusion expert at the Downtown facility.  This example table can cause problems because, if contact #2 relocates to the Downtown facility, there is a chance that only one record will be modified, leave contradicting information.  So, how do we fix it?

Database table after 2NF normalization

In this new example, the facility is now part of the “Contacts” table.  You can still find your ColdFusion expert at the Downtown office but you can avoid update anomalies.

Third Normal Form

In order for a database to be in second normal form, it first must satisfy the conditions for first normal form.  In addition to that, the columns should depend solely upon the primary key of the table.  What does this mean?  Let’s take a look at our “Contact Expertise” table.

Database table before 3NF normalization

Let’s say that we want to see a list of possible skills somebody could be an expert in.  This could be so that we can indicate which skill a new contact is an expert in.  Right now, we can query “Contact Expertise” for unique values in the “Expertise” column but if we don’t already have an expert in that skill, it won’t be available as an option.  We can solve that with a “Skills” table.

Database table after 3NF normalization

Notice that you can now query for possible skills that a contact can specialize in.  Additionally, all values are dependent upon the primary key of the table.

How to “cheat” at database normalization

A recent post on the Perl blog had a great set of rules to make sure your database is adequately normalized.

  • Every “noun” gets its own table.
  • “many to many” relationship get their own tables
  • “one to many” relationship require the table that “owns” another table have its ID in that other table
  • Any time a table has an ID that refers to a row in another table, use a foreign key constraint to make sure that ID really exists

Remember, your database is the foundation of your application.  If you build it wrong, your application will struggle to succeed.

 

02Sep/13

Dynamic creation of variables, based upon a database table

The other day, as I fiddled with my weekend project, I stumbled into a concept that I had not thought of previously.  I was looking to make it as easy as possible to make the app multi-lingual.  In trying to separate the application from the translations, I came up with an interesting technique.

 

 

When you select a language, it loads records associated with your selected language.  They have the attributes of “name” and “value”.  It loops through the returned records and uses “name” as the variable name and “value” as the value.  When you add a new record to the table, it automagically adds the new variable.

Dynamic Variables - DB Schema

Dynamic Variables - DB Content

Dynamic Variables - App Output EN

Dynamic Variables - App Output SP

Dynamic Variables - App Output LA

As you can see, addition of new translations pretty easy.  Have a thought on the technique? Feel free to leave a comment or drop me a line.

16Jun/13

How to detect a device type, based upon window width

These days, it seems like there are an almost infinite number of device types.  There are phones, tablets, phablets (AKA really big phone), small laptops (like netbooks), big laptops, and desktops.  The key to dealing with these devices is simply responsive design and extensive compatibility testing.  You should not deviate from that!

With that said, let us say that you want to target specific devices for device-specific behavior.  You could use a condition that is based upon user-agent strings but you would need to know all of the potential user-agent strings.  Even if you have the user-agent for Chrome on Android, what if they use the Dolphin Browser on Android?  Well, you can target based upon the screen width.

 

 

This is dependent upon the user having JavaScript turned on. Make sure you keep this in mind.

16Dec/12

How to handle pagination in ColdFusion

So, you have a task where you are supposed to display X items but only Y items per page and only link to Z pages at any one time?  This can be a fairly complex task.  I figured that I would offer my ~80 line solution to the problem.

Here’s an example of what the output should look like.

 

02Dec/12

How to easily consume and display RSS in JavaScript

I came across this issue a few years ago and just recently found a good solution.  JavaScript has the ability to make an AJAX request to whatever page you want, and return the result.  The problem is that the same origin policy, enforced by most browsers, won’t allow you to return most content if it originates from outside of your domain.  So, if your JavaScript is at http://steinbring.net/js/example.js, it would not be able to grab and display http://news.ycombinator.com/rss.

So, how do you get around the same origin policy?  You can get around it by targeting a remote JSON file.  JSON isn’t subject to the same origin policy.  A lot of solutions involve running a local, server-side proxy. The proxy receives a URL, fetches the XML output, and returns a JSON output to the JavaScript.

So, how can you use this proxy method without having to maintain a server-side proxy?  You can use the Yahoo! Query Language.  It is a set of free, public APIs that includes an endpoint for converting RSS to JSON.  So, how do we use it?

 

26Nov/12

How to use localStorage to remember form values

Since finishing my last post, I’ve been wanting to work on a way of implementing the concepts.  Let’s say you have a long form (like a job application) or a form you would be filling out a lot (like shipping/billing information).  You could use ajax to store the information server-side but let’s say you need or want to store it client-side.

Using jQuery, we can loop through all of the text boxes on the page, without really knowing how many elements are there.

 

 

Now that we know what’s there, let’s store the values in an array.

 

 

Now that the values are packaged up in an array, let’s build setters and getters around this.

 

 

You’ll notice that you can essentially just drop this javascript into a page with forms and it will start collecting values.  You need to be careful though.  What if your user is on a shared computer?  It will blindly leave the values for the next visit to the site.  My suggestion would be that you use a “remember me” checkbox.  That would give the user a little more control.  Alternately, you could replace localStorage with sessionStorage.  That would kill the stored values once they close the browser.

19Nov/12

How to store JavaScript values persistently, locally

So, you want to store data on the client side?  There is a method called localStorage.  Let’s do a simple example.

 

 

This very simple example simply writes the “coffee” values from the local variable, to localStorage, and back to another local variable but it shows the potential of localstorage. Let us take a look at a slightly more complicated example.

 

 

This example gets you a little closer to an actually useful implementation of the concepts.  It takes the values you enter into the text box and adds it to localstorage.  It also populates the unordered list with the contents of localstorage.  So, how can we take it a step further?

 

 

Functionally, this example is identical to the one above.  It does, though move the functions into a namespace.  How does this help?  Well, let’s say that we want to keep a list of both Sally’s favorite coffees and a list of Bob’s favorite coffees?  AddCoffee() is a little generic.  There is a good chance of a collision in function names.  This helps to prevent that.

Now that you understand localStorage, you might want to check out sessionStorage.  It’s just like localStorage except it only lasts as long as the browser window (or tab) is open.  Where localStorage might be better for storing user preferences, sessionStorage might be better for storing a shopping cart.  Please keep in mind that neither localStorage nor sessionStorage work with IE7 and older.  If you need to support IE7, you might need to look towards using cookies for your application.