Monthly Archives: April 2013

Choosing Patterns for use in Recipe Finder

So I have done some perusing of sites that outline key User Interface patterns and I wanted to talk about them in coordination with my Recipe Finder project.

15 Common Component Patterns

  • Add Another – I really like this pattern for what it can bring me with the ingredients list. I want to implement a way in which the ingredients can individually add in the amount, type and measure into an ingredient, but there needs to be a simple way to add and remove ingredients. This pattern could provide that.
  • Add/Manage Tags – I like this pattern so that it is easy for users to tag their recipes for search capabilities. I also know this pattern is implemented in Boostrap which I may choose to customize that portion into my project.
  • Add/Edit or Select from Existing – this pattern is interesting and could prove useful on things like the units of measurement. So there would be a selection drop down for unit of measure, but if you don’t see it in the list, you could add your own measurement into it.

10 UI Design Patterns You Should Be Paying Attention To

  • Progressive Disclosure – this is one of my favorite patterns and can be very useful for Responsive Web Design, so that users can only fill in the vital parts of a recipe, but can always add extra information if need be later, or twirl down a drop down to enter information like summary, yield, or tags as extra information that may not be used in the essentials of a program.
  • Clear Primary Actions – I really like the idea of using color to display to the user if their form is ready to be submitted (all required fields filled in). Also for users that cannot use color (color blindness) I would like to display some sort of text along with it to clearly show someone their form is ready for submission.
  • Required Field Marker – just like the previous pattern, this one is clearly needed to display which fields are required to be submitted.
  • Hover Controls – this can be useful, however since it will be a mobile app, probably use clicks or touch events over hover. But this can also be useful for Responsive Web Design, saving real estate where needed.

15 UI Design Patterns Web Designers Should Keep Handy

  • Page Grids – I definitely want to use grids, to make it easy to clearly separate sections of my site and making it easy to move grids vertically when vertical space is only space available for display.
  • Modular Tabs – I definitely like this pattern for my project simply to make it clear what section the user is in. Create Recipe  *  My Recipes  *  Friends Recipes * Public Recipes
    are all likely candidates for menu options to allow people to know what section they are in.
  • Pagination – this might also be a Bootstrap candidate. However I do think on pages that list multiple recipes or images of recipes, pagination could make it easy for a user to traverse a lot of recipes at once.

 

Decisions for Starting Point

Since I knew I would have a lot of hurdles on this project I made a conscious decision to start with the books source code for chapter 7. This chapter starts on a User Interface for status objects and comes complete with a lot of the login and checks surrounding login for various pages. This allowed me to view how to construct a node/express/mongodb/backbone project. The only downfall was trying to make sense of the code from the spot in which I decided to pick it up. This did lead to some debugging needed when I ran into misunderstandings about the code. However, I was able to get through those and it now sets me up well to move forward developing the ui elements needed for my project.

Debugging, debugging, debugging

So the last week of work on the project has been very telling experience for me developing with node/express/mongodb/backbone. These technologies are so close in proximity since they are all javascript, but all have their own languages and syntax for doing several things. It should go without saying that the errors I made were still mostly human error on my part, but the error messages lead me down the wrong path. The many working files I was tearing through caused me to look at files where the origin of the problem did not reside. So here are the issues I ran into the most:

  1. incorrect syntax of my mongoose schema
  2. incorrect naming of object references in backbone
  3. incorrect updating of post command to write to the database

The first issue of incorrect syntax was probably the easiest to solve, and did not take long to look up in my reference books or online in the mongoose documentation. I pretty much had it figured out the first night, and working inside Chrome and the control panel gave me easy clues to solve the problems at hand.

The second issue of object references took a little longer to find, but it circulated around the following line of code:

account.status.push(status);
account.activity.push(status);

These lines of code take the status (which I will rename to recipe) and activity and push new statuses into them, so that they can display. However in trying to rename to recipe the first time I mistakenly named one reference with the word “recipes” which did take a while to track down. One reason for the inability to track this down was the error message kept leading me to this this piece of code:

$.post('/accounts/me/status', {
        status: statusText
      }, function(data) {
        statusCollection.add(new Status({status:statusText}));      
});

I have condensed this code to what was originally in the book, however I attempted to add in my attributes, which ended up being also my final problem – however this current issue kept circling me around this code instead of the latter piece of code, which ended up being the main problem – a typo.

For my final problem, I was hoping to achieve the following object when things were being recalled from the database:

onStatusCollectionReset: [{"fn":"recipe1","instructions":"instruction1","yield":"4",
"duration":"10mins","photo":"./","video":"./","summary":"summary1",
"published":"Better Homes","tag":"numerous|tags",
"_id":"516c8929f7920cd02400000a","nutrition":[],"author":[],"secretIngredients":[],
"ingredients":[]}]

Unfortunately, my code was only returning the empty arrays for those items in which I wanted multiple strings attached to it.

onStatusCollectionReset: [{"_id":"516c8929f7920cd02400000a","nutrition":[],
"author":[],"secretIngredients":[], "ingredients":[]}]

So after much mashing of teeth, I did manage to corner the problem. Basically, it was clear that the database was not publishing my items, because no items were getting retrieved. And it was saying there was something wrong with the post, which lead me to the last code sample, as I previously mentioned. But what the error did not tell me was to look at the post inside the app.js file that held the entire project (because the error occurred when the data was being retrieved, not when the data was lacking its writing to the database). In any case, here is the code that needed to be changed:

app.post('/accounts/:id/status', function(req, res) {
  var accountId = req.params.id == 'me'
                     ? req.session.accountId
                     : req.params.id;

  models.Account.findById(accountId, function(account) {
    status = {
      name: account.name,
      fn: req.param('fn', ''),
      instructions: req.param('instructions', ''),
      yield: req.param('yield', ''),
      duration: req.param('duration', ''),
      photo: req.param('photo', ''),
      video: req.param('video', ''),
      summary: req.param('summary', ''),
      published: req.param('published', ''),
      tag: req.param('tag', ""),
    };

The original code only had

app.post('/accounts/:id/status', function(req, res) {
  var accountId = req.params.id == 'me'
                     ? req.session.accountId
                     : req.params.id;

  models.Account.findById(accountId, function(account) {
    status = {
      name: account.name,
      status: req.param('status', ''),

    };

Because the object and the attribute were both named status, it did make it difficult to figure out where all of the references were pointing to, but in the end it did get figured out.

Responsive Grid Systems

I am going to be looking at a few grid systems over the course of the next week to determine:

  1. ease of use
  2. simplicity

I am judging on only those criteria at the moment to see how quickly I can integrate a grid system into my project. At the moment I have read up on existing grid systems and want to investigate the following grids in more detail this week:

Others may be added if time permits, but for the time being, I am looking to add a responsive element in a quick and efficient manner, and these grids have come up the most in my research as ones that are easily implemented.