Devit!

Drupal and Wordpress are two essential tools in any web developer’s backpack. Both open source content management systems allow the developer to rapidly design and build fully functional websites, however each has its own benefits for you and your client. Here are six questions to consider when deciding which one to use for a project.

Read the rest of this entry »

We recently had the opportunity to put a cool visual technique to use: Parallax. According to Wikipedia, Parallax scrolling is a “pseudo-3D technique, [where] background images move by the ‘camera’ slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion” [Parallax Scrolling on Wikipedia].

To see the effect in action, check out 1000 Acts of Kindness.

jQuery and the plugin ScrollTo were both used, along with several transparent PNG layers. By making “close” layers scroll faster than “far away” ones, a 3D feel was introduced to the page.

How it Works

For each layer we have a <div class=”layer”> element that has the following CSS properties:

.layer {

 height: 100%;

 width: 100%;

 overflow: hidden;

 position: absolute;

 top: 0;

}

.layer div {

 width: 10000px;

}

Each layer element has a <div> inside of it that has a transparent PNG background image, a forced height (the height of the image), and a really big width (as shown in the snippet above).

If we didn’t have the “overflow: hidden” on the containers, you would see scrollbars on the bottom of the page. Using this CSS property we hide the scrollbars, and later we will use the jQuery plugin ScrollTo to automatically scroll each layer.

For each layer I assign four distances, one for each “slide”. Closer layers have more difference between each distance, and far away layers only move a little. The following table shows the distances for each layer.

Layer
1st slide
2nd slide
3rd Slide
4th Slide




#clouds4
20
100
200
300


#clouds3
20
150
300
450


#clouds2
20
200
400
600


#clouds1
20
250
500
750


#fartrees
20
300
600
900


#neartrees
20
800
1600
2400

When the time comes (the user clicks on the “next slide” arrow), each layer is scrolled:

$("#clouds4").scrollTo(x, 500);

“x” is the distance determined by the table above, depending on what slide we are going to. The second parameter is how many milliseconds the animation will take.

Warning

Internet Explorer (even IE8!) renders transparent PNG’s differently than other browsers, and therefore the animation is a little choppy. To overcome this, I removed all overlapping layers in IE using conditional tags. That means that IE users won’t get the full effect, but the site is still usable, and there is still some parallax animation happening. For IE6 (yes, we still make sure our sites work in that dusty old thing) I replace the transparent PNG images with transparent GIFs.

For more information and a full tutorial on parallax scrolling, check out Anthony Comben’s post Create a Funky Parallax Background Effect Using jQuery on ThemeForest.

If you have any parallax scrolling projects, we’d love to check them out! Let us know in the comments.

Building on our experiences over the years we’ve developed a list of key tasks required to complete prior to developers writing a single line of code. We hope these tips will save you some time on your next project.

1. Review everything

When it comes to any project its important to review all the material that your sales team and project manager are handing you.  Make sure you take the time to sit in a quiet area and read through all of the material making notes as you go.

2. Ask Questions

Following up on the first task its very important to ask lots of questions.  Even if the answers to every question is a simple yes, never underestimate the importance of asking questions and clarifying your understanding of functionality.

3. Review proposed technology

Anytime someone makes a decision to use a specific technology to solve a problem its always useful to review the technology proposed and ensure there are no missed opportunities.  More often then not the person who is recommended the technology is doing so on tried and true past project successes.  This however does not mean that new cutting edge technology wouldn’t be a better fit.

4. Talk with your development team

Even if you deployed every piece of functionality on previous projects it’s important to talk through what your going to be doing at a high level with your development team.  It’s especially important to discuss functionality you’ve never deployed such as a twitter feed or other new technology solutions. Someone more often then not has a good idea to save you time, or recently solved a very time consuming problem with one of the technologies you’ll be deploying.

5. Plan your attack

Take the time to sit in a quiet area, think about how you’ll be developing this solution and then write it down!  We can’t stress this enough as to how important it is to document what will be done first, second and so on.  On top of that it’s important to have this information available to your project manager, after all he’s going to want reassurance you can hit and deliver on the clients time lines.  Try using a gantt chart to create your plan as this is a simple yet effective way to dip your toes into this process.

6. Review your plan

Remember that even if you’ve spent two hours or six hours planning out what you’ll be developing first and second and what you’ll be developing last it’s important to review this with the project manager.  They’ll be able to provide necessary feedback on concerns about client expectations and potentially bottlenecks you may not have considered.

7. Comp out functionality

At this point you should already have a design for your application however this design won’t illustrate every piece of functionality, and it’s not important to illustrate how a simple page will look before you get started.  Any functionality that isn’t 100% cut and dry should be laid out.  You can do this by hand, with many free layout tools or simply work with a designer to create rough composites that you can show to the client for sign-off.

8. Review everything with a team member

Take the time to review your plan and comps with another developer.  It’s always easier to have a mistake or suggestion pointed out to you know before your 50% down the project.  Have the other developer review your plan, your comps and talk him through everything so he understands what’s going to be developed without reading all of the information for the entire project.

9. Use pseudocode

Unless you’re the only developer in the world that doesn’t make mistakes or logic errors then this step is essentially for success.  Layout your functionality in pseudocode being as detailed as possible.  Overtime you’ll learn where details need to be very specific and where they can be a little less detailed.  This process will help you stop logic problems within your code every single time.

10. Start coding!

By putting some planning upfront you’ve just saved yourself lots pain and suffering moving forward.

Good luck – we hope this will save you some time and ensure things move smoothly for you on your next development project. Please share any tips you have for improving the development process in the comments.

When deploying a .NET web application with Crystal Reports you will need to install the appropriate crystal reports library on the server to use any reports you’ve built.

I recently ran into an issue where Crystal Reports Images (images in a report) would not show up on a new Windows 2003 Server.  After extensive web research with no solution in sight I decided to try to solve the problem on my own.

Note:  If you’re having problems with the images in the header bar (BusinessObjects toolbar) then please see this site below:
- http://www.gutgames.com/post/Crystal-Reports2c-issues2c-and-fixes.aspx
- or simply google “toolbar images for crystal reports not showing up”

To resolve my error I went into the Web Server(IIS) manager and performed the following steps:

1) Clicked on ‘My Website’ where I was using crystal reports
2) Clicked on ‘Handler Mappings’
3) On the right side under ‘Actions’ I selected ‘Add Managed Handler’
4) Request Path: CrystalImageHandler.aspx
5) Type: CrystalDecisions.Web.CrystalImageHandler, CrystalDecisions…….
6) Crystal Reports Image Handler
7) Press OK
Success!

I was able to track down this issue by looking at the URL for non-working images.  All pointed to the following:
http://www.MySite/CrystalImageHandler.aspx?*****useless info******

As you can see, the system is trying to access a handler to read out images specified in the report.

I hope this solution can save you hours of potentially wasted time and frustration.

Google recently rolled out Page Speed, an open-source Firefox/Firebug extension, allowing you to evaluate a site’s performance.

Read the rest of this entry »

Since 2006, our team has been supporting Kiva, a person-to-person micro-lending website that lets visitors help alleviate poverty by lending directly to unique entrepreneurs around the globe. It’s a great use of technology to help people, and it inspired me to create this neat little mashup.

Today we’re rolling out the first release of our Kiva/Google Maps mashup: NeedVision!

Similar to KivaWorld, NeedVision shows loans on a world map – but it’s much more! NeedVision allows you to search for available loans based on keywords and/or sector.

What’s more is that we’ve released the source code, so you can see how the Kiva and Google Maps API’s work, and how easy it is to create mashups like this.

Look forward to search caching and a mobile version in the near future!

Bugs? Comments? Feature requests? Put them in the comments below.

One thing that can be frustrating for any developer is when you run into a problem and despite millions of search results when searching for a resolution nothing seems to solve the issue.  I thought I would share some simple solutions to two very frustrating WSS issues we’ve run into this past year.

The first issue is intermittent 403 Forbidden errors on a WSS (Windows Sharepoint Services) site.  We were seeing  anonymous users in our test environment who couldn’t use the website at all until an admin logged in.  After someone had logged in then anyone could use the website with or without a login.  What ended up being the problem was a permissions issue on the bin folder for the website.  To fix this problem please follow the simple steps below.

1. Ensure all sub folders that are virtual directories on the site are using the same application pool as the root site.  (This didn’t help me as everything was set properly, however I read countless posts of this causing problems for others)
2. Add read access on the bin folder for the account IUSR.  (You don’t need to add read access to the files, which is somewhat confusing but none the less that protects the files from being downloaded)
3. Success!

If you have any other problems please post your questions/solutions below.

Continuing on, I also ran into a strange DCOM error popping up in Eventlog on most of our servers with WSS sites running.  The error looks like this…

The application-specific permission settings do not grant Local Activation permission for the COM Server application with CLSID {61738644-F196-11D0-9953-00C04FD919C1} to the user <serverName>\networkservice SID (S-1-5-21-<serviceSID>). This security permission can be modified using the Component Services administrative tool.

Needless to say, getting this error several hundred times a day in Eventlog is not ideal.  The resolution is rather simple but not overly easy to explain.  Please carefully follow the steps below.

1. Copy the GUID (In my case it was {61738644-F196-11D0-9953-00C04FD919C1})
2. Open the registry editor by running regedit
3. Click on ‘My Computer’ at the top then select Edit -> Find and Paste the Guid (remove the {})
4. You should see an application name in the right pane when the Guid is found – in my case this was “IIS WAMREG admin service”
5. Close the registry editor and open Component Services from Control Panel -> Administrative Tools
6. Expand Component Services, My Computer, DCOM Config and find the application name discovered above in step #4.
7. Right click on the the application name and select “Properties” then select the Security tab
8. The first block should be set to Customize – select edit on the right side.
9. Now add the service account (in my case this was network service) and add the appropriate access which in my case was “Local Activiation” (which you can see in the error above)
10. Success!

Please share this information as both of these errors can be both frustrating and a waste of time.

Good luck and happy coding!

Integration of wysiwyg editors into Drupal continues to evolve and we can expect to see even more improvements in Drupal 7. In Drupal 6, the TinyMCE module was discontinued and the WYSIWYG module has taken its place. The WYSIWYG module works as an api for integrating editors such as TinyMCE, FCKeditor, markItUp, NicEdit and Whizzywig.

One important feature that WYSIWYG lacks is the ability to exclude certain form fields. We ran into this issue when we wanted to disable wysiwyg formatting on the comments field. There had been suggestions here and here on the drupal forums about setting a #wysiwyg attribute; this we tried with no success. Another suggestion was to use the Better Formats module, but the thought of adding yet another module for something so simple wasn’t very appealing.

In the end, we ended up writing a small amount of code to achieve this. We added the following function to our custom module. What we’re doing here is removing the ‘format’ entirely from the comments field. If you needed to alter a different form, replace comment-form with the id of your form and comment_filter with your field. You may need to try a print_r($form_id) to find out the id of your form item.

function my_module_form_alter($form_id, &$form) {
  if ($form_id['#id'] == 'comment-form') {
    $form_id['comment_filter']['format'] = array();
  }
}

First Grab the latest copies of the following:

Apache (MSI with OpenSSL): http://httpd.apache.org/download.cgi
PHP Windows Binary (Zip Package): http://www.php.net/downloads.php
MySql Community Engine (MSI): http://dev.mysql.com/downloads/mysql/5.1.html#win32
MySql Tools (MSI): http://dev.mysql.com/downloads/gui-tools/5.0.html

Once you’ve downloaded the latest files follow these steps below:

1. Install Apache
   1. Network Domain: it doesn’t matter
   2. Server Name: it doesn’t matter
2. Unzip PHP into c:\php
3. Install MySql
4. Install MySql Tools
5. Create a folder c:\websites (or call it what you want)
6. Go to My Computer -> Right Click Properties -> Advanced -> Environment Variables
   1. Select Path -> Click Edit
   2. Add a ;c:\php on the end
