Archives

All posts for the month November, 2013

grunt-logo

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’m just going to show you a basic setupd to recompile your LESS files and minify your JavaScript each time they change.  The first thing you’ll want to do is install Grunt.  To install it you’ll need NPM and Node.js.  If you already have those installed skip down to step 3.

  1. sudo apt-get install npm
  2. Download Node.js from http://nodejs.org/
    1. tar xvzf node...tar.gz
    2. cd node.../
    3. sudo ./configure
    4. sudo make
    5. sudo make install
  3. npm install -g grunt-cli
  4. Go to your project folder and run grunt init to create a basic package.json file.  You also need to create an empty Gruntfile.js.  These need to be at the root of your project.
  5. npm install grunt --save-dev
  6. npm install grunt-contrib-watch --save-dev
  7. npm install grunt-contrib-uglify --save-dev
  8. npm install grunt-contrib-less --save-dev

Step 3 installs the Grunt command-line interface.  Step 4 ensures you have the right files to install your Grunt setup.  Steps 5-8 install the plugins we are going to use in this guide.  Watch is the plugin to watch our files for changes and make something happen when they do.  Uglify is the minification plugin.  Less is what will compile our LESS files to CSS.  The --save-dev automatically puts the plugins into your package.json file.

Now that you have everything installed you need to set up your Gruntfile to do what you want Grunt to do.  Here is a simple example Gruntfile.js.

Let’s walk through that file.  At the top you see grunt.initConfig and in here we will put a dictionary with each key representing either a Grunt keyword or a Grunt plugin.  In the example above you can see there is pkg, watch, less, and uglify.  Pkg reads your package.json for information about your project.  watch, less, and uglify all contain information for the various plugins to know what to compile and where to output it.  I’ll quickly go through each plugin and how it is setup.

Watch contains a dictionary with named methods.  I’ve labeled them after the Django app it relates to in my project but you can name them whatever.  Inside of the labeled section are the keywords files and tasks.  Both are lists and they define what files to watch and what tasks to perform when one of those files have been changed.

Less is structured similarly to Watch but instead of triggering a task it is going to take source files and convert them to CSS files.  It takes one keyword argument with a list of dictionaries with various options.  To use those options you first need to set expand to true.  Cwd is the relative path name to your source files.  Src says where to look for and what type of file they are.  Here we are checking all directories and subdirectories found at cwd for .less files to convert.  Dest is where the CSS files will be outputted.  Ext says what the file extension should be.

Uglify looks almost exactly the same as the less section and that is because it is doing almost the exact same thing, taking source files and outputting files in a destination folder.  I created a sub-folder inside my js folder to house the source files and then send the minified versions to the main js folder.  This allowed me to keep most of my URLs in tact and just add .min.js to the filename.  At the top of uglify there is the options keyword with banner inside of it.  You can customize this to put a small bit of text at the top of your minified files.  Here we have the package name and when it was compiled.

Now that we have all of the plugins configured we need to activate them all.  Place all the names of the plugins you are using under the Plugins section.  After that you create tasks.  Every Gruntfile needs a default task that will be run when you use the command grunt.  I have mine set to do all the things inside of both uglify and less so it compiles all of my code in one command.  Next you’ll need to register the task names so watch knows what to run.  Once you’ve done that you are good to go.  Run the command grunt watch and then change any of your files.  You should see that Grunt automatically redid whatever section it was told to do.

Grunt is a great tool and I have only slightly scratched the surface of what it is capable of.  Please head over to their website to learn more about Grunt and the great things you can do with it.  If you have any tips or tricks with Grunt please comment below.

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 command [sudo] pip install virtualenv.

Once that’s done you’ll need to create a folder for your virtual environment.  For my Django 1.4 environment I made a local folder called Django1.4 using the command mkdir Django1.4.

Now simply run virtualenv Django1.4.

Activate the virtual environment by running source Django1.4/bin/activate.

And you’re in!  This is running a fresh and clean virtual environment not linked to your other installations.  Now you can install any version of Django and all your other Python libraries and they will always be separate from your main installation or other virtual environments.  Note, do not use sudo in any of your commands as that will install the packages to the main installation and not just your virtual environment.

To stop the virtual environment run the command deactivate from anywhere.

Once you have Django installed and the version of Python that you’d like you’re ready to go.  A good idea is to keep track of what version the packages you’re using is.  Creating a requirements.txt file that contains a formatted list of Python libraries and their versions will make setting up new virtual environments even more painless.  Once you’ve setup and installed all necessary Python libraries to your new virtual environment you can export that list using the command pip freeze > requirements.txt.  This creates a text file containing all installed Python libraries.  When you, or anyone else, needs to install your necessary libraries you can run the command pip install -r requirements.txt.  This reads each line in the file and installs the correct version to that virtual environment.

I hope this helps as I’m sure plenty of people need multiple developing environments for testing and maintaining old code.  We will be using it in the future to see what major changes need to be made from our Python 2.6 code to be Python 3 compatible.  If you have any other tips or tricks with virtualenv please feel free to comment below.

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, in our case timezones, are not JSON serializable.  If you’d like to still use pickle for your session variables just add SESSION_SERIALIZER = 'django.contrib.sessions.serializers.PickleSerializer' to your settings.py file.

