SolidusConf 2017 I am very proud to say that I was a chosen speaker at this year's SolidusConf.  Solidus is an open-source eCommerce platform written in Rails. We use it at DeseretBook.com and contribute actively to the project. Below is a transcript of the talk as well as my slides. They say the video will be released soon and when it does I'll post it here. I think the transcript will read better than I presented it so start there. Before we get to all of that I would like to thank my wife for all of her love and support, Greg Price for the topic idea, and Ashton Herrmann for editing and proof reading. They really made this thing come together and without them it wouldn't have been nearly this good.Link to TalkLink to SlidesKeep your store fresh with an API-based CMS Introduction Hello. I’m incredibly happy to be here and excited to tell you about API-based CMSes for your stores. We’ve seen incredible improvements to our sales, advertising potential, and quality of life from t...

Teamwork Doesn’t Have to Suck by Eric on January 5, 2017

Note: This is a repost from my Medium account, https://medium.com/@ericsaupe/teamwork-doesnt-have-to-suck-741fe1a9ec61 Let’s face it, teamwork can suck. A new project comes up, the team gets together and inevitably a small portion of the team does the majority of the work. Deadlines come, tensions run high, and suddenly you dread waking up in the morning to head back into the hell that has been created. We’ve all been there. Let’s talk about how to make all of our teams better not only for our own sanity but for every member of our teams. [Teams can be great!]Move togetherHard working team members can quickly lose their drive without a destination in sight. A common and achievable goal should be the first step to improving any team. Each member should know their role and how they contribute to moving towards that end. ““Teamwork is the ability to work together toward a common vision. The ability to direct individual accomplishments toward organizational objectives. It is the fue...

Getting Started with Programming by Eric on July 27, 2015

A friend of mine called me up recently to ask me how to get started with programming. I've gotten these requests more and more as the demand for programmers rises. I'm going to compile a list of resources to help anyone get started with what I feel are the basis for what anyone who wants to program will need. This list is by no means comprehensive and while this will get you started you should not feel like you can go from knowing nothing to building the next Facebook simply by following this guide. It will, however, give you a solid foundation with which you can build and grow to the point where you could potentially build something like Facebook or Instagram on your own or working with a small team.Which Language Should I Learn? This depends entirely on what you are trying to do. Some people want to make their work life more efficient by writing small programs to automate their daily tasks while others may want to create websites and web applications. For the first I suggest Pytho...

What's Coming in Rails 5 by Eric on July 22, 2015

Rails 5 As has become tradition, a new full version release of Rails is coming just two years after the release of Rails 4. This new version progresses the platform by bumping the underlying minimum Ruby version and adds a slew of neat features to keep Rails feeling fresh and new.Ruby 2.2.2Ruby 2.2.2 is required in Rails 5 because Rails 5 will take advantage of the new Symbol Garbage Collection found in Ruby 2.2. There is also rumor of Rails 5 using the Incremental Garbage Collection found in Ruby 2.2. They have decided to use Ruby 2.2.2 since Ruby 2.2 had a major security vulnerability that is patched in 2.2.2. https://github.com/rails/rails/pull/19257 Ruby 2.2.1 PR https://github.com/rails/rails/commit/32f7491808d2c4e097ed7b3ee875e4d1cea8c442 Ruby 2.2.2 Commit Rails APIMany Rails developers these days are finding themselves using Javascript Frameworks more and more. Whether DHH likes that or not it's a fact of life. Before Rails 5 developers turned to the ruby-api gem which h...

How to Watch Streams in VLC Player by Eric on November 2, 2014

