Backup and Convert iPhone SMS Conversations to an HTML File

I love my iPhone 3G and can’t wait until the end of my contract when I can upgrade to the latest and greatest version. However, one of my biggest gripes with the iPhone is that there is no standard way to backup and save your text messages in an easy-to-read fashion. After much searching, I’ve finally discovered a great application for backing up your messages. I’ve also combined that with a little web development trickery to convert the final product into a self contained and beautiful HTML file.

Exporting Your Messages

First off, you need a way to export your text messages from either your phone or your backup. All the messages are backed up on your computer with the normal iPhone sync process, but they aren’t in a format that is readable for humans. There are several different software applications that will do this for you. I’ve tried a few different ones with varying success. Most of them seemed downright kludgy. After trying out several apps, I finally discovered Decipher TextMessage from Decipher Media. It is very modestly priced at $6.99.

A Screenshot of the Decipher TextMessage software

Decipher TextMessage is an OS X only app (sorry Windows users) that simply pulls your text messages out of your iPhone data backup file. I like the idea of this because it’s only messing with the backup file, not your actual phone. The great part about Decipher Text Message is that it uses your address book to match up phone numbers with contact names. All texts are sorted into conversations with each contact. You can then easily select a conversation and save it as either a text file or a CSV file. For this method, I just exported the conversation I wanted as a text file.

Make Your Texts Into a Self Contained HTML File

The text file is great, but if it’s a long conversation, it’s going to be hard to read and not terribly useful. This is where a little regular expression kung fu and some HTML and CSS love come in handy.

Once you export your text conversation, you’ll get a text document that looks something like this:

Conversation with: Johnny Appleseed (5555558555)


Wednesday Mar 31 14:56

Me: Do you still have that spare ticket?

Johnny Appleseed: I dont BUT if you want to go I can probably grab another.

Me: What time is it at?

Johnny Appleseed: Doors @ 8 but we'll most likely grab food down there first and get there shortly after 8

Me: Hmm. I think I'll pass. I got into work late today so should prolly stay until at least 8. Have a good time though!

Johnny Appleseed: Mmmkay. :P  Perhaps next time.


Sunday Apr 04 15:49

Me: I just got home.

Johnny Appleseed: Hey, im @ the field. You should come here

Me: Oh yeah? Who you out with?

Johnny Appleseed: Work peeps. Theyre cool. Come out ;-) 

As you can tell, although there is a lot of text, it’s all in a very predictable pattern. One part at the top, dates, texts from your contact, and texts from you.

Make the document into an HTML file

The first thing we need to do to our text file is convert it to HTML. Setting our text into an HTML template is easy. Just surround the whole conversation with a very basic HTML head tag and a body tag. For the purpose of this document, I’m not even worried about getting all the right tags in there, just enough to make it work. Here’s what it looks like now:

<!DOCTYPE html>
<html>
<head>
    <title>Me and Johnny Appleseed Converstaion</title>
</head>

<body>
    Wednesday Mar 31 14:56

    Me: Do you still have that spare ticket?

    Johnny Appleseed: I dont BUT if you want to go I can probably grab another.

    Me: What time is it at?

    Johnny Appleseed: Doors @ 8 but we'll most likely grab food down there first and get there shortly after 8

    Me: Hmm. I think I'll pass. I got into work late today so should prolly stay until at least 8. Have a good time though!

    Johnny Appleseed: Mmmkay. :P  Perhaps next time.


    Sunday Apr 04 15:49

    Me: I just got home.

    Johnny Appleseed: Hey, im @ the field. You should come here

    Me: Oh yeah? Who you out with?

    Johnny Appleseed: Work peeps. Theyre cool. Come out ;-) 
</body>
</html>

As you can see, I deleted the first line from the text file that said “Conversation with: Johnny Appleseed (5555558555)”. I don’t need that for this case. If I had wanted, I could have used that as the title of the document. I’ve also changed the extension of my document from .txt to .html.

TextWrangler is a beast

Next up is putting all of our text into HTML tags. Now, for any conversation that is more than a few texts, doing this by hand is just out of the question. That’s where some regular expression kung fu and my favorite find and replace tool come in handy.

For this job, I use TextWrangler from Bare Bones Software. It’s a great free text editor that includes the best search and find and replace tools I’ve found. In my opinion, it’s much better than the search tool for TextMate, which is the editor I use for pretty much everything else.

Get rid of the pesky extra line breaks

