Half-Elf on Tech

Thoughts From a Professional Lesbian

Author: Ipstenu (Mika Epstein)

  • Dynamic Amazon Associates

    Dynamic Amazon Associates

    I preface this with a note that there are actually a lot of WordPress plugins that purport to do this.

    Stable, Topical, Content

    Sometimes a blog is just a blog, and you write what you write. Other times you have a site that covers an ever expanding, diverse plethora of topics. When you have topical content that can be easily identified and codified, the game changes. You no longer are forced to rely on generic ads, you can pick and chose what works best for your specific content.

    There are two general ways to achieve this. The first way is adding a specific ad to each page, manually, and the second is figuring out how to automate it.

    Using an API

    Amazon has a Product Advertising API which gives developers access to the entire product catalog, which can let you programmatically determine what links to call and when. Like a lot of Amazon APIs, it’s not exactly written in low-geek levels of usage. This is my constant complaint about Amazon and their services: they were not written to be easily understood.

    Thankfully, unlike my experience with making a custom Alexa skill, I did not actually have to invent the wheel. This time there is a fully functional, if poorly documented, Amazon Product Adverstising Library based on PHP REST and SOAP using the Product Advertising API..

    A ‘Simple’ Application

    The API is best installed via composer, which isn’t my favorite method. Nothing against composer, it’s great to pull down a library and it’s dependancies. My issues with it are that people don’t properly flag their archives so even if you use --prefer-dist on your build, you still get all the tests and documentation and that annoys me.

    Anyway. Use composer, get the files, and then you can use it to call Amazon searches and build links:

    <?php
    include_once( 'vendor/autoload.php' );
    
    use ApaiIO\Configuration\GenericConfiguration;
    use ApaiIO\Operations\Search;
    use ApaiIO\ApaiIO;
    
    $conf = new GenericConfiguration();
    $client = new \GuzzleHttp\Client();
    $request = new \ApaiIO\Request\GuzzleRequest($client);
    
    $conf
        ->setCountry( 'com' )
        ->setAccessKey( AWS_API_KEY )
        ->setSecretKey( AWS_API_SECRET_KEY )
        ->setAssociateTag( AWS_ASSOCIATE_TAG )
        ->setRequest( $request );
    $apaiIO = new ApaiIO( $conf );
    
    $search = new Search();
    $search->setCategory( 'DVD' );
    $search->setActor( 'Lucy Lawless' );
    $search->setKeywords( 'Xena' );
    
    $formattedResponse = $apaiIO->runOperation( $search );
    
    var_dump( $formattedResponse );
    

    Obviously you don’t ‘var_dump’ for real, but it’s a good way to get an idea of what kind of data you’ll be getting back. You can also reformat the output by changing the response transformer. For example, if you want an array, you can add this to your $conf setting:

      ->setResponseTransformer( new \ApaiIO\ResponseTransformer\XmlToArray() )
    

    Customizing Keywords

    Of course not everyone wants every search result to be about a warrior princess. Pity, but that’s the world for you. These three aspects are the ones most people will care about:

    $search->setCategory( 'DVD' );
    $search->setActor( 'Lucy Lawless' );
    $search->setKeywords( 'Xena' );
    

    All of that data was actually saved in the post, so I wrote my code to extract it. That is the actual magic, though. On pages for characters, we had their actors. On pages for shows, we had the show title and genre. Using that, we were able to logically extract the information to generate the appropriate ads.

    Why Not a Plugin?

    I did mention there were plugins that do this. The problem was that I needed to mess with that customization so much. I had to hand code in the logic (which was not perfect) to show the ‘right’ links on the right pages. No plugin met all my needs nor permitted enough customization in the right ways.

  • The Curious Case of a Comatose Cloud

    The Curious Case of a Comatose Cloud

    The summary here is that remotely hosting SVGs caused a massive slowdown.

    Isn’t the Cloud Magic?

    Nope. Well. No. It is totally magic, in that they’re great for large files and are an inexpensive storage alternative. But the cloud is, at the end of the day, just another server out there in the world, holding your data. Unless that cloud server is behind a CDN, you may not see a great deal of speed improvements on your site.

    And in my case, it didn’t.

    Diagnosing the Problem

    In building out a dev site with Tracy (LilJimmi), we noticed certain pages were really slow to load. 35 seconds slow. That’s unacceptable. I compared it to the live site, and it was faster, but some specific pages were still incredibly slow. What pages? The L Word for the most part. And as we inched closer to being done, I said “I’m going to fix this speed stuff before the weekend!” because you can’t go-live on a slow site. You just can’t.

    Once I was home, I fired up a local site, installed Query Monitor, and had a serious sit down with everything.

    It Wasn’t What I Thought

    My initial thought, the one I ruminated on during my bike ride home, was that it was the database queries. Most shows have one or two queer characters, but The L Word has 60 right now. While I may joke about wanting nine more, it’s a weird situation where I need to get the number of characters on the show without knowing the number of characters on the show. My assumption was that it was my calculation loop that caused the issue. That I was querying the queers too many times.

    Turned out it wasn’t (just) the number of characters, it was the number of tags.

    How It Got So Slow

    Most of the issue is my fault. Every single tag has a custom image associated with it. These images are stored remotely, in the cloud, and called as part of the design. The issue was that when calling the images I ran a check “Is the service available?” and if not, it would stop. When you make one or two calls, it’s no big deal. When you make a couple hundred, it adds up.

    The L Word had 2 icons per 60 characters, and then 15 tags, and then 30 more icons.

    Remote Get Is Slow

    I used wp_remote_get to process my images, and it was taking between .1 and .4 seconds per image. That adds up. At first I simplified my check-if-exists routine and more than halved the time to load from 35 to 15 seconds. But in order to drop the page back to 1 second-ish load times, I had to put the images local again. No matter what I did, if I loaded them remotely the best I could get was a 13 second page page load.

    Sometimes, local is better.

    What’s the moral?

    Obviously the moral is test before you rollout. Which we certainly did! By using Query Monitor, I was able to narrow down the speed for the database queries as well as the speed for all the HTTP requests. In doing so, I lost a CDN but gained speed. I’m trying to figure out how to speed up the CDN, maybe by finding a different front-end proxy, but right now I’ll keep using it for the large files like videos rather than the hundred small ones.

    I think it it’s worth it.

  • FacetWP: Spinning While Updating

    FacetWP: Spinning While Updating

    When you use FacetWP you can do some cool things like change the ‘count’ output of a page. Using the function facetwp_display() you can add facetwp_display( 'counts' ) to your page title, and then a boring old archive title goes from “List of Characters (2022)” to “List of Characters (1-24 of 2022)”

    But… What if you could do more?

    What Could Be More?

    If you have a lot of data, sometimes a page can load and FacetWP spins while it collects everything in it’s wee javascripty brain. When that happens, you have a cognitive moment of “What?” And in order not to lose a user, you want to indicate, somehow, that an action is happening. A spinning icon is, I think, a great way to do that.

    So with that in mind, I want to do this:

    List of Characters showing a spinning icon for the number

    And I did.

    The Code

    This needs javascript. I used some logic from the FacetWP documentation and some memories about how you can replace text with javascript and came up with this:

    (function($) {
    	$(document).on('facetwp-refresh', function() {
    		$('.facetwp-count').html('<i class="fa fa-spinner fa-pulse fa-fw"></i><span class="sr-only">Loading...</span>');
    	});
        
        $(document).on('facetwp-loaded', function() {
    	   $('.facetwp-count').html('');
    	});
        
    })(jQuery);
    

    Then I slap it into my PHP code like so:

    $count_posts = facetwp_display( 'counts' );
    
    the_archive_title( '<h1 class="facetwp-page-title page-title">' . $title, ' (' . $count_posts . '<span class="facetwp-count"></span>)</h1>' );
    

    The content for $count_posts shows nothing while it’s loading, so the check for facetwp-loaded will handle it perfectly.

  • Alternate Symbols

    Alternate Symbols

    I like to remotely host my SVGs and then call them in my code. For the most part, this works well, and I wrote out some basic code to check if they’re defined and accessible before displaying.

    But what if you wanted your fallback to be a font-icon?

    And remember, you want your code to be DRY as a bone. So no repeating chunks of code all over the place, please and thank you.

    The Code

    There is but ONE requirement here. You have to define HALFELF_SYMBOLICONS_PATH as the path to your SVGs. In my case, mine is something like http://my-cool-icons.objects-us-west-1.dream.io/svgs/ because I’m using DreamObjects for them. Any cloud host works great for this, mind you.

    function halfelf_symbols( $svg = 'square.svg', $fontawesome = 'fa-square' ) {	
    
    	$icon = '<i class="fa ' . $fontawesome . '" aria-hidden="true"></i>';
    
    	if ( defined( 'HALFELF_SYMBOLICONS_PATH' ) ) {
    		$response      = wp_remote_get( HALFELF_SYMBOLICONS_PATH );
    		$response_code = wp_remote_retrieve_response_code( $response );
    		
    		if ( $response_code == '200' ) {
    			$get_svg      = wp_remote_get( LP_SYMBOLICONS_PATH . $svg );
    			$response_svg = wp_remote_retrieve_response_code( $get_svg );
    			$icon         = ( $response_svg == '200' )? $get_svg['body'] : 'square.svg';
    		}
    	}
    
    	return $icon;
    }
    

    This checks for the existence of the server used and if the actual icon exists before it sets things.

    Usage Example

    In my code, I define it like this:

    $icon  = halfelf_symbols( 'users.svg', 'fa-users' );
    $title = '<span role="img" aria-label="users" title="Users" class="TEMPLATE users">' . $icon . '</span>';
    

    This sets the icon and then calls the span which will help make this more accessibility friendly. I could have coded the span into the function, but since I often have it all dynamically generated, it worked more sustainably this way.

    In this example, I call it like this:

    the_archive_title( '<h1 class="page-title">' . $title . '</h1>' );
    

    And voila. Icons in my page title.

  • Git: Combining Your Messy Commits

    Git: Combining Your Messy Commits

    Sometimes I end up making a lot of commits while I’m working on a branch in order to get the code right. It mostly happens when I’m going back and forth between my new branch and the old (live) one to double check some code that I think got lost. It happens when changing theme structures.

    However. This left me with a conundrum. I had about 100 commits and really it was going to be the messiest pull request ever. Which I didn’t want.

    One Branch to Rule Them All

    In order to fix this, finished up all my errant commits, as messy as they were, and then I went back and checked out the clean development branch (named development). Since everything was up to date, I went and made a new branch.

    That gave me three branches:

    1. development – The actual dev branch
    2. messy-dev – My super messy branch
    3. clean-dev – My clean branch

    Of course, nothing of mine was actually in that clean branch.

    One Branch to Find Them

    Once I switched to my new branch ( git checkout clean-dev ) I imported my old branch with this: git merge --squash messy-dev

    Yep, that was it. I then went though all my regular checks, made sure the code was working, did a few more fiddly changes, and then I ran a git commit to run the last pull.

    This gave me a commit message filled with … well … this:

        Merge branch 'development' into messy-dev
    
    commit 6c7534b9f7eabb5db59a85880bbf42ff2b982d84
    Author: Mika Ipstenu Epstein <ipstenu@ipstenu.org>
    Date:   Sat Sep 23 19:47:27 2017 -0700
    
        Cards again
    
    commit 9fe21f380a1befcbbe34a79937399b679c31c06f
    Merge: 0362bb5 14b4fab
    Author: Mika Ipstenu Epstein <ipstenu@ipstenu.org>
    Date:   Sun Sep 24 18:08:18 2017 -0700
    
        I hate Sara Lance so much!
    
    commit 0362bb5a289e2694bd4872137ad470091529021d
    Author: Mika Ipstenu Epstein <ipstenu@ipstenu.org>
    Date:   Sun Sep 24 17:57:33 2017 -0700
    

    One Branch to Bring Them All

    Don’t worry. I didn’t keep that. In fact, I’d been writing a log of the entire work, listing out what was changed, fixed, added, deleted, etc. So I deleted that entire commit message and pasted mine in it’s stead.

    Well written inline documentation is one thing, but a good commit message saves lives. Since I planned to submit this as a pull request, I knew I had to have a good, simple, commit that listed things that had changed.

    But there also had to be more…

    And In The Pull Request Bind Them

    I’m rather pedantic about all that and wrote about 500 words to explain what all the code was in that Pull Request. Since I’m working with other people, and I’m not the lead developer on this project, I know not to commit my changes to the dev server right away.

    Instead, I made a pull request with a repeat of data in my commit, but also a different and more detailed explanation. A pull request has to explain why the work was done and why the pull is needed.

  • LGBT+Allies At WordCamp US – 2017

    LGBT+Allies At WordCamp US – 2017

    Yet again, Tracy and I have gone a little insane and we’re throwing another fabulously big queer party at WordCamp US. This year the venue is Nashville, which made an interesting turn as Tracy’s in Philly and I’m in SoCal. We drafted some local help and, after a series of emails, phone calls, and one text in all caps, we are happy to announce our second ever LGBT+ Party.

    Friday, December 1, at Suzy Wong’s House of Yum.

    Grab your tickets now before they’re gone!

    And we’re still looking for sponsors to cover the cost of the food and drinks, so please contact us if you’d like to chip in.

    Back for the second amazing year is the faaaabulous LGBT+Allies Meetup for WordCamp US!

    WordPress as a community has been welcoming and inclusive to people of all backgrounds, sexual orientations and gender identities. To celebrate our wonderful diversity, we’re bringing the party to Nashville, for an evening of honky tonking at a brothel of epicurean delight.

    This year, the party will be at Suzy Wong’s House of Yum, located in the heart of Nashville’s trendiest alternative night life scene. Suzy Wong’s House of Yum is a creation of Chef Arnold Myint (and his alter-ego Suzy Wong). Prepare yourself for a cornucopia of vegetarian friendly Asian delights, creative cocktails, sleek décor, and of course seriously campy music.

    We will have the entire venue to ourselves with delicious food and drinks!

    But we wouldn’t be able to bring you all this without the help of our amazing sponsors. In 2016, thanks to the help of our sponsors we not only had a private room, but drinks, food, and amazing exclusive t-shirts. The event is fully funded by the community, and all help is welcome.

    Venue Sponsor: DreamHost

    Sponsors

    If you would like to support the community and sponsor this event, please contact us.

    We hope to see you there!