Working Concept is now officially back in Seattle! I’m excited to be setting up a studio space in the historic and really cool Inscape Building with Bryan Wilson and Scott Thiessen.

It’s exhilarating to be in good company and back on the west coast.

A rather common problem with the SmartStart Responsive HTML5 WordPress theme is that upon upgrading to WordPress 3.5, the site will suddenly start throwing an error on portfolio pages:

Warning: array_count_values() [function.array-count-values]: Can only count STRING and INTEGER values! in (...)/themes/smartstart/functions/custom-functions.php on line 640

A quick fix that drops the error and seems to leave everything in good order is to wipe out a line that tries to count something that’s not there. You can do this by opening smartstart/functions/custom-functions.php in a text editor (it’s okay if PHP seems scary) and finding line 640. You’re looking for this part:

$slide_types = array_count_values( $project_slider[0][0] );

And you’ll want to change it to look like this…

//$slide_types = array_count_values( $project_slider[0][0] );
$slide_types = 0;

Don’t forget to save your file! By adding two forward slashes in front of the original line you’re just commenting it out and telling WordPress to ignore it, so if you have any problems you can easily undo your change.

I hope this helps if anybody finds it! My original post is on page 87 of the theme’s discussion thread.

I got my first pair of glasses this week and I’m amazed at the literal change in perspective. My unaided vision isn’t horrible, but years in front of glowing rectangles have started to bear noticeable effect. On top of this, my eyes apparently have varying astigmatisms – meaning the wacky curvature of my eyeballs results in distortion. I had no idea, of course, because I’ve had my life thus far to adjust. Adding corrective lenses, however, is a headache: my “corrected” field of vision falls off more sharply and artificially to the left, so everything on my monitor is warped by a bizarre, horizontal gravity. Every close, flat surface tapers to follow a new and uncomfortable perspective. My world is suddenly crisp, richly detailed, and disturbingly shifted.

Here’s the cool part though: this is temporary because my brain will adjust. I’m already less distracted by the frames on my face, and after a few days my brain should adapt to signals that are different from those it’s been interpreting my whole life. How cool is that?

By positioning some shaped polycarbonate in front of my eyes, my quality of life improves. The hardware update does not require any software change. Sometimes I’m frustrated with the limitations of my own brain, and I forget that it’s a marvelous and powerful thing whether I appreciate it or not.

Often I’ll need to put together mockups of an existing web page, and I’ll start by taking screenshots and breaking them up in Photoshop. This can take a significant chunk of time, and gets excessively annoying should the site’s content change during the Photoshop spree.

Page Layers solves both problems quickly and simply: feed it a URL and it’ll capture a screenshot like Paparazzi and similar programs. The critical difference is that it’ll allow you to save a layered PSD file, whose folder names and hierarchy come directly from the page markup. All text gets flattened, and if a particular element needs to be further separated it’s as simple as adding a span element before running through Page Layers. It’s, simple, smart, and surprisingly fast even on my mid-2009 MacBook Pro.

While there may already be a less primitive way to jump-start Photoshop mockups of existing pages, Page Layers has already been a helpful addition to my workflow. It fits a niche role, but works its reliable magic just as well as I’d hoped.

It’s available on the Mac App Store for $33.99, which I’d call pricey if the time saved didn’t more than justify the price.

In other words, please read this. Aral Balkan: Design is not veneer.

Since this is an annoying and painfully redundant task, I decided to cut it down to a script I can run with Alfred. For this, I’m using some simple PHP to execute commands via the Harvest API. I simply choose my new “Harvest - Duplicate Timesheet” command, a few seconds pass, and then the browser opens to my current Timesheet to confirm that all went well.

What This Does

1. Searches a day at a time into the past (from today) to find the last-used Timesheet. I’ve limited the search to 10 days so we don’t get an infinite loop – you may need to adjust if you rarely work or take long vacations.
2. Duplicates each item from the last sheet onto today’s, with 0 hours.
3. Toggles the last timer. By default, the last timer will start out running. By toggling it, our new Timesheet will be ready to go with no items running.

What This Doesn’t Do

Anything else. I made it for myself, and you’re free to improve it – it won’t be friendly warning you about invalid credentials or telling you that it can’t find a last-used Timesheet within the search period.

On the plus side, it would also have a hard time screwing anything up. It doesn’t modify existing data, it doesn’t delete anything, and it doesn’t change any timers. It’s pretty simple.

I guess I have to remind you that I offer no warranty, and should you ruin everything and blow up the planet while playing with my humble PHP, it’s not my fault.

Making It Go (Three Steps)

1. Grab the Script

Clone or save this PHP, add your account credentials, and put it somewhere that it can be called upon. (I have a Google Drive folder of scripts, for example, which I can conveniently run with the same path on any machine.)

2. Create an Alfred Trigger

You could do this with cron so it’d be totally automated, but for some reason I still prefer Alfred.

1. Open Alfred’s Extensions preference pane.
2. Click the little “+” (bottom left) to create a new Shell Script.
3. Add some basic information, a title, description, and choose a keyword that you like. I run this silently, but this is your choice of course.
4. In the Command box, add… php ~/path/to/your/harvest-duplicate-timesheet.php
open https://shortname.harvestapp.com/time Change the path and account shortname to reflect your own details.
5. Save.

3. Run it!

Use your new trigger, and if all goes well you’ll just wait a few seconds and your freshly-copied Timesheet will be staring right back at you from the browser.

Amazon Reviewer Profile.wdgt.zip (23KB)

1. Post something useful, anything, even a simple fieldtype, to Devot:ee.
2. Experience the thrill of having a friendly stranger improve something I made. This was at the hands of Mr. Eli Van Zoeren, who kindly made said fieldtype available for Matrix and shared the result.

Thanks again, Eli! And of course Ryan Masuga, whose hard work makes Devot:ee an essential resource.

People (myself included) can be resistent to change, and having to pay for something that’s always been free¹ is a bummer if not worse. I also understand that change can be good, even essential, and I’m happy to pay for something that’s valuable to me.

While I truly hope that EllisLab has refocused itself to vigorously evolve and support excellent software, I’m pessimistic about what the changes could mean for its community and how that will shape ExpressionEngine’s future.

When I started using ExpressionEngine in 2007, it was an exciting endeavor. The control panel was one of very few that looked modern and visually considered, the documentation made it easy to start using powerful templating features, and the forums were already bustling with other users and EllisLab staff. I felt like I was just getting into something that did more than I needed, and where everybody was strangely friendly and had my back if I could ask good questions. (And in some cases, patient souls helped me understand how to ask better questions.)

ExpressionEngine became easier to recommend as I got more familiar with it. It worked for small clients and larger clients. I heard someone from the Huffington Post talk about caching and optimization for high-traffic sites, then helped build larger sites in the studio I worked at. It seems like the momentum just kept building, and ExpressionEngine and I kept changing at a steady pace. And it was good.

Now 2012. I rarely build an EE site anymore that doesn’t use Structure. Very often Matrix, Playa, Wygwam, and maybe a dozen addons are part of a project. The ExpressionEngine forums have seemed less active and less frequented by EllisLab staff. Devot-ee is where I go to hunt for an add-on will save me hours of work. I get occasional contacts through Director-ee. The Stack Exchange initiative seems to be gaining momentum and is now in public beta. More and more of my meaningful time in the ExpressionEngine universe is outside of any official sites or support channels.

It seems like EllisLab knows this, and would like to get out of the business of facilitating community altogether, to get back to improving the quality and support of its software. It knows that it’s great for large sites, and that it can thrive where budgets are big enough to include ongoing support costs. It knows that it doesn’t need to appeal to the little guy anymore, that he’ll look elsewhere and find Blocks, PyroCMS, Laravel, Statamic, and others. It seems smart.

The EE community wouldn’t exist without ExpressionEngine. I’ve benefitted from it, as have clients of mine large and small. What I’ll be interested to see is how ExpressionEngine changes with a less diverse and centralized user base.

I’m still just as confident that ExpressionEngine is an excellent choice for large projects, though I think it’s also a good time to be get to know other products that will fill the growing gap.

I’ll sum up my favorites (old and new), but it’s seriously worth your time having Jeffrey show you each in more detail.

It’s all text

The preferences are stored and edited in JSON files. The packages are uncompressed folders that simply live neatly in Sublime’s Application Support folder. (Both of these things, by the way, make it very handy to sync everything with Dropbox.) The project-wide search returns results as a flat text file in a new tab. Sublime is all about text and the keyboard, with very little UI that requires or uses anything else. You can rely on the mouse less as you get more comfortable, without the frustration or slowdown of jumping right into the terminal for text editing.

Ditch the sidebar forever with ⌘+P

Never hunt through files and folders again, just type the name of what you’re looking for whether it’s a path, a method, or … well anything. Tack on an @ symbol to a filename and all methods will be listed so you can jump in exactly where you’d like.

Do (almost) anything with the Command Palette ⌘+⇧+P

Anything Sublime can do will be accessible here so you can stay off the mouse even if you don’t have all the shortcuts down. Change syntax on the current file, install or remove a package, access snippets or build options – really just anything. It’s Alfred, but in a text editor.

Multiple Cursors & Incremental Search

I shouldn’t admit to you, dear reader, that I was happily working away in Sublime Text 2 completely oblivious to its multiple cursors. Sure, you can ⌘+click several things manually and get a new cursor for each one. But that’s little beans.

You’ve already noticed that every time you select a word, every instance of that exact same thing is highlighted. Hit ⌘+D and the next occurrence of that word will be selected with its own cursor. Repeat until you’ve got enough of them selected, then just type to change them all at once.

But it gets better: say you want to select every occurrence of that word instead of hitting ⌘+D repeatedly. Let’s do that. Start by placing your cursor inside any given word, then hit ⌘+D once to select the word. Now hit Control+⌘+G and every occurrence will be selected with its own cursor. Simple and extremely useful.

Snippets

We all know that snippets are essential time-savers, and you probably already know that Tools → New Snippet will give you a (simple) template to edit and save as a .sublime-snippet file in your User folder. Jeffrey gets into setting up GitHub Gist integration and a few other helpful pointers.

Package: Package Control

Install Will Bond’s Package Manager first, and install it now if you haven’t already. Most Sublime packages are current and available through this channel, making it an absolute must if you want package discovery/installation/update/removal to take only a few keystrokes and a few seconds.

Package: Zen Coding

Use a simple, logical shorthand to quickly generate HTML structure. It’s more compelling to see this in action, but the idea is that you can write something like div#nav>ul>li*5>a to hit tab and get…

<div id="nav">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Obviously you can do quite more than this, and it applies to CSS authoring as well.

Package: Fetch Files and Packages

Commissioned by Tuts+, this package lets you define preset file and package shortcuts so you can get a project running quickly. Simply put, it takes a predefined URL and downloads it (extracting, if necessary) to whatever directory you specify from within Sublime. I added shortcuts for jQuery, variations of the Twitter Bootstrap, the HTML5 Boilerplate, and CodeIgniter.

Package: Fast Folder & File Creation

I’m not sure why this wasn’t built into Sublime in the first place, but the AdvancedNewFile package lets you use ⌘+⌥+N to type a folder/file path and hit return to create it. This saves having to use the standard OS GUI to save a newly-created file.

Package: Sidebar Enhancements

I started using this a while ago, but in light of my newer discoveries it’ll certainly become more trivial. Anyway, use Sidebar Enhancements to get more right-click options in your sidebar.

Package: Sublime Linter

A great package that’ll check your syntax as you write, or as you save depending on how you set it up. You may have to do a little bit more work setting up linters depending on what languages you use, but the workflow improvement is surely going to be worth it. Unless you never make typos or mistakes. In that case, please contact me because I would like to talk about hiring you for everything I ever do.

Package: Sublime + Marked

I tend to use Byword for writing posts like this in Markdown, but this part of Jeffrey’s course led me to better appreciate the build system. To me, “build” always meant compile source code into a binary executable of some kind, be it a Cocoa app or a Flash/Air program. Here, Jeffrey demonstrates how you can author your Markdown and then set up a custom build, effectively launching Marked (an inexpensive Markdown viewer) with ⌘+B to view your work in HTML.

Bonus Package: Less Compiler

After seeing Jeffrey’s Markdown+Marked screencast, it dawned on me that I should be compiling Less from Sublime. (Wipe that look off your face, it just never occurred to me okay?) Sure enough, there was a package for that: LESS-build-sublime. Do some work, ⌘+B, and compile that .less into .css. Easy.

Much of this may be review, or overly simplistic for those wizards who have mastered Sublime Text 2. This is one of those posts I’ll probably be referring back to myself, and hopefully you’ve gotten something out of it as well!

Is there something you’ve stumbled on that you can’t live without? Let me know!

Update: I forgot to mention in my original post that it was Ross Hunter’s post that kicked off my latest quest to improve my Sublime workflow, and it’s probably to his credit that I ended up spending a few hours with the Tuts+ series. Thanks Ross!

“To design something really well you have to get it. You have to really grok what it’s all about. It takes a passionate commitment to thoroughly understand something – chew it up, not just quickly swallow it. Most people don’t take the time to do that. Creativity is just connecting things.

When you ask a creative person how they did something, they may feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after awhile. That’s because they were able to connect experiences they’ve had and synthesize new things. And the reason they were able to do that was that they’ve had more experiences or have thought more about their experiences than other people have. Unfortunately, that’s too rare a commodity. A lot of people in our industry haven’t had very diverse experiences. They don’t have enough dots to connect, and they end up with very linear solutions, without a broad perspective on the problem. The broader one’s understanding of the human experience, the better designs we will have.”

– Steve Jobs

via vanSchneider Blog

Sure, there are plenty of ways to preview new posts. You can find articles, add-ons, and various methods for showing draft entries to the requisite few. That’s great.

But the elephant in the room is the Structure page, an existing and very live entry to which the client wants to make and preview edits. Our options are as follows:

1. Upgrade to Better Workflow.

It’s a brilliant $65 add-on that, among other things, clones entries and takes over the task of managing their statuses. In other words, those edits take the form of a separate draft entry that can be fine-tuned and previewed without even a whiff of change on the public website. Drafted content can then be published, replacing the current live entry’s content. No copying and pasting, no changing entry IDs, all very smooth.

Better Workflow does not, however, fully support more exotic add-ons. This prevented us from using it, for example, on a large site that benefits from Pixel & Tonic’s Assets. And we were really, really bummed to part with Better Workflow – though hopefully Assets will be supported someday.

2. Tinker with live updates at 4am, making iterations while the audience is hopefully sleeping.

I’m sure lots of us do this, but that doesn’t make it any more attractive to a client who bothers to get decent sleep.

3. Clone the page to a different URL, edit, then copy successful changes back to the original.

MX Cloner can take the pain out of cloning entries. Using that, we can get a reasonable little workflow:

• Clone the page you’d like to edit, changing the URL and “Hide from nav?” to “Yes” if that’s relevant.
• Submit changes to your heart’s content, previewing at your secret, public URL. (You could also change the status and restrict preview privileges to logged-in users if need be.)
• Either scramble to simultaneously retire the old entry and replace it with the new one (URL + status changes), or copy and paste your changes one field at a time to the existing entry. For the latter, you’ll be angry if you used Matrix, Playa, or really anything other than a textarea of some sort.

It’s that last part that makes this method feel a bit silly.

4. Use a staging environment for managing changes, then push to the production environment when it’s time.

This seems like a pretty clean way to do it in theory, but what about those things that pull the two environments out of sync? There could be Freeform submissions, template tracking updates, etc. A straightforward database + filesystem transfer could wipe out important information on the production side.

Conclusion: there’s still no perfect way to preview Structure page edits.

After all this time, Better Workflow seems like the only option that doesn’t require the client to jump through hoops. (Assuming the additional $65 and more limited add-on support isn’t a hoop.)

It’s tough to ask smaller clients to invest in a flexible, modern CMS where a pretty basic (and fair, I think) expectation of previewing content can’t be met.

Am I alone thinking this? Am I missing something? Is this just a sign that I’ve identified the add-on I need to make? Let me know what you think in the comments!

A post from @typaulhus on ADN was the first I heard of this “Statamic,” and after a brief period of skepticism I’m head-over-heals for it. Statamic has officially replaced ExpressionEngine as CMS of choice for this humble little site. Why is it so exciting?

• No database. Fast, easy to deploy, and I can keep everything in Git without doing anything clever.
• Content is stored in Markdown files. This is a huge plus because I write just about everything longer than a paragraph in Markdown and then I have to figure out how to get it into that other thing. I can skip that step.
• Very clever design. It’s very clear that Jack and Mubashar wanted to get away from EE’s bloat while taking advantage of its templating convenience and … well … Structure. It feels perfectly focused as a CMS for small sites and blogs, while being flexible enough to work for web creators that have ideas beyond a WordPress theme.
• Gorgeous admin panel. Blazing fast and perfect on an iPad? Yes and yes. If you think that’s shallow, log in to EE’s admin panel on your iPad. I’ll wait.

The migration from EE went smoothly and happened more or less in one evening. Here’s how I did it…

Step 1: move comments to Disqus.

I was using native EE comments, and the easiest path here was to create a Disqus account for the site and import my previous comments. Ryan Battles posted a template tutorial for exporting a WXR file for Disqus. It’s as easy as creating two templates with just a little bit of required consideration.

I foolishly waited quite a while and even opened a support ticket before finding import.disqus.com, which barfed on a syntax error in my XML. I waited another 24 hours and got an import error with no message, and then frustratedly hacked my way through two ExpressionEngine addons and two more Disqus test accounts before I got everything straightened out. For the record, I’d recommend going with CX Disqus Comments if you also run into problems.

Step 2: get EE posts into Markdown files.

Once again, somebody else did most of the work for me. This time it was Derek Jones with the Download Content plugin for ExpressionEngine. I created a template that listed all my posts, each with a link that would download that post in a Markdown format I specified. I just command-clicked on each item (silly and effective) and ended up with a folder of posts ready for Statamic.

post-list (template)

{if member_group == 1}
{exp:channel:entries channel="blog" limit="999"}
{title}

{/exp:channel:entries}
{/if}

post-downloader (template)¹

{if member_group == 1}
{exp:channel:entries channel="blog" limit="1" entry_id="{segment_2}"}
{exp:download_content filename="{entry_date format='%Y-%m-%d'}-{url_title}.md" parse="inward"}
---
title: "{title}"
featured: no
---

{blog-summary}
{blog-body}

{/exp:download_content}
{/exp:channel:entries}
{/if}