The first thing we’ll do is reduce the length of the file by getting rid of the extra line breaks. The line break pattern will match our line breaks. We just use \r for this. We want to end up with just one line break after each line with text and no empty lines. We do this by searching for two line breaks in a row and replacing them with one. A Screenshot of the TextWrangler find and replace box searching for multiple line breaks in a row

Doing “Replace All” once on this search will give us a much more manageable file length.

Mark up the dates

Next we want to put all of the date lines in a paragraph tag with a class of “date”. We can use the TextWrangler find and replace and, making sure that the Grep option is checked, search for a regular expression that matches all of the date lines. The following regex does just the trick:

^[a-zA-Z]* [a-zA-Z]{3} \d{2} \d{2}:\d{2}$

The above regex will match the entire line and then we use the ampersand (which just represents the entire match) in our replace string. We just surround the ampersand with our HTML:

<p class="date">&</p>

Here’s what it looks like in TextWrangler:A Screenshot of the TextWrangler find and replace box searching for the date line

Mark up each of the conversation bits

Next I’ll search for all of my parts of the conversation. These each start with the label “Me:”. I want to code the classes so that the CSS will be easily to reuse later for different conversations. So in this case, I’ll just use generic ‘me’ and ‘you’ classes. For my parts of the conversation, I want to do the following things:

  • Mark up each of my texts in a paragraph
  • Give each of the paragraphs two clases: ‘message’ and ‘me’.
  • Change the starting label from “Me:” to be my full name instead.
  • Enclose my name in a strong tag.

In order to accomplish each of these things in one fell swoop, we can basically just match the text “Me:” at the start of a line and save the match that is everything after it in that line. There parenthesis save the pattern that is matched inside them. Since we’re getting rid of the “Me:” part, we don’t save it. Here’s what the regular expression looks like:

^Me:( .*)$

In the replace string we just surround the entire match that we saved (indicated by \1) with our appropriate HTML and label. Here’s the replace string (Obviously you wouldn’t want to use my name):

<p class="message me"><strong>Alissa Miller:</strong>\1</p>

The step is to match the other person’s texts. Here we’re trying to accomplish a very similar thing:

  • Mark up each of the other person’s texts in a paragraph
  • Give each of the paragraphs two clases: ‘message’ and ‘you’.
  • Enclose the other person’s name in a strong tag.

We’ll use almost exactly the same search pattern as the last time, except this time I’m using Johnny’s name instead of mine. Just substitute the Johnny part for whoever the conversation is with.

Here are screenshots of each of the last two searches in TextWrangler.

A Screenshot of the TextWrangler find and replace box searching for my part of conversation line A Screenshot of the TextWrangler find and replace box searching for the other part of the conversation line

And there we have it. Just a small bit of regex kung fu has given us a fully marked up HTML document. This is a great start, but in order to make it actually usable, we have to add some CSS styling to it. Here’s what are document looks like so far.

<!DOCTYPE html>
<html>
<head>
    <title>Me and Johnny Appleseed Converstaion</title>
</head>

<body>

    <p class="date">Wednesday Mar 31 14:56</p>
    <p class="message me"><strong>Alissa Miller:</strong> Do you still have that spare ticket?</p>
    <p class="message you"><strong>Johnny Appleseed:</strong> . I dont BUT if you want to go I can probably grab another.</p>
    <p class="message me"><strong>Alissa Miller:</strong> What time is it at?</p>
    <p class="message you"><strong>Johnny Appleseed:</strong> Doors @ 8 but we'll most likely grab food down there first and get there shortly after 8</p>
    <p class="message me"><strong>Alissa Miller:</strong> Hmm. I think I'll pass. I got into work late today so should prolly stay until at least 8. Have a good time though!</p>
    <p class="message you"><strong>Johnny Appleseed:</strong> Mmmkay. :P  Perhaps next time.</p>

    <p class="date">Sunday Apr 04 15:49</p>
    <p class="message me"><strong>Alissa Miller:</strong> I just got home.</p>
    <p class="message you"><strong>Johnny Appleseed:</strong> Hey, im @ the field. You should come here</p>
    <p class="message me"><strong>Alissa Miller:</strong> Oh yeah? Who you out with?</p>
    <p class="message you"><strong>Johnny Appleseed:</strong> Work peeps. Theyre cool. Come out ;-) </p>

</body>
</html>

Styling Our Conversation

For the purpose of this conversation, my goal was to make the HTML page mimic the look of the iPhone text messages. I also want to make the HTML page self-contained, so I’m going to use internal CSS styles for everything.

Basic body styles

