THE BITESITE BLOG
Stripeinvalidtransit

Stripe.js Bank Accounts: Invalid transit number. The number should be in the format xxxxx-yyy or xxxxxyyy.

software coding

This is going to be a quick one. I was working on a client project that uses Stripe Connect. We were using Stripe.js V2 to generate tokens for bank accounts. However, everytime I tried to use the test account numbers, I kept getting this error:

Invalid transit number. The number should be in the format xxxxx-yyy or xxxxxyyy.

After looking around a bit, I realized it was a really stupid error. I was trying to test a Canadian account, but when I went to look at the test accounts that Stripe provides, "United States" was selected. So lesson of the day, when testing Stripe Test Bank Accounts, make sure you select the proper country.

Hopefully that helps out some peeps.

Caseyli
Casey Li
CEO & Founder, BiteSite
Swiftputpatch

Swift PUT and PATCH requests not sending httpBody

software coding

Hey everyone, this will be a quick one.

I'm finally coding a Swift iOS app to interface with my Rails app and I'm now at the point where I'm starting to implement PUT or PATCH requests for my record updates.

For my requests, I have a basic APIController that runs this code to build the request:

urlRequest = URLRequest(url: url) urlRequest.httpMethod = "PATCH" urlRequest.httpBody = bodyString.data(using: .utf8)

This method generally worked perfectly fine for my POST requests, but for some reason PUT and PATCH requests were not sending the httpBody.

Turns out, for PUT and PATCH you need to be explicit about the content type. Since I was using form urlEncoded data (so something that looks like "key=value&key=value&key=value" I just had to add this line:

urlRequest.addValue("application/x-www-form-urlencoded", forHTTPHeaderField: "Content-Type")

And then everything worked.

So final code looked like this:

urlRequest = URLRequest(url: url) urlRequest.httpMethod = "PATCH" urlRequest.addValue("application/x-www-form-urlencoded", forHTTPHeaderField: "Content-Type") urlRequest.httpBody = bodyString.data(using: .utf8)

Hope that helps out some peeps!

Caseyli
Casey Li
CEO & Founder, BiteSite
Amazons3googledocspreview

Google Docs Viewer with Amazon S3 Private Documents and Presigned URLs

software coding

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.

Caseyli
Casey Li
CEO & Founder, BiteSite
Reactnativeallwoarbitraryloads

React Native fetch only working with localhost and NOT IP addresses

software coding

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

Caseyli
Casey Li
CEO & Founder, BiteSite
3dwireframesaftereffects

Creating 3D line objects using After Effects and C4D lite

after effects film motion graphics

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

Timclark
Tim Clark
Filmmaker, BiteSite