A brief reflection on Facebook’s anti-UX

I am convinced that Facebook designs its user experience (UX) as anti-user experience. Their goal is not to make their site intuitive, friendly and convenient. It’s not to surprise and delight. (Well, surprise maybe.) It’s all about doing everything it can to dangle just enough of a carrot in front of you that you’ll click more times than you want to, exposing yourself to more ads, which translate to more revenue than they could reasonably justify if the advertisers knew just how brief and worthless those “impressions” really are.

Anyway… here’s an example of the latest annoyance, in the form of a Your Memories on Facebook block. This is what I saw in my browser window:

It’s an extremely brief teaser of and old post of mine that, yes, I actually am interested in seeing, since I am really missing the Minnesota State Fair this year. So I click on See more… but nothing happens.

I’m sure most users are just utterly confused by this, and may or may not understand that what they’re seeing is a preview of what their friends will see if they share this “memory” on their timeline. It doesn’t matter if they understand or not though, because Facebook has done enough user research to know that they’ll still keep clicking things to try to see more, leading them to the only links here that actually do anything, the Send and Share buttons.

Clicking Share pops up another window that shows a bit more of the post, but still not all of it, and another non-functional See more… “link”. But the only way to actually see the entire post is to share it on your timeline. Which is the only thing Facebook wants you to do here, because it “drives engagement”.

I’d insert an eye-roll emoji here but I’ve turned off that feature in WordPress, because I hate every part of everything right now.

Since I’m sure you’re dying to know how this all ends… here’s a screenshot of the shared post on Facebook.

See more…

Vegetarian Biscuits and Gravy

Do you want to read a long, drawn-out blog post intro to this recipe before I actually get down to the details? Of course you do!

But I don’t really care to write it. Suffice to say, the first time I ever had biscuits and gravy was at a restaurant somewhere on vacation with my parents when I was about 11 or 12. I loved biscuits and I loved gravy, so I assumed it would be awesome. But I’d never had (or even imagined the existence of) sausage gravy, and since I was at the age where — with food at least — surprise equals disgust, I hated it.

Over time I learned to like biscuits and gravy. But over time I also became a vegetarian. What to do? How about make my own vegetarian version? Of course!

The first thing you need to know is that I am not much of a baker, and my biscuit recipe is almost exactly the biscuit recipe from Mark Bittman’s How to Cook Everything, so I suggest before you do anything else, you head over to your favorite bookseller and buy it.

The next thing you need to know is that I am all about making sauces, gravies, béchamels, what-have-you. I have always found that recipes gloss over the trick of it, which is really not hard at all, but if you don’t know it, they turn into a lumpy disaster. So I’ll get to that in time.

First let’s make some biscuits.

Not Exactly Mark Bittman’s Buttermilk Biscuits

This makes somewhere between 10 and 15 biscuits, depending on how thin you roll it out and how careful you are about not wasting any dough.

Ingredients

2 c all-purpose flour
1 tsp salt
1 tbsp baking powder*
1 tsp baking soda
5 tbsp butter
1 c buttermilk

* Mark Bittman says 3 tsp, but since 3 tsp equals 1 tbsp, I don’t know why he does that, other than that baking is a science and maybe saying 3 tsp instead of 1 tbsp will make you be more precise in your measurements. Also make sure you pay attention to the difference between baking powder (which contains baking soda) and baking soda (which does not contain baking powder).

Preparation

  1. Preheat oven to 450ºF.
  2. In a large mixing bowl, combine the first 4 ingredients and stir together well.
  3. Cut the butter into small pieces — I actually hack away at it with kitchen scissors; you could also grate it with a box grater if it’s cold enough.
  4. Add the butter pieces into the dry ingredients, and then using your fingers, smoosh the butter together with the flour until there aren’t any big chunks of butter left. (Make the recipe a few times and you’ll probably figure out your own preferred way to do this.)
  5. Stir the buttermilk into the bowl 1/4 cup at a time, and continue stirring until the dough starts to come together. If your experience is like mine, it never totally does. Just avoid working it too much.
  6. Scoop the dough out onto a floured surface and knead a few times, just until it comes together. Again, don’t overwork it.
  7. Dust a rolling pin with flour, and roll the dough out to about 1/2 inch thick.
  8. If you have a biscuit cutter or a circular cookie cutter, awesome. Otherwise, an overturned juice glass supposedly works. You might want to rub some flour around the inside lip of the glass to keep the dough from sticking. Press the cutter/glass down straight through the dough quickly to make circles. Don’t twist.
  9. Hopefully your dough is dry enough not to stick to the cutter/glass and even more importantly to the counter. Assuming that’s the case, you can transfer the circles of dough to a nonstick baking sheet. Give about an inch between biscuits. They do expand while baking, but not a huge amount.
  10. If you have leftover dough, smoosh it back together, roll it out again, and cut out a few more biscuits! Then be sure to take the remaining scraps this time, mash them into a grotesque monster biscuit, and put that on the tray too!
  11. Bake for 7 to 9 minutes. (My oven takes 9.) Just look for the kind of golden brown color on top that you like to see.
  12. Remove the biscuits from the oven and cool slightly on a cooling rack before serving.

Here are the biscuits I made this morning (minus a couple Sara snagged before I could take a picture). Can you tell which ones I cut out first?

While the biscuits are in the oven, you can get started on the gravy.

Scott’s Vegetarian Sausage Gravy

Ingredients

3 tbsp butter
3 tbsp flour
1/4 c buttermilk
3/4 c vegetable broth
1 c milk
2 vegetarian breakfast sausage patties (e.g. Morningstar Farms)
fresh ground black pepper
salt to taste

Preparation

  1. Combine the liquid ingredients in a 2-cup measuring cup. (Should be 2 cups total.)
  2. Place butter in a medium saucepan over medium-high heat.
  3. While butter is melting, microwave the sausage patties 20-25 seconds, flip, then 20-25 seconds more.
  4. Add the sausage patties to the saucepan and break into small pieces with a wooden spoon.
  5. Add the flour and stir well for about 1 minute.
  6. Here’s the secret to good, smooth gravy/sauce/bechamel: Add the liquid a small amount at a time. By “small amount” I mean about 1/4 cup. Stir until all of the liquid is absorbed and the mixture is a consistent texture, then continue adding liquid 1/4 cup at a time until the overall mixture is more “liquid” than “paste,” then pour in all of the rest of the liquid and stir well.
  7. Turn the heat up to high and stir constantly until it comes to a boil. Reduce heat to medium.
  8. Continue stirring constantly, making sure to loosen up anything that’s starting to stick to the bottom of the saucepan.
  9. Stir in a generous amount of black pepper (fresh ground if you have it). Good sausage gravy has a lot of black pepper in it. I generally use at least 1/2 tbsp to 1 tbsp.
  10. Continue stirring and simmering until the gravy reaches your desired thickness. Taste and season with salt as needed.

That’s it! Put 2-3 biscuits in a bowl or on a plate, ladle the gravy over and enjoy!

How to execute a no-nonsense upgrade to PHP 7.4 on Ubuntu 16.04 LTS

Yeah, yeah. Ubuntu 16.04 LTS is getting pretty long in the tooth. Long-term support ends in less than a year.

But if you’re anything like me (I’m sorry), you’re managing multiple VPSes that are, at the moment, still running it. And now WordPress is giving all of your clients scary warnings about needing to upgrade their version of PHP. What to do?

I’ve distilled the process down to 11 lines that you can just copy-paste straight into the command line. It’s not entirely hands-off; there are a few steps where you’ll be asked to confirm whether you want to keep your existing configuration files (YES!) and such. And — very important — you’ll want to review the set of PHP-related packages I’ve got listed here to make sure they’re ones you need, and that they’re all the ones you need. If you’re not sure whether or not there are others you may want, I suggest running apt update and then apt-cache search php7.4 and reviewing the list of results before proceeding.

Now then… here we go. I’ll break it all down after the code sample.

CAVEAT EMPTOR: I’ve just run this series of commands on three servers and it seemed to work fine, but this code is provided AS IS and you’re on your own if anything gets screwed up.

This assumes you’re already in sudo mode. If not, start with a sudo -s and FEEL THE POWER.

apt update
apt -y install software-properties-common
add-apt-repository -y ppa:ondrej/php
add-apt-repository -y ppa:ondrej/apache2
apt update
apt -y dist-upgrade
apt -y autoremove
apt -y install php7.4 libapache2-mod-php7.4 php7.4-mysql php-imagick php7.4-cgi php7.4-cli php7.4-common php7.4-curl php7.4-gd php7.4-json php7.4-mbstring php7.4-opcache php7.4-soap php7.4-xml
a2dismod php7.0
a2enmod php7.4
service apache2 restart

OK, what are we doing here? Let’s break it down.

apt update

Updating our package cache. Gotta do this first, always.

apt -y install software-properties-common

You may already have this installed. I’m not entirely sure what it’s for but the other articles I read had me doing that before the next steps so who am I to argue?

add-apt-repository -y ppa:ondrej/php
add-apt-repository -y ppa:ondrej/apache2

We are adding external package repositories created by Ond?ej Surý that allow versions of Ubuntu Linux to install newer versions of PHP than what comes with the standard Canonical set.

apt update
apt -y dist-upgrade
apt -y autoremove

Gotta do this again, since we’ve added new repositories. We’re doing a full-blown update of any outdated packages in the OS, and using the -y switch means we’re not going to be asked to manually confirm before proceeding. Be careful!

apt -y install php7.4 libapache2-mod-php7.4 php7.4-mysql php-imagick php7.4-cgi php7.4-cli php7.4-common php7.4-curl php7.4-gd php7.4-json php7.4-mbstring php7.4-opcache php7.4-soap php7.4-xml

This is the big one. We’re installing PHP 7.4 as well as a bunch of related packages we probably need. If you don’t know what all of these do, I encourage you to research them. You may not need them all. You may need others not included here. But these seem to do the trick for a typical WordPress setup.

a2dismod php7.0
a2enmod php7.4

Here we’re telling Apache to stop using PHP 7.0 and to use PHP 7.4 instead. This assumes you’re currently running PHP 7.0, which would be the case if you’re still on the default Ubuntu 16.04 LTS packages.

service apache2 restart

Let’s restart Apache and get that PHP 7.4 goodness! Hopefully everything works! But I suppose we should also be forward-thinking. This command is deprecated and I believe removed completely in Ubuntu 20.04, so you could use the more modern (but to my eye, decidedly less friendly) systemctl restart apache2 instead.

Postscript

One more thing… along the way you might have updated some packages that recommend a restart. If that’s the case, throw in one last command for fun:

reboot

Obviously if your server gets a ton of traffic you may not want to reboot in the middle of the day. But then you shouldn’t have been doing any of this in the middle of the day. The Digital Ocean VPSes I use typically reboot in less than 10 seconds, so I am never too hesitant to reboot at any time. Some of the other commands above, however, may shut down Apache or MySQL for a longer period (probably not more than a minute or two).

Post-postscript

This should also work more or less the same for any other version of Ubuntu you’re trying to keep fresh past its sell-by date. The main thing you might need to look at is the a2dismod php7.0 line. You’re probably running a different version of PHP. You can use php -v to see which version you’re running, and you can run ls /etc/php to see which version(s) you have installed.

A quick fix for the impossibility of building new menus on a WordPress site with a large number of pages

I’m working on a theme migration for a WordPress site that as a lot of pages. A lot of pages. 451 pages.

The old version of the site was using page menus, not custom menus, but it was relying on a constellation of abandoned plugins, and that approach just won’t work for the new theme. We need to build custom menus.

The problem is, building a new menu on a WordPress site that has 451 pages is a daunting task. Granted, only 39 of these pages need to go into the main navigation. (A lot of them really should probably be deleted, but that’s the client’s call, not mine.) So, I’m glad I don’t have to wrangle over 400 pages into a menu, but even 39 can be difficult given the shoddy interface WordPress provides for finding pages to add to your menu.

