Another programming blog

Ensure a div is visible in mobile browser

2013-05-20T12:40:00.000+01:00

I'm currently working on a responsive site that has a high predicted mobile user base. There are a few areas in this site where divs are revealed or hidden using jQuery slideDown(), slideUp(), hide(), show(), and sometimes modal overlays are presented to the user with a tinted blocked UI.

Sometimes on mobile devices presentation of these can be problematic - the reveal of a new div may happen fully or partially off-screen, seriously damaging the user experience. To counteract this I built a javascript function which I use after each new reveal to check if the div is viewable in the browser:


function checkIfDivIsViewable(div) {

   
    var $window = $(window);           
    var myTop = div.offset().top;  // top of element
    var windowTop = $window.scrollTop();           // top of window
    var windowBottom = windowTop + $window.height();  // bottom of window

    if (myTop >= windowTop && myTop <= windowBottom) {
        // div is viewable in browser, do nothing
    } else {
        // div is not viewable in browser, so scroll it
        $('html,body').animate({ scrollTop: myTop }, 300);
    }


}

I tried calling this on completion of reveals, like this:

$('#divToShow').slideDown(300,checkIfDivIsViewable($('#divToShow')));

but this didn't prove too reliable. I don't know why, but it's posssibly because the div is still in motion when we're asking jQuery to assess it's position. So at the risk of appearing a bit hacky I check the display after a small delay. This seems to work fine:

$('#divToShow').slideDown(300);

//now check that the div we just revealed is visible
setTimeout(function () {
            checkIfDivIsViewable($('#divToShow'));
        }, 500);

Rails Activerecord - common performance pitfalls

2013-05-07T22:29:00.002+01:00

I just found this great blog entry on Engineyard on the common pitfalls using Activerecord - when an innocent bit of code works great in development but in the wild, when faced with 1000's of records, it'll grind to halt. Here's a summary:

1. Model.find(:all)

In versions of Rails before 2.3, this is a memory killer. The most common form in the wild is:

Comment.find(:all).each{ |record| do_something_with_each(record) 1125;

If you have 100,000 Comments, this will load and instantiate all 100k records in memory, then go through each one. In Rails 2.3, the .each will paginate through the results, so you’ll only load in small batches, but this won’t save you from the following variations:

@records = Comment.all
@records = Comment.find(:all)
@record_ids = Comment.find(:all).collect{|record| record.id }

Each of these will load up all Comment records into an instance variable, regardless if you have 100 or 100,000 and regardless if you are on Rails 2.1 or 2.3

2. :includes are Including Too Much

Article.find(:all, :include => [:user => [:posts => :comments]])

This is a variant of the above, intensified by the one or multiple joins on other tables. If you only have 1000 articles you may have thought loading them in is not a big deal. But when you multiply 1000 that by the number of users, the posts they have and the comments that they have… it adds up.

3. :includes on a has_many

@articles.users.find(:all, :include => [:posts => :comments]])

Variation on the above, but through a has_many.

4. @model_instance.relationship

Referring to a has_many relationship directly like so:

@authors.comments

is a shortcut to the potentially bloated:

@authors.comments.find(:all)

Be sure that you don’t have thousands of related records, because you will be loading them all up.

5. Filtering Records with Ruby Instead of SQL

This is also fairly common, especially as requirements change or when folks are in a hurry to just get the results they want:

Model.find(:all).detect{ |record| record.attribute == "some_value" }

ActiveRecord almost always has the ability to efficiently give you what you need:

Model.find(:all, :conditions => {:attribute => "some_value"})

This is a simple example to make the point clear, but I’ve seen more convoluted chunks of code where detect or reject is using some non-attribute model method to determine inclusion. Almost always, these queries can be written with ActiveRecord, and if not, with SQL.

6. Evil Callbacks in the Model

I’ve helped a couple of customers track down memory issues where their controller action looked perfectly reasonable:

def update
  @model = Model.find_by_id(params991;:id])
end

However, a look at the filters on the model showed something like this:

after_save :update_something_on_related_model
.
.
def update_something_on_related_model
  self.relationship.each do |instance|
    instance.update_attribute(:status, self.status)
  end
end

7. Named scopes, default scopes, and has_many relationships that specify :include Where Inappropriate

Remember the first time you setup your model’s relationships? Maybe you were thinking smartly and did something like this:

