My Life on the Cloud

February 5th, 2010

I’ve really been marveling at the power of web-based applications recently. I wanted to share a few products that have helped my workflow. These products work for a general audience, but this post is focused on how they help developers and consultants.

Dropbox *

* This is my referral link, which gets me more space :) . If you’d rather be a big meanie, go to the main site instead.

I tend to rave about Dropbox. This one really embodies what a cloud-based service can be. They offer a no-nonsense free account with 2GB of space, and all their tools and functionality are free. You basically only pay for more space. The background app that keeps your folder in sync is fast and doesn’t take many resources. The web app can do pretty much any function that that native apps can, but they have native apps for nearly every platform, including iPhone and hopefully soon, Android.

One interesting thing about Dropbox is that, like git, it seems to use a secure hash to determine if it already has a copy of a file. If you put a common file in your folder, e.g. the .exe file of a portable app, it will almost instantly say the file is in sync, presumably because someone else has already uploaded it. It also uses rsync-like partial uploads to speed up the synchronization of small changes to large files. All in all, syncing seems to be as fast as possible.

How I Use It

This is a good place to put large client files like images and documents. The files are versioned and archived, so you get just enough version control for that purpose. And of course you have backups on any machine you’ve got synchronized, though you should always keep your own backups elsewhere, in case Dropbox goes wonky.

As I mentioned, I also keep all my portable apps on Dropbox in lieu of a flash drive. The background app is pretty good about not locking files, so you can safely run them right from your synchronized folder.

One of my favorite portable apps is Filezilla Portable, but I note one big caveat: I don’t keep my Filezilla settings on Dropbox. At least not in the default location. If you save passwords, the Site Manager file includes all of your authentication information in plain text. And since unlike Jungle Disk the files are not encrypted, this can be a pretty big security risk. But storing the usernames and passwords is so useful!

Here’s what I do: I have a truecrypt file sized at about 10 megs to keep sensitive files in, and I keep that on Dropbox. This holds my Filezilla settings, private keys, photos of me playing strip iterated prisoner’s dilemma, you get the idea. Since truecrypt limits changes to one virtual sector at a time, Dropbox has no problem syncing the file efficiently. After I mount the file to a drive, I can change the main Filezilla Portable .ini file to have it store the settings there. Voila! Instant encryption.

LastPass

Speaking of encryption, developers often have way more passwords to remember than the average body, and far more at stake if the password is weak or poorly protected. Previously I’d used a truecrypt file to store my passwords in text files, organized by client. This actually worked really well, but I’ve recently switched to LastPass. Why?

Security

Security is my #1 concern with a password manager, and I trusted truecrypt. I was wary of entrusting an online service to encrypt things well, but after reviewing the features and what others on the intarwebs were saying, the LastPass service earned my trust as well. They serve your password file so that it can be decrypted using Javascript, in-browser, so it’s both secure and always available, so that’s nice. But they also offer an on-screen keyboard, one-time passwords, and multi-factor authentication to provide more security when you need to log on from an untrusted computer. That’s harder to arrange with a simple truecrypt file, and you usually can’t run truecrypt on an untrusted computer.

Possibly the most helpful feature for developers on a team, though, is the ability to share passwords between LastPass users via public-key encryption. I’ve always hated putting passwords in email or even saying them out loud, but there was never the cultural support for using tools like PGP reliably. If your team can standardize on LastPass, sharing passwords is a snap.

Convenience

The icing on the cake for LastPass is the browser extensions, which are available for both Firefox and Chrome 4. The extensions replace the built in password manager and offer much more flexibility, particularly for when a login form requires more than just a username and password field — e.g. my library, which requires my card number as well.

ToodleDo

This online todo-list manager is another example of how to do a cloud-based service right. Just look at the list of ways of accessing your info. I don’t know if this is really particularly useful for developers, but it’s a great service, and they definitely are going in the right direction with their features.

With so much connector support, I imagine it would be possible to hook ToodleDo into an issue tracker somehow. That would really be the holy grail of individual task management for me.

How About You?

I really just stumbled on these products. One of the reasons I’m sharing this is to inspire you to tell me about apps you rely on. ARE YOU INSPIRED? Please post in the comments!

Posted in Code Akimbo | 1 Comment »

Add CSS classes for menu route aliases in Joomla!

January 21st, 2010

I often use css classes on the body tag to get a global style hook. Here’s some code that will allow you to target your style by menu item alias:

<?php
function getCssClassFromMenuPath($path_prefix='path_', $active_prefix='active_') {
    $class = "";

    $menu = &JSite::getMenu();
    $activeMenuItem = $menu->getActive();
    if (isset($activeMenuItem))
    {
        $activeMenuItemPath = $activeMenuItem->tree;

        $aliases = array();
        foreach ($activeMenuItemPath as $node_id) {
            $node = $menu->getItem($node_id);
            $aliases[] = $node->alias;
        }

        $class .= $path_prefix . join(' '.$path_prefix, $aliases);
        $class .= ' '.$active_prefix.$activeMenuItem->alias;
    }

    return $class;
}
?>

I put this on my body or html tag, but you can put it anywhere, of course:

<body class="<?php echo getCssClassFromMenuPath(); ?>">

And here are some styles you might use:

body.path_portfolio h2
{
    /* Applies to portfolio and it's child menu items */
    font-size: 1.5em;
}
body.active_portfolio h2
{
    /* Applies to the portfolio main page only. */
    /* Note, it's placed after to override the first style */
    font-size: 2em;
}

Thanks to snellcode for his help on this. See his code for more uses of this technique in Joomla.

Tags:
Posted in Uncategorized | No Comments »

Performance website tips: Consider your servers when structuring file layout

January 3rd, 2010

I’m sure all of you who write custom templates for CMSs like WordPress or Joomla! have a standard structure you use for your files. I recently made a performance push on a site I built, and ended up making a few changes to mine. Specifically, I put template files in subdirectories according to how they will be served. Read on to find out why.

In addition to putting CSS and JavaScript in the right places in your page and enabling file compression (these should be your first steps), serving static files from different domains can give lots of performance advantages, even if you use one server machine. It prevents the needless sending of large user cookies (users tend to have little upload bandwidth), it improves download pipelining, and it allows you to use a lightweight web server like nginx, without losing the flexibility of Apache for your main code.

Previously my template file structure looked something like this (e.g. a Joomla! template):

  • css
  • img
  • js
  • flash
  • audio
  • video
  • html <– Code Files
  • index.php
  • {other php files}

Yours probably looks similar; it’s how the core templates are structured. This works fine, but it needlessly complicates deploying static files to your static domain location; that is, WITHOUT the code files. You don’t want to serve your php source to haxx0rs, so you can’t just deploy the whole template directory. Your deployment scripts have to copying or sym-link each of the media directories separately. You may also need to do some code configuration to accommodate using the separate domain on your live site, but local files during development. I’ve used the ReReplacer Joomla! plugin for this task. But why set up rules for each of these subdirectories?

My default structure for CMS templates now simply moves the media directories down to a subdirectory called “static”. Even if I don’t plan to deploy to a static server at launch, I won’t have all those links to change if I later decide that I need it. To maintain this setup, I have to be diligent about keeping dynamic items out. For instance, I had a dynamic javascript combiner/versioning script in my JS folder that I had to move and retarget.

This is a small tip for the arsenal. I hope it saves you some time!

Posted in Uncategorized | No Comments »

Focus

October 30th, 2009

Topics I’m currently studying so that I can work: Kohana, Git, PHP unit testing, Vim, ASP.NET MVC, WordPress theming, Windows 7, Trac, Python, Django, Scrum, managing a freelance business, tax law, virtualization…

Now I just need to find the 20%, get my 80%, and go to sleep at some point.

Posted in Uncategorized | No Comments »

PHP Debugging in Vim on Windows

May 8th, 2009

I’ve recently switched my general purpose editor from Notepad++ to Vim. Notepad++ is still my favorite “traditional” editor, but I think Vim will serve me better in the long run. The switch has been an exciting and painful process so far, like all good things in life. I’ve now learned all of the editors in this comic and can verify that it’s spot-on.

Today I tackled another hurdle of my transition: PHP Debugging. When I first encountered PHP debugging through the DBGp plugin for Notepad++, I was thrilled, and I quickly came to rely on it. It’s especially useful for stepping through and exploring third-party PHP frameworks and applications. On my first major headache bug since I started vimming, I really missed this functionality and did a little Google search. I found several links pointing to Sam Ghods‘ script. It’s a great start, but it turns out this script is a no-go on Windows, at least as of this writing.

It took me way too long to find a proper solution, which is this revised script by Hadi Zeftin. Thanks, Hadi! I hope this post helps more people find your solution.

Tags: , , ,
Posted in Uncategorized | No Comments »

AJAX with PHP Buffers

April 10th, 2009

