Category: Computers & Technology - Page 4

Sometimes I wonder if anyone at Apple actually uses their products in the real world, episode #532,464: the iPhone QR Code Scanner app

QR codes are a convenient way to open a URL with your phone without having to type a long string of text (especially since it’s hard to avoid typos in a URL on a phone touchscreen).

But.

The iPhone’s QR Code Scanner app in the Control Center has a really annoying feature: It doesn’t open URLs in the Safari app; it opens them in its own embedded browser.

I’m not really sure why Apple chose to do this, or why they don’t realize what an issue it can create for users. What is that issue?

If you leave the app, when you go back to it, you’re back to the camera view for scanning a new QR code, rather than whatever web page you were interacting with.

There is no “history” in Code Scanner. No “back” button on the camera screen.

Sometimes this can be trivial. Sometimes not. Here’s a scenario I just went through that turned out not to be an issue, but it very well could have been.

It was time to renew the vehicle registration on my car with Minnesota Driver and Vehicle Services. (Yes, in most states we’re talking about the DMV, but since Minnesota always has to be different, here it’s DVS.) DVS is getting into the 21st century, and they’ve started emailing out the renewal notices instead of sending paper copies. And, the email included a QR code for me to jump-start the renewal process. Cool!

So, I scanned the code (off my Mac screen) with my iPhone, and started the process. (Maybe it’s possible for the Mac to read QR codes out of an on-screen PDF… I should investigate that.)

At the end of the process, since I was paying with my debit card, I got a pop-up alert from my bank’s app about the transaction. I would have ignored that, but I got two alerts from the bank. Worried I had double-submitted, I jumped over to the bank app. No, it was fine; the second charge was just the 2.15% credit card processing fee the DVS website had warned me about.

But now… oh no! I had been completing all of the process in the Code Scanner app, so the little “back” link at the top left of my iPhone screen took me back there, which of course forgot about that complex series of web form screens I had just stepped through, and blithely displayed the camera again for me to scan a new code. Damn! Was the process complete? Probably. I hope so. I opened up my email and saw a confirmation from DVS, so presumably everything was finished. But I won’t know for sure until I get my tabs in the mail. Ugh.

Now see, here’s the thing I keep forgetting in the moment. When you scan a QR code with Code Scanner, and that QR code is a web URL, Code Scanner opens the page in its own embedded browser. But there’s a little button at the bottom right to open the page in Safari.

If you have the foresight (or memory) to tap on that little Safari compass icon as soon as you’ve scanned a QR code, all will be well with the world. But if you’re just focused on whatever you’re trying to do with the web page you’ve just opened, it’s really easy to ignore the subtle interface differences between the two apps.

I shouldn’t have to play “Can you spot the differences?” like this is a kids’ placemat at a family restaurant in the 1980s. I shouldn’t have to remember to tap the Safari icon if I’m about to embark on a seven-part journey through the minds of the lowest-bid contractors who won the job to develop a government website.

Apple needs to understand how its products are used in the real world.

An even dumber workaround for how dumb CSS hyphenation is

Look, it’s all well and good that CSS has a hyphens property. The problem is, that property is really dumb. It’s all-or-nothing, with no rhyme or reason to whether a word absolutely needs to be hyphenated. It will literally hyphenate any and every multi-syllable word at the end of a line.

You really almost never want that.

In my particular case, I’m looking at a very specific situation. Specific, but I am guessing probably the most common situation where a web developer wants a browser to hyphenate words: words in large headings that are too long to fit on a line. What I mean here is individual words that are by themselves too long to fit on a line, typically in a mobile browser, in headings with large or extra-wide fonts.

There are proposals to improve this, but there is currently nothing with broad browser support. So I invented my own.

This is a crafty little combination of CSS and JavaScript. (OK, technically it’s jQuery, but you could reasonably adapt this to vanilla JavaScript if that’s your thing. Since I’m deeply immersed in the jQuery world of WordPress, I just went with jQuery because it’s simpler for me that way.)

The first thing you need is a special CSS class for hyphenation. Since I only want it to apply on mobile devices, I gave it a logical name, and defined it in my CSS media query for the mobile breakpoint:

@media screen and (max-width: 782px) {
    .hyphenate-on-mobile {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

OK, with that set up, then we just need a little jQuery function to determine where it’s going to be applied. I want it to get added automatically to any h1, h2, h3 or h4 tag. (I’m skipping h5 and h6 because they’re small enough text that we shouldn’t need it.) I also made the somewhat arbitrary decision to set the minimum word length at 15 letters. This is something you may need to adjust based on your font size. Here’s the jQuery:

jQuery('h1, h2, h3, h4').each(function() {
    var words = jQuery(this).text().split(' ');
    var i = 0;
    var hyphenate = false;
    while (i < words.length) {
        if (words[i].length >= 15) { hyphenate = true; break; }
        i++;
    }
    if (hyphenate) {
        jQuery(this).addClass('hyphenate-on-mobile');
    }
});

And then you just want to make sure that jQuery gets fired off when the page loads. It works!

The final (?) verdict: Gutenberg (a.k.a. the WordPress “Block Editor”) is fundamentally flawed and unsustainable

I’ve been trying. Really I have.

From its initial release as part of the WordPress core in version 5.0 in late 2018, up until early 2022, I adamantly refused to use Gutenberg. I felt its conceptual flaws and practical limitations were so profound and so obvious that I really could not believe this was going to be “the future of WordPress.” And now here we are.

In the spring of 2022 I finally relented, as at least the initial impression of the user interface had improved to a point where I felt I just needed to embrace it or move on. And so I created a new base “Block Theme” for future WordPress projects, and began building new client sites with it.

The past year and a half of dealing with Gutenberg more directly has been a painful rollercoaster of emotions, as I’ve tried repeated to convince myself it’s good, only to have it, once again, prove itself a hot mess of ill-conceived and barely-documented hacks.

Many times in the past 18 or so months I have contemplated abandoning WordPress for good, checking out ClassicPress and some other CMS options before falling back on giving Gutenberg another chance.

I’ve even considered writing my own Content Management System (CMS) [again; it’s something I specialized in before 2014]; switching to Drupal, for God’s sake (until I read that they’re porting Gutenberg for Drupal too… why why why?!); scrapping CMSes altogether in favor of just building sites with Bootstrap (and giving clients some rudimentary editing tools for the very few elements of their sites most of them actually modify post-launch); and even quitting the field entirely.

Frankly I don’t have the time or energy to make an extensive, coherent case for why Gutenberg is so fundamentally flawed; suffice to say it’s a combination of four main issues:

frustrations over its excessive reliance on React (the Flash of the 2020s) for so much of its functionality,
irritation at its embrace of the “make the interface seem simple by just hiding everything until the user hovers over the right magic spot” approach to UI/UX design,
trying to get a handle on how the damn thing works, due to its combination of woefully inadequate and outdated documentation, and the fact that it is constantly changing, in ways that break my code (which was written based on earlier assumptions about how things worked, because that was all I had to go on), and
its absolute, unforgivable abandonment of the core web design principle of separation of content and presentation.

The last one is really the killer, and it is only getting worse, because not only does the code — that fragile, convoluted, redundant code, stored in the database — become increasingly unmanageable the more you build your site, but WordPress is constantly pushing more of its structure into this disastrous framework (if you can call it a framework). The Site Editor is a true abomination that can’t possibly be useful to anyone… except possibly “no code” website builders. But honestly, if you can’t write code, you should just be using Squarespace instead of WordPress. You’ll be much happier, and so will your clients.

All of these issues probably stem from one even more basic to the whole discussion though: the creators of WordPress (especially imperious leader Matt Mullenweg) do not consider WordPress to be for what most of us “WordPress professionals” actually use it for. To them, it is blogging software. Period. But very few people who make a living in the WordPress ecosystem are using it to build blogs. Instead we are using it as a general-purpose CMS.

Gutenberg is adequate for a basic blog — in fact, I’m using it for this one, and I do prefer editing my posts in Gutenberg vs. Classic Editor. Its severe flaws and limitations don’t become readily apparent in the “basic blog” context.

There’s an argument to be made that Gutenberg really exists for WordPress.com to compete with the likes of Medium and Substack, and the industry of us web professionals who use the open source version are of no consequence to Matt’s vision for the platform.

Anyway, I have managed to launch about ten new client sites in the past year-plus using WordPress with Gutenberg, and every time I have had to face frustration and embarrassment as I acknowledge with clients the limitations of the tool, or sympathize with their frustrations in dealing with it as users.

My current project may be the last straw though. I’m two days away from launching the biggest site, by far, that I’ve built with Gutenberg. It’s over a year in the making, and now at the eleventh hour I am confronting the possibility of having to manually edit a huge number of posts in a CPT I created — and naively used the Block Editor to manage instead of just some ACF fields — because the client wants to change the default text sizes.

It’s possible this situation could be remedied by the merger of Block Patterns and Reusable Blocks that happened in WordPress 6.3, but guess what… we had already created all of this before that functionality was an option. I still haven’t had time to even figure out exactly what the implications of these 6.3 changes are, because I’ve been too busy just trying to build the site.

That’s where WordPress is really dying for me as a viable platform to work on. It’s supposed to be the foundation for what I do, but now the ground is constantly shifting beneath my feet. Gutenberg is making web development much harder and more frustrating, projects are taking longer, and it’s making me look incompetent and unprofessional to my clients. I’ve been a professional web developer since 1996; I’ve been using WordPress for projects since 2008, and almost exclusively since 2014. But now I don’t trust it anymore.

I’m in a position where I may (fingers crossed) be able to back off taking on any new freelance projects for the remainder of the year, once this site has launched. I am really hoping that’s the case, because it’s time for me to make a serious re-evaluation of whether or not I want to build any more WordPress sites in the future, and if not, I need to take that time to learn — or build — a new platform.

The great irony, of course, is that my business has increasingly been made up of selling and supporting my commercial WordPress plugin, ICS Calendar Pro. Fortunately, my work on that plugin has very little to do with, nor is significantly impacted by, the Gutenberg/Block Editor project, although that may change as WordPress continues to (d)evolve.

(Don’t even get me started on how bad Gutenberg is for responsive design.)

Stupid jQuery and CSS tricks: Move a hidden element to the end of the parent

I just came up with a solution so simple, yet so stupid, that I had to share it.

The scenario is this: my client has some third-party JavaScript to inject a form into a page. I’ve been writing some of my own CSS to style the forms, including some crafty use of :nth-of-type(2n) and :nth-of-type(2n-1) to apply styles conditionally to adjacent fields in a two-up layout. (These are just sequential <div> tags, and I have to work with what I’ve got.) Specifically, I’m adding some right margin on the “left” element, and no right margin on the “right” element.

I noticed an instance where my margins were flipped for two fields, and when inspecting the code, I discovered why: the client has set up their form with a hidden field tucked in there before the “left” element. That’s throwing off the value for 2n in my CSS. I was going to contact them and ask them to update their form to put the hidden element at the end, but I realized this is a problem that is likely to recur, so I should just write in a workaround. (Yeah, yeah. But it’s the lesser of two evils.)

Fortunately, the site is already using jQuery, so a fix was super simple. I’m leaving the CSS class names here as they are in the actual site, but you may need to change them to suit your particular form.

jQuery('.form_container .form_page .form_question.hidden').each(function() {
jQuery(this).appendTo(jQuery(this).parent());
});

Since the hidden field has the .hidden CSS class, it’s really easy to use the jQuery .appendTo() method to just take all of the hidden fields and shove them to the end of the container element. I used the parent and ancestor CSS classes in my jQuery selector just to be sure I’m isolating this action to these particular forms. Then of course I have to tell the page when to execute this functionality, which is ideally on the load event:

jQuery(window).on('load', function() { /* Code goes here */ });

It works!

Using your Mac with your iPhone hotspot? Be sure to turn on low data mode!

In the summer, I like to take my MacBook Pro with me and work outdoors. Doing that is entirely dependent upon my T-Mobile hotspot on my iPhone. I had my account maxed out at 16 GB of hotspot data per month, so imagine my surprise today when — one day into a new cycle — I got a notification text that my data had been used up!

I’m still not sure what exactly my Mac was doing, presumably some kind of background iCloud Drive backup, but I managed to use up an entire month’s allotment of bandwidth in extremely short order. I worked with T-Mobile support to get my account bumped up to the absolute maximum 20 GB, but there’s no certain explanation of what it was that used all of that data.

But along the way I discovered the Mac does let you configure “low data mode” specific to each network you connect to. If you find yourself needing to use a hotspot regularly, I would strongly recommend turning on low data mode for that network. To do that with the new Ventura System Settings app, go to WiFi, then under Known Networks click the … icon for your hotspot, and chose Network Settings…

Now here’s where it gets interesting. I turned on the Low data mode toggle about five times and it kept, after a couple of seconds, shutting itself back off. Finally it “stuck.” Now we’ll see over the coming days if it actually makes a difference!