Sandbox Development and Consulting Inc.

url:http://www.innovate-events.com

SDAC Inc. provided:

• XHTML/CSS programming
• Custom PHP programming
• Custom XML programming
• Custom Javasctipt programming
• Quickbase database

technologies used:

XHTML, CSS, PHP, XML, Javascript, Quickbase

front end:

The client needed a clean looking registration form along with a custom widget which would then display a “feed” of the applicant’s uploaded logos linked to the company web sites that could easily be dropped into any web site by adding a single line of javascript.

back end:

The form data needed to be validated and then stored in a Quickbase database. From there, I then created a custom XML report which I then parsed certain fields to then populate a custom drop in javascript widget. The widget then displayed a list of the ten most recent applicants’ logos linked to the company web sites.

lessons learned/random thoughts:

This was a great project. I learned quite a bit about parsing XML and Quickbase.

I recently created a site (in beta testing now) with Smooth Gallery and the client loved it.

The Problem:
The only issue was that upon the initial page load - all items in the gallery would flicker for a second or two while the first image loaded - causing this to not look professional at all.

The Solution:

1. HTML: I took the example code:
   PLAIN TEXT
   PHP:

   1. <div id="myGallery">
   2. <?php $featured_posts = get_posts('numberposts=5&order=DES&orderby=date&category=1');
   3. $i = 0;foreach( $featured_posts as $post ):
   4. setup_postdata($post);  $i++;?>
   5.    <div class="imageElement" id="element<?php echo $i;?>">
   6.       <h3>Item 1 Title</h3>
   7.       <p>Item 1 Description</p>
   8.       <a href="#" title="open image" class="open"></a>
   9.       <img src="images/brugges2006/1.jpg" class="full" />
   10.       <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
   11.    </div>
   12.  <?php endforeach; ?>
   13.  </div>

   I then added an ID to each div (id="element1") so that each div had a class of "imageElement" and a unique ID (element1, element2, etc).

2. CSS: Now that I had IDs to style, I added the following to my style sheet:
   PLAIN TEXT
   CSS:

   1. #element2 {display: none;}

By adding the 2 bits of code mentioned below, I was able to initially hide the content in the second div so that only the content in the first div appeared on page load. Once the script started running, it then changed the display from none to block automatically. Problem solved.

I have been busy the past three months working on a site optimization project for a startup company where the code had been written by 10+ programmers who had come and gone over the last year. That left a big site with lots of unused and crazy CSS, images, javascript, and nasty HTML structure. I approached this project with two stages in mind:

1. Start clean with CSS and XHTML. The first thing I did was unlink the main 5 thousand line CSS file along with a handful of others which was wreaking all kinds of havoc. I then went into every view, standardized the overall HTML structure (so it could hold it's own without any CSS), and then only added in the CSS that was used.
2. Maximize HTTP requests. The next phase will involve spriting images and pairing down and combining javascript so the number of HTTP requests goes way down.

The initial results:
Total HTTP Requests: 192
Total Size: 1353141 bytes

After the first stage (finished today), the general results:
Total HTTP Requests: 67
Total Size: 693064 bytes

After stage two is completed - I think I can get those numbers down by another half.

From Yahoo!:
"80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages."

Why does all this matter? Think of a big, busy site. Think about the number of users - and then multiply that by the number of requests as well as the size of each page load. If you want good performance from your site - the pay off from optimizing your site will really pay off. It is pretty easy to go through your site and cleanup small things that over time will really add up. Not using a javascript you once did? Remove it from the header. Redid the site but still have a link to the old CSS "just in case"? Get rid of it! Remember, a little goes a long way.

url: http://www.brandinstinct.com/blog/

SDAC Inc. provided:

• XHTML/CSS/Javascript programming
• WordPress theme customization

technologies used:

XHTML, CSS, WordPress , PHP, CSS

front end:

The client approached me with a table layout that they wanted turned into a CSS/XHTML layout for their company blog. I also re-created their javascript menu that was over 300 lines of code and reduced it down to only a few lines of javascript with some CSS.

back end:

This was a very straightforward build - no fancy functionality. There are only a few plugins that the client wanted and the theme is very lightweight and flexible for both pages and blog posts.

lessons learned/random thoughts:

Using Skype to communicate with overseas customers is great!

Need: A script that a client could easily call within a URL to force the users to agree to their terms of use before downloading a file.

Solution:Either put the following code in the header, or in a .js file to include:

Then, call this code in your HTML code by using: