Only supported in Webkit and Gecko, at the moment. Not available in Opera or IE.

section#mysection {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 15em;
-moz-column-width: 15em;
column-width: 15em;
-webkit-column-gap: 5em;
-mox-column-gap: 5em;
column-gap: 5em;
-webkit-column-rule: 2px solid #ff0000;
-mox-column-rule: 2px solid #ff0000;
column-rule: 2px solid #ff0000;
}

Cannot:

• select a given column
• size columns differently
• specify percentages

column-rule property allows for border type effect between columns.

A few notes on configuring Apache.

Creating aliases within virtual host

ServerName example.com
ServerAlias examplea.com
ServerAlias exampleb.com
ServerAlias examplec.com


Running HTML files through PHP

AddType application/x-httpd-php .html

Text Shadow

text-shadow: 1px 1px 5px #BCBCBC, -1px -1px 3px #FF0000;

In this example, we have two shadows separated by commas. The first element is the horizontal offset, the second, the vertical offset; the third is the blur; and finally, the colour.

Text Stroke

Only available in Webkit. Draws a border around the text.

-webkit-text-stroke: 1px #000;


Also comes with text fill:

-webkit-text-fill-color: #fff;


This overrides the color attribute in Webkit.

RGBA Colour Opacity

Same as rgb() colour, but adds a fourth parameter for opacity. The opacity parameter is between 0 and 1, inclusive; where 0 is fully transparent, and 1 is fully opaque.

background-color: rgba(255,255,255, 0.5);

rgba() is available in all standards compliant browsers, and IE 9+. There is a workaround for dealing with the wrong-headed browsers:

color: #aaa;
color: rgba(200, 200, 200, 0.5);
As you can see we declare two values. In the case of standards compliant browsers, the rgba() declaration, which comes second, overwrites the first, and we get the benefit of the transparency. For the ludicrous browsers, the second declaration will be ignored, and they get the first declaration color.

We can also use a transparent png for backgrounds.

background: transparent url(bg.png);
background: rgba(255, 255, 255, 0.5);

This will not work with IE6, but anything after that will be OK. I encourage dropping support for IE6, to encourage individuals and corporations to upgrade, or better yet, switch to standards compliant browsers.

Target Selector

Applies styling when the selector is in a target state. Which is to say it is the target of a hash mark in the URL.

#container:target {
  background-color: #f6f6f6;
}

Adjacent Sibling Selector

From CSS2:

h2 + p {}
Will select the second element when it immediately follows the first. (Reference)

General Sibling Selector

From CSS3:

h2 ~ p {}
Selects all p’s that share a parent with the h2. (Reference)

The time has come, the walrus said, to sit your fat ass down and learn TextMate. How can you code if you don’t know your tools? So, for now, just a few links I think I may want to keep around.

Multi-Stroke Key Bindings
Revert To Default Bundles
GetBundle

I was SO getting tired of opening a terminal window to get my web server going when I needed to do some web dev on my MacBook Pro, I finally started looking around for ways to start XAMPP on it’s own when I booted my machine.

I found the answer deep in the forums. It looks like this:

crontab -u root -e
@reboot /Applications/xampp/xamppfiles/mampp start

I didn’t know you could do an @reboot in crontab. It turns out there are a number of these abbreviations, including @hourly, @monthly, @yearly.

Anyhow, it seems to be working, and I’m delighted.

Among other things, I’m the main HTML/CSS guy on Tucows.com and butterscotch.com. As such, I’ve run into many situations where I found the only way to get the effect I was looking for, was to copy a chunk of CSS code from the same document; whether it’s as simple as a colour code, or as involved as a whole set of CSS properties. As a programmer, that’s a heartbreaking position to be in. (Don’t get me started on HTML emails.)

Time and again, I’d hoped each successive iteration of the CSS specification would introduce variables and other such syntactic goodies. But alas, there was no joy.

No joy, that is, until a couple of brave souls decided to take matters into their own hands. You can do that with open source, you know. Alexis Sellier and Dmitry Fadeyev have put together a CSS pre-processor, called Less. It adds four new features to CSS:

1. Variables
2. Mixins
3. Nested Rules
4. Operations

You can find out all about it at their comprehensive documentation page.

The pre-processor is written in Ruby, and installed without a hitch on Bender2, with just one command in Terminal. I’ll let you know how much of a horror-show installing it on Windows will be when I get to it at work.

I’m really looking forward to using this. Let me know of your experiences.

Update: I just installed less on my Windows XP box at work. Minimum drama.

• Install Ruby from http://ruby-lang.org/
• In a DOS box type: gem install less

I also downloaded the less package, but I’m guessing that wasn’t really necessary. gem probably downloads it on it’s own.

Update 2008-08-17: Ran into errors with the Ruby version. But found a link to a PHP version in the Less discussion group.

Shaun Inman has also produced CSS Cacheer. Please let me know what you think of these if you try any of them.

Google is set to stand communications on its head. Again.

The soon to be released Google Wave program, web app, platform, protocol, paradigm is introducing a new way to do email, IM, forums, wikis, social networking and blogs. All-in-one. And not to put too fine a point on it, it looks pretty slick.

Not only do they have an awesome webclient to ship, but we’ll be able to integrate all that functionality into our own websites and programs using their API.

But wait! You won’t have to rely on Google’s servers: they’re making all this stuff open source, so you can host your own version of the Wave.

Here’s the demo from Google IO 2009 developer conference (1h 20min):

There’s also a very good analysis of the technology at TechCrunch.

Awesome sauce.

I was dismayed, I must admit, to find a dearth of binaries when I was ready to install Subversion, the open source version control system, on Bender2, my MacBook Pro. But the journey brought me to an even better conclusion.

Apple has an article about installing Subversion on OS X, but it’s old (2005), and refers to version 10.4 Tiger; whereas I’m on 10.5 Leopard.

Meanwhile, the Subversion Downloads page references three projects offering OS X binaries. I settled on the MacPorts project because it offers a completely up-to-date version of the package. In fact, MacPorts is all about easily loading, building and installing fresh versions of over 5000 open source packages.

OK, confession time. I’ve never compiled a Linux kernel. I’m not keen to start, either. So the MacPorts solution was attractive to me. Here’s what I had to do to get there.

First, you need to install Xcode Developer Tools available from Apple’s Developer Connection. You’ll need to register, but it’s free. Once inside, go to Downloads, select Developer Tools on the right, and scroll down to Xcode 3.1.2 Developer Tools. (I’d give you a link, but I don’t think it would get you there, since its behind the login.)

Xcode is necessary because it has the GNU C++ compiler built in. This is what’s used to compile all these wonderful open source packages. Pluswhich, Xcode’s pretty cool in its own right, and I’m keen to get started playing with it.

The other prerequisite to MacPorts is the X11 windowing environment. Happily, it’s already part of Leopard.

Then you simply install the MacPorts dmg package for Leopard. They also have versions for Tiger and Panther.

Still with me? We’re almost there.

In a terminal window you issue the following command:

      port search subversion

It will list all packages related to subversion in its library of nearly 6000 titles. You just want subversion. So you issue this command:

     sudo port install subversion

It’ll take a while, because MacPorts will also download, compile and install all dependencies, and there are quite a few. But it’ll get you there.

The MacPorts project also sports some very elegant documentation, which explains all the in’s and out’s of the package.

All in all, I’m very impressed with MacPorts, and extremely grateful to all the people who’ve worked so hard on it. Keep up the good work guys!

I’ve been kept very busy over the past couple of months setting up butterscotch.com: Tucows’ new video network, brimming with terrific videos, short and long, providing tips, tricks and insights into technology for pros and tyros.  Our new team includes tech media veterans Andy Walker, as General Manager and Executive Producer; Amber MacArthur, Director of Content; Sean Carruthers and Matt Harris, Senior Producers; and Andrew Moore-Crispin, Web Editor.  In addition to our existing Tucows team, that’s a lot of talent coming together.

Our current line-up consists of regular shows, such as Andy and Sean’s Lab Rats, and Cheryl Poirier’s spin-off, Miss Download; as well as standard and special tutorials.  Tutorials are screen captured how-to’s with a voice over.  Special tutorials are a series of ten or so episodes on a particular topic.  For example, the two special tutes we have on offer right now are Facebook for Grownups and Gmail for Beginners.

We do have other shows already on the site, and many more are coming, so check back often at butterscotch.com, or better yet, subscribe to the RSS feed.

The challenges, for me, in putting the site together, were:

• slicing up the composite and creating the base page (HTML and CSS) (got a lot of Photoshop help from Joan, our graphic artist at Tucows)
• establishing single signon between butterscotch and Tucows.com
• creating the backend CMS (content management system), where Andrew maintains the content which appears on the site

Of course, we’re not done yet.  We’re still developing new and terrific functionality, and figuring ways to integrate the butterscotch and Tucows content.  It’s all about bringing more value to our visitors and authors.

Sure developing the site was a marathon of long days and late nights, and it kept me from family and blogging, but this is the sort of challenge which stretches your abilities and forces you to find new insights into your work.  I loved it.  I wouldn’t want to do it again real soon; but I loved it.