The first thing is to add some very basic styles to the body element. Here we are setting the background color and fonts. We also use the margin: 40px auto; to center the page and the width property to give us a nice narrow page width for our conversation.

body {
    background-color: #dbe1ed;
    color: #000;
    font: 14px/1.4 helvetica, arial, verdana, sans-serif;
    margin: 40px auto;
    width: 450px;
}

Styling the strong tags

Next we should style the strong tags. In this case, I want the strong elements to have a normal font-weight, but to be a different color. I styled all the strong elements as a medium gray color and then used the me class to override the the gray color with a bright green for my texts.

strong {
    color: #555;
    font-weight: normal;
}
.me strong {color: rgb(78,145,3);}

Basic paragraph and date styles

Now we style the paragraphs and the date class. We’re going to be floating elements in a bit, so we want to make sure to add a clear to all of the paragraphs on both sides. Also, the date class should have bold text that is centered and slightly larger than usual. Here are the styles:

p {clear: both;}
p.date {
    color: #777;
    font: bold 14px/1.4 helvetica, arial, verdana, sans-serif;
    text-align: center;
}

Creating rounded speech bubbles

Now that we’ve done some basic styling, we can start mimicking the speech bubbles. First we’ll style the message class to give some padding and rounded corners. We’ll also set the max-width of the each message to 70% so that it will stretch only slightly less than three quarters across the page.

p.message {
    position:relative;
    padding:5px 10px;
    border:2px solid rgb(74,77,82);
    border:2px solid rgba(74,77,82,.5);
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    max-width: 70%;
}

Add the fancy CSS gradients

After that, we’ll set the background colors and use CSS3 gradients to create the green and gray speech bubbles. The gradients are a bit complex, so I used the online Ultimate CSS Gradient Generator tool. This was a fabulous way to visually match the iPhone styles as closely as possible while getting the cross-browser compatible code automatically generated. After generating the two sets of gradients, this is the CSS I ended up with:

/* Gradients and styles for each bubble */
p.you {
    background: #EBEBEB; /* old browsers */
    background: -moz-linear-gradient(top, #EBEBEB 5%, #D6D6D6 15%, #D2D2D2 71%, #E7E7E7 99%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#EBEBEB), color-stop(15%,#D6D6D6), color-stop(71%,#D2D2D2), color-stop(99%,#E7E7E7)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBEBEB', endColorstr='#E7E7E7',GradientType=0 ); /* ie */
}
p.me {
    background: #D0ECCC; /* old browsers */
    background: -moz-linear-gradient(top, #D0ECCC 5%, #87CD65 15%, #92D664 70%, #ADE763 99%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#D0ECCC), color-stop(15%,#87CD65), color-stop(70%,#92D664), color-stop(99%,#ADE763)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D0ECCC', endColorstr='#ADE763',GradientType=0 ); /* ie */

    float: right;
}

Notice that I also tucked in a float:right to the ‘me’ class. This will set my speech bubbles off to the right of the page.

Using just these few styles, we’ve created a nice looking self contained HTML page displaying our exported SMS conversation. Take a look at the HTML page so far.

Make more better speech bubbles

We could stop here and the page would be fine. However, we’ll use some really fancy CSS border trickery to make the text bubbles looks just a little bit better. Using images would make the text bubbles perfect, but remember, we want the file to be self contained.

In order to make the speech bubbles, I used a technique of arranging multiple CSS borders and using positioning to create a small triangle off to the side. The code is modified from Nicolas Gallagher’s excellent post on Pure CSS Speech Bubbles. In this case, I chose to use a modified version of the “Triangle Border” shown in Gallagher’s demo page (the one’ with the thick green border). The CSS had to be changed a bit because I didn’t actually want borders. Here is the final CSS I used:

/* The basic speech triangle */
p.message:before {
    content:"";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    border-style:solid;
    border-color:transparent rgb(74,77,82);
    border-color:transparent rgba(74,77,82,.5);
}
p.message:after {/* creates the smaller  triangle */
    content:"";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    border-style:solid;
}
/* Me points to the right */
p.message.me:before {
    right:-14px;
    bottom:7px;
    border-width:8px 0 8px 14px;
}
p.message.me:after {/* creates the smaller  triangle */
    right:-10px;
    bottom:8px;
    border-width:7px 0 7px 14px;
    border-color:transparent #94d749; /* green */
}
/* Other person points to the left */
p.message.you:before {  /* creates the larger triangle */
    left:-16px;
    bottom:7px;
    border-width:8px 16px 8px 0;
}
p.message.you:after {   /* creates the smaller  triangle */
    left:-10px;
    bottom:8px;
    border-width:7px 14px 7px 0;
    border-color:transparent #d3d3d3; /* grey */
}

You can see the finished effect on this page.

So with just a little bit of work we’ve marked up our conversation into HTML and created some advanced CSS styles to put our entire text conversation into a nice self contained HTML page that should be easily viewed in browsers for years to come.

Even better, we’ve made the CSS generic enough that we can just copy and paste it into another conversation we’ve marked up using HTML.

Obviously, there are a few caveats here. The Decipher Text Message program only on works on Macs. I haven’t tested any Windows-based software for the same purpose, but I stumbled across quite a few of them when I was looking for the software, so there are definitely options out there. Also, we’ve used some pretty complex CSS and several CSS3 properties that aren’t fully supported by all browsers. I have tested this in Firefox, Chrome and Safari. Hopefully things shouldn’t look too terrible in other browsers. I confess though, I did not even check it in IE.

Gawker’s Astounding Arrogance and Security Breach

Forbes has an interesting writeup about the recent hacking of Gawker and other sites. What’s really astounding about this stuff is just the level of arrogance shown by top level people at Gawker regarding security and their user’s data. The user data breach alone is bad, but it sounds like the hackers got in to all sorts of internal Gawker stuff.

[…] analysis of the file released by the crackers themselves indicates that the breach extends to employees of Gawker, includes credentials for internal systems (Google applications, collaboration tools) used at the company, includes a leak of Gawker’s custom source code, includes credentials of Gawker employees for other web sites, includes FTP credentials for other web sites Gawker has worked with, includes access to Gawker’s statistics web site, and includes the e-mails of a number of the users who left comments at Gawker as well as users of lifehacker.com, kotaku.com, and gizmodo.com. Forbes.com

Bad news. Even worse, the evidence seems clear that this attack was going on for quite some time. Lots of fishy things were happening and nobody at Gawker was able to put two and two together. You’d hope that a business as big as Gawker would have their shit together.

The Bahnhof Bunker

Could this possibly be the coolest server farm ever? The The Wikileaks house their data with Bahnhof AB, which is housed in a former bomb bunker in Sweeden.

Bahnhof

Check out the complete slide show of the place on TPM.

SSDs and the MacBook Pro

Apparently on some models of MacBook Pros, you can install a solid state drive in the express card slot. Some models also allow you to use them as boot drives. Unfortunately, it appears as though my computer is too old to use the SSD as a boot drive. Even so, I’m already picturing the possibilities of using it as a a drive for my Adobe Creative Suite and also for my Virtual Machines. It totally itching to try this out.

Check out the video comparing the performance differences. And finally, here’s the link to the SSD express card on New Egg.

Thoughts and Links About the Facebook Login Fiasco

I think most people that follow the same news feeds that I read probably have heard about this whole Facebook login thing, so I won’t summarize too much. Basically, the blog ReadWriteWeb posted an arcticle about Facebook. The article subsequently got ranked as a very high search result for “Facebook login” on Google. The content of the article itself is irrelevant to the issue at hand (although the article itself is interesting). Pay special attention to the comments (or at least the first 100 or so).

First Impressions

The typical nerd response to this has been laughing and pointing. Now, I have to admit, that was my first response as well. But, after I stopped laughing and shaking my head (well, actually I’m still shaking my head), I started thinking of all of the crazy things that I’ve seen people do in the last 5+ years I’ve spent working in computer support. While I find this whole thing rather amusing, I can’t say that I’m actually surprised. I have witnessed someone physically lift a mouse into the air when asked to “move the mouse up”.

I think the biggest difference between developers (or nerds) and normal people, is that normal people don’t want to know how a computer or the internet work. They don’t care. They don’t want to learn. I’ve never really gotten over this because it’s something that I find terribly disappointing about working in computer support. I can watch a person do the same thing over an over again knowing that there is a better way to do it, but they don’t care. They don’t want to understand. They don’t want me to teach them how to understand why something works a certain way. They just want to get the result they need.

I still have yet to decide the which angle of this attitude is the more important one. Is it an indication that a certain population of people will always be lagging behind because they refuse to adapt to a quickly changing world that requires them to understand certain aspects of technology? Or perhaps is it an indication that technology (and the people who develop it) simply hasn’t evolved enough to adapt to “real people” who do not “need” to understand black box in order to use it?

The Wider Debate

Much has been written in regard to the Facebook login fiasco, and quite a controversy has been sparked in the development community about what this really means, and whose “fault” it is. First, check out some of these articles which highlight very interesting points for both sides of the debate.

On Whether Or Not Google Got It Wrong

I guess this really depends on how far exactly the RWW article made it up the search rankings. I’d say that it’s an entirely different debate depending on whether the search result was first or fifth. I thought originally the result was first, but Stratton claims it never made it to number one. I don’t see any reason why that RWW article should not reach a high rank on the search term “facebook login” since that is what the article is about. It’s a popular blog and presumably the article was popular as well.

A number one search result is another matter though. I agree with the camp that says it would be impossible for Google (or any other search engine) to always know what a person meant. But seriously, isn’t that what Google is always trying to do? It just doesn’t sit right to me that an article about a website as huge as Facebook would ever be a more popular search intention that the site itself.

The search “facebook login” seems to clearly indicate a search for the login page itself. That seems fairly intuitive. In fact, substitute facebook for most major web apps and I think it’s the same. However, if the search changes slightly to something like “facebook changes login”, it’s now an entirely different issue.

Perhaps the artificial intelligence of search algorithms just isn’t sophisticated enough to parse nuances of language that seem so obvious to humans. Then again, perhaps they are and that’s why the RWW page never made it to the number one spot for the “facebook login” search. In that case, I really think this whole debate about whether or not Google got it wrong is really a non issue.

On The Users Themselves

Moving past the whole Google question, there are a couple of things that really baffle me about this entire fiasco. First of all, it’s clear that these users have no idea what a URL is. Both because they are using Google Search to find a URL like facebook.com and also (and more importantly) because they did not realize that the RWW URL bears absolutely no resemblance to any Facebook URL, and therefore cannot possible be the Facebook website.

How is it that these users who have to most superficial understanding of what a website is and how the internet works, are also capable of writing comments to the RWW page? They are baffled about how to log in to a site that’s not the Facebook site they’re used to (and in fact bears absolutely no resemblance to it). But they still can use the comment form in order to voice their disapproval of the perceived redesign.

Okay so, maybe typing into a comment form is no big deal. Even people that think the entire internet is just Google/Facebook/YouTube can figure out a comment form. What about using Facebook itself? It’s not like Facebook is that simple to use. This isn’t a slam on Facebook user interface, it’s just that Facebook is huge, and there are a lot of things that you can do on it. How can these people figure out how to use Facebook?

Perhaps this is an issue of normal people realizing that they want to use Facebook enough to spend time learning about friend networks, walls, how to upload photos in the little snazzy uploader. Why is it that they deem it important enough to figure out how to use websites like Facebook, but at the same time don’t care to understand what a web address is? I think I just fail to understand why someone would not care about that kind of stuff because I am so interested in it myself.

Is It Actually a Facebook Problem?

I logged on to Facebook for the first time in several weeks today. I don’t find myself doing this too much these days because I often either don’t look at Facebook at all or only look at it through the Facebook iPhone app. Much to my surprise, Facebook looked quite a bit different than the last time I saw it. I started thinking about how often I have to do what Steve Krug calls “muddling through” when I’m using Facebook. I know what I can do on Facebook, it just usually takes me a couple of tries to figure it out.

Why is this? Well, when I think about it, the Facebook website changes quite a bit. They’ve made several large and small changes to the website in recent years (or less?). Compare this to something like the Google home page which has changed very little since it’s inception.

Perhaps Facebook users have come to expect over time, and through personal experience, that the Facebook website will change, and sometimes change dramatically. They expect this because it has happened. Perhaps it wasn’t so far fetched after all to believe that the RWW page was simply just the newest reiteration of a Facebook design.

Now, I know this is a stretch, but perhaps it’s not too much of a stretch. Has Facebook changed its pages so much that users are now willing to accept that a complete makeover, such as the RWW page being a new Facebook design, is a real possibility? Does Facebook redesign too often? Has Facebook unwittingly trained it’s users to expect this?

One Last Only Slightly Related Thought

Anyone like me (aka: nerd, developer, gamer, general computer enthusiast) who thinks that the iPad is stupid and going to be a flop is not seeing the big picture. The iPad is designed for exactly the type of people commenting on the RWW website. Both Mike Rundle and Fraser Speirs are dead on (along with some other smart people as well). I think that most people will love the iPad. I think the iPad is going to revolutionize the netbook/eReader market just like the iPhone revolutionized the mobile phone market. Will the iPad be as successful a device as the iPhone? I don’t know. But I guarantee that it will change the game.



appointive
appointive
appointive
appointive