All entries from March 2008

Today, a free snippet of PHP code. Simple-Auth by Athletics makes password-protecting web documents easy, and looks pro at the same time. After being asked about it a few times, we figured we’d share.

We regularly use this code to password-protect client work — design comps, wireframes, prototypes, dev sites, etc. Clients love password-protecting things, and for good reason: you never know what’s going to end up on some blog, message board, Digg, whatever. This is certainly a concern with some high profile clients, but even if no one in the world (other than you and your client) cares about what you’re up to, everyone enjoys a little professionalism and peace of mind.

For most, password-protecting a document or directory involves entering your web host’s control panel, clicking into the password-protect tool, navigating to the directory in question, and creating a new username:password combo. The control panel software will then generate an invisible .htaccess file and drop it into the directory. This whole process is somewhat cumbersome, isn’t very portable, and most people have no idea how .htaccess files work.

Simple-Auth makes it relatively easy to password protect any PHP file. It’s a snap to drop in once you get a sense of how it works. It’s easily configured and modified. You don’t need to mess with a hosting control panel. No hidden .htaccess files. And it’s more attractive than the standard http authentication dialogue box.

Demo

In the demo below we password-protected a very simple HTML document. Instead of using the .html file extension, we use .php. We do this because we need to add one line of PHP code at the start of the file in order to activate the Simple-Auth PHP brain. Now when visitors attempt to access this document, they will be required to provide an authenticating passcode before viewing.

View the demo here. The passcode is “passcode”.

Simple, right?

Download

Download the code along with a sample document. (ZIP, 5k)

Customizing

The simple-auth-by-athletics.php file is organized relatively well. Take a look around and you’ll see where you can set the passcode, modify commonly used bits of HTML, and dig into the HTML/CSS. A basic familiarity with code-noodlery required.

Enjoy.

---

Comments? Contact James via email - .

I’ve always found debugging Flash applications to be somewhat challenging. The Flash IDE offers a decent debugger complete with download simulation, bandwidth profiling, etc., but this is only available when you build and preview a SWF directly in the Flash IDE. If you want to do any debugging outside this environment, you’re going to need to look beyond the tools Adobe provides.

Given that web users generally consume Flash apps within the browser via the Flash Player plugin, it only makes sense to test in this environment.

Many Flash apps are totally dependent on dynamically generated XML (i.e. Flash apps tied to content management systems). In such scenarios – which the majority of our Flash projects fall into – you really need the ability test & debug in the browser. By running Flash in the browser, we get to test on top of our full local development stack (Apache, MySQL and PHP on OS X).

Also, many Flash apps require some sort of javascript integration. This might just be having Flash content rendered using swfobject, or using SWF Address for deep-linking, or doing some more complicated communication between Flash and HTML page elements. Obviously, you’ll need a browser around to test this sort of gear.

There are a couple of tools we use to get under the hood while running Flash in a browser.

FlashTracer

This free Firefox extension created by Alessandro Crugnola allows you to view all output generated by Flash’s trace() function in a sidebar window.

An example screenshot:

(Click for enlargement)

FlashTracer does require the use of the Flash Debug Player, which you can download here:
http://www.adobe.com/support/flashplayer/downloads.html

FlashTracer works by displaying the Debug Player’s log. This log consists of trace() command output from any running Flash app. This means that FlashTracer will display output from Flash running in any browser, not just Firefox.

Strangely, on OS X the Debug Player seems to be overwritten by other applications from time to time. Perhaps application installers overwrite the Debug Player with the regular player — I’m not sure. For this reason, it’s a good idea to keep the Debug Player installer handy.

Also, keep in mind that the Debug Player does introduce some performance issues, especially when you’re tracing off fifty-eleven things per frame.

Charles Web Debugging Proxy

Charles does all sorts of things, but for me, it’s most useful as a bandwidth throttling tool. Charles acts as a man-in-the-middle and simulates various bandwidth situations by introducing network latency even when accessing content on local machines.

If you’ve ever developed a Flash application, you know that Flash behaves differently when (pre)loading content from a local machine vs. a real internet connection. It’s important to test how Flash behaves in real-world scenarios, including slower connections. Charles makes it easy to do so.

Of course, Charles does fifty-eleven other things as well. A more complete (and complicated-sounding) description from the Charles website:

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Charles simulates modem speeds by effectively throttling your bandwidth and introducing latency, so that you can experience an entire website as a modem user might (bandwidth simulator).

Charles is especially useful for Adobe Flash developers as you can view the contents of LoadVariables, LoadMovie and XML loads.

Charles is shareware. You can test it out for free. $50 for a single user license.

Other options

There are alternative approaches. Most hardcore AS folks will tell you to stay away from trace() altogether and use something like the LuminicBox.Log API (english translation). However, for quite a few developers, trace() gets the job done, especially since it’s possible to view its output within the browser.

---

Comments? Contact James via email - .

We posted some new work today.

Cover photo illustration for this week’s NY Mag:

---

House & Parish One, One-Thousand CD package:

---

Shout It Out Loud Music CD Sampler: