Distraction-free Writing Mode

Once upon a time in WordPress there was a New Feature called Distraction-free writing mode. You accessed it by clicking the icon in the editor toolbar that means full screen pretty much everywhere on the web.

post editor toolbar

It would load a new screen tha mostly just consisted of a writing box not surrounded by meta boxes or formatting, and what limited formatting options there were would only appear when you moused out of the writing area. It wasn’t perfect (I would have liked that fading toolbar to have all the same formatting options as the regular editor) but it was pretty non-distracting, and it just felt calm.

old distraction-free writing interface

A while back I noticed some changes in the wp-admin regular editor. All the navigation and meta boxes now faded away while you were writing, and I thought, “Oh, that’s pretty nice, kind of a DFW Lite!” I didn’t pay too much attention, as I was just writing a quick post, but in my head I approved, and thought it was a good improvement. Until this morning.

Most of my blog-based activity happens on work-related blogs that have front-end posting forms, so it’s been a while since I tried to access DFW mode. But I was going to be writing a long post, and I wanted to go over into that peaceful screen, so I clicked on the full-screen icon. That’s when I discovered that what I thought was DFW Lite was actually the new DFW. There was no more new screen.

At first I thought,”Hm, that’s a lot more efficient. Good for them!” Then I started writing, and thought, “[Letters-in-a-configuration-to-replicate-my-slightly-alarmed-and-uncomfortable-sound]!” I hated to admit it, but I felt physically uncomfortable. Am I turning into Sheldon (skip to 3:34)? Crap! Anyway, here’s why I don’t love the new DFW.

When wp core switched over to the “toolbar anchors to top of editor no matter how long your post” setup, users lost the ability to grab a corner of the editor and drag it to make it taller. Since it is supposed to automatically resize as you write, most people thought this was a tradeoff with a net benefit, and even though I really didn’t want to lose my little corner resize handle, I agreed that the net benefit was worth it. The thing is, if in your head you’ve already thought out a long post, starting in the small box feels cramped, kind of like when you have to repack a sleeping bag and you’re smooshing it with all your might to get it to fit back into the compact stuff sack.

Think about opening a New Document in MS Word (or equivalent writing program) , or a writer putting a fresh piece of paper in the typewriter (for those who are too young to remember, it’s like this). There have been reams written by famous authors in the past about the feeling that action engenders — a feeling of limitless possibilities, a knock on the creative door, an open road ahead. That’s what DFW tried to emulate. Starting in the small box instead of the full height box feels like possibilities with limits, a creative window that won’t open more than 3 inches for safety, a road with one lane closed for construction. Thoughts scrunch down to try to fit into the available space.

Even when the box expands to be the height of the screen (minus padding against top and bottom of browser), a chunk of space is lost at the top for the toolbar. That fade it used to have really did remove distraction. I wish there had been a way to combine the zen of the fade away (Matt’s original nickname for DFW was zen mode) with the convenience of the always-at-top placement.

In the old DFW, the writing window really did have that feeling of a fresh New Document or crisp new sheet of paper. Now, even once it’s tall, it’s a bit off-center to the left, because that’s where the editor box is when on a screen containing navigation and metaboxes.

Screenshot of current distraction-free mode

There was a time (pre-2000) when I didn’t think too much about alignment in UIs. Then I got a lot of design ideas drilled into my head that stuck, especially regarding alignment. I like asymmetry in a lot of things, always have. Hell, in a site we were just working on one of the things we said we wanted was some asymmetry. But for DFW, the symmetry — the centeredness — was a big part of what made that screen so calming. Your brain didn’t have to do any pattern recognition or internal balancing to make it feel right. But now it skews to the left and it’s driving me crazy, Sheldon style. This isn’t zen for me; it’s a misused apostrophe, a lowercase p, a cabinet door left open.

I thought I’d be a holdout forever against using the new wordpress.com posting interface (I have a lot of issues with it, surprise), but, well, their DFW has that open and symmetrical feeling (even if it has other problems) that makes for a non-Sheldony writing experience.

