James Andres's blog

WorkAtPlay.com How It Was Made: The Slide Effect

July 17, 2009 - James Andres

The second installment in our "how it was made" series for WorkAtPlay.com. In the first part we covered flip and scale effect used on the home page. This post will dive into the slide effect used to navigate between site sections. Before we jump into the code, I was asked a few times why we didn't just use the jQuery ScrollTo to make the sliding effect.

How The Drupal Services Module Should Be Used

July 15, 2009 - James Andres

I'm embarrassed to say I haven't fully understood the services module, until now. I just found this great example of how the services module SHOULD be used. http://gregbosen.org/blog/drupal-services-php-xml-rpc-example and http://drupal.org/node/394364 Here's a summary in my own words:

• Web services should ALWAYS be accessed with a logged in user
• Create a special Drupal account just for web services, eg: a "services" or "amfphp" user.
• Create a special Drupal role called "Services" that your "services" user is a part of.
• Assign as little permissions as you can get away with to the Services role. This account should not be a "super-user" in case it becomes compromised.
• Now, for the fun part .... here's the CORRECT way to connect to your web services. It is a 2 step process:
  • Call the system.connect service. This services exists ONLY to give you a session token. It will return a "sessid" parameter.
  • Call the user.login service. Pass the "sessid" parameter you received from system.connect, in addition to the user name and password of your "services" user. user.login will return the UID of your "services" user, if successful.
• Finally, you are logged into Drupal as the services user! Call whatever services you want, don't forget to pass the "sessid" parameter each time.

Nonce's, and keys still apply. Learn more about those here: http://drupal.org/handbook/modules/services

Managing Taxonomy Exports with Drupal

June 18, 2009 - James Andres

Hi Drupalites, A recurring pain point in my Drupal development has been managing the vocabularies and terms in Drupal. I tried using the Taxonomy XML module, but found it much too complicated for everyday tasks. Without further hesitation I am proud to unveil Taxonomy Export!

What You Should Know About Drupal File Management

June 01, 2009 - James Andres

You should know...

How to manage javascript

• tip: jQuery plugins can be downloaded to sites/all/js for easier management
• tip: Custom plugins should be either attached to a custom module or custom theme. The choice is based on whether the plugin helps a module, or purely acts at the design layer.
  • eg: A plugin that adds DHTML UI elements for a block should live in the module that creates the block.
  • eg: A plugin that adds DHTML navigation for the site would reside in the theme

WorkAtPlay.com How It Was Made: The Flip and Scale Effect

May 29, 2009 - James Andres

There has been great reception to the Work at Play website design and effects. We have received several emails from intrepid geeks wondering how we pulled off all that cool jQuery eye-candy. After writing a few of these "how it was made" emails I think a blog post is in order. Without further delay, here is the behind the scenes story on WorkAtPlay.com!

The Flip and Scale Effect

On the WorkAtPlay.com homepage we use the jQuery Flip! plug-in in combination with some custom animations to give the "Flip & Scale" effect. This is a little more complicated than one might think, and deserves some explanation:

• User clicks on a work sample tile image.
• The click is caught using a standard jQuery $(elem).click() handler.
• Due to how the Flip! plug-in works it isn't possible to just flip the work sample tile directly. Instead we replace the tile with an empty div of the same colour and perform the flip on that new div. We call the new empty div the "flip_side" because it will actually become the flip-side of the work sample tile.
• The flip_side div is placed using absolute positioning directly on top of the work sample tile. The work sample tile is then hidden with CSS to keep it out of the way.
• Now, finally, the Flip! plug-in is triggered on the flip_side div.
• When the flip_side div is finished flipping the Flip! onEnd call-back is triggered. We use the onEnd call-back to insert the content for the work sample's "flipped side". This content is cleverly ready and waiting inside a hidden part of the original work sample tile (view source on the WorkAtPlay.com home-page to see for yourself). Oh, we insert the content with a basic $(flip_side).html(flip_content.html())
• Ok, so far we've got a div called flip_side that contains the right content. But it's still really small and the content is all scrunched up. How do we make it bigger? The scale effect is solved by the jQuery $(elem).animate() method plus some handy CSS positioning
• The tricky part of the scale effect is figuring out how big it should scale and to what X and Y pixel co-ordinates it should move to. This is accomplished by the following formulas:
  • flipped_side.top = $('#work-page .wrapper').offset().top
  • flipped_side.left = $('#work-page .wrapper').offset().left
  • flipped_side.width = $('#work-page .wrapper').width() + 1
  • flipped_side.height = Math.ceil($('.work-sample').length / NUM_WORK_SAMPLE_COLS) * $('.work-sample:first').height()
  jQuery handles the actual animation for us, awesome!

What You Should Know About Drupal's Development Only Modules

May 28, 2009 - James Andres

Development modules are great when you are building a Drupal deployment. But, there are a few things you should know. You should know ...

How to use devel to its full potential

• see: Devel Project on Drupal.org
• tip: Enable the devel block for quick access to developer features
• tip: Instead of writing code like var_export($node); use the dev render and dev load pages generated by devel. Just log in as admin visit a node and click the tab.
• tip: Unless you really need it ... don't bother with the query logging features of devel. You should turn on the Slow Query Log in MySQL to automatically discover queries that are slowing down your code.
• tip: Learn how to generate users and nodes using devel. It's REALLY handy and you can quickly create data that mimicks a production environment (Instead of nodes that just say 'test this' and 'test that')

How to use coder module

• tip: Validate your custom modules and themes often to ensure your syntax is Drupal standard.

Converting modules from 5.x to 6.x is not that hard with the deadwood module

• see: Deadwood Project on Drupal.org

How to ensure development modules NEVER make it to live

• tip: Use subversion hooks to delete, yes literally delete, the sites/all/modules/development directory every time you do a live release. This ensures that there is no way these modules can be enabled.

Anything to add?

What You Should Know About Drupal Update / Upgrade Management

May 26, 2009 - James Andres

Drupal should NOT be installed with the "downloaded and unzip" method.

• Check Drupal core out from CVS. See Moshe Weitzman's Drupal Best Practices
• The core "Update Status" module is a life saver. See the Update Status project homepage on Drupal.org - which is in core as of Drupal 6.x. Enable the email notification feature on all live sites, sit back and wait for your Drupal sites to tell you when they need an upgrade.
• Using the install_profile_api module is a great way to update/upgrade Drupal. Check out the Install Profile API project on Drupal.org
• Every change to the system should be done with a hook_update_N() See: http://www.tributemedia.com/blogs/james_glasgow/updating_drupal See: Updating tables: hook_update_N() functions See: Dark arts of Deploying Drupal by Drupal Guru Jeff Eaton

How to SEO a Drupal Website

April 12, 2009 - James Andres

Drupal, even with a vanilla install, is highly search engine optimized. However, there are several modules that can help you increase the search engine friendliness of any Drupal installation. And lets face it, search engine traffic is by far the cheapest, and is the most effective: When someone searches for something in Google, they are ALREADY in the so-called "marketing funnel". Without further delay, this is what Work at Play developers do when they amp up the SEO of Drupal.