Django Security Advisory: ImageField Abuse by Eric on December 20, 2013

A couple of weeks ago it came out that there is a flaw in Django's ImageField which could potentially allow for phising programs to be uploaded and grab cookies or do other malicious things.  While there will be no fix in Django directly you still need to take precautions on how you serve and receive files uploaded by your users. Django has a page dedicated to fixing this exact issue.  Head over to their security guide and read up on the fixes.  They shouldn't be too hard and shouldn't affect any user experience. Just wanted to post and let everyone know of the vulnerability.

Adding Custom Django 404 and 500 Pages by Eric on December 18, 2013

Django comes with a default 404 and 500 error pages which are dull and boring.  It would be much better if you add your own spin on those pages to inform your user of what happened.  Django makes this super easy by searching your project template files for a 404.html or 500.html file when it tries to render those pages.  This means all you need to do is make a nice Django template called 404.html and 500.html and place it in your project templates folder and you're done!  You'll have access to whatever context processors you are running for information, most of the time these pages won't be user specific and will just display some error. Please note that you won't be able to see them unless you turn DEBUG = False in your settings.py file.  Once debug is off Django will render the 404 and 500 pages rather than the debug output. Hope this helps people get their pages a little more user friendly and comfortable.

Computer Science Education Week by Eric on December 12, 2013

Growing up I was always interested in computers.  I helped put parts in computers and install programs as young as five or six.  As I went to school I always knew I wanted to do something with computers.  Sadly, I wasn't able to take any computer related classes in middle school or high school because they simply were not offered.  I would have loved to take a computer science course before going to college to better prepare myself for the challenges that it brings. Luckily, there is a group trying to change that.  Between December 9-15, 2013 is Computer Science Education Week organized by Code.org.  Their goal is to promote computer science education.  They've done a great job getting celbrities to back the cause and made a great YouTube video that you can see on this page and their site. Computer science is not just for those who want to program.  Computer science is all about solving complex problems and critical thinking.  The solutions computer scientists come up with are m...

How to Install SmartGit on Ubuntu by Eric on December 9, 2013

I've found that a lot of things on Ubuntu are very easy to install but there are some trickery ones that if you don't know the procedure can be a pain to get up and running on a new installation.  Here is a quick setup guide for getting SmartGit installed on a fresh Ubuntu installation. 2. Install the Java Runtime Environment from here.  http://apt.ubuntu.com/p/openjdk-7-jre 4. Install Git with the command sudo apt-get install git-core 6. Install Mercurial with the command sudo apt-get install mercurial meld 8. Download and install SmartGit per their instructions on their site That's all there is to it.  Hope this helps both myself and anyone else looking for a quick guide to get SmartGit up and running.

World Cup 2014 Prediction App by Eric on December 6, 2013

With the World Cup draw just getting over, and the United States bracing for a tough group, I am pleased to announce a small project I have been working on in my spare time, a World Cup Prediction App (if you have a better name for it please email me)!  My wife wanted a way to get her family more into the World Cup.  Since they are big American football and basketball fans they are familiar with brackets and tournaments.  I decided to make a simple website that allows people to create World Cup predictions to compete with others.  This app is still in very early days.  Most of the images are placeholders and the scoring system and group creation is still in the works. You can sign up now to get updates on the app as it develops as well as create your predictions right now.  Just create an account and login.  Then click Brackets at the top and New Bracket.  Enter a name for your bracket and submit.  Now you can select the winners of the groups and the winners of each match by simply...

Connecting Django with AWS S3 using Boto by Eric on December 2, 2013

Amazon Web Services (AWS) has been revolutionary in getting servers and processing power to virtually anyone on the cheap.  You can host your web site there, process large sets of data, even back up your personal files to an Amazon S3 server.  Even if your site isn't hosted directly on AWS you can still benefit by hosting your files from there.  A lot of sites do this to help off load the bandwidth costs onto Amazon because in many cases it is cheaper than the bandwidth costs for your site.  In this post I want to go over how to access these files stored on an S3 instance of AWS from Python using a plugin known as Boto.  You can read the Boto S3 commands at their website.  There are a lot of them and I am only going over the basics here. Boto is a Python interface to Amazon Web Services and helps you interact with every aspect of AWS.  I'm just going to focus on the S3 portion since that is where we store files for clients.  We designed a way for clients to view and store files thr...

Grunt - The JavaScript Task Runner by Eric on November 22, 2013

