31 May

Chick Corea on the 8’s

After 30+ years, I’m trying to give this album another chance. (It’s not on Apple Music so I had to find it on YouTube.) I bought this album in high school after I joined jazz band and wanted to learn more about the genre. But I really did NOT like it, so I sold the CD, and haven’t heard it since.

I remember liking Chick Corea’s playing and John Patitucci’s bass, but I thought the synth tones were cheesy, the snare drum was mixed way too loud (I still think that), and I didn’t really care for either Frank Gambale’s guitar or Eric Marienthal’s sax.

Listening now… well, I think it’s much better than I remember it being, even if some of it does sound like it should be playing on the Weather Channel’s “Local on the 8’s.”

A simple way to add responsive (breakpoint-specific) blocks in Gutenberg

The new WordPress Block Editor (a.k.a. Gutenberg) has improved immensely over the years, to the point where I am now willingly (although occasionally grudgingly) using it as my main development platform for client sites.

One area where it really falls down though is in smartly handling responsive breakpoints. There is some effort to make it responsive-friendly (though it’s definitely not “mobile first”), but there are really weird holes, like the fact that there’s no built-in way to apply consistent left and right margins on text content at smaller screen sizes; once you’re below the defined content width, if you don’t manually configure your theme to add padding/margins to headings, paragraphs, etc., and they don’t have a defined background color, the text will bump right up against the edges of the screen.

That’s not the problem I’m here to solve at the moment, however. Instead, I want to focus on a handy little tool I’ve been using in my WordPress development for over a decade: specialized CSS classes to designate blocks of content as only appearing on phones, or not appearing on phones.

By “phone” here I just mean the smallest standard breakpoint. I’m using the WordPress convention (at least it used to be the WordPress convention; I don’t feel like I can trust anything anymore) of setting that at the slightly odd (although even) value of 782 pixels.

What can you do with this? Once you have CSS classes that designate a block as only appearing on phones or not appearing on phones, then you can easily tailor your output to certain screens. Obviously (at least, I hope it’s obvious) this is not the ideal solution; it means you’re delivering HTML content — potentially redundant HTML content — that will not be seen by some users. But nothing in web development is perfect, and this can be a convenient way to get out of a pinch when, for example, you have a very complex desktop layout element that simply cannot be adapted in a usable way on phones. You can just hide that element on the phone breakpoint and, if desired, present the same content in a more simplified way to only phones. (Again… only if you can’t achieve a usable phone experience on the same HTML block via media query-specific CSS.)

OK, let’s get down to it. The first thing you need to do is register a couple of block styles. I am only making these styles applicable to the Group block, because that seems like a logical way to rein it in. Any block can easily be wrapped in a group, so if you need this feature, just do it.

register_block_style('core/group', array(
  'name' => 'no-phone',
  'label' => 'No phone'
));

register_block_style('core/group', array(
  'name' => 'phone-only',
  'label' => 'Phone only'
));

That should go into your functions.php file or wherever in your theme you are defining block characteristics. Ideally it should be in a function that is executed on the init action. Next, you need to make sure you’ve got a custom block style .css file enqueued for the Group block. You can place this wherever is appropriate within your theme; I happen to have a nested assets/css/blocks folder where I put mine. Here’s that bit of code, also for your function that runs on init.

wp_enqueue_block_style('core/group', array(
  'handle' => 'my-theme-core-group',
  'path' => get_theme_file_path('assets/css/blocks/core-group.css'),
  'src' => get_theme_file_uri('assets/css/blocks/core-group.css'),
));

And then in the referenced core-group.css file, you’ll need this:

@media screen and (max-width: 782px) {	
  .wp-block-group.is-style-no-phone {
    display: none !important;
  }
}

@media screen and (min-width: 783px) {
  .wp-block-group.is-style-phone-only {
    display: none !important;
  }
}

Now in the Block Editor, when you switch to the Styles tab when focused on a Group block, you’ll see your new style options:

When WordPress Treats an Administrator Like a Contributor

The first sign that something was wrong was when I tried to create a new page on the client’s site. The blue Publish button I normally see was replaced with Submit for Review. What the…? That’s what WordPress users with the lowly Contributor role usually see. But I’m an Administrator — the most mighty role known to the world of (single-site) WordPress. (Yes, multi-site installations also confer the fearsome title of Super Admin upon a select few.)

