Archive for the ‘Technical’ Category.

Serving Static Files in Django

Note to Public Visitors

This article and its contained information are intended as additional information for myself on top of what can be found on the internet in general. By no means it is covering the topic exhaustingly.

Software Versions in this How-To

  • Ubuntu 10.04
  • Apache 2.2.14
  • Python 2.6
  • Django 1.15

Resources

dev server

  • https://docs.djangoproject.com/en/1.5/howto/static-files/

production server

  • https://docs.djangoproject.com/en/1.5/howto/static-files/deployment/
  • https://docs.djangoproject.com/en/1.5/howto/deployment/wsgi/modwsgi/#serving-files

Information

  • STATIC_ROOT = '/static/'

    will serve the static files from the domains root path where as

    STATIC_ROOT = 'static/'

    will serve the static files from the path that was requested via the url plus a “static” segment

  • The contents of the variable STATICFILES_FINDERS
    STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    #'django.contrib.staticfiles.finders.DefaultStorageFinder',
    )
    

    determine the following:

    • how (and thus where) the dev server will search for static files when it wants to serve them
    • how (and thus where) django will search for static files when the shell-command
      python manage.py collectstatic
      

      is used.

  • When
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    

    is used in variable STATICFILES_FINDERS

    • the static files have to reside in a subfolder called ‘static/’ within an apps folder (eg: MyProject/App1/static/)
    • no static files will be collected from the projects own package folder (eg: MyProject/MyProject/static/)

Dos and Don’t Dos

  • when using the dev server for a project, in any case use
    STATIC_ROOT = '/static/'
    • because the dev server serves the website at the root of ‘localhost:<port>’
    • and the static files being served at ‘localhost:<port>/static/’ fits this behavior.

How Tos

Serving a Django Project from an URL-Path on a Production Server

Important Note

This howto just contains the differences in the setup from the setup of django project/a website in a domains root path.

Basic Explanation of how it works

The shell command

python manage.py collectstatic

will be used to collect all static files once to a folder, from where Apache will serve them later on. In Apaches config file an alias has to be set, which maps the the URL-path from where Apache serves the static files to the folder on the server.

Configuration of the Django Project

settings.py

  • Set STATIC_URL to the absolute url-path from where the static files for this project shall be served (eg.: /project89/static/).
  • Set STATIC_ROOT to the folder on the server where the static files (will be collected to and will be served from by apache) shall reside, using an absolute path (eg: /home/user/djangoprojects/project89/collectedstaticfiles/).

Configuration of Apache

httpd.conf

Note that any changes to httpd.conf require a restart of apache.

  • The alias config string that maps the url-path of the static files to a folder on the server has to include the full path in the url
    eg:

    Alias /project89/static/ /home/user/djangoprojects/project89/collectedstaticfiles/
    

Version Control

Why Version Control?

  • To be able to revert changes.
  • Because it is a code backup solution.
  • Because one can see what exact changes were made to resolve an issue.
  • To be able to re-establish the state of the code, at any given point in the development process.
  • To be able to re-establish the state of the code, for any version of the product.

WordPress Plugin “Table of Contents Plus”

This is a must have for bloggers who write long structured articles and posts. It automatically adds a table of contents element to a page or post. It bases its contents on headings in the post. Fully configurable. Great benefit! Thanks to the author!

Plugin download page at wordpress.org:
http://wordpress.org/plugins/table-of-contents-plus/

Plugin homepage:
http://dublue.com/plugins/toc/

Code Syntax Highlighting in WordPress: Plugin “SyntaxHighlighter Evolved”

There is a nice plugin for that: “SyntaxHighlighter Evolved”
http://wordpress.org/plugins/syntaxhighlighter/

Some documentation can be found here:
http://en.support.wordpress.com/code/posting-source-code/

Adding a Template to a WordPress Theme

WordPress version: 3.5

Create a php-file in the theme folder, with whatever name you choose. E.g.

MyTemplate.php