Screenshot of distraction-free writing mode on wordpress.com

So this might be my last post written in wp-admin DFW mode for now. Farewell, old friend!

* * *

Standard disclaimer when writing about WordPress: This is my personal opinion. I have not been the UX lead for WordPress core for a couple of years now, so this post on my personal blog should not be seen as representing the WordPress project in any way, it’s just my personal experience with a user interface.

Site Setup Journal: Act II

Act II: Setting Up WordPress

Previously in Site Setup Journal: Prologue and Act I: Domains and Hosting.

One-Click Install Attempts

1-click installs are totally the way to go, right? I mean, 1-click sounds faster and easier than the famous 5-minute install that you get if you do it manually over FTP (according to the Codex). I immediately go into the Dreamhost control panel and went for a 1-click.

Screen shot 2014-10-05 at 6.36.55 AM

Okay, so 1-click, but 10 minutes. That doesn’t seem right, that it should take twice as long for the automated 1-click install as for a manual one. Well, too late now, right? Guess I’ll go feed the cats while I wait.

I have to kill a little more time than just feeding the cats, but eventually I get an email from Dreamhost telling me my WordPress install is ready for me, and linking me to install.php to set up an admin user and get going. I click the link and get a white screen. Hm. Try again. Hm. Open up FTP to see if the files are there, and they are. Start wondering if maybe 1-clicks can’t handle being in a subdirectory (where I’d put it), so think I’ll try another one in the root. Same thing, the 10-minute notice. Set up web email for the domain and send a test email so I can see if it’s just the website, or if it’s everything on the domain. Webmail is also whitescreened. Hm. Status on Dreamhost says my server is going to be getting some software updates and will be offline during this maintenance, but it doesn’t look like I’m in that time window. I get a 2nd automated email saying the 2nd 1-click has failed. I head into the support section.

The Live Chat support option shows as available, but when I click it it says that due to heavy activity there will be a 5-hour wait. Come on, just take down the Live Chat option when it’s 4am and you don’t have people on staff. I send an email, then another (first one re white screen, 2nd re install failure). In the meantime I start scrubbing through the Dreamhost support wiki.

I find the answer to the 2nd install failure before support gets back to me. Apparently, 1-clicks don’t work if there is anything in there already. So since I already have a subfolder in the root domain (from the 1st 1-click), trying to do a 1-click into the root won’t work. I have to empty it out first. That doesn’t make sense to me, but whatever. I wind up deleting everything via FTP and doing a manual install instead. Two, actually.

Manual Install

Well, then, back to the WordPress.org!

Screen shot 2014-10-11 at 8.04.50 AM

The “handy guide” is the Codex’s installation instructions page. Let’s take a look.

Before You Start

Screen shot 2014-10-11 at 8.22.15 AM

1. Minimum server requirements. As it happens, I had checked the php version stuff when I re-upped the hosting account for this domain, and had upped the version of PHP. Someone setting things up without my account gymnastics wouldn’t have encountered that, though, so I set out to find my hosting versions as specified in the ask-for-it text on the requirements page on wordpress.org:

  • PHP 5.2.4 or greater
  • MySQL 5.0 or greater
  • The mod_rewrite Apache module

I log into the Dreamhost control panel. I look for a navigation label that says something like hosting environment, version information, about, etc. Don’t see anything. Click into Manage Account, nothing. Click into Manage Domains. Oh ho!

Screen shot 2014-10-11 at 8.28.41 AM

Clearly I’d only upped the version on the one domain, not both on that account, but even so, I can see that the php versions are both above the minimum requirement to run WordPress.

Next up, MySQL version. Clicking the MySQL Databases navigation item seems the most likely, so I do. Nope. No information shown here about MySQL versions. You’d really think you would see that on the page labeled MySQL Databases, wouldn’t you? There is a link on that screen to phpMyAdmin, so maybe I can find it there. Wait — Authentication Required!

Screen shot 2014-10-11 at 8.39.09 AM

