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.

Some important and yet simple tips that can get lost over time: (In no particular order)

1. Ensure every code path closes your database connection
2. Log all errors and review your error logs on a periodic basis
3. Comment all code - It’s easier to remove excessive comments than to try and understand someone else’s code
4. Write out the process in SUDO code before you start to ensure you’ve covered off all the necessary functionality
5. Have another developer review your code - in 5 minutes another developer can sanity check your code
6. Document complicated code in a WIKI or some other type of developer resource
7. Break down complex problems into smaller issues that are easier to digest - if necessary repeat
8. Always assume the user will do unexpected things
9. For larger development ensure database design and specifications are tackled first
10. Never be embarrassed to ask other developers for help, all to often developers try to solve a problem that one of their colleagues have already successfully resolved
11. Google is your friend, use it
12. And most important, get up and go for a walk, stretch your legs and get the blood flowing when you’re trying to solve a difficult problem or when you’ve just been working for hours on end

If you have some great tips feel free to post a comment below.

Adobe Air 1.0 was recently released and developers should put their lunch break or some downtime to reviewing this latest software release from Adobe. While Adobe Air requires a download so users can utilize the software - it provides an added bonus of Flash that could have some developers quite excited. With Adobe Air you can develop rich desktop applications that utilize web based data systems. This type of technology is perfect for people like real estate agents, sales representatives or anyone else who might find it useful to work in an offline/online mode. Some downsides to this software package are the current lack of support for Linux, but good news for Linux users and enthusiasts alike as Adobe has committed to releasing the software on the Linux platform by the end of 2008. I highly recommend any developer takes five minutes out of their day to review this technology and keep it in mind with future projects.

If you have any good Adobe Air development sites, articles or tips feel free to post them below in the comments.

If completing a tasks takes you 29minutes this year. Next year it should take you at least a couple minutes less. Sometimes all you need to enhance your efficiencies and save yourself time at the end of the day is to learn how to properly use the tools you’ve already have installed. There is a great article over at sixrevisions.com with 9 practical ways to enhance your web development by using the Firefox web developer extension. Most if not all web developers already have this extension installed and likely use it on a daily basis. One tip that the article brought to light is a great piece of functionality is ‘Tools->View Report’ to see how your website performs from an optimization standpoint.

Click here to read the full article and hopefully save yourself some valuable time.

A colleague recently pointed out a great article about the difference between “IS NULL” and “= NULL” over at http://www.sqlservercentral.com.

Often small details in syntax can be overlooked causing unintended results or nonfunctional code. It’s very important when working with any language that you consult available help documentation whenever necessary.

Any developer who works with SQL will want to understand the important differences between “IS NULL” and “= NULL”.

“= NULL” is an expression of value. Meaning, if the variable has been set and memory created for the storage of data it has a value. A variable can in fact be set to NULL which means the data value of the objects is unknown.

Now “IS NULL” is a little trickier and is the preferred method for evaluating the condition of a variable being NULL. When you use the “IS NULL” clause, it checks both the address of the variable and the data within the variable as being unknown.

Click here to see the full article to better understand the difference between IS NULL and = NULL.

When I first heard that MySQL, the open source database provider had been purchased by Sun, my immediate response was one of dread. The perception of a merger aquisition seems to be a negative one when in reference to open source. The fear of course is that great software that we’ve been using for free is suddenly going to become proprietary and closed.

I read the announcement from both the MySQL homepage as well as Jonathan Schwartz’ (CEO of SUN) comments on his own blog. There were a couple things that caught my eye and thought I would comment on.

In Jonathan’s article he re-iterated a number of times Sun’s commitment to open source. It’s interesting to note that Sun is one of the few companies rising out of the personal computer boom of the early 1980s to be able to adjust to the current state of technology and software. They have struggled since the bubble burst in 2001 to stand as a hardware company alone. Sun seems to have realized that in order to provide complete solutions to their clients they needed to become far more service oriented.

The idea of providing services is proving to be far more solid of a business model than just a hardware or software company alone. It really just about emphasis. Microsoft runs a similar business, however the focus is on the software. Microsoft makes money by selling software and then providing services at further cost. Sun however is banking on the fact that companies would rather pay exclusively for services to make the software work.

Sun now has licensed a number of it’s products under the GPL and made them available open source. StarOffice was acquired from StarDivision and released open source as OpenOffice, the Lustre shared disk file system and even their longtime operation system Solaris has become open source.

The success of this merger is going to be dependent on how Sun relates to the open source community in the future. Keeping it’s place as an advocate and support will help it grow into the primary source of services for enterprise level applications. However if Sun decides to begin taking a heavy handed approach, an ego based insistence that the name Sun Microsystems be plastered high and low as the only provider, then they will not excel.

SAJM (Solaris, Apache, Java, MySQL) or whatever the acronym ends up being will become a new standard only if the open source community decides it, much the way LAMP (Linux, Apache, MySQL, PHP) became such. But the first hint of Microsoft heavy handed tactics will put Sun back in the “proprietary” camp and left out of the open source “tree-house”.

If your a developer at heart and trying to make your own website without the help of your talented designer(s) then sometimes just getting some inspiration is all you need to get started.

Now that you have an idea - you need the right resources to get the picture in your head expressed by utilizing HTML and CSS.

It’s very important when creating a website that you start out with a visual idea, then a plain HTML page that uses CSS to express your idea.   Once you have a your HTML page with valid CSS you can use your programming knowledge to create tools and features that drive your site.

Working with CSS can be a difficult task if you don’t have a vast amount of experience.  For some inspiration and great CSS help checkout this collection of useful websites:

Some of the best CSS resources on the web