General

Watch as I play video games for 25 hours to raise money for Primary Children’s Medical Center.  You can watch every second of it here on my site from the start at 8AM Saturday to the close at 8AM Sunday and even chat with me below.  I will be watching the chat all day and interacting with everyone.  While you are here please donate so we can all raise money for a good cause.  You can read more about Extra-Life and Children’s Miracle Network Hospitals at their websites.

Thanks.

UDPATE:

Thanks to everyone who donated and hung out with us.  Together we raised $200 for Primary Children’s Medical Center.  Thanks again to everyone.

Windows-8-1-Betta-Fish

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 trying out the new Windows 8.  I’ve always liked the OS and think that if you are put off by the tiles and radical change to the operating system that you take some time and play with it.  Windows 8 is really fun and works really well and fast.

One very important note.  If you installed the preview and want to get the real version of Windows 8.1 they are suggesting that you re-install Windows 8 with your original key and then upgrade.  They say that they are having a hard time verifying old keys without having the original Windows 8 installed.

That’s it.  If you are on your Windows 8 machine now you can upgrade to Windows 8.1 by clicking that link.

extralife2012_728x90

Every year the people at Extra Life have a massive drive for donations that benefit hospitals in the Children’s Miracle Network Hospitals.  With most donation drives there is always something that sets their’s apart and Extra Life is in a class of its own.  Extra Life is a marathon of sorts where participants request sponsorship for the distance that they go.  The difference here is that there is no running involved, instead participants will play video games for 25 straight hours.

I’ll be the first to admit that this idea seems like an excuse for a bunch of people to waste a day playing video games.  While that is a side benefit, the real reason it’s being done is for the children of these hospitals.  Thanks to the Children’s Miracle Network Hospitals every cent of your donation goes directly to the hospital that the participant is playing for.  It is my pleasure to say that I will be participating this year and playing for Primary Children’s Medical Center in Salt Lake City.

Last year I raised $160 thanks to friends and family and all of it went directly to Primary Children’s.  This year I am teaming up with two others and our team goal is to reach a combined $500.  We will be streaming every second of our 25 hour journey together on November 2, 2013.  What I ask now is that you please sponsor me or a member of my team.  From now until the end of the event I will have the chart tracking the progress to my personal goal to the right of every page on my blog.  You can donate as much or as little as you would like.  All donations are tax deductible and 100% of your donation goes directly to the hospital.

I hope that all of you see this as a perfect opportunity to give to a great hospital and benefit some children’s lives.  Thank you so much for taking the time to read this and even more for your donations.  If you have any questions please feel free to get in touch with me.

Thank you.

– Eric Saupe

Google-Calendar-icon

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

new calendar

  • From the main calendar view, on the left side of the screen it says My calendars, click the arrow to the right of that.
  • Click Create new calendar
  • Fill in the calendar name
  • Fill in a description
  • Set time zone and location (This isn’t necessary but we have offices all over the world and it helps to distinguish where these meetings pertain to)
  • Set sharing to your organization
  • Add specific people to be able to make changes and add to the calendar
  • Click Create Calendar

You’ve just made a new calendar!  You can change the color of the events by clicking the drop down arrow to the right of the calendar’s name and clicking one of the colors.  Now that we have a calendar we should create a meeting and invite people.  Click Create at the top left to get started.

Create an Event

event

  • Click Create at the top left of the calendar view.
  • Title your event.
  • Set the start date and time and end date and time.
    • Setting the time zone will ensure that the time is converted to whatever timezone the guests are using.  For example, when our China office sets up a meeting they can set the timezone to China and invite me.  On my calendar I see it in my local timezone.  This helps with not having to do the timezone conversion on your own.  Use this!
  • Select if this event is all day and if it repeats, if it doesn’t just move on.
  • Fill in where the event is happening, if you use an address Google Maps can give the guests directions, if you are just doing something that everyone invited knows you can use a common name like Conference Room A.
  • If this is going to be a video call click add video call.  This creates a link to a Google Hangout that everyone invited can quickly jump into when the meeting begins.  The link is both on the calendar event and in any event emails.  This takes all of the confusion about joining a conference call out of the equation and just requires guests to click the link and join.
  • Select the calendar you want this to be displayed on.  A note on this, if you set it to a shared calendar and invite people to the event it will show up on their calendar twice.  Once for the group calendar and once for their personal calendar because they were invited to the event.  For most meetings I leave this to my personal calendar and invite guests.  That way it shows up once on my calendar and on their calendar.  This obviously makes the meeting a bit more private.  If it is necessary that others should see that the meeting is happening change this to a shared calendar that others can see even if they aren’t invited.
  • Add an attachment if one is needed.
  • Set a color, if you’d like.
  • Set reminders, these are for you.
  • Set your status, again for you and others to see if you are free or busy.

