Category: How It Is

Making philosophy about the why behind technical things.

A New Utility
I’m more like Brian Gardner than I care to admit.

I’m often dissatisfied by the feel of a site, my own included, and for a long time I’ve been ‘not quite right’ with the theme here on Half Elf. Oh, sure, it works, and I love the open whitespace, but … I wanted something else. Since I spend a lot of time looking at other sites, and especially Genesis Theme Devs, I had a vague idea of what I wanted. Even if I have no plans to change my site (and frankly I never plan this stuff) I want to be able to help people when they say “I want a theme that does this!”

My checklist:
- Less cartoony
- Font Icons
- Easy to configure front page sections
Begin the hunt!

This was a close race. I’ve been looking at the themes from Web Savvy Marketing for a while, and I was this close to taking one of those and editing it, when I thought “I don’t want a slider.” I will note that if the only thing bad I can say about a theme is that it has a slider, then that theme is doing something right. While I have an idea about that hunter theme or maybe Colin, none of them were quite right. They were all so close it hurt.

Then I stepped back and looked at my list again. Font Icons was easy, since I wrote Genericon’d after all, and everyone else had these photo backgrounds and neatly blocked sections that resized, and while I had something close, I kept screwing it up when I went to edit it. Maybe what I needed was something that stopped me from doing that?

I doodled out a sketch of what I wanted: Title, menu, welcome box, Call to Action section, list of posts. That’s pretty much what it looked like from the top down, so I needed to find a simple, direct, theme that did all that and let me jiggle the CSS if I wanted to.

Enter Carrie

There’s this awesome person I know, Carrie Dils. She fell into my web of friends when she had a horrible experience at a meetup a year ago, and was told she wasn’t welcome to speak because she was someone’s competition. When that post hit my feed, retweeted by a friend I knew and trusted, I remember spinning my righteous anger into full gear and asking this (then) total stranger for information so I could pass it on to the Official WordPress Meetup Peoples.

Before I did that, though, I read her posts (just to make sure she wasn’t on the wrong of this argument, hey, it happens) and found a delightful, intelligent, witty, and skilled theme dev. Themes! My Kryptonite! Carrie (perhaps accidentally) leveraged her situation into talking about collaboration at WordCamp San Francisco in 2013, and by that time she had ended up on my list of awesome people I want to hear from regularly about things.

So I thought I’d pop over to her site and see what she’d done with Modern Portfolio (oddly the same theme I was using here at the time). I liked what she did, but it wasn’t quite right for me. I wasn’t enjoying the three column latest posts, since mine kept goofing the alignment with different length post titles and excerpts. But what should my wandering eyes appear? A link to her theme: Utility.

It does what it says

Seriously it does exactly what it says. I picked a photo I took of a palm tree outside my office/gym earlier this year (which a friend was putting on cards for me for something else) and gave the green color a little kick. With built in button CSS classes, I was able to ditch my own and while I do have some of my own custom CSS going on, it’s because I have a couple plugins that need some extra love.

In the end, it worked how I wanted to, and fast. Normally when I change my sites, I get to a point where I say ‘Eeeeh, close enough.’ With this one, though, I spent about two hours (while working, so really maybe an hour) moving widgets around, replacing a couple plugins, and then I said “Oh. That feels right!”

This was, I feel, a choice that was well worth the work.
25 December, 2013
On Beyond Shared Hosting

This comes up at almost every WordCamp or Meetup I go to. “How do I know when I’ve outgrown Shared Hosting?” In general, my reply is “When you’re really unhappy with your site performance, and you know that you’ve done everything right.”

For the vast majority of users out there, Shared Hosting is just fine. Even when they don’t really understand what Shared Hosting is (and if not please read Entry Level Hosting), they know this much: The site runs. And you know… that’s pretty much all most people care about. There’s absolutely nothing wrong with that. However you know that you may have outgrown shared when your site starts performing badly.

When I tell people this, they generally get pretty shirty with me. They tell me it’s the host, because this doesn’t happen on another host/localhost. In absolute fairness, sure, it could possibly be the webhost, however that’s like say your car is the only reason you get poor gas mileage. You have to consider the way you drive, the traffic you drive through (city vs freeway), the weather, and of course, the gas you put in. Where people are throwing these arguments are usually because they actually haven’t done everything right.

We’ve all done it wrong.

