home rss

Careful Web

Fresh look

My blog was updated recently. I’ve changed a bit of markup and completely rewrote CSS. If you reading my blog via RSS feed, please take a look and leave a few comments about new design and especially typography. New style is pure monochrome with bunch of cutting-edge CSS3 features. It’s not finished yet, but direction is already chosen.

I was very busy last half-year. I worked in two startups and consulted few entrepreneurs. Thats why my blog was silent. Till this time I learned deeper Ruby on Rails and first time used Pinax to develop social network. I’ve excited with both. Now I can more objectively compare RoR to Django and see pros and cons of both. Pinax is generally cool, but it still lacks of documentation and good examples. Sometimes it’s hard to customize. But anyway it make sense to write detailed post about my first impression.

Currently I starting to spend more time on my own projects, photography and writing. So I hope to put few updates here soon.

Stay tuned!
 Cheers!

Go semantic!

So many people talk about semantic web, valid code and other related stuff. I can’t imagine how I can write more than the usual 5 cents.

But I am trying.

Every professional web developer knows about such topics, but sometimes something stops him from following semantic rules or valid markup. What? His name is Mr. Style. Yes, every HTML coder knows about missing additional div elements to wrap some blocks for fancy shadowing or other eye-candy features.

It’s a long story, that begins in HTML‘s roots. SGML — is a general markup standard, HTML is based on it. HTML was created as both a content and style markup language at the same time. For example, HTML tags like fontib is purely style-related. The main task of HTML was not content meaning (semantics), but more styling and representation (rendering).

Opposite to HTMLXML was invented as a pure semantic standard. The main usage for XML is hierarchical data storage and retrival. It has fully flexible generalized element naming, that allows one to create new markup languages on top of XML.

After some time the next standard was invented — CSS, which brings new possibilities for styling both HTML and XML marked-up documents. With CSS each tag/element can be styled in any manner. For example, usual paragraph HTML tags p can be styled as lists with few lines of CSS code. The representation meaning of HTML becomes less important with CSS features.

The next level of document markup was reached with XHTML. Yes, it seems like a natural evolution of HTML, with focus on strong semantic markup as XML. This one brings new possibilities to machine processing for data retrieval, but keeps backward compatibility with older browsers and other HTML processors.

Well, why can’t we use pure XML formats for semantic data exchange in Web? RSS/Atom is the first widely used format in Web that comes to my mind. OK, here are some points:

  1. Semantic (x)HTML can be interpreted by web browsers (with or without corresponding styles the user can see rendered content).
  2. Semantic (x)HTML can be interpreted by machines for data retrieval.
  3. Semantic (x)HTML can be interpreted by special screen readers and other devices dedicated to disabled people.
  4. Semantic (x)HTML can mix different types of information such as news feed, contact cards, calendars, etc. in a single document.

I want to write a little more about the last point. Microformats — is one of the most famous and usable representations of semantic HTML. It’s a very useful thing, because lots of robots/tools can retrieve information (hatomhcardhcalendar) from web site pages. Lots of the well-known big players of the Internet community already integrated this standard for their document mark-up (Google, Yahoo, etc). It’s still not Internet-wide, but already shows more and more cases with new possibilities.

With CSS evolution, the Web will go closer and closer to the semantic meaning of web page contents. I recommend that modern web developers always be on the cutting edge of markup technologies. You can easily start with Microformats as a rich example of semantic markup. You can dive into CSS3 techniques and features to be ready to implement it in some of your next projects (and write fewer divs). The markup will shine for those who reach this formatting Zen and for a few robots too! :-)

