Monday, July 11, 2016

Devise: redirect to specific pages after sign in using different models

As you should know, Devise can be applied in the same project to different models, but I couldn't find a simple way to redirect users after signing in, based on the kind of resource they were representing (e.g. let's say users and vendors).

After searching for long how to solve this issue and finding long and winding solutions, I found a way to solve it myself in a very simple way; as it is here it's really bare bones and possibly prone to bugs, but it does exactly what I wanted, so I thought other people might find it interesting.

So, let's say we are using Devise on the user and vendor models, and we generated our custom session controllers in user/sessions_controller.rb and vendor/sessions_controller.rb. The first thing that came to my mind was to find a way to customize the redirection from the controllers by overwriting some of the functions, but it turned out to be complicated and not working as expected.

As such I came out with a much simpler even though less elegant solution; that is overwriting the default function after_sign_in_path_for(resource) in the application controller, checking whether in my session I have an instance of one kind of resource or the other.

Here is the relevant code:

class ApplicationController < ActionController::Base
  
  [...]

  def after_sign_in_path_for(resource)
    if current_user
      "your_user_url"
    elsif current_vendor
      "your_vendor_url"
    end
  end
end

I hope this will help you as much as it helped me.

Tuesday, February 16, 2016

The old website challenge - 04 - Setting the viewport

It's renown that Google penalizes in its ranking the websites which are not mobile-friendly. As such, one of the priorities with modernizing my old website is to make it mobile friendly. The first step to do this is to implement the viewport property in the HTML code of the pages.

What's the viewport?

I'm not going to invent anything and I rely on W3schools' definition saying that
The viewport is the user's visible area of a web page.
Thus configuring the viewport means being in control of how our website adapts to the screen of any device instead of letting the user's device deciding how to adapt the website to the screen.

The default behavior of most mobile devices, without a properly configured viewport, is to set an arbitrary width (the most common is 980px), render the website as it would appear on a screen of that width, and zoom out until the view matches the device's screen width. Clever, but the results are not always predictable, and especially often not easy to navigate through.

As our objective is to have a responsive website, we want our viewport to always match the device width with no zooming in or out involved. The code to use in order to do that, adding it to the head section of the html document, is the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
By doing so we are telling the browser to always size the content of the website to the width of the screen. One downside of this technique is that we need to be very careful when using fixed-size elements, as they might not fit the viewport.

The first way to try to obviate this issue is to use for potentially wide elements (e.g. pictures) the attribute max-width instead of width; this tells the browser to use the given width only when the item fits the containing block; if not, the item will be proportionally scaled until it fits.

They say that With great power come great responsibilities... well, sure, now you are in control of how the website shows and it means that you need to be the one to adapt it to the different devices! As we will see in a next post, a very convenient way to do so is by using the CSS media queries.