Techn(ical|ology)

Most posts will probably end up in this category one way or another, because I tend to write a lot about technology and tech-related topics. I work online and really enjoy gadgets and gizmos, so a lot of what I get involved in revolves around those subjects. Anything from regular expressions to iPods to The Magic Bullet is fair game.

Working on an iPad

I recently picked up an iPad Pro (9.7″), along with the Apple Pencil and a Logitech keyboard/case. I’m trying the package out as an alternate work configuration, and so far am quite enjoying it. It’s also good to force me to test more of our software from a mobile perspective.

The screen on the iPad Pro is gorgeous, so it’s pretty similar to using a MacBook Pro. Being completely touch-based makes it feel much more interactive and “engaging”, which is weird. I also find myself using the Apple Pencil quite often, just because it’s so precise, and is surprisingly pleasant to use for interacting with even very finger-touch optimized UIs. I’ve been doing some diagraming and “visual” type work lately as well, so it’s refreshing to be able to do that digitally and feel like it’s not a huge compromise over just doing it with paper/pencil/post-its.

Logitech’s keyboard case packs a surprisingly “real” keyboard into a relatively small pacakage, although it still feels pretty hefty and clunky when compared to the Apple Smart Keyboard. The backlighting on the Logitech one is really nice though, and again, makes it feel like you’re using a laptop rather than a tablet. The OCD side of me is really twitchy though, because when you have the Apple Pencil in the case as well, it folds up so that that pencil rests against the screen of the iPad. Literally 1 centimeter to the side and it could have snuggled up against the side edge of the iPad and 1. not rested on the screen, 2. allowed the whole package to close flatter.

Split-screen mode on the iPad is a surprisingly effective approach to multi-tasking/multiple windows, and I find myself using it quite often to bring something up in a side panel, so that I can refer to it while working in a main window. I’ve also discovered that a lot of the expected shortcuts (like cmd-tab, cmd-t, cmd-l, cut, copy, paste) work when you have an external keyboard in operation, again making things feel like a laptop/full experience.

I’ve locked down my notifications on the iPad more aggressively than elsewhere, so I get interrupted less when I’m using it. That makes it a great device to sit in the morning and get some “isolated” work down, without distraction. We’ll see how it goes as I attempt to make this a more permanent part of my workflow.

Of course, this post was written on the iPad. I used the web UI of WordPress.com to post via Jetpack to this self-hosted site.

Home Automation/Presence

I’ve been thinking about home automation a bit recently, and I realized that what I want as a big part of a system is some sort of generic presence-system. I’m imagining something along the lines of:

  • Small/cheap nodes that can be plugged in around a house/space
  • The nodes would form a mesh and talk to each other
  • Nodes would determine the strength of a signal (Bluetooth LE?) and “discuss” it amongst each other to determine which one you’re closest to, and thus roughly “where” you are (triangulate your location based on signal strengths)
  • Nodes would all connect to a server/service (could be locally-hosted), where they would broadcast your current location somehow. Maybe something like a Socket.IO server, so that other services could connect and receive live updates of location changes?

I wonder if this could be hacked together from iBeacons somehow, or if it’s too much the reverse of what they’re intended for? Does this already exist? Is there a better/simpler solution already available?

One Less Plugin, Thanks Jetpack

As a developer, I’m a huge fan of “red changesets”; when you get to delete more code than you add. Less code means less maintenance, less potential for bugs, security problems, etc. Today I got to “red changeset” the plugins powering this website because I realized I could just go ahead and delete the plugin I was using for update notifications.

I’ve been running a plugin here for a while now that emails me when I have updates available for plugins, themes or core on my WordPress installation. With the latest version of Jetpack though, I get that notification via a simple little indicator on WordPress.com (and I’m there every day already). In addition to the notification, I’ve enabled the auto-update feature for all plugins on all sites connected via Jetpack, so now I don’t even have to think about keeping my plugins up to date.

There’s a lot more cool stuff coming in this Jetpack/WordPress.com integration, and I’m really excited to see (and work on) what we can do to help make life easier for self-hosted users while leveraging the power of WordPress.com.

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!