I’ve written code wrong before. Functional, yes, but really bad. I’ve given bad advice before. It happens. The point is that you never do things 100% correctly every time, which means the odds are against you having done absolutely everything right for the situation you’re in at that moment. And there’s the rub, isn’t it? What’s the situation? Did you study it correctly? Did you understand it right? Did you test your theories? Most of all, did you remember your server’s a special snowflake?

Accepting the fact that the cause for our sites being slow is us being wrong is not easy. But the truth is this: Your choice of hosts, plugins, themes, and features is why your site runs the way it does. And if that all adds up to ‘slow’ then you’ve made some miss-steps. Once you’re okay with that, you can make progress. Let’s do it right! This very basic step starts with being tough on yourself. Get rid of plugins you’re not using, or don’t really need. Make sure your theme hasn’t bloated itself with a million options you never use. Heck, see if anyone’s done a review on your plugins and themes. Try alternative plugins and themes. It’s always a possibility that the synergy of plugins you’re using are causing weird slowness issues that are only evident when they’re used together.

On general rule I have about shared hosting is that if I have to bump my memory for PHP over 128M, I’ve got a problem. A decent, clean, site be it WordPress or anything else, doesn’t need that much memory. If my plugins and/or themes make me use that much memory, then they’re a bad combination. The other thing to keep in mind is they may be a bad combination for how your site works. Like caching plugins, for example. I actually crashed my sever using one, because I was getting so much traffic and almost everyone left a comment, so the cache was flushing pages at a crazy fast rate. Turning off caching made it run slower, but more stable, and eventually lead to why I ended up on a VPS.

What’s a VPS anyway?

A VPS is a Virtual Private Server. It’s a weird concept, I know. A shared server is an apartment building, and a VPS is a condo. Where with shared hosting, you pay for room on a server that shares all its resources. That’s why you can have problems with noisy neighbors. If someone’s using too much power, it can blackout the building. A VPS is not just space on the server, it’s also an isolated mini ‘server’ inside the real server. So you can reboot without affecting anyone else, or install new resources and apps without sharing them. Your stuff is more separate from theirs. We call these ‘slices’ and a VPS is your own private slice.

Back in the day, I switched to a VPS because after doing the math, I realized I would spend the same amount hosting 4 sites on shared hosting as I would on one VPS. After six months, I found out how smart a move this was, as I could upgrade PHP without having to wait for everyone on my box to be ‘ready’ for it. The box was all me! I also got more memory for use, and since I wasn’t sharing it with anyone else, if I used too much and crashed things, the only person who got hurt was me!

A VPS was power, freedom, and yes more money, but it was easy to set up server-level backups. Also it was easy to add in extra caching on the server, like x-cache, or memcached, which then lets me use not a flat-file cache but a dynamic cache like Batcache. There are, of course, reasons you may want a file-cache like WP Super Cache provides, and don’t think that plugin isn’t awesome. But when a static cache isn’t quite right, this is a great idea. You can read up on Sivel’s review of various caching plugins for WordPress.

The point here is that a VPS gave me more options! I could even install Varnish on my server to use that instead. It’s also easier to add more RAM to a VPS, and allocate disk space. For most of us, disk space is not an issue anymore, but the RAM is important.

How do I KNOW I need a VPS?

Honestly, there isn’t a magic formula. I can tell you this, with regards to all types of CMSs: The more you do, the more you need. It’s really obvious, but it’s often missed. The more successful your site gets, the more people visit it, the more people comment (and you know these are all things you want), the more memory and CPU your site needs, so a-VPS-ing we shall go. It’s really like ‘How do I know I need new pants’ isn’t it? My pants don’t fit! They pinch me here or there. They’re slipping if I don’t wear a belt, and I hate belts.

Maybe you should think of the traffic on your website like eating. If you overeat once, say Thanksgiving, the pants are tight, but a couple days later it’s nothing at all. If you’re eating a larger amount for another reason (working out, growing taller, whatever), you’re going to have to get new pants after a while, because you just look silly when your pants end 3 inches above your ankles. Unlike the Hulk, you’re not coming back down to person size any time soon.

There is something good in this, though. Most sites have a pretty easy, painless way for you to move from shared to a VPS. They’ve got scripts and tools and click-magic buttons that toss your site up, change the DNS settings, and carry on.

Downsides?

You know the more power means more responsibility line? The expectation is that I’m going to manage it. If I can’t do that, then maybe I should look at Managed Hosting… but that’s another post. The managing of a VPS is a hassle. I’ve been in tears rebuilding things at 2am more than once, because I get in over my head.

So… that’s it?

Of course not. But as with all things, nothing is an absolute here. When you get beyond Shared Hosting and into what’s next, you open a door for a wide range of possibilities. And with more possibilities you have a Seussian range of options. Go on beyond Zebra and find what fits right for you.

23 December, 2013

Dashicon My CPTs on the Dashboard

To extend on what I said about how my custom post types are in mu-plugins, and knowing that I like MP6 a lot, I thought I should share how I style my icons for CPTs!

First off, the code to add tables has changed totally so I made this simple look to go through my CPTs (ebooks and plugins) and for each one, make a new item, and add that to dashboard_glance_items:

    // Adding to Right Now
    	add_action( 'dashboard_glance_items', 'halfelf_right_now' );
     
    	function halfelf_right_now() {
        	foreach ( array( 'ebooks', 'plugins' ) as $post_type ) {
        		$num_posts = wp_count_posts( $post_type );
        		if ( $num_posts &amp;&amp; $num_posts->publish ) {
        			if ( 'ebooks' == $post_type ) {
        				$text = _n( '%s eBook', '%s eBooks', $num_posts->publish );
        			} 
        			if ( 'plugins' == $post_type ) {
        				$text = _n( '%s Plugin', '%s Plugins', $num_posts->publish );
        			}
        			$text = sprintf( $text, number_format_i18n( $num_posts->publish ) );
        			printf( '<li class="%1$s-count"><a href="edit.php?post_type=%1$s">%2$s</a></li>', $post_type, $text );
        		}
        	}
    	}

Next I added in an extra function to the bottom of my CPT page for the styling:

    function helf_cpts_css() {
       echo "<style type='text/css'>
               #adminmenu #menu-posts-ebooks div.wp-menu-image:before, #dashboard_right_now li.ebooks-count a:before {
                    content: '\\f311';
                    margin-left: -1px;
                }
               #adminmenu #menu-posts-plugins div.wp-menu-image:before, #dashboard_right_now li.plugins-count a:before {
                    content: '\\f237';
                    margin-left: -1px;
                }
             </style>";
    }
    
    add_action('admin_head', 'helf_cpts_css');

No, really, that’s it. The content info is grabbed from Dashicons and I’m done. Oh and since there’s no book icon, I used dashicons-welcome-learn-more instead. This works for anything I chose to put in Right Now or my menu, so I have consistency.

20 December, 2013

Get Sassy
I was lucky enough to corner Tracy Rotton at Contributor Day and bully her into a private “Sell me on Sass!” Class while we were both at WordCamp San Francisco. I’m a hard sell on something ‘new’ not because I hate change, but because I don’t see the point to learn something new in order to do something I’m already capable of doing. But that said, CSS and theme design aren’t my ‘thing.’ I can muddle through, but I don’t love them like I do writing.

In order of my WP skills it goes like this: writing, support, debugging, plugins, themes, databases. See how that goes? So I knew Tracy was big on this stuff, and I realized I had a perfect opportunity to get someone to explain, in a place where I could go “But why do I care?”

Why do you care?

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and a ton of other stuff. For me, the nested rules earned an unimpressed face. Testing things in a ‘new’ way means I have to re-learn how to do things. And being able to define ‘font color black’ and use variables so I only have to change one thing is useless, as I’ve mastered grep and regex. Tracy laughed and then pointed out I could have Sass do the math for me.

Full stop.

If you’ve spent any time designing responsive themes (which most of us do) then you’ve probably run into the extended math part of CSS where you have to calculate font sizes, relative to each other, and then you have to sort out the percentages to make the width and height right and.. Well, I went and read Tracy’s post about saving time with sass later and felt way smarter for it.

But we’re still back to the fact that I don’t theme. It’s not me. So I had all this info and sat on it for a while. In fact, months. I started writing this post during WordCamp San Francisco. Next month is WordCamp Las Vegas. It’s pretty much been half a year.

What changed? MP6, or rather, the removal of MP6 and introduction of it as a core part of WordPress 3.8. Suddenly the plugin was useless. Less than useless, it broke display. So I looked at my options. I knew they were working on a plugin to bring the MP6 styles back, but right now they didn’t have my favorites and I really don’t like all black. I ripped open MP6, pulled out the color-schemes folder, stripped down the colors.php to just the part that added in more options, and thought I was done.

I was wrong. It looked ugly. It didn’t match, it was broken. And there was only one thing left I could do. It was time to get sassy!

What you nee to do this is a Sass ‘App’ – Now Coda 2 lets me edit Sass files directly, but not compile, so basically I have a nice highlighter. Booooring. There are plugins for this, and installing stand alone Sass compilers on my mac is as easy as $ sudo gem install sass which lets me then convert my file ala sass-convert style.css style.scss and now I have a sassy file! The other option, and this was where I ended up, is CodeKit.

Yes, I could use Grunt, Tracy, but I want to learn one things first, understand it, and move to the next. Grunt? Yes, I need to learn it. But right now, my need was to take five scss files and convert them into the right name css files.

What it looks like is plain weird. A scss file is weird. It’s this:
```
$base-color: #523f6d;
$icon-color: #ece6f6;
$highlight-color: #a3b745;
$notification-color: #d46f15;

$form-checked: $base-color;

@import &quot;../_admin.scss&quot;;
@import &quot;../_colors-fresh.css&quot;;
```
And then it looks like this:
```
@import 'variables';
@import 'mixins';

 {
	background: $body-background;
}


/* Links */

a {
	color: $link;

	&amp;:hover,
	&amp;:active,
	&amp;:focus {
		color: $link-focus;
	}
}

....
```
Oh wait, it also has this! … No, wait, that won’t work. It kind of goes on like that for a while, like Russian Nesting Dolls, or a TARDIS. But in essence it let me make files where I could define what the CSS became. One file is my ‘define’ file, that was the first one I showed you. The next was my _admin.scss file, which had two more includes and a mess of what looks like CSS, if CSS had variables (which you know it doesn’t).

Look. I can’t, and won’t try to explain Sass. I’d do a crap job, worse than you think I’m gearing up for here. I’ve only been seriously playing with it for about three hours. But in those three hours I went from unimpressed (I’m a hard sell) to understanding. I was able to generate fancy CSS files without have to search/replace. All I did was make a new define file, tell it to output into a folder, and I had my Ectoplasm back.

Will I be using this a lot? Maybe. I can’t say I feel it revolutionizes theming for me, and it won’t for a lot of us. When don’t need to be able to spin up more CSS like this, CSS is something that generally remains static. It should, in my opinion. But the point would not be on the fly fix CSS, but to build out ‘themes’ of CSS. So perhaps for Brian Gardner it might change his world (hi, Brian).

You see, every Genesis Theme comes with color ‘choices.’ Usually these are green, blue, orange/red, and purple. Imagine being able to spin up your own by making one small file, generating the CSS from that, put it in a folder in your child theme, and you’re done. Heck, if someone wanted to get really sassy they could make a plugin that would pull in special Genesis files and folders from your wp-content, much like we have a languages folder today.
```
wp-content/genesis/themename1/color-style.css
wp-content/genesis/themename2/color-style1.css
wp-content/genesis/themename2/color-style2.css
```
And so on. That could dynamically be searched for by Genesis and add in more color themes as desired. This way, I can make new styles for my theme without needing a child theme at all, or another CSS editor plugin (which is what I use today – this site is customized by mostly CSS).

But. As Otto rightly points out, this over complicates things. Can’t I just search and replace blue for teal? Sure. But having the scss in the first place means I can look and see the four places I’d need to adjust colors to make it work. Or ten. So I can very quickly spin up a custom design, and I can tuck it away where my client won’t break it.

So no, while I like Sass, and I think it’s incredibly interesting, I’m not really sure that adding code to CSS and requiring compiling will be needed for everyone. Where it’s a major selling point for WordPress core is easy to find. It lets them easily break apart the massive admin CSS files into sections, edit one at a time, and then on ‘build’ pull them all into one file, so we don’t have messy @imports all over the place.

So it’s a good idea for me to learn Sass I suppose. And Grunt. Grunt is next.
18 December, 2013
Sometimes The Answer Sucks

I’m good at what I do. I’m really good. I’m an expert, and I’ve rarely run into a WordPress site I couldn’t fix, or at least get back to usable. This doesn’t mean I can code everything, but it means I can take a broken site and get your content back. I can’t, however, perform miracles all the time. You saw how I said ‘rarely’ right?

The real issue here is that sometimes the answer I give people is a horrible, terrible, sucky answer.

While Montgomery Scott always saved the day giving the engines more power, and skipping through the Jefferies Tube like the most bad-ass red shirt in existence, the sad reality of life is that sometimes we can’t save your website. If we can’t figure out why it broke, we may not be able able to fix it.

For example, a site suddenly lost all the plugin settings. They were just gone. Poof. No one had done anything, so the obvious cause is the database having a snafu, right? Well no. The DB was checked, everything seemed in order. We tried a restore, no-go. At that point, the only thing I could tell the person was to re-apply all the changes again, manually. The user was pissed off and it’s totally understandable why! I was pissed off. I couldn’t solve a problem and yes, when I can’t solve things, I get very upset with myself. And I was upset that the answer was so sucky! Redo your hard work? What a crock! But no matter what I did, no matter how I tried to pull the settings back, I was just getting further and further down that rabbit hole, and I knew I absolutely had to cut my losses.

In all likelihood, someone did something without checking it was right and without making a backup first. This happens. We know we shouldn’t mess with ‘production’ but we all do it. So that means sometimes we’re really reckless and we shoot ourselves in the foot without protection. While we can, and do, try really hard not to be stupid anymore, accepting that you (or perhaps your captain) has made a boneheaded mistake is really important. Equally so? Accepting that cleaning up that mistake may not be the answer we wanted to hear.

No one wants to hear ‘Start over.’ That’s pretty much a given. And yet we’ve all done it before. When I studied music, the number of times I had to start over because I’d made a mistake is uncountable. When I was learning to connect pipes in plumbing? Oh I ripped things out a hundred times before getting it right. I even restarted this entire blog post a couple times. And that’s not the only time the answer sucks. You changed user roles and capabilities and now you can’t log in? Congratulations, you get to reset them and start over.

I could go on with example after example of things we do, without realizing how dangerous they are, and how much trouble they get us in, but I suspect the point is made. We do amazing things to ourselves and can’t always fix them. Should you be upset when it happens to you? Of course. And should you be annoyed when you didn’t do anything and they break? You bet! But ….

Your website is like a car that’s always running. Eventually something is going to break, and when it does, the only hope you have of salvation are your backups. Everything really comes back to that, doesn’t it? I deleted the wrong table in a DB and had to restore the whole thing from the day before. Lost a day’s work. Nothing to be done to fix it but that. I had a file, for no reason I could see, go corrupt and refuse to let me edit it. Thankfully the backup was the version I wanted to edit, so I deleted and re-uploaded and moved on.

These things will happen.

The answer will suck.

Decide if you’d rather spend your time complaining about how it’s sucky, or if you want to knuckle down and get to work.

Or drink scotch.

13 December, 2013
Presentations Are Not Transcripts

After my review of SEO Slides (they’re pie, not cake), someone remarked to me that my slide decks are useless because I don’t put all the information on the slides. They pointed out, correctly, that my slides are image heavy with, at most, a couple lines of text (with one notable exception: WordCamp Chicago 2012), except my ‘Who am I?’ slide. I told them “Yes, this is true.” and then Tweeted about it.

My belief (and this is shared by a lot of people) is that slides should accent and relate to my talk. If you just need to read the slides to get all the information, why am I there? Coming to a live presentation to just watch someone reading off slides seems counter intuitive to me. Heck. I could go pester my coworker and get the studies showing that when you have a slide with a lot of text, people read the text, then look at you. That means that they aren’t listening until they read, and if, when they’re done, they come to find you’re just reading what they read? They’re probably bored.

When I give a presentation, it’s usually on a topic I’ve written about before. Actually, that’s generally how I decide what I want to talk about! I picked “Don’t use WordPress Multisite” for WordCamp SF 2013 because it is still, to this day, the most popular post on my site. And it’s my most popular presentation. Some may ask “Why would you give a presentation on something I could read?”

People learn in different ways. I, personally, suck at learning from videos. However I learn well from presentations in person, where someone talks to the room, pays attention to our energy, and teaches, using the slides as an emphasis. I also learn well from a written post. Finally, I learn best by doing things. So for me, if I’m blowing up a site, it means I’m learning in a speed unparalleled. There’s a converse to this, and if I hit a blocker were I can’t do something, I get really upset.

What does this have to do with slides and why mine are mostly pretty pictures with a sentence for emphasis? I don’t write my slides to be a transcript because I’m going to write a much longer blog post on the topic, with the same pictures probably, if I haven’t already. So for the person who wants to read the content, I’ll have you covered. And for the person who wants to be inspired by looking at slides? Well I have that. Finally for the person who wants to watch a video, WordCamp does that for me, thankfully.

This is not a perfect system, of course. Like I said, people learn in different ways, so there’s probably someone out there who loves slideshows of text on pictures who is grumpy. They probably also like infographics. Which I don’t. You see a trend here? I don’t like getting my information from pictures. Because of that I suck at writing them, so I just don’t.

11 December, 2013