The last few years have found me writing less and less code as part of my day to day activities, but that doesn’t mean I’m not keeping tabs on the latest CSS3 and HTML5 features and techniques for writing efficient and maintainable code. And so it was with great pleasure that I dove into an early peek at Sass for Web Designers from Dan Cederholm a couple days ago.
Like every book from A Book Apart, Sass for Web Designers gets to the point, fast. At a trim 98 pages, this is a brisk and easily digestable read. It’s not comprehensive by any means and certainly not a retelling of the Sass documentation. We should all be thankful for that.
Aside from some introductory housekeeping, the book focuses on a few key concepts such as formatting styles, using variables and mixins, before diving into real world use-cases such as easier to maintain media queries and dealing with highdpi images.
Ultimately Dan’s clear and succinct voice and little touches of humour are what make the book a pleasure to read. I’ve used Sass a bit myself and appreciate Dan’s hesitation to adopt it because it echoes my own experience. If your CSS ain’t broke… But by focusing on how much gain can come from little changes using some of the most impactful aspects of Sass, why it makes sense is just as clear as how to actually do it.
If you’re already a Sass power user, this might not be the book for you, but if you’re slow on the uptake of CSS pre-processors like Sass or Less, or just want to get a peek into Dan’s own CSS workflows, then this is a fabulous primer and easily the best intro to using Sass that I’ve seen.
Sass for Web Designers will be available in November.
Occasionally when my inbox makes that “ping” sound, waiting for me is an email from my father-in-law. Sometimes it’s just a goofy joke or a shared article. Sometimes it’s a post from the media ecology mailing list. Other times it’s something special, such as a document brought back from the UK just the other day by his son (my brother-in-law), Andrew.
A good Booke is the precious Life-blood of a master Spirit, imbalam’d and treasur’d up on purpose to a Life beyond life.
Books are not absolutely dead things, but do contain a Potency of Life in them to be as active as that Soul was whose Progeny they are; nay they do preserve as in a Vial the purest efficacy and extraction of that living Intellect that bred them.
John Milton, Areopagitica (1644)
The sentiment of this brief quote from English poet, John Milton (1608-1674) echoes my own feelings towards books, and I’m certain, my father-in-law’s as well.
While I’m generally enthusiastic about digital books, I caveat it with the simple understanding that digital is not the answer for everything. Some books just don’t belong trapped as backlit ones and zeros. Instead the illumination of these books comes from their physical existence — from the impact they have in three dimensions. The loss of that would be a terrible tragedy.
On Thursday, we (Facebook) announced that we’ve reached the incredibly significant milestone of a billion monthly active users. That’s one and nine zeros. That’s one seventh of the population of the world. That’s a lot of people.
To celebrate, and in a way, say thank you to those first billion people, we produced an ad. My suspicion is that a lot of people won’t get it. It’s a little opaque. It’s definitely not safe, but wants to be quiet and humble. It’s also probably not what anyone would expect.
The magic of an ad like this, like Apple’s famous 1984 ad, is that it’s completely open to interpretation and it’s impact most likely won’t be truly appreciated until much later. Until then — this journey is 14% complete.
American poet, novelist, social, and cultural commentator Charles Bukowski was perhaps best known for being what Time magazine called “a laureate of American lowlife,” whose writing focused on the most ordinary and mundane aspects of life.
An intellectual is someone who says a simple thing in a difficult way. An artist is someone who says a difficult thing in a simple way.
While considering whether or not to attend a book reading by Steve Jobs biograher Walter Isaacson tonight in Toronto, I was reminded of the above quote from Bukowski. It defines Steve for me perfectly, and equally contrasts with McLuhan, who most would say falls into the opposite camp of people who expressed simple ideas in a complex way. I like to think McLuhan just made you work a bit to understand.
LIke pretty much every one of my peers, I’m gutted at the news of Steve’s passing. I don’t know what I’d be doing now if not for what Apple and Steve have created or enabled. Thank you Steve, for everything.
While I’m busily getting back on track in the little spare time I have on that project that I was really hoping to have launched by now, last week I set aside a few minutes to make some under the hood changes on this site. You hopefully didn’t notice. Actually, anyone reading via an older version of Windows (roughly 30 people during the last month) may have, but any quirks will be temporary (maybe) and it’s all part of a plan to finally get a long-delayed redesign and platform change underway.
I’m debating a “live rebuild”, but will more likely do more behind the scenes groundwork and hopefully not break too much else in the process before I make a decision on that.
These latest changes were about accomplishing the following:
Simplifying a bit of the back-end template code
Reducing the number of external assets
Implementing other minor performance optimizations
Preparing for the transition of the underlying code to HTML5
The impetus for these changes was really about changing how the Elsewhere popover is loaded and rendered. Previously the code was rendered statically by Movable Type in every page but also using some PHP processing to grab the latest from my Pinboard feed (or the cached version). Not really very DRY.
Now the popover is rendered as a static HTML file (no PHP at all, rebuilt every so often automatically by the server) and loaded into the requesting page progressively via Ajax. There’s still a standalone (non-JS enabled) page as well of course.
Next up — HTML5-ifying the base structural elements. Where’s my hard hat and jackhammer?
Although he died on the last day of 1980 and has therefore missed further pursuing so many of the technological advances and societal changes he foresaw, July 21st, 2011 marks the centennial of the birth of Marshall McLuhan.
Photo of Marshall McLuhan and Centennial Edition Book Covers (Photographer unknown)
While there have already been “many events”:events this year celebrating McLuhan’s centennial, this week in particular has been the one so many have been waiting for — to properly re-examine, reflect on, and otherwise celebrate McLuhan’s life and still hotly debated body of work.
Even if you’re not familiar with the man or his writing, if you work in the digital realm, you owe it to yourself to at least dip a toe into his observations and ideas — you may be surprised what you find and how it affects you.
Tonight, during a free to the public McLuhan Festival Celebration event, author John Ralston Saul will be awarded the first Gutenberg Galaxy Award for Literature “for his career achievements in literature and his contribution to the culture of Canada.” I also happen to know there’s at least one more surprise in store for someone else close to McLuhan during the evening…
Given the reduced amount of writing I’ve been doing the last, oh, year or so, and the amount of photography gear I’ve acquired during that same time, I think it’s safe to say I’ve rekindled an old love of documenting important events and daily minutiae in photo form, more than in words.
Mix in additional complexity from having multiple cameras — my trusty Canon 30D, the main workhorse of the lot, a Polaroid SX70 land camera, a newer 600 speed Polaroid camera and of course the ubiquitous iPhone which generally acts as my go-to camera when out and about, and the whole thing gets to be a bit much most of the time. Particularly with competing requests for my attention.
Enter the recent release of what some might call “yet another camera app” for the iPhone: Instagram. Boring, right? Actually, not so much.
This one has thus far proven to be special in a way I didn’t expect. It doesn’t do too much that I’d call “new” but what it does do is take all that tedious work and, for lack of a better way to say it, makes it fun again. Or at least makes it “easy”.
Instagram’s killer feature is that it can simultaneously upload a photo to my photostream on Flickr while sharing it on Twitter. It’s also very quick about it all and happens to produce generally great results.
What would make me happier though is if Instagram would share a short link from Flickr instead of their own when passing off to Twitter. It’s simply because I prefer to have my photo content in one bucket, not spread around in too many sites simultaneously despite it meaning additional redundancy. Allowing the user to define their preferred social sharing mechanism would be a nice touch.
And while I really don’t need another social network/app to monitor, Instagram hasn’t been too obnoxious about it, at least not yet. Frankly, it’s been fun so far. I hope it continues to be.
If digital is the way of the future for (most) books, your bookshelves, or those of your children will start to look extremely barren — and the thought of this potentially happening in my lifetime gives me pause.
Illustration of an iPad alone on a bookshelf from The Atlantic
As much as I’m in favour of worthwhile new technology, the designer and anthropologist in me desperately does not want to see the physical object — the “artifact” — go the way of the dodo.
High Fidelity
Contrary to the music industry where fidelity has started decreasing — from CDs to MP3 and M4A audio formats, digital books are moving in the opposite direction and becoming higher resolution than their paper counterparts. Text on paper doesn’t scale well, but digital text does.
An important counterpoint though is the issue of photos and illustrations in books — those things will likely go the low-resolution route in the short-term.
Dots on paper require high resolution to output any semblance of quality. Pixels can be a bit more forgiving, though that is less true as displays increase in resolution and artifacts begin to become more apparent. Early HD television is a good example of this occurrence.
As technology and publishers’ familiarity with electronic format options improves, along with a bit of experimentation, this will likely change. There’s a lot of promise in digital books, but they should be handled properly now to avoid bad precedents leading the way. For example, as Wired magazine is (hopefully) learning right now, a digital publication made up entirely of JPEG images will not fly. I’m willing to give them a pass on the first attempt — because at least they’re trying something — but it’s not a viable long-term strategy.
If you’re living in the US, today is iPad day, otherwise known as the day consumers get their hands on the future of the modern personal computer. If you’re not, well, then it’s pretty much any old Saturday.
Steve Jobs on the cover of the April 2010 issue of Time magazine
Based on the general reaction of themedia, celebrities, and probably most of my US-based friends, Apple’s new iPad device sure sounds like a winner. Hardly surprising given Apple’s basically unbeatable track record over the last few years.
Now if only us Canucks could get our hands on one… Nope. Not feeling left out at all…
For the last few weeks or so I’ve had the opportunity to tinker with the technology preview (beta) of Typekit. It’s been quietly in use on this site since the end of August.
Designers such as myself have wanted the ability to use real fonts on the web for years without the hair-pulling, potential accessibility and licensing issues of image replacement, sIFR, Cufon or other “hacks” (however clever, they’re still hacks — deal with it). We’ve also wanted to ensure type designers and distributors get paid appropriately so they can keep creating and making available greattypefaces.
Typekit, as with other upcoming services such as Kernest and those from Ascender and Typoteque make this possible now by essentially levelling the playing field across browsers, providing pain-free implementation mechanisms and protecting designers from the messy business of licensing issues and ethical ramifications of distributing raw font files to browsers.
A preview of the Typekit kit editor
So, what’s so good about Typekit? Why should designers care?
The Good
More fonts Specify fonts in CSS font stacks beyond the most commonly available fonts. Yay!
Creating Kits is easy Creating a “kit” — a selection of fonts, is simple and for the most part feels familiar; not unlike using a desktop font manager.
Easy to implement If you’ve used sIFR or had to deal with image-replacement techniques, you know how frustrating they can be. With Typekit, just add the Javascript code provided as part of a kit to your pages. The rest is just a matter or specifying fonts in your CSS as you would normally.
Browser support Through a little bit of magic Typekit works across platforms and browsers — even IE6. Personally I would be totally Ok if Typekit didn’t suppose IE6 (or even IE7) but it does so they get bonus points from me for being comprehensive.
Is a good Javascript citizen The Javascript used by Typekit, at least in my experience so far behaves well and doesn’t inadvertently stomp on other Javascript events.
Reliable The service itself seems like it was designed to scale from the start. By using a Content Delivery Network (CDN) instead of a centralized server, the service should be able to withstand very high loads, provide low latency and easily maintain 100% uptime which is appropriate for such a service.
The Less Good
Even though Typekit is a great service that will only get better with time, and although my experience using it has been flawless, there’s still room for improvements. The following would be on my list.
Even more fonts This is a no-brainer obviously. There’s a huge minefield of licensing and IP issues to sort out and understandably that takes time. The biggest issue with the fonts available now — which are largely from smaller foundries and independent type designers is probably that most designers don’t already have their own personal licences to use in comps or outside a browser.
Browsing is awkward Finding the right font to add to a kit can be tedious. Right now the only options for locating fonts is browsing the paginated listings or using the classification/tag filters. Adding the ability to browse alphabetical pages, additional categorizations or a more traditional search interface might help.
Weights and styles It’s not obvious what weights and styles are available for a given font unless you view the detail page for the font or add it to a kit and look at the Weights & Styles tab. Indicating the number of weights and styles in the listings would be a good place to start.
New additions Right now if new fonts are added to Typekit, there’s no obvious way for users to find them other than by browsing through the listings or perhaps by a mention in the Typekit newsletter. Without any inside knowledge it’s hard to speculate how often new fonts will be added to the service but I think it’s safe to assume new fonts will be added with some degree of regularity.
Requires Javascript This really isn’t a big issue in my opinion because for anyone that’s disabled Javascript in their browser likely wouldn’t know what they’re missing anyway.
My gut feeling is that Typekit will ultimately be a stop-gap solution, but one that will keep up with the current momentum of browser vendors, distributors, and type designers who are ready to start licensing fonts to be used on the web so long as everything is licensed properly and intellectual property rights are protected. If they can make it easy, affordable and reliable, I have no doubt it’ll do well and be around for a long time.
Additional Reading/Listening
For some background and detailed context on the concerns from both sides of the fence (type users, type designers/distributors), I highly recommend checking out the recording of the Web Fonts Panel from the ‘09 TypeCon conference.
Get Your ‘Kit On
I’ve got 5 beta invitations for Typekit and if you’d like to get your hot little hands on one, send an email to typekit@ this domain and I’ll hook you up.
For as long as I’ve been using Mac OS X I’ve found myself exploring the Unix underbelly of the operating system and hand-rolling my own web development environment using various open source web projects such as MySQL, Ruby, Rails, Python, Django, etc. The popular stuff at least.
As such I’ve tinkered away at automating the process, because, well, installing all that software is time-consuming, tedious, and really — who doesn’t have better things to do?
So after much tinkering, tweaking and head-scratching I built a little project that I open-sourced and dubiously called …And the Kitchen Sink because that’s what it felt like. Eveything… and the kitchen sink.
Recently, Kenny Meyers goaded me into moving the project to Github and I’ve been maintaining both the original on Google Code and the Github version. That does sound like fun, doesn’t it?
And now that the next big cat, Snow Leopard will be officially out of the bag tomorrow (it’s helpful to have access to pre-release builds via the Apple Developer ConnectionFYI), one would think the logical next step would be to test things to make sure they still work, especially given that Snow Leopard is 64bit through and through. I did. They didn’t.
After several long nights and more head-scratching, now …And the Kitchen Sink is too.
Everything… And The New Hawtness
Aside from ensuring the script built everything as 64bit binaries (just like in Snow Leopard itself) I actually went quite a bit further and radically changed the way the script worked and have started splitting up several core tasks into smaller individual ones that can be run in sequence rather than one big-ass monolithic process.
Par exemple — now you can: download the various included packages, compile everything, and then finally setup MySQL (unless you screw things up real bad, this only needs to be done once). If you’ve tried the old version, trust me, this is a hands to the sky kind of improvement.
What You Can Do
There’s still other changes and improvements coming — my plan (in as much as I have one) is to either split things into “bundles” (eg. a Ruby bundle, a Django bundle, etc.) or allow some sort of flexible configuration to decide what actually gets installed. I’m not there with that yet.
In the meantime the thing desperately needs some “in the wild” testing. That’s where you come in. So go, download, read the “README” file (for reals), try it out, report bugs and make suggestions. The best ones get a cupie doll. If it changes your life, I happily accept donations.
One last note — keep in mind that I’m not a developer, ok? I just play one in my spare time.
It’s spring or at least that’s what the calendar says and that means it’s time for some spring cleaning. As a result of the changes ‘round these parts I now have a handful of software licenses that are no longer being used along with one shiny, good as new 24” iMac computer that’s for sale (the other ones are already accounted for).
At this point I don’t have much need to keep a second iMac around in the office since there’s already two other Macs and a PC at my disposal. The iMac is one of the current aluminum models (though prior to the last hardware minor update a few weeks back), approximately 6 months old and includes the obligatory AppleCare extended warranty.
Built-in stereo speakers, microphone and iSight video camera
Apple Keyboard and Mighty Mouse
Mac OS X 10.5 Leopard + iLife 08 software bundles
$1,800 — SOLD
If you’re interested or have a question about any of the above items, get in touch by sending an email to springcleaning {at} wishingline.com. Everything is first-come first-serve and once something is gone it’s gone. Shipping is not included and will be determined on a per-item basis as required.
Since June of last year (following attending WWDC in San Francisco) I’ve had an item on my To Do list — “experiment with improving the overall performance of the Wishingline Notebook site.” In other words, do some under the hood optimizations.
Yahoo! has a terrific set of guidelines that can be used to squeeze the most performance out of your site. This, along with a talk from WWDC last year piqued my interest in learning more — especially any simple things I could put into practice in my client work as well.
First on my list was experimenting with minifying and concatenating Javascript and CSS files. This is easily done with the YUI Compressor or other similar utilities. The trick is automating everything when changes are made. For example, generating minified versions automatically when deploying files to your site.
Second on the list was moving the site’s CSS, Javascript and images to their own subdomains, allowing browsers to download assets faster since most are limited to two connections per server. By splitting things up browsers can use more than just two concurrent connections, thereby loading the site faster.
1 domain = 2 concurrent connections. Ok but not great.
4 domains = 8 concurrent connections. Zippy!
Unfortunately it wasn’t until this past week that I had a chance to look into this one.
I started with two simple goals:
Provide separate URLs for Javascript, CSS and images.
Make the code change across the site templates simple.
Setting up subdomains in Apache is simple and adding the necessary DNS entries and virtual subdomains to accomplish the first goal took less than 10 minutes.
On the other hand, being smart about how to handle putting those subdomains into the template code elegantly was a bit trickier. Sure I could just hard-code the URLs into the site templates — but that kind of sucks. I had a better idea.
The Notebook site has been running on Movable Type since 2003 and a better way to accomplish this would be by using template tags. And so I did, though it meant creating a special plugin for Movable Type to do so.
Enter MediaURLs for Movable Type 4.x, a new plugin that allows users to specify a series of URLs for serving CSS, Javascript and image assets each from their own domain or subdomain while providing a set of corresponding template tags to make applying those changes DRY, easy, and fast.
MediaURLs plugin congiguration screen
Each of the four setting options provided by the plugin settings (shown above) are optional and should be fairly self-explanatory. A simple example of how to use these is included in the documentation.
The general “media” option was added at the last minute for the sake of simplicity — to allow the use of a single generic domain/subdomain to serve any type of asset — for example, serve all CSS, JS and images from a single secondary domain.
The MediaURLs source is being hosted at Github and will be regularly maintained. This is really only a first release and I’m open to suggestions for further improvements. Enjoy and happy optimizing!
Nearly a year ago I started working on a simple iPhone-optimized version of the notebook. I was tinkering with this for a few days in-between other projects or late at night until I accidentally wiped out the stylesheet. Oops. It wasn’t under version control because, well, I was tinkering.
It’s taken me until this past weekend to get back to doing something about that though my approach ended up being a bit different this time around.
A preview of the current iOS optimized version of this site
This time instead of using a stylesheet-only approach, I’m employing three simple templates in Movable Type along with a customized stylesheet from Joe Hewitt’siUi (we’re not using the Javascript bits at least for now).
On the server, mod_rewrite takes care of the magic of automatically redirecting requests to the mobile site — there’s no need to visit a different URL when browsing from either an iPhone or iPod touch. I believe this will also work on an Android device though I don’t have one and have not actually seen one so I can’t confirm that.
To some degree this is a stop-gap solution, particularly since not everything that should be there is available in the mobile site yet (eg. no commenting), but it makes for a good prototype and gives us somewhere to start making improvements.
Elsewhere/Everywhere Else
Recently there’s been some chatter from other folks about amalgamating various bits and pieces of content from other sites such as Twitter, Flickr, delicious, etc into their blogs.
While the idea itself is not entirely new — I think we all like the idea of our own sites being something of a central hub where people can go to get an overview of what we’re up to wherever we happen to be at any particular point in time, this formerly supplementary content has over the last couple years grown to comprise a larger percentage of our content publishing lives.
To that end, a little while ago I quietly updated the less than prominent Elsewhere section to periodically update/cache the latest from our delicious feed along with making the Flickr photo feed refresh automatically instead of us having to manually publish changes.
The long-term plan is to eventually integrate this content into the notebook itself, giving it the same level of prominence; but we’re not there yet. We’ve got other fish to fry first.
For the past few weeks we’ve been working on designing and building out a site for a client and since selecting Movable Type 4 as the CMS, we thought it would be worth giving the relatively new Virtual MT a try as part of our development process. Although our overall experience using VMT so far has been great, we ran into one small nit: the default site isn’t served from the root URL of the server and instead uses a subdirectory path. This (probably) should be a user-defined option, but isn’t currently, so we set out to resolve this for ourselves.
Let’s be honest — Movable Type has always been a bit of a pain to run on Mac OS X unless you happen to be or know someone well-versed in the black art of the command line and Perl. A black art if you’re a designer at least. This is exactly why VMT is great, particularly if you’re already used to running Windows in Parallels or VMWare for browser testing and debugging.
Virtual MT comes pre-packaged as part of a lightweight Ubuntu Linux OS. Downloading and running an instance (or multiple instances) of VMT is simple and we’ll cover the process using Parallels 4 before walking through the configuration change to allow the default site to be served from the root path of the included Apache web server.
Downloading and Running VMT
Get started by downloading a copy of Virtual MT which comes in both Open Source and Commercial (Pro) flavours. Unzip the downloaded archive and read the included Read Me file. No really, read it.
Parallels Virtual Machine list
Next, locate the VM Image file for Parallels (or your preferred Virtual Machine software) in the unarchived folder in your Downloads directory. In the case of Parallels, this file should end with a .pvs extension. Double-click the file to add it to the Parallels Virtual Machine library. Parallels 4 will request the VM image be converted to the newer bundle format.
The Virtual Machine book screen in Parallels
Click on the Virtual Machine and start it. In a web browser, go to the Configuration Page URL displayed in the running Virtual Machine window.
The running Virtual Machine window in Parallels
Complete the base configuration to enable access to the VM and Movable Type itself.
The configuration screen for the Movable Type JumpBox
Once the base configuration is complete, go back to the main Configuration Page and click on the SSH/SFTP icon. Check the checkbox to enable SSH/SFTP access and then save the change.
The Movable Type configuration home screen
At this point you should have a fully functional, ready to customize virtualized install of Movable Type. No mucking about in the command line or Perl module installation required. Next — improving the configuration.
VMT Configuration Changes
In order to “correct” the configuration of VMT, provide access to the VMT install at the root of the included Apache web server and make accessing the MT insall and any published templates easy, you may want to install either MacFuse or ExpanDrive which let you access the virtual OS filesystem just like any other shared disk. Alternatively, Transmit or any other software that supports SFTP connections will also work, though direct access in the Finder is considerably more user-friendly.
And now the nerdy part. To make the necessary Virtual Machine configuration changes, run the following two commands in a new Terminal window. Replace VIRTUAL_IMAGE_IP_ADDRESS with the one provided in the VM window on your computer.
After entering your admin password when prompted, in the pico text editor, change the contents of the jumpbox-app file to match the following:
# Alias /movabletype/blogs /var/data/mt-blogs
Alias /movabletype /var/data/movabletype
<Directory /var/data/movabletype>
AddHandler cgi-script .cgi
Options +ExecCGI
# Uncomment the following lines to enable FastCGI
# <FilesMatch "^mt(?:-(?:comments|search|tb))?\.cgi$">
# SetHandler fastcgi-script
# </FilesMatch>
</Directory>
<Directory /var/data/mt-blogs/*>
AllowOverride All
</Directory>
# Uncomment the following lines to enable FastCGI
# FastCgiServer /var/data/movabletype/mt.cgi
# FastCgiServer /var/data/movabletype/mt-search.cgi
# FastCgiServer /var/data/movabletype/mt-tb.cgi
# FastCgiServer /var/data/movabletype/mt-comments.cgi
RewriteEngine on
# RewriteCond /jumpbox/var/widget-on !-f
# RewriteRule ^(/?|/index.(html|php|htm))$ /movabletype/blogs/my_blog [R]
# RewriteCond /jumpbox/var/widget-on !-f
# RewriteRule ^/jblogin.(html|php)$ /movabletype/mt.cgi [R]
# DocumentRoot /var/www
DocumentRoot /var/data/mt-blogs
Save your changes by typing Control-O and then Control-X. To then restart Apache so it will reload the newly updated configuration, type the following in the Terminal.
sudo /etc/init.d/apache2 restart
Updating Movable Type’s Publishing Paths
The last thing that needs to be done is to update the Publishing Path values for each blog instance in Movable Type so content will be published to /var/data/mt-blogs instead of the default location. This is done from the Preferences > Publishing screen in the Movable Type admin interface.
Set the value of Site URL to the IP address of the VM and set the Site Root to /var/data/mt-blogs. If running more than one blog instance, change these values apporpriately. Save the changes and re-publish. And that, as they say, is that. Enjoy!
Note: The current (as of this writing) release of Virtual MT is slightly out of date with the recent 4.23 release of Movable Type though it’s simple enough to update your own base install in VMT.
One of the things that annoyed me with the process of setting up a Subversion server with SSH access, aside from the sheer complexity, was the number of steps required just to create a new project. Once was bad enoug, but repeating those steps each time to create a project just didn’t scale…
So, a bit of Bash scripting later and everything is much, much easier.
Assumptions
The instructions and script that follow assume you completed the earlier tutorial carefully when setting up your own Subversion server. It may not be appropriate or work as expected otherwise. As always, YMMV.
Creating, Configuring and Using the Script
Somewhere in your $PATH on the system acting as your Subversion server (I suggest /usr/local/bin), create a new file named svnproj, set the file as executable and then finally open the file for editing.
#!/bin/sh
REPOSITORY="/svn" # Set to your repository path
USER="admin_user" # Set to your system admin user
# ====================================================
# Do not change anything below the line above
PROJECT_NAME="$1"
if [ $# -eq 0 ] ; then
echo "Usage: newproj PROJECT_NAME"
exit
fi
echo "------------------------------------------------"
cd ${REPOSITORY}
svnadmin create ${PROJECT_NAME}
echo "Created project: '$PROJECT_NAME'"
echo "Configuring svnserver.conf for restricted access"
cp ${REPOSITORY}/${PROJECT_NAME}/conf/svnserve.conf \
${REPOSITORY}/${PROJECT_NAME}/conf/svnserve.conf.default
cat > ${REPOSITORY}/$PROJECT_NAME/conf/svnserve.conf << "EOF"
[general]
anon-access = read
auth-access = write
[realm]
realm = Projects
EOF
echo "Successfully set svnserve.conf"
chown -R ${USER} ${REPOSITORY}/$PROJECT_NAME
chmod -R 770 ${REPOSITORY}/$PROJECT_NAME
chmod g+t ${REPOSITORY}/$PROJECT_NAME/db
echo "------------------------------------------------"
echo "Done"
The script requires you to set two internal variables in order for it to actually work; one which sets the location of your repository, and a second which sets the admin username on your system which will be the default owner of files and folders in the repository. You can find these at the top of the script, named REPOSITORY and USER respectively.
Running the script is as simple as:
sudo svnproj PROJECT_NAME
If you happen to run the script without the PROJECT_NAME parameter, it will simply output the usage note and exit gracefully. Whether you need run the script via sudo ultimately depends on where your repository is located on your server.
Our particular version of this script does one additional thing — it creates a post-commit hook script and automatically inserts the necessary code to output commit messages as an RSS feed per these instructions.
As Wishingline has slowly grown beyond just one person, the need to change workflows and improve our ability to communicate and collaborate with clients, peers and partners has prompted us to do things a bit differently than in the past. One of these things has been to set up our own internal Subversion server. Yeah — we know git is the new hawtness, but the tools available and integrating git are few, and honestly, our own experience with it has not left us paricularly enamoured.
In setting up a new Subversion server for us to use internally, secured on our network, but also accessible remotely, we started off with our own tutorial from back in 2007, a bit of help from the official Subversion book, and our old friend Google. We ran into a few problems along the way, and so in the hopes of saving others from running into the same issues, this entry will hopefully serve as a straightforward and complete guide to setting up a Subversion server using svn+ssh authentication on Mac OS X (Client and/or Server).
Prerequisites
In order to complete everything below on your own systems, you will need:
At least two Mac systems: one which will act as a central Subversion repository (server) another as a development workstation.
Mac OS X: Leopard 10.5.x (ideally 10.5.5) Client or Server. There’s a good chance that you’ll be able to follow this guide on Tiger as well, but YMMV.
Xcode 3.0 or newer, included on the Leopard install DVD, included with the iPhone SDK and otherwise available free from the Apple Developer Connection site.
A sufficient degree of comfort in working in the Terminal application.
Administrative access.
A few Notes Before we Start
Nearly all the instructions to follow require extensive use of the Terminal application which can be found in the /Applications/Utilities folder on your Mac. Each line in the code examples that follow should be entered into the Terminal and followed by the Return key.
Setting Up Your Envrionment
As with other Unix operating systems, Mac OS X uses the PATH environment variable to determine where to look for applications when working on the command line. It’s common to install custom builds of Unix software in /usr/local in order to avoid interfering with core system software. A big benefit being that you don’t have to worry about updates to Mac OS X inadvertently overwriting your custom software installs.
To set your the PATH for your user account on your workstation, you will need to either create or edit a .bash_login file which is commonly used to customize the default shell environment on a per-user basis. To open or create the file, in the Terminal, type:
pico ~/.bash_login
If the file does not exist, the following needs to be added at the end of the file in order to set the necessary PATH variables so that you will be able to use the various Subversion applications without needing to specify the full path to them on your systems.
The one oddball in the above PATH is the path to the aliasbin directory. We’ll explain what that’s all about later on. Patience grasshopper!
Save and close the file by typing Control-O and then Control-X. You’ll be returned to a new prompt in the Terminal. Close the window and open a new one to load your changes.
Xcode and Subversion
When you install Xcode 3.0 or newer, a version of Subversion (at the time of this writing, version 1.4.4) is also installed. Although you could use this version and skip a few steps, this tutorial is based on using the latest and greatest.
Step 1: Installing Subversion Prerequisites
Before installing Subversion there are a number of prerequisites which can or should be installed depending on your specific needs. In this particular case, the only one necessary is zlib which is used to add compression support to Subversion.
In order to keep things neat and tidy, source downloads can be saved to the Downloads folder in your home directory or wherever you prefer.
Installing zlib
To download, compile and install zlib, type the following in the Terminal:
cd ~/Downloads
curl -O http://zlib.net/zlib-1.2.3.tar.gz
tar -zxf zlib-1.2.3.tar.gz
cd zlib-1.2.3
./configure --prefix=/usr/local
make && sudo make install
cd ..
Once you get to the sudo make install command, you should be prompted for your administrator password. Enter that when requested in order to complete the installation.
Installing neon
If you want or need WebDAV support in Subversion, you can also install the neonHTTP and WebDAV client library. neon is entirely optional, but if you want to install it, type the following in the Terminal:
cd ~/Downloads
curl -O http://webdav.org/neon/neon-0.28.3.tar.gz
tar -zxf neon-0.28.3.tar.gz
cd neon-0.28.3
./configure --prefix=/usr/local \
--enable-shared=yes \
--with-ssl=openssl \
--with-libxml2
make && sudo make install
cd ..
At this point you should now have the two primary prerequisites installed, meaning you’re now ready to download, build and install Subversion itself.
Step 2: Installing Subversion
Compiling Subversion with all the necessary support libraries is straightforward. If you did not install neon as in the prerequisites above, be sure to omit that line in the configure command below.
cd ~/Downloads
curl -O http://subversion.tigris.org/downloads/subversion-1.5.4.tar.gz
tar -zxf subversion-1.5.4.tar.gz
cd subversion-1.5.4
./configure --prefix=/usr/local \
--disable-mod-activation \
--with-apxs=/usr/sbin/apxs \
--with-ssl \
--with-zlib=/usr/local \
--with-neon=/usr/local \
--without-berkeley-db \
--without-sasl
make && sudo make install
cd ..
You should now have Subversion installed on your system(s) in /usr/local/. You can verify this by checking the version of one of the Subversion applications. Type svn --version in the Terminal.
In order to create a complete client-server configuration with remote repository access, you will need to complete Steps 1 and 2 on both Macs. If you’ve got more than two Macs, repeat as necessary.
Step 3: Workstation Public/Private Key Creation
Public/private keys can be used to secure your network communications even more than relying on simple password authentication. In this particular case, these keys can be used to provide secure authentication to your repository. To create a public/private keypair, in ther Terminal, type:
cd
mkdir ~/.ssh
ssh-keygen -t rsa
If you do not want to use a passphrase as an extra level of security, just press Enter when prompted. The ssh-keygen command will create two files in the .ssh directory, ida_rsa.pub and ida_rsa.
The first, with the .pub extension is your public key which you’ll need to copy to the Mac acting as the repository server into a file named authorized_keys. The second is your private key. Do not share this with anyone. Seriously. The private key will be unique to each system/user and identifies that particular Mac when authenticating to the server or to any other systems sharing the public key. Simply put, in order to authenticate successfully, you need both halves of the key.
Step 4: Setup Users and Groups on the Server
There’s a few different ways users and groups can be managed: the Accounts system preferences panel, the command line and the Mac OS X Server Admin Tools which can also be used on the consumer version of Mac OS X and not just the server edition.
Launch the Workgroup Manager application from the /Applications/Server folder and press the Cancel button when prompted to login to the server. Instead, select View Directories from the Server menu and click the lock icon on the Workgroup Manager window to authenticate yourself as an administrator.
Create a Subversion Users Group on the Server
Before users can be given access to the repository, users all need to belong to a common group which will have read/write permissions for the repository on the server.
Creaing a new group in Workgroup Manager
Click on the Groups tab to switch to the Groups view and then click the New Group button to create a new group. Give the group a Name and Short Name and press Save. Click on the Members tab to add users to the group or switch to the Users tab and add users to the group from there. Depending on how many users you need to provide access to, one method might be faster than the other.
Adding members to a group in Workgroup Manager
Create User Accounts on the Server
Unlike other Subversion authentication methods (file://, svn://), accessing a repository via SSH requires that real user accounts exist on the server. In theory at least, these users should be able to access the server via SSH as any other user, though this can be restricted. More on that later.
Create any needed user accounts by clicking on the New User button in Workgroup Manager.
Creating a new user account in Workgroup Manager
Under the Basic tab, enter a Name, Short Name, Password, and set Administrator Access. Under the Home tab, press the Add button and enter /Users/USERNAME in the Full Path field and press Ok. Save your changes and click the Create Home Now button. This should create a new user just as if you did so using the Accounts preference panel in System Preferences and also generate their home directory.
Setting a user’s home directory in Workgroup Manager
To finish configuring access for each user to allow passwordless access using their individual public/private keypair, the user’s public key needs to be copied to an authorized_keys file in a .ssh folder in their home directory on the server.
Copy each user’s public key file to the server into their home directory. Exactly how you do this isn’t particularly important, but putting the key in the right place, named correctly and with the correct permissions is.
The cat command will take the contents from a file named id_rsa.pub and append it to the end of a file named authorized_keys or create a new file if it doesn’t exist. Repeat for each user needing access the Subversion server and replace USERNAME with the appropriate value. You can do this from a single administrative user account or by logging in as each individual user in sequence.
If a user has more than one computer which may require access to the repository, you can include more than one public key in the authorized_keys file; just ensure each is on it’s own line. Using the cat command above will do just that.
Step 5: Secure SSHD on the Server
Out of the box on Mac OS X, SSH is relatively secure, but there’s more we can do to improve it’s resiliance, particularly on the server side of things. To enhance the security of the server, edit the /etc/sshd_config file in the Terminal.
cd /etc
cp sshd_config sshd_config.orig
sudo pico sshd_config
Locate and edit the following list of configuration properties for the SSHD daemon process so they appear as shown below. Press Control-O, then Control-X to save the changes.
Protocol 2
PermitRootLogin no
PasswordAuthentication no
X11Forwarding no
UsePAM no
UseDNS no
AllowUsers [list of users -- see Step 4]
The list of users to be allowed should be based on the user’s short name and separated by a space. Note that you can skip changing the PasswordAuthentication setting if you may need to provide password access.
Note: If you need to add a new user later, you will also need to add that user to the AllowUsers setting in the sshd_config file and restart the SSH process on the server. Also, if you really want to secure things a bit more, change the default port to something other than 22. The catch is that you will have to include the custom port as a parameter when connecting via SSH.
Step 6: Create Aliases of the Subversion Applications
In case you were wondering… this is where we get really nerdy.
To allow more than one user commit access to the repository, when logging in via SSH, each authenticated user will run their own instance of the svnserve process on the server. As such, the process needs to run with a specific umask in order to prevent permission problems.
There’s two things we need to do in order to make this work:
Create a few simple shell scripts that run the appropriate svn application using the required umask. This should be done for svnadmin, svnlook and svnserve.
Then in the pico editor, type the following. Replace svnserve in the example with each of svnadmin, svnlook and svnserve.
#!/bin/sh
umask 002
/usr/local/bin/svnserve "$@"
Press Control-O and then Control-X to save your changes, quit the editor and return to a new prompt. Finally, set the necessary ownership and permissions on the scripts.
In order to ensure that the new svnserve alias is used when a user is interacting with the Subversion server, a special command must be prefixed before each public key listed in a user’s authorized_keys file.
sudo ~USERNAME/.ssh/authorized_keys
Replace USERNAME above with the specific user’s shortname.
Replace USERNAME above with the specific user’s shortname and note that the command above should be added on a single line with no line breaks, including the entirety of the public key. The value of PUBLIC_KEY should be the existing public key. Save the changes by pressing Control-O and then Control-X.
Step 8: Create a Repository on the Server
You’re most of the way there now… You’re now finally ready to create a new repository and project to test things out. The basics of this are no different than if you were using basic file:// or svn:// methods to access the repository.
Note that you shouldn’t need to specify /usr/local/aliasbin before the svnadmin command because you should have that included first in your PATH variable. If you haven’t done that, go back to step one before proceeding any further.
To create a new repository and versioned project at the root of the server and set the necessary permissions (though technically you could really put this anywhere you wanted on the system), simply execute the following, replacing SVN_USERS_GROUP_NAME with the name of the group set in step four:
The above commands create the repository directory itself, create a new test project (named “test_proj”) and then set the necessary permissions. The one critical command above is the last one which sets a sticky bit on the project’s “db” folder which ensures that permissions are maintained, particularly since more than one user will have write access to the project. This will save you frustration in trying to sort out why a second user all of a sudden cannot commit a change to the repository…
Finally, in order to secure the project so that only authorized users can read and write to it, you should edit the svnserve.conf file for the project and set the appropriate permissions as below. By default anyone who can login to the server should be able to access the repository in a read-only state, but no one has write access. This is clearly not right, so let’s fix that.
Press Control-O and then Control-X to save your changes and return to a new prompt.
At this point you should have a basic project created and the necessary permissions set to ensure that all users will be able to access it as needed. A caveat to repository access using svn+ssh is that there is no mechanism to restrict access to only specific users on a project by project basis unlike other methods which provide simple facilities for this using configuration files. These configuration files are not used when accessing a repository via svn+ssh.
Note that when you create a new project in your repository, repeat the process of creating the project as illustrated above. You can obviously skip the step of creating the actual repository directory itself.
Step 9: Check out Your Test Project
That’s it. Everything should be set and ready to roll. You can test that your Subversion server is configured properly by performing a simple checkout of your test project.
In a Terminal window on your local workstation, type:
cd ~/Sites
svn+ssh://USERNAME@IP_OR_HOSTNAME/test_proj
If all goes well, the project should download securely over SSH to the Sites folder on your Mac workstation. You’re then free to test committing a change back to the server.
If things work the way they should (cross your fingers), you should see a message indicating your change was committed to the server as version 1.
Wrapping Up and Final Notes
Setting up secure access to a Subversion repository is not for the faint of heart as it turns out and hopefully you made it this far.
As noted earlier, there’s a few other things you might want to know about how things are configured. You’re best to grab a copy of the official Subversion book and read through the relevant chapters. In particular, although you’ve provided secure access using public/private keypairs and set a command value in the authorized_keys file which otherwise prevents normal SSH access into the server, it is possible that a user could gain SSH access through other methods. In order to provide as few permissions as possible, you may want to set a few more restrictions by setting additional options immediately after the command in the authorized_keys file. You can read more on this on page 168 in the official Subversion book.
Questions, comments, or errors/typos in any of the above can and are encouraged to be noted in the comments. Finally — as with any such tutorials, YMMV.
One of the small tasks I set out to accomplish as part of moving this site (and numerous others) over to Slicehost was to fix a few plugin-related problems and template logic that broke at some point, possibly due to Movable Type updates, other template changes or just insufficient testing.
Fixing Gravatar support in the Notebook was one such problem. There are a number of versions of the Gravatar plugin for Movable Type floating around on the internets, but all are outdated and as such, incompatible with version 4.x. So I set out to figure out why, and as it turned out, the fix was simple and straightforward.
The problem came down to this: the URLs being constructed by the plugin were wrong, likely due to the plugin being developed long before Gravatar’s 2.0 re-launch a couple years back and whatever changes were introduced as part of that. So for anyone else who’s run into this issue, or wants this functionality for their own site, hopefully this saves you a few gray hairs.
This updated version of MT-Gravatar is also available from the Movable Type Plugins site, and the necessary documentation can be found within the plugin itself.
Although not a meme (that I’m aware of), maybe it should be — here’s a look at my workspace at Wishingline HQ. I’m a notorious neat-freak, but I also like gadgets, figures and other trinkets to keep me interested, inspired and hopefully productive.
A look at my desk in the Wishingline office in sunny Leslieville
On my desk is:
iMac 24”
Apple iPhone 2g
Tim Hortons coffee and chocolate dip donut
Powell & Hyde Cable Car candy holder used for business cards
Robot pencil sharpener
Finger drums
Wacom Bamboo tablet with mouse and stylus
Stack of in-progress project folders
Moleskin notebooks
Field Notes notebook from AEA Boston
Set of Simpsons miniature figures
Simpsons trivia card game
Three sets of Tim Burton “Oyster Boy” figures
Bills, receipts and other miscellaneous paperwork
A copy of “Designers are Wankers” by Lee McCormack
Veer’s “I draw pictures all day” sketchbook which is used to house our crazy ideas (just out of frame)
What’s on your desk? Feel free to share if you’re so inclined by posting either a photo or a link in the comments. Photos should be sized to 523px wide by (ideally) a multiple of 9 or 18.
Whenever there’s been a few spare moments since we first released our Webkit CSS bundle for for TextMate, we’ve been diligently making progress at adding the handful of missing Webkit CSS properties and making minor adjustments to the organization of the bundle contents.
More than that though, we’ve been working on implementing the ability for the bundle to be easily updated from within “TextMate”: textmate itself without having to restart the application. Today, we feel confident to say that it’s working properly although with a couple minor caveats.
Caveats
In order to support auto-updating, and to get an initial build of the bundle itself, you’ll need to have Subversion installed somewhere on your system. The easiest way to get this is to install Apple’s Xcode developer tools or the iPhone SDK. Both are free downloads (and available on your Tiger/Leopard install DVDs).
The updater will do its best to locate the svn binary in order to perform updates, but if not found, will output a short error message.
The other caveat (we hope to eliminate or make easier to manage soon) is that the updater expects the bundle to be installed in the Library/Application Support/TextMate/Bundles/ folder your home directory, though technically you should be able to install bundles for all users on your computer in the Library folder at the root of your drive.
Updater Usage Notes
Updating the bundle periodically is simple. Select ‘Webkit’ from the Bundles menu, and then the ‘Self-update bundle’ command which will do the rest.
You can update the bundle directly within Textmate through the magic of version control
We’ve done a bit of testing in the wild on our own, but we’re of course interested to know if you’re using the bundle and run into any problems with the updater. Feel free to drop a note in the comments or file a bug on the project’s Google Code page.
Recently we’ve found ourselves working on a few projects that lended themselves to either allowing, or requiring us to use some newer Safari/Webkit-specific CSS3 features, and in the time since we’ve started to put together a bundle of language snippets for TextMate (our preferred editor) to make us more efficient, and to make remembering this stuff a bit easier.
The bundle, which currently contains nearly every new -webkit-prefixed property currently listed in Apple’s Safari/Webkit documentation along with a few snippets of code related to creating and using offline SQLite databases in Webkit is available via the project’s Google Code repository at:
http://code.google.com/p/webkit-css3-bundle/
In the spirit of open source, we’re releasing this software under the MIT license (which we hope is a suitable option), meaning you’re free to download, use, modify and redistribute it. Of course rather than distributing it yourself, we’d appreciate it if you’d instead simply refer folks to the project’s repository. No specific ownership or warranty is implied (YMMV) in the included language snippets.
Although Subversion access to the project is currently restricted, if you’re interested in contributing to improve and enhance this bundle, please get in touch with us and we can discuss providing access to the project. Errors and omissions should be reported via Google Code. Any general comments and feedback is welcome here in the comments though.
And no, we’re not dead. Busy. A bit dozy in the mornings, but starting to come up for air.
On Tuesday, Steve Jobs was quoted in the New York Times when commenting on Amazon’s Kindle ebook reader device as saying:
It doesn’t matter how good or bad the product is, the fact is that people don’t read anymore.
This caught my eye in particular and stopped me in my tracks as it relates to a trend I’ve noticed on Apple’s own site over, let’s say, the last year or so. Less text. More graphics. More video.
Forty percent of the people in the U.S. read one book or less last year. The whole conception is flawed at the top because people don’t read anymore.
I find these comments fascinating due to the proliferation of book stores here in Toronto and around the world — the big chains and small independents over the last 10 years. It’s completely contrary to my own experience. If I had to guess, I would say my local and extended (interweb-related) social circles read more, not less. Based on my book spending and reading habits over the last few years, I certainly wouldn’t fall into that 40%.
Whether there is any direct connection between Jobs’ feelings on the matter of reading and the amount of text content on the Apple website is not for me to say with any absolute certainty since I do not work for Apple, nor do I have any information on the inner workings of Apple’s web design/content teams, but it does strike me that such a connection could be drawn to explain what happened to all the content.
Leopard, despite having 300 new features being promoted has still managed to tuck away a few more interesting and useful tricks which are now slowly being uncovered. A couple such useful features revolve around what might be one of my favourite new features - screen sharing.
Basically Apple included a full VNC client right into the core of Leopard; something previously only available either via third-party apps or Apple’s own Remote Desktop. If you haven’t tried it, find a friend running Leopard, connect via iChat and share your screen or connect to theirs. Cool, no?
Screen Sharing toolbar in Mac OS X 10.5
But there are a few more hidden features tucked away in the System/Library/CoreServices folder on your drive. The first is a browser view to see any active systems via Bonjour. You can access this by running a simple defaults command in the Terminal and then opening the Screen Sharing application which you can find in that CoreServices folder.
The browser may be a bit buggy which would explain why it’s disabled by default, but it’s handy nonetheless. On top of this, you can also access a number of other useful features via the toolbar in the screen sharing app window which bring it a few steps closer to Remote Desktop such as Full-screen mode, Control the other screen, Share Control of the other screen, Capture (take a screenshot), Curtain and adjust Quality. Adding these is simply a matter of editing the application plist file which you can find in your Preferences folder.
Open the com.apple.ScreenSharing.plist file using the Property List editor (installed with the Xcode developer tools included with Leopard) and expand the list items to show the following.
In releasing Creative Suite CS3, Adobe forgot, or for whatever reason decided not to update the Flash Player icons as part of the general installation thus adding one of a few rough edges around what is otherwise a pretty good software package (truly horrible and inconsistent software updaters aside).
Replacements for missing Adobe FlashPlayer CS3 icons
Although there are a number of different sets of replacement icons for the various Creative Suite applications to be found around the net, for myself at least, I prefer having something that blends in seamlessly with the originals, at least until Adobe releases a proper update (since we know they’ve designed the icon already). Therefore I took it into my own hands to put something together and have decided to share it.
Included are resources for the Mac OS X and Windows versions (sorry, no 512 px versions yet) along with 16, 32, 48 and 128px transparent PNGs. I will not be releasing the PSD source for this, so don’t bother asking. Thx.
Even though I already have more than enough going on to keep me busy, the projects I’ve been handling lately have inspired me to get a little skunkworks project out of my mind and off the ground. So today marks the start of my what little free time I have project, remarkr.
remarkr project identity
remarkr will have nothing to do with blogs, or bookmark management, wine or web-based invoicing but will have everything to do with filling a huge hole in the graphics industry and will hopefully put the competition to shame by providing fewer features, a significantly user experience and more bang for your buck.
I’ll undoubtedly be talking to a few Rails folks at RailsConf in just over a week’s time about this to gauge interest and see if anyone else would like to come on board to lighten the load and share in the fun.
If you’re interested in participating, fire off an e-mail to whatis [at] remarkr [dot] com or sign up for the launch.
Clean, (at least reasonably) semantic code is something I strive for when writing code as part of web projects at Wishingline Design Studio, Inc. It’s not always easy or possible due to numerous factors, but it’s a worthy goal nevertheless.
This is especially true of more marketing or information-driven sites where I feel there’s a greater likelihood of visitors using screen-readers or requiring enhanced accessibility. Try to provide a reasonably good experience for everyone — within reason. This is a philosophy I know is shared by many web professionals who care about standards, usability and accessibility.
What I’ve noticed of late is that a good portion of “Web 2.0”-style applications don’t necessarily follow those rules. Even 37 Signals’ applications are cluttered with non-semantic code, inline-styles and hordes of inline javascript. So much for the separation of content from style from behaviour.
What I’m curious about is how much does this matter? Is it bad or just personal taste? Do the requirements for web applications differ greatly compared to more informational pages (eg. blogs, marketing-oriented product websites, etc.)? Should they? Can we just get away with that sort of thing more easily with web applications than with regular vanilla web pages because of their general intended audience? Is it just a matter of the complexity of one type of web page vs another?
I definitely feel like I’ve done something right in that I spent very little time on Monday filtering through the site’s stylesheets and found I had only two rules to break out to a separate stylesheet (using Conditional Comments) to fix a couple rendering problems with the latest Internet Explorer 7 beta. Two lowly hacks, nothing more.
Browser stats for wishingline.com
I suppose the ease of which supporting a newer browser with improved standards support is mostly due to my decision to give a lower grade of support to older, discontinued browsers such as IE 5 for the Mac and IE 5.5 for Windows which have only accounted for around 1% of the total visits to the site since it’s launch last May.
Had I chosen to enhance the support of those older browsers, it’s likely that the number of hacks required to provide them with the same or a similar grade of support would have also increased… well… beyond two.
On a side note, the design and usability folks at Microsoft should be taken out and smacked upside the head for the bloody awful UI in IE 7. Really.
Mac OS X is great in part for its flexibility and the ease at which you can get all different types of software running and working together; whether it is Unix, Cocoa, Carbon, Java, Ruby, PHP, etc. Dan, as always, did a great job at demonstrating how to get a custom Ruby on Rails environment setup on Tiger. I felt it was just that good that I used it myself recently when I spent a couple days rebuilding my primary development environment.
Lighttpd and Rails icons preview
For the coupe de grace, I decided to whip up a set of special icons — one of Lightty and another for Rails and I’m making them available for whoever wants them. Both icons included in the set contain open and closed folder states at 128, 32 and 16 pixel sizes.
Because I apparently can’t help myself — I’ve added 4 more Quick Picks to what is now somewhat officially dubbed the ‘Backup 3 Quick Picks Pack’, bringing the total number of included Quick Picks so far to 14.
I’m likely going to stop posting regular updates here unless there’s a good reason not to do so. Instead, you’ll be able to get updates via MacUpdate or Apple’s Mac OS X Downloads page. I’m still debating whether I want to list it at VersionTracker.
After the release of my Catalog Quick Pick plugin for Apple’s Backup application, I had a request for two more Quick Picks, so I whipped them up and updated the full archive. Easy peasy.
Thanks to David Watanabe for his improvements to the NewsFire RSS Quick Pick. A new version has been posted along with three new Quick Picks for ecto, Transmit and Linotype’s FontExplorer X.
Like most people, in practice I don’t end up backing up my system as often as I should. Knock on wood — I haven’t ever really been bit badly by this.
That said, the latest version of Backup included with my .Mac account has inspired a new sense of purpose in making backups and really utilizing all that storage space included with the account. Sure I used it before, but certainly not enough to feel like I was making the most of the service.
So, in the hopes of kicking my own butt and hopefully one day saving my bacon, I’ve put together a few Quick Pick plug-ins for Backup 3 which I’m making freely available to anyone who wants them.
Ah, the thing I missed yesterday… Right. Easy as pie. Unzip the archive and drop the Quick Pick file(s) into /Library/Application Support/Backup/QuickPicks/. I could build an installer for all this, but I don’t think it’s necessary or worth the effort.
If you can think of something else you’d like a Backup 3 Quick Pick for, drop a note in the comments. I’ve got a few more ideas cooked up, but this is good for now. Enjoy!
I had 10 seconds to spare today and decided to whip up a quick Backup 3 plug-in to backup my Catalog disc database. It was partially an excuse to see how easy it was and an excuse to skip out on doing real work for a few minutes and let my mind unwind.
It’s so easy to get Quick Picks working that I may have to write a few more of them so I can really get my money’s worth out of my .Mac account. If I do and they’re useful to others, I will certainly post them here for your downloading pleasure.
Reading Jakob Nielsen’s Alertbox for September 19th this morning got me thinking about something which has always bothered me with web applications and web forms in general. Jakob mentions the problem of scrunched screen elements and effective use of screen real-estate often being a problem with web forms.
In particular, he refers to avoiding drop-down menus and scroll lists by instead using lists of selectable items where “all items are visible simultaneously” to reduce errors and make selection more immediate. This made that little lightbulb over my head start flashing repeatedly…
One of the biggest annoyances with web forms for me typically rears its ugly head when faced with an e-commerce transaction and having to select a state/province or country from an excessively long drop-down menu. Raise your hand if you also find this annoying and tedious.
Some might argue that you can get around this by using a standard input field as some do. Yes, but then you have to deal with the problem of spelling and possibly abbreviations. So what’s a web geek to do?
An Answer?
What if the best solution was a combination of the two approaches? A simple text field with the capability to autocomplete based on user entry?
An example country selection autocomplete form field
Rather than force the user to scroll through a really long list, let them type the first few letters and choose from a much shorter list of options (or a single option depending on what they entered).
This approach would permit you to check against a list of common abbreviations, country codes, misspellings and still be able to deliver a useful, intuitive and responsive interface with less errors and more completed transactions.
Perhaps the most significant downside to this approach is that there are still massive numbers of users using antiquated browser software which is incompatible with “Web 2.0” DOM scripting and AJAX.
Nevertheless, given that we have wonderful technologies such as Rails, Behaviour and Script.aculo.us to help solve such design problems and for creating innovative web applications I’m a little surprised I haven’t seen anyone really try to tackle this issue in a new way. I can’t possibly be the first to consider this, can I?
The Dashboard is a bit of a web developer’s paradise - standards-based code with only one browser required for development and testing. Plus, the use of web plug-ins as well as system level scripting languages (AppleScript, Ruby, Perl, etc.). The possibilities are almost endless really.
Widgets in the Mac OS X Dashboard
Creating widgets for the Dashboard isn’t really that hard, but there are a handful of useful things to know before you get started and I’ll try to outline a few that will hopefully save a bit of debugging and gray hairs along the way.
RTFM. Read the developer documentation. No, seriously there’s good, useful information in there.
Always, always, always have a default image in the main directory of your widget. Name it Default.png. It gets used as the drag image when a user decides to try your fancy new widget in the Dashboard.
Create a version.plist file and keep it up to date if you modify your widget.
Be sure to create an Icon for your widget to show in the Widget Bar. Name the file Icon.png and keep it in the main directory of your widget bundle.
Test your widget in Safari during development and keep an eye on the Console for debugging messages.
Download my Dashboard Widget Xcode Template (Works in Xcode 1.x and above, so yes, it works on Panther). Decompress the archive and place the contents in a new folder called Dashboard under this path:
The template will do a lot of the preliminary work for you. It creates the base HTML, CSS and JS files along with the necessary property list XML files - and will automatically modify certain properties in and of those files based on the name you give the project.
The Info.plist file contains all the current allowed properties for a widget. Disable or remove as necessary, but they’re all there to save you looking them up in the documentation.
Well… what are you waiting for? Let’s see those widgets!
I was in a meeting today where we ended up discussing file formats and what’s appropriate depending on the intended usage. This wasn’t a web-specific conversation but instead was focused around using a digital asset management system to allow repurposing files of various formats for use in PowerPoint presentations, web sites, print or other media.
There’s a definite lack of understanding of the multitude of graphic file formats out there by the general populace. I find that I take for granted the years of experience I’ve had with many of those formats including some of the more obscure ones like Scitex CT and forget that not everyone has seen or used these formats. I get a little dumbfounded when people don’t know what a TIFF or an EPS file is. Don’t even bother trying to explain the different levels of PostScript… Then there’s the whole issue of dpi, lpi and things appropriate for print not being suitable for on-screen use and so on.
The Preview application and various supported graphic file formats
When it comes to the web, although image formats in use have been largely dominated by JPEG and GIF, most modern browsers (Windows IE I’m looking in your general direction…) also support rendering the PNG format. Despite providing some support for PNG, its use is generally more limited due to IE not completely supporting the alpha transparency channel in 24 bit PNG images.
The single largest problem with PNG images, aside from a current lack of alpha support in IE6 and below is file size. PNGs can get big. For users with a broadband connection this is less of an issue, but making sites accessible for users on slower connections should still be a concern (within reason). The colour depth and file dimensions have an effect as does any embedded metadata. PNGs can potentially be 5 to 6 times the size of an equivalent JPEG.
At the same time as PNG is beginning to gain more widespread use, the new JPEG 2000 format (lossless) has appeared on the landscape. Although I don’t have any practical experience with the file format, it sounds as though it provides all the benefits of normal JPEG but without the compression artifacts. At the moment I’m unsure of browser support for the JPEG 2000 format, so perhaps someone out there cares to comment on that.
Do you have any preference for web file formats? Why one over the other? Are you using PNGs, and if not, why?
Having had the benefit of using Mac OS X Panther since it’s introduction at WWDC back in June of 2003, I’ve had a bit longer than the average user to tinker, poke around and undoubtedly break things. One welcome addition in Panther has been the inclusion of X11 (XFree86), albeit one that is not installed by default (it’s included on Install Disc 3). X11 is not something terribly useful to most users, which is why it’s an optional install, but for those that do, having the software available saves us from using other third-party implementations.
The X11 environment brings a wide variety of X-Windows-based GUI applications running on other Macs, Linux or other *nix flavours to your desktop.
For myself, this is extremely useful since I need access to server tools which would otherwise be difficult to access remotely, leaving me stuck sitting in freezing cold server rooms. Not much fun for anything longer than 5 minutes. While I try to do as much admin work as possible through the commandline, sometimes it’s just faster and easier to use a GUI. The big difference, though one which likely only affects a small selection of apps is that Apple’s X11 implementation is integrated with the Quartz graphics engine in Mac OS X itself.
A good example of how I’m using X11 in a real-world situation is using rdesktop to access Windows Terminal Services, a replacement option for Microsoft’s own Remote Desktop application to manage an Exchange Server run out of Chicago, IL. One less piece of proprietary Microsoft software is always a good thing in my books.
I’m also using X11 to help manage a few IRIX-based SGI servers. Combining SSH and X-Windows on Mac OS X is a great set of tools to securely access GUI services running on the SGI servers. For example, once I SSH into the server, it’s just a matter of typing toolchest to bring up the GUI tools on my Mac in the X11 environment.
Setting Up X11
First, make sure you’ve installed X11. You’ll find it in your Applications/Utilities folder if it has been installed otherwise get installing (Disc 3 in Panther). In order to continue you’ll also want to be comfortable working in the Terminal. The instructions will be reasonably verbose in case you’re not quite a Unix guru.
Launch the Terminal application (found in your Utilities folder).
Start by making a copy of the /etc/sshd_config file which is the configuration file for the SSH daemon.
sudo cp /etc/sshd_config sshd_config.orig
The sudo command will allow you to execute the cp (copy) command with root permissions giving you full read/write access to the filesystem. You will need an administrator password. Enter it when prompted.
Edit the original file we just made a backup copy of using your preferred text editor. Be sure to use a plain text editor such as BBEdit, pico or vi in order to preserve the integrity of the file. In this case, using pico.
sudo pico /etc/sshd_config
The contents of the sshd_config file should now be visible in your Terminal window. Locate that line that reads #X11Forwarding no and change it to remove the octothorp character at the beginning of the line to activate it. We also need to change the line to replace no with yes.
The final line should look like: X11Forwarding yes
Save your changes by pressing Control-X which will display a save prompt. Press ‘y’ (or Return) to accept and then press Return a second time to select the previous filename. This will save the file and return you to a new Terminal prompt.
Restart the SSH daemon. In the System Preferences under Sharing, toggle the Remote Login checkbox which will restart the SSH background process. You should now be ready to connect to your computer and run X11 applications remotely. So, now how exactly does one do this?
Connecting To Remote Servers
Now that we have X11 configured, if you have a second computer available you can test a remote connection.
Open X11 in your Utilities folder. A window that looks deceptively like the Terminal will open.
In the new xterm window, use the following command to remotely login to a second computer (Mac OS X, Linux or other *nix): ssh -X [USERNAME][IP_ADDRESS]@@.
Replace @ and [IP_ADDRESS]@ with the appropriate values and enter a password for the requested remote account. Assuming you are successful here, pass go and collect $200 and go to step 3.
Once remotely logged onto the second computer you’re ready to run one of the simple X11 applications included with Mac OS X. Try these on for size:
/usr/X11R6/bin/xeyes
/usr/X11R6/bin/xclock
Type exit in the xterm window when you are done. This will disconnect you from the remote server.
I was thinking about favicons today while working on a few minor design details for this site. Safari and Internet Explorer on Windows along with a few other browsers support favicons, a simple detail that can be used to help develop a site’s “brand” (I use the term loosely) and identity. They also afford a way to allow sites to stand out among others when browsing bookmarks.
For people like myself who keep extensive, organized and categorized bookmarks sets, the ones that stand out the most are the ones that include favicons. And like logos and other identity marks, they can be beautifully designed and appropriate for the end use or be a complete mess, unrecognizable and otherwise inappropriate for the intended purpose. In the case of favicons, being restricted to only 16 pixels square on average (you can technically create them at larger sizes), the simpler the better.
Favicons for wishingline.com
For Wishingline I created a set of favicons using variations on a single visual thread — colour. The orange version that will be used on the main Wishingline site, a blue-gray version used for the notebook, and a green version we’re using on our development server. The variations make it easy to identify which server we’re looking at when editing and testing while helping develop brand recognition. That, and it’s a small detail that, when added to the other minor details, goes to make up a great site.
For example, Apple, Adobe, Macromedia, and many other widely recognized companies are using favicons on their sites, just as the independents are. Take a look through your Safari bookmarks and see which ones stand out. I bet you’ll say it’s the ones with favicons. Now that you’re a believer — where’s your site’s favicon?
A Few Rules When Creating Favicons
First, keep it simple. Second, don’t go nuts with colour — stick to standard web colours or things that will display properly across platforms. Third, remember to include the appropriate link tag into the head section of your pages.
Keep in mind you can add as many favicons as you want — just adjust the link tag as needed. For example, different favicons for different site sections, subdomains — use your imagination.
How To Create Favicons
If you want to learn how to create favicons, The Iconfactory has some great resources along with their IconBuilder Pro plugin for Photoshop which can export the necessary .ico files. IconBuilder Pro is available for Mac OS X and Windows.
