One of the neat aspects of building websites is that you will eventually face the same challenge more than once. This means you’ll know exactly what to do next time. That is if you remember where and when you saw the question before.
How many times have you had to accomplish something and realized you’ve written a piece of code that would fit perfectly? Then, how often was that same piece nearly impossible to find?
This is a common challenge for web designers. That’s why it can be beneficial to write some basic project documents. By implementing such a system, you will have an easy way to save that bit of time.
Whether you’re working on a new project or looking at some past ones, here are some tips for documenting what you’ve done.
Comment on Your Code
This one seems a little obvious, but it’s not that important. When writing the code, it makes sense to add appropriate comments about what exactly it does.
Common practice includes writing a short narrative above each new function to explain its purpose and relevance. Also, by placing annotations in other important places within those functions we (and others who review our code) can better understand how everything is put together.
And this practice doesn’t just apply to complex languages like PHP or JavaScript. It is also perfect for CSS. Pointing out specific styles and where they are being used is great for finding exactly what you need.
It often feels like half the battle is just remembering why each line is there and what to do. Commentary can remove a lot of that ambiguity.
Create a Diary for Each Project
Depending on your personality, the mention of the word “diary” can be either extremely scary or extremely comforting. Either way, there is great value in the practice.
In this case, we are talking about a document that serves as a future project resource. If the website breaks or needs a new feature, this would be a place you can refer to for details on how things were configured.
Open a word processing document or go all out and create a Wiki on your local installation. It can be as detailed (or not) as you like. There are no hard and fast rules here.
For example, our design and development techniques change frequently. The approach you took a few years ago may not be the same as what you are doing today. Therefore, it is important to put various aspects of the process in writing.
Furthermore, even when using common systems and libraries, each website is a separate entity. Not sure where to start? See what makes the site different from others.
Note special templates you’ve created, specific code snippets, or styles. If you set up a unique server configuration, that’s also a great thing to document.
Maintain a Code Library of Codes
No need to reinvent the wheel when it comes to code. Much of what we write is infinitely reusable. Even if it doesn’t completely fit the needs of your new project, the right fragment can serve as a strong starting point for further customization.
However, organizing disparate bits of code can be a challenge. You could copy and paste useful bits into a document and retrieve them as needed. But for those who write a full of code, this could get out of hand quite quickly.
A GitHub repository could be a reasonable solution. It would allow you to categorize things and establish version control. You can even sync a store with another service so you can use or access it in different ways.
No matter how you put together a snippet library, you’ll want to develop some sort of system for tagging, categorizing, or otherwise labeling each snippet. For example, you might want to add things like the coding language used, the purpose, the relevant application (such as WordPress), or the library (React, Vue, Bootstrap). This will make finding what you need a much smoother process.
Encyclopedia of Your Work
Web designers love to build portfolios to showcase their work. But keeping track of projects internally is also a worthwhile endeavor. It can help you troubleshoot and build existing websites and provide solutions for new ones as well.
You can use any or all of the above techniques to organize things. The best part is that you can customize things as you see fit. Whether that’s through frantic note-taking or simple reminders, it will help you better understand the what, where, when and why of your web projects.