class User
  has_many :posts, :include => :comments
end

So, by default, posts includes :comments. Which is great for when you are displaying posts and comments on the same page together. But lets say you are doing something in a migration which has something to do with all posts and nothing to do with comments:

@posts = User.find(:all, :conditions => {:activated => true}).posts

This could feel ‘safe’ to you, because you only have 50 users and maybe a total of 1000 posts, but the include specified on the has_many will load in all related comments – something you probably weren’t expecting.

8. Use :select When You Must Instantiate Large Quantities of Records

Sometimes, in the reality of running a real production site, you need to have a query return a large data set, and no, you can’t paginate. In that case, the first question you should ask is “Do I need to instantiate all of the attributes?”

Maybe you need all the comment_ids in an Array for some reason.

@comment_ids = Comment.find(:all).collect{|comment| comment.id }

In this case, you are looking for an array of ids. Maybe you will be delivering them via JSON, maybe you need to cache them in memcached, maybe they are the first step of some calculation you need. Whatever the need, this is a much more efficient query:

@comment_ids = Comment.find(:all, :select => 'comments.id').collect{|comment| comment.id }

9. Overfed Feeds

Check all the places you are making XML sandwiches. Often these controllers are written early on and don’t scale well. Maybe you have a sitemap XML feed that delivers every record under the sun to Google, or are rending some large amount of data for an API.

10. Monster Migrations

Finally, watch out for your Migrations, as this is a common place where you need to do things like iterate over every record of a Model, or instantiate and save a ton of records. Watch the process size on the server with top or with “watch ‘ps aux | grep migrate’”.

Disable autocorrection in HTML text input field

2013-04-11T14:47:00.000+01:00

Autocorrection is a pain when typing into HTML text input fields for user names and other kinds of data that shouldn't be auto-corrected. As web devs we should be disabling this functionality to make mobile users' lives better

All you need is this attribute:

autocorrect="off"

Adding a facebook app to a page tab

2013-02-18T14:27:00.001Z

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL

Latitude and longitude in Rails activerecord

2013-01-25T12:44:00.001Z

I needed to store latitude and longitude in my Postgres db in a way that maintained accuracy of data but also allowed fast efficient searching of this spatial data using BETWEEN queries. The PostGIS extension was not available to me.

The suitable data type for this is a decimal with precision of 9 and scale of 6 [decimal(9,6)]. The activerecord migration code for this turned out to be thus:

add_column :livetokens, :latitude, :decimal, :precision => 9, :scale => 6

Sniff iPhone HTTP traffic with mitmproxy

2013-01-22T22:03:00.000Z

I always forget how to use mitmproxy, so here's a reminder for myself:

Download and install mitmproxy, if you haven't done so already.
Go to a terminal and run mitmproxy.
Get the network IP address of your mac by running ifconfig en1.
Set the proxy on your iPhone by going to wifi settings. Set HTTP Proxy to “Manual”, and enter the IP of your Mac and port 8080.
Start browsing on the iPhone, or run an app. Press ‘?’ to bring up the list of commands.

Text size bigger in iPhone Safari landscape

2013-01-16T14:35:00.000Z

Is your text size being unpredictable when in landscape on an iPhone? Mine was. Here's the fix, just add this to your body class:


-webkit-text-size-adjust:none;

Twilio for rails - setting the StatusCallback URL

2013-01-09T13:37:00.001Z

I've been using Twilio with Rails to send SMS, and needed Twilio to notify my Rails app if a send had been successful or not.

To acheive this I added a StatusCallback parameter when calling message.create. This contains a URL with a unique identifier of the message I sent.

 # send an sms
    @client.account.sms.messages.create(
        :from => '+44207XXXXXX',
        :to => phoneNumber,
        :body => body,
        :StatusCallback => ENV['app_url']+ENV['twilio_sms_postback']+'?smsId='+textmessageId.to_s
    )

Anchors lost on Safari when rewriting from https to http

2012-12-14T14:30:00.000Z

Had an annoying problem today that I couldn't find a fix for. We have some rewrite rules that take care of enforcing which pages should be served over https and which over http. We have a link from one of the secure pages to an anchor (#myanchor) on an unsecured page.