A year or so ago when I was working on the UCA redesign, I wanted to add AJAX loading to the home page’s tabbed content. I’d done AJAX in ASP.NET for quite a while, but this was my first time in PHP. Honestly, I found that moving out of the abstraction of ASP.NET AJAX refreshing, at least for this relatively simple purpose. I want to share that code and discuss a very nice feature of PHP that makes it easy: output buffers. They’re typically used in PHP templating systems to capture large pieces of HTML formatted content into variables. I’ll show you how they can also help the separation of concerns in presentation logic.

Adding AJAX to a website or application can improve a user’s experience, but it typically adds complexity to the coding process. For accessibility reasons, you can’t simply replace the old way with the new way. You need to make sure you offer a non-JavaScript option for accessing the information. This is part of the philosophy of Progressive Enhancement, which is central to the modern Web. More on that in a later post. To keep the increased complexity caused by Progressive Enhancement in check, we need AJAX code to be minimally intrusive.

With that in mind, we can start with the assumption that AJAX doesn’t exit. In this case, we just need to offer POURLs*, or Plain Old URLs that will be used in case the user has disabled JavaScript. Each tab setting must be addressable by a URL.

When the site works with JavaScript disabled, we need to decide on a URL syntax that causes only the unique HTML — the tab content — to be returned. In UCA’s case, we use a section identifier: “?ajsection=topic”. This gives us the option of choosing one of many sections of the page to return.

The simplest code to return the piece of content would be to put it in a function and use an if statement to filter it out:

<?php
if ($_GET['ajsection'] == 'topic') :
	printTabContent();
else:
	printFullPage();
endif;

This works, and is probably what you should do in some situations. But what if you have nested pieces of content that you want to AJAXify? What if you added complex logic and content surrounding this code? This method can end up pretty confusing. Content buffers can help keep the task at hand (returning specific pieces of content) separate from these other concerns.

First, we need the ability to stop the whole page from rendering when the URL specifies AJAX. Rather than starting with an if statement, we’ll just start a buffer for the whole page that we can later choose to throw away:

...

Next, choose a piece of content to be loaded via AJAX and capture it in a buffer. Buffers can be nested, but you need to have as many ob_end..() statements as you have ob_start() statements:


...AJAX section content...

Flushing the buffer lets the outer buffer have the full content of the page. If there is no AJAX request, it works just like it did before we started.

To separate the AJAX content, we’ll use the other buffer-closing option: ob_end_clean(). The following code runs after the full page has been rendered:

<?php
//Handle ajax section
if ($_GET['ajsection'] == 'topic')
{
	// kill buffered render for whole page
	ob_end_clean();
	// render topic section instead
	echo $ajsection['topic'];
}
else
{
	// Render entire page contents
	ob_end_flush();
}

To handle more pieces, you can change the logic in this one place.

* Pronounced like “pearls”, and yes, I did make that up just now. I would create an article on Wikipedia if this blog post met their “Reliable Source” guidelines. So picky.

Tags: ,
Posted in Uncategorized | No Comments »

Vote with your browser, wallet

April 2nd, 2009

Web developers are very aware of what I’m about to say. This is for managers, stakeholders and especially those who hold the purse-strings regarding websites and web applications. I appreciate the efforts of others to get this info out to the masses, but I wanted to do my part.

Read the rest of this entry »

Posted in Code Akimbo | No Comments »

Of the blind and sprained.

March 26th, 2009

Hi! Jeff here. I’m currently an independent Web developer, and my entries will be focused on the technical and not-so-technical aspects of software development.

I’m writing this while lying in bed at home after spraining, breaking, and/or (thesaurus: destroy…) extirpating my ankle while playing frisbee at lunch. I had intended to write my first post™ about the psychology of development.  How wonderful that I can now share an aspect of it that I’ve just learned for myself:

You can’t code in pain.

Of course, many people have disabilities that can’t be fixed by a few aspirin, some ice, and a nice soft bed. That’s why accessibility is so important in the websites and applications we create. It’s one of the revolutionary aspects of computers and the web that those with impaired vision or hearing, or even diseases like arthritis aren’t prevented from participating as they are in many other areas of their lives.  That is, they don’t HAVE to be.

Developers and content creators simply need to care, to inform themselves, and to put in the effort to make it possible. The businesses and organizations that back websites need to treat accessibility as non-negotiable, to pay for the ‘extra’ time it takes to make their sites accessible. And it is the developer’s responsibility to push back and inform their customers when requested features affect accessibility.

I’ll probably have several posts on accessibility in the future.  For now, I’m going to do my best to make sure that those with minor injuries to their extremities have full access to the content on our sites.  I’m on a mission.

Tags:
Posted in Code Akimbo | No Comments »