There are three tabs: Most Recent, View All, and Search. Most Recent is useless unless you’re just adding recently created pages to an existing menu. View All is useless because it’s paginated, inside this tiny box, and it lists the pages in an entirely inscrutable order. (OK, it’s not inscrutable. I can scrute it. But just because I understand the logic of how they’re ordered doesn’t mean that order is easy to work with.) And lastly we have Search which seems like the saving grace. But it’s actually the most maddening of the three because of two things:

  1. WordPress search sucks. It doesn’t give extra weight to page titles; it searches the full content. So even if I type in the exact title of the page I want, it’s usually not first in the list. And that’s a problem because…

  2. It only returns 10 results. That’s it. Ten. No lazy loading of more, no pagination, nothing. If your page doesn’t come back in the top 10 results, it may as well not exist.

I’d really love to rebuild the internal WordPress search engine to be smarter about weighting titles. Well, OK, no I wouldn’t. That would be a project I would not enjoy. But I would like for it to be done by someone.

Since that’s not likely to happen, at least there’s a way we can modify the search results to change the number of pages returned. I found the solution, as I often do, on StackExchange. But I dislike a few of the answer’s coding conventions, and I wanted to make one specific change for myself, so here’s my version. (You may not like using closures, especially in a scenario like this because it prevents you, or anyone else, from being able to remove this logic elsewhere. If I were writing a public plugin for this, I’d definitely make it a named function, but this should be fine for a custom theme.)

add_action('pre_get_posts', function($query) {
  if (is_admin()) {
    if (isset($_POST['action']) && $_POST['action'] == 'menu-quick-search' && isset($_POST['menu-settings-column-nonce'])) {
      if (is_a($query->query_vars['walker'], 'Walker_Nav_Menu_Checklist')) {
        $query->query_vars['posts_per_page'] = -1;
      }
    }
  }
  return $query;
}, 10, 2);

The important difference between the StackExchange sample and my code is that I changed the results from 30 to -1 which, in the WordPress universe, equals . Fun!

The standard warning is that setting posts_per_page to -1 is inherently risky because it could cause performance problems. But in my testing of this change, it does not appear to be an issue on this site with 451 pages, so I’m guessing it won’t be for you, either.

Now, instead of getting back a paltry ten results, you’ll get all the results that match your search. And the exact page title you typed in should be in there, somewhere.

Add arbitrary product data to order items in WooCommerce

This seems to be way more convoluted than it needs to be, but I’m not sure how much of that is that it’s actually convoluted, how much is that Woo’s documentation sucks, and how much is that everyone else’s tutorial on it is tl;dr.

Anyway… I just wanted to do something fairly simple. I want to have each product’s short description get sent into the order data. This is a specific use case with a client who’s syncing data over the REST API with an external system, and we’re shoehorning data into the short description that maybe could go somewhere else. The point is, use your imagination as to how this might be useful to you.

I’m stripping out a lot of the other details. All I want is a way to a) add the data to the item in the cart, and b) carry that data over into the order item meta data in the database. You may need or want more, but this will get you started.

// Add custom order item meta data to cart
add_filter('woocommerce_add_cart_item_data', function($cart_item, $product_id) {
  if (!isset($cart_item['short_description'])) {
    if ($product = wc_get_product($product_id)) {
      $cart_item['short_description'] = $product->get_short_description();
    }
  }
  return $cart_item;
}, 10, 2);

// Add custom order item data from the cart into the order
add_action('woocommerce_checkout_create_order_line_item', function($item, $cart_item_key, $values, $order) {
  if  (isset($values['short_description'])) {
    $item->add_meta_data('Short Description', $values['short_description'], true);
  }
}, 10, 4);

This is a major distillation of stuff I found in these two tutorials: How to Add a Customizable Field to a WooCommerce Product and Add Custom Cart Item Data in WooCommerce.