Be Good Not Bad by Brian Warren

Recent pages from the journal

8 July 2013

What Do You Carry asked me to submit a photo of what I typically carry around with me. Here it is. The setting is my office at Onehub in Pioneer Square, Seattle.

2 July 2013

On Criticism

Change is a way of life for a designer. Sometimes it’s when a client comes to you with a project that is in desperate need of a change. Other times you’re the one fighting tooth and nail for every ounce of improvement you can bring to a project. But the rest of the time, we are just observing from the sidelines as some of our favorite brands evolve, sometimes bit by bit, and other times in enormous transformations.

We designers can’t help but have an opinion when we see change. Take a look at my own twitter history and you can see I’m not above complaining about some site’s lack of use of smart quotes and apostrophes.

The reason I’m writing this, however, is that I bristle when I see people reject a new design based on a single first impression. Tweeting “Fail.” or “Woah, put away the ugly stick.” the moment you see something you don’t like is not contributing a single thing to the conversation. Wait, strike that. It is contributing something: Negativity. That’s it.

I am completely fine with people being critical of the things they see on the web. As long as they know that they’re doing it from a position of safety and ignorance. You haven’t spent the hours/days/weeks/months that the designers spent working on that project. You don’t have the same stakeholders they have, and you certainly don’t have the timeline pressures that they dealt with getting this project shipped.

No, these designers and developers stuck their neck out for this project and they shipped it. Unless you, in your endless wisdom, are able to take a single glance at the new iPhone/Flickr/etc. and say, “Yes, I know, in ten seconds or less, better than all these people do, and I can say they all made terrible decisions. And now I really need to tell the world about how impressive I am in 140 characters or less.”, if you have that capacity go for it.

The rest of us, take a step back, have some humility, and go ahead and write a constructive blog post that points out some things you would do better. Go ahead, be critical, but for cryin’ out loud be nice about it.

14 June 2013

Web Design Day 2013 

Web Design Day is a web design and development conference in Pittsburgh, PA. This is the fifth year for Web Design Day and I am thrilled to be invited to speak at this year’s event.

Check out the lineup, and you’ll see the lineup of speakers is staggaringly more qualified than I, but I’m excited nonetheless.

Tickets go on sale today. If you have any inclination to go, pick up yours now. It sounds like they’re selling at a pretty brisk pace.

4 June 2013

.net Magazine Article: On Web Typography

Photo of .net Magazine article
This spring I had the pleasure of writing an article for [.net Magazine](http://www.netmagazine.com) on one of my favorite topics, web typography. The article covers several ways you can take your type on the web from good to great by sweating the details. These details include simple things such as choosing an appropriate face for a project, or more fun and complex ideas such as using modular scale and tinkering with font-feature settings. I had a blast writing the article. It involved at least a couple weeks of getting up at dawn to make some coffee and write (much like I’m doing right now). By far the most painful part was chopping the article down to size. There were a few harrowing days when I was several hundred words over my limit. I’ll post again when the article is available on the .net website, but that may be awhile. I suggest finding a newsstand to pick it up. Look for it in the June 2013 issue. No newsstand near you? Not to worry, you can [order it directly](http://www.netmagazine.com/shop/magazines/June-2013-241), and you can even pick it up on [the iPad](https://itunes.apple.com/us/app/.net-practical-web-design/id451395878?mt=8) (how convenient!).
31 May 2013

For Jimmy’s birthday we made rocket and a moon cakes.

23 May 2013

Seattle

20130523-kids

It’s hard to believe that it’s been nearly a year since we packed up our house and moved to the Northwest. In some ways, our time on the East Coast feels like a distant memory. In others it feels like we just got off that plane.

I’ll never forget our last couple hours in Pennsylvania. The movers had shown up late that day. They did a passable job, but were running behind. As they would finish a room, we would swoop in to clean it right behind them. Our plane was leaving that evening, so we didn’t have much time.

As the day wrapped up, I picked up the kids from school, and as I got back the movers were closing up the truck and Anna had finished cleaning. We scurried to load up the cat and the last of the bags, sped off to the airport, dropped off our luggage, returned the car, rushed through security, and found our gate. Ten minutes later we were on the plane. It was that close. I don’t think Anna and I breathed a sigh of relief until we were well over the midwest.

But here we are, a year later in Seattle.

Kerry Park, Seattle
This year has been incredible. A huge reason we moved here was to have the kids grow up near their cousins and grandparents, and that has been returning rewards in bounds. We’re also really enjoying the area. We love living both near the water and the mountains. It reminds me a bit of our time in [Haines, Alaska](http://www.flickr.com/photos/vistamonster/2704498786/). The city has welcomed us wonderfully. The people have been kind, and just between you and me, the weather is way nicer than you’ve been told. We still have tons of exploring to do, but just about everything we’ve seen so far has been lovely. I walk around feeling very thankful. This is home.

14 May 2013

Migrating from ExpressionEngine to Kirby

When I redesigned my site this year, I took the opportunity to switch the content management system I was using. I built the new site on Kirby, a lightweight, flexible system that reads all the content from text files, instead of a database. I like this approach. All my new posts start as text files anyway, and it is a nice feeling having all the content I’ve written for this site there in easy-to-access text format rather than a mysterious database in the clouds. It’s like I have an instant easy-to-read backup of my site sitting on my computer.

For years, this site ran on ExpressionEngine, a highly capable content management system. I would certainly recommend ExpressionEngine for plenty of types of projects, but for now, Kirby’s a great fit for me.

Transitioning from ExpressionEngine to Kirby was an interesting process in which I learned a lot. The first and biggest task was to get all of my posts out of ExpressionEngine and into individual text files. Here’s how you can do it too:

Step 1: Build a Kirby-Friendly EE Template

I’ll assume that since you have an ExpressionEngine site, you’re comfortable building a template to show your entries. Basically your goal with this step is to have a single page with all of your entries on it. Here’s a good start:

  {exp:channel:entries channel="blog" limit="9999" sort="asc"}
  Title: {title}
  ----
  Date: {entry_date format="%F %d, %Y"}
  ----
  Slug: {url_title}
  ----
  Text: 
  {body}
  ----
  ##########
  {/exp:channel:entries}

Put nothing else in this template. No design, header, footer, nav, etc. This should be only your posts and nothing else.

Feel free to customize this to your heart’s content. I certainly had to tweak mine a few times to get it just right. Make sure you keep the general format of this template, including the ##########. We will use that part with the hashes to tell our script where to separate the posts.

Once you’ve saved that template, visit that corresponding page in using your web browser. If you have a few hundred posts, it might take a few seconds to load, but the result should be a nice plain page of all of your posts. If you have too many posts it might not load at all. You might need to break this up into multiple pages, where you do a few hundred posts at a time. Play with it a bit and see what you can get.

Step 2: Your posts.txt file

First, go to your desktop on your computer and create a new folder. I called mine “chop-shop”.

Next, you need to download that posts page to your computer. There are plenty of ways to do this, but if you’re new to this kind of stuff, the safest bet is to view source and copy and paste that into a text file on your computer. The result you are aiming for is a plain text file with all the text and info about your posts. Call it what you like, but posts.txt sounds good to me.

Step 3: Your Post Chopper Script

Next we’re going to get a little awesome using some code. Trust me, this won’t be too painful. The first step for you is to download the Kirby Post Chopper. Unzip it and move post-chopper.php into the same folder you have your posts.txt file.

Posts file in a posts folder.

The post chopper script that you just downloaded will take your posts.txt file and turn it into a bunch of folders and files based upon a few assumptions:

  • First, it looks for ########## to decide where to separate posts.
  • Next, it looks for the Slug: line to decide what to name the folder, adding the post number to the beginning. (e.g. The post with Slug: mix-tape-3 became the folder named 397-mix-tape-3.)

Ready? Let’s go. Open up a terminal window, navigate to your chop-shop folder (cd Desktop/chop-shop), and run this script using the following command: php post-chopper.php. Hit enter, and you’ll see it go crazy creating new folders.

Terminal Output

Once it’s done, check out the results. There should be a new folder called posts, and inside is all of your posts.

Step 4: Kirby Templates

Once you have Kirby installed, you will want to create a folder for your posts. This should live in the content folder, and give it a number and a name, such as 05-blog.

Next, we are going to make three files. The first is blog.txt. It’s a very simple file:

Title: Blog
----
Text: This is a nice Demo Blog. 
----

Save this in your 05-blog folder. That’s right: Inside that folder is a bunch of folders for all your posts and this lonely little text file.

The other two files are going to be php templates. In your Kirby folder, open up site/templates and create two files: blog.php and blogarticle.php.

blog.php

This page serves up a list of your posts. At bare minimum, you should have something like this in there:

<?php // Outputs the contents of blog.txt in the blog posts folder ?>
  <h1><?php echo html($page->title()) ?></h1>
  <?php echo kirbytext($page->text()) ?>

<?php // The posts loop ?>
  <?php $articles = $page->children()->visible()->sortBy('date', 'desc')->paginate(10) ?>
  <?php foreach($articles as $article): ?>
  <article>
    <p class="date"><?php echo $article->date('j F Y') ?></p>
    <h1><a href="<?php echo $article->url() ?>"><?php echo $article->title() ?></a></h1>
    <?php echo kirbytext($article->text()) ?>
  </article>
<?php endforeach ?>

There are two sections to this file. The first shows the contents of that blog.txt file we created. The second section loops through the posts.

blogarticle.php

This page serves up a single post. Notice how the title of this file maps to the title of the .txt files for each of your posts? Not a coincidence.

<article>
    <p class="date"><?php echo $page->date('j F Y') ?></p>
    <h1><?php echo $page->title() ?></h1>
    <?php echo kirbytext($page->text()) ?>
</article>

You will want to get a little more creative to design these pages, adding all the extra stuff you will need to make these work, but these code blocks should help get you started.

Step 5: It’s up to you

From here, it’s up to you. I recommend familiarizing yourself with the “How to build a blog with Kirby” series. This helps a lot with the basics and gave me a great launching point to start customizing stuff for this site. Check out the post about custom post types too for some good tips on making blogging with Kirby well-suited for you.

I could have written lots more about getting started with Kirby, but I mostly wanted to focus this article on transitioning from ExpressionEngine. Any questions, thoughts, and tips are more than welcome.

6 May 2013

Jonathan

Jonathan On March 28th, 2013, my son, Jonathan Michael Warren, was born. Mother and baby are all super happy, and it was a very smooth process.

We now have three kids living in this house. This is a big change for everybody, but it’s been pretty frickin’ fun.

Interesting Fact: The three aforementioned kids were all born in different cities, states, and time zones. Needless to say, we’re looking forward to settling down a bit with this family.

1 May 2013

Number Ten

Seattle Sunrise This marks the tenth (or so) design of this site. This design spent a long time in the fermenter. I purchased the typeface, Colfax, well over a year ago, with the thinking that I’d use it for just this purpose. Every few months or so I’d pull it out and start tinkering, but I never got very far. Finally, over the past couple months, I’ve been making some time to chip away at it in earnest.

My goal was to make something that honored the content first. I am looking to write more and get back to posting more photos, so this design should work pretty well with that. I also adore the typeface. Big lovely fonts just sitting there begging to be read. That’s my hope anyway!

I switched platforms with this project. ExpressionEngine, the system I’d been using for the better half of a decade was getting a little clunky and was poorly-suited to the task of a simple blog. So, I switched to Kirby, and wow, I couldn’t be happier. It’s a stellar little application that suits me very well. Kirby reads all the posts from text files. No databases, and exceedingly little setup.

I’m already working on a post explaining the process I used to migrate from ExpressionEngine. It took a bit of doing to get all my posts out of EE and converted over into hundreds of text files. The effort was worth it, though, and I’m looking forward to sharing how I did it, should anybody else want to do that.

I got a bit nostalgic putting this site together. I had to read a lot of my old posts to make sure the content converted over well. I also browsed a bunch of the old designs. Some of my favorites: The Desk, Redux, Candy + Coffee (the longest-running design, I think), and the one we’re retiring today. I love them all. They’re all old friends.

Onward

That’s all for now. Any feedback, good or bad, is welcome, as long as you’re nice about the delivery. Thanks for being along for this ride so far. Hope to see you around here soon.

24 April 2013

Font Aid VI: Aster Effects

Font Aid Asterisks From time to time, the Society of Typographic Aficionados organizes a project to support relief efforts after natural disasters. Font Aid VI: Aster Affects is our latest project, raising funds for Red Cross relief efforts after the terrible events of Hurricane Sandy in October 2012.

This project brought together hundreds of designers and typographers across the globe to collaborate on a single font consisting entirely of asterisks and star-like symbols. I was honored, proud, and happy to contribute a glyph of my own to this project.

From the Font Aid VI page:

An asterisk can denote something that requires attention — and an event of this magnitude and impact certainly deserves some attention. … The root of the word comes from the Greek astēr or “star” — signifying hope and light. In computer terms, it’s a wildcard character … and hurricanes are certainly wild and unpredictable.

This was my first time participating in Font Aid, and I can’t see why I won’t take the opportunity to contribute again in the future.

Please, if you have the means, buy the font and know that all the proceeds of your purchase go straight to those in need.