The concept of Beautiful Code

Post Reply New Topic

When beginning to program it is important to know the Beautiful Code concept. This is a new concept that was introduced a couple years back.
Beautiful code is having you lines of code organised first of all, and to have a proper pattern in your code, kind of like a poem. Here is and example in JavaScript :

CL=new Array('#ff0000','#00ff00','#ffffff','#ff00ff','#ffa500','#ffff00','#00ff00','#ffffff','#ff00ff')
CL2=new Array('#ffa500','#00ff00','#FFAAFF','#fff000','#fffffF')
Xpos=130;
Ypos=130;
I='#00ff00';
C=0;
S=5;
H=null;
W=null;
Y=null;
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
A=14;
E=120;
L=null;
if (NS4){
for (i=0; i < A; i++)
document.write('<LAYER NAME="nsstars'+i+'" TOP=0 LEFT=0 BGCOLOR='+I+' CLIP="0,0,2,2"></LAYER>');
}
if (NS6){
window.document.body.style.overflow='hidden';
for (i=0; i < A; i++)
document.write('<div id="ns6stars'+i+'" style="position:absolute;top:0px;left:0px;height:2px;width:2px;font-size:2px;background:'+I+'"></div>');
}
if (IE4){
document.write('<div id="ie" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < A; i++)
document.write('<div id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:'+I+';font-size:2px"></div>');
document.write('</div></div>');
}
function Fireworks(){
H=(NS4||NS6)?window.innerHeight:window.document.body.clientHeight;
W=(NS4||NS6)?window.innerWidth:window.document.body.clientWidth;
Y=(NS4||NS6)?window.pageYOffset:window.document.body.scrollTop;
for (i=0; i < A; i++){
if (IE4)L=iestars[i].style;
if (NS4)L=document.layers["nsstars"+i];
if (NS6)L=document.getElementById("ns6stars"+i).style;
var F = CL[Math.floor(Math.random()*CL.length)];
var RS=Math.round(Math.random()*2);
L.top = Ypos + E*Math.sin((C+i*5)/3)*Math.sin(C/100)
L.left= Xpos + E*Math.cos((C+i*5)/3)*Math.sin(C/100)
if (C < 110){
if (NS4){L.bgColor=I;L.clip.width=1;L.clip.height=1}
if (IE4||document.getElementById)
{L.background=I;L.width=1;L.height=1;L.fontSize=1}
}
else{
if (NS4){L.bgColor=F;L.clip.width=RS;L.clip.height=RS}
if (IE4||document.getElementById){L.background=F;L.width=RS;L.height=RS;L.fontSize=RS}
}
}
if (C > 220){
C=0;
var NC = CL2[Math.floor(Math.random()*CL2.length)];
I=NC;
E=Math.round(100+Math.random()*90);
Ypos = E+Math.round(Math.random()*(H-(E*2.2)))+Y;
Xpos = E+Math.round(Math.random()*(W-(E*2.2)));
}
C+=S;
setTimeout("Fireworks()",10);
}
Fireworks();
// -->

As you can see in that example the HTML is separated every line you make and every opening and closing tag line up. This makes it easy for an other programmer to understand as well with the computer. Also you need you code to be short and concise. One big reason is if you have a long line of code you can't find anything is that line because it is so extended and long. Its not all only t=just organising the code but it is looking a the artistic side of the code and understanding it.

If you do not understand this concept don't be afraid to ask questions!

Nothing new here. This is a rehash of the concepts taught in languages like Pascal, Modula 2, and Oberon (to say nothing of Quick Basic and Visual Basic) some 30 years ago.

I understand the concept of concise, efficient, and readable, but beauty is another matter and something that makes me think more of art or music. I know some people who feel that way about code, though. To me it's a tool.

Without proper indentation, code looks like dog sh*t.

ruveyn

If you want it to look beautiful, just use an external CSS document as opposed to inline CSS.

Years ago on a PDP-11 computer, I had to provide support for an accounting system purchased from a vendor. The code was well written but awfully hard to follow. I found that I could often make whatever minor changes were required much faster if I first completely reformatted the code to make it more legible.