Follow Along as I Stumble on the Path to Learning RoR

Latest

Seeding DB with Paperclip Images with CSV

I needed to seed my app, hosted on Heroku, with new users.  Since I wanted to created a lot of the them, I wanted to CSV.  My users have avatars, so I wanted to upload those for the users as well.

Here’s how I did it:

1. I stored the original images I wanted to use for the avatars on AWS S3 (make sure that they are set with public permission to read them.

2. I created a CSV that had columns (in this order) for the users: username, email, password, password_confirmation, avatar.  In the avatar field, I put the URL of the S3 image.  I named this CSV file “user_data” and put it in the DB directory.

3. Using the answer to this Stack Overflow question, I created a file (I named user_seed.rake) in lib/tasks.  The code in the file I used was:

require ‘csv’

namespace :csv do

desc “Import CSV Data”
task :import_stuff => :environment do

csv_file_path = ‘db/user_data.csv’

CSV.foreach(csv_file_path) do |row|
User.create!({
:username => row[0],
:email => row[1],
:password => row[2],
:password_confirmation => row[3],
:avatar => URI.parse(row[4])
})
puts “Row added!”
end
end

end

4.  Run rake csv:import_stuff

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.