2.8: KISS and Creative Laziness™
Properly named files, images and folders: short, to the point, easy to remember and difficult to mess up. The authors of The Web Style Guide write: “Never use technical or numeric gibberish to name a component when a plain-language name will do.”
The KISS approach
KISS stands for “Keep It Simple, Stupid.” When you are setting up your production area and naming your folders and files, do not be creative. Use file names that tell you what the file is about. See the image above for examples.
A file or image name has two parts:
- The image name: dining_room
- The suffix: .jpg
- Together: dining_room.jpg
- The file name: about
- The suffix: .html
- Together: about.html
- Keep the names of HTML5 pages, images and folders as simple as possible.
- A one-word title is best, and the shorter the better.
- Wrong: mybeautifulpictureshow.html
- Right: gallery.html
- Use no punctuation or spaces other than the necessary period.
- Wrong: my fun-lovin' boy pal Justin.jpg
- Right: justin.jpg
- If you must use two words, use an underline (shift-hyphen), not a space:
- Wrong: hrazdan pan.jpg
- Use only lower-case letters in your file and folder names:
- Wrong: JUSTIN.JPG
- Right: justin.jpg
Creative laziness™: What a concept
The KISS Best Practices outlined above are part of Creative Laziness™. It is the admirable philosophy of finding the easiest and most efficient way to perform a task. When you use the KISS Best Practices, you make your job easier and less prone to mistakes.
The concept of Creative Laziness™ came from watching my father build houses. His overarching philosophy was to waste no motion, to move smoothly and efficiently without rushing, and to let the tools do the work. In this way, he worked steadily while conserving energy and reducing mistakes.
Here are a few basic principles of Creative Laziness™:
- Say hello to my little friends, copy and paste. If you have a piece of code that works well, such as a complex image tag, copy and paste it as needed elsewhere into your code, then adjust the picture name, width and other features.
- Never write the same page twice. In a complex website, every page will have common elements. The smart Web author writes the code for each of these elements, tests them until they work perfectly, then places them in a template that can be saved and resaved for multiple pages.
- Think modular. A module in design terms is a rectangle that holds related elements. Standard web designs have only three or four main modules: the header, the content, the optional sidebar and the footer. Each of these can be designed as stand-alone components, then copied into web pages as needed.
- Think modular, part deaux. A module also can mean several parts joined together that can be snapped into place as one unit. When you design your web pages, first design the perfect inside page, then copy it over and over as a template for other pages.
- Let your tools do the work. BBedit can automate many code-writing tasks, with no errors. But even a very simple text editor may have functions to make life easier. These might include:
When code writing gets you down, adopt the Zen mind.
- Search and replace. Mastering the search and replace function can save hours of time if you want to make a global change to a page. BBedit even allows you to make global changes on multiple pages.
- Soft wrap. This is called word wrap on some text editors. It folds the text into multiple lines rather than one long line of text. It makes writing code a lot easier.
- Auto format. This feature will organize your code into hierarchial format, showing nested tags with indentation.
- Spell check. You know how to use it, so use it.
- Thou shalt hack. Do not waste time reinventing the wheel. Many websites provide free “hacks,” pieces of code that perform special functions. For example, the drop-down menus on this page were downloaded from a website that offers free code. But you can go to far. Thou shalt hack does not mean:
- copying someone else’s website, inserting your own information and passing it off as your own work.
- downloading a ready-made template, inserting your own information and passing it off as your own work.
- Seek help and help others. Web design and code writing are best done as a collaborative process. Your classmates are a great resource. When you get stuck, don’t spend hours fretting. Relax and call for help.
- Adopt the Zen mind. When the code begins to look hopelessly tangled, when you can’t find that simple error, close your eyes for a few seconds and adopt what the Zen masters call the “no mind.” Empty your head, relax, then take another look. If that doesn’t help, see point No. 5 above.
Look for more creative laziness tips throughout the following pages and chapters.