Simplejson Deprecated

Simplejson has been deprecated and you should now use JSON.  This means you’ll need to change your imports from from django.utils import simplejson to just import json and you’ll need to change any code that uses simplejson to just json.

User Profile Deprecated

They have officially deprecated the use of user profiles attached to the default user in favor of custom user models.  Custom user models should be setup on initial project creation.  If you didn’t do this then you can use something like South to migrate your data.  The easiest way to create a custom user model is shown below by extending the base Django user and just adding to it.

settings.py

models.py

Now anywhere you would make a foreign key to User you’ll need to import settings and use settings.AUTH_USER_MODEL instead of User.

models.py

Those are all of the major things that I needed to change to update everything.  Granted they started to deprecate user profiles back in 1.5 we just hadn’t made the change yet and needed to now.  Hope this helps and if you find any other bugs or awkwardness when upgrading post in the comments below.  You can also read the Django 1.6 release notes on their site.

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.

This code was taken from Bootstrap’s example for modals.  Let’s break it down a bit starting with the button.  You’ll see that the button is styled with some standard Bootstrap classes to make it large and blue.  After that you’ll notice two HTML5 data tags, data-toggle and data-target.  Bootstrap uses these to know that you are planning on using this to open a modal and with content in the id contained in data-target.

Our modal div is labeled with the id of the data-target from the button.  In that .modal there are a lot of other elements listed in their example.  The class .modal makes Bootstrap know this is a modal and .fade refers to how the animation will work when it needs to be shown.  The tabindex is set to -1 to avoid any unforeseen issues with tabbing through your page.  The next three are for accessibility purposes like screen readers and can be omitted if you are not supporting screen reading technologies.

The modal is broken down into sections represented as various divs.  Each div needs to have a corresponding modal class to ensure that Bootstrap can display it correctly.  It is a good idea to have all of these divs in place even if you don’t put content in all of them.  The first is the .modal-dialog.  This is where everything that is the modal will be contained.  The next div is .modal-content.  This is where all of your content like text and buttons will eventually be placed.  There are three sections to a modal, the header, the body, and the footer.  They are labeled with the classes .modal-header, .modal-body, and .modal-footer.

bootstrap modal

The .modal-header is where you place your title and close button.  You’ll notice in the example that the button in the .modal-header contains an HTML5 data element called data-dismiss=”modal”.  This tells Bootstrap to close the modal when this button is clicked.

Inside of the .modal-body is where you’ll place your form and whatever other content you need.  Essentially this acts just like a smaller web page.  You can use all of the Bootstrap formatting and styling and place any JavaScript and content you’d like in here.  Later we will see how to put dynamically loaded content in here.

Finally, there is the .modal-footer.  Most of the time you’ll put another close button down here because a lot of users are used to having both an ‘x’ in the upper right corner and a close button at the bottom.  You can also put any text or maybe a Submit button for your form in here as well.

Loading Content with AJAX

Sometimes you’ll want to load in the content of the modal using AJAX.  There are a couple of ways to do this but using jQuery but here we will use the Bootstrap data elements to make Bootstrap do the leg work for us.  Taking the above example we just need to make a few minor changes.

Main.html

Changing the button to an a tag allows us to give a URL in the href parameter.  Bootstrap interprets this as the content to be loaded and the data-target to be where the content is to be loaded.

ModalContent.html

You’ll notice that I’ve moved everything except the .modal to a separate page. From our testing and experience this was the most consistent way to load content into the modal without any weird CSS or loading issues.

That’s all there is to it.  Modals are powerful and wonderful.  Gathering information from the user or displaying a small bit of information without making the user leave the page is a wonderful thing to add to any webpage.  Let me know how you are using modals below in the comments.
})();
// ]]>

WordPress Logo Cake

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.

Be sure to change each of the lines to suit your theme’s needs.

  • This stylesheet includes everything from the parent stylesheet so this is just to override or add to the parent theme.

Your child theme can override any of the files found in the parent theme.  Most of the time this includes the functions.php file.  For functions.php it does not override it but instead is loaded in addition to and after the parent functions.php.  The functions.php file is a basic PHP file with an opening and closing PHP tag with all of your PHP in the middle.

Creating the folder for your child theme with the style.css will let it show up on your WordPress theme selection.  When the parent gets updated you shouldn’t need to update anything for your child because they are loaded together.  You can make all the changes you want to the base theme.  Hope this helps people get started on changing and customizing a theme for WordPress.  If you have any thoughts or comments on creating child themes in WordPress leave them below.

jquery_logo

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 that your code is run in a timely fashion, namely after the page has been completely loaded, you’ll want to run document.ready.  The jQuery document.ready is run once everything has been loaded into the DOM, in other words once everything, all the inputs and CSS, has been loaded in this function will run.  It’s best to put a lot of your code within this function to ensure that everything that the triggers will be applied to are loaded and can have these triggers applied.  Your JavaScript file should look something like this.

Feel free to put whatever you want inside of that ready function.  You can even make calls to other JavaScript functions you have in the file.  I hope this helps people get started with jQuery.  I’ve seen a lot of people struggle with getting it imported into their site and have it run smoothly.  If you have any tips or questions about jQuery feel free to leave a comment below.

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.