This is the website of one Mark Otto,
a designer living in California and
working at Twitter.


Webkit Placeholder Text Color

Monday, August 30th, 2010
<input type="text" id="phone" placeholder="xxx-xxx-xxxx" />
::-webkit-input-placeholder {
  color: #ccc;
}

Anthony Short shows us how to change the placeholder text for input fields in Webkit browsers.


Twitter for News

Thursday, August 26th, 2010

The new Digg is essentially 'Twitter for news.' Users subscribe to a number of sources and receive a stream of stories filtered by friends. While this personalized feed is useful to users, it's also an attempt to please publishers.

Pete Cashmore, of Mashable.com, on the relaunch and redesign of Digg.com.

Digg has relaunched to a two types of user reaction: hate and love. Problem is, I think the hate side is winning. They’ve clearly repositioned themselves as someone who wants to compete in the social and news arenas. Their goal is to help people consume more meaningful or important news, and they’re aiming to do it with a new focus on “My News” and building up followers.

The only real difference I see between the new Digg and Twitter is that Digg is a narrow-focused version of Twitter. Twitter is an information network that’s different for a lot of people. It’s built to be that way—you make it serve whatever purpose you want it to; some use it for news, others friends, and still others marketing.

At the very least, I’m certainly intrigued to see how this focused application of Twitter’s core functionality will work out for them, their users, and (as the quote mentions) publishers.


About the New Design

Wednesday, August 25th, 2010

The other day I quickly coded a new design for this here website. The idea behind it is simple: provide some base structure, but ultimately let the content drive the design of the site. To share what’s under the hood, I wanted to share a little more about that idea and what’s powering this site.

Form Before Function

That phrase feels like a cop-out, but it sums things up nicely. So far, photos and a few text and code heavy posts are all that’s here. That could easily change and I wanted to remain flexible as to not feel constrained by whatever elaborate design I could come up with.

I don’t know exactly what I want out of this site yet, only that I want to blog, share photos, talk about some code, and share thoughts on links.

Under the Hood

WordPress

Because it’s what I’m familiar with, I opted to use WordPress once again. Coupled with the awesome plugin support and flexibility of WordPress as a CMS, it was a no-brainer for me. Here’s a look at what I’m using with WordPress to power this site.

Categories, Not Custom Posts

Just a quick note to begin here: WordPress 3.x allows for custom post types. I’ve used them before, but decided to avoid them this time around and instead keep things simple to start. As I said, I want the form of this blog to come as naturally as possible.

To customize how each category’s post shows up, I threw in some conditionals for the loop:

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
  <?php if (in_category('photos')) { ?>
    <figure>
      <?php the_content(); ?>
      <figcaption>
        <strong><?php the_title(); ?></strong>
        <?php echo get_post_meta($post->ID, 'caption', true) ?>
      </figcaption>
    </figure>
  <?php } elseif (in_category('quotes')) { ?>
    <blockquote>
      <p><?php the_concept(); ?></p>
      <cite><?php the_excerpt(); ?></cite>
    </blockquote>
  <?php } else { ?>
    <?php echo tweetbutton(); ?>
    <h1><?php the_title(); ?>;</h1>
    <span class="date"><?php the_time('l, F jS, Y') ?></span>
    <?php the_content(); ?>
  <?php } ?>
  <hr />
<?php endwhile; ?>

Plugin: WP Tweet Button

WordPress

To encourage sharing of the articles I (will) write, I’ve added the Twitter Tweet button via this handy plugin. It gives you a few options, including: automagically adding it to posts, custom recommendations per post, and more.

Check it out if you haven’t yet. I did try some other plugins but they all sucked. This one seemed best.

Plugin: Disable WPAutoP

I can’t begin to tell you just how frustrating WordPress’s automatic p tags are. They wrap anything and everything, which makes for some funky styling if you’re not careful enough (e.g., images get wrapped and can leave funky spacing if floated). Install this bad boy and kiss those rogue p tags good-bye.

CSS with Less.js

WordPress

I talked about this before, but I’ll mention it here again. Less.js, a Javascript implementation of Less CSS (previously done via Ruby) that gives you powerful add-ons to CSS. Use it to add variables, create mixins for shorthanding long or complicated pieces of code, perform math, and more. It’s really handy.

Plus, even though it compiles the CSS in the head of your page, it stores it in a HTML5 local database. Hot.

Chili: A jQuery Syntax Highlighter

Not sure if there is a better one out there, but it seemed solid to me after a quick tour around Google. I’ve love some suggestions for alternatives; my only complaint is it’s ugly default styling. Will definitely need to dive in and change that up more in the future.

PaintbrushJS: Javascript Image Modification

I use PaintbrushJS to modify that beautiful mug of mine on your left. It’s damned awesome; you can modify images with sepia, noise, tint, and even blur filters. All on the fly with javascript and some awesome use of canvas. It’s developed by Dave Shea (@mezzoblue) and is just getting started. Not practical in my implementation, no, but still cool :).

Beanstalk for Low Maintenance SVN

I’m a fan of version control—if by version control you mean just one master branch of all my code so that I can quickly revert my mistakes and checkout new copies should my server get hacked or otherwise fubared. Nice to have and these guys do all the leg work; I just import my base files and they take it from there.

Also, an added bonus of using SVN was the need for using SSH to checkout my code on my server. Handle to know; I need to pick up more stuff like this.

And that’s it! I’ll keep adding features and posting about them as I go though.


Total Finder Pwns Me

Wednesday, August 25th, 2010

Holy underwear! I’m pretty pumped about this plugin for Finder. It’s called Total Finder and it sits right on top of your Finder.app and gives you a sweet set of features. Here’s a few I’m particular interested in:

Total Finder

It’s in alpha testing right now, but when it comes out it’ll be $15. I dare say I’ll be ready to throw down the cash when it’s finalized.


Fuck You

Monday, August 23rd, 2010
A wonderful melody by Cee Lo Green. I encourage you to watch it with speakers blaring as I did. Soooooo good.