Indiana University Indiana University
CNetS Center for Complex Networks and Systems Research
Website

Website

Production Link: http://givealink.org/main/show Smithers: http://smithers.cs.indiana.edu:3000/main/show

CSS Notes

How does our layout work? We have a two-column layout with a fixed left_sidebar and a fluid content/homepagecontent column. The minimum header width is set so that the page will look good on small resolution screens such as laptops or older monitors, but will also float right to fill large resolution screens such as our desktop Macs. In order for this to work, the two columns are wrapped in a "wrapper" div, and both are floated left. The wrapper has a left margin which equals the width of the left_sidebar. The left sidebar has a left-margin of -160px (a negative value equal to its own width). This way, the left edge of the wrapper indents 160px and the left_sidebar overflows it 160px to the left. If you set the margin-left of the wrapper div to 1px solid blue, you can see exactly what is happening. Suggestion: When working with the layout, set the borders of the various elements to 1px thick. This will draw a box around them so you can see how they are nested. validates_uniqueness_of handle We wrote a check into the games model to make sure that player handles remain unique. This can possibly suffer from the weakness that validates_uniqueness_of does not guarantee uniqueness if you have multiple servers/server processes (e.g. running Phusion Passenger, multiple Mongrels, etc) or a multi-threaded server. However, we chose to use the InnoDb model for mysql, which locks tables and performs writes to the database one at a time. In this way, the problem of simultaneous multi-process attempts to write the same value to a unique field causes one of the dbase "write" attempts to succeed and the other to fail. This is how we avoid the problem. How Images Are Organized Some of the buttons on the site are created using HTML/CSS. For example, the blue search buttons are created this way. All you have to do is change the text in the appropriate view and the button updates automatically. However, some of the larger buttons are actual images. We do this when there are embedded images in the button, since images can be handled nicely in layers and turned on and off as needed to do such things as overlay "Coming Soon!" banners. Images for the GiveALink website are created using Adobe. The Adobe PSD files are located in public/images/masters. The images used in production are in givealink/public/images/ and the buttons are in public/images/buttons. For example, the image file on the main page which shows the FF3 extension is called "FF3_ext_btn_narrow.png" and is called in the givealink/app/views/main/show.erb.html file. So, if you wanted to change the image, you can use Photoshop or Elements (free from IUware) to open the master PSD file. Make your changes, and then you can then "Save As..." givealink/public/images/buttons/FFs_ext_btn_narrow.png" to overwrite the actual image used in production. Of course since both files are changed, they will be updated when we svn up.

Validation of Tags

Separators of tags: " " ";" "," "|"   -> regexp /[s;,|]+/ Valid characters in tags: "." "-" "_" "&" "+" ":" -> regexp /A([A-Za-z0-9-_.:&+]+)Z/

Security Problem

We use authlogic to save users' passwords as encrypted ones: http://railscasts.com/episodes/160-authlogic Based on authlogic, we add Openid functionality for users to log in or register in a faster and easier way: http://railscasts.com/episodes/170-openid-with-authlogic

Recommended pages

We used to use novel similiarities for selecting recommended pages.  Due to issues with computing novelty, we changed to using direct similarity instead.  Either way, the approach is the same. Until there are enough recommendations or all of a user's bookmarks (up to a limit for time purposes) have been checked:
  1. Pick an unchecked page from the user's bookmarks at random
  2. Get the top n (default 20) similar pages (used to be the top n novel similarities) to that bookmark
  3. Randomly select one of those top similar pages
    • If the page is not in the user's bookmarks and is not already recommended, add it to the recommendations and go back to picking one of the user's bookmarks at random (or return results)
    • If the page is in the user's bookmarks or already recommended, randomly pick another one, until all are checked
    • If all have been checked, go back to picking a bookmark at random (or return results) without adding to the recommendations
Once there are the wanted number of recommendations or enough bookmarks have been checked (the lesser of all of the user's bookmarks or some limit for time purposes), return the results in the form of a pair of arrays -- the Url objects for the recommendations, and the ids for the seed urls (the pages from the user's bookmarks).