VLC Player has a neat feature that allows you to watch high quality streams. Here is a small list of how to watch them. 2. Download VLC Player (if you don't already have it) 4. Open Network Stream (Ctrl + N on Windows) 6. Copy and paste the link address 8. Hit Go If you are having lag issues: 2. Go to VLC Preferences -> Select Show All 4. Then go to Preferences -> Input/Codecs -> set Network Caching to 5000ms or more If that doesn't help try a lower bitrate or quality by switching the 4500 in the link address to 3000, ipad, 1600, iphone, or 800.Link to Reddit Post

One of the great strengths of Rails is the ability to create layouts that house various views of content. You create a layout with a basic HTML structure and then simply drop in your new content based on the view you are rendering. One of the simplest layouts is one that just renders the view that takes up the whole page and this is accomplished by the auto generatedapp/views/layouts/application.html.erb.<!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html> The highlighted line is the important one. That <%= yield %> tells Ruby on Rails that whatever view you load just drop it right there. That's great! Now we have a simple base layout that houses our imports and basic structure and CSS and we simply drop in our own content inside of this. Let's...

Getting Started With PostgreSQL by Eric on July 17, 2014

PostgreSQL is a pretty common database choice these days. It's quick and fairly easy to set up but a lot of the information I've seen online makes it much harder than it has to be so I'm going to put my notes here. 2. Download PostgreSQL and follow the installation guide for your flavor 4. Fire up your console and type $ psql to open the Postgres command line 2. From here you should do all of the commands you find online 4. Everything you find on http://www.postgresql.org/docs/ will work in the command line 6. This will be your main interaction between you and your PostgreSQL databases 6. Create a Database - CREATE DATABASE my_new_database 8. Read the docs and do some Google searches to find all of the commands you'll need. There are way too many to list here and they all have their uses. That should get you up and running. If you are doing a web development project your web framework would probably take over from here once you have your databases created. Django would...

Installing Rails on Mac OSX by Eric on July 8, 2014

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 OSXInstall Git Checks if git is installed and if it isn’t it will install it $ gitInstall Ruby (Already installed) Checks Ruby version, already installed on OSX $ ruby -vInstall RVM RVM is for multiple Ruby on Rails environments for different projects. $ curl -sSL https://get.rvm.io | bash -s stableInstall RVM Requirements $ 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 $ rvm install 2.0.0 --with-openssl-dir=$HOME/.rvm/usrCreate .gemrc This fi...

Ubuntu 14.04 - Fresh Install Instructions by Eric on April 17, 2014

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 2. sudo apt-get install git-core JDK 2. Download the latest version of JDK from Oracle. 4. cd /usr/local 6. sudo tar xvzf ~/PATH/TO/DOWNLAD/xvzf jdk-8u5-linux-x64.tar.gz 8. sudo nano /etc/profile 10. At the bottom of this file paste the following lines: JAVA_HOME=/usr/local/jdk1.8.0_05 PATH=$PATH:$JAVA_HOME/bin export JAVA_HOME export JRE_HOME export PATH 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. 2. Download the latest version from PyCharm. 4. c...

GitLab - Your Own Private GitHub by Eric on April 11, 2014

![](/img/gitlab_0.png)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. 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 in...

Google Spreadsheet Graph with Dynamic Data by Eric on March 27, 2014

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.//Runs on document open function onOpen() { createGraph(); }; //Runs on any edit function onEdit() { createGraph(); } /** * This function reads the data in the Totals columns */ function createGraph() { var tabName = ...

ReportLab Default Paragraph Styles by Eric on March 26, 2014

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': <Par...

AngularJS Detect Enter Key - ngEnter by Eric on March 14, 2014

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./* This directive allows us to pass a function in on an enter key to do what we want. */ app.directive('ngEnter', function () { return function (scope, element, attrs) { element.bind("keydown keypress", function (event) { if(event.which === 13) { scope.$apply(function (){ scope.$eval(attrs.ngEnter); }); ...

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.<input type="text" class="form-control" ng-model="storeSearch.$" placeholder="Sto...

Twitter Typeahead.js v0.10 by Eric on February 25, 2014

Twitter Typeahead.js has been updated and there are a lot of changes.  I'm going to give a an explanation for a few of their examples and explain the key features and changes that they have made.  For those looking to upgrade to this new version it will require a rewrite of your current Typeahead.js methods so please be aware of that.  The biggest changes are outlined in their changelog.“The most important change in 0.10.0 is that typeahead.js was broken up into 2 individual components: Bloodhound and jQuery#typeahead. Bloodhound is an feature-rich suggestion engine. jQuery#typeahead is a jQuery plugin that turns input controls into typeaheads.” Let's head to the examples.// instantiate the bloodhound suggestion engine var numbers = new Bloodhound({ datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); }, queryTokenizer: Bloodhound.tokenizers.whitespace, local: [ { num: 'one' }, { num: 'two' }, { num: 'three' }, { num: 'four' }, { ...

AngularJS $location Not Changing the Path by Eric on February 22, 2014

In my adventures learning AngularJS I am confronted with strange problems all the time which is a really great thing.  I love learning how to do new and intersting things in different programming environments.  Today I was having problems with my URL not forwarding correctly on a callback method.  Once a user was logged in I wanted the URL to forward to another page.  I was using $location.path and setting it to a URL that was defined in my $routeProvider but it wasn't actually going to that page. A quick Google search led me to this Stack Overflow page, AngularJS $location not changing the path, with the exact problem I was having.  The answer, it turns out, is to add $scope.apply() after any changes you've made.  This does a refresh on the scope and applies any changes you've made that may not have been updated.  The answer describes a conflict with another library in his case jQuery.  I am using Firebase to log the user in and I believe the conflict is there. Here is my code an...

Mimicking Bootstrap Documentation Sidebar by Eric on February 19, 2014

If you've spent any time looking at the Bootstrap docs you'll notice their nav bar on the right.  Very slick example of both Scrollspy and Affix.  I have written blog posts about both of these topics in conjunction with each other titled Bootstrap ScrollSpy Pitfalls and Fixes.  In my example I use a very simple styling for my nav using nav-pills.  This works out alright but what if we want to get exactly what Bootstrap is doing?  Well, let's figure out just how they do it. They are using very similar code to what I had in the pitfalls and tricks post so I'll bring that in here.<div id="side-nav" class="col-sm-2 hidden-xs hidden-sm hidden-print affix"> <ul class="nav"> <li><a href="#info">Info</a></li> <li><a href="#properties">Company Properties</a></li> <li><a href="#genome">Buyers/Suppliers</a></li> <li><a href="#blog">Recent Blog</a></li> <li><a href="#tests">Total Tests</a></li> <li><a href="#company-bio">Company Bio</a></li> ...

A Visual Guide to SQL Joins by Eric on February 11, 2014

Your SQL database can be huge.  So many tables, so much data, combining it can be hard.  Even once you've sorted out what data you want it can be a real task to visualize what joins you need so that you only grab the data you want.  The more efficient the join the better.  I found this nifty image on SQL joins that I think does a great job at showing how the various joins work and does a great job explaining how to use them. ![](/img/1m55wqo.jpg) I hope this helps someone else as I know I am always having a hard time figuring out which joins to use and when.

ReportLab is full of different objects that you can place anywhere around the screen.  Following our previous code, we are making a list of elements that we want to draw onto a document.  ReportLab will handle all of the page breaks and lining things up but we can manipulate that a bit to help ourselves get a really clean looking PDF.  You can review the last two guides in the series by clicking these links, ReportLab and Django – Part 1 – The Set Up and a Basic Example, ReportLab and Django – Part 2 – Headers and Footers with Page Numbers. The two most common elements to get your document to look nice are Paragraphs and Tables.  Paragraphs are, just as they sound, a paragraph of text that can contain some formatting to make it look nice.  It can even include images.  You can set a ParagraphStyle for the entire paragraph or put XML tags inside the Paragraph to get various styles throughout one object.Paragraphs A Paragraph is an element that spans the entire width of the area that ...

Accessing a Git Repository Using a Key Pair by Eric on January 29, 2014

We recently moved our git repositories over to Amazon Web Services.  We ran into one issue with it which was that now our git requests needed to have a key pair attached.  The Internet was not very kind on explaining how to do this very well so I'm documenting it here. The key pair you'll want to use is the one generated for you by AWS.  It is the same one you use when you ssh into your AWS EC2 instances.  Take this key pair file, which I will call keypair.pem from now on, and we'll need to move it and configure our git to use it. 2. Copy the keypair.pem into your .ssh folder.cp /path/to/file/keypair.pem ~/.ssh/keypair.pem 4. Create/open your .ssh config file.nano ~/.ssh/config 6. In your config fileHost git Hostname EC2PublicDNS User ubuntu IdentityFile /home/username/.ssh/keypair.pem 8.  To clone the repository use the followinggit clone git:path/to/projects/PROJECT_NAME.git 10. To update existing projects on your machine to use the new address follow the instructions be...

Adding Extra JavaScript to AngularJS Partials by Eric on January 24, 2014

When loading partials into your one page AngularJS app occasionally you'll need to load in JavaScript files that pertain only to those partials.  If you are only using AngularJS these added <script> tags won't be rendered by Angular.  After Googling for some time I have found that the solution is to load JQuery into your index.html file just before AngularJS.  This fixes the problem.partial.html<script type="text/javascript" src="//cdn.someplace.com/file.js/"></script>index.html<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>   Problem solved. Hope this helps someone else who runs into the same problem I had.  If there is a better, more Angular way, of doing this let me know in the comments below.

Last time we looked at how to generate a very simple PDF using ReportLab and Django, ReportLab and Django – Part 1 – The Set Up and a Basic Example.  This time let's make the PDF a little bit more interesting with some headers and footers.  ReportLab gives a pretty good amount of control when it comes to adding headers and footers to your PDF.  To start off let's bring back the simple __init__ method we had from last time and add a header/footer method to it.from reportlab.lib.pagesizes import letter, A4 from reportlab.lib.styles import getSampleStyleSheet class MyPrint: def __init__(self, buffer, pagesize): self.buffer = buffer if pagesize == 'A4': self.pagesize = A4 elif pagesize == 'Letter': self.pagesize = letter self.width, self.height = self.pagesize @staticmethod def _header_footer(canvas, doc): # Save the state of our canvas so we can draw on it canvas.saveState() styles = getSample...

jQuery Drag and Drop Image Upload by Eric on January 17, 2014

As we continue to push forward on development our users have asked for a robust way of dragging and dropping images and linking them to a work order.  I was putting this off for a while because I thought it would be a pretty difficult task but after a few Google searches I found a great jQuery plugin from blueimp called jQuery-File-Upload.  Take a look at their demo and check out how awesome it is.  We didn't need any of the fancy bells and whistles that came with the Basic Plus UI so this tutorial focuses on just the Basic but you can scale yours how you'd like.  The tutorial will also focus on getting it to work and save to a MySQL database through Django. To start off let's get the drag and drop area set up on our page.  To do that you'll need to add these things to your HTML template, Django tags are added because that is what we are using to render the page.image_upload.html{% block css %} <!-- jQuery Upload Files --> <link rel="stylesheet" href="{% static 'jQuery-File...

It's been far too long since my last post.  A lot has happened and the holidays make things so busy but I'm back and ready to get back in to the swing of things.  To start off the new year I'm going to do a series of posts relating to ReportLab specifically with its application to Django.  I want to go over a few of the pitfalls I've experienced and how to get things set up.  ReportLab is notoriously tricky to get working and the documentation seems sparse to say the least.  I hope these posts help not only myself remeber how I did all of this but others who are struggling with the same problems.ReportLab The problem is simple, how to generate PDFs using Django.  In our on going rewrite of our system at work we are getting to PDF generation.  The old system uses wkhtmltopdf which is great if you just want something to render HTML out to a PDF and you don't give much care to speed or formatting.  Wkhtmltopdf suffers from having to use HTML to format everything on the page.  This is l...

The year is over and Wordpress has kindly sent me a summary of that stats for my blog.  The growth has been more than I ever expected.  I still consider this a personal blog for my own edification and learning but I'm glad I could share my knowledge and problems with so many.  In the coming year I would like to focus a bit more on Django and Python but understand that a lot of people really want front end help and so I will continue to post about JavaScript and CSS.Eric Saupe: Things My Wife Doesn't Understand - 2013 Review Thanks again for visiting my blog.  I hope it helps you as much as it helps me.