Google Hangouts - Why You Should Be Using It by Eric on September 12, 2013

Recently Google said goodbye to their chat system Google Talk and replaced it with Google Hangouts.  If you aren't currently on Google+, and I know that is a lot of people, you probably don't know what Hangouts is.  Google Hangouts is Google's voice/video/chat client and is very comparable to Skype and Apple's Facetime.  This post will discuss some of those comparisons and why Hangouts should replace your current video/voice/chat client.Universal Compatibility Google Hangouts works on any computer or mobile device you have.  Whether you are chatting on your iPhone or sitting at your Windows PC you can talk and chat with anyone using Hangouts.  We've started using it in our office to replace our instant messaging client and it has been a dream.  Not only do you get messages while sitting at your machine but you can install the app on your mobile devices to get messages even when you are away from your desk.  Some people might not like this, you don't need to install the app, but fo...

Get List from POST Data - Django by Eric on September 11, 2013

Recently I tried sending a list through a form using something like <input name="my_list[]" value="some val">.  When this form is submitted all of the inputs with that name are grouped together for easy access.  In Django, one would think you could simply access the list using request.POST['my_list[]'].  This is not the case. Using that command will give you the last value.  Django says this is a feature and to get the list use request.POST.getlist('my_list[]'). Just an FYI and reminder to myself.

Making Beautiful JQuery Graphs With JqPlot by Eric on September 10, 2013

One of the best ways to make a page of data better is having a nice, visual way of looking at the data and graphs and charts do a great job of that.  Figuring out which graph works best for your situation is up to you but in almost all of the cases jqPlot has a way of rendering that on your website.  JqPlot is an open-source project with a ton of features, graph and chart types, and visual options to make wonderful graphs for your site.  Today I'm going to go over a few of the different types of graphs and then give some more advanced tips on using jqPlot.Line Graph and Others One of the big features of jqPlot is its plug-ability.  You don't need to load every jqPlot script in on every page you only need to load in the relevant script used for the graphs on your page.  This cuts down on loading time and makes your code easier to read. Line graphs are the most basic of graphs and they are so easy to setup with jqPlot.  Below is the code and the result.  I've inserted it as an image ...

Backup and Restore MySQL Databases and Tables by Eric on September 5, 2013

Anytime I need to move data or alter our database I get a little bit nervous that something is going to go wrong and crash the database losing all of our data, dropping tables, causing chaos, and so many phone calls.  Our database automatically backs up every so often but right before any major changes I make a quick local copy of the data.  This came in handy just the other day when a table was inadvertently dropped and I had a backup on hand.  Here's how to do it using console commands.Making a Backup of a Databasemysqldump -u [username] -p --host=[hostname] [database_name] > [output_name].sqlRestoring a Database from a Backup Make sure the database is created before restoring.mysql -u [username] -p --host=[hostname] [database_name] < [output_name].sqlMaking a Backup of a Table in a Databasemysqldump -u [username] -p --host=[hostname] [database_name] [table_name] > [table_name].sqlRestoring a Table from a Backup Make sure the table has been created already and MySQL will know wher...

Add a Simple Google Map to Your Webpage by Eric on September 3, 2013

![null](/img/map-title-300x164.png) There's just something about having a map of an address that is appealing to people.  Why just list the address like a mailing label when you can place a nice marker on an interactive Google Map?  That's what I thought too when I was adding content to our customer profiles.  I'd never done this before but knew that Google has a great API for accessing their data as well as some pretty good examples to follow.  The API covers how to use Google Maps on any device but for the purposes of this post I will be focusing solely on web. Let's go over some ground rules for using Google Maps API and then move on to a very simple example and build upon it slightly.  To start off with, you can only make a limited number of requests to Google for maps data before you have to start paying.  For a small company or webpage this limit will not be a problem.“For-profit web sites are permitted to generate up to 25 000 map loads per day using the Google Maps JavaScr...

