PapayaSoft Phuket web development

A quick post to document something I tripped over today. As usual, mostly for my own benefit since there is a decent chance that I’ll completely forget it the next time I need it.

I had a Zend Framework 1.11 app using Zend_Application and its bootstrap process. The application had several modules. So, in application/configs/application.ini:

resources.modules.front = "front"
resources.modules.auth  = "auth"
resources.modules.admin = "admin"

And each module bootstrap class extended Zend_Application_Module_Bootstrap. For example, the bootstrap class for the module named “front” looked like:

class Front_Bootstrap extends Zend_Application_Module_Bootstrap
{
    protected function _initSomething()
    {
        // init something
    }
}

And there were some app-level application resources – like cachemanager, for example – that were defined in the usual way:

resources.cachemanager.feed.frontend.name = Core
resources.cachemanager.feed.frontend.options.lifetime = 21600
resources.cachemanager.feed.frontend.options.automatic_serialization = true
resources.cachemanager.feed.backend.name = File
resources.cachemanager.feed.backend.options.cache_dir = APPLICATION_PATH "/../data/cache"

All straightforward and working fine, as it has on many previous occasions.

In my module bootstraps, I was registering some front-controller plugins that needed to access those bootstrapped application resources and config data (the cachemanager resource and a feed url, respectively) that were all specified at app-level. So, I tried to access them in the module-level bootstrap using:

class Front_Bootstrap extends Zend_Application_Module_Bootstrap
{
    protected function _initSomething()
    {
        // get some options, used later
        $options = $this->getOptions();

        // use built-in dependency tracking
        $this->bootstrap('cachemanager');

        // get the bootstrapped resource
        $cachemanager = $this->getResource('cachemanager');

        // do more, with the options and the cachemanager
    }
}

Result: The variable $options was merely an empty array and the app would die when trying to access the cachemanager resource.

Apparently since we configured/instantiated all these at the app-level (!), I need to access them through the app-level (!) bootstrap which I can get using $this->getApplication(). So the correct code is:

class Front_Bootstrap extends Zend_Application_Module_Bootstrap
{
    protected function _initSomething()
    {
         // get the application-level bootstrap first
         $application = $this->getApplication();

        // get some options, used later
        $options = $application->getOptions();

        // use built-in dependency management
        $application->bootstrap('cachemanager');

        // get the bootstrapped resource
        $cachemanager = $application->getResource('cachemanager');

        // do more, with the options and the cachemanager
    }
}

In hindsight, and with all the explicit references I have made to the adjective ‘app-level”, it’s all pretty obvious. I will note that getApplication() does not return the Zend_Application instance (as the name kind-of implies), but rather the app-level bootstrap. As potentially misleading as the method name may be, I suppose it makes sense since the app-level bootstrap instance is usually more directly useful than the application instance.

With any luck, I’ll remember it next time. Until then, hope this helps someone else.

As I try to get my own head around the ongoing development of Zend Framework 2 (ZF2) and as I see other beginner/intermediate developers ask similar questions, I though it would be useful – to me at least – to articulate some thoughts about how I understand ZF2 and some general concepts that could be helpful to understanding the framework. Hopefully, they will be helpful for newbies (and a few not-so-newbies) as well.

tl:dr: There is a lot of complexity in ZF2 that enables maximum flexibiltiy. I suspect that at some point in the future, much of this complexity can be wrapped in an easy-consumption layer that masks it for those common use-cases that do not require that flexibility.

Generally, I see the following as some of the core ZF2 ideas:

* MVC and dispatch cycle
* Dependency Injection (DI)
* Events
* Modules as first-class citizens

MVC and the dispatch cycle

To use ZF2 as more than a component library – which is a perfectly valid use case – it is necessary to understand the general notion of MVC and the request dispatch cycle. An HTTP request comes to the web-server; internal objects representing a router, the request, the response, a dispatcher are created; the request is routed to a module/controller/action; data is populated into views which then populate the response; the response is then sent back to the client. Gotta know your MVC.

Dependency Injection (DI)

There are many resources on dependency injection – including a previous blog post – but the upshot is that if an object (the consumer) needs another object (the dependency) to do its job, then it is more flexible to pass the dependency to the consumer, rather than have the consumer instantiate it itself. This decoupling eases unit testing of the consumer, allowing you to provide a mock dependency that you know functions as expected.

ZF2 has a DI component that is used heavily in the framework code and in many of the current sample apps.

Events

Events and Aspect Oriented Programing provide a flexible way to hook external/cross-cutting processing into a line of execution flow. As a request is processed, various events can be broadcast to listeners that perform some processing.

Examples usually cited are logging and caching. Any object that needs to do logging and caching would need to compose objects for that functionality. Since this can result in boilerplate code being repeated all over the place, or in extended class inheritance trees as we attempt to put all this into a base class. An alternative is to simply compose a single “event manager” that knows how to route events and event-specific information to those listeners, who then take action.

ZF2′s EventManager is also used in the dispatch cycle to expose various stages in that cycle to other components that wish to act at that point.

Much of what you see in the current batch of ZF2 sample apps involves specifying listeners to these events.

Modules as first-class citizens

Although ZF1 had a notion of modules, they did not act as “drop-in” buckets/bundles of functionality. ZF2 raises the profile of modules so that they can more easily contain their own autoloading, config, routes, views, public web assets, etc. Further, module-specific config can be overriden at the application-level, something which is necessary to make a module truly flexible enough to drop-in, configure, and use.

Summary

Much of the complexity that is currently exposed in ZF2 is intended to make app development more flexible. I suspect that as time goes on – hopefully even before the actual post-beta release – much of this complexity will be wrappable in an easy set of simple-use-case consumer containers that mask the complexity if you don’t require all the flexibility.

I am pleased to report that we have launched the new version of CRISP – Customers Reporting Internet Speeds in Phuket.

For some years, well-known computer columnist and baker Woody Leonhard (see AskWoody.com for his opinions on Windows patches or his columns in the Windows Secrets Newsletter, or his various Windows for Dummies books, not to mention his bakery business and his Phuket Sandwich Shoppes) has led a group of Phuket internet users in running speed tests on their internet connections and storing this data in an app developed and hosted by Henry Habermacher. The data was freely available as a CSV download to anyone who wanted to perform their own analysis on it.

Woody’s prime motivations were to provide Phuket internet users with real usage data on which to base their ISP choices and to clearly demonstrate the significant discrepancy between speeds advertised by ISP’s in Phuket and those that are actually delivered.

As of this writing, the db has over 15,000 speed reports dating back to 2008.

Henry was unable to host it going forward, so we needed to move it to a new home. But rather than simply migrate, we decided to do a rewrite in PHP and I got the call. Using a design by Seth Bareiss, my re-implementation is built on Zend Framework and the Doctrine 1 ORM. Relative to the previous version, it features some enhanced searching and user management, including registration and profile management.

If you are a Phuket-based internet user, come on over, register, and start contributing to the tracking effort.

http://www.khunwoody.com/phuket-internet-speed/

When working on a web app, I often find myself with my local development version open in one browser window with the live version open in another. To allow me quickly distinguish one from the other, I like to tweak the rendering in the development version by converting the title to lower case.

Since I have recently begun using Zend Framework for much of my development, I wrote a little view helper to handle it.

class App_View_Helper_HeadTitle extends Zend_View_Helper_HeadTitle
{
    public function headTitle($title = null, $setType = Zend_View_Helper_Placeholder_Container_Abstract::APPEND)
    {
        if (null !== $title && APPLICATION_ENV == 'development'){
            $title = strtolower($title);
        }
        return parent::headTitle($title, $setType);
    }
}

To use it, just add the helper path to your bootstrap. For example,you could do it in your config/application.ini with:

resources.view[] =
resources.view.helpers.App_View_Helper_ = "App/View/Helper"

The calls to $this->headTitle() in your view scripts or layout scripts remain unchanged.

As a side note, a great repository of Zend Framework snippets is at the aptly named site ZFSnippets.com.

Do you use any similar tricks or snippets in your development? Let me know via the comments.

Cheers!

The Google Translate widget allows webmasters to add on-demand translation of a website page. Very easy to configure and deploy.

The rendered widget appears in the browser as a simple select dropdown with options for all the language supported by Google Translate. When the user selects his desired target language, the widget is supposed to contact the Google Translate mother ship, translate the text on the page, and then add an fixed iframe panel at the top of the browser viewport, followed by the translation of the page. The translated page even implements onmouseover handlers for text-based elements that display the original source text. Sweet.

It has worked great for me in the past. But I recently did a new deployment and I was unable to get the widget to work. When I (as the user) selected my target language, I got the following:

Error: The server could not complete your request. Try again later.

A bit more poking showed that it was only happening in Firefox. All my other browsers were ok. Eventually, I narrowed it down to a conflict with the Flashblock extension. Disabling the extension solved the problem.

Now, the tough choice is to run without the Flashblock or without the Google Translate. But at least I can deploy for the customer.

2010-02-20 Update: The mere presence of the enabled Flashblock extension when visiting a page with the translate widget does not cause the problem. The issue only occurs when the page has Flash content and the extension is configured to block Flash on that page.

The reason: The widget appears to actually use Flash!

In the file

http://translate.googleapis.com/translate_static/js/element/main.js

the function wf() seems to add Flash embed code into the page. I imagine that Flashblock is detecting this attempted insertion and is doing its magic.

I actually find it interesting – and impressive – that the Flashblock extension is smart enough to not only find/block Flash content on initial page load, but also at any time after that. I imagine it monitors the DOM and is vigilantly swaps out any Flash embeddings with its own replacement button.

