Category: Computers & Technology - Page 28

Q: Should I build an app? A: Probably not.

One of Room 34’s long-time agency partners emailed me today asking if we build mobile apps. It was a simple question. The email itself was only one sentence, and, initially, so was my response:

We haven’t yet, but it’s been on my radar to potentially pursue.

Then I gave it more thought, and realized I should flesh out that answer a bit, with an explanation of why we haven’t developed any apps. Yet.

Honestly I’m sure part of the reason is that we’re a web development shop. That’s what we do. I’d be lying — to myself — if I didn’t acknowledge that there’s some amount of a desire to “protect my territory”; apps are a threat to the web development business. Adapt or die, etc. But I think apps have been around long enough now to show the web isn’t going to die. The nature of the web and how we use it is changing, but the web itself is still a huge part of the Internet experience, and its underlying technologies (HTTP, SSL/TLS, XML, and JavaScript or JavaScript-derived tools like JSON and AJAX for sure) are fundamental to how any Internet-connected mobile app works!

Yet, I still make the argument that a lot of people who think they need an app really don’t. All they need is a mobile-friendly (ah-hem, responsive) website. So that was the rationale I laid out in the rest of my email response:

Most of the time when people have approached us about an app, I have convinced them that it didn’t make sense for their needs to do an app. But there are definitely legitimate uses.

A few reasons not to do an app, and just do a mobile website instead:

Apps are more expensive to develop.

Apps require more promotion to achieve awareness.

Users have to make the choice to seek out the app in the App Store / Google Play and download it.

Often client requirements for the app don’t involve anything a mobile website can’t do.

On top of those reasons, #2, and to some extent #3, generally means you need a marketing website to promote the app anyway, and if the user is already coming to the website, if #4 applies, there’s really no value left in creating the app, unless it’s a paid app or has ongoing in-app purchases to achieve any kind of ROI.

Reasons to create an app:

Advanced features that require native device functionality, that a website can’t achieve.

The app itself is a (reliable) source of revenue.

The app is for an industry where it might be preinstalled on users’ devices, or required for their work.

What I didn’t mention is that the app “gold rush” is over. The potential in 2015 of a new venture to get rich with an app is approaching the odds of winning the lottery and getting struck by lightning simultaneously.

The only reason to create an app now is if it’s filling a genuine need that can’t be met with a mobile website, and it has the necessary value to the end user that the higher barrier of entry into using an app, compared to a website, can be overcome.

The simple way to add a “force SSL” option in WordPress

There are plugins for just about everything in WordPress. But cluttering up your site with plugins isn’t always such a great idea. They add bloat that can slow down your site, and if poorly written can cause potential conflicts.

Plus, a lot of them are simply over-engineered. I hate that.

That said, I love good plugins, especially Advanced Custom Fields by Elliot Condon. I consider it essential to every WordPress site I build… which is a lot these days.

A site I’m currently working on has some pages that require SSL encryption. And I want the client to be able to turn SSL on or off on a per-page basis. But I didn’t want to use a plugin (besides ACF) to do it. [Disclaimer: you don’t actually need to use ACF for this; the standard Custom Fields capability will do.]

Before getting started, make sure your site actually has an SSL certificate installed and properly configured. And for this to work as shown, the cert needs to use the same domain name as the site itself. If it’s different, your redirect URLs will be a bit more complicated and will require some customization of this code, but it’ll still work.

First, set up your custom field. I’m using force_https as the field name, but it can be whatever. Make it a True/False field. (If you’re not using ACF, just remember you’ll be entering 0 or 1 as the value.)

Next, in your functions.php file, add the following:

add_action('template_redirect', 'my_force_https');
function my_force_https() {
  if (is_ssl()) { return null; }
  global $post;
  if (!empty($post->ID)) {
    if (!empty(get_field('force_https',$post->ID))) {
      $ssl_url = str_replace('http://','https://',get_the_permalink($post->ID));
      wp_redirect($ssl_url); exit;
    }
  }
  return false;
}

Picking this apart: We’re using the template_redirect hook. By this point the post has been loaded. We have all of the data we need, and it’s kind of our “last chance” to get WordPress to do a redirect before it starts rendering the page.

First we run the built-in WordPress function is_ssl(), because if we’re already on an SSL connection, there’s nothing to do. (And, if we didn’t do this check, we’d create a redirect loop.)

Next, if we have a post ID, we use the ACF function get_field() to check whether the force_https custom field is checked for this page. If it is, then we modify the page’s permalink to start with https:// and trigger the redirect. That’s it! [Note: If you’re not using ACF, you’ll need to use the built-in WordPress function get_post_meta() instead of get_field().]

Of course, that’s not quite it. You may notice after you have this working that your page loads with an https:// URL, but you’re still not getting the reassuring lock icon in your browser’s address bar. What gives?

Well, that’s because you probably have assets in the page that are loading over a non-SSL connection. In my experience, this is almost always because of images in your content that have a full, non-SSL URL. Browsers won’t give you the lock icon unless every asset on the page was loaded over an SSL connection.

So I’ve added this second function that strips the protocol from any instance of src="http://... in a text string. If you’re not familiar with “protocol-less” URLs, modern browsers allow you to omit the protocol — http:// or https:// — from URLs in your HTML, using just // instead, and the browser will automatically handle those with the same protocol used to load the page.

Using the filter the_content, this will automatically get applied to most page content and you’ll probably be good.

add_filter('the_content', 'my_strip_protocol');
function my_strip_protocol($content) {
  if (is_ssl()) {
    $content = str_replace('src="http://','src="//',$content);
  }
  return $content;
}

If you add this and you’re still not getting the lock, it means you probably have <img> tags within your theme that include full non-SSL URLs, or possibly some CSS or JavaScript assets that are being loaded over non-SSL connections. You’ll have to troubleshoot that yourself, but with the developer tools built into modern web browsers, that shouldn’t be too difficult. Remember, now that you have it, you can always use this my_strip_protocol() function directly in your theme files as well.

Just a side note about one of my idiosyncratic coding conventions: I always use !empty() when checking for a value that evaluates to true, but you don’t have to. It comes from my prior experience working with CakePHP. The benefit is that you won’t trigger any PHP warnings if the variable you’re evaluating hasn’t been declared.

Who are the changes in Mac OS X El Capitan for? Not for me, apparently

Over at The Loop, Dave Mark commented on Apple’s list of enhancements in El Capitan.

It’s an impressive list. I guess. But it really brought something into sharp relief for me: I don’t use any of the new features in recent Mac OS X updates. I was really tired of Lucida Grande and I prefer flatter design, so the interface improvements in Yosemite and now El Capitan are worth the update alone, as far as I’m concerned.

But it’s kind of sad for me. I’ve realized that my passion for computers and technology has really moved past the “computers” part. I am still a loyal Mac user, and will continue to be for the following reasons:

1. I’m heavily invested in Apple’s “ecosystem” by this point, which is fine with me.

2. Windows sucks. As much as I think Microsoft is trying to improve, and as much as I appreciate Microsoft’s newfound scrappiness as the underdog, Windows still sucks. Especially the licensing process that assumes everyone is a criminal.

3. Linux on the desktop is still half baked, and if anything seems to be getting worse as it becomes clear that it’s never really going to catch on. (That said, I am as devoted to Linux on servers as I am to the Mac on the desktop. But it’s all command line for me.)

As iOS has taken over, I find my Mac is more and more relegated to its “truck” role for me. I still use my Mac almost every day, but only for two things:

1. Work.

2. Music production.

I never play games on my Mac. (Though that might change.) I no longer browse the web on my Mac, except at work. As much as I love the portability of my 11-inch MacBook Air, I might as well just have an iMac at my desk at work, for how often my MacBook Air is ever out of its bag at home.

I no longer even bring my Mac along when I travel for “emergencies”, because there are no work-related emergencies I can’t fix with my iPad, thanks to a trio of awesome apps from Panic. And using the iPad for work is just awkward enough to ensure that I only use it in emergencies, which improves my travel experience.

And at work, I’m set in my ways. I use the Adobe apps, because I have to. I use BBEdit and Transmit. I use Pages and Numbers for documents and spreadsheets, about once a week each. And I use web browsers, for testing my work. I don’t even listen to music on my computer anymore, because I have a Raspberry Pi at the studio running as a “jukebox”.

I hate almost every email interface. They’re so ugly and confusing and useless. I’ve actually taken to using the iPad interface for Gmail in a web browser to check my email, because it’s the least awful. (Want to do that too? Here’s the “secret” link.)

The only built-in features of Mac OS X that I actually use on a regular basis are Safari, Calendar, and Notes. Ah, my beloved Notes. More on that in a minute.

OK, so that brings me back to Apple’s big list of enhancements in El Capitan. Let’s take a look:

Automation
I like Automation in principle, and have used it once or twice, but honestly either I’m just clueless or too limited in my use of the computer, but I don’t really see anything I do on a regular basis that could be improved by Automation.

Calendar
Yeah, I use this, but the new features they’re promoting are really not interesting to me. I guess I lead a boring life. ~~The one thing I do want in Calendar is something they took away… an easy way to enter the time on a new event without having to use the mouse!~~ [Update (10/2/2015): I’ve just discovered the final release version of Calendar does support entering the time when you’re typing the name of the event, the way earlier versions did. Strike this complaint from the record!]

Chinese Features
International
Japanese Features
Nope. I can respect why these are in the OS and I think they’re important, but they are not applicable to me.

Mail
I used the Mac Mail app for years, until it finally got too buggy for me to tolerate anymore a few versions back. Maybe it’s fixed now. I may never find out, because I’m satisfied enough that the iPad interface for Gmail I mentioned above is the least-sucky option available.

Maps
Seriously? I tell you what: try printing out a map this app generates. Go ahead. I’ll wait.

…

See what I mean? Seriously?

Hey, you didn’t actually do it, did you? OK, I’ll show you. If you’re looking at this (already sparsely marked) map on your screen and you hit Print, this PDF shows the absolute non-existent level of detail you get in the printed version. (I especially like the label at the top: “near United States”. Thanks.)

Maybe you’re saying, “That’s not the point… why would you even print maps anymore?” Well, by that reasoning, why would you even look at maps on your computer anymore? As it happens, I had a very specific reason for printing maps. I’m going on a road trip to Utah next week, and I learned the last time I was there that there are huge swaths of the state where you can’t get a data signal. And I didn’t have any printed maps.

This time I want to be prepared. So I was printing out several maps from Google Maps, but their text was small, and the thin gray lines they use for minor highways almost completely vanish when printed. So I thought I would at least try Apple’s Maps app instead. Not only are they inferior, the printed version you get is completely different from what you’re looking at on the screen, with the majority of the text labels entirely missing. What the hell, Apple?! How is this useful to anyone except a 4th grade geography student? (Come to think of it, I have a 4th grade geography student living in my house. Maybe she can fill it in for me.)

Mission Control
I haven’t even taken the time to figure out what this is. I’ll admit I’m still stuck in System 7 when it comes to my approach to window management, but I just can’t fathom why I would need this. It would just add confusion.

Notes
Now we’re talking. OK, Notes is one app I genuinely love from Apple. Don’t laugh. I tried Evernote. I tried it for nearly a year. I found it over-designed and slow compared to Notes. I just need a place where I can store whatever random pieces of information come along, and an easy way to search through them to find what I need. Notes does that perfectly. And what’s even better, it syncs flawlessly between my Mac, my iPhone and my iPad. Apple can do whatever other weird crap they want to Mac OS X, just please don’t take away Notes.

Photos
I use this to store my photos, by default. But I hate using the app. It seems to be designed for people who have taken less than 100 photos and never plan to take more. Same goes for iCloud Photo Library or whatever it’s called. I find both cumbersome and unusable given that I take probably a dozen photos a day. I just want a place off my iPhone where I can keep my photos, so I can clear room on it for more photos. Now I can’t seem to do that anymore. It sucks.

