Author: Ipstenu (Mika Epstein)

I Love/Hate Font Icons

I really, really, love font icons and emoji. I love being able to express myself with an image. I delight in hearing Siri read me my latest text from my wife and say “smiling pile of poop” six times to inform me that the cats are being absolute shits.

But they have problems.

We use font icons because they scale well on different screen sizes, they’re flexible, they can be styled well, and they require only one resource to be loaded. For people like me, who are effectively monkeys with crayons when it comes to art or design, they’re perfect. I want Twitter in a theme? <i class="fa fa-twitter"></i> and done and done.

So what’s the problem? They’re not accessible. Oh you can make them accessible, but they’re not really easily done. Screen readers have a devil of a time with them. They’re also hard to add to. If I want to add a ‘new’ SVG icon, well I can just upload a new image and be done. SVG icons on the other hand have all the same benefits of font icons, and some more. But this isn’t to say that SVG is perfect.

As mentioned, adding new SVG icons is easy. Far easier than font icons. But that comes with a cost. Using them is not quite as obvious an intuitive as it might be. Just googling for ‘style svg with css’ presents you with a dizzying array of possibilities. This gets worse when you look into do what is (relatively) simple on font icons, like animation.

I’m not saying these things are impossible. In fact, you can do far more with SVG than you can with fonts. The problem is that it’s all still very dev heavy. Don’t believe me? Read Why and how I ditched icon fonts in favor of inline SVG. That post is something I agreed with every step of the way right until we hit this:

There’s a Ruby script that reads the optimized SVG files one by one and generates a Rails helper file with icon_xxxxx methods. These methods can be called from any view to insert the desired icon as inline SVG:

I have no problem with scripting solutions. I love them. They’re just not really simple-user friendly yet. A user knows “I paste a line of code in to include a font, I can use font icons with very little code.” By contrast, SVG is code heavy and comes with too many options.

Uploading an SVG icon to your server’s easy. You can’t do it in WordPress without a plugin to allow those media uploads, but if it’s in your theme folder it’s there.

Once you have the image on your server, you’ll want to call it. It’s an image but you don’t want to use IMG tags for this.

<object type="image/svg+xml" data="my-image.svg">Your browser does not support SVG</object>

or if I want to be clever

<object type="image/svg+xml" data="my-image.svg"><img src="my-image.jpg" /></object>

The idea is to have a fallback (see CSS Tricks’ complete guide to SVG fallbacks) so that people can see things if there isn’t an ability to show SVG because it was in an IMG tag.

In the name of security, browsers disable SVG script interactivity if you use an IMG tag. Interactivity means the stuff you want to do, like style it and make it move. Also some browsers won’t accept SVG in CSS if they’re in a separate file. Awesome.

There’s one other thing to note. SVG can dynamically create images on the fly.

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>

Hey look, ma! No image files! Check out HTML5 SVG from W3Schools for more.

The thing you may notice with these examples, though, is that they get more and more complex as I trip down the line. And when I want to start adding color to things, I end up looking at the <svg> code more and more, and I just don’t find it friendly.

So until SVG sorts out how to be a little dumber for people, I’m going to keep using my icon fonts and (as best I can) properly attribute them a best I can for accessibility, and wait for the future.

22 July, 2015
Internet Abuse

I try not to make this site about my personal grievances about people and attitude, and only about my code, but it does come back to code many times.

“I thought you knew what you were talking about. Never mind.”

That was actually said to me, about three years ago, when someone realized my name, Mika, was a woman’s name and not the male ‘Mike’ he’d thought it was. This was after pages upon pages of testing and debugging. The moment someone corrected him as to my name, and gender, he stopped listening to me. At the time, WordPress was my hobby, and so I decided he wasn’t worth my time anymore and walked away.

Then he followed me ‘home’ and emailed me saying women like me should stop trying to do tech support, and just find someone who knew what they were talking about. I deleted the email, blocked his email from my inbox and my blogs (using Sitewide Comment Control), and moved on.

If you need a reminder of the abuse and harassment we face daily, please read about the ping-pong theory of tech world sexism or No skin thick enough: The daily harassment of women in the game industry. In both cases, the content may upset you.

The problem is that I can’t tell you how to deal with people who want to chase you off the internet, and if you should or should not fight them. I can tell you how to prevent them from getting further into your life once you’ve decided that you’re done with them.

I talked about this at WordCamp Minneapolis earlier this year, and the steps to Detoxify Your Website remain valid. In fact, those are my best methods for self protection. I use them today, not just when people are mean to me but when I know I cannot be nice to them. Some people rub you the wrong way and you know you’re going to lash at them. It’s okay to prevent yourself from talking to them.

That’s how I deal with them.

Don’t Reply If You’re Angry

If I’m angry I tell them “Hey, you’re making me angry right now and I can’t talk fairly about this, so I’m walking away. I promise I’ll come back, but I need to cool down.” If they follow me after that, they get blocked and I don’t go back. Respect people who need to step back and cool down. If it’s not a situation where I have to reply, I reach out to my friends in the same arena. “Can you talk to this person for me? I’m too angry to be sensible.”

Set Boundaries and Stick To Them

I’m very firm about this with plugins. If I emailed you a plugin thing, like I had to close your plugin, asking me to update you on Twitter or Slack doesn’t actually do anything except annoy me. Yes, Aaron, we’re friends and yes, that still annoyed me. The real reason replies to plugins take time is that I don’t have a TARDIS, so unless you can invent one, it’s best to give folks at least 48 hours to reply. But replying to an email and then pinging me on Slack and Twitter is the equivalent of the phone call “Hey, did you get my email?”

I totally get that the subject is important to you. It’s important to me too. But you’re not helping me. So I draw a line and say “Hey, don’t ping me about the email. Reply to the email. I’ll read it and reply back.” That’s my boundary. I like it. It lets me cool down if I’m mad (see the previous note).

Don’t Feed Trolls

Lara Littlefield taught me a great phrase. “This makes absolutely no sense.”

To quote her:

I will reply “this makes no sense” to any comment that expresses misogyny or racism.

That’s my new reply. I’m using it. If someone drops into misogyny, racism, or anything of that ilk, they generally do it in a way that shows me they’re not going to listen. It’s like Godwin’s Law. Once you’re at the Nazi place, conversation is over and you’re not getting anything good about it.

That makes absolutely no sense.

Have People To Vent To

I bitch to my friends when I’m angry. I start with “I’ve very pissed off, it’s not at you, but I need to rant.” And guess what? My friends will let me bitch. They let me complain in language that is inappropriate and not well thought out. They give me a free pass to say horrible things. They let me get it all out. And then they help me be constructive.

You guys are pretty cool.

But it only works because I start with where I’m at and what I need. Sometimes they ask “Do you need to rant or do you want help figuring out what to do next?” Sometimes I don’t know, and that usually turns into “Rant away, Mika, and we’ll see what comes next.” Find those people. Keep them in your life.

Don’t Air Dirty Laundry

If you have a fight with someone, don’t plaster it all over the news. I’d say ‘and don’t subtweet’ but sometimes it helps. The real thing is that you don’t want to hurt your friends. Friends can be pretty vile to each other when we fight, so remember that you are friends, and try not to destroy things. Don’t blog post or comment about how so and so sucks. Don’t say the horrible things in public if you can help it.

You can’t go back from that.

The internet remembers.

20 July, 2015
Mailbag: I Lost My Site
Don from Worcestershire started an email in a way that normally would result in a quick delete:

Before you cut me off I am a 78 year old gambling historian, specializing in horse racing between 1850 and 2015.the age alone will convince you that my knowledge of this topic is limited.

It’s not the age, Don, it’s that the email starts with a long, dramatic, kind of non-essential story about your life, your ideas, your dreams, your goals, and your son. By the way, I’m sorry for your loss.

Yes, I read the whole email.

It took a long time to sift through the drama to sort out the issues.
1. Spam – He had a lot of spam and used Akismet (yay!) to deal with it.
2. Bandwidth – The spam made his site hit the overages on his hosting.
3. Domain suspension – Due to circumstances, he was late in paying his feeds and the domain was sniped.
I feel bad. I really do. But here’s the thing, Don. Your domain is like your rent. If you don’t pay for it, you lose your home. And while this sucks a lot, and yes there were mitigating circumstances, you didn’t pay in time, and the company is legally within their rights to sell. It’s the same as your phone. No pay, no phone. It’s just that simple.

Now I have good news.

According to whois records, you still own your domain! So you actually didn’t lose the domain you lost the hosting plan.

These are different things. They’re very easy to get confused.

There isn’t a great analogy to all this, I’m afraid, but as it works, you’re paying for two things.

First you pay for the domain. This reserves your ‘name’ on the internet. I recommend paying for it first for a year and then, if you like how things are going, pay for as long as you possibly can. I did mine for a decade at one point in time. I knew I wanted the domains and I knew I was using them.

Once you have the domain, you need to pay for webhosting. The host is where you data is stored.

Now I need to take a digression.

BACK UP YOUR WEBSITE OFFLINE.

If the backup tool you use only lets you backup to your webserver, it’s a shitty backup tool. Stop using it unless you are automatically downloading that backup somewhere else.

Because you see, Don, what happened was that you didn’t pay for your webhosting. You didn’t pay for the storage unit that housed your data. And they can auction that off like they do on shitty shows like Storage Wars.

So what do you do when this happens?

If it’s just the webhost, it’s easy. Contact the webhost. http://www.whoishostingthis.com/ is a great resource to find out who your host is. Be honest but keep it short. “I’m sorry, I wasn’t able to pay on time and my site was suspended. Is there any way I can get it back?” That’s it! That’s all you have to do. If you’re lucky, they may still have all your data. You pay, they flip a switch, it’s back.

The worst case … that’s why you need backups.

If it’s the domain registration, though, that can be a mess. If you bought the domain through your webhost, it may surprise you to find out that the host doesn’t have control over your domain registration. The host is an intermediary. That means, if you go to your site and see a placeholder page owned by a domain registrar, it may or may not be a cybersquatter.

You may have heard about domain hijacking or domain theft. That’s when someone changes the registration of your domain name without your permission. A hijacking is not the same as when you’ve failed to pay for your domain and the registrar slaps up a placeholder. A great many hosts put up a branded placeholder if you’ve registered a domain and not yet updated content. Sometimes it says “This domain has been registered at…”

If it says “This domain is suspended” then the issue is with the webhost. If it says “This domain has expired” then it’s likely to be the registrar. You need to figure out who the registrar is, log in with your info, pay the fine, and get the site back.

I strongly urge you to put a reminder in your to-do list or whatever you use to keep track of things. “Domain name renewal due on day X.” It’s like paying your rent. Don’t forget. Make reminders. Do it.

By the way, no matter whom you talk to, don’t give them the sob story. While they do care, in as much as any human does, it rarely changes the reality of what’s going on. Shit happened, you couldn’t pay. Your personal drama is not their problem. I know how harsh that sounds, but it’s not. And the more you make it how you need an exception because you’re a special case, the more people hear it as an excuse.

I know it’s not. You know it’s not. Except sometimes, Don, for a lot of people, it is. If I told you how many idiots complain they couldn’t pay for $4/month hosting, while stilly buying a top of the line iPhone, you’d understand why it’s draining.

And as someone who’s fucked up before, I find that being honest where it’s my fault gets better results. “I’m sorry. I screwed up and didn’t pay. Is there anything I can do to get my content back? It matters a lot to me, and I’d appreciate anything you can do to help me.”

Works great.

By the way, Don, I see that you have your site back right now. You should upgrade. You’re running WordPress 2.6.1 and that’s really old and vulnerable.
17 July, 2015
Name Collisions

Many many years ago I played MUSHes. One of the games was PernMUSH (which apparently is inactive now). PernMUSH took place on the world of Pern, and you had the chance to be a dragon rider. Which was kind of the Thing to Be ™. One of the ‘quirks’ of the game was that every character had to have a unique name, and so did each dragon. When I started playing, I didn’t really understand this. Today I know that it’s because of name collisions.

A “name collision” is a problem not solely endemic to computers, but it comes up there an awful lot, whereby you must have a unique identifier to know what each ‘thing’ is. For example, in WordPress every post has two unique identifiers. It has a post ID, which is a number given to the post when it’s stored in the database. If you use ‘ugly’ permalinks, you’ll see this as example.com/?p=123 – that 123 is the post ID. But if you use pretty permalinks (like I do here — example.com/my-cool-post/) then you have to have only one ‘post’ with that name.

You, literally, cannot have two posts with the same ID or name. Makes sense, right?

On PernMUSH we had everything have a unique ID as well as a unique ‘nice’ name. But then when dragons were introduced, you had to give them unique names as well. This was not for frivolous reasons nor pretty special snowflake ones. While it was perfectly understandable to have a hundred rooms named “Bedroom,” the code for the dragons allowed them to all talk to each other and send private messages. They were, basically, our cell phones. Dragon Ath had to be able to talk to dragon Bth, and in order to ensure that worked properly without everyone having to type dtu #12724=message we had to have the code written such that someone could type dtu bth=message and that meant each name had to be unique.

This would have been fine and dandy as it was except for one small problem. PernMUSH wasn’t the only MUSH based on Pern. There was also a game called SouCon, which took place on the Southern Continent. And transfers between the games were allowed. This added in a wrinkle that now PernMUSH and SouCon had to be sure that everyone on both games had a unique name and dragon name.

It was quickly determined that they wouldn’t bother with human names. If J’cob on SouCon came to visit PernMUSH, which already had a J’cob, then SouCon’s J’cob would use a different name like Jy’cob. But for whatever reason it was decided that the dragon names on both games were going to be unique. Thus the “All The Weyrs List” was created. That list (which still exists at dragons.pernmu.com ) was a mostly honor system site where you would email in your ‘hatching records’ with who’d impressed and to what dragon and what color and who were the parents. The list would be updated. Then the next time anyone had a hatching, they’d search that page for the dragon names they wanted to use. If the name was there, then then couldn’t use it. Done.

Of course this wasn’t perfect. Anything based on the honor system is bound to have a few bad eggs. After 10, 15, 20 years, the ability to give people the name they ‘want’ starts to chaff against the tacit agreement not to repeat a name. At some point, I know some games gave up and let people have whatever name they wanted, and transfers could cope.

What does all this have to do with anything?

On the WordPress.org servers, where we list all the plugins approved by the team, each plugin has a unique slug that cannot be changed. I have a plugin called Impostercide, which has the slug of impostercide and it’s the only one. No one else can submit a plugin with that name. For the most part, this worked fine. If someone else wanted to make a plugin with that name, they were free to do so but it just wouldn’t be on WordPress.org and that was okay.

Then we shot ourselves in the spirit of making life easier. Today WordPress updates your plugins and themes by using an API that calls back to the wordpress.org servers. That API check sees if Impostercide on your install of WordPress is older than the one on wordpress.org and, if so, alerts you to update. You press a button and your plugin is updated. It’s magic. It’s gold. It’s great. If you’re that person who wrote your own plugin, not on wordpress.org, you can hook into the update code and have it update from other servers. It’s brilliant.

Except what if you’re that person who has their own plugin named Impostercide? The obvious answer is that you can just rename your folder and off you go. That doesn’t fix the thousands of people who just upgraded themselves to my version, though. They’re having a bad day. Also what if someone submits a plugin called impostercide-two? Now you have the same problem all over again. Other people will tell you to bump the version to something the real Impostercide will never use. But again, that doesn’t hold up since what if Impostercide does?

The actual fix is to tell WordPress not to check for updates for that specific plugin.

The awesome Mark Jaquith posted about this in 2009. You can code a plugin to tell WordPress to not check for updates for it. This does put the onus on people who are writing the plugins not hosted on wordpress.org though, which is and isn’t fair. There’s a movement to allow a new plugin header to prevent these things in trac ticket 32101, which boils down to the idea that if those non-org hosted plugins can flag themselves as ‘I’m not from .org’ then the API stops trying to update them.

I think that it would be a good idea to have an easy way for people to flag their plugins as not being hosted. The alternative would be an honor system method, where everyone registers their plugin slugs and all submissions to wordpress.org is checked against that. But that falls apart quickly the day one person forgets to do it. With a way to easily kill the API check, we can allow non-org hosted plugins to very simply protect themselves, and their users, from being stomped on.

As for the risk that someone might edit their own locally installed copy of Jetpack to have that header because they’re tired of updates, well, we can’t stop you from shooting yourself. I just hope people are smart enough to understand that you don’t edit core and you don’t edit plugins and you don’t edit themes. You make child themes, you use other plugins, and you use filters and hooks.

15 July, 2015
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 '<p>This is a cool thing!</p>';
echo '<p>This is even more cool. This is '.$my_count.' times cool</p>';
echo '<p>Ain\'t this cool too? But I have to escape my apostrophes.</p>';
```
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
Rant: Gmail Contacts

It’s been a while since I’ve gotten to have a good ol’ rant in on tech!

I use Gmail in the browser, like my friend James. It’s meant to be used there. I’ll use it there. But I often get emailed new contact information, and I want to add it to Google Contacts. Here’s the workflow.

I open the email and click on the ‘add contact’ button.

There’s often no response at this point. The page sits there and I don’t see anything telling me to go to another page. Eventually the browser takes me to a new page in the same screen where I now have a new contact group with the name “Imported DATE” and one user (or possibly two if I clicked, saw no response, and clicked again):

At this point, I have to click the find and merge to get them back down to one. Then I click what groups I want the new user to be in. Of note, you must press the “Apply” button:

No ajax here.

But what about that group?

Now some of this I can do from the list user screen, but I still have to go to contacts, mess with it, and then delete the temp group. No ajax. No way to add just from within mail. No way to open in a new window.

It’s just crap.

10 July, 2015