The php-file has to contain at least the following code to be recognized as template:

<?php
/*
Template Name: A Nice Template Name
*/
?>

Replace the string “A Nice Template Name” with whatever string by which you want it to be selectable. The string can contain spaces and special characters. The template now will be recognized by WordPress and you can choose it, for example, as template for a new page. The template will be selectable by the name “A Nice Template Name”. It just would not display anything.

Usually a template is aligned with the theme by using the themes header and footer at least.

<?php
/*
Template Name: A Nice Template Name
*/
get_header();

get_footer();
?>

.NET Lambda Expression Cheat Sheet

Resources

A Simple Lambda Expression

A simple lambda expression looks like this:

x => x + x
  • => is called the lambda operator.
  • The left side of the lambda operator holds the parmeter / the parameters to the lambda expression.
  • The right side of the lambda operator holds an expression or a statment block.

Parameters to a Lambda Expression

  • Parameters to a lambda expression are on the left side of the lambda operator
  • Multiple parameters have to be enclosed in parentheses
(x, y, z) => x + y + z;
  • A single parameter can be written without parentheses
x => x + x
  • For a paramterless lambda expression, only the parentheses have to written.
() => 5 + 5

Type Inferrence

  • The rules for type inferrence apply to lambdas as to everywhere else in c#.

The following two examples are equal:

(x, y, z) => x + y + z;

 

(int x, int y, int z) => x + y + z;
  • A single but explicitely typed parameter to a lambda also has to be enclosed in parentheses
(int x) => x + x

Make Use of a Lambda Expression with Delegates

  • To make use of a lambda, it has to be assigned to a delegate.
delegate void MyDel (int x);
...
MyDel lx = x => x + x;
Console.WriteLine(lx(5));//10
  • A lambda can also be used where a delegate is expected. In this case it will automatically be assigned to a delegate of the expected type.

In the following example the function DelegateCaller expects a delegate of type int(int).

using System;
namespace LambdasDemo
{
    class Program
    {
        delegate int IntDel(int i);
        static void Main(string[] args)
        {
            Console.WriteLine(DelegateCaller(x => x + x, 5)); //10
        }

        static int DelegateCaller(IntDel del, int x)
        {
            return del(x);
        }
    }
}

