THE BITESITE BLOG


Google Docs Viewer with Amazon S3 Private Documents and Presigned URLs

So recently one of our developers discovered an awesome service that Google Docs provides called the Google Docs Viewer. It's super powerful and super easy to use. Basically, it's a service that allows you to pass a URL of a document to this service, and it will render a preview of the document that's usable in the DOM. This is amazing for providing previews of common documents like PDF, DOCs and more. We saw Trello use it so we thought it's gotta be a good solution.

Here's an example:

<iframe src='https://docs.google.com/viewer?url=http://www.bitesite.ca/Signing%20up%20for%20Amazon%20S3.pdf&embedded=true'></iframe>

You could slap that iFrame into your HTML and boom, you have a preview of a PDF document embedded in your website.

However, the app that we were building was using private, protected documents hosted on Amazon S3. So to pass a URL to the Google Docs Viewer, we had to get a presigned URL. So it would look something like this:

<iframe src='https://docs.google.com/viewer?url=AMAZON_S3_PRESIGNED_URL&embedded=true'></iframe>

As soon as we did this, we kept getting a "No Preview Available" error from Google Docs. After trying lots of solutions, it turns out the error had to do with the fact that we were passing a URL with Query String params as a query string param to another URL. That is, the Amazon S3 Presigned URL contains query string parameters, so it contains a "?" and "&" which confuses the outer URL.

So long story short, you have to Encode the S3 Presigned URL before passing it to the Google Doc Viewer.

If you're using Presigned URLs, my guess is that you're dynamically setting the URL. We do it with Javascript, so our code looks something like this:

var encodedUrl = encodeURIComponent(amazon_presigned_url);
var iFrameUrl = 'https://docs.google.com/viewer?url=' + encodedUrl + '&embedded=true';

We did run into an issue where we tried encodeURI instead of encodeURIComponent, but that was just our misunderstanding of those methods. If you're doing server-side encoding, make sure you're it's correctly removing "/", "?", and "&".

Alright, that's it for now. Hopefully this helps out some peeps.


View full post
React Native fetch only working with localhost and NOT IP addresses

Alright, this will be a quick one. So I was using 'fetch' to make a web request in my React Native app. My server was a Rails app. When I used 'localhost' in my request, the request would work perfectly, but if I used my IP address, the network request would fail.

fetch('localhost:3000')   /* this would work fine */
fetch('192.168.1.41:3000')    /* this would not work */

I double-checked to make sure my Rails server wasn't the issue and ensured it was bound to 0.0.0.0

rails s -b 0.0.0.0

So that was good. In fact, if I went into my iOS simulator and launched Safari, Safari could hit the localhost:3000 and IP Address:3000 no problem. So my iOS Simulator could hit my Rails app, but not my React Native app using the IP Address. Again, everything worked fine using localhost.

Turns out this is an iOS 9 issue where by default, HTTP requests are blocked (vs HTTPS requests). So to allow this you need to enable "Allow Arbitrary Loads" in your Info.plist in your XCode project.

For more details, check out this link https://facebook.github.io/react-native/docs/running-on-device-ios.html#app-transport-security


View full post
Creating 3D line objects using After Effects and C4D lite

Creating true 3D objects inside After Effects became possible with the addition of the Cinema 4D Lite application. C4D Lite was added to the 2014.1 release of After Effects CC. With C4D lite being shipped along with AE, users who have never even considered working with a 3D program like C4D now have access to it. It's right there at your fingertips... you gotta check it out!

In one of BiteSite's recent projects, I was able to take advantage of the 3D capabilities C4D offers. In this post we'll focus on a unique look you can create inside AE with 3D objects from C4D. It's so simple and quick you may have already thought this up on your own! It's something that not only adds a new look, but may also add more functionality to your project. Check it out...

Apply these 2 effects (in this order) to the 3D layer inside AE:

  1. Find Edges --> for the look we're after, click the 'invert' option
  2. Unmult --> this is not an effect that comes with AE. It's free though and you can download it here: http://www.redgiant.com/downloads/legacy-versions/

What do these effects do?

  1. Find Edges --> It finds the edges... ;) Perhaps a little self-explanatory, perhaps not! Find edges looks at any shape, image, or object (whatever type of layer you apply it to) and recognizes all of the 'edges' in that layer. Edges are any part of the image where there is a significant transition. It then turns to white everything in the layer that is not an 'edge'. Checking off 'invert' on the effect turns everything to black rather than white.
  2. Unmult --> makes 100% black areas of an image completely transparent, and leaves 100% white areas completely opaque. Everything in between adjusts accordingly. Unmult is effectively creating an alpha channel for an image that doesn't actually have one. Awesome!

Apply these two effects, and you now have a 3D line object! You can choose to have it transparent or opaque (just toggle on/off the unmult effect).

No effects added:

Find Edges:

Find edges + Unmult:

