Less(er) is more

[theopolis-blog]

SimpleCart.JS Empty Cart Problem

I learned something new this evening, HTML5 LocalStorage persists it's information based on 3 things: scheme + hostname + port. This means that something stored at http://google.com will not be accessible by something at https://google.com.

I recently decided to use SimpleCartJS on a website for a simple shopping cart solution. We ran into a problem. If people added something to their cart, and then went to the checkout page, their cart was now empty. This is because the page on which we were adding the item to the cart, was unsecure (http) and the checkout page was secure (https). So, that shopping cart information wasn't available to the checkout page.

To solve the problem, we simply made the entire site secure. So it forces SSL on the user. Done!

[theopolis-blog]

Upgrading to Mountain Lion as a Developer

Yesterday I upgraded to Mountain Lion, and it seemed like nothing wanted to work right. So, I wanted to share my findings and help others along their journey. The primary 2 things I had to fix were Git was no longer installed and my RMagick gem was barfing.

Reinstalling Git

 i isasdfIf after you have updated, you getting the following message in your Terminal:

-bash: git: command not found

This is a simple fix. All you need to do is install the Command Line Tools for Xcode. I'm not going to walk you through that, because there are good ones all over the internet. Like this one.

After that is done, restart your terminal, and whammy!!

Fixing RMagick

This one is a little tricker, and my process may not fix your problem. But, here is what I did! Also, here is a little bit about my environment, that you might not be doing.

I'm using rbenv to wrangle my ruby versions.

I'm using homebrew for package management

Ok, so the first thing you need to do, is remove rmagick from your projects gemfile, and run bundle install to update. Now, this does not remove the actual gem. So I had to remove the gem 2 different ways. The first:

gem uninstall rmagick

This removed the rmagick gem on my machine, but not from rbenv! To remove it from rbenv, you have to manually go and delete it. For me, the path to that folder was ~/.rbenv/versions/1.9.2-p290/lib/ruby/gems/1.9.1/gems. Inside of there, I deleted the rmgaick-version-number folders.

Now, you need to uninstall/reinstall imagemagick, a dependency of rmagick. If you are like me, you will run into problems with this. Hooray! The problem is that homebrew requires that the usr/local folder to be owned by the current user. For some reason, Mountain Lion set the permissions to this folder to be root (and all of it subfolders). Why not just use sudo you ask? Well, homebrew does not allow that. Here is what happens if you try and sudo install imagemagick, so it has permissions to use the /usr/local folder:

Error: Cowardly refusing to `sudo brew install' You can use brew with sudo, but only if the brew executable is owned by root. However, this is both not recommended and completely unsupported so do so at your own risk.

PWN3D!! Yeah, homebrew ain't got time for dat! So, in order to get around this, you need to change the permissions of the /usr/local folder. Here is how to do that.

sudo chown -R your_username:admin /usr/local

Boom. Now you own the folder and everything beneath it. But we aren't out of the woods yet. Go ahead and install imagemagick with homebrew. I ran into one more problem, and this stack overflow solution helped me out big time. So do what it says!

Finishing Touches

Now, reinstall the rmagick gem, add it to your gemfile, run bundle install, and hold onto your butts! This fixed everything for me, and hopefully it can help you too.

[theopolis-blog]

Add to a Previous Git Commit

This happens to me often when I'm refactoring. I'm going through, wiping out unnecessary files, cleaning up code, and just conquering the world. After it's all done, I'm always pleased to put a bow on it.

*cracks knuckles*

$ git add . $ git commit -am "yeah, you're welcome, I'm awesome."

Well, it always happens, I'm all done, and then I remember, "I forgot to remove pointless_config_thing.rb".

So I go delete that file, and now I feel stupid because I have to do this:

$ git add . $ git commit -am "my bad, forgot this stupid config now my sexy commit is ruined"

Now when you look at my GitHub you see this:

GIT AMMEND TO THE RESCUE!!!

Instead of all of that, just do this:

$ git commit --ammend

Yeah, it's that simple. Now, no one will know you are a forgetful loser (I'm being a little hard on myself) and you can keep on keeping on. You're welcome.

[theopolis-blog]

A Deep Conversation with Dezmond

Dez: My teacher said that if you had a whole year without having a bad day, you aren't normal. You have to have *some* bad days.

Me: Yeah, that's true. If you didn't have bad days, then the good days wouldn't be that good. If you just had all good days, they wouldn't be fun anymore.

Dez: *blank stare* ... have you ever made clay?

[theopolis-blog]

Grinds My Gears : Stripe

Before I start griping, I want to make sure everyone knows how much I LOVE Stripe. I have used it in 3 projects just recently, and it is what powers the new LifeChurch.tv SmartGiving application. It is my go to for dealing with credit cards on the internet, and the design of the admin site is one of the better parts.

That being said, I have to do a little gripe session about the UI choices on the API Keys view.

Looks like a simple enough screen. Easy to separate Test from Live keys. But my problem is with the icons they have used next to the keys. What looks like the refresh icon, will delete your old one, and create a new one. I think that icon is fine. But, the scissor icon, which is the international icon for cut/remove, is for copying your key to your clipboard. I hesitate to use it every time, for fear that I'm deleting my key that is there, performing an action similar to the refresh icon. Whenever you hover on it, you will see that tooltip that says "Copy Key To Clipboard". That's great, it makes me feel ok about clicking on it. But I always spend a second recapping what I know about those icons. And I'm in this interface fairly often.

My Solution

For me, I would've gone with something else. Here are a couple of icons you could go with.

I've swapped the scissors with a clipboard, and a common "download" icon. My favorite is the clipboard. I don't necessarily think that either instantly conveys "copy" more than the scissors, but neither of those icons are associated with a negative action to me. Neither one of these icons make me hesitate to roll over and discover the tooltip, which is what the scissors do.

What do you guys think?

Icons from the noun project: (download icon) (clipboard icon)

[theopolis-blog]

John Cleese on Creativity

A friend of mine shared this video a while back. I was reminded of it recently, and thought I definitely needed to pass it on. It is a talk John Cleese gave about creativity. There is a ton of useful content in it, about practicing being creative, and the science behind letting your mind be free to create.

There was one part of the video, that really jumped out. He was saying that in asian cultures, during business meetings, the person to express their views or ideas, are the most junior employees. This way, those employees can talk about ideas they have, without potentially contradicting what has been talked about, by somebody more important. It is a concept of planned or scheduled unstructured-ness. But it jumped out at me as an unusually brilliant idea. The whole video is worth watching, and he is a very funny guy.

[theopolis-blog]

Grinds My Gears

The "did you know we have an iPhone app" pop up screen has to be the most frustrating and annoying paradigm on the internet right now. Here is an example of what I'm talking about. I am trying to birthday shop for my wife, and she has sent me a link to a Patagonia jacket that she likes. It was a direct link to the product. When I opened up the page, this is what loads.

My initial reaction to seeing this was anger and frustration. But since I love my wife, I powered through, and clicked "No Thanks". If it wasn't for her, I'm out at this point. That is how much I dislike this stuff.

After clicking "No Thanks", guess what happens. I am redirected to the home page!! Are you kidding me!? So not only have you interrupted the shopping process and risked me leaving without even seeing the product, you then send me to the home page, instead of continuing on to the product. Patagonia, you must hate making money. You also must think I really, really need your iPhone app.

Patagonia isn't the only site that does this. Tons of blog sites and shopping sites do the same exact thing. And it doesn't make any sense to me. If I like your website enough to download the app, I probably already have it or know about it. If I'm visiting your website, instead of the app, it is probably because someone sent me a link to a product or story. Don't completely prevent me from getting to that content by popping up an ad for your new mobile app. It leaves a sour taste in my mouth, and if there was ever a chance of me downloading your app, it's gone now.

[theopolis-blog]

Comparing Ruby Arrays

Just discovered this little trick, and I thought I would pass it along. Here is the situation I needed it for. I have an edit user form, that after it is submitted, I wanted to send the user an email, letting them know their account had been updated, and what information had changed. So, I am simply passing in the array returned from @user.changed (which is also a helpful method) into my mailer. Well, in the instance that someone has updated their street, city, state & zip, I don't want to tell them that all of those fields were updated, I just want to say their address is updated. Now, to the good part, the code that accomplishes this looks like:

And here is an example that is a little less specific

[theopolis-blog]

My 2013 Theme

I feel like I started 30 zillion different things in 2012, but only finished a handful of them. That is why my theme for 2013 is:

FOLLOW-THROUGH

And here is a bit of scripture to go along with it:

Now finish the work, so that your eager willingness to do it may be matched by your completion of it, according to your means. 2 Corinthians 8:11 NIV

For me, this doesn't just mean I finish what I start, but also I need to be more intentional about what I start.

[theopolis-blog]

My Favorite Things (2012)

I figured that if people want to know about Oprah's "Favorite Things", they also want to know about my favorite things. But, I'm not going to give away iPads or anything else. However, I will be giving out my number (ladies?). And, I've left off all of the obvious things from the list. I'm incredibly thankful for my job, friends, and of course my lovely wife. But, you guys don't want to read that stuff, so I'm trimming the fat (not a fat joke, nooooot a fat joke guys). So here are my favorite things of 2012:

10. Dribbble

If you do any kind of design work, you need to be on that Dribbble.com game. Very talented designers from all disciplines post previews of projects they are working on and it is a great place to go for inspiration. I go there almost daily, and our office even has an amazing screensaver that is made up of the most recent shots that people are posting.

9. Rdio

If you are a Spotify fan, that's fine, you can pick your poison with this one. But really, I will never go back to iTunes. That would be the worst. thing. ever. Why would I go back to a time when I couldn't listen to Hanson's "MMMBop" on command or share the latest Kid Cudi track with a friend, without actually owning the song or having to waste my time illegally downloading it. Nope, not gonna do it.

8. Letterpress

If you liked Words With Friends, iPhone or even the new board game (don't get me started on that), you will love Letterpress. It is like Scrabble mixed with Risk mixed with meth. Yeah, it's that awesome. Go download it, fo' free.

7. Westbrook Dunks

These have been one of my most favorite things lately. Since my beloved Thunder traded totes my fave player in James Harden, I've started gushing a little more over Russell Westbrook. My wife has loved him since the beginning, for more than just his ball skills (read: he is kind of cute), so I guess it has rubbed off on me a little. Anyways, he has been throwing down like a boss recently.

6. The Basketball Jones

I've been a fan of their blog for a bit, but I had never listened to their daily podcast before. This season I've been listening to it around the clock. It's amazing!! It is like listening to a more well-informed version of my friends and I talking about sports. I creepishly want to be best friends with all of them. I love that they primarily talk about their awful hometown team, the Toronto Raptors, and keep their listeners well informed of the record of their rec-league basketball team. If I had a sports podcast, I would want it to be exactly like this. If you want a taste, here is a video they made about Chris Bosh last season. Pretty solid.

5. Corduroy Pants

So recently, I went shopping on Black Friday, like a dweeb (I said recently, and I meant it). Well, I snagged a pair of "cords" at the GAP for really cheap. You guys, holy crap! It is like wearing a pair of fashionable sweat pants. These are the most comfortable things ever. So comfortable that they jumped into the #5 spot on my favorite things list, after only wearing them like twice. They would probably be at the top of my "most comfortable things of 2012" list, if I had one. George, on Seinfeld, always said he would drape himself in velvet if it was socially acceptable. I might just do that with corduroy. Good job corduroys, keep up the good work.

4. Yahoo! Fantasy Football

I live for some Fantasy Football (is it a proper noun?). I spend most of my free time making web apps that do nothing more than entertain me and my league comrades. This year, I'm playing in a handful of leagues (humble braaaaaag) and one of them uses ESPN to run the league. It's the worst. It is embarrassing how bad ESPN is at Fantasy Football. And that's why my favorite thing isn't just Fantasy Football, but specifically the Yahoo! version. They do an amazing job, and it just keeps getting better every year.

3. The Walking Dead

When I first started watching "The Walking Dead", I wasn't hooked. I watched the first 3 episodes, and walked away (nailed it!). Fast forward to like a month ago, and I decided to give it another go. Holy smokes, this show is fantastic. If you aren't a zombie person, get over yourself, because you are totally a zombie person, you know it. This show has something for everyone. Girls, you like make-up right? O man, the make-up they put on these zombies every show is out of control. The first 2 seasons are on Netflix, get to watching people!

2. The EA Sports FIFA Franchise

Yeah, kiiiind of a blanket statement for this one. But, I have been playing FIFA since the beginning. Back when it was just FIFA International Soccer, not even a year on it. It is the best sports video game around. Even though some think it is boring to watch soccer, it definitely isn't boring to play. The games are short, and there are almost no stoppages, so you are pretty much manning "the sticks" non-stop. And they always do a great job with the soundtrack. Remember when they used Blur's "Song 2" for the intro, o man, of course you do.

1. Jurassic Park

JURASSIC PARK IN IMAX 3D ON APRIL 5TH, 2013!!!!!! I know it doesn't come out until 2013, but it is that good, that it tops this year's list. This movie pretty much defined my childhood, maybe even my life. Anytime I see a large clearing that leads up to a forest (in Oklahoma there are tons, ok), I think, "aw man, what if a T-Rex blasts out of there, what am I going to do?". When I took up playing the trumpet in Jr. High (street cred alert), the Jurassic Park intro was the first song we performed as a band. And when I went to visit my wife in Costa Rica (where Jurassic Park is set), I felt a little closer to home. I saw this movie numerous times in the theatre, when I was like 7. I had to hide behind the seats during most of the scenes, because I was horrified. So on April 5th of next year, I'm going to watch it again, and I'm not hiding this time, hopefully.

Since top 10 lists end with 1, and not 0, that concludes my list of favorite things. Hopefully, the world doesn't end in a few weeks. I'm doing everything I can to prevent it, mostly by playing OldSpiceSavesTheWorld.

[theopolis-blog]

My First Monkey Patch

So this probably should've happened by now, but, it hasn't. Today was my first "monkey patch" of a rails gem. Wikipedia says that monkey patching is:

A monkey patch is a way to extend or modify the run-time code of dynamic languages without altering the original source code. 

Ok, nuff said, right? Well, I'm a big fan of the Sorcery gem for session/user management. A lot of people get all jazzed about Devise, but I always end up needing to bend the rules a bit, and I find that Sorcery allows me to do that. Well, I finally hit a wall.

I'm working on a little app for my wife. She is a teacher. She has a classroom library of books, and managing which student has checked out which book is hellacious at times. So, the app I'm working on allows a teacher to sign up, add books to her library, add students to that library and then those students can login and check out/in books.

The problem that I ran into was authenticating students. I'm under the assumption that the username that most students will use will be their "student id". Well, what if Library A has a student with the student id of "12345" and Library B also has a student with the student id of "12345". If Student B tries to login, Sorcery would never be able to validate him, because it finds the user by doing "User.where(username: "12345").first (ok, not that exact code but come on). So, it will always grab Student A, and try to authenticate against Student B's password. And I can't just compare passwords, because the password is not stored in the database, for security reasons. You dig?

Here is what I decided to do. Sorcery has a method, "credentials_match?" that takes in the hashed password, the plain password, and the salt. Only problem, it's a private method. Bummer. So I got my "monkey patch" on. Here is what I came up with:

All this does is expose the private method. It's not fancy. It's not even exciting. But, I like it. So, I wanted to share it with you. What do you think? You know what, I don't care! It accomplished the task, and I've already moved on, so save your breath :).

[theopolis-blog]

Saturday Project

http://andtohold.herokuapp.com

Today I didn't have a ton going on, and it was great outside, so naturally, I stayed in :). Disclaimer: I actually love outside stuff, but I just got wrapped up in this little project. The gist of the project is that it pulls in some playlists Rdio and uses some album art to dress it up a little. The longer version is below. I've broken it up into 2 parts. Part 1, some background story about the playlists I chose to show. Part 2, we get into some of the code that makes this thing tick.

The Backstory

My wife and I celebrated just this week that we have been dating each other for 7 years. Now, we've only been married for a little over a year, but we still like to recognize the amount of time we've been together as a whole. An interest that we have both shared since we first met is our love of music. We have always enjoyed introducing each other to new bands and new songs by bands we love. When we first started dating, we used to trade off making mixed CDs for each other. And pretty often, we'll hear a song on the radio or at the mall, and say "hey, I put this on a mix for you once, remember it?" 

Fast forward 7 years, and CDs are a thing of the past. But, we still like to make playlists for each other and share new songs and bands. We both have Rdio accounts, and we usually just share playlists on there. I have been labeling the playlists "And To Hold : Vol x", which is a nod to both our wedding website AndToHold.com and to the traditional wedding vow, "to have and to hold". 

The Code

This project can be found on GitHub.

So lately I've been all about all about the mixture of background-size: cover and gaussian-blur on said background. Path does this, and I love the effect. What I love so much about this technique is that you can take an image that normally wouldn't work at that size, because it is a smaller image, apply a blur, and now, you get a nice background that has a lot of the feel (color wise) of your image, without looking like a pixelated pile of junk!

I initially wanted to use the StackBlur javascript library to get the blur effect on the fly. This library manipulates the HTML5 canvas element and you can see what it looks like by clicking the link above. I ended up running into problems because the canvas element won't allow you to load remote images, they have to be from your local fileserver. Well, my images were coming from Rdio's api, so I had to do something else.

I switched to just using RMagick (Ruby's port of the popular ImageMagick library). But, I ran into a problem with this too. I was going to push this app up onto Heroku. Heroku is read-only, so my plan changed a little. What I decided to do is to save the blurred image in the tmp folder of the project, since Heroku allows you to write to this folder. Then, when I request the blurred background, if it isn't in the tmp folder, I recreate it. I probably could have done something with caching just as well, but this is the direction I went for now.

I'm using Rdio's Ruby library to make call's to their API. I'm grabbing all of the playlists that my wife and I have, and then filtering out only the ones with "And To Hold" in their title. Then, I'm just using the iframeUrl to embed their nice little flash player. Everything is pretty self-explanatory.

Improvements

For starters, I think Rails is a little heavy handed for this single page app. I'd love to move this to Sinatra.

I might import a nice font from Google's font library for the name of the playlist.

I'd like to bring in the playlist's description, I just couldn't figure out where to smush it in on this round.

I'd love for some animations when you change playlists, instead of everything just snapping into place.

I would mind having more control of the music player, the style of it and everything, instead of just embedding everything.

All in all, it was a fun little project for me, and maybe some of you will enjoy the music that gets posted there. So check it out.

[theopolis-blog]

View and Style Your Email in the Browser

While working on a project recently, I found the need for being able to work on emails in the same way I work on an HTML page. That is, view it in the browser, update the code, refresh the browser, repeat. But with email, I found myself actual sending the emails, over and over, waiting for them to arrive, then checking out how they look. Then, I discovered mail_view. 

mail_view is made by 37Signals. If you are this far into the post, you better know who they be (yep, one paragraph into my blog posts is the minimum for knowing 37Signals). mail_view accomplished exactly what I was looking for. You can view your emails in the browser, make changes and refresh. You can use your fave inspector (firebug or other) to preview tweaks you are making live.

So the next time you're stuck in that dumb ol' loop of sending emails just to preview them, grab mail_view and be done with it.

[theopolis-blog]

I love everything about this page. Start scrolling down and watch it come to life.

[theopolis-blog]

Managing Keys in Rails with Git and Heroku

Alright, I'm not proclaiming this the holy grail way of storing your keys, but this is what is working for me. In a project I'm working on, I'm using stripe to process credit cards (use it, easiest for life ). With stripe, you need to have access to your public and private keys, when you make your request to process a card.

The Problem:

I don't want git to track my public/private keys, and I want to be able to use this application on Heroku. So that means I want my keys in a file that does not get deployed to the Heroku server, since it uses git deployments.

The Solution:

Here is what I've been using, and it is working quite nicely. The first step is to add a file that loads your keys when the app starts up. So add a file in config/initializers. I called mine stripe.rb. 

Here is what's going on in this file. The first thing it does is check if we are in the production environment. If we are, we load our keys from the config hash on Heroku. (If you want to know how to add those, they have a crazy easy walkthrough) If we are on our local machine, we load our keys in from a YAML file. And then we set our constants using the hash we have loaded.

The YAML file is really straightforward.

Easy right? Now, you need to add this file to your .gitignore so that it isn't tracked in git and won't be deployed to Heroku.

Yep, just one line, and you're out.

[theopolis-blog]

Case Insensitive Matching for PostgreSQL Like Query

Was that title a mouthful, or what!? Anyways, here is the problem I was trying to solve. I was wanting to write a query against my ActiveRecord model that finds an object where its email was like a search term. Well, here was my problem. Let's say my object's email was "[email protected]". If my search looked like this: 

Then, if my search was "testuser", it isn't going to match anywhere with "[email protected]" because of the upper case 'T' and 'U'. So, what's a boy to do? Well, here is what I did.

Drop a little "LOWER" in front of the property I'm searching against, duh! Now, this will be searching "testuser" against "[email protected]" and will find said user. Hopefully this will be useful for someone else.

[theopolis-blog]

Blast from the Past

This weekend, my wife and I went camping with the Fergusons. It just so happened that our home-town team, the Oklahoma City Thunder, had a playoff game that night. They were hoping to sweep the defending champs, the Dallas Mavericks, in their home stadium. Well, we are all pretty big Thunder fans, and we were sad that we were going to miss the game. Luckily, we got our hands on a radio, and brought it to the campsite.

The Thunder started the 4th quarter down by 13. Things weren't looking good, and most people thought the Mavs would win at least one game at home, so we weren't surprised by the situation. But out of nowhere, the Thunder rallied. Mainly by riding the hot hand of James Harden. But my favorite part was getting to listen to it on the radio.

There is something about a sports broadcast on the radio. Since there are no images to compliment what you are being told, you have to hang on every word. The silence that occurs between a jump shot, and its arrival at the basket, can be deafening. As we sat there, huddled around this small radio, we did exactly that. We were hanging on every word.

The Thunder slowly clawed their way back into the game. And as the final buzzer sounded, and we had swept the Mavs in the first round of the playoffs, we exchanged high-fives by moonlight. The coolest part were the echoes of cheers throughout the campgrounds, as Thunder fans crowded around the radios just like they would have before TVs and internet had ever existed.