NerdStarGamer » Programming

Two CMS Solutions Worth Looking At

Alissa Miller — Tue, 21 Dec 2010 17:20:15 +0000

Below are two different content management systems that definitely seem worth checking out. Halogy is a free open source system. Although it’s free to start out with, it looks like they charge for different modules.

Perch costs about $55 per website but sounds intriguing. Mostly just a small customizable solution. It sounds like it might be nice for some basic websites where other CMS solutions would be overkill.

Backup and Convert iPhone SMS Conversations to an HTML File

Alissa Miller — Fri, 17 Dec 2010 18:44:36 +0000

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.

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.   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:




    Me and Johnny Appleseed Converstaion



    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.   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 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.

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:

Here’s what it looks like in TextWrangler:

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):

Alissa Miller:\1

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.

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.




    Me and Johnny Appleseed Converstaion




    Wednesday Mar 31 14:56
    Alissa Miller: Do you still have that spare ticket?
    Johnny Appleseed: . I dont BUT if you want to go I can probably grab another.
    Alissa Miller: 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
    Alissa Miller: 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.   Perhaps next time.

    Sunday Apr 04 15:49
    Alissa Miller: I just got home.
    Johnny Appleseed: Hey, im @ the field. You should come here
    Alissa Miller: Oh yeah? Who you out with?
    Johnny Appleseed: Work peeps. Theyre cool. Come out

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

Alissa Miller — Mon, 13 Dec 2010 20:40:13 +0000

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.

Backslash

Alissa Miller — Tue, 11 May 2010 17:47:57 +0000

If I only had a dollar for every time I had to go over this in my web design course.

Practical Terminal Commands Reference

Alissa Miller — Wed, 24 Feb 2010 21:31:06 +0000

I just found this amazing list of Terminal commands today:

Linux Commands – A practical reference

The list is not customized for OS X systems, so not all of the commands or options necessarily work as listed. I was however able to find similar commands using the man pages. This list is really an amazing reference for commands to do practical things that you might not have known you could do.

I just discovered wget using this list. I think I might have used this a long time ago and then promptly forgot it existed. Basically it downloads files or websites for you. This was exactly what I happened to need to download all of the student websites for my Web Design class. I was able to download all of them in a matter of minutes. The only problem was that it didn’t seem to pick up CSS background images or fonts used from @font-face, so I had to manually check those. An indispensable nevertheless.

Pure CSS3 AT-AT Walker

Alissa Miller — Wed, 03 Feb 2010 23:45:35 +0000

All I can really say about this is “Wow.” And also, maybe someone has too much time on their hands.

Pure CSS3 AT-AT Walker

Little Bobby Tables

Alissa Miller — Tue, 15 Sep 2009 20:23:35 +0000

XKCD: Exploits of a Mom

Quicklook for markdown

Alissa Miller — Mon, 16 Mar 2009 02:06:22 +0000

Awesome plugin for Quicklook which allows you to view markdown documents in a formatted style. This is really nice. I’ve taken to storing a lot of my documents in markdown, since I like using plain text files, but find the formatting in markdown a lot easier to use.

Parallax

Alissa Miller — Thu, 04 Sep 2008 22:13:45 +0000

Parallax is a very interesting plugin for jQuery that allows you to create a Parallax effect:

Parallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

This is pretty neat stuff. I’m racking my brain trying to think of gratuitous ways to use this in my next design project. So far I’m only thinking of running dogs…

Leopard Server Quickstart Guide

Alissa Miller — Thu, 14 Aug 2008 16:14:05 +0000

Corey Carson was written a fantastic quickstart guide for Leopard Server.

This updated quickstart guide is very similar to the Tiger Server Quickstart Guide posted in 2005. It’s primary purpose is to get you up and running quickly, overcoming common hurdles such as DNS and binding confusions. With the move to launchd over cron, those steps are now included as well.

You can grab the pdf at AFP548.com.

The article includes some particularly good instructions on using and setting up rsync, launchd, and Network Home Redirector.

Via Infinity’s End.

Perishable Press 3G Blacklist and WP Super Cache

Alissa Miller — Fri, 30 May 2008 17:48:22 +0000

