Simple Search Operators

I’ve long wanted to be able to do some simple, operated-powered searches within WordPress (especially relevant in a project I’m working on at Automattic). After a conversation with Allen, where he wanted to do the same thing, I figured I’d just whip up a quick plugin to see how hard it’d be. Turns out the answer is “not very”.

Simple Search Operators is a quick plugin that expands the functionality of the default search system in WordPress so that you can use a few useful operators (might look at adding some more at some point) [all links in the following list go to live searches on this site, using that operator]:

  • author:beau will limit results to posts written by the author with the username/slug ‘beau’
  • tag:burrito will only return posts which are tagged with ‘burrito’
  • category:posts (or cat:posts) to search for posts categorized as ‘posts’
  • tag:burritofriday cancun author:beau to search for posts containing ‘cancun’, written by ‘beau’, tagged as ‘burritofriday’

Some caveats:

  • Not heavily tested! May well be capable of generating server-melting queries
  • Only supports one of each operator for now
  • Operators and freeform searches may be combined (e.g.: “tag:burrito cancun”)
  • Does not support spaced strings for operators, so you can only do things where a no-space string attached to an operator will get you what you want
  • Because of the way it manipulates query variables, might mess with other plugins or themes in adverse ways. Like I said, not heavily tested.
  • Not available via the WP Plugin Repo yet; will get it up there once it’s baked a little bit

If you’d like to give it a shot, please do. If you’d like to add more operators; shoot me a pull request and we can expand this out a bit.

WordCamp Saratoga

Through some lucky scheduling, I was able to attend both LevelUp Con and WordCamp Saratoga in a single trip. I spoke at WordCamp about how to build a quick Backbone.js application which used WordPress as the backend (interfacing via the REST API). I thought my talk went OK, although I didn’t love it to be honest, and in hindsight I kind of wish I’d dived a bit harder into some better examples of how Backbone works with Views and whatnot. Here are the slides I used:

And if you’re interested in the code, it’s all available via Github. I got a few nice bits of feedback as well, so that was good:

LevelUp Con

Last week, I attended the first ever LevelUp Con (which WordPress.com sponsored) in Saratoga Springs, New York. I was really impressed with the event, which was organized by the crew at Mad Glory to help draw attention to upstate New York’s tech scene, and to expand people’s horizons and help them cross-train a bit.

Apart from the wonderful people, beautiful setting (upstate NY is ridiculously gorgeous at this time of year) and smoothly-operated event logistics, there were a few really good talks that made the 2-day event click for me.

  • Kevin Hoffman spoke about co-design, and about how to get people involved in the process of design, without falling into design-by-committee. I really liked his approach to meetings (if you’ve got to have them, at least make them work for you). His (beautifully illustrated) slides are available for download.
  • Andres Suarez (currently SoundCloud, previously Tumblr) talked about isomorphic JavaScript applications (server and client-side rendered, with the same code). It was the first time I’ve seen real, working examples of the technology, and it’s super-relevant to some things we’re doing at Automattic (which also use Node and React).
  • Justin Searls spoke passionately about open source project maintenance, dependency trees and trolls. It sounds crazy, but it came together, made sense, and was spot on. Hopefully he’ll get the slides up somewhere because it was pretty awesome.
  • My colleagues, Simon Ouderkirk and Daryl Houston spoke about Developing Hospitality and about taking the idea of Service and Hospitality and applying it both internally and externally as a lens to look at your support structures. It was a really interesting twist and their on-stage “performance” was a lot of fun.

Thanks to everyone who attended, and to all the other folks who spoke. The single-track, 2-day, planned schedule was a really interesting approach, and I think it worked nicely. Hopefully there’ll be another LUC, and I’ll get to go to the next one as well!

Why JavaScript Is The Next (or first) Programming Language You Should Learn

I’ve been asked a few times recently what programming language I’d learn if I was just starting out. Right now, the answer is definitely JavaScript, and here’s why:

Easiest Development Environment

