Rails, jQuery UI (Sortable), and Ordering of Slides
I am partly sharing this issue and solution to the world, but mostly just recording somewhere what I came up with. Now, onto the quick read.
A web design client recently asked me to build a web site for him that would allow him to create slide shows of his art work. One of the criteria was to create a way to set the order and, at a later date, re-arrange slides in the slide shows. Turning to jQuery UI, specifically the Sortable (doc), and a simple rails controller this task was pretty trivial. My initial concern was that a slide show could consist of hundreds of slides and doing any sort of ajax updating of the slides would be too slow. Turns out, this was a real concern and after reading all kinds of blogs I was unable to find a work-able ajaxively awesome solution. So, I turned back to the non web2.0 design of just having a Save Order button. The methodology of my solution is straight forward: allow the user to drag and drop to any order configuration they please and then save that order. Upon clicking save via the user interface, invoke the following javascript command that will build the query string and do a window relocation. I'd rather use GET than POST for no real reason outside of having to hack around the authenticity token. After all, what's the point of having an auth token if you're just going to override it in a members-only section. Here is the complete code for the view, broken into pieces for clarity.
CSS:
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; }
JS:
<script type="text/javascript"> // Initialize sortiable on #sortable div $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); }); // Prepare and go-to proper url for updating order of slides. // Called via html anchor tag by user function update_order() { window.location.href = "/slides/order?"+$('#sortable').sortable('serialize'); }
Sample #sortable:
<ul id="sortable"> <li id="slide_2" class="ui-state-default full-width"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Lack of a better Title</li> <li id="slide_3" class="ui-state-default full-width"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>A fireplace for two</li> <li id="slide_1" class="ui-state-default full-width"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>My Super Sweet Villa</li> <li id="slide_4" class="ui-state-default full-width"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>A view from above</li> </ul>
Anchor link:
<a href="#" onClick='update_order(); return false()'>Save Order</a>
Controller:
def order if params[:slide] params[:slide].each_with_index { |slide, index| Slide.update(slide.to_i, :slide_position => (index +1)) } flash[:notice] = "Slide order has been updated." redirect_to(slides_path) else @slides = Slide.ordered end end
Now, for some disclaimers... You should add in error handling to all of these pieces! For brevity, I've included the main pieces of the task and not my error handling code. You can also use post and add in (instead of looking for params[:slide]) if request.post?... Just don't forget to put in the authenticity_token to your ajax or form post (forms do this automatically in rails if protect_from_forgery is enabled).
Efficiency: This is a O(n) algorithm, because it has to iterate over each element being sorted and do three things: fetch from the database, update the attribute, and save. The last two steps can be combined. I'm using the handy ActiveRecord::Base extension in Rails called update to do this. Here's that code so you don't have to look it up:
# File vendor/rails/activerecord/lib/active_record/base.rb, line 744 744: def update(id, attributes) 745: if id.is_a?(Array) 746: idx = -1 747: id.collect { |one_id| idx += 1; update(one_id, attributes[idx]) } 748: else 749: object = find(id) 750: object.update_attributes(attributes) 751: object 752: end 753: end
I was unable to locate any kind of conditional MySQL update that would allow different values to be updated for different rows all in one swoop. I'll admit my research on this topic was about 30 minutes of blog and StackOverflow reading... If you have something more efficient please reply.
Here are the link(s) to relevant information:
jQuery UI Demos (and download) -- I'm using the latest code base as of this post. The styles you see within the bullet list items are from the jQuery UI theme.
Facebook Application: Hello Birthday
About a month ago it was my birthday. On that day I was receiving countless e-mails from Facebook notifying me of Happy Birthday messages when I realized many of the messages followed a particular pattern (i.e. "Happy Birthday(!| <name>,| <endearing term>). Don't get me wrong, I enjoy and appreciate all of my birthday wishes. But being an Engineer, my brain finds patterns and attempts to "code up solutions." However, I had not played with the Facebook API yet and had been waiting for a good reason to come around so I took the idea of a Happy Birthday messenger to work and put together a version one of my Hello Birthday application. The application follows a few goals: to be easy to understand, easy to use, and it should just work. With that, here are the criteria I came up with to take a crack at achieving these goals:
- Automatically message friends on their birthday
- Allow enabling and disabling of such said feature
- Use a generic message that more than 50% of users observed currently use when wishing a friend "Happy Birthday"
- Manage an exclusion list, containing the friends Hello Birthday should not automatically message
- Post onto the friends' wall as if it were the user
With plans to continue development, I have a more robust friend list module going in soon and the ability to set up custom messages for particular friends. Eventually, some form of gift giving may be in order. To bootstrap development I followed a few principles:
- Prototype over masterpiece
- Design impacts implementation, but implementation makes design possible
- Low budget: use open source and free resources
To prototype the project I chose to use Ruby on Rails and SVN. To bridge my rails application and Facebook, I added the Facebooker rails plugin to my application. Facebooker is a pretty neat extension to Rails that provides all kinds of helper methods and an extremely easy to use interface wrapping the Facebook API. It also provides nice view helpers for generating FBML (the Facebook Markup Language) and FBJS (Facebook JavaScript). Developing version one locally saved quite a bit of time by realizing change immediately as opposed to any form of deployment. I then set-up a Facebook application (in Sandbox mode) for development (i.e. hello_birthday_dev) that only I had access to. Facebook offers test developer accounts, so after registering 6 or 7 of these to use with tests I was able to enumerate all of the states that Hello Birthday would need to recognize and transition.
When it came time to deploy to production I needed a production server and Facebook application. I registered the Facebook application (again, in Sandbox mode) for production (i.e. hell0_birthday) and then signed up for hosting with Heroku.com. Heroku is a Ruby (mostly Rails) cloud computing platform as a service. Basically, you get one free "cpu worker" and as you need more they sell scalable features. This, however, is perfect for what I need: a Rails host that allows cron jobs and makes deployment super fast & easy. Sure enough, Heroku makes deploying an application as easy as:
- git add .
- git commit -a
- git push heroku master
A slug of my app is created and deployed to my birthday.heroku.com production server. And to make sure I can monitor errors, I installed the hoptoad error monitoring service. Hoptoad app provides me with web-based access to error reporting and resolution management (organizes errors based on environment; test, production, and or development).
The training wheels were taken off: Sandbox mode disabled on Hello Birthday. I submitted my application to the Facebook directory a week or so ago and it's been smooth sailing since. I currently am servicing a little over 40 people. No complaints have been submitted thus far.
In summary, this is my first Facebook application and I have tried to utilize a lot of the latest technology in the process to illustrate how quickly a scalable solution to an easy problem can be solved. With Heroku & fairly efficient code, I do not foresee a problem handling a potentially high growth rate. I will try to bring back updates to this article if anything goes terribly wrong.
You can check out the Facebook application at http://apps.facebook.com/hello_birthday
That Was Mean
For the past few weeks I have been spending a few minutes here and there putting together a catalog web site. Now, you may be asking what kind of catalog system would Mike be working on? Let me fill you in....
It all started with a co-worker, an awesome guy, and a few tasteful jokes. One bad joke later I wanted to get him back in a way that no man can deny: publishing a public wronging on the Internet. And, with that, thatwasmean was born.
It started as a very simple logging of things said in the office.
The categories grew for different needs.
The color schemes changes as suggestions came in.
But what I have found most interesting so far is the cohesiveness between posts. They relate to each other, even spread across multiple days, and you can generally figure out what goes with what and the livelihood of that incident within our office.
So, with all that said, ThatWasMean.com launches to a little more of a public scale. It was developed in Ruby on Rails, hosted using Phusion Passenger and Apache, and is evolving slowly... Check it out and provide any feedback.
go to ThatWasMean
Ruby Regular Expressions – Security Risk
This post is a half reminder to elaborate when I have free time... But in short, there is nothing wrong with Ruby regular expressions, except that they behave differently than one might expect (in general and if coming from Perl RegEx).
Here is the dealy, from the Programming Ruby book by Dave Thomas:
The patterns ^ and $ match the beginning and end of a line, respectively. These are often
used to anchor a pattern match: for example, /^option/ matches the word option only if it
appears at the start of a line. The sequence \A matches the beginning of a string, and \z and
\Z match the end of a string.
All sounds good right? Well, it turns out that Ruby will execute code within a regular expression if you can pass multi-line input to the parser. For example... Given
class EmailAttachment < ActiveRecord::Base validates_format_of :attachment, :with => /^[\w\.\-\+]+$/ end
You can easily pass in
attachment.txt%0A<script>alert('open_sesame')</script>which is converted (as %0A is a URL encoded new line), by ROR, into
"attachment.txt\n<script>alert('open_sesame')</script>"You can think about the implications of this, feel free... I have been able to have some fun with my own personal site and getting arbitrary JavaScript and (worse) shell commands to execute. Also, I believe this may cause a larger security whole within routes for Rails (at least 2.1.0). I'll investigate this more later, as the beginning of this post says.
Validating Emails in Ruby on Rails
It's time to validate e-mail addresses and you're sitting in a Ruby on Rails application. Fortunately, there are a few methods to tackle such a task, and a combination of them can yield a pretty nice solution.
The first idea is to use some lengthy regular expressions. But why enumerate/describe in regular expressions what we are looking for when TMail has it built in... Using TMail, it is possible to let our Ruby Net SMTP wrapper class parse the email address and decide if it is correct or not.
The second task is to make up for some of TMail's odd shortcomings: the fact that the text "bob" passes as valid for TMail is alarming, but throwing in some simple regular expression to get past this provides a pretty solid solution. (For the curious, "bob" is a valid e-mail to TMail because you could be sending messages to the local domain.)
First, here is our regular expression for a basic e-mail address...
/^([^@\s'"]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i
Next, we create a TMail object with our e-mail address...
tmail = TMail::Address.parse(address.to_s) rescue nil
I am rescuing nil here. You can rescue whatever error message you want, but for example sake I am not so concerned if the TMail fails to parse the e-mail address. You can pass in a multitude of e-mail formats and TMail will do its best to match the RFC standard for e-mail addresses.
You now have access to a TMail object with a flurry of options (TMail & documentation). Let's proceed.
My simply method calls TMail and then follows it with the regular expression match to ensure this e-mail address in question is ready to be used on the web. Here is my final result to a pretty safe-proof (so far, tested on a rather large web site) e-mail handler. This method will return the TMail object.
def validate_email e-mail tmail = TMail::Address.parse(address.to_s) rescue nil tmail if tmail.address =~ /^([^@\s'"]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i end
And for those of you who want the extra step, I have attached a helper method that takes a TMail object and gives you back the e-mail address in string format fully qualified.
def formatted_email tmail if !email.blank? friendly_name = (tmail.name.blank? ? "" : tmail.name.blank?).tr('"',"'") quote = '"' if friendly_name =~ /[<,@;]/ "#{quote}#{friendly_name}#{quote} <#{address}>" end end
As always, test this code and do not trust it blindly. I could have fat fingered something...
Google Mail Conversation Threading, and how to prevent
Tired of Google mail taking your e-mail and matching it to a gmail conversation incorrectly? Google mail has many cool features, one of which is the e-mail conversation thread view. This view shows e-mails matched based on subject, time, and correspondence grouped together to see a chronological conversation. While this is a neat feature that has made Gmail unique for so long, it can become cumbersome to companies and web developers as they try to ship out monthly statements, e-mail notices, or any other e-mail that for some reason has the same subject every time it is sent out.
The question I asked was: Is it sufficient to change the subject text every time I send out an e-mail?
The answer was no. The reason(s) were simple: the e-mail may need the same subject and/or you may not want to send your customer an e-mail with a unique character sequence in it that the user can see and potentially become confused about.
The solution: Follow suit with another cool feature Google mail has made apparent, the use of virtual inboxing. Add a short web-friendly unique code to your e-mail address username, appending with a + sign.
ephekt@gmail.com becomes ephekt+nM2eY@gmail.com
The key to this is that you should have a friendly name on your e-mail so that the recipient does not see the difference in e-mail addresses. Thus, with slight modification we now arrive at:
Mike R <ephekt@gmail.com> becomes Mike R <ephekt+nM2eY@gmail.com>
And to the end user all is sane. There are a few ways to generate unique tokens... In a Ruby on Rails project I used the built-in base 64 encoder, passing in a random number up to 3 characters long so that my generated code would not only be highly unique but relatively short.
def friendly_email_token ActiveSupport::Base64.encode64(rand(0x10000).to_s).tr("/+","_.").gsub(/=*\n/,"") end
Just throw the above method into one of your classes and then you can define a method that appends this friendly_email_token to your e-mail address.
def randomize_address email unless email.blank? username, domain = email.split("@", 2) "#{username}+{friendly_email_token}@#{domain}" end end
And voila! We're good to go. Call the randomize_address method with your e-mail (with or without a friendly name) and it will do the work.
Rcov — measure your test coverage (Ruby on Rails)
Fact: Code can be developed that contains no bugs.
Fiction: That the above happens often.
The act of software development in itself is prone to many errors; typo's, assigning one variable to another without remembering variable types, and more often adding features to existing software and not updating all of the calling code that now does not know it has to pass in a third method parameter.
To combat the unseen errors we can call rake commands to run our unit, functional, and integration tests. But if the tests are not up-to-par, for example they all assert true regardless of any actual testing, then in reality the results are meaningless. So, in essence, to combat poor test coverage, which tries to combat errors in feature development, I decided to give Rcov a try. I took my latest RoR project and built a rake task to run my unit, functional, and integration tests through Rcov. At first I was rather upset when I saw the Rcov results; I was pretty much being told I failed test writing class. On we go...
What is Rcov?
Rcov is a necessary tool if you want to write code that not only works but will also allow for expansion and adaptation (and there are other reasons as well, but that is for you to find out). Technically, it is a tool that measures your code coverage from your tests in a Ruby (and RoR) project. Taken from eigenclass.org, the maker of Rcov, the main points are presented as follows:
* fast execution: 20-300 times faster than previous tools
* multiple analysis modes: standard, bogo-profile, "intentional testing", dependency analysis...
* detection of uncovered code introduced since the last run ("differential code coverage")
* fairly accurate coverage information through code linkage inference using simple heuristics
* cross-referenced XHTML and several kinds of text reports
* support for easy automation with Rake and Rant
* colorblind-friendliness
Rcov in action
With that all said, the point of this entry is to not only get other developers using Rcov, but to also share my rake task that I put compiled after reading a few blogs and looking at other Rcov rake task plugins and examples sources. My code was mainly adapted from Alan Johnson ( github plugin project page ).
Mileage may vary. I created a file called rcov.rake in my project/lib/tasks/ folder and its contents:
def run_coverage(files) rm_f "coverage" rm_f "coverage.data" # turn the files we want to run into a string if files.length == 0 puts "No files were specified for testing" return end files = files.join(" ") if PLATFORM =~ /darwin/ exclude = '--exclude "gems/*"' else exclude = '--exclude "rubygems/*"' end rcov = "rcov --rails -Ilib:test --sort coverage --text-report #{exclude} --no-validator-links --aggregate coverage.data" cmd = "#{rcov} #{files}" sh cmd end namespace :test do desc "Measures unit, functional, and integration test coverage" task :coverage do run_coverage Dir["test/**/*.rb"] end namespace :coverage do desc "Runs coverage on unit tests" task :units do run_coverage Dir["test/unit/**/*.rb"] end desc "Runs coverage on functional tests" task :functionals do run_coverage Dir["test/functional/**/*.rb"] end desc "Runs coverage on integration tests" task :integration do run_coverage Dir["test/integration/**/*.rb"] end end end
More information on Rcov is available from the links below:
User Agent inspection: finding the client browser name
Here is a short snippet of Ruby code that I wrote today to detect client browser types. (to override CSS styles based on client browsers..) Hope it helps.
def client_browser_name(user_agent_string) case user_agent_string when /msie 6/i "IE6" when /msie 7/i "IE7" when /msie 8/i "IE8" when /konqueror/i "Konqueror" when /firefox\/2/i "FF2" when /firefox\/3/i "FF3" when /applewebkit/i "Safari" when /gecko/i #generic case where FireFox is not in String (ie. MindField, BonEcho, GranParadiso) "Mozilla" when /opera/i "Opera" else "Unknown" end end