Step 3: make that new theme.

I copied “london-wild” and went to town with it. As you can guess from my site, half my work was just deleting things I didn’t use. Coming from EE, the theming process felt very familiar. Imagine ExpressionEngine with native Structure bits, but mustachey-looking.

The only sacrifices I had to make were dropping an email contact form (for now) and doing without numbered pagination.

Step 4: consider the URLs.

My blog posts went from /blog/entry/title to /blog/title, so I added a line to .htaccess for redirects:

Redirect 301 /blog/entry/ /blog/

Since I had only six pages of blog posts, I added quick-and-dirty redirects for EE’s pagination links too:

Redirect 301 /blog/P6 /blog?page=2
Redirect 301 /blog/P12 /blog?page=3
Redirect 301 /blog/P18 /blog?page=4
Redirect 301 /blog/P24 /blog?page=5
Redirect 301 /blog/P30 /blog?page=6

Step 5: launch.

The easiest part. Moved all the EE stuff into a doomed folder, dropped all my files right into the doc root via Git. And then I … here’s the thing … and then I was done. I hope you have a rocking time with Statamic too!

Retina Images gets the device pixel ratio and stores it in a cookie. Every image request is routed through a PHP file, which evaluates the cookie and whether a 2x image equivalent exists in the filesystem. The correct image is then returned. If any part of the process breaks (no cookies, for example), the original image is served. Pretty clever! The Retina Images site has instructions for setup, so all I have left are a few tips:

1. Make sure your “@2x” images are exactly double the pixel dimensions (not the dpi).
2. Hope that your source Photoshop files use smart objects liberally. Bonus points for having them already snapped to the nearest pixel.
3. The Retina Images PHP file has a handy (and optional) debug log that you can switch on if things aren’t working out quite right.

It seems likely that future specs will make room for device resolution, but Retina Images can at least take some of the ugly out of the internet today.

1. Make sure you’ve got yum installed and your root access is enabled.
2. SSH into your server as the root user.
3. Create a temporary folder mkdir rpm-download.
4. Get all up in that directory cd rpm-download.
5. Download the latest x86_64 RPMforge package for CentOS 5 wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm.
6. Add this repository to our search set rpm -ivh rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm
7. Install Mercurial! yum install mercurial
8. Make sure it worked hg

I’ve got only one complaint: the filesystem icons are a giant step backwards.

They’d fit nicely into Windows 95, but Dropbox did a much better job. I poked around in the Google Drive.app package hoping for some replaceable resource, but found no way to change them. I’m sure that Google’s teams frequent my blog, so I’ll kindly ask that someone address this. Then, of course, get on to the LAN syncing and bandwidth tuning.

I love solving problems, I’m fascinated with the web, technology, and putting things together that can make people’s lives better in some way. I’m used to wearing a lot of hats, and I like it that way, but I’m constantly forced to choose between focusing on one or two things to be really good at, or chasing a whole bunch of interests at the expense of never being The Expert at any of them.

A smart person I used to work for told me that the work I take will be the kind of work I keep getting. To my unamazement, this has proved true. I’ve learned that low-budget, ASAP projects where I’d occupy a narrow role are the worst to take on. They offer the most stress for the least pay and tend to be a drain on everyone involved. On the other hand, I work extremely well in situations where I’m the glue; there’s a big, undefined problem that needs to be identified, solved, and executed. It may involve translating between people with different interests and skill sets, or helping a small client solve big problems on a small budget. It may mean researching and building some weirdly-specific thing that nobody else could figure out how to do. I love this stuff, partly because I’m hardwired to take pleasure in organizing things, and partly because the conversations and relationships involved are engaging and interesting.

And Then There Were Answers

Through trial and error, I’ve finally started to figure out where my interests and abilities overlap. This makes it infinitely easier to know how to choose projects and who I’m looking for to collaborate with.

Things I know now…

I’m a good designer and a lousy artist.

You can argue that there’s overlap between the two, and I’ll agree to some extent. But I’m convinced that a designer is a person who solves problems, and an artist is a person who creates (or at least observes and interprets if you’re in the “nothing is new” camp).

Reliability is something I sell.

I want to be the person with the killer Dribbble feed, or the eagle-eyed pro that spots new trends before they’re big. But I’m neither. One of my most useful traits isn’t sexy or even all that interesting: I do what I say I will, when I’ve said I’ll do it. I try and communicate clearly, spell and punctuate like I give a damn, and actively take ownership of any mistakes while doing whatever I can to make them right. I’ve learned that, despite being hopelessly dull, this is a desirable trait.

Work does not happen in a vacuum.

I spend an awful lot of time at a desk by myself, and sometimes fall into the trap of believing that I work on my own. The reality, however, is that every project I work on is the result of a process, often with lots of focused communication. A huge part of what I do is to cultivate relationships that allow for efficient problem solving, be it with clients, collaborators, or both.

My spirit animal is a stodgy old man.

I can’t help it: I think that capitalization, punctuation, spelling, and grammar count for something. I don’t think Facebook, Twitter, or many newfangled ways to communicate make thoughtful communication obsolete. Intentionally crappy drawings don’t impress me, regardless of what the hipster holding the poster looks like. Maybe I’m drawn to things that seem inherently well-considered. Maybe I’m just a jerk.

The Inevitable Redesign

With these realizations, and even before articulating them, I decided it was time to redesign my tiny website. The old site, despite being tiny as well, was wasting time spreading a minimal amount of content over a few pages, and started using silly visual motifs that were more whim than anything else. So I did what felt right: focused, simplified, and made sure that design, responsiveness, and page load times would support the myriad of browsers and devices that could end up at my humble little domain. Caslon feels way more appropriate for me than Museo ever did. And as fun as it is to add excessive textures and faux embossing to type, it’s just not me. I’m also not bold enough to build a site without a stylesheet altogether. I only considered it in the moment while writing, but I suppose I’m not purist enough to take it that far.

End of Post

I’m not sure that this post will be meaningful for anyone but me, but it feels important to leave a note for my future self that says, “remember you’ve been learning things.” After all, no matter what I end up doing next, no matter how wonderfully or terribly it goes, I can take pride in having learned things and helped people solve problems.