Statement Lambdas

  • Statement lambdas hold a statement block on the right side of the lambda operator.
  • The statement block has to be enclosed in curly brackets as in every other function in c#.
  • To pass something back from the statement lambda to the caller, the return keyword is used (as in every other function in c#).
x => {int y = 2*x; return y;}
  • If return is not used explicitely, the statement lambda implicitely returns void.
delegate void MyDel (int x);
...
MyDel lx = x => {int y = 2*x; Console.WriteLine(y);};

Expression Lambdas

  • Expression lambdas hold an expression on the right side of the lambda operator.
  • Per definition an expression is everything, that returns something.
(int x) => x + x

… returns int.

(string name) => "Hello " + name + "!"

… returns a string

x => Console.Writeline(x)

… returns void (because Console.WriteLine(…) returns void).

  • This way a statement block of a statement lambda can also be viewed as an expression.  The statement block as a whole always returns something. Either somethding, that was passed explicitely or an implicitely passed void.

It Is Important to Know What a Lambda Returns and Why

The following expression lambda and statement lambda are equal:

(int x) => x + x

 

(int x) => {return x + x;}

… they both return int.

d => Math.Floor(d)

… returns int. Int is the return type of Math.Floor(…).

d => {Math.Floor(d);}

… returns void. Void is the implicit return type of the statement block.

d => {return Math.Floor(d);}

… returns int. Int is the explicit return type of the statement block.

wrapping javascript into a CDATA section

good idea so it does not get affected by content changing javascript (like gtranslate)

<script type="text/javascript">
 //<![CDATA[
 jQuery('input#shippingSameBilling').click(function(){
 if(jQuery('input#shippingSameBilling').is(':checked'))
 {
 jQuery('tr.wpsc_shipping_forms').fadeOut(200);
 }
 else
 {
 jQuery('tr.wpsc_shipping_forms').fadeIn(200);
 }
 });
 //]]>
</script>

Apache 2.2.14 (ubuntu) & Ubuntu 10.04 LTS

Information Resources

http://httpd.apache.org/docs/2.2/en/

Shell Commands
sudo apache2ctl
sudo apache2ctl -v //show version number
sudo apache2ctl start
sudo apache2ctl stop
sudo apache2ctl restart
Location of Configuration Files
apache config:
etc/apache2/apache2.conf

site configs are in:
/etc/apache2/sites-available

default site config:
/etc/apache2/sites-available/default

If you are not sure if this is the file apache is using to load the configuration from, try this:

  • Put a typo into the configuration file, like “xyz”.
  • Let apache check the configurations syntax
    user@machine:~$ sudo apache2ctl -t
    Syntax error on line 240 of /etc/apache2/apache2.conf:
    Invalid command 'xyz', perhaps misspelled or defined by a module not included in the server configuration
Setting the DocumentRoot

Change the DocumentRoot directive in the default site configuration (/etc/apache2/sites-available/default) from

DocumentRoot /var/www

to your path.

‘Hello JavaScript’

Prequisites:

A basic understanding of html.

Resources:

A list of various resources on JavaScript can be found here (XXX).

‘Hello JavaScript’ in a popup dialog

JavaScript is best known for making webpages more dynamic. The webbrowser loads the plain JavaScript code along with the html code and then executes it. Every webbrowser today allows to switch off execution of loaded JavaScript.

JavaScript code can be inserted in a lot of places within the html code. But the cleanest way is to define a <script> section within the html head.

JavaScript code can be embeded into the html text or it can be outsourced into another text file which then must be referenced in the html code.

That is all to know to code the first “Hello world!” example using JavaScript.

Create a html file with the following content:

<html>
 <head>
 <script type="text/javascript">
 alert("Hello JavaScript, in a popup dialog!");
 </script>
 </head>
 <body>
 </body>
</html>

Whenloaded it in a web browser a popup dialog with the text “Hello JavaScript, in a popup dialog!” will be displayed.

The outsourced version of this example looks like the following. In the html file the script section is replaced by a script reference.

<html>
 <head>
 <script src="hello_js_dialog.js" type="text/javascript"></script>
 </head>
 <body>
 </body>
</html>

And the JavaScript code is placed in the sepparated file named “hello_js_dialog.js”.

alert(“Hello JavaScript, in a popup dialog!”);

When loaded in a webbrowser it behaves exactly like the first example.

‘Hello JavaScript’ in modified html

JavaScript can be used to modify html code that is already loaded and processed by the webbrowser. When the html code is modified, the browser will re-render the page, thus displaying the changes.

The following example changes the text of a html tag:

<html>
 <head>
 </head>
 <body>
 <h1>Hello html!</h1>
 <p>Nice to meet you.</p>
 </body>
 <script type="text/javascript">
 document.getElementsByTagName("h1")[0].firstChild.data="Hello JavaScript, in modified html!";
 </script>
</html>
Note:

In this example the <script> section is inserted  after the part of the html code it references to (the <h1> tag). This is because the webbrowser processes the html code line by line and tag by tag. Also JavaScript code is executed when the webbrowser runs over it. It does not first complete processing all the html code. If the script would be placed in the html head, like in the previous examples, the script would not be able to find the appropriate tag, as this tag was not yet processed by the webbrowser and the browser ‘has no knowledge of it’.

JavaScript Resources

Tutorials and documentation

A good read to start with JavaScript is selfhtml. Pittily it is only available in german language. (http://de.selfhtml.org/javascript/index.htm)

Editors and IDEs

Linux

On Ubuntu i use GEdit, which has a syntax highlighter for allmost every coding language.

Windows

PSPad