Devit!

I was reading a recent study of some general statistics regarding web pages at www.websiteoptimization.com that helped confirm some feelings I was having with page load times. One of the conclusions this study came to was that the number of objects (images, external Javascript files, external CSS files, flash, etc…) has become the largest reason for load time delays.

The reason for this lies directly in the nature of an HTTP request. For each file the web page requests it has to make a round trip from the client to the server and back. Each time this happens there can be delays introduced.

There are a couple of simple ways we as web developers can look to solve this issue and keep load time swift.

1. CSS Sprites - This technique was perfected back in the days when video game consoles had limited memory. They ended up with little 16×16 pixel blocks with which to work in. Applying this technique to web page design we can combine similar images in the same file and use CSS to offset. This is most easily done with buttons or images of exactly the same size. Take a look at this technique for doing CSS sprite rollover menu buttons.
   
2. Combining CSS / Javascript files - For organizational purposes it usually makes sense to split Javascript and css files into separate files. However when it comes down to using that file in a web page, each file requires a separate HTTP request and therefore all the related overhead and delays. A simple solutions is to have a single file for Javascript and a single file for CSS. To take it a step further you could use server side includes to include the CSS and Javascript right into the main HTML file.

I first looked at this tool a number of months ago when it was still in alpha stage. The alpha version didn’t work too well…actually not at all for me.  Recently I noticed they were up to release candidate 1 so I decided to give it another try. I had high hopes as I have always found the ability to visualize a database design with all relationships a huge bonus. There are other tools to do this but I was excited to see what MySQL’s official rendition would be like.

I’ve only used it briefly but in my first run through I was impressed. I had an existing MySQL database structure that someone else had built but I was now working on. I knew the basic structure of the site but was having trouble understanding the different relationships between the tables.

At this point I should mention that MySQL Workbench has 2 versions. The first is the open source version which can be freely downloaded and used within GPL restrictions. The 2nd is a commercial version which brings some added functionality for a yearly subscription fee. Unless you’re dealing with enterprise level database design, the open source version should suffice.

I first had to export my database with the MySQL Administrator GUI tool’s backup function. This gave me a single script describing my entire database. Then I fed that file into the “Reverse Engineer MySQL create script” import feature of MySQL Workbench. After trying the “Autoplace object in new diagram” function once I determined it wasn’t really that useful as it just created a huge blob of tables.

Diagrams seem to be the most useful for me. You can create any number of diagrams in a project with different layouts of any of the tables. I decided to create a diagram that specifically showed the relationship of users and their associated data.

MySQL workbench just recently went into GA (General Availability) as a full release. This tool is essential for anyone does any level of database design with MySQL. Two thumbs up!

MPEG (pronounced M-peg), which stands for Moving Picture Experts Group, is the name of a family of standards used for coding audio-visual information (e.g., movies, video, music) in a digitally compressed format. FFMPEG is an opensource software video converter. YouTube uses FFMPEG, as do many other video and audio websites on the web. Simply put, FFMPEG gives you the ability to manipulate mpegs in many ways. FFMPEG has a vast array of options and can be very overwhelming. If you’re going to be working in a PHP environment then there are a few helpful tools out there to help you hit the road running.

First you’re going to need to install FFMPEG on your server. There are many resources for that and it should be relatively easy to find some examples and tutorials to get this process completed.

Once you get FFMPEG installed, you’re going to want to install the FFMPEG-PHP extension for php. This process is also fairly straight forward - if you’re having trouble you can use Google to help you resolve any issues. Unless you want to re-invent the wheel for a specific reason there is a great class wrapper called PHP Video Toolkit, which I suggest grabbing and using.

PHP Video Toolkit provides access to both FFMPEG and FLVTOOL2, which allows you to quickly and easily get to work on your video manipulation project. One note I’d like to add is if you run into a bug with liblamemp3 you can edit the Video Toolkit php section and change liblamemp3 to mp3 and that should resolve any problems. I also highly recommend reading through every example that comes with the PHP Video Toolkit as it should save you some additional time.

Remember the most important command when you get started is “print_r($videotoolkit->getLastCommand());“.

Some additional resources I found helpful:

1. ffmpeg-php google group
2. howto manipulate audio and video
3. man page for ffmpeg
4. rpms for ffmpeg

Recently rtraction worked with TechAlliance to put on a webchallenge for elementary and highschool students. We were able to see the very creative and impressive websites that students in both age groups were able to develop. The webchallenge was part of TechAlliance’s IT week, which has helped raise awareness of the world-class IT companies and resources that call London home. This experience remind us how we got into programming and we thought it would be valuable to share some tips to anyone who might be interested.

One great resource that lies right in the city of London is Bit By Bit computer camp. The summer camp is run at the University of Western Ontario in conjunction with their Computer Science Department. One of our developers attended this camp and had great experiences learning new things and meeting new people. (He actually went three years in a row to experience the beginner, intermediate and advanced levels)

Google recently launched a new initiative designed to help get people involved in programming. They have some great tools and resources available at http://code.google.com/edu.

If you have any other tips for young developers, or perhaps an adult who is looking to move into software development, feel free to share your comments with us below.