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 .

Alpha updates

I still lack of time to finish my blog styling and programming, but here some progress:

All this stuff built on Django with few useful apps — Byteflow Blog Engine and django-template-utils. And of course my hand-made python code :-)

For styling I currently use blueprintcss framework. Later I’ll create some custom design and then will code own html/css style.

Today main focus on content!

My code (python/javascript) coming soon too.

code monkey

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 ;-)

Hello world

Hi! I’m Ilya Khamushkin, and this is my personal website with blog, code and other stuff.

My main job is Web development, and this is main topic of my writing. Also I’ll write about other tech stuff related to my daily work as well.

See more at my about page.


Tags

Blogroll

Recent bookmarks