How to Use Komodo Edit Features for HTML5 and CSS3 Programming

By Andy Harris

Komodo Edit is a great text editor for HTML5 and CSS3 programming.. This editor is extremely powerful, but is not quite as intimidating as some of the older tools. It has a modern streamlined interface, but more power than you might realize at first.

Komodo edit is actually the open-source cousin to a commercial Integrated Development Environment (IDE) called Komodo IDE. Komodo IDE costs hundreds of dollars, but Komodo Edit has almost as many features, and is entirely free.

Komodo Edit has a number of really intriguing features that make it stand out:

  • All the standard features: Komodo Edit has all the features necessary for a programmer’s editor, including syntax highlighting, line numbers, and saving in plain text format.

  • Code completion: A number of higher-end programmer’s editors have this feature, but it’s not as common in text editors. Here’s how it works: When you set up a page as HTML5 (by choosing from the menu on the bottom right), Komodo “watches” as you type and provides hints.

    image0.jpg

  • Multiple file support: Your first few web pages will be single documents, but most websites incorporate many pages. Komodo allows you to have several pages at once and to compare any two pages at the same time.

  • Page Preview: Just use to preview the current web page in a second tab. This is a quick way to see how your page is going.

  • Multiple language support: Web development requires a whole bunch of different languages. Komodo Edit is just as good at the languages you’ll be using as it is with HTML. Komodo has native support for HTML, CSS, JavaScript, PHP, MySQL and many more.

  • Multi-platform: It might not be a big deal to you right now, but Komodo works the same on all major operating systems – Windows, Mac, and Linux. This really matters in web development because you will encounter new operating systems in your web travels. Komodo can be used with all three major OS types.

  • Remote file support: Eventually, you’ll be posting your sites on a remote web server. Komodo makes it easy to edit a web page even when it’s not on your own machine!

  • Page templates: If you don’t remember exactly how to start a page, you can choose New ___ File from Template from the File menu to start a file with some starter code in it. Note that the HTML5 code provided with Komodo does not include everything the validator wants, but you can add features you want and save it as your own template (File ___ Save As ___ Template).

  • Code sample library: Komodo comes with a complete code sample library. To see it, pick View ___ Tabs and Sidebars___Toolbox. The toolbox contains a number of interesting tools. Choose from the tree structure and you’ll see several useful HTML snippets. You can double-click on any of these to add a code snippet directly to your page. This can be helpful when you don’t remember exactly how to type something.

  • Powerful macro system: As you spend more time with your editor, you’ll probably want to add custom features. The Macro and command feature is especially powerful. This system allows you to record a series of keystrokes and play them back. This is handy when you find yourself doing something repetitive. If you create a particularly good macro, you can save it for later reuse and even attach a keystroke.

  • Tools and commands: Explore the Tools panel to see some very useful tools that are installed by default. These tools are often used to send commands to the underlying operating system. You can use the tool system to view the contents of a particular directory, preview the current document in a specific browser, or pretty much anything you can do from the command line.

  • Extensions and add-ons: Komodo uses the same general architecture as the Firefox web browser. The developers of Komodo made it very easy to extend, so there are hundreds of really great add-ons you can install quite easily. After you have a feel for the stock version of Komodo, you may want to investigate some add-ons to make it even better.