Follow Along as I Stumble on the Path to Learning RoR

Latest

Using CloudFront with S3 and Paperclip

I wanted to cache my S3 images for my Rails app, so I changed my app to serve images using AWS CloudFront, a CDN.

Doing this was pretty simple.

(1) Set-up a AWS CloudFront instance and your S3 bucket as your origin

(2) Change your Paperclip settings to use the new CloudFront instance.  I did this in production.rb (make sure neither the url or s3_host_alias values are being written by Paperclip settings in your model):

config.paperclip_defaults = {
storage: :s3,
:url => “:s3_alias_url”,
:s3_host_alias => “your-cloud-front-url.cloudfront.net”,
:path => “:rails_env/:class/:attachment/:id/:style/:filename”,
:bucket => “your-bucket-name”,
s3_credentials: {
bucket: ENV[‘AWS_S3_BUCKET’],
access_key_id: ENV[‘AWS_ACCESS_KEY_ID’],
secret_access_key: ENV[‘AWS_SECRET_ACCESS_KEY’],
}
}

and that’s it!

Now, if you check the URL of your images, it should see that their source is prefaced with your CloudFront URL.

Photoshop Alternatives

While it’s not related to programming, editing images is an activity that I encounter when creating my front end.

Photoshop is great, but sometimes I find other software easier.

Lunapic’s Color Change is awesome if you have a color that you want to replace in an image.  All you have to do it select the color you want to use in the image and then click on the color (in the image) you want replaced.  Voila!

Pic Monkey makes it super easy to convert an image into another shape.  My typical use case is changing an image into a circle shape (cropping the corners).  To do this, you just click: Frames > Shape Cutouts > [circle icon].

If you’re looking for additional functionality, similar to Photoshop, I recommend Pixlr (use on the internet) or Fire Alpaca (download and use locally).

Twitter Bootstrap Growls for Rails Flash Messages

I’m using Bootstrap with Rails, but I wanted to replace their alerts with growl messages.  Luckily, I found this JS made by Robert McIntosh.  Bootstrap-notify makes it so easy to turn your flash messages into growl messages.

  1. Download the JS https://github.com/mouse0270/bootstrap-notify
  2. Unzip the JS and place bootstrap-notify.min.js in your assets/javascripts folder
  3. Add this line to application.js: //= require bootstrap-notify.min
  4. Download Animate.css and put in your assets/stylesheets folder (add it to application.css, if you aren’t adding the CSS tree)
  5. Create a flash partial (layouts/_flash.html.erb) – change the options to customize:

<% flash.each do |type, message| %>

$.notify({
// options
message: ”
},{
// settings
type: ”,
placement: {
align: “center”
},
animate: {
enter: ‘animated bounce’,
exit: ‘animated bounce’
}
});

<% end %>

6. Put this in application_helper.rb:

def bootstrap_class_for(flash_type)
case flash_type
when “success”
“success” # Green
when “error”
“danger” # Red
when “alert”
“warning” # Yellow
when “notice”
“info” # Blue
else
flash_type.to_s
end
end

7.  Render the partial by adding this to “layouts/application.html.erb”:

<%= render “layouts/flash” %>

You should be all set!

Sendgrid Settings

I tried following Sendgrid’s instructions, but they didn’t work.  I was getting this error:

Errno::ECONNREFUSED – Connection refused – connect(2) for “localhost” port 25

I fixed it by adding these settings:

config/environments/production.rb

config.action_mailer.raise_delivery_errors = true config.action_mailer.default_url_options = { :host => ‘sitename.com’ } config.action_mailer.perform_deliveries = true ActionMailer::Base.smtp_settings = { :address => ‘smtp.sendgrid.net’, :port => ‘587’, :authentication => :plain, :user_name => ENV[‘SENDGRID_USERNAME’], :password => ENV[‘SENDGRID_PASSWORD’], :domain => ‘heroku.com’ } ActionMailer::Base.delivery_method = :smtp

NoMethodError undefined method `[]’ for “image”:Sass::Script::Value::String

When upgrading my Rails app to 4 (from 3), I was getting the error:

NoMethodError undefined method `[]’ for “image”:Sass::Script::Value::String

Eventually I found out that the asset-path / asset-url methods changed to only accept one argument.

For example,

asset-url(‘profile.png’, image)

now should be:

asset-url(‘profile.png’)

In my particular case, this code was in some of my css files.

Make YouTube Embeds Responsive

I have a YouTube video that I embed on my website which I wanted to make responsive.  I found different ways to do it, but by far the easiest was Embed Responsively.  With this, you just paste in the video URL and it creates the code (including CSS) to make the video responsive.

Adding a Sitemap to Google for Sites on Heroku

I’m using the awesome Sitemap Generator gem for Rails  and also hosting my app on Heroku.  Since I’m updating my sitemap daily, and Heroku forces me to write to somewhere else, I need to create the sitemap nightly on Amazon Web Services (S3), instead.

The problem I ran into is that when I went to Google Webmaster Tools, it only allowed me to specify a url for the sitemap beginning with the name of my domain.  However, since the sitemap is hosted on AWS, it has an address that starts with an Amazon URL.

I found an answer here.

Basically what you need to do is to add a second property in Google Webmaster Tools for your S3 bucket.  I added a property to my directory with the sitemap (i.e. http://s3.amazonaws.com/mybucket/sitemaps/) and then verified that I owned the property by placing the Google supplied HTML file in the sitemaps folder on S3.

The last step is adding the URL to the sitemap in settings for the new [S3] property that was added to Google Webmaster Tools.