Half-Elf on Tech

Thoughts From a Professional Lesbian

Tag: website

  • Be Nice to Future You

    Be Nice to Future You

    Sometimes the brunt of my education of developers is a constant reminder to be nice to the future them. Future you, or Drunk You if you’re Otto, loves you most when you take the time to prepare things for them. A little bit go foresight and planning will make life so much better for future you, and I’m going to break down six tips to make you love yourself in the future.

    Document, Document, Document

    Yes. Document everything. Did you make an API for your system? Document it somewhere everyone can get to. For my LezWatch TV project, I painstakingly documented out all of that, plus how the git repositories worked, how they deploy code, and how to get access. This is for something that two people work on. But by documenting it, we all know what to do! The better my documentation, the less likely I get a panicked message from my cohorts in crime.

    Make Good Commit Messages

    I’m terrible at this when it’s for personal use (the number of commits that are ‘I am stupid’ cannot be counted), but at work I’m pathological about a good subject and a descriptive summary. I want someone down the road to know what the patch does, but also why I did it.

    icons: Add new icon set

    Add 17 new icons from LIBRARY. This adds support for iconography with job descriptions, as well as better defaults for taxonomies and categories.

    It’s not complicated, but it’s helpful when someone wonders “When did we add those new icons?”

    Inline Document Weird Stuff

    One of my coworkers is great at this. Ben litters his code commits with them, and I’m sure some people find them annoying but I see them as helpful and amusing. Sometimes he puts in “I hate that we do this, but I needed to pass X.” That tells me two things: First, this code could be better. But second, I know what he’s trying to do and generally why. He’s given context to the situation, and future us will hopefully be able to make this better.

    Make Note of To-Do Items

    Another great habit is to put in notes, as inline comments sure, but also in the documentation. I’ve been using Trello in addition to inline comments (usually things like “To Do: Add in a check for foobar”) to make sure that my future plan is known. You want to make sure future you knows where you were going, and those to-dos are your sticky notes.

    Follow Existing Project Standards

    Okay. I hate this one. But. If your project has a standard, keep using it. The other day I ran into a problem where a new version feature wasn’t behaving the same way as the old one, but only in very specific situations. I walked backwards through the code until I determined a parameter didn’t exist on the new version. I had two options. One was to edit the code to check “If this new version, also…” and the other was to add the parameter to the 500 or so impacted items and then fix my code so it was always fixed going forward.

    The project had been using the parameter method for years, so that was my solution. It followed the standards.

    If You Have A Plan, Use It

    This sounds weird, doesn’t it? It came up when I was reviewing a plugin and noticed that some code looked very ‘generic’ while still being specific. I thought that it had to be a library the company had made for themselves, and asked if that was the case. I explained, if it was an original library they planned to reuse, they should use an if-exists check.

    What Are Your Tips?

    What tips do you have to make life better for future you?

  • Query Strings vs Static Resources

    Query Strings vs Static Resources

    If you ever do a page speed check on your site, you may have seen the notice to “Remove query strings from static resources.”

    What Are They And Why Do I Care?

    At their most basic, a query string is any URL that has a ? in it. For example, if you go to a url of https://example.com/?lang=en then that last bit is the query string. It’s job is to tell the browser to pass on specific information to the website. It’s essentially a variable that will be read by the website or the browser.

    A static resource is a file used by a website that doesn’t change much (if at all). These are usually images but also CSS (style sheets) and javascript files. These resources can be stored on web servers, proxy/CDN servers (like Cloudflare or MaxCDN), or even a web browser, which makes your sites run faster.

    However. The explanation is that browsers don’t cache anything with a query string. Which means, yes, if your static resources have one, they won’t get cached.

    Or will they? (It’s complicated.)

    Why Do My Resources Have Query Strings?

    If query strings break caching, why would anyone have them? Because we don’t always put version numbers in our paths for common files. For example, in WordPress if you call jQuery (a common javascript library), you’re calling a path like https://example.com/wp-includes/js/jquery/jquery.js and that has no version number. But WordPress has certainly updated that a number of times.

    In order to make sure that jQuery gets properly cached when you upgrade, WordPress adds a query variable like this: https://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4

    This is important because otherwise when you upgraded WordPress, you’d see a page formatted weirdly and misbehaving, all because the wrong (cached) jQuery was loaded.

    Should I Remove The Query Vars?

    Maybe.

    Yes, allowing your resources to be cached will make your site faster, and it will get you a higher score in those page speed checks. At the same time the speed benefit is pretty low compared to the dangers of those files not being properly updated. Features on your site will, literally, cease to function.

    So you’ll need to decide for yourself which is more important.

  • Still Don’t Disable Right Click

    Still Don’t Disable Right Click

    Back in 2011, I wrote about not disabling right-click. That page still gets a reasonable amount of traffic and it's time for a brief revisit.

    The Only Way to Protect Data Is Not To Have It Online

    Let's start with the lesson everyone needs to learn. There remains but one and only one way to protect your data online. There is only one sure-fire way to make sure your photos aren't stolen, your videos aren't leaked, and your content isn't ripped off. Don't put anything online that you're not alright with having taken from you. This sucks. I know. This is pretty horrid life advice, but the fact is that as soon as you put something up on the Internet, and people like it, they will take it. Worst, they'll claim it as their own. I really hate that one.

    You Can Still Protect Content

    This isn't all bad news. You can still have content that is protected from re-use, it not actual theft, but you have to be intelligent about it. You have to think about what you're protecting and why. Protecting all the images that viewers see on your site is a lost cause. There are just too many ways to download them.  Instead, it's a matter of cutting your losses, protecting only what must be protected, and then intelligently guarding what's left. And here are my simple rules for content protection:
    1. Watermark images you don't want reused
    2. Server protect folders that store downloadable data (i.e. .htaccess )
    3. Hide the URLs for downloadable data
    That's it. Three rules.

    But What About…

    No. What? You want me to talk about how Instagram protects images from right-clicks and, thus, downloads? You want me to point out that even Wix tells you how to protect right-click? You think I should tell people how Getty images uses code to watermark and right-click protect? It doesn't matter. As Wix so rightly points out, anyone who knows how to view source code could get the images anyway. And trust me, people who want your images will work hard and learn that. They'll quickly figure out how to get around it. You can get around Getty images, but they do the most important thing of all. They know you're going to take their low-resolution images. They're okay with that loss kind of – I don't recommend it as they'd sued people over re-use. But they will absolutely take you down if you 'steal' their high resolution images, because the only way to do that is to make an account with them and purchase. They out and out hide the images from anyone who didn't buy them. They're locked behind a user-account. The lesson you can take away is this: The only winning move? Is not to play.
  • Not Spilling SEO Juice

    Not Spilling SEO Juice

    Once in a while I still get people who ask me to do things for them. Some offer to pay, most don’t, but a common thread lately has been “How do I redirect and not screw up my SEO?”

    They tend to ask it nicer, but that’s what they mean. And to be honest, the question surprises me in 2016. I’ve read email after email about people who swear “I renamed my domain/page and now my SEO crapped out!” And to each and every one I ask “Did you redirect it properly?”

    I think what’s happening is that the problem is so clear cut, people are overthinking. That is, bar none, the biggest mistake I feel anyone ever makes. They overcomplicate a problem and mire themselves in the hell of debugging. I do it all the time.

    Let me tell you a story. When we started LezWatchTV, we had some pretty non-SEO friendly URLs. Our taxonomy for TV stations was “show-tags” and it went on and on with worse and worse names. Finally I sat down and drew out a map of what the ‘best’ SEO names would be for what I needed, and it was very short:

    • TV Stations: stations
    • Character Traits: cliches
    • Show Tropes: tropes
    • Characters: characters
    • Shows: shows

    Five items. And to do the recdirects, I put this in the .htacess file:

    RedirectMatch 301 ^/show-tags/(.*) /stations/$1
RedirectMatch 301 ^/character-tags/(.*) /cliches/$1
RedirectMatch 301 ^/lez_cliches/(.*) /tropes/$1
RedirectMatch 301 ^/lez_tropes/(.*) /cliches/$1
RedirectMatch 301 ^/lez_chars/(.*) /characters/$1
RedirectMatch 301 ^/show-characters/(.*) /characters/$1
RedirectMatch 301 ^/tv-shows/(.*) /shows/$1

    That’s all I needed. I took all the old, bad names and I redirected them to the good names. But I had to throw in an added wrinkle. I’d originally decided shows would have cliches and characters tropes, but I realized that was wrong and flipped them a week later. That meant I had things like /cliche/law-enforcement which had to be redirect to /trope/law-enforcement and for that, there was nothing to be done save a massive section like this:

    # BEGIN Great Big Redirect Section
RedirectMatch 301 ^/cliches/bisexual-love-triangle(.*) /tropes/bisexual-love-triangle$1
RedirectMatch 301 ^/cliches/coming-out(.*) /tropes/coming-out$1
RedirectMatch 301 ^/cliches/gay-for-ratings(.*) /tropes/gay-for-ratings$1
RedirectMatch 301 ^/cliches/law-enforcement(.*) /tropes/law-enforcement$1
[...]
RedirectMatch 301 ^/tropes/athlete(.*) /cliches/athlete$1
RedirectMatch 301 ^/tropes/cross-dresser(.*) /cliches/cross-dresser$1
RedirectMatch 301 ^/tropes/firefighter(.*) /cliches/firefighter$1
RedirectMatch 301 ^/tropes/teacher(.*) /cliches/teacher$1

    This goes on for 24 character clichés and 18 show tropes. It had to be done manually.

    Now let’s ask the big question. Did I lose any SEO Juice by doing this?

    Not a drop. Because I used a 301 redirect and I used it properly (calling it well above my redirect for WordPress). This is exactly what Google’s webmaster docs tell you to do:

    If you need to change the URL of a page as it is shown in search engine results, we recommend that you use a server-side 301 redirect. This is the best way to ensure that users and search engines are directed to the correct page. The 301 status code means that a page has permanently moved to a new location.

    Still not sure? Here’s what Joost (of Yoast SEO) says when asked if you should use a 301 or a 302 redirect:

    The answer is very simple. You should never use a 301 redirect if you ever want to use that url again. So if you’re redirecting one url to another and you’re sure that the old url is never going to be used again, it’s a 301. If you’re not sure, it’s a 302. That’s it. Good luck!

    This is, again, straightforward. If you’re never using the page again (which I’m not), you use the 301 redirect.

    By the way, if you’re using Yoast SEO Premium, then you should still have access to their redirect tool. Personally I feel that’s a change that should be on the server level, not a plugin.

    Okay, so what happens if you forget to do this? Your SEO will tank. However this can be fixed! Again, if you’re using Yoast SEO and you set up Google Analytics and webmaster tools with it, you have a handy Search Console which will let you see what the errors are. If you don’t, but you use Google (and really this is where it’s quite helpful), you’ll go to your Search Console > Crawl > Crawl Errors page and check out what’s listed.

    Remember to check desktop and smart-phone pages. As long as you keep those old URLs redirecting properly to their new home, your juice will be safe and sound.

  • Optimizing Images

    Optimizing Images

    After running a regeneration of my images (due to changing things on my theme) my Gtmetrix score dropped from an A to a D! In looking at why, I saw it was telling me my images should be optimized.

    Best to get on that, eh?

    The easiest way is to install jpegoptim on the server:

    $ yum install jpegoptim

    And then to run a compression on my images:

    $ jpegoptim IMAGE.jpg

    Anyone fancy running that on a few thousand images? Hell no. We have a couple options here. One is to go into each folder and run this:

    $ jpegoptim *.jpeg *.jpg

    The other is to sit in the image root folder and run this:

    $ find . -type f -name '*.jp?g' -exec jpegoptim {} --strip-all \;

    I picked --strip-all since that removes all the image meta data. While I would never want to consider that on a photoblog, I needed to compress everything and, for some reason, unless I stripped that data I didn’t get smaller sizes. For this case, it wasn’t an issue.

    What about PNGs? Use optipng ($ yum install optipng) and run this:

    $ find . -type f -name '*.png' -exec optipng *.png \;

    Going forward, I used Homebrew to install those locally and compress my images better, though I’m usually pretty good about remember that part. Well. I thought I was.

  • To Block or Not To Block

    To Block or Not To Block

    Ad blockers. Okay.

    I have ads in this site. I have donation buttons. I make more via the ads, naturally, and I use the money to offset the absolute frivolity it is to run a web server. I also use ad blockers.

    And I also understand the worry of ad blockers on iOS because I see the possible loss of income.

    But.

    My ads are not obtrusive. I hope. I test them a lot on browsers. I don’t display them on smaller ones. I am picky about the ads. I don’t have pop-up/lightbox ads or alerts that congenially prompt people to sign up for a mailing list or try a service. I hate those things. They get between me and the content I’m trying to read. They prevent me from visiting sites. And if you’ve tried to click away an ad like that on your iPhone, you know my pain. Let’s not even get into the accessibility problems.

    No, ethically I chose not to host the ads I hate.

    And I lose money because of that.

    A lot of money. Probably a hundred a month, easy. And I’m personally okay with that, because I can afford this website. I have the money to keep it up, and for what it costs me, it’s cheaper than other hobbies. It’s helped turn a hobby into a career.

    But the same cannot be said of all websites. Many need those ads to survive and flourish.

    So in the balance between content and money, with accessibility and speed on the line, what is the right answer? Who is more important? Where is the right path to earn money while showing ads and not pissing off readers?

    And I’m not the only person who has trouble with this balance. The developers of Peace, an iOS ad blocker, pulled his product after two days, saying it didn’t feel good. He doesn’t like being the person who gets to decide what ads are right and wrong. That said, Marco is still a proponent of blocking for the ethical reasons of knowing who’s tracking you.

    Disclosure time! I use an blocker on my computer. It’s µBlock, which Taylor Swift also uses:

    But the truth is I actually block few things. It’s not that I want a blocker but I want an unobstructor tool. Just like we despised pop-ups, I hate the following things:

    1. Ads that redirect my iPhone to the App Store to buy your stupid game
    2. Ads that cover my entire browser window, forcing me to click away
    3. Ads that autoplay, making me scroll the hell around and figure out what I have to turn off
    4. Ads that popup in the background, making me address them before I can read

    If you can’t see a trend, let me explain it for you. I hate all things that pull me away from your content.

    The New York Times has reported on this: Enabling of Ad Blocking in Apple’s iOS 9 Prompts Backlash

    “When ad blockers became the most downloaded apps in the App Store, it forced publishers and advertisers to rethink the role that advertising plays on the web,” said David Carroll, an associate professor of media design at the Parsons School of Design.

    That illustrates the issue. It’s not that we hate ads. Most of us understand them as a necessary evil. We pay for Netflix to get fewer ads. We pay for cable to get higher quality shows… in theory. We get ads with free TV because it’s free and has to make money. We get ads on newspapers and in magazines because they are surprisingly low cost for what they are. Ditto comic books.

    We know and we understand why ads are there. We rebel because the ads make it impossible to get at the content. The thing we came for.

    I don’t have an answer. I know that, sometimes, I actually do click on ads that interest me. I also know that most of the time people don’t click on ads. I know that many sites need ads to keep going and to keep delivering content. But I know what we’re doing, making ads more and more in your face, is not the right way to win.

    Right now I have no iOS ad blocker. I haven’t found one I like yet. I’m sure that will change.