At this point your event is nearly completed you just need to invite guests and schedule any equipment or facilities you’ll need.  Inviting guests is very important because it will allow them to accept or deny your meeting request.  You can also check if that times works for them and if you need to change the meeting.  If there are changes to the meeting Google Calendar will automatically email them with the changes.  This is a very critical part because if you don’t invite people how will they know there is a meeting?

  • At the right side of the event creation you can see an Add Guests | Rooms, etc.  Make sure Guests is highlighted
  • Type in the email address of the guest you’d like to add.
  • Either click their name or hit Add
  • The guest list will grow longer below.
  • If a guest is just optional you can click on the black portrait next to their name.  This will change it to white which indicates they are optional.
  • Click Rooms, etc.
  • Choose what rooms or equipment you need.  By default it only displays what is available at the time you have selected already.  If you need the full list then uncheck Show only available and select what you need.  This will help you find an available time if you really need the equipment or room.

Now that you have guests and possibly room and equipment let’s make sure everyone can attend.  Find where it says Find a time above the event details you filled in like description, etc.  This tool will show you when people are available and busy.  If there are any conflicts then just change the time that fits everyone’s schedule.

If everything looks correct then just click the red Save button at the top of the page and you’re all set.  Your guests will get an invitation and you will receive notifications of their responses.

Other Tips

When you receive emails with dates and times you can click these to quickly create a calendar event.  The benefit of this is that on the event there will be a link back to that email.  When you open up that event later and forget why that was created you can click the Source link to the email and remember.

In your settings you can select the times that you normally work and it will warn users if you are normally not in the office at that time.

 

This post was a little verbose and spelled out specifically how to use Google Calendar.  Don’t be afraid to play around with it and figure out how to best use it for you.  Organization and collaboration is key and finding times to get together can be difficult.  Google Calendar is a great solution for businesses and individuals to keep all of that together.  Let me know in the comments if you have any great tips for using Google Calendar in your life or business.

urls

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.py

views.py

base.html

This application, Marketing, uses a base.html page that is extended in all sub pages.  This gives the ability to have the same menu across all pages in the app.  I also limit the links based on whether a customer has been selected or not.  Let’s focus on the url tags though.  In the menu we see there are three links; marketing home, overview, and profile.  The first url tag demonstrates the most basic use of the Django url tag.  Simply it in your href and you have a link.  Make sure to have quotations around the view you are referencing, this was an update starting with Django 1.5.

Some URLs take parameters and we will need to pass those on occasion.  This is very easy to do by putting a space after the view and then adding the parameters, in order, with spaces between them.  If you don’t want to use the default ordering of the URL you can call out the variable name in the url tag.  Changing the marketing overview link to use the named parameter it would change to {% url "marketing.views.overview" cus_id=customer.customer_number %}.  Simple enough, right?  You can even reference views used outside of the immediate app like I have done with the Profile link that moves you to the customers application.  Django will handle all of your URL needs.

Hope this clears up how to leverage this great tool from Django.  I know when I first started with Django I didn’t use this as much as I should have but I’m loving it now.

Bootstrap 3 Released

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!

Screenshot from 2013-08-22 09:04:36

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:

We have this in our base that is inherited by every page to allow the functionality to appear on the entire site.  You need to have the loop even if you only have one message because it helps clear the message storage needs to be cleared.  Now the great thing is you don’t need to return messages when you render your template it will just come with it because of the context processor involved.

To add messages to your page, in your view:

That’s it!  You just have to have the line messages.add_message(request, MESSAGE_TYPE, MESSAGE_STRING) and then use the context_instance in your render and you’re done.

Bootstrap Compatability

To use this with Bootstrap you need to leverage the message.tags dictionary that returns values for each of the message levels.  Here is our code that we use for messages in our Bootstrap site.

As you can see we surround the message in an alert class with an alert-{{ message.tags }} class and add the Bootstrap close button.  This works out of the box for all Django messages except messages.ERROR.  This is because messages.ERROR returns ‘error’ which will make the alert class alert-error which is not what Bootstrap uses, they use alert-danger.  To fix this, as well as add new message types, you need to alter your settings file by adding this variable:

The import just above the line helps to avoid circular imports.  At this point you can see that we have changed the constant for messages.ERROR to return ‘danger’ instead of ‘error’.  This fixes our Bootstrap problem but you can see that now you can add new message constants not already created like messages.AWESOME or whatever else you’d like to make.

There is a lot more to the Django messages framework including error levels that I didn’t get into here.  Check out their docs for the low down on all the different things you can do with Django messages.

Here is a screenshot of an example I did just to test things out.

Screenshot from 2013-08-22 09:09:47

menu-title

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 in mind I needed another solution for a large page of information that could be easily navigable…enter Bootstrap ScrollSpy.

Anyone who has looked at the Bootstrap documentation will immediately notice that has exactly the same problem I’m having; long page with lots of information.  On the left they have a static menu that follows you and highlights what section you are currently in.  Clicking on any one of those links will bring you to that portion of the page.  If it’s good enough for them it’s good enough for me so I set about recreating their side menu style.

ScrollSpy can be used with any .nav menu whether it is one your create with a ul or if it is the main nav-bar at the top of the screen.  ScrollSpy works by checking what element is currently at the top of the visible screen and adding making that nav element active.  This is great but there are a few quirks and tweeks that took me a while to figure out.

At the most basic level you want to add the HTML 5 data-spy attribute to your body because that is what we are going to spy on.  Here is the example code from Bootstrap’s documentation.

The data-target attribute needs to point to the parent element of your nav.  So if you have a nav-bar you’ll need to have an outer div or element with the id that you will use in your ScrollSpy.

Now all of your elements in your nav will need to have an href pointing to the id of the element you will be spying on.  These will need to be valid elements in your DOM.  If you are adding things dynamically and need to update your ScrollSpy use

That’s it for the simple example.  Set the data-spy and data-target on your body tag and you should be all set assuming your nav is set up properly.  One issue you may run into is not spying on the body.  When I originally started this I wasn’t spying on the body tag because I was loading in a template using Django’s block tags.  Granted it was within the body tag at one point but not specifically and I wanted to only watch my div.  ScrollSpy will only work correctly on non-body tag elements if they have a fixed height and a scroll bar.  If you do not have a scroll bar on the element you are spying on it will not work.  Your nav-bar will always have the last element as active.  To fix this just give the element you are spying on a fixed height and you should be good.  In my case instead of using the HTML 5 tags on the body I used JavaScript.  The body tag is used in every page and I didn’t want the ScrollSpy loaded on every single page.  In my JavaScript for my marketing page I have the line $("body").scrollspy({target: "#side-nav", offset:50});.  The offset tells ScrollSpy by how many pixels to offset the scroll before we are actually “in” the element.  I added some padding so when you see the header near the top we are now in the section.

To mimic the fixed sidebar used on the Bootstrap documentation use either the Affix JavaScript from Bootstrap or the affix class on your nav.  Below I have my full example and how it all works.

HTML

 JavaScript

I hide the side nav on smaller resolutions to give more screen real estate. The a tags have both a name and an id because the id is used by ScrollSpy and the name is used as a normal locator on a page.  Let me know what you think and if there are any questions or comments.

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 default your spans to be like a col-12.  If you need to make changes for screens smaller than that use col-xs-.

Navbar Changes

Some little things changed with the navbar.  Just quick changes to classes.  You’ll need to wrap the mobile navbar header in a div with the class navbar-header.  Change nav-collapse to navbar-collapse.

Large and Small or lg and sm?

To keep consistency throughout Bootstrap they have changed many of the button classes from button-large to button-lg and button-small to button-sm. Form groups is also affected by this change.

Those are some of the main things we found.  I’m sure there are plenty of things that are affecting other people.  Head over to their blog to read all about it.  I’ll update this post if I come across anything else.

EDIT Aug 16 12:06PM

It seems we’ve stumbled upon a bug in their Modal.  When a modal is opened and then closed when you reopen it you can’t close it with the x or the close button. They are aware of the issue.  Our modals are actually all out of whack and we are looking into that right now which is how we found that bug.

EDIT Aug 16 12:20PM

Modals loaded remotely are being loaded into the modal and not the modal-body.  To fix this just move all of the divs below the modal into your remote document and that should work for now.  It’s an issue they are discussing.

EDIT Aug 19 1:01PM

When you print it uses the col-xs tag.  Make sure to update accordingly.

Django Timezone Conversions

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 the user.  When the page was refreshed, Django took over and displayed it correctly but I didn’t want to refresh the page every time.

Converting the timezone is pretty simple and here is what I found from the Django documentation altered to be specific to my one time zone change.

A few things to note are that the datetime object must be timezone aware and not naive.  If it is naive you will need to follow the Django documentation link to find how to give datetime objects timezones.  Hope that helped someone, I learned something.