Author: Ipstenu (Mika Epstein)

A Name is Not A Description

One day, you found a app or plugin or add-on for something. It was a feature you always wanted, did exactly what you needed, was well written and supported. It was that panacea of perfection. You loved it. Then you had a computer crash, or a house fire, or moved, and you forgot what the name was. All you could remember was the name was something about what it did. So you decided to Google for it, and quickly found a billion things that fit the bill.

SEO vs Generic

When you’re naming your product or company, you work very hard to think of a name that encapsulates what you are, what you do, and what makes you unique. For example, you don’t name yourself “Shoe Company” and expect people to be able to find you. With very few exceptions (and really only No Name comes to mind), if you want to stand out, you pick a good name where you are prominent.

This directly relates to SEO, and people’s ability to find you. Ever used Apple Pages or Sheets and tried to Google something? Like “How do I make Pages Templates” perhaps. You often feel damn lucky when you get the right result immediately:

But you’re not Apple, are you? So if you named your product “Foods,” you’d probably have a devil of a time getting ranked so people could find you in search!

Unique vs Memorable

Take a look at WordPress. Pretend you’re looking for a slider plugin. Hush, just come with me here. Now. You remember a really cool slider plugin, but all you remember is it was named something like “Best Slider Plugin.” Yeah. You ain’t gonna find it. Probably ever. But what if you were looking for a lightbox plugin, and you remembered the name as “Foobox Lightbox” … Hang on a second. That’s one you’re going to be able to find. It has a unique name, but better than that, it has a memorable name!

The only reason Apple Pages actually works is that Apple is huge and also the fact that most of us Google “Apple Pages whatever” and not just “Pages.” It’s the same with the Apple Watch. It’s nice they call it “Watch.” We call it the “iWatch” because we have to be able to find it, and they picked stupid generic names. Being Apple, they can get away with it.

To their credit, the name is memorable. It’s not unique, but you will remember it. Even if you remember it as “That stupid Pages app Apple made.” You remember Microsoft Word, but you also will remember WordPerfect, and possibly WordStar. But if you listed four Twitter apps, could you remember what differentiates each one without looking? Definitely unique names, like Tweetbot and Twitterific, and certainly memorable, but in the wrong way.

Names vs Descriptions

Many people make a common mistake. They remember the tools they use on their computers, like “TextEdit” and “Notepad” and they think that in order to be found, the name must be short and descriptive. That’s why we get Notepad++ and iTerm. To an extent, this works. LastPass and OnePassword are going to be memorable and unique and descriptive names. But the longer a product, or suite exists, the more likely they are to corner a market and make it harder for the little people.

Let’s go back to WordPress. You’ve made a great popup plugin and you want everyone to know it. There are roughly 500 plugins that use ‘popup’ or ‘popups’ as a tag. There are 2500 or so plugins that show up for a search on ‘popup’ in the directory. Besides the fact that you really should use the ‘popup’ tag in your plugin, there’s no way in the world you’re going to get your new popup plugin to the top of the list in a day.

But … users don’t look for ‘popup’ or even ‘best popup plugin.’ They look for something else. “WordPress popup plugin with call to action on page exit.” They may simply that to “wordpress popup plugin call to action page exit” but they’re going to look for what they need. And they’re going to remember the plugin named “Wait Don’t Go! Popups” that has a nice plugin description of “Grab your visitors’ attention one more time before they leave your page forever.”

Humans vs Robots

Putting a million buzzwords in your product’s name, the description, and the URL aren’t ever going to make you popular. The only thing that does is bring people in the yard. If they see your website is fill with upsell and hyperbole, they’re going to walk right out again. If they see features and explanations and proof that you are, indeed, the bees knees, they’ll stay. If you have a catchy or unique name, they’ll remember and recommend you to their friends.

And then, then you will be a success.

27 March, 2018
Google Auto Ads
After upgrading my theme, I saw a note that I could add my Google Adsense ID, but “Auto Ads must be enabled in your AdSense account for this feature to work properly.”

Auto Ads?

Auto Ads

A month ago Google introduced a new way to handle ads, and simply that is you don’t have to mess around with placing adds. You put your code in and then you tell Google “Gimme them auto ads!” and they add in … well … ads.

Depending on your options, you can show in-article ads or just section ones, and it comes out looking a bit like this:

Not Perfect

There are some issues with this.

There are obvious pros to this, and mostly it’s that I don’t have to think about where an ad is going to go. I can tell Google “Show a medium amount of ads where you think is best” and walk away. I don’t have to worry about which ads to use. Also they use Google’s ‘what fits with the content’ magic algorithm.

But.

I can’t exclude certain areas.

Which means on one of my sites has an extra hunk of ads in the headers, as Google inserted an ad in each section. And I can’t tell it not to put adds in specific sections. I can tell it not to put ads on specific pages, and with Genesis I can do that from within WordPress, but the options just aren’t quite where I want. Yet.

Setting It Up

Like all
1. In the left navigation panel, visit My ads and select Get Started.
2. On the “Choose your global settings” page, select the ad formats that you’d like to show and click Save.
3. On the next page, click Copy code.
4. Paste the ad code between the < head > and </ head > tags of each page where you want to show Auto ads.
It takes about 20 minutes for ads to show up

If you’re using Genesis themes, upgrade to 2.6 and paste your Publisher ID in the new setting field for Auto Ads, in either the Theme Settings, or the new Customizer panel.

If you don’t want that at all, Gary Jones made a plugin to remove it entirely from Genesis Themes. Though I’d point out you don’t have to use it if you don’t want.
22 March, 2018
Safari and SameOrigin
I was updating a site I’ve been neglecting. Due to reasons, it’s been about four months since I’ve looked at it, let alone done any work. But as I was cleaning up the data, moving ads around, and messing with widgets, I found myself stumped.

Customizer was a blank screen.

Debugging Javascript

Now I happen to know that the WordPress customizer makes heavy use of javascript, so I popped open the console and found this error:
```
[Error] Multiple 'X-Frame-Options' headers with conflicting values ('ALLOW-FROM https://example.com/wordpress/wp-admin/customize.php, SAMEORIGIN') encountered when loading 'https://example.com/2017/post-name/?customize_changeset_uuid=0774a706-2a5b-4700-a8fb-2c294708687c&customize_theme=utility-pro&customize_messenger_channel=preview-0'. Falling back to 'DENY'.

[Error] Refused to display 'https://example.com/2017/post-name/?customize_changeset_uuid=0774a706-2a5b-4700-a8fb-2c294708687c&customize_theme=utility-pro&customize_messenger_channel=preview-0' in a frame because it set 'X-Frame-Options' to 'ALLOW-FROM https://example.com/wordpress/wp-admin/customize.php, SAMEORIGIN'.
```
Right away, I knew that the problem wasn’t Javascript.

Safari is Special

A quick search netted me two possible tickets. First, there’s the problem with customizer failing to load if there was a home/siteurl domain mismatch and second, there’s the issue that customizer fails to load in Safari due to X-Origin Header mismatch.

In reading those tickets, I determined that it was possible that since this site has WordPress in a folder (yes, named wordpress) but runs from the main domain, that could break it. There was also a possibility that NGINX or Apache were set to restrict SAMEORIGIN. Finally, there was the absolutely daft problem that Safari was special and didn’t like extra rules.

Now, since this server runs multiple sites, and only this one was having any problems, I threw out all possible server related causes. I also discarded any Multisite related causes, as the site wasn’t the network. Next I determined it absolutely was Safari, by testing on Firefox and Chrome. That left me with the following probable causes:
1. Some code on my site was breaking customizer
…

No, really. That was it.

The Solution

Two choices here. Figure out what was broken or stop using Safari.

I have reasons for using Safari, so I knuckled down. I searched all lines of my code for anything related to X-Frame-Options and came up empty. I tested by commenting out the relevant lines in WordPress core, which worked, but wasn’t tenable.

Then I changed my search and looked for X-Frame-Options in all .htaccess files, and found this:
```
<IfModule mod_headers.c>
     Header set X-Frame-Options "SAMEORIGIN"
</IfModule>
```
Removed that, and done.

Why Was It There?