The web host was HostGator (shared reseller account), and a chat technician confirmed my suspicion: they do not (yet) support IPv6 mapping that CloudFlare provides. So if you’ve enabled the IPv6 feature from CloudFlare’s settings and your site suddenly disappears, make sure your host supports the IPv6 protocol. Disabling the feature (it’s just a feature you can disable!!) restored the blog to its happy former state. That is all.

I visited said site and it had an immediately-noticable zing. Excitedly, I added the service to workingconcept.com to see how CloudFlare would cripple the ExpressionEngine setup. I was sure it’d fail and I’d have to revert, but I tried it anyway. I was blown away – CloudFlare seemed to have absolutely no effect but to dramatically speed up page delivery. Below is my non-scientific evaluation…

just-ping.com results, before CloudFlare (MediaTemple DV4.0, Virginia datacenter)

just-ping.com results, with CloudFlare

As you can see, ping times were easily improved across the board. Remember that this is less than an hour after enabling the service.

Pingdom Full Page Test

I use Pingdom to monitor my own website and client web apps, and they’ve got all kinds of great tools. Here I used the Full Page Test to compare page load time. This test loads an entire page and basically gives you an overview of the process: how long it takes, what assets are loaded, the order in which things stack up.

The result: page load from 4.7 seconds to 1.8 seconds.

I did nothing but switch on the service. I’d say that’s a significant plus for a product that’s totally free.

Wordy Conclusion

Yesterday I could have cared less about CloudFlare, but today I suddenly can’t live without it. I’m thoroughly impressed and hope this post is helpful to somebody. I don’t work for CloudFlare or get any sort of incentive for writing this post, but I would certainly take incentives if they were offered. I’ve already been experimenting with Amazon S3 as a CDN, and Rackspace CloudFiles – both offered inexpensive performance gains with minimal setup, but CloudFiles is another thing entirely! The pro and enterprise upgrades offer increased protection and fine-tuning along with a variety of genuinely-enticing features. As of this moment I’m still using the free account, which is serving pages much faster and allegedly adding a layer of protection from various types of attacks. Once they fix that placeholder logo of theirs I’ll be proudly recommending it to everybody I can find!

input[type="email"] { 
    box-shadow: none;
}

I’ve also made a habit of having textareas size automatically when the page loads, in the even that there’s already text in the field to be edited:

$('textarea.autosize').autoResize().trigger('change');

After hours of searching for said app, I stumbled upon Mikeal Simburger’s KillWhite, a Photoshop plugin (and 64-bit PixelBender plugin!) that does the same thing. And what a relief. It works just as well as the mysterious app I first used, and even better is that Mikeal is working on a version that will key out a selected color.

Comparison:

I made sure that my connection info was correct, and unlike every other PHP app install, I continued to get the error.

Assuming I still managed to get something wrong, I was good sport and used a barebones PHP script to test the connection info. To my surprise, it worked. The problem had to be with WordPress.

After a few hours of experimenting, I found the problem. I had created a test working copy on my public development server; the WordPress install I was using locally at “wp.localmachine.com” moved to “wp.devmachine.com”, and I had simply copied over the same database. The WordPress database references the site URL in several places, and you need to update these URLs in MySQL for your alternate site to work. The easiest way to do this is to dump your database to a .sql file, then find and replace the original domain (“localmachine.com”) with the new one (“devmachine.com”). Then import the resulting .sql file on the new server.

If you’d rather update the new database by hand, I believe you’ll need to change domain references in wp_site, wp_options, and wp_blogs. But be careful, wp_posts and several other areas will have references to your old domain.

Careful with those quotas. And that’s the blog post you’ve been waiting ~3 months for.

The livesearch JavaScript has a built-in caching mechanism that didn’t seem to be clearing in Firefox. In Safari, IE, and others, valid search results (weblog entries) were being returned as one would expect. In Firefox, old/deleted entries were being returned as search results. In Firefox 3.6.3 (both for myself and my client), the browser cache couldn’t be completely cleared.

The only way to fix the problem was to view the JavaScript file (jquery.livesearch.js) directly in the browser, then hold shift and click refresh.

I also updated the headers to prevent excessive caching in the first place.

1. Pingdom This is a web app that monitors your site(s) and gives you reports on uptime and latency, among other things. I use it to see when my site is fastest and slowest, and to get some idea of what the site’s response times are around the world.
2. YSlow An outrageously fun (geeky fun) Firefox plugin that will grade your site in various categories, and its companion website will help explain what you need to do in order to start speeding things up.

1. My revision comments make lots of sense and follow a logical path.
2. My revision numbers are more meaningful, and pertain to each project directly.
3. I can easily share access to one project with someone else if I need to, without exposing all of my work or potentially sensitive information.
4. I can join the rest of the world that’s using subversion properly.

So why wasn’t I doing this sooner? I learned to use subversion this way, and it actually helped when I decided to use Beanstalk. Beanstalk is awesome, provides lots of hooks and cool features, and is just lovely. The obstacle in my repository-for-every-project quest was Beanstalk’s limit on repositories. With the $15/month account, I could only have 10 repositories. I could pay more for additional repositories, but I’m cheap and ambitious and there seemed like there had to be a better way. And there was. Here’s how I set up stylish subversion hosting with unlimited repositories for $19.95 a month.

Step 1: Sign up for Linode account.

I loved Slicehost but was always curious about Linode; you get just a little bit more for a teeny bit less, and like Slicehost they seem to have a great reputation. I signed up for a Linode 360 account, which gets me blazing fast access to 16GB of storage, 360GB of memory, and 200GB of transfer per month.

Step 2: Prep Linode account.

Linode’s control panel makes it easy to get set up quickly. I installed Ubuntu 8.04 LTS (free). Done.

Step 3: Set up the server.

Equally brainless was installing VirtualMin GPL (free) using the install script, which is designed to work with Ubuntu 8.04. VirtualMin makes it easy to set up virtual hosts and repositories with a web-based GUI. I love the shell, but I find it easier to administer the web server with a GUI like VirtualMin. My brain only has room for about 10 terminal commands before I have to start looking things up. I then followed PickledOnion’s iptables setup instructions (scroll down to find it) to secure things a bit.

Step 4: Make some test repositories.