Quick Rules of Accessible Web. Text and text alternatives.

  1. Provide alternative text in images with the alt attribute of the img tag.

  2. Create corresponding label elements for each form input field, or add the title attribute if you can’t provide a label.

    Example #1: <p><label for="first_name">First name</label><input id="first_name" name="firstname" type="text"></p>

    Example #2: <input type="password" name="passwd" title="Enter your password">

  3. CAPTCHAs must have an audio version. Like reCAPTCHA, for example.

  4. Write links carefully. Be informative when you point a user by using relevant link text. Avoid javascript: or other placeholders for the href attribute when you are using JavaScript action on link elements. Links must always point to the content they are referring to.

  5. Avoid elements without content. For example, spacer images or table-based layouts. All uninformative pictures must be used as backgrounds (with CSS).

  6. Otherwise don’t include content images as backgrounds. Use img as specified in #1.

  7. Use text and media alternatives for object embedding elements. You can include as many alternatives as you like, encapsulating them within each other. Here is an example of including a Quicktime movie:

    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256" data="http://movies.apple.com/movies/independent/blessedisthematch/blessedisthematch_480p.mov">
    <param name="src" value="http://movies.apple.com/movies/independent/blessedisthematch/blessedisthematch_480p.mov">
    <img src="http://images.apple.com/moviesxml/s/independent/posters/blessedisthematch_l200812221525.jpg" alt="Blessed Is the Match movie">
    </object>

Cross browser CSS3 features

Three CSS3 features which works right in all major browsers (Mozilla, Safari and Opera). Yes, IE plays outside with finalizing of CSS2 support.

CSS3 Opacity

Opacity effect is very widely used in graphics and of course in web-design too. Today we can use it not only inside our graphic editor, but with plain CSS feature { opacity: 0.5 }. IE users can be supported with { filter: alpha(opacity=50) } property. You can see lots of demo examples here:

Box-sizing

This feature really matters for fast coding of block design. It really simple to use: just specify float, width in percent and box-sizing property. Like this (Mozilla, Opera and Safari uses different declaration):

div.span { width: 50%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Also see live example at CSS3.info box-sizing page.

Overflow-x & overflow-y

Overflow property is improved in CSS3 specification. It allows to specify X and Y axis overflow independently with visible, hidden, auto and scroll options. See examples and tests here.

Text-shadow (bonus)

This one is really fancy and well-know effect. Firefox supporting it only in upcoming 3.1 release. But Opera and Safari already taking care on it. See demo page with reference image on CSS3.info: text-shadow.

New way to catch django signals

During preparations for 1.0 release Django signaling system was refactored. Details on Backwards Incompatible Changes Page, corresponding changeset is 8223.

Well, the main reason of changes is speeding up. Announced “90% improvement in the speed of signal handling“.

The main question is how to update own code to be compatible with new way. We need to replace old style dispatching with new way of signal object creation (django.dispatch.Signal). Let see post and pre save model signal dispatch example.

We have Item model and signal handler add_mime_type declared before. Old style connection:

dispatcher.connect(add_mime_type, signal=models.signals.pre_save, sender=Item)

New way to connect model signals with handlers:

models.signals.pre_save.connect(add_mime_type, sender=Item)

Looks pretty simple. Also we need to change one thing in handler. It must be declared as accepting kwargs. For example:

def add_mime_type(instance, **kwargs):

The main changes are done behind the scenes. Now models.signals.pre_save is instance of django.dispatch.Signal instead of plain object().

Django vs. Pylons

It is a short post-though about two popular Python frameworks. This is my personal experience and some analytics.

Well, if you building long-term project, for example some social network (oh again), usually you need rapid prototyping and then step-by-step (iteration) development. For prototyping you need more and more components, which you can replace or customize later. For iteration-based development you need to setup release deployment and testing automation (aka buildbot). Important thing that you have deployments on own infrastructure and you can build it once and then forget. So Django is number one solution for the component-based model (aka apps).

Other case is when you creating an application which would be highly redistributable, for example blog or e-shop engine. It is really hard (for today) to setup quickly django applications and lots of people is aware of hand-made installations (like terminal commands, etc). Pylons has a better deployment tool (paste) that helps with redistribution of projects and better project/app file layout.

It is main reason why there are still not so much complete django applications.

I thinking to use both for different cases, but anyway large projects is a Django way.

At last my top three django components: 1 Django’s cache framework; 2. User authentication in Django |; 3. Testing Django applications .

HTML5 vs. XHTML

A quick thought about upcoming HTML5 standard.

The main advantage of HTML5 is lots of modern web features like:

  • embedding multimedia content;
  • 2D drawing with canvas;
  • new DOM methods;
  • Web Forms.

But with XHTML we still have XML comparability, that brings lots of libs and apps which can work with well formed XML/XHTML (aka parsers). So HTML5 is missing that.

HTML5 parsing will come soon after specification release, so we can start to use it believing in future.

Opera Web Standards Curriculum

Opera Web Standards Curriculum just been published. Thanks to Chris Mills for his hard work and lots of other authors who contributed this great content.

First question in the tutorial is Why web standards? Right way to go!

There are already 21 articles! Check it out!

Google GData or GigaBase

I excited with GData API from Google. I just tried they Python version and it looks KISS.

Google GData API mixes CRUD actions with Atom XML format. This means that all client-server messaging uses Atom feeds as data format. Google guys extended Atom specification with ability to make complex queries and implemented Atom Publishing Protocol for posting data to server.

For example document list, contact list, etc looks like usual Atom feeds. Main Google API enabled services:

Full list is on Google API page.

I checked GData Python API with simple script, see code below:

# Google Docs example
import gdata.docs.service

# authentication
gd_client = gdata.docs.service.DocsService()
gd_client.email = 'username@gmail.com' #change this
gd_client.password = '' #change this
gd_client.source = 'exampleCo-exampleApp-1'
gd_client.ProgrammaticLogin()

# querying full docs list (feed)
feed = gd_client.GetDocumentListFeed()
# selecting first document to work
d = feed.entry[0]
# document properties
print d.title.text # document name
print d.content.src # link to document content (URL)

# for changing document properties we need use atom python module
import atom
# creating new document name
document.title = atom.Title(text='my best friends')

Conclusion: it is really easy to integrate with Google services.

Upload to server with Adobe AIR and JavaScript

It is simple example of how to upload local file to server with JavaScript and Adobe AIR

Example.

// sample url and file path which we use for upload
var url = "http://img31.picoodle.com/upload.php";
var pictureFile = new air.File('/path/to/local.file');

// creating POST request variables (like in html form fields)
var variables = new air.URLVariables();
variables.op = 'upload';

// set params for http request
var tmpRequest = new air.URLRequest(url);
tmpRequest.method = air.URLRequestMethod.POST;
tmpRequest.contentType = 'multipart/form-data'; // это тип для загрузки файлов
// assigning variables to request
tmpRequest.data = variables;
air.sendToURL(tmpRequest);

// attach events for displaying progress bar and upload complete
pictureFile.addEventListener(air.ProgressEvent.PROGRESS, callback_for_upload_progress);
pictureFile.addEventListener(air.DataEvent.UPLOAD_COMPLETE_DATA, callback_for_upload_finish); 

// doing upload request to server
pictureFile.upload(tmpRequest, 'pic', false);

Interesting thing that I was unable to find event for tracking upload complete in JavaScript docs of AIR. I’ve got it via Flex/AcionScript docs. It is air.DataEvent.UPLOAD_COMPLETE_DATA.

To complete this example I created two sample event handlers for upload progress and complete.

function callback_for_upload_progress(event) { 
    var loaded = event.bytesLoaded; 
    var total = event.bytesTotal; 
    var pct = Math.ceil( ( loaded / total ) * 100 ); 
    air.trace('Uploaded ' + pct.toString() + '%');
}

function callback_for_upload_finish(event) {
    Console.log('File upload complete');
    air.trace(event.data); // output of server response to AIR dev console
}

This example is for devs that have some experience with AIR. Later I’ll write some complete example from scratch. Stay tuned with the AIR tag ;-)