Category Archives: Web Design & Development

Setting up SSL on Apache

While locally testing Darkroom over HTTPS, Firefox gave me the following error: “Error code: ssl_error_rx_record_too_long”. Turns out I’d never configured the Apache instance on my laptop to use SSL.

Once you’ve got the right information it’s really quick to fix. Here’s 2 links that I found helpful:

Generating an SSL Certificate with Apache+mod_ssl
Has the commands you need for generating a self signed certificate.

If while generating the certificate you get the error “unable to write ‘random state'”, you’ll need to chown the .rnd file (sudo chown user:group ~/.rnd) and try again.
I put all the generated files in /etc/apache2/ssl/.

How to get Apache to do both HTTP and HTTPS on one IP address?
Shows the basic Apache configuration needed for HTTPS. To get HTTPS working, I just copied my existing virtual host definition, modified it to use the port 443, and added the SSLEngine, SSLCertificateFile, and SSLCertificateKeyFile directives.

Here’s a copy of my file:

MugTug Darkroom, Online/Offline Photo Editing

For those of you who don’t know, a few weeks ago I joined a project called Darkroom from MugTug.com. It’s an image processing application using cutting edge HTML 5 features such as the <canvas> element, localStorage, and application cache, and all the editing (and most of the GUI) is done client side using JavaScript, so it works even without an Internet connection.

Yesterday it was demoed during the Google I/O 2010 Keynote Speech:

There’s currently a development version live, feel free to visit the site and try it out!

Using a Test Database in Django

At Govnex we’re using MySQL on our development machines. It has several advantages, but one of the drawbacks is unittests run slower when not using Sqlite (big ups to MockSoul for posting his benchmarks). The reason for this is when running unittests in Django with a Sqlite database, the database is run in memory (RAM) instead of being written to the disk.

Django only allows you to specify one database, and although a new database is created for unittests, it still uses most of the same settings (auto prepending “test_” to the database name), which means a Django install using MySQL also uses MySQL for unittests.

To get around this problem, I created a file in my project root called test_settings.py containing the following lines:

I then opened my settings.py, imported sys, and inserted the following lines at the end of the file:

If one of the command line arguments is “test”, that means a unittest is being run, in which case Django will attempt to import test_settings.py, which will override the database settings and use Sqlite instead. Migrations won’t be an issue, since Django South uses the old syncdb command for generating databases for unittests.

Hope this helps you save some time testing.

Whitespace Management: Use Tabs, Spaces Considered Harmful

At one of my previous jobs I worked on dozens of websites that had been created by other people. I prefer to use tabs instead of spaces when indenting code, and I can get a little OCD sometimes, so every time I edited a file I would do a search and replace to change every 4 spaces to a tab character. I didn’t like the idea of having some files use spaces while others used tabs, so when I wrote a bash script for recursively searching and replacing inside text files throughout an entire directory structure, I added some code that would clean up the white space as well. The actions it performed were:

  • Converting from Windows (“\r\n”) or Mac (“\r” on older versions) end of line encodings to Unix style encodings (just “\n”)
  • Removing trailing whitespace from the end of lines
  • Condensing multiple blank lines to single blank lines
  • And most importantly, converting every 4 spaces to a tab character

I had anticipated that this would save some disk space, but I was surprised by how much; after running the bash script, the total size of each website would decrease by 10-50% (that’s not a typo, fifty), and that’s including binary files such as images and PDFs which were unchanged. Think about the impact that has. Every individual whitespace character takes up 1 byte, bytes which have to be stored on disk, loaded into memory, transferred over a network, loaded into the client’s memory, and iterated past when it gets processed by the browser. Whitespace management saves:

  • Disk Space
  • RAM
  • Processing Power
  • Bandwidth

which in turn helps save:

  • Money
  • Electricity
  • the Environment

It also helps you provide a better user experience. When browsing the Internet, I’d much rather download a 5KB HTML file than a 10KB one, since it’ll download faster and render faster.
(On a side note, generally these are all also benefits of writing standards compliant, semantic XHTML with external CSS and JS.)

Another reason I prefer tabs to spaces is, when browsing code it’s easier to tell if the proper levels of indentation are being used. If there’s one space missing or one additional space it can sometimes be hard to tell, but if a tab character is missing it’s very obvious. Also, most text editors allow you to specify how wide a tab character should be displayed, so if one developer likes 8 space indentation width, another likes 4 spaces, and another likes 2 spaces, they can all use the same code containing tabs and configure their respective editors to display the tab character at their preferred width. If you were to use 4 space characters for each indentation level, the developers who like 8 and 2 spaces are forced to use it as well.

Survey of Best Programming Practices

I was having a talk today with some colleagues about the scarcity of web developers, and even software engineers, who use best practices such as:

  • using version control
  • using a bug tracker
  • writing unit tests
  • using a programming framework

In all honesty, I didn’t do any of these before my current job at Govnex (aside from a little dabbling with CakePHP), nobody at my first 2 web development jobs did any of these, and we didn’t learn about any of this stuff in college. As far as I know, nobody I knew at RIT followed these practices except for maybe using a framework. Of all the job descriptions I’ve read in the past few years, only a handful mentioned using a framework, and only a couple mentioned anything about unit tests or version control; none of them mentioned the use of bug tracking software. One of my colleagues said that these practices are common among all developers, while my other colleague agreed with me that they’re hard to find.

What do you think? I’ve created a 6 question Google Apps form for collecting survey data and made the results public, it would be a big help if you could fill it out. Afterwards, please share your comments below.

Just Moved to RackSpace Cloud Servers

Sorry for the down time, I just moved to RackSpace and got everything up and running.

I had some problems migrating WordPress and getting it working, which stemmed from the fact that it was using too much memory. I ended up doing a fresh install of WordPress with a fresh installation of each plugin I wanted to keep, but on some pages I still occasionally got an error saying too much memory was being allocated. After some searching I discovered that the “measly” 32MB max. memory allocation in my php.ini wasn’t enough for the latest version of WP, and I had to up it to 48MB. I honestly don’t think I’ve ever encountered this error before.

Over time I’ve noticed as WordPress has become heavier and more resource intensive, and I have a feeling that the plugin mechanism is slower than built-in functionality would be. I think WordPress is a great tool and it’s fantastic that it can (usually) be set up in 5 minutes, even by novice users. However, I’d like something more customized and with better performance, so once I have some spare time I think I’ll redevelop my blog using Django.

Anyways, in the next few days I’ll start to rebrand my site and add more community features, including project repositories and bug tracking. This should make it easier for users to report bugs for the Color Management Firefox Add-on, contribute code and add translations.

Redirection WordPress Plugin

So when I first set up this blog I opted for the /archives/%post_id% permalink structure, which I liked because it was short, elegant, and used unique identifiers. I didn’t like the idea of date and slug based permalinks since they don’t use the hour, minute, and second you published your post; just the year, month, day, and title are used, none of which have to be unique. Although extremely unlikely, theoretically you could publish 2 posts with the same title on the same day and they would have the same URL, which doesn’t sit right with me.

As it turns out though, SEO calls for slug based permalinks since search engines strongly favor pages with keywords in the URL. I decided to switch to date and slug based permalinks, but what about all the numbered archive/%post_id% links that have been posted, linked, bookmarked, indexed, etc.? Well I found this great WordPress plugin called Redirection. It lets you specify URLs you want redirected and what HTTP response code (301, 302, 307, 404) to use. It also features a log of redirects and 404 errors, so you can look for common requested URLs that don’t exist and redirect them. It would be kind of hard to update a few hundred links to the new slug URLs, but for 5 posts it was very simple and just what I needed. Another great feature is, anytime you edit a post slug it automatically adds a redirection rule to the new URL.

WordPress Twitter Better Plugin

One great way I recently found to publicize new blog posts is with the Twitter Better WordPress Plugin. It serves 2 functions:

  • Shows your latest Twitter posts
  • Optionally updates your Twitter status when you save, publish, and/or edit a post, with a link to the post

It’s a really simple way to spread your URL around the internet, especially since Twitter is integrated with so many other web apps. For example, I have Twitter Better set to update my Twitter status when I publish a new post with the title and URL of the post. That new Twitter status is then used to automatically update my Facebook status with the title and URL of my new blog post, and the same can work for any other Twitter enabled web apps I use in the future.