Category: Computers & Technology - Page 6

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!

On the Supreme Court, the First Amendment, websites and wedding cakes

From the perspective of someone who supports LGBTQ+ rights, I am not exactly a fan of this recent SCOTUS decision. Simultaneously, as a web designer/developer, I think it is extremely important to recognize the difference between this type of work and a more commodity-oriented business.

Web design and development is creative work, requiring a personal input of time and energy, thought and consideration. It’s not a public storefront, selling premade goods. It’s not even a construction or contractor type job, where you may have disagreements with the client’s worldview, but the work itself is (generally) philosophically and politically neutral.

As a web designer/developer, I absolutely choose which types of projects I do or don’t want to work on, and I insist on maintaining the right to refuse to take on a project whose mission or purpose does not align with my values.

To put a finer point on it: I think it’s worth distinguishing between a web designer who is actively collaborating with their client to build something custom for them, vs. a DIY-type system where the client is provided with tools to build a site for themselves. In other words, for the type of work I do in client services, I should have the right to refuse to participate in a project whose purpose I disagree with. But if I were, for instance, Squarespace, selling access to a service I built, which lets users create their own sites, then I should not have the right to decide who can or can’t use the service. (As long as what they’re doing with it is legal.)

I can get even more specific to my own situation here. In addition to my client services, I also sell a product: a WordPress plugin for integrating calendars (e.g. Google Calendar, Office 365, etc.) into your website. I do not, and I strongly believe should not, decide which types of sites are allowed to use my plugin. I know there are customers of the plugin whose businesses/organizations do things I do not particularly agree with. But there I am selling a finished product — a commodity. Anyone who wants to buy it (again, as long as they’re not doing something illegal — although I won’t even know that, unless I specifically take the time to investigate them, post-sale) is welcome to do so. But if those same people approached me in my client services role to help them build their website itself, I would/should have the right to turn down the project if I didn’t want to do it.

Of course, there’s another layer to this: Why did this even become a court case? As I understand it, the designer here is the plaintiff, and doesn’t actually run a wedding website business yet. She is clearly doing this to make a political statement. I’m not sure how much the Colorado law was really pushed on her, or if it even technically applies to her (hypothetical) business. For me, and I think a lot of other people in my shoes, it’s a simple enough practical matter to turn down projects you don’t want to work on — regardless of why you don’t want to work on them. As a creative worker, you are essentially selling your time, not a commodity, and you have a limited supply. It’s a simple matter of being “too busy” to take on the project. There may be laws saying a business can’t discriminate, but surely there cannot be any laws that say a business has to work more hours than humanly possible.

So, what’s the upshot here? Well, it kind of seems like this case isn’t really about the First Amendment rights of business owners like me at all, because I’m skeptical that those were ever really under any threat. But it definitely opens the floodgates for business of all types — including those that truly are “open to the public” and selling commodity goods — to discriminate against potential LGBTQ+ customers. And that’s why I’m opposed to the current SCOTUS super-majority: their aggressive efforts at rolling back civil rights. That’s what this case is really about.

How to restart an iPhone without using the touch screen

Well, that was weird.

I suddenly found that my iPhone 13 mini’s touch screen was only partially responding. In particular, the upper left quadrant seemed entirely unresponsive to touch. Well, time to restart!

Except.

The only restart process I know is to hold down the Volume Up and Power buttons until the emergency call screen appears, then swipe the “Swipe to power off”… uh… swiper… thing.

No good! That was in the “dead zone” so swiping it did nothing.

Fortunately, Apple has another way. It’s pretty simple and it worked perfectly for me:

Quickly press and release the Volume Up button.
Quickly press and release the Volume Down button.
Hold down the Power button until the iPhone shuts off.
Hold down the Power button again until you see the Apple logo.

Maybe 3 and 4 can be the same motion. I just let go of the button when I could see the iPhone had shut itself off, then after a few seconds, I pressed it again to power on as usual. And I’m pleased to say, the screen seems to be working fine now.

One document that encapsulates the Block Editor core team’s detachment from the reality of how most professionals actually use WordPress

That would be this document.

Establish early what content you expect to require updates

At a high level, it’s important to recognize that not every piece of content can be updated across the entire site and that the method of creation greatly impacts what’s possible. As a result, it’s critical to spend time ahead of creation determining what you expect to need updates and to put that content in the appropriate format. This will make a huge difference in terms of future maintenance.

Embrace theme design at the block level

Block theme design requires a mindset shift from the previous approach of designing large sections of a theme and controlling them via updates. While a holistic view of a design is still important when creating a custom theme project, blocks require that themers approach design on a more atomic level. This means starting from the block itself, typically through theme.json customizations. The goal is that each individual “atom” (i.e., block) can be moved around, edited, deleted, and put back together without the entire design falling apart.

The more that you approach design at the block level, the less need there is to propagate updates to things like patterns and templates across the entire site. If the atomic pieces are in place, their layout should not matter.

Gee that’s rich. My particular issue right now is that I need to make some updates to a block pattern I created for my client’s site. Unfortunately, that block pattern was already in use on about 40 pages of their site, but it involves an unanticipated design issue. (As it happens, yes I probably should have thought it through a bit more before it got propagated so extensively, but the practical reality of building websites is that sometimes you don’t know what will or will not be effective at the outset — especially when you’re simultaneously dealing with end users learning how to wrangle Gutenberg — and one of the great features of the web from its inception to today is that things are easy to change later on. In fact, that has been a driving force behind template-oriented CMS platforms from the beginning. It’s the separation of functionality, design and content that has been at the heart of most well-structured website editing platforms, including WordPress, until now.

It’s easy, when you believe that what you are creating is a blogging platform, that people only use it to create blog posts that are content-heavy with mostly one-off layouts. And yes, that’s how WordPress started. But the entire team must collectively have its heads deeply inserted up Matt Mullenweg’s ass (sorry for being crass, but I’m also being honest) if they think that’s how WordPress is predominantly used, if that’s what made WordPress as big as it is. Because it’s not.

I’ve been doing “block-based” design with WordPress sites (using Advanced Custom Fields and its wonderful Flexible Content field) since well before the Gutenberg project existed. But I had a much different, less “atomic” concept of blocks. This atomic approach is great (I guess) in concept, but it is too fine-grained to be a useful tool for the average web content editor, and it makes design and development orders of magnitude more difficult and time-consuming.

I have now completed four site projects using my own custom block-based theme, and have three more underway. While there are some really “cool” features of the Block Editor (Gutenberg), these projects have also taken me much longer and been far more maddening to build, and have left my clients much less confident in their ability to easily edit their content, than anything I had done in the previous decade of working primarily with WordPress.

And this last set of three projects is in many ways a rolling back of features, because after too many months of frustration with the limitations of block themes, “version 3” of my custom theme actually reverts from using the new HTML-based page templates to using PHP-based templates. It’s a regression in a way, but I never had any intention of using the Site Editor anyway, because it’s not an easier way for me to build sites, and it grants access to elements that should be 100% hands off for the clients who’ve hired me.

And now, once again, I’ve been derailed from my work by the need to spend 45 minutes venting my frustrations over this predicament in a blog post.

By the way, I'm aware of the irony of using Gutenberg in order to decry it, so don't bother pointing that out.

So… how did I end up resolving the issue of updating the block patterns that already appear in my content? Do you really want to know? I fired up phpMyAdmin, wrote a SQL query to find all of the affected instances, and manually copy-pasted the update into them. (Yes, I could’ve written a SQL statement that would just do the replacements; I tried that first, but the replacement text was really long and was generating a MySQL error that I couldn’t quickly pin down, so it was faster to just manually edit the 40 records.)