I realize I’m an edge case here. Any photo I take that I think is worth remembering, I post to Instagram. The rest, I don’t want to trash, but I will probably never look at again. So I don’t need a photo feed on my devices. That’s Instagram. Just take all of the rest away and store them in the vault, please. I have a feeling this is something where I should really seek out an alternative solution, but I haven’t found the time. Suggestions are welcome, but it has to be drop-dead simple or I won’t bother with it.

Reminders
Ack. I wanted to like Reminders when it was first introduced, but I found it unreliable and more effort than just sending myself an email. I hate email too, but it’s a reliable catch-all place to dump any “action items” that are in front of me. Having to put those into Reminders is extra work, and if Reminders doesn’t reliably, you know, remind me, then what’s the point?

Safari
I like Safari. I go back and forth between using it and Chrome as my default browser. Presently I’m in a “Safari phase.” I suppose some of these new features are nice, but honestly it’s only the developer tools I really care about. Fortunately, those are pretty good and getting better.

Split View
This is a new feature that, in theory, I like. But I’m not yet convinced I’ll actually like the implementation, or ever really use it on a regular basis.

Spotlight
Ack. Again. Get this away from me. I never use it. The only times I even interact with it are by accident. I finally took the time to figure out how to disable the keyboard shortcut so I’d stop accidentally calling it up by pressing Command-Space when I’m typing too fast (like right now).

Worse, I have a Mac mini at the studio that is kind of the hub of our network. It’s a file server, VPN server, powers our projector for client meetings, and also runs Parallels Desktop for Windows testing. And it is slow. Really. Unbearably. Slow. I have tried several times to diagnose the problem, without success, until yesterday, I think. It seems the culprit was the system process that scans and indexes file contents for Spotlight. I’m not sure if it was the huge number of files, the handful of huge individual files (Parallels disk images), the server’s Time Machine backup drive, the slow processor, or some kind of genuine hardware defect at work, but so far the system seems much faster since I completely disabled Spotlight on it yesterday.

Which is not straightforward in any way.

Other
OK, so now that I’ve largely crapped all over El Capitan’s marquee features, let’s see if there’s anything interesting left in the grab bag.

New system font: I do like the new system font, a lot.

Find your cursor: this is a great idea, but I find it’s a little inconsistent.

AirPlay video from QuickTime Player: not interested.

Peer-to-peer migration: meh.

Rename from context menu: great, a harder way to do something that’s been around for as long as I’ve used a Mac.

Auto-hide menu bar: do not want.

Copy file path in Finder: oh… hmmm… yeah, I suppose this will be helpful. If I can ever remember that it exists and how to do it. (Hold down Option after opening the context menu? How intuitive!)

Redesigned Disk Utility: sounds good. I’ll have to check it out. Which I will do the next time I am panicked about a hard drive dying and then I’ll hate it because I’m already frustrated about something and I’m not expecting something else new.

Color picker: I suppose.

Rotate annotations: ???

Find My Friends widget: I may use this, but I’m not sure why I’d need to have it on my computer vs. just taking out my phone. The same could be said of Messages, I suppose, but I can type way faster on a real keyboard, so it’s actually useful to get those on my Mac. What benefit does Find My Friends on a Mac offer over the iPhone version?

While we’re on this topic, I’m sure I was not alone when Find My Friends was introduced in saying, “What’s with the rich Corintian leather?” I mean, “When would I ever use this?” I think it’s really the name. Change it to “Find My Family” and suddenly it makes perfect sense. I don’t use it daily, but I do use it at least once or twice a week, and it has proven incredibly handy.

So that brings us to the end of the list, and of my rant. Maybe this has ended up being more of a psychological profile of me than a valuable assessment of the state of the Mac in 2015. OK, it’s definitely that. But I wonder how common I am as a long-time Mac user (bought my first Mac in 1994) who has mostly become disillusioned with the direction of Apple’s software.

Full disclosure: I own a small amount of Apple stock as part of a retirement account I can’t touch until I’m in my 60s. Clearly I am trying to drive up their stock price.

Custom-designed <select> menus without a wrapper <div>

