Half-Elf on Tech

Thoughts From a Professional Lesbian

Author: Ipstenu (Mika Epstein)

  • Professional Utility

    Professional Utility

    It’s well known I hate themeing. I can’t really design and I don’t know how to change thoughts to form like that. Words are my gift.

    A year back, I changed this site to using the Utility Theme by Carrie Dils. Since then, I’ve moved on with another theme, for various reasons, but I still found Utility to be one of the nicest, cleanest, themes out there.

    Recently, Carrie came out with Utility Pro and as she’s one of the nicest people out there, offered me a discount. The new theme costs more, starting at $69 and going up to $199 for a professional version with a Gruntified theme and source files. It’s a lot more than the $45 Utility cost, but I went ahead and bought the theme, not having a home for it quite yet.

    After fifteen minutes looking at it and the code, I knew I wanted to use it.

    What Carrie did “differently” with this theme is she made it mobile first. That means the entire site is designed to look good on a mobile device and the breakpoints are used make it look better are larger devices. This is the opposite of what many themes do, designing for large screens and adjusting for smaller. Her ‘media’ section is surprisingly small because of that, and the site resizes quickly and properly with no adjustments needed.

    The next thing she did, and the thing that really was a selling point to me, was she made it accessible. One of the concerns I’ve been struggling with in the last year has been making my content accessible, and in specific my slides. I want everyone to be able to take my content and learn from it, and a theme that considers that means I have to worry less.

    Finally, and here’s where she won my heart, she decoupled code from her theme. This is something that many theme devs and I agree on. A theme should theme, but code should be code. Which means that I don’t want my theme to include custom post types for example. But also she removed Font Awesome. I love it and use it, but by having it in the theme meant that every time the font upgraded, she had to upgrade the theme. We’re all used to upgrading plugins regularly, but themes rarely. By separating the two, she’s able to give the theme stability and the feature flexibility.

    Am I using the theme? Today, yes.

    JFO (A website I run) is Mobile Friendly

    Looks just fine in mobile (Google’s POV is jaded since I block them from scanning things).

    It was the work of a few hours to convert a site from Going Green Pro over to Utility Pro. The only reason it took hours is that I picked up the non-developer version sans Grunt, which meant I had to split out the CSS into my desired sass files, fold in some of my custom functions, and finally fix the problem that had prompted the following comment:

    /**
        This file has been modified by Mika to fit the needs of this.
        If you use it somewhere else, expect breakage. I hard coded
        some things in. Shut up, future me.
    **/
    

    Future me read that and sighed a lot. Finally I removed all the full calls, making everything relative or using the proper functions in order to dynamically add paths. Also I had to merge a Wiki, a Yourls Site, and a gallery into the look, and that meant some serious theme juggling. It didn’t help that with the new layout I decided to tidy up some of the sidebar content and optimize layouts.

    I’ve done very little to rejigger the code. What I’ve messed with is unrelated to what Carrie’s design choices were and more with how Genesis approaches the few things I don’t fully agree with. I’m not yet using the welcome splash screen, since this site people come to for news first, but I plan to use it for major announcements.

    Now, for $69, it’s a well made theme. Would I spend the $199 for the full version with the development tools and the Grunt files and the use on as many sites as I want? If I wasn’t me who liked to play with code and files, yes. If I needed this for clients, most definitely. StudioPress itself charges $59.95 for Genesis, and $399.95 for all themes in their repertoire, so from that aspect, this may seem expensive.

    Chris Lema and I have some strong opinions on the cost of a WordPress theme. When you consider all the things you’re paying for, all the work of testing on mobile devices, accessibility, colors (which are also accessible), compatibility, plus a year of updates and support, that $200 is an amazing price to use on (say) a dozen websites out there.

    I think it’s well worth the price to have this handy in my back pocket for anything I might need it for. And it’s a testament to Carrie how rapidly I realized I did need this and didn’t even know yet.

    Check out Utility Pro. You won’t regret it.

  • Overreaction to Negative Reviews

    Overreaction to Negative Reviews

    I’ve long since held the belief that our reactions to critical judgement of our work hurts so much because it’s so personal.

    This has never been more true than on the Internet. In the world of distributed and isolated development, we often end up writing in a sandbox. We sit down and tune out the world and write code. And then we just deploy it to the masses for real-world testing. Many people are unit testing, which helps a lot, but as we’re such a distributed development world now, we rarely get the sit-down feedback we might with a company.

    With that in mind, perhaps the over-reaction of people to their bad reviews (codewise) is a function of this distributed environment.

    You’ve seen it, I’m sure. You leave a low-star review on someone’s product, annoyed that it doesn’t do something you think it should, and you’re replied to with vitriol. You’re astounded! You know that a one-star review kinda sucks, but you didn’t expect name-calling or, worse, someone to find your personal contact information and tell you that you deserve to die and you’re an idiot for not understand what code is.

    I didn’t make that up. That’s happened. And since it happens, the question is why does it happen?

    It comes back to the way we both develop code and the way we share it. The easier we make it to share our code in things like Github or official, public, repositories like the WordPress.org plugin repository, the closer the connection we make between developer and user. If you consider how it ‘used to be,’ the person who wrote the code may never meet any of the people who use the code. I’ve used Safari for years, but I have no idea who wrote it. Conversely, I’ve actually communicated with many of the Chrome developers about issues I’ve see and unexpected results. And goodness knows we all just ‘cope’ with how terrible things can be in Microsoft Word.

    We’ve made the world more accessible for people to communicate directly the issues they’re having with software. This is a good thing. It allows us to develop faster and iterate code faster. We make things better faster. At the same time, it opens us up to issues like handling negative reviews.

    If you’ve seen the movie Office Space, there’s a character whose job it is to take information from the customers to the developers, because developers are bad with people. We all laughed at that because we all saw the grain of truth. That tiny nugget of truth was that people who can bury their heads in the sand for hours to invent things are kind of weird people, and they don’t always communicate the way the ‘rest of the world’ does. Of course, now it’s 2015 and we know that it’s just not so. We all communicate similarly. Some of us just have more patience than others because we’re used to working with people more often.

    Sunday is the 17th anniversary of the term “Open Source” in how we use it today. There was a public call to use ‘open source’ instead of ‘free software’, and we heeded the call. But open source has changed a lot from that day. We’re not just talking about free software that anyone can take and develop but the open lines of communication that allow us to develop it by working with the users in a closer relationship.

    While many of us develop in isolation, writing and testing code by ourselves, the moment we release it to the masses we’re terrified. What if it breaks? It will. What if it sucks? It does. What if people hate it? They will. But we do it anyway, and when we, the developers, get that one-star review, it hurts. It punches us in the gut and makes us want to walk away.

    Except… it shouldn’t. Certainly some reviews are made by absolute prats who demand the unreasonable. We don’t reply to support tickets for our free software fast enough, or maybe we didn’t refund their money when our store clearly says ‘no refunds.’ Maybe they hated it because we declined to add a feature. Maybe they just wanted to rant at us for 500 to 1000 words.

    But I want the Unicorn

    Yes, those reviews that are clearly full of anger should be ignored. And yes, those will make you feel like total shit. But the other ones, the ones where someone says “I wanted to like this, but the developer pushes an update every week and it really isn’t adding anything useful. This plugin has become bloatware and I’m not using it anymore.” Well hey, that’s actually a very nice one-star review. It’s a sucky one to get, but it’s fair and just.

    So why do people often demand we delete those one-star reviews, or reply back that the user has no vision and cannot see how the plugin develops, or that the code is the dev’s and you should thank your stars it’s free? It goes right back to how we develop. We’re not used to the feedback and constant communication with others about our code. We don’t present our code to the masses until it’s at a usable or workable stage. And there are practical reasons why, but it means we just don’t know what it will be like to work with others to develop until it happens, and it seems to always happens in bad way.

    What should you do? Keep in mind that the people who hate your code may have a point. Try to be objective and see it fairly. But don’t be a pushover and don’t let the people who are legitimate mean people get you down. It’s not easy, though. It helps if you have other people to work with on your code projects. Trusted beta testers, or even developers who are willing to take a look. Get yourself out of your isolation and you’ll find it’s a whole lot easier to deal with the crazy, if only to have someone to laugh with.

  • Mailbag: Trash the Blog Slug

    Mailbag: Trash the Blog Slug

    If you only knew how many times I got this one…

    When I made my multisite, it changed all the URLs on my main site from example.com/postname to example.com/blog/postname ! How do I change that!?

    This is because you picked Subfolders for your network.

    Now before you get into this, ranting that it’s wrong, please actually read all of https://core.trac.wordpress.org/ticket/12002 first. The initial ticket was that if you used subdomains, you were also locked into using /blog/. We’ve obviously fixed that, but it brought up a bigger issue.

    Why do we keep it? To prevent conflicts. If you use /blog/%postname% and have a post named “humperdink” and another subsite named the same, it would cause a mess of problems. It’s one thing to search all your pages for possible conflicts (remember, your pages will still show up as example.com/pagename), most people only have a few pages. But once you factor in the hundreds of posts, it gets really crazy. If you have an open Multisite, where anyone can register any site, you have no way to doublecheck the URLs.

    So we’re making sure we don’t conflict with posts and sites, which is pretty impossible to do without a massive DB query every time you post, as well as pages and sites (less massive). I think that we should have some slug in there for those reasons.

    Or as Nacin put it when he detailed out a potential roadmap for Multisite:

    Dealing with URL Conflicts

    Perhaps the greatest change will be addressing the issue of the main site gaining a /blog prefix. This is ostensibly to avoid top-level pages on the main site from clashing with sub-sites. With arbitrary domain support (via domain mapping primarily, and secondarily via secondary networks), any site with path / can clash with any other site with the same domain but a different path. With multiple path segments (nested sites), any site with path /X/ can have pages that clash with site /X/Y/.

    Ultimately, this requires two-way blacklisting. Before a site is created, it must be checked against top-level URLs of the possibly conflicting site. And, before a page is created, it must be checked against sub-sites that already exist. If an /about/ page already exists on example.com/, an /about/ site cannot be created. But if an example.com/blog/ site already exists, a /blog/ page cannot be created on example.com. This gets complicated quickly, and is a very strong argument for only supporting one path segment in core by default, and allowing plugins to handle these potential conflicts on their own. In most cases, simply ignoring the potential conflicts is going to be sufficient.

    You see the headache? But hey, if you’re sure it won’t be a problem, you can do this yourself.

    Edit the site via network admin -> sites

    Click on settings and scroll till you find the permalink settings:

    Site Settings, Permalink Options

    Remove blog and save. Done.

    Now bear in mind, should you ever change permalinks on the main site, you will have to go back and do that again. This is because on the permalinks page, it’s hardcoded in:

    Multisite Permalinks hardcode blog

    Also some plugins will refresh permalinks and accidentally put it back in, so you need to be very careful. Someone wrote a cron job to re-write that value every hour in the DB.

  • Beta Testers

    Beta Testers

    There’s a weird aspect to open source that can be hard to explain, and that is the ethos and practicality of Beta Testing. Beta Testing is one of the most important aspects of open source, because it’s only with the beta that we’re able to real-world test products. No matter how much planning and testing and automated tests you write, there is nothing quite as powerful as the real-world. We just can’t reproduce it well enough because, among other things, we can’t yet predict humans very well. Sure, cold reading is a thing because humans can be predictable, but that doesn’t mean we know how a tool will be used 100% of the time.

    And being a beta tester is hard work. You have to be both a user and a developer, which are really two totally divergent mindsets. Testing as a user versus testing as a developer is as different as how you and a formula one racer drives a car. Input from both the users and the developers is critical to the growth of a project and the end results. But before we get into how one really betas, we have to ask a very important set of questions.

    Should I be a Beta Tester?

    • Are you brand new to the project?
    • Do you use the products daily (or close enough)?
    • Do you know how to manually clean up a bad install without losing your data?
    • Do you make regular backups?
    • Do you know the basic troubleshooting steps for the product like the back of your hand?
    • Are you willing to test on your live site?

    If you answered ‘no’ or ‘maybe’ to any of those questions, then you’re not yet ready to be an effective beta tester.

    That last one may catch people by surprise. Testing on your live site is something we actually tell people not to do, but I’m here to tell you that the best beta testers are either testing on their live site or on a site they use every single day. Since I have multiple site I use daily, I picked the one I can live with if it dies and I use that for my live-beta.

    Guess what? You’re on it right now. It’s a hallmark of how much trust I have in WordPress. I can count the issues I’ve had on one hand since I started this a few years ago. I make a backup every day, twice a day, and I have it in three locations. If my site goes down, I lose at most 12 hours of content, and for what I’m doing here, that’s okay. My other sites, I could not deal with that loss and thus I use stable. But I test with live because… well let me explain.

    How do I test?

    If you’re going to be a beta tester, then the you install the beta and you use the product.

    You were expecting rocket science?

    Most projects have a lot of automated tests and they’ll test what they know about and what they can. But absolutely nothing replicates real world use. The whole reason I test with a live site, and why I feel it’s important, is that this is as real as it gets. This site is updated regularly with plugins and theme changes. I add new content five times a week on the same Multisite installation. I add new content multiple times a day on another site. One is on trunk, one is not. This lets me constantly compare the experience between the two and makes me immediately aware that something is different. If it gets my attention, that’s important.

    What I do with my site is equally important. I’m writing content, constantly, which means I’m using some of the fundamental, day to day features that WordPress absolutely must have. That kind of user testing cannot be scripted. There is no AI yet that can reproduce what machinations a human gets up to.

    I like to tell a story about the time my coworker John and I were testing some tax software for the bank. We ran it through it’s paces, putting in data, and every time we tries to save at a certain point, the software crashed. It crashed hard. We called the vendor and talked to them about it, walking them through what we did, and lo, it crashed again. They couldn’t reproduce it, so we screen-recorded it and sent it over. They were astounded and sent out a tech from New York to Chicago to work on this. He couldn’t solve it, but he did see how we crashed it. Then they sent in their big guns, their lead developer, and he sat down and watched us. As soon as it crashed he said he knew what the problem was.

    We were doing it wrong. We were entering bad data in a way no tax professional ever would, the system was trying to process the math and, because the logic was bad, it crashed. I pointed out that people would make mistakes and he agreed, saying it should have alerted us to an error in the form, not try to process anyway. A few days later, he sent us a new version which properly trapped the error.

    While a scripted test might have caught that by looking for bad values before mathing, they were doing the obvious check. They checked if it was a number. They neglected to check if it was a permitted number. If you’ve ever heard me nag someone about proper data sanitization and validation, this is why. They made a code change, added it into their scripted tests, and learned and grew. But they couldn’t have done that without a real human thinking in a different, and unexpected way.

    We can, and will, improve scripted tests, but they will never improve to perfection because humans are pretty crazy. Which leads us to the next step.

    How to I report a bug?

    This is generic for a reason.

    First, make sure you can reproduce the bug. Get a clean build to test on and go through the steps again. If you’re not sure about the steps, make a note to yourself about generally what you remember and try it again. If you can’t reproduce it, call it a one-off and let it go (and debug for yourself, but that’s different). Once you can reproduce it on a clean build, document those steps.

    You’re going to want to answer these questions:

    • What were you doing?
    • What did you expect to happen?
    • What happened?
    • What research did you do into the error?
    • How do you reproduce it reliably?

    Include any error messages. Explain what you did. Don’t say “It didn’t upload.” Instead, say “The upload hung, making no further changes on the page. I waited 15 minutes before hitting refresh. When I checked the media library, I saw the image was uploaded however when I looked at the file server, none of the thumbnails were there.”

    This is why you need to know what you’re testing. With a failed image upload on WordPress, you should know that the image uploads and then it makes the resized images. Even if you don’t know that, you should know your images are in wp-content/uploads/2015/02/ and you should look there to see if you can find them. If you have a failed post, you should know to look at the post list page in WP Admin and see if the post is listed there.

    You’ll get extra bonus points if you can find your PHP error logs and share pertinent information, but that isn’t always easy. When you reproduce the error, make sure you specify if anything special has to happen. Like if the image upload only fails if you’re uploading a PNG, note that. Or maybe it only fails on pages, but not posts. How weird is that, right? Note it.

    Don’t worry about being technical here. Be accurate, be clear spoken, and assume the other person is relatively new at whatever you’ve broken. Don’t assume they know exactly what you mean when you said “Upload an image…” Be specific and say “Create a new post and press the ‘Upload’ button…” If you know there are multiple ways to upload an image, test those other ways. It’s a due diligence thing.

    After you’ve reported the issue, keep informed. Make sure you get email alerts for it, make sure you reply to those emails for it. You can’t just report it and walk away, you have to keep tabs and pay attention. People may need you to clarify information and explain problems in different ways. Remember people can’t actually read your mind. What’s clear to you, because you did it, may confuse them.

    And finally … be prepared to hear that it’s just not that big of a deal. Sometimes a bug isn’t a bug, but an intended change. You may not like it. Heck, you may despise it, but that doesn’t make it wrong.

    What else?

    What are your takeaways from beta testing? How do you do it?

  • Gallery Columns Zero

    Gallery Columns Zero

    I have a site where I love using galleries but I hate having to define their width. That’s something I hate about WordPress’ Gallery shortcode, you have to define a width, otherwise it’s all one column. Ugly ugly.

    The way that WordPress handles these columns also sucks. It puts in clear breaks:

    <br style="clear: both" />
    

    And frankly I hate that too.

    But I don’t do that with this other software I use. In fact, I have it all nicely coded in to show all my images, and then toss one final clear break at the bottom, to … clear the breaks. And what that does for me is gives me an adaptive width gallery that will expand and contract with my content.

    So how can I do that with WordPress?

    The easy part is something I already do in EDD, and that’s to use a fake column value of zero: gallery columns="0"

    That gives me a handy new column class: gallery-columns-0

    And that is very easy for me to style, by overriding the width from 100% to auto (the !important is dreadful), and set up the padding I want.

    /* Gallery */
    
    .gallery-columns-0 dl.gallery-item {
    	width: auto!important;
    	padding: 0;
    	margin: 0 10px 0 0;
    }
    

    But what about the ‘break’ afterwards? If you only need to support IE 8 and up, then it’s as simple as this CSS:

    .gallery-columns-0:after {
    	content: "";
    	display: table;
    	clear: both;
    	padding-bottom: 10px;
    }
    

    The padding on the bottom is to make it match my site, adjust as needed. I’m sure I could use the post_gallery filter hook and the same code from the gallery_shortcode function but with my br modification, but 0.017% of people visit this site using IE 7 or less, and at that percentage, so much of the site will look terrible anyway.

    The only real downside is that I have to manually enter the shortcode in text mode, since I can’t select ‘0’ as an option from the dropdown.

  • Mailbag: Have You Ever Split a Multisite?

    Mailbag: Have You Ever Split a Multisite?

    That was the question.

    Have you ever split a multisite? If so, how?

    I wrote about Breaking Up Multisite before, but this was more specific.

    Yes. And it’s a funny story.

    I should preface the story with the reminder that in general when someone asks me how to do it, I casually mention that they can’t pay me enough to do it. This turned out to be inaccurate, as I was paid to do it. One of my first tasks at DreamHost was to take three separate sites and turn it into a two-site Multisite network. Two blogs were merged into one, then the new site was moved to Multisite. We did that with the export/import tools in WordPress. Fast-forward two years (my how time flies, Simon!) and now I’m asked to un-do it. But they only want site #2 now. The main site is being deleted.

    I was actually glad, since this gave me a chance to handle the site properly and upgrade it correctly. I could clean out the old posts and content, re-sync users, tighten security, and undo the nightmare that was our old process. Plus the exercise of unraveling would give me more experience in WordPress shenanigans. And finally, it answered the question of how much you would have to pay me in order to do this (answer: more than most people would).

    It started out as a massive 30 step process, but after running through it a few times, I was able to speed it up into five, simple, sections. I make use of WP-CLI here, but if you don’t have it you’ll want to get interconnectit’s search and replace tool to save you a migraine.

    Bring it Local

    I use Vagrant and I made example.dev for this.

    Then I just copied down all the files from example.com/wp-content/blogs.dir/2/files/ to example.dev/wp-content/uploads-orig/ and did a database dump. Since I use WP-CLI, this was just a wb db export command.

    That was the full database, though, all 64megs of it, and I only wanted the second site. But we’ll get there in a second. I knew I had WP-CLI on my test box, but if I didn’t, I would have zipped the file in order to use phpMyAdmin (which would make it about 6megs). I’m lazy. I like GUIs. Either way, I imported the entire database to my new server.

    I also made a new wp-config.php file while I was at it, for multiple reasons. The one we were using did a check to see what domain you were on, and loaded different database params based on that. It was a cool bit of code, but it was unnecessary here. Making a new config file is easy (for me), and it ensured I had it clean and only set to a single install of WordPress. After all, I’m de-multisiting.

    Fix the Tables

    Of course, I had to clean that database. The first step was simple and I dropped all wp_FOO tables except wp_users and wp_usermeta. That left me with all the wp_2_ tables.

    Next I renamed wp_2_ to wp_ so I could have everything nice and orderly. But there’s a catch there, becuase there’s an option in my wp_options table that has the name wp_2_user_roles. Can you see what’s wrong? I need that to become wp_user_roles and I need to update any usermeta.

    Break out WP-CLI again and run this: wp search-replace "wp_2_" "wp_"

    So nice. So easy. That actually took care of 100% of the issues with the table renames. Were I doing it manually, it would be time for tears in your beers.

    Clean the Images

    With WP-CLI this is a snap:

    wp search-replace http://example.com/foldername/files/ http://example.dev/wp-content/uploads/
    wp search-replace http://example.com/foldername http://example.dev
    wp search-replace wp-content/blogs.dir/2/files wp-content/uploads
    

    I ran it like that for a reason. I like to do my searches in order of smallest catch to biggest, and this way it kept my possible gaffs to a minimum. I knew I had to fix all the images and post content, so it was safer this way.

    Clean up Users, Themes, and Plugins

    We had a lot of old, duplicate, users who had no posts or had left the project. I went over everyone’s permissions, dropped them down as low as I could, and removed half the admins. It’s just a good time for that.

    Next I reinstalled themes and plugins. I could have just copied them down, but I reinstalled everything because I wanted to take the time to make sure they were all clean and the latest versions. This is also where I paused to do a security review of everything we had.

    Move it Live

    Well now we’re just moving WordPress like normal. Copy it all up via FTP, copy up the database, run a last search replace to change example.dev to the real, new, domain (which I don’t actually know yet know), and it’s done. If I use wp-cli again, this will be as simple as running this: wp search-replace example.dev newsite.com

    All that extra work I did before pays off here.

    The nice thing about this is that I could have done this and then keep the main site if I’d wanted to. I didn’t, but I could have easily deleted all the wp_2_ tables and just cleaned up the multisite stuff. The headache is I’d have to do this multiple times if I’d had, say, ten sites on the network and wanted to move them all. If that had been the case, I would have only exported the wp_2_ tables and the wp_users and wp_usermeta ones.

    But yes. I have un-multi’d a site.