I can see that the widget creates several iframes, at least one of which has Flash content pulled from the domain translate.googleapis.com. It stands to reason – well, at least to me – that enabling Flash content for this domain should do the trick. But so far, no luck. ;-(

Man, InfusionSoft sure is not making things easy.

One of my customers recently moved to InfusionSoft for their CRM platform. They have a mailing that gets sent every morning to a list of opt-in subscribers. Prior to their move to InfusionSoft, we maintained our own database of subscribers. Now, we need to pull the recipients from the InfusionSoft database.

Fortunately, Infusionsoft offers an API to their data. It’s not the best API (as noted in Jon Gales scathing blog post), but it appears adequate, at least for this task. It’s an XML-RPC API, so the calls don’t technically require a dedicated client library, but InfusionSoft has helpfully developed one.

But it was a bit of a muddle trying to determine the current version of their released library and where to actually download it.

So I sent them a support request. And here’s the tricky part. Logged-in to the InfusionSoft admin interface, I see the following:

I click a link for “Help > View My Support Cases” and get sent to the “Fusebox”, whatever that is, where I am still logged in:

I click on the “Question” link and enter my question, complete with all detail that would probably be required by the Customer Support rep: account name, email, even a complete email signature, containing email address, snail-mail address, tel, etc.

I get my answer back pretty quickly. The answer itself is quite satisfactory, complete with the code I need to perform my little task. My application development proceeds in a straightforward manner, the API works as advertised. Kind of a pain to get there, but, for the most part, all cool in the end.

Or so I thought.

A few days later, I get an email message from the InfusionSoft system, the content of which is a comment from some random stranger, noting that he has the same problem as I have.

WTF? How did this totally random guy get access to my support request?

A bit of poking around and the truth begins to emerge from the fog: A Question is not the same as a Case. The latter is a customer support ticket, a confidential communication to the Customer Service folks at InfusionSoft. In contrast, a Question is apparently nothing more than an initial post on a forum thread. As such, a Question is completely public, exposed to essentially anyone (well, to anyone in the InfusionSoft community). Email, name, tel, InfusionSoft account name. Man, it’s just sheer luck that I hadn’t included my freakin’ password in my post.

Yikes!

So, I am now chasing InfusionSoft to get my post removed, or at least edited. We’ll see how that goes.

In hindsight, I can see that there is a link to “Cases” back on the main Fusebox page – it’s there in the screenshot above – which is undoubtedly what I should have used. And had I been more familiar with the Fusebox, I might have realized its dual nature, as a Forum/Community/KnowledgeBase (the Questions) on the one hand, combined with a confidential Ticket/Case system on the other, all built on the Helpstream platform.

But at the time, I totally missed it. It just never occurred to me that the Customer Support pathway I was pursuing, especially from a logged-in interface, would lead to posting in a public forum.

Would you have seen it? Let me know in the comments.

Cheers. And, let’s be careful out there.

2009-12-28, 22:00 – Update: Got a reply from the community manager, informing me that he has removed my post, per my request. He even sent along the text of my request, in case I did not have a copy of it. Very prompt, very satisfactory. All cool.

One of my customers gets this email today from his online forum system:

From: Idiot Russian Spammer [mailto:daniella.stolz@gmail.com]
Sent: Tuesday, October 27, 2009 12:08 AM
To: theforum@example.com
Subject: I am a forum spammer! Delete my account immediately!! Re: Welcome
to MyForum!

This email address was created solely to register automatically at
thousands of forums for the purposes of spamming forums like yours.
Remove my account and any other account registered with my email
address, and strongly consider strengthening your forum’s password
requirements.

Sincerely,

A Random Digilante Who Is Sick Of Forum Spammers

Gotta admire the guy’s honesty, eh?

It appears that the bot posts a registration request to the forum, then waits for a verify-email-address message sent from the forum. Then an auto-responder on the email address he provided (in this case, daniella.stolz@gmail.com) sends the message above.

The bot seems to be active and from China.

Despite the fact that the message chastises the forum for its weak security, it’s not as bad as it seems.

Sure, a CAPTCHA or some other token-based system or even a call to the Akismet service would probably have prevented this. But at least in my example, the bot had not yet verified its email address by visiting the verification link we provide, which is required before the user can post.

Still, it sounds like it would be a pretty modest modification to make to the bot – rather than a mere auto-responder: he simply pipes the incoming message to a processing script that looks for links to “click”. But that would not be available on a gmail address; he’d probably have to host someplace. But that location would then represent a decent hook on which forums could ban access.

So it seems to be a cute novelty, an annoyance. Still, the advice it gives is worthwhile. Never hurts to employ better spambot detection.

Working on a customer’s hosting account today and had to login at the hosting admin panel, something like the following:

https://www.mycustomer.com:2222/

Turns out that the host uses a shared SSL certificate, tied to the hosting company’s domain, not to the domains hosted by the hosting company. Whew, that’s a mouthful of pebbles. Got all that?

OK, so who cares?

Well, my version of Firefox (3.5.3) has default settings that require the domain on the certificate to match the domain name on the request. Firefox then spits out the error:

https://www.mycustomer.com:2222/ uses an invalid security certificate.

The certificate is only valid for <a id=”cert_domain_link” title=”thehostingcompany.com”>thehostingcompany.com</a>

ssl_error_bad_cert_domain

In this case, I was pretty certain that the domain I was visiting was the one I wanted, so I was prepared to push through the issue, provided Firefox would let me. The technique for this is to create an Exception to Firefox’s security policy.

In Firefox 3.5, do the following:

Tools -> Options -> Advanced -> Encryption -> View Certificates -> Servers -> Add exception.

Then enter the url you were trying to accesss. In my example above it was “https://www.mycustomer.com:2222/”

The new page should now be accessible.

Hope it helps!

On one of my ongoing web projects, we have forms that require users to specify a date. The input field is a single text field with an expected format (as opposed to a trio of selectors corresponding to day, month, and year). On form submit, we perform server-side validation. All straightforward stuff.

In the spirit of progressive enhancement – or graceful degradation, depending upon whether you see your glasses as half-full or half-empty – we add some client-side enhancements.

The first bit of client-side enhancement is just validation on the expected format. Nothing special here. The second bit is a date picker with which to easily select dates.

Better, stronger, faster

In the first round of development, we used a popup window containing a server-generated HTML page, as is done in phpMyAdmin. It worked fine for a while but there were several downsides to our particular implementation:

• As a popup, it was subject to possible blocking
• As server-generated content, it was a bit slow, especially on our internet connections here in Thailand
• The javascript was inline, not unobtrusive. Not a capital offense, but one that still irked me.

Also, it was more than a bit old-fashioned. I mean, it’s like wearing your grandpa’s sweater: it may keep you warm, but it sure as heck ain’t gonna impress Mary Lou the cheerleader down at the soda shop.

With all the new javascript libraries, especially jQuery, it seemed high time to move into – or at least closer to – the modern era. So we deployed the Datepicker plugin from the jQuery UI package, enabled a little animation effect, and it’s pretty nice. Fast, clean, unobtrusive. Steve Austin would be proud.

The best part of it is ease of use: For any fields to which we want to bind a datepicker, we simply give that field a particular CSS class. So we could have HTML markup of the form:

<input type="text" name="mydate" id="mydate" class="dp">

and then we bind a datepicker to it with javascript code as follows:

(function($){
    $(document).ready(function(){
        $('.dp').datepicker();
    });
})(jQuery);

Very sweet.

Companions: Checking-in and Checking-out together

But like all things web-related, that’s not the end of the story. Turns out that there are places on the site where two date input fields are related, paired as companions, typically in a check-in / check-out scenario, like booking a hotel room or a flight.

Certainly it is possible for these fields and their datepickers to function in a fully independent manner. If the user tries to check-put before he checks in, both the client-side and the server-side validation kick in to ensure data integrity.

But it is somewhat sub-optimal to even allow the user to select such a situation in the first place.

Even better, don’t you love it when you go to a site and after you select the check-in date, the check-out date automatically sets itself to the day after check-in?

Or, on the other side, don’t you hate when: you are booking a room or a flight way in the future, like next year; you select the first date, perhaps by navigating through a sequence of months, and then are forced to do the same thing on the second datepicker?

[Actually, it's probably the case that the user shouldn't even have to do this on the first datepicker, that in addition to prev-month and next-month navigation, the datepicker control should have its own selectors that allow the user to jump to a desired year and month. Good, full-featured, datepickers actually have this as well.]

The selection of the first date (the preceder) inherently puts a lower bound on the acceptable values for the second date (the succeeder). So why not bake that into the operation of the form?

And, this thinking works in the other direction, too. Suppose I chance the check-out date to sometime before the current check-in date? It seems reasonable that I should change the check-in date to be something before the check-out date, and the most reasonable choice is the day before check-out. If the user wants to push forward further than that, then he his certainly free to do so, but at least we put him in a reasonable ballpark.

Of course, all date changes do not warrant changing the companion. If I already have a reasonable check-in that precedes a check-out, and then I push back my check-out to a later date, there is certainly no need to change my check-in. Symmetrically, if I move my check-in forward to an earlier date, I certainly have no basis for concluding that the check-out should change.

So what I need is a way to pair these two input fields to each other so that a change in one can automatically create a change in the other, but only when it is appropriate to do so. And I’d like to handle it all with a single set of DRY handlers. And I’d like it to be valid HTML markup. And I’d like it to be completely unobtrusive.

Es posible? Si!

My Companion Approach

The jQuery Datepicker UI plugin has the option to set an onSelect callback option. That is, when a date is actually selected by the user in the datepicker, this function will be executed by the plugin. This is the key to the handling.

But we need some way to identify pairs, and especially which one is the preceder and which one is the succeeder.

I created a class naming scheme as follows.

Consider paired fields representing check-in and check-out:

<input type="text" name="mycheckin" id="mycheckin">
<input type="text" name="mycheckout" id="mycheckout">

As before, we want them to be bound to their own datepickers, so we add the class “dp” yielding:

<input type="text" name="mycheckin" id="mycheckin" class="dp">
<input type="text" name="mycheckout" id="mycheckout" class="dp">

Now, we want to specify that mycheckin is a preceder, bound to the succeeder mycheckout. And vice versa. So, I add classes as follows:

<input type="text" name="mycheckin" id="mycheckin" class="dp dp_1_mycheckout">
<input type="text" name="mycheckout" id="mycheckout" class="dp dp_2_mycheckin">

The 1 and the 2 represent flags to help determine which is a preceder and which is a succeeder.

The part trailing the numeric preceder/succeeder flags is the object id of the companion.

Then I define a bunch of helper functions to:

• parse the class names to extract this information
• detect when a change in one actually warrants a change in the other
• add/subtract a day from a user selected date
• output dates in the desired format

and then use all these helpers in the single DRY datepicker onSelect handler.

Aaaah, sweet success.

If I get a chance – or an overwhelming deluge of requests – I’ll post some sample code in more detail.

Clients love HTML email.

Done correctly, it looks slick as all get-out; it prompts users to action; it drives traffic for a special promotion; presents an exciting, professional image; lifts you aloft and floats you to heaven. All with higher response/action rates than plain-text email messages.

However, as every web developer knows, doing it well is a nightmare. Design/layout is the easy part; the sticky parts are numerous. Different email clients render HTML email with, shall we say, somewhat uneven support for web standards that are increasingly respected in modern browsers. Further, many email clients come configured with default settings to that disable images, adding another factor to consider. Finally – well, not finally, but the list of issues feels effectively endless – HTML email is often used by spammers, so there are more complicated considerations associated to ensuring that your messages do not get incorrectly tagged as spam.

There is a growing body of best-practices that has slowly developed for HTML email. These practices are not “best” in the sense that they represent elegant, flexible coding philosophies (like DRY, OO, for example) or minimal load times or optimized development practices. Rather, these ideas are considered best-practices, IMHO, merely in the sense that they “work”: they offer the best chance that your message will be received by the intended recipient and be reasonably well-rendered when he views it.

These best-practices include foregoing all the techniques we learned for creating semantic markup that cleanly separates content from presentation using CSS; instead, we are told to use tables for layout. We should no longer refer to styles in an external style sheet since most email clients – especially web-based ones like Hotmail, Yahoo, and Gmail – will strip them out; rather, we should use inline styling, repeating style information on nearly every element that needs it, inducing bloat and making modifications a tedious search-and-replace activity rather than a simple change in a single style declaration.

Other best-practice resources often conclude by pointing to Campaign Monitor or MailChimp and advising readers to download their free templates and use them as directly or as a starting point for editing or even as a guide to these best-practices. Both sites claim that their templates have been tested to render fine in all major clients.

Now, Campaign Monitor is great. These guys are founders of the Email Standards Project. I totally support the idea that someone should be pushing email clients towards better support of web standards, especially CSS support. The first step in that direction is measuring and evaluating the current support. And their chart of CSS support in major mail clients is a tremendous resource.

But the first template I downloaded from CampaignMonitor violates a bunch of these best practices right off the bat and fails to render correctly in Gmail. The template has nearly all of its styling inside a <style> tag inside the page’s <head> section. CampaignMonitor’s own CSS support guide referenced above notes that such an approach will not work with Gmail, yet their template includes it and claims to render fine.

Gotta tell ya, I’m a bit disappointed.