Visit the weblog archives, check out some fun links, or learn more about the site

Category “Technology”

Tangle.JS Posted Oct 23, 2011

Clever way to add interactive calculations to a data-rich document.

SASS and Colour

Posted Oct 16, 2011 in Web Design and Technology Comments 2

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

Nimbus Chameleon Posted Oct 14, 2011

A library to let designers style iOS application layouts in CSS rather than by using Interface Builder. Huge.

A Sociology of Steve Jobs Posted Oct 11, 2011

Kieran Healy lays down some cultural analysis.

Voice Control and Social Norms

Posted Oct 10, 2011 in Technology and Usability Comments 0

Siri’s social dilemma:

Secondly, voice assistance carries a whole host of privacy issues. Some are basic: How do you prevent others from using your phone with voice commands? What kind of access security is built in to a system like Siri? In some cases, it can become more complex. Consider how much private information is contained in your smartphone. How much of that information would you be comfortable broadcasting around you to strangers and people you know? Would you be willing to have Siri dictate your texts, emails or appointments out loud in your workplace? At home? You can imagine a thousand and one scenarios where that would be undesirable. Would you want a secretary dictating your next appointment out loud into your doctor’s iPhone for everyone in the waiting room to hear?

I have no idea if Siri’s voice control service is as good as the hype claims (let me be uncharacteristically pessimistic and assume not), but if it is — and if becomes widely used — then we’re probably looking at a shift in social norms around communication technology as significant as the shifts following the adoption of the mobile phone. Remember when conspicuous mobile phone usage marked you out as an irredeemable wanker? And how that marking changed almost overnight?

Posting Interface Size

Posted Sep 09, 2009 in Technology and Web Design Comments 2

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.

Textpattern 4.2.0 Released

Posted Sep 08, 2009 in Technology and Web Design Comments 0

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

Check out the release notes.

App Store Reviewers Suck

Posted Apr 22, 2009 in Technology Comments 0

Via Daring Fireball, a pretty depressing tale from Garrett Murray, developer of a stats app for the iPhone.

Irsquo;m far more likely to get 15 one-star reviews when something goes wrong than I am to get 15 five-star reviews when everything goes right. Perhaps itrsquo;s just frustration speaking here, but when Apple ties my hands behind my back and lets users punch me publicly in the face without allowing me to at least respond back, itrsquo;s hard to get excited about building an app.

I sympathise, but I have to wonder how much actual attention most people pay to reviews on the App Store. The average buyer must have figured out by now that most reviews are written by homophobic twelve-year-olds on sugar highs and adjust their expectations accordingly. Furthermore, I guess one upside of the current pricing model is that it’s easier to take a risk on the app if it takes your fancy, despite clearly negative reviews.

8-Bit PNGs and Alpha Transparency

Posted Apr 16, 2009 in Web Design and Technology Comments 0

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.

CSS Edit and Tabs

Posted Oct 17, 2008 in Technology and Web Design Comments 0

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?

Ancient Wisdom

Posted Aug 08, 2008 in Graphic Design and Technology Comments 2

Today, my friend and co-worker Kyle’s iPhone/Touch application Ancient Wisdom went live on the iTunes App Store. Ancient Wisdom is a small and light-hearted tool that displays koans and sayings by philosophers and writers such as Lao Tzu

I helped out by designing a logo and some background art. The rather cute monkeys who help impart the ancient words of wisdom were created by the developer himself, a noted fan of our simian friends.

Here’s the logo in its current state:

Ancient Wisdom logo - weathered with a celtic font theme

I’ll be helping to polish and refine the user interface over the next few weeks. I’m also really exited by the prospect of designing in a technology that perhaps requires fewer compromises than HTML!

Jon Tan on Web Typography

Posted Jun 26, 2008 in Graphic Design and Technology Comments 0

I’m only about half way through this revelatory essay on web typography and the paragraph and I already know that it’s the most important thing I’ve read on the craft of web design in years. I think it may completely change the way I work.

Don’t miss the accompanying piece of stylistic treatments.

Shell Scripting Basics

Posted Sep 17, 2004 in Technology Comments 0

This has to be useful: shell scripting in 20 pages.

Background images on images

Posted Jul 26, 2004 in Web Design and Technology Comments 0

Here’s a simple trick that I don’t think I’ve seen elsewhere.

Say you have a series of thumbnails of a known size. You want to give them a fancy border effect but don’t want to waste a lot of time in Photoshop applying it to every one.

The simple answer is to create an image — larger than the original — that contains the border and its background. Then you simply apply that image as a background image with CSS (give it a “center center” position and sufficient padding) and bob’s your uncle.