Why I’m Switching Back To Firefox 

Not me, I still use a combination of Safari and Chrome Canary.

Firefox greets me with a page explaining my rights as a user of open source software. Chrome greets me with… sigh… Chrome greets me with a fucking advertisement for a Chromebook.

It’s an interesting article though.

Webkit Animation Performance

Paul Irish explains when translate() is better than top/right/bottom/left. I think the most interesting part of this is how he uses the tools in Chrome to diagnose the problem.

Pretty Code Editor in WordPress 

I’m one of those people that has the visual editor disabled in WordPress. I write everything in Markdown and I want the editor to make very few decisions about what HTML to generate. The downside of this is that the code editor is set in Consolas — not exactly great for writing long posts. To fix that, I made a new file in mu-plugins called pretty-code-editor.php. It’s just two CSS rules, but now writing in the code editor is much easier.

        #wp_mce_fullscreen, .wp-editor-area {
            font-family: “Baskerville”, Georgia, Serif !important;
            font-size: 16px;
        }

<?php }

Follow along with the Gist on Github because I've got some ideas that would make this even better.

WordPress Powers Politics 

The WordPress.com VIP team compiled WordPress usage data around the current election season. It’s good to see how many politicians are using free, open-source software. Check out the awesome infographic!

HTML Examples Plugin Demo

I worked on a plugin this weekend for storing HTML demos in WordPress. This is still a work in progress, but I think it’s pretty cool so I wanted to post a video showing what I’ve got so far.

When you write a new demo, you get fields for HTML, CSS, and Javascript. There’s also an option to select from a few libraries that are already including in WordPress to load on the page. On the post page, the HTML, CSS, and Javascript are inserted where the_content() is called.

The syntax highlighter used here is CodeMirror. You can find the code for HTML Examples on Github.

Tweet Posts 

I deleted all my old Twitter archives the other day, which meant I was hardly using any of Twitter Tools1. Then, I launched the new version of joshbetz.com and I can do all kinds of fun stuff with post formats, but Twitter Tools still says “New blog post:” when I publish anything. So I threw together something that does exactly what I want and nothing that I don’t.

It’s not super customizable. There’s some logic to tweet a bit differently depending on what the post format is, but it’s all hard-coded. For a new quote, for example, it will say something like “New quote: http://wp.me/123456″.

One goal I have is to rewrite the Twitter OAuth API helper to use more of the WordPress HTTP functions instead of relying on cURL directly. I’m always happy to accept pull requests on GitHub. The plugin is also available in the WordPress.org repository.


  1. I would normally link to the plugin, but I see that it hasn’t been updated in over two years and you get a nice big yellow warning when you visit the page. 

P2 Hovercards 

A couple weeks ago I worked on a project that we called P2 Hovercards. We released the code on Github last week for anyone else that might find them useful. The idea is that you can see additional information about certain links without clicking on them, therefore keeping you on the P2 and not diverting your attention unnecessarily.

Spotify Widget 

I wrote a little WordPress widget over the weekend that will add a Spotify play button to your website. The options you get are similar to the options you would see on the Spotify Developer site. It essentially just adds an iframe based on the parameters you set. Nothing too complicated here, but it’s nice to have as a widget that you can move around with the WordPress drag-n-drop interface.

ack shortcuts

I just watched Daniel Bachhuber’s “The Zen of WordPress Coding” talk from #wcphx in February.1 There’s some really good stuff so I definitely recommend it if you’re a WordPress developer. He used a tool that I had never heard of called ack. Ack is “designed for programmers with large heterogeneous trees of source code…” — it’s faster than grep.

Daniel talks about some useful options for ack that make it especially useful for WordPress in a command like ack --before-context=10 --ignore-dir=wp-admin 'function esc_'. Find all the function definitions that start with “esc_”, ignore the wp-admin directory, and print the 10 lines before the function definition because that’s where the documentation is — genius. As soon as I saw this I knew it’d be something I could use all the time, so I opened the dotfiles.

a()

First, a shortcut function called a that runs a similar command and automatically wraps double quotes around the entire arguments string.

function a() {
  if [[ $ARGC -eq 0 ]]
  then ack
  else ack --before-context=10 --pager='less -FRX' "$*";
  fi
}

It checks that there were actually arguments specified and then runs ack with --before-context=10 to show the 10 lines before every result, --pager='less -FRX' so the results are paged and the formatting is kept (it also automatically quits if the results aren’t longer than one page), and "$*" which takes all the arguments and wraps them in double quotes. Now I can do something like a function esc_.

af esc_

Then I realized that it would probably be useful to have a shortcut since looking up functions is probably the most useful part of this in the first place. So, I created af.

alias af='a function $*'

This one is even more straight forward. Essentially, it turns what would have been ack --before-context=10 --pager='less -FRX' 'function esc_', or a function esc_, into af esc_.


  1. The slides for Daniel’s talk are available on his website. 

Jetpack Comments

I’ve talked about it before: I like running my own web server. WordPress.com is awesome (seriously, go sign up for a blog), but I’m a nerd and I like configuring nginx and Apache and deploying with git. Lots of other people do too. It’s why Jetpack exists in the first place.

There have always been a few things about WordPress.com that I’ve been jelous of. That list got smaller this week with the release of Jetpack comments though. I’ve been searching for the right comment solution for a long time. WordPress comments are cool because you can style them with the rest of your site — I always saw the comment form as a barrier though. So I tried things like intensedebate and disqus — those things are cool because they make the process of submitting a comment and identifying yourself with a site you’re already logged in to very simple. The problem with disqus and intensedebate is that they’re not all that customizeable. But Jetpack comments fixes this.

Jetpack comments replaces the standard WordPress comment form with one similar to what you see on WordPress.com blogs. You can identify with WordPress.com, Twitter, or Facebook. Comments are submitted to your site just like they are with the normal comment form. I’ve already switched from disqus here.

One thing to note, your site must use the comment_form() function to generate the form. Some themes create the comment form manually which doesn’t give the plugin anything to hook into.

Now I just need to work on the comment styling here :)