Tag: design

Bad Code
You can pick your friends and you can pick your code, but you can’t pick your friends code.

I said that to Michelle as we were walking from WordCamp Minneapolis, kind of as a joke, but then she looked at me and said how appropriate that was.

Sometimes the people we like and rely on code things in ways we think are a little insane. Here are the things that make me sigh a lot when I look at the code. They’re not always bad, but they do make me wonder what people were thinking.

Hidden

Someone wrote a plugin where the options were called via a base64_decode() from a compressed storage:
```
#default settings code
$options = '1VtPj-smEP8qKz2pt0qJs5vs7ju29_bQS08WtolD1zYp4M3mPfW7F2yDwWAPPK0q9erMj_nDzDAzEPSaHbLX7_x1n73-9HdPxdeK8GuD7nlDazp--cpfd9OP5sPz9EFR5T1r1in3O5v0Ripx2SDe28QXTOqLiKWWUuSXaoP6caYmXR4huV7-jN5JSTuA-mn6wgUp3-4x6z-HEdtanAIgyKohRqBx9ZcO3_Irw2fyEcFBETeowE1O3zFjpMIRG6JAgrT4ihmhMTuIOtTcpS48L-kmB_2l7...';
```
At the risk of sounding like the US government, there’s no reason to hide your public code. Knock it off. It’s public. Hide the service code if you must. Keep your serviceware code on your own data. But hiding code someone can download and decrypt? No, you’re shady.

Nesting

The plugin basically was one thing: add_filter('show_admin_bar', '__return_false');

But the plugin setup was /hide-admin-bar/hide-admin-bar.php which included a file /lib/bar-settings.php which in turn included /lib/false.php

Three files. One line of code. Why? Why!?

Inconsistant

I don’t mean tabs vs spaces. I mean with names. Like having add_menu_myplugin() and myplugin_settings() and then sanitize_myplugin_value() and finally double_check_myplugin() — Sure they all have ‘myplugin’ in there, but they don’t have any rhyme or reason to the names.

Names should be consistent and descriptive. A good function name should tell you what the function does.

Echo

I see this one a lot. People using ‘echo’ on every line in a function call in order to output their results.
```
$my_count = $whatever->my_count;

echo '<h2>Hello World</h2>';
echo 'This is a cool thing!';
echo 'This is even more cool. This is '.$my_count.' times cool';
echo 'Ain\'t this cool too? But I have to escape my apostrophes.';
```
Besides the fact that it looks ugly, it’s created more ‘data’ in your code. There are easier ways around this and ones that are more readable.

What Do You Think Is Bad?

And remember, we’re not talking about code that’s outright wrong, we’re talking about the things that work and are right, but make you cry “Why!?!” like Nancy Kerrigan.
13 July, 2015
Editing Content In Ghost Rocks
You may have noticed based on tweets that I’ve been using Ghost daily (mostly) for a little while now, trying to get a feel for it vs WordPress.

You know what? With the exception of wanting to kill people while I was installing it, I really, really, like it for simple blogging.

The editor is a delight, plain and simple. It’s fast. Super fast. There’s nothing dragging it down man. Which ironically is where it loses.

You see, there’s no extendability. It’s like the Old Days of WP, where I have to edit a theme to make widgets. Oh and no apps right now.

Not to mention the drama of installing. It sucks for self hosted. This continues down to installing themes (sucks) and apps (non-existent). You have to reboot the Ghost ‘node’ after every change too. This is not tenable for most people and highlights the need for apps. Oh. Yeah. Apps are a thing that Ghost needs, stat.

Right now, they’ve added in a way to add code to your header and footer without needing to edit themes, which means I was able to put in my Google Analytics code easily.

Ghost is Ghost. WordPress is WordPress. For what I do, WP is right. For plain, simple, blogging, Ghost is good except for the Markdown aspect. I’ve got the hang on it, but it’s been nine years and I doubt it’s ever going to be ‘the thing.’ HTML wins for many reasons.

So what do I want from Ghost into WordPress? That damn editor! Seriously.

The content on the left and preview on the right is great. It live updates and I can see what things look like in the Visual editor while having full code control like the HTML editor. In addition, there’s no place to put in the tags or featured images or anything other than content. Until I click on that gear.

That is slick. And it works great on mobile too. Compared to the fade out and off center DFW editor in WP, which is pretty great, it’s awesome.

Of course I looked at the available plugins for WordPress

Gust Plugin – This looked great, but it doesn’t work on Multisite. On WP 4.2 it threw this:
```
Fatal error: Cannot redeclare get_avatar_url()
(previously declared in
/wp-includes/link-template.php:3414) in
/wp-content/plugins/gust/gust.php on line 202
```
Then there’s Splitdown – Not updated in a year and also errors:
```
Parse error: syntax error, unexpected T_STATIC,
expecting &amp;#039;)&amp;#039; in
/wp-content/plugins/Splitdown-master/Splitdown.php
on line 19
```
Finally we get to PrettyPress – This isn’t a ‘Ghost’ plugin exactly but it makes a second ‘editor’ you can flip into. No save button there, but as an editor it’s rather nice.

At this point, I’m resigned to not having that kind of slick editor in WordPress. I do think it’s a nicer direction than ‘distraction free’ as it’s actually fewer distractions. All I see is my content and a preview.
20 May, 2015
Mailbag: Facebook Page Notifications

A family member, after teasing me for not knowing someone was married because the only place they announced was on Facebook (and Shredder? You’re not off the hook either), finally asked:

Why do you still hate facebook?

Because the interface is inconsistent and sucks. Let me explain by showing you about my Page Notifications.

I still use Facebook under duress and happily go weeks without noticing I have alerts waiting. When I do remember to check in, this is usually my first clue I have that there are unread notifications:

If I click on the group, the toolbar at the top of the page gives me a much better idea of what’s going on:

So I logically click and I get this:

I don’t like that I have to click three times just to see my notifications. Yes, I can click on that teeny-tiny number to go to the page properly and wipe them, but what if I don’t want to? Also have you noticed how small the number is? It’s hard to hit if you’re not ‘great’ with your mouse. Guess what I’m not? Great with my mouse. I like larger icons because they’re easier for me to tap. I’m not the only one.

The next problem is the text color. It’s not really all that distinct. It changes to a useful red/orange on other pages, but the subtle grey on blue grey, combined with the size, makes it weird. Compare it to the alerts you get for unread posts in your timestream, or personal notifications:

Clearly their goal is to keep me on that front page (which is obviously why they swap my ‘recent posts’ to ‘top posts’ every chance they get). But even then, once you click on the item, the number goes away but the items are not marked as read. You still have the mark-as-read buttons, which are not very noticeable or distinct. In the case of a page, the number count on the sidebar goes away, but not the one on your toolbar or the notifications page. Welcome aboard the inconsistency train, thy name is Facebook.

Interestingly, this day when I clicked on the “Mark as Read” link, the number dropped from 20 to 1. But there was nothing else to mark as read. All the backgrounds went from pale blue to white, and there was no other indication as to how I might find what was unread.

Eventually I saw the sidebar:

There it was. I hovered over it, clicked ‘Mark As Read’ and that number went away. I had to refresh the page to make the orange alert go away, because apparently that level of Ajax is hard.

My conclusion is pretty simple. Facebook wants me on the main page of their site, my timeline, all the time, and that’s fine for a user. But in doing so, they’ve made administration of their pages and groups overly complex and inconsistent with the rest of the flow of their site. They want me to add in content, but they’re going to decide how I, and others, consume it, which means my ability to easily input and manage is secondary (or even tertiary) to their consumer design.

The pages and groups are a nice idea, but still ill planned for a ‘MySpace’ replacement. The only reason that even worked was because MySpace blew up on itself.

3 April, 2015
Themes Suck

“I need help finding a good theme!”

No question will make me want to run screaming more than that. Not even the dreaded “Should I use Multisite?” question is as bad as that one, because picking a theme is hard!

I mentioned to my coworker that it’s like trying to find a needle in a pile of tainted needles and the reason is really simple. Themes are ‘easy’ to code and hard to find the right one.

A theme is personal

What you think looks good is different from what I think looks good. I love larger fonts for readability, but at the same time I don’t like too much whitespace. I don’t want an overabundance of clutter, but a single column isn’t always what I think looks ‘good.’ I’m fond of a sidebar. I also like certain color schemes, like aqua and blues and greens, but not others like yellows. That means I’ll want a theme that either matches my colors or lets me change them easily.

I need to know what you like before I can help you out.

A theme meets your needs

What you need out of a theme is different from what I need. You may need things for custom post types built in. I don’t. I may want a grid layout for content. You don’t. What you need is very specific to your vision of your site, and picking out a ‘good’ theme to match that isn’t easy. But you have to know what you need before you start to pick out a theme. Asking me ‘what’s a good theme for my comedian website?’ is not a simple answer. What do you want to do with it? Do you want to sell things, show your gigs, blog, have a survey?

I need to know what you need before I can help you find something.

A theme will cost you money or time (or both)

What you can do and what I can do are different. I hate coding themes. I am happy to pay the right people to do it for me. That said, I’m happy making a child theme or forking a theme, or using a plugin to extend it. I’m willing to spend money and time to make a theme suit me, because I look at them and get ‘most of the way there’ with pretty much all themes. No theme has ever been 100% perfect for me ever, but I think that’s okay. A theme that is the right shape will be enough, provided I can extend it (or pay someone to do it). I may need support, and I need to make sure I get that, so if I pay for a theme, I want to know how far down the rabbit hole they’ll go with me.

I need to know your budget before I can point you to the right place.

A theme represents you

Who you are and who I am are different. This is the most wibbly-wobbley part. Your theme shows off ‘you.’ If you, like me, have issues visualizing that, it’s hard to find the right theme except to say “You’ll know it when you see it.” But understanding yourself, your likes and dislikes and the aspects of you that you want the theme to show off will help you pick the right theme. You may not know it all to begin with, but start making notes. When you see something you love, think about why you love it. When you hate something, do the same. Make a list of what you love and hate, what features make you wince and which ones you crave. Understanding why you make those visceral reactions to a theme helps you understand you.

You need to know who you are before you ask anyone to help you find a theme.

Why do you love (or hate) suggesting themes?

Do you feel like I do? Let’s hear why!

29 December, 2014
Including Assets

I’ve noticed a trend in plugin reviews that people are including third party assets with their code.

This is great. Heck, I do it on a couple of mine. Why should I reinvent the wheel when I’m including code? If I need to use some existing code like a GPL friendly lightbox file, I’ll just grab Colorbox and be happy. But have you ever really looked at your assets?

The above image shows you all the files and folders included in Colorbox. If I was including the entire git repository in my plugin, it would take up about a meg of space. The unminified js file is only 29 KB. For me, it’s a no-brainer again. Grab just the js file (making sure the header has the license info and the URL) and toss that in my code. Why would I include a meg of data I’m not using just for the ‘ease’ of a git clone?

And really I think that’s what’s happening. We’re all so excited to use a git pull or a submodule for the ease of inclusion, we stop thinking about exactly what we’re including in our code and how much weight we’re accidentally adding to it by dumping the whole library in there. Some libraries, like Complexify are really small. Then you have Twemoji, which weighs in at 135 MB, give or take.

Do you really need the whole thing in your plugin, or can you just call their JS remotely from their CDN? That’s one of those things I’d certainly recommend for most people. Sure, I’m the biggest complainer about people off-loading code, but I also am reasonable and logical. Having everyone load a 130+ meg plugin isn’t sustainable, when Twitter’s made a nice way to do it remotely. That’s a service like a font that’s okay and understandable. After all, I hate that WordPress has to call the new fonts on the dashboard from Google, but at the same time including all the fonts for all the languages would make WordPress 11 megs more. That’s just crazy.

Mind you, I had the shower idea that we could make WordPress download the fontpack when it downloaded the language packs, but we’re not anywhere near that yet. Still, that would kill two birds with one stone in my mind. It’s also illustrating the point of being thoughtful and reasonable about the assets we include in our plugins. You don’t need all the documentation files for a js plugin or most php ones either. It’s certainly easier to just drop the whole package into place, but it’s not always best. If one of those example files has a vulnerability, great, you just shot your user base in the foot.

Limit what you put in your plugins. It’ll be easier that way.

21 November, 2014
Why I Like Font Icons
I really like Font Icons and I’m willing to bet there was a period of time you did to, way before we had the Internet on our phones. Do you remember Wing Dings?

When I was a kid they were awesome. We used them to print up secret code letters in the ’80s, using the basic letter shift kind of cypher. Wing Dings is, at its heart, a font icon. This means it’s a font that uses shapes instead of letters, but unlike Wing Dings where I could type “cat” and get “hand arrow flag”, a modern font icon has special content terms like “f401” that you use instead. Of course those are hard to remember, and we all like to use shortcuts, which I’ll get to in a second.

The reason I love them is that I am a monkey with a crayon when it comes to design. Did you ever try to make an image that, when you rolled the mouse over it, it changed color? Like the official Twitter image you wanted to spin when the mouse hit it? We used to do that with images, CSS sprites, and combine all the images into one large image, load it once, and then with the magic of CSS have different bits load at a time. Sprites and Bitmaps can do that, but adding in new icon to the set took time and Photoshop and if you’d lost your designer in the meantime you were out of luck. Font icons lower the bar and make it easier for everyone who can’t design.

Font icons are easy to style. You can resize, recolor, flip, shadow, and apply rollover effects with just some basic CSS. They also scale well which means they were pretty much born for retina. No matter the size of your device or the quality of your screen, the font icon will never look jagged and blurry.

So how do we use them? It’s only three steps and the third is beer. Seriously, though it’s really that simple. Include the font family, just like you would a google font, or do it locally. Call the icon, show the icon.
1. Include the font in your site
2. Call the icon you want with the span html tag
```


```
3. Drink a beer [ficon family=FontAwesome icon=beer color=brown size=3x]
That beer is a font icon by the way.

There are plugins, for most of the popular ones, that will let you insert using shortcodes. Those are easy to use for when you want to put an icon in your post content. I wrote two of them, Genericon’d (which brings Genericons to your site with shortcodes) and Fonticode (which lets you apply shortcodes to most of the major font icons, provided they’re already included in your theme or another plugin). But wait, there’s more!

As I mentioned, you can use them in CSS, and by that I don’t mean you can style them. What I mean is you can use CSS to call a font icon and put it in a menu, which is a little trickier since you need to use the before call, and that is a little weird. I talked about how to do this before in ShareDaddy Genericons (which is now useless since Jetpack went and did that for everyone) but the point is that you have to mess with CSS and it looks like this:
```
div.sharedaddy .sd-content li a::before {
 font-family: 'Genericons';
	font-size: 16px;
	color: #fff;
}

div.sharedaddy a.sd-button>span {
 display: none;
}

div.sharedaddy .sd-content li.share-twitter a::before {
 content: '\f202';
 color: #4099FF;
}
```
As an example, this is a pretty basic one. The magic sauce here is that I say “Before all my links, use the font family Genericons with this size.” And then “Before Twitter, I want to show the content \f202″ That happens to be Twitter’s icon. The color I used is also the official Twitter blue. You can get even fancier and I suggest reading Justin Tadlock’s post on Social nav menus.

The obvious next question is where can you find font icons? Here’s a non-exhaustive list.
- Genericons
- Font Awesome
- Libricons
- Octicons
- Glyphicons (Halflings is GPL, the rest are CC and proprietary)
- Icomoon (free version is GPL, the rest are proprietary)
I will note that some of these are not GPL, so it’s on you to check the licenses for what you want to use them for. Like Glyphicons? You can use their Halflings font freely, but not the full Glyphicon pack. Similarly, Icomoon has a couple font packs that aren’t free and for full distribution, but does have one you can use. So please, please, be careful and be aware. You can use the non-GPL ones on your own site (most of the time) but you can’t package them in a theme or plugin.

Before someone asks, let me talk about Dashicons. That comes in core, so you don’t need to worry about including that. I wouldn’t use it on your site, since it’s meant for the WP Admin back end and nothing more and the size is a little off because of that. You can totally use it on your plugins. So instead of making an image, you can use a Dashicon to be the icon on the menu sidebar. This may one day change, but not today.

All this love doesn’t mean everything’s awesome. There are some issues, like how Icon Fonts Are Ruining Your Markup. And you should read Ten reasons we switched from an icon font to SVG for some great reasons not to. You also need to keep in mind accessibility, like screen readers, and for that check out Bulletproof Accessible Icon Fonts.

Nothing’s insurmountable, and the easy of a font icon without having to mess with GIMP or Photoshop or pretend I know what I’m doing with art is worth it all for me.
27 October, 2014