Tag: design

Easier Control

In a WordCamp I heard a developer say something along these lines:

“I include my own jQuery because it’s easier and I can control things.”

The moment he said this, I clamped my mouth shut and bit my tongue. It was not the subject of this presentation, and multiple other people in the room had already pointed out that WordPress has it’s own version. Afterwards, someone remarked she saw steam coming out my ears. All I said in the room was “We reject themes and plugins from the .org repositories for including their own copies of jQuery.” and then shut up. After all, I was in the room because I wanted to learn about something I didn’t know, and that wasn’t jQuery.

It’s sad that my major takeaway from that talk is too many people sacrifice sustainability for ‘ease’ and ‘control.’

You may think that if you force install your own jQuery, you can be sure a random upgrade of WordPress won’t break your theme. You have full control over the theme, after all. And you may think that you can make your theme or plugin faster if you compress all the JS together yourself, rather than having WordPress load a dozen separate files. Those thoughts are both true, but you’re wrong. You’re never ‘master of everything’ unless you only use WordPress core and the themes and plugins that you built. And even then, you’re still not.

While it’s perceived as easier and faster to write code if you assume you know the truths of your website and will always be it’s master, the fact is the assumption is plain ignorant. These days, it’s rare you’re ever the sole developer of a site. You may be hired to make a theme, I’m hired to make a plugin, and someone else is titularly in charge of both of us, but probably doesn’t know a lick of code while still being the driving force behind the website. Not to mention we’re not the webmasters of the site. That may be some intern nephew of the boss, who will take over once we’re done.

And that is exactly where using our own versions of scripts will get us into trouble.

You’re master of your plugin, or your theme, but you’re not master of the rest of the world. Even if you’re making it on spec for someone for a specific purpose to be used on a specific site, there’s no guarantee that it’s the only time and place your code will ever be used. There’s no assurance that then 10 other plugins you tested with today will never upgrade, or that they won’t add more. If you get hit by a bus tomorrow, there’s no promise your code will remain untouched. Basically we’re running on pure arrogance that not only are we crystal clear about the present, but we’re totally perfect about knowing the future. And that just ain’t possible.

So. How do I explain why including your own jQuery in a theme or plugin, instead of enqueuing the one with WP, is bad?

“Picture this. Your theme has jQuery 2.0. So it de-enqueues WPs and re-enqueues yours. My plugin is using version 1.7. I do the same thing. Bob’s plugin uses 1.11, HE does the same thing. Joanne over there properly uses WP’s. Which one of our jQuery files wins?”

The problem is that you’re emphasizing short term gains (speed of development, speed of site) over long term sustainability (regression conflicts, duplicate files). You’re making your life a little easier, and actually harming the website you’re trying to make because tomorrow, you will be gone and they’ll be trying to figure out why the site is so slow. Or why it’s breaking when they upgrade Jetpack. After all, you tested with Jetpack, right? You were selfish, short sighted, and just … wrong.

But it’s okay. You can learn to do things better. You can do it right with your code and fix those mistakes. You can let the wookie win, and let WP control what it’s supposed to control, while only augmenting what you must control. And you can do it all in a friendly, sustainable, updatable, extendable way. Which is how WP wants it.

Oh and how to I handle minification? I have a proxy service do it for me. In my case, Google’s mod_Pagespeed compresses and combines all my JS and CSS to make it one file that loads faster.

2 April, 2014
I Hate WP Here

I’m probably going to piss a lot of people off with this longer post, so let me make this clear from the start: the post is long, and any comments I deem inappropriate, overly angry, or totally off the point (like rants about why the 3.8 design sucks or why the updater is evil), will be deleted. This is my website. You can rant on yours, thank you.

So here’s the deal. I get it. I really do. The change in the WordPress.org back end, the new admin dashboard, is dramatic, bold, and not universally embraced.

And I get that the updater isn’t something people love. Though to be honest, the volume of people who did not notice the 3.7 to 3.7.1 update, but are livid over the 3.8 to 3.8.1 update perplex me. Where were you in the end of October when we last had an auto-update?

People have passions and they are general vocal about it. I’ve had so many conversations like this:

Isn’t that beautiful, easier to read, potentially colorful, admin dashboard wonderful? Oh wait, you find it ugly, harder to read, and too colorful? But … the design works so well with a mobile phone! You use the iOS app? The colors man! You don’t like black? That’s okay! Colors! See you just go to your user profile and pick a different one. I like Ecto… what? It’s not the colors? You just hate it?

I’m not putting a picture of Aaron Jorbin up here, but you know the drill. And I get it, I really do. The change was big and it’s never going to be something loved by all. But let me quote something for you:

I agree with a lot of users too that the changes to the admin dash interface are not up to par, like some of the buttons
[…]

The defense is that new users will love it because they don’t know better? That’s rather weak considering the millions of people installed base that still want to work with WordPress.

Also, calling the old UI “insanely stupid” and loving the new one makes me suspect you really don’t know what you are talking about or you are really involved in this. What is it?

[…]

I’m going to stick my neck out on this issue and say that it has ruined the whole blogging experience for me. The UI was the best feature of WordPress, it’s the bit that bloggers know and love for being an ace bit of kit.

Those are all quotes from the topic “2.5 admin backend annoying” posted in 2009. That was when WordPress last had a totally massive, top down overhaul of the back end. And boy howdy did people have a strong reaction to it. The answer we had back then is actually the same as we had five years ago, and it’s not “Tough titties” (as Taffy would say). “Use a plugin to change it.”

Right now the vocal minority of people who hate the new WP dashboard will need to make do with customizing their experience using plugins. Which is a whole ‘nother post in and of itself why plugins are good, and that isn’t the point here.

The point here is that WordPress is probably not going back to the pre-3.8 design, nor will it be dropping the auto-updates. This was not a change made in a vacuum. It was tested by early adopters on WordPress.com (who were actually flipped over to this in June) as well as beta testers of WordPress core. The odds are, while improvements to address some of the visibility issues and functionality problems will be made, the direction of WordPress will remain forward, not backwards.

While people who really hate these changes are pretty vocal about it, it’s actually nothing new if you look back to 2.5 and how it’s redesign was received, or if you look at the failed 2.3 redesign (Shuttle) and how well that went off. And when you consider that in Wordpress 2.7, when we introduced the ‘one click’ updater for core, and how many people hated that, it’s rather astounding we ever get anywhere at all. I hate saying “Just give it a shot!” and “Cope” but that’s really kind of where we are here because of people being irrational about new features in general. And who is being irrational? Two main groups: the people who hate it, and the staunch defenders who did not write it.

The people who hate it, well, I covered that. The people who didn’t write it though, and to some extend these are people who didn’t actively or vocally work on testing and bug catching either, are the people in the support forums who mean really well, but are getting testy and snide and cranky. You know why the haters are upset, they’re having an emotional reaction. The supporters are angry because they get angry haters all the live long day, and snap back. It’s a vicious circle.

With all the new features of WP 3.7 and 3.8, there was a lot of work. Months and months of work, testing, breaking, fixing, testing again, and finally you reach a point where you have to remember this: No matter what you do, your change will break someone’s workflow.

Change happens. We don’t always like it, we don’t always agree with all of it, but change is, inherently, a good thing. Even if everyone hates it, it helps us decide the direction of our passion and where we want it to be aimed. Take all that anger and think about what it actually means and how you can take it to improve things for more people. Because we’re talking about an open source product that you’re using, for free, that makes your life better. It makes it easier to manage websites, it makes it easier to get a job, and it makes it easier to do what you want. That doesn’t mean it will always do it exactly how you want it to, though. Even I have parts of the new features I dislike.

But. What makes me and my dislike different from people who get angry are two things. First and foremost, I can recognize when I am angry, and when I do sense it, I walk away. I don’t reply. I leave the room. Even though it’s my job, to some extent, to talk to people about this stuff, I will hand things over to others, or beseech assistance in wording. The second thing is that I chose to be part of the progress and stick my toe in the water to try and change WordPress in a direction I prefer.

This doesn’t mean I’m better than people who get angry. My lack of fire in some places leads to me not being the sort who champions new directions that often. You’ll notice I’m a community type rep, and not a core-plugin one. That’s why. But what I share with the people who change the world is a desire to funnel our hate into something productive and positive. I see something I dislike and I study it to understand it, why it was done, and since this is open source, suggest changes. I try to back them up with fact when I can, and logic when I can’t find enough fact. I strive to make things improved.

I feel it’s better that way, and I sleep a lot better at night then when I was just angry all the time.

3 March, 2014
LastPass? LostPass!

ModemLoper came up with the name.

So here’s a frustrating experience. My office uses LastPass to share passwords for things. Secret things. They send me an ‘invite’ for the Enterprise account with my company email. I go to log in with the first-time password thing, and it says I need to make a new password. Sure, because email isn’t secure, so I make a new password the same way I have for the last year. I open up 1Password, make a new account there (LastPass – Work) with the login as my.email@myoffice.com and generate a password. So I have a password stored there you see. I then copy that password and paste it in, twice, to change the password.

I want to note some things here. I did not have a message about how my master password was super important at this time. In fact, it just said to enter it twice. Also remember this was for an ENTERPRISE account. Not a normal user. Okay?

So I do that, it says yay log in now! I take the same password, paste it in, no go. Oh, okay, maybe a butterfly farted. I’ll just reset it. Guess what I can’t do? The password ‘Hint’ was useless, since my password was along the lines of dyEno4FfW4EsED and I’d set the hint to “1Password” like you often do. Also there’s no ’email me my password’ or ‘reset my password’ thing I can use. Probably because email isn’t secure. The email where they’d emailed me a temp password just before to create my Enterprise account.

At this point I tweeted obscenities. I have an account but I can’t use it. I can’t reset the password. I can’t recover the password. I don’t have a ‘One Time’ use password because I never got to the point where it let me create that sort of thing. Ditto with ‘reverting’ my vault. There was nothing to revert to so I couldn’t do that. The official answer was to delete my account and start over. There was more swearing. Most of it public use of the F-word on Twitter.

But I did delete the account, made a new one, and this time it said “Hey, this master password thing is super important!” and took me to a second screen where I have to re-enter it. Oh, and yes, I used the same password I’d made before. It worked this time. My coworker resent the invite to join our Enterprise account. I do so, set up Two Factor Authentication, trust my laptop, and he shared the folders.

As I spell out the drama to him, I realize that this may be happening because I didn’t have an account before. That is, I went ahead and used the account and password from the email. Don’t believe me that they sent a clear-text password? Here:

I redacted the account, even though you could guess it. Four hours pass. I get a tweet from the LastPass CEO:

https://twitter.com/joesiegrist/status/403649508715667456

to which I replied:

https://twitter.com/ipstenu/status/403649761212784640

Everything’s fine now, and my takeaway from this is ‘Make an account before joining an Enterprise’ because clearly their ‘sign up through your enterprise’ thing is buggy. The whole interface is a little janky, and I find that their statement of how they cannot possibly reset your password to be weird:

Recovery for LastPass is not the same as other services you may have previously used – due to our encryption technology, LastPass does not know your Master Password, so we cannot look it up, send it to you, or reset it for you. This means your data remains secure from threats, but also means that there are limited options when you forget your Master Password.

I gather they mean “There’s no way to change your password without knowing your current password.” And really this is the ultimate security, isn’t it? No one but you can change it without knowing your master password. The problem with this, and really all these things, is that if I have one master password, it must be easy for me to memorize and remember at the drop of a hat.

Which means my master password is my least secure password. Check the sticky notes on my monitor.

24 February, 2014
Electric Sass Boogaloo
One I mastered using Sass enough to feel confident with basic mixins, I decided to remove my _media.scss file and go at it with Chris Coyer’s methodology of Breakpoints.

Instead of having a media file with all the special media calls, you can put the media section inside the Sass call. That stops that cognitive dissonance (for me at least) of hunting down where the heck I made that change. Since I was already using Tracy’s code, I was able to slip in breakpoints using her bp mixin, with a name. And thus:
```
.site-intro {
    @include font-size(14px);
    line-height: 1.5;
    @include rem(letter-spacing, 1px);
    text-transform: uppercase;
    float: left;
    @include rem(margin-top, 20px);
    @include bp(small) { @include rem(margin-bottom, 15px); width: 100%; text-align: center;}
}
```
This is clearly a really simple example, but it means I can add all sorts of blocks and have it be together. It actually made my building of my css files really easy, since once I figured out what size I wanted things to be, I was able to build and ignore all the tricky maths, which as I learned recently, was really important for your REMs.

Now that I was using includes, mixins, default settings, and breakins, it was time to reconsider how I made the css files. I installed sass on my laptops and servers. It required Ruby, but I’d installed that ages back trying out Jekyll (there’s no post about that yet for … reasons). Once Ruby was installed, Sass was this easy: gem install sass (you may or may not need to sudo that sandwich).

Having Sass on my server means I can edit files in place (which … you wouldn’t do, right?) and when I’m done, run this:
```
$ sass sass/style.scss style.css
```
But it also means when I (properly) edit on my computer and push up, I can script with git hooks instead! I took my methodology from Nico Hagenburger and Steve Grunwell, but you can use just about anything. I like how they don’t include the complied css file in their builds, which keeps it cleaner. Then one could have another hook to push the files after, say, you tag a release. That one would copy the files up to your server (rsync anyone?) and thus you do it all locally, but magically it appears to the world.

Breakdancing in Yoyogi, Tokyo, Japan. By Colin McMillen.

Back to breakpoints though. So great, I can use it to make my math teh simples. What else can I do? I can change content, colors, font-families, or anything else you want to change on a size-defined basis. How do you break the points? Breakpoint SASS is possibly my new favorite website.

For an end user who doesn’t really spend a lot of time with theme development, this buys even me a little time in my day. After I spent a weekend banging it out, I found my updates were easier, cleaner, and faster. Having the files separate is possibly the fastest thing. I edit a scss, check in the code to my git repo (because I am totally neurotic), test the compiled css, and I’m dancing in the streets.
24 January, 2014
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

Tag: design

Easier Control

I Hate WP Here

LastPass? LostPass!

Electric Sass Boogaloo

Font Size Matters

Gaining REM