Dillion Megida

4 Tips for Writing Good Codes

Dillion Megida's photo
Dillion Megida
·

0 min read

Since I started learning Web Design, when practicing, my only aim was to get my desired result. If I wanted my image to be larger, or my links to be colored pink, I'll just play with the stylesheet. After leaving my code for a while or more, going back would be hectic as the codes appear as though written by someone else.

Benefits of Good Codes.

  • As mentioned above, for easy access to the codes. This is regarding the designer. Easy access in the sense that;

    • Locations of specific codes written to perform a function can be easily found. Good codes play its best here especially in a scenario of long lines of code. In such a case, a search action (provided by the editor used) can be useful.
    • The designer can remember the purposes of the codes written.

  • Files can be easily located.

  • For accessibility purposes. It would be no news to us that Web Designs are not for specific people, but rather, everyone. If it were to be for specific people, then there wouldn't be a need for globalizing the website.

Tips for writing good codes

I'd be mentioning four (4) tips for maintaining a good coding system. They may not be too common, but I experienced them in my own little web design journey, and I hope you'd find some of them useful.

1. Folders for storing files.

It is a bad habit to have all files (stylesheets, scripting files, main files, etc) in just one directory. For instance, imagine a directory such as; demo with files namely, style.css, index.html, dillion.jpg, linking these files would be undeniably easy as all you have to do is call out the name of the file, i.e

<!-- In the index.html file -->
<link rel='stylesheet' href='style.css' type='text/css'>
....
<img src='dillion.jpg'>

But, imagine a case where numerous files are involved (stylesheets mixed with scripting files and html files in just a directory), it would definitely be difficult locating a file you want to edit.

Hence, an example whereby demo as a directory containing subdirectories: CSS (containing CSS files such as style.css), js (containing javascript files such as script.js) with the index file (index.html) is advisable. Linking the index.html file and style.css file would be;

<!-- Index file -->
<link rel='stylesheet' type='text/css' href='css/style.css'>

P.S: The subdirectory which every file belongs to must be known for linking the file.

With this arrangement, locating CSS files would be quite easy despite the numerous files involved for a website.

There are some common (and sometimes, complex) standards of organizing files but the choice is yours. The aim is to organize your files.

2. Arrangement of Codes

Having gotten easy access to desired locations of your codes, the arrangement also matters. Compare this;

<!-- First demo -->
<html>
<head>
<title>Dillion's Page</title>
</head>
<body>
<h1>Normal Title</h1>
<img src='demo.png' width='100px' height='300px'>
<script src='script.js'></script> 
</body>
</html>

and this;

<!-- Second demo-->
<html>
    <head>
        <title>Dillion's Page</title>
    </head>
    <body>
        <h1>Normal Title</h1>
        <img src='demo.png' width='100px' height='300px'>
        <script src='script.js'></script> 
    </body>
</html>

This refers to indenting your codes. Obviously, second demo is more arranged, as end tags can be easily located. You can easily know where the `<body> tag ended and so on.

3. Comments

<!-- I am a comment, so powerful, but the browser keeps ignoring me :( -->

You must have seen me use this before in previous codes. They are called comments. Different programming languages have their syntax for comments so be careful not to mix them. As the comment has said, the browser (or rather compiler, I'm regarding web design more often) ignores it. It is only displayed in the file but not viewable on the website.

They are found useful when you want to know the functions of specific parts of your code. They are also used for documentation.

<script>
    let a = 5;
    let b = 6;
    let total = a+b;
    // Right here, i printed the value of total
    console.log(total); // 11
</script>

Read more about comments here.

4. Accessibility Purposes.

As I earlier said, websites are meant to be accessible by everyone. I won't be writing much on this as accessibility is an article on it's own. But, I'd be sharing links. Two items under accessibility I'd mention are,

  • alt in image tags (in HTML) 

      <img src='ball.jpg' alt='a green volleyball'>
    • DO NOT leave your image tags without alternative texts (alt attribute) except it be found irrelevant. You can read more about it here

  • title in anchor tags (in HTML) Your link texts may not be long, thereby not descriptive enough, but with the title attribute, you can describe what the target of a link is about.

      <a href='https://www.google.com' title='The website with  everything'>

    Most designers ignore this, but i find it a helpful function. Read more on accessibility here.

Thanks for reading. I hope you found one or two of these tips useful. Feel free to make corrections in the comment section or add your own tips.

Web DesignAccessibilitycoding