UNDERDOG of PERFECTION - Page 42 - a blog on technology, music and geek culture from room34

Scott’s Vegetable Fried Rice

Even before COVID-19 hit, back when we were getting takeout at least once or twice a week, this was a staple meal I’d cook… uh… almost as often as we were getting takeout. Now I make it two or three times a week, because it’s reliable, satisfying, and I have it down cold.

Any time I realize I have a recipe down cold, and that my own technique for it has probably deviated somewhat from whatever recipe I originally followed when I needed to follow a recipe, it feels like I should write down my own recipe. For posterity, or whatever. Anyway, here it is!

I’ve adapted this recipe slightly for the time we’re living in. Normally we always buy fresh produce, but as stay-at-home orders set in, and I wasn’t sure what the future held, grocery-shopping-wise, I bought some bags of frozen vegetables. Frozen vegetables don’t take as long to cook as fresh, so that affects the timing and sequence of adding vegetables to the stir fry.

Scott’s Vegetable Fried Rice

Makes… a lot. But you’ll eat a lot of it, so it’s pointless to try to say how many servings it is!

Ingredients

All quantities are approximate. Use as much or as little as you want, and feel free to omit or substitute vegetables.

4 c or more cooked jasmine rice
1 package extra firm tofu
1 medium onion, rough chopped
1 c chopped or sliced carrots
1 c cauliflower florets, fresh or frozen
1 c broccoli florets, fresh or frozen
1 c chopped Chinese, Savoy or green cabbage
1 c sliced button mushrooms
1 can baby corn, drained and rinsed (optional)
1 c fresh pea pods or frozen peas
1-2 cloves minced garlic
2 eggs, beaten
2-3 diced scallions
peanut oil
sesame oil
soy sauce or soy paste
rice wine vinegar
Sriracha sauce (optional)

Preparation

Cook the rice in a rice cooker or otherwise according to package instructions. (Any kind of long-grain white or brown rice will work in this, but we prefer the taste and texture of white jasmine rice.) You can also use leftover rice! Note this is 4 cups cooked. It only takes about 2 cups of dry rice to make 4 cups cooked.
Drain the tofu and press it to remove excess moisture. (We wrap ours in a kitchen towel, between two plates, with a heavy can placed on top, for about 10-15 minutes.) Cut the tofu into 48 cubes. (That’s 2 x 4 x 6.)
In a large bowl, mix about 2 tbsp each of the soy sauce, sesame oil, rice wine vinegar and Sriracha until well blended. Add in the tofu cubes and toss very gently (they’ll break apart otherwise), until thoroughly coated. You can do this up to a few hours in advance so they’ll marinate, but I never plan ahead enough. Not a vegetarian or just hate tofu? Skip it! Or, chicken or shrimp will also work very well in this recipe. (Marinate the meat in the same mixture and stir fry it separately before the vegetables, then set aside until the end.)
Spread the marinated tofu cubes on a baking sheet lined with parchment paper, and bake at 400ºF for about 10-15 minutes. The timing isn’t super-critical; you just want them to get a bit crusty on the outside. You can also deep-fry them but I prefer baking.
While the tofu is in the oven you can do the rest of these steps. We’ll start with a typical stir-fry of the vegetables. This means adding in each type of vegetable every couple of minutes, so you need to approach them in order of how long they take to cook. In a large skillet or wok over medium-high heat, add 2-3 tbsp of peanut oil and a generous splash of sesame oil. When the oil is hot, add the onions and carrots. If you’re using fresh cauliflower, add it now as well. Stir fry for a couple of minutes, until the vegetables start to soften and change color. If the onion starts to turn brown, turn the heat down a bit or add a splash of water.
Add the broccoli, if it’s fresh, and stir fry for a couple of minutes, again until it starts to soften and change color. If your broccoli is frozen, go right to the next step. If you’re using fresh pea pods, add them now as well.
Add the cabbage and any frozen vegetables except peas. You know the drill… a couple of minutes, etc.
Add the mushrooms and baby corn, if using. Stir fry until the mushrooms have released their moisture and are starting to darken.
Add the frozen peas and the minced garlic, and stir fry for no more than 2 minutes. Add a splash of rice wine vinegar and stir well, then add about 2 tbsp of soy sauce or paste, and Sriracha to taste. Stir well and then remove all contents of the skillet to a large bowl. (I use the same bowl I tossed the tofu in, so the vegetables absorb whatever is left of the marinade.)
Wipe the skillet with a paper towel if there’s a lot of residue, or just leave it as-is. Return to the heat and pour in about 4 tbsp of peanut oil and another splash of sesame oil. This should heat up very quickly.
Add your rice to the skillet, breaking up any chunks, and spread it around in an even layer. Cook for a few minutes, turning occasionally, so that some grains get a bit crisp and brown, but not burnt.
Push the rice to the sides of the skillet in a ring, so there’s a large opening in the center. Add a touch more peanut oil, then pour in the beaten eggs. Let sit for a few seconds and then stir and break up as the eggs cook. (Pretend you’re making scrambled eggs for breakfast.) Cook the eggs until they’re no longer runny, but don’t overcook — we’re not done yet, and they will cook more.
Stir the cooked eggs and rice together until the egg is thoroughly mixed through. Reduce the heat to low. Add a generous amount of soy sauce or paste — at least 2-3 tbsp, and stir until well blended.
Add your vegetables to the skillet with the rice and egg and stir to blend together.
Take the tofu out of the oven if you haven’t already, and add it to the skillet. Stir again to blend.
Remove the skillet from the heat, and stir in the diced scallions.