Bah, which username and password combination does it want? The hosting account (server?) or a database user? A note here saying which password is needed would be helpful. I can’t get in with the ones I know off the top of my head so I close out of that and go back to the main Dreamhost control panel (the phpMyAdmin attempt had bumped me into a new tab). In the search box at the top, I type “MySQL version” and hit enter. The page refreshes, but I’m still on the MySQL Databases page where there is no version info displayed. I think maybe there’s some documentation with version info, so I look for support.

Now, having been around a long time, I know that Wiki, a small link in the upper right corner, means documentation. But a lot of people don’t (I doubt my mom — the most recent person to ask me to set up a site — would), so for the sake of the experiment I go looking for a Help or Docs or Support link. I find it (Support) in the bottom left navigation after scrolling down (below the fold), because for some reason the “Goodies” navigation section is open. Why? Because apparently that’s where the MySQL Databases page actually lives, despite being in the navigation up above as a top-level item. Come on, Dreamhost, who’s your information architect, and what are they doing?

Anyway, I click on Support. It drops a layer with 3 options. Contact, History, and Data Centers. Why not have a link here for Wiki (or better, Documentation, which is less jargony)? Hmph. If you do click on Contact Support, it takes you into a form. There’s a live chat button, but no links here to documentation either. Hm, what’s this “Help is Off” button?

Screen shot 2014-10-11 at 8.48.09 AM

I decide to click it. Then I see this:

Screen shot 2014-10-11 at 8.48.47 AM

Oh, how handy, a link to documentation and forums. Why it’s even optional to hide that text is ridiculous. Anyway, to the wiki!

On the Wiki Home there is a nice little menu, and MySQL is listed there, so I click it. I come to another list of topics. None of them say Version, so I start clicking them in the order that makes the most sense. MySQL and PHP does not have version info. Neither does phpMyAdmin, but it does tell me that the authentication password request was for the database user password. Upgrading from MySQL 4.1 to 5.0 tells me that, “DreamHost is currently slowly upgrading your MySQL servers from version 4.1 to 5.0. You can also email support and request they upgrade your databases. There are some incompatibilities between versions 4.1 and 5.0, particularly with JOINs. This upgrade could cause some breakage of your application(s).” It does not say how to tell which version you are currently on. At this point, some people might email support, but I think a lot would just shrug and decide to take a chance and hope they were already on 5.0. So I do that. Because let’s face it, any host that is listed on wordpress.org/hosting had better be running the minimum requirements, right?

Mod_rewrite! Since I’m already in the wiki, I do a search for “mod_rewrite Apache module,” the last item in the ’email your host” list. The 4 search results are not helpful in any way. I remove “Apache module” from the search term and try again. Lots of results, none of them helpful. I decide again to shrug and assume, because this documentation is for the birds when it comes to confirming minimum requirements, and who has time to wait for support emails? Not me!

Around now I get an email from support about my earlier white screen issue. They say that it’s because the DNS hasn’t finished replicating. I might add that there’s a “works for me” comment in there that makes me purse my lips. But I stop to think about DNS. Yes, in the past I’ve had to set up a temp site on a dreamhosters subdomain if I wanted to work on a site before DNS caught up. Pain in the ass, yeah? Having to then do a move once the real domain is showing up? I hadn’t thought about that this time because the GoDaddy registration of the domain had been pointing at Dreamhost servers all along. I guess the hosting being down and then up created a DNS interruption. It was not explained to me satisfactorily, but I move on. Specifically, to step 2 of preparing for the install.

Step 2. Download the latest release of WP. Easy. Go to wordpress.org, click the big Download button. Oh, okay. That wasn’t really a download button, that was a navigation link to a download page. Okay. I skim the content in the middle and go to click on the… oh, that button at the bottom of the content area is to find a mobile app, and goes to a site at get.wp.com. That’s not right. Oh, there’s the real download button up in the sidebar. It seems like those should have been switched, but whatever. Click! Download! 6.3MB, it takes 7 seconds.

Step 3. Unzip the file. Also easy. Do Show in Finder from the download bar on the bottom of my browser, double click the file, see the wordpress folder appear. 3 seconds.

Step 4. Secure password for secret key. Click on the link to read about it. Get distracted by the big-ass blue-i information icon alert at the top that says, “Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!” Why is that following me around on every page of the Codex? For someone installing WordPress for the first time, that is not helpful. At all. Further, there’s no x to dismiss the box, so if I’m not interested, I still have to scroll past it every time, and it pushes the content farther down on the page, not to mention making me feel like I’m probably not in the right place because they obviously think I am way technical. (Tangent: People keep saying that the fold is dead, but I think they are wrong.) Anyway, I’m already confused. I clicked on a link that said  Secure password for secret key, but I don’t see that language on this page. It doesn’t anchor link me to the specific section I needed, so I guess I have to read this whole page? With multiple mentions of passwords but no headlines that say secret key? I command+f to do a search for text on the page, which shows that “secret key” is mentioned in the section titled Security Keys. Hmph. Would a little consistency here be so much to ask?

Read the section. Questions that should be answered in this section before jumping into the history of adding stuff.

  • What is a key?
  • What is a salt?

Then it shows what secret keys look like from the online generator. Cool, I like online generators. But the wording all over is inconsistent and confusing — is it one secret key, or four, or eight? And where do I set a secure password for the key (or keys)? I don’t understand this! So! Many! Words! Used! Indiscriminately!

I cheat and use the fact that I know what all that confusing language means, and what it wants, which is simply the block of generated keys and salts, not a password for them.

Step 5. Print this page. So I have it handy during installation? I’m thinking this list was written in the days before browser tabs, because why would I print it when I can just keep a tab open? Silly directions. But! On to the actual install!

Famous 5-Minute Install

That sure was a lot to do before doing the install, but I’m ready now!

Screen shot 2014-10-11 at 8.06.30 AM

Download and unzip — check. This step, which was 2 of the steps in the Before You Install list, took under a minute total, about 20% of a 5-minute install.

Create a database and a MySQL user — check. This takes a couple of minutes. I have to log in to the hosting panel, locate MySQL Databases in the menu, and scan the resulting page to orient myself. The first thing on the page is creating a new hostname, and the WP instructions didn’t say anything about creating a new hostname. Below that is create a database, which has fields to create the first user at the same time. There’s no instruction on the difference between a database user, an ftp user, and an account user. I go ahead and made new host, db, and user (and while I’m in there I delete the databases left from the aborted 1-clicks), but I think it would intimidate someone who hadn’t done it before and didn’t really know what a database was in relation to a hosting account or a website. This takes me a minute or two, but would probably take someone who’d never done something like this a little longer, maybe up to 5 while they tried to grok the setup page on the host panel.

Edit wp-config.php — check. This step is labeled optional, but I’m not sure why. If you click the Editing wp-config.php link, it says WP will create the config file for you from info you enter, and that turning wp-config-sample.php into a real wp-config.php file is for advanced users. If it works fine to have it be auto-generated, then why have this step in there at all? If it’s really better to do it manually, then why have the auto-create version? In any case, I’m used to editing the config file at this step, so I do it. Takes a couple of minutes because I had to go back and forth between tabs and copy/paste stuff. I happen to have Coda installed so the file opened in that program, but normally I’d have used textedit.

At this point I’ve passed 5 minutes.

Upload files via FTP — check. I open Transmit and start the transfer. It takes twelve minutes. Why? My first guess is that it is shipping with 3 default themes now, all with retina-ready images. But I don’t know, I could be wrong. I know I don’t need all those themes, so I delete Twenty Fourteen and Twenty Thirteen while I’m in FTP, and plan to start out with Twenty Twelve.

Tangent: Why do I want to start with Twenty Twelve? I think Twenty Thirteen is really aimed at bloggers and it has an overwhelming brand/design to it. The site I’m making is for a class, and needs to be chill. Twenty Fourteen I just personally don’t like, for the same reasons I don’t like the general mp6 coloring/style, which I’ve posted about elsewhere before.

