I fired it up recently to design a leaflet for my Mum’s guest house, featuring lots of photos of the local area. I’d previously rotated them to some jaunty angles and needed to straighten them up. I couldn’t find anything in the interface to do this (boo) but then remembered that one great feature of Inkscape is that it stores the state of the document as an editable SVG file. Even if there wasn’t a way to remove the rotations in the interface, I could do it by editing the data directly (hooray!), it’s a sort of View Source for illustration/page layout.

1. Open the Edit menu, select XML Editor
2. Select the image you’d like to straighten on the page
3. In the XML Editor, click Transform attribute, and click the Delete Attribute button above

Boom – straight images.

Obviously, it would be nice to have a button to do this (maybe there is – feel free to let me know in the comments), but I like that the use of an open image format, and the tools to edit the data directly allows me to achieve what I need to do. Do you have any Inkscape tips?

1) Plan your route, then click upload to GPS device (top right). This will give you a GPX file to download.

2) Download RMaps – this is what we’re going to use to view the route on Android, and its a fantastic map app to have anyway, its main advantage over Google Maps being it can cache maps offline for you – if you happen to be hiking out of mobile range for instance.

3) Transfer your GPX file to your phone. I used the Android Dropbox app, but you could just use USB, or a couple of floppies.

4) Open the route with RMaps – in RMaps, press Menu ->More -> Tracks. Now press Menu again -> Import, and select your GPX file. The route name should now appear on the screen, tap it to get a tick – it is now displayed on the map screen.

5) And you’re done – press Back until you see the map screen – if you zoom in you should see your route highlighted in purple.

Prototyping

jsFiddle is really fast to work with – the layout means all your code is available at once, and it comes with ‘batteries included’ – you can select from common JavaScript libraries to have preloaded. All this means it’s great for prototyping little interaction ideas – say a menu or dialog box.

Collaboration is easy – send the url to a colleague for them to comment on your work, or edit it and send you the updated version – code as conversation. Even versioning is supported- every change adds a number to the URL, eg. http://jsfiddle.net/ATFcS/1 becomes http://jsfiddle.net/ATFcS/2 when saved, so it’s easy to go back and review older versions – a brilliant touch.

Teaching

Learning is always easier when you’re given examples, and being able to then play with the examples is even better. I’ve found jsFiddle perfect for explaining aspects of web development to people – I’ll knock up a simple example with just the features that we’re discussing, and the recipient can see what I’m talking about and modify the code to really cement their understanding. There’s even a lovely embedded mode – next time you talk about a JavaScript/CSS/HTML technique  online, why not make it in jsFiddle and embed an interactive example?

Debugging

When faced with a bug in a complex design,  it can be hard to track down exactly what’s causing the issue. I’ve found it can be very helpful to recreate a simplified set-up in jsFiddle – if I can replicate the issue it’s then very fast to manipulate the code to find a solution.

So those are a few uses for jsFiddle – please feel free to leave your own tips and tricks in the comments.

Description

When using jQuery to fade elements, Internet Explorer will remove anti-aliasing from text (causing it to appear pixelated) .

Workaround

Remove the ‘filter’ attribute used by IE to fade elements once the fade is complete (view the full post to read the code)

Code based on GBegen’s comment on Stack Overflow

http://stackoverflow.com/questions/778208/jquery-fadein-leaves-text-not-anti-aliased-in-ie7

(function($) {
    $.fn.fadeIn = function(speed, callback) {
        return this.animate({opacity: 'show'}, speed, function() {
                if ( $.browser.msie )
                {
                       this.style.removeAttribute('filter');
                }
                if ( $.isFunction(callback) )
                {
		callback.call(this);
                }
        });
    };

    $.fn.fadeOut = function(speed, callback) {
        return this.animate({opacity: 'hide'}, speed, function() {
                if ( $.browser.msie )
                {
                      this.style.removeAttribute('filter');
                }
                if ( $.isFunction(callback) )
                {
		callback.call(this);
                }
        });
    };

    $.fn.fadeTo = function(speed, to, callback) {
        return this.animate({opacity: to}, speed, function() {
                if ( to == 1 && $.browser.msie )
                {
                     this.style.removeAttribute('filter');
                }
                if ( $.isFunction(callback) )
                {
	         callback.call(this);
	     }
        });
    };
})(jQuery);

Description

When using jQuery or similar to fade an element (animate its opacity) IE 8 does not fade child elements that have any ‘position’ property set (‘relative’, ‘absolute’, etc).

Workaround

Removing position rules will work, but presumably you’re using them to, well position stuff. The only workaround I have found is to use the IE 7 compatibility meta tag to force IE 8 to render as 7 would.

Unfortunately this means you have to deal with the IE6/7 text anti-alias bug – workaround here

See also

http://glow-project.lighthouseapp.com/projects/33663/tickets/161-fade-animation-children-with-positionrelative-ignore-the-opacity-of-the-parent-in-ie

http://flowplayer.org/tools/forum/55/28425

Description

Input fields wrapped with an inline element will render with an extra 1 pixel margin above and below, regardless of the ‘margin’ property set in the CSS rule.

Workaround