I believe one of the biggest hurdles for people to get into programming is actually all of the other stuff around just writing code. Anything you can do to get to the point where you’re writing code faster (at least while you’re learning) is a win in my mind. Everyone has access to a web browser, which means everyone now has access to a simple development environment. If you’re using Chrome on a Mac, press cmd-opt-j. Welcome to the console, you’re now able to start writing JavaScript to manipulate the page you’re looking at. That’s pretty awesome. There are also a bunch of online editors and tools like CodePen, JSFiddle which allow you to dive into a more complete development/testing/prototyping environment right in your browser.

Simple

JavaScript makes it really easy to write simple code when you’re getting started, which is perfectly valid. Define a function, call it. Make a loop. Ignore the DOM (in fact, ignore the web almost entirely) and focus on simple logic and code. Start building objects and arrays. The OO-model in JS can be a little weird (especially around classes and inheritance), but that’s OK, you’re going to need to be flexible if you’re going to be a developer anyway. Once you get the basics figured out, you can start diving deeper and discover the full power of JavaScript.

Flexible

The flip side of the previous argument is that JavaScript is also super flexible (arguably too much so!). Once you move on from a few functions embedded directly in script tags in your page to manipulate an image or a menu, you can quickly move towards a fully-architected web application with many files, larger object/class-style structures, complex single-page-applications and a whole lot more. JavaScript actually scales up quite nicely to handle bigger challenges, and is ideally suited to web applications, since it’s so tightly integrated with the DOM and the browser.

Web-native

As much as native mobile app developers would have you believe that apps are the future, I still think that open web technologies are the key to the future. Give it a little time, and we’ll mostly be writing all of our mobile apps in HTML/JS, and deploying them in wrapper-apps to our phones. I consider this basically inevitable. Learning to develop for the web is super important. You’ll need to know it basically regardless of what main language you’re working with, because despite our best efforts, you will still end up manipulating CSS, tweaking some HTML tags, etc. That’s not going to go away any time soon I don’t think.

Inevitable

This is pretty far down the list, but that’s mainly because of a thought progression more than anything else. I actually see this as a really important reason for why you should learn JavaScript. Here’s the deal — if you want to develop things for the web, you will end up writing JavaScript. There’s no avoiding it. There’s only so much you can do with a server-side language (PHP, Python, Ruby). At some point, your payload is delivered to a browser, and if you want to do anything remotely interesting there, you have to do it in JavaScript. So if you’re going to have to learn it anyway, why not optimize that process (and perhaps use JS in more places, rather than less?).

Portable (browser/server/native)

Now that we have things like Node.js, JavaScript has moved beyond the browser. Not only can you write server-side JS (so you can build the front and back-end of your web application in JS), you can also use something like node-webkit to bundle it up into a distributable desktop application, or use PhoneGap to package it as a mobile app for any platform. No other language can match that portability right now.

Toolchain

If all of the above wasn’t enough, the exploding JavaScript community has really come a long way in the last few years as far as the developer’s toolchain goes. While we might not have the integrated, one-stop-shop approach of something like XCode for Mac developers, we have tools like Grunt and Gulp which allow us to build our own asset pipelines. Every code editor known to man has support for JavaScript syntax highlighting and linting, and we don’t need a build process like other languages, so we’re lighter on our feet anyway. There’s also a bunch of tools for testing; everything from unit tests to functional tests, to fully automated simulations of users-in-browsers.

So anyway — there’s never been a better time to get started with coding, and if you’re going to do it, I suggest starting with JavaScript. Start small, work your way up. View Source. Get on Github. Go nuts.

Why Web Development Is Complex

I keep hearing things like “programming is easy” and “everyone should code”! These are both interesting, kind of misleading statements. The actual core part of programming — actually writing code, is perhaps not that hard. Writing simple code is, relatively, simple. Many more people can, and should, probably learn to do that. Actually being a good developer is vastly different (and massively more complex).

It’s a worthy goal for people to get into development, and I love that more and more folks are, but you should also set your expectations realistically if you’ve never coded anything before. You can learn some basics pretty quickly, but you have a lot to learn before you will be fully proficient in a real development environment.

