Debugging email on Django application development

One of the common functionalities in Django applications is to send emails, such as for user password resets.

Python SMTP

Since Python comes with it’s own SMTP, it’s easy to redirect the emails from the local Django application being developed to this dummy mail server and see the emails on the console.
Here’s how to do it:

  • Run Python SMTP with this command line:
    python -m smtpd -n -c DebuggingServer localhost:1025
  • Define Django email server as:
    EMAIL_HOST = 'localhost'
    EMAIL_PORT = 1025

And that’s it. All emails sent will be seen on the console where you’r running the Python SMTP.
This technique is actually quite useful since you can use this for any application you are developing locally.

Redirect to Console

There’s another way to see the emails on the console with no dependencies.
To do so, just configure the email to use the console email backend.

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

This will actually redirect all emails to the standard output, which usually is the console.

Redirect to File

Another approach is to redirect the emails into a local file for prior usage.
To do so, just configure the email to use the file email backend.

EMAIL_BACKEND = 'django.core.mail.backends.filebased.EmailBackend'
EMAIL_FILE_PATH = '/tmp/app-messages' # change this to a proper location

This will write all emails into separate files located in

/tmp/app-messages

and you can analyze them latter.

Maintaining .Net Browser Compatibility

The .Net framework has a set of predefined browser capabilities. In short, this means that dependending of the browser being used, .Net will create the appropriate HTML.
Unfortunately, sometimes it does not work as expected. Plus, .Net is not capable of keeping up with the speed of the release cycles of all the browsers that are available.

The end result is that sometimes, our .Net application render differently in some browsers, even if they shouldn’t, and, even worst, some functionalities may not work.
To overcome this problem, .Net has a property that allows to specify what to do with the distinct HTTP agents.
Using the ClientTarget property from the Page class, developers can, for instance, assume everyone is using, at least FireFox 3 or Internet Explorer 7.

In short, the solution is to force all “old” browsers to behave as a certain browser and code it from there. This can be achieved either through the clientTarget options in the web.config application file, setting this property to the entire application, or specifically on a page as an attribute of the Page directive.

Zoom images on VirtueMart products

Having a good zoom efect on Virtuemart products page details can be easy.
This solution is based on Dynamic Drive Image Power Zoomer v1.1, based on jQuery, and was tested on VirtualMart 2.

The first step is to download the ddpowerzoomer.js file from the Image Power Zoomer v1.1.
Place this file on your VirtueMart template Javascript folder, usually /templates/VM_TEMPLATE/js, where VM_TEMPLATE is your current VirtueMart template.
Open the file and find the init:function. Inside it, find the first div, it should be the first line, and add z-index:100000 to its style, so that it looks like this:

  init:function($){
    var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;z-index:100000;" />')
      .append('<div style="position:relative;left:0;top:0;" />')
      .appendTo(document.body) //create magnifier container and add to doc
    [...]
  }

This will force the zoomed image div container to be above the Joomla! Modal SqueezeBox, that you can find in then /media/system/js/modal.js file. That is the file loaded by Joomla!, which is non readable by humans, at it’s side there is modal-uncompressed.js, the human readable version.
The SqueezeBox is responsible for making the screen dark and showing the large picture. Since the SqueezeBox sets its z-index to a high value, 65000+, we need to force the zoomed image to be above it, that’s why we’ve set the z-index to 100000.

Next open the VirtueMart template index.php file, located on /templates/VM_TEMPLATE/index.php, and right before closing the head tag, place the following code:

<!-- Zoom Component -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

if (null != SqueezeBox) {
  SqueezeBox.presets.onUpdate=
    function applyZoomEffect() {
      jQuery(document).ready(function($){ //initialize power zoomer on DOM load
        $.getScript("<?php echo $template_path ?>/js/ddpowerzoomer.js", function(data, textStatus, jqxhr) {
          var $imgref=$('#sbox-content > img');      
          options = {powerrange:[2,5], magnifiersize:[150,150]};
        options.largeimagesrc = $imgref.attr('src');
          ddpowerzoomer.setupimage($, $imgref, options)
        });
      });
    }
}
</script>
<!-- End Zoom Component -->

Note that the jQuery loaded is the current stable, 1.7.2. Your template may already load a previous version of jQuery, they should not get in conflict.

Now run your online store and click on an image product, it should have a zoom option

Here’s some explanation on how all this works.
The product large image is dynamically created when the user clicks on the product thumbnail, though a CSS event.
That’s why we have to override the update event of the SqueezeBox, which is responsible for showing the large image.
When the SqueezeBox shows the large image, it will call the applyZoomEffect function that we have defined.
This function will load the ddpowerzoomer.js script file and after it loaded, it will find the large image div container, set the zoom options (check the Image Power Zoomer options) and finally it will set up the zoom for the large image.