Worse still, if I tried to click Submit for Review, it wouldn’t actually save!

Other problems abounded — I tried to create a new user with Administrator privileges, just to see if my own user account was corrupt. Couldn’t save that, either.

I had Debug Bar installed, and I noticed it was giving an error:

WARNING: wp-admin/includes/post.php:641 - Creating default object from empty value
get_default_post_to_edit

Well, that’s not good. Googling the error didn’t lead to anything immediately helpful, besides this comment that led me to explore the database structure in phpMyAdmin for any problems.

Yes, there were problems. Many of the tables, including wp_options, wp_posts, wp_postmeta and wp_users were missing their primary keys. A bit more digging into the WordPress core showed that, for complex reasons (i.e. I don’t totally get it), without primary keys on these tables, WordPress can’t determine the post type of a new post, and if it can’t determine the post type, it can’t determine the user’s capabilities with regard to that post type, which all comes back to…

WARNING: wp-admin/includes/post.php:641 - Creating default object from empty value
get_default_post_to_edit

Googling on the matter of WordPress tables missing their primary keys (or, perhaps more pertinently, their auto-increments), led me to a solution!!

Fixing WordPress indexes, foreign keys and auto_increment fields

Well, a partial solution. Because the database I was working with was not damaged in exactly the same way as the one the OP was working with, I couldn’t use the sample code directly. I had to go through the database and manually create a few primary keys, delete a bunch of auto-draft posts that all had an ID of 0, etc. Then I had to skip a few lines of the OP’s SQL code because they referred to tables that hadn’t lost their keys in my case, for whatever reason. But this is the… key… to solving the problem.

Now then, how did the database get this way? Well, the site lives on a fairly creaky old Fatcow (ugh, that name) shared hosting account, running an old version of MySQL and an almost unrecognizably ancient version of phpMyAdmin. We were undertaking major content changes on the site, so I copied it over to my own sleek, modern staging server running the latest and greatest of everything. The idea was that we’d get all of our changes in place just the way we wanted on the staging server, rather than mess up the live site for 2-3 weeks, and when we were done, we’d just copy everything back over.

Slick. Right? Sure, if both servers are running reasonably identical software versions. Which of course is never the case. Ever.

Apparently when I copied the site back to Fatcow, due to the older MySQL (or possibly phpMyAdmin) version, certain things like the primary keys and auto-increments — and, I’d be willing to bet, but I’m not sure it matters, the collation as well — got lost along the way.

Social media case study #001: @Mike_FTW and Twitter jackassery

I don’t know Mike Monteiro personally. Apparently I do know someone else who does, but that’s irrelevant here. This post is not about Mike Monteiro, the flesh-and-blood human being, owner of Mule Design Studio and author of Design Is a Job. This post is about @Mike_FTW (NSFW, depending on where you W), Mike Monteiro’s Twitter persona.

In case you’re curious but afraid to click that last link, allow me to explain, as the imagery is critical to my understanding of what @Mike_FTW is all about. The background image on Mike’s Twitter page is a topless photo of Bea Arthur, circa early 1970s. It is a rather plain-looking photo, neither sexualized nor grotesque. It’s almost like a school portrait, actually, except for the fact that she’s not wearing anything.

It may seem a little odd that I should fixate so much on this photo in trying to understand what @Mike_FTW is all about, but I think it’s key. It’s like a surgeon general’s warning for his Twitter feed. It’s provocative, confusing to some, but ultimately benign. But what is it really saying? If Mike were simply trying to (pardon my word choice) titillate, he certainly would have chosen a sexier photo. If he were trying to scare people off, he’d have gone with one more extreme.

I think there’s something much more deliberate, more considered, about this choice of photo. Because while it may ultimately be benign, it’s not without meaning. Bea Arthur, especially in the early 1970s, was a major public face for feminism with her TV show Maude. She chose to have this photo taken and made public. I don’t know all of the circumstances surrounding it, but what it says to me is, “Get over it. They’re just boobs.” It’s a challenge to both ends of the morality spectrum to lighten up, loosen up, toughen up, and wise up. And I think that’s really what Mike Monteiro’s mission is with @Mike_FTW.

@Mike_FTW is almost always abrasive, coarse, and rude, but with an underlying ethos that isn’t too hard to pick up on if you’re paying attention. A couple of recent stunts have cast this in a clear light.

Mike Monteiro: Splenda yoga mom

On May 21-22, @Mike_FTW temporarily changed tone, posting a series of tweets with a cloyingly banal new persona he dubbed “Splenda yoga mom”. It confused and outraged some of his followers, not unlike the “straight” episode of Sealab 2021. Eventually he came clean, explaining in a succinct set of tweets how this stuff works:

@Mike_FTW comes clean

A few tweets from May 22, 2012 wherein Mike Monteiro talks about what he does on Twitter.

Storified by Scott Anderson · Thu, May 31 2012 10:16:45

So here’s the problem, now that I know you guys want me to be a jerk, I kinda don’t wanna be one.Mike Monteiro
‘Cause let’s face it, I’m not really a jerk. Nor am I the Splenda yoga mom I was pretending to be the last few days.Mike Monteiro
We’re all complex beings. And our online personas are just another layer of complexity added to our identity.Mike Monteiro
Jerks can pretend to be nice. Nice people can pretend to be jerks. The truth is that we’re all constantly ebbing and flowing in between.Mike Monteiro
And in the end, all we’re left with are the impressions we leave across one another. You’re the sum of others’ smiles and tears.Mike Monteiro

But it’s more than that. Because he didn’t just pull a stunt to piss off his followers by confounding their unjustified expectations of how he should behave on Twitter. He wrapped the stunt in a successful effort to make a real, positive difference in the world by drumming up thousands of dollars in donations to SmallCanBeBig.org.

What is the value of a tweet?

Yesterday, this happened: Atlanta-based web developer John Graham wrote a blog post, never intended for a wide audience (as most blogs, this one included, rightly should not be) about why he stopped listening to John Gruber’s The Talk Show podcast, and why he unfollowed @Mike_FTW. The post did not offer any great insight, nor was it particularly interesting to anyone beyond the author himself. But there’s no indication that he ever intended it to be, except for one thing: he included “@Mike_FTW” in his tweet about the post. Monteiro picked up the ball Graham had gently placed at his feet, and ran with it.

This time the stunt was to get @johnegraham2 1000 Twitter followers in a day, and get them all to unfollow him en masse a day later. Again the stunt worked… and again it raised over $1000 for SmallCanBeBig.org. In his blog post, John Graham said “The problem for me is that I don’t find him funny and therefore there doesn’t seem to be any value in his tweets.” Humor is subjective, of course, but raising over $1000 to help a family in need in a matter of hours isn’t. A lot of people may not agree with Mike Monteiro’s tactics (if they even understand them), but it’s hard to argue they’re ineffective.

So what’s your point?

What can we really learn from @Mike_FTW, the Twitter alter-ego of Mike Monteiro? How much of it is Mike, and how much is an act? Unless you know Mike personally, that question is impossible to answer. Likewise his motivations to do what he does, the way that he does, are a bit of a mystery. Still, there are some lessons here for how to use social media effectively, something that isn’t lost on @Mike_FTW. After the first stunt, he tweeted in his typically humble fashion:

And, yesterday:

Meanwhile, John Graham, the butt of the joke, responded on his blog and SmallCanBeBig.org showed their appreciation:

What do I learn about social media strategy from Mike Monteiro? First off, don’t think about “social media strategy”. If that’s your focus, you’re doomed to failure. Engagement on social media may be superficial, but it’s real. If you’re doing it to “build your brand” or “extend your reach” or some such nonsense, give up. You have to do it because you want to. You have to mean it. Even if you’re taking on an obnoxious persona that will enrage as many people as it delights, make it meaningful.

Second, be interesting. That doesn’t mean being a “great guy” who’s boring to follow. Don’t play it safe. Take chances. Be distinctive. Be funny, weird, rude, unpredictable. Social media is entertainment as much as anything else, and if you don’t entertain people, they won’t stick around.

Third, or maybe second-and-a-half, have a distinct voice. Remember, the people who only know you through social media only know you through social media. The persona you create doesn’t have to be you, but it has to be someone.

And finally, have fun. I don’t think there’s any doubt that Mike Monteiro has fun with @Mike_FTW. And he certainly has fun poking people who take themselves too seriously.

Update: Mike Monteiro has clarified that the background image on his Twitter page is a painting, not a photo, which is why it hasn’t been banned by Twitter. This fact may alter the veracity and implications of my statement that Bea Arthur posed for and approved the image, but I think the larger message is still relevant. They’re still just boobs.

Also, contrary to all obvious indications, I did not deliberately craft this post in a way to fish for a response, retweet, or acknowledgment from Mike Monteiro. But, perhaps, @Mike_FTW is another story.

Update #2: I neglected to mention this in the original post above, but I think it’s worth at least noting: the situation that seems to have pushed Mike Monteiro over the edge in the case of both of these “stunts” (my word) is the vitriolic reaction many people have had to John Gruber taking The Talk Show to Mike’s Mule Radio Syndicate. It’s not directly relevant to the point I was trying to make here, but it’s probably helpful to provide some context. Mike may be acting like a jerk on Twitter, but it’s nothing compared to some of the reactions he gets.

How to not bother testing websites in Internet Explorer 8

Or: What Microsoft probably doesn’t really want you to do.

Internet Explorer 8 is supposed to be more standards-compliant. Ya-freakin’-hoo. (No relation to Yahoo!) I don’t especially care, and I’d like to think the best way IE8 could become standards-compliant is to not exist in the first place. But, it’s here, and when Windows 7 arrives later this year, we (the web designers and developers of the world) will have to get used to it.

I do have Windows 7 RC running in a virtual machine on my MacBook, so I can test IE8. But waiting for several minutes for it to log in (for some reason), I came to the decision that maybe it’s not worth testing in: maybe it’s best to just take advantage of its “IE7 Compatibility Mode” to not need to test in it. It’s not like IE8 being standards-compliant (yet, somehow, still not rendering pages like Firefox and Safari) is really going to save me any time, because I’ll still need to test in IE7 (and, God help me, IE6) for years to come. Why add a third Bizarro-world Microsoft browser to the mix?

IE8, brought to you by people who don't see anything wrong with this image.

Internet Explorer 8, brought to you by people who don't see anything wrong with this image.

So I googled ie8 ie7 compatibility mode and found a helpful, if slightly douchey, blog post from a Microsoft “developer evangelist.” Of course, his blog renders completely f’ed up in Firefox, and even if it didn’t it would probably still be displaying the hideous matted-to-white-transparent-GIF-on-a-dark-background you see here.

Nonetheless, he did still give me the code snippet I need. Stick this in the header of all of your pages (which, hopefully, means editing just one file, riiiight?), cross your fingers, bow your head in the direction of Redmond and, if all goes well, you won’t have to think about IE8 (ever?) again.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

I’m going to try it out now.

Perhaps I went out on a limb when I referred to this blog post as douchey. Never mind the fact that the guy is a “developer evangelist” for Microsoft, which is enough in itself. The two d-bag moments for me were: 1) the opening couple of sentences: “As you all know, the Internet Explorer team has been working hard to make IE8 the most standards compliant browser around. Unfortunately, not all web sites confirm [sic] to these standards today.” In other words, Microsoft has undertaken a noble effort to build something perfect and wonderful, but all you apathetic and/or malevolent web designers out there are conspiring to destroy it. And 2) “Lastly, for those of you running Apache instead of IIS (shame on you!)…” Yes, shame on you for using the most popular and stable web server software in the world. Actually, yes, shame on you for running Apache on a Windows server. You’re an even bigger douche than he is.

Update: Adding this meta tag to a client site I’m currently working on didn’t seem to have any effect on IE8, but that may be because I had manually clicked the compatibility mode button in a previous session, turning it off. (So, in other words, I am positing that if the user has manually turned off compatibility mode, it will stay off even if the page tries to activate it.) Turning compatibility mode on manually did work — the rendering issues I saw with IE8 in its normal mode went away.

Now, the thing that concerns me about all of this is that my page should be pretty damn well standards-compliant: the doctype is XHTML 1.1, which is very unforgiving, and I’ve validated it. The page looks fine in Firefox and Safari. It’s possible that the source of the problem is my IE-specific CSS file, that is fixing IE7 problems that don’t exist in IE8 (and thereby introducing new problems there). The next step would be modifying the conditional comments so that IE8 doesn’t load the IE-specific CSS, and checking whether that solves the problems. The culprit may also be IE7.js, which I viewed as a lifesaver when I started using it about a year ago, but increasingly seems to be of little to no benefit.