This means it’s time for another re-design of this site despite this one not even being completed. Since I’m not going to use it as a client landing page any more, I think I’ll re-focus attention on blogging about WordPress, UiX, Web Design, etc and have a separate section that can serve as landing pages for community projects. But that’s a weekend project vying for attention with all this other stuff:

Coming up quickly (happening right now) is WebVisions Portland. I’ll be there on Lorelle VanFossen’s panel with a few other WordPress experts from the Portland area. If you happen to be headed there, our panel is Friday (May 18th) in the afternoon, stop by and say hi!

I was able to secure a last minute ticket to WordCamp Seattle and will be driving up for the day to be there. Plan on attending my coworker, Zack’s, presentation titled “There’s a function for that…”

Totally unrelated, but Sunday is a World War II living history event in Adair Village, OR. Adair Village exists because of the WWII-era Camp Adair – a training and staging installation for troops eventually headed overseas. If you’re into that stuff and in the area, stop by the WWII barracks… Unfortunately I’m not really sure where they are, but the city is quite small – someone’s bound to know… We’ll be there in the early afternoon

This Monday evening (May 21st) will be my second attendance at the Portland WordPress User group meetup. The topic is all about editing the codex – I’m looking forward to being there.

--------- Thanks for reading Catch up: Joining 10up, WebVisions, WCSEA, PDX-WP on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Servers

• Nginx
• Lighttpd
• Apache A The recommendation from, well, just about all developers is to drop Apache as soon as possible for one of the other web servers

Text Editors

• Textmate
• Sublime2
• TextWrangler
• BBEdit
• Vim
• Nano
• Notepad++

Hardware

• Present: Six Mac laptops, Two laptops running Windows, one person who primarily uses Linux
• External Monitors
• Magic Trackpad
• Mechanical Keyboard

Command Line Tools

• Ack (vs. Grep) for searching through core
• SSH
• ab (Apache Benchmark)
• htop, top

Development Environments

• Coda
• PHPStorm

Support Tickets

• Basecamp
• Zendesk
• Jira
• Trello
• Custom plugins to send ticket from a WP site to these services

Version Control