7. Restart your computer!
8. Browse to the Apache Folder (Should be in Program Files\Apache Software Foundation\Apache
   1. Go into conf and open httpd.conf
   2. Change the following and Save
      1. ServerRoot (Should be set to your Apache folder – nothing should be changed here)
      2. Listen (In the event you want your Apache WebServer to not run at localhost:80 – you can specify a specific ip/port here
      3. In the LoadModule section you might want to enable rewriter_module (not necessary!)
      4. DocumentRoot "C:\websites"
      5. <Directory "C:\websites"> <– This is about ~15lines below the document root (REQUIRED CHANGE)
      6. Under the DirectoryIndex save yourself some time and add index.php after index.html with a space separating them
9. All Done making configuration changes to Apache
10. Copy the index.html file in htdocs to c:\websites
11. Click on the Apache Server Monitor in your TaskBar and restart Apache (if you have any problems check the logs folder in the Apache directory)
12. Open your Web Browser and Browse to http://localhost – You should see ‘It Works’
    1. If this failed to work – check the settings you’ve changed (typo’s will break things) also check the error logs in the apache\logs folder (Post any problems you can’t resolve in the comments)
13. Now that you have Apache working – lets get PHP working so you can start coding with php/mysql
14. Rename php.ini-distribution to php.ini
15. Open php.ini
16. Change the following and Save
    1. max_execution_time (Suggested for development to increase to 60)
    2. max_input_time (Suggested for development to increase to 120)
    3. memory_limit (Suggested for development to increase to 256M – great for any type of video conversion)
    4. error_reporting = E_ALL & ~E_NOTICE (Un-comment this and ensure other error_reporting lines are commented
    5. display_errors = On
    6. log_errors = On
    7. session.save_path = "c:\tmp"
    8. post_max_size = 16M (Suggested for development)
    9. doc_root = (You can leave this blank)
    10. extension_dir = "c:\php\ext" (Required)
    11. upload_max_filesize = 16M (Suggested for development)
    12. Un-comment the following extensions:
        1. extension=php_curl.dll
        2. extension=php_gd2.dll
        3. extension=php_mbstring.dll
        4. extension=php_mcrypt.dll
        5. extension=php_mssql.dll
        6. extension=php_mysql.dll
        7. extension=php_openssl.dll
    13. If you have access to an SMTP server configure SMTP
17. Re-open the httpd.conf for apache and add the following lines after the end of the LoadModule section
    1. LoadModule php5_module "C:/php/php5apache2_2.dll"
    2. AddType application/x-httpd-php .php
    3. PHPIniDir "C:/php"
18. Restart Apache
19. Create a file in c:\websites called test.php
20. Put <?php phpinfo(); ?> in the file and save
21. Access http://localhost/test.php
22. You should see a dump of all the information – All the extensions you’ve loaded above should have a section within the information displayed (If you can’t find mysql on the page for example then the .dll did not load properly – Verify your Environment Path variable (restart if you change it) and try again)
23. Don’t forget to look at your log files if you’re having problems – and if php says it can’t load a module that exists in a specific path then it’s likely an Environment Path issue.
24. Happy Coding!

We first got involved with Kiva in 2006. The agency runs a person-to-person micro-lending website that lets visitors help alleviate poverty by lending directly to unique entrepreneurs around the globe. The fantastic thing is, any investment that goes through Kiva is re-invested over and over. We initially invested over $1000, and those funds are still being reinvested to help more and more people become self-sufficient through small businesses. It’s a great model.

We have three $25 investment gift certificates, and we want your help choosing how to use them. To take part:

1. Reply to our tweet about Kiva (www.twitter.com/rtraction) saying that you want to take part.
2. We’ll send a $25 Kiva gift certificate to the first three respondents.
3. Visit www.kiva.org (withing 72 hours) and choose an entrepreneur or activity you want to support.
4. Tweet about your investment.
5. Monitor your investment over time and re-invest or withdraw your money.

** If you don’t use your gift certificate within 72 hours, it will be passed on to the next eligible contestant.