Safari strips the anchor from the end of the URL when navigating this link. It forgets it was ever requested, presumably because the change from https to http is actually seen as a fundamentally different URL. I'm sure this is a Safari bug but intend to do a bit more digging when I have a moment, and my MBP at hand, and am not limited to working on an iPhone.

My hacky fix was to allow this unsecured page in particular to be served over HTTPS.

CKEditor placeholder text

2012-12-10T13:45:00.000Z

I had to implement some placeholder text in CKEditor recently. It's more complex than you might think, and after some quick consideration I sought a plugin for it. I ended using this one, which was dead easy to implement and worked without any problems at all.

Easily attach to IIS process in Visual Studio

2012-11-20T10:06:00.000Z

Perhaps I'm a bit late to the party here but I just discovered VSCommands which has just come in particularly handy for my current project, which involves attaching to IIS when debugging.

This tool has turned a rather laborious 4-click menu-based process into a one-click dream from my toolbar. It looks like there's plenty more than this available too but for now I'm happy with this little godsend.

Update: VSCommands just stopped me completely screwing up a project with an accidental drag and drop of a folder in my Solution Explorer. This is cool stuff:

Return content in ASP.NET with 503 Service Temporarily Unavailble

2012-10-10T06:38:00.000+01:00

I tried to do this today on a nice looking holding page while we were doing some site maintenance:

Response.StatusCode = 503;
HttpContext.Current.Response.StatusDescription = "Service Temporarily Unavailable";

The problem was that my nice-looking content never got displayed. Instead, the user was presented with an ugly "The service is unavailable." page. To overcome this is a one-liner:

Response.TrySkipIisCustomErrors = true;

UITableView with static cells not showing

2012-09-26T20:48:00.002+01:00

I'm still a noob at Xcode iOS development, and today I was trying to build a nice-looking input/edit form using a UITableView with grouped static cells. It looked good on my storyboard but when debugging the cells just wouldn't show up. The reason? I was implementing three methods that shouldn't be there at all when using static cells. I deleted them and bingo, it worked. Here they are:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
}

Can't install Xcode from Mac App Store

2012-09-14T07:39:00.000+01:00

I needed to do some iOS development yesterday which required direct testing on my iPhone, but since I last connected my phone to Xcode it's OS has been updated which means I need the new iOS SDK, which comes with Xcode.

So I went to the Apple Developer centre, found the download link that opens up the Mac App Store, clicked the 'Install' link and literally nothing happened. No error messages, no download....nothing.

After some googling I pieced together some bits of advice from around the interweb and finally fixed it by typing the following into my terminal, then deleting my existing Xcode.app and Install Xcode.app, and then fully restarting my machine. None of these steps worked on their own, or without the restart!

rm ~/Library/Preferences/com.apple.appstore.plist
rm -r ~/Library/Saved\ Application\ State/com.apple.appstore.savedState
rm -r ~/Library/Caches/com.apple.appstore
rm -r /private/var/folders/*/*/*/com.apple.appstore

dmg image data corrupted - dowloading from Virgin Media Broadband

2012-09-11T22:00:00.000+01:00

You've probably landed here because you're a Virgin Media Broadband customer and every time you download a disk image file (.dmg) or indeed any large file it appears to be a successful download until you try to open it. Attempting to mount or verify the image returns "image data corrupted" and the file is useless.

I've had this problem for months on my Macbook Pro, OSX Lion. Downloading from another ISP is never a problem - and today I had to download my new Ruby on Rails IDE Rubymine 4.5.4 (106MB) over 3G with Orange because Virgin Media wasn't playing ball again.

I spoke to Virgin about this problem tonight, and despite seemingly dozens of customers suffering the same problem they don't have a solution. So...it looks like I'll switching my broadband supplier soon.

Update: They sent me to their forum, where I was told to leave a comment on the wrong thread. I eventually found a more suitable thread where I left a comment. This got picked up and they sent out some new kit - a Superhub. Problem solved!

Using Examine and Lucene to search Umbraco content

2012-07-24T12:27:00.000+01:00

I'm a relative noob with Umbraco, but today I was tasked with building content search functionality on the e-commerce site I'm currently building.

This post, Examining Examine, was invaluable, as was the Lucene index query tool Luke.

Got it all working in a couple of hours - job done!

Blocking UI while loading Ajax UpdatePanel

2012-06-28T12:04:00.000+01:00