1) Use a conditional comment or similar to serve a margin rule to IE that is 1px less than desired. So for no margin:

form input, form textarea{
    margin:			-1px 0;
}

2) Remove the border from the input – this will also remove the extra margin.

The vanilla HTML implementations of these two methods are shown below:

1) Select tag:

(Hold ctrl or command to select multiple values)

2) Checkboxes and Label tag:

Note that the <label> tag allows users to click the label to toggle the checkbox on and off.

In terms of usability,  the checkbox method is more straightforward – it is obvious how to select multiple values, whereas with the select method we have to tell the user which keys to hold down. In addition to that, if a user has selected multiple items, and then forgets to hold the correct key on the next click, their selection is lost and only the last value clicked is selected. On a list that can be scrolled, it may not even be apparent that the other selections have been lost.

The disadvantages of the checkbox method are:

• It’s not obvious that the label can be clicked.
• It would be nice if a larger area were clickable, as with the SELECT example
• It would be nice if the entire row were highlighted, as with the SELECT example
• The values are not scrollable – adding more will simply show a longer list

We’re going to fix all that with some simple CSS and Javascript (using JQuery).

Click to see an example page

Edit 1 – 9/4/09: Simplify code as per Victor’s comments, and fix refresh issue in Firefox

Edit 2 – 9/4/09: Simplified again, using just the label tags, without <a> tags, from the reddit comments

	$(document).ready(function() {

		// make sure labels are drawn in the correct state

		$('label').each(function()
		{

			if ($(this).find(':checkbox').attr('checked'))
				$(this).addClass('selected');

		});

		// toggle label css when checkbox is clicked

		$(':checkbox').click(function(e)
		{

			var checked = $(this).attr('checked');
			$(this).closest('label').toggleClass('selected', checked);

		});

	});

I started with the file upload tutorial in the web.py cookbook.

The problem I was getting was that the Python Image library (PIL) was failing to make the thumbnails, with the error ‘image file is truncated’.

Guessing that the upload was not yet complete when the thumbnail was initiated, I googled around for some help and came across the idea of ‘chunking’. This method copies the file upload to the destination folder in chunks as it arrives.

From this tutorial:

while 1:
        chunk = sourceFile.file.read( 10000 )
        if not chunk:
            break
        destFile.write( chunk )
    destFile.close()

I tried this method in web.py, using web.input(file = {}) to get the file field from the POST form, and then file.value.read(10000) in the code above. This fails because file.value does not have a .read() method – this is a file object method. Using file.file.read(10000) instead seems to work fine.

I’ve ended up with this:

    def POST(self, path = ''):

        self.path = path

        input = web.input(file = {})

        action = input['action']

        if action == 'upload':

            file = input['file']

            f = open(config.root + 'static/uploads/' + file.filename, "wb")

            while 1:
                chunk = file.file.read(10000 )
                if not chunk:
                    break
                f.write( chunk )
            f.close()

            self.thumbnail(path, file.filename)

        self.output()

    def thumbnail(self, path, filename):

        size = 128, 128

        outfile = open(config.root + 'static/resized/' + filename, "wb")

        im = Image.open(config.root + 'static/uploads/' + filename)
        im.thumbnail(size)
        im.save(outfile, "JPEG")

One of the great features is template inheritance – but I hit an issue recently with passing a variable from a child template to a parent. It’s not immediately obvious how to do this, but I found the answer on the Mako Google Groups archive (link here):

Child:

<%inherit file="meta.html"/>

<%def name="vars()">

	<% return (meta.id,) %>

</%def>

Parent:

<% (id,) = self.vars() %>

On a side note, I found out today that two of the Python libraries I’m using, Mako and SQLAlchemy, were coded by the same guy – Michael Bayer. Clever chap – not only are the libraries pretty impressive, but they are both well documented and he regularly contributes to the mailing lists for both projects. And he doesn’t even have a big internet head like some developers – though I tracked his blog down here:

http://techspot.zzzeek.org/

My current CMS project is based on creating templates in the back-end, and then using these to produce ‘inherited’ objects with the same attributes.

I quickly found that it’s surprisingly tricky to grab a template object using SQLAlchemy, and copy it into a similar, but separate, entity. Using the Python ‘copy’ function confuses SQLAlchemy – when you try to save it, it thinks it is merely a representation of the original (template) object.

Here’s how I create separate ‘clones’ from my template objects, defining a function on the object itself:

def clone (self, source, table):

    for c in table.c:

        if not c.name.endswith('id'):

            setattr(self, c.name, getattr(source, c.name))

Here’s a usage example:

template_meta = self.session.query(Meta).filter(and_(Meta.is_template == 1, Meta.id == id)).one()

new_meta = Meta(new_object.id)

new_meta.clone(template_meta, table_meta)

The clone function takes the object’s table as an argument, so that only the basic column values are copied. The table object has an attribute called c – these are the table columns in long form (eg. meta.id, meta.title, etc). Using c.name gives us just the name of the column.

Looping through the source object’s attributes would result in SQLA attributes and any child objects being copied too, which is not what we want.

Notice too that anything ending in ‘id’ is ignored – otherwise we would get the original object’s relationships – again this is not what I want in this situation. The new object should have its own relationships.