Unable to install Ruby Gems – SSL Cert Error

By | Rails, Ruby | No Comments

I recently got back into RoR development and found myself with an issue where I was unable to update any of my gems because of the following error:

Unable to download data from https://rubygems.org/ – SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed

A temporary workaround I found was to just edit the individual rails projects gemfile and change the source from https to http. Now this obviously should not be the only solution and it seems to be an insecure solution. So I dug around a bit more and found another workaround/solution.

I have a Windows machine and use Bitnami for my installation since it was the most hassle free way of installing Rails on my system. In order to fix this problem, all I needed to do was manually install a certificate into my ruby installation folder.

You can download the certificate AddTrustExternalCARoot-2048 or via this github link if you don’t trust me.

In most cases, Bitnami installs Ruby into the following location:

C:\BitNami\

You will need to navigate to the following directory and paste the certificate you just downloaded into this folder:

C:\BitNami\rubystack-2.0.0-9\ruby\lib\ruby\2.0.0\rubygems\ssl_certs
(Obviously the folder location might be slightly different depending on your version of ruby.)

Paste the file in there and you should now be able to install your gems! It’s that simple.

MixItUp, Rails and Turbolinks

By | JavaScript, Rails, Ruby | No Comments

While developing a new site, I noticed that the MixItUp plugin I was using was having issues with Turbolinks. As you might be aware of, jQuery and Turbolinks tend to have some issues when it comes to loading on pages that use turbolinks.

The first though I had was to use jquery.turbolinks which usually solved a majority of my jQuery + Turbolinks issue — however this wasn’t the case with MixItUp. After doing a bit of research, I came across an issue that was posted on the MixItUp github issues, which clearly outlined the resolution. In a nutshell, you’ll basically need to destroy the instance that was created from the first mixitup call, and recall it on a ‘page:load’.

<script>
$(function(){ // on first doc ready we instantiate mixitup
    $('#container').mixItUp(); // an instance now exists in the session memory
});
$(window).on('page:before-change', function(){ 
    $('#container').mixItUp('destroy'); // destroy the instance
});
$(window).on('page:load', function(){
    $('#container').mixItUp(); // We can now reinstantiate without being blocked
});
</script>

You can read more about it here.

Bitnami WordPress 503 Error Resolution

By | Wordpress | No Comments

As I was trying to update the company website today, I was getting bombarded with errors while I was trying to upload images. These errors eventually caused a number of 503 errors, to which I had no clue what the cause was. After digging around for several hours, it seems that the issue was related the to APC extension.

We’re running our server on Amazon Web Services (AWS) and were using the Bitnami WordPress AMI, which auto-enables this extension and thus in order to fix it temporarily, we had to disable it. In order to do so, all you need to do is the following:

  1. Browse to: /opt/bitnami/php/etc
  2. Using your favorite editor, edit the php.ini file.
  3. Search for the line that says extension=apc.so
  4. Add a semi-colon to the start of that line to comment it out ;extension=apc.so
  5. Restart Apache  - /opt/bitnami/ctlscript.sh restart apache2
  6. Restart PHP-FPM - /opt/bitnami/ctlscript.sh restart php-fpm

Once you’re done, your website should work normally again. Obviously we’d still want this extension to handle our cache, so feel free to use another until the bug is fixed.

Rails 4 and Mass Assignment – How to protect yourself!

By | Rails, Ruby | No Comments

Recently, we had a colleague of ours do some penetration testing on our website in order to see how safe our site was for our users. Needless to say, no website is foolproof! It was pointed out to us that the way we had structured our mass assignments could potentially lead to many things which could be severely harmful to our data and users.

When it comes to mass assignment, one of the common problems is that we forget to whitelist what a common user is allowed to edit. I was quite foolish in not realizing this, but it was ridiculously easy to hack our website by just editing the input name and id’s to suit a hackers needs. Here is how our mass-assignments were handled before.

models/posts.rb

attr_accessible :title, :summary, :content, :status, :user_id

controllers/posts_controller.rb

    def post_params
        params.require(:post).permit(:title, :summary, :content, :status, :user_id)
    end

Now the problem with this was that we had allowed ANY users to update ANY of these fields as they saw fit. Just a little bit of editing in the forms could potentially mean that they were able to update the status of the post or even the user_id, and there was nothing stopping them! This is where whitelisting in Rails 4 comes into play. In order to tell rails which params a normal user is allowed to edit, all you would need to do is the following:

    def post_params
      if current_user && current_user.admin?
        params.require(:post).permit(:title, :summary, :content, :status, :user_id)
      else
        params.require(:post).permit(:title, :summary, :content)
      end
    end

What this does is, it lets Rails know that unless the user is logged in and has admin rights, only allow them to update the title, summary and content — anything else is ignored. It is as simple as that. Although this seems quite simple, for many newcomers to Rails might find this information a little bit difficult to find.

Friendly URL with Categories and Category Posts for Rails!

By | Rails, Ruby | No Comments

So one of the items I was working on today was dealing with SEO friendly URL’s and because of the way Rails work, you always end up with the controller name in the URL as well. This can sometimes work, but not everyone wants it!

The other issue that I had to also consider was that my posts weren’t using the ID’s like most sites use – it used a slug from the FriendlyId gem. The structure of the site was quite simple; you have your categories and each of the categories had many posts. So now I needed a way to have the posts listed in a pretty way.

After a bit of research, it turned out to be a simple two part fix.

The Code

config/routes.rb

  resources :categories, :path => '/' do
    resources :posts, :path => '/'
  end

  resources :categories, :posts