To display a loading image and block the user interface while awaiting new content for an updatepanel you can put this JS code at the bottom of your master page. This uses the jquery.blockui.js plugin and will work site-wide:

Reverse Windows mouse scroll wheel

2012-06-18T14:14:00.001+01:00

You're so used to the mouse wheel direction in OSX Lion that you want to reverse your mouse wheel in windows, right? Just change every entry in your registry for 'flipflopwheel' to '1' instead of '0'. Simples.

Elmah and MVC - 404 and 403 access and permission errors

2012-06-13T21:33:00.000+01:00

I've said it before and I'll say it again - I love Elmah. But today I had trouble getting it to work with my latest MVC project which is due for launch. It took some googling to find out exactly what the problem was, and I had to piece together hints and tips from across the web. So, in short, take the latest Elmah.dll and drop it into your bin directory. Add this line to your RegisterRoutes method in Global.asax.cs:

routes.IgnoreRoute("elmah.axd")

Then you need to configure your webconfig file like my gist on github. Just look for all the 'Elmah' bits and do the same. Then visit http://yourserver/Elmah.axd and you'll see your error logs. Cool huh?

See 'EntityValidationErrors' property for more details

2012-06-11T10:44:00.001+01:00

This morning I was doing a db.SaveChanges() and getting the error:

See 'EntityValidationErrors' property for more details

I'd seen this umpteen times before and always resolved it quickly without having to to look at the EntityValidationErrors property. This morning however I couldn't work our where it was failing, and what field I needed to pay attention to, so I really did need to look into this property. After a bit of googling and good old Stack Overflow, I found this to be the easiest way. Simply put the following into your watch list:

((System.Data.Entity.Validation.DbEntityValidationException)$exception).EntityValidationErrors

Using hyphenated data attributes in MVC

2012-06-02T11:23:00.000+01:00

In .net MVC this doesn't work:

@Html.TextBox("name", null, new { @class = "input-xlarge", @data-input = "75"})

The hyphenated 'data-input' attribute causes the error "Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access." Well, as of MVC 3, you can actually use an underscore instead, like so:

@Html.TextBox("name", null, new { @class = "input-xlarge", @data_input = "75"})

And it'll handle it for you, converting it to a hyphen. It knows you want a hyphen rather than an underscore as underscores aren't valid in html attributes. Lucky huh?

asp.net MVC 403 error when deployed to IIS7.5

2012-05-02T13:55:00.000+01:00

Today I had to deploy my test .Net MVC app to Win Server 2008, IIS7.5, but I kept getting a 403 forbidden error when visiting the site. It turned out that despite setting my app pools to use .Net 4.0 you have to register .Net 4 with IIS. I'm not sure if I've understood it correctly or got my terminology correct, but this command-prompt solution I found on StackOverflow sure hit the spot:

cd \
cd Windows\Microsoft .NET\Framework\v4.xxx.xxx
aspnet_regiis -i

Big-up to Michael Shimmins

Twitter Bootstrap datepicker British format dd/mm/yyyy

2012-04-30T10:49:00.000+01:00

This morning I've been using Scott Storborg's Twitter Bootstrap datepicker (which I believe he has now pulled from Github), which looks and works beautifully, but wasn't in my required date format. I couldn't find much documentation on how this might be modified, but I figured out the following works:

Cross-browser safe javascript console logging

2012-04-27T08:56:00.000+01:00

You can keep this in your js code and it won't error on non-supporting browsers:

if(window.console.log&&window.console){window.console.log('This is safe!');}

Setting a P3P header in Rails - Session cookies in iframes in IE

2012-04-13T16:01:00.001+01:00

Friday 13th, and today I spent far too long battling with a problem that I should have recalled from a previous skirmish. Never shall I forget again!

Some versions of IE, on some versions of Windows, have stricter policies regarding 3rd party content served through an iframe. Confusingly, the same browser (IE8 for example) will behave differently on different Win versions: some will allow session cookies, and some won't. You know you've been nobbled when you see the evil eye at the bottom of the browser with a red sign on it.

The way round this is to send a P3P header with a compact privacy policy in your iframed content:

class ApplicationController < ActionController::Base
...  
  before_filter :set_p3p
...
  private
    # for IE session cookies thru iframe
    def set_p3p
      headers['P3P'] = 'CP="ALL DSP COR CURa ADMa DEVa OUR IND COM NAV"'
    end
end