I actually put that code in to prevent clickjacking. Clickjacking is what’s called a “UI redress attack.” It happens when a malicious attacker uses transparent or opaque laters to trick someone into clicking a button or a link on page, when they were intending to click another. Usually this is to steal private information.

WordPress already does this for the login page, and for this site, that’s actually the only time ‘private’ data is sent on this site. Which means it’s mostly safe enough to leave be. There are ways I could do this in PHP code, but since WordPress isn’t the only tool on the site, it’s harder to maintain.

The better fix would be to, with Apache or NGINX, check the domain and URL, and only apply clickjacking when I’m not in Customizer.

Of course I have no idea how to do that. Yet.
20 March, 2018
Remoteless SVG
I spent about half a year working on being able to remote load my SVG, and I wanted to for a few reasons:
1. Having only one place to update my icons is more efficient
2. They don’t need to be in code versioning control (like GitHub)
3. Licensing (not all are free)
I solved those problems when I finally figured out SVG Injection (via javascript) and CORS to allow the scripts from my objects.

It’s not all lollipops and sunshine

However. There was, and is, one really big issue. The icons being remote mean if the remote server isn’t accessible but my site is, I got no icons. Now, the smart dev in me knows that I should have a check. If the server is up, use the icons remotely. Otherwise, use a fallback.

There was one big, and in the end insurmountable, problem with that. There was no way to do that without slowing my site down, which was the headache in the first place. If I check the uptime for every icon on a page, the site went from a 1 second load to up to 20 seconds. In the best solution, I added 2-5 second load to every page checking if the server was up on every page load. Which is kind of the problem with wp_remote_get() in the first place.

Make ’em local again

This meant the ‘best’ solution was to make them local. Again. Yaaay.

But I really didn’t want to have them stashed in GitHub. I wanted my ‘base’ to be the cloud storage, and then that needed to sync. Normally I would use rsync for that but you can’t rsync from CEPH storage.

Don’t panic. There are answers.

Boto-Rsync

If you’re on DreamPress or any DreamHost server, they’ve forked boto-rsync and (if you set up a .boto file) you can do this:
```
boto-rsync --endpoint objects-us-west-1.dream.io s3://my-cool-icons/ /home/my_user/mydomain.com/wp-content/uploads/my-cool-icons/
```
Using cron or some other scheduling tool, setting up a server to run that at regular intervals isn’t too terrible.

AWS CLI

There’s also the option of AWS CLI, which is very similar, only it’s actually maintained. The advantage with boto-rsync is that it’s installed on the servers at DreamHost. If you have AWS CLI on your server, you can do this:
```
aws s3 --endpoint-url https://objects-us-west-1.dream.io sync s3://my-cool-icons/ /home/my_user/mydomain.com/wp-content/uploads/my-cool-icons/
```
Keep in mind, you need to configure this either with aws configure or an ~/.aws/credentials files.

Pushing from the outside inside

You may have noticed that, unlike rsync, I can’t tell it to push to another server. That is, I can say “sync files from server A to server B” with rsync and I can’t with either boto-rsync or the AWS CLI.

And no, you just can’t.

Unless you use rclone. Which is a little messy but totally do-able.

There’s one other option though… I’ve been using Codeship to push code. That is, every time my GitHub repos update, it triggers a Codeship deploy. And in that deploy I usually just say “Rsync a git clone, k’thnx’bai.”

Now I tell it this too:
```
# Download from S3
pip install awscli
aws s3 --endpoint-url https://objects-us-west-1.dream.io sync s3://my-cool-icons/ ~/my-cool-icons/
# Copy up to Server
rsync -avz -e "ssh" ~/lezpress-icons/ USER@DOMAIN:/home/USER/DOMAIN/wp-content/uploads/my-cool-icons/ --delete
```
I will note there’s one extra trick. You have to add Environment Variables for AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY on Codeship.

This works for me since there are few times I push an icon without also making some code changes to the server code anyway.

Hopefully if gives you some directions.
15 March, 2018
CORS – Not Beer
I’ve been struggling with the idea of remote loading SVGs. There are a lot of problems with this, mostly due to the DOM structure of how your browser loads an SVG file.

What’s an SVG and the DOM?

Scalable Vector Graphics, or SVG, is a special XML file. It’s generally used like an image, like JPG or PNG, and contains vector graphics. This makes it smaller than PNGs and scalable without resolution loss. Pretty nifty for icons. In fact, better than my beloved Fonts.

This is a part of the Document Object Model, or DOM. In the file, you tell it how you want the content to render. It’s why an SVG can be so powerful, having all the code you need inside a small file. It’s also why it’s so dangerous. Specifically if can contain Javascript code, which can be embedded and hidden in an image. And that can do a lot of damage. If you’re not paying attention, you can upload an SVG with javascript that runs code on the user’s browser. Bad times all around.

Making this worse, if you use <img> tags to embed the SVG, many browsers will execute the code. Even today. Yeah… Not really a good thing.

Embedding SVGs externally has a cost

If you want to include an SVG file in your web page, you can use that dangerous <img> tag, but you can also use <svg> code right in the document. The problem there is that requires the SVG to essentially be pasted into the code. For PHP, you can use code like file_get_contents() (which doesn’t always work remotely) or if you’re WordPressy, wp_remote_get()

The catch there? They’re slow if you list, oh, 69 images on a page. You can, of course, use <img> tags and that loads the SVG remotely, perfectly happily. If you’re sure about your SVGs, this is okay. You’re just going to lose one big, super big feature about SVGs.

You can’t use CSS to edit them (color, resizing, etc) anymore.

And that, my friends, is a big problem.

Javascript End Run

I wasn’t willing to compromise speed or flexibility. I’m particular like that. So I looked up how you can use javascript to hack the DOM. I quickly found SVGInjector, a fast, caching, dynamic inline SVG DOM injection library. Installing and configuring was easy buuuuut…

You saw that but coming, right?

Right.

It didn’t work. Because of CORS.

What the heck is CORS?

Cross Origin Resource Sharing, CORS, is that magical thing that says “Hey you can’t run this resource remotely, yo!” Generally it’s related to Fonts (if you’ve ever tried to embed your own fonts from your own servers, you’d have run into this). I happened to hit it on SVGs, and basically the server where I host the icons wasn’t allowing my servers (local or otherwise) to load the icons.

Thankfully! I use DreamObjects, and you can totally set up CORS on DreamObjects. You can do it on Amazon S3, and I think all the various CEPH-esque services let you.

The catch here (hah you saw that coming, right?) is that not all clients let you do it. Lucky for me, I have s3cmd on my laptop (you should too if you’re going to work with S3 type services – it’ll make your life easier). Installing is easy, and you just have to make a .s3cfg file (DreamHost has some instructions).

Once that’s set up, you can make your rules file like this:
```
<CORSConfiguration>
<CORSRule>
    <ID>Allow My Icons</ID>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <MaxAgeSeconds>86400</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>
```
and then you can set (and check) your CORS:
```
ipstenu@Uhura:~$ s3cmd setcors Development/example.com/cors-rules.xml s3://my-icons
ipstenu@Uhura:~$ s3cmd info s3://my-icons
s3://my-icons/ (bucket):
   Location:  us-west-1
   Payer:     BucketOwner
   Expiration Rule: none
   Policy:    none
   CORS:      <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><ID>Allow My Icons</ID><AllowedMethod>GET</AllowedMethod><AllowedMethod>HEAD</AllowedMethod><AllowedOrigin>http://example.com</AllowedOrigin><AllowedOrigin>http://example.com </AllowedOrigin><AllowedOrigin>https://www.example.com </AllowedOrigin><AllowedOrigin>https://www.example.com </AllowedOrigin><AllowedHeader>Content-*</AllowedHeader><AllowedHeader>Host</AllowedHeader><MaxAgeSeconds>86400</MaxAgeSeconds><ExposeHeader>ETag</ExposeHeader></CORSRule></CORSConfiguration>
   ACL:       lezpress: FULL_CONTROL
```
And now you can embed your SVGs remotely.
13 March, 2018
Reordering Facet Displays … For Death
Isn’t that a catchy title?

I’m using FacetWP to help me order and sort archives in ways that are reflective of the content. One of the things I sort are characters (yeah yeah yeah) and some of those characters are dead. It occurred to me that wouldn’t it be nifty if I could sort the characters by when they died?

There was just one problem. Actually there were two. One was Sara Lance, and she’s my personal demon. The other was my own stupidity and lack of foresight. Neither were insurmountable.

How FacetWP Changes Sort Order

Before I get into the weeds, let’s have a moment to talk about sort order. FacetWP has a way to filter the sort orders.

So for an example, I have post meta value for the number of characters saved as lezshows_char_count for all shows. If I wanted to sort shows by the most characters to least, I can add this in:
```
$options['most_queers'] = array(
	'label' => 'Number of Characters (Descending)',
	'query_args' => array(
		'orderby'  => 'meta_value_num', // sort by numerical custom field
		'meta_key' => 'lezshows_char_count', // required when sorting by custom fields
		'order'    => 'DESC', // descending order
	)
);
```
It looks very similar to WP_Query and that’s what makes it easy. Except for my two problems…

Problem One: Formats

The first problem was not the Sara Lance problem. It was the ‘Mika didn’t think about things 4 years ago’ problem. I was saving the dates of death in the format of MM/DD/YYYY

If you’re an American, you’re wondering “So what?” and if you’re anyone else, you’re giving me a death glare because “08/05/2010” could be August 05 OR May 08, and damn it, I knew better. For what it’s worth, the output on the front end is always “05 August 2010” but that’s not here nor there.

You see, the issue isn’t that I was using stupid date/time formats, the issue is sorting.

In the previous example, I have an order of meta_value_num which is literally a number. What’s the one for dates? You get meta_value_date or meta_value_datetime and neither of them work with the date format I’d chosen.

So for this to work, I had to go and change everything from MM/DD/YYYY to YYYY/MM/DD – Not fun, but doable. And it led me to my Sara Lance Drama…

Problem Two: Arrays

How many times has Sara Lance died? Right now, three.

When I decided to sort by the date of death, which one did I pick? Long pause.

I decided to pick the last one. That is the most recent death. If someone’s actually still dead, the most recent death is the one that stuck. If they’re not, then death was pretty arbitrary to begin with and there ya go.

The question became how and where did I save the death? I went with a post meta of lezchars_last_death and had it auto update on post save, like this:
```
add_action( 'save_post_post_type_characters', 'characters_update_meta', 10, 3 );
function characters_update_meta( $post_id ) {

	// unhook this function so it doesn't loop infinitely
	remove_action( 'save_post_post_type_characters', 'characters_update_meta' );
		
	// get the most recent death and save it as a new meta
	$character_death = get_post_meta( $post_id, 'lezchars_death_year', true );
	$newest_death    = 0000-00-00;
	foreach ( $character_death as $death ) {
		if ( $death > $newest_death ) $newest_death = $death;
	}

	if ( $newest_death !== 0000-00-00 ) {
		update_post_meta( $post_id, 'lezchars_last_death', $newest_death );
	}

	// re-hook this function
	add_action( 'save_post_post_type_characters', 'characters_update_meta' );
}
```
If there is a latest death, we get to set it as the YYYY-MM-DD value and off we go. But…

Problem Three: Orderby Hellscape

Surprise! I ran into a third problem! Remember how I was using the orderby of meta_value_num in my example? And I mentioned that I wanted to use meta_value_date or meta_value_datetime to sort by date?

Yeah no.

If I’d converted the date into unix time, sure. But I was reusing this logic in a couple places, and I didn’t want to re-save everything like that. I also use a query to grab all deaths in a year, and basically I do need to keep it with the format I have. That just messed up my sort until I found the magic of orderby' => 'meta_value',

End Result?

It works. It’s got yet another post meta, which I’m not super happy about, but sometimes that’s really just the simplest way to solve a problem. The data is always updating itself, and it’s relatively easy for me to tweak it. Also now I can do a lot more searches in different ways.

Since I don’t have to worry about database size at the moment, nor speed, since I’ve designed it well, this works for me.
8 March, 2018