How to design fast web sites?

The best reference for the design of fast web sites is, IMHO, Steve Souders's book on front end optimization. He recommends the following best practices:

• Rule 1 - Make Fewer HTTP Requests
• Rule 2 - Use a Content Delivery Network
• Rule 3 - Add an Expires Header
• Rule 4 - Gzip Components
• Rule 5 - Put Stylesheets at the Top
• Rule 6 - Put Scripts at the Bottom
• Rule 7 - Avoid CSS Expressions
• Rule 8 - Make JavaScript and CSS External
• Rule 9 - Reduce DNS Lookups
• Rule 10 - Minify JavaScript
• Rule 11 - Avoid Redirects
• Rule 12 - Remove Duplicate Scripts
• Rule 13 - Configure ETags
• Rule 14 - Make AJAX Cacheable

I strongly recommend his books, which you can easily find using this link on amazon.

You can easily check the enforcement of these best practices using the firebug extension for firefox, or Chrome developer tools.

Share:

How to check if you respect web design standards and best practices?

webmaster desktop (Photo credit: FSA 2006-07)

Do you know how to check if your web page respect web design standards and best practices?

If no, the following web page provides a great checklist, which permits you to verify (or discover) if you have designed your website correctly:

 http://webdevchecklist.com/

It may be a good idea too to learn about responsive design, if you want your page to work on all screens. We are in the mobile era !

Share:

How to use html tidy with python to validate HTML content?

Html-source-code (Photo credit: Wikipedia)

Ttidy is a famous toolset for validating HTML and XML content. It identifies mistakes, and corrects them auto-magically. To use it from python, you can use pytidylib:

sudo apt-get install tidy
pip install pytidylib

Or alternatively

easy_install pytidylib

Or if you are behind a proxy:

pip install pytidylib --proxy "prxy:port"

Then in the python source code:

from tidylib import tidy_document, tidy_fragment
htmlFragment = """
<h1>An HTML example</h1>
<a href="http://www.blogger.com/blogger.g?blogID=4882386696817687861#">my link</a>
"""
htmlFragment, errors = tidy_fragment(htmlFragment,tidyoptions)

You can pass some options to control more finely tidylib:

tidyoptions={
"indent": "auto",
"indent-spaces": 2,
"wrap": 72,
"markup": True,
"output-xml": False,
"input-xml": False,
"show-warnings": True,
"numeric-entities": True,
"quote-marks": True,
"quote-nbsp": True,
"quote-ampersand": False,
"break-before-br": False,
"uppercase-tags": False,
'uppercase-attributes': False
}

Share:

Playing with user registration in django

English: Gmail registration screenshots فارسی: عکس‌های برگه ثبت‌نام جی‌میل (Photo credit: Wikipedia)

Django registration module is quite handy whenever you need some users to, well, registrate to your website... In this post, I will explain you how to install and configure it for your web app.

To install django registration module:

easy_install -Z django-registration

The documentation is in the docs folder (quickstart.rst)  and is also available online: https://bitbucket.org/ubernostrum/django-registration/src/27bccd108cdef30dc0a91ed1968be17bb1e60da4/docs/quickstart.rst?at=default

django-registration's role is to permit the creation of new users, which means according to the documentation:

1. A user signs up for an account by supplying a username, email address and password.
2. From this information, a new User object is created, with its is_active field set to False. Additionally, an activation key is generated and stored, and an email is sent to the user containing a link to click to activate the account.
3. Upon clicking the activation link, the new account is made active (the is_active field is set to True); after this, the user can log in.

For this part, I used the following tutorial.

I add 'registration' to my INSTALLED_APPS in settings.py

I add ACCOUNT_ACTIVATION_DAYS = 7 in my settings.py

I define all the mail parameters in settings.py:

EMAIL_USE_TLS = True
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = 'youremail@gmail.com'
EMAIL_HOST_PASSWORD = 'yourpassword'
EMAIL_PORT = 587

I add (r'^accounts/', include('registration.urls')), to urls.py

I modify my base.html template to add links to the registration page

{% if not user.is_authenticated %}<li><a href="{% url 'login' %}">Log in</a></li>
<li><a href="{% url 'registration_register' %}">Register</a></li>
{% endif %}   

{% if user.is_authenticated %}
Logged in: {{ user.username }} 
(Log out | 
Change password)
{% endif %}

I create the required registration templates in templates/registration/ according to the examples provided in http://lightbird.net/dbe/forum3.html

activate.html
activation_complete.html
activation_email.txt
activation_email_subject.txt
login.html
registration_complete.html
registration_form.html

Note that in the template, whenever I need to refer to django-registration urls, I need to know a name to put in my {% url %} tags. I found the appropriate names here: http://code.google.com/p/django-registration/source/browse/trunk/registration/urls.py?r=169


