It’s time we talked about your password problem

A password for your bank. A password for Facebook. A password for your Gmail account, your Twitter account, your Yelp account… It’s likely that you’ve got too many passwords to keep track of. And if you *are* trying to keep track of them, then you’re doing it wrong. If you’re using the same password for more than one site, you’re really doing it wrong.

You Need a Password Manager

Password managers keep track of your many passwords, encrypt them, and secure them with a single master password. That way you only have to keep track of a single password to access all of your others. A password manager will integrate with your web browser and automatically fill in your login credentials as-needed. Most password managers will also have an app that’ll run on your phone to help you access your saved passwords on-the-go.

I use LastPass

I’ve been using LastPass as my password manager since 2011. I’ve been very satisfied with it. I pay $1/month to have a “premium” account, which is what you need if you want to access LastPass from a mobile device. I have one long password (pass phrase) that I remember that will let me log in to LastPass to retrieve all of my other passwords.

Pick a Pass Phrase

For a password manager to work, you need one good secure password. It needs to be cryptographically strong. That means that you need to come up with something that’s easy for you to remember, but hard for a computer to guess. I find that it’s easiest to pick a sentence or a song lyric and replace some of the letters with punctuation. Easy options are substituting a 3 for an E or a 5 for an S. But the more creative you get, the stronger your pass phrase. You might end up with something like: sc0tt%5pa55w0rdLo0k5w3ird

Let LastPass Generate New Passwords

People are notoriously bad at picking strong passwords. Once you’ve got LastPass set up, let it pick your passwords for you. Let LastPass generate passwords like jsT%43iaUf&eJvS!YNkq. There’s no reason it should be something you can remember. And if you feel weird about not knowing your password, most sites will have an “I forgot my password” link to allow you to reset it.

But is it safe?

This is the question that I get asked the most when I start talking about password managers. What happens if LastPass gets hacked? LastPass (and their like) are security-focused companies. The chances of them being hacked are low. There are password managers that allow you to store your passwords locally on your own machine if that’s a concern for you. LastPass even includes a tool to automate selecting new, strong passwords for the sites you frequent. If you ever have a concern, it’s very easy to generate new, long, random passwords.

Something that’ll greatly increase your security is multi-factor authentication. I’ll cover this in a separate post, but, in a nutshell, this method requires more than one method to prove your identity. You may, for instance, have a fingerprint scanner on your laptop. If you’re using multi-factor authentication secured by your fingerprint, someone would have to know your password *and* have your fingerprint.

 

Quickly deploy QR codes to link from real-world to web.

QR codes are two-dimensional bar codes. They’ve become popular recently as a way to link to web sites from real-world items like product packaging, magazine ads and “home for sale” signs. Scan a QR with your phone and you can instantly be linked to a web site. QR codes can store lots of other kinds of text info, too.

Several years ago at SXSW, I met Dustin Haisler, who at the time was CIO for the town of Manor, Texas. Dustin used QR codes to mark items around town to link visitors to additional information online. He had great success at opening up the actions of the local government without spending a lot of money.

Since meeting Dustin, I’ve had ideas rattling around in my head about doing something cool with QR codes. At last month’s CityCamp Raleigh, ideas and inspiration clicked together and it occurred to me that it’d be interesting to use QR codes as temporary advertisements/info markers. Short term, I’ve got two ideas I’m experimenting with:

  1. Helping a group called Five Points CSA, a community-supported agriculture (CSA) group based in the Five Points area of Raleigh. There was a group at CityCamp Raleigh that helped organized a social media plan for the CSA.
  2. Helping get the word out about citizen advisory council (CAC) meetings. CACs are Raleigh’s link between communities and our government.

The Basic Idea

The idea I came up with was to build a rig to allow me to quickly tag QR codes on walls or sidewalks. I did some research and found that someone did something along these lines at TED, but I couldn’t find any instructions or guidelines for creating tools. I ended up making a rig that can be used to spray QR codes on a flat surface. I use spray chalk to make the codes temporary. My prototype creates a QR that links to the Five Points CSA Facebook page. I used a URL redirect on the CityCamp Raleigh server so that I could point the link somewhere else if needed (say a Flickr group or another web page). Then I shortened the URL via bit.ly. I shortened it for two reasons: 1) bit.ly records usage statistics 2) shorter URLs make simpler QR codes.

Building the Rig

My QR rig is built from card stock. Card stock is relatively durable and easy to cut with an exacto knife. I’m working with someone to create a vinyl version that should be a bit more durable and allow me to spray the template clean. The magic sauce, I’ve found, is fiberglass screen. It’s just like the screen on the windows of your home. You can buy a roll of it from your local builder-supply shop for about five bucks. The screen gives you a base that you can attach the card stock to. This is important because it’s likely that your QR will have bits that aren’t attached to the main shape once you’ve cut them out.

I reversed the image of the QR before I cut it out. This is optional, but since I was cutting the image from black card stock, this just seemed to make my brain hurt less. I’d recommend using white card stock, though. That way, after you do your exacto-work, you can put a piece of black paper behind the cutout and check to make sure that it scans with your phone.

Next Steps

I’m and Android user. Google Goggles on my Nexus One scans my spray-chalked codes really quickly. I still don’t have a good test of scanability on iPhones, since I don’t have access to one. I’ve emailed photos of the code and the photos scan on an iPhone, but I still need to do some more real-world testing. It looks like the camera on iPhone 3’s and earlier is pretty crummy. But in this case, the iPhone is my Internet Explorer, so I’ll keep working on increasing the scanability for iPhones.

Lessons Learned So Far

  • QR codes are pretty forgiving. There’s a lot of error correction built into the code. This makes it work fairly well for my needs, but flat pavement or concrete works best.
  • The white border around the code is significant. It’s part of the code. I use a cardboard cut-out to put down a white section before I spray the code.
  • When you’re spraying – even if it’s chalk – you look like you’re up to no good.

Personalize Your Comments

If you’ve ever posted or read comments on a blog, you’ve probably noticed the little icons associated with each post. If you’re a new commenter, you may wonder why you get some sort of boring nondescript icon instead of something that reveals your True Character.

While some sites’ comment systems have their own proprietary way to manage commenter icons, many sites use Gravatar to display these. Gravatar (Globally Recognized Avatar) allows you to set up an icon that’s associated with your email address. That way, wherever you post a comment (if that site makes use of Gravatars), you’ll have the same icon next to your comment. Just make sure you set up your Gravatar with the email address you plan to use while posting (you can add additional email addresses to a single Gravatar account).

Gravatar is made by the folks responsible for the blogging/CMS platform WordPress. Here’s a video that explains how Gravatars work:

woo-hoo. I finally own scottreston.com

About a year ago I discovered, much to my dismay, that someone had registered scottreston.com. I was kinda embarrassed – I mean: I should know better.  But as of today, that error has been corrected. The person who purchased the domain last year let it expire. I used GoDaddy‘s back-order service and – tada!

Illustrating With Comics: Pixton

Back in ’07, I saw an interesting presentation by Rebekah Sedaca that advocated using comics to help clients better understand a process/design/etc. Comics can help serialize interactions in a way that’s clearer than the output of interaction-mapping tools like Visio. With comics, you can also detail the responses that a visitor/user might have – something that’s not always easy to do with a wireframe. Scott McCloud’s Google Chrome Comic is an often-cited example of using comics to communicate complex ideas in a simple, narrative way.

One difficulty discussed at Rebekah’s presentation was the problem of creating quality comics. Even if you’re lucky enough to have illustrators on-staff, you’re probably not eager to spend budget on creating comics that may only be seen by your client.

Pixton, one of the sites I discovered while judging entries for the SXSW 2009 Interactive Web Awards, provides a fine set of tools to help you quickly generate and share comics. Check out their “trailer” demo movie for an example of how quickly you can build a nice looking comic. Pixton also makes it easy to embed the comics you create into blogs, web sites, etc. I also think it’s great that Pixton offers a variant that is specifically aimed at schools, allowing students to work in a “safe and secure” learning environment.

Validated

Call me a geek, but I think it’s awesome that whitehouse.gov validates. Has the site always had an accessibility statememt?

And while I’m thinking of it, three cheers for the jQuery image slideshow on the homepage.

Chris Johnson Featured on Campaign Monitor

Pretty cool: My colleague Chris Johnson was featured on Campaign Monitor’s blog yesterday. Campaign Monitor is a great tool for managing email marketing campaigns. Their blog features designs that they find innovative and interesting. Kudos, Chris.

Integrating ExpressionEngine uploaded images in TinyMCE

I’ve been experimenting with a CMS called ExpressionEngine. I haven’t been too thrilled with the in-built content editor and have been exploring replacing it with TinyMCE. There’s an EE extension that’ll do this fairly easily.

I found an article in the EE wiki that appeared to explain how to integrate TinyMCE with EE’s uploaded images, but in practice, it didn’t quite work… It inserted the local file path to images, not the Web-visible URI.

Also, being an EE noobie, I couldn’t get the author’s security check to work. I decided that this doesn’t really bother me much – I feel like it’s OK for anyone that has admin access to the server to be able to see the path to any uploaded image.

Here’s what worked for me:

Step 1

Create a template group called “scripts”. Within it, create a template called “imagelist.js”. Paste in the following code:

[sourcecode language=’php’]

{exp:query sql=”SELECT server_path FROM exp_upload_prefs”}


{/exp:query}


[/sourcecode]

Be sure to go into the template group preferences and allow the template to render PHP.

Test your code by visiting this page with a Web browser:

http://www.domain.com/index.php/scripts/imagelist.js

Step 2

Edit the preferences for TinyMCE ( Admin > Utilities > Extensions Manager ). Add the following line to the configuration settings:

external_image_list_url : “/index.php/scripts/imagelist.js/”,

the value in the “”s should be a valid path to the template you created in step 1. A full path should work, too. This variable tells TinyMCE where to look for your list of images.

I found that I needed to set “relative_urls : false” in the TinyMCE extension settings or TinyMCE would insert a path that wasn’t quite correct (usually lacking the preceeding /). This will only affect URLs that TinyMCE understands – relative paths using EE code will remain relative.

Test by clicking on the ‘add an image’ icon in TinyMCE. If everything works correctly, there should be an “image list” dropdown in the “add image” dialog, right under the “image URL” field. Add an image and save the page, then view the rendered page on your site.If the image looks OK in TinyMCE, but doesn’t appear on your site, you have issues with relative pathing in TinyMCE.

WordPress Wireframes

WordPress is being very open about the update to it’s administrative interface. They’ve collected a lot of input, conducted a few polls and are now revealing wireframes of the new (and evolving) interface.

Over the years, I’ve had plenty of discussions (and several arguments) about presenting wireframes to clients. Something that’s pretty familiar to a designer or programmer doesn’t come quite so easily to someone that is new to the process. I’ve found that a client can get too caught up in a wireframe and take it too literally — seeing it as an almost-final design rather than a starting point. It’s a tough process to navigate. I usually keep wireframes as internal documents, but that’s just me. There are good arguments either way.

Take a look at WordPress’ PDF presentation of the wireframe. Interesting stuff! I’m enjoying watching the process take place so publicly.

Mythbusters – Fun With Gas

Hmmm. can’t get enough of the Mythbusters YouTube-ness.