If you’re building something big-ish on the web, here’s a non-exhaustive selection of the things that are (or potentially are) relevant to that process:

  • HTTP
  • File paths
  • DNS
  • Servers and Clients
  • Databases
  • HTML
  • CSS
  • JavaScript
  • Browser Compatibility issues (affects all HTML, CSS and JavaScript!)
  • Web Server configuration and tuning
  • RTL languages and their effects on your designs/layouts
  • Internationalization, including keeping your designs flexible enough to handle variable-length text
  • Search Engine Optimization, normally based on dynamic, user-input data
  • Semantic markup
  • Accessibility
  • Design
  • Color theory
  • Visual hierarchy
  • Graphic design/image manipulation
  • Image optimization
  • Web fonts/Icon fonts
  • Image sprites
  • FTP
  • SSH
  • Scalability
  • Memory management
  • Performance bottlenecks
  • Mobile web development (infinite screen sizes)
  • Responsive Design
  • Touch vs Click interaction models and considerations
  • Offline considerations/handling (for “live” web apps)
  • Version/Source Control (Git/SVN)
  • Visual/Text Editors
  • The command line (and everything that comes with it)
  • Retina/HiDPI screens vs “normal” screens

Depending on the specific technology stack you end up using, there will be entire swaths of other technologies, libraries and tools involved as well.

Guess what I didn’t even actually mention in that list? A server side programming language (unless you’re going to use Node.js and write JavaScript on your server perhaps). So all of that other stuff up there doesn’t even actually get you writing the code on your server (PHP/Python/whatever) to do the heavy lifting that you’re here to do.

Also, just so that you’re aware; in the 15 years I’ve been doing this, the list never gets shorter, it only gets longer.

Personal Location Tracking

I’ve been pretty fascinated with the idea of recording my own location for a while now. I started using Foursquare at SXSW in 2009 and have mostly continued to do so since then (I have over 3,700 check-ins). You can see my check-ins being syndicated back to this website (using Keyring Social Importers), and if you scroll back through the history of the main page, you’ll get maps aggregating a few check-ins at a time.

TripIt helps me keep track of all (most) of my travels, and provides back some data (via API), which I also import into this site. Here are all of my trips since March, 2008.

In February last year, I started using Moves, and quickly came to love its simplicity. It’s a background app that runs on your phone and keeps track of your location. Using server-side data processing, they crunch the raw location information to figure out when you were walking, running, riding, or on some form of transit, then give you back a timeline and a map showing what you’ve been up to. It’s a really nice “set and forget” way of keeping up with how many steps (roughly) you’re doing each day, plus your other forms of exercise. The app has continued to make small improvements, and then on April 24, Facebook bought them. I can’t say I’m stoked about the acquisition, but regardless, it’s a cool app, and it collects some fantastic data.

Since it’s all data, and there’s a growing sphere of location/movement-related data services out there, shuffling your data around is just a matter of a little programming. As I mentioned, I’m importing my Foursquare data into my blog already. I also have a Moves importer that’s currently creating a text-only summary of my information. I’ll probably add simple maps to it at some point. Moves-Export is a pretty neat service that will automatically import your Moves data and can give you a better breakdown of things, plus auto-post to Runkeeper and Foursquare (if you like) when activities are over certain thresholds (e.g. riding for more than 15 minutes). Pretty awesome.

Today, Chris Messina tipped me off to Move-o-scope, an awesome web app that will slurp in your Moves data, and give you back a rich visualization of it all. It lets you toggle things on and off, pan around the globe and see what you’ve been up to. It’s fascinating. Here are some places I’ve been since last February!

It’s fun to turn on the “Transit” layer (orange/brown, seen in the last picture above and the first one in the post), and follow the lines around the globe to see where you’ve been, then turn it off and zoom in to get a feel for what ground you covered while you were there.

A Whole New Dented Reality

Back in April, this blog celebrated 10 years of existence, and it’s been almost five years since the theme on this site changed. Yesterday I decided to just go ahead and flip the switch on something I’ve been working on here and there since late last year. It’s a complete new, very experimental theme that I call “Homeroom“.

