Category: Web Development

Breaking the Internet

Amazon S3 Images Expiring – CarrierWave (Ruby on Rails)

Hey everyone,

After working with CarrierWave for a couple of days a few of my images started disappearing. It took a while to work out what was causing it, but thankfully the fix is pretty easy:


#Set fog_public in your initialiser to true
config.fog_public = false

#Should be
config.fog_public = true

Alternatively, if you’d like them to keep expiring but want to adjust their availability you can use the following config option:

#Number of seconds
config.fog_authenticated_url_expiration = 60000

There’s a bit of info in the following StackOverflow post: http://stackoverflow.com/a/13757841/522859

Retrieving Thumbnail from an Animated Gif – CarrierWave

Hey everyone,

I’ve been mucking around with CarrierWave today and ran into a bit of an issue. When creating a thumbnail from an animated gif the thumbnail was also animated. Unfortunately this led to some of my image-heavy pages hanging for a bit.

This StackOverflow post offers the following solution:


#Add this method in your uploader
def remove_animation
  manipulate! do |img, index|
    index == 0 ? img : nil
  end
end


#Adjust your thumbnail process so that it now includes a call to the new function
version :thumb do
  process :remove_animation
  process :resize_to_limit => [75, 75]
  process :convert => 'jpg'
end

Excon::Errors::SocketError Broken pipe (Errno::EPIPE) – Ruby on Rails

Hey everyone,

I was having a bit of trouble with CarrierWave on Amazon S3 today. When attempting to upload files that were larger than ~150kb I received one of the following errors (depending on config):

getaddrinfo: Name or service not known carrierwave
Excon::Errors::SocketError in PhotosController#create
Broken pipe (Errno::EPIPE)

 

Despite the vague error, the solution was fairly simple. The region configured in my initialiser was different to the one my bucket was created in.

In order to find out which region you need, logon to your AWS console and browse to an uploaded image. Check the endpoint URL (properties > static website hosting) and simply copy the region. For examples:

Endpoint: testbucket123321.s3-website-us-west-2.amazonaws.com
Region: us-west-2

A couple of final tips if this doesn’t work for you:

  • You need the region codes, not the name. For instance, “Oregon” won’t work
  • Don’t forget to restart your app after making changes to the initialiser

    •  

    Remote JSON Source – Ruby on Rails

    Hey everyone,

    Just a quick post on how to retrieve a remote JSON source so I don’t forget. 

    require 'open-uri'
require 'json'

#Retrieve source (controller/model)
@results = JSON.parse(open("http://www.myjsonsource.com/jsonfeed_num1").read)


#In view

    That’s all there is to it, let me know if you have any problems!

    Simple Staging/Test Environment with Heroku – Ruby on Rails

    Hey everyone,

    This is just a quick guide on how to create a test/staging environment with Heroku.

    -- Create staging environment
heroku create --remote staging

-- Push to staging app
heroku push staging master

-- Run rake db:migrate on staging app
heroku run rake db:migrate --remote staging

-- Add pgbackups add ons
heroku addons:add pgbackups --remote staging
heroku addons:add pgbackups --remote heroku

-- Create backup of production data
heroku pgbackups:capture --remote heroku

-- Copy to staging environemnt
heroku pgbackups:restore DATABASE `heroku pgbackups:url --remote heroku` --remote staging

-- Create a new config file called staging.rb (/config/environments/staging.rb)

-- Add environment variables
heroku config:add RACK_EVN=staging RAILS_ENV=staging --remote staging

-- Ready to go !

    For those of you using git branches etc, the following may come in handy as well:

    -- Create local development branch
git branch development

-- Switch to dev branch
git checkout development

-- Make your changes and commit them
git init
git add .
git commit -m "My changes"

-- Push to staging environment (local development branch to staging environment master branch)
git push staging development:master

    If you run into any trouble, I found the following links pretty helpful:

    http://stackoverflow.com/a/6931462/522859
    https://devcenter.heroku.com/articles/pgbackups#transfer
    https://devcenter.heroku.com/articles/multiple-environments

    Let me know if you’ve got anything to add.

    Assets:Precompile (Rake Aborted) – Heroku

    Hey everyone,

    I ran into the following error over the weekend while trying to push to heroku:

    Running: rake assets:precompile
    rake aborted!
    could not connect to server: Connection refused
    Is the server running on host “127.0.0.1” and accepting
    TCP/IP connections on port 5432?

    This stackoverflow post helped to solve the issue. All you need to do is add the following line to your application.rb file:

    #Applicication.rb
config.assets.initialize_on_precompile = false

    Let me know if you have any problems.

    Browser Out of Date – JavaScript Plugin

    Hey everyone,

    I’m about to launch a new site and was looking into a quick and easy way to advise users with older browsers to upgrade. A bit of a Google revealed Browser-Update.org. They have a simple script that you add to your site and it will not only inform them that their browser is outdated, but also provide them with instructions on how to replace it.

    All you’ve got to do is place their script on your site somewhere:

     
var $buoop = {} 
$buoop.ol = window.onload; 
window.onload=function(){ 
 try {if ($buoop.ol) $buoop.ol();}catch (e) {} 
 var e = document.createElement("script"); 
 e.setAttribute("type", "text/javascript"); 
 e.setAttribute("src", "http://browser-update.org/update.js"); 
 document.body.appendChild(e); 
}

    You can customise the versions by visiting their site and using the script generator. Once you’ve got it setup, users with older browsers will see a bar at the top of their page:

    Browser-Update.org plugin
    Browser-Update.org plugin

    Let me know if you come across any other useful plugins.

    Cheers,
    Chris

    Dropdown Button – Twitter Bootstrap

    Hey everyone,

    Just a quick post on how to create a dropdown button using Twitter Bootstrap. It’s pretty straight forward, once you’ve included all your CSS etc just add the following code:

    Once you save that you should see something similar to the image below:

    Twitter Bootstrap Dropdown Button
    A standard twitter bootstrap dropdown button.

    Change list item text alignment

    To change the text alignment of this list items, all you need to do is adjust the text-align style assigned to the wrapper div.

    Change dropdown button color

    Once again, this is fairly simple, all you need to do is switch the button type. For instance, if you were after an orange button, you can swap btn-success with btn-warning. A list of the default styles is available on the Twitter Bootstrap site.

    Let me know if you have any issues.

    Change Current Day Color – jQuery FullCalendar

    Hey everyone,

    Just a quick post on how to change a few of the styles in FullCalendar. All you need to do is add these after the default styles are loaded:

    Current Day Background Color

    .fc-today{
   background-color: blue;
}

    Change Calendar Background Color

    #calendar .fc-content{
	background-color: #FFFFFF;
	font-size: 80%;
}

    Add Box Shadow to Events

    #calendar .fc-event{
	box-shadow: 2px 2px 2px #706868;
}

    Style Times and Days – Add border radius to headings

    #calendar .fc-agenda-axis, #calendar .fc-widget-header{
	background-color: #C2E6FF;
	border-color: #AED0EA;
	font-weight: normal;
	padding: 3px;
	border-radius: 3px;
}