app/views/categories/show.html.erb

    <%= link_to post.title, category_post_path(post.category.slug, post.slug) %>

The Breakdown

The :path key replaces your controller name with whatever you set it to. If I had used :path => ‘/foo’, my controller name in the URL would be replaced with foo instead.

Because each category had many posts, in order to have the category show up in the URL as well, I needed show that posts were related to the categories hence line 1-3. And because I have replaced the :path with just a forward slash, I have removed the “posts” controller name.

Now because I was using FriendlyId, I had to change the link a little as you can see above in the second set of code. Don’t forget that you’ll need to run Rake Routes to get the new path based on the category-post combination. When all is done, you’ll have a URL as such:

http://example.com/category_slug/post_slug

I created my first Gem – Imgur Ruby!

By | Rails, Ruby | No Comments

So with more development of the new Junior Youth + Us site, comes more new features that we needed. One of the things we thought about while developing the site previously was that we did not want to host all the images that were sent out way – instead we wanted to use another source. Of course there is AWS and all the CDN networks — but those cost money!

Instead we looked into the Imgur API which allowed us to upload images by just providing an API Key. I had already done this on PHP and unfortunately, there was no real “curl” function on Ruby, so I had to find an alternative method to upload images to Imgur. I went through a number of gems, however none of them seemed to work perfectly — that or I was just too stupid to figure out what I needed to do. Thus I decided to create my own gem for image uploads!

So after a few hours of work, I finally created Imgur-Ruby – my first attempt at a Ruby gem that is available to all. I’m actually quite surprised it works and how simple it actually is to use.

Here is how you set it up!

# Add your Imgur API Key from http://api.imgur.com
@image = Imgurruby::Imgur.new('YOUR_API_KEY')

# Uses the uploaded image file
@image.upload(params[:file])

# The to access the URL
# If there is an error, the error message will be displayed instead
@image.url

It is that simple! If you would like to contribute to the Gem, please feel free to fork my repo here:

GitHub Repo – Imgur Ruby

Bootstrap Wysihtml5 for Rails with YouTube & Imgur Support

By | Rails, Ruby | No Comments

I have begun development on Junior Youth + Us again recently and decided to convert the whole website from PHP to Ruby on Rails. Although we were moving to a different platform, we didn’t think that the tools and how the site worked was logically flawed – it was more me wanting to use Ruby instead of PHP to learn more!

So one of the items I have worked over for the last 24 hours was the text editor for our contributors. Now because of the introduction to Bootstrap 3, the old support for embedding YouTube videos wasn’t working as well as it should have; you would think it would be a simple copy and paste job! Nevertheless, I dove into some JavaScript (or what I could understand it was doing anyway) and decided to make YouTube functionality work for the Bootstrap 3 version of the Bootstrap Wysihtml5 for Rails.

Bootstrap Wysihtml5 for Rails was developed by Nerian, however because he wants to keep the rails version the same as the original Bootstrap Wysihtml5, it might be some time before someone actually integrates YouTube embedding into the original. So with a little elbow grease, I was able to get YouTube functional on my version of Bootstrap Wysihtml5 for Rails.

I’ll be the first to admit it was one hell of a hack job since I’m not that crazy about JavaScript, but hey it works!

Before you go installing this, bare in mind that I only made the changes for the b3/bootstrap 3 version! If you would like to give it a go, you can fork it from my repo here:

GitHub Repo – Bootstrap Wysihtml5 for Rails with YouTube & Imgur Support

GitHub Repo – Bootstrap Wysihtml5 for Rails with YouTube Support Only

Please feel free to add any changes you think is necessary!

Update WordPress URL’s on Migration

By | Wordpress | No Comments

I have been working on a number of projects recently where I was tasked with creating a developer environment, that will eventually become the main website.

One of the major issues I have had while migrating from a development site to a production site was that many of the posts/pages used hard coded URLs instead of static URLs. Now you could go through each individual posts and update the URLs, but that would be quite a tedious task. If you were an advanced user, you could just go into the database and run a script to easily change all the locations where a specific URL is found.

However there is an easy method that is readily available as a WordPress plugin: Velvet Blues Update URLs

After installing the plugin, go to Tools > Update URLs

This area is really self-explanatory. In the first input, place the URL you are looking to replace, and in the second input area, place what you want to replace it with! You are then able to select in which sections would you like the URL replacer to take place.

Ticking Checkbox When Clicking on Row

By | JavaScript | No Comments

When dealing with tables, majority of them will have a checkbox in the first column. In order to make it a little bit more user friendly, it is always nice to be able to tick the checkbox no matter where you click on that row – and we can do that very easily with some JavaScript! It is as simple as that.

The JavaScript

$(document).ready(function() {
  $('.dataTable tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

It is as simple as that! The second line basically triggers a click when a TR (row) element under the table class “dataTable” is clicked.

Add “Read-More” Toggle Using jQuery

By | JavaScript | No Comments

A friend of mine was editing her Shopify files to try and add a “View Product Details” button, that would toggle the specific products description. She asked for my help on how this could be achieved and I decided to share it for everyone to view!

The HTML

<div id="desc">
    <p class="clk">View Product Details</p>
    <div class="prod-details">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis.</span>
    </div>
</div>
<div id="desc">
    <p class="clk">View Product Details</p>
    <div class="prod-details">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis.</span>
    </div>
</div>

The JavaScript

$(function() {
    $('.prod-details').hide();
    $('.clk').click(function() {
      $(this).siblings('.prod-details').toggle();
    });
});

Now whenever you click on “View Product Details”, it will toggle its siblings with the class “prod-details”. A simple read-more toggle!