Archives

All posts by Eric Saupe

Installing Rails on Mac OSX

rails

When developing for Ruby on Rails the first thing you’ll need to set up your development environment. This guide will be for installing things on Mac OSX and would be similar for Linux. These are my notes from experience setting up a Rails environment based on The Rails Tutorial by Michael Hartl.

New Rails Installation on OSX

Install Git

Checks if git is installed and if it isn’t it will install it

Install Ruby (Already installed)

Checks Ruby version, already installed on OSX

Install RVM

RVM is for multiple Ruby on Rails environments for different projects.

Install RVM Requirements

NOTE: RVM tries to install gcc46 which is an older version of gcc on OSX. Mavericks already has gcc installed so install the list that appears except gcc. It also can install but take a VERY long time so just be patient and see.

Tell RVM where OpenSSL is

Create .gemrc

This file stops the installation of Ruby docs, the text below goes in .gemrc

Install Rails

You should be ready to create your environment and install your Gems. If I’ve missed anything, or you have problems, let me know in the comments below and I will update this list.

ubuntu-logo14

With the latest LTS release of Ubuntu many people, including myself, will take this time to do a fresh install of the OS on their development machines.  Here are a few tips for getting up and running after your OS is installed.  This guide will be for Python and Django development using Ubuntu 64-bit, alter the commands to work with your flavor of Ubuntu.

Git

  1. sudo apt-get install git-core

JDK

  1. Download the latest version of JDK from Oracle.
  2. cd /usr/local
  3. sudo tar xvzf ~/PATH/TO/DOWNLAD/xvzf jdk-8u5-linux-x64.tar.gz
  4. sudo nano /etc/profile
  5. At the bottom of this file paste the following lines:

In the terminal type java to make sure it is working.

PyCharm

If you want to use settings from your previous install of PyCharm click File->Export Settings and back up this file to be used on your new installation.

  1. Download the latest version from PyCharm.
  2. cd ~/PATH/TO/DOWNLOAD/
  3. tar xvzf pycharm-professional-3.1.2.tar.gz
  4. cd pycharm-3.1.2/bin/
  5. ./pycharm.sh
  6. If PyCharm asks if you want to use old settings say that you don’t right now, we will do this after it is installed.
  7. Follow PyCharm instructions to finish installation
  8. Now you can import the settings by clicking File->Import Settings and locating the files.

Pip

  1. sudo apt-get install python-pip

VirtualEnv

  1. sudo pip install virtualenv
  2. Create your virtualenvs.

MySQL

  1. sudo apt-get install python-dev
  2. sudo apt-get install mysql-server
  3. sudo apt-get install libmysqlclient-dev
  4. In your related virtualenv run pip install MySQL-python

Django

  1. In your related virtualenv run pip install Django

At this point you should be ready to install all of the other packages you need.  If I’ve missed anything critical for getting an Ubuntu installation at least up to a working state let me know below in the comments.

gitlab_0

GitHub is great for open source projects and if you haven’t been there to see what’s going on you’re missing out.  They offer free git hosting for all of your open source projects.  Their UI is great for tracking issues, commits, users, updates, and so much more.  But let’s say you want to use all of that great UI on a project you don’t want open source.  That’s when you’ll need to pay GitHub for a few private repositories.  Or maybe you want to create an organization for you and your developers to create private projects and manage larger applications across many repositories.  You’ll need to pay for that too.  Below are the price lists for both personal repositories and for organizations.

organizationpricing

Those prices can get pretty steep.  Luckily for you there is an open source solution to GitHub called GitLab.  It runs on Ruby and you can set it up all by yourself by following these GitLab Installation Instructions.  That assumes you have a server ready to serve and work for you.  If you don’t you can quickly set up a great Amazon EC2 instance and install GitLab in one click.  There are a couple of caveats in getting things set up with the EC2.  Once it is installed you’ll log in using the account user@example.com and the password is contained in your EC2 log.  Once logged in change your password to something other than the auto created one.  You’ll then need to make some changes to your config files.  SSH into your EC2 instance and update the URL contained in ~/apps/gitlab/htdocs/config/gitlab.yml.  Follow the instructions at the top of that file.  Then you’ll need to set up your email service.  To do that follow the instructions here and then restart the services as described at the bottom of that section.  Now you’re all set!  Placing this in a free Amazon instance will give you a server for a year for free and then after will only cost ~$15 per month.  Much cheaper than GitHub and you have complete control to create groups, private repositories, even public repositories!

That’s all there is to it.  I’ve started using it for my personal projects that I want a UI for issue tracking and other users to join me with and not make public.  If you have any great advice for using GitLab feel free to share in the comments below.

Screenshot from 2014-03-27 14:23:55

Recently we started dumping some data from the database into a shared spreadsheet on Google Docs.  With all of this data it would be helpful to visualize it in some way.  After searching the net it seems there isn’t really a good way to create a chart that is dynamic with what data is in the spreadsheet.  What I want is to have my graph update every time a new row is added to the sheet without having to edit the graph directly.  The solution was to write a custom Google Apps Script to do just that.

To add a Google Apps Script to a document open the document and click Tools -> Script editor…  This opens up a page for editing scripts.  If a prompt appears for what type of script you want to do just select Blank.  Now you just need to paste in this code below.

To make this work for you just change the tabName variable to whatever your tab is that you want to use the graph in, change the start row and start column of where your data begins and what column to end reading.  You don’t need to specify an endRow because we will just be reading all of the data until there is no more.  After that you can customize where the graph will be located, how wide it is, and the titles of the axis.

You’ll see that this method will get called anytime the document is edited or opened by someone who can edit.  Viewers who cannot edit will not trigger the event even on open.  That’s all there is to it.  dynamic Google spreadsheet graphs are now just a click away and once you have it set up you’ll never have to touch it again.

If you have any other Google Apps Scripts tips leave them below in the comments.

send-file-iconupload-files-icon-ts7tteez

I have never found a good list of the default styles that ReportLab gives you when you run getSampleStyleSheet() so I wrote a method to spit them out and what they look like.  Below is that list along with the PDF output of each of the styles.  They are grouped into two categories, byAlias and byName.  Normally I just use the name but you can use either.

  • byAlias
    • ‘title’: <ParagraphStyle ‘Title’>
    • ‘h1’: <ParagraphStyle ‘Heading1’>
    • ‘h2’: <ParagraphStyle ‘Heading2’>
    • ‘h3’: <ParagraphStyle ‘Heading3’>
    • ‘h4’: <ParagraphStyle ‘Heading4’>
    • ‘h5’: <ParagraphStyle ‘Heading5’>
    • ‘h6’: <ParagraphStyle ‘Heading6’>
    • ‘bu’: <ParagraphStyle ‘Bullet’>
    • ‘df’: <ParagraphStyle ‘Definition’>
  • byName
    • ‘Title’: <ParagraphStyle ‘Title’>
    • ‘Heading1’: <ParagraphStyle ‘Heading1’>
    • ‘Heading2’: <ParagraphStyle ‘Heading2’>
    • ‘Heading3’: <ParagraphStyle ‘Heading3’>
    • ‘Heading4’: <ParagraphStyle ‘Heading4’>
    • ‘Heading5’: <ParagraphStyle ‘Heading5’>
    • ‘Heading6’: <ParagraphStyle ‘Heading6’>
    • ‘Bullet’: <ParagraphStyle ‘Bullet’>
    • ‘Definition’: <ParagraphStyle ‘Definition’>
    • ‘Normal’: <ParagraphStyle ‘Normal’>
    • ‘Italic’: <ParagraphStyle ‘Italic’>
    • ‘BodyText’: <ParagraphStyle ‘BodyText’>
    • ‘Code’: <ParagraphStyle ‘Code’>

Screenshot from 2014-03-26 12:07:45

square

AngularJS has a ton of built in directives and functions to make your app come alive very quickly.  One thing I noticed it was lacking was a built in on-enter event.  For example, if a user is in an input field when they hit enter I want it to do something, maybe not necessarily submit the form.  Luckily, AngularJS gives you the ability to create your own directives and add them into your app.  Below is a simple directive that you can add to your app that allows you to add ng-enter to elements in your partials.  Pass it a function and watch as you hit enter and that function is executed flawlessly.

That’s it.  Now just add ng-enter="myFunction()" to any element in your partial that detects keystrokes. This has helped me a ton and added a lot of easy functionality to an already great AngularJS system.  If you have any other great directives or AngularJS tips please leave them below in the comments.

afire-logo

Firebase is a great way to connect applications to a database that will sync data in realtime.  Tying this in with AngularJS allows you to create a single page application that updates dynamically and as data changes without page refreshes.  This allows you to create applications that can give your users access to data the moment it is updated and changed.  They have a great binding called AngularFire that links the two services together nicely.

One thing that I had problems with was filtering data returned by Firebase with the great AngularJS filter method.  Because AngularFire returns a dictionary with methods and elements the AngularJS filter has problems filtering the data correctly.  The AngularJS template rendering can render the data just fine but the filter does not work.  To fix that you’ll need to employ the AngularFire method orderByPriority before your AngularJS filter.  Here is an example.

In my Controller I access the list of stores using Firebase and $firebase.  At this point my $scope has the list of stores with some methods used by AngularFire to update data.  The partial above will render the list just fine but without orderByPriority the search filter would not work.  The orderByPriority converts an object returned by $firebase into an array.  This array will work with any normal AnguarJS filter.

Here is the definition from the API of AngularFire.

The orderByPriority filter is provided by AngularFire to convert an object returned by $firebase into an array. The objects in the array are ordered by priority (as defined in Firebase). Additionally, each object in the array will have a$id property defined on it, which will correspond to the key name for that object.

That’s all there is to it.  I hope this helps someone else figure out this problem as I spent a long time trying to get my filter to work with Firebase objects.