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.
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