Optional “Dipping” Sauce

We always make this fried rice with frozen vegetable potstickers. I make a sauce for dipping the potstickers using equal parts soy sauce, soy paste, rice wine vinegar, sesame oil and Sriracha. It’s good to make a bunch of this, because it is also great drizzled over the fried rice in your bowl!

Wait… Soy Paste?

I had never heard of soy paste before, but I got turned on to it a few years ago. It’s brewed in a similar way to the soy sauce we know well in America, but it’s thicker — almost the consistency of Hershey’s chocolate syrup — and it has a deeper and less salty flavor. You can pretty much use it interchangeably with soy sauce, but bear in mind that because it’s thicker, you might need to add a little bit of water to your skillet with it so it doesn’t just burn to the bottom. When you’re pouring it on top while serving though, keep it thick!

My favorite kind is Kimlan, which I pick up at United Noodles.

How to get (Mac) Safari to stop showing Favorites and Siri Suggestions panel when clicking the address bar

Not only do I never use it, I scarcely ever even noticed it before, but in recent versions of Safari on the Mac, whenever you click the address bar, a large panel pops out under it, displaying Favorites and Siri Suggestions.

Like I said, I scarcely noticed it before, but I did notice it the other day when I was doing a screen sharing session with a client. Luckily I don’t have anything embarrassing in my browsing history for it to reveal, but my recent activity did convince Siri that I would be extremely interested in links pertaining to the Minnesota Twins. Which I was not at that particular time.

But then it occurred to me… I never — I mean never — click on anything in that panel, but it does add to the visual “noise” of my daily browsing activities. So there’s got to be a way to get rid of it.

Yes, there is. I hunted around for it, so you don’t have to.

First, let’s turn off Siri Suggestions. This is an insidious pathogen that has metastasized throughout macOS, so if you’re like me and never use anything Siri-related, let’s kill it everywhere.

Open up System Preferences and click on Siri

Then in the Siri preferences, click the Siri Suggestions and Privacy button.

I went through the full list of apps and unchecked all the boxes, but at the very least you’ll want to uncheck Show Siri Suggestions in App under Safari:

Now if you go to Safari and click on the address bar, you’ll see Siri Suggestions is gone, but the panel with Favorites still shows up. You can get rid of it entirely by going to Safari > Preferences and clicking the Search tab. (Which… uh… is that really the way its icon is supposed to look???)

Uncheck Show Favorites under Smart Search Field… and maybe everything else. Then put on your tinfoil hat, sit back, and relax!

How to sort empty values last in WordPress

For the past several days I’ve been hammering my head against a conundrum: how to get WordPress to sort a set of posts in ascending order, but with empty values at the end of the list instead of the beginning.

This seems like it should be a simple option in the query. But MySQL doesn’t offer a straightforward way to do this. There are some fairly simple MySQL tricks that will accomplish it, but there’s no way to apply those tricks within the context of WP_Query because they require manipulating either the SELECT or ORDER BY portions of the SQL query in ways WP_Query doesn’t allow. (I mean, you can write custom SQL for WP_Query, but if you’re trying to alter the output of the main query, good luck.)

I tried everything I could possibly think of yesterday with the pre_get_posts hook, but it all went nowhere, other than discovering a very weird quirk of MySQL that I don’t fully understand and won’t bother explaining here.

Sleep on it

I woke up this morning with an idea! I resigned myself to the fact that this ordering can’t happen before the query runs, but I should be able to write a pretty simple function to do it after the query has run.

Bear one key thing in mind: This is not going to work properly with paginated results. I mean, it’ll sort of work. The empty values will get sorted to the end of the list, but they’ll stay on the same “page” they were on before the query was run. In other words, they’ll be sorted to the bottom of page one, not of the last page. Anyway… consider this most useful in cases where you’re setting posts_per_page to -1 or some arbitrarily large number (e.g. 999).

The function

This simple (and highly compact) function accepts a field name (and a boolean for whether or not it’s a custom field [meta data]), then takes the array of posts in the main query ($wp_query), splits them into two separate arrays — one with the non-empty values for your selected field, one with the empty values — and then merges those arrays back together, with all of the non-empty values first. (Other than shifting empties to the back, it retains the same post order from the original query.)

function sort_empty_last($field, $is_meta=false) {
  global $wp_query;
  if (!$wp_query->is_main_query()) { return; }
  $not_empty = $empty = array();
  foreach ((array)$wp_query->posts as $post) {
    $field_value = !empty($is_meta) ? get_post_meta($post->ID, $field) : $post->{$field};
    if (empty(implode((array)$field_value))) { $empty[] = $post; }
    else { $not_empty[] = $post; }
  }
  $wp_query->posts = array_merge($not_empty,$empty);
}

Calling the function

As I said, this function is designed to work directly on the main query. You just need to call the function right before if (have_posts()) in any archive template where you want it to apply. Because of the way it works — especially the posts_per_page consideration — I thought calling it directly in the template was the most clear-cut way to work with it. Here’s an example of the first few lines of a really basic archive template that uses it, looking for a custom field (meta data) called deadline:

<?php

get_header();

sort_empty_last('deadline', true);

if (have_posts()) {

Super-easy filterable lists/tables with jQuery

I’m working on a page that will potentially have a very long table of information, and I wanted a way to filter the table to only show rows that contain a specific text string.

Fortunately, with jQuery that’s super easy. It took me about 3 minutes to build and test. Let’s take a look!

First, you want to create your table. Give it a class you’ll be able to use to tell jQuery this is what you’re filtering. Something like this:

<table class="filterable">
  <tbody>
    <tr>…</tr>
  </tbody>
</table>

Now let’s put in a little form field for entering the filter string. This is old news now, but HTML5 lets us use one-off form inputs for on-page actions without having to wrap them in a <form> tag, so let’s just stick this into our HTML above the table:

<div>
Filter: <input type="text" id="list_filter" />
</div>

Now here’s where it gets fun. In jQuery, we’re going to watch for the keyup event on the input. If the input has a value (i.e. is not empty), we’ll do our filtering. If it is empty, we’ll just reveal all of the rows in the table again.

We probably want the filter to be case-insensitive, so we’ll make both the input string and our check of each row’s text all-lowercase with .toLowerCase().

Next we’ll step through each row of the table, check if our filter string is not present (.indexOf() == -1) in the .text() inside that row. If it’s not there, we’ll hide the row. Otherwise, we’ll show it. (This last bit is important because we want to start revealing previously hidden rows if the user deletes characters from the filter input.)

Yeah… that’s pretty much it. And since it’s all jQuery interacting with elements already present on the page, it’s lightning-fast.

<script>
  jQuery(function() {
    jQuery('input#list_filter').on('keyup', function() {
      if (jQuery(this).val() != '') {
        var filter_val = jQuery(this).val().toLowerCase();
        jQuery('table.filterable tbody tr').each(function() {
          if (jQuery(this).text().toLowerCase().indexOf(filter_val) == -1) {
            jQuery(this).hide();
          }
          else {
            jQuery(this).show();
          }
        });
      }
      else {
        jQuery('table.filterable tbody tr').show();
      }
    });
  });
</script>

A few other notes:

The way this is built, you could conceivably have multiple filterable tables on one page, but only one filter input. The filter would automatically get applied to all filterable tables on the same page. There are various ways of changing this by modifying your selector.
I am deliberately only checking for <tr> tags inside the <tbody> tag to allow for a header row inside a <thead> tag that would not be subject to the filter. If you have a header row inside your <tbody> tag, it’s going to get filtered too! Probably not desirable.
You could play around with making the whole thing smoother with .slideUp() and .slideDown() instead of .hide() and .show() but that UX can get messy in a hurry.

Responsive horizontal scrolling tables for phones in CSS with no additional HTML

For some reason I always forget how to do this, and most tutorials out there suggest wrapping your table in a container <div> tag but as long as you’re using <tbody> (and, ideally, not using <thead> or <tfoot>) then it’s easy with a small bit of CSS and no HTML changes at all.

The trick is to display your <table> as a block, and your <tbody> as a table!

Here’s the code. Fit it into whichever breakpoint makes sense for your site. Mine shown here is the standard phone width breakpoint for WordPress (782 pixels):

@media screen and (max-width: 782px) {

  table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }

  table tbody {
    display: table;
    width: auto;
  }

}

Of course, right after I posted this I found that I had already written about it two years ago with a slightly different solution. Never hurts to have a slightly different perspective.