I’ve been following the Building the 3G Blacklist series on Perishable Press for the last week or two and have been implementing each of the rules as they were released. For the most part, there have been no problems. I’ve seen a huge increase in 403 errors (Forbidden Access) in my logs, which has been good. Judging from my access.log, all of the requests have been bogus.

After the final list came out, I implemented any changes to the rules, tested it in my default browser (Safari) and called it good. Several days later however, I tried to pull up this site on my home PC using Firefox and was greeted with a big fat 403. Uh oh. I switched over to IE and got the same results. After some cursory checking, I switched over to using my laptop and Safari and noticed that there was no problem there. Weird. Even weirder because I’m using Version DSL with router, so as far as my server is concerned, both computers have the same IP.

Most weird: when I actually checked my access.log, I could see my own requests that had been served 403 errors. But instead of the normal 403, the requests actually showed a single request with a 200 status for each time I tried to load a page.

IP - - [30/May/2008:10:20:02 -0700] "GET /about/ HTTP/1.1" 200 363 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7" 
IP - - [30/May/2008:10:20:07 -0700] "GET / HTTP/1.1" 200 364 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7"

That’s a request for my about page, and then my main page. Both recieved a “Forbiden” in my browser, but both show a status of OK in my log. Additionally, if the request had actually been successful, a bunch of other files would have been requested as well.

I quickly decided that it was more important to get the site up and running again rather than spend a bunch of time trying to figure out what the problem was and how to fix it. After some selective commenting in my .htaccess file, I discovered that the culprit rule was the following one from the 3G Blacklist:

RedirectMatch 403 \/\/

I commented out the rule for the time-being so that I could test further at a later point in time.

This particular rule redirects all requests that contain a double slash after the http:// section. I thought that this was very odd that this rule should break my site because I can’t see any reason why a legitimate request would need to utilize a double slash. I also was concerned, because judging from my access.log, this is the rule that does the bulk of the work concerning 403 errors.

I did some more scanning of my .htaccess folder and arrived at the conclusion that the culprit must be within the rules for the WP Super Cache plugin I had recently installed. This plugin creates a static html page to serve instead of the normal WordPress PHP pages. Here’s an explanation from their site:

When a visitor who is not logged in, or who has not left a comment, visits they will be served a static HTML page out of the supercache subdirectory within the WordPress cache directory. If you navigate to that directory you can view an exact replica of your permalink structure as well as the HTML files within the directories. To determine if a page has been served out of the Super Cache, view the source and the last line on the page should read or .

Hmm, I’d say we’re getting closer now. The section that WP Super Cache adds to my .htaccess file looks like this:

# WP SUPER CACHE

AddDefaultCharset UTF-8
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*s=.*
RewriteCond %{QUERY_STRING} !.*attachment_id=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz [L]

RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*s=.*
RewriteCond %{QUERY_STRING} !.*attachment_id=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html [L]

# END WPSuperCache

Now, perhaps a mod_rewrite ninja can see immediately what the problem is, but I was having trouble actually figuring out what was going on. Since I’m using a shared host, I don’t have access to an httpd.conf and therefor cannot use the RewriteLog directive to actually see what’s going on in the rewrites.

After some research I discovered that by adding an R flag to each of WP Super Caches RewriteRule directives, it would force a temporary redirect and therefore allow me to see in the browser what was actually being requested. I changed each RewriteRule to the following:

RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz [R,L]
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html [R,L]

Now after running the same tests again, I could see in my browser how things were getting screwed up. I typed the address http://blog.nerdstargamer.com into Firefox and sure enough, got the 403 error. This time though, when I looked at the URL it showed the following redirect:

http://blog.nerdstargamer.com/wp-content/cache/supercache/blog.nerdstargamer.com//index.html

There’s the culprit right there. The double-slash right before index.html. So, basically, every time WP Super Cache serves a cached page, it’s serving a URL with a double slash before the file name. I did a quick check by deleting the cache folders of WP Super Cache and confirmed that pages not cached loaded fine while cached pages always got redirected to a 403 error. Bingo.

So, now to fix the problem. Why on earth the .htaccess code for WP Super Cache does this in the first place, I’m not sure. It seems wrong to me, but I’ll defer to the experts on this one. Basically what’s happing is that the variable $1 is being replaced with the path name that was requested which includes a trailing slash. The next part of the rewrite starts with a slash, thus the double slash problem.

I was able to fix the conflict in the WP Super Cache code by removing one of the slashes like so:

# WP SUPER CACHE

AddDefaultCharset UTF-8
# not post
RewriteCond %{REQUEST_METHOD} !=POST
# not a search
RewriteCond %{QUERY_STRING} !.*s=.*
# not an attachment page
RewriteCond %{QUERY_STRING} !.*attachment_id=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1index.html.gz [L]

RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*s=.*
RewriteCond %{QUERY_STRING} !.*attachment_id=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1index.html [L]

# END WPSuperCache

This certainly looks funny but at least it works. I’m sure there is a more elegant way to do this, like say, rewriting the original request to remove the trailing slash and then applying the cache rules. Perhaps this is really a problem with the way WordPress is doing its permalinks (I’m on 2.5.1 by the way). Who knows? Ninjas chime in.

Getting Geeky With YSlow

Alissa Miller — Thu, 29 May 2008 21:17:54 +0000

I spent a good amount of time over the last couple of days attempting to make my site a little bit faster. I’ve been pretty negligent about it up until now, because I know that much of the slowness of my site can be directly attributed to my web hosting company. ¹ Even so, I decided to spend some time doing what I could to speed things up.

The first thing that I did was run a test in YSlow to see how my site was doing. Yikes! I got an F right off the bat. After some further review and research, I realized that this wasn’t necessarily something that should have me freaking out. If you’re not entirely familiar with YSlow and what it does, Jeff Atwood’s article, “YSlow: Yahoo’s Problems Are Not Your Problems” on Coding Horror is a must-read. Basically, YSlow offers a lot of good advice that should be taken, but with a grain of salt.

With that said, here are the steps that I’ve taken to speed up my site.

Make Fewer HTTP Requests

The first time I ran YSlow, I discovered that all of my pages were making a ridiculous number of HTTP Requests for JavaScript and CSS files. I was requesting four CSS files: screen, print, IE hacks, and one for Lightbox 2. Unfortunately, the IE hacks stylesheet is still necessary. Obviously the screen an print ones are as well. After taking a look at the Lightbox 2 CSS file, I decided that it was small enough to simply tack on to the bottom on my existing screen stylesheet. That’s one down.

There were also quite a few JavaScript files being requested, including all of the files for Google Analytics, Mint, WP Stats and Lightbox. What can I say? I like my tracking software.

The first thing that I decided to do was to reduce the number of tracking utilities I was using to two. I love Mint and Google Analytics seems to be necessary, so I had to get rid of WP Stats. That wasn’t such a big deal for me. That’s another one down.

The next step was to take a long hard look at Lightbox 2. I originally installed this for my Gallery page, and then decided to include it on all my pages on the off chance that I might want to use it in a few posts. While it works and looks great, I’ve been decidedly unhappy about how much baggage Lightbox comes with. There are five JavaScript files that need to be included, just to have that neat little image trick. Even worse, the included Prototype JavaScript library weighs in at a staggering 124KB. What a waste.

I made a mental note to do some research to find a more lightweight solution for my image gallery. Smashing Magazine has a good list of them, which I will inspect at a later point in time. For the time-being, I compressed the Javascript files and was able to bring the total size of the Javascript files down to about 125KB from 196KB. I also decided to only include the scripts on my actual Gallery page. It seems like too much of a waste to require all those files when I rarely use them.

Put CSS At the Top and JS at the Bottom

When I first set up Lightbox, I wanted to avoid using a WordPress plugin for it, so I cooked up my own method of including it. Most of the work was simply trying to find a way around hard-coding my template directory in it and also using a function to keep my header.php file clean and easy to read.

The first problem with my original method was that all of those JavaScript files were at the top of the page, meaning that almost 200KB of JavaScript had to be loaded before any of the content on my page started to load. That’s no good! The simplest thing to do was to move my function down to the bottom of the page, right before the scripts for Google Analytics and Mint. The only other problem was that the function included the CSS file as well. Since I had already decided to merge the Lightbox CSS with my main CSS, all I actually had to do was remove the call to load the CSS.

Use Google’s APIs

Unless you’ve been living under a rock (or just don’t care), you’ve probably heard that Google just released their AJAX Libraries API. This was pretty much perfect timing for me since I was already looking at how Lightbox used the Prototype Framework and Scriptaculous Effects Library. It makes a whole lot more sense to use a version hosted by Google than it does to require clients to download the same exact version of a standard library from my slow web host. Ajaxian has a good rundown of the features of this new API and why you would want to use it.

After doing a relatively quick setup, I was able to call the Prototype framework from the Google API. It came in from Google at only 29KB; that’s the same file that I was just complaining was 124KB. That’s a no-brainer. Scriptaculous was a bit more of a problem though, since it takes a modular approach. Lightbox 2 actually only uses two of the eight possible modules. As far as I can tell, there is no way to use the standard type of of script tag to only include the libraries you want like this:

One of the comments on Ajaxian by jdalton, addresses this:

Another issue google will need to work out is that MooTools, Scriptaculous, and Dojo are modular (meaning you donâ€™t have to load the kitchen sink and can just load the parts you want). This can effect the file size footprint as well. This may be beyond the scope of a CDN though.

Because I couldn’t find a way to only include the modules I needed, I decided to continue serving them locally instead. So, my function to include Lightbox now looks like this:

function AKM_include_lightbox() {
    $templateDir = get_bloginfo('template_directory');

    $output = <<



EOT;

echo $output;
}

Reorganize Template Directory

Although this doesn’t actually have anything to do with the speed of my website, it seemed appropriate to take this opportunity to reorganize my template directory a little bit. I was striving to create a more traditional web setup within my WordPress template that included all CSS in a CSS folder, JavaScript in a JS folder, and images in an image folder.

This first issue to address was the WordPress default style.css file. This file is necessary for WordPress template to function properly, as explained in the WordPress Theme Development Codex page. What I decided to do was to remove all of the actual styles from this file and simply leave the WordPress information:

/*
Theme Name:Positive Grey
Theme URI:http://nerdstargamer.com
Description:A simple theme using a fluid 2 column layout with green and grey
Version:2.0
Author:Alissa Miller
Author URI:http://nerdstargamer.com
*/

/* See css/screen-x.x.css for styles */

I then moved all of the styles to a new file called screen-x.x.css in the CSS folder. This allows me to have all stylesheets (with the exception of style.css) in the CSS folder. It also allows me to use versioning in the filename, which as we will see, will be important after I’ve implemented better caching and expires headers.

I previously put all of the Lightbox files in their own folder, to keep things neat. I’ve now decided to roll those files into the normal directory structure instead of keeping them separate. The CSS file got merged with screen.css and all of the Lightbox JavaScript files got moved into the js folder. Lightbox also includes several images, which I decided to put in images/lightbox/ so as not to confuse them with my own template images.

Gzip Components, Improve Caching

One of the rules for YSlow includes Gziping components. Some of my scripts are for Mint and JavaScript, which I can’t really control. The others however, along with my CSS are fair game. I had a little bit of trouble figuring out how to do this since I did not want to use any of the more common php methods to compress my pages on the fly and was looking at just using either mod_gzip or mod_deflate. The YSlow page gives the following information:

Gzipping generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip. If you use Apache, the module configuring gzip depends on your version: Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate.

After some research, I figured out that my website is hosted on Apache 2 (not earlier). I included this block in my root .htaccess file:

# GZIP CSS AND JS

 
  SetOutputFilter DEFLATE

I also decided to make the move to using WP Super Cache instead of WP Cache. WP Super Cache is much like WP Cache but does offer some performance benefits. Once I got WP Super Cache configured and running, it seemed to have an immediate effect on the speed of my blog. Of course, that could have just been wishful thinking on my part.

Add an Expires Header

One of the last things I did was add an expires header in my root .htaccess file. This tells the client browsers not to look for a new version at all if the one in their cache hasn’t expired yet.

Now, I obviously don’t want to do this to the dynamic WordPress files (comments and posts would never update!), but that’s okay because WP Super Cache is taking care of those files already. What I do want to do is add the expires header to all of my images, JavaScript and CSS files. None of these will really change except for the CSS files. Fortunately, when I reorganized my template files, I gained the ability to append version numbers to my CSS files. So now I can go ahead and add that expires header to my CSS files, and then simply change the file name when I need to make changes in my CSS. The new file will download like normal, and it’s good practice to get some sort of versioning underway.

Here is the code that I put in my .htaccess file:

### ADD FAR OUT EXPIRES HEADDER TO STATIC CONTENT ###

  
       ExpiresActive on
       ExpiresDefault "access plus 1 month"

After some thought I decided that one month was an appropriate length for my purposes. This depends entirely on what type of content it is, and how often you are going to change it.

Rework the Gallery Page for Better Performance

After doing all of the previously mentioned fixes, I had improved the page load time quite a bit for most of my site. The only remaining bottleneck seemed to be my Gallery page. That wasn’t particularly surprising considering that the page includes 25 thumbnail images. The total size of all of the images, at full size, weighs in at a hefty 2MB. This page was also still using the Lightbox scripts.

One of the things I noticed while using YSlow was that some of my thumbnail images seemed to be unnecessarily large. Some of them were as big as 40KB for a 150×150 pixel image! Upon further inspection I decided that all of the thumbnails were too large. I had used WordPress’ feature to automatically create thumbnails of images to set this up. I’m not sure exactly how WordPress does this, but after taking a look at the file sizes I’m sure that it sucks. I recreated all of the thumbnails in Photoshop and the biggest one is now only 17.6KB.

I had also originally set up the gallery page in WordPress’ admin screen (using the file browser and things like that). Once I was no longer using the dynamically generated thumbnails, it didn’t make sense to lay out the page in WordPress’ page section. Instead I created a page template called gallery.php, which includes all of the images and code for the page.

I also copied all of the full size and thumbnail images into my template image folder. This way the links to the images are no longer being stored in my database.

Conclusion

After all of these changes my website does seem to be a little bit faster. These types of exercises are good practice for any web designer/developer. Having a slow web host is no excuse for not doing what you can on your end to make the site faster.

As always, any tips or improvements from more experienced developers in this area are greatly appreciated.

You get what you pay for, right?↩

Error: This Should Never Happen

Alissa Miller — Tue, 25 Mar 2008 20:49:53 +0000

Imagine my surprise when I opened up Console yesterday and found this error message from Mail in the console.log:

I wonder what caused the error why the developer thought “this should never happen.”

Automatically Post Safari Tabs to Del.icio.us With “topost” Tag

Alissa Miller — Tue, 25 Mar 2008 09:54:24 +0000

I wrote a short AppleScript yesterday to allow you to automatically add the current tab in Safari to your bookmarks in Del.icio.us with a specified tag or tags. The default tag is “toPost.” Add the script into Quicksilver as a trigger and you’ve got an über convenient post later (or never) script.

Here is the script (or download it here):

-- To change the tags, edit text inside quotes below
-- Use spaces to seperate multiple tags (ex: "tagOne tagTwo")
set tags to "toPost"

-- build delicious URL for current tab in frontmost window of Safari
tell application "Safari"
    set u to (name of current tab of front window) & Â¬
        "&url=" & (URL of current tab of front window) & Â¬
        "&tags=" & tags
end tell

-- Add URL to Delicious
tell application "Safari"
    do JavaScript "javascript:void(open('https://api.del.icio.us/v1/posts/add?description=" & u & "','delicious','toolbar=no,width=150,height=100'));" in document 1
    delay 0.5
    close current tab of front window

end tell

This is basically a simple modification of the script written by Andrew Faden which does pretty much the same except from NetNewsWire instead of Safari. Be sure to check out his original script and also the much improved version submitted by Larry from http://scriptingforlawyers.com/.

Do Not Reply (.com)

Alissa Miller — Wed, 19 Mar 2008 23:24:07 +0000

You know all of those emails that you get from companies that say “DO NOT REPLY”? As it turns out, some genius programmers really like to go the extra mile to make sure that their users do not reply…to them. These geniuses program the emails they send to have a reply-to address in the form of something@donotreply.com. You know, so they don’t get the replies (or bounce-backs).

Trouble is, donotreply.com is actually a real domain. And, any email sent to that domain, will be received by someone. In fact, Chet Faliszek will probably get the email, because he owns the domain donotreply.com. He also likes to post the best of the embarrassing mistakes.

Via Coding Horror.

Multi Columns in websites

Alissa Miller — Wed, 19 Mar 2008 08:13:19 +0000

For the past couple of months I’ve been working on creating a new website that uses WordPress as a CMS for the organization Girls Get Connected (That’s the old site, because the new one isn’t quite done yet). The project has been a great one to work on because I’ve gotten to do everything including the design of the site and development of the WordPress back-end and templates.

Early on in the project, after the design mockup had been approved, I knew there were going to be some difficulties implementing it. One of the things that I knew would be a problem was the fact that I had designed a rather prominent section on the home page of the site which called for an article to be split into multiple columns. This being a content managed site, I also knew it wasn’t really going to be an option to ask the end users to break up their articles into two even sections so that it would make nice and pretty columns. Also, CSS3 really wasn’t an option, since this site would have to work on all current browsers. Something else would have to be done.

The solution I ended up using was a very elegant JavaScript program written by Randy Simons. The script is called Multi-Column Text and is pretty easy to implement. It automatically splits the text into multiple columns (you chose how many), and includes support for liquid layouts. This means that the content and columns aren’t static; they will automatically adjust as the page is resized. Check out the demonstration page to see what I mean. This script is also works on enough old browsers to actually be usable.

What impressed me most about the script was that it requires very little extra markup. Assuming all of your markup is in some sort of standards compliant state, all that is required is one (or possibly two) extra div tags. Say you wanted to make the following code segment use the multicolumn script:

Maecenas
Pellentesque mi. In lacinia iaculis ante.
Ut dapibus
Nunc non dui. Maecenas quis lacus sed dui commodo elementum.
Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.
Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,

All that needs to be added are two div tags to wrap the content. The first div must also include an id or class name for the JavaScript to hook to. You can use whatever class or id name you want when you implement it. I chose to use id=multicolumn. The finished markup would look like this:


  
    Maecenas
    Pellentesque mi. In lacinia iaculis ante.
    Ut dapibus
    Nunc non dui. Maecenas quis lacus sed dui commodo elementum.
    Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.
    Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,

I like the way that looks: clean and simple. You can even use this in in a WordPress template with PHP tags included and everything still works. This is what is actually coded into one of my WordPress template files:


  
    
    Read More »

My favorite part is what happens when Javascript is not available. In my case, the page still works fine and no content is lost. Sure, there are some rather long line lengths, but everything still works.

JavaScript getElementsByClassName

Alissa Miller — Thu, 06 Mar 2008 02:37:55 +0000

Today I found myself writing a little bit of JavaScript to isolate an element on a page. The element in question looked something like this:


    Some text...
    Some more text

I wanted to get the div element by searching for the class name multicolulmn. Without thinking, I began writing the code to grab the div using the getElementByClassName function. Then I remembered that getElementByClassName isn’t actually a built-in function. Oh well, Google to the rescue.

I was able to quickly find Robert Nyman’s elegant getElementsByClassName function in The Ultimate GetElementsByClassName.

Using this function, you can get elements like so (examples pulled from Nyman’s site):

// To get all a elements in the document with a â€œinfo-linksâ€ class.
getElementsByClassName(document, "a", "info-links");

// To get all div elements within the element named â€œcontainerâ€, with a â€œcolâ€ and a â€œleftâ€ class.
getElementsByClassName(document.getElementById("container"), "div", ["col", "left"]);

I love it when I don’t have to write my own JavaScript.

Take Screenshots From the Command Line

Alissa Miller — Tue, 19 Feb 2008 20:18:22 +0000

There is a command for Terminal in OS X which allows you to take screenshots from the command line. Creepy creepy. Here is the format:

screencapture -x FileToSaveAs

The -x option tells it not to make the shutter click sound. There is also an -i option which triggers an interactive mode, although I’m not sure why you would use the Terminal to do that.

There is also a cute little tidbit in the man page for screencapture:

Finding a Good CMS Solution

Alissa Miller — Fri, 08 Feb 2008 20:49:00 +0000

There is a pretty good discussion going on over at 456 Berea Street about “Looking for open source CMS and portal software options“.

I’ve been thinking a lot about this for the last couple of months. I’ve worked extensively with WordPress (for this blog and a few others) and I really feel comfortable with it. I am confident that I can work with it and bend it to do most things I want with a little effort.

Currently I’m using WordPress for a contract job to create a smallish website managed by a CMS. The client wanted to use WordPress, and I am reasonably confident that it will achieve their goals. That said, I think they’re getting uncomfortably close to WordPress’s limits. There’s always a point when you are extending software that you have to stop and consider, “Am I really using the right tool for this job?”

I’d really like to branch out and learn some other content management systems that are more powerful than WordPress and also more geared towards CMS rather than blogging out of the box. I tried using Drupal a few months ago, and like many of the peopling commenting on 456 Berea Street, I found the admin interface to be absolutly overwhelming. It’s definitely designed with the mentality that more is better. I had a very clear vision in mind for what I wanted to accomplish with my Drupal site, but I ended up stumbling on some key things that felt like they should be very easy. Primarily dealing with attachment links.

That said, I was very impressed in general with Drupal. It seemed liked the sky was the limit as far what could be accomplished with it. The user roles were also a welcome departure from more restrictive systems like WordPress.

In the end, I was left with the impression that given a lot of time and energy (to learn Drupal) I could make some very cool sites. I wonder, are there other solutions that are better?

XKCD: 1337

Alissa Miller — Fri, 16 Nov 2007 16:36:25 +0000

XKCD wins my eternal affection for referencing The Princess Bride in Part 5 of 1337.

WordPress Theme Hacks

Alissa Miller — Wed, 14 Nov 2007 17:50:31 +0000

WeDesignerWall currently has a pretty good list of WordPress Theme Hacks. This is a good resource if you either trying to create your own theme or customize someone else’s.

These is also a section on one way to get customized titles. They use this example:


    <?php
    if (is_home()) {
        echo bloginfo('name');
    } elseif (is_404()) {
        echo '404 Not Found';
    } elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
    echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
    echo 'Archives:'; wp_title('');
} else {
    echo wp_title('');
}
?>

I personally use something similar for this page:


<?php /* Title for homepage is "blogtitle | blogdescription", all other pages get "pagetitle | blogtitle" */
    if (is_single() || is_page() || is_archive()) { wp_title('',true); echo ' | '; bloginfo('name'); } 
    else { bloginfo('name'); echo ': '; bloginfo('description'); } ?>

With Apologies to Robert Frost

Alissa Miller — Wed, 05 Sep 2007 22:22:42 +0000

Every time I think that XKCD couldn’t possibly get any dorkier, well, it does. I sure do love it.

With Apologies to Robert Frost

Tripoli CSS Rendering Foundation

Alissa Miller — Fri, 24 Aug 2007 22:11:34 +0000

David Hellsing has created a new CSS Rendering Foundation (if that confuses you, think framework) with cross-browser compatibility.

Tripoli

The CSS files basically include a global reset, generic styles, and a print stylesheet. There is also an IE stylesheet for specific IE bugs. The CSS files looks pretty good.

All of the typography is based on The Elements of Typographic Style:

Vertical rhythm, line-heights, margins and font sizes have been carefully selected to follow classic typographic guidelines from books like “The Elements of Typographic Style“. All measurements are set in em’s, so it’s very easy to do elastic and dynamic layouts while still keeping typographical proportions. Rules like font-size and font-family are set globally so you can easily override them with new values that suits your project without ruining the natural flow.

Even cooler, Tripoli also introduces the idea of using “plugs” to extend the generic base code:

One of the ideas behind Tripoli is to allow external plugs to extend the generic base. To demonstrate this, I have created a negative plug that changes all colors to prepare for a negative layout. Other plugs could be sidebars, menus, rounded boxes, code formatting and other helpful widgets.

The Tripoli site includes several examples of how it works. My particular favorite is the example where he takes a page from a W3C spec and completely restyles it (links to the changed styles at the top of the document):

Tripoli: W3C Example

Revolutionary Image Resizing Technique

Alissa Miller — Thu, 23 Aug 2007 20:56:30 +0000

