Fixing stuff and maybe other things.

Make an OSX install USB drive quick

Surprisingly, Apple has actually made this pretty easy. <aside>I’m enjoying the Tim Cook reign so far. But that’s a whole separate post.</aside> This works for Yosemite and El Capitan, and I’m assuming future versions too.

Make sure you have the installer downloaded from the app store. It will delete itself after you use it, but you can download it again.

Format an 8 GB flash drive and plug the thing in. Leaving it named “Untitled” is easiest, but you can change it. Just make sure to change any instances of “Untitled” in the command line below.

For El Capitan, Bust our your Terminal, and copypaste this:

sudo /Applications/Install\ OS\ X\ El\ --volume /Volumes/Untitled --applicationpath /Applications/Install\ OS\ X\ El\ --nointeraction

Pretty much the same for Yosemite:

sudo /Applications/Install\ OS\ X\ --volume /Volumes/Untitled --applicationpath /Applications/Install\ OS\ X\ --nointeraction


Star Trek crew dancing like it's 1969


Posted under: Fixing Stuff, Knowing Stuff, Tech Stuff | No Comments »

Flash/Pulse a Border Color With jQuery

Sometimes you want to draw a user’s attention to a certain input or element. One way to do that is to flash or pulse the element. But when you google this, most examples involve flashing the whole background, such as with jQuery UI’s highlight effect. But if you’re like me—as I definitely am— you might think that is a little much. Or maybe it just doesn’t fit well with your design. Here’s how to do it without extra plugins. (Well, except for jQuery UI. Need that.)

There are a lot of methods out there suggested for doing this, such as using .addClass() with a CSS transition, and then removing it with .removeClass(). Problem: It’s difficult and convoluted to get the timing right. If you chain them right together, you get no effect. And they don’t use .delay(), as that only works on animations.

Well, maybe you could do it using .queue()? Yeah, but that’s inelegant to say the least. So let’s use .animate().


Well, okay. Now our input is red. How do we change it back?

  .animate({borderColor:'red'}, 400)
  .animate({borderColor:'black'}, 1000);

The “400” you see on the first animate() defines how long the animation will last, in this case 400 milliseconds or 0.4 seconds. The delay() is important because without it, your second animation will begin immediately after the first. Meaning that the moment the border color begins to change, it will also begin to change back. Kind of worthless. Make sure your delay is at least as long as your initial animation. If you want the border color to remain changed for longer, make the delay longer.

I like to make the return animation slower than the first one. It just looks smoother.

Okay, but you’ve probably noticed a problem already. The return animation makes the inputs’ borders black. What if you don’t want black? Well, you could specify exactly what color it should be based on your CSS, but then if you ever change the style, you’ll have to change your code too. Inelegant.

So maybe you’re thinking, “Hey, self. What if we use jQuery to get the color before we change it?” Nice idea, you. Seems easy.

var original_color = $("input").css("border-color");

Yeah, that won’t work. Why? Because it seems easy, that’s why. (And other technical reasons blah blah moving on.) But the good news is you’re close. Turns out you’ve got to specify which part of the border you want to get the color from. Again, because your original idea would simply be too easy.

var original_color = $("input").css("border-left-color");

I chose left here, but you could use right or top or whatever, since we’re assuming here that your border is the same color on all side. (If not, then I’m sorry. May the fates be kind to you.)

So, let’s put it all together:

var original_color = $('input').css('border-left-color');

  .animate({borderColor:'red'}, 400, 'linear')
  .animate({borderColor:original_color}, 2800, 'easeOutCirc');

Now you’re asking what’s up with the ‘linear’ and ‘easeOutCirc’. Those are easings, which let you finagle with, well, the easing. Look here for examples. I’ve found that sometimes the return trip can get a little jerky, especially toward the end. So I chose ‘easeOutCirc’, which has the slowest tail end. Feel free to tinker with the timings and easings as you see fit.


I’m highly caffeinated at the moment, so let’s get ambitious. What if we have a whole bunch of inputs we want to highlight? In my case, this would be on a form which I’m validating using jQuery Validation. To make things easy on the user—since it’s bad enough they’re having to deal with validation errors in the first place—I like to scroll to the first error on the form, in case it’s off screen. (Otherwise the form will just sit there dumbly and not give any indication why it’s not submitting. #rage)

$('html, body')
  .animate({scrollTop: $(".error:first")
  .offset().top -90}, 500);

Here’s where we go very slightly crazy with the animations. Assuming there are more than one, let’s get all smooth ‘n smarmy and highlight them one after another:

// Get the border color of the first input on the form.
// (.form-control is a class I have on all inputs.)
var original_color = $("#process-form .form-control:first").css("border-left-color");

// Init this
offset = 0;

// For each one pulse the border color, with the duration extending for each
    .animate({borderColor:'red'}, 400+offset, 'linear')
    .animate({borderColor:original_color}, 2800+offset, 'easeOutCirc');

  // Set this to whatever interval you want between input animations.
  // 200 works pretty well.
  offset = offset + 200;

Have fun out there, campers.


Posted under: General Stuff, Web Design | No Comments »

Configure TP-LINK Archer C9 (or C7, C8) for access point mode

Some call it “bridge” mode. The point is you want your TP-LINK to play nice with another router from which your internet actually flows. Like if you have a fiber/DSL/psychic router you can’t replace because ISP reasons but you want some wifi that doesn’t totally suck. For example.

The reason this can be confusing with the Archer series is that many other routers have a setting like “AP mode” that you turn on and you’re done. Or Their WAN (a.k.a “internet”) port can be used for this job. While it’s a nice piece of router, the Archer doesn’t make it clear how to do this. And you may be dealing with/swearing at messages like “WAN and LAN cannot be on the same subnet”.

Anyway, let’s kick this pig! (Translated: “Let’s do this.”) I’ll just start from the top. You can skip ahead if you’ve already done any/some of these.

1. Don’t connect it to your main router yet

Just plug it in and hit the On switch.

2. Log on to that mess

Connect your computer to it with an Ethernet cable, OR hop on one of its default SSIDs it will start broadcasting automagically. (TP-LINK-XXXX).

With that done, head on over to The default login is “admin” for both username and password. Change that later. Do it.

3. Completely ignore the rest of the quick installation guide

Woman tossing a quick start guide instead of a flower boquet

Toss that thing. Or save it for later. Whichever.

4. Set a static IP address

We need your TP-LINK to have a different IP than your internets-providing router, which may likely also be using We don’t want them arguing with each other. This can be whatever you want, so long as it doesn’t conflict with anything else on your network. I usually go with

Visual guide for what to do here.

Ignore “WAN” completely.

5. Disable DHCP

Your other router will be on DHCP duty, so the TP-LINK shouldn’t bother.


6. Other stuff

Change the SSID names and turn on WPA2 security. And change the router login (under Settings > Password and not under Security like you’re very reasonably assuming).

7. Hook it up

Plug the Archer in to your main router, Ethernet-cable-style. Do NOT use the TP-LINK’s WAN port. Use any of the other four.

8. Dance

Because you’re done now.

Wheezy Waiter a.k.a. Craig Benzine dancing

Posted under: Fixing Stuff | No Comments »

Portal Test Chamber Poster (download)

One of my daughter’s friends came over, and upon seeing my home office said, “Whoa! Your dad has a secret lab!” Well, the name stuck. It’s a Secret Lab now. But I felt like it needed a sign. Few things say “secret lab” to me better than Aperture Science, and since a lot of my work involves testing, I put together a 24″x36″ Testing Chamber poster to frame outside the entrance.

Want one of your own? Here’s my PSD file you can download/customize.


Posted under: General Stuff | No Comments »

Getting CORS to work with Apache

Ok, if you’re reading this, I’m assuming you know what CORS means, so I won’t tell you that it stands for Cross Origin Resource Sharing. Or maybe I just told you.

Anyway, you want to enable it on your Apache server. Maybe, like me, you’re building an API-based web app. So you need some JavaScript to pull data from a remote server. (Or even, like in my case, a different subdomain on the same physical server.) It’s easy in Node.js, so it shouldn’t be hard in Apache.

So you google “apache enable cors”. The first result is from Wow, how relevant! Sounds so legit! And it says all you have to do is throw this somewhere:

Header set Access-Control-Allow-Origin "*"

So you put it in your httpd.conf file or .htaccess and boom done.


Except then you try it. And Firebug is all like: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at This can be fixed by moving the resource to the same domain or enabling CORS.

And Chrome says: XMLHttpRequest cannot load https://howdare.youthink.thiswouldbe.easy. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘’ is therefore not allowed access.

But… you did it right. You did just what it said you should do. You even googled it a few more times and everyone says the same thing—Just that one line of code and you’re supposed to be done! You’re supposed to be kicking back with some nachos now! Chrome even says that the header is there, for crying out loud!

Screenshot from Chrome


Yeah, no.

Disappointed face
Turns out there’s a friggin metric crapton more to it than that. I won’t go into all the details here, but there’s a lot. What I will do is give you a list of quick and dirty things to try.

Enable mod_headers

There’s a module that allows Apache to add things to the request/response headers. You’ll need that. Near the top-ish of your httpd.conf file, look for…

#LoadModule headers_module modules/

(Mine was on line 115 in my Apache 2.4 setup.)

If yours has that hash/number/octothorpe/# sign at the beginning, remove it. As with any change to httpd.conf, you’ll need to restart Apache for this to take effect.


First, just putting that line in my .htaccess wasn’t working. I could see the header in Chrome (image above) but it was apparently being ignored for who-the-crap-knows-why. Adding “always” before “set” seemed to correct this. I also moved it from my .htaccess to httpd.conf, just above my virtual hosts section.

Header always set Access-Control-Allow-Origin "*"

You’ll also see different versions of this out there in the wild, some where it says to use header set, and others where it says header add. Both will work, but set is safer in this case because add can add multiple headers, which according to the CORS documentation is not allowed.

Depending on your situation, that might do it for you. But probably not. So…

Other headers

Try adding these three:

Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

The 2nd one determines what headers your requesting server (the one trying to make the remote call) is allowed to send. You likely don’t need all of those, but I left in a bunch for the sake of example.

The 3rd one is super important. It determines what kind of RESTful calls your app is allowed to make. Again, you probably don’t need all of them. In fact, if you’re only doing GET requests, that’s the only one you need. But if you want to POST, then you need OPTIONS, too. More on that below.

GET works, but POST doesn’t: welcome to “preflights”

I won’t go into details here, but I will say that POSTs are different than GETs beyond the obvious ways. One way being that with POST, browsers do what’s called a “preflight” check. Basically, it sends a request before your actual POST, checking to see if it’s allowed to do what it’s trying to.

This was very confusing at first, because my GET calls were working fine, but when I tried to do a POST call, Chrome: 1. showed it as an OPTIONS request; and 2. returned 404 (or 400 or 403 or 500). The heck?

What’s happening is likely that your server is trying to respond to that OPTIONS preflight as a normal page fetch. It’s literally trying to serve up a page. In my case, the URL in question was a PHP script that was expected POST data and wasn’t getting it, so it barfed up a 403 error.

Making PHP return 200 OK for preflights

I had to make a script called blank.php, which contained nothing but some ranty comments. Then, over in .htaccess, I added this:

RewriteEngine On                  
RewriteRule ^(.*)$ blank.php [QSA,L]

What’s happening here is, whenever an OPTIONS request comes in (line 2), it redirects any-and-all of them to blank.php (line 3). Blank.php is, well, blank, so it returns an HTTP status of 200 OK. The browser then takes this as a successful attempt to discover what its OPTIONS are, learns from the other headers (Allow-Origin, Allow-Headers, Allow-Methods) that it’s allowed to do a POST, and then finally sends the real, actual, honest POST that you’ve been trying to get it to do this entire freakin’ time.

Hope that helped

Depending on your environment/needs, that might not be the end for you. If so, you have my sympathy. Either way, I hope this at least gets you a few steps closer.

Posted under: Fixing Stuff, Web Design | 10 Comments »

OS X Yosemite, Core Storage, and partition woes


So when a new version of any OS comes out, I like to do a clean install. On Macs, this has usually been fairly easy, since HFS+ partitions are pretty flexible — they’ll let you add/remove/resize without a lot of hassle.

Until Yosemite.

In the past, I’ve made a new partition on my drive, installed the new OS X (like Mavericks), copied all my files from the old partition to the new one. Once I’m sure that all is fine and dandy, I will go back and delete the older partition and give the space to the new one.

But when I tried this with 10.10 Yosemite, I ran into a new problem. Partitions were no longer flexible. I couldn’t delete or resize any of them. I found this out after spending a full day getting the new Yosemite partition just right.

Some research found that Yosemite will change its partition from HFS+ to “Core Storage”. (According to Ars Technica, there’s not a clear reason why, either.) I’m not sure of all the technical details, but this apparently killed flexibility. So my new Yosemite install was stuck on a partition with only 10GB of free space, when it could have had 400 from the old Mavericks partition. It wouldn’t even let me delete the Mavericks partition. Everything was locked.

Fortunately, I found a solution. You can convert Yosemite’s Core Storage partition back to HFS+. Once I did that, Disk Utility worked fine again. Some notes:

  • This is not destructive. You won’t lose anything.
  • This only works if you have not encrypted the partition with FileVault.

Here’s how:

First, you have to get something called a lvUUID for the partition. (Don’t worry about the annoying acronym. This is all scarier than it looks.)

Open Terminal, and run this (you can copy/paste):

diskutil cs list

This will give you a list of partitions similar to this:

Results of diskutil cs list

Thanks to BrettApple at the MacRumors forum for this.

Okay. See how it says “Revertible: Yes”? That means we can convert it back. You’ll need that super-long string of letters/numbers. In the same Terminal window, type:

diskutil coreStorage revert [THAT LONG STRING OF STUFF]

So in this particular case, we would run:

diskutil coreStorage revert 47F9D6B1-F8F2-4E64-8AD4-9F2E2BD78E29

The results should be quick. Only seconds. Once that was finished, I was able to delete the Mavericks partition and resize my new Yosemite partition to fill all available space.

Some final notes:

  • For more details, check out this forum thread on MacRumors. In particular, post #38.
  • The first terminal command, diskutil cs list will only work if you actually have a CoreStorage partition.
  • You can run this while booted into the Yosemite partition in question. No need to boot the recovery partition or anything.
  • As I understand it, Apple’s Fusion Drives require Core Storage so this won’t work on those.


Posted under: Fixing Stuff | 71 Comments »

Variables not setting in Windows batch file?

Windows batch files (.bat) can be scripted, which means you can do all sorts of things like setting variables. But if you’re having a hard time getting those variables to set, this might be why.

SET var=Holy crap, it sets the variable!

Will work fine, but…

SET var = Holy crap, the space screws it up!

… will not. If you’re used to putting spaces after equals signs like I am, you can make this mistake without even knowing it. If you do it wrong, it won’t throw any errors either. Just silently fails.

Posted under: Fixing Stuff | No Comments »

Localize an SQL date using Javascript

So you have a date from your database and it looks like this: 2014-01-31 01:02:03. It so happens that your server is on UTC time. You want to:

  1. Format the date into something prettier, and
  2. Offset the date so it’s adjusted for a user’s local time zone.

Ok, great. You only have to SUFFER THE PAIN OF A THOUSAND MIGRAINES AND oh wait it’s actually sort of easy. But man, this took a lot of pain and searching to find. The key is moment.js, a glorious gift to developer-kind.

So the way I’m doing this is to create an HTML5 <time> element, but it can certainly be done other ways. First, after running a DB query, I have PHP produce this:

<time datetime="2014-01-03 12:57:03">
    2014-01-03 12:57:03

Not very pleasant to look at. So then we do a little moment.js…

var date = $(time).attr('datetime');
var newformat = 'D MMM YYYY [at] h:mm A';
var nice = moment(date, 'YYYY-MM-DD HH:mm:ss').format(new_format);

There’s some jQuery in there, too, but it isn’t necessary.

What we just did, is we read the date from our <time> element’s datetime attribute, then told moment what format it was in, so it could then spit it back out how we want it to, using .format(), as the human-readable part of the <time> element.

The result looks like this: 3 Jan 2014 at 12:57 PM. Yay. It’s nicer. But that’s still UTC time, and no timezone data was saved in our DB. So we have to add it.

<time datetime="2014-01-03 12:57:03 +0000">
    2014-01-03 12:57:03 UTC

Note that the stuff added here didn’t come from the DB, I added them manually. The “+0000”, or an offset of 0 hours for UTC time, is what we’re giving to moment.js. The “UTC” is just there for humans to read, just in case something goes wrong or Javascript is disabled. With those added, we inform moment.js that there’s a timezone offset in there:

var nice = moment(date,'YYYY-MM-DD HH:mm:ss ZZ').format(newformat);

See the “ZZ” we added in the middle? Now moment.js knows we have a timezone and what it is. And just like that, it’s been adjusted: 2 Jan 2014 at 5:57 PM (adjusted for America/Denver, -7:00).

It was so easy, that after all the suffering gone through before this point, I’m almost mad. But not really. But just a little bit.

Posted under: General Stuff | 1 Comment »

Using Sandbox always fails with PayPal IPN (PHP)

Warning: This post assumes you’re already familiar with IPN, and you’re just having trouble, well, troubleshooting it.

Okay, let’s say you’re setting yourself up with PayPal IPN. You’ve set up a PHP listener not unlike this one. You’re all set, right? Ready to test it out with PayPay’s IPN Simulator! Yeah!

Except it fails. It always fails. Why?

To try and figure it out, I set up a file named paypal.txt and told my listener to write the results to that file. Like so:

// These two lines are just landmarks so you can see where I am:
while (!feof($fp)) {
   $response = fgets ($fp, 1024);

   // Here's the actual logging code:
   $file = 'paypal.txt';
   $current = file_get_contents($file);
   $current .= PHP_EOL."DAMN !fp";
   file_put_contents($file, $current);

Okay? And after hours of troubleshooting, this is the only thing I would get:

HTTP/1.0 400 Bad Request
Server: BigIP
Connection: close
Content-Length: 19

Invalid Host header

Nice, huh? Super helpful. Well, as it turns out, the problem is that the example code I linked to above, and variations of it I’ve found all over the webs only work for live IPN responses. Meaning anything from (like PayPal itself tells you to use) will fail. EVEN IF YOU CHANGED IT to use Sandbox like so: (This is line 15 of the above-linked example code)

$fp = fsockopen ('ssl://', 443, $errno, $errstr, 30);

The problem

As near as I can tell, the problem is that the IPN responses are being sent from, even though you want</> to — have been told by PayPal itself — to work with while developing.

The fix

Here it is. See line 2.

$header = "POST /cgi-bin/webscr HTTP/1.0\r\n";
$header .= "Host:\r\n";
$header .= "Content-Type: application/x-www-form-urlencoded\r\n";
$header .= "Content-Length: " . strlen($postback) . "\r\n\r\n";

Done. Problem should be solved. To sum up, it’s not enough simply to set the fsockopen() to use, you also need to set the response header correctly, or there will be a mismatch and sad, sad failure.

Hope this helps!

Posted under: Fixing Stuff, Web Design | 2 Comments »

Access a mapped network drive from PHP (Windows)

So you want to do something on a mapped network drive using PHP, but it simply tells you it couldn’t find the drive? Worry not.

What’s going wrong?

The problem is that PHP runs under the SYSTEM account, and the SYSTEM account can’t access mapped drives.

The solution:

So, we need to map the drive from the SYSTEM account. You can do this from your PHP script, but if you need persistent access, we can do this:

1. Download the Windows Sysinternals Suite and unzip it somewhere you can easily get to from a command prompt.

2. Open an elevated command prompt. (Search for “cmd.exe” from the Start ball, and then right-click on it, and choose Run as Administrator.)

3. Using the command prompt, navigate to wherever you put Sysinternals.

4. Elevate yourself once again to supreme power by using:

psexec -i -s cmd.exe

A new command prompt window will open that is running as the SYSTEM account.

5. Map the network drive:

net use z: \\[IP ADDRESS HERE]\[FOLDER NAME HERE] /persistent:yes

And you’re done!


You can only remove this mapping the same way you created it, from the SYSTEM account. If you need to remove it, follow steps 1 -4 but change the command on step 5 to: net use z: /delete.

The newly created mapped drive will now appear for ALL users of this system but they will see it displayed as “Disconnected Network Drive (W:)”. Don’t worry though! It displays as disconnected, but will work for any user.

Posted under: Fixing Stuff, Web Design | 6 Comments »
Page 1 of 612345...Last »