Web 2.0 Entrepreneur

My preferred set of Web Development tools

• Posted by Tengku Zahasman on June 16th, 2007 filed in Web App Development, Softwares and Tools


• 30 Comments »
• (5,891 Views)

Most experienced developers usually have their own list of favorite tools to use when it comes to writing codes or do design works, database management, file management and all those stuffs. These are the tools that they normally install first hand whenever they get a new laptop or had to work on a different workstation. Different developers may have different sets of tools that they like to use. As of myself, I like to use tools that gives me less headache, increases productivity and speed, reasonable startup time, user-friendly, straight-forward, lightweight and at the same time very powerful.

Below are some of the favorite tools that I use when developing web applications:

1. XAMPP (Free - download)

XAMPP is a standalone server which bundles up all of the three major components for a convenient PHP development environment (an Apache webserver, a MySQL database management system, and PHP itself) into one installation. No longer do you need to install and manage each of them separately. No more wasting time on manual configurations. Starting up and shutting down of Apache or MySQL servers are only a click away and on only a single interface. That means less headache & speeds up productivity. You can get this free software at ApacheFriends.

(Note: There are many other “extra” components bundled together in XAMPP such as an FTP client, a mail server, PhpMyAdmin… etc.. but I have my own preferred tools for those stuffs which will be introduced later below)

2. Dreamweaver (Ain’t Free)

Even though I don’t use Dreamweaver a lot lately, it still is undoubtly a very powerful tool for developing websites. It is a pretty handy software to use especially when it comes to desinging the user-interface at the HTML level. I mainly use Dreamweaver for placing out layouts and generating tedious HTML/CSS codes. That also means less headache, faster development. But it’s not free.

3. Komodo Edit (Free - download)

Komodo Edit is a great IDE for many different types of languages. It supports PHP, Javascript, HTML, CSS, Ruby, Python… you name it. This is where I write most of my PHP codes. Even though it is free, it is still very powerful. It has many useful features like file tabbings, syntax highlighting, codes collapsing, error-checkings, tree-view files management, code auto-completion, drag-and-drop features, automatic indention, and many more. It makes coding fun. and it shortens the learning curve with their automatic code completion that allows us to quickly search for useful functions without needing to ask Mr Google so much.

The interface is nice and friendly. We can easily store our favorite code snippets and re-use it in other projects. It also has a project manager which allows easy management of different projects. That’s less headache, increase productivity, user-friendly and powerful. Download this free software at ActiveState.

4. Notepad++ (Free - download)

Notepad++ - This is what I call lightweight AND powerful at the same time. Notepad++ acts as a replacement for the default Notepad application you have on your Windows OS. Before I found Notepad++, I usually use the default Notepad to quickly squash bugs or when making tiny modifications to my codes. The reason is because Notepad starts up very fast. I don’t want to open up heavier programs like Dreamweaver or Komodo Edit and wait for 10 seconds startup just to add a few lines of code. But Notepads sucks because it doesn’t provide line numbers. Line numbers are important because that’s the thing we immediately look for when we receive an error/debug message (error messages usually return the line number where the problem occurs). After I found Notepad++, it becomes one of my favorite lightweight tool. It supports many languages, has syntax highlighting, automatic code indention, code collapsing, line numbers, and so many useful plugins, and yet it loads up as fast as the default Notepad. I use this tool mainly for doing quick code modifications or when I’m working on only a single file.

Get this free software at Notepad-Plus.

5. Fireworks (Ain’t free)

Fireworks - I think it is already clear from my other posts that I use Fireworks to draw most of my web graphics. From headers to buttons to layouts to sketches, Fireworks gets the job done with style. The reason why I pick Fireworks in opposed to Illustrator/Photoshop is obviously because of its startup time, its user-friendliness, and its practicality. While Photoshop is powerful, it loads up bad, exporting images is complex, and I just don’t like the idea of having floating toolbox, pallettes and layer windows everywhere like that. It’s uncomfortable. Firework’s interface is cleaner, I can easily dock its toolbars to the sides, it loads faster, exporting images is straight forward, and it’s powerful enough to create the most elegant web graphics you need. For production environment, Fireworks is the way to go. It has a great number of useful textures, symbols, brushes and plugins. Adobe Photoshop/Illustrator, in my sincere opinion, is only useful when creating hardcore graphics such as those people do for posters, flyers, mockups, t-shirt designs and stuffs like that.

6. UMLPad (Free - download)

UMLPad - A very lightweight CASE tool that I use for quickly planning out my web application in UML notations. Why I like this program is of course, its startup time and its simplicity. I like to plan my application beforehand, but I also make sure I don’t “overplan”. UMLPad supports only four diagrams - Class diagram, Sequence diagram, State diagram and Activity diagram. Very straight forward…. and that’s all I ever need!

You can get UMLPad free at Tiscali.it.

7. MySQL Control Center (Free - download)

MySQL Control Center - Don’t waste time writing SQL queries everytime you want to create database tables, modifying field names, or viewing records. Cut all the unnecessary work by using MySQL Control Center (MySQLCC) instead. This super-useful software provides a GUI for you to easily manage your MySQL databases without hassle (think MS Access). Although PHPMyAdmin that comes bundled with XAMPP can do the same, it’s not as simple-to-use as MySQLCC. And since PhpMyAdmin is web based, it’s more practical to use a desktop application when you’re developing on your local PC. It’s faster, it gets the job done quickly, and it reduces the headaches pretty much. It’s weird that such a good application like this is only known to a few…

Get MySQLCC at SourceForge. (Note: MySQLCC 0.9.4-beta is buggy. Download the latest one which is version 0.9.8-beta)

8. AceFTP (Free - download)

AceFTP3 - A very user-friendly FTP client for uploading/downloading files to/from your Internet server. There are many free FTP clients out there but most of them likes to use an interface that I find annoying and not as friendly. Other FTP clients like to use a tree-view for local files and a document-view for the server files. I hate that. AceFTP uses document-like view for both local and server files. Now that’s better. It loads up fast and it transfers are also very smooth.

Get AceFTP Freeware from Visicom Media.

There, the complete list of tools I use when developing web applications. Of course there are some other extra tools that I use for added quality like Flash, some Firefox plugins, but those are optional unless I really need them. Hope some of you find this list useful. If you have any other tools you like to use, feel free to share

Comparing Web Application development frameworks

• Posted by Tengku Zahasman on June 12th, 2007 filed in CakePHP, Web App Development


• 1 Comment »
• (820 Views)

This is an interesting video I found on Google video which shows a practical comparison between developing web apps using J2EE, Zope/Plone, Ruby on Rails, TurboGears and DJango, all of which are different application frameworks utilizing various programming/scripting languages like Java, Ruby and Python. Although I mainly build applications using PHP (recently adopting CakePHP as the framework), it’s also interesting to see how other developers develop web applications using different languages and frameworks. Afterall, since CakePHP’s structure is also based on Ruby on Rails, I watched the video by assuming RoR’s advantages/disadvantages to be that of CakePHP’s. If in case you don’t know why it’s better to adopt a Web Application framework instead of writing codes from scratch, here’s why.

Current web developers will certainly appreciate this. For those of you who’s not really into programming, at least this video will give you an idea how people write Web applications. It’s quite a lenghty video (around 40 minutes in total) so sit back, relax, and enjoy the show:

If you’re wondering which Web Application framework you should use, just ask yourself which programming language that you’re highly familiar with, find a framework that uses that language, read about it a bit, and then stick to it. Jumping from frameworks to frameworks will only bring you nowhere. For PHP developers, CakePHP or CodeIgniter are a few good options to look at

Create a Reflection effect using Fireworks in 5 simple steps

• Posted by Tengku Zahasman on June 10th, 2007 filed in Web Design, Fireworks, Tutorial


• 17 Comments »
• (9,165 Views)

One of the usual designs around Web 2.0 includes having texts or images to appear reflected as if they’re on a shiny-clean surface. Last month I provided some simple tips on creating a decent Web 2.0 logo (which applied the reflection technique) but since it wasn’t a tutorial post, I didn’t explain step by step of how to actually do it using an image editing tool. It ain’t that hard if you’re a fast learner…. only 5 steps to go through. But before we do anything, let’s see the example end result that we’re trying to create in this tutorial (btw, this tutorial uses Fireworks 8 as the image editing tool):

Looks good enough to you? Now let’s get started!

Step 1 : Write the text

Obviously you need *something* to apply the reflection effect to. So open up your Fireworks application and write some texts on the canvas (using the Text tool). It doesn’t matter what fonts or colour you wanna use, just get some texts on the canvas quickly.

Step 2 : Duplicate the text

We’re going to use the duplicated text as the reflection later. So if you’re wondering how to duplicate the text, here’s how: Copy and paste. Just select the text (use the Pointer tool) and then press CTRL+C (to copy) and CTRL+V (to paste). This will paste the very same text on top of the original text, so it’ll look as if nothing happened.

Step 3 : Flip the duplicated text vertically

This shouldn’t be painful. Just go to the toolbar menu and find Modify -> Transform -> Flip vertical.

By now you should see the original text behind the flipped duplicated one. It’ll look something like this:

Step 4 : Move the flipped text below the original text

Push the *downwards* arrow button on your keyboard until the flipped text is placed just below the original text.

Alright…. the reflection is now in place. What you need to do next is have the bottom part faded so that it looks more realistic… let’s proceed.

Final Step : Fade out the bottom part of the duplicated (and flipped) text

To do this is easy. There’s a build-in Fireworks command that can do the fade out for you. Simply go to the toolbar menu and click on Commands -> Creative -> Fade Image. A new dialog box will pop-up giving you options of where you want the image to be faded out; either top, bottom, sides, etc. We want to fade out the bottom part, so use some common sense and choose the right option

By doing that, the reflection is now faded out. If you find the reflection to be revealing too much, just drag the controller pane up a bit and adjust until you’re satisfied.

Done! Wasn’t that hard was it? Having this steps mastered adds you another graphic design skill that you can apply in many things (logos, menus, buttons, etc). Now go repeat everything again with different fonts and colours, add some gradients or anything so that you can remember the steps like the back of your hand.