Check out this video about a new technique for image resizing. In short, it allows images to be resized (bigger and smaller) without losing the integrity of the original image.

There is some more information about the project on this site, including a pdf file about the project:

Dr. Ariel Shamir Home Page.

Via Thoughts From Eric » Recent Links.

Open in Firefox

Alissa Miller — Thu, 21 Jun 2007 00:22:56 +0000

I currently use Safari as my primary browser on OS X systems. Oftentimes I find that I either want to dissect a web page in Firebug or even just see what it looks like in Firefox. This is kind of a pain because it takes several steps:

Open Firefox (one step with Quicksilver)
Activate Safari
Copy URL from desired website
Activate Firefox
Paste URL into Firefox.

I could probably consolidate these steps a little bit (by dragging and dropping the URL perhaps), but the point remains, this is an annoying process to go through every time I want to quickly check something out in Firefox.

Last week I put together a nifty little script in Automator to streamline this process. Basically, the script copies the URL from the active tab in Safari, opens Firefox and loads the page. I saved the script as an application and with Quicksilver it’s now just one step to activate the script.

Open in Firefox Script (ZIP)

For the most part, the script was pretty easy to set up. There is a built-in action to Get Current Webpage from Safari. There aren’t any scriptable actions for Firefox from Automator, but opening it is simple enough using a terminal command:

open -a Firefox.app

The only slightly tricky part about the script was getting the copied URL to automatically load when Firefox opens. After a little research I found that this could be simply passed as a parameter to the open command:

open -a Firefox.app $@

Perhaps some other Safari-lovers will find this useful. Enjoy.

Easy WordPress Slugs With Textmate

Alissa Miller — Fri, 15 Jun 2007 21:21:10 +0000

There is a nice little tip over on the Circle Six blog on how to set up the TextMate blogging bundle to use the WordPress 2.2 XMLRPC slug capabilities:

Easy WP2.2 Slugs with TextMate

The only oddity I found was that Circle Six lists the blogging.rb file in this location:

~/Library/Application Support/TextMate/bundles/Blogging.tmbundle/lib/blogging.rb

On my computer the file was actually located here:

/Applications/TextMate.app/Contents/SharedSupport/Bundles/Blogging.tmbundle/Support/lib/blogging.rb

I’m not exactly sure why the two locations are different. Either way, mine works splendidly after following the tip.

Mac Users and Cross Platform Apps

Alissa Miller — Thu, 22 Mar 2007 19:57:58 +0000

About a month ago I blogged about my feelings on Mac browsers in Mac Browsers and Non-Native UI. My basic feeling was that the best browser that’s made for a Mac always wins. Firefox is a great browser, but it’s not made for a Mac.

A recent article on Theocacao has basically reinforced what I said in my previous post. It’s well worth the read.

Simple Truths About Cross-Platform Apps

Stevenson’s main rule of thumb for Mac development:

Mac users will generally favor an app with a better experience over the one with more features.

Make sure to read that twice. He’s absolutely right.

Getting back to the browsers, Stevenson uses Firefox as an example for the above point:

A textbook example of this is Firefox. A great browser, but Safari is far more popular on the Mac because it’s designed for a Mac user. In fact, this runs so deeply that Camino â€” a Mac-only app which uses the same Gecko engine that Firefox does â€” enjoys a fairly strong following.

Bad C++ Joke

Alissa Miller — Wed, 21 Mar 2007 16:29:22 +0000

One of my friends told us this joke in class today. The saddest part of it was that we all laughed really hard.

How many C++ programmers does it take to change a light bulb? “You’re still thinking procedurally! A properly designed light bulb object would inherit a change method from a generic light bulb class!”

Useful Shell Tricks

Alissa Miller — Mon, 19 Mar 2007 20:35:26 +0000

I just found this nice list of shell tricks over at UnixJunkie Blog. Most of them have to do with clever uses of SSH. This really would have come in handy back when I was trying to write a script that processed user tracking logs on our lab computers.

Old (but useful) Shell Tricks

Clippy’s Revenge

Alissa Miller — Wed, 14 Mar 2007 22:21:57 +0000

Just plain funny:

How the vi editor would seem if it has been made by Microsoft