Web Dev Blog

Looking for help with WordPress, Apache, Vim, Web Security and more. Here are a few tips.

WordPress Production and Development with Fiddler Proxy

A common problem with development, staging and production environments for WordPress projects is switching your browser between the environments. Traditionally the way to do this was with hosts file updates that redirect a domain name to the IP address of your development server. WordPress is setup with a specific domain name, so running on a subdomain or a development domain name can introduce problems into the site when you move from development to staging or production. In a perfect world your development and staging environments should be 100% identical to the production environment, that way there aren’t additional testing requirements to verify bugs haven’t been introduced in the migration process. Finally there is a convenient way around this by using a proxy.

The development environment in this situation is using the Roots Sage framework which comes gulp and browserwatch which runs on port 3000 by default, but it would be easy enough to setup a similar environment by running apache or nginx on a non-standard port in your development environment.

Fiddler is a free “web debugging proxy for any browser, system or platform”. It will run in the background and intercept all of the traffic between your browser and the Internet. One of the options it offers is a Host Remapping function (found under Tools>HOSTS). The great thing about the Host Remapping, for our purposes, is you can include port numbers in the remapping.

In this example, the development environment is running on an Ubuntu server on the local network. www.foo.com:3000 is redirected to the local IP address port 3000. When this is enabled, www.foo.com will route to the live production environment and www.foo.com:3000 will route to the dev environment. This allows you access to both environments simultaneously for comparison. WordPress works exactly the same in both environments.


A big advantage of this is you no longer have to edit your Windows Hosts file every time you want to switch back and forth.

To avoid confusion it might be good to integrate something like WP Local Toolbox which can give you some visual cues as to which server you are accessing without adding additional configuration problems.

Automatically Change Indent When Pasting in Vim

For years I’ve been trying to figure out how to keep Vim from automatically indenting when I copy from one file to another.

Stackoverflow mentioned this page buy a developer named Marcin Kulik

Automatically set paste mode in Vim when pasting in insert mode

let &t_SI .= "\[?2004h"
let &t_EI .= "\[?2004l"

inoremap [200~ XTermPasteBegin()

function! XTermPasteBegin()
set pastetoggle=[201~
set paste
return ""

This code automatically turns off the Vim indent functionality when new text is pasted into a file. Just add it to your .vimrc file.

It’s the same as a set paste and set nopaste before and after pasting new text, but it happens automatically. I’ve tested it and it seems to be working PERFECT. I love it!

Use rename linux command for podcasts in Plex

I’m attempting to integrate podcasts into Plex so that I can listen to them over my Roku. This is something Plex doesn’t do well yet, but I’m following this tutorial on Reddit

how to create a PODCAST library, a VIDEO PODCAST library, an AUDIO BOOK library, and much more – an ultimate plex guide

The rename command, which is implemented in perl, can rename the files.

The files should be in a format like this
“podcast name” – “s01e###” – “title”.mp3

the patch – s01e100 – mortal kombat x + halo online.mp3

My goal is to integrate the Escape Pod podcast, so I have the latest Escape Pod download


The first command to run against the filename adds Escape Pod to the beginning and puts the episode number into a Season/Episode format (S01E502)

rename -v ‘s/EP(\d+)_(.*[A-Z].+)\.mp3/Escape Pod – S01E$1 – $2\.mp3/’ EP502_GorlacktheDestroyersAllYouCanEatAdventure.mp3
results in
EP502_GorlacktheDestroyersAllYouCanEatAdventure.mp3 renamed as Escape Pod – S01E502 – GorlacktheDestroyersAllYouCanEatAdventure.mp3

The title is still a little ugly, so we run this command which will add a space in front of each capital letter in the title except the first one.
rename -nv ‘s/([a-z])([A-Z])/$1\ $2/g’ ./Escape\ Pod\ -\ S01E502\ -\ GorlacktheDestroyersAllYouCanEatAdventure.mp3
results in
./Escape Pod – S01E502 – GorlacktheDestroyersAllYouCanEatAdventure.mp3 renamed as ./Escape Pod – S01E502 – Gorlackthe Destroyers All You Can Eat Adventure.mp3

This gets us close. Unfortunately “the” wasn’t capitalized, so it’s not easy to add a space in there.
I ran this command
rename -n ‘s/(the\ )/\ $1/’ *mp3
Escape Pod – S01E502 – Gorlackthe Destroyers All You Can Eat Adventure.mp3 renamed as Escape Pod – S01E502 – Gorlack the Destroyers All You Can Eat Adventure.mp3
which worked in this situation, but it has a good probability for false positives.

This isn’t perfect, but it gets me much closer to where I want to be.

Search for a file name and insert it into a Vi (Vim) file

Something I’ve been trying to do for years and didn’t realize it was so easy. Know when you are editing an html file and want to insert a filename for an image or other asset without leaving Vim? There’s an easy way to do that.

Just use Ctl-X Ctl-f

Completing file names *compl-filename*

CTRL-X CTRL-F Search for the first file name that starts with the
same characters as before the cursor. The matching
file name is inserted in front of the cursor.
Alphabetic characters and characters in 'isfname'
are used to decide which characters are included in
the file name. Note: the 'path' option is not used
here (yet).

Vesta and nginx instead of cPanel and apache

cPanel doesn’t support nginx, and all the reviews and testing out there say nginx is significantly faster under load that apache.

As an alternative to cPanel I’m going to test out the Vesta control panel http://www.vestacp.com/ and nginx to see how difficult this configuration is to setup, how long it takes and if it’s robust enough to use as a cPanel replacement.

Initial installation went smoothly, but the default configuration is Apache and nginx as a proxy. I want to install nginx with php-fpm, but appearantly this hasn’t been released yet. As such, I guess I will have to wait…

Initially my first impressions of Vesta is that it’s super fast and clean. I’m not sure I understand all of their layout yet, but everything seemed to work great.

Command Line Scraper for RetroPie

I’ve been playing with a Raspberry Pi for the last few weeks. Have RetroPie setup and was attempting to use the builtin scraper in Emulation Station. Unfortunately it’s not great. It would stop working, hang up and skip lots of files. My preference would be a scraper that works on a CLI.

Then I found this video:

Great tutorial on the scraper, written by Steven Selph, that runs on the command line and can be found here:

Seems to be working like a champ. The only downside is that, according to the video, it won’t pull in descriptions for Mame roms.

Replacing Hard Drive under LVM in Ubuntu

Recently had a hard drive start acting strangely on my development server. It is a 2TB Seagate drive and it started causing errors in the logs, nothing major and it still worked. I put off ordering a new drive, a mistake, I know, but thought maybe it was just some kind of software issue.

Then the machine started getting slow. Really slow. So I ordered a new 3TB Toshiba drive. Finally received it and thought I would use Clonezilla to copy the drive. Created a live USB Linux flash drive with the Clonezilla image. Worked like a champ, but the cloning was going very slowly due to the problem with the drive, so I bailed. After some additional tinkering, and fixing grub because Clonezilla had modified it, I was able to boot back up and I realized that I was using LVM and this creates another problem.

I’m not sure if cloning and replacing the drive would have worked or not, but found some guides on replacing a drive in LVM.

Here is the one I used

Basically you add the new drive to the LVM and then use pmove to migrate the content off the old drive. Honestly, I’m not sure yet how this is going to work, it’s been almost a day and a half and I’m at 45.8%. If it fails I have a backup, but it would be nice if this process works and everything moves.

Which physical partition are my Ubuntu files on?

LVM, the Linux logical volume manager included in the Linux kernel uses the device-mapper functionality to allow easy administration and creation of logical volumes in your file system. This is great technology, but what happens when you are having hard drive problems and want o troubleshoot. How do you determine which physical drive your volume is mapped to? How to find out if the drive you are replacing is storing critical parts of your system?

Here is the technique I’ve used and it works pretty well.

The df command will tell you what volume a specific directory is on. the output of this command might look like this

# df /foo
Filesystem Size Used Avail Use% Mounted on
/dev/mapper/kubuntu--vg-Video 739G 645G 56G 93% /foo

Once you know the volume you are looking for you can use the lvs command to report information about logical volumes. Note, lvs seems to need root access so you may need to use sudo.

# sudo lvs -o +devices /dev/mapper/kubuntu--vg-Video
LV VG Attr LSize Pool Origin Data% Meta% Move Log Cpy%Sync Convert Devices
Video kubuntu-vg -wi-ao---- 750.00g /dev/sda5(128000)

So now we can see that the logical volum in question is on /dev/sda5

lshw can now show us what drive is on sda

# sudo lshw -class disk
description: ATA Disk
product: ST2000DM001-1CH1
vendor: Seagate
physical id: 0.0.0
bus info: scsi@0:0.0.0
logical name: /dev/sda
version: CC27
serial: Z340BEHG
size: 1863GiB (2TB)
capabilities: partitioned partitioned:dos
configuration: ansiversion=5 logicalsectorsize=512 sectorsize=4096 signature=000c3f21

Now we know which drive is storing the content from the LVM in question and can migrate this over to a new hard drive.

Images Not Uploading From Page – WordPress 4.2

Since updating ot WordPress 4.2 (WP 4.2.1 now), I have had some problems updloading images.

The nice folks over at wpmudev.org helped me out with the problem suggesting that it was probably a javascript problem caused by a plugin conflict.

I did some plugin troubleshooting and determined that this was the case. After more troubleshooting it came down to a conflict between WordPress SEO and Post Thumbnail Editor.

Here is a link to the thread on the WordPress Support forums

JS bug prevents uploading media in Page/Post editor

A temporary workaround is simple enough to get media and image uploads working from the page or post editor.

Just comment out line 171 in post-thumbnail-editor.php and the upload problem will go away.

/** For the "Edit Image" stuff **/
/* Hook into the Edit Image page */
//add_action('dbx_post_advanced', 'pte_edit_form_hook_redirect');