Just a quick time comparison of PHP’s preg_replace vs. str_replace
Here's a short and succinct comparison of running time to replace multiple characters in a given string. I ran the test 20 times each, so the numbers you will find are average running times:
$start = microtime(); $str = "23ilrj23oirj23iorj o23irj23klfj23lkjr4ocimior 4r ioj234roij234r io34jrio4jrio34r jio4jr o34jr oi4jr io34 r"; $new_string = preg_replace('/[\w2]/',',',$str); $end = microtime(); echo($end - $start); echo "\n"; $start = microtime(); $str = "23ilrj23oirj23iorj o23irj23klfj23lkjr4ocimior 4r ioj234roij234r io34jrio4jrio34r jio4jr o34jr oi4jr io34 r"; $new_string = str_replace(array('2',' ',"\t"),',',$str); $end = microtime(); echo($end - $start);
The results:
0.000608
0.00024099999999999
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
AnswerWise — The power of humans
Over the last few weeks I have run into numerous spiders and being the inquisitive type of person I am I always want to know what I am looking at. Thanks to my senior capstone project at the University of California at Santa Barbara, I finally have an answer to pretty much any question I could formulate... And the best part about AnswerWise is that it supports images. Win win. Here is the latest question asked and it's answer. (AnswerWise had the answer in under 10 minutes)
What kind of spider is this and is it poisonous?
Answer: This is a Phidippus johnsoni (Red-backed Jumping Spider) its bite results in swelling and pain at the bite site but its not poisonous. But of course if you are allergic it will be worse.
Pretty cool huh? I think so. A little bit about our senior project statistics: Over 800 questions have been asked with an average 15 minute response time and 80% or more of the asked questions include images.
jQuery & Navigation: sliding sub navs
We've all seen those web sites that have navigation links that, when clicked, slide down a sub navigation. I recently put one together for thatwasmean.com and thought I would take a moment to clean up, generalize, and make easily viewable an example. You can find the working example in my examples directory, here.
To make this functionality possible I utilized jQuery's slideUp and slideDown functionality. This is a neat little function that changes the display property from displaying the full element to slowly hiding the top part of it until the whole element is hidden, at which point the display CSS attribute is set to none.
I am going to put the main parts of the example here in this point, but keep in mind you will have to set up the remaining html tags (like body and head) as well as include the jQuery framework. It is encouraged to view the working example to see some of the added styling to make things look a little prettier (since in this post scope I am only including the necessities)
Let's begin with the CSS styles to set things up. We have three sub navigation items and so we need to set those three sub nav items with a display property set to none. You will also note I have modified text alignment in here, since each sub nav requires different aligning. The 'flash_about' is the container for the navigation as well as the sub navigation items. This is easy to change if you wish, but I stuck it all in one place as it suited my needs.
#flash_about { text-align:right; } .sub_nav_box { font-weight: normal; padding:0.3em 1em 1em; border-top:1px dotted #C1CDCD; } #add_new_thing { display: none; text-align: left; } #about { display: none; text-align: left; } #browse_by { display: none; text-align: center; } #browse_by > .link { margin-left: 0.2em; } .nav_link { margin-left: 1em; }
Next we need our JavaScript... using the jQuery functions mentioned above and a little jQuery helper magic we have a toggle_div function that takes a div ID and will toggle that div. This function is cool in the sense that it will hide all other opened sub nav items and only show the one you are selecting. Further, if you click a navigation link and its corresponding sub navigation item is already being displayed then the function will slide up that sub navigation item. (The $ symbol represents a call to jQuery.)
function toggle_div(div_id) { var div = $('#'+div_id); var divs = $('#flash_about').children('div').not(div); if(div.css('display') == 'none') { divs.slideUp(function() { div.slideDown(); }); } else { div.slideUp(); } }
Lastly, let's get the HTML in here to make all of this mean something to the viewer. I have left some content in the sub navigation items to give the overall example some meaning. (I strongly dislike examples where everything is named 'example 1, example 2, examples 3-- show me some content good sir!)
<div id="flash_about"> <a class="nav_link" onclick="return toggle_div('about');" href="#">About</a> <a class="nav_link" onclick="return toggle_div('browse_by');" href="#">Categories</a> <a class="nav_link" onclick="return toggle_div('add_new_thing');" href="#">Submit something</a> <div id="add_new_thing" class="sub_nav_box"> <div style="margin-bottom: 0.4em; margin-top: 0.4em;"> <span id="add_new_thing_title" style="color: #333; font-size: 16px;">Type your thing here... </span></div> <textarea id="add_new_thing_body" class="thing_input" style="border: 2px solid #666;" cols="40" rows="10"></textarea> <div id="new_thing_buttons"> <a class="button" href="#">add new thing</a> or <a onclick="toggle_div('add_new_thing');" href="#">cancel</a></div> </div> <div id="about" class="sub_nav_box"> Welcome to my web site. This is the about us... it is awesome. Feel free to browse the site and check out some of our cool features.</div> <div id="browse_by" class="sub_nav_box"> <a class="link" href="#">link</a> <a class="link" href="#">link</a> <a class="link" href="#">link</a> <a class="link" href="#">link</a> <a class="link" href="#">link</a> <a class="link" href="#">link</a> <a class="link" href="#">link</a></div> </div>
And there we have it. Go check out the example to see it in action. I hope you enjoyed this post. If you have any requests on JavaScript/jQuery examples let me know... As I find more time I will put up more examples of common uses of JS & jQuery.
Show/Hide ToolTips with jQuery (revisited)
Finally, I got around to putting together a very simple demonstration (no graphics or styling) of using jQuery to show and hide (toggle) tool tips. I have put together I demo you can access at examples/jquery/show_hide_tooltips_ex1. Ctrl+U to view source.
What I have put together in this demonstration:
- an on ready document function that tells jQuery when the web page has rendered to become active
- a binded click event on all input boxes with a class named 'form_field' that will call back a function when clicked
- a call back function that will hide all other tooltips and display the one corresponding to the input box clicked
Here is the source code to view. Again, to see it functioning go to the above link! And don't forget for all of this to function you must include the jQuery JavaScript framework into your <head></head> html page. You can link or grab a copy from Google Code (here), and the version I am using is jquery-1.3.2.min.js.
$('.form_field').bind("click", function() { var divs = $('.tooltip_example1'); var field = this.id; var div = $('.tooltip_example1[id='+field+']'); if(div.css('display') == 'none') { divs.hide(function() { div.show(); }); } else { div.hide(); } }); });
And within the body of your html page you should add the following html
<table border="0"> <tbody> <tr> <td> Username</td> <td> <input id="username" class="form_field" size="30" type="text" /></td> <td> <div id="username" class="tooltip_example1" style="display:none"> This is how we'll identify you</div></td> </tr> <tr> <td>Password</td> <td> <input id="password" class="form_field" size="30" type="text" /></td> <td> <div id="password" class="tooltip_example1" style="display:none"> And how you keep it safe</div></td> </tr> <tr> <td colspan="3"> <input type="button" value="Submit" /></td> </tr> </tbody></table>
The value in this kind of toggling is as a user goes through a form they can see suggested messages by you, the web developer.
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.