Log into VirtualMin, set up a virtual server, and add some repositories. Ridiculously easy. I access my subversion repositories via a URL like https://example.com/svn/repository-name Teste.d connecting with Versions, and everything worked just fine and very quickly. I dumped my Beanstalk repository, then imported it to the new server using VirtualMin.

Step 5: Split projects from old setup into their own individual repositories.

I was sailing along feeling clever and upbeat, and then this step was like a punch below the belt. For your benefit, dear reader, I’ll share what worked rather than the grim tale of how I got there.

1. SSH’d into server via Terminal.

2. Dumped my current repository.

   svnadmin dump /home/domain/svn/oldrepo > oldrepo.svndump

3. Split off a single project into its own dump, dropping unrelated revisions and renumbering them. (Note: folder structure is important here, and you should know that a project in my old repository had a path like “/projects/projectname/trunk/”.

   at oldrepo.svndump | svndumpfilter --drop-empty-revs --renumber-revs include /projects/projectname > projectname.svndump

4. Keep filtering dumps until your paths work for a new repository. You’ll know if this isn’t working because you’ll get import errors. Long story short: view the dump source with a text editor and make sure that no paths are committed to the new repository that reference non-existing folders. My three steps basically create a tags folder and make sure that trunk gets moved back one level.

   cat projectname.svndump | sed -e 's,^Node-path: projects/projectname,Node-path: tags,' > projectname2.svndump

   cat projectname2.svndump | sed -e 's,^Node-path: tags/trunk,Node-path: trunk,' > projectname3.svndump

   cat projectname3.svndump | sed -e 's,^Node-copyfrom-path: projects/projectname/trunk,Node-copyfrom-path: trunk,' > projectname4.svndump

If you’ve lived through step 4, now all you have to do is create a repository for your project and import your last filtered dump (projectname4.svndump).

Step 6: Add a touch of awesomeness with Warehouse.

Beanstalk is sexy and made it easy for me to share code with others. At this point I was thrilled to have unlimited repositories, but resigned to say goodbye to Beanstalk’s good looks and friendliness. Then Warehouse brought sexy back. I just happened upon Warehouse, a web-based subversion browser that’s built on rails. And it just happened to go open source!

I deployed a few Ruby on Rails apps in the past, and all I remembered was that it wasn’t as easy as plopping PHP and MySQL somewhere. Ultimately the setup was simple, thanks to the last step:

1. Add a subdomain wildcard for the server in the DNS manager.
2. Create a MySQL database for Warehouse, upload everything to the server’s web root, and run the installer.
3. Update Ruby, Rails, and Gems.
4. Install Phusion Passenger alongside Apache so there aren’t any more steps to install this app. (This is awesome, by the way.)

You can figure out the rest on your own. Enjoy your new repositories, your web-based browser, and your awesome new subversion hosting!

References:

• How to Move a Subdirectory From One Repository to Another
• Subversion Manual, Chapter 5 Section 3
• Transferring Repository Data

Update: For the hordes of people who followed these instructions and ended up with frustrating blank pages in Safari after multiple page refreshes, there’s a fix: http://code.google.com/p/phusion-passenger/issues/detail?id=354

Ricky at IF/THEN pointed me to QuickCursor, which is like a more grown-up “Edit in TextMate.” QuickCursor stays calm as I change Safari tabs, and never seems to lose the connection between the browser window’s textarea and the TextMate window. It lets me choose the keyboard shortcut, and you’ll never guess what I made it.

Bonus: you can add various “Edit In…” applications with shortcuts. What’s not to like? Get it for yourself!

The talented and wonderfully-bearded Scott Thiessen and I have started a new project called BlipBleepBloop. It’s our own tiny hosting company that we’re using for clients and to which we’re inviting a handful of folks.

I’m proud to be running all of my non-development sites off of a Blip account, which will inherently improve our service since both Scott and I are running our own sites there. Everything has been comfortably stable and speedy, and we’re working hard to pretty up cPanel. (Which we’re both thrilled about since we’ve each encountered so many shamelessly ugly themes in our past.)

Since we don’t have the ability to offer subversion hosting, I’ve moved my repositories to Beanstalk, which I couldn’t be happier with.

Want to know more about BlipBleepBloop packages? You won’t find any specs or ordering info on our website, so .(JavaScript must be enabled to view this email address) if you’re interested. That’s the idea: small and personal.

1. Sign up for Postini, and look for a welcome email with MX server settings that you should use.
2. Use cPanel to make sure your desired mailboxes are set up and working. (Obvious but necessary.)
3. Find either your website’s IP address or the hostname of the server you’re on. You can use any basic Whois tool, like cqcounter.com’s.
4. In Postini’s admin tool, tell the delivery manager to send Postini’s messages to your mail server. Click the “Inbound Servers” tab, select an option from the “Choose Org:” dropdown, and click the “Delivery Mgr” nav item.
5. Find the “Edit” button and click it. You’ll now see “Email Servers and Load Balancing.” Make sure that one of your email servers is the hostname or IP address from step #3, and set “% Conn.” to 100% unless you have another mail server to route to.
6. Update your Hostgator MX records to automatically send all mail to Postini for processing. If “Edit MX Entry” is an option in cPanel, you can do it yourself. Otherwise you’ll need to chat with a Hostgator support specialist or file a support ticket. You want to change your MX entries (which tells the server where to send email) with those referred to in step #1. Make sure that you select the checkbox that says “Always accept mail locally even if the primary mx does not point to this server.” Otherwise you won’t get your filtered mail from Postini.
7. Wait a while and see what happens.
8. If anything seems fishy, or even if everything seems to be working well, use Postini’s “System Tests” (again in the admin panel) to make sure that everything is routed properly.

A final note: I learned the hard way that you need to use valid email addresses everywhere. By default, your Hostgator account will reject any incoming emails that aren’t going to a valid address. My daily Quarantine Summaries weren’t showing up in my inbox even though I was getting filtered mail because I told Postini to send me messages from “do-not-reply@spontaneousnoise.com,” which didn’t exist. SMTP message tests failed because Postini tried to send from “test@spontaneousnoise.com,” which also doesn’t exist. Creating an alias for that address allowed the test to work.

Categorizing Mail with SpamAssassin

At the time, SpamAssassin seemed like the best way to filter out junk. I’d heard of it before and configured SpamAssassin settings on shared hosting accounts at Hostgator and DigitalSpace. I’d used it and knew it worked; I just had to figure out how to set it up. I read a few warnings about SpamAssassin being a bit of a memory hog, but how bad could it be? I’ll come back to that later. It was easy enough to use aptitude install to download and install SpamAssassin, but it was elliot’s tutorial that helped me configure SpamAssassin and get it processing mail on my Ubuntu server.

I populated SpamAssassin’s whitelist and lowered the minimum SPAM score. Immediately SpamAssassin started doing a great job of telling me what was SPAM and what wasn’t. There were very few false positives, which were quickly remedied with more whitelisting.

The next problem was keeping SPAM from my inbox. SpamAssassin was doing a great job of categorizing SPAM, but I needed some way to avoid seeing the SPAM alongside my legitimate messages. Every new SPAM message to my inbox was an urgent reminder of two things:

1. I needed to separate junk from real mail.
2. With my own server, I just have to do everything!

Sorting with Procmail (or at least an attempt)

Webmin, which has at times been extremely helpful and deserves its own post, had a menu item under SpamAssassin for Procmail delivery. It didn’t take much searching and reading to know that Procmail was just the filtering device that I was looking for. I installed Procmail and repeatedly configured /etc/procmailrc and restarted Postfix. Nothing ever happened. I made sure that my log file existed and had proper permissions. I checked my mail logs and found nothing helpful. I was still receiving mail that got filtered by SpamAssassin, but Procmail never did anything or logged anything. It was supposed to use SpamAssassin’s headers to determine whether the message was junk, and then either deliver to the inbox or to the Junk folder. Instead it did nothing.

Filtering with Maildrop

My understanding of virtual delivery was lacking and I couldn’t get Procmail to work. It seemed like most of the example Procmail scripts I found assumed that you were using local delivery with real users (as opposed to virtual users like I was using via MySQL). I convinced myself that Procmail didn’t play nice with virtual delivery (wrong) and looked for alternatives. Despite looking for the wrong reason, I found Maildrop and eventually got that installed and filtering mail.

Here’s how I configured maildrop and got it working:

/etc/maildroprc

DEFAULT="$HOME/Maildir"
logfile "/var/log/maildrop.log"

SHELL="/bin/bash"
PATH=/bin:/usr/bin:/usr/local/bin:/usr/lib/courier/bin/
INBOX="/home/vmail/$DEFAULT"
DEFAULT="$INBOX"
SPAMFLD="$INBOX.Junk/"

# create the trash directory if it does not exist
`test -d "$SPAMFLD"`
if( $RETURNCODE == 1 )
{
`maildirmake "$SPAMFLD"`
}

# filter message through spamassassin's spamc agent
xfilter "/usr/bin/spamc -f"
if ( /^X-Spam-Status: Yes,/)
{
DELETE_THRESHOLD=9.0
/score=(\d+)/
if ($MATCH1 >= $DELETE_THRESHOLD)
{
to /dev/null
}
else
{
to "$SPAMFLD"
}
}

/etc/postfix/master.cf

maildrop  unix  -       n       n       -       -       pipe
flags=DRhu user=vmail argv=/usr/bin/maildrop -d ${recipient}

/etc/postfix/main.cf

mailbox_command = /usr/bin/maildrop -d ${USER} ${RECIPIENT}
virtual_transport = maildrop

It’s imporant to note here that virtual_transport was critical because I was using virtual users and inboxes. The maildrop config lines in master.cf, combined with virtual_transport in main.cf seemed to be the key elements that allowed maildrop to filter mail.

Maxing Out the Slice

Everything was finally working just like I wanted. The only minor detail was that my memory usage seemed high, and my virtual memory usage was — well — being used on occasion. Typically, I was running at about 230MB out of the available 256MB. In the Slicehost Campfire chatroom, I posted my memory usage statistics and promptly received some concerned feedback. My swap usage was over 100MB, which means that my memory usage was so high the system had to start dumping memory contents to the disk’s swap space. I was maxing out the 256MB of memory on my Slice, and I needed to tune some processes and avoid utilizing virtual memory.

I restricted my Apache limits a bit, knowing that none of my sites would generate heavy traffic. I reduced the number of SpamAssassin children running on the Slice. Both of these adjustments helped a bit, but my memory usage was still high. I restricted SSH, saslauthd, and Courier, but that proved to be pretty stupid. Mail.app would suffer from SSL errors and I’d get occasional authentication problems. I put those back quickly.

Weeks passed and I closely watched my memory usage. I didn’t want to sacrifice functionality, but my memory usage was high and occasionally pushed into swap territory; mostly as little as 80KB but sometimes up to 4-5MB. My top processes were Apache (which I couldn’t cut any further), SpamAssassin, and MySQL. Switching Apache for Lighttpd didn’t seem like a good idea for me. How could I cut down on my memory usage?

Filtering Mail with Google Apps/Postini

I read a helpful post by unicks in Joyent’s forums that explained how Google Apps/Postini offered an excellent mail filtering service that’s fairly easy to implement. I could still have complete control over the physical mail on my server, but with the benefit of up-to-date, state-of-the-art junk and virus filtering. Most importantly, I could drop SpamAssassin and save some memory.

All I had to do to configure this was to edit my DNS settings and point my MX servers to Postini. I then restricted Postfix’s allowed domains to Postini, so any mail that comes through my inbox has first passed through one of the more sophisticated SPAM filtering services on the market. The service will be less than $20/year, which is also a huge plus.

Regaining Memory

Rather than paying to upgrade to a slice with more RAM, I’ve offloaded my SPAM filtering to Postini — which I trust more than myself to stay up-to-date and effective. My average physical memory usage now hovers at around 125MB, which is about 80MB less than my SpamAssassin setup took. My swap usage gets to about 80KB sometimes, but that doesn’t worry me too much.

The Problem

I was working with a proprietary AS3 framework that relied on multiple SWFs and XML for configuration and content. The piece involved lots of lossless images (dynamically loaded) and only needed to run as a projector from a Windows machine. It also communicated with an external series of lights via a MAKE Controller board. Initial testing of the app went smoothly, but letting it run overnight turned it into a sluggish memory hog.

Improving Memory Usage

There were a few tips I followed from various sources to streamline the app’s memory usage. Ultimately they weren’t enough to solve the big problem, but I watched the numbers drop in Apple’s Activity Monitor.

• Remove unused event listeners.
• Clear unused display objects by setting each obj = null.
• Make sure you’ve deleted any child display objects with removeChildAt()—great in a loop.
• Stop all Timers to free up the memory that they use. myTimer.stop();

Final Solution

We came to two options: use a third-party product for compiling a more efficient Flash .exe (such as Screenweaver, Zinc, or MProjector), or create a reliable workaround that would simply restart the kiosk app and avoid the memory leak in the first place. The client needed files delivered quickly and did not have extra budget, so we ended up choosing the latter. We avoided the problem by adding a timer that would restart the Flash piece after 10 minutes of inactivity. (This was done by using FSCommand to call a batch file, since we’re using windows, immediately closing the Flash app, and having the batch file execute the Flash app again.) This ended up working pretty well and allowed us to deliver everything on time.

There are more discussions about memory optimization with Flash projectors (and Flash in general), but I never found any silver bullets. Here are a handful of links that were helpful:

• Similar Issue: How Long Can Flash Run?
• Grant Skinner on Resource Management
• Detecting Memory Leaks in Flash and Flex
• Self-Restarting Projector
• Monitor and Restart Crashed Windows Programs

Stop reading and just go get it.

In order of importance:<

1. Project-wide search and replace with support for regular expressions.
2. The ability to duplicate a selection without copy and paste. (Command+D in TextMate)
3. Multi-line selection/edit tool (Alt+click/drag), and the related ‘Edit Each Line in Selection’ feature.

Espresso has been freshly released at version 1.0, and I realize that it needs time to mature. It’ll take a while to build up the enormous feature set that TextMate offers, and it’ll be amazing if it can stay as simple as TextMate at the same time. I’d make the switch in a heartbeat if I wasn’t so dependent on TextMate’s awesomeness.

Know what you need, want, and would like to have. (In that order.)

The most common misconception is that the internet is a magical place where things build themselves, and everything is possible. It may be magical, and there are lots of talented people doing amazing things on the web, but every cool thing you see starts with some kind of plan and takes time to build. The clearer you can define your project’s needs, the easier time you’ll have working with some professionals to scope things out and get to work. If you haven’t already, make a list of your must-have features/goals, the ones you want but aren’t necessary, and then things that would just be nice.

A good website has a good plan behind it.

The process from start to finish roughly follows this path: define goals, determine technical requirements, establish information architecture, create and revise design/look-and-feel, build, test, and launch. Each of these phases assumes some amount of revision, and the entire process could range from a few weeks to a number of months. It’s tempting to want to see how your site will look and wait until you can use it to revise the way it works, but that’s a sure way to make a project more expensive. Defining goals that can be measured, having good information architecture that models key aspects of site functionality, and listing technical requirements up front can save lots of time and money later in the project cycle.

The sky is not the limit; it’s time and budget.

If you’re new to web projects, pretend you’re building a house. They come in all shapes and sizes, they often meet the same basic needs, and you’ve been through enough neighborhoods to know that they can be vastly different from one another. Be prepared to share your budget and expected timeline, as they will be critical in determining the scope of the site. Ask to see a few bids where the design firm explores potential options that meet the site’s needs within the budget and timeline that you have to work with.

Hopefully this will demystify some of the process. If you still have a few questions, or if you’d like to start a conversation about your project, .(JavaScript must be enabled to view this email address)!

The problem: I’m working on a site that uses the jQuery Cycle plugin. The chunk that gets rotated for the slideshow is an HTML list-item that contains another list with nested list items. (li -> ul -> li, li, li). The root li kept getting a background color applied to it, even though I specified that it should be transparent.

The solution: disabling the Cycle plugin’s default behavior of applying a background to the slideshow container element when using IE on a Windows machine with cleartype enabled. Add this little combo to your Cycle options and things should be fine:

cleartypeNoBg: true

The key was mention of this undocumented feature in this thread.

Go get it!

I could finally have Address Book share the same data and sync any changes to my iPhone from my primary/home computer! It was as simple as turning the Address Book’s data folder into a symbolic link. The app acts like it normally would, but secretly the data it uses gets stored in the DropBox and therefore updated each time the Address Book gets an edit. For me, it was two lines via the terminal:

cd /Users/[username]/Library/Application\ Support/
ln -s /Users/[username]/Dropbox/SyncData/AddressBook/ ./AddressBook

Since this worked just fine, I tried the same with Things. It stores its data in a single XML file, but I made the whole directory a symbolic link anyway:

cd /Users/[username]/Library/Application\ Support/Cultured\ Code/
ln -s /Users/[username]/Dropbox/SyncData/Things/ ./Things

The only catch here is that I need to remember to close Things when I’ll be moving to another computer. I ran into a problem once where I opened up my laptop and it wrote to the Things data before it had a chance to pull down updates. This was easily fixed by going to the DropBox web panel, selecting a previous revision of that file, and restoring it. It immediately pushed the revision to all three machines. Impressive! So even if something gets messed up, DropBox is quietly keeping revisions of everything. I love it.

I’d like to follow suit with my Safari bookmarks, but I only want to update one file (bookmarks.plist) rather than Safari’s entire support directory. I tried making only this file a symbolic link, but Safari is quick to overwrite it with a real file which destroys the link. I don’t want my browsing history, cookies, cache, etc. to get synced, but I’m not sure what else to do. If anybody out on the internet has an idea, feel free to leave a comment. (Also, if anybody besides me actually reads my posts, I’d be thrilled to find that out.)

>Update: I’ve been able to get some other apps syncing data as well, including Billings, MacJournal, and Typinator.

The great relief is that every single problem I’ve had been my own, not the limitations or drawbacks of the hosting company. I was impressed with the responsiveness and offering of my HostGator account, but felt limited by not having DAV or SVN access. Slicehost, at least thus far, has simply followed through with its promise: rock-solid, high-performance service with unbeatable support. They’ve gone out of their way to help me troubleshoot and configure my Slice, understanding full well that I’ve been learning as I go. The risk of course is that your server is yours … to completely screw up. I’ve had a few late-night Postfix/Courier experiments go poorly, but there has always been someone around to help. (Which is amazing — I really mean always.)

I plan on posting some articles with what I’ve learned from my own experience. If you’re starting out with Slicehost, however, PickledOnion’s tutorials are a must.