Chromecast - Unboxing and First Thoughts by Eric on August 29, 2013

![](/img/marquee-product-300x277.png) Google has released their own competitor to Apple TV and Roku called Chromecast.  It's a very small device that plugs into an HDMI port in your TV and can stream Internet video right to your TV.  The box is very small and does not come with a remote because your tablet/smart phone/laptop/desktop is your remote.  Using the apps on your tablet or smart phone you can stream YouTube videos, Google Play purchases, and Netflix to your TV with the push of a button.  For the desktop/laptop you can stream anything that is in your Google Chrome browser, which you should all be using anyway.  At a price tag of $35 it's pretty easy to convince yourself to just jump in.  Below is the unboxing as well as my thoughts on setup and use.  I've had it for a few days now so I'm not a huge expert on it but it's so simple there really isn't much to it. Let's walk through the pictures and setup.  That small box is all you get when you order Chromecast.  Opening it u...

Django DRY URL's in Templates by Eric on August 27, 2013

![](/img/urls-300x164.png) With so many templates in a large project that all link together in creative and complicated ways it can be a pain to keep track of URLs.  Every URL is an address that can also have a number of variables associated with it.  If these need to be changed it can be very tedious to go through every file and replace the hard-coded URLs to reflect the change.  Helping with this, Django has a template feature that will look those URLs up for you and insert the relative URL, without the domain name, into your templates on render. It's a waste to have hard-coded URLs in your templates and if you are adhering to the DRY principle, don't repeat yourself, you'll not want to have the same hard-coded URL in many places in the same project.  Using the {% url %} tag you can reference a view and no matter what its URL is Django will handle it for you. Example time:urls.pyurlpatterns = patterns('marketing.views', url(r'^$', 'index'), url(r'^overview/$', 'overview...

Bootstrap 3 Released by Eric on August 23, 2013

Just a quick note for everyone, Bootstrap has officially released version 3.0.0 as of Monday.  If you have been following along with the blog so far you'll already be familiar with the major changes to Bootstrap.  This final release fixes a lot of those bugs that I've brought up here.  It is now stable and ready for production.  The biggest complaint I've seen from people is the move to the flat theme by default where the 2.3.2 version was polished and looked nice.  The good news is that Bootstrap allows you to use the new version with the old look, problem solved!  We are going to continue with the flat look because we like it but it's totally up to you how you use Bootstrap.  Full release notes here.  Good luck!

Django Messages Framework and Custom Tags by Eric on August 22, 2013

![null](/img/screenshot-from-2013-08-22-090436-300x144.png) Sometimes it's necessary to display a message to the user in a quiet and clean manner.  To do this, Django has given us the messages framework for cookie- and session-based messaging.  After a form or other input is submitted we can quickly send a short message to the user without much effort at all.  Here are all the documents related to the framework but I'm going to give you the quick version as well as some customization options and Bootstrap fixes. The messaging framework is enabled by default when you create a new Django project so good job you're half way there!  Now just add this bit of code to the top of any page you want messages to appear:{% if messages %} <ul> {% for message in messages %} <li{% if message.tags %}{% endif %}>{{ message }}</li> {% endfor %} </ul> {% endif %} We have this in our base that is inherited by every page to allow the functionality to appear on the entire site.  You need t...

Bootstrap ScrollSpy Pitfalls and Fixes by Eric on August 20, 2013

![](/img/menu-title-300x221.png) Designing our new internal marketing tools has been a pet project of mine for a couple of weeks now.  I spend a little time here and there adding information and tools for our employees to better understand our relationship with our clients.  I'm displaying basic contact information, some information on the kind of business we do with them, a log of notes we take, past business, and company information.  All of that equates to a rather long page of information.  All of the information is relevant and displayed in an attractive compact manner the problem is it is just so much information that it can be overwhelming.  I showed it to a coworker and he wanted tabs to flip between the various bits of information because he found it overwhelming.  I didn't want to go to tabs because of the increased difficulty that would be added when they wanted to print off the marketing information and I didn't feel that tabs were the right way to go here.  With that i...

As Bootstrap nears releasing their final version of Bootstrap 3 they will continue to roll out Release Candidates for bug fixing and testing.  We have elected to keep as up to date with them as we can under the assumption that release candidates are fairly stable and shouldn't change too much between now and release.  Tuesday they released their next release candidate, RC2.  You can read about the full changes at their blog but I'm going to highlight a few of the main things that changed for us.Default Col is Gone In RC1 we were using col- to be the default size for all devices.  RC2 has removed this default class.  Instead they have added a new -xs size for really small phones and a -md, though I think this was in RC1 we just never used it.  The best way to do a default size for most devices is now to use to col-sm-.  Use the small version because it works for devices with a screen resolution  of ≥768px.  This is what most modern devices are using.  Anything lower than that will de...

Twitter Typeahead.js by Eric on August 8, 2013

![](/img/typeaheadjs-300x102.png)New Version - Twitter Typehead.js v0.10 Bootstrap dropped support for their bootstrap-typeahead.js and suggested we all use Twitter's Typeahead.js.  This was a pretty big change for us and we encountered a bit of a learning curve because the documentation wasn't exactly what we had hoped it would be.  Typeahead.js is incredible and can do some amazing things though and we are happy to be using it. The first issue is that right out of the box it will not work with Bootstrap 3.  Support is still being looked at but in the mean time there are some fixes.  Here is a thread about the issue on their GitHub page with some helpful people posting solutions for the interim.  Below is the code we are using for ours which I'm sure will change in the coming days.//Twitter Typeahead CSS //Updated 22 August 2013 .twitter-typeahead { width: 100%; position: relative; } .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { margin-bottom: 0; wid...

Bootstrap 3 Change Notes by Eric on July 31, 2013

![](/img/blurred-code-300x156.png) After spending the last two days working with Bootstrap 3 I wanted to jot down a few of the things I found in case I forget them tomorrow or to help anyone else running into similar issues.Forms, Grid System, and Screen Resolutions We have converted our forms from form-horizontal to the default Bootstrap form.  We think it looks better with the new update. Old code:<div class="control-group span4"> <label class="control-label"> {{ form.email.label_tag }} </label> <div class="controls"> {{ form.email }} </div> </div> New code:<div class="form-group col-4"> {{ form.email.label_tag }} {{ form.email }} </div> Cleaned up a bit as we had that extra label tag on our old code which was unnecessary as Django adds the label tag correctly on render.  One of the biggest thing to notice is that the span4 tag changed to col-4.  Bootstrap is now responsive by design and mobile first which means that the col- tags are me...

Bootstrap 3 RC1 by Eric on July 30, 2013

Creating our new site required a better base.  We chose to use the popular Bootstrap CSS engine to unify our CSS and help us get things started quickly.  After using Bootstrap 2.3.2 for nearly three months Bootstrap 3 was released.  We had hoped that the update would not affect our code base but we were wrong.  Nearly everything has changed in our styling.  Bootstrap 3 has gone for a mobile-first approach making even the basic framework responsive.  This is great for most developers, and even for us, because we can make wonderful sites that look and feel great on all platforms.  Our company had talked about wanting mobile versions of applications but we had put that on the back burner as many of our applications involve data entry.  Converting our project to use Bootstrap 3 has been a headache due to changes to simple classes that were used before but we are moving forward and should have things squared away by tomorrow.  The site looks cleaner, runs faster, and works on mobile alre...

Just wanted to write down a quick little JavaScript clock I made that converts to the user's time zone.  Since we have offices all over the world and the date time fields keep track of time in UTC it is important for users to know what time zone they are currently logged into.  I have placed this clock in the navbar at the top of the page next to the user to let them know what the current time is for their settings.  If they need to change it they can do so by clicking on it and changing their user profile.  Here is the code and feel free to fork this project at GitHub.$(document).ready(function() { //Get user office for UTC offset var office = $("[name='office']").val(); startTime(office); }); function startTime(office){ //Extra functionality for Date to calculate DST Date.prototype.stdTimezoneOffset = function() { var jan = new Date(this.getFullYear(), 0, 1); var jul = new Date(this.getFullYear(), 6, 1); return Math.max(jan.getTimezoneOffs...

MySQL Collation Matters by Eric on July 25, 2013

When creating databases and tables with MySQL there seems to be one setting that gets overlooked, collation and character set.  For most smaller sites, and maybe those purely in English, this may not be such a huge deal but for a larger application site and one that will be holding characters from various languages this is essential. UTF-8 is the collation and character set we want and the MySQL command to create a database with these settings is CREATE DATABASE dbname CHARACTER SET utf8 COLLATE utf8_general_ci; Bringing this back to Django, when Django creates new tables within a database it will use whatever the default character set and collation is for that database.  This is why it is important to get this right at the beginning with the command above.  If you do not, however, there are ways to make future tables created have the right encoding.  Simply add these lines at the bottom of your database connection settings in your settings.py file: 'OPTIONS': { 'init_command':'SE...

Django Context Processors by Eric on July 24, 2013

Today I started work on allowing users to edit certain settings we have for them, namely what office they are in and their language.  Using Bootstrap I changed the way our navbar worked so clicking on your name drops down to give you the option of editing your profile or logging out.  Editing your profile brings up a modal with the choices you can change.  This modal is located in our project's base.html file so that users can change their settings on any page.  Generating the form with the options was where this post came in. For a while now I've been using Django's default language changing form.  In it they reference a variable LANGUAGES.  For the life of me I had no idea where that variable was being passed in from.  Now I needed my own variable, OFFICES, to be passed into every page as well.  After a quick Google search I found out that these variables are passed to the templates through context processors.  In your Django settings file you can see all of the context processor...

Django Translation - Going Live! by Eric on July 18, 2013

A while back I wrote a post about Django translation and getting your websites to be translated.  Since then it has been pretty successful in our development version of the site and I have continued to learn the quirks of Django translation.  A couple of things to note: 2. In your .po files you will occasionally see that some of your strings have a #, fuzzy tag above them.  This means that there is already a translation found elsewhere and it's not sure if it should use your translation file in this app or the other one it knows about.  I had a lot of issues with this so I have been removing the fuzzy tag entirely when I find it and this forces Django to use the translation file as is. 4. Ordering matters in INSTALLED_APPS.  Django will load translation files in order of your INSTALLED_APPS list.  Django has a set of built in translated strings that it will use first before using your translations.  I found this was causing an issue when I didn't like the translation used for the...

Django Timezone Conversions by Eric on July 17, 2013

Django does a great job at converting datetime objects to whatever the servers timezone is when your settings are set to do so.  For our big project we needed times to be local to the user.  Django documentation says to allow the user to select their time zone and save it to their user profile, which we plan to do.  Until then, to get things working, a few tests were in order. I have a page where a user can make a note about a company and a timestamp is created and displayed for when the note was made.  When the template is rendered it takes the UTC specific time saved on the database and converts it to our local server timezone of 'America/Denver' automatically.  To make the site more responsive, and less hits to the server, I make the creation of these notes happen through an AJAX call.  The information is then displayed on the list quickly and quietly.  The problem I was running into was that the JSON object returned in the AJAX call had the UTC time and not the local time for t...

Came across this one today and wanted to document it for future needs.  We had a machine running Windows 8 that needed a VM of Windows XP to print reports from an old version of Access.  Everything installed fine and after getting the printer detected on the guest OS using VMTools we ran into a problem where the custom fonts we installed weren't being used.  Turns out you need to have the custom fonts installed on both the guest and the main OS.  The guest OS uses the fonts to view the report but when you try and print the request goes up out of the guest OS and into the main OS where the file will be printed.  If the custom font is not on the main OS it will not be found and will print wrong.  Just a quick tip.

As our huge project progresses we need to start thinking about some of the major features that our users would like to see.  The first is less of a feature and more of a necessity.  Our users are located all over the world and speak four different languages.  To accommodate all of these users we need to translate every bit of text on every page of our application for all of our users.  Luckily for us Django handles translation very nicely.  Read up on the Django translation here. This post will only cover the template tag {% trans %}, more will come as we develop more of our translation setup. Every template generated will need the tag {% load i18n %} at the top to have access to the trans tag.  From this point on any text string will need to be surrounded by the trans tag.  For example, my button has the code `Home` and to use the translation I simply change it to `{% trans "Home" %}`.  That string after the trans is going to be the id for the soon-to-be-created translation files...

During our massive redesign of our internal tools I wanted to make the Django admin page more friendly for us, the software engineers and admins.  Currently when they have problems or need things changed the easiest way to do that is through raw SQL and altering the database directly.  This is inconvenient and can lead to bad data.  Django, by design, abstracts that interaction and creates a great user-interface to interact with including filters and search options. One of the strengths of this is you can define your own custom filters that will appear as normal filters on the UI.  Defining them is quite simple and you can check out the tutorial directly from Django(Search for DecadeBornListFilter).  I wanted to take the query a step further and have it look up items based on a characteristic of a parent object stored as a foreign key.  Using the double underscore (__) Django allows you to access data from that foriegn key in queries.  Following the tutorial I was able to quickyl m...

*args and **kwargs by Eric on May 25, 2013

As a recent graduate in computer science, I really probably should have known this, but today I learned.  This morning as the team and I were discussing some new methods and software to write the discussion came up about what were the *args and **kwargs we so often see in method declarations within Python.  Off to the Internet we went and found a perfect explanation from none other than StackOverflow. Turns out *args and **kwargs are arguments given to a method.  Now, we all knew this to be true, this was not the interesting part.  The interesting thing to me was that you can put these in your method declarations if you want it to accept varying lengths of arguments rather than explicitly defined ones.  Very cool indeed. Now, I've used arguments a lot in computer science especially command line arguments when writing small assignments for classes.  I knew these were passed in as *args but was unsure of what the **kwargs were.  From the StackOverflow answer they are both sets of ar...

Django Dynamic ModelForm Using Closure by Eric on May 23, 2013

At my job we are currently undergoing a total rewrite of their old web-based data entry system.  It's written in Django and works pretty-alright we are just going to make it better.  When it was first written the company was small and very few tests were being done.  This caused the initial design to lack foresight into the growth of the project.  Another problem with this current system is that it was an almost direct port of their old Microsoft Access version they had been running before.  The company is international and a web based system is much better and easier for the employees to use but wasn't designed with growth in mind. With a better understanding of how the systemis being used and what the users wanted it to do we have been in the beginning phases of development for about three weeks now.  Parts of the site are ready to go live within a week but the major parts are left. One obstacle that was brought up by one of the software engineers today was the idea of creating ...

Starting Again by Eric on May 23, 2013

Hello, Welcome to my new blog. Created for me to take notes on my every day workings and findings in the areas of web development and computer science. I will try to update regularly with notes that I take each day working on the various projects that I do. A little about myself, I am a recent graduate of the University of Utah with a Bachelors Degree in Computer Science. I work full-time as the software engineering manager for a textile testing company and do sub-contract work on the side. I created this blog as a place to keep my notes, establish discussion, and learn the tricks of programming and designing WordPress sites. The site is named Eric Saupe, as that is my name, and the tagline (for now) is Things my wife doesn’t understand. Often while I was at school and coming home from work I would want to tell someone about the cool new things I learned or discovered and my wife, Carly, was always the only one around so I would tell her. She would smile and nod her head bu...