Django wysiwyg Editor

Many Django projects require a wysiwyg editor. To cover this, there is an application for making Django textareas rich text editors: django-wysiwyg.

To use it, start by installing it through

pip install django-wysiwyg

.
Then, on your HTML template, include application:

{% load wysiwyg %}

As an example, take the following form:

#
# Event Edit From
#
class EventsDataForm(forms.Form):
    """
        Event data form
    """

    min_description_chars = 10
    max_description_chars = 2000

    ltitle = ugettext("Title")    
    ltitle_help = ugettext("The title of the event.")
    ltitle_required = ugettext("Please enter the title.")
   
    ldescription = ugettext("Description")
    ldescription_help = ugettext("Enter the event description.")
    ldescription_required = ugettext("Please describe the event.")    
    ldescription_min_length = ugettext('The minimum length is %s characters.')%(min_description_chars)
    ldescription_max_length = ugettext('The maximum length is %s characters of plain text (less characters for formated text)')%(max_description_chars)

    id = forms.IntegerField(widget=forms.HiddenInput(), required=False)
    title = forms.CharField(max_length=60, required=True, label=ltitle, help_text=ltitle_help, error_messages={'required': ltitle_required})
    long_description = forms.CharField(widget=forms.Textarea(attrs={'cols': 50, 'rows': 5}), min_length=min_description_chars, max_length=max_description_chars, required=True, label=ldescription, help_text=ldescription_help)

The “long_description” field is the field that will be wysiwyg editor.

Then, on your form, setup up the wysiwyg, draw the form and link it to your form field. Here’s an example:

{% block content %}
<form enctype="multipart/form-data" action='.' method='post'>
  {% csrf_token %}
  <table>  
    {% wysiwyg_setup %}
    {{ form.as_table }}
    {% wysiwyg_editor "id_long_description" %}
  </table>
  <input type="submit" value="Save" />
</form>
{% endblock %}

The

{% wysiwyg_setup %}

sets up the application.
The

{{ form.as_table }}

draws the form.
The

{% wysiwyg_editor "id_long_description" %}

links the form field “long_description” to the wysiwyg via the identifier.
Take special attention to the identifier, it’s the name of the field in the forms and it should be preceded by “id_”.

That is enough to make the “long_description” field a wysiwyg editor.

If one requires customization, for instance change the width or the toolbar buttons, one can do this by customizing the

django_wysiwyg_editor_config

variable. See the documentation for extra information about how to customize the component.
The trick is to perform the customization on the bottom of the page, just before closing the

</body>

tag.
First, load the “django_wysiwyg_editor_config” block, then load its code and, finally, apply your customization. Here’s and example:

<script>
{% block django_wysiwyg_editor_config %}
{{ block.super }}
django_wysiwyg_editor_config.width = "450px";
django_wysiwyg_editor_config.height = "200px";
{% endblock %}
</script>

And that’s it.

Visual Studio C# Express in x86 32 bit

Visual Studio Express edition is a striped down version of the professional version. Thus, some features are not directly, or easily, available.
One of these features is to run in 32 bit on a 64 bit computer.
To make it work, all one has to do is define the target platform as x86:

  1. Close the C# project.
  2. Open the C# Project file, .csproj, with a plain text editor, such as Notepad.
  3. Make shure that the following entry is present in all three sections of PropertyGroup:
<PlatformTarget>x86</PlatformTarget>

Here’s a snippet:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <Platform Condition=" '$(Platform)' == '' ">x86</Platform>
    <ProductVersion>8.0.30703</ProductVersion>
    <SchemaVersion>2.0</SchemaVersion>
    <ProjectGuid>{E8D4119C-8E3F-4A41-84A6-70F848F3CA1A}</ProjectGuid>
    <OutputType>WinExe</OutputType>
    <AppDesignerFolder>Properties</AppDesignerFolder>
    <RootNamespace>WindowsFormsApplication1</RootNamespace>
    <PlatformTarget>x86</PlatformTarget>
    <AssemblyName>Frotas</AssemblyName>
    <TargetFrameworkVersion>v4.0</TargetFrameworkVersion>
    <TargetFrameworkProfile>Client</TargetFrameworkProfile>
    <FileAlignment>512</FileAlignment>
    <IsWebBootstrapper>false</IsWebBootstrapper>
    <PublishUrl>C:\work\MyApp\Publish\</PublishUrl>
    <Install>true</Install>
    <InstallFrom>Disk</InstallFrom>
    <UpdateEnabled>false</UpdateEnabled>
    <UpdateMode>Foreground</UpdateMode>
    <UpdateInterval>7</UpdateInterval>
    <UpdateIntervalUnits>Days</UpdateIntervalUnits>
    <UpdatePeriodically>false</UpdatePeriodically>
    <UpdateRequired>false</UpdateRequired>
    <MapFileExtensions>true</MapFileExtensions>
    <ApplicationRevision>6</ApplicationRevision>
    <ApplicationVersion>1.0.0.%2a</ApplicationVersion>
    <UseApplicationTrust>false</UseApplicationTrust>
    <PublishWizardCompleted>true</PublishWizardCompleted>
    <BootstrapperEnabled>true</BootstrapperEnabled>
  </PropertyGroup>

  [...]