• SVN (Pretty much only to interact with WordPress core, plugin, or theme repositories
• Git (Pretty much only because of Github)
• Mercurial
• Capistrano deployment tool
• Bitbucket
• RepositoryHosting.com
• Github post receive hooks
• WordPress Github Plugin Updater
• Versions
• Tower
• Github For Mac
• Gitx

Freelancer Billing Tools

• Freshbooks
• Harvest

Online Tools

• Regex Pal
• Reggy
• Dabblet
• Stripe (developer friendly payment solution)
• WordPress Plugin: Carrington Build

Debugging

• Firebug
• Chrome Developer Tools
• Debug Bar (WP Plugin)
• Debug Bar Extendeder (Variable Tracing)
• Debug Bar Console (PHP Console in Debug Bar)

CSS Tools

• LESS
• SASS -> SCSS
• CSS Tidy
• Stylus
• Prefixr

Other

• UI Stencils (for hand-drawn wireframes)
• Gridbooks (for hand-drawn wireframes)
• More clients
• Less sleep

Many thanks to everyone who attended the session and contributed to this list. Sound off in the comments if we missed something that makes your WordPress development life easier.

--------- Thanks for reading 50+ tools that make WordPress developers’ lives easier on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

By shifting my perspective, literally, I was able to see the design in a different way. Here are some practical exercises to literally shift your perspective:

• Turn the entire design upside down. While it may look funny to turn a laptop upside down, it’s totally doable and allows you to see how a design flows vertically.
• Look at the design on the screen from an extreme angle left or right to see how the design flows horizontally.
• Zoom way in and pixel-peep design. I did this to confirm the baseline was consistent by zooming in and literally holding a ruler to my screen.

Do you consistently use any of these tricks to help you look at design?

--------- Thanks for reading One simple trick to find design issues on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

I decided that instead of ordering cards, I’d attempt to hand make them in small batches. This will allow me to tweak, update, or even switch designs as often as I need.

These cards have a special QR code on the back and my logo heat embossed on the front in either ninja black or line green. They are 2″ square with rounded corners.

--------- Thanks for reading New Business Cards on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Widget
The progress bars can now be displayed easily in a widgetized sidebar. It’s a basic implementation using just a text-box to take a comma separated list of progress bar IDs, but it’ll work for now.

New Colors!
Two new colors, Black and Silver:

Compatability fixes
Mark Ayers (@Philoserf) let me know via github that there was an incompatibility with the CSS of this plugin and, well, other things. In this released I’ve prefixed all my CSS classes so that won’t be an issue. Also filing that away as a best-practice.

--------- Thanks for reading New version of TDD Progress Bars on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Why this occurs:
Specifically, I’ve no idea. Generally this is because the WordPress query is determining what template to show before it ever gets to the page template. The query takes the number of taxonomy terms to show for a given taxonomy, looks at the blog option posts_per_page and then determines what template to serve (404 or your custom one).

How to fix:
The solution I found was to filter the blog option posts_per_page if viewing the custom taxonomy. It’s pretty simple and looks like this:

add_filter( 'option_posts_per_page', 'tdd_tax_filter_posts_per_page' );
function tdd_tax_filter_posts_per_page( $value ) {
	return (is_tax('custom-taxonomy')) ? 1 : $value;
}

The filter attaches to the posts_per_page filter hook. It then returns a “1″ for one post per page if it’s the taxonomy archive I’m concerned about, otherwise it returns the default value.

--------- Thanks for reading Taxonomy Archive Pagination 404 on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

At the time of writing, I was running a VPS with guaranteed 600MB per month. The aforementioned websites consisted of approximately 15 WordPress sites of which three had an anecdotally “intensive” amount of plugins installed. The server is running PHP5/fcgi and I had enabled x-cache support (but had no idea if it’s actually running).

My sites aren’t popular. Based on my analytics, I’d estimate about 50 hits per day against my server. Yet, once every few days my server was being automatically restarted because it was using too much memory. Once a client started getting the same thing on their single WordPress site on their server, I decided to start poking around.

First, I started by looking at the currently running processes and memory usage on my server. I SSH’d in and — after reading some DreamHost documentation — found these commands:

top -c

watch free -m

The first gave me a running list of the processes on my server. The second just gives a running and easy to see display of total/used/free memory available to my virtual server. So I started opening websites to see what happened. Basically, new processes were spawned every time I refreshed or opened a website and they stayed there, running, for quite some time. I then found this command:

ab -n 1000 -c 20 -t 5 http://websitesthatdontsuck.com/

This code allowed me to simulate high traffic. In this case, 1000 visitors, 20 at a time, wait no more than 5 seconds for a response. Suffice it to say, my server didn’t handle it well. If I recall, about 10 requests completed, with the remainder failing.

So I had established the problem, what did I do to fix the problem? W3-Total-Cache.

Setting up W3 Total Cache

--------- Thanks for reading My server doesn’t hate me anymore thanks to W3 Total Cache on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Note: If you’ve implemented some type of HTML5 video solution, a simple video{ max-width:100%; height:auto; } will be sufficient and will work wonderfully.

Luckily, the Web Designer Wall published a method that we’re going to use. It’s a fancy bunch of CSS. I’d just grab it and throw it in your stylesheet.

The CSS

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
/*	overflow: hidden; */
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

edit: The overflow:hidden style was causing my site to cease scrolling (everything outside the viewport was… hidden?) It didn’t really make sense, but deleting the line didn’t seem to have an adverse effect… for now..

In fact, that’ll work just fine as long as you wrap some sort of container (such as a <div>) around your oEmbed URL… But that’s too much work, the point of oEmbeds is to be super quick and simple.

Filter the oEmbed

oEmbedding actually runs the URLs it finds through the shortcode and just before it outputs HTML, it applies the embed_oembed_html filter. We can make use of this to very easily wrap a container (as required by the above CSS) and add a layer of semantics by using the HTML5 <figure> tag.

add_filter( 'embed_oembed_html', 'tdd_oembed_filter', 10, 4 ) ;

function tdd_oembed_filter($html, $url, $attr, $post_ID) {
	$return = '<figure class="video-container">'.$html.'</figure>';
	return $return;
}

--------- Thanks for reading fluid width oEmbed videos in WordPress on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

The result is version 0.1.2 of my progress bar plugin. It’s somewhat basic for now, but I have plans! For now, you can manage your progress bars and include them, using shortcode, into posts or pages. There are some basic settings to control colors and whatnot, but that’s about it. In the near future, I hope to add the ability to pull the current progress of any public GitHub project using their API and it would be nice if I could do the same for Trac (though I’m not sure it’s possible…).

Get TDD Progress Bars

--------- Thanks for reading Post showing off this bar on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Here’s the deal: I wanted to add a submenu to an existing custom post type. Right away, when creating a custom post type with public or show_ui set to true, WordPress will create a new top-level menu item, with a submenu item of “Add .” I wanted to be able to hook into that, and add a new sub-menu item called “settings”

Already in the plugin, I had created a custom post type:

register_post_type( 'tdd_beans', 'tdd_beans_register_post_type' );

The details of my beans post-type are unimportant. What is important is the handle. In all cases, it’s the first parameter that you pass to register_post_type() — in this case, beans.

function tdd_beans_menu(){
	add_submenu_page( 'edit.php?post_type=tdd_beans', 'Beans Settings', 'Settings', 'manage_options', 'tdd-beans-settings-menu', 'tdd_beans_view_settings' );
}
add_action( 'admin_menu', 'tdd_pb_beans_menu' );

The add_submenu_page() function takes these parameters:

1. $parent_slug: The magic is that it requires that whole edit.php whatnot in order to work. At least right now, although I believe that may be a bug in WordPress. Future versions may only require the slug (tdd_beans). In any case, it’s the slug for the parent page
2. $page_title: This is what goes between the <title> tags
3. $menu_title: What shows up in the menu (keep it short)
4. $capability: This maps to a WordPress capability that will be required to access this sub-menu. It should probably map to whatever the capability is for your custom post type. Sub-menus will continue to display even if their parent menu is unavailable due to permissions
5. $menu_slug: Put your own menu slug here for referencing this menu item elsewhere.
6. $function: Lastly, this is the function that will echo stuff to the page.

function tdd_beans_view_settings(){
 echo '<div class="wrap"><h2>Hello World (inc. beans)</h2></div>';
}

--------- Thanks for reading Adding a sub-menu to a custom post type on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

]]> http://websitesthatdontsuck.com/2011/11/adding-a-sub-menu-to-a-custom-post-type/feed/ 0