Log in

View Full Version : Which Codings better.


Alexz0r
02-01-2009, 09:24 PM
Me and my friend (Turbocom) have recently been fighting over whos a better coder, I'm on Eliterates side because I know hes better, hes on iszaks.

CSS off of a Layout coded by izsak
html
{
border: none;
overflow: auto;
}

body
{
background-color: #e3e3db;
}

#container
{
width: 700px;
margin: 0 auto;
padding: 0 6px 4px;
background-image: url("../images/container.gif");
}



#header
{
float: left;
width: 100%;
height: 128px;
background: url("../images/header.gif") repeat-x 0 28px;
}

#box1, #box3
{
float: left;
height: 15px;
width: 104px;
padding: 4px 0;
background-color: #e1e1e1;
border-bottom: 1px solid #d2d2d2;
}

#box2
{
float: left;
height: 15px;
width: 490px;
margin: 0 1px;
padding: 4px 0;
background-color: #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}

CSS off HabboHut coded by Eliterate
* {margin: 0px 0px; padding: 0px 0px;}
html, body {width: 100%; height: 100%; text-align: center;}
body {background: #94deef url('../../images/layout/backgrounds/02.gif') repeat-x bottom left fixed; font-family: verdana, havana, sans-serif; font-size: 11px;}

a img {border-width: 0px;}
a, a:visited {color: #6ba719;}
a:hover {text-decoration: none;}

#clouds {z-index: 5; position: absolute; top: 15%; height: 328px; width: 100%;}
#container {border-left: 2px #000 solid; border-right: 2px #000 solid; margin: 0px auto; background-color: #fff; text-align: left; width: 900px; min-height: 100%; z-index: 10; position: relative;}
#header {width: 100%; height: 142px; border-bottom: 2px #000 solid; background: url('../../images/layout/logo_background.png') repeat-x;}
#logo {float: left; width: 246px; height: 142px; background: url('../../images/layout/logo.png') no-repeat;}
#radio_stats {float: right; padding: 10px 10px;}
#radio_stats #show_stats {border: 2px #000 solid; background-color: #fff; width: 600px; min-height: 118px; max-height: 118px; overflow: auto;}
#radio_stats #show_stats #show_radio_stats {padding: 10px 10px;}
#radio_stats #show_stats #show_radio_stats .heading {border-bottom: 1px #bbb solid; background-color: #efefef; font-weight: bold; padding: 4px 4px; margin-bottom: 10px; color: #5b5b5b !important;}
#radio_stats #show_stats #show_radio_stats #radio_view {float: left; border-right: 1px #ccc dashed; padding-right: 10px; width: 350px;}
#radio_stats #show_stats #show_radio_stats #radio_info {margin-left: 360px; padding-left: 10px;}

#navigation {background-color: #efefef; border-bottom: 1px #bbb solid; padding: 10px 10px; text-align: center; font-weight: bold; clear: both;}
#navigation a, #navigation a:visited {text-decoration: none; color: #505050; padding: 4px 4px;}
#navigation a:hover {color: #000;}
.prototip {position: absolute;}
.prototip .navigation {width: 175px; text-align: left;}
.prototip .navigation .content {border: 1px #bbb solid; background-color: #efefef; border-top-color: #efefef;}
.prototip .navigation .content ul {list-style-type: none;}
.prototip .navigation .content ul li {display: block; padding: 5px 5px;}
.prototip .navigation .content ul li a, .prototip .navigation .content ul li a:visited {text-decoration: none; color: #606060;}
.prototip .navigation .content ul li:hover {background-color: #ccc;}

#content {padding: 10px 10px 17px; position: relative;}
#left {float: left; width: 200px;}
#right {margin-left: 210px;}
#sub-navigation, .sub-section {background-color: #00a2dd; border-bottom: 1px #007aaa solid; padding: 5px 5px; color: #fff; font-weight: bold;}
#left a, #left a:visited {display: block; padding: 5px 5px; border-bottom: 1px #ccc dashed; text-decoration: none; color: #444;}
#left a:hover {border-bottom: 1px #007aaa solid;}

h1 {margin-bottom: 10px; padding-bottom: 5px; color: #707070; border-bottom: 1px #ccc dashed;}
p {margin-bottom: 10px;}
ul {list-style-type: none;}
ul li {padding: 5px 5px;}
ul li.alt {background-color: #e5e5e5;}

I only did a snippet for the CSS.

HTML off a Layout coded by iszak
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="styles/reset.css" rel="stylesheet" type="text/css">
<link href="styles/print.css" rel="stylesheet" type="text/css">
<link href="styles/layout.css" rel="stylesheet" type="text/css">

<meta name="robots" content="index, nofollow">
<meta name="author" content="Author">

<title>Site Name - Site Slogan</title>
</head>
<body>
<div id="container">
<div id="header">
<p id="box1">Lorem Ipsum</p>
<p id="box2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras amet.</p>
<p id="box3">Lorem Ipsum</p>
</div>


<div id="subcontainer">
<p id="box4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis massa quam, volutpat ut, varius sed, scelerisque.
</p>

<div id="box5">
<iframe src="content/home.html" name="content"></iframe>
</div>

<div class="column">
<div class="box">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mattis sem ac dui euismod vulputate. Sed imperdiet enim sed risus.
</p>
</div>

<div class="box">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mattis sem ac dui euismod vulputate. Sed imperdiet enim sed risus.
Integer quam. Cras lacus eros, elementum eget, posuere at, imperdiet eu, odio. Vestibulum ultrices. Fusce vel sed.
</p>
</div>

<div class="box" id="blue">
<p></p>
</div>
</div>

<div class="column" id="right">
<div class="box">
<h1>Lorem Ipsum</h1>
<ul>
<li class="dark">Aliquam tempus nibh non est.</li>
<li class="light">Sed varius ipsum vel nisl.</li>
<li class="dark">Nam volutpat varius sapien.</li>
<li class="light">Vestibulum luctus odio sed sem.</li>
</ul>
</div>

<div class="box">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ornare ipsum a erat. Nunc tempor metus.
</p>
</div>

<div class="box">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer quam in nisl. Fusce diam sem, tristique vel, mollis vitae,
elementum ac, arcu. Ut tempor. In adipiscing justo ac dui amet.
</p>
</div>
</div>
</div>

<div id="clear"></div>
</div>



<p id="footer">
Copyright &copy; <?php echo date("Y"); ?> SiteName.com
</p>
</body>
</html>

HTML off Habbohut coded by Eliterate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HabboHut</title>

<!-- Meta Content -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="HabboHut" />
<meta name="description" content="HabboHut is the first Habbo Hotel International Radio Fansite! HabboHut includes great content, awesome DJ's and lots more!" />
<meta name="keywords" content="habbo, habbo hotel, hotel, boards, hut, the hut, habbo au, habbo ca, official, fansite, habbo us, habbo sg" />

<!-- Stylesheets -->
<link href="/library/css/layout.css" type="text/css" rel="stylesheet" />

<!-- JavaScript -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiLKrVU9YDqW1T0vE_aqk6hQRm1E5AJuf v6kDsoZoQkUCXJh79BQ-79ylGBKsugkmDm3yXPnWM38MzA"></script>
<script type="text/javascript" src="/library/javascript/prototype.js"></script>
<script type="text/javascript" src="/library/javascript/scriptaculous.js"></script>
<script type="text/javascript" src="/library/javascript/prototip.js"></script>
<script type="text/javascript" src="/library/javascript/global.js"></script>
<script type="text/javascript" src="/library/javascript/gfeedfetcher.js"></script>
<script type="text/javascript" src="/library/javascript/gajaxticker.js"></script>

</head><body>
<div id="black-underlay" style="display: none;">
<div id="content-overlay" style="display: none;"></div>
</div>

<div id="clouds">
<marquee direction="right" scrollamount="2">
<img src="images/layout/clouds.png" alt="" />
<img src="images/layout/clouds.png" alt="" />
</marquee>
</div>

<div id="container">
<div id="header">
<div id="radio_stats">
<div id="show_stats">
<div id="show_radio_stats"><span id="stats">Loading...</span></div>
<div class="spacer"></div>
<div align="center">
<object type="application/x-shockwave-flash" width="130" height="16" data="http://habbohut.com/content/radio/player/xspf_player_slim.swf?playlist_url=http://habbohut.com/content/radio/player/playlist.xspf&autoplay=true&volume_level=50">
<param name="movie" value="http://habbohut.com/content/radio/player/xspf_player_slim.swf?playlist_url=http://habbohut.com/content/radio/player/playlist.xspf&autoplay=true&volume_level=50" />
<param name="autoplay" value="true"/>
<param name="quality" value="high"/>
</object></div>
</div>
</div>
<a href="/"><div id="logo"></div></a>
</div>

<div id="navigation">
<a href="javascript:content('home.php');" id="home">Home</a>
<a href="/board" id="boards" target="_blank">Discussion Boards</a>
<a href="javascript:content('habbohut+about_us.php');" id="habbohut">HabboHut</a>
<a href="javascript:content('radio+promotions.php');" id="radio">Radio</a>
<a href="javascript:content('community+events_timetable.php ');" id="community">Community</a>
<a href="javascript:content('magazine+about.php');" id="magazine">Magazine</a>

<script type="text/javascript">
new Tip('habbohut', '<ul><li><a href="javascript:content(\'habbohut+about_us.php\');">About Us</a></li><li><a href="javascript:content(\'habbohut+jobs.php\');">Jobs</a></li><li><a href="javascript:content(\'habbohut+staff.php\');">Staff</a></li><li><a href="javascript:content(\'habbohut+news.php\');">News and Updates</a></li><li><a href="javascript:content(\'habbohut+contact_us.php\');">Contact Us</a></li></ul>', { className: 'navigation', effect: 'blind', fixed: true, offset: { x: 0, y:27 }, hideOn: false, hideAfter: .2 });
new Tip('radio', '<ul><li><a href="javascript:content(\'radio+timetable.php\');">Timetable</a></li><li><a href="javascript:content(\'radio+requests.php\');">Requests/Shoutouts</a></li><li><a href="javascript:content(\'radio+promotions.php\');">Upcoming Promotions/Shows</a></li></ul>', { className: 'navigation', effect: 'blind', fixed: true, offset: { x: 0, y:27 }, hideOn: false, hideAfter: .2 });
new Tip('community', '<ul><li><a href="javascript:content(\'community+events_timetable.ph p\');">Events Timetable</a></li><li><a href="javascript:content(\'community+rare_values.php\');">Rare Values</a></li><li><a href="javascript:content(\'community+faqs.php\');">HabboHut FAQs</a></li></ul>', { className: 'navigation', effect: 'blind', fixed: true, offset: { x: 0, y:27 }, hideOn: false, hideAfter: .2 });
new Tip('magazine', '<ul><li><a href="javascript:content(\'magazine+about.php\');">About the Magazine</a></li><li><a href="javascript:content(\'magazine+submit_article.php\' );">Submit an Article</a></li><li><a href="javascript:content(\'magazine+issues.php\');">Issues</a></li></ul>', { className: 'navigation', effect: 'blind', fixed: true, offset: { x: 0, y:27 }, hideOn: false, hideAfter: .2 });
</script>
</div>

<div id="content"><script type="text/javascript">content('home.php');</script></div>
<div style="clear: both;"></div>
<div id="ticker"><script type="text/javascript">

var socialfeed=new gfeedrssticker("example2", "example2class", 3000, "")
socialfeed.addFeed("AU", "http://www.habbo.com.au/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("UK", "http://www.habbo.co.uk/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("CA", "http://www.habbo.ca/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("US", "http://www.habbo.com/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SG", "http://www.habbo.com.sg/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label itemtitle snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(25, "date") //Show 15 entries, sort by label
socialfeed.entries_per_page(1)
socialfeed.init() //Always call this last

</script></div>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/*********"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-1157221-1
");
pageTracker._trackPageview();
</script>

</body>
</html>
Jackboy
02-01-2009, 09:31 PM
Iszak is better. It's not all about CSS. CSS is a minor part in my opinion.

I hate Turbocom, but I do agree with him :P

Also, Iszak indents his code.. I have seen it. Copy & paste properly next time please babes.
Alexz0r
02-01-2009, 09:33 PM
Iszak is better. It's not all about CSS. CSS is a minor part in my opinion.

I hate Turbocom, but I do agree with him :P

Also, Iszak indents his code.. I have seen it. Copy & paste properly next time please babes.

There is indents, but there not showing up, same with eliterates coding.
Iszak
02-01-2009, 09:37 PM
Also I usually add padding: 0; and margin: 0; on my body. As for that, here's some inefficiencies in Eliterate's code.



a img {border-width: 0px;}
a, a:visited {color: #6ba719;}
can be


a img {border: none;}
a {color: #6ba719;}
furthermore



* {margin: 0px 0px; padding: 0px 0px;}
#radio_stats {float: right; padding: 10px 10px;}
.prototip .navigation .content ul li {display: block; padding: 5px 5px;}
#radio_stats #show_stats #show_radio_stats {padding: 10px 10px;}
is the same as



* {margin: 0; padding: 0;}
#radio_stats {float: right; padding: 10px;}
.prototip .navigation .content ul li {display: block; padding: 5px;}
#radio_stats #show_stats #show_radio_stats {padding: 10px;}
I'm sure I can find more.
Jackboy
02-01-2009, 09:37 PM
There is indents, but there not showing up, same with eliterates coding.

Okay. Don't change anything.

OH WAIT. In a mintue we will get all the coders with huge egos posting about Iszak like usual :D
Alexz0r
02-01-2009, 09:46 PM
I'm still pretty sure Eliterates better. If not HTML then PHP I'm pretty sure.
Decode
02-01-2009, 09:50 PM
Iszac is better.
Jackboy
02-01-2009, 09:51 PM
I'm still pretty sure Eliterates better. If not HTML then PHP I'm pretty sure.

Alex mate. Stick to what you're good at, designing layouts, then learn PHP and start talking about who is better. x
Eliterate
02-01-2009, 09:54 PM
Actually, just to defend my thoughts in coding,

'border' is used to hold all characteristics of a border, ie: border: 1px #000 solid;
while border-width just defines the width. Therefore producing cleaner and easier to understand code.

As for paddings and margins, you should always define a unit of measure.
Just as a practice, I always use two measurements when defining because I could change at anytime, so it's already there.

Much of what you have been pointing out isn't wrong, it's just a different practice.
--ss--
02-01-2009, 10:00 PM
People have different styles of coding.
Alexz0r
02-01-2009, 10:02 PM
People have different styles of coding.

Yes, I understand that but surely one would be more accurate.
Invent
02-01-2009, 10:02 PM
Alex mate. Stick to what you're good at, designing layouts, then learn PHP and start talking about who is better. x

I could say the same to you, bar the part about designing.
Iszak
02-01-2009, 10:03 PM
If we want to be picky, good practice also includes using margin-left, margin-right, etc which we both don't use all the time. I don't think it's good practice but more personal preference. As for the border - I think it's more clear having border: none; than border-width: 0px; or what ever. As for the units in fonts, again if you want to get picky you should use percentages or ems or even the word sizes like small/medium/etc because pixels and points have scalability issues.
Eliterate
02-01-2009, 10:05 PM
That's true. But I think we stick to what works. The only thing I suggest to your coding is to have your <title> immediately follow your <head>. Better Optimization.
Iszak
02-01-2009, 10:07 PM
I hardly think it's that important to be honest. You should remove comments has that's extra bytes which increases the loading time. You also use XHTML 1.0 which you should read up on www.webdevout.net/articles/beware-of-xhtml (http://www.habboxforum.com/www.webdevout.net/articles/beware-of-xhtml)

Also - Include Javascript at the end of the page as a study from Yahoo found it to load quicker that way.
Eliterate
02-01-2009, 10:11 PM
Well I didn't code the majority of that layout. It was mostly the tech team of HabboHut.
Jackboy
02-01-2009, 10:12 PM
I could say the same to you, bar the part about designing.

Okay thanks Simon. Your opnion is really appreciated. Can't really say you're one of the members on here I look up to, so your opinion has been disregarded.

Thanks for your constuctive criticism. I'm glad you think my designings good :D
Alexz0r
02-01-2009, 10:13 PM
Well I didn't code the majority of that layout. It was mostly the tech team of HabboHut.

Oh, it looked similar to your coding on the free layouts you had awhile ago, so I just assumed.
Eliterate
02-01-2009, 10:14 PM
You mean those layouts from 5+ months ago and that were made almost 9+ months ago :P I have changed in almost the year it's been :P
Iszak
02-01-2009, 10:14 PM
Well I didn't code the majority of that layout. It was mostly the tech team of HabboHut.

Right, if you didn't code it why are we arguing, I hate wasting precious time.
Eliterate
02-01-2009, 10:15 PM
I wasn't arguing, I don't see a need to argue, I was pretty sure we were giving each other tips. Or that was my assumption.
Jackboy
02-01-2009, 10:16 PM
I wasn't arguing, I don't see a need to argue, I was pretty sure we were giving each other tips. Or that was my assumption.

Na it looked like a formal argument to me :P
Iszak
02-01-2009, 10:16 PM
I don't need tips :P The things that we 'disputed' on was more of personal preference not more so tips.
Alexz0r
02-01-2009, 10:18 PM
You mean those layouts from 5+ months ago and that were made almost 9+ months ago :P I have changed in almost the year it's been :P

Well as you probably are able to tell, I'm not such a great coder (as in I can't code at all). I don't look into the details, basically I just looked at the CSS from the red layout and the HabboHut layout and seeing as your the only one I remember that did CSS like that I just assumed. :P
RyanDOT
02-01-2009, 10:19 PM
iszak is better in my opinion.
timROGERS
02-01-2009, 10:28 PM
I have no interest in entering the argument over who is better, but I have a question for Iszak. In your CSS, you've put some off the styling under the html tag as opposed to the body tag - what is the point in this when all your content appears under the body tag?

Maybe I'm being stupid here, or maybe it's just your coding style ;)
Iszak
02-01-2009, 10:30 PM
Good question timRogers well firstly you have border: none; - this is to remove a border in IE6, you may not notice it, but I remove it. Secondly the overflow: auto; removes the scroll bar (until needed) in Internet Explorer, making it look nicer.
Alexz0r
02-01-2009, 10:47 PM
So in conclusion; xD
Cushioned
03-01-2009, 12:00 AM
So in conclusion; xD

Iszak pwnz0rz Eliterate.
Trigs
03-01-2009, 04:08 AM
Isazak's is easier to read, that's for sure.
Turbocom
03-01-2009, 05:35 AM
Jackboy, I hate you too.

Iszak's coding pwns
Agnostic Bear
03-01-2009, 05:43 AM
All of you shut up, both of their coding styles suck, mine is far superior you are all peasant coders compared to me.

Seriously enough with "which style is better" any style is acceptable as long as the developer can understand it 2 months down the line.

Heads need to be torn from asses here.
Cushioned
03-01-2009, 07:55 AM
All of you shut up, both of their coding styles suck, mine is far superior you are all peasant coders compared to me.

Seriously enough with "which style is better" any style is acceptable as long as the developer can understand it 2 months down the line.

Heads need to be torn from asses here.

Gave me a chuckle in RL. +REP for that mate.

EDIT: Hmm... Have to spread - Don't remember ever repping you but w.e Added to sig.
Jahova
03-01-2009, 08:31 AM
Any style is fine aslong as it works the way it's supposed to in all browsers and can be read by the developer anytime he wants. If it's just a huge mess then it's useless.

As far as the HTML coding, many people learn to code in different ways. I personally use HTML tidy alot to clean up my HTML, but it's your decision.
Jackboy
03-01-2009, 02:58 PM
All of you shut up, both of their coding styles suck, mine is far superior you are all peasant coders compared to me.

Seriously enough with "which style is better" any style is acceptable as long as the developer can understand it 2 months down the line.

Heads need to be torn from asses here.

Lmao at the first line.
RichardKnox
04-01-2009, 12:22 AM
As Dan says it works as long as you understand it 2 months, a year, 5 years down the line although if you are doing it on that basis you really should comment your code as fair enough on a habbo layout it may be easy enough to understand but when you get to 3/4 column layouts that are reasonably complicated comments allow yourself an easy start and end to each section.

Want to hide these adverts? Register an account for free!