Developing for the web can be tedious sometimes.  Not only do you need to develop using multiple languages you need to make things as easy for yourself as you can when it comes to deployment.  One of the most basic things you can do to make your source files ready for production is to minify all of your JavaScript files.  There are a few programs out there that will do it for you but today I want to show you Grunt. The great thing about Grunt is it will autocompile and minify your code even as you're developing.  For example, in your templates you set the source for your scripts to the .min.js versions.  Normally once you make a change to the source you'd need to manually minify the file again before refreshing the page.  Grunt will do all of the minifying for you and using one of their plugins can watch your code for changes and automatically recompile when you save. I'm going to go through a basic setup for Grunt.  There are many more advanced things you can do with Grunt but I'...

Developing with Virtualenv by Eric on November 19, 2013

When developing you'll occasionally need more than one version of Python, Django, etc. for your various projects.  The way to have multiple versions of the same library installed on one machine is to use virtualenv.  Virtualenv creates a virtual environment where you can install a unique version of Python, Django, etc.  This is great for testing and for working on old projects where you need old versions of things.  For example, our old project at work uses Django 1.4 but the new system uses Django 1.6.  I can't run the 1.4 project with 1.6 because of all the deprecated methods and changed folder structure.  Instead, I create a virtual environment for 1.4 and another for 1.6.  This way I load the Python modules required for one project differently than the other.  In this guide I want to show you how to quickly set up a new virtual environment and install all necessary Python libraries. The first thing you'll need to do is install virtualenv.  The quickest way is by using the comma...

Django 1.6 Update Notes by Eric on November 15, 2013

Django finally released version 1.6 of their Python based web-framework.  I use it at my job everyday and we ran into issues with the old system where they were using such an old version of Django that it was impossible to just simply update.  One of the goals with the new system we are creating is to stay as up to date as we possibly can with all of our technologies.  For us that is Bootstrap, jQuery, Django, and a few other third-party web plugins.  Here are a few of the notes I'm writing down for myself and for others to use if they run into issues in upgrading from 1.5.4 to 1.6.Default session serialization switched to JSON Django changed the way the session variable is being stored from pickle to JSON.  This is for the best as there is an exploit if the attacker knows your SECRET_KEY and has access to the CSRF tokens being sent by users and the session variable uses pickle.  Using JSON fixes this and Django has elected to make it the new default.  The issue is that some things...

How to Make Bootstrap Modals by Eric on November 13, 2013

One of the most commonly used features of Bootstrap is their Modal component.  If you don't know what a modal is it is like a pop up except it can contain HTML.  This means you can put any sort of information you'd like in it, a common example is a modal that contains a login form.  This post will show you how to create your own modals and even load in the content dynamically using AJAX.Modal Basics Let's start with the most basic modal that contains static content.  You'll need two things.  The first is a button or link to trigger the modal.  Secondly, you'll need to put the modal div somewhere on your page.  Below is some example code with the button and the modal div.<!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div clas...

Create a Child Theme in Wordpress by Eric on November 7, 2013

Wordpress is a great way to get a site up and running quickly.  A lot of people think it is just for blogs but it can be whatever you'd like it to be with its customizable themes and content manager.  There are hundreds of Wordpress themes online and a lot of times you might really like everything about a theme except for a few changes.  To make those changes the best thing to do is create a child theme. A child theme is a way to update and make changes to a base theme.  There are just a few steps you need to take to create a child theme and then you'll be ready to make changes. • Create a directory in your themes folder for your child theme • The general naming convention is to name the folder the name of the theme with a -child appended to the end. Example: greattheme-child. • In the child directory create a style.css file.  It must start with the following lines. /* Theme Name: Great Theme Child Theme URI: http://example.com/great-theme-child/ Description: Great Theme Child...

Getting Started With jQuery by Eric on November 5, 2013

I write a lot of posts that use jQuery but I haven't gone through the basics of getting started with jQuery on your new website.  There are just a couple of steps that you need to do to get started with using jQuery and getting it started right. The first thing you'll need to do is load jQuery into your website.  The easiest way to do that is to add the following line inside the <body> of your base HTML template that will be used throughout the site.<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> Google hosts a number of web libraries and they are a great way to get the latest version of various libraries without have to hit your servers with serving those same files.  If you are using an older version, or an altered version, of jQuery you'll want to host it yourself but this is the simplest way to get started. Once that has been loaded into the <body> of your base HTML file you can start writing JavaScript using jQuery.  The best way to ensure...

Since Bootstrap dropped support for their typeahead they have since told people to use Twitter's typeahead.js.  It has a lot of great features that I have covered in an older write up about Twitter Typeahead.js.  In this post I wanted to go over the custom events that are triggered and how you can use them to get more out of Twitter Typehead. There are five triggers in the typeahead.js and you can tap into each of these to do what you'd like when these events are triggered.  Below are those events and when they are triggered. • typeahead:initialized – Triggered after initialization. If data needs to be prefetched, this event will not be triggered until after the prefetched data is processed. • typeahead:opened – Triggered when the dropdown menu of a typeahead is opened. • typeahead:closed – Triggered when the dropdown menu of a typeahead is closed. • typeahead:selected – Triggered when a suggestion from the dropdown menu is explicitly selected. The datum for the selected sug...

Clearing Float Elements by Eric on October 24, 2013

As you develop web pages you may come across moments when you need to float an element.  Using the CSS float you can make elements be pushed around to make room as more elements are added.    A nifty feature in and of itself but there is a common problem that tends to crop up. Recently I was working on a small navigation header that included two buttons and a search box.  The buttons were standard button elements and the search box had been floated to move with the varying size of the screen.  The problem that happened came when you made the screen too small and the floated box dropped to the next line.  Directly beneath this row of elements was a header row that had a background and when the search box dropped down it would be hidden by this header instead of pushing the header down as would be expected. After doing some research into float elements I came across this question on StackOverflow asking What is the best way to clear the CSS style "float"?  In it the top answer expla...

SmartGit Fix for Ubuntu 13.10 by Eric on October 23, 2013

After updating from Ubuntu 13.04 to 13.10 I found that my SmartGit was broken.  I could just use the standard git commands but that's boring and I like to have a GUI so SmartGit is nice for that and it needed to be fixed.  Apparently Ubuntu 13.10's GTK libraries aren't very compatible with SmartGit, any version of it.  The fix is simple. 2. sudo nano smartgithg.sh 4. Add the line UBUNTU_MENUPROXY=0 just underneath the comments at the very top of the file. 6. Save. That's it!  Fixed.  Hope this helps.  I'll update when there is an official patch.  In the mean time this works fine. UPDATE They just released RC1 which fixes the problem.  Download SmartGit 5 RC1 here.

Making jQuery Ajax Requests by Eric on October 22, 2013

In a lot of my other posts I show sample code that makes heavy use of ajax calls and today I wanted to take a step back and explain what exactly are ajax requests, when you should use them, and how to get the job done.  First, ajax stands for Asynchronous JavaScript and XML which may still be a bit too technical but essentially what it does is allow you to make a request to the server for data without having to refresh the page.  Obviously this is a very useful tool to have no matter what you are doing on the web.  No one likes to have to wait for the entire page to reload all of the images and content just because you clicked a button to show more data on a section of the page. Ajax calls should be used anywhere you want to get data without doing a hard refresh.  This can range from something small like updating a table every ten seconds automatically or to something complicated like automatic submission and verification of individual form fields.  One way to leverage the asynchro...

How to Install Komodo Edit on Ubuntu by Eric on October 21, 2013

My IDE of choice for developing lately has been Komodo Edit.  It's lighter than Eclipse and does what I need it to do.  Installing and updating on most OS's is easy but on my Ubuntu installation I always have to do a few more tricks to make everything work just right.  This post is to help me remember exactly the steps of installing and updating so that I don't need to Google it every time. 2. Download the latest version of Komodo Edit 4. tar xvzf Komodo-Edit-8.5.2-13850-linux-x86.tar.gz Update this to your downloaded version 6. cd Komodo-Edit-8.5.2-13850-linux-x86 8. sudo ./install.sh 10. When prompted for installation location enter /opt/Komodo-Edit-8/ 12. If you already have Komodo Edit installed in that location run sudo rm -r /opt/Komodo-Edit-8/ to uninstall it first. 14. export PATH="/opt/Komodo-Edit-8/bin:$PATH" 16. Search for it in your Dash and all should be good. Hope this helps someone else, I know it will help me.

Windows 8.1, the long awaited updated to Microsoft's latest OS, is now available through their App Store as an update.  Why they didn't just do it through the traditional System Update is a bit confusing but it's in the App Store.  I have had the preview installed for a week or so and really like it.  A lot of the problems that people had with Windows 8 are fixed, to an extent, with 8.1. A few notable changes, for desktop users, is the ability to boot directly into your desktop rather than the tiles.  I love that feature and it should have been in from the beginning.  They also brought back the Windows button in the bottom left though it does not bring up the traditional Start menu it instead brings up the tiles.  Tiles have been improved as well giving better customization of tile size and even naming columns.  Backgrounds and customization all around the OS has improved.  For the most part I think that it is a solid improvement and fixed on a lot of the issues people had when try...

JQuery Find, Parents, and Siblings by Eric on October 15, 2013

A very important tool when working with JQuery is the ability to traverse through elements in the DOM.  When a user clicks on a button you may want to change the color of the nearest row to display the click.  Maybe after an input you want to change the nearest column to be hidden or show that input value.  Whenever you need to walk through the elements in your page JQuery has a way to do it.  All of the methods shown here can be called with no arguments but are more helpful if you call them with a selector of some kind either an id, class, or element type. The first question you have to ask yourself is where is the element I'm looking for from my current location?  For instance, that button that was clicked is on a row.  The row element contains the button so we need to travel upwards.  When traveling up you can do one of two things, $.parent() or $.parents().  The difference between the two is that the latter travels more than just a single level in the DOM.  Obviously that makes...

Django works wonderfully as a web framework but sufferes from sub-par data migration.  Luckily for all of us one of their developers has created an application called South that fixes this very problem.  South is meant to bring data migrations to Django and make it easy to make schema changes that are quickly applied to your database without much effort on your part.  Django does have a few built in features for dropping tables, creating tables, and will give you the code to enter to create the tables but it doesn't help much when you are working on a production server that you don't want to simply drop and readd tables all the time. To get started just go through the installation tutorial.  Once you've done that you're ready to migrate your data!  This is best done from the very creation of the project so South can help you from the beginning.  If you are starting a new project go here and follow along.  I'm going to focus a bit more on converting an already created project and ma...

Google Calendar for Business and Life by Eric on October 1, 2013

Google has worked really hard at making their Google Apps for Business to be something great that all businesses can use. They say that over five million companies are using Google Apps for their business and the company I work at is one of them. In order for Google to compete with the powerhouse that is Microsoft Office Suite they need to have some pretty great things, and they do. I've already done a post about Hangouts which works well as a chat client and awesome for video conferencing. Today I'm going to show off Google Calendar and how to use it to its fullest in a business setting as well as a few tips for making Google Calendar your personal online calendar of choice. A lot of basic features you can find with any calendar program are already present including multiple calendar support, calendar sharing, and permissions.  Let's quickly run through how to create a new calendar and share it with your company.Create a New Calendar • From the main calendar view, on the left sid...

Take Advantage of the Bootstrap Grid by Eric on September 27, 2013

One of the biggest features of Bootstrap is their responsive grid.  It helps developers and designers easily space out content on a page without having to worry about margins and screen sizes.  I've done some posts in the past talking about the best way to use the various screen size related tags.  Today I wanted to focus on taking all of that to the next level.  The grid system works at every level as far down as you want to go.  Below is a catalog I created which quickly informs of a moisture test.  There is a lot of information to display and doing so in a clean format is hard.  Using Bootstrap's grid system at every step has helped to create what you see below. ![](/img/catalog-1024x362.png) This is the final result that we will be breaking down.  You can see that there is a test number on the left without anything underneath it, a larger section with text followed by smaller sections and even a table.  Let's break down every layer and div. ![](/img/catalog-outer-row-1024x362...

Custom Column Widths in Bootstrap Tables by Eric on September 24, 2013

One of the biggest things I've run into with Bootstrap are their tables which are dynamic and grow and shrink depending on content size.  For the most part this is completely desired.  Every now and then you want a bit more control over your table column widths.  This is a very simple trick that I wanted to document for those who have run into the problem of wanting more control than Bootstrap gives initially. Say you've created your table as shown below.<table class="table table-condensed table-striped"> <thead> <tr> <th>Number</th> <th>Standard</th> <th>Category</th> <th>Labs</th> <th>Description</th> <th>Min. Sample Size</th> </tr> </thead> <tbody> {% for test in tests %} <tr> <td>{{ test.number }}</td> <td>{{ test.name }}</td> <td>{{ test.category }}</td> <td>{{ test.labs }}</td> ...

MySQL Queries for Grouping Data By Year by Eric on September 19, 2013

A big request we had in designing our new system was an easier way for users to get data from the database.  With the large amounts of data that we use across dozens of tables it can be slow going to use the Django methods.  Instead they have given the ability to use and write raw SQL and use that result how you please.  You can read about using cursors here, I may do a post in the future about them but today I want to focus on the SQL we wrote and the problems we encountered. The requested query was to get a list of customers, how much business we did with them, and break that up by year.  The year could be inputted by the user so it needed to be dynamic enough to scale.  The first way we tried was to create a temporary table for every year needed.  Each table was created from a SELECT statement that was specified for the office as well as the year.  Below is the SQL command for one of the offices and years but you can imagine we copied this code, almost verbatim, but changed the ...

Bootstrap Tabs with Dynamic Content Loading by Eric on September 17, 2013

Bootstrap comes with a lot of different JavaScript tools to make your website more user friendly.  Today I'm going to cover Tabs and then give a more advanced example for making your tabs have dynamic content using AJAX.  We all know what tabs look like and in a website they can be very useful to group similar content without having to create a new page for each chunk of data.  Below is an example of the basic Bootstrap tabs.<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> <div...