This look can be great if, -- you want that sketched art look (try adding the 'turbulent displace' effect to further this look), -- you just want fresh and simple lines instead of heavy 3D objects, -- or even just for the added functionality you get by having your 3D objects transparent!

As well, try duplicating your 3D object layer and keep it placed directly above it's duplicate in the composition panel. Have one layer with the effects applied and one without!

Try it out! If you're reading this and you use this method, leave a comment below with a link to your video We'd love to see your work. Cheers :)

Tim


View full post
Careful with Bang Operators in your Rails Models and ActiveRecord Callbacks (Frozen String error)

Alright here's a weird one that would have been easy to solve if I thought more about how Ruby works (and how it's not like Java:)).

So here was the issue, we were looping through a set of keys on a hash. Now, you should know that the keys on this hash were strings. So we had something like this

my_hash = {"color" => "blue", "size" => "medium" }

Now, on top of that we had a model that we'll call Person that had a "name" attribute and looked something like this:

class Person < ActiveRecord::Base
  before_validation upcase_name

  private
    def upcase_name
      name.upcase!
    end
end

Ok, for those who don't know, the bang version of upcase, upcase!, uppercases a string in place - it modifies the actual string itself.

So here is the setup, we were looping through keys of the hash:

my_hash.keys.each do |name|
  ...
end

Now, first thing to know is that you CAN'T modify a key in a hash. Anytime you try to modify the keys of a hash, you get an error. So something like this would produce an error:

my_hash.keys.each do |name|
  name.upcase!    # produces frozen string error
end

That all makes sense.

What we were surprised to see was that the following code also produces a similar error:

my_hash.keys.each do |name|
  Person.create(name: name)    # produces frozen string error
end

What's going on here? Well it turns out that the "before_validation" callback tries to upcase the name. But unlike languages like Java, the string that is passed in is the exact same object that exists in the "my_hash.keys" array. (I'm purposely avoiding by-value and by-reference wording here, because I feel it can lead to confusion)

So the hash holds a frozen lock on that string, and then when that string gets passed into the Person constructor, and the callback tries to modify it - you get the frozen string error.

How do you fix it? Change your callback:

class Person < ActiveRecord::Base
  before_validation upcase_name

  private
    def upcase_name
      name = name.upcase
    end
end

This version doesn't modify the original string but rather produces a new string.

Special thanks to d3chapma for helping me figure this one out. Check out his Gist here for more info.

Hope this helps out some peeps!


View full post
React Native Env 'cannot read property get of undefined'

Alright, in my continuing effort to use React Native, I keep running into little issues with all the libraries I use. Usually it's due to a setup issue and my lack of understanding of the true under-workings of what I'm doing seems to lead to these issues.

Today, it's with react-native-env. When setting this library up, I kept running into an issue that would say 'cannot read property get of undefined' or 'cannot read property getAll of undefined'.

When I started debugging, it seemed the EnvironmentManager object was present, so what was the issue.

If you look at your

node_modules\react-native-env\index.js

you'll see that the get and getAll methods are delegating it to some native code:

RNEnvironmentManagerIOS.get
RNEnvironmentManagerIOS.getAll

So it's really just an issue of not reading the instructions properly. You need to add the RNEnvironmentManagerIOS.h and .m files to your project.

The only thing I found a little misleading is you shouldn't add the folder - rather add the individual files.

So in XCode, (I have a group called 'Libraries' under my project, but I think you can add it anywhere), right-click and "Add files to ", and make sure to select the individual RNEnvironmentManagerIOS.m and RNEnvironmentManagerIOS.h files.

Hope that helps out some peeps!


View full post
React Native Vector Icons getImageForFont issue

So recently, I've been diving into React Native and running into all these little quirks. Luckily, it seems to be getting better day by day in terms of setup. I can say this though, as a Web Developer, this is my most successful attempt and writing mobile apps (after trying Objective-C, then Swift).

Today, I thought I'd post an small issue I ran into in trying to get react-native-vector-icons to work. The error message that would pop up on screen was

getImageForFont issue

It was a pretty simple fix. In Xcode, in your project, find your Info.plist. Then check the "Fonts provided by application" (if it's not there, you'll have to add it). Once added, make sure all your fonts are added to this property. So add Entypo.ttf, FontAwesome.ttf etc.

After that, it should work.

Hope this helps out some peeps.


View full post
Failing RSpec Tests when using RABL for JSON Responses

After about 5 years of doing Ruby on Rails development, there is one aspect that for the longest time never seemed to sit well with me: TDD. It wasn't that I didn't understand the benefits, and it wasn't that I didn't believe in it, but unlike many things Rails, there wasn't enough concrete motivation to do it. Over the past few months I finally started to get into it and I'll write all about my experiences in another post, but for now, I wanted to let you guys know about a specific problem I was having with TDD'ing an API I built.

I was building an API for a app using Ruby on Rails and following the http://apionrails.icalialabs.com/.

To render my JSON responses, I almost always use RABL now. I tried activemodelserializers when I was experimenting with Ember, but I quickly switched back to RABL.

