Starting and completing Web development projects from scratch is simple and rewarding. As opposed to working in a WYSIWYG environment, your code will remain maintainable and much faster than the one generated by a point-and-click, drag-and-drop editor.
Creating cross-browser pages is not simple but doable. We should not strive to complete pixel-perfect solutions but we can create pages that look alike and work similarly in various browsers. Instead of using browser sniffing techniques, apply W3C standards and some basic rules I listed here, to avoid browser-specific inconveniences.
A simple HTML solution has been suggested for playing audio. This solution covers at least 90% of the users; those who use almost any browsers in Windows 2000 or XP. By adding a dozen lines of Javascript we can also reach the growing camp of users, who utilise other configurations, like Firefox in Unix/Linux or Safari in Mac OS.
This is a story about how I applied the craftsman's approach in a corporate project and developed a medium size app without fancy tools and commonly used resources. I prefer simple, open-source technology to proprietary. What works for small organizations may work for large ones, too. Don't use heavy artillery when a slingshot would do it.
Screen objects, like windows, frames, buttons are usually of rectangular shape. Do they poke your eyes? It's not too difficult to round the objects' corners. In five steps from pure HTML via CSS and JavaScript to a style-writing script, I'll show you the creation process of a reusable code that frames an object with rounded borders.
The suggested semi-graphical menu bar avoids lengthy opening of your Web page. The buttons have all the usual dynamics, such as change at mouse over, mouse out and click events. The number and size of applied images and the size of reusable code are very small regardless of the number of menu elements.
The content and the URL of a page do not necessarily correspond when the page is in a frame set. The following technique creates a mutual and unambiguous correspondence between the URL and the content. This way, a copied URL provides the same content as the original page.
Graphically composed texts are nice but they show up much slower than literal texts. A non-graphical technology is suggested for creating attractive letters with a dropped shadow. The solution saves design time as well as download time of the page.
This article introduces a technique for displaying info promptly at the time the mouse hovers over a Web object. If the object represents a link, The displayed info helps the user to decide if he/she wants to click on the object. This code is smaller and faster than that of the frequently used pop-up solutions.
A 10-minute cure to make it shorter or longer, depending on the demand. File size matters but extreme size reductions ruin readability. Find some tricks that make the size of an HTML / JavaScript file smaller and improve readability at the same time. Also, I'll draw attention to a common mistake in shortening conditional statements.
As the Developers' Bible says: "Thou shalt not leave loose ends in thy program." But are all those branches fixed that end with messages to the user? We don't eat half-baked bread. Why should we use half-baked programs? I'll show you some terrible problems of an expensive software.
Following standards helps us to create fast, maintainable cross-browser pages. Leading Web sites seem to be ignorant regarding the rules to obey. You can do better than them without taking XHTML classes. XHTML is just a cleaner and stricter HTML. Strict XHTML pages are rendered faster than loosely written HTML pages.
This article suggests tableless XHTML templates for layouts that many developers prefer: The content is placed in a fixed width column and centered horizontally in the window, no matter what the window size is. Another design also centers a short page vertically, or makes it fill the full height of the window.
The shift from free and open software to paid and proprietary products did not change the fact that they contain bugs. Some of them can be avoided by cautious programming techniques, others we have to live with. I show an undocumented one in Internet Explorer 6 that bugs me.
Once the industry accepted a non-standard element, like innerHTML, and it is better than the standard alternatives, its use can be justified. I show an object method and an object property that work in all modern browsers and are superior over the ones that have already been incorporated in the W3C document object model.
This article shows how to start the creation of a complex photo album site that requests minimal downloads from the server. Instead of loading several pages, requested updates take place on the client-side via dynamic changes of a single page. At the end of the series the reader will have a fully functional, cross-browser, fast and compact photo album application that does not even need a web server.
In preparation