Half-Elf on Tech

Thoughts From a Professional Lesbian

Author: Ipstenu (Mika Epstein)

  • CloudFlare Code Muncher

    CloudFlare Code Muncher

    CloudFlare’s email protection butchered my code examples.

    Just putting that out there.

    What Happened?

    I went, perhaps ironically, to a post about changing your git repo URLs after activating CloudFlare, and was confused. See, I knew the code was something like me@mydomain.com:/path/to/repo but when I visited the page, it was all gibberish like this:

    /* <![CDATA[ */!function(){try{var t="currentScript"in document?document.currentScript:function(){for(var t=document.getElementsByTagName("script"),e=t.length;e--;)if(t[e].getAttribute("cf-hash"))return t[e]}();if(t&&t.previousSibling){var e,r,n,i,c=t.previousSibling,a=c.getAttribute("data-cfemail");if(a){for(e="",r=parseInt(a.substr(0,2),16),n=2;a.length-n;n+=2)i=parseInt(a.substr(n,2),16)^r,e+=String.fromCharCode(i);e=document.createTextNode(e),c.parentNode.replaceChild(e,c)}}}catch(u){}}();/* ]]> */
    

    I quickly edited the post and saw the content there was just fine. The only content that was getting munged was code output. It was very confusing so I googled and found a surprising answer.

    What Was Wrong?

    Turns out it was “Email Address Obfuscation” — a feature in CloudFlare that munges your email address to protect it from being scraped. In and of itself, that is ultra cool.

    I could wrap everything like this:

    <!--email_off-->
    
    <!--/email_off-->
    

    Or I could filter all the shortcodes… Or I could turn off “Email Address Obfuscation”

    I went with turning off the setting because it was faster, and it’s not like people cant deduce my email address. But if I was going to set it up, the fastest would actually be to filter all shortcodes, and that proved problematic.

    Why All?

    One of the problems is that I use Syntax Highlighter Evolved to handle my code chunks, and one of the things that plugin does is let me use a shortcode based on the programing language. That means the most efficient way would be to say “If this is a shortcode, wrap it in the email-off tags to tell it to shut up.”

    Can You Code It?

    This is theoretical and not fully tested. Use at your own risk.

    With embeds, you can do things like this:

    add_filter('embed_oembed_html', 'halfelf_embed_oembed_html', 99, 4);
    function halfelf_embed_oembed_html($html, $url, $attr, $post_id) {
      return '<!--email_off-->' . $html . '<!--/email_off-->';
    }
    

    But sadly there isn’t a wrap around like that for shortcodes, which means we have to do some serious filtering. There’s a global array called $shortcode_tags that lists all shortcodes (as you register them, so shall they be added), so I’m going to take that and replace their callback functions with my own. Then in my callback, I’ll keep their callback but at the same time I’ll wrap around it:

    function cloudflare_email_off_for_shortcodes() {
        global $shortcode_tags;
    
        $shortcode_tags[ $tag ] = 'cloudflare_email_off_html';
    }
    add_action( 'init', 'cloudflare_email_off_for_shortcodes', 99 );
    
    function cloudflare_email_off_html( $attr, $content = null, $tag ) {
        global $shortcode_tags;
    
        return '<!--email_off-->' . call_user_func( $shortcode_tags[ $tag ], $attr, $content, $tag ) . '<!--/email_off-->';
    }
    

    But that struck me as a little expensive when I considered how rarely I put email addresses in things in the first place.

  • Bower To The Master

    Bower To The Master

    I recently mastered using Grunt to handle automation.

    And then I was handed some Bower code by Carrie Dils. I’m up for a challenge, I muttered under my breath. I already have Node and NPM and Git, so this shouldn’t be too terrible.

    Turns out I didn’t need to change a damn thing!

    First off, Carrie and I are on the same wavelength, having named our files nearly the same and separated them the same. Second, I had been incredibly brilliant and put all of my code in separate files (my.css, my-config.php, etc etc). Third, I had documented everything that I had changed in all of my files in a my-readme.txt file.

    But if I’m using Grunt, what am I going to get out of Bower?

    Bower is a ‘front end’ package manager.

    To install packages, I make a folder for my work and I go there in a command line, I type this:

    $ bower install jquery

    That would install bower into my folder. It’s dependency aware as well, so if I install Bourbon, it will include Neat. This is much the same as Grunt, which can install its plugins and dependencies, but where Grunt is for installing Node modules, Bower is for js and CSS and html as well.

    Grunt is for running tasks. Bower is for managing components. They’re friends.

    Bower lets me set up all the required components for my site (jquery for example). Grunt lets me compress, join, minify, and automate the deployment of those components.

    I tell Bower to get the files and what versions they could be. I tell Grunt to combine all my mini-js files into one, combine them, compress them, and put them in another location. That means I tell Bower to bring in jquery, but it puts it in a development folder. Grunt takes that and copies it to the js folder.

    Personally I take it a step further and, when I use Git to push my code, I tell it to delete the development folder off the server. I also do as Chase Adams does, and I don’t version control my dev packages. I may define jquery’s version, but I dont worry about capturing that in my repositories.

    You don’t have to use Grunt. You could use Gulp. I had a sticker for Grunt on my laptop from a friend, so I tried it first and found I liked it.

    Taking all this a step further, there are tools like Yeoman that will let you kickstart a project by saying ‘yo’ and telling it what kind of project you want to make. Yes, there’s a WordPress project called YeoPress.

    The point of all this is that automation is the queen of development. Don’t do manually what you can safely, reliably, and responsibly automate. Like the Queen on the chessboard, strike out in all directions and control the board. Use the tools to repeat the hard work, to keep dependencies up to date, and to automate the annoying work.

  • Mailbag: Static Bars and z-index

    Mailbag: Static Bars and z-index

    Lindsey asks:

    I found this post on your site (https://halfelf.org/2013/genesis-static-nav-bar/) and had a follow up question about it. My nav bar is now static and fixed to the top of my site, but for some reason a couple of things go over the top of it when I scroll, namely two AdSense ads and a related posts plugin’s images at the end of posts on single post pages. I would love any advice you may have on fixing this. I’m sure it must be something simple, but I can’t figure it out. Thanks!

    It’s the z-index. If you’ve used Photoshop, you know about layers. Well, z-index is similar for webpages. It defines the ‘stack’ order, or what’s ‘on top’ of everything else.

    Logically you want a video ‘on top’ of the CSS etc of the page, so most of the time this isn’t a problem. At the same time when we’re using CSS to position a menu, it gets … weird.

    The basic idea of z-index is that any element with greater stack order is always on top of an element with a lower stack order.

    Here’s the CSS I used for my floating menu:

    .nav-primary {
        position:fixed;
        z-index:99;
        top: 0;
        width: 100%
    }
    

    The z-index on the WP toolbar (that black bar on the top of your site) is z-index: 99999; so you can change your CSS from 99 to 99998 and that should take care of it. We do want that toolbar to always win, after all.

  • URL Validation

    URL Validation

    I was writing a script for a rather complex series of checks on a website. I wanted to do what I thought would be simple. I wanted to grab the website headers and parse them to check if a site was WordPress or not.

    That was a weird and wild trip.

    In theory, this is all the code you need:

    filter_var($url, FILTER_VALIDATE_URL)

    But as it turns out, that’s actually not the best thing! I started using it but found that I could break it pretty easily and, since I was writing a tool I knew would be used by end-users (who are exceptionally creative when it comes to breaking things), I googled around and found this blog post on Why URL validation with filter_var might not be a good idea.

    Yikes! All I was mad about was that FILTER_VALIDATE_URL thinks http://foo is okay, even when you tell it you want the damn host.

    In the end I used this Strict URL Validator code but even then I had to wrap it around this:

    	// Sanitize the URL
    	$gettheurl  = (string) rtrim( filter_var($_POST['url'], FILTER_SANITIZE_URL), '/' );
    	$gettheurl  = (string) $_POST['url'];
    
    	if (preg_match("~^https://~i", $gettheurl)) {
    		$gettheurl = "https://" . $gettheurl;
    	} elseif (!preg_match("~^(?:f|ht)tp?://~i", $gettheurl)) {
    	    $gettheurl = "http://" . $gettheurl;
    	}
    
    	// Is it a real URL? Call StrictURLValidator
    	require_once 'StrictUrlValidator.php';
    
    	if ( StrictUrlValidator::validate( $gettheurl, true, true ) === false ) { 
    
    		// Do the needful
    	}
    

    In many ways, this makes some sense. What is and isn’t a URL can be tetchy to check. http://foo is real. I can use it locally. That’s why http://localhost can exist. And we can’t just say “if not .com/org/net” anymore (if we ever really could). But boy is my code clunky.

  • If You Know What To Do

    If You Know What To Do

    I tweeted this a few days ago.

    If you keep letting people make bad choices, they will KEEP MAKING BAD CHOICES!!!
    Developers, please stop letting your clients do things that you know are wrong! Change the web with your power!

    A few people joked about Nokia phones. I joked about sliders and auto-play videos.

    But the real issue, the crux of this, was marked when the following reply hit my stream:

    this is tougher when there’s a buffer of account execs, project managers, c-levels, stakeholders in the way 🙁

    Yes. It is. So what was I really talking about and what does this mean?

    If You Know What To Do…

    You’re an expert. You’re an expert designer, developer, programmer, writer, whatever it is you know you’re great at. You are. Let’s put the imposter syndrome issue on the shelf and accept our greatness for what it is.

    You know what’s right and what’s wrong. You know that keyword stuffing is bad. You know that not putting in alt/title tags for your images is bad. You know that auto-playing music will make us all want to kill you. You know that no one actually enjoys sliders. You know that mobile-first is the future. You know that CAPTCHA is inaccessible to many people. You know that China blocks WordPress.com.

    You know a lot of things. You’re an expert. And you’ve been hired to be that expert.

    … And You Don’t Do It …

    We’ve all been there when someone on your project team says that ‘sliders improve conversation rates.’ And most of us have replied with a link to http://shouldiuseacarousel.com/. We’ve told them how they suck. We’ve pointed out the security issues with them. We’ve shouted about how putting an ad in the middle stops people from clicking to the end. We’ve brought up mobile issues and lamented their speed issues.

    And then there are the times you don’t. There are times, more often than not, where you just go along with the flow. You hear “We need a slider.” and you do it. You just do it. It’s okay. We all did.

    While there are reasons to go along with your committee, there are reasons not to. Is a slider worth getting into a fight with people about? Probably not. But what about keyword stuffing? What about the slider that you know has security issues? What about those things you know will kill SEO? Do you say no? Do you stand up and say “This is bad and here’s why.”?

    … There You Bloody Well Are, Aren’t You?

    Those things you hate on the web? They’re our fault. Nor yours, ours. We don’t fight back when we know things are bad ideas. When we don’t stand up and say “This is not safe” then we are breaking the web. We have no one to blame but ourselves.

    It’s hard. It’s very hard to do this. You will fight tooth and nail over stupid small things. You will struggle with people telling you that you don’t know anything. And you will feel that nagging doubt of imposter syndrome.

    You’ll also lose sometimes. And that’s okay. The point is not to win all the time, the point is to educate. The point is to stand up and work to make the web better and not fall to the status quo of what you know is wrong. If you do that, if you keep teaching them and educating and explaining, you will chip away at the wrong and make it right.

    But if you’re not willing to do any of that, then you’re making everything worse.

    What was I actually talking about?

    I was complaining about a theme that didn’t allow you to edit the footer. You had to make a child theme to edit the footer, which is fine in and of itself, but it’s not very friendly. It’s a theme with a bazillion bells and whistles to add CSS and change colors, and yet it failed on the most basic of all things. You cannot edit the footer unless you understand the nature of child themes.

    There is a developer out there who’s trying to make a plugin that does all this for the user. His code is a nightmare not because he is a bad coder but because he’s working with a piece of shit theme that throws errors with WP_DEBUG and I haven’t even tried Theme Check on it. I’m afraid to.

    But he’s out there, trying to make things better for people and I think he needs to stop. He’s working with a theme that isn’t worth it. He’s trying so damn hard to make the web better, but he’s failing because he’s starting from a place where everything is broken to begin with.

    Simply put, he’s working to try and shine shit.

    Don’t help people use things that are broken. Fix them the right way. Fix the theme or, if they won’t fix it, stop using it and stop recommending it. It’s not worth your effort if they know what’s right and they won’t do it.

    There they bloody well are. Aren’t they?

  • Mailbag: Getting Started as a Freelancer

    Mailbag: Getting Started as a Freelancer

    Neil asks:

    I am a web technician and proficient in Wordpress. I’ve worked on a number of WP sites, as well as other types of scripts/sites. Some of my work has been volunteer, and assisted by Dreamhost’s non-profit hosting. Would you have any suggestions as to how or where one might be able to start in obtaining freelance work? I know it’s a bit presumptuous but I thought I’d ask- I’ve seen many of your posts in the Dreamhost forums helping out. Kindest Regards, Neil

    I should preface this with a reminder that I’m not a freelancer for a reason. I hate the constant hustle of it.

    I don’t think I’m really qualified to answer this one. But you know who is? Chris Lema. And you know who talked on the Matt Report about how to become a great freelancer?

    But that doesn’t answer where one gets freelance work.

    If I had to start from zero, I’d pick the WordPress Jobs Board and snag a couple people there. Chris Lema supports Codeable, though, so that’s also a really good pick.

    Hey readers, who do you use?