After performing a rebuild, the application will be built in 32 bit.

jQuery Calendar Date Picker in Django Forms

One of Django missing features that all developers miss is the lack of a calendar component that allows a user to select a date from a visual component instead of writing the date in a text field using a predefined format.

The common solution that seems to use the calendar from the administrator graphical interface.
Unfortunately this is a hack that takes too much work for a possible failure, since a Django update may break it all.

While Django does not provide such component, the best option is to use a solid solution, such as using the independent jQuery Calendar Date Picker.
This can be set up in ten minutes and does not depend on Django version.

The first step is to download the jQuery Datepicker component.

Uncompress it and put it in your media directory, so that it looks something like “media/jquery”, or something else that is fits best with your structure. For the current example “media/jquery” will be used.

In your HTML file, include the following scripts:

<link type="text/css" href="/media/jquery/css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/media/jquery/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/media/jquery/js/jquery-ui-1.8.18.custom.min.js"></script>

Please note that the file names will vary according to the jQuery version and the CSS will vary according with the selected template. Don’t forget to confirm the location and file names.

Next, you must bind your form objects with the jQuery Datepicker with the following script. Also include this on your HTML file

<script>
$(function() {
  $( "#id_form_date_field" ).datepicker();
});
</script>

Where “form_date_field” should be your form date field, keep the “#id_” because Django precedes the ids with “id_”

If you require internationalization, load the correspondent i18n file after the “jquery…min.js” file:

<script type="text/javascript" src="/media/jquery/development-bundle/ui/i18n/jquery.ui.datepicker-{{request.LANGUAGE_CODE}}.js"></script>

This will load the appropriate i18n file.

If you try it and it’s not working, check the files location and the name of the object you’re binding to, these are the two most common problems.

MetaMod Position Display Management

When using Joomla! sometimes one requires to hide some information, like a specific menu, or an entire position.

MetaMod let’s you do this in a quite easy way. One can follow their documented technique of moving stuff from an non-existing position into the real position, or one can use a simpler strategy that does not imply having virtual positions and nor moving stuff between these virtual positions and the real position.

Imagine you wish to hide all position placeholders on a marketing landing page. It’s quite easy:

  • Download and install MetMod. Don’t forget to read the documentation to know how MetaMod works.
  • The first step is to define the MetaMod position in the last one to be interpreted by Joomla!, usually the footer or the debug.
  • This guarantees that our code will be executed only when all positions are already loaded.
  • The second step is to define the MetaMod execution rules, as stated in the documentation.
  • Next, in the PHP window, include the execution code that will hide or display the position through the injection of a Javascript conde snippet.

Here’s an example: let’s say that one wishes to hide the stuff on the left of the page (usually the menu, login, etc.) when the user is located in the Virtuemart Cart plugin.
Here’s what one has to do:

  1. Identify the location through the $option and $view parameter values.
  2. Inject a Javascript script that finds the left position element and hides it.
  3. If required, adjust the size of the remaining position in order to claim the extra space.
  4. Return the current position.
Here’s an example that hides the “column_left” position. Please note that this MetaMod example is located in the “debug” position, change it if necessary.
if ($option == 'com_virtuemart' and ($view == 'cart' or $view == 'pluginresponse'))
{
echo "
 <script>
   elem = document.getElementById('column_left');
   elem.style['display']='none';
   elem = document.getElementById('content_wrap');
   elem.style['width']='960px';
 </script>"
;
}

return 'debug';

Obviously this must be adapted to the template in use and it may required some adjustments, like the new size of the position that should claim the extra space.

One can use Firebug to help finding the HTML div elements identifiers involved.

Django Inline Forms

In Django sometimes it’s more practical to have a specific HTML inline form than working with the CSS.
Django makes it particular easy. All one has to do is to define an as_inline function that uses <span> instead of <p> or <ul>/<li>.

