Apache OMGWTF MultiViews?

Last night, while working on +Escher‘s new install wizard, I thought I must have done something terribly wrong. Everything was working fine before the config file was saved, then BOOM! It stopped working if the file existed.

I spent hours on it, only to discover the true culprit: Apache. Somehow, who knows how long ago, while tinkering with Apache on my dev server, I turned on MultiViews. So requests to /config/install/ (a virtual URL path in Escher) were getting rewritten to /config.php/install/… Gross.

Fear not–this is just a home development server. I do not have, and know better than to have–MultiViews enabled on production. But whatever I was messing with before, I wish I had undone back then. Waste of a perfectly good three hours. :P

#thomshouse

Posted in Google+ Posts | Leave a comment

Escher’s Job Scheduler

Normally, PHP is very poor at handling large, complex operations. PHP has no concept of “out-of-band” or “asynchronous” processing, so everything is processed within the scope of the current request:

1. A user makes a request to the web server.
2. PHP parses and executes the requested script and all included scripts in their entirety.
3. The web server returns the results of the PHP script to the user.

The larger or more complex the logic is, the slower Step 2 gets. This can become painfully obvious to the user when a “blocking” operation occurs–a large file is created, compressed, or encoded, a call to an API or remote server is made, etc.  Worse for PHP is the particular way that PHP, Apache, and other common components of the server stack handle multiple requests.  In certain cases, if one user is waiting on a “slow” request, many other users may experience slow responses.

Escher’s new job scheduler is designed to alleviate this problem. Instead of performing a “blocking” operation during a request, a script can create a job to perform the operation asynchronously, after the request has completed.  Jobs can be set to run at some point in the future, but often, they are “scheduled” to be processed immediately.

Escher accomplishes this by making use of the Linux command-line interface.  When a job is created, Escher sends a command to the command line that starts the job scheduler process.  This process is non-blocking and exists outside of the current request.

This way, the request can complete quickly and send a response to the user.  The background job has not completed at this point, but the response can provide feedback to the user: “Check back in a few minutes.”

A more sophisticated response might utilize Ajax to check the status of the job periodically.  Here again, Escher’s job scheduler can come in handy.  As the background job process, the scheduler collects information about the status of the job–error messages, return status (success or failure), and more.  The job itself can even save progress information, human-readable messages, and other data to the database.

There are plenty of other features I want to add to the job scheduler–especially configurability, e.g., the ability to disable automatic processing (depending instead on a system cron) or pinging one or more separate “job servers” in lieu of local processing.

Posted in (Unfiled) | Leave a comment

Years of Mess

I’ve taken some time to update a few of my old websites and projects that I’ve had a hand in. Now that they’re slightly less embarrassing, I thought I’d share them.

My Bloghttp://www.thomshouse.net
- Import of Embarrassing LiveJournal entries? Check.
- Consolidation of two previous WordPress blogs? Check.
- Google+ Importer? Check.
Theme that I am, at least for the moment, a little proud of? Check.
I had been saving the “nature” theme for a portfolio website, and was never really happy with the “blueprint” version of the theme that I had used for my last blog. So I relented and switched to the colorful nature theme, which I really do love. Hopefully, between the new theme and the G+ imports, I can make a halfway decent attempt at “blogging” once again.

Smart Popcornhttp://www.smart-popcorn.com
For so long now, I’ve had good intentions of remaking this website, but truthfully I’ve lost interest in the subject. I owe a lot to this site, though. To build it, I taught myself PHP and MySQL, so it is directly responsible for my current job and my career. I made some minor visual tweaks to the background (which I have now dubbed “finely-textured popcorn” so I am willing to show it in public again. ;)

Adelaide Videohttp://www.adelaidevideo.com
Barebones as sites go, but for its age, I’m pretty happy with the design. A much softer, more textured and perhaps feminine site than I have built before or since… Also one of the first designs for which I made important use of proportions (golden ratio, cinematic ratio), and a precursor to my obsession with leanback interfaces and responsive design. (See also: http://www.edtv99.org). Six years ago, I thought it was too awesome to use CoralCDN for serving video. Last week, I decided it was time to switch to Vimeo. :P

Linodehttp://bit.ly/ThomsLinode (Referral)
I finally moved all of my sites (and most of my friends’ sites) over to my Linode box. My past experience was with a GoDaddy box, so I am thrilled with how much control I have over the server, how easy it is to configure (via a free control panel I found), and what a beast it is for just having 512MB of RAM. Highly recommend Linode to anyone who is comfortable with Linux and wants a nice, standalone virtual server.

It’s nice getting all of my old sites and projects updated and/or cleaned up a bit. Refreshing. Also nice to dip my toes in the visual-design side of things, if only just slightly. (Lately it’s all been backend logic.) There are a few other designs I would like to work on, so maybe I’ll post a follow-up. :)

#thomshouse

Posted in Google+ Posts | Leave a comment

Cloud Hosting versus Dedicated Hosting

Earlier today, .net magazine (@netmag) asked the Twitterverse if “cloud hosting” was simply a new buzzword for dedicated hosting, or something different.  I replied:

“It’s certainly different, but requires more know-how and the difference won’t be felt by 90%+ of those who would consider it.”

I don’t want to post a lengthy article, but I thought I would try to back my claim with a little bit of math.  Fair warning: this is common-sense math that might not hold water in real-life situations (somewhere between damned lies and statistics?) so you are forewarned.

Cloud hosting differs from “normal” hosting in that the host services are distributed across multiple servers. In theory, something as simple as running a web server alongside a separate database server could be considered a form of “cloud”.  However, the typical selling point of cloud hosting is extreme scalability–that you quickly expand your website to run on many servers at once, and later turn off or simply discard spare servers when they are not needed.

This is a very attractive option for large sites and web services, as traffic–and thusly bandwidth, CPU and other resource usage–varies widely by time of day, and by day of week. The traffic to any given website in a 24-hour period resembles something like this:

Consider a website that requires ten servers to operate at peak usage.  Cloud hosting seems like a very nice option:

During non-peak hours, the website can run on as few as two servers.  By not having to pay for the remaining servers when they are not needed, the website can save a significant amount of hosting costs.

However, these advantages of cloud hosting are not as great for smaller operations.  Consider a smaller website that only requires two servers to operate at peak usage:

For a smaller website like this, cloud hosting provides far less control and with far greater risk.  The operator of the website must make a choice: turn the second server on early and incur additional hosting costs, or delay turning on the second server as long as possible, and risk site performance issues.  And because the required “turn-on” point occurs when traffic is climbing at its fastest, the risk of performance issues is a very real thing.

Still, there will be a period of time at which the website simply will not need a second server.  The website operator must decide if that downtime will result in actual savings over a traditional virtual dedicated hosting plan.

To get a very rough idea, I have specced out comparable plans between a GoDaddy VPS and a “cloud” of two Amazon EC2 “small” servers:

I tried to give Amazon every possible advantage in this case–I’ve neglected to take GoDaddy’s 12-month discount into account, and I’ve specified an extremely low amount of data transfer for a website that would require such a meaty hosting plan.  Even still, the EC2 solution is only competitive in price if the second server sees 33% or less utilization. And were I to expect greater bandwidth requirements, Amazon’s cost quickly becomes much more expensive.

There are costs to cloud hosting well beyond dollar amounts, as well.  Upgrading to a “cloud” environment introduces many new layers of complexity–load balancing, instance management, network file handling, and much much more.  Amazon’s administrative console is extremely powerful and helpful, but even still, the learning curve can be incredibly steep.

I don’t mean to make a case against cloud hosting.  It really is an amazing tool for an organization that needs to scale, and scale big.  I would simply caution this:

Do not overestimate your need for cloud hosting.

If you are first and foremost a web designer, and you aren’t what you would consider a “server guy”, cloud hosting is probably beyond your needs and will definitely overwhelm you.  If you are more savvy, or are in a large enough organization to have one of the aforementioned “server guys”, block out a good amount of time for learning in-depth about cloud hosting and developing a plan for when and how to best implement it.

P.S. I also don’t mean to paint Amazon in such a poor light.  I use them as an example simply because they are the best cloud example.  For reasons greater than simple math concepts, I would still recommend an EC2 a million times over a GoDaddy VPS.  (I would simply not recommend a GoDaddy VPS, period.)

For anyone who cares, these are my personal recommendations for choosing virtual/cloud hosting.

  • Avoid GoDaddy. The numbers are very competitive, but in my experience their servers are extremely inundated by “bloat”.  I suspect they also spread CPU resources very thin.
  • Avoid the Amazon “Free Tier” EC2. This may seem like a great starter solution for web hosting, but there are often hidden costs related to disk usage. Consider this option only for testing the Amazon platform.
  • For small servers, consider Linode. This is where I currently reside.  The numbers on its pricing plans seem less competitive than GoDaddy, but the quality of the hosting service and environment is top-notch. (Disclaimer: If you sign up via the link above, I will receive a referral in the form of a discount. This does not affect my opinion of Linode, but I can most certainly appreciate discounted hosting costs.)
  • Watch the Amazon Large EC2. When you can afford it, or when your website starts to outgrow something like the Linode 1536, jump to Amazon and settle in on a Large EC2.  At this size, I feel Amazon becomes far more economical than any other option.  You still don’t need cloud computing yet, but when you do, you’ll be on a platform that’s more than capable for doing so.
Posted in General | Leave a comment

iPhone or Android?

Lately, I have been asked one question more than any other question–heck, more than all other questions combined: “What phone should I buy?”  Part of my day job is spent supporting computers, browsers, email, and network connections…  And yet no one asks me about those things in passing.  It’s always about phones.  Nearly a decade after we first chuckled over the weird guy obsessed with his oversized CrackBerry…  We’ve all caught the addiction.  This is the era of the smartphone.

So…  What should you buy?

Forget about BlackBerry and Palm.  They have missed the window of opportunity for attracting developers, and a smartphone without software…  just isn’t very smart. Microsoft has actually done some interesting things with the Windows Phone 7 user experience, but I would consider its new OS an “unknown” for the time being, as Microsoft has a tendency to produce neat gimmicks with very poor follow-through.

Really, then, this becomes a simple either/or scenario: “iPhone or Android?”

Of course, to many technology fanboys, that is no simple question, but rather, fuel added to the fire of their latest holy war.  Apple hipsters will tout the iPhone’s ease-of-use; Google advocates will mention the open platform.  iFans will brag that their demographic gets laid more, and Droid-heads will…  Mention some cryptic thing about how nice “user intents” are, whatever that means.

I guess my overlap of fandom–I love my MacBook Pro, but I eat and breath Google Apps–has left me in a position to offer a fairly objective opinion: It really comes down to what your needs are.  There are a few very important questions that should guide your decision, and otherwise it simply comes down to preference.  Those questions, in order of importance, are as follows:

  1. Do you have a deep-seated hatred for AT&T? I couldn’t blame you…  Their logo, until recently, did bear an uncanny resemblance to the Death Star.  All signs point to Apple breaking free from its bonds with AT&T in the near future, but for now…  Go Android.
  2. Is it important for you to have music, movies and photos with you on the go? Apple’s experience with iPods and iTunes give it a clear advantage, although Google is making plans to catch up in the next version of its OS.  Still: Go iPhone.
  3. Do you rely on Google’s Gmail, Documents, Calendars, and other Google Apps? Fortunately, most of these apps perform equally well (or poorly) on both platforms.  However, Apple has been known to block some Google apps in the past, and there’s nothing stopping them from doing so again in the future.  And of course, nobody is going to know Google Apps–and Android–better than Google.  Go Android.
  4. Is important for you to be able to customize and personalize your phone software and user experience? Apple likes to control the user experience, so they don’t allow apps to take over any of the default functionality of the phone.  Tired of the default iPhone SMS interface?  There’s an app for that–but good luck getting it to use your unlimited texting plan, or accessing it from your Address Book contacts.  Android, on the other hand, gives users the freedom of choice.  I run a custom home screen, lock screen, and SMS app.  I have multiple map apps, browsers, and camera apps installed, and could easily set one of them as the “default application” for those duties.  All of these apps, and the many UI elements provided by the Android OS, interact and play nice together.  This is my single favorite feature of Android, and I wish there were a desktop OS that handled these interactions so elegantly.  Granted, most people don’t require this level of customization.  But if you’re a tinkerer…  Go Android.
  5. Is it important for your phone to be extremely simple to use? Android has gotten knocked for having a less-than-elegant UI, but as of “Froyo” (version 2.2) I believe it is nearly as clean and user-friendly as the iPhone’s.  I say “nearly”…  Apple is the king of polish, and there are certain specific actions (e.g. selecting text on a web page) that are still just a million times easier on iPhone.  These are features you won’t realize are missing on an Android phone until you need to use them–and many people never will.  But if you want a stupidly simple smartphone, and I mean that in a good way: Go iPhone.

There are many extenuating circumstances that can trump this list, of course: carriers, coverage, keyboards, form factors…  Android, being on multiple phones and carriers, is a bit more accommodating to these circumstances.  But really, if you didn’t answer “yes” to one of the questions above, it comes down to user preference.  If that’s the case, then congratulations are in order…  Hopefully, whatever choice you make, you can remain a somewhat neutral party, avoiding the fanboy wars that will continue for a few years to come.

Caveat emptor: Android mileage varies greatly by phone manufacturer and carrier.  Android phones from T-Mobile or from Motorola’s Droid series are generally safe, HTC-branded phones have some rather invasive UI customizations. The Samsung Galaxy line of phones have made waves as the “alternative to iPhone”, but in a cruel twist of fate, some stock Android features are just plain broken in the Samsung UI.  And some cheaper phones are simply underpowered.  In lieu of writing an article about “Which Android phone should I buy?”, I will happily do my best to field any questions left in the comments.

Posted in General | Leave a comment

Textpandable: jQuery Expanding Textarea Plugin v0.9

Just wrote my first jQuery plugin!  Textpandable is a plugin that enables textareas to auto-resize to fit content.  Just load jQuery and Textpandable, and include the following Javascript:

$(‘textarea’).textpandable();

…and voilà!  All of your textareas are expandable, like this:

Textpandable in ActionTextpandable offers the following options:

  • lineHeight: Specify the lineHeight of the textarea–as a Textpandable option or a CSS declaration.
  • minRows and maxRows: Set limits to how small or big your textarea will expand to.
  • padding: Set a number of extra rows to provide for “padding”.  1-2 rows is usually a good value.
  • width: Number of characters to allow per line before adding an extra row.  If not set, Textpandable tries its best to determine safe values based on CSS declarations, col attributes, and/or pixel width.

Now, I’m calling this version 0.9 for a few reasons:  I haven’t tested this in IE yet, and I haven’t documented the code (although it’s really simple)…  but most of all, it’s not feature-complete: I want to get animations working.  Unfortunately, with animations turned on, any change in size causes the cursor position to skip to the end and/or lose focus.  I’m not experienced enough with the innards of jQuery to know why this would be happening.

It works just fine with the default speed setting of ’0′ (as I’ve short-circuited the animation script in this case).  Anyone who gets animation working will be my hero!

Download Textpandable v0.9 (Dual-Licensed MIT & GPL)

Posted in General | 5 Comments

Quantum Theory of CSS Image Rollovers

I’m working on the redesign for my beloved first-born child, SmartPopcorn.  The previous design iteration is nearly four years old, so needless to say, the new design is a big, big change with a lot of design features that weren’t even available–or that I certainly wasn’t aware of–four years ago: CSS selectors, min-width and max-width, position: fixed… And thank the maker, IE7 and IE8.

During this redesign, I realized two things: First, I take a different approach to CSS image rollovers than most people seem to.  Second, my unorthodox approach really came in handy this time.

Here’s a screenshot of what the new design looks like:

New SmartPopcorn

It’s a semi-fluid design that’ll stretch anywhere from 1000 to 1200 pixels and, beyond 1200 pixels, will remain centered in the window.  There are also a number of different background images stitched seamlessly together to provide both the full-width gradient and the starburst pattern behind the logo.  Here’s an outline of some of the major layout elements:

Elements of The SP Design

The outlines represent the dimensions and positioning of each element, and the shaded portions represent the background image position.  It looks relatively simple, but there were a lot of difficult issues involved–either the starburst pattern was getting cut off to the left, or the main content area was too skinny, or something. The CSS image rollover for the bucket logo was actually the least of my concerns–but only by happy accident.

The “holy grail”, and most common implementation of CSS rollovers is the single-image rollover, illustrated below:

Single-Image Rollover

Typically, the background image contains two “sprites”, and you manipulate the background position to display either the default or active sprite, one or the other.  This works just fine, and I think it taps into the visual metaphor of the “sliding door” that is so popular among CSS gurus.

However, I’ve always done my rollovers differently.  (When don’t I do things differently?  It must be because I’m self-taught.  “Never had one lesson,” as Ferris Bueller would say.)  Take a look:

Quantum Rollover

Here we have two HTML elements: the #title link, which will be on the receiving end of our rollover; and its parent element, the #side_margin div.  I’ve always just made the background image of the parent element handle the default state of the rollover.  Meanwhile, the background-image of the #title element is positioned out in la-la land, in negative-pixel territory…  out of sight.  When the #title’s :hover state is fired, its background-image is repositioned into view.  Tada, rollover.

I call this the “quantum rollover” because, well, it really doesn’t exist until you observe it, right?  Geeky, I know.

Is this approach better or worse than the “traditional” CSS rollover?  I’m not sure.  I think it’s better in some cases, worse in others.  I do think my approach has an advantage if your parent container is already going to include a background image–as is the case with the starburst pattern in the SmartPopcorn design.  I also think that, because I’ve approached my rollovers this way, it’s helped me to keep my designs smoother, softer, and less claustrophobic or “boxy”.

What do you think?

Posted in CSS | Leave a comment