9 December

This is the kind of thing that I find maddening about Gutenberg

First off, if you are the regular reader of this blog, you are painfully aware of how much I am waffling on rejecting or embracing Gutenberg (a.k.a. the WordPress Block Editor). There are things I genuinely do like about it, but I also have some fundamental disagreements with its approach (like the facts that it writes inline CSS directly into post content, or that its templates don’t support PHP code).

And then there are the weird little quirks that just make using it much more difficult than it needs to be. In general I have learned that this comes down to the incredible finickiness of JSON. Fine. But the fact that one character out of place in the theme.json file can break everything seems a bit ridiculous… or at least, a big step backwards for usability.

Fix your syntax. Sure. I wish JSON allowed trailing commas the way PHP — and even JavaScript! — does, but I can grok the fact that it doesn’t and learn to adapt. What I have a bit more trouble with is the problem that struck yesterday, only because it was so hard to pin down.

I’m working on a new, small block theme as a one-off for a unique project — a website that will feed menu board monitors in a pizza place. Seems like a perfect opportunity to practice and experiment a bit with what Gutenberg can do. (And, after over a decade of trying to find the “right” way to give restaurant staff a reliable but still easy-to-manage web interface for updating menu information, I actually think Gutenberg’s Block Patterns might be the optimal solution.)

So here’s the maddening thing. I was setting up my theme.json file like a good Block Theme developer, defining all of my colors, typography, etc. And then I started loading in some test content. All looked fine on the back end, in the Block Editor itself. But none of the styles were getting applied on the front end!

I googled the problem, of course, and found a WordPress forum thread about this very issue.

Huh. Sure enough, what’s described in the thread was exactly what was happening in my case. I had this line in my code (font names changed to protect the innocent):

"fontFamily": "'Helvetica Neue', 'Comic Sans', 'sans-serif",

Do you see the problem there? (No, it’s not the trailing comma… that actually belongs, in context.) It’s the stray apostrophe before sans-serif. Removing that fixed the problem.

Now, if this were just in straight CSS, I would have seen the problem immediately, because the syntax highlighting in BBEdit would’ve gone all wonky. But since this was inside a text string in JSON, it looked just fine, and I didn’t notice the apostrophe was there.

I get that the parser that converts the contents of theme.json into CSS would get thrown off by this. Honestly, I’m surprised it didn’t cause the whole page to bork with a PHP fatal error… I’m pretty sure earlier versions did throw a fatal error if there was any problem parsing the theme.json file. So this is… an improvement?

I also get that the generated CSS output would not work properly. What I don’t get is that it all looked correct in the Block Editor. Why was the Block Editor on the admin side able to “fix” this issue, but on the front end it didn’t? It doesn’t make sense!

Anyway, trying to unravel that mystery wasted about an hour late yesterday afternoon, when I was finally starting to get productive after having a near existential crisis over Gutenberg for most of the week.

These are hard times to be a WordPress developer. No, strike that. These are hard times to be a generalist web developer who happened to make the fateful decision 8 years ago to go all-in on WordPress.

ST:TNG Treadmill Review #10: Q Who

Q Who
Season 2 Episode 16
Original airdate: May 6, 1989

Netflix Synopsis

Q tries to prove that Capt. Picard needs him on the crew by hurling the Enterprise 7,000 light years away, where they first encounter the Borg.

My Brief Review

Here we GO. This may not be the absolute best episode of TNG, but it is unquestionably one of the most pivotal. This is our introduction to the Borg. Q of course is involved, and this is also where we learn that Q and Guinan know each other (and not on friendly terms). Q manages to “Q” it up without being too annoying (unlike the episode in season 1 where he tried to recruit Riker to join the Q Continuum), the Borg conceptually are still a bit rough around the edges, and all of the core crew play meaningful roles in the progression of the story. I actually ran for the entire episode this time, a first for these reviews.

Memorable Moment

For me the most chilling moment with the Borg is when we first learn how they relentlessly adapt: a drone beams aboard the Enterprise and begins scanning the computer. After first trying to stun it (to no effect), Worf is given permission to set his phaser to kill. Which it does. But a moment later a second drone beams aboard, and when Worf attempts to shoot it with the same phaser setting, we see that it has adapted its personal shielding to the phaser and is not harmed at all. Then it removes data packs from the dead drone, beams back out, and the dead drone is vaporized. Yikes.

Crew Rando

Talkative Ensign Gomez, newly stationed on the Enterprise, bumps into Captain Picard with a cup of hot chocolate in her hand, leading him to return to his quarters for a change of clothes. It’s at that moment that he’s whisked across space by Q and the entire scenario begins, so in a way… she’s… responsible for the Borg coming after humanity? Perhaps I’m overthinking it.

Distance Rating: 7K

IMDb score: 9.0/10

Tips on saving vector images from Adobe Illustrator for SVG web use

With Internet Explorer 8 end of life coming on January 12, all kinds of new possibilities are opening up to us web developers who can finally start making use of technologies that have had wide support in modern browsers for years, but that we were reluctant to embrace because of the need for IE8-friendly workarounds.

For me, one of those things is SVG images. In recent years, especially since Responsive Web Design (and high-resolution displays) took off, I’ve been receiving web designs more and more in Illustrator format, rather than Photoshop. It’s great to get these assets as vectors that I can scale and size as I need in my build-out of high-res, responsive websites. But until now I had still been pulling vector assets over into Photoshop and producing multiple carefully-sized versions of things like logos and custom icons.

Now, however, SVG is a viable — in fact, preferable, given its flexibility and smaller file size (plus the ability to hack the XML code right in the image files themselves) — alternative to multiple PNGs of every image.

The thing is, while I have been using Photoshop extensively for over 20 years, I’ve never really gotten the hang of Illustrator. I know just enough to go into an Illustrator file, pull out the assets I need, and try not to screw anything else up in the process. That’s what this article is for.

Over the past week I have pulled a number of vector assets out of Illustrator designs as SVGs for a couple of projects, and I’m starting to get the process down. Here’s what you need to know.

The Steps

1. Select the object you want to make into an SVG. Most of the time designers will have grouped the pieces of the object together, so just a single click on the object will select it. Make careful note of the blue outlines to be sure everything you want is selected (and maybe even more importantly, that nothing else you don’t want is). You can also click and drag to select all objects within an area, or use the Layers palette to select the elements. This can be tedious, but be sure you’ve got what you need — and only what you need — highlighted. Once it’s selected, copy it to your clipboard.

2. Create a new document in Illustrator. Default settings are fine. Once the blank document appears, paste in the copied object. It should appear centered in the document. There should be a ton of space around it. That’s good. Since we’re dealing with vector art, scale is irrelevant. You just want to make sure everything fits within the boundaries of the document. (The “artboard” if you’re familiar with Illustrator speak.) Keep the object selected (blue outline). If you deselected it, just Select All.

3. Shrink the artboard to fit the object. If you don’t do this, you’ll end up with a bunch of blank space within the defined dimensions of the image and it will be impossible to work with. Good thing it’s super easy. With the entire object selected, go to Object > Artboards > Fit to Selected Art and you’ll get a perfect container.

4. IMPORTANT! If there are transparency effects within the object, you need to flatten it now. A lot of the time you can skip this step. But if you do, you may find that parts of the design are missing in the resulting SVG. I found it’s easy to forget this; I don’t find it intuitive that this would get lost in the SVG conversion. So go to Object > Flatten Transparency… Review the settings here to ensure you’re happy with them (sorry, I don’t have a lot of guidance here), and click OK Your image should not look different. If it does, undo, and repeat with different settings in the Flatten Transparency dialog.

5. Save. There’s no “Save for Web” option for SVG. Just regular ol’ “Save As”. Be sure to set the Format menu to SVG (svg). You could try compressed, but really SVGs are pretty small anyway, and I like to keep the code editable so I can tinker with it if needed. (Changing the color fill, for instance.) Once again there are a ton of settings presented in the SVG Options dialog, but I’ve found the default settings seem to work fine. (One change I have made is to set CSS Properties to Presentation Attributes but I’m not entirely sure yet what difference it makes.)

That’s it! You should now have an SVG ready for placement using an <img> tag, or as background-image in CSS. Just note that CSS treats SVG images a bit differently than regular JPEGs and PNGs, so you may need to add a few extra properties to keep the SVGs within their container elements in your page.

Resolved: All tech bloggers (including myself) are longwinded, narcissistic douchebags (except maybe John Gruber, depending on what he means by his latest post)

Why's it so green?There are some tech blogs I read a lot, and there are others I rarely read.

The ones I read a lot tend to have certain characteristics in common: they’re relatively simple in design; they frequently veer off-topic into tangential areas I also find interesting (meaning they’re written by real people instead of corporate tools); and they usually have few if any ads, usually served by invitation-only ad networks like The Deck. (I’d love to be invited to make ancillary income from an exclusive ad network but for now I am settling for the pittance Google throws my way.) Most importantly, they usually get right to the point.

The ones I rarely read also have certain characteristics in common, and unsurprisingly, most are diametrically opposed to the characteristics of the blogs I do read: they’re cluttered, with too many navigation tabs leading you to related sites in the “network” owned by the same faceless holding corporation; they usually stay within their narrowly-defined topical box dictated by said faceless holding corporation; they’re swimming in obnoxious Flash ads that creep across the text and force you to interact with them, if only to shoo them away. And they blather on and on, clearly paid by the word, with insipid, uninformed (despite their extensive network of industry connections and apparently large readership) opinions.

Now at this point you may be thinking my own blog more closely resembles the second group, save for the corporate overlords and industry connections (and money). And maybe you’re right. But that’s my own failing, and is probably why this blog falls into the “audience of one” category.

Anyway… by now it’s probably obvious to anyone reading this blog regularly (i.e. me) that one of my primary sources of tech news is John Gruber’s Daring Fireball. Gruber is an Apple fan, but he’s also highly insightful and more than willing to criticize Apple when he thinks they’ve screwed up (see the ongoing App Store debacle). I’m less appreciative of Gruber’s enthusiasm for the New York Yankees. But my favorite aspect of Daring Fireball is probably the “Claim Chowder” posts, where he cites foolish claims from the past — often focused on Apple’s perpetually-impending demise — that have since been proven egregiously false. There are two of what I would call “corporate bloggers” who are frequent targets of his ridicule: Rob Enderle and Michael Arrington.

Today Gruber hit the jackpot: Enderle is commenting on Arrington. Well, sort of. He’s actually commenting on the JooJoo: the poorly named phoenix rising from the ashes of Arrington’s ill-conceived and now doomed device concept, the CrunchPad.

I still do not “get” tablet PCs. I especially don’t get the JooJoo: as large as a regular laptop, and priced as high as an entry-level model, but with no keyboard, and a handful of other frustrating limitations for the form factor. What it really comes down to for me is that it’s as big as a laptop, but it can’t do everything a laptop can do. And it’s not cheap enough for price to make a significant difference. What niche is this thing supposed to fill?

I’ll be honest — when I first heard rumors that Apple was going to make a phone, I thought it was a terrible idea. I managed to avoid my own case of claim chowder by not really mentioning the iPhone announcement on this blog when it hit, but suffice to say as much as I thought an Apple phone was never going to happen — even right up to the beginning of the keynote where it was announced — by the end of the demo, I was convinced that the iPhone was the best invention ever. Like the iPod, it filled a niche. Before the iPod, MP3 players… well… they sucked. And before the iPhone, cell phones, even “smart” ones, pretty much sucked too. The iPhone worked because it brought together all of the best qualities of a number of disparate devices that had never previously existed in the same unit, along with a few brilliant new ideas of its own (all while getting rid of most of the “suck”), wrapped up in the first such device designed with the level of polish and perfection to satisfy Steve Jobs.

Ultimately though it was all about the niche. The devices we could carry in our pockets before the iPhone simply couldn’t do the kinds of things we now take for granted, thanks to the iPhone. I just don’t see a laptop-sized device, with a subset of the features of a laptop and a low-end laptop price tag, filling any kind of a niche. The thing needs to be able to do things current, comparably sized and priced devices can’t. And this doesn’t.

The question of whether Apple can produce something that does is another matter. At the risk of cooking up a steaming pot of claim chowder, and with my early disdain for the Apple phone rumors still in mind, I have to say I just don’t see something like this coming out of Apple, despite the incessant rumors of parts orders from Chinese manufacturers.

All the rumors say Apple’s tablet will be based on the iPhone OS, which seems more likely to me than a Mac OS tablet. But there’s too much about the iPhone “ecosystem” that just wouldn’t seem to translate to a larger tablet device, most obvious being the fixed display resolution. No way is Apple going to produce a device with a 10-inch screen and 480×320 resolution (even the original 1984 Macs had 512×384 displays), but by that same token, I don’t see the iPhone OS interface suddenly supporting multiple resolutions when there are over 100,000 apps all built around this one fixed resolution. Though I haven’t worked with iPhone development, I’m willing to bet that enough iPhone app interfaces use bitmapped images (not scalable vector graphics) that they’d appear completely broken at any other resolution — and even if they are vector-based, they’d scale up in a way that would look ridiculous. And this is just the most obvious reason to me that an iPhone OS-based tablet seems far-fetched.

But all of that doesn’t even get to my point. My point is bloggers like Arrington and Enderle, who make their livings spouting nonsense speculation far worse than what I’ve undertaken in the past two paragraphs, and other bloggers like Gruber who make a (more modest) living partially by calling them out on their bullshit. Which brings me back to Gruber’s latest post. I’m not even sure what to make of it:

Further proof that Enderle’s idiot shtick is an act.

I know Gruber has been speculating lately that Enderle is deliberately writing crap (for whatever nefarious purpose one would have to do such a thing, much like how Gretchen Carlson dumbs down her commentary on Fox News, as revealed by Jon Stewart last night), and that’s entirely possible. But I honestly don’t know what Gruber really means by this comment, in regards to Enderle’s specific post on the folly of the JooJoo (which seems right on) and his thoughts on what it might mean for a future Apple tablet. Personally I think this kind of does spell trouble for an Apple tablet, but only because I think the tablet is kind of a stupid idea anyway.

Time will prove all of us right or wrong. If nothing else, Enderle and Arrington (and Carlson) give us an interesting spectacle to watch… just like a train wreck.

Update: In the time it took me to write this post, Gruber amended his original post with the following, which provides some much-needed (though perhaps not enough) clarification:

I mean, come on, no one really believes that the JooJoo is going to affect Apple even one iota, right?

This can be taken in one of two ways. It all depends on whether or not you think Apple is actually working on a tablet.