Here’s a simple example of a form that has a text search and a country drop down list.
Note that the row ender is a combination of three blank spaces. This is obviously practical but not necessarily the best approach.

#
# Filter country
#
class FilterCountry(forms.Form):
    """
        Filter country
    """

   
    lsearch = ugettext("Search")    
    lcountry = ugettext("Only from country")
    lcountry_empty = ugettext('All')
   
    search_term = forms.CharField(required=False, label=lsearch)
    country = forms.ModelChoiceField(queryset=Country.objects.all(), required=False, empty_label=lcountry_empty, label=lcountry)
   
    def as_inline(self):
         """Returns this form rendered as HTML inlines."""
         return self._html_output(
                normal_row = u'<span%(html_class_attr)s>%(label)s %(field)s%(help_text)s</span>',
                error_row = u'%s',
                row_ender = ' &nbsp; ',
                help_text_html = u' %s',
                errors_on_separate_row = True)

Solr for Latin Languages

When configuring Solr in non-english languages, in this case in Portuguese, one usually wants:

In the case one may wish to stem words, it’s also easy. Though, one should be careful in using stem, since it may produce too much false positives.
To split words by white spaces, use StandardTokenizerFactory or WhitespaceTokenizerFactory.
For stop words removal, use StopFilterFactory.
In the case of stem, use SnowballPorterFilterFactory.
Here’s an snippet of a Portuguese schema.xml:
    <fieldType name="text_general" class="solr.TextField" positionIncrementGap="100">
      <analyzer type="index">
        <tokenizer class="solr.StandardTokenizerFactory"/>
        <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" enablePositionIncrements="true" />
        <!-- in this example, we will only use synonyms at query time
        <filter class="solr.SynonymFilterFactory" synonyms="index_synonyms.txt" ignoreCase="true" expand="false"/>
        -->
        <filter class="solr.LowerCaseFilterFactory"/>
        <filter class="solr.SnowballPorterFilterFactory" language="Portuguese" />
        <filter class="solr.ASCIIFoldingFilterFactory"/>
      </analyzer>
      <analyzer type="query">
        <tokenizer class="solr.StandardTokenizerFactory"/>
        <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" enablePositionIncrements="true" />
        <filter class="solr.SynonymFilterFactory" synonyms="synonyms.txt" ignoreCase="true" expand="true"/>
        <filter class="solr.LowerCaseFilterFactory"/>
        <filter class="solr.SnowballPorterFilterFactory" language="Portuguese" />
        <filter class="solr.ASCIIFoldingFilterFactory"/>
      </analyzer>
    </fieldType>

Painless Django with MySQL Install

When using Django for developing a web applications, it’s common to use MySQL as a data repository.
In order to use this combination of technolgies, one needs to setup all the different pieces. Setting up all this may not be as easy as it may seem and it actually will take a bit longer than one may expect.
To ease this process, here’s a simple step-by-step guide to help seting a Django with MySQL development environment.

The first step is to download and install Python. Current Django version, 1.3, does not work on Python 3, so download the latest Python 2 version, presently 2.7.2, or use your system package manager to get it from the official repository.

The second step is to download and install MySQL.
Check your system package manager to get it from the official repository, if available.
Don’t try to use Xampp. It may work but you’ll have to hack some installation procedures, specially in Windows 64 bit. For instance, the database connector will look up  the MySQL location in the Windows registry and it will be missing.
I recommend the MySQL bundle, since it will come with useful software for database management.

The third step is to download and install Python setuptools.
If you’re using Windows 64 bits, and you’re getting a “Python not found on Registry” error, you may use this workaround.

Finally, we need to download the MySQL-Python connector so that we can use MySQL from Python.
Uncompress the file and, on a shell, perform the standard installation procedure: python setup.py install. Depending on your system, you may need to run this with administration privilidges.
If you’re using Windows, I seriously recommend that you download and install codegood build. If you don’t wish to use codegood build and are getting file not found errors originated from a registry key not found – usually in 64 bit versions – just edit the site.cfg file with a plain text editor and change the registry_key to “SOFTWARE\Wow6432Node\MySQL AB\MySQL Server 5.5“, in 64 bit, taking in consideration that the version numbers should correspond to your MySQL installed version. When in doubt, use Windows Registry application, regedit.exe, to check the correct registry key.

Optionally, if you’re installing on Windows, I recommend you to install MSYS and to run the Django commands from this shell.
This will enable you a linux like shell that is helpful to process some commands like localization, e. g. the gettext tool. If you don’t wish to install MSYS, check the Django documentation on how to get the required tools to work on Windows.

Since all the technologies are always under development, make sure you get the right versions of each so that things work properly.

After following these steps, Python should connect to MySQL, and so should Django.