This will not end well.

(Well, it didn’t but I’m still thinking about it!)

One of the things I love about SASS is how it makes colour so mutable and interactive. Traditionally I’d preset my colours laboriously in Photoshop and transfer them to the CSS file via cut-and-paste, going back and forth to tweak hues and shades. Or I’d stick to basic, easily remembered values such as #ccc (shortcut for #cccccc, a light grey).

SASS’s variables and colour functions change all that.

Take the following code block:

	h2 {
		padding: 0.2em 0.5em;
		background: lighten(rgba($accent_colour, 0.7), 80%);	
		clear: both;
		font-weight: 500;
		text-align: right;
	}

I’ve already defined the accent_colour, so for its background colour I just take the variable, and pass it to the lighten function, and lighten it by 80%. Easy, and useful.

But wait, there’s more! You’ll see I’ve also used the rgba function to set the opacity of the background colour to a value of 0.7, without having to write out the entire rgba(0,0,255,0.7) value. The rgba function even allows me to pass hex colours to be transparentised, like so: rgba(#ccc, 0.6). Almost too easy. The usual caveats about checking the resulting colours for appropriate contrast levels apply (and, usefully, there’s a contrast function that you can use to ensure the colours you generate conform to accessibility standards).

Textpattern is a content management tool for blogs and small websites. It allows site designers to exercise a great deal of control over the layout and functionality of websites through a highly expressive template language modelled on XML markup tags.

One downside of TXP, however, is that the templates are all stored (along with page content and sometimes the CSS file) in the TXP database have to be constructed almost entirely inside TXP’s administration interface:

Now, editing code directly in browser textareas isn’t the worst thing in the world, but it’s not a lot better than, say, using Notepad on Windows. At least Notepad lets you use the tab key. And when you have to move a design from site to site, you have to recreate each template page and snippet (reusable snippets of template code are known as “forms” in TXP parlance) one by one.

However, I’m not here to critique TXP’s minor functional limitations. Instead I want to share a small but fairly advanced trick I discovered as I was trying to think of a way to move a fully working and complete design from a TXP install on my localhost up to the install on my production server. And it’s here that TXP’s database-centric template system becomes a significant advantage.

All TXP template pages are stored in a database table called “txp_page”. All TXP forms are stored in a database table called “txp_form”. So potentially, all you need to do to initiate an updated design on a TXP site is to over-write each of those tables in your production MySQL database with two exported tables from your local database.

Easier said than done, right?

Well, unless you’re really comfortable with command line MySQL, you’ll need, at minimum, a working version of PHPMyadmin on your server and some kind of database tool on your development machine. I use Sequel Pro, which makes finding and then exporting the requisite database tables as a “.sql” file very easy. Remember, you have to export each table separately for this to work.

As an aside, a real MySQL pro could probably tell me a much faster way to do what I’m describing. And I hope they do! But I’ve tried this method and it works a charm.

Important note: It should go without saying that you really have to back-up both your local and production database before you attempt this trick. I once lost several weeks worth of posts when I ran a database operation that I shouldn’t have. Though in my defence, it was a dodgy TXP database plugin that I was using AND I thought I was hitting the “run backup button”. Always double-check every action when you’re messing with databases.

So, once you’re in PHPMyadmin, select the first database table you need to update. Choose “import”, select the .SQL file on your local machine, then hit “go”. Once that’s merged into the database, choose the next table, import again, and, whammo-bammo. You’ve got a whole new Textpattern template live, without having to cut and paste into a single textarea. Pretty neat, huh?

Nice post comparing the interfaces of a number of blogging tools. Adam Mathes compares Movable Type, Blogger, and Wordpress and finds that they all come up short compared to Twitter:

This is why anyone – even confused celebrities who barely comprehend technology – can actually use this product. You show up, there’s a box at the top, you type in it, and it shows up below with other people’s stuff you can read.

Textpattern’s posting interface has a bit more complexity, but it does one thing right. On logging in, you’re always presented with a big box for typing in and a prominent “Publish” button.

(Yes, I am on a bit of a Textpattern kick again, why did you ask!)

update: Post discovered via the inestimable Waxy Links.

Most beloved of CMS tools, the mighty Textpattern, is now version 4.2.0.

Check out the release notes.

It’s clearly well past time that web developers started to pay real attention to HTML5, the forthcoming new HTML specification. I’ve been keeping half an eye on its progress for a couple of years, alternating between hope and fear. Hope, from the promise of better semantics (header and footer container elements), fear, from the apparent dropping of alt attributes.

Simon Willison has being doing good work highlighting new technical developments and raging arguments about the new standard.

Just confirming the advice on image formats compiled at YUIBlog. I tested CS3 and Fireworks, and Fireworks outputs an excellent 8-Bit PNG file with variable transparency for web pages.

I don’t think this information has been spread all that widely, so I’ll just do my bit to help out.

I joined up with Blip.FM a couple of weeks back, but found a dismaying number of privacy and usability landmines in the sign-up and bootstrap process. I shot off a support email to the team right away, but haven’t had a response. I reckon it’s always useful to document some of these kinds of issues in public. Or maybe I’m just a cranky sod. Not sure.

Hi guys,

I’ve just signed up but I have to admit that I find the auto-filling of DJs into my favourites is a bit pushy and unwelcome. I’m given a form to list a few favourite bands with language about how “we’ll find people who play similar music”. There’s nothing to suggest that moving to the next screen then automatically builds a recommendation list and adds it without any chance to refuse or intervene. That’s a big turn-off and is the kind of thing that makes me very inclined to delete my account right away. I recognise that you say it’s “easy to add and remove DJs at any time” but I don’t want to have to perform major weeding on my profile as my first action when using a new service. All you need to say is “add these to my profile: yes/no” and we’d be cool.

I also think that the Find Friends page needs to make it incredibly, indelibly clear that NOTHING WILL BE SENT to any users that I locate unless very explicitly permitted.

Partly for my own reference, and partly to gather feedback from other developers, I present below an extract from an email I sent to the developer of CSSEdit, to my mind one of the finest web development tools available.

In many ways, I think the tab implementation on CSSEdit is excellent, but I have a few problems with it. Maybe there are some UI options that I haven’t seen to mitigate my problems, but I haven’t found them yet.

1. Command-W closes the entire window, not the tab. Strictly speaking that’s probably correct but every other application that I know uses tabs maps Command-W to “close tab”. The app doesn’t also remember the existing tab-set after I frantically re-open the window.
2. I like to have a set of related tabs grouped together – first the CSS, then the preview in the next tab along. Currently that requires a bit of manual re-arrangement to set up for a new project, as you can drop a preview tab onto a CSS file window, but not vice versa. I’d like “new preview” to consistently open to a new tab in the same window but I can’t figure out yet how to enforce that.

Have any other users of CSSEdit found ways around these problems?

I’m starting to get into using 24-bit PNG files more and more, though I’m reluctant to use large-dimension images in this format as their file sizes tend to balloon. However, it’s hard to resist the charm of a logo that can be seamlessly matted over just about any kind of background.

One trick — which works best with mostly flat-coloured logos — that I’ve discovered is to posterise the logo with Photoshop before rendering out to a transparent PNG. Posterise discards colour information from the file — most people set the intensity level quite high, which results in a visible banding through the image. I’d take that down to about 7-9, which preserves the integrity of the image but makes the colour range more managable. I’ve seen file sizes halve without any serious image degradation.

Here’s a close-up crop of a before-and-after posterise treatment. Can you can spot a substantial difference?

Apple has just posted a new version of its Safari web browser, featuring improvements to Javascript, CSS, and speed, amongst other things.

I’m intrigued that, in addition to the Windows version, Apple is still maintaining current releases for a previous version of the operating system—something they’ve largely avoided in the past.

Safari’s trajectory almost mirrors that of iTunes: third party product (KHTML) integrated into the operating system as a standard component (web browsing), becoming cross-platform, and a critical component in the functioning (and saleability) of the iPod. But I think it’s going to be more than that. There are clues that Apple wants to get into the web application game on a larger scale than the disappointing .Mac offering. Supporting that by having control of a fast, standards-compliant but aggressively featureful browser is pretty logical.

What’s more, Apple is unusually open in its road-map for the product. Dave Hyatt and his team have unprecedented visibility—Apple engineers typically are virtually anonymous and almost never blog about their own work. The openness around Safari development is probably required by its open-source origins, but it also must reassure third parties intending to base products around Safari’s Webkit renderer.

With this release, and the forthcoming Firefox 3 and Internet Explorer 8, it’s an exciting time for followers of web technology development.