Author: Ipstenu (Mika Epstein)

Font Size Matters
I’ve been complaining about this for years.

I wear glasses. Thick, coke-bottle, I have an astigmatism so bad any time I get a new eye-doctor, they tend to boggle that my eyes are as healthy as they are being as crap as they are. No, I’m not legally blind, but I am wearing glasses any time of the day I want to see.

Amusing anecdote time. I did acting as a kid, and I used to not wear my glasses for it. My mother was always terrified I’d fall off stage not being able to see it, but I actually can make out some things. The color on the edge of the stage was enough, and I also counted my steps. I’m great with walking around at night, no glasses, to go to the bathroom. But the point is if you find pictures of me above the age of three, I’m wearing glasses. Before that I could see ‘enough’ that I didn’t want to wear them, but afterwards, I gave up and only took them off for official pictures. Now I argue “No one will know me without my glasses” (something I proved in High School when I wore contacts and a dress to a fancy party and my boyfriend didn’t recognize me).

So I have bad vision. And for years I would CMD++ to make the WordPress admin readable. It was just too small for me. I’d complain to people, I’d make my own admin skins, and I’d beg UX/UI people to put it on their radar. When MP6 came out, I rushed to install it because the subtle font increase and style change made everything readable for me.

Here’s an example from Pippins Plugins. Now, Pippin’s my friend and co-plugin-reviewer. I love his work. His site is just a wee bit too small for me:

Pippin’s Normal Size

Pippin’s +1

Pippin’s +2

Generally I’d like a +1.5 view for his site, and bless his heart, the whole site scales wonderfully when I do increase the size. But I find his default font size (13px) is just a smidge too small for me, and a 14px is so much easier to read long term. The same thing happens for me on WordPress.org’s support forums

For reasons of this ilk, I use a Chrome add-on called Stylish to force font sizes (and layouts) where applicable.
```
#subscription_checkbox {
display: none;
}

#pagebody {
font-size: 14px;
}
```
The first one is to hide that blasted subscription checkbox (which I never want to check), and the second makes the page body size 14. Suddenly it’s all legible for me! And yet, on the occasions where I’ve point out that the font’s a bit small, the masses all tell me “Oh but I can read it fine!” I know as the age of developers creeps up and more and more people end up having less than perfect vision, things will skew up somewhat.

Except the odds really are they won’t. As we get older, we bring in younger, and the cycle will remain. And this makes me wonder if there will ever be a point at which we have a medium where the folks with great eyes and the ones with poor ones are both happy.

I’ve heard tell that 16 pixels is the best but really the perfect thing is 100% easy to readability. And that’s where I think that we’re still failing our readers.

Font sizes really are still too small for a lot of people, and the WordPress dashboard is certainly not innocent. If it was, I wouldn’t have had to write an mu-plugin that does this:
```
/* Dashboard */
.postbox .inside,
.stuffbox .inside,
#the-comment-list .comment-item h4,
p, .wp_attachment_details label[for=&quot;content&quot;],
#dash-right-now .sub p,
.wp-editor-area {
	font-size: 14px;
}
```
Yes, that’s what I have to do to make the dashboard readable. And no, I don’t think ’14’ is too large. It scales nicely on my iPad and my iPhone, and my desktop. But I know I won’t win this fight for a long time, so I’m going to take what I can and celebrate than MP6 is making WordPress at least a little easier to read for me.
17 January, 2014
Gaining REM
Not sleep… And not the band.

I was reading Breaking up responsive design on Yoast.com and, like pretty much everyone else, they’ve been been scaling down the browser base font to 62.5% for a while now. The default font-size for most browsers is, as it happens, 16px. The problem with that 62.5% call is that, at least on Chrome for Mac, I ended up getting a flash of 25.6px fonts before the page would load right. Turns out that wasn’t just me, and it’s the bane of 62.5%

So the fix would be to make my font 100%:
```
html {
	-webkit-text-size-adjust: 100%;
	font-size: 100%;
}
```
And then I’d have to re-do all my font calls in my CSS because they were all based on 14px. This made me stare at my child theme on another site for a while, and finally knuckle down and script in better font handling, because the idea of manually cranking through everything was too daunting, even if I used REM Calculator to sort out my px/em ratio.

Still, doing this still meant I’d still have a lot of stuff like this:
```
  font-size: 16px;
  font-size: 1rem;
```
Bah. Who want’s that? It was time to get sassier. I went back to Tracy and came up with her use of “Mixins.” And this is where Sass gets weird. It can do my math for me. This was, I admit, what originally made me interested. But in July it was a theoretical attraction. By December it was love. See, Tracy did the math with her sass-responsive library, which she calls a library of variables, mixins and formulas geared towards Responsive Web Design using Sass.

I called it _taupecat.scss but we’ll get to that in a second.

The first step would be to split up my files. See, I’m using Genesis, and they have a handy table of contents for all the sections, so I just made each section an import:
```
/*
HTML5 Reset
--------- */
@import &amp;quot;normalize&amp;quot;;

/*
Defaults
--------- */
@import &amp;quot;defaults&amp;quot;;

/*
Structure and Layout
--------- */
@import &amp;quot;structure&amp;quot;;
```
I admit, this gives me a million files, as you can see in that image on the right, but it’s actually pretty easy to figure out what’s where. It took me a while to get everything where I wanted it, and while I could have used Bones for Genesis, I know me, and like using Git is the fastest way to learn it, so is using Sass. So I started with the basics of splitting it up like imports. Also I didn’t want to add in Compass to my mix just yet.

I named my files _section.scss and they all consisted of the normal CSS for each section at first. After all, the first step is segregation of code. The second step was to use Tracy’s code and change all instances like this:
```
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
```
to this:
```
	@include rem(margin-bottom, 24px);
```
And then
```
    padding: 0 12px 0 40px;
    padding: 0 0.75rem 0 2.5rem;
```
to this:
```
    padding: 0 12px 0 40px;
    padding: 0 cr(12px) 0 cr(40px);
```
This lets me use Tracy’s cool files and her hard work to make mine way easier! Basically I no longer have to math out that if 16px is 1rem, then 32px is 2rem, and that means 40px is 2.5rem and so on and so forth. It’s faster. Of course, since I’ve done this in pixels, it takes me a teensy bit longer to use inspector to fiddle, since I have to uncheck the rem and edit the px, but I’m okay with that.

I also tossed in two special calls:
```
@import &amp;quot;settings&amp;quot;;
@import &amp;quot;taupecat&amp;quot;;
```
The taupecat has all of Tracy’s code, and settings… well that’s for another post about how I’m controlling my colors and the fonts. But for now, well, all my font sizes and paddings are dynamic. It does mean I have to rebuild my css every time I make a change, but if you ask me, that’s better than math sometimes.

That’s why we have calculators, right?
15 January, 2014
Your Slides Suck

At WordCamp Las Vegas, I had a watershed moment of privilege realization. I’ve had these before at WordCamps, like Portland where I realized how much I rely on my phone for the Internet, and what that actually means to other people (thank you Eric Mann for that one, you should post those slides!). This time it was as simple as AccessibleJoe asking my new friend, Rebecca, if she could help him. I glanced over and saw that Joe was sitting with Laura Legendary.

Laura’s blind.

In that instant, the very second I saw her cane, my mind wiped out every single thought I had and focused on this. “Holy crap, my slides are worthless. Not just on the screen today, but when I give the URL out, because they’re all IMAGES.”

See, while I use SEO slides, my slides are a PDF imported from PowerPoint, which makes them a bit honking waste for her. No text. No tooltips. The deaf similarly were left out until they read the text posts I tend to make as a follow up to my slides, but since my slides are a counterpoint, or emphasis, to my speaking, I really greatly on what I say and how I say it. That means my slides are absolutely worthless to anyone who is differently abled.

When Rebecca needed to go away before Joe got back, I offered to take over, introduced myself, and said “I’m sorry, my presentation slides are worthless to you.” Laura was kind enough to explain to me the situation, demonstrate how she used her phone (before her own presentation where she showed everyone exactly how much running a website sucks. It blew my mind when she said there was only ONE theme she could find that was accessible on the front and back end so she, a 100% blind person, could manage her site all herself. And then she only had one plugin for an estore that worked.

One.

Single.

Theme.

If that doesn’t slap you in the face and make you think you’re doing something wrong with your programing, allow me to do this for you.

We suck. We are inconsiderate. We are selfish. We are ignorant. We have no idea how hard the web is for people. Even though I do spend a lot of time working on my site to make it easier to read for the visually impaired (that is people who hate small fonts), I have no idea how crap my site is for the actual blind.

Want to know how bad it is? Close your eyes and try to use your site. Go on, make a post. If you’re on a Mac, there’s a tool built in for this. I played with it the other night and was galled at how hard it was to get around the customizations of a theme. To write code, I rather expected to be hard, but the theme settings (not the customizer built in, the settings from Genesis) were not very easy, even though I knew what I was looking for.

So my pledge to this starts here. I’ll be making all my slides on SEO slides from now on, with long descriptions and alt text for everything, to make my slides more accessible. I will continue to speak clearly concisely, and more over, I will print up my slides notes in advance so I have them right there without having to use PowerPoint.

I love PowerPoint’s ability to have speaker notes, but it relying on them means I made my efforts fail for some people, then it’s time to do something new and different. I’m still going to keep my slides with few words on it, but with the SEO Slides features, I’ll be able to show the ‘notes’ (I hope, right guys?) so the deaf can read and follow along. It’s not perfect, but the only other idea would be to learn sign language, or get my wife’s up to the level where she can do that for me.

Challenge accepted.

13 January, 2014
Genesis Design for Gummies

You’re not a dummy, right, you know how to write and you know what’s good and what’s not, but the last time you had to edit your CSS your site went white. It’s worse now that you’re using this awesome theme called Genesis where every design is a ‘child’ theme that you don’t even want to edit because if WordPress taught you anything it’s that you don’t touch the plugin and theme files!

Well great. Now what?

I’m not a consultant. I suck at it, I hate it, and I don’t enjoy it. My friends the Norcrosses over at Reaktiv Studios are a dev agency that makes themes and plugins and even updates (they’re not paying me or compensating at all for this statement, I don’t even use ’em, I just like ’em). They’re good at it, and to make their life, and your life, easier, they came up with a new plugin called Genesis Design Palette Pro.

Previously, if you want to edit your theme, I would have said to use Jetpack’s CSS editor. Heck, that’s really what I do here, since it keeps revisions of your css changes. But most of what people change are the standard things that make your site look like an individual. The CSS is just a wall of weird, codey, text thing that made no sense when I first looked at CSS back in 1999. And that’s really how everyone did stuff back when Prince was en vogue.

But now there’s that nice Theme Customizer built in to WordPress that lets you edit the most basic (and most commonly used) aspects of your site right there and see the changes live! Wouldn’t it be nice if every theme let you play with its design like this?

Come here. Closer. The Genesis Design Pro plugin does that for you in a way that looks ‘right’ and familiar. Don’t believe me?

Looks familiar, don’t it? Okay, it’s not exactly the same, yet, but give it time. You can edit for mobile or desktop, adjust colors and padding with simple interfaces that are way easier for a lot of people to master than the weird CSS world. You can even add that freeform CSS if you want.

I think my only wish for it would be to have an export to css function, so I could design everything, save it, and then plunk it on a site as is.

10 January, 2014
Videos: Local or Service
One of the hardest things to do is sort out where and how to host videos.

The problems

Let’s be direct here, videos are still one of the messiest parts of hosting websites, because of two major reasons:
1. Multiple formats
2. Bandwidth
I used to have “File size” on there, but these days with most of us having at least 5G of space on shared hosts, it’s not an issue. The other two are big problems. Since it’s 2014, I’m sticking to only HTML5 video stuff right now. It’s backwards compatible enough. If someone’s on IE8 or earlier, they’re left in the cold, which I feel bad about, but that was released in 2009 and while I know my last job was struggling to get off it in 2012, my ‘workaround’ was to include a line below all videos that says “Can’t view this? Click here…”

Multiple Formats

Got an iOS device? Great, you can’t play Flash, which means the smallest compression out there (flv) won’t work. There are a lot of different formats. Just have a look at the breakdown of HTML5 video browser support for a moment. It gets messier when you’re an Open Source advocate and you realize how jacked that makes you with iOS, which is pretty much ‘MP4 or GTFO’ these days.

Don’t forget that Firefox doesn’t like MP4s either (see the screenshot to the right) so now you must include a webm or ogg file to make that happy. This means, in order to get the broadest audience, you need to include at least two formats of video. This touches back to the ‘File size’ issue that I don’t really think is much of an issue these days.

This is a hassle since most of us don’t have a lot of great tools to take our amazing video of ducks and turn it into these other formats. I use Miro Converter or Handbrake much of the time to convert things, but by no means are these profession quality. Hang on to that thought, I’ll be back.

Bandwidth

Sometimes people lump this with File Size too, but bandwidth is how we measure how much data you’re sending when people visit your website. We relate it to file size because larger files use more bandwidth. Obvious, right? Videos are large files, so they use up more bandwidth. Right now I get 5TB of transfer per month before I have to pay extra, and my average is 150G, so I have a ways to go before I need to worry about it. That said, not every host is as generous, and remember that ‘unlimited’ means ‘within reason’, especially with Shared Hosting.

There’s also a related concern we call ‘hotlinking’ and that’s where someone takes your images (or videos) and links to them directly, which means they;re using your content (and bandwidth). When someone does it to you, we call it bandwidth theft. When someone does it to YouTube, we call it ’embedding media.’ Personally I use Perishable Press’ ultimate hotlinking strategy and block all my images and videos from this.

It’s actually the concern of bandwidth and the availability of embedding media that drives many people to external hosting.

Your options…

Now that we know what makes this hard, what can we do? it’s pretty simple, we can host it ourselves, knowing these woes and being prepared to address them as they come up, or we can host our stuff elsewhere. For many of my friends, this is a no-brainer. Host it elsewhere, pay a little extra, but have all the technology headaches solved for you.

But.

I work a lot with fansites and they face two major hurdles. Posting some videos is, strictly speaking, illegal as all get out. That 6 second clip of Mulder and Scully? Illegal. Hosting it? Illegal. Making money off it via ads on your site? Illlleeeeeeeeeeeegggaaaaallll.

You get the idea. But they’re going to do it anyway, and unless they decide to turn it into an animated GIF (still illegal actually according to some sources), they’re going to have a small video to host. Where can they host it?

The only place is their own server. Now, legally, you have to be given time to comply to a takedown DMCA notice, and really these monolithic companies are supposed to send YOU a takedown before going after your webhost with a demand, but that doesn’t always happen. Many fansites are banned from YouTube because of those clips, so it’s always going to be a fear.

Do I think that clips of TV shows should be illegal? Not within reason, no. I think a small clip, under 2 minutes, can be awesome advertising. And now a days, a lot of shows put their own, official, embeddable, clips up online. Of course… they also remove the clips after a while, which defeats the purpose, I feel.

What’s wrong with hosting locally?

Really? Nothing. It’s just hard, complicated, and complex. If you can do it, I actually suggest you do. You can embed most video files in WordPress these days, so it works well. I wouldn’t do it for large clips (I don’t go over 10 megs myself), because it can and will slow your site down.

Mind, I wish WordPress.com’s video server code was up to date. I’d like to try that. Still, that’s where I am today. I’ll put in the effort and minimize my risk.
8 January, 2014
Your Username is Not A Secret

I keep seeing this pop up. “Your CMS is not secure because it makes your username/id public! Once a hacker has that, they can try to break in!” At one point I snapped “Sure, and your house isn’t secure because someone knows your address.”

It’s one of those logical fallacies that seems vaguely accurate on the surface, but really are just plain wrong. On some level, you’d think that if a hacker doesn’t know your ID, they can’t get in, but the reality is most hackers, the surface level idiots who are trying to break into any site available aren’t checking for your user ID/Name, they’re looking specifically for a vulnerability, like they did with the TimThumb accidental (D)DoS.

In addition, they’re not usually looking for your ID when trying that brute force login attack. The practical difference between someone trying to log in with “admin” and someone trying to log in with “ipstenu” is pretty negligible, since they’re killing my server before they get in anyway.

As I wrote this, I thought what it would be like if there was a mod_security rule that checks if you’re trying to log into a site with the username ‘admin’ and, if so, blocks you from being able to log in. Of course, there are millions of sites with millions of CMS tools, and for some you actually cannot change the admin account name away from admin.

WordPress is not alone in thinking your username isn’t a secret. Drupal also thinks disclosure of usernames/id is not a security risk. In fact, Google doesn’t think your ID is a secret. After all, you can log in to Google’s devices with your email, and everyone whom you’ve ever emailed kinda knows that. “Oh, you emailed me from ipstenu@gmail.com? I’ll attack that!”

Now of course, if you try to log in with that too many times, you lock your IP out. And similarly, if you try to log in to my server via SSH too many times, the same thing happens. Have I ever locked myself out? You bet. Less since I switched to 1Password and SSH keys, but it still is very effective.

Why isn’t this built into the core of most CMSs? Because a CMS like Drupal and WordPress is not as volatile as, say, the healthcare.gov site. The danger that comes from someone getting into my blog is minimal compared to someone getting into my email. But again, everyone knows my email account, so they’ve always got one half to the puzzle right then and there.

One of the other primary reasons this isn’t built in to WordPress is that it’s hard to do right, and in a way that will work on all servers, and in a way that will be easy for someone to undo. I said I locked myself out a couple times, right? I can unlock myself with a device on another IP, or I can call up my webhost and tell them my IP and can they please unlock me. Now flip that to your blog. How do you handle it? Who do you call? Do you make this a ‘solvable by the host only’ problem? Can you envision your host being happy about handling that?

Not that I’m passing the buck here. There are plugins and extensions that do this, but they’re still best used by people who already understand security than by the common man, because the people who know what to do when they have to edit a .htaccess are the ones who probably already know how to pick a secure password, or install two-factor authentication already.

All this comes back to something blindingly obvious though. Everyone is going to know part of your access. The reason we tell people not to use ‘admin’ as a login ID is not because it’s more or less secure, but because it makes it easy for script kiddies to target. Remember, most of the time when you’re being attacked it’s nothing you did personally, it’s just a script running. When it’s someone who has an absolute vendetta against you, your userID is the least of your concerns.

The crux of the matter here is that your username is not a point of authentication, it’s a point of identification. Giving you an identification (I am Ipstenu) is not the same as giving you data that can be used to authentication (my mother’s maiden name is Jones; I was born in Battlesboro, VT; My favorite superhero is the Flash). There’s a reason we call them ‘Secret Questions’ as they’re both identification and authentication. Only I would know these things. And no, that’s not true, which is why secret questions are pretty useless. The more obscure they are (my first maths teacher) the less likely I am to remember them correctly. “His name was Smith… Now did I put in Dr. Smith, Mr. Smith, or Smith? Oh wait, how did he spell Smith? Smythe? Smyth? I know people with all those spellings! Which was he?”

So no. Your user ID is not a secret, nor should it be. I spend no time hiding it.

6 January, 2014