Finally, I check if the register link defined above works. At first I had a URL problem after filling the register form and submitting it. I solved it by editing the registration/registration_form.html file to change the form submission url.

Share:

Which server for deploying a scalable django powered web app? How to install nginx and gunicorn for django.

Debian OpenLogo (Photo credit: Wikipedia)

English: Nginx Logo Español: Logo de Nginx (Photo credit: Wikipedia)

This post explains how to install nginx and gunicorn for django under linux Debian.

From my readings, nginx should be used to serve static files. Nginx should proxy all other requests to gunicorn.

These two tools are easy to install on my debian squeeze:

sudo apt-get install python-software-properties -y
sudo apt-get install nginx
sudo apt-get remove apache2
sudo apt-get autoremove 
pip install gunicorn

Then we have to configure nginx. For this part, I relied on a the following tutorial.

sudo vim /etc/nginx/nginx.conf

I did not change this file as default configuration options seemed reasonable. At this stage, the 'it works page' should be served on localhost:

firefox http://127.0.0.1/ &

Then we have to tell nginx where the static files are located, and what URL to use to proxy other
requests to guincorn. As I use nginx for a single site, I edit directly the default configuration file:

sudo vim /etc/nginx/sites-enabled/default 

In this file, I remove all the defined "location" directives. And I add the ones related to my django app, to the static files of its admin page, and to the static files (/home/toto/myapp/app/static/*):

    location /static {
        root /home/toto/virtualenv_1/myapp/app/;
    }

    location /static/admin {
        root /home/toto/virtualenv_1/lib/python2.6/site-packages/django/contrib/admin/;
    }    location / {
        proxy_pass http://127.0.0.1:8888;
    }

Then, I restart nginx:

sudo /etc/init.d/nginx restart

If you have an error such as:

Starting nginx: [emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use)
[emerg]: bind() to [::]:80 failed (98: Address already in use)

try using the following command to see which server runs already, and kill it:

sudo lsof -i tcp:80

 Finally, we configure gunicorn. It's incredibly easy.

First, we edit django's settings.py according to the documentation and add "gunicorn" to INSTALLED_APPS. Set the value of the STATIC* variables to '' to the URLs served by Nginx as the static files are all served from nginx. Modify also urls.py to remove the lines related to the static files. Then we simply launch the server:

./manage.py run_gunicorn

Share:

Blogger: how to add a blog's sitemap in webmaster tools?

tumblr google webmaster tools sitemap (Photo credit: GioSaccone)

Sitemaps are useful to indicate to websearch engines the list of the pages on your site / blog. Thus, it is a good Search Engine Optimization (SEO) practice to provide the sitemaps of your site to the main search engines.

If you use blogger, the sitemap URLs for your blog are the following:

/atom.xml?redirect=false&start-index=1&max-results=500
/rss.xml?redirect=false&start-index=1&max-results=500 

You can for instance declare them in Google webmaster tools

Share:

How to add a meta tag to a blogger blog?

Meta tags are useful for search engine optimization purposes: they associate key words to a website. For instance, if your blog is about cooking, you may want to add meta tags such as "recipes, cooking, bakery, cup cakes" to your blog. This will help google, yahoo, bing, etc to recognize the topics of interest on your website.

To add a meta tag to all posts of a blog hosted on Blogger, go to "

template > modify html code > handle

and edit the html source of the blog to add your meta tag in the html header.

Share:

How to convert html to text (html2text) in python

How to convert HTML code to Text with Python (solved)

There are several tools to convert html to text (html2text) in python. My favorite is beautiful soup. Under linux systems, you install the beautiful soup python module with the following two commands:

easy_install beautifulsoup4
easy_install html5lib

Then, in your source code, you can call beautiful soup functions to translate html text into simple text (removing all the HTML tags or replacing them with alternative relevant content) :

html_doc = """Some HTML code that you want to convert"""
from bs4 import BeautifulSoup
soup = BeautifulSoup(html_doc)
print(soup.get_text())

Of course, you need to import the module if you want to call its functions. That the role of the line in bold above (from bs4 import BeautifulSoup).

Html-source-code (Photo credit: Wikipedia)

Alternatives to BeautifulSoup to implement HTML2text

Striptogram might be an alternative to beautiful soup, but I must say, I am fully satisfied by beautiful soup.

from stripogram import html2text, html2safehtml
# Only allow <b>, <a>, <i>, <br>, and <p> tags
clean_html = html2safehtml(original_html,valid_tags=("b", "a", "i", "br", "p"))
# Don't process <img> tags, just strip them out. Use an indent of 4 spaces 
# and a page that's 80 characters wide.
text = html2text(original_html,ignore_tags=("img",),indent_width=4,page_width=80

If you want to improve your coding skills, I advise you to look at "Cracking the Coding Interview: 150 Programming Questions and Solutions". It was written by Gayle Laakmann McDowell, a former recruiter from Google who also worked at Apple and I find it really great!

  

Share: