NOTE: you can subscribe to just these posts via RSS.

Dynamic, Responsive Embeds w/ CSS

This past winter, I was introduced to a concept which was actually developed back in 2009. Namely, if you have video content on your website, and you want a responsive design, there’s a very clever trick which requires a wrapper div and a bit of CSS.

Just now, I was able to set this up for my own site, with an extra twist: for each iframe embed I have on my page, I can loop through and replace it with a wrapped version. I can also then find the original aspect ratios, if available, and make sure that persists, regardless of the width of the page / elements. That’s enough words, so here’s the code:

The new thing here is that we can set the paddingBottom dynamically, via JS, with a fallback if needed, and the other CSS rules take care of the rest. If we wanted to depend on jQuery, this code could be even smaller, yet even as it is, we have a pretty compact solution.


Since I’m running WordPress here, I also was able to integrate this easily with the JetPack Infinite Scroll plugin, by adding a callback on post-load. This means that after any new posts have been added, I wrap any new content in there as well.

I should also point out that it would be more efficient to have these wrappers in the HTML itself, rather than asking JS to make replacements on its own. The main reason I’m not doing that here is because WordPress graciously supports oEmbed,which means the HTML embed code is generated dynamically.

This way there’s a lot less for me to maintain. I can plop in the URL in my post, and forget about the rest. I can also clear out the cached versions, and on the next page view it’ll get that embed code again.

Seeking Feedback

I’m pretty happy where this is at, and I’d like you to try it out. Fork what’s there and add or integrate whatever you’d like. If you have any questions, you can write me, post on the GitHub Gist, or comment here. Thanks!

grep for naming conventions

I’ve used grep for years, now, though in the past few days I found a nice combination of it and some other command line utilities to do a bit of an audit as to how I’m naming methods and variables in the code I’m writing.

-oh # that’s how it works

a shortcut for --only-matching, this option won’t show the whole line, just the part that matches your search criteria
a shortcut for --no-filename, this will hide the first part of the normal output, so you can look for trends across files more easily

Put these two together, and you can then pipe the output over many files into sort and uniq -c to get an alphabetized, counted list of every instance of the pattern you want to find. You can also then pipe that all into a final sort -n which will sort by the count, such that the biggest fish fall to the bottom.

Use case: camelCase vs. underscores

Putting this all together, you can get a general command something like this:

grep -oh $PATTERN $(find . -name \*${EXT}) \
	| sort | uniq -c | less

To find underscore_separated_words, use PATTERN='\w\+_\w\+'; for camelCase, let PATTERN='[[:lower:]]\+[[:upper:]]\w\+'.

Finally, set EXT='.php' to look over just your PHP files, or change it to any extension of the types of files you want to inspect. You can also use grep’s -r flag with a target directory if you want to recurse through all files, rather than limiting yourself to files with a particular extension.

less: folding/chopping

I’ve been using less for years now, though today I learned a helpful new trick: you can toggle between command line options by typing – then the option. So, for -S, you can toggle between “chopping” lines or not; also known as line folding; also known as line wrapping.

Further, any other command line option can be changed this way. There’s not an awful lot here that warrants frequent changing, though -N does toggle line numbers which can be handy. Trying -G also toggles search highlighting, and -i and -I can toggle case sensitivity in searches, the latter extending to searches with patterns using uppercase letters.

Child Context

so this fills in the gap of a missing child

Fragment of a commit message I just wrote. Sounds pretty dark out of context, which perhaps is a natural consequence of using the word “children” in entirely virtual spaces.

On a related note, “master” and “slave” are also pretty common computing paradigms. Might be about time to change all of that.

Death and Windows

Got into work today, and my computer was acting a bit funny. It took my password, then stared at me blankly. Flipping around to the console, I saw notes to the effect that while life is all well and good, my root partition was mounted read-only and I would not be able to do the great things I had wanted to do.

Digging a bit deeper, I then see the error messages which indicate the filesystem was not in a good place, so that’s why we were reading only, writing disabled.

Anyway, my primary hard drive was hosed. I was able to reboot, and an fsck got the system in a place where I could at least do enough things to start my plan into new areas of the world.

Hello, Windows

I’ve been running Ubuntu for a couple years now, and generally it’s been great. It’s free, it’s fast, and the support for both hardware and software is rather top notch. The failure of the hard drive was actually nothing to do with the operating system, though I did need to start from scratch.

Armed with a license for Windows 8.1, I took a dive back into the Microsoft world. I’ve been using it at home for more than a year now, though this step has further sealed it: Linux for servers, but not for my desktop.

Windows 8 is definitely a bit odd. I like it a lot, though. The paradigms are different, but they make sense to me. I understand they’re mashing together interfaces for a phone, a tablet, and a desktop. It takes a bit of training, but going back to Windows 7 really doesn’t feel quite as nice.

Smaller bites

Luckily, I’ve been rather good at keeping backups. I’ve had two spare drives, and had access to a third. Most of my actual work was contained in a Virtual Machine, too, which I’ve intentionally kept rather minimal.

After looking everything over, Bittorrent Sync got me the bulk of my bytes in order, allowing for more than two extra copies of everything I care about, one closer enough that a local wired connection quickly sorted out tens of gigabytes of restoring.

On a failing drive, it’s tempting to try and save every bit, though I’ve often found that getting what you need and getting out grants rather more success. Drives like to spiral when they’re already down, and what looks fine may not be hours later.

So, with the bulk of the transfer abstracted, I was able to concentrate on my 8GB virtual machine image. Trying to copy it out to one backup drive revealed that even this secondary was rather on its last legs, which at that point just fucking figured. It was a Monday, after all.

I got it, though, and thanked myself for paring down to 8GB rather than 16 or 32. Sure, space is cheap, but in these situations with such larger images, every byte can count towards a potential problem in re-assembling a consistent whole.

Git was definitely another big part of the success, knowing that everything that really mattered was not only in my own machine in two or three places, but on others throughout the network, all with the latest updates. If for no other reason than that, learning Git is worth its weight in gold.


There’s a part of me that regrets a move away from running Linux this time around. It’s not as open, or as free. It’s a funny landscape, though. Ubuntu seems to make the most suitable environment, yet it still gets heaps of criticism for not quite adhering to the Linux Way.

Microsoft, on the other end, has been trying, but is largely perceived as more the uncool, legacy monster. Hell, even desktop computers in general don’t have the hype or attraction that they did a few years ago.

For me, open source lives better in a slightly more adaptive landscape. It’s great for servers. It’s incredible for software development of most any kind.

In the end, I’m just glad it all mostly seems to work.


So this is nice, if as a somewhat canonical list if nothing else. JS has changed a lot over the years, and what we attribute to libraries are done largely in the browsers themselves. I can get behind that.

Jetpack Comments: Say Yes

I’ve been running WordPress for a long while, and I love that it’s a powerful open source software package. I’ve ran comments on this site for a long while, and for whatever reason the bots have managed to get better by orders of magnitude within the past year.

I first wrote my own simple plugin, which fooled most of them for a few months. Soon after that, it was becoming much less effective.

I then turned on Akismet, the WordPress spam filter. That mostly worked, though the amount of spam was just so immense that even though few were getting past, I could easily get more than 20,000 junk comments over the course of a couple days. I actually saw my database files grow rather quickly as a result, and not purging every few days was beginning to not be an option.

Hopefully I’m not just on the cusp of a second wave, though so far I’ve been rather impressed by Jetpack Comments. Beyond various social login mechanisms, it also extends the form to have a lot of nice tricks to fool bots and allow the humans to come through.

I’ll update this post if things change, but so far I’ve went from 10,000 spam comments a day to zero, just by enabling the module. It’d be nice if some of those features and protections were built into the stock system, though I’m not entirely sure if it’s possible. If anyone knows, or would like me to dive a bit into their code, do leave a comment. As it is, I’m quite happy with the result, and would recommend everyone to flip the switch.