Run the script at the URL where you installed — screeech! Screech to a halt here, because I wind up on another white screen. Side note: the wordpress.org instructions say to go right to the root URL, not to install.php directly (like the 1-click email tells you). Are they two different locations? Does install.php automatically load at root? Bah.

I go ahead and do a second manual install, so now I have one in root and one in a subdirectory. White screens on both. So it seems that the DNS stuff is really going to hold things up. I decide to go to school and finish it off when I get home that night.

INTERMISSION

Stay tuned for the exciting conclusion in Act III, which will cover finishing the WP install, installing BuddyPress and other plugins, and setting up BuddyPress.

 

Site Setup Journal: ACT I

ACT I: Domains and Hosting

In Site Setup Journal: Prologue, I set the scene for an ordinary website setup project. The plan: re-up a hosting account gone dormant, make sure the registrar is a domain pointing there, install WordPress, add a few miscellaneous plugins, install BuddyPress, do some configuration and maybe a little theme tweaking, and then have a nice private group site for the students of a class I’m in. Simple, right? I figured maybe an hour or two. Boy, was I wrong.

Once I removed the option to ping knowledgeable friends and get a fast, accurate answer to any question (a privilege I appreciate even more after this experience) and had to rely on public documentation and support services, I re-discovered just how woeful they are. I’ll try to describe each of the steps I took.

Step 1. Getting a Domain

An average person creating a new site would need to buy a domain, but I knew I had an unused domain sitting around from when I used to freelance, so figured I’d save the money and the addition of another domain (because the class site might get moved to the school site eventually). I had hosting accounts on both Bluehost and Dreamhost, but wasn’t sure where I had hosted  the domain I had in mind.

First I logged in at Bluehost. The hosting account had been deleted in July, which I hadn’t realized because the email address was one I no longer check, tied to an old business. The domain listed wasn’t the one I was looking for, though, so I went over to Dreamhost. I had to do some login gymnastics there also, because I’d had two accounts there, and as it requires login to be an email address/customer ID rather than a self-chosen username, I had to try a LOT of times to get the right combination of email and password and domains (I’d had accounts under 2 email addresses because one was for helping non-profits get sites set up). Finally after resetting passwords on the emails still in use, I got in. The non-profit account was still active, but I wanted the paid account for this project. In retrospect that was unnecessary, since the school is a non-profit, but oh well. The paid account had also expired over the busy summer. This one I did vaguely remember seeing emails about, but had never taken the time to go and do the login hoop-jumping to pay for the coming year because I was busy with work. I paid to re-up the hosting account, and it was back in business.

The domain was still listed there, so I wanted to make sure the registrar was still pointing at the Dreamhost nameservers. I went to Namecheap first, but it wasn’t listed there, so I had to check GoDaddy. I have a couple of domains there still that I hadn’t transferred yet due to timing around expirations. I couldn’t log in because I didn’t remember my password (hey, lots of people don’t use password managers). I went through the reset process, and got access. A domain I’d been registering for my brother had apparently expired (oops, another victim of my changed-email status), but the domain I wanted to use for the class was still there, and it was still pointing at Dreamhost.

I wasn’t keeping track of time, but I’d guess this all took about 30-45 minutes of going back and forth between sites and emails (often not instant but instead a few minutes later, or later, or later.

Summary: Requiring email address and/or customer number as login instead of allowing user-selected username does not result in a good user experience. Only doing password resets via sending to the email on the account does not address the reason why a lot of people need help resetting a password, which is lost access to the email address on the account. User-selected security access phrases or questions are a more user-friendly path to password reclamation.

Stay tuned for Act II, Setting Up WordPress. This is when we get into the fun stuff.

Inspectlet on wordpress.com

This is a personal blog post, not “WordPress News” to be reported. I hate having to make that clear, but I really mean it. WP-related blog stalkers/scrapers, you know who you are.

Okay, so I have this problem where I keep trying to sign up for email subscriptions to WP blogs and instead it subscribes me through the wordpress.com reader, which I don’t use (it’s fine, just not my workflow). Every few months or so I try to investigate settings to get it to send me emails instead of sending things to the reader, and every time I eventually give up because those settings are still really hard to find and/or get your head around and/or change successfully. So I miss a lot of blog posts, sorry. If it’s important for me specifically to see something, ping me to make sure I saw it.

Consider the scene set: early-rising worker bee trying to navigate the bowels of wordpress.com settings at 5am looking for a way to change post subscriptions from going to the reader to being sent by email.

Today I tried again and I noticed something I hadn’t seen before. This doesn’t mean it’s new or noteworthy, just that I never noticed it, and if there was an announcement about it in the past* I missed it. Here’s what I saw on the wordpress.com account settings screen:

Screenshot from settings page with privacy notice

I’m a weird mix of rabidly pro-privacy in theory and carelessly blasé when it comes to guarding my own information (3-time victim of identity theft!). But I do have strong feelings about unauthorized tracking of online behavior.

  • I think these types of things should be opt-in, not opt-out.
  • I also think the opting should be done via checkbox or other selector on the site I have the relationship with, not by forcing me to go to an external site that I don’t want to visit and I assume just cookied the crap out of me as a visitor to their site separately from the cookies they already had because of the automatic inclusion.
  • At the very least, if a policy changes or a new tracking service is added, I want to be informed in advance and allowed to opt out before the new tracking happens.

I have always known that wordpress.com does some stats tracking (hello, little pixel smilie pace in the margin of our sites), but I was not aware that we’d started using a service called Inspectlet.

That said, a lot of work news does kind of slip right by me unless someone tells me about it — subscription woes aside, I stopped following the other Automattic team blogs at Matt’s suggestion when I made that big effort to stop working 16-hour days a year or two ago — so I wasn’t too upset, figuring there must have been an email with a note about it offering me an opt-out link that I’d missed. I’d just opt out now, and all would be well.

Except that when I went to their site to opt out and looked on their home page to see what Inspectlet actually does, it freaked me right the [expletive] out:

Screenshot of Inspectlet service description

Dude.

That’s like… even creepier than Woopra was, and wow, what an invasion of privacy to do something that invasive as opt-out rather than opt-in. It records all the keystrokes? So if I write (for example) a long rant about how x does y and doesn’t need z (or whatever) but think better of it and erase it rather than publish (the number of times per day I hit Cancel Reply instead of Publish has a direct relationship to my productivity and mental health), there’s a recording of it out there anyway, on a third-party service I never signed up for? THAT. IS. CREEPY. AND. WRONG. If a site wants to record that kind of live usage, then not only should the user have to opt-in, but maybe they should even get rewarded somehow for their willingness to participate. How much do we pay each person that lets us watch them use wordpress.com via usertesting.com? How many airline miles does someone earn for filling out surveys? We could at least send these people a t-shirt in exchange for recording their every (heretofore assumed to be private-ish) move.

Trust me, I get it that this is not with malicious intent. I truly believe that Automattic — and every Automattician — has good intentions, or I wouldn’t work there.** I get the concepts of aggregate data, real-time usage data, real users in real situations vs simulated experiences in usability testing setups. I really, really, really do. I’m still not down with it being opt-out. So if you missed this like I did, and you use wordpress.com, and you just feel weird about your actions being recorded, head on over to https://wordpress.com/settings/account/ to access the opt-out link.

I hope I don’t get in trouble for posting this, but if I do, maybe one of you will buy me a mocha to cheer me up as a reward for bringing this to your attention? :)

*Investigation shows that opt-out links were added in May 2013 and posted about on internal blogs. Didn’t see a post on the wordpress.com news blog, nor an email in my email archives. That said, it’s possible I may have deleted such an email without reading it, so I have asked the folks who set up the Inspectlet stuff if there was one.

**I’ve quit jobs in the past over moral disagreement with things as minor as how they spent their advertising dollars (cough, Vermont Teddy Bear), so I’m pretty serious when I say that I won’t work for a company that I think has bad intentions.