Anyway, I was writing my tests I was having issues testing my JSON response. My typically test would look something like this:

it "renders a response" do create(:route) get :index, format: :json response_object = JSON.parse(response.body) expect(response_object.size).to eq(1) end

The issue is that no matter what I did, it seemed that my tests would fail. Upon further inspection, it looked like the response.body was empty. I was getting really frustrated so what I did was I abandoned my TDD and just tried it in the browser (well, more accurately in Postman). To my surprise, it was working.

So why were my tests failing and why was the response.body empty?

It all has to do with the fact that I was using RABL for the JSON responses. Because RABL uses Rails view rendering and by default Controller specs don't render views - the response.body was empty.

So the solution was as simple as adding

render_views

to the top of my specs so I had the followiing:

require 'spec_helper' describe Api::V1::MyController, type: :controller do render_views ... end

Alright, that's it for now. Hopefully this helps some peeps.


View full post
Rails 4, Rspec not letting go of Gemfile.lock, can't Git Pull, can't checkout

Alright, this is going to be a super quick post but thought I'd let people know as this has come up a couple of times.

The environment is

  • Rails 4 or above
  • Git
  • Rspec for testing

So here's the issue. Every now and then, I try to do a Git Pull (say after a pull request has been merged) and Git won't let me because it seems my Gemfile.lock has some local changes that would be overwritten.

Easy enough, right? Just stash, or discard the changes. So I tried running 'git stash', or 'git checkout Gemfile.lock'. But then right after, I do a 'git status', and low and behold, the Gemfile.lock still has local changes. What the hell? Why isn't Git letting me stash the changes.

Well, it turns out, Git is letting me stash the changes, but very shortly after, something is changing the Gemfile.lock file right away. So right after I stash my changes, or discard, something comes right back and makes the changes again.

The culprit? Rpsec- well more specifically spring. So after running rspec, spring continues to run. As far as I understand, spring keeps your Rails environment running so you don't have to reload it on every rspec run (as far as I know, I could be way off). But the short of it is, the first time your run rspec, it fires up spring, and spring holds onto your Gemfile.lock.

So after you discard your changes, spring will apply the changes right again on Gemfile.lock (and perhaps other files).

How to solve it?

Simply stop spring by running "spring stop". At that point, you should have no issue discarding your changes using Git.

Worried about spring being stopped? Don't worry, it starts up again the next time you run rspec.

Alright, that's it for now. Hope that helps some peeps!


View full post
Ruby on Rails ActionMailer Configuration for Namecheap Private E-mail

Ever try setting up Ruby on Rails to use Namecheap's private e-mail to no avail. Me too. Finally figured out some settings that made things work.

First off, for your smtp settings:

config.action_mailer.delivery_method = :smtp config.action_mailer.smtp_settings = { :address => 'mail.privateemail.com', :port => 26, :user_name => 'username@domain.com, :password => 'yourpassword, :authentication => :plain, :enable_starttls_auto => true }

Of course, you can throw everything into environment variables.

config.action_mailer.delivery_method = :smtp config.action_mailer.smtp_settings = { :address => ENV['SMTP_SERVER'], :port => ENV['SMTP_PORT'], :user_name => ENV['SMTP_USER'], :password => ENV['SMTP_PASSWORD'], :authentication => :plain, :enable_starttls_auto => true }

But the key thing here, or at least the thing that's unusual is PORT 26!!! It's right there in Namecheap's documentation but they say if you're going to use starttls - you must use port 26. That was the main thing that I seemed to stumble on. The other settings are very similar to say GMail settings.

Also, I did set my "from" address in my Mailer class to match my domain which may or may not have helped - I was too lazy to do a controlled experiment on that.

Anyway, hope that helps some peeps.


View full post
After Effects Editing Mask Path (moving individual points)

Alright, this was frustrating the hell out of me - especially considering most posts and forum responses had the right idea but were missing one key element.

The issue is in Adobe After Effects and Masks.

Here's the setup

  • You have some layer (shape, picture, footage, whatever)
  • You add a layer Mask
  • You edit the Mask over time by setting keyframes on the Mask Path property

The issue

Anytime you try to move a single point on the Mask Path - the entire mask path moves - regardless of if you have the Pen Tool or Selection Tool selected

So yes - most posts ands forum responses I've seen talk about - "Make sure you have the Pen Tool" selected - so that way you're in path editing mode and then you should be able to move the individual points. I tried ad nausea and I couldn't get this to work.

Solution

  • It all had to do with what was selected in the timeline. I had the Mask selected (that is, the Mask property that shows up when you twirl down the layer itself) - which is wrong. This was the issue.
  • Once I selected the layer itself and NOT the mask, I could then select the Pen Tool and edit the points individually. Kind of strange - but yeah - select the Layer and not its mask if you want to edit the Mask points individually. And yes - use the Pen Tool.

(note this is in Adobe After Effects CS6 - not sure about other versions).

Hope this helps out some peeps.


View full post