There are some specific things driving what I was aiming for with Homeroom:

  1. First and foremost, a lot of the decisions are based around the intention that it would use Keyring and the Social Importers to pull in my content from all over the web. With that much data being collected and displayed here, I realized I couldn’t go exactly with a traditional blog layout, and had to get a bit creative with some types of data.
  2. It’s intentionally heavily integrated with Jetpack (although it works without it). Jetpack powers the comments, infinite scroll, sharing buttons and more. I’ve taken care to try to make that integration feel as native as possible (although I know there’s more to be done there).
  3. Homeroom started out as an _s-based theme, although it’s been pretty radically modified from there.
  4. I’m using a technique that I’ll call “post lookahead” when going through the loop to check the next post, and do some things like collapse sequential posts if they’re the sam type of thing.
  5. I wanted something with a bit of a timeline feel, since it’s now collecting some much data, and it’s all sequential; I wanted to show the relationship of different things along that sequence of time.

It’s not particularly beautiful because, well, I’m not a designer :) In the near future I’ll be talking to some friends who are though, so hopefully I can get some advice on improving things there. I’ve been mainly focused on getting it working the way that I wanted it to. Here are some other bits that might be interesting:

  • Allows custom Header and Backgrounds via wp-admin
  • Options (currently defined in a file, because I haven’t built a UI) to control some preferences around stuff like hiding Foursquare check-ins until a set amount of time after they happened (to help avoid the creepers!).
  • Heavy use of Post Formats
  • Ability to hide Twitter replies, which you probably don’t want showing up on your site.
  • There’s the beginnings of a front-end post box (partially inspired by o2), although it doesn’t actually work yet
  • Handles Foursquare checkins differently. Rather than showing them all as individual posts, it “collects” them and shows a single, multi-point map at the end of each day.
  • Shows a map automatically on any post using the WordPress-recommended postmeta fields.
  • Using the new taxonomy introduced in Keyring Social Importers 1.4, allows you to easily filter your display based on where posts were imported from.
  • Includes a custom icon font from IcoMoon to display social icons indicating where things were imported from.
  • Search results use a Masonry-based layout so that you can quickly scan the results. Unfortunately something is broken with the search mechanism on this site right now, so that’s not working :(
  • Automatically lists out child-pages when you view a Page that has them, for example my Projects page.
  • Dynamic heading re-writes: format your posts for individual viewing, and the H1 etc tags are automatically “stepped down” on listing pages to maintain hierarchy
  • Has some fun mapping stuff for TripIt in particular, which draws out a “flight path” between airports. Check it it out in my TripIt section. Here’s a fun one.
  • Uses Photon to apply some effects to images in places
  • Borrows liberally from the styling of sites like Instapaper and Readability.

There’s still a lot of work to go, both on the theme itself and the importers that power a lot of the content. I wanted to get this online because I knew that’d motivate me to spend more time on it. I’m also hoping that other folks might be interested and/or have some ideas on ways to improve the theme. I haven’t got all of my content imported yet (that takes a while :) ), but you’ll see more and more things fill in over the coming week hopefully.

If you’ve got any ideas for improvements, I’d love to hear them down in the comments!

o2 at WordCamp San Francisco

I just realized that I never posted anything about speaking at WordCamp San Francisco. This was my 8th WordCamp SF (I’ve been to every one since the first, in 2006), and the second one at which I have spoken. Matt invited me to give a short introduction to the work we’re doing with o2, which is the next generation of P2. It’s not available for external (non-Automattic) use yet, so I had to settle for a relatively surface introduction, and couldn’t give people a link to download it or anything which was a bit of a pity, but it still got a good reception.

o2 is a pretty different approach to building on top of WordPress, and has meant a steep learning curve for my team and me. We’ve been digging deep into the world of front-end development, and ramping up quickly on Backbone.js, Underscore.js and a bunch of new development approaches and workflows. It’s been really fun. I’ll let the presentation do the talking though (you can also watch it on WordPress.tv):

And here are the slides I used, which you can also see on Slideshare.net.

We’re really excited to get o2 out into other people’s hands, but we’ve got a lot to build still before other people can experience it in a similar way to how we do at Automattic. The future is bright.

I Want to Love My Pebble

It’s true, I really want to love the Pebble that I got from being a Kickstarter backer. I want to, but right now I can’t. I can only like it. And I can like it a lot — there’s a lot to like!

  • I have a computer on my arm!
  • I can read text messages without taking my phone out
  • I can control music that’s playing on my phone
  • WordPress notifications on my wrist? Yep.
  • Calendar alerts? Got ‘em.
  • The form-factor is slick: it’s slim, super lightweight and IMHO, looks pretty darned cool.
  • Nice backlight, which I can activate by shaking my wrist or tapping the watch
  • It’s waterproof! (although I’m too nervous to actively put that to the test)

So why can’t I love it? Let me count the ways (biggest reasons first): (more…)

Import DokuWiki pages into WordPress

I used to maintain a wiki full of personal ideas using DokuWiki, but at some point just gave up with wiki syntax entirely. A few months ago when I was moving all of my sites and content over to a new server and trying to consolidate things as much as possible, I decided to import all of that old content into a WordPress install (which was actually a single site within the same Multi-site install that runs Dented Reality). I ended up writing the following super-rough script to just scrape the contents of the pages and throw them into WordPress. Scraping the pages meant that I could get the actual output of all plugins etc, and also get full links between pages.

(more…)

TimesOpen Hack Day/Readtrack

On Saturday, I attended the 2012 New Times/TimesOpen Hack Day. It was a long day, but I had a lot of fun. I sat in on an intro session to Arduino which was pretty cool, and also a session on the EchoNest API, which I ended up using in my project. You can find out all about my project on the Readtrack project page.

It’s a bookmarklet-powered little app that analyzes the page you’re looking at (using the AlchemyAPI) and then tries to find related music (using the EchoNest API) which it then plays back to you in your browser (using rdio). I got a “runner up”/honorable mention prize :)

One of the most visually-polished projects was “Story Arc”, which showed a visual representation of the frequency of mentions of keywords over the NYT archives. Probably the most fun one was a set of drivers for a DDR pad, hooked up to commands for things like deploying code!

Where is Your Digital Hub/Home?

I’ve been using WordPress to power my own website for a while now, and working with it in some way or another for even longer. Over the years, I’ve developed the belief that it’s a pretty perfect platform for people to build their own “digital home on the web”, considering the range of plugins and themes available, the flexibility of the publishing options it offers, and the fact that it’s completely open source, so you can do whatever you want with it.

That last bit is important in more ways than you might immediately think. Apart from just being able to write my own plugins or tweak my themes, this also means that I own my own data. I think in this MySpace/Facebook generation, people are all too loose with the data trails they create — giving up ownership of their digital self at the drop of a hat. In case you didn’t realize, when you use something like Facebook, it is not the product, you and your data are the product.

(more…)

Moving Jetpack Sharing Buttons

I’m working on a new WordPress theme (for this site, and it’ll be released for download once complete). The theme is deeply integrated with Jetpack, and one of the things I wanted to do was have the Jetpack Sharing buttons appear in a location other than the very end of the content. Normally they are applied as a filter on the_content, so they just appear right at the end. I wanted to relocate them into a different location, and it turns out that’s really easy to do with the power of jQuery.

jQuery( document ).ready( function( $ ) {
	// Relocate Jetpack sharing buttons down into the comments form
	jQuery( '#sharing' ).html( jQuery( '.sharedaddy' ).detach() );
} );

The #sharing selector is just the DOM location where I want to move the buttons to, and the .sharedaddy one is the container that Jetpack places its buttons in normally. We just detach it from the normal position and then dump it into the new location exactly as it was.

Welcome to the new server

I’ve finally gotten around to moving this site (along with all my other random sites) onto a single server. It’s all now hosted at Media Temple, on a 512MB (dv). We’ll see how that goes. I’ve got a bunch of things to write up once the move is complete, but if you’re seeing this then it looks like we’re most of the way there.

There’s definitely some more tuning and tweaking to happen, but at least I have my memory usage below 100% :)

My Development Setup/Flow

Developers seem to love to hear about how other developers work, so I thought I’d try to capture my entire environment, from end to end, in a single post. This will change (has changed) over time and depending on the project/company/whatever, but this is how things are for me right now. A couple of points up front:

  • I work for Automattic, so a lot of this is influenced by our internal policies/security/workflow.
  • I don’t always use all components of this “system”. I’ll try to detail when I do/don’t use certain parts of it as I go.

OK, here goes.

Note: This turned into a little bit of a summary of how we work internally at Automattic as well. Oh well, maybe it’ll provide some inspiration, I think we do some pretty cool things.

(more…)