Most of the time I tell clients we can’t customize the appearance of <select> menus (a.k.a. “dropdowns”), along with checkboxes and radio buttons. I lay out a whole rationale on the part of OS and browser developers for why these elements can’t be customized, which is perhaps marginally factual. I do think these elements are, by intention, difficult to customize, in order to avoid confusing users. But designers want to design and, to be honest, the browser defaults for these elements are pretty freaking ugly.

Often there are complicating factors that really do make it effectively impossible to customize these elements. And so far I have not found any way to customize radio buttons and checkboxes that don’t involve “faking” them with images and hidden inputs. Solutions that may achieve the desired appearance but that are oh so ugly on the inside.

I’ll also admit that I am usually the developer on a project, not the designer. But at the moment I am working on a project where, OK, I’m still not the designer, but I have taken responsibility for extending the design, which affords/requires of me making some design decisions. And when I’m the one designing things, I care a lot more about finding a way to make them look exactly like what I’ve envisioned.

So, we come to <select> menus. While it’s not really possible to do much with radio buttons and checkboxes, there at least are some CSS properties that these menus will take. Unfortunately they vary a lot between browsers and don’t solve every problem.

Most solutions I’ve seen for modifying the appearance of <select> menus involve wrapping the menu in a container <div> or <span> tag, essentially removing all of the CSS properties from the menu element itself, and then styling the container as desired.

I hate this solution. I want to be able to style the <select> itself, and be done with it. And at last I have found a solution that mostly accomplishes this, with the caveat that it does not work in Internet Explorer before version 10. But I have a fallback for IE 9 and earlier that does almost everything. And I haven’t tested in Opera because… come on. (OK, I’ve heard Opera is popular in Europe, but to be honest all of my clients are in the United States and do not do business in Europe, so it doesn’t matter. No one I have dealt with has ever cared if their site worked in Opera. Or probably even known it exists.) I should also probably just note that my company no longer supports Internet Explorer 7 or earlier, so we’re only concerning ourselves here with making sure it at least looks OK in IE 8.

OK, so how does this work?

Pretty much every browser supports some basic customizations of the <select> menu with CSS, like changing the background color, font, text color, size, etc. But there’s extra browser “appearance” junk we need to get rid of. Mostly the little up/down arrow at the right end of the menu that is the visual cue to users that it is a menu. That’s an important thing… we need to still provide some visual cue that it’s a menu. But I want to make it look the way I want to make it look.

Let’s start by getting rid of the browser junk.

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

That removes all of the standard browser styling from Mozilla (Firefox) and WebKit (Chrome and Safari). I’m not sure we really need appearance or if it actually does anything in any known browser, but I saw it in an example somewhere and I hate using vendor prefixes without also including the non-prefixed version of the same property, so there it is.

So that covers three of the four major browsers. But what about Internet Explorer? There’s a tidy solution that works in IE 10 and later:

select::-ms-expand {
display: none;
}

Now we have a <select> menu with none of the standard browser junk, and we can apply our styles as needed. As for Internet Explorer 9 and earlier, you’ll just have to live with the arrow thing at the right end of the menu. I’ll explain in a bit the way to add separate styles just for those earlier versions of IE, using conditional comments, in case you’re not familiar.

I do recommend designing your own “arrow thingy” icon for the right side of the menu, so users can still tell it’s a menu. Here’s an example of how your full <select> CSS might look. (This is fairly close to what I am using in the site I’m actually working on, although the colors, fonts and padding differ slightly.)

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: rgb(238,238,238) url('images/select.png') right 5px center no-repeat;
  background-size: 9px 15px;
  border: 1px solid rgb(221,221,221);
  border-radius: 0;
  color: rgb(34,34,34);
  font-family: ‘Proxima Nova’, sans-serif;
  font-size: 100%;
  height: 2em;
  line-height: 2em;
  min-width: 60%;
  padding: 0 25px 0 10px;
  width: auto;
}
select::-ms-expand {
  display: none;
}

Here’s what the results look like in different browsers.

custom_select_browser_samples

So, there’s an issue with the text alignment in Internet Explorer. As of this writing I’m working on resolving that. There are also some more minor variations between browsers in size and alignment, but that’s the nature of this business. Firefox also antialiases differently than Chrome and Safari, and I (usually) don’t bother trying to compensate for that. (The significant size difference in the IE sample is due to scaling at different breakpoints in my responsive layout… just a side effect of how I took the screenshots.)

That just leaves IE 9 and earlier. As I said, there’s no equivalent to select::-ms-expand before IE 10, so while we can change many aspects of the appearance of the menu, we can’t get rid of the standard arrow button thing. Unfortunately, if we implement the code above, we end up with both our custom arrows and the default ones, side-by-side. The only solution here is to get rid of ours, and remove the extra padding we gave it. This is where conditional comments come in. They’re well named: conditionals within HTML comments, recognized only by Internet Explorer. You can even target specific versions of IE with them. In this case, we just need to target versions before 10.

One common convention for conditional comments has you wrap the <html> tag itself in them, applying a class (e.g. ie8 that can then be used throughout your HTML everywhere else to target that browser. That’s great, but I never use it myself because I’ve gotten to a point where I rarely need to write any IE-specific CSS. So I just use the conditionals to load a separate ie.css file when I need it.

Here’s an example of how this might look. It should go in your <head> section, after you’ve included the main CSS file:

<!–[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]–>

And then in your ie.css file, you’ll need to override the background and padding:

select {
background-image: none;
padding-right: 0;
}

…and this is what it looks like in IE9 (and, just for fun, IE8 as well):

custom_select_browser_samples_ie

Obviously my styles are extremely basic — not really that different from what older versions of IE show anyway — but this does the job. As a test, I made the background bright red to prove it worked across the board. It does. But the results made my eyeballs bleed, so I’ll spare you.

But here’s something fun… how it looks on an iPhone with high resolution.

custom_select_browser_samples_ios

The arrow graphic is replaced with a high-res version using CSS3 media queries.

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-devicepixel-ratio: 1.5),
  only screen and (min-resolution: 1.5dppx)
{
  select { background-image: url('images/select_x2.png'); }
}

(Yes, there’s an Opera vendor prefix in there. Forget about what I said earlier. Or not. This is just a standard block of code I always use for high-res images in my media queries.)

Depending on the complexity of your design, this approach may not offer quite as much control as you need, compared to the <div> wrapper approach, but if you’re just trying to get something clean and simple, with customized colors and fonts and without the outdated 3D styles most browsers stick you with, this should do the trick.

WordPress challenge of the day: sorting by meta value, including posts WITHOUT that meta value set

I dug around quite a bit for a solution to this today, and eventually I found one, even though it’s a bit ugly.

The problem here is in setting up a WordPress query that sorts posts based on a meta value. I wanted to sort a list of pages by template, but I wanted to include all of the pages, even ones that don’t explicitly have a template set. But the default query was only showing the ones that did have the template value.

Several dead ends almost led me to give up, until I realized it was a JOIN issue. Specifically, the need to change an INNER JOIN to a LEFT JOIN. I just needed to figure out how to do that in the context of WP_Query.

Cut to the chase, here’s what I ended up with.

add_action('pre_get_posts', function($query) {
  if (!is_admin()) { return; }
  $orderby = $query->get('orderby');
  if ('_wp_page_template' == $orderby) {
    $query->set('meta_key','_wp_page_template');
    $query->set('orderby','meta_value');
    // Workaround to include items without this meta key
    // Based on: https://core.trac.wordpress.org/ticket/19653#comment:11
    add_filter('get_meta_sql', function($clauses) {
      $clauses['join'] = str_replace('INNER JOIN','LEFT JOIN',$clauses['join']) . $clauses['where'];
      $clauses['where'] = '';
      return $clauses;
    });
  }
});

I don’t like doing a str_replace() on part of the pre-built query, but sometimes you gotta do what you gotta do. Also note that this is part of a larger function I am writing that is only for use in the admin side; you could remove that is_admin() check if you want this to work everywhere.

I haven’t had a chance to dig into the details of the query to figure out why the original source post included moving $clauses['where'] into $clauses['join'], but it’s essential. I tried skipping it, and it didn’t work.

Sorry I can’t provide any more context here… but I hope it’s helpful to anyone who finds themselves in a similar situation!