Archives

All posts for the month September, 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.

catalog

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.

catalog-outer-row

The outer div of the entire thing is given the class row.  The row class keeps everything tight to the 12-column Bootstrap design and doesn’t let things roll over unexpectedly.  If you forcefully go over the 12-columns it will obviously bump it but sticking the row class on an outer div will help keep everything together.  This is also useful for printing as I don’t want a row to ever be cut between two pages.  You can either add @media print{ .row{page-break-inside:avoid; } or give that outer div an extra class that you give the CSS to so that it won’t split between two pages.

catalog-section-divs

Here you see how I did the test number on the left with nothing underneath while having a lot of content on the right.  I give one column to the number and eleven to the content.

catalog-inner-divs

Looking inside of the larger div there is a lot more going on.  To start off with I use header tags which give breaks after each header and then a <p> tag around the description.  After that I create a brand new row, yup a row within a row (rowception! OK, I’ll stop), which holds even more information that we will break down next.  Last we have a simple header and table.  This table does not have a normal thead/tbody since I put the th tags and td tags on the same line.  To have consistent spacing on th/td cells across all tables I have added the CSS table { table-layout: fixed;}.

catalog-row-divs

The final piece goes even deeper as we have already been dissecting a row let’s break apart this new row.  Still using the twelve column system of Bootstrap I have given every column a spacing of 2 except the last one which is size 4 with an offset of two.  Notice how using the row on the outside gives us a fresh twelve column grid to work within inside of an already created component.  Inside of each of those grid elements you can add whatever you’d like, including more rows!  The first and second contain unformatted lists, the third is a paragraph, and the fourth contains a Bootstrap alert.

That’s all there is to it!  Bootstrap gives you everything you need to create perfectly spaced content at every level on the page.  If twelve columns isn’t right for you they even allow you to customize how big you want your columns.  I hope this was informative and demonstrated how to use Bootstrap above and beyond their simple examples on their page.  If you have any great tips when using Bootstrap please leave a comment below.

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.

Let’s say once you render this table the description for the test is way too big and is pushing the other columns away and making them smaller than you think they should be.  The quickest way to fix this is to simply give column sizes to your table headers.  Whatever the width of your table headers your table data will conform to that size.  Knowing this we can alter the above example to make description take up less space and give a little bit more to other columns.

Super simple.  Works great.  Give it a try.  The biggest request I’ve had, that I have yet to find an answer for, is how to stop the overflow for a table data and show ellipsis instead using Bootstrap.  It’s a simple enough procedure in HTML but Bootstrap is doing something else that doesn’t allow the overflow.  If anyone knows how to keep a table data on one line and have it show ellipsis please leave a comment.

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 SELECT statement to get the correct data.

Once all of these tables were created we had to do a ton of LEFT JOINs against the main office to get the split of the total between the other offices.  Needless to say this ran very slowly.  Using Python to change the %s to a year a typical loop through creating the tables, gathering the data, and returning took roughly 16 seconds.  Yeah, not good.  The good part was that it automatically put everything into one line for each client and one column for every office total and annual total.

Obviously we had to cut down on the time.  By changing how we did our whole process we can cut the time down significantly without using JOINs.  Now this may not work in perfectly raw SQL because we are saving the output to a variable and then combining them.  Below is the new SQL code again changing the first one for each office.  The difference here is that instead of doing a table and SELECT for every year we are doing one SELECT for all the years and creating a row for each annual total.  So requesting data 5 years back could give a possible five rows for each customer, one for every year.

After every select we save the output to a variable named for the office.  In Python these are saved as lists of dictionaries.  In the end we combine the lists and then create an output of the combined totals.  I wrote an algorithm to loop through the giant list and adding the data to an output dictionary that had only one entry for each client.

By changing the way that we create the tables we were able to cut that time to ~5 seconds.  It’s a lot of data so it takes some time but 1/3 the last time is a big improvement. Obviously this code won’t work in just SQL but it is useful for Django cursors.  If there is a way to accomplish what we are doing, in a very fast query I would totally be up for hearing about it in the comments.  I have altered our actual MySQL statements to be more readable.  In the end we just wanted a list of clients and the total work orders done for a year as well as the total for each office for that year.  Our solution works and we are fairly happy with it.  Always room for improvement though.

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.

You’ll notice that there are two sections to the tabs. The first is the nav-bar ul. This is where you give each tab a title. You can even do drop downs here because they are normal Bootstrap nav items.  That’s all there is to the basic Bootstrap tabs.  They work wonders and you can see the live demo on their site here.

To make each tab load in data via AJAX you’ll need to tap into Bootstrap’s triggers.  Here’s what I did using the same example as above and the JQuery below.

The trigger is fired when the tab is changed and the e.target is the event target, or in our case the newly activated tab.  Since the tab’s href points to the id of the element we want to change data we can use that to point our data to when it comes.  I’ve added a check to make sure we are only making the AJAX call if that tab is empty to help on load times of large data sets but you can remove that if you’d like.

That’s all there is to it.  Nothing too difficult but useful when you need tabs and need to change that data without reloading the page.  Let me know how you are using tabs below in the comments.

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 for walking around our campus it is nice to always stay connected.

Messaging Benefits

Hangouts

We explored other options for replacing our instant messaging system, most people here were using Skype, and ran into a few issues that Hangouts solved.  First,  Skype does not send messages unless both users are online.  So if I login to Skype and send a message to another person who is not online they may not see that message for days.  This has caused a lot of headache and miscommunications in the past.  Hangouts will send the message to their Gmail inbox if they are offline.  The next time they login to their account they will see your message.  Facetime is a great program but it’s essentially video only and we wanted a chat client as well.  There’s always iMessage but the problem with both Facetime and iMessage is we need Apple devices, which a lot of people have, but not everyone.  Hangouts fixes this with the universal compatibility I already talked about.

Video Conferencing

Hangouts is integrated into every Google product now.  If you are using Google Apps for Business when you schedule a meeting you can set it to be a video meeting and Hangouts will handle the setup.  When the meeting begins the users simply need to click on Join Video Call and Hangouts groups everyone together in the same Hangout and your meeting can begin.

calendar

You can also have video Hangouts, including screen sharing, with up to 15 people at the same time!  That’s amazing!  Skype charges for anything more than two.  We have been making video phone calls to each other a lot to talk around the office quickly and to share our screen and ideas.

Plugins

feat-hangouts

Hangouts comes packaged with a lot of plugins you can use out of the box that make it even better.  Google Drive allows you to open a document for all users in the Hangout to edit at the same time.  YouTube lets the group watch YouTube videos together.  You can even set a queue and everyone can add to it.  When a video is playing everyone is muted so the Hangout can watch in peace but you can un-mute yourself if you want to talk.  There is also an Effects plugin that lets you play silly sounds and put weird props on your head to make Hangouts just a little more fun.

Get It

I’ve used Google Hangouts for over a year and absolutely love it.  In my last year of college it was a life saver for group projects because we could work on the same document at one time while all talking together.  Screen sharing was great for pair-programming and helping each other debug and show off new features.  Since we decided to try it out at work Hangouts became the go to service for chat.  We have held several video meetings over Hangouts with both Europe and Asia and had no problems at all.  To get the most out of Hangouts be sure to install the Chrome plugin.  Seriously, if you aren’t using Google Hangouts sign up for a Google+ account, even if you won’t ever use it, just to use Google Hangouts.

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.

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 here but on your page it will be rendered as HTML.

graph

Line graphs can have multiple sets of data to have more than one line of data.  Using the options you can even change the style of each line in the graph.  Below is an example from their website and you can see the options that they have changed to make each line look different.

lines
There are a lot of different types of graphs including pie, bar,  and so many more.  Take a look through their site to see them all.  The great thing about jqPlot is they are all rendered with almost the same code.  Each jqPlot code is rendered by calling jqplot, giving an element to place the graph in, and then setting your data and giving options.  Just below is an image of how I have used the pie charts and bar graphs to display data for some of our clients, names have obviously been changed.
Supplier Overview

Advanced AJAX

Up to this point we haven’t used any AJAX calls to pull the data.  Obviously to help with page loads some AJAX calls for data would be helpful.  To do this you need a helper method that jqPlot will use to make the AJAX calls.  One thing to note is to make sure the data is returned in such a way that the graphs can use.  Generally this is in a list containing integers like the first example  For multiple series’ just do a list of lists.  Simple enough?  Let’s look at the helper method and the jqPlot AJAX calls I make.

The first variable function is used in the two jqPlot calls as an AJAX helper.  The next section, labeled Labels, is used to get the labels for the graphs.  The labels for the graph need to be there when the graph is rendered and cannot be added after.  I have the names of the series’ around the page so I just pull them.  Another way you could do it is the return a dictionary from your AJAX call and then split it in the ajaxDataRenderer function but I have done it this way.  To use the renderer you just call jqplot, give the target and the remote URL and everything should run smoothly.

The line graph is first and as you can see I have a title, which is translated using Django’s JavaScript translation, we put the labels and pad the axis to make everything flush.  The bar chart is similar in almost every way with the exception of a couple of options specific to bar charts.  Below is the result of the two graphs I’ve created.  Some of the text is a bit scrunched together so a little rework is needed but for the most part it is ready to go.  Changing fonts and sizes is simple with the jqPlot options.

example

Nothing too special but it works for me and looks great on the page.  I hope this has been informative to someone.  JqPlot is pretty vast in its documentation and can be a